Editor's Pick
Creating CSS Theme Variables from a JS file
For many projects I work on it’s useful to define all of our brand colours in a JavaScript file, particularly as I work on a lot of data visualisations that use them.
I also need those variables in my CSS, where they’re defined as custom properties. But I don’t want to have to maintain my colour theme in two places! That’s why I created a script to create a CSS file that defines custom properties from a JS source file. If you’re interested, here’s how it’s done.
Accessibility
A Note About WCAG Conformance Levels
People in their early stages of their accessibility journey are often confused about the Web Content Accessibility Guidelines (WCAG) Conformance levels and what the expectations are to meet them. Here’s a quick glimpse into their meaning and how you should approach them.
Principles Of Web Accessibility
A set of high-level guiding principles for approaching web accessibility.
Accessibility overlays are good for business (just not yours)
Nobody wants to admit this: overlays are successful because people are scared of accessibility work (and this is a real business problem).
Buttons vs. Links: What’s the Difference and Why Does it Matter?
Buttons trigger actions, while links navigate between pages, and using them correctly is key for clarity and accessibility. Designers should use proper HTML elements, maintain consistent styling, and use clear labels to create a reliable and accessible experience for all users.
What Does It Really Mean For A Site To Be Keyboard Navigable
Keyboard navigation is a vital aspect of accessible web design, and a detail-oriented approach is crucial. Prioritizing keyboard navigation prioritizes the user experience for a diverse audience, extending your reach while simultaneously fostering a more inclusive web environment.
CSS
:only-child
Learn how to use the :only-child selector to style elements differently when they have no siblings. Perfect for adaptive designs with optional elements like figure captions. Plus, see how combining it with :has() creates powerful parent styling possibilities.
So, You Want to Give Up CSS Pre- and Post-Processors...
There was once upon a time when native CSS lacked many essential features, leaving developers to come up with all sorts of ways to make CSS easier to write over the years.
Item Flow
Two weeks ago, Jen Simmons from the Webkit team shared an article about a new layout module called Item Flow. The idea is to unify the flex-flow and grid-auto-flow into a unified system. This path will lead to CSS masonry being integrated into the new syntax.
Currently, the Item Flow is being discussed by the CSS working group. The goal of this article is to share my notes as I explore the new syntax.
Arrow-like Box with rounded corners
Another experimentation using the new shape() function to add rounded corners to a box with a triangular shape.
HTML
5 Ways to Reduce HTML File Size on Your Website
Here is how you can reduce HTML file size to improve web performance and Core Web Vitals on your website.
Keeping it on the < dl > – another HTML gem you never use
I wanted to talk about a thing I used that I don’t see being used in the wild enough: Description Lists. Never heard of them? You are not alone.
HTML Oddities: Does the order of attribute values matter?
HTML elements can have attributes. For example id, class, src, alt, and many others. These attributes can contain values - an img element's src attribute has a value which is a link to an image. An id attribute's value is a single string. But some attributes can contain multiple values.
Does the ordering of the values inside the attribute matter? It is slightly more complicated than it may appear at first.
JavaScript
Creating CSS Theme Variables from a JS file
For many projects I work on it’s useful to define all of our brand colours in a JavaScript file, particularly as I work on a lot of data visualisations that use them.
I also need those variables in my CSS, where they’re defined as custom properties. But I don’t want to have to maintain my colour theme in two places! That’s why I created a script to create a CSS file that defines custom properties from a JS source file. If you’re interested, here’s how it’s done.
JavaScript Framework Reality Check: What's Actually Working
Looking beyond the hype to assess how Qwik, SolidJS, SvelteKit and Fresh are performing in real production environments.
UX
How to write error messages that actually help users rather than frustrate them
One of the most consistently neglected parts of today’s user experiences is our handling of errors. We’re so busy designing the happy paths through our products that we often forget to give the same care and attention to the times when things will go wrong.
Here’s how to create error messages that help users recover quickly and continue their path through your products and services.
Miscellaneous
VS Code Agent Mode Just Changed Everything
Ever wished your code editor could write your app, talk to your database, and even follow documentation like a real dev?
In this video, I'll show you how to use agent mode, MCP Servers and PRD documents to build an entire app complete with database. Will it work? Let's find out.
On loyalty to your employer
Considering the average ‘career’ with each employer in the tech industry is a touch under three years, the idea of spending 30 years working for the same employer is mind boggling. Despite this enormous disparity, I’m constantly witness to colleagues in the tech industry posting on LinkedIn about how great their employer is and why everyone should drop everything and come and work with them, only for them to announce a few short years later that they are moving on “to bigger and better things”.
Your employer pays you to spend more time with them than you spend with your family and/or loved ones. Your employer is one of the biggest influencers on your mental well-being. Your employer can and will replace you in a heartbeat if absolutely necessary.
Let me be explicitly clear, your employer isn’t your family and they are not your friend. They pay you to do a job and in return your only responsibility is to do that job well.