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 ...
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 flag in the very bottom of the footer) but others have wanted to use it for more things!
This little 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.
You can configure a selector attribute to control the scope of the headings search. My site uses main :is(h2, h3) but the default is main :is(h2, h3, h4, h5, h6).
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.
I decided to fold this into a reusable component so that I can benefit from this work on future websites (and you can use it too, I guess!). It’s called @zachleat/solar-eclipse-toggle and you can find it on GitHub or on npm now.
My favorite parts about the component are that it shows an inert button pre-JS, incurs no CLS, is still functional when the (separate) CSS doesn’t load successfully ([hidden] for the win), and all strings are inserted from light DOM for good internationalization.
Lea Verou sparked some lovely discussions about dark/light mode toggles by asking a simple question: do these form controls need three options for two user-facing states?
You have Dark mode (1). You have Light mode (2). You have System mode (inheriting your operating system ...
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 ...
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 li...
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 littl...
We’re ramping up again to launch the Build Awesome (11ty) Kickstarter Final_FINAL_v2 on April 28, 2026 and in this post I make the case for a new web site builder can layer itself on top of your existing projects as a progressive enhancement. Infrastructure as progressive enhancement!
This talk was given at State of the Browser (2026). Check out the event talk page (which includes a talk transcript, too).
We’ll talk about best practices to either reduce (or increase!) the JavaScript footprint on your web site to a sweet and very practical spot for best r...
*Not official.
I was working on my slide deck for the upcoming State of the Browser conference and ran into what I would classify as a recurring issue: HTML needs a logo. There isn’t a broadly accepted official logo for (version-independent) HTML. There is a logo for HTML 5,...
Eleventy started as a side project. Now it’s a critical infrastructure for thousands of websites.
TL;DR: Open source isn’t broken. But the way we fund it often is. Let’s talk about what actually works.
In this episode, we sit down with Zach Leatherman, creator of Eleventy (...
It was another huge year for 11ty. We shipped 177 releases (73% more than 2024) across the full 11ty/* suite. We closed 804 issues (15% more than 2024). We reduced core’s dependency count by 28% and weight by 22%. More folks are building with Eleventy than ever: our year-over-year npm downloads (for only core) are up by 51%!
With the recent spate of high profile npm security incidents involving compromised deployment workflows, I decided that it would be prudent to do a full inventory of my npm security footprint (especially for 11ty).
Just in the last few months:
November 2025: Shai Halud v2 ...
Say, you want the smooth convenience of consuming content that feels like it’s generated in real time without having to deal with the tradeoffs of a Large Language Model née Artificial Intelligence.
Why not use animation? It’s the perfect metaphor for a Hollywood-esque venee...
Astute visitors to the Eleventy Documentation will notice something new on the code blocks on the site.
A wild copy-to-clipboard component has appeared:
This feature been a long time coming and is our first use of Web Awesome on the docs (via the <wa-copy-button> cus...
Every single page of the 11ty.dev Docs has a facepile in the footer, populated (automatically) by our Open Collective supporters list. Historically, to be a part of this facepile you needed to meet the following criteria:
Have an active recurring (monthly/yearly) Open Colle...
I encountered a surprising (to me) edge-case bug with Markdown code blocks in the markdown-it plugin today that I thought was worth sharing!
Consider this sample index.md template with a code block with an empty line (typical use in a markdown file):
```js
// Line 1
// Line...
StarCraft II was first released in 2010 and it’s still amazing:
Free-to-play (since 2017)
It’s an old game so it works on a wide variety of hardware and software.
Great tutorial play that trains new players from scratch (even those without any real-time-strategy experience)...
MDN takes a strong stance against using new with Boolean:
…all objects, including a Boolean object whose wrapped value is false, are truthy and evaluate to true in places such as conditional statements. — MDN: Boolean: Boolean primitives and Boolean objects
(…though it mak...
Watch on YouTube: How We Built Web Awesome with 11ty (and Why It’s So Fast) on Podcast Awesome
More at podcastawesome.com
Build once, run everywhere.
In this full-nerd, front-end-leaning episode of Podcast Awesome, Matt sits down with Zach Leat...
I have my operating system configured to use visible scrollbars, a feature prominently elevated in macOS’ System Settings high enough that it would seem to imply some level of common usage (even though it’s not a default).
I don’t necessarily prefer the behavior this feature...
Our basement flooded this week, so I’ve been cleaning up the mess. In that process, I found a 22-year-old letter from my grandmother (who passed away Christmas 2023) to my mom that had a little Eleventy naming history that some folks might enjoy.
I first talked about the sig...
This web site does a fair bit of built-time Image Optimization using the HTML Transform method provided by the Eleventy Image plugin. I took a bit of a set-it-and-forget-it approach with the plugin on this site, mostly for my own convenience. My usage looked something like t...
Never write your own date parsing library.
Never. No exceptions.
Never have I ever…
So… I’ve written my own date parsing library.
Why? Our story begins seven years ago in the year 2018. I made the very sensible choice to adopt luxon as the Date Parsing library for Eleventy. ...
Subscribe
