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.
Links sometimes need to look like buttons, but what about the other way round? Spoiler alert: it’s a terrible idea!
When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.
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 GIFs are rubbish. Instead of compromising our animations in order to meet WCAG, we should be checking what our users prefer.
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.
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.
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!
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 without an
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.
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.
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.
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.
The last major version of this website was a complete behind-the-scenes rebuild. This version, on the other hand, is almost entirely visual.
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.
Satisfying the enhanced contrast AAA WCAG rule can be limiting; luckily
prefers-contrast: moreallows us more freedom with our default themes.
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.
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!
:focus-visibletriggers only on keyboard focus; not on click. This can make our interfaces cleaner, but should it replace
AVIF and WebP are better image compression smaller files than PNG and JPG, but
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.
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!
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.
I’ve talked about how great
git restoreis, but I missed a really obvious use of
git restore: restoring a deleted file!
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.
<b>, the distinction between
<del>is subtle, but it’s worth knowing.
I no longer use
git checkoutto switch branches; I’ve also stopped using it to discard uncommitted changes: let me introduce
Since upgrading to macOS Big Sur, I’ve noticed that
git switchworks. But why do we need it when we’ve got
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.
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…
When you rename your Git branch, you’re going to need to reconfigure any Netlify deployments that are set up to watch your old
There’s no such thing as syncing in Git, but setting an upstream branch is about as close as it gets.
mainis a good idea, but how do we do it? Fortunately, it’s really straightforward if your repository lives on GitHub.
I’ve noticed a move towards renaming the
masterGit branch. It’s a racially charged term and I’m very happy to switch from
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.
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.
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.
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.
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.
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.
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.
Respecting your users’ preferences with
prefers-reduced-motionis great, but what about users with older operating systems and browsers?
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.
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.
If we remove the list markers from an ordered or unordered list, we’re likely to run into some issues with VoiceOver.
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!
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!
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.
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.
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.
border-bottomfor making your links a bit more visually engaging, here’s how to do it properly with
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!
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.
Safari will soon support the WebP image format, which purports some great advantages, but is it actually better than the formats we already use?
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
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!
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.
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!
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.
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 HTML attribute lives on the opening tag of an element and gives that element powers it might not otherwise have had.
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.
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.
Adding dimensions to images in HTML is useful again! They’re a progressive enhancement to calculate the image’s aspect ratio and prevent jank.
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?
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’…?
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?
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.
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.
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!
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.
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.
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?
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.
Renaming a Git repository feels pretty fundamental – surely something will break? Well, worry no more – it turns out it’s a piece of cake!
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.
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.
I’ve started using GitHub Flow for some projects and the process is much simpler than GitFlow, but one hurdle I encountered was tagging.
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.
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.
I’m ready to start recording for my YouTube channel and I’ve been thinking about what my coding environment looks like.
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.
Netlify Deploy Previews and Branch Deploys are great, but what if search engines start indexing them?
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.
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.
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.
I’ve really never enjoyed servers, and Netlify looks like an easy to use, powerful alternative for any static sites I build.
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.
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.
Git aliases are incredibly useful, but there are five good reasons I’ve decided not to make use of them.
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.
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.
Something that has been bugging me since moving from a GUI to command line git has been the default editor for writing commit messages.
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.
I’m already more than a dozen releases into version 5 of my website, but I’m finally ready to ‘officially’ announce it!
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.
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.
I’ve been catching up on some reading and came across this nugget in ‘The “D” in the DOM’…
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.
Semantic HTML is hard. We stopped using
<b>elements in favour of
<strong>, but are
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.
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’.
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.
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!
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.