Celebrating Eleventy 2.0 🎉—JS Party #266

March 10, 2023

Via: https://changelog.com/jsparty/266

Screenshot image for https://changelog.com/jsparty/266

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

Even More JSParty

Tags: Eleventy Speaking

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 86 talks in nine different countries at events like Beyond Tellerrand, State of the Browser, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Learn more about Zach »

1 Comment

jaenis.ch

Show original post This site is a reply to https://www.zachleat.com/web/jsparty-eleventy-2/ . By André Jaenisch on 28.07.2023. About 4 minutes reading time. This text is estimated to be fairly difficult to understand. Update! This post was also published in German. This month I was down with different sicknesses. It slowed down my progress significantly. But as it is the fate of freelancers I have to cope with those downtimes on my own. Today I’m feeling a little bit better and spend the time to pick up where I left my progress. As you can tell from the footer, this website is built with Eleventy. As such I have full control over everything. Something I dreamt for so long now was to combine Eleventy with Storybook. This way I can share my templates across different projects to get closer to a coherent look and feel. That is, build up brand recognition. I’m pleased to announce that today I figured out how to do just that. Why Nunjucks? My templates are written in Nunjucks. It’s a template engine authored by Mozilla. The other day I took a look at it. Yes, the examples there are dated. Neither Firefox OS Marketplace nor Webmaker are still around. Nevertheless it meets my needs. In Celebrating Eleventy 2.0 Zach was very proud on WebC and encouraged everyone to migrate to it. I’d love to. But it’s not in the cards right now. Mainly, because I can’t run it in the browser. That implies that I can’t use it with Storybook which processes those templates in the browser. I originally used Liquid, because I started out with Jekyll. Then I moved over to EJS, but I hit some roadblocks with asynchronous processing. Nunjucks is just right to me. I could use the JavaScript syntax, but I like to separate the markup from the interactive parts. Why do you need templates in the browser? Because Storybook. My intention is to allow others to learn from me. I enjoy teaching. Therefore I plan to build out my Design System going forward. I was hesitant to deploy this on Uberspace although I would have been technically able to, because there are some security concerns with the way they wrote their application. Now with a VPS I have the chance to properly separate the applications from each other. I tweaked my templates to allow for pull the static assets from the Design System to further encourage reuse. I’m happy that I could upgrade my Storybook setup to v7 and drop Webpack in favour of Vite. It’s not the best builder for my needs but at this point I consider everything better than Webpack. Their configuration is just so spaghetti that I prefer not to have to work with it. The upgrade of Storybook meant that I had to let go of some plugins and I was not able to restore everything I formerly had yet. But I’m getting there. ESM vs. CommonJS I hit some roadblocks on my refactoring. For example, I would love to use ECMAScript Modules everywhere, but Eleventy does not support it yet. That wouldn’t be such an issue if I could return a Promise from the Eleventy configuration, but that’s not doable right now either. After several back and forth I settled on authoring my code in ECMAScript modules and transpile to CommonJS using esbuild. It’s meh because it requires a handful of more steps but it works. Once I upgrade to Forgejo v1.20 I can use the Actions and automate away those tasks. I’m looking forward to be able to have a push in one repository (the design system) trigger updates in dependent repositories. For example, I’m also in process in bringing my Cheatsheets back online. I can pull the styles and render the content, but the template needs refinement. Why Storybook Storybook allows me to have a central place to define all my markup and document the thought process and decision making I have around those. Especially the latter is something I feel it’s important, but also hidden in so many projects. I want to be the change I want to see in the world here. Blog posts are nice, but it’s a separation of the code. This poses a hurdle. Locales You might noticed that some links break. I’m aware of this. For years I struggled on how to handle my German and English content. On the one hand I want to write in English because that’s how I can connect which large parts of the world. But I also want to meet those people who might not speak English. In this month I started to move some blog posts to locale subdirectories (/en/ and /de/) and add redirects to old links when I get around. I start from the early days and plan to move to more recent posts to reduce the noise this will inevitably cause in the early phase. You can expect to find more blog posts in both languages going forward that link to the counterpart in the other language. I also will provide more RSS feeds so you can choose whether you want to subscribe to information in one or both languages. My templates are not updated everywhere, so you will likely see some doubled conten