Year round learning for product, design and engineering professionals

Your weekly reading–from polyfills to performance, CSS to AI Native Dev, it’s all here

Nearly two dozen articles, talks and more this week, from new CSS that will finally, finally allow us to style the select elements, to a 3 and a half hour video on how LLMs work from someone who really knows.

We’ve also got a couple of bonus talk videos on Conffab (no signup required)

There’s a heavy dose of let’s call it ‘AI Native Software Engineering’ (I’m avoiding the V word, and this is about much more than coding), as I genuinely believe if you develop software this is something you should be thinking deeply about.

And on that front

  1. Join our Software Engineering in the Age of AI & LLMs group to discuss the topic and keep up to date with what’s happening
  2. if you’re in Melbourne we’re running a free half day unconference on the topic on April 15th at Deakin Downtown in the Docklands from 2pm-5pm. Simply RSVP and we’ll see you there.

Now on with this week’s reading (and viewing.)

Deep Dive into LLMs like ChatGPT

This is a general audience deep dive into the Large Language Model (LLM) AI technology that powers ChatGPT and related products. It is covers the full training stack of how the models are developed, along with mental models of how to think about their “psychology”, and how to get the best use them in practical applications. I have one “Intro to LLMs” video already from ~year ago, but that is just a re-recording of a random talk, so I wanted to loop around and do a lot more comprehensive version.

Got 3 and a half hours and are keen to get a solid idea about how LLMs work? Andrej Karpathy was a founding member of OpenAI, and there’s few more knowledgable about the topic than he is.

Source: Youtube

How to think about Baseline and polyfills

Polyfills have long been a part of the web developer experience, as they attempt to provide support for web features that aren’t supported in all browsers. It would seem that polyfills are an indispensable tool in the web developer’s toolkit, but it’s nearly impossible to distill such a complex area of concern into a single, definitive statement.Knowing when to use a polyfill for a feature depends on its availability across browsers, and Baseline can be helpful in making that determination. While Baseline doesn’t tell you whether or not you should use polyfills, the clarity it brings to the availability of web platform features gives you an opportunity to be more selective, as excessive polyfills in an application can have significant drawbacks.

Source: How to think about Baseline and polyfills

Web doesn’t have versions, it is continually evolving. Progressive enhancement is one approach we’ve developed to address this challenge–polyfills another. But how do we decide when to polyfill? Jeremy Wagner outlines some ideas.

Keep Product Teams Shipping Faster with Successful Frontend Migrations

The company wants more features, faster. You go to your boss and suggest that reducing build times could increase the team’s shipping velocity. They tell you that they aren’t willing to invest in any system migrations to allow developers to ship high quality code at a faster speed. The company also won’t hire more developers. The only option left is for the existing developers to work harder and faster, piling more debt onto a poor foundation until work comes to a relative standstill and the company’s star engineers burn out and quit.

SourceKeep Product Teams Shipping Faster with Successful Frontend Migrations

Sometimes a migration–it could be tooling, frameworks, or a variety of things–is inevitable. But how do you know when? And how do you go about it? Mae Capozzi considers the challenges.

AI Native Developer Tools Landscape

Your Guide to the AI Development Ecosystem

Source: AI Native Developer Tools Landscape

There is a lot happening in this area right now, so to keep up to date, keep an eye on this catalog.

The <select> element can now be customized with CSS

From Chrome 135, web developers and designers can finally unite on an accessible, standardized and CSS styleable element on the web. This has been many years in the making, many hours of engineering and collaborative specification work, and the result is an incredibly rich and powerful component that won’t break in older browsers.

Source: The element can now be customized with CSS  |  Blog  |  Chrome for Developers

One of the Web platforms significant shortcomings for decades now has been its limited support for standard controls. Yes we’ve had a lot of these for many years, right back into the 90s, but the ability to style them has been limited in many cases. So, developers have rolled their own controls (often missing accessibility corner cases), or relied on 3rd party libraries that come and go. Now we might finally be seeing this fixed, with the release of the first public draft of CSS Form Control Styling Level 1 and (in Chrome for now but progressively enhanceable) fully CSS stylable select elements.

The environmental impact of the web we build

One of the things that’s difficult for me to resolve in my head is the the conflict between three things…

  1. I absolutely love the web.
  2. I care deeply about climate change.
  3. The web has been a massive driver of climate change.

Today, I wanted to talk briefly about we, as people who build things for the web, can do to reduce our environmental impact.

Source: The environmental impact of the web we build | Go Make Things

