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
:linkpseudo-class as well as the
aselector 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
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
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: moreallows 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
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-visibletriggers only on keyboard focus; not on click. This can make our interfaces cleaner, but should it replace
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 restoreis 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 restoreis, 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
<b>, the distinction between
<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 checkoutto switch branches; I’ve also stopped using it to discard uncommitted changes: let me introduce
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 switchworks. But why do we need it when we’ve got
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
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
mainis 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
masterGit branch. It’s a racially charged term and I’m very happy to switch from
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-motionis 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
border-bottomfor making your links a bit more visually engaging, here’s how to do it properly with
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
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.
Article posted 3rd July 2020 in Development, HTML and Performance
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 statusis 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
<b>elements in favour of
<strong>, but are
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.
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.