Zach’s ugly mug (his face)

Zach Leatherman

The Eleventy v2.0 Release, a talk at the Eleventy Meetup

March 16, 2023 Tagged: Eleventy Speaking
Play Video: The Eleventy v2.0 Release, a talk at the Eleventy Meetup

Watch on YouTube or check out the full Eleventy Meetup YouTube channel!

Slides

Eleventy v2 Dependencies: v1.0.2 ×311, v2.0.0 ×211 More secure: reduce future npm audit vulnerabilities Smaller: v1.0.2 155 MB, v2.0.0 34.3 MB Smaller: comparison to Next.js 158 MB, Astro 169 MB, Gatsby 583 MB, Remix 497 MB Faster install: v1.0.2 7.406 seconds, v2.0.0 5.149 seconds Faster install: comparison to Next.js 3.72 seconds, Astro 12.52 seconds, Gatsby 43.36 seconds, Remix 40.14 seconds As always, no telemetry --incremental (finally) Terminal showing an incremental build, file changed: src/index.webc, Wrote 1 file (skipped 167) in 0.79 seconds Terminal showing an incremental build, layout file changed: src/_includes/layouts/docs.njk, Wrote 156 files (skipped 10) in 1.51 seconds Terminal showing an incremental build, component file changed: src/_includes/components/callout.webc, Wrote 1 file (skipped 167) in 0.71 seconds Terminal showing an incremental build, editing a page in a collection: src/blog/2023-02-08-eleventy-v2.md, Wrote 2 files (skipped 166) in 0.68 seconds Showing how to declare collection dependencies in front matter, JavaScript front matter: let eleventyImport = { collections: ['blog'] }; --ignore-initial --incremental: Wrote 165 files in 1.92 seconds or with --ignore-initial: Wrote 0 files in 0.76 seconds Emulated passthrough Copy: Copied 6898 files or skips all copy Dev server: minimal footprint 1.4 MB node_modules, Bundler decoupled, fast 2ms startup times, WebSockets-based Live reload, DOM-diffing HTML updates NO MORE indented markdown blocks Added default config file names eleventy.config.js and eleventy.config.cjs addShortcode(async () => {}); addFilter(async () => {}); this.page and this.eleventy on Shortcodes, Filters, Linters, Transforms Custom Data Formats add your own data file extension to Eleventy, addDataExtension('toml') Images as Data: addDataExtension('png,jpeg') Plugins: Edge, i18n, Base, and Vite WebC! HTML-first components Client-JavaScript 100% optional Single file components CSS/JS management included Islands Architecture with is-land Fully async-friendly Full incremental support Shadow DOM, Declarative Shadow DOM, No Shadow DOM What’s next for Eleventy? Better docs! Eleventy v3 🐥 (canary) Thank you!

Scroll for slide content →

Zach’s ugly mug (his face)

Zach is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He created IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 69 talks in nine different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Read more about Zach »

Previous
Defaulting on Single Page Applications (SPA)
Next
JS Party Episode #266: Celebrating Eleventy 2.0 🎉

9 Reposts

Josh BucheaBjörn BerkholzJens GrochtdreisLea RosemaLene SaileEleventy 🎈 v2.0.0Jean Pierre KolbDave 🧱Evan

22 Likes

bosttyAlistair ShepherdJosh BucheaJosh “Yoshi” Vickersoneswat42Óscar GarcíaHolger Hellinger ✔️Björn BerkholzLea RosemaWietse NevenLene SaileMatt ObeeSebAdrianna TanJames HarrisEleventy 🎈 v2.0.0Jeff SikesDave 🧱EvanMatthias OttEric WallaceAlex

Shamelessly plug your related post:

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)