Episode 80 - Eleventy with Ben Myers

Ben Myers is a frontend developer at Microsoft and an advocate for web accessibility.In this episode we discuss the fundamentals of Eleventy, how to approach web development from a conservationist's point of view, and utilizing Eleventy Serverless for deferred, on-demand rendering.Ben MyersHomepageTwitterGitHubTwitchSome Anticsshowmy.chatEleventyHomepageTwitterGitHubDiscordLinksFullstack Accessibility with Ben Myers (FSJam31)Slinkity with Ben Holmes (FSJam49)Eleventy Data Cascade DocumentationI Finally Understand Eleventy's Data Cascadeevents.lunch.devEleventy ServerlessA First Look at Eleventy Serverless with Zach Leatherman (Some Antics)Modern CSS with Stephanie Eckles (FSJam63)Incremental Static RegenerationDistributed Persistent RenderingUnderstanding Rendering in the Jamstack by Brian RinaldiEleventy GlossaryLearn Eleventy From Scratch by Andy BellAmit Sheen CodepensTHE Eleventy MeetupFull Time Open Source Development for Eleventy, Sponsored by NetlifyTranscript[Pre-show Clip]BenWhen I was on Learn with Jason talking about Eleventy Serverless, I actually spent a fair amount of time talking about... "hey, Eleventy doesn't work for every use case." There are certain websites you have in mind that Eleventy would not be a good fit for. That's okay, that just means it's better suited for other kinds of sites. I think there is this instinct in Jamstack communities to try to kludge Jamstack into a fundamentally un-Jamstacky problem space.ChrisWhat do you mean? Gatsby is the best for everything and we should have never moved off Gatsby and there's no need for Svelte or Solid or anything like that. Gatsby, it did everything.[Opening Theme Song]AnthonyBen Myers, welcome back.BenHey! It's good to be back.AnthonyYou were on an earlier episode, 30-something, talking about web accessibility. You are a web developer and accessibility advocate at Microsoft. Today, we're going to be talking to you about Eleventy cause Eleventy is a project that I know you're really passionate about. We've had others on the show talk about it a little bit, especially Ben Holmes who is building a meta framework on top of Eleventy called Slinkity. But, today we're going to be talking about Eleventy proper. What it is, why people are excited about it, and what kind of stuff they're building with it. BenI'm thrilled, I absolutely love Eleventy as a tool and it's one of those things that's been an absolute privilege to get to introduce people to. Fair disclosure! I totally have not introduced people to it through a podcast medium, so this is gonna be very interesting. Super excited to chat about it with y'all.AnthonyWhy don't we first start with what Eleventy is. I think if anyone has heard about it, they know that it's a static site generator. They may have heard that it's based a bit on Jekyll, so if you can talk a little bit about what it does and what you would build with it.BenYeah, so I find that simply saying, "Jekyll but JavaScript" is enough for some people to just get it. I will say that the fact that it is powered by JavaScript makes it more approachable than other static site generators for many people because JavaScript is the language of the web. If you're doing front end development, JavaScript is something you're very likely to be very familiar with. A static site generator that leverages JavaScript, specifically the Node.js ecosystem, is a very compelling sell for a lot of people. But, I should definitely back up and explain the bigger picture.You described it as a static site generator in the vein of Jekyll. I think that's absolutely, absolutely fair. But personally, I don't have experience with Jekyll. That's not something that really helps me understand what it is. The simplest way to think of Eleventy is, it is a tool that will take content, typically in a format such as markdown. It'll take that content, it'll just convert it to some pure, raw, boring, fantastic HTML (or other assets). That is, I think, the simplest way to think of it. You've got some content, maybe it's blog posts, maybe it's documentation pages. Maybe it's a landing page for some product. Some content that is mostly static and you want some output, typically HTML.That is what Eleventy is and what it's really, really good at. What Eleventy isn't, is a tool for building highly dynamic interactive experiences. For those, you might still consider a client side web application framework such as React or Vue. Eleventy simply isn't as interested in addressing those kinds of websites and I think that's totally fair. But if you've got something that could be expressed in static HTML, Eleventy is possibly a very good project for you.AnthonyI actually first started learning about Eleventy for a big reason cause of you, Ben. We were building out the lunch.dev calendar with it. That was a really interesting project because we were trying to create like an events calendar. What we did is we had a Git repo that was building the static site and then we had markdown files for the individual events. Then the individual events would be transformed into litt...