Daily Tips With modal components, it’s common/expected to prevent the background from scrolling. However, if your page was long enough that there were visible scrollbars, they disappear when you set overflow to hidden, which causes the layout to shift horizontally. Sometimes it’s hard to see behind…
Juan Fernandes
I have my operating system configured to use visible scrollbars, a feature prominently elevated in macOS’ System Settings high enough that it would seem to imply some level of common usage (even though it’s not a default). I don’t necessarily prefer the behavior this feature enables but I use it as…
Daily Tips I’ve worked on so many projects recently that were more complicated than they needed to be because they used JavaScript to generate HTML. JavaScript is… Slower to load Slower to run More prone to breaking Harder to read and reason about Doesn’t actually look like the final output It’s…
29 August 2025 In season 8, episode 12 of The Simpsons, Bart presses a button on a talking bear display. The bear asks “Only who can prevent forest fires?” Bart presses “You”. The bear replies “You pressed ‘you’ referring to ‘me’ – that is incorrect. The correct answer is you”. This is a common…
Let’s see if I can make this short and sweet… okay so you may be like me and jump between the local build and the live (or “production”) versions of your website. How many times have you refreshed your local version for several minutes only to finally realise the changes weren’t showing up because…
In 1999, Microsoft vanquishes Netscape in the browser war, Google starts to show up competing search engines, Blogger launches, and Napster loudly arrives to shake up our culture. By | September 3, 2025 | Tags: Dot-com, Yearly Reviews, 1999 1999 Napster software running on Windows 98; photo by…
Daily Tips For years, I’ve used a BEM-like approach to authoring my CSS. With Kelp, I decided to go a different direction and use semantic classes. The result has been a lot less CSS that’s simpler and more predictable to write. Today, I wanted to quickly share how it works and why I love it so…
Almost two years ago, I published an article about text-wrap: balance and how useful it is. I thought about revisiting the topic with a more solid exploration and examples that include different values of text-wrap. The problem Any web page consists of content. As designers and developers, we don’t…
I was thinking about something I wrote yesterday when I was talking about styling underlines on links: For a start, you can adjust the distance of the underline from the text using text-underline-offset. If you’re using a generous line-height, use a generous distance here too. For some reason, I…
Blog and all that malarkey August 7th, 2025 Over the past two years, I’ve noticed a significant drop-off in the number of enquiries from local(ish) businesses coming through Google. I wondered whether that might be down to the fact that the opinionated design isn’t to everyone’s taste, so I tried…
We shouldn’t rely on colour alone to indicate that something is interactive. Take links, for example. Sure, you can give them a different colour to the surrounding text, but you shouldn’t stop there. Make sure there’s something else that distinguishes them. You could make them bold. Or you could…
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…
Published on November 2, 2024 Cascade layers recently reached the completely arbitrary “baseline widely available” milestone, which means they have been available across all modern browsers for more than 30 months now. Cascade layers Baseline widely available chrome: supported edge: supported…
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…
In Penn & Teller’s Masterclass (no. 12 “Principles of Performing”) they explain how one of their favorite ways to design a magic trick is to come up with an idea and then act it out as if they already know how to do it. Here’s Penn: We still start with an idea for a trick, how we want the whole…
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…
This is a post in a series about building my new website, check out the previous post in this series. A note from the present day Hi, it’s present-day Nic here. I feel bad that this draft has been sitting in my posts for the better part of a year! I had pretty much drafted the complete text back…
≡ By Joel Dare - Written July 14, 2025 Imagine a web page that loads instantly, deploys effortlessly, and never needs a security update. I’m using pure HTML and CSS to accomplish all that and to build things in a fraction of the time. Building HTML pages is easy As software engineers, I think we…
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…
When I moved out of a hands-on design role, I started thinking more about how design could influence or create the conditions for good service delivery to happen. After speaking with other UCD professionals in leadership and delivery roles, two big themes emerged: Designing team structures and…
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…
No articles.