Have you ever got back from IKEA, full of anticipation and excitement at the thought of constructing a cupboard yourself? Only to be left questioning your life choices two hours later, when you realise you’ve put two of the panels on upside down.

This can be a similar experience when application designs are handed over to developers. Often a sizeable amount of guesswork goes into translating design documents into code. Enter design tokens. They’ll do absolutely nothing to help your wonky cupboard doors, but can greatly help designers and developers create consistent user interfaces.

It wasn’t that long ago that…

Freelancing advice

It is becoming more and more common for people to dip their feet into the world of freelancing. That usually means freelancing in your spare time, potentially juggling it with a full time job and a family.

I’m married, I have two daughters under 6, and a full time job. Spare time isn’t really something I deal in. I have tried freelancing in the past, with mixed results, and one very bad result (lots of work and no payment). Yet I felt like giving it another go.

Given my past and recent experiences; I wanted to go over some key…

DESIGN / ADOBE XD

Following on from the rather rash decision to redo my personal website (you can find part 1 here), I wanted to talk through the designs I have pulled together. I’ll outline the requirements for the design, discuss the decisions I made along the way, and highlight any tools that I used to help me.

Spoiler alert, the design is above in a cliché responsive mockup.

Requirements

There were a few key things I wanted to do with the website update, and the design needed to incorporate these in:

• Single page: I just don’t feel that the site is going to be…

Redesign / Development

It’s February. It’s 2020. I’m hoping – for the sake of my life expectancy – it’s a bit early for a midlife crisis. So instead of shopping for sports cars or training for a marathon, I’m going to give my website a refresh.

The eagle-eyed among you may have noticed that this is named “ Part 1”. The educated of you will have deduced that might mean this is the first post in a series. The optimists of you might hope that the outcome of this series is better than the Game of Thones finale.

This first post aims to…

Stuff that keeps me awake at night: my phone, my batting average in 2004, and worrying about accessibility. What if I’ve built a component that not everyone can use? We now all know that accessibility isn’t just a nice to have.

I wanted to go over my current approach for accessible focus indicators, and the journey I took to get there.

Leaving it up to the browser

Do we even need to bother, or should we just leave the browsers to it?

So the official line is that if you leave the browsers to it and don’t change the default focus indicators in any way, then…

Fish and chips, Posh and Becks, Netflix and chill. These are all things that go well together; or so I’m told. It’s time to add BEM and SASS to the list.

What are they?

• BEM (Block. Element. Modifier) is a naming methodology, which aims to solve many of the problems you’ll commonly encounter when naming classes and structuring your CSS. It also does a great job of enabling you to create reusable front end components, which is something we all strive for: to be healthy, wealthy and create reusable components.
• SASS on the other hand, stands for Syntactically Awesome Style Sheets. Way to…

I think we can all agree, naming things is hard. I’ve got two daughters, and naming them was tricky. Largely because when you name a thing that is going to outlive you, you don’t really want to name it after someone you don’t like. Turns out that I don’t like many people.

It also turns out that naming children is a walk in the park in comparison to naming colour variables. So I wanted to take some time to go over my current approach and how I’m finding it.

It’s early days, and I don’t hate it yet. …