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...
- Over the years, I’ve used different icon sets on my blog. Right now I use Heroicons. The recommended way to use them is to copy/paste the source from the website directly into your HTML. It’s a pretty straightforward process: Go to the website Search for the icon you want Hover...
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...
Two weeks ago
- This is one of those small things that drives me nuts. Why? I don’t know. I think it has something to do with the fact that I have a computer that is faster than any computer I’ve ever used in my entire life — and yet, clicking on buttons results in slight but perceptible...
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...
- In this article I want to share a technique that I recently learned to display an interactive map on a website. For this, you will need just a few lines of HTML and JavaScript. This solution does not require you to sign up for any accounts or services anywhere, it is completely...
- My blog uses aggressive caching: it sits behind Cloudflare with a 15 minute cache header, which guarantees it can survive even the largest traffic spike to any given page. I’ve …
- 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
- I redesigned my www website. Why? The end of year / holiday break is a great time to work on such things. I wanted to scratch an itch. Websites are a worry stone [gestures at current state of the world] Do I really need a reason? Nope. I read something along the lines of “If you...
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...
- Long term readers may wonder – VS Code, Ben? Really? Let’s not getting into that now, instead, just the issue before us. The problem before us is that we want to highlight just the active indent guide of the code in the editor. By default, VS Code highlights both the active...
- 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...
- Every millisecond your JavaScript runs is a millisecond borrowed from your users. Here's how to be a better guest on the main thread....
- How to make a cigarette smoke effect using shaders and three.js....
- The setup for my notes blog looks like this: Content is plain-text markdown files (synced via Dropbox, editable in iA Writer on my Mac, iPad, or iPhone) Codebase is on GitHub Builds are triggered in Netlify by a Shortcut I try to catch spelling issues and what not before I...
- I’ve never been one to write these kinds of posts, but I’ve really enjoyed reading these! Hearing that my buddies had small moments of joy and success makes me feel warm and fuzzy inside, despite the overall mood of 2025. For me, the overall theme of this year was survival. I...
- 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...
- Making the most of inheritance when extending custom element classes....
- A reusable pattern for custom elements installation...
2 months ago
- I've created the <generate-html> Web Component, an LLM-powered tool that generates and renders interactive HTML or SVG images securely using Google Gemini or Chrome's built-in AI. It features a "Double Iframe" architecture for security, supports multiple providers, and has zero...
Rows per page
