Every year, browser vendors collaborate via the Interop project to synchronize their efforts on new HTML/CSS/JS features. This year, there’s a ton of super exciting features being considered! In this blog post, we’ll explore the CSS of the future, to get a glimpse of what we’ll…
I am a habitual tab hoarder so I created a Firefox addon to help me manage every one of my very special browser tabs. Sort tabs by oldest, unload them, find duplicates, and consolidate tabs to a single window — buncha useful stuff in there! Download from Mozilla Addons Source…
Millions of Large-Language-Model-generated words have been spilled on craftsmanship in this gilded-age of software development. We now have agents to plan how code will be written, agents to write code, agents to review code, agents to orchestrate and dispatch tasks to other…
In Profile · Blog
How to be Paranoid
I’ve been doing some spring/fall cleaning and found an unpublished follow-up component to <snow-fall> (a web component to “snow” on your website — which also happens to work with emoji too). Originally it was created as an easter egg for Blog Awesome (click on the Font Awesome…
…and another one. This little (zero CSS) web component has two modes: progressively enhance a hierarchy of server rendered <ol> or <ul> elements (or conveniently client render them for you if they don’t exist) to highlight which are currently visible in the viewport. I pulled…
In Trying out a Two-state Dark Mode Toggle I summarized the Two-state Dark and Light mode Toggle discussion as I experimented with a toggle in my personal website footer. After launch, Curtis Wilcox left some good feedback to improve the accessibility of the component. I decided…
What it takes to run agents in a codebase older than the team
Update I made some updates and released it as a web component: details in Solar Eclipse Toggle, a Dark/Light mode Toggle Web Component. Lea Verou sparked some lovely discussions about dark/light mode toggles by asking a simple question: do these form controls need three options…
Prior blog post (if you want the full context): If I work really hard on my Open Graph Images, People will share my Blog Posts (2021 Aug) Here’s the gist: Open Graph images are those little pictures that show up when your site is shared on social media. […] Each individual blog…
Agents can finish the task without teaching you anything. Building expertise now has to be deliberate.
speedlify.dev, now running Speedlify2. The year is 2020. Inspired by a lack of budget for a web performance monitoring tool, the original Speedlify project (Speedlify Classic) was shipped to continuously measure site performance. It ran Lighthouse against a predetermined list of…
A field guide to building a software factory that still has an owner.
Goals, loops, and the discipline of not delegating your judgment
I have a lot of open source projects (of varying sizes and shapes). At time of writing, I’m currently maintaining ×78 npm packages. Of those, 22 are super lightweight zero-dependency custom elements a.k.a. 🚾 Web Components (love the future compatibility I get with very little…
A software factory is harnessing loops at scale - the system that builds your software instead of you. You can run the loop with humans in it (light factory) or you can ignore the humans (dark factory) and let those agents scope, build and ship code, without anyone really…
Engineers need to own the outer loop, the accountability for these systems. A written version of my AI Engineer World's Fair 2026 closing keynote: quality, verdict, and answerability, the three hidden costs of delegation, and building software factories you can stand behind.
Taste used to be a byproduct of the reps. Agents took the reps. So if you're junior you now have to go get the taste and judgment on purpose. A builder's look at the weakening entry level, the two debts we now owe, and concrete ways to build judgment when the machine writes the…
For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has decided to provide a first-class solution to this problem, and it’s pretty friggin’ cool! In this…
You may have seen Andrej Karpathy talk about "LLM Wikis." They turn your unorganized thoughts into easy-to-navigate notes, wikis, or visualizations. It's an incredibly powerful tool for researchers, software developers, scattered notetakers... basically everyone. Here's the…
AI gets good at anything with an answer key. Your career is everything that doesn't have one.
There are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe animations. In this blog post, we’ll compare the same animation across several different strategies…
The Build Awesome (11ty) Kickstarter (Final_FINAL_v2) is live! We’re trying to make it easier for anyone to build, publish, and maintain web sites! Update: the Kickstarter campaign has concluded but late pledging (and late pricing) is still available. Go directly to the…
The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It’s honestly a very lovely API, and in this blog post, we’ll explore some of the super cool things we can do with it. Keep reading.
Have you ever heard of Disney’s 12 Basic Principles of Animation? In this tutorial, we’ll explore how we can use the very first principle to create SVG micro-interactions that feel way more natural and believable. It’s one of those small things that has a big impact. Keep…
There is a lil’ UI detail on this blog. Most people don’t even notice it, but the ones who do often reach out, asking how on earth it works. It feels like it defies the rules of CSS! In this blog post, I’ll break down the surprisingly-straightforward implementation so you can…
In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web these days. 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…
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…
As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any…
Setting up a new computer is bliss — no old, unused apps and the machine performs much better than the previous. Unfortunately, you may encounter new problems based on the new hardware. One such issue I encountered with my new MacBook was a “This video format is not supported”…
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…
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? Keep reading.
So... I'm building a notes app. And it's called Hubble Note.What is it?Hubble Note helps you remember everything you wrote down. It combines your notes, your chats, and your web browsing into a single tool, backed by a smart little assistant called Hubble. It's as simple as…
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…
SVG gives us many different primitives to work with, but by far the most powerful is the element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some of the cool things we can do…
The 48 desks behind these stories. Open one to read only their work.
Looking for a particular subject? Narrow the next edition here.
