Development

Frontend web development, from HTML, ARIA, CSS and JavaScript to Git and good development practices. A full list of categories is also available.

Alt text for CSS generated content

Article posted 11th March 2024 in Accessibility, CSS and Development

There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.
Windows high contrast mode and focus outlines or: My focus indicators were inaccessible

Article posted 22nd March 2023 in Accessibility, CSS and Development

In order to make my website’s keyboard focus outlines pretty in Safari, I inadvertently broke things for people who use Windows High Contrast Mode.
If you need a link, don’t use a button

Article posted 23rd January 2023 in Accessibility, Design and Development

Links sometimes need to look like buttons, but what about the other way round? Spoiler alert: it’s a terrible idea!
Overlapping interactive areas

Article posted 30th December 2022 in Accessibility, Design and Development

When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.
Buttons with icons and text

Article posted 29th November 2022 in Accessibility and Development

We can all agree that icon-only buttons are a bad idea, but how do we provide the most accessible experience when we pair an icon with visible text?
Accessible animated content without the compromise

Article posted 27th June 2022 in Accessibility, Design and Development

Accessible animated GIFs are rubbish. Instead of compromising our animations in order to meet WCAG, we should be checking what our users prefer.
XHTML syntax is still worth using

Article posted 11th May 2022 in Development and HTML

A few weeks ago I read an article on CSS-Tricks about writing HTML the HTML way, not the XHTML way, and it has been bothering me a bit.
Booleans in ARIA

Article posted 9th May 2022 in Development

HTML booleans are bit quirky but, as if just to complicate things, booleans in ARIA work slightly differently. It’s worth knowing how and why.
Sometimes when it’s false, it’s true

Article posted 6th May 2022 in Development and HTML

Boolean attributes in HTML are quirky, and it’s worth knowing how they work in case you end up setting one value and getting the opposite!
Always style links with a pseudo-class

Article posted 1st October 2021 in CSS and Development

Ever wondered why we have the :link pseudo-class as well as the a selector in CSS? Aren’t they doing the same thing? Turns out they’re not.
Links, missing href attributes, and over-engineered code

Article posted 30th September 2021 in Accessibility, Development and HTML

Links without an href attribute are ignored by browsers; making them ‘behave’ using JavaScript, CSS, and other HTML attributes is not a solution.
How I approach CSS: my ABC system

Article posted 3rd September 2021 in CSS and Development

CSS is easy to write but can become messy and bloated over time. A solid methodology can make maintenance much more comfortable; here’s how I do it.
Critical CSS: what it is, why it’s useful, and how it works

Article posted 19th August 2021 in CSS and Development

With Critical CSS, we can give our visitors the most important styling as early as possible and the rest when it’s ready. Here’s why and how to do it.
Using Pandoc to convert Markdown to Jira’s Textile in Sublime Text

Article posted 22nd July 2021 in Development, Markdown, Tools and Workflows

It’s a real pain that Jira’s plain text input isn’t Markdown. Here’s how to I write in Markdown and export to Jira’s version of Textile.
Downloading a website as HTML files

Article posted 8th July 2021 in Development and Tools

How do you download a website as HTML, including the CSS, JavaScript files, and image assets? Wget is the easiest way to do it; here’s what I do.
Text underline thickness on Chrome

Article posted 7th July 2021 in Development

Link underlines are thicker on Chromium-based browsers than on Safari and Firefox; so much so that they can look odd on larger text like headings.
Website version 6

Article posted 6th July 2021 in Accessibility, Design and Development

The last major version of this website was a complete behind-the-scenes rebuild. This version, on the other hand, is almost entirely visual.
Sass mixins for Increased Contrast Mode (and Dark Mode)

Article posted 22nd June 2021 in CSS and Development

When I added a high contrast version of my website I used an almost-identical Sass mixin to the one I use for Dark Mode. Here’s how it works.
Using the Increased Contrast Mode CSS media query

Article posted 21st June 2021 in Accessibility, CSS, Design and Development

Satisfying the enhanced contrast AAA WCAG rule can be limiting; luckily prefers-contrast: more allows us more freedom with our default themes.
The trouble with back links

Article posted 4th June 2021 in Development and HTML

You’d think that adding a back link to a web page would be straightforward. Well, it turn out that it’s not! Let’s have a look at three ways to do it.
Front of the frontend

Article posted 1st June 2021 in CSS, Development and HTML

