Celebrating Eleventy 2.0 š
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.
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.
This week weāre talking fresh, faster, and new web frameworks by way of JS Party. Yes, todayās show is a web framework sampler because a new batch of web frameworks have emerged. Thereās always something new happening in the front-end world and JS Party does an amazing job of keeping us up to date. Soā¦whatās fresh, faster, and new?
The first segment of the show focuses on Denoās Fresh new web framework. Luca Casonato joins Jerod & Feross to talk about Fresh ā a next generation web framework, built for speed, reliability, and simplicity.
In segment two, AngularJS creator MiÅ”ko Hevery joins Jerod and KBall to talk about Qwik. He says Qwik is a fundamental rethinking of how a web application should work. And heās attempting to convince Jerod & KBall that the implications of that are BIG.
In the last segment, Amal talks with Fred Schott about Astro 1.0. They go deep on how Astro is built to pull content from anywhere and serve it fast with their next-gen island architecture.
Plus thereās an 8 minute bonus for our ++ subscribers (changelog.com/++). Fred Schott explains Astro Islands and how Astro extracts your UI into smaller, isolated components on the page, and the unused JavaScript gets replaced with lightweight HTML ā leading to faster loads and time-to-interactive.
When it comes to static sites, there are a myriad of solutions for authoring and compiling, but talk about hosting these static sites, and we are still in the early 2000s. I discuss the challenges one faces when hosting, and even make a proposal to solve some of these.
Astro 1.0 just dropped so Amal got its creator, Fred K. Schott, on the pod for the full rundown. They go deep on how Astro is built to pull content from anywhere and serve it fast with their next-gen island architecture.
Zach Leatherman breaks down what SSR means in various contexts (component frameworks, app frameworks. Hereās the gist, but the details are good to so def read Zachās full post:
Application frameworks most often define SSR as the alternative to SSG (static site generation). A runtime server is used to render the components on request.
Component frameworks define SSR as generating static HTML from a component definition. They offer no preference as to whether this should or can happen at build time or at request-time.
Zach Leatherman recently announced he will now be working on Eleventy āĀ his simpler static site generator āĀ while continuing to work at Netlify. What makes Eleventy special? Howād he convince Netlify to let him do this? What does this mean for the projectās future? How many questions in a row can we type into this textarea? Tune in to find out!
Eleventy creator, Zach Leatherman:
This project would not be possible without our lovely community. Thank you to everyone that built something with Eleventy (Ć476 authors on our web site!), wrote a blog post about Eleventy, contributed code to core or plugins, documentation, asked questions, answered questions, braved The Leaderboards, participated on Discord, filed issues, attended (or organized!) a meetup, said a kind word on Twitter ā¤ļø.
Congrats to Zach and the entire Eleventy community on the big 1.0! š
Nick Reese joins the party to tell us all about Elder.js, his opinionated static site generator and web framework built with SEO in mind. Elder.js was purpose-built with large, content-heavy websites in mind and already serves in many production capacities. We discuss imposter syndrome, the startup/product mindset, Svelteās virtues, and much more.
Lots to like here:
Zola comes as a single executable with Sass compilation, syntax highlighting, table of contents and many other features that traditionally require setting up a dev environment or adding some JavaScript libraries to your site.
And here:
The average site will be generated in less than a second, including Sass compilation and syntax highlighting.
Iād love to see some build time benchmarks on a site with many pages.
Sean C Davis writing on CSS-Tricks:
A colleague of mine built a static site generator evaluation cheatsheet. It provides a really nice snapshot across numerous popular SSG choices. Whatās missing is how they actually perform in action.
Sean set out to test 6 of the most popular SSGs on the market today. The results are somewhat expected (Hugo is the super fast), but there are some surprises in there as well (Hugo scales poorly, but it doesnāt matter so much because itās super fast)
A Rust/WASM port of the Python code from the article āWriting a full-text search engine using Bloom filtersā. This can be seen as an alternative to lunr.js and elasticlunr.
The idea is to generate a small, self-contained WASM module from a list of articles on your website and ship it to browsers. tinysearch can be integrated into the build process of generators like Jekyll, Hugo, zola, or Cobalt.
Kick the tires on the authorās blog.
One of Gatsbyās greatest virtues is how it normalizes all data sources through its source plugin architecture. This is cool because it gives you a unified access layer for everything from the file system to 3rd-party APIs to headless CMSes.
Kevin Titor mustāve liked the idea enough that heās bringing it to other frameworks that support static site generation (Next.js, Nuxt.js, Eleventy, etc.). The main thing missing from Mordred is a community creating plugins for popular CMSes and services; a great way to get involved!
Marco Otte-Witte:
When we set out to rebuild our own website simplabs.com in 2019, we wanted to use that project as an opportunity to ignore all economic considerations (and reason you could say) and dive deep into what was technically possible. Doing so would allow us to build something that was super customized for our specific needs and highly optimized for performance. We ended up spending a lot of time and effort but are quite pleased with the result.
While we cannot recommend anyone following our example as your time is most likely better spent elsewhere, this post explains the approach we took. I will be covering topics like static pre-rendering and client-side rehydration, advanced bundling and caching strategies as well as service workers.
Highlights added by me because this is a fun read (and no doubt a fun experiment for them), but I also cannot recommend you follow their example. š
Iām not sure which is more interesting: the fact that Next.js is getting in to the static-site generation game or the fact that Notion is becoming popular enough amongst devs that people would use it as a back-end for their blog.
The Notion aspect, while interesting, comes with a big disclaimer:
since it is using a private API and experimental features, use at your own risk as these things could change at any moment.
Welcome to Publish, a static site generator built specifically for Swift developers. It enables entire websites to be built using Swift, and supports themes, plugins and tons of other powerful customization options.
Built to build swiftbysundell.com.
The scare quotes around generator are there because Staticgen doesnāt actually generate a static site for you. Instead, it downloads your dynamic site and produces a static version of it. A slightly new twist on an old idea:
If youāre unfamiliar, you can actually use the decades-old wget command to output a static website from a dynamic one, this project is purpose-built for the same idea, letting your team to use whatever HTTP servers and frameworks youāre already familiar with, in any language.
It is not without its caveats (no JavaScript rendering is a big one), but this could be useful in many circumstances you may find yourself in.
Zach Leatherman joins the party with Divya and Nick to talk about fonts and static site generators! Zach shares his knowledge about font loading, what can go wrong, and how we can avoid issues. Then we discuss Zachās newest project, Eleventy, a simple static site generator, and the panelists share things they are excited about.
Sara Soueidan:
My site is relatively small, Iād say. I have less than 100 blog posts. Less than 60 at the time of writing of this article, actually. And only a few static pages. I donāt use heavy JavaScript. In fact, I barely need to use any JavaScript. And yet, Jekyll still choked every time it had to compile it.
Iāve seen more and more people jump ship from Jekyll due to performance. Paul Robert Lloyd migrated over to Eleventy, even Iām contemplating something else. Interestingly enough, the static site generator comparisons mostly have to do with developer ergonomics because they all essentially do the same thing: output static HTML.
The JS Party crew discuss static site generators, our experiences with them, and what the future might hold for this ever-evolving technology.