My impressions on The 11ty International Symposium on Making Web Sites Real Good

Post #8 published on 2024-05-13 by Tobias Fedder

A few days ago the first 11ty conference — I mean The 11ty International Symposium on Making Web Sites Real Good — took place. It had great talks from amazing speakers. I like to share my impressions and some of the presented ideas that are stuck in my head now. I thought I jot that down here before rewatching any of it, which I definitely will.

Complaints

To pretend that this is a serious review — instead of thoughtless flattery — let's start with unwarranted, over‐the‐top negativity. Despite the fancy virtual ticket and the word choice, the symposium was a YouTube stream. It worked very well, but given the feature set of YouTube's chat it meant there wasn't a way to interact with someone's lovely, snarky, funny, insightful or helpful message. Well, except writing yet another message and referencing them, which, depending on the context, might be a bit much. I have the feeling that the chat would've been even better, could've felt even more like a cozy 11ty community get-together, if we had been able to weigh in on each other's messages with emojis.

Continuing the theme of restricted communication, the talks were held without Q&As. That might also have been because of the YouTube chat limitations, there might have been other reasons, I have no insights on this.
I really enjoy seeing the questions that arise in other people from an expert talk. Sometimes they provide new perspectives. Having the speaker answer two or three questions from the audience, putting them in context or recommending resources for further reading, that's were conferences shine. I think having people present live and then not asking them questions afterwards is a missed opportunity.

Okay, enough complaining. With that out of the way, let's turn to the highlights and all the food for thought greatness.

My favorite CSS talk ever

The talk that blew me away was Hints & Suggestions (First, Do No Harm) by Miriam Suzanne. Reminding us that the web as a distribution network for documents was meant to be content first, content as in HTML, semantically marked up text. Which is why in the beginning of the web the idea of allowing authors to style their documents was basically rejected.
Hey, look at this, my under engineered website is finally good at something.

It took the introduction of the <img> tag — threatening to turn all webpages into collages of images displaying fancy styles, at least on capable devices, completely failing to serve content on others — to bring author styles to the web. Miriam pointed out that the proposals for styling the web used the terms hints and suggestions a lot, to be in alignment with the web's philosophy of content first and everywhere. Or put differently: to protect content from styles that would fail in unanticipated contexts. Therefore leading us to reflect on the fact that the CSS is awesome meme, where the last word is overflowing the square border, is actually unironically showing how awesome CSS is. 🤯
I will definitely keep a URL to that talk around, ready to share it with people at a moment's notice, for example with a backend-focussed colleague complaining about CSS being unreliable or maybe in case anyone is saying pixel perfect web design ever again.

Making 11ty Real Good

Zach Leatherman gave an outlook on what's coming to Eleventy v3. For example support for ESM in addition to CommonJS, or front matter containing Javascript. The first beta release didn't make it in time for the conference, but can be expected in a few weeks.
For some inexplicable reason I got very excited about hearing that Eleventy v3 runs in Deno. I haven't used Deno yet, but now I want to try 11ty with Deno. I don't even have a good reason for using it. Somehow I'm very intrigued. The chat seemed to be pretty excited about the new version of the image plugin, which will be way more resource‐friendly in serve mode, optimizing only requested images. I'll check it out once the need for raster graphics arises.

Staying on the tool lending its name to the symposium: Paul Everitt showed how to bring types and autocomplete to front matter. That's what stuck out to me. It was just one of many benefits of adding Typescript, TSX and much more to the 11ty‐based project for the JetBrains Guide, which also includes a tutorial on how to do that. I was a bit distracted during that talk, but I assume it would've went over my head either way.

I am very interested in some of that tooling magic, but I'm probably not switching to Typescript any time soon. Or am I? There seems to be a secret longing for type safety in me. Now that I think about it, I prefer Java over Python at work and I tried to pick up some Rust to write a CLI tool last year. Maybe there is a not‐so‐secret longing for explicit types in me.
Is that why I'm hyped about 11ty in Deno? 🤔

Making Sites Real Good

