This week
- In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web. Which is a shame, because we can do some pretty cool stuff with sprites! In this post, we’ll share the niche CSS function you can use to leverage this...
Last week
- I have a table, with alternating rows having different background colors, and the table content overflows the container on the right. I want to have a shadow/indicator on the side of the table that is overflowing the container. Go to solutions that won't work Many moons ago, Lea...
About a month ago
- 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...
- The rule of least power on the web incentivised using HTML before reaching for CSS, CSS before JavaScript, and bashing it into the JS script as a last resort. Every time the web ships new features that let us shift the implementation left on the stack, I’m excited about it. In...
about 1 month ago
- You might have noticed that I did a big design refresh on my entire site… unless you’re on RSS I guess. I’ll talk about aspects in detail, but at a high level there’s been three big changes: A monospace font Named CSS grid lines Juicier multi-page view transitions But my most...
about 2 months ago
- As I was playing around with contrast-color(), I got a wild idea that you could use contrast-color() to invert its return value by nesting it: contrast-color(contrast-color(var(--some-color)). When would this be useful? Uh… Good question. I couldn’t come up with an example right...
- In my first post on contrast-color() I demo’d using color-mix() to change a background-color on hover, but I will be honest… mixing black and white isn’t always what you want. It would be cool and helpful to coerce contrast-color() to return either 1 or -1 so that we could...
- One predictable pain point with contrast-color() is that it only returns black and white named colors. From a design systems perspective, that’s not ideal because you want your colors. You want your harmonious brand and the colors you and your team spent thousands of man hours...
- Firefox 146 added support for contrast-color() joining Safari 26 in the First Implementor’s Club. For those unfamiliar, contrast-color(<color>) is a new CSS function that will take a <color> as input and returns either white or black depending on which has the most contrast. The...
- Howdy folks, can you believe that the year is over? Shocking! I spent December travelling around Sri Lanka with my family, and it was incredible! I published a few pics from our trip. I managed to catch up on a long reading list and, as I do every year, I published my annual...
3 months ago
- What a busy month! Crazy at work, but also a lot of prep went into the last NN1 Dev Club meetup of the year. I’m very proud of how this little meetup idea grew to become a solid community of software engineers from the Northamptonshire area. Luckily, at the beginning of...
- Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful convenience, but it turns out that it’s so much more. Subgrid unlocks exciting new...
- Try Grid Paper I’ve been getting into drawing dungeons on isomorphic grids. It’s fun but I was a little frustrated with the process of sourcing and printing out graph paper with an isomorphic grid on it. You have two bad options, basically: Download a low-res JPG you found on...
- In iOS26, Safari dropped support for/broke theme-color; the meta tag you coud add to your head to get colored bits at the top and bottom of your websites. This matters because their current manner of providing the appropriate color for tab-tinting doesn’t work either. Aside: You...
4 months ago
- What is the View Transition API and how to use it....
- Howdy y’all, I hope your October was not as hectic as mine. Mine was ridiculous! It’s been a super hardworking year overall, and I’m looking forward to a trip with my family at the end of the year. We are going to spend December in Sri Lanka, so if you have any tips and...
- In which I turn inline asides into robustly enhanced sidenotes with CSS and just a touch of JS....
- In which I turn inline asides into sidenotes, but not in a way anyone should actually use....
- The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll share all of the tips...
- I’m happy to announce a new, bigger than ever, 5th edition of the best-selling book, Responsive Web Design with HTML5 and CSS. Where can I buy it? It’s been many months in the making, and as ever, I learnt heaps in the process. If you want a bang up to date resource on the...
- I’ve been thinking about a note from Alex Russell where he says: any time you're running JS on the main thread, you're at risk of being left behind by progress. The zen of web development is to spend a little time in your own code, and instead to glue the big C++/Rust subsystems...
- There is a lot of chatter about CSS resets in the web sphere recently. For the first time in years, I recently looked into the stylesheet of this very website and decided to modernise a few bits. As part of this, I looked into some resets carefully crafted by others, and wanted...
- Progressive image formats allow the decoder to create a partial rendering when only part of the image resource is available. Sometimes it's part of the image, and sometimes it's a low quality/resolution version of the image. I've been digging into it recently, and I think there...
5 months ago
- This blog really isn't just for beating up on Apple for the way it harms users, the web, standards, and society to maintain power and profits. So here's some fun stuff I've been doing in my 11ty setup to improve page performance. Contents Page-Specific Resources via Shortcodes...
Rows per page
