Design Services

Logo & corporate stationery design

Project shown is Fox IT

Design Services

Logo, business cards, website & brand guidelines

Project shown is Jarred Consulting

Website Design

User friendly websites

Project shown is Firstford

Build your website

I build most websites using WordPress*, an open source content management system, so that you have full control over your website content. Every website I build is, by default, optimised for search engines and built to be responsive.

Design your branding

I can manage the branding process for your business, whether it be a new logo, or a full set of branded business stationery and digital designs. You may want a cohesive set of branded social media accounts, or a design for your fleet of vehicles.

Market your business

Your new website will only feel like a good return on investment if you get enquiries or orders from it. It’s a good idea to budget for at least 2-3 months SEO marketing to build your search traffic.

Contact me to discuss your next creative project

Contact me →

Recent posts

Wordpress and design blog posts


Node js

How to run a Node js file

Sometimes it’s the obvious things that trip you up….. I went through the process of installing and setting up Node js, created my first Node app and all was fine. When I came back to that project a few weeks later (Node.js is something I use intermittently) I couldn’t remember how to run it. After Googling “how to run Node js file” I found loads of others asking the same question. So, whether you want to run your Node js file in Terminal, or in Command, or in the Visual Studio Code terminal here’s how you do it.

  1. Open your Terminal / Command / Git Bash / Visual Studio Code Terminal window
  2. Change the location to your node project
  3. Type node filename.js

And that’s all there is to it. So if your file is called app.js you would type node app.js. If your file is called search.js then you’d type node search.js.

If you need a little more info than that to set up your project and run the Node js file, then check out the info here. However this does still presume that you already have Node installed…..

How to check if you have Node installed

Yep, I have had to do this on more than one occasion too. In order to check if you have Node js installed, follow these steps:

  1. Open your command line tool (as above, Terminal, Command, Git Bash etc.)
  2. Type node -v
  3. This will print a version number if you do have node installed

You can see in this image the line where I’ve typed node -v and then pressed return, and then the subsequent response of the version number. You can use this for any npm package as well by typing packagename -v to find out if it’s installed, and if so, what version you have.

how to check if you have node installed
Microsoft Powerapps examples getting started
Apps, Powerapps Examples

Getting started with Microsoft PowerApps examples

Up until now I normally build apps using Xamarin or using Expo and React Native. But I recently had to build an app using Microsoft PowerApps and SharePoint Lists, and after I’d built this particular app I had a list of things I wish someone had told me before I’d started. PowerApps can be great, but it has it’s quirks, so grab any tips you can to make the process smoother. I’ve written a summary of how I dealt with each as I didn’t find that many Microsoft PowerApps examples that covered these particular topics when I was starting out. I’ll cover a few tips on:

  1. PowerApps formatting and styling, such as setting custom fonts, colors and sizes
  2. Making and using PowerApps groups, containers, and reusable components
  3. General PowerApps Examples and tips

PowerApps formatting and styling

You don’t have stylesheets when you’re working in PowerApps but there are some tricks which you can implement when you start building your app which give you some of the benefits of a stylesheet. You create a page which doesn’t actually form any visible part of your app. Call it Settings or something similar, and then plan to add one example element of each key part of your app in terms of styling. So a main header, a subtitle, a button, and include a label for each of the colours that you’ll use in your app. Whatever you name them in the treeview can be used as a style reference in the rest of the app. Here’s a demo to show you what I mean:

PowerApps style settings to save repetition

PowerApps components, containers and groups

These are the three ways of ‘grouping elements’ in Powerapps and each way has its pros and cons. Starting from the simplest:

  1. Groups – select multiple elements and right click, then click Group. Quick and easy, but element positions are still relative to the page, not the group. So forget doing any dynamic positioning or visibility changes with a group, as you’ll have to apply any setting to each item in the group separately and you’ll rapidly lose your mind.

    Use for: Simple scenarios where drag and drop positioning once is all you need

  2. Containers – right click a group and click add to container. This creates a little world for the grouped elements…. positions are relative to the container itself rather than the page. You can apply dynamic positioning and visibility changes to the container, i.e. setting the container property Visible to false will hide the container and everything in it.

    Use for: Modals, notification messages, some navigation elements like sidebars

  3. Components – I feel like these promise a lot but slightly fail to deliver what we really need. I’ll start with the positives. You can create a component which can then be placed on multiple pages of your app. When you update the component, all instances are updated. All good. However, you can’t interact with items on the page from items in the component (sort of), and you can’t update a global variable from within a component.

    Use for: Navigation elements, any repeating element that doesn’t need to raise more than one event to the screen

Other Microsoft PowerApps examples and tips

  1. Scrollable screens – Bear in mind if you want your screen to be scrollable in PowerApps you have to decide this at the beginning. A screen is either scrollable or not, and you can’t change screen types on the fly. Worth knowing before you get half way through!

  2. Avoid spaces in any naming, both in SharePoint columns, and elements in PowerApps. Be grateful if you never know the pain caused by not following this rule.

  3. If you have applied any dynamic positioning or sizing on an element DO NOT drag it around to move it. All dynamic positioning info will be lost! Only modify the position in the code.

