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...
- 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....
Last week
- 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...
Two weeks 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...
- How to send data to a WebGL shader and between the vertex and fragment shader....
About a month ago
- A new way to allow elements inside a Shadow DOM to be targeted for accessibility or other reasons....
- My new hobby project....
- Hell froze over. Anthropic fixed Claude Code's signature flicker in their latest update (2.0.72)...
about 1 month ago
Rows per page