This talk was given at The 11ty International Symposium on Making Web Sites Real Good.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: The Future of 11ty (2024)The rest of the amazing talks are also available on YouTube.And the full slide deck is included below: to with two image format outputs" width="1000" height="562" srcset="https://www.zachleat.com/img/built/KPIg1GglvV-600.jpeg 600w, https://www.zachleat.com/img/built/KPIg1GglvV-1000.jpeg 1000w" sizes="(min-width: 106.25em) 82.75em, (min-width: 61.25em) calc(91.43vw - 13.25em), 100vw" /> to with two image formats and two width outputs." width="1000" height="562" srcset="https://www.zachleat.com/img/built/z__Qbwmh2z-600.jpeg 600w, https://www.zachleat.com/img/built/z__Qbwmh2z-1000.jpeg 1000w" sizes="(min-width: 106.25em) 82.75em, (min-width: 61.25e

This conference was an incredible privilege to help organize and selfishly I will say that one of my favorite parts was getting a big say in the talk selection.They were all so good: Sia on Web Performance, Henry on the IndieWeb (I even saw Tantek and Aaron Parecki in the chat!), both Miriam Suzanne and Mayank on CSS, Chris Ferdinandi on Web Components, Dan Sinker with a very unique talk on storytelling using 11ty, Sara Joy on the accessibility of light and dark mode, Adrianna Tan on more welcoming tools, and ivan zhao on Chinese Type (of course we had to sneak a web fonts talk in there).Each one of these talks brought something unique to the line-up.We saw a project launch (flatlake.app, a static API generator) and the speakers showed their domain registrar receipts with a few new vanity domains: realbig.company and showbiz.baby.A huge thank you to our sponsors:CloudCannon CMSArtist ActivistCommunity Links #The New Stack: Static Sites Do Scale: Eleventy vs. Next.js at 11ty EventRyan T

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