Frontend development use to be simple. First it was just HTML, then it was HTML, CSS and some JavaScript; then it exploded.
Accessible responsive tables

Article posted 28th May 2021 in Accessibility, CSS, Development and HTML

Tables can be tricky to make work responsively; they can also be tricky to make accessible. Here’s a step by step guide to making your tables both!
Refining focus styles with focus-visible

Article posted 25th May 2021 in CSS and Development

:focus-visible triggers only on keyboard focus; not on click. This can make our interfaces cleaner, but should it replace :focus completely?
AVIF and WebP are not always better than PNG and JPG

Article posted 24th May 2021 in Development and Performance

AVIF and WebP are better image compression smaller files than PNG and JPG, but
Converting images to AVIF in 2021

Article posted 18th May 2021 in Development and Performance

AVIF is amazing, but the big downside is that it’s not an export option in any of my image software yet. Here’s what I’m doing in the meantime.
AVIF image compression is incredible

Article posted 17th May 2021 in Development and Performance

WebP images are now supported in all modern web browsers, but the emerging AVIF format promises to be even better; I’m pleased to tell you it is!
Using Git restore to discard changes within a file

Article posted 11th May 2021 in Development and Git

git restore is great, and one of its superpowers is its patch mode where we can restore parts of a file, rather than the whole file at once.
Undelete a file with Git

Article posted 10th May 2021 in Development and Git

I’ve talked about how great git restore is, but I missed a really obvious use of git restore: restoring a deleted file!
Be careful with strikethrough

Article posted 20th April 2021 in Accessibility, Development and HTML

Struck-through text isn’t read by screen readers. This is true of all text-level semantics, but it’s worth drawing attention to strikethough.
The difference between strikethrough and del

Article posted 14th April 2021 in Development and HTML

Just like  and , and  and , the distinction between <s> and <del> is subtle, but it’s worth knowing.
Git restore to discard changes

Article posted 13th April 2021 in Development and Git

I no longer use git checkout to switch branches; I’ve also stopped using it to discard uncommitted changes: let me introduce git restore!
Using Git switch to change branches

Article posted 12th April 2021 in Development and Git

Since upgrading to macOS Big Sur, I’ve noticed that git switch works. But why do we need it when we’ve got git checkout?
Reset to a previous commit

Article posted 29th March 2021 in Development and Git

Have you ever made a bunch of commits on the wrong branch? I certainly have… Luckily, there’s an easy way to put things right.
On not setting an upstream for short-lived branches

Article posted 17th March 2021 in Development and Git

I only set upstream Git branches when I need to push and pull a lot, otherwise I prefer to write out my target branch manually. Here’s why…
Updating Netlify deployments when renaming your main Git branch

Article posted 15th March 2021 in Development and Git

When you rename your Git branch, you’re going to need to reconfigure any Netlify deployments that are set up to watch your old master branch.
Setting an upstream Git branch

Article posted 26th February 2021 in Development and Git

There’s no such thing as syncing in Git, but setting an upstream branch is about as close as it gets.
How to rename the ‘master’ branch on GitHub

Article posted 25th February 2021 in Development and Git

So renaming master to main is a good idea, but how do we do it? Fortunately, it’s really straightforward if your repository lives on GitHub.
Empathy, and renaming my ‘master’ branch to ‘main’

Article posted 24th February 2021 in Development and Git

I’ve noticed a move towards renaming the master Git branch. It’s a racially charged term and I’m very happy to switch from master to main.
Caching fonts on Netlify

Article posted 22nd February 2021 in Development, Performance and Serverless

I’m not sure what took me so long to notice, but my website’s custom font wasn’t caching. The good news is that caching is easy with Netlify.
Viewing the changes in a Git stash

Article posted 10th February 2021 in Development and Git

Naming stashes is a good idea if some time is likely to pass between stashing and picking up the work again, but sometimes we need even more info.
Deleting a stash in Git

Article posted 9th February 2021 in Development and Git

If you stash a lot, or need to apply a stash non-destructively you might eventually want to clear things down to keep your stash list tidy.
Applying a Git stash non-destructively

Article posted 8th February 2021 in Development and Git

You’ll almost always want to delete a stash when you apply it, but if for some reason you need to keep the stash around, Git lets you do that.
Giving your Git stash a name

Article posted 5th February 2021 in Development and Git

Naming your Git stashes can be really helpful, especially if you’re stashing a lot or saving a stash to come back to another day.
Choosing a stash from the list

Article posted 4th February 2021 in Development and Git

