Today my personal web site is being served sans-JavaScript in honor of JavaScript Naked Day. I implemented this on my web site using a global JS_ENABLED in my Eleventy configuration file (propagated to templates via Eleventy’s global data). This removed the elements in the outpu … | Continue reading
I was honored to be the very first guest to Glitch Jams Live! Glitch has always been a huge supporter of Eleventy—with a very prominent button to create an Eleventy Starter project on their home page. With the recent migration of the Glitch Blog (via Keith Kurson on Mastodon) to … | Continue reading
The 11ty International Symposium on Making Web Sites Real Good (Conference) is approaching fast on May 9, 2024 and 947 folks have already signed up for the event! To pair with the event, for the first time ever we’re offering a merch bundle for purchase. It’s conference swag, but … | Continue reading
In this episode of the Mechanical Ink podcast, host Schalk Neethling sits down with Zach Leatherman, the creator of #11ty (among other open-source tools) in a conversation that spans the crucial aspects of web development. They explore the intertwined relationship between web per … | Continue reading
I helped work on the Jamstack TV project (now dormant with the rest of the jamstack.org site, though the feature is still up), which used a lovely Algolia integration to allow deep searching of video transcripts. It was a really cool feature. In The Static Chronicles Twitch strea … | Continue reading
Read on the Eleventy Blog: Eight Million npm Downloads for Eleventy | Continue reading
I really enjoyed this panel. Let’s save the Jamstack community! .lite-youtube-link { --ellipsis-lines: 2; margin-top: 0.5em; /* 8px /16 */ background: url(https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fyoutube.com/) no-repeat; background-size: 1em auto; background-position: 0 … | Continue reading
is a web component that adds a three-dimensional hover effect to any arbitrary content. Full credit to this 3D card hover effect CodePen from Mark Mironyuk. Used on the registration flow for conf.11ty.dev. Demo Demo on my ticket to the 11ty Conference Source code on GitHub Featu … | Continue reading
is a web component that uses the Web Share API to share a web site, falling back (on desktop usually) to a copy to clipboard workflow. Demo Source code on GitHub Used on the registration flow for conf.11ty.dev. Features # Defaults to copy URL when Web Share API is not available. … | Continue reading
is a web component to add a little baby rainbow gradient overlay that shows until all of the images nested inside have finished loading. Demo Source code on GitHub Works best with expensive dynamically generated images (like from the Eleventy Image Screenshot API). Used on the r … | Continue reading
This talk was given at TheJam.dev 2024. .lite-youtube-link { --ellipsis-lines: 2; margin-top: 0.5em; /* 8px /16 */ background: url(https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fyoutube.com/) no-repeat; background-size: 1em auto; background-position: 0 .35em; padding-left: 1. … | Continue reading
is a zero-dependency web component to add next and previous buttons to a scrollable container. I use it to share exported Keynote slides (as images) on my blog posts. Some inspiration from the W3C WAI Carousel Tutorial (though this isn’t technically a carousel). Source code on G … | Continue reading
a[href]:has(.z-avatar) { white-space: nowrap; } This post was created from a talk. You can watch this in video form at JSHeroes 2023. The humble component. The building block of modern web development. // MyButton.jsx function MyButton() { return ( I'm a button ); } // Usage … | Continue reading
In May 2024 (this year!) we’ll gather together our extremely-online community of webcraftspeople to share what we know! Join us at the 11ty International Symposium on Making Web Sites Real Good. You can also read about it on the 11ty Blog: | Continue reading
This is an event post. The talk content will be linked here when it is available. | Continue reading
.lite-youtube-link { --ellipsis-lines: 2; margin-top: 0.5em; /* 8px /16 */ background: url(https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fyoutube.com/) no-repeat; background-size: 1em auto; background-position: 0 .35em; padding-left: 1.25em; line-height: 1.4; } is-land lite-yo … | Continue reading
As Netlify distances itself from Jamstack in an attempt to survive a VC-funded battle with Vercel, they have also rebranded the Jamstack Community Survey to a more generic The State of Web Development report (behind an email signup form). It should be called the Netlify Community … | Continue reading
The very first Eleventy v3 alpha release is out in the wild and you can try it out on your web site. The two big flagship features (so far) are ESM support (while keeping CommonJS support) and asynchronous configuration callbacks in both ESM and CommonJS. eleventy.config.js (in a … | Continue reading
is a zero-dependency, JavaScript web component to add snow to your web site (or to an element on your web site). This is a web component implementation of this Codepen from alphardex. Demo Source code on GitHub Usage # Installable from npm: npm install @zachleat/snow-fa … | Continue reading
The default YouTube embed is… well… atrocious (sorry). Consider an embed for this sample video: 1149 kB total weight, including: 971 kB JavaScript 61 kB Poster Image (jpeg, 1280×720) 48 kB CSS 41 kB of iframed HTML 28 kB for ×3 Roboto Web Fonts (compressed wire weights reported) … | Continue reading
This one from May 2022 was conspicuously missing from my web site. enables Islands Architecture* on any web site. It’s an HTML web component. It has zero dependencies. It doesn’t require any server-side or build integration. *with credit to Katie Sylor-Miller. I use this web com … | Continue reading
I’m a huge fan of Pagefind, the fully static search engine. The super cool thing about Pagefind is that it does not require an application server—you can host it on GitHub pages (which I’ve done in the demo below)! I currently use Pagefind on this very web site and on 11ty.dev. I … | Continue reading
Play Video: Live Editing an Eleventy Project in CloudCannon with Bookshop /* Plugin bug: clicking the red youtube play icon in the center would navigate to youtube.com */ lite-youtube:defined .lty-playbtn { pointer-events: none; } Watch the full video on YouTube Microbl … | Continue reading
In 2014 I made a fake W3C Specification Status Banner component. It’s now a web component instead. Web components are fun and I’m having fun. Demo Code on GitHub | Continue reading
At the Jamstack ZHUZH, we had a lovely panel discussion on the current and future status of the Jamstack ecosystem. Some stakeholders and detractors have declared the Jamstack “dead,” in part evidenced by the recent shuttering of the Jamstack Discord, the discontinuation of Jamst … | Continue reading
As my experience with web components grows, my personal view of how to build a web component is also evolving. In some cases I’ve gone back and refactored older components with the new knowledge and experience I’ve gained. In other cases, these older components sit as evidence of … | Continue reading
Working on an Image Optimization tutorial for CloudCannon (using Eleventy), I stumbled into what I think is a neat little trick for automated image optimization. There are three kinds of optimization that Eleventy Image can do: Raster to raster: Convert a large raster input image … | Continue reading
CloudCannon launched a new feature today called Site Mounting and I’m very excited about it. I put together a quick video demoing the feature, which I’ve immediately put to good use across a bunch of projects. Play Video: Automatically Rebuild Shared Components with Site Mount … | Continue reading
Read on the Eleventy Blog: A new Eleventy mascot from David Neal! | Continue reading
A lightweight structural-only zero-dependency web component to progressively animate to reveal HTML content. I believe the name came from an awkward portmanteau of squirmy and terminal. This one is a few years old (but I am currently cataloguing my web components) and was develop … | Continue reading
A lightweight structural-only zero-dependency web component wrapper to emulate a Safari-esque browser window for demos and presentations. Demo Repository Originally used in the slide deck for This Web Site is a Tech Talk. Notably (as this component is best for demos) it does use … | Continue reading
A small structural-only zero-dependency Web Component to show Parity Purchasing Power normalized prices. Inspired by the Wes Bos blog post. Source Code Live Demo $10 $10 USD 10€ 10€ Please note that this is not a currency converter (you will get the same currency out that you … | Continue reading
A web component for resizing an element to demonstrate container-query responsive (or intrinsic web design) behavior of child components. Demo Repository Use in the wild # table-saw Demo flex-luthor Demo | Continue reading
A lightweight structural-only zero-dependency web component wrapper for to render wide tables in small viewports. Automatically creates a two-column layout at small screens with table headers repeated throughout. Works with Container Queries or Media Queries. Easily customize th … | Continue reading
Play Video: Jamstack ZHUZH: a Roundtable Discussion on the future of the Jamstack Community /* Plugin bug: clicking the red youtube play icon in the center would navigate to youtube.com */ lite-youtube:defined .lty-playbtn { pointer-events: none; } Watch the full video on … | Continue reading
A few weeks ago I asked y’all what blog posts were most influential to how you build for the web. I had a lot of fun building a little micro-site for these links and it’s now available: https://esif.dev/ This site makes a great reading list (and has an RSS feed too). Tutorial Vid … | Continue reading
Play Video: Eleventy and CloudCannon: New Best Friends /* Plugin bug: clicking the red youtube play icon in the center would navigate to youtube.com */ lite-youtube:defined .lty-playbtn { pointer-events: none; } View full video on YouTube. Read more on the CloudCannon Blo … | Continue reading
I was honored to speak alongside Justin Fagnani (Lit), Kristofer Joseph (Begin, Enhance.dev), and Rob Eisenberg about the current state of the Web Components ecosystem. We talked a bit about the controversial is attribute, how we’re all excited about upcoming Declarative Custom E … | Continue reading
As Eleventy continues forward on its mission to help super-fans of HTML quickly and easily build things for the web, as a responsible steward of the project I must disclose that we are no longer doing so with full time sponsorship. As such, Eleventy will be returning to its roots … | Continue reading
This content lives somewhere else. It was originally posted at: https://jsnation.com/ | Continue reading
This content lives somewhere else. It was originally posted at: https://jsheroes.io/ | Continue reading
div.livedemo { font-family: fantasy; } Web components are great. They’re versatile. They can be rendered on the server or (very much less preferably) on the client. They may or may not need interactivity or client-side JavaScript. And unlike heftier legacy frameworks like React, … | Continue reading
If you’re trying to build a single page application (SPA), you should probably use a tool designed primarily for the job. Site generators focused on performance, shipping low to zero-client-JavaScript (e.g. the one I work on, Eleventy) typically use full page navigations. SPA adv … | Continue reading
Look for the video on the Eleventy Meetup YouTube channel! Slides # Scroll for slide content → | Continue reading
I was on the JS Party podcast! Zach Leatherman returns to the show to discuss his progress over the last year since going full-time on Eleventy, including Eleventy 2.0, the release of WebC, and the state of static site generators. Listen at https://changelog.com/jsparty/266 | Continue reading
Just going through the backlog of some old projects and found this Filament Group gem that went unpublished! Flex Luthor is a small CSS wrapper library to help with responsive intrinsic-sized Flexbox layouts that wrap based on content and container width (avoiding viewport-based … | Continue reading
It’s time again for every framework author’s favorite: The JavaScript Site Generator Review, February 2023 edition. Expand for the table of contents Previous Reviews npm install Times Client JavaScript Baseline node_modules Weight npm Auditing Telemetry Feedback Here is the list … | Continue reading
Kept seeing this error on my Netlify builds of the Speedlify project after upgrading to Puppeteer 19: /opt/build/repo/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js:127Error: Could not find Chromium (rev. 1095492). This can occur if either 1. you did not pe … | Continue reading