It’s only relatively recently we’ve begin thinking in earnest abut the environmental impact of websites. Back in 2019, Asim Hussain gave a talk ‘Save the World one line at a time‘ at our Code Leaders conference, the first time I had ever really heard this spoken about. Here Chris Ferdinandi talks about the broader issue and what we can do about it.

Bonus Video: Save the World, one line at a time–free, no signup required.

A Field Guide to Rapidly Improving AI Products

With new tools and frameworks emerging weekly, it’s natural to focus on tangible things we can control – which vector database to use, which LLM provider to choose, which agent framework to adopt. But after helping 30+ companies build AI products, I’ve discovered the teams who succeed barely talk about tools at all. Instead, they obsess over measurement and iteration.

In this post, I’ll show you exactly how these successful teams operate. You’ll learn:

Source: A Field Guide to Rapidly Improving AI Products – Hamel’s Blog

Right now when it comes to building products with AI, we are at the ‘obsess about the tools’ phase, but as Hamel Hussain observes, this is not what successful teams are doing–here he shares what they are.

Leading Effective Engineering Teams in the Age of GenAI

Using AI in software development is not about writing more code faster; it’s about building better software. It’s up to you as a leader to define what “better” means and help your team navigate how to achieve it. Treat AI as a junior team member that needs guidance. Train folks to not over-rely on AI; this can lead to skill erosion. Emphasize “trust but verify” as your mantra for AI-generated code. Leaders should upskill themselves and their teams to navigate this moment.

While AI offers unprecedented opportunities to enhance productivity and streamline workflows, it’s crucial to recognize its limitations and the evolving role of human expertise. The hard parts of software development – understanding requirements, designing maintainable systems, handling edge cases, ensuring security and performance – remain firmly in the realm of human judgment.

Source: Leading Effective Engineering Teams in the Age of GenAI

Thoughts on leading software engineering teams in the age of generative AI, from Addy Osmani.

Levels of user onboarding | Krystal Higgins

Discussion about user onboarding often focuses on teaching new users how to use a product’s interface. There are dozens of third-party plugins that offer various ways to point out product navigation, features, and affordances. However, this only scratches the surface of what onboarding can be about. The biggest opportunities for onboarding happen at higher levels. Similar to how The Society for Human Resource Management (SHRM) says that employee onboarding can happen at multiple levels, user onboarding can also be tiered. Here’s the 4 levels of user onboarding that I currently think about, from lowest highest level: interface orientation, process onboarding, new meanings onboarding, and systems understanding. 

Source: Levels of user onboarding | Krystal Higgins

Krystal Higgins quite literally wrote there book on onboarding. Here she explores different kinds of onboarding (for example new features, versus an entirely new set of concepts) and key considerations for each.

Bonus Video: Better Onboarding by Krystal Higgins at Web Directions Summit ’22 (free, no signup required)

The 4 patterns of AI Native Dev

AI is fundamentally reshaping software development roles and activities. While the change is obvious, understanding the actual shifts taking place remains challenging. In this article, we introduce a first pass at four AI Native Dev patterns that are currently emerging. We’re asking for community feedback to evolve these patterns in the open. The aim is for patterns to help you grasp what’s on the horizon and how to position yourself effectively in this changing landscape.

Source: The 4 patterns of AI Native Dev – Overview – AI Native Dev

We’re very interested here in the whole area of AI aided software engineering–what some folks are calling ‘AI Native Dev’ especially beyond the obvious hot takes and vibe coding chatter. So this caught our attention.

Web Performance: Fast, Responsive, Stable in 2025

Web Performance is one of those topics that’s constantly discussed as crucial for the modern web. It’s often framed as a key factor for user experience (UX), conversions, SEO, and overall success on the Internet. Every year kicks off with an article titled “New Challenges and Why Fast Websites Will Win in 20xx.”Yet when it comes to implementation, performance tasks in the backlog often don’t get the priority they deserve. This happens for two main reasons, two key questions arise:

  1. Is it really that important? – Users aren’t complaining; everything loads quickly for me, too. Plus, our internal research hasn’t shown a clear correlation between performance metrics and search rankings. What even is a CLS of 0.4, and why should I care?
  2. Is it worth the effort? – There are too many metrics; they’re confusing, and new ones keep popping up all the time. On top of that, the tools are complex and expensive. Wouldn’t it be better to invest resources in product features instead?

This guide-style article explores how to answer these questions in 2025 and how to build a balanced approach to web performance. As always, the balance is found between engineering decisions and business expectations

Source: Web Performance: Fast, Responsive, Stable in 2025 | Antony Belov

Why doesn’t performance get the focus and resources it deserves, given the potential business impact of improving performance? Antony Belov considers why and how to change that.