I’m planning on writing a few blog posts focusing on some other areas that warrant a whole post to themselves – simple navigation in PowerApps, working with SharePoint lists, amongst others. Let me know if there is anything you would like me to cover.

how to run an expo app on an android emulator on a PC
Apps

How to run an Expo app on an Android emulator

When developing an Expo app on a PC you need to be able to run the app on an Android emulator as you don’t have any iOS simulators to work with like you do on a Mac. I found the Expo instructions a little lacking in some detail, and as a Windows PC user primarily, I struggled to find all the information I needed in one place, to run my Expo app in an Android Emulator.

I’m presuming at this point that you’ve created an Expo project, and built your Expo app. You’ll need to download Android Studio and install it, and have at least one emulator configured.

So, to run your Expo app in an Android emulator :

  1. Start Expo by typing expo start on the command line.
  2. Open Android Studio.
  3. Open your project in Android Studio.
  4. Open the ‘AVD manager’ from the Android Studio toolbar.
  5. Run an Android emulator.
  6. Click ‘run on Android device/emulator‘ in the Expo client.

From Android Studio here is the open AVD Manager button:

To run an Android Emulator, click the play symbol next to the one you want to use from the AVD Manager window:

There’s a few problems you can find with each step, so here’s a few things to bear in mind if any of the above steps don’t work.

If you see this message:

“Couldn’t start project on Android: No Android connected device found, and no emulators could be started automatically. Please connect a device or create an emulator (https://docs.expo.io/workflow/android-studio-emulator). Then follow the instructions here to enable USB debugging: https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select “Use custom Android SDK tools”, and point it at your Android SDK directory.”

…it means that steps 2 and 3 probably haven’t been done. It’s not a particularly obvious message and you’d be surprised ho easy it is to forget both steps.

If you see a message saying:

Couldn’t adb reverse: device ‘adb’ not found

… most of the time if I ignore this and click ‘Run in Android Emulator’ again after a few seconds it runs just fine.

Here is a link to React Native and Expo books on Amazon – I may receive an affiliate commission if you buy anything after clicking on this link.

Apps

How to build a React Native Expo app on a PC

One of the big advantages of Expo is that you can build for iOS on a PC. However, the answer to the question ‘how to build an expo app on a PC’ whilst well documented here, also contained lots of info I didn’t need as I was already set up with certificates in my Apple developer account, and was only publishing for iOS. So this is a more condensed overview for anyone wanting to build an Expo standalone iOS app using a PC.

Before you follow these steps I have presumed that as a Windows user you’ve already installed the WSL as outlined here. I’m also presuming that you’ve built an Expo app, and that you have an Apple Developer account. Once you have then you’re ready to build your Expo app.

  1. Open Powershell as administrator by right-clicking the Powershell icon and selecting ‘run as administrator’
  2. Type – Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
    Restart PC (I’m not totally sure this is necessary, do your own tests!)
  3. Open git bash at the project root
  4. Type expo build:ios

Please note if you see a message saying “Additional information needed to setup credentials in non-interactive mode.” use CMD instead. I have seen lots of info saying don’t use Git Bash for this, but honestly on my PC it seems a bit hit or miss. Rule of thumb is try both!

Build your Expo App on the PC

Open CMD, navigate to project root, run expo:build:ios.

Let Expo manage the process for you and as long as you had all your profiles and certificates set up ok in your Apple Developer account then Expo should be able to put it all together. Once the Expo build process starts, it will ask you a series of questions, the first one asks you what kind of build you want – choose Archive if you want to upload this to TestFlight and run this on a device.

expo build on pc what type archive or simulator

Next, the Expo build process will ask you for your Apple account credentials:

expo build on pc apple account credentials

Once it’s complete you’ll see a message saying that your build is queued. There’s a link provided in the output which will let you both see the progress of your Expo build and download the IPA file once it’s finished, from the Expo website.

Expo credentials manager

If there are any issues with any stage of this and you need to take a look at the certificates and provisioning profiles that Expo is trying to use, then go to expo credentials:manager and follow the on-screen prompts. You can remove the certificates it’s trying to use and start the whole process again. This Expo page is really useful as it explains what each bit is for clearly.

Uploading the IPA file to TestFlight and the App Store

Now that you’ve downloaded your IPA file you are ready to submit it to the app store and / or TestFlight. And here’s where the wheels fall off a bit if you are trying to build your iOS Expo app using a Windows PC. You can get this far but to upload the IPA file you HAVE to use Transporter, and that only runs on a Mac. I find it a huge shame that you can’t do this any other way, but for now you’ll have to find a friend with a MAC to get your IPA file to Apple.