Your weekly reading for March 24
Is there more great content being published? Are my antennae just getting better? Perhaps it’s an improved workflow? One thing’s certain—it’s definitely not more free time! Yet somehow, the weekly reading roundup keeps growing.
You might ask: What’s the point of these eclectic roundups? Why should you read them? And why do I invest time in compiling them?
In established professions, advances happen steadily but predictably, supported by structured channels like professional bodies and formal training. Communication paths are well-defined, and keeping pace is manageable.
But for those of us working with the web, digital products–design, or engineering–staying current is uniquely challenging. Our field moves quickly, innovation arrives daily, and there’s no single source to rely on.
That’s why I create these roundups. They’re partly for my benefit—when programming conferences, it’s important to keep up to date—but primarily they’re for professionals like you, who don’t have endless hours each week to sift through countless RSS feeds and social media channels.
And if you prefer bite-sized updates, consider subscribing to our “Elsewheres” RSS feed. Instead of one long list each week, you’ll get a steady trickle of insightful stories throughout your day.
I hope you find these roundups valuable. Enjoy this week’s selections!
A Guide to HTTP Cache Control Headers
Cache Control Headers are a powerful tool for controlling how browsers and caches store and serve your website’s content. By setting the right headers, you can improve your website’s performance, and in some cases, have your users experience near-instant page loads.
Source: A Guide to HTTP Cache Control Headers | DebugBear
Front end developers often overlook the impact HTTP headers can have on security and performance. Learn how you can dramatically improve performance by setting them right.
MCPs are APIs for LLMs
Released by Anthropic last November, the Model Context Protocol is described as, “a new standard for connecting AI assistants to the systems where data lives, including content repositories, business tools, and development environments.” But even that description is a bit jargony.Here’s the simple version:
An MCP server exposes a bunch of end points, like any other API server, but it must have end points that list all the available functions on a server in a standard way an MCP client can understand.
MCP clients (usually LLM-powered), like Anthropic’s Claude Desktop, can then be connected to MCP servers and immediately know what tools are available for them to use.LLMs connected to MCPs can now call MCP servers using the specs provided by the API.
That’s it! It’s incredible simple, a standard to enable the Web 2.0 era for LLM applications, giving models plug-and-play access to tools, data, and prompt libraries.
Source: MCPs are APIs for LLMs | Drew Breunig
Suddenly in AI Engineering circles talk of MCP is everywhere. Drew Breunig has this straightforward but detailed introduction.
Vibe-designing
Currently there’s discussion of ‘vibe coding’ – that is, using LLMs to create code by iterating with prompts, quickly producing workable prototypes, then finessing them toward an end.I’ve found myself ‘vibe designing’ in the last few months – thinking and outlining with pencil, pen and paper or (mostly physical) whiteboard as has been my habit for about 30 years, but with interludes of working with Claude (mainly) to create vignettes of interface, motion and interaction that I can pin onto the larger picture akin to a material sample on a mood board.
Source: Vibe-designing – Petafloptimism
We’ve talked a but about vibe coding recently, but here comes ‘vibe designing’.
On popover accessibility: what the browser does and doesn’t do
One of the premises of the new popover attribute is that it comes with general accessibility considerations “built in”. What does “built in accessibility” actually mean for browsers that support popover?
Source: On popover accessibility: what the browser does and doesn’t do | hidde.blog
A little older now, but an excellent look at what accessibility we get from using the popover element built in.
Popping preconceived popover ponderings
But I decided to finally get this post in a publishable state because I still see people asking questions about popover. Like, what is it? How does it differ from a dialog (modal or non)? Why doesn’t it do this one thing that I need it to? I’m not going to answer every question about popover. But I should get back into the habit of writing this stuff down once and pointing people to it, rather than providing repetitive one-off answers whenever I happen across someone asking about it.Here we (finally) go.
Source: Popping preconceived popover ponderings | scottohara.me
Popover is a relatively new API, we’ve covered here a bit at Conffab including this recent talk we highly recommend. This is a great comprehensive overview by Scott O’Hara.
AI’s effects on programming jobs
Doom and utopia are not our only options
There are two extreme takes on the impact of AI on programmer jobs:
- AI will take all programming jobs (usually advanced by people selling AI)
- AI will not take anyone’s job (usually advanced by grumpy older developers, which I usually am)
I would like to advance a third option, which is that AI will create many, many more programmers, and new programming jobs will look different.
Source: AI’s effects on programming jobs | Seldo.com
What impact will AI have on software development? Laurie Voss has a few thoughts.
Web Components Vs. Framework Components: What’s The Difference?
Some critics question the agnostic nature of Web Components, with some even arguing that they are not real components. Gabriel Shoyomboa explores this topic in-depth, comparing Web Components and framework components, highlighting their strengths and trade-offs, and evaluating their performance.
Source: Web Components Vs. Framework Components: What’s The Difference? — Smashing Magazine
Modern frameworks all have some sort of concept of components, which differs somewhat from Web Components. So how are they similar? How are they different?
Styling Counters in CSS
There are many ways to create and style counters, which is why I wanted to write this guide and also how I plan to organize it: going from the most basic styling to the top-notch level of customization, sprinkling in between some sections about spacing and accessibility. It isn’t necessary to read the guide in order — each section should stand by itself, so feel free to jump to any part and start reading.
Source: Styling Counters in CSS | CSS-Tricks
Juan Diego Rodríguez with a very detailed guide to styling counters with CSS.
“Wait, not like that”: Free and open access in the age of generative AI
The visions of the open access movement have inspired countless people to contribute their work to the commons: a world where “every single human being can freely share in the sum of all knowledge” (Wikimedia), and where “education, culture, and science are equitably shared as a means to benefit humanity” (Creative Commonsa).
Source: “Wait, not like that”: Free and open access in the age of generative AI
The Tragedy of the Commons is the term given to the idea that
if many people enjoy unfettered access to a finite, valuable resource, such as a pasture, they will tend to overuse it and may end up destroying its value altogether
It is a self serving neoliberal concept that is rarely subject to even the most basic critical enquiry. Here Molly White observes the genuine tragedy of the commons with large technology companies is while relying heavily on the commons of collective human creation (be the the likes of Wikipedia, or open source software, or more broadly) they degrade the sources, diminish their capacity for being sustainable. Everyone should read this piece.
Lazy Load Background Images with the IntersectionObserver API
While we can defer offscreen images using the loading HTML attribute, lazy loading background images takes a bit more work. Since they are added by CSS rather than HTML, we need to use JavaScript to detect when offscreen background images are about to enter the user’s viewport.It would be nice to have a native background-loading: lazy property in CSS as well, but unfortunately, it doesn’t currently exist. Luckily, the IntersectionObserver API provides a performance-friendly solution to lazy load background images without having to manually add JavaScript event listeners and perform viewport calculations, or use a third-party library.In this article, we’ll look into how to lazy load background images using the background CSS property and the IntersectionObserver JavaScript API.
Source: Lazy Load Background Images with the IntersectionObserver API | DebugBear
We can’t (yet) add lazy loading for background in CSS–but with little JavaScript and the IntersectionObserver API we can implement such a feature as Anna Monus details here.
Introducing AX: Why Agent Experience Matters
We tend to focus on the generative aspect of large language models, the outputs they can create, the text, images and videos they produce. But the largest disruption from the current evolution of AI will come from bringing agency to computers.
Source: Introducing AX: Why Agent Experience Matters
2025 definitely feels like the year of Linux agents on the desktop–but to be honest I’m not convinced we’re there just yet. But it’s definitely something that many are focussing on (the just gone AI Engineering conference was all about agents). And in a world of agentic systems, then a significant percentage of your users will be, well, agents. So, what does their experience look like? Mathias Biilmann has some thoughts.
Less Effort, More Completion: The EAS Framework for Simplifying Forms
Summary: Use the EAS framework — Eliminate first, Automate where possible, and Simplify what remains — to minimize user effort and improve form completion rates.Filling out a form is rarely anyone’s idea of fun. Users are goal-oriented — they want to accomplish their goals quickly and efficiently. The more effort a form demands, the more likely users are to abandon it midway. Yet, simplifying a form isn’t just about reducing the number of fields. Sometimes, longer forms are necessary to collect essential information. The key is to balance the organization’s information needs with users’ desire for simplicity and efficiency.
There are two ways to improve form usability: make users do less and make what they do easier. In this article, we focus on the first approach — minimizing user effort so they are more likely to complete your forms.
Source: Less Effort, More Completion: The EAS Framework for Simplifying Forms
Recently someone ‘complained’ to me the registering for one of our conferences was ‘to easy’–they had reached the invoice page before they expected. Turns out I’d been following the principles outlined here.
DeepSeek-R1 Uncensored, QwQ-32B Puts Reasoning in Smaller Model, and more…
Some people today are discouraging others from learning programming on the grounds AI will automate it. This advice will be seen as some of the worst career advice ever given. I disagree with the Turing Award and Nobel prize winner who wrote, “It is far more likely that the programming occupation will become extinct […] than that it will become all-powerful. More and more, computers will program themselves.” Statements discouraging people from learning to code are harmful!
Source: DeepSeek-R1 Uncensored, QwQ-32B Puts Reasoning in Smaller Model, and more…
Perhaps it’s ‘cope’, a whistling past the graveyard, as someone who has invested a significant majority of his professional life into writing code, but I share Andrew Chen’s intuition around this. Perhaps software engineering and development won’t look like it does today–IDEs and C-like syntax, but as Chen observes (as did Bret Taylor recently), we don’t punch holes in cards anymore.
I haven’t written anything that is remotely close to assembly code, let alone machine language for 40 years, but the understanding I developed about how CPUs basically work by doing so has stood me in good stead in the decades since. As will learning to code now for an entirely new generation of software developers.
Our interfaces have lost their senses
We’ve been successfully removing all friction from our apps — think about how effortless it is to scroll through a social feed. But is that what we want? Compare the feeling of doomscrolling to kneading dough, playing an instrument, sketching… these take effort, but they’re also deeply satisfying. When you strip away too much friction, meaning and satisfaction go with it.
Think about how you use physical tools. Drawing isn’t just moving your hand—it’s the feel of the pencil against paper, the tiny adjustments of pressure, the sound of graphite scratching. You shift your body to reach the other side of the canvas. You erase with your other hand. You step back to see the whole picture.
We made painting feel like typing, but we should have made typing feel like painting
Source: Our interfaces have lost their senses
A wonderful, poetic visual essay on designing more human interfaces.
Faster Rendering with the content-visibility CSS Property | DebugBear
Have you ever loaded a page with tons of content and noticed how slow it feels? The browser has to process everything at once – even the content you can’t see yet! That’s where the content-visibility property comes in. It’s a CSS feature that tells browsers to skip rendering off-screen content until it’s needed.
Source: Faster Rendering with the content-visibility CSS Property | DebugBear
There are all kinds of CSS and HTML properties that can help improve performance in specific cases that a lot of developers may not be aware of. content-visibility is one of these. Michael Hladky had a great talk on this and much more at Hover ’22, which is now available with a free account.
Popover vs Dialog
Popovers and dialogs are similar in many ways. That’s particularly the case since HTML introduced the closedby attribute for the dialog element, enabling light-dismiss functionality. So how are they different? A dialog can be modal or non-modal, whereas a popover is never modal*. Let’s compare both kinds of dialog to the popover API.
Source: Popover vs Dialog
We’ve covered the popover API and dialog element here recently a fair bit. But how are they similar, and different? Ollie Williams goes into detail.
Cyberspace Movies in 1995: Silicon Valley Meets Hollywood
Three big budget movies were released in 1995 that had internet themes: the Keanu Reeves flick Johnny Mnemonic in May, The Net with Sandra Bullock in July, and Hackers in September. (Two other 1995 movies had a virtual reality premise: Virtuosity, starring Denzel Washington and Russell Crowe, and Kathryn Bigelow’s Strange Days.)
The cyberspace movies all reflected the growing importance of the internet in our culture, although reviewers tended to see the computer plots as a gimmick. Roger Ebert’s 3-star review of The Net noted that it “dresses up its plot with a trendy front end, by using the Internet as a hook.” But he praised Bullock’s performance, despite the flimsy story. Ebert also gave Hackers three stars, saying it was “smart and entertaining […] as long as you don’t take the computer stuff very seriously.”
Source: Cyberspace Movies in 1995: Silicon Valley Meets Hollywood | Cybercultural
How was the internet perceived culturally in the early days of the Web? Richard McManus looks at three internet themed movies of the mid 1990s, as the Web became part of mainstream consciousness.
Optimizing Single-Page Applications (SPAs)
Single-page applications (SPAs) have unique page speed optimization challenges. Let’s go through some common web performance issues with SPAs, and how to optimize them.
Source: Optimizing Single-Page Applications (SPAs) | SpeedCurve
Optimising performance for Single Page Apps presents specific challenges the folks at SpeedCurve address here.
AI and Accessibility: the Good, the Bad, and the Bollocks
Depending on what you read, and who you believe, AI is either the ultimate solution or armageddon in motion, so in this talk, Léonie is going to cut through the clickbait, dodge the doomscrollers, and focus on the facts to bring you the good, the bad, and the bollocks of AI and accessibility.
Source: Youtube
Just what is the reality of using AI to help improve accessibility? This fantastic talk from FFConf by Léonie Watson is everything you need to know.
Cool native HTML elements you should already be using
I’m constantly surprised by the native HTML spec. New features are regularly added, and I often stumble on existing, handy elements. While often not as versatile as their JS counterparts, using them avoids bloating your app with extra Javascript libraries or CSS hacks.
…
Native HTML can handle plenty of features that people typically jump straight to JS for (or otherwise over-complicate).I cover some great HTML elements in this article — modals, accordions, live range previews, progress bars and more. You might already know some of these, but I bet there’s something new here for you too.
Source: Cool native HTML elements you should already be using · Harrison Broadbent
HTML gives us an increasing number of native elements (most recently dialog) so we don’t have to rely on 3rd party components or roll our own. Not only does this reduce effort on our part, it’s most certain their accessibility will be better than anything you can do yourself. Here’s a roundup of some you will know about and others you may not.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