Viewing all of a Git repository’s stashes and choosing one from the list is the next step I took in my Git stash on the command line journey.
Getting started with Git stash

Article posted 3rd February 2021 in Development and Git

I’ve put it off for the longest time, but it turns out stashing changes with Git on the command line is surprisingly easy to get the hang of.
Progressively enhanced animated content

Article posted 2nd December 2020 in Accessibility and Development

Respecting your users’ preferences with prefers-reduced-motion is great, but what about users with older operating systems and browsers?
Google are spoiling my Blue Beanie Day

Article posted 30th November 2020 in Development

Web standards should be a done deal by now, but 8 years on from my last post on the subject, we need to be as vigilant as ever.
Form styling limitations are an accessibility issue

Article posted 27th November 2020 in Accessibility, CSS and Development

A summary of the things missing in CSS got me thinking about how lack of some form styling may have seriously damaged accessibility on the web.
Accessibility issues when removing list markers

Article posted 12th October 2020 in Accessibility, CSS and Development

If we remove the list markers from an ordered or unordered list, we’re likely to run into some issues with VoiceOver.
Custom unordered list markers, done right

Article posted 8th October 2020 in CSS and Development

Did you know you can choose any icon you like for unordered/bulleted lists with a single line of CSS? Any Unicode character; no hacky CSS!
Styling list markers the right way

Article posted 7th October 2020 in CSS and Development

Simple list styling like changing the bullets’ colour has always felt like a hack, involving a lot of CSS. But now there’s a proper way to do it!
Opening links in a new tab or window is better avoided

Article posted 21st September 2020 in Design and Development

A link to an external source opening in a new tab or window is something that appears innocuous but really isn’t as straightforward it seems.
Splitting a hunk in Git’s patch mode

Article posted 15th September 2020 in Development and Git

When you enter Git’s patch mode, the chunks of code you’re offered to stage/skip can sometimes be too big. Here’s how splitting them works.
Staging different parts of the same file with Git

Article posted 14th September 2020 in Development and Git

Since moving to command line Git, I’ve avoided patch mode; it looked too complicated. Turns out it’s really not, and very much worth learning.
Styling underlines with CSS

Article posted 9th September 2020 in CSS, Design and Development

Never mind border-bottom for making your links a bit more visually engaging, here’s how to do it properly with text-decoration.
WebKit has fixed the implicit role on footers

Article posted 24th August 2020 in Accessibility and Development

Last year, I wrote about implicit ARIA roles; an issue I encountered was that VoiceOver didn’t give an implicit role to footers. Well, it’s fixed!
The right way to use break tags in HTML

Article posted 28th July 2020 in Development and HTML

Break tags are often misused. I’ll demo some markup patterns to avoid them, and reveal the one and only legitimate use case I can think of.
Using WebP images

Article posted 27th July 2020 in Design and Development

Safari will soon support the WebP image format, which purports some great advantages, but is it actually better than the formats we already use?
Searching for a Git commit by name with grep

Article posted 24th July 2020 in Development and Git

When you need to dig out a commit you made a long time ago, you’re going to need something a bit more powerful than a standard git log.
Using address in HTML won’t be problematic for much longer

Article posted 22nd July 2020 in Accessibility, Development and HTML

There’s a bug in Safari that adds an implicit role to <address> which causes problems for screen readers. The good news is, a fix is very close!
Using horizontal rules in HTML

Article posted 20th July 2020 in Development and HTML

The horizontal rule is pretty widely misunderstood and often abused. It’s not an HTML element I reach for very much, but it’s worth writing about.
How to change the first number of an ordered list in HTML

Article posted 15th July 2020 in Development and HTML

What happens when starting an ordered list at 1 doesn’t make sense? HTML has an attribute that lets you start your count at any number!
Reversing an ordered list in HTML

Article posted 14th July 2020 in Development and HTML

When the order of a list matters, you might find yourself in a situation where you need to reverse the order. Fortunately, you can do that with HTML.
Self-closing elements in HTML

Article posted 10th July 2020 in Development and HTML

Some elements don’t look like the others; those are self-closing elements, which are just an opening tag with no content and no closing tag.
An introduction to HTML attributes

Article posted 9th July 2020 in Development and HTML

An HTML attribute lives on the opening tag of an element and gives that element powers it might not otherwise have had.
A handy Git shortcut to fetch and prune

Article posted 8th July 2020 in Development and Git

