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


Git

Git delete branch – how to delete a branch in git

If you follow a typical git workflow you will probably have been developing each feature, or fixing each bug, on it’s own branch, and then merging each branch into a central development branch in the remote repo. In this kind of scenario at the end of a project you may have many local branches that are left over from this process. And now you need to delete both the local branch and the remote branches (as long as they’ve been merged!). In this post I’ll cover how to delete a branch in git – more specifically how to delete a local git branch, and how to delete a remote git branch.

How to delete a local git branch

Before you delete a local branch you need to be very sure that you have the name spelled EXACTLY right. It’s useful to see all your local git branches using the git branch command, so you can see a list of them and make a note of the name of the branch you want to delete.

use git branch to see all branches

Even more useful though is this command:

git branch --merged

…. which will show all the branches that have been merged into the current one.

Let’s say that we want to delete the branch that’s called feature-12 from the list shown in the image above. You can see that main is highlighted in green, and that it has an asterisk next to it – that’s telling us that we are currently on the branch called main. We can now run the command to delete the local branch feature-12 as follows:

git branch -d feature-12

It’s the -d flag that tells git to delete the local branch specified. So to delete a branch called temp-develop, for instance, you would type:

git branch - d temp-develop

And as long as that has been deleted ok you’ll see a simple message saying ‘Deleted branch feature-12 …‘ confirming it worked fine.

When can’t you delete a branch

  1. You can’t delete a branch that you’re already on – so change branches and then delete it.
  2. You can’t delete a branch if it contains work that hasn’t been checked in – so you should commit and push the changes, or stash them, or discard them.

Force delete a branch with work that isn’t checked in

You can use the -D flag to force deleting a branch even with work that isn’t checked in.

force delete a local branch with unsaved changes

How to delete a remote git branch

You can delete a remote git branch from the command line by using this command:

git push origin --delete branchNameHere

So if we were deleting a remote branch called bugfix-CA619 we would type:

git push origin --delete bugfix-CA619

Summary

So now you know how to delete both local and remote git branches, and you know how to force delete, although I would very much recommend not doing this as you could lose unsaved changes!

Git bash

How to change the display name in Git bash

I share screen shots quite a lot in my blog posts and got fed up of needing to blur the user name information from my Git bash terminal screenshots. So I customized the shell prompt text, and here is how you can do the same by editing the git-prompt.sh file.

What is the git-prompt.sh file?

The git-prompt.sh file contains all of the configuration information for the Git bash terminal and the prompt itself.

If you open that file you will notice between lines 8 and 11 if does a test to see if a file exists here – ~/.config/git/git-prompt.sh and if it does then it loads the configuration data from there instead of this default file.

  1. Find out where Git bash is installed on your system. You might need to search for gitbash.exe but on my system it was here – C:\Program Files\Git
  2. Now you want to navigate to the subfolder \etc\profile.d and find the file called git-prompt.sh. Open it in notepad or Vs Code as we are going to edit it.

Creating a custom configuration file

The ~ part of that file path refers to the folder relating to your username so it will be something like C:\Users\johndoe\. There was already a .config folder, so I created a git folder within that. You should then copy the default git-prompt.sh file from here:

C:\Program Files\Git\etc\profile.d

… and place the duplicate in the folder you just created at:

C:\Users\johndoe\.config\git

Now we can edit that file, leaving the original default version alone, and when you start Git bash from now on it will take the configuration from your new customised file. If you ever want to roll back to the original you can just delete your customised file and Git bash will revert to using the original, untouched file.

Editing the file to customise the text

We need to remove the if then else statement that looks for this custom file, otherwise Git bash will just crash when you try and run it. All I’ve done here is remove that block and then edit the cursor text to say brainstorm, so you could copy this text to use as the starting point for your custom file.

