Recap of 11ty International Symposium on Making Web Sites Real Good
May 15th, 2024
This site and a good dozen others that I’ve built and maintain, are built with Eleventy (aka 11ty). It’s not only a really good static-site generator but also a center piece of a wonderful community of web developers, bloggers, indiewebbers and other people who like to make web sites real good.
Last week, the first 11ty International Symposium on Making Web Sites Real Good took place and while I usually struggle to maintain focus and interest on online conferences, this one kept me glued to the screen (and the lovely Youtube chat with many friends from the web) so much that I even waited for the breaks to visit the bathroom.
Many of us in the chat discussed there how nice it was to be in an online conference where such a large part of the (active) audience were friends from social media, blogosphere, Eleventy discord and 11ty Meetups. That truly makes a difference between a mediocre online experience and a fantastic one.
Massive thanks to David, Mike, Olivia and Zach for organizing such a wonderful conference, Diane and White Coat Captioning for the captions, all the speakers for amazing talks and to all the fellow participants in the chat for great discussions and good vibes. And Elle for hanging in there with your balloon.
The talks
The Future of 11ty by Zach Leatherman
Zach is the creator and maintainer of Eleventy and he’s done a wonderful job at building a tool that really matches my desires for a tool to make websites with. Eleventy is a tool where you can start with just an index.md file and build on top of that to build large projects, choosing the tools and approaches that work best for you.
In his opening keynote, The Future of 11ty, Zach talked a bit about the past and the philosophy of Eleventy and then shifted the focus on the new stuff that’s coming to the tool. In version 3, we’ll get to benefit from ESM support, cool improvements to image processing and optimizing and improved performance.
Hints & Suggestions (First, Do No Harm) by Miriam Suzanne
The history of styling websites is fascinating. Miriam took us on a great journey to the beginnings of how CSS came to be and the philosophies and policies that guided the early years. Putting content and user first and author’s desires second has been a hugely impacting guideline. (As a sidenote, Andy Bell’s talk Be the Browser's Mentor, not its Micromanager is a wonderful talk on how you can adjust your way of writing CSS.)
Miriam’s talk was so captivating, well done and full of incredible content that I’d say it’s a must-watch to everyone who ever builds things on the web.
11ty and Large-Project Tooling by Paul Everitt
Paul’s talk on how they’ve built the documentation at JetBrains with Eleventy was very inspirational in its practicality. As a technical writer hopefully one day in charge of a larger documentation project, I loved every bit of it.
They use Typescript, server-side rendered TSX as templating language and Vitest with 11ty to build the JetBrains Guide site.
His approach to building a Eleventy site with very test-driven approach sounds interesting for a larger project.
One of the really cool things in his tooling was using schema for the front matter in Markdown files, providing him the autocomplete of both the keys and the values.
Digital Frontiers, IndieWeb Cowboys, and A Place Online To Call Your Own by Henry Desroches
What’s your approach to publishing things on the web? Do you have your own website where you primarily post and then syndicate to other services like social media platforms? Or are you at the mercy of other services to publish and keep your writing available?
Henry provided a fast-paced, super entertaining talk about P.O.S.S.E (Publish on your Own Site, Syndicate Elsewhere) strategy which as the name implies, focuses around having your pieces on your own site first and then using those to share and participate in discussion elsewhere.
He walked us through topics like identity, authentication, webmentions, publishing, syndication and shit-posting.
You're Probably Doing Web Performance Wrong by Sia Karamalegos
How do you learn if your site is performing well and what you can do if it doesn’t? Sia’s wonderful talk about web performance talked about a few topics in the area. She talked about the difference between real user metrics (RUM) that are aggregates from the actual people visiting your site and “laboratory testing” like running Lighthouse and other similar tools.
She also talked about time to first byte (TTFB), first contentful paint (FCP) and last contentful paint (LCP) and how to measure and debug them.
Building a Town That Doesn't Exist by Dan Sinker
When you participate in a tech conference, you don’t often expect to be drawn into a story as compelling and well crafted as Dan’s story about Question Mark, Ohio. It’s a story of a non-existing city and its mysteries, told through dozens of individual websites that all tell a part of the story and build a world in a way that’s not often seen in the web at this scale.
I was glued to the screen listening to Dan explain not only the story and how it was crafted but the technical side of building all those websites and crafting the content: some by hand and some by large language models (LLMs).
11ty Sites for People Who Don't Think they are Web Developers by Adrianna Tan
Adrianna talked about how and why using Eleventy brought back her joy for building sites. She talks about how Eleventy is a good choice for people who are not (or don’t think of themselves as) web developers and what we as a community can do to help those people learn things.
Don't Fear the Cascade by Mayank
Mayank’s CSS talk focusing on the cascade and how the language has evolved lately to provide more tooling to manage the cascade. They also talked about the Shadow DOM for which they have written a very nice guide.
To understand cascade, one needs to learn two main things: the cascade order and the specificity of selectors. Mayank provided a lot of great insights into how to increase or decrease the specificity with some tricks.
One of the things that was new to me was @layer which I have someone managed to miss completely and need to pick up and start learning now.
Managing content management (with no vendor lock-in): Git CMS and static API generation, together at last! by Liam Bigelow and David Large
Liam and David from CloudCannon did a double act to talk about CloudCannon’s CMS tooling. They demoed a workflow of managing 5 different sites, all part of a larger corporate umbrella.
Come to the light side: HTML Web Components by Chris Ferdinandi
Chris introduced us into a way of building Web Components (WC) “along the grain of the web”. Rather than building react-style components with WC, he talked about a different way of approaching them and shared a few tips and tricks for building them.
HTML Web Components, as Chris calls them, start with HTML first and adds progressive enhancements on top. Progressive enhancement is great because even when the Javascript fails to load, the user still has a good experience rather than an empty screen.
He also provided a nice small tutorial of Web Components inside all the other great insights.
Chinese Type Systems by Ivan Zhao
Ivan gave us a nice and easy-to-follow introduction to Chinese letters and type and expanded that into a discussion about typesetting with Chinese fonts in the web. As someone who’s only ever known (other than a few courses of Japanese when I was younger) languages that use mainly latin alphabet, it’s always interesting to learn about different writing systems and what they require from design and technical perspective.
Light mode versus Dark mode by Sara Joy
The last but not least, the amazing Sara talked about light and dark modes on websites. She talked about the benefits and downsides of both modes and why it’s a great idea to provide the option for the user to decide.
Her talk’s technical side focused on the
prefers-color-scheme preference and how
to build your CSS in a way that provides the website in the right mode based
on user’s choice.
During her talk, I picked up a few ideas and added basic dark mode support with barely any custom CSS and no Javascript into another site of mine that I built just before the conference.
Even if you’ve tinkered with dark/light modes before, there’s likely something new you’ll learn from this talk.
11ty Bundle
Not directly related with the conference but if you want to stay up to date on what’s happening in Eleventy and its community, Bob’s 11ty Bundle is a fantastic resource. He gathers together announcements, tooling, blog posts and other resources that are helpful for anyone interested in using Eleventy to build web sites real good.
Other people’s thoughts on the event
I’m not the only one who’s written about the event during the past week.
Zach wrote An Organizer’s Retrospective on the 11ty Conference sharing insights into the event from behind the scenes.
Brian wrote Opossum Symposium. His finishing remarks really resonate with me:
It left me inspired to continue my journey of creation and delve deeper into the fundamentals, guided by the spirit of curiosity and collaboration.
Tobias wrote My impressions on The 11ty International Symposium on Making Web Sites Real Good in which he did a great job recapping few of his favorite talks.
Alex wrote 11ty Conference Thoughts.
Ryan shared the list of talks with short descriptions at Weekly Roundup #3 — Possum Edition.
If you’ve published your thoughts about the conference (or do in the future), let me know and I’d be happy to add them to the list!