This week’s reading from Web Directions
A very busy week last week at Web Directions with our brand new Engineering AI conference. So much so that I forgot to schedule this post, that’s why it’s a few days late.
Not a lot of preamble, but a lot of reading as well as a fantastic documentary on the history of Python that I highly recommend.
There’s front-end technologies, including a couple of pieces on view transitions, a couple of deep dives on CSS, some JavaScript, plenty of AI for both the engineering and design audience. Pieces on colour and much more.
In your copious spare time over the weekend, why not take a look at some of what we’ve gathered together here for you.
Want more like this?
If you want more reading like this every weekend, why not sign up to our weekly newsletter? Great reading like this, special offers, bonus videos, and more.
Web Platform & Browser News
View Transitions: What Could Possibly Go Wrong?
Most of the time, View Transitions just work. This page is for the exceptions: the quirks, the caveats, the things that quietly cancel your animations. Learn how to detect them and bring transitions back to life.
You might trip over some of these, and it could make you turn away from the API. That would be unfortunate because view transitions can be a lot of fun for developers and a real benefit for website users. My goal is to catch you before frustration sets in or you walk away, and to offer help with the most common problems that might occur.
Source: View Transitions: What Could Possibly Go Wrong? | @vtbag
View transitions are one of those technologies which can be easy to start with but which can become very complex over time. And there are a few gotchas and challenges when dealing with them. To move beyond the introductory level, take a look at this great article.
How Google created a connected experience for its new AI Mode using view transitions
Google Search has one of the largest reaches in the world, therefore changes to our user experience can have an impact on billions of users. We’ve long dreamed of a web experience that feels more modern and app-like. When development began on AI Mode, we wanted to create an experience for our users where the transition into AI Mode from standard search felt seamless and connected. When we heard about cross-document view transitions we knew it was a perfect pairing for the feature. This case study shares what we learned adding the transition feature alongside the launch of AI Mode.
We’ve been enthusiastic about view transitions for quite some time here. We adopted them well over a year ago, and we’ve had multiple presentations on them on the platform. Well, now Google has gone and implemented them at massive scale, and here we learn about that. You can get started in literally a minute or two and ultimately build extremely sophisticated transitions with little or no JavaScript at times. See what Google has done, and then watch some of the related videos. Get cracking with view transitions yourself.
A complete guide to HTTP caching
Caching is the invisible backbone of the web. It’s what makes sites feel fast, reliable, and affordable to run. Done well, it slashes latency, reduces server load, and allows even fragile infrastructure to withstand sudden spikes in demand. Done poorly — or ignored entirely — it leaves websites slow, fragile, and expensive.
At its core, caching is about reducing unnecessary work. Every time a browser, CDN, or proxy has to ask your server for a resource that hasn’t changed, you’ve wasted time and bandwidth. Every time your server has to rebuild or re-serve identical content, you’ve added load and cost. Under heavy traffic — whether that’s Black Friday, a viral news story, or a DDoS attack — those mistakes compound until the whole stack buckles.
And yet, despite being so fundamental, caching is one of the most misunderstood aspects of web performance.
Source: A complete guide to HTTP caching — Jono Alderson
This is a comprehensive guide to HTTP caching. It’s something that is often overlooked but can have very significant performance benefits.
CSS & Frontend Development
CSS-only scrollspy effect using scroll-marker-group and :target-current
The CSS Overflow Module Level 5 introduced a new CSS property which enriches HTML anchor elements with the capabilities of CSS scroll markers, allowing you to recreate the Bootstrap Scrollspy effect using a couple of lines of CSS only. In this post, we’re going to look into how to use this property, as well as discuss accessibility expectations to ensure the feature is accessible and inclusive.
Source: CSS-only scrollspy effect using scroll-marker-group and :target-current
More and more of the effects that once required sophisticated and complex JavaScript, frameworks, and libraries are now possible with just a little bit of CSS. Here Sara Soueidan explores how to create the “scrollspy” effect using just a couple of lines of CSS.
The Making of gradient.style
Found these pics in a drawer and thought it’d be fun to share the journey of creating a CSS spec compliant gradient generator in 2023.gradient.styleA CSS5 HDR color enabling gradient toolCan even visualize effects using shorthands and DX tricks.
Source: The Making of gradient.style · 27 August 2025
Adam Argyle has just launched a beautiful, delightful, and powerful gradient editor that gives us access to all kinds of fantastic new CSS features. Things have come a very long way since I developed a gradient editor about 15 (or closer now to 20) years ago when gradients were first added to CSS. If you’d like to have a look at what this sort of thing looked like in about 2007, then here it still is in all its glory. Here Adam gives us some insight into the process of developing this editor.
4 Reasons to stop using CSS Preprocessors
Within CSS you now can do so many things that were the subject for using a pre- and postprocessor like Sass, Less or PostCSS. The latter is still useful in many cases today but the former are less and less important for these reasons:
- People use some sort of CSS-in-JavaScript anyways and what they write (not produce!) is not CSS anymore 😏
- Nesting is natively available in CSS ✅
- BEM and similar naming approaches are getting outdated because of new CSS features such as Layers and native Nesting. 😊
- Browsers have evolved so much that we have a great baseline and can use most of the things across most browsers. And if not, usually we can fallback gracefully within CSS. ❤️
Source: 4 Reasons to stop using CSS Preprocessors — Anselm Hannemann
Some thoughts on whether or not folks should still be using CSS preprocessors in 2025.
What are OKLCH colors?
OKLCH is a newer color model that is designed to be perceptually uniform. This means that colors are much more accurate in terms of how humans perceive them and it makes working with them much easier.
Source: What are OKLCH colors?
We’ve been covering some of the new color spaces—in particular OKLCH—here at Conffab for a while. You can find a number of videos on these new CSS color features, and we’ve linked to quite a few articles along these lines in recent months. This one is a particularly detailed look at the OKLCH color space in particular.
Making Sense of CSS Length Units
Junior developers who were recently introduced to CSS might be overwhelmed by the sheer number of various length-measuring units available. Someone might say not to use px as absolute units don’t change in responsive design but is that really the case?Let’s have a quick overview on the various units and when they can be useful.
Source: Making Sense of CSS Length Units
When CSS first arrived, it had just a handful of types of units, and only one or two that people ever really used: pixels and ems. Now there are many, and they can be very daunting for those new to CSS. So here is a fantastic overview of all the kinds of units you might find—obscure or common—in CSS today.
The `-path` of Least Resistance (Part 1)
There’s a whole layer of CSS that lives just below the surface of most interfaces. It’s not about layout, spacing, or typography. It’s about shape. About cutting through the default boxes and letting your UI move in new directions. This series is all about one such family of features, the kind that doesn’t just style your layout but gives you entirely new ways to shape, animate, and express your interface.In this first part, we’ll explore clip-path. We’ll start simple, move through the functions and syntax, and work our way up to powerful shape logic that goes way beyond the basic polygons you might be used to. And just when you think things can’t get any more dynamic, part two will kick in with offset-path, where things really start to move.
Source: The `-path` of Least Resistance (Part 1) — Frontend Masters Blog
When we think about layout for the web with CSS, we think about boxes because the box model is central to CSS-based layout. But there is a way to bring non-rectangular shapes to our design. Amit Sheen explores this in this two-part series beginning with clip-path.
The Basics of Anchor Positioning
Anchor Positioning CSS CSS Layout
In this article, I will cover the basics of Anchor Positioning and how I wish I had learned it earlier. Please use Chrome on a desktop or laptop if you want to try the interactive demos. If not, I’ve attached a video for most of the demos.
Source: The Basics of Anchor Positioning
While it is not ready for prime time, anchor positioning will have a very significant impact on how we create page layout. Here Ahmad Shadeed gives us one of his trademark thorough, engaging introductions to the technology.
JavaScript & Programming
You no longer need JavaScript
I think there’s some beauty in leaving it all behind. Not just the frameworks, but JavaScript altogether. Not every site needs JavaScript. Perhaps your e-commerce site needs it for its complex carts and data visualization dashboards, but is it really a necessity for most of what’s out there?
It’s actually pretty incredible what HTML and CSS alone can achieve.So, what do you say?
My goal with this article is to share my perspectives on the web, as well as introduce many aspects of modern HTML/CSS you may not be familiar with. I’m not trying to make you give up JavaScript, I’m just trying to show you everything that’s possible, leaving it up to you to pick what works best for whatever you’re working on.I think there’s a lot most web developers don’t know about CSS.And I think JS is often used where better alternatives exist.
So, let me show you what’s out there.
Source: You no longer need JavaScript · lyra’s epic blog
Here’s a roundup of the sorts of things you may have relied on JavaScript to do but which you no longer need it for. Relentlessly, the web platform improves with more and more capability accessible declaratively via CSS and HTML. So keep up with that and get all kinds of long-term benefits for the things you build.
Python: The Documentary | An origin story
This is the story of the world’s most beloved programming language: Python. What began as a side project in Amsterdam during the 1990s became the software powering artificial intelligence, data science and some of the world’s biggest companies. But Python’s future wasn’t certain; at one point it almost disappeared.This 90-minute documentary features Guido van Rossum, Travis Oliphant, Barry Warsaw, and many more, and they tell the story of Python’s rise, its community-driven evolution, the conflicts that almost tore it apart, and the language’s impact on… well… everything.
Source: Python: The Documentary | An origin story
A few weeks ago, we linked to a recent documentary on Node.js. Now from the same producers comes a documentary on Python. Python is a language that’s been around for decades but has had a huge recent resurgence as the language most strongly associated with AI engineering and machine learning. I’d never worked with it until the last 12 months or so. I have been working with it quite extensively, admittedly with the help of various large language models, and come to have no little affection for this long-standing, hard-working language.
Safe Is What We Call Things Later
Computer Science Software Engineering
Avdi Grimm gave a talk called The Soul of Software about a decade ago and one particular thing in it has stuck with me: you can tell what type of programmer you were taught by based on which part of object-oriented programming they teach first.
Did your teacher start with inheritance? Class hierarchies, abstract base classes, the whole “a Dog is-a Mammal is-an Animal” taxonomy? Then you were taught by what we call a formalist. Someone from the Dijkstra school of thought, where programs are mathematical proofs that happen to execute. They showed you the blueprints before they showed you the building.Or did they start with polymorphism? “Look, different things can respond to the same message in their own way!” Objects having conversations, duck typing, the magic of not caring what something is as long as it knows what you’re asking? You had an informalist teacher. Someone from the Alan Kay school, where programs are living systems of communicating entities. They let you play with the clay before teaching you about kilns.
This isn’t just a teaching preference, it’s two completely different universes of what programming is.
Source: Safe Is What We Call Things Later — by Scott Werner
This is a tremendous essay that looks at the nature of programming and recognises that there are essentially two schools of programming, one associated with Dijkstra, and one associated with Alan Kay. Whether you think deeply about what it is you do as a software developer or just go with the flow, I really recommend this. It’s highly readable and thoughtful.
AI & Development Tools
Anti-patterns and patterns for achieving secure generation of code via AI
AI Engineering AI Native Dev Security Software Engineering
I just finished up a phone call with a “stealth startup” that was pitching an idea that agents could generate code securely via an MCP server. Needless to say, the phone call did not go well. What follows is a recap of the conversation where I just shot down the idea and wrapped up the call early because it’s a bad idea.
If anyone pitches you on the idea that you can achieve secure code generation via an MCP tool or Cursor rules, run, don’t walk.Over the last nine months, I’ve written about the changes that are coming to our industry, where we’re entering an arena where most of the code going forward is not going to be written by hand, but instead by agents.
Source: anti-patterns and patterns for achieving secure generation of code via AI
There is, no doubt, an enormous amount of excitement, investment, hype, and interest in large language models generating code. A lot of that focus, I would argue, is well placed. But one significant area of concern is security. Simon Willison calls this the lethal trifecta. Here Geoff Huntley looks at why this is so challenging and things we can do to at least mitigate a serious challenge.
Prompting Is A Design Act: How To Brief, Guide And Iterate With AI
Prompting is more than giving AI some instructions. You could think of it as a design act, part creative brief and part conversation design. This second article on AI augmenting design work introduces a designerly approach to prompting: one that blends creative briefing, interaction design, and structural clarity.
Source: Prompting Is A Design Act: How To Brief, Guide And Iterate With AI — Smashing Magazine
Around three and a bit years ago, when ChatGPT first exploded into our consciousness, there was a great deal of excitement around prompting and this idea of prompt engineering. That’s faded somewhat, but it is very clear that how we prompt these models can have very significant impacts on the quality of the output.
AI agents and the web — A proposal to keep developers in the loop
WebMCP
At its heart, WebMCP lets you list the actions (called “tools”) that an AI agent can perform on a page, as JavaScript functions registered via a browser API.
For example, if your web app is a media player, you could register actions such as previous, next, play, pause, or search with WebMCP, to let AI agents use these actions via the browser. This way, not only would a real person continue to be able to use your media player, by interacting with the UI as normal, but an AI agent would also be able to detect the actions that are available, and invoke them, by calling into your webapp’s code directly.
Source: Patrick — AI agents and the web — A proposal to keep developers in the loop
WebMCP is a new proposal from the Chrome and Edge teams to essentially turn web pages into MCP servers. It’s early days, but take a look at what they’re proposing and think about how it could be beneficial to what you build.
Architecture & Development Process
Why Moving Away from SPAs improves Usability, Accessibility, and SEO
For years, Single Page Applications (SPAs) built with frameworks like React have dominated the web development landscape. They promised fluid transitions, dynamic interfaces, and app-like experiences. But as performance bottlenecks, accessibility challenges, and SEO limitations become more apparent, many teams are reconsidering this approach. A growing movement is embracing traditional server-rendered websites. Not out of nostalgia, but as a strategic return to simplicity, speed, and inclusivity for content-driven sites.This isn’t a blanket dismissal of SPAs. For highly interactive platforms like social networks, dashboards, or real-time collaboration tools, SPAs remain a powerful choice. But for marketing sites, blogs, documentation, other content-first experiences, and sites where interactive content is merely embedded from external services, server-rendered architectures often offer a better balance of performance and maintainability.
Long-time Web Directions attendee Florian Thoma here considers whether the single-page application architecture is the right one for content-heavy sites.
Optimizing PWAs For Different Display Modes
Progressive Web Apps (PWAs) are a great way to make apps built for the web feel native, but in moving away from a browser environment, we can introduce usability issues. Declan covers how we can modify our app depending on what display mode is applied to mitigate these issues.
Source: Optimizing PWAs For Different Display Modes — Smashing Magazine
Progressive Web Apps were first introduced to the world at our Code conference in 2015 by Alex Russell, who along with Frances Berriman coined the term and outlined the broad concepts in an essay around that time. We’ve been big fans from the very beginning. Here, Declan Chidlow looks at how different contexts for our apps (whether that be mobile, desktop, or other platforms) may give rise to specific challenges for our users and considers what we can do about that.
Open Source & Development History
The OG Low-Code Platform
SPREADSHEETS are the de facto most popular programming environment ever created. Purchase decisions for entire families of personal computers have been made solely on the availability (or lack thereof) of a particular spreadsheet application. There is arguably more structured data stored in spreadsheets than in any other support ever invented by mankind. And it is frankly inconceivable to imagine a modern computing platform, either on the desktop or mobile, without any sort of spreadsheet software available for it.
Source: The OG Low-Code Platform — De Programmatica Ipsum
Of late, there has been a great deal of disparagement of “vibe coding.” The term has become almost amorphously useless for describing anything specific, but in broad terms now, it’s come to mean any generation of code by a large language model, particularly when folks use that without careful perusal of the code. When we think of software and code, particularly professional software developers will think of professionally developed code deployed for widespread use. But perhaps the majority of the code ever developed has not been developed by professional software engineers and is not in widespread use. A lot of that software is actually spreadsheets which run processes and workflows and entire businesses in small, medium, and even large organisations. This is a fascinating look at the history of spreadsheets from the 1960s to today. Originating as a tool for accountants to use in finance, it’s extraordinary the uses that technology has been put to. But will vibe coding reduce this reliance on spreadsheets?
Open Source is one person
Open source, the thing that drives the world, the thing Harvard says has an economic value of 8.8 trillion dollars (also a big number). Most of it is one person. And I can promise you not one of those single person projects have the proper amount of resources they need. If you want to talk about possible risks to your supply chain, a single maintainer that’s grossly underpaid and overworked. That’s the risk. The country they are from is irrelevant.
Source: Open Source is one person | Open Source Security
So much of the modern technology world, indeed the whole world, is dependent on open source. Here, Open Source Security investigates just how dependent the open source ecosystem is on a relatively tiny number of maintainers.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