if test -f /etc/profile.d/git-sdk.sh
then
	TITLEPREFIX=SDK-${MSYSTEM#MINGW}
else
	TITLEPREFIX=$MSYSTEM
fi


	PS1='\[\033]0;$TITLEPREFIX:$PWD\007\]' # set window title
	PS1="$PS1"'\n'                 # new line
	PS1="$PS1"'\[\033[32m\]'       # change to green
	PS1="$PS1"'brainstorm '        # user@host<space> ----- this is where I have edited the name
	PS1="$PS1"'\[\033[35m\]'       # change to purple
	PS1="$PS1"'$MSYSTEM '          # show MSYSTEM
	PS1="$PS1"'\[\033[33m\]'       # change to brownish yellow
	PS1="$PS1"'\w'                 # current working directory
	if test -z "$WINELOADERNOEXEC"
	then
		GIT_EXEC_PATH="$(git --exec-path 2>/dev/null)"
		COMPLETION_PATH="${GIT_EXEC_PATH%/libexec/git-core}"
		COMPLETION_PATH="${COMPLETION_PATH%/lib/git-core}"
		COMPLETION_PATH="$COMPLETION_PATH/share/git/completion"
		if test -f "$COMPLETION_PATH/git-prompt.sh"
		then
			. "$COMPLETION_PATH/git-completion.bash"
			. "$COMPLETION_PATH/git-prompt.sh"
			PS1="$PS1"'\[\033[36m\]'  # change color to cyan
			PS1="$PS1"'`__git_ps1`'   # bash function
		fi
	fi
	PS1="$PS1"'\[\033[0m\]'        # change color
	PS1="$PS1"'\n'                 # new line
	PS1="$PS1"'$ '                 # prompt: always $

MSYS2_PS1="$PS1"               # for detection by MSYS2 SDK's bash.basrc

# Evaluate all user-specific Bash completion scripts (if any)
if test -z "$WINELOADERNOEXEC"
then
	for c in "$HOME"/bash_completion.d/*.bash
	do
		# Handle absence of any scripts (or the folder) gracefully
		test ! -f "$c" ||
		. "$c"
	done
fi

I’ll be following up with another post soon about how to customize the Git bash terminal colours.

tailwind colors
Tailwind

Tailwind CSS – what is it & how to use it with React?

I decided to try out Tailwind CSS recently on a side project, just to see what it’s like to work with as I’d heard so many people discussing it. ‘Tailwind’ consists of three separate parts – Tailwind CSS, Headless UI, and Tailwind UI. Tailwind CSS has been made to be used both with HTML and with React or Vue – in this post I’ll focus on the Tailwind React combination, only using Tailwind CSS, I’ll walk through building a very simple form using React, and then installing Tailwind CSS and using it for all the styling.

What is Tailwind css?

Tailwind CSS is a CSS framework. It’s free, you can install it using an npm command on one line, and then start using it straight from your html. It’s very quick to set up and pretty quick to learn too, providing a great way of theming a new website or app quickly.

What is Headless UI

Headless UI is a collection of un-styled components for React and/or Vue which have been built to work specifically with Tailwind CSS.

What is Tailwind UI?

Tailwind UI is a suite of components built to work directly out of the box with Tailwind CSS. It’s a suite of fully styled components already built and ready to use out of the box. If you are a Saas developer this can save you hours and hours of time. This package costs money, but from what I’ve seen the benefit quickly outweighs the price tag.


Using Tailwind CSS with React – install & configure

To get started I created a new React app and then installed Tailwind CSS and all it’s dependencies according to the documentation, which overall I found really clear. :

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

You should check here though as the version numbers in that will likely change soon. Continuing to follow the Tailwind CSS installation instructions on that page I also installed Craco :

npm install @craco/craco

I always run npm start between each step when I’m setting up a project, just to make sure that nothing fundamental is broken, and that the React app still loads ok.

Next I updated the package.json scripts as per the instructions, so that they look like this:

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

… created a craco.config.json file like this:

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Finally I ran this command to create a tailwind.config.json file.

npx tailwindcss-cli@latest init

Using Tailwind CSS in React code

Now that we’ve finished setting up Tailwind CSS in the React app it’s time to start writing some code and designing the UI. I went straight into the first bit of documentation presented to me after set up – https://tailwindcss.com/docs/utility-first – and grabbed the html from there to use in the header of the Twitter utility app I’m building. I just changed the two bits of text and the logo (I’ve made a quick and dirty logo just for something to use here). It’s not that pretty is it?! But it tells us that Tailwind is working, because the styles have been applied…. and I didn’t have to write a single line of CSS to get there which is a great start! This is what the code is at this point :

import logo from "./img/twitter-tool-logo.png";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
          <div className="flex-shrink-0">
            <img className="h-12 w-12" 
    			src={logo} alt="Twitter Tools logo" />
          </div>
          <div>
            <div className="text-xl font-medium text-black">
              Twitter Tools
            </div>
            <p className="text-gray-500">
              Useful Twitter developer utility app
            </p>
          </div>
        </div>
      </header>
    </div>
  );
}

export default App;

… and this is what the website looks like :

Styling a React form using Tailwind css

Now I want to add a text input, a label, and a button. I’ll be using a standard input, label and button and applying classes from Tailwind CSS to style them. To style the input, I wanted to add a border, a margin, and some padding so I searched for ‘border’ in the Tailwind css documentation and found a full list of utility classes for applying different borders. Then I repeated that for ‘margin’ and ‘padding’ and added each class as I found something close to what I was imagining. Once I’d put them together this is what it looked like :

tailwind css react form

And this is what the code for that page looks like at this point:

<div className="App">
      <header className="App-header">
        <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
          <div className="flex-shrink-0">
            <img className="h-12 w-12" src={logo} alt="Twitter Tools logo" />
          </div>
          <div>
            <div className="text-xl font-medium text-black">Twitter Tools</div>
            <p className="text-gray-500">
              Useful Twitter developer utility app
            </p>
          </div>
        </div>
      </header>

      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={name}
            onChange={handleChange}
            className="border-2 rounded-md p-2 m-3"
          />
        </label>

        <button className="btn btn-blue" type="submit">
          Button
        </button>
      </form>
    </div>

Take a look at the input from the code above :

detailed look at tailwind utility class styling an input

It contains a selection of utility classes that I picked out from the documentation, and applied them in turn until the input looked the way I wanted it to. In reality if I was building a form with many inputs I would then take those styles and use @apply in the associated css file so that I could then just apply this batch of properties in one go. If you now look at the button you can see I’ve already done just that, so the button code and css file look like this:

<button className="btn btn-blue" type="submit">
  Button
</button>

.btn {
  @apply font-semibold py-2 px-4 rounded-lg;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}

Finally I’ll add the normal handleSubmit and handleChange functions that we’d normally use in the form and will show a message after we submit the form.

import React, { useState } from "react";

import logo from "./img/twitter-tool-logo.png";
import "./App.css";

function App() {
  const [name, setName] = useState("");
  const [active, setActive] = useState(false);

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Submitted the form.");
    //now show the thank you message
    setActive(true);
  };

  return (
    <div className="App">
      <header className="App-header">
        <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
          <div className="flex-shrink-0">
            <img className="h-12 w-12" src={logo} alt="Twitter Tools logo" />
          </div>
          <div>
            <div className="text-xl font-medium text-black">Twitter Tools</div>
            <p className="text-gray-500">
              Useful Twitter developer utility app
            </p>
          </div>
        </div>
      </header>

      <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={name}
            onChange={handleChange}
            className="border-2 rounded-md p-2 m-3"
          />
        </label>

        <button className="btn btn-blue" type="submit">
          Button
        </button>
      </form>

      <p className={active ? "font-sans visible" : "font-sans invisible"}>
        Thanks for submitting the form
      </p>
    </div>
  );
}

export default App;

Now you know how to install Tailwind CSS, how to use it within a React app and how to turn collection of Tailwind CSS styles into reusable styles in your project.

Node js

Getting Twitter API data using node.js and Twitter API v2

I needed to start work getting data from the Twitter API using Node.js recently. I hadn’t used the Twitter developer API or explored any Twitter data before, so I had to learn each step and have documented the process here. If you need to know how to use the Twitter API with Node.js then this blog post will tell you what you need to know, included getting access to the API, installing the Twitter npm package, finding your Twitter API key, and using the access token to make your first request. There is a new (I am not sure how new) API being developed by Twitter – v2, and it’s this one that I’m using here.

Getting access to the Twitter API

In order to request Twitter data from the API you need to apply to get access here – https://developer.twitter.com/en/apply-for-access. This involves filling out a form within which you need to describe in basic terms what you will be using the data for. Once I’d submitted that form I instantly had access to the standard API and was shown a page which contained all the keys and id’s I might need to get data. You’ll need to save these in a secure place!

Twitter REST API keys & tokens

Once you have access to the Developer Portal you will set up a project for each app that you intend to build. If you need to find your access tokens and keys again, then in the left hand menu select Projects & Apps > your project name. You’ll see a page that will enable you to regenerate your keys and tokens if you have lost them. The Twitter api documentation describes these like this:

Specifically, keys are unique identifiers that authenticate your App’s request, while tokens are a type of authorization for an App to gain specific access to data.

Twitter API
twitter api authentication token and api keys

Setting up a blank Node JS Server

To get at the Twitter data using node.js we need to set up a new blank Node JS project. I created a new, blank Node js server following the steps on this page https://nodejs.org/en/docs/guides/getting-started-guide/.

I’m presuming you’ve worked with Node.js before and / or have a basic idea of how to get data from an API, so I’ll provide the code and there are some comments inline which help describe what each section does (If you need any help running a Node.js file read this post). I’ve left some console.log messages in here as I find them useful when creating a new endpoint and debugging.

For this endpoint you will need to provide the id of the twitter account you want to get data for. This website will help you convert a Twitter handle into a user id.

const needle = require("needle");
const express = require("express");

const id = "put-your-twitter-id-here";
const likedTweetsendpointURL = `https://api.twitter.com/2/users/${id}/liked_tweets`;
const token = process.env.BEARER_TOKEN;

function twitterRoute() {
  const tweets = new express.Router();

  // GET REST endpoint - query params may or may not be populated
  tweets.get("/", function (req, res) {
    console.log(new Date(), "In twitter route GET / req.query=", req.query);

    (async () => {
      try {
        // Make request
        const response = await getLikedTweets();

        //return result
        console.log("Tweet likes data received");
        res.json({ response });
      } catch (e) {
        console.log(e);
      }
    })();
  });

  async function getLikedTweets() {
    // The default parameters - only the Tweet ID and text are returned
    const params = {
      "tweet.fields": "lang,author_id",
      "user.fields": "created_at",
    };

    // this is the HTTP header that adds bearer token authentication
    const res = await needle("get", likedTweetsendpointURL, params, {
      headers: {
        "User-Agent": "LikedTweetsTestCode",
        authorization: `Bearer ${token}`,
      },
    });

    if (res.body) {
      return res.body;
    } else {
      throw new Error("Unsuccessful request");
    }
  }

  return tweets;
}

module.exports = twitterRoute;

Testing the endpoint

As a really simple test you can just try this endpoint in the browser and you’ll see something like this:

liked tweets twitter rest api data

How to use the Twitter data

Now you’ve got your Node.js api running and getting data from the Twitter REST api, you can consume this data from some kind of front end client, whether it be a React Native Expo app, or a web app using React js.