More on the 11ty Blog:Get your 11ty Conference 2024 Merch Bundle (Limited Edition) (2024 March 21)We want you to speak at the 11ty Conference! (2024 February 23)Register now for the 11ty Conference! (2024 February 16)We’re running an 11ty Conference! (2024 January 30)

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 <script> elements in the output of the site’s build.Origin Story #It started with a toot celebrating CSS Naked Day:It’s #CSSNakedDay! I love this trend—it highlights the importance of a foundation of good HTML. We need a similar one for JavaScript! #JSNakedDay should be April 10 😅Related: I first wrote about CSS Naked Day in April 2020.And then Simon MacDonald ran with it, settling on April 24:In some countries, “April 24” can be written as “4/24” — which is also the HTTP error code for a failed dependency. JS Naked Day promotes the fact that websites should work without a dependency on JavaScript.Simon even built a web site: js-naked-day.org

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 use Eleventy v3.0 and WebC, it was the perfect time to join the stream to chat. We walked through a bunch of my favorite Built With Eleventy personal and community sites too.lite-youtube {max-width: 100% !important;background-size: cover;}/* 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 on YouTube: Glitch Jams Live Ep. 16: Eleventy'ingThis week we're welcoming our first ever guest to the stream - Zach Leatherman, a pal who happened to create and maintains our favorite site generator, Eleventy. Join Jenn Schiffer as she shares all the cool apps the community shared over the last week on Glitch, and then l

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 only for people that want it! (Free shipping and a holographic sticker for Open Collective supporters)This store will close April 5 to fulfill orders for the conference. The last day to order this bundle is April 5.Head over to merch.11ty.dev

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.Listen #on YouTubeon Spotifyon Apple Podcastson Google Podcastsor embedded on YouTube:lite-youtube {max-width: 100% !important;background-size: cover;}/* 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 on YouTube: Mechanical Ink: Unpacking the Challenges and Opportunities in Modern Web DevelopmentShared #on LinkedInon Mastodon

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 stream (episode 1 and episode 2), Mike and I explored an 11ty plugin to output the transcript of a YouTube video to allow video transcripts to be embedded into video posts, thus extending some of this feature to work with Pagefind (the static search engine).I’ve wired this up on a few video posts on my site (that I know have higher quality transcripts/captions):Live Editing an Eleventy Project in CloudCannon with BookshopBuilding a multi-language Taylor Swift fan site (10 Minute Version) (Zach's Version)Eleventy and CloudCannon: New Best FriendsThe Eleventy v2.0 Release, a talk at the Eleventy MeetupExploring the Bounds of Jamstack on What the JamThe really cool part of these demos is that the actively playing video

Read on the Eleventy Blog: Eight Million npm Downloads for Eleventy

I really enjoyed this panel. Let’s save the Jamstack community!lite-youtube {max-width: 100% !important;background-size: cover;}/* 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 on YouTube: Panel Discussion: What's next for Jamstack?Dive deep into the heart of Jamstack with our panel discussion featuring some of the most influential voices in the industry: Salma Alam-Naylor, Cassidy Williams, Bryan Robinson, and Zach Leatherman. Recorded live on February 20th, this session explores the bounds of the term, challenges, and opportunities shaping the future of web development through Jamstack.Panel:https://twitter.com/whitep4nth3rhttps://twitter.com/cassidoohttps://twitter.com/brobhttps://zachleat.com/@zachleathttps://fosstodon.org/@mikeneuLearn more at thefutureofjamstack.org.Related coverage #Developer Panel Wants an ‘Anti-Capitalistic Jamstack’The future of Jamstack is anti-capit

<hyper-card> 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.DemoDemo on my ticket to the 11ty ConferenceSource code on GitHubFeatures #Respects prefers-reduced-motion.Customize scale with --hypercard-scale CSS custom property.Installation #You can install via npm (@zachleat/hypercard) or download the hypercard.js JavaScript file manually.npm install @zachleat/hypercard --saveAdd hypercard.js to your site’s JavaScript assets.Usage #<hyper-card>Hello.</hyper-card>Not quite as big on hover #The default value is 1.07.<hyper-card style="--hypercard-scale: 1.03">Hello.</hyper-card>

<webcare-webshare> 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.DemoSource code on GitHubUsed on the registration flow for conf.11ty.dev.Features #Defaults to copy URL when Web Share API is not available.Optionally override with your own copy-able content.Custom button text when Web Share API is not available.Installation #You can install via npm (@zachleat/webcare-webshare) or download the webcare-webshare.js JavaScript file manually.npm install @zachleat/webcare-webshare --saveAdd webcare-webshare.js to your site’s JavaScript assets.Usage #Use share-text and share-url per the Web Share API. The button is un-disabled when initialized.<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/"><button disabled>Share your ticket!</button></webcare-webshare>Custom button text #Copy to clipboard workflow only. Use the label-copy (Before) and lab

<throb-ber> is a web component to add a little baby rainbow gradient overlay that shows until all of the images nested inside have finished loading.DemoSource code on GitHubWorks best with expensive dynamically generated images (like from the Eleventy Image Screenshot API). Used on the registration flow for conf.11ty.dev.Features #Custom minimum delay before the loading indicator is shown.Custom loading indicator bar height.Custom loading indicator gradient.Installation #You can install via npm (@zachleat/throbber) or download the throbber.js JavaScript file manually.npm install @zachleat/throbber --saveAdd throbber.js to your site’s JavaScript assets.Usage #<throb-ber><img src="myimage.png" alt="" width="600" height="400"></throb-ber>Change minimum delay #The minimum time before the loading indicator is shown. delay is in milliseconds (0.5 seconds shown).<throb-ber delay="500"><img src="myimage.png" alt="" width="600" height="400"></throb-ber>Customize appearance #Dark background whil

This talk was given at TheJam.dev 2024.lite-youtube {max-width: 100% !important;background-size: cover;}/* 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 on YouTube: Lessons learned moving Eleventy from CommonJS to ESMAnd the full slide deck is included below:< PreviousNext >Correction: on Slide 40 the code reads eleventyPlugin.addPlugin when it should say eleventyConfig.addPlugin.

<carou-scroll> 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 GitHubDemoMore real-world demos of Keynote slides:The Good, The Bad, The Web Components (and the post source code)The Eleventy V2.0 Release, A Talk at the Eleventy Meetup (and the post source code)Eleventy: Build vs. Serverless vs. Edge (and the post source code)Features #Interaction compatible with scroll or touch.No layout shift. Make sure you include the CSS snippet!(Optional) Smooth scrolling with scroll-behavior: smooth.(Optional) loop attribute to enable looping around from start/end.(Optional) Next/Previous buttons can be placed anywhere in the document.(Optional) <output> element can accessibly announce the current slide number (out of total number of slides).Usage #Installation #You can inst

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.jsxfunction MyButton() { return ( <button>I'm a button</button> );}// Usage<MyButton/>You may recognize the above example taken from the documentation of one of the most popular component libraries in use today—Vercel.js.Folks may not know that the web platform has some component functionality built-in and is evolving support for new component development standards and specifications moving forward! These features are broadly known as Web Components.Aside from Vercel.js, there are a variety of other popular component libraries too (of varying degree of web component friendliness):Library Uses NativeWeb Components Custom Elementsas Compile Target CompatibilityScore Alpine No No Unknown Angular No Yes 100% Ember No NoUnknown htmx Unknown --> Lit Yes Yes 100% Preact No Yes 100% Qwik No No Unknown React No No 67% Solid No Yes 94

Update: Registration is now open! Join us!On May 9, 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.More on the 11ty Blog:We’re running an 11ty Conference! (2024 Jan 30)Register now for the 11ty Conference! (2024 Feb 16)

This is an event post. If you’d like to watch the talk, you can do so at: Lessons learned moving Eleventy from CommonJS to ESM.

Welcome to a new episode of "What the Jam," the show that dives deep into the fascinating realm of Jamstack, bringing you face-to-face with its most influential figures. In this episode, we're excited to feature Zach Leatherman, the creative mind behind Eleventy and a key figure in the Jamstack community. Zach takes us through his journey with Eleventy, discussing the inspirations and challenges behind creating one of the most popular static site generators. He shares his insights on the evolution of Jamstack, its role in reshaping the landscape of web development, and a path forward. Have your say at https://thefutureofjamstack.orglite-youtube {max-width: 100% !important;background-size: cover;}/* 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 on YouTube: Exploring the Bounds of Jamstack on What the JamSearchable Transcript #00:00And I think that if Jamstack can succeed, it nee

Series:2023, 2022, 2017, 2016, 2015, 2014, 20132023 has been one hell-for-leather roller coaster of a year.Down for the count #In late April, Eleventy lost its full time sponsorship in the midst of Netlify’s struggle to survive the gauntlet of late-stage venture capitalism.I burned out pretty hard during this transition. We could go back and forth about the details of how it was handled but as things move forward it doesn’t seem productive to rehash it (I wrote and deleted this section many times). The most productive summary I can offer is that the Silicon Valley mentality of hockey-stick hyper-growth (or death) is simultaneously unhealthy and needlessly destructive for all involved parties.I do feel a bit of shame in admitting to myself that despite all of the precautions I took while administering Eleventy as an independent project, Eleventy almost died this year—and the responsibility for that is mine.Don’t call it a comeback #In happier news, in August I joined CloudCannon as a de

lite-youtube {max-width: 100% !important;background-size: cover;}/* 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 on YouTube: Building a multi-language Taylor Swift fan site (10 Minute Version) (Zach's Version)In the above video I walk through a Taylor Swift lyrics fansite I built to demonstrate a few internationalization features with Eleventy and CloudCannon.DemoSource codeFeatures #Supports English and Spanish (any number of languages can be added)Using Eleventy’s i18n pluginUsing rosetta for string transformationCustom redirects are not necessary! The HTML links just work.For-free inter-language page-aware language chooser (e.g. “Also available in…”)Translated header, footer, and banner (in a different repo via Site Mounting)For-free locale aware search from PagefindAlbum art pulled from Spotify Open Graph imagesDeep links to various streaming servicesBuilt with Eleventy v3

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 Survey (as the results only represent Netlify customers) but I digress.A few disclaimers before we get started:I am the creator and maintainer of Eleventy.From 2020–2023 I was employed by Netlify.In 2021 I worked on the Jamstack Community Survey results website (but was not involved in the survey data collection nor the results content).Problems #This year’s report has a few changes to the presentation of results that I think have traversed the report into territory that I called “intellectually dishonest” on Mastodon. My default in these situations is to let these things go but enough people have tagged me on this—while also drawing some damaging conclusions from the disingenuity in this report—that I feel th