Performance, components, CSS and more–your weekend reading from Web Directions
As we close in on Web Directions Dev Summit next week, here’s a roundup of valuable reading for all front end developers. Most of the articles below we’ll have sessions on at the conference–but I’ve not chosen these links for that reason–these are the things folks seem to be paying attention to right now.
We’d love to see you there, in person, or on the stream!
Prerender pages in Chrome for instant page navigations
A brief history of prerender
In the past, Chrome supported the resource hint, however it was not broadly supported beyond Chrome, and it wasn’t a very expressive API.
This legacy prerendering using the link rel=prerender hint was deprecated in favor of NoState Prefetch, which instead fetched the resources needed by the future page, but did not fully prerender the page nor execute JavaScript. NoState Prefetch does help improve page performance by improving the resource loading, but won’t deliver an instant page load like a full prerender would.
The Chrome team has now reintroduced full prerendering back into Chrome. To avoid complications with existing usage, and to allow for future expansion of prerendering, this new prerender mechanism won’t use the syntax, which remains in place for NoState Prefetch, with a view of retiring this at some point in the future.
Source: Prerender pages in Chrome for instant page navigations | Web Platform | Chrome for Developers
Prefetching and pre-rendering a page dramatically increases the perceived performance of a site once an initial page is loaded. But it is potentially wasteful of energy and bandwidth. So early pre-rendering approaches in Chrome were deprecated. Now, speculation rules is a new approach that aims to balance the competing concerns of performance and wastefulness.
We’ll be covering this at Dev Summit with Speculative Loading: The Future of Navigation by Quynh-Chi Nguyen
Styling Web Component elements in the shadow DOM with constructable stylesheets
For the last two weeks, we’ve been looking at why styling elements in the shadow DOM sucks so bad, and what to do about it.
So far, we’ve looked at using inline styles, external stylesheets, CSS variables, and parts.
Today, let’s look at the final approach we can use: constructable stylesheets.
Source: Styling Web Component elements in the shadow DOM with constructable stylesheets
Chris Ferdinandi covers the various ways you can work with CSS in Web Components. At Dev Summit Scott Jehl goes into detail on the current state of Web Components (and is running a workshop on them as well.)
How to manage reactive state using Custom Elements (Web Components)
To make things truly reactive in our custom elements (web components) we need some reactive state primitive. In frameworks, we usually use a hook or some other kind of “handle” to some state somewhere out there in a place we can’t really see.
Source: I‘m Nathan Herald → How to manage reactive state using Custom Elements (Web Components)
Signals are a pattern of reactivity that are in or coming to many frameworks and potentially JavaScript as well. Nathan Herald describes how this approach works with Web Components. And you guessed it, we have a session dedicated to signals at the conference from Lex Kuncevic.
Anchor Positioning Is Disruptive
The more I play with it, the more convinced I am that anchor positioning is going to unlock some surprising new layouts.
Many of the initial examples and use cases for anchor positioning are simplifying existing possibilities, and – don’t misunderstand me – anchor positioning will simplify how dropdown menus are implemented significantly.
But that’s just the start.
Source: Anchor Positioning Is Disruptive | OddBird
It’s been a while since we have had a whole new way of positioning elements on a page with CSS. Anchor positioning is still not quite fully there but will have a significant impact on how we design for the web. OK we don’t have a dedicated session on anchor positioning at Dev Summit (it’s just a little too early for production use)–but we do have a session (and workshop) by Miriam Suzanne and I’m sure they’ll get a mention somewhere.
Two different kinds of “focusable” UI elements
In accessibility, “focusable” UI elements are represented by two separate yet equally important concepts: the elements who can be focused sequentially and those who can only receive focus programmatically. These are their stories. Dun-Dun
Source: Two different kinds of “focusable” UI elements · Eric Eggert
Some subtleties on focusable elements, explained thoroughly.
Introducing our grid-aware websites project – Green Web Foundation
Our mission at Green Web Foundation is working towards a fossil-free internet by 2030. There’s no single magic answer in any field of large-scale change, and digital sustainability is no different. Diverse solutions are needed from many directions. For example, we need solutions that optimise what we’re doing already, others that are more radical and redesign existing systems to achieve entirely new ways of doing things, and some that lay the groundwork for those things to happen. One of many solution areas we’ve been exploring for a while is carbon-aware. This is the practice of programming digital services to respond to the carbon intensity of electricity, and modify loading behaviour or content accordingly. Carbon intensity is a measure of the CO2 emissions associated with the fuel mix (the balance of renewable, low-carbon, and fossil fuel energy) used to generate the electricity of a particular region or activity.
Source: Introducing our grid-aware websites project – Green Web Foundation
Fershad Irani has for some time now focussed on the energy impact of web sites and apps. We’ve had him speak at our conferences on the issue in the past, and here he outlines a project for approach to website architectures that are mindful of their energy footprint.
Bonus Video: Fershad delivered a great presentation on the relationship between web performance and the environment back in 2022 for our Lazy Load conference.
How some of the world’s most brilliant computer scientists got password policies so wrong
The story of why password rules were recommended and enforced without scientific evidence since their invention in 1979 is a story of brilliant people, at the very top of their field, whose well-intentioned recommendations led to decades of ignorance. These mistakes are worth studying, in part, because the people making them were so damn brilliant and the consequences were so long lasting.
The scientists in this case were Robert Morris and Ken Thompson. Thompson is credited as being a co-inventor of Unix and Morris is credited as a contributor. Morris left Bell Labs in 1986 to go onto a much-less visible career at the National Security Agency. Thompson created the predecessor to the C language, won Computer Science’s highest prize – the Turing Award – in 1983, and later went to Google where he co-invented the Go Language.1
Few of us have not been been frustrated (or worse) by password policies. This piece covers their origin (and points to Ken Thompson, originator of UNIX, as mainly responsible).
Exploring JavaScript Symbols
Deep dive into JavaScript Symbols – what they are, why they matter, and how to use them effectivelyI remember the first time I encountered Symbols in JavaScript. It was 2015, and like many developers, I thought, “Great, another primitive type to worry about.”But as I’ve grown in my career, I’ve come to appreciate these quirky little primitives. They solve some interesting problems in ways that strings and numbers just can’t match.
Source: Exploring JavaScript Symbols
Symbols are an under appreciated, and under-used aspect of JavaScript that has been around almost a decade now. This article explains what they are and their uses.
Mind The (Remediation) Gap
JavaScript frameworks continue to rise in popularity. For example, according to the 2024 WebAIM Million report, more than seventy thousand of the top million home pages use React. Other common frameworks like Vue are used on over forty thousand home pages. In total, JavaScript frameworks were detected on 30 percent of the top million home pages.
For the past few years, the vast majority of websites that I’ve personally audited have used one of these frameworks. And while I can’t definitively say whether these frameworks are the root cause of the barriers that I’ve found, I can say that they’ve created their own challenges.
Source: Mind The (Remediation) Gap – TPGi
The folks from TPGI take a look at the specific sorts of issue frameworks like React might pose when it comes to accessibility, and what you can do about them.
Amelia Wattenberger
I think most people use chatbots only as a way to steer somewhere. Answer a question, edit some text, write a function, explain a concept, etc. I have, historically. But, more and more, I’m realizing that LLMs can be a great tool for thought. A wonderful brainstorming partner.
Instead of using them as a way to solve X, what happens if we use them the way we use conversation? Getting thoughts out of our heads, listening to their responses, and reacting to them? Like sketching while thinking — the focus isn’t on “creating something”. Gaining distance from thoughts as a way to evolve them. A good tool for thought is an extension of your mind.
Source: Amelia Wattenberger
It’s speculated that our earliest examples of writing weren’t poetry, or stories, but account keeping. When personal computers first arrived, almost no one really had any idea of how to use them. Uses take time to emerge. I expect how we eventually use and interact with LLMs will look quite different from the conversational model of today. Here Amelia Wattenberger thinks about LLMs as tools for thought, wonderful brainstorming partners.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
