Daily Tips Yesterday, we looked at why styling Web Component elements in the shadow DOM sucks, and I shared five different approaches you can use. Today, we’re going to look at the first of those in-depth: inline CSS. Let’s dig in! The example we’ll be using Let’s imagine we’ve got a element, like…

Daily Tips I often say that the Shadow DOM is an antipattern. I tend to catch a lot of shit for it, because for years the JS framework cult positioned the Shadow DOM as the killer feature of Web Components. But one of the biggest challenges the Shadow DOM creates for Web Components is around…

Tuesday 5 Nov 2024 Play Synthesised Audio Have you ever added this CSS? What’s the deal with that? I’ve always tried to avoid this CSS because a long time ago Dmitry Fadeyev asked us to Please Stop “Fixing” Font Smoothing. The antialiasing mode is not a “fix” for subpixel rendering – in most cases…

The `` and `` elements are getting an upgrade Published on 01 Nov 2024 Form controls are notoriously difficult to style, something the web community has been talking about for years. In 2019, when I was still at Microsoft, I had been working with Greg Whitworth to start evangelizing the work that…

While you are working on a UI/UX design project, I have developed a set of practical tips for designing a clickable button that helps me maintain design standards throughout the process. Published inB

14th October 2024 The thing about magazines—physical, printed magazines, I mean—is it’s very easy to skip past content. Between your thumb and gravity, weeks of editorial work can be precipitately dismissed in fractions of a second. Flip, flip, flip, flip, flip. “Where the hell is my doctor? My…

Content warning: This blog post references domestic abuse and violence but doesn’t go into specific detail. I’m not an expert in that topic at all, so I may not use the preferred terminology in all instances. Sorry. Last year (oh how time flies), we launched the GOV.UK Design System’s Exit this Page…

Our little content site etch.co was built with Next.js until we recently migrated it to Eleventy. Even though no features were changed or removed the statistics show a dramatically different result: Statistic Next.js 11ty Lighthouse performance score 76 97 Homepage Kilobytes of JavaScript 2,161KB…

Daily Tips I love for...of loops! I find them nice and simple. They’re more clear than an old-school forloop, and in my opinion easier to read than an Array.prototype.forEach() method (or the NodeList equivalent). But sometimes, you need the index of the item you’re looping over, and the for...of…

Daily Tips Earlier this week, a friend shared a “really cool website” from a design and dev agency (I’m not going to link to it, don’t ask). Nearly every single element on the page was animated in some way. Every heading animates it’s letters as it scrolls into the viewport. Images spin and slide…

Every Layout’s Sidebar exemplifies a quantum CSS layout, perhaps better than any other layout we offer. It is neither a two column layout, comprising elements with fixed and fluid widths, nor a single column layout comprising two vertically stacked elements. It’s both, and neither. It adapts,…

Friday 11 Jul 2025 Play Synthesised Audio If you subscribe to my notes you’ll know I’ve gone a little crazy building an RSS aggregator web app over the past week. My side project code-named Croissant has been a delightful challenge. Working with web standards is wonderful! Cute, innit? I planned…

Daily Tips Over the last week, we’ve looked at how Kelp UI implements four different layouts with modern CSS: the container layout pattern, the cluster layout, the split layout, and the stack. Today, I wanted to show you how Kelp uses the .space-* class to control spacing. Let’s dig in! An example:…

In Every Layout, we wrote about The Stack. It’s a marriage of Heydon’s Lobotomised Owl selector and my method of managing Flow and Rhythm with CSS Custom Properties. Code language css .stack > * + * { margin-block-start: 1.5rem; } Let’s break the selector down: every direct sibling child element of…

Daily Tips Last week, I added a dark mode to Go Make Things, the Vanilla JS Toolkit, and the Lean Web. Today, I want to show you how I did it. How dark mode works Every now and then, you see a site with an option to toggle dark mode on or off. Twitter comes to mind. Based on the presence of a…

Wednesday 25 Jun 2025 Play Synthesised Audio SVG (Scalable Vector Graphics) are now commonplace on the web. When I wrote Resolution Independence With SVG for Smashing Magazine in 2012 many of the comments related to browser support and bugs. Back then we didn’t have Baseliness for peace of mind. SVG…

