Your weekly reading for April 7th–the fox and hedgehog edition
Isaiah Berlin was something very rare these days, a public intellectual. An academic, he also wrote more popular books and essays, including The Hedgehog and the Fox. The hedgehog, he writes ‘view[s] the world through the lens of a single defining idea’, whole the fox ‘draw[s] on a wide variety of experiences and for whom the world cannot be boiled down to a single idea’. Or, as he quotes the Greek poet Archilochus, “a fox knows many things, but a hedgehog knows one big thing”.
From the nature of these newsletter you can probably tell I identify more as a fox than a hedgehog.
I was reminded of this when reading one of our choice for this week, ‘Why Generalists Own the Future’. In an era that will be defined by LLMs, for good and otherwise, Dan Shipper argues, perhaps counter-intuitively, that it’s foxes, who know many things, who are best placed to take advantage of the tools that are LLMs. Perhaps its my biases, but my intuition suggests this may be true.
There’s also a piece from design legend Mike Davidson, who draws on his experience of designing for the Web for 30 years, and the early days of web and digital design. He argues similarly ‘The Future Favors the Curious’–and provides encouragement and advice for those who might be wanting to focus on (as existing or new designers) on design for AI. Advice I think it more broadly applicable.
Today, once again many things. Quite a bit of Performance and CSS, and a fair bit at the intersection of AI, LLMs and software engineering.
Correlation charts: Connect the dots between site speed and business success
If you could measure the impact of site speed on your business, how valuable would that be for you? Say hello to correlation charts – your new best friend. Here’s the truth: The business folks in your organization probably don’t care about page speed metrics. But that doesn’t mean they don’t care about page speed. It just means you need to talk with them using metrics they already care about – such as conversion rate, revenue, and bounce rate.That’s why correlation charts are your new best friend.
Source: SpeedCurve | Correlation charts: Connect the dots between site speed and business success
As has come up many times in our presentations, making the case for investment in performance isn’t always easy. Money and effort spent on something other than new features can be a hard sell. Here Tammy Everts explores correlation charts, “a powerful data visualization that shows you the relationship between your page speed metrics and your business and user engagement metrics”, that can help demonstrate the value of that investment to business decision makers.
The systemic failure of implementing CSS principles
Before CSS came along, HTML did not have a version specifically dedicated to styling. But, back in the days when I started creating webpages around 1996, I still managed to style and layout pages using HTML’s attributes and tags. I remember doing a lot of copy-pasting to get the right look by reusing those inline styles and trying to tweak everything. It was a nightmare, but it worked for the time.
Source: The systemic failure of implementing CSS principles | Andrea Davanzo
A look at the history of web styling and CSS architecture from before CSS (but not including Cascade Layers).
How Does Chrome Prioritize Image Requests?
In this article, we’ll explore how Chrome determines the request priority for images. We will explain how prioritization works and what optimization techniques you can use to ensure important images load faster.
Image requests are low-priority by default
By default, image requests are Low priority. The browser will instead prioritize requests that are render-blocking or part of the critical request chain.In this request waterfall we can see several low-priority image requests.
Source: How Does Chrome Prioritize Image Requests? | DebugBear
Modern web pages will typically include links to dozens of resources or more–images, JS, CSS, and god knows what. http now enables numerous simultaneous requests, But how do browser prioritise these? Conor McCarthy looks at how Chrome prioritises image loading.
Customizable select elements
This article explains how to use dedicated, modern HTML and CSS features together to create fully-customized elements. This includes having full control over styling the select button, drop-down picker, arrow icon, current selection checkmark, and each individual element.
Source: Customizable select elements – Learn web development | MDN
Following on from a recent post about new features coming to Chrome (and hopefully elsewhere too soon) that enable rich styling of the select element. This tutorial covers new ways of styling select elements.
Why Generalists Own the Future
A common refrain I hear is that in the age of AI, you don’t want to be a “jack of all trades and a master of none.
”For example, my good friend (and former Every writer) Nat Eliason recently argued:
“Trying to be a generalist is the worst professional mistake you can make right now. Everyone in the world is getting access to basic competence in every white-collar skill. Your ‘skill stack’ will cost $30/month for anyone to use in 3-5 years.”
He makes a reasonable point. If we think of a generalist as someone with broad, basic competence in a wide variety of domains, then in the age of AI, being a generalist is a risky career move. A language model is going to beat your shallow expertise any day of the week.
But I think knowing a little bit about a lot is only a small part of what it means to be a generalist. And that if you look at who generalists are—and at the kind of mindset that drives a person who knows a lot about a little—you’ll come to a very different conclusion:
In the age of AI, generalists own the future.
Source: Why Generalists Own the Future
This seeming counter-intuitive concept, that it’s generalists not specialists (foxes, not hedgehogs in Isaiah Berlin’s formulation) who will be most valuable in an AI assisted world appeals to me as a self identified fox. Does this apply in Software Engineering? My instinct is yes. But time I guess will tell.
Shift Left on Security: Empower Full-Stack Devs to Build Safer Code
For most developers, we see securing secret keys and requiring authentication for API endpoints as basic coding, but AI won’t. The same way that someone new to the industry wouldn’t know these best security practices either. We need to treat AI the same way we treat onboarding and training interns and juniors; we need to be explicit with the requirements and create guardrails and checkpoints as far left into the process as possible. That way, the vibe can stay high as we avoid becoming the next tech meme on Reddit.
Source: Shift Left on Security: Empower Full-Stack Devs to Build Safer Code
As the capability of (and demand for) LLM generated code grows, there’ll be a pressure to ship more and more quickly–focussing on new features and whole new products. But as recent episodes have shown, LLM generated code may not be as focused on security as you might hope–after all it’s trained on a lot of code that itself is unlikely to be entirely secure. So what’s to be done? Valerie Phoenix considers tools, and approaches that can help–but above all it is about a Security-First Mindset.
Meet Declarative Web Push
Declarative Web Push allows web developers to request a Web Push subscription and display user visible notifications without requiring an installed service worker. Service worker JavaScript can optionally change the contents of an incoming notification. Unlike with original Web Push, there is no penalty for service workers failing to display a notification; the declarative push message itself is used as a fallback in case the optional JavaScript processing step fails.
Source: Meet Declarative Web Push | WebKit
Apple’s Webkit team have added declarative Web push to Safari. Why?
Declarative Web Push is more energy efficient and more private by design. It is easier for you, the web developer to use. And it’s backwards compatible with existing Web Push notifications.
Deep Dive Into the Cascade
The CSS Cascade seems simple enough when you’re dealing with a single stylesheet. But in real world applications, we use bundlers like webpack or vite to load thousands of files. How can we ensure that our CSS always loads in the correct order?
The @layer CSS rule allows devs to “declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers mdn link.” This is exceptionally useful for design systems maintainers who often don’t control the environment in which their components are used.
Source: Deep Dive Into the Cascade: Use the @layer Rule to Write More Deterministic CSS
I don’t think Bert Bos and Håkon Wium Lie, when they first proposed CSS, imagined the scale of its use today. The cascade and inheritance, which make CSS so powerful are also challenging when a page might draw style from dozens of style sheets, first and third party. This is made even more challenging when the load order of style sheets may be difficult to determine when using bundlers.
The Cascade, and inheritance (often confused for each other) along with specificity do cause challenges for developers, and numerous methodologies (Nicole Sullivan’s OOCSS, BEM) and technologies (CSS-in-JSS, Tailwind) have emerged to tame these admittedly at times complex aspects of CSS.
CSS Cascade Layers is the first large scale attempt to address the complexity of developing large scale sites and applications with CSS. Now baseline, and widely supported in most browsers since early 2022 (late 2024 in Android browsers) it provides a mechanism to create different ‘layers’ of CSS, within which styles cascade independently of other layers.
Mae Capozzi introduces these here, and for a more in depth look at a couple of talks on the topic here on Conffab: Cascade Layers from Bramus Van Damme at Hover ’22 CSS Architecture with Layers, Scope, and Nesting also from Bramus Van Damme at Summit ’22
Test Driven Vibes
Test-driven development (TDD) is the perfect match for vibe coding.
Here’s how it works:
- Write out a test (don’t generate this part).
- Check that it fails.
- Generate the solution.
- Check if it passes. If not, repeat by generating another solution.
- Refactor by hand while ensuring tests still pass.
I call it test-driven vibes.
Source: Test Driven Vibes — Royal Icing
OK, we have to get one thing straight. When Andrej Karpathy coined the term ‘vibe coding’ eons ago (actually less than 2 month ago) he did not mean, as Simon Willison has observed, ‘all code generation with LLMs’. Karpathy wrote (sorry, I am no longer linking to X/Twitter but Simon does if you want the original context)
“There’s a new kind of coding I call “vibe coding”, where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It’s possible because the LLMs (e.g. Cursor Composer w Sonnet) are getting too good. Also I just talk to Composer with SuperWhisper so I barely even touch the keyboard.”
But that naming ship has probably sailed. So what Patrick Smith is referring to here, where he expressly couples Test Driven Development with LLM generated code is by Karpathy’s definition not vibe coding. But it is very interesting.
WebAIM: The WebAIM Million – The 2025 report on the accessibility of the top 1,000,000 home pages
For the seventh consecutive year, WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 web sites. The evaluation was conducted using the WAVE stand-alone API (with additional tools to collect site technology and category data). The results provide an overview of and insight into the current state of web accessibility for individuals with disabilities as well as trends over time.
Source: WebAIM: The WebAIM Million – The 2025 report on the accessibility of the top 1,000,000 home pages
How are the most popular sites on the Web, and the technologies they are built with, fairing in terms of accessibility? Turns out now so well-and it is really core things like color contrast and alt text that lead the way. WebAIM has been tracking this for several years now, and their latest WebAIM Million report has just been released.
The Future Favors the Curious
Running design at Microsoft AI and having done a decent amount of hiring lately, I can tell you that the patterns emerging now are exactly as they were in 1995. There is a giant population of designers who have a bunch of really great skills. Some of those designers will decide they are content doing the same sort of design they have done for their whole careers. Others will decide to learn as much as they can about AI and prepare for an industry that will look very different in 5 to 10 years. Finally, there is another group of people who have no design experience whatsoever but are so enamored with this new technology that they will teach themselves very useful skills in a short amount of time. Do not underestimate this third group as it’s easier than ever to fake it ’til you make it right now.
Source: The Future Favors the Curious » Mike Industries
Mike Davidson is a giant in the design profession, now Corporate Vice President, Design & User Research @ Microsoft AI. He’s been doing design for the Web for as long as just about anyone, and draws on his experience to provide encouragement and advice for those who might be wanting to focus on (as existing or new designers) on design for AI.
The Thankless Complexity of Custom Form Validations
One of the least exhilarating but common development tasks are building forms, and form validations. While important, they’re often over-designed and easy to over-engineer as a result.
I believe we’ve gone too far with trying to accomodate all kinds of form validation while building reusable input fields –– especially for component libraries and design systems.
Source: The Thankless Complexity of Custom Form Validations | Dev Notes
As developer we can have a tendency to over-engineer our form validation–adding all manner of extraneous messages and cases–but perhaps we’ve gone too far suggests Jen Chan.
Grid First, Flex Third
I’ve been mulling this topic for months now, and I’m pretty firmly of the opinion if you are attempting to do some layout in CSS, you should reach for display:grid first, followed by display:block, followed by display:flex. Grid allows the layout element to be in control of how things get placed, where as flex really relies on the children to define their widths, which most of the time is not how layout should function at all.
Source: Grid First, Flex Third
Now I rarely use grid and use flex all the time–perhaps it’s because my common use cases are different to Alex, perhaps because I’m familiar and comfortable with flex (it took some time to transition from floats to flex)–but perhaps it’s time for me reconsider.
Summary of the February 2025 TC39 plenary
The February TC39 meeting in Seattle wrapped up with significant updates and advancements in ECMAScript, setting an exciting trajectory for the language’s evolution. Here are the key highlights, proposal advancements, and lively discussions from the latest plenary.
Source: Summary of the February 2025 TC39 plenary
If you want to know where JavaScript is headed, this recent roundup from the TC39 meeting (TC39 is the technical committee of ECMA International that oversees the standardisation of JavaScript).
Item Flow – Part 1: A new unified concept for layout
CSS Grid and Flexbox brought incredible layout tools to the web, but they don’t yet do everything a designer might want. One of those things is a popular layout pattern called “masonry” or “waterfall,” which currently still requires a Javascript library to accomplish.
Masonry layouts in CSS feature was first proposed by Mozilla and implemented in Firefox behind a flag in 2020. From the beginning, there’s been a hot debate about this mechanism. The WebKit team at Apple picked up where Mozilla left off, implemented the drafted spec, and landed it in Safari Technology Preview 163. This reinvigorated the conversation. By October 2024, there were two competing ideas being debated — to “Just Use Grid” or to create a whole “New Masonry Layout”. We wrote extensively about these ideas in a previous article on this website.
A lot has happened since October. Now, a third path forward is emerging — a path that would mean the CSS Working Group doesn’t choose either “Just Use Grid” or “New Masonry Layout”. It merges ideas from both with a completely-new idea to create a unified system of Item Flow properties. This article explains what Item Flow is, and its impact on both Flexbox and Grid. In Part 2, another article will more fully explain the implications for the future of masonry-style layouts.
Source: Item Flow – Part 1: A new unified concept for layout | WebKit
Jen Simmons explores a new approach to bringing ‘masonry’ style layouts to CSS.
Expanding CSS Shadow Effects
Shadows in CSS can be multi-directional, layered, and are animate-able. On top of being all that, they don’t affect the layout and computed size of an element even though they can make it appear bigger or smaller, which makes them an efficient tool for making visual changes.
Source: Expanding CSS Shadow Effects – Frontend Masters Blog
Shadows have been a staple of Web (and screen based) design for decades. Even a simple one pixel line can give the impression of depth to the otherwise flat UI of a screen. But CSS shadows can do much more than add a little depth as Preethi Sam explores here.
mind the WCAG automation gap – HTML Accessibility
What can automated tools test without humans?
Source: mind the WCAG automation gap – HTML Accessibility
We’ve covered the issue of AI and accessibility a number of times now. There are broad claims made by some (typically not accessibility experts) for AI’s revolutionary opportunity to solve accessibility challenges.
But folks with deep accessibility knowledge are more sanguine. That’s not to say there aren’t valuable places where AI and other forms of automation can definitely help improve accessibility. Here’s a comprehensive roundup of WCAG Success Criterion and how testing them might be automated (and what to watch out for.)
How Software Engineers Actually Use AI
We surveyed 730 coders and developers about how (and how often) they use AI chatbots on the job. The results amazed and disturbed us.
Source: How Software Engineers Actually Use AI | WIRED
How are developers really using AI, and what do they think about it? WIRED asked a bunch of them, across levels of experience and different kinds of employers.
Data Fetching Patterns in Single-Page Applications
When a single-page application needs to fetch data from a remote source, it needs to do so while remaining responsive and providing feedback to the user during an often slow query. Five patterns help with this. Asynchronous State Handler wraps these queries with meta-queries for the state of the query. Parallel Data Fetching minimizes wait time. Fallback Markup specifies fallback displays in markup. Code Splitting loads only code that’s needed. Prefetching gathers data before it may needed to reduce latency when it is.
Source: Data Fetching Patterns in Single-Page Applications
This detailed article from Juntao QIU looks at 5 data fetching patterns in Single Page applications, (but doubtlessly more broadly applicable beyond SPAs).
The Software Engineering Identity Crisis
To understand this identity crisis, we need to look at how deeply the craft of coding has shaped who we are. At its core, writing code is about mastery and control – skills we’ve spent years perfecting. Modern programming languages are much higher-level than those of days gone by, but they still require deep technical understanding. Few developers today deal with the nitty-gritty of pointers and memory management, yet we still take pride in knowing how things work under the hood. Even as frameworks do more heavy lifting, we’ve maintained our identity as artisans who understand our tools intimately.
Programming today is much more about stitching together APIs, frameworks, and libraries in creative ways to build something meaningful. In fact, recent research at Google suggests that creativity in software engineering centres on the concept of clever reuse over pure novelty. This makes sense to me – I’ve often commented that we’re all just ‘integration’ engineers nowadays, really.
Source: The Software Engineering Identity Crisis – Annie Vella
Annie Vella explores how the advent of AI coding assistants is reshaping the role of software engineers. Traditionally, engineers have identified as builders, deriving satisfaction from hands-on coding and problem-solving. However, AI tools are shifting this dynamic, transitioning engineers from creators to orchestrators—roles that resemble management, or curation, more than craftsmanship.
This evolution challenges the core identity of software engineers, as they find themselves overseeing AI-generated code rather than directly crafting it. Vella highlights the irony that, while the industry has long emphasized that software engineering encompasses more than just coding, the increasing reliance on AI may diminish the hands-on aspects that many engineers cherish.
She underscores the importance of adaptability, suggesting that engineers must navigate this transformation by balancing their technical expertise with emerging skills in AI orchestration.
Great reading, every weekend.
We round up the best writing about the web and send it your way each Friday.
