When you commit things in Git via the CLI, you'll be greeted with something that looks like this: You'll write your commit message on the first line, hit save, close the file, and go on with your nerdy day. The lines starting with a # will be ignored and not included in your commit data. Most lines…
Juan Fernandes
3 May 2026 Last week I listened to episode 70 of the Complimentary podcast. The hosts, Katie and Anthony, were discussing what they think is easy to design and what’s hard. They discussed: Illustrations Notifications Typography Animation Form design They both seemed to agree that form design is…
The NHS is preparing to close nearly all of its Open Source repositories. Throughout my time working for the UK Government - in GDS, NHSX, i.AI, and others - I championed Open Source. I spoke to dozens of departments about it, wrote guidance still in use today, and briefed Ministers on why it was so…
If you’re like me an you’re a bit of a hybrid mouse/keyboard user, you might have noticed something as you browse the web: pressing the ⇥ (tab) key when you land on a website sometimes causes a previously-hidden “Skip to main content” (or words to that effect) link to appear. ‘Skip links’ are a…
HomeArticlesProjectsAboutResourcesScreencastsToday I learnedThings I useTalksNewsletter Home HomeArticles ArticlesScreencasts ScreencastsProjects ProjectsAbout AboutBlogroll People blogging great stuff. Resources Bookmarks I want to keep for later. Show some love Support my blog and newsletter.…
image-set() CSS function Baseline Widely available This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2023. Learn more Report feedback The image-set() CSS functional notation is a method of letting the browser pick…
When you mark up your website, groups of links are probably going to be wrapped in elements. If you have more than one, you’re going to have to label each of them so that screen reader users know what each is for. I’ve written about How navigation should work for keyboard users, which includes a…
box-shadow is no alternative to outline posted on 15.04.2026 This post is part of a series called #WebAccessibilityFails, where I collect common issues I find in accessibility audits so that you can avoid them in the future. People like to use the box-shadow property for styling focus outlines…
Mar 16, 2025 What’s wrong with show()? A non-modal dialog opened via the show() method has the following limitations: The dialog will not use the top layer. No ::backdrop pseudo-element. Using ::backdrop for a non-modal dialog is somewhat uncommon, but so long as its kept mostly transparent, its a…
Daily Tips Last week, my friend Eric Bailey shared some thoughts on Design Systems on Bluesky… through a certain lens, a design system is just very expensive way for developers to avoid needing to write CSS I’m by no means an expert on design systems, but I’ve been at companies with one, companies…
Do people still write CSS in CSS files any more? I honestly don’t keep up with the trends as much as I did back when I started by career. Partly because I’ve started to feel that the web development community online has become a lot more “this(my) way is the best way” than when I started out at the…
Designers, your excuse is gone. Stunning, animated and accessible. Yes, you can! By Anne-Mieke Bovelett on March 14, 2025Status: up to date The new GitHub signup experience is proof: Accessibility and stunning animated design can go hand in hand Two years ago, I wrote a request on GitHub’s Community…
24th March 2026Simple website analytics with Goatcounter I'm not a big fan of analytics and tracking on the web — I use ad and tracking blockers in my browser, on my device, router, and built into the DNS service I use. But having some idea of what pages are being visited, how people are using the…
I’ve written previously about reloading a document using only HTML but that got me thinking: What are all the values you can put in an anchor tag’s href attribute? Well, I looked around. I found some things I already knew about, e.g. Link protocols like mailto:, tel:, sms: and javascript: which deal…
Daily Tips Today, I wanted to share a fun little snippet of CSS I learned from my friend Stephanie Eckles awesome SmolCSS website. Let’s imagine you’ve got a bunch of content (maybe some photos or a list or Pokemon characters or something like that), and you want to display them in a grid. The…
I will never forget the look on a contractor's face when he stared at a technically correct, but aesthetically disappointing dormer at our house. "Everyone can mess around," he said. Referring to the fact that most people can accomplish the basics, but not all master a craft. In my own industry,…
Eleventy: How to Work Around the “git Last Modified” Performance Bottleneck Published on Feb 26, 2026, filed under development, performance. (Share this post, e.g. on Mastodon or on Bluesky.) Eleventy supports a special value for the date field, git Last Modified: This tells Eleventy to use the date…
Daily Tips I’ve hated writing JavaScript tests for pretty my whole career. That thing where you plan a component, write some code, iterate it a whole bunch until it works the way you want… and then write tests that validate that the thing you’ve already validated does in fact do the thing you…
Daily Tips I finally got a chance to work with the :has() CSS pseudo-class as part of Kelp, my UI library for people who love HTML. Today, I wanted to quickly look at what it is and how it works. Let’s dig in! If an element has a child or sibling, style the element CSS has long had all sorts of…
Daily Tips I’ve been full-steam ahead building a UI library for people who love HTML, powered by modern CSS and Web Components. I’ll be launching a proper website for it and more details in the next week or three, but today, I wanted to talk quickly about the set of utility classes it’s going to…
Owning your own data is hard. I've been trying to own as much as I can, and my site has become a reflection of that process, both in what I display and discuss. As difficult as it is, there's a freedom in owning as much as you can. When Twitter was sold, I joined the migration to Mastodon. I have my…
Text reflow on the web has an interesting relationship with Responsive Web Design. As a column gets smaller text wraps and becomes taller1. But for large format display text, that’s not always what you want2. What I’ve wanted for awhile now is a way to inversely size text based on the text length…
A friend shared this tip the other day and it was too useful not to reshare. If you’re a mobile-up kind of developer, it’s easy to forget that max-width media queries are “less than or equal to” by default. It can play havoc with your nice round numbers: If you want to tidy that up, and continue to…
Daily Tips Years ago, I was staunchly in the “minify your code, even if you use gzip” camp. But these days, I’ve switched teams! I did some tests on the bundled version of Kelp UI. Unminifed: 58.2kb Minified: 43kb Unminified + gzipped: 8.2kb Minified + gzipped: 7.4kb I don’t think making your code…
Like ’em or loath ’em, whether you’re showing an alert, a message, or a newsletter signup, dialogue boxes draw attention to a particular piece of content without sending someone to a different page. In the past, dialogues relied on a mix of divisions, ARIA, and JavaScript. But the HTML dialog…
So I’m making a thing and I want it to be styled different if the link’s been visited.
Rather than build something myself in JavaScript, I figure I’ll just hook into the browser’s mechanism for tracking if a link’s been visited (a sensible approach, if I do say so myself).
Why write JavaScript when…
I use Goatcounter for analytics primarily to see where things I post might get mentioned. I don't get a ton of traffic, nor should I expect to. However, checking the dashboard this morning, I saw that 82% of my traffic was now attributed to China. 89% of visits had no referrers, 85% using Windows…
Daily Tips I’ve been working hard on getting Kelp, my UI library for people who love HTML, ready to share publicly. A big part of the library design has been providing layout options that are flexible and give you a lot of options, without resulting classitis like you see in systems like Bootstrap…
Daily Tips On Monday, I shared how Kelp UI implements the container layout pattern. And yesterday, we learned about the cluster layout. Today, we’re going to look at another layout pattern in Kelp: the split. Let’s dig in! The split layout A split layout is when you have two elements in a section,…
If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish. Usually, you’ll turn to tutorials or documentation, and learn more about CSS to get your work done. But every once in a while, you realize there is no “proper” way…
I mentioned last time that I’ve been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a highly graphical design that showcases his work. Mike loves ’90s animation, particularly Disney’s Duck Tales and other animated series. He challenged me to find a…
2 March 2025 Last week I posted a UX challenge on LinkedIn. I received 177 responses from senior designers and content designers. But the best response came from Joyce, a self-proclaimed non designer. The challenge was simple: === Which question label works best for ‘delivery’ and ‘collection’: ===…
I’ve been thinking about the kind of CSS I write by default when I start a new project. Some of it is habitual. I now use logical properties automatically. It took me a while to rewire my brain, but now seeing left or top in a style sheet looks wrong to me. When I mentioned this recently, I had some…
Daily Tips Back in March, I wrote about the :is() pseudo-class and how it can be used to reduce selector complexity. Today, I wanted to talk about another pseudo-class that does the same thing, :where(), how they’re different, and when to use one versus the other. Let’s dig in! How :where() works…
Subscribe Blog RSS feed Notes RSS feed or Combined and follow Mastodon Bluesky Thursday 8 Jan 2026 Play Synthesised Audio Shoutout to Robb Knight! I was struggling for time and a topic to kick-start the year. I don’t think the title is trademarked so I stole it :) Robb also has a /uses page. I…
I complained about this on the socials, but I didn’t get it all out of my system. So now I write a blog post. I’ve never liked the philosophy of “put an icon in every menu item by default”. Google Sheets, for example, does this. Go to “File” or “Edit” or “View” and you’ll see a menu with a list of…
Daily Tips Today, I wanted to share a little approach you can use to create accessible, HTML-native accordions (sort of), without any JavaScript. There are going to be included in the new UI library I’m building for people who love HTML, and I wanted to show you how they work. Let’s dig in! and …
Creating a strong project brief is one of the most valuable steps you can take to ensure your web design or development project runs smoothly. Whether you’re working with a freelancer or a full-service agency, a well-structured brief helps align expectations, avoid confusion, and keep everyone…
Daily Tips For years, JSHint has been my linter of choice. I like the defaults, and it basically works well out-of-the-box without any configuration. But I’ve had to use Typescript a lot more lately, and JSHint doesn’t work with it. In year’s past, I’ve used ESLint, but I kind of hate it. It just…
This post contains swear words. I’ve censored the first one, but read on at your peril! Many years ago, I had a client that sold a service. They weren’t a design agency, but for the sake of anonymity, we’ll just call them a design agency. Let us say that their core offering was a full-service design…
No articles.