I’m still writing my Git commands long-hand. Turns out a fetch and prune can be more concise than I’ve previously suggested, all without aliases.
Chaining Git commands

Article posted 7th July 2020 in Development and Git

Writing a sequence of Git commands is really handy and much quicker than running one, waiting for it to finish, writing the next, etc. Here’s how.
Using image aspect ratios to avoiding janky page loading

Article posted 6th July 2020 in Development, HTML and Performance

Adding dimensions to images in HTML is useful again! They’re a progressive enhancement to calculate the image’s aspect ratio and prevent jank.
Lazy loading images without JavaScript

Article posted 3rd July 2020 in Development, HTML and Performance

Non-JavaScript lazy loading is a great progressive enhancement for image-heavy pages on the web. Just a simple HTML attribute and you’re away!
The briefest of histories of responsive images

Article posted 1st July 2020 in Design and Development

There are a lot of things to consider when using images on the web. But why is it so complex? And how can we tackle that complexity?
‘Frontend’, ‘front‑end’ or ‘front end’?

Article posted 30th June 2020 in Development

As a frontend developer, something has always bothered me. How on earth do you spell ‘frontend’!? Or should that be ‘front-end’? Or ‘front end’…?
Pushing to a differently named branch on your remote

Article posted 29th June 2020 in Development and Git

When using Git, you’ll normally push work to an identically named branch on your remote, but what if you want to push to a different branch?
Redirect a filename in Netlify without specifying the path

Article posted 26th June 2020 in Development and Serverless

Redirecting a file in Netlify is easy, but what if you don’t know the path? Here’s how to redirect a particular filename, wherever that file may live.
When design breaks semantics

Article posted 25th June 2020 in Accessibility, Design and Development

Semantic HTML is great. But sometimes following the rules is tricky. Grab a cuppa and let me tell you a story about links that look like buttons.
Keeping git status short

Article posted 22nd June 2020 in Development and Git

git status is one of the Git commands I use the most, but I’ve always thought that it overshares. Well, I’ve found a way to make it more readable!
Optional closing tags in HTML

Article posted 18th June 2020 in Development

One of the interesting things about HTML5 is its flexibility. You don’t even need a closing tag on some elements! But be careful with that.
The difference between elements and tags in HTML

Article posted 15th June 2020 in Development

People often refer to HTML ‘tags’ and ‘elements’ interchangeably. They’re related, but very much different things. Here’s the deal.
Why I always raise a pull request on solo projects

Article posted 4th May 2020 in Development and Git

The whole point of a PR is to get feedback and approval on a piece of work from someone else before it’s published. But what if it’s just you?
Using the HTML document outline

Article posted 3rd April 2020 in Accessibility, Design and Development

What is a document outline? Sounds complicated, but it’s really not – it’s just headings! Find out more about them and why they’re a good idea.
How to rename a remote repo in Git

Article posted 10th February 2020 in Development and Git

Renaming a Git repository feels pretty fundamental – surely something will break? Well, worry no more – it turns out it’s a piece of cake!
How to diff branches in Git

Article posted 11th January 2020 in Development and Git

Turns out it’s pretty easy to look at the differences between two branches in Git. This is useful when coming back to a feature branch after a while.
Git rebase versus merge

Article posted 31st December 2019 in Development and Git

There are two ways to get a branch up to date with master before raising a PR: merge and rebase. Here are pros and cons with each.
Version tagging with Releases in GitHub Flow

Article posted 27th December 2019 in Development and Git

I’ve started using GitHub Flow for some projects and the process is much simpler than GitFlow, but one hurdle I encountered was tagging.
Simplifying branching and deployment with GitHub Flow

Article posted 14th December 2019 in Development and Git

GitFlow is great but it’s not quite right for every project. GitHub Flow is simpler and means I’ll publish a feature or fix as soon as it’s ready.
The best Sublime Text theme

Article posted 18th November 2019 in Design and Development

Operator Mono’s fancy italics don’t work with every colour scheme, but finding one that does has lead me to my favourite Sublime Text theme.
Operator Mono and why I want italics in my code editor

Article posted 17th November 2019 in Design and Development

I’m ready to start recording for my YouTube channel and I’ve been thinking about what my coding environment looks like.
Ligatures in coding fonts

Article posted 7th November 2019 in Development

I enjoy freshening my coding environment up a wee bit every now and then, but typefaces with ligatures are a step too far.
Stop search indexing for Netlify Deploy Previews and Branch Deploys

Article posted 26th October 2019 in Development and Serverless

