Your weekly roundup of web dev reading–the advent edition
Tis the season of Advent Calendars–not the ones you open the little windows of to get a treat, but ones you visit each day in December to get a great article. I’m not sure exactly when they started, but they’re not a recent phenomenon. And they do however seem to be having something of a moment in 2024. Adrian Roselli rounds up nearly 30 such calendars this year.
And for the first time in a long time I’ve got an article in one of these myself!
As you know, I’ve been excited about View Transitions for a while now, and support keeps improving. With Safari 18.2 (released the last couple of days) now supports Cross Document View Transitions!
For HTML Hell’s Advent Calendar I wrote Smooth Multi-Page Experiences with Just a Few Lines of CSS.
So this week’s expansive roundup includes some recent advent pieces and more.
Solved By Modern CSS: Feature Image
Using container queries and CSS :has() to build a feature image.
Source: Solved By Modern CSS: Feature Image
Ahmad Shaheed, one of our favourite speakers of recent years explores modern CSS features like the :has selector and container queries to build a real world aspect of his website.
Isomorphic Web Components
Web components might be great, if only you could render them on the server.
Or can you? The lack of server-side rendering has become a sort of folk belief that oft goes unquestioned, and many people form opinions based on this (alleged) missing feature.Well, I am happy to report that the fears are unfounded: you can absolutely server-side render a web component. But there are a few different ways it can go down.
Source: Isomorphic Web Components
In recent years we’ve seen a swing back toward Server Side Rendering AKA SSR, or as I call them ‘web sites’. Recognising that the model of frameworks like React of downloading all our code then ‘rendering’ it in the browser with JavaScript is a performance anti-pattern, frameworks have moved toward supporting SSR. One critique of Web Components is they don’t support SSR. Jake Lazaroff addresses that here.
Web Performance Calendar » Not every user owns an iPhone
As software engineers and technologists its common to have access to some powerful devices and super fast bandwidths. It’s highly likely that you will be developing/testing on a high end Mac (or similar) or pulling out an expensive mobile device such as an iPhone from your pocket.But we need to be careful that this doesn’t lull us into a false sense of reality. We need to take care that we don’t end up sitting in ivory towers thinking performance of our applications is rosy, when in the wild our users are facing a different reality.
Source: Web Performance Calendar » Not every user owns an iPhone
I remember a (possibly apocryphal) story from the 1990s where Apple’s engineer’s always had a previous generation’s hardware for developing software, as it made their experience closer to that of regular users. Alex Russell has often spoken and written about how your average user’s devices is very different to yours (if you are a developer). This talk from 2023 is excellent for this and highly recommended. In this piece Alex Hamer looks are relative device performance based on core web vitals.
Blaming Screen Readers 🚩×5
The title of this post is pretty specific. It relates to the meme on Twitter where users identify a trait or preference that they see as problematic, and identify it as a red flag. The emoji represents the red flag. For example:
Blaming Screen Readers 🚩🚩🚩🚩🚩And here we see the usual pattern repeat itself. An inaccessible meme goes viral. After it is so tired that brands use it, someone relying on assistive technology points out how annoying this can be. Authors and developers jump up to blame assistive technology for being terrible at internetting.
Source: Blaming Screen Readers 🚩×5 — Adrian Roselli
Because social media, particularly services like Twitter (and now Bluesky and Mastodon) are essentially plain text based (like email was originally) folks keep coming up with clever ways to use emoji and text patterns (emoticons like 🙂 originated with text only email and newsgroups). But these are often woefully inaccessible for screen reader users. The response of many folks to which is to–blame screen readers (then ‘helpfully’ suggest fixes). Adrian Roselli discusses this more and concludes we should be more thoughtful in how you post your content (memes). “Be considerate of others, even if it takes an extra minute. Stop offloading blame. Stop making it someone else’s problem.”
Client-side AI to combat online toxicity
Hate speech, harassment, and online abuse have become a pervasive issue online. Toxic comments silence important voices and drive users and customers away. Toxicity detection protects your users and creates a safer online environment.In this two part series, we explore how to use AI to detect and mitigate toxicity at its source: users’ keyboards.In this first part, we discuss the use cases and benefits of this approach.
Source: Part 1: Client-side AI to combat online toxicity
There are no simple answers to online toxic behaviours. A lot comes from bad actors. But some comes from folks in the moment, and nudging and prompts can help someone reflect on the nature of what they are about post to make better choices. Maud Nalpas explores using in-browser AI to provide such prompting.
Experiment: Automatically triggered View Transitions with MutationObserver
Instead of adding document.startViewTransition at various places in your JS, use a MutationObserver to watch for DOM mutations. In the Observer’s callback undo the original mutation and reapply it, but this time wrapped in a View Transition.
Source: Experiment: Automatically triggered View Transitions with MutationObserver – Bram.us
We’re big fans here at Conffab of View Transitions as you know, and while it’s still early days you can already start taking advantage of them. Here’s an interesting experiment from Bramus van Damme, triggering view transitions simply with MutationObserver.
Designing (and Evolving) a New Web Performance Score
In my day-to-day work, there’s a lot of competitor analysis. Either to present to the client themselves, to see where they sit among their contemporaries, or me to use in my pitching process—competition is a great motivator!The problem is, there aren’t many clear and simple ways to do it, especially not in a way that can be distilled into a single, simple value that clients can understand.I have spent the last several weeks working on a new relative-ranking score; today I am writing it up.
Source: Designing (and Evolving) a New Web Performance Score
Web performance pioneer and all round guru Harry Roberts considers the challenge of relative performance comparisons–how do you compare your site’s performance compared with others? Harry sharpens his pencil and mind…
Authors Together
In 2024, A Book Apart closed its doors after publishing a much-loved collection of more than 50 brief books for people who make websites. The rights to each book have reverted to the authors — hi, that’s us — and we’ve put together this semi-official directory to help you find our books in their new homes.
Source: Authors Together
A Book Apart was a wonderful imprint of books for Web designers and developers. Sadly earlier this year it shut up shop. Now, due to the nature of the publishing business, usually that largely means the end of the availability of the books associated with that publisher (until 70 years after the death of the author of the book, when the book reverts to the public domain).
And even if an author wants to release their work into the public domain, or otherwise make it available, for free, or a fee, the nature of the contract they signed means that’s typically very unlikely.
But A Book Apart reverted the rights to the books to their authors. And as we’ve covered previously here, various authors have made their books available in various ways–some free, some for purchase. Now, a number of the authors have created a semi-official directory where you can find some and hopefully one day all of these books. Many of the authors have spoken at our conferences–though some like Jeremy Keith and Eric Meyer sadly before we started recording them.
A Framework for Evaluating Browser Support
According to caniuse, container queries are supported for almost 93% of users (as of November 2024).
That sounds pretty good! My mom would have been thrilled if I came home with 93% on my report card. But is it actually sufficient when we’re talking about browser support levels?
Like so much in software development, the answer is it depends. In this blog post, I’m going to share the framework I use when deciding whether it’s appropriate to use a new CSS feature. We’ll look at the 3 individual factors I consider, and at the end, we’ll assemble them into a formula you can use to help you decide whether it’s OK to use a feature or not.
We’re focusing on CSS in this blog post, but the same framework can be used to evalute whether a modern JavaScript or HTML feature can be used.
Source: A Framework for Evaluating Browser Support
Recently I used the popover API to create an About window for my fun little Taylor Swift lyrics search engine. Which got my wondering is it safe to use this API?
Now, as it’s just a fun project where this window not opening would have not been a disaster, I just glanced at the caniuse results (~80%) and YOLO’d it.
But we can’t always be doing that. So how can we make this decision?
Josh Comeau has developed a framework for helping decide.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