Previewing Content Changes In Your Work With document.designMode

You probably already know that you can use developer tools in your browser to make on-the-spot changes to a webpage — simply click the node in the Inspector and make your edits. But have you tried document.designMode? Victor Ayomipo explains how it can be used to preview content changes and demonstrates several use cases where it comes in handy for everything from basic content editing to improving team collaboration.

Source: Previewing Content Changes In Your Work With document.designMode — Smashing Magazine

Somewhere in the dim recesses of my aging mind I have a vague recollection of designMode. You might find it useful!

React Trends in 2025

Every year I discuss the most important trends in the world of React. In this article, we will explore the React trends in 2025 that you should be aware of. Whether you are a beginner or an experienced developer, these trends will help you stay up-to-date with the latest developments in the React ecosystem.

Source: React Trends in 2025

Where’s React and its ecosystem ended in 2025? Robin Wieruch has been tracking React ecosystem trends for years and here’s his list of things to keep track of this coming year.

AI Blindspots

Blindspots in LLMs I’ve noticed while AI coding. Sonnet family emphasis. Maybe I will eventually suggest Cursor rules for these problems.

Source: AI Blindspots

It’s still very early days in the history of humans working with LLMs to produce software. But some patterns are emerging. Here’s a set of areas of weakness (I prefer not to use the term they have used) one person (can’t find details about whom!) has observed about coding models particularly with Claude Sonnet.

How to Get a Standing Ovation as a Conference Speaker

I keep on attending otherwise interesting talks and conference sessions being flushed down the toilet by appalling deliveries. This is my plea to you: please, please, PLEASE: if you have to speak in public, follow these rules to ensure a standing ovation at the end of your talk.

Source: How to Get a Standing Ovation as a Conference Speaker

I’ve delivered a fair number of talks in my time–and have definitely improved over the years of doing so. I also watch every single talk at our events in detail each year as I edit the transcripts (and most also in person at the events).

I have many strongly held thoughts about what in particular speakers should avoid, that aren’t entirely common–the top being never ever, ever, live code on a presentation–there’s nothing that well selected code excepts and possibly a screencast can’t demonstrate much more coherently and accessibly.

Here Adrian Kosmaczewski outlines his thoughts on what for excellent presentations. I agree with every one of these suggestions.

Runtime compatibility across JavaScript runtimes

Display APIs compatibility across different JavaScript runtimes

Source: Runtime compatibility across JavaScript runtimes

JavaScript runtimes are in any more places than you might think–of course in browsers, but also in Node, Bun, and Deno, and edge computing platforms like Fastly and Cloudflare workers. So, just which JavaScript features are supported in different runtimes? Use this to find out.

SSR Deep Dive for React Developers

Explore step-by-step how Server-Side Rendering (SSR), pre-rendering, hydration, and Static Site Generation (SSG) work in React, their costs, performance impact, benefits, and trade-offs.

Source: SSR Deep Dive for React Developers

Nadia Makarevich, author of Advanced React takes a long hard look at Server-Side Rendering and the performance impacts.

Quick Reminder That :is() and :where() Are Basically the Same With One Key Difference

I’ve seen a handful of recent posts talking about the utility of the :is() relational pseudo-selector. No need to delve into the details other than to say it can help make compound selectors a lot more readable.

Source: Quick Reminder That :is() and :where() Are Basically the Same With One Key Difference

I’ve been using CSS since before the initial specification was finalised. And even way back then, CSS was 99.5% pretty straightforward, with the devil in the details. Once upon a time a lot of that was browser support gotchas, but CSS has always had subtleties that can bite. That’s still the case now as this quick look at the :where() and :is() selectors attest.

Revisiting CSS border-image

Since then, I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s because most explanations don’t solve the type of creative implementation problems that most people need to solve. Most likely, it’s both.

Source: Revisiting CSS border-image | CSS-Tricks

Rounded corners on objects as a design feature for the Web has been around a long long time. How we used to do this was create a table, with each corner and edge of the object being a table cell and the content of the object its own cell.

Yikes.

border-image was introduced to enable similar designs (and much more), though it’s not been widely supported as long as I’d have guessed looking at caniuse.com, though my instinct is it was supported well before the first browser versions that caniuse tracks.

border-radius probably replaced most of the common border-image use cases, and so that feature remains significantly under-used. Here Andy Clarke revisits border-image, and considers uses beyond simply rounded-corners.

delivering year round learning for front end and full stack professionals

Learn more about us

Web Directions South is the must-attend event of the year for anyone serious about web development

Phil Whitehouse General Manager, DT Sydney