Sia Karamalegos accused me of doing web performance wrong — rightfully so. In her talk You're Probably Doing Web Performance Wrong she emphasized the importance of real user monitoring (RUM) data. Pointing out that we shouldn't distract ourselves with synthetic performance tests, because those issues might be insignificant compared to the issues our users face when using our sites under real‐world circumstances. There are a lot of steps from sending a request to rendering a page, many of them are sequential. If one of them is slow, then the following steps will result in bad time‐based performance metrics as well. Sia's example metric time to first byte (TTFB) makes it perfectly clear. No matter the optimization of content and assets, the performance will be poor if it takes ages for that data to arrive in the first place.

I don't have any RUM data collectors setup yet. Even if, turns out that's still useless without real users. So I'm doing that part wrong. And on the issue of TTFB, well, so far I'm hosting this site on a server I have in use anyway. It's probably fine visiting from Europe. In case you're reading this from India, thank you for your patience.

I know what you are thinking, I'm thinking it myself: it's a static site with roughly zero users, put it on a CDN's free tier. Sure, technically speaking there is an easy solution. But considering all the effort it took to set this up in a GDPR‐compliant way, just the thought of adding a data processor, that's operating in dozens of jurisdictions to process personal data from around the globe on my behalf, scares me. That some CDN's claim they aren't processing any personal data when serving assets — despite that being impossible last time I checked how HTTP works — does not install confidence in me.

Continuing with topics near and dear to my heart: the web platform.
Mayank talked about CSS, focussing on the first of those three letters. I too think that the cascade is very much misunderstood. They showed great examples of nesting, @layers and @scope. I'm already in love with the first two. @scope though, let me put it this way: I visit the MDN page regarding @scope at least once a month to remind myself of the use cases it's really good for. Then a few weeks later I'm wondering again what it was actually solving. Although, seeing these three CSS features all mixed together within a few lines of CSS… it does look unfamiliar for now, I can't deny that.

Two more minor points I hope to remember for quite some time. First, when I finally get to writing some CSS with layers in SASS I can't use @use. Second, the maximum number of IDs for an element is one. I have no clue why I thought it could have more than one. The HTML spec is pretty clear on that one.

I mentioned Zach gave a talk about 11ty, yet there was a web components talk nonetheless. Chris Ferdinandi made strong arguments for using web components with light DOM. It's just good advice. That web components came out with shadow DOM, which was something "internal web components" in browsers used, gave the impression both had to be used together. That was one reason, in my opinion, for the low web component adoption early on.

Towards the end Sara Joy showed how to respect user's preferences. Mostly, but not exclusively, light vs. dark mode, and the usefulness of the color-scheme property. Another part of the presentation was a shout out to @media (prefers-contrast) including a neat low‐effort adjustment to that preference using filter: contrast(). People in the chat, as well as Zach and Mike Neumegen — great host by the way — during the wrap‐up, wished for browsers to integrate settings for all these preferences in their UI, ideally choosing them per site. It'd be easier for the user to set and adjust. Furthermore, from the authors and developers perspective, those preferences would seem more intentional and urgent than an OS setting propagated all the way to the site. That feature would probably allow to get rid of custom build, JS‐dependent, preference overrides like light mode / dark mode toggles — at least in the long run.

Making The Web Real Good

Henry Desroches was on fire explaining the concept of Publish (on your) Own Site, Syndicate Elsewhere (POSSE) — great acronym if you know German by the way — and similar ways to stay in control of your own content, without isolating it. That way we can use our own websites to make us better stewards of the web. Love that phrase. Henry also touched on Webmentions a protocol to allow a website to be notified of a reference to it on another website, given the referenced one has a webmention endpoint. That mentioned website can then scrape and back‐link that mention. I've mostly seen this used for comments and that alone is a great use case. On top of true webmentions there are also services that scrape social media to back‐link those references as well.

I think the idea of webmentions is great, true webmentions at least. Do you remember that I said just a few paragraphs ago that I am scared of using a CDN because of data protection regulations? Now consider how a third party data processor, scraping other people's posts from social media without their consent on my behalf, makes me feel. 💀

Wrapping up

There were even more talks that I don't mention here. I recommend you watch the whole conference stream.
Looking at this markdown file it's already way to long for first impressions, but nobody has the time to shorten their blog posts, right?