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…
Juan Fernandes
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…
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…
A weeknote starting 9 September 2024. This post from Steve Messer got me thinking about the future of interaction design again this week. With the rise of tools like GOV.UK Forms, Figma and AI, combined with the layoffs seen in recent years, I often find myself wondering what my role is going to…
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…
::pseudo-elements? Subscribe Blog RSS feed Notes RSS feed or Combined and follow Mastodon Bluesky Friday 23 May 2025 Play Synthesised Audio I’ve given it some thought and I’m going to say it. I don’t like pseudo-elements. At least not where they’re going. Talk of Google’s carousel kerfuffle was…
Creating Design System-Friendly Snowflakes with Utility Classes 21st of October 2024 Whilst I was helping EMBL in creating a new Design System based on a brand refresh and website re-organisation (going from 7 individual websites to one) we got to a point where other teams started to require unique…
Daily Tips One of the more common questions I get around Web Components is how to style them. The Shadow DOM is a big part of why Web Components are often hard to style. Because it encapsulates your HTML from the main DOM, your nested HTML doesn’t inherit your global CSS. When you have a robust…
So there I am, working on a bug exclusive to Safari (we’ve all been there). I can’t figure it out so I ask AI, “Hey, this piece of code is not working in Safari, what’s wrong?” The issue might be related to how Safari handles keyboard events, especially for certain keys… It gives me some advice:…
Written by Published at Oct 12 2024 Updated at Oct 12 2024 Reading time 2min Code reviews are, by nature, intimidating. Sometimes even brutal. If you've been in the game for long enough, you probably experienced the following: you worked hard on a feature, you're proud of yourself and open the PR to…
A weeknote starting 22 April 2025. I've been doing some more prototyping this week, using the excellent GOV.UK Prototype Kit. I needed to recreate a checkbox question page to mimic an existing product. There were a few things that took me a second to figure out so I'm capturing them here to help me…
The ultimate guide to user journey mapping: tools and examples User Experience January 15, 2025 User journey maps help us navigate the sometimes choppy waters of UX design to get a usable product faster. Discover how they can work for you in this post! Imagine you could have a UX design GPS that…
Table of Contents So I recently converted a French blog of mine to Eleventy from a Hugo-powered one (which itself was previously a WordPress…), as one does on a cloudy weekend. While Hugo is a very fast static site generator, it also uses a syntax which can easily get confusing if not used often.…
The step-by-step guide to website redesign Design March 12, 2025 Is it time for a website redesign? It’s not just about updating the look - it’s about improving usability, performance, and making sure your site meets both business goals and user needs. But where do you start? And how do you avoid…
When building or using HTML forms, we often layer in a variety of additional elements like labels, help text, validation, and JavaScript behaviors. However, many forms don’t seem to account for some of the built-in features that lead to a much better form experience with minimal effort. If you’ve…
Daily Tips Last week, I wrote about my Sublime Text setup. I write in markdown a lot. And one thing that’s been missing for me from Sublime is the ability to add a link to my markdown files using the command + K keyboard shortcut (or control + K for my Windows folks). Last week, I found this…
19th August 2024 It was a sunny day (in the Southern Hemisphere, possibly?) in October 2014 when HTML5 was officially released. I remember it like it was yesterday. The crowds, the bunting, the endless fireworks and firework-related maimings. And who could forget “Hypertext Chicken”: the spicy,…
Imagine you’re driving a dirt road and you come to a fork. Which way do you go, left or right? This decision is much easier to make if you’ve been traveling that road for the last hour and you’re sitting there in your truck facing the reality of the decision. You can see the level of wear in each…
No articles.