Coding Design Systems - ep11 - 11ty and Design systems, with Zach Leatherman

Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about design systems, on Backlight.dev!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00 - Intro 01:29 - 11ty and static sites generation 06:13 - JavaScript as a first class citizen language for tooling 09:44 - Building an Open Source community 13:08 - The future of Eleventy 16:42 - Using Vite with 11ty to process your assets 21:27 - Using 11ty to power your Design System 29:25 - 11ty Vue-plugin: using Vue as templating language for SSR content 37:10 - The template extension API in 11ty 43:48 - Data cascade and data flow in 11ty 48:20 - Outro: always bet on Web Components

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

This week, not that much coding, but a nice and insightful discussion with Zach Leatherman, creator and main maintainer of 11ty (eleventy), the modern static site generator. We talk about static generation, JavaScript ecosystem, Open Source communities, Plugins’ API and extensions, and the future of the webpages generation. We also cover the design systems field in the context of using SSG (Static Site Generators) and building reusable components. Our best advice: always bet on Web Components!

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

• 🐥 @zachleat: https://twitter.com/zachleat

• https://www.zachleat.com/

• 🐥 @eleven_ty: https://twitter.com/eleven_ty

• https://www.11ty.dev/

• Using Vue as components provider with 11ty: https://www.netlify.com/blog/2020/09/18/eleventy-and-vue-a-match-made-to-power-netlify.com/

• 11ty Vue plugin: https://github.com/11ty/eleventy-plugin-vue

• 11ty Svelte plugin: https://www.npmjs.com/package/eleventy-plugin-svelte

• Template extension API: https://www.11ty.dev/docs/languages/custom/

• Slinkity, islands pattern for 11ty: https://slinkity.dev/

• Nord design system: https://nordhealth.design/

• Shoelace Web Components library: https://shoelace.style/

• All the ways to make a Web Component: https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/?utm_campaign=sessions%3Acds

• Netlify sponsoring full time OSS 11ty development announcement: https://twitter.com/eleven_ty/status/1493284209925967872?s=20&t=yDg90uSidnVwIzzHAKWqyg

• 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds

• 🐥 Georges Gomes: https://twitter.com/georges_gomes

• 🐥 m4dz: https://twitter.com/m4d_z