Netlify Deploy Previews and Branch Deploys are great, but what if search engines start indexing them?
Setting up a staging site with Netlify

Article posted 25th October 2019 in Development and Serverless

Netlify Deploy Previews are great, but sometimes it’s good to have a staging site for stuff that isn’t ready to put into the live website yet.
Netlify Deploy Previews

Article posted 24th October 2019 in Development and Serverless

I’ve become a bit of an unashamed fan of Netlify recently, and Deploy Previews are something I’ve been making a quite a bit of use of.
Ditching Google Analytics in favour of Netlify Analytics

Article posted 4th October 2019 in Development and Serverless

Having moved my website to Netlify, I’ve been pretty excited about some of the features they offer, one in particular has been Netlify Analytics.
Moving to Netlify

Article posted 3rd October 2019 in Development and Serverless

I’ve really never enjoyed servers, and Netlify looks like an easy to use, powerful alternative for any static sites I build.
Adding files for a commit with asterisks

Article posted 1st October 2019 in Development and Git

It can be fiddly to stage files for a commit using Git on the command line. Or so I thought! I found a shortcut, so thought I’d write about it.
Using nvm on macOS

Article posted 23rd September 2019 in Development

I upgraded node on my laptop and things broke… But I found a way to change the node version, to keep projects alive until there’s time to upgrade all those packages and config.
Why I’m not using Git aliases

Article posted 11th September 2019 in Development and Git

Git aliases are incredibly useful, but there are five good reasons I’ve decided not to make use of them.
Version control for articles and blog posts

Article posted 6th September 2019 in Development and Git

Git workflows like GitFlow are great, but how does publishing articles fit in when using a static site generator? Here’s how I’m doing it.
Years in, the accessibility learning curve continues

Article posted 5th September 2019 in Accessibility and Development

I’ve cared about accessibility for as long as I’ve been working in the web and, even after all these years, I still enjoy learning new things.
Changing editor for Git on the command line

Article posted 21st August 2019 in Development and Git

Something that has been bugging me since moving from a GUI to command line git has been the default editor for writing commit messages.
Fixing your last Git commit

Article posted 21st August 2019 in Development and Git

Since I’ve started using Git on the command line, there’s one ‘new’ thing that I’ve used more than any other: amending my most recent commit.
Website version 5

Article posted 4th August 2019 in Design and Development

I’m already more than a dozen releases into version 5 of my website, but I’m finally ready to ‘officially’ announce it!
Changing your Git history

Article posted 26th July 2019 in Development and Git

This week I removed some files and data from my Git history. It was a bit of a learning curve, but here’s how I did it, step by step.
Minimalism and progressive enhancement

Article posted 16th July 2019 in Design and Development

I’ve been enjoying reading though Adam Silver’s articles around accessibility and inclusive design, and his take on progressive enhancement really struck a chord.
Design and dev should be more joined up

Article posted 2nd July 2019 in Design and Development

I’ve been catching up on some reading and came across this nugget in ‘The “D” in the DOM’…
Getting to grips with Git

Article posted 26th June 2019 in Development and Git

I’ve been using Git for years and it’s finally time to make a concerted effort to move away from my GUI to the command line.
What’s emphasis and what’s not

Article posted 24th June 2019 in Accessibility and Development

Semantic HTML is hard. We stopped using  and  elements in favour of  and , but are  and  still useful?
Implicit ARIA landmark roles

Article posted 14th June 2019 in Accessibility and Development

ARIA landmarks give a screen reader user an easy way to orient themselves on a web page. Implicit roles are also great. Except when they’re not.
Reducing motion

Article posted 30th May 2019 in Accessibility, Design and Development

Accessibility is important, so I’ve taken steps to minimise animation on my site, and even removed it completely for those who ‘prefer reduce motion’.
Still a sucker for Sublime

Article posted 1st May 2019 in Development and Tools

Over the years I jumped from one code editor to another before settling on Sublime Text. I’ve since tried others but keep ending up back with Sublime.
Dark Mode websites on macOS Mojave

Article posted 28th November 2018 in Design and Development

macOS Mojave comes with a Dark Mode feature, but how do we get our websites to do the same? Turns out there’s a handy CSS media query that does the job!
Blue Beanie Day

Article posted 30th November 2012 in Development

The web is very young and is still developing—as well as growing—at a rapid pace. For a long time it was pretty fragmented; a mismatch of all sorts of different technologies being used to display a website and provide functionality.