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…

::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…

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…

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,…

As of last month, Firefox 128’s support of the relative color syntax means we’ve now got support across the board. I’m excited about that as it’s an extremely powerful way to manipulate colors in CSS. Plus it was part of Interop this year so that is further proof that is trucking along nicely. The…

I’ve been going buildless—or as Brad crudely puts it, raw-dogging websites on a few projects recently. Not just obviously simple things like Clearleft’s Browser Support page, but sites like: The Clearleft podcast Patterns Day UX London They also have 0 dependencies. Funnily enough, many build tools…

2nd August 2024 First alphabetically and first in importance is the HTML element. The element is what makes the World Wide Web a Web that is both Worldly and Wide. It puts the dub, the dub, AND the dub in the dub dub dub. Sometimes, the is referred to as a hyperlink, or simply a link. But it is…

3rd August 2024Proxying an Image CDN with Cloudflare workers A short intro and code on how you can use Cloudflare workers on Cloudflare's free tier to proxy an image CDN like Cloudinary, CloudImage or Imgix. Using this you can load optimised images via the primary origin, support the Vary header for…

Anchor links (also called jump links) are an easy way to provide in-page navigation. For example, a table of contents could use anchor links to take readers straight to various sections in a page. They’re super easy to set up, but sprinkle a little CSS on top and you can really make them shine.…

Why are my live regions not working? Posted on Wednesday, 1 May 2024 by Patrick H. Lauke in Design and development Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by…

14th July 2024Simple, fast build tooling with live reload for a non-framework website I found a nice build tooling setup that can be integrated into non-framework websites where some part isn't controlled by the build tool. WordPress, Craft, Kirby or other CMS' are a good example. My setup uses…

30 June 2024 A couple of weeks ago I appeared as a guest on the Complimentary podcast hosted by Katie Langerman and Anthony Hobday. One of the topics that we talked about was the idea of using toggle switches (over radio buttons and checkboxes). Like I said in the podcast there are definitely some…

I recently took an existing codebase and ported it over to Eleventy. The main purpose was to recreate the website with existing markdown files and CSS. Creating the collections and templates was the bulk of the work, but I also needed the CSS to work. The documentation describes some methods for…

Wednesday 12 Jun 2024 Play Synthesised Audio Please accept my half-hearted apology for the awkward title. Web Components are hot right now but the name is considered harmful according to Mayank. I think Mayank makes a strong argument, but I also want the brand recognition and “SEO juice”, so I’m…

‍Cintia Romero is a Sr. Product Designer at Gestalt, which is Pinterest's design system. In addition to creating components and writing documentation, she dedicates her time to community engagement. She regularly interacts with design system users inside and outside Pinterest, develops educational…

My phone rang today. I didn’t recognise the number so although I pressed the big button to answer the call, I didn’t say anything. I didn’t say anything because usually when I get a call from a number I don’t know, it’s some automated spam. If I say nothing, the spam voice doesn’t activate. But…