Daily Tips They say the best way to get an answer to a technical question is to post the wrong answer on the internet! Yesterday, I wrote about modular CSS architecture using the browser-native @import operator. And while I wouldn’t say that what I wrote was wrong, I did learn a whole lot and have…

One of my big goals with Kelp, my UI library for people who love HTML, was build-free customization. I want to use the best of modern HTML, CSS, and JavaScript to let people customize the hell out it without every having to open up terminal or run a build step. Today, I wanted to share how I decided…

Daily Tips Last week, we looked at how to create accessible and semantic color palettes as part of my deep dive into how I’m building Kelp, my UI library for people who love HTML. Today, I wanted to show you how I’m implementing light and dark modes. Let’s dig in! Base Colors For this article, we’ll…

23 June 2025 • from the journal Link bug. World’s on fire and the ghouls keep buying matches, so I’m working on my website. At the end of last week, I launched a very basic “links and sundries” page. Pretty much ever since I joined Twitter (valē), social media has always been where I’ve shared links…

Daily Tips On Monday, we looked at how to create an accessible color palette. Today, we’re going to learn how to take that palette and use it to create semantic color variables that we can use throughout our design system. This approach is at the heart of Kelp, my UI library for people who love…

On the topic of craft and web development, over on Bluesky Kameron Hurley shared this excerpt from the book Stolen Focus… One day, James Williams—the former Google strategist I met—addressed an audience of hundreds of leading tech designers and asked them a simple question: “How many of you want to…

One of the features that I’m quite happy about on my new website is the built-in search functionality and how the search index gets built for it. You can test it out yourself by pressing Ctrl+K and entering a search query into the input that is revealed: Screenshot of the search feature.I’ve built…

I try to be a good web citizen, and keep things accessible. Now, I'm no expert, but there are some things web developers should check at least: Do images have (or need) alt text?Are links... well, links? And buttons... you guessed it, buttons?Is the document outline logical, and are sections grouped…

In a project management-themed Hackers Incorporated episode, Adam Wathan introduced derisking projects with save points. The entire episode is definitely worth your time, but that specific piece of advice has changed the way I work as a developer and make decisions as a project manager. In practice,…

It’s been a little while since I’ve played around with making creative stuff with CSS just for fun. My trip to State of the Browser conference at the weekend reminded me why I love the web and the creative community around it. If you haven’t already, you should check out Hidde’s summary of the…

15 September 2024 (Updated 23 September 2024) :nth-next-sibling? No need. Tags: css quick-tip Yesterday, I discovered a new wish I had in CSS: when selecting the next few siblings of an element, instead of having to do .el + *, .el + * + *, .el + * + * + *, I’d love to have something like…

Why I created the design system I’ve been pushing pixels since 2005 and have studied hundreds of design systems over the years, even before they were called design systems. I wanted to share what I’ve learned by creating a lean and powerful Figma design system that’s intuitive, accessible, and…

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. Our digital products are littered with…

Daily Tips I’m working on a UI library for people who love HTML and modern CSS, and one of the many details I’m currently sweating is naming conventions for CSS classes. I’d love your feedback! Colors and style Let’s say you have a button, and by default, it’s gray with a dark background. You want…

11 May 2025 Last week I ran a Form Design Mastery live call with the UX team at Multiverse. Various members of the team shared their designs for me to review. Here I’ll show you Jamie’s redesign because it shows how good design leads to more problems. For context, the form allows users to log “off…

Daily Tips It’s really surprising how many fully remote jobs require mandatory, several-times-a-year travel under the pretense that “face-to-face time is really important for team building.” Today, I wanted to talk a bit about why this is ableist and exclusionary. Let’s dig in! I’m more myself…

Daily Tips Today, I wanted to talk about CSS logical properties, a newer (and arguably better) way to define properties that are directional in nature. Let’s dig in! The *-top, *-bottom, *-left, and *-right properties A lot of CSS properties—things like margin, padding, border and more—have…

Daily Tips As I continue to build out my HTML-focused UI library, one of the things I’ve been deep in-the-weeds on recently is modern approaches to layout. Today, I wanted to explore that a bit more. Let’s dig in! Go with the flow The most common layout on nearly every website is the flow or the…