Yesterday
- 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...
This week
- 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...
Last week
- 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...
about 1 month 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...
about 2 months ago
- 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...
2 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....
3 months ago
- 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...
- 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...
- Megazoid specimen, showing off variable depth and stroke axes. I recently had the pleasure of working with David Jonathan Ross (of DJR) to create a microsite for his type family Megazoid. Megazoid is a big, blocky exploration of raw geometry. It’s such a fun typeface! The font...
4 months ago
- CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS keyframe animations. But is the juice worth the squeeze?...
- A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into the issue, and I’ll...
5 months ago
- It’s one thing to build a representation of a maze in memory. It’s quite another to render it so that people can view it in a web page. How do we do that? What are our options? And what happens if we try to make our maze rendering accessible?...
Rows per page
