Year round learning for product, design and engineering professionals

“For the web to survive, it must start to grow on mobile” our weekly roundup for the week of Nov 3

In the opening piece of this week’s roundup Sacha Greif, the organiser of the “State of” surveys (like the State of CSS, State of JavaScript) observes

Let me make a prediction: we’ll look back at 2024 as the turning point between “CSS Classic” and “New CSS”.

I think he’s right, but I think it’s more profound than that. I feel we’re seeing a transformation in how we architect and build for the Web. We’ve spent a decade leaning heavily on complex abstractions, with increasingly more convoluted build systems and tooling just to keep our head above the performance water.

In fact Alex Russell argues that it’s imperative such a transformation does happen. He comes down hard on the Web we’ve built, and questions its survival on mobile unless we as developers address this:

So this is the strategic logic of why web performance matters in 2024; for the web to survive, it must start to grow on mobile. For that growth to start, we need the web to be a credible way to deliver these sorts of 80/20 capability-enabled mobile experiences with not-trash performance. That depends both on browsers that don’t suck (we see you, Apple) and websites that don’t consistently lock up phones and drain batteries.

Which means rethinking what we’ve come to accept as the state of the art over the last decade. And leaning more heavily on the underlying platform technologies, not simply rely on the layers of abstraction we’ve built above it (thoughtless have their place as well if judiciously used).

We’ve programmed this year’s Web Directions Developer Summit to address precisely these issues. We really hope you might be able to make it, in person, or online.

State of CSS 2024

Let me make a prediction: we’ll look back at 2024 as the turning point between “CSS Classic” and “New CSS”.

CSS Classic is how most of us have been writing CSS for years: using a limited set of features, and compensating for the language’s limitations using outside tools such as libraries, pre- and post-processors, and strict methodologies.

New CSS on the other hand is an approach that embraces Subgrid, :has(), variables, container queries, and the many new and exciting CSS features introduced in recent years to not only do away with extra tooling, but even start taking on tasks that previously required complex JavaScript workarounds.

This is all possible thanks to a renewed comittment by browser vendors to, you know, actually make this stuff work – and I can’t shake the feeling that we’ve barely scratched the surface of everything New CSS can offer.

Source: State of CSS 2024

Sacha Greif, organiser of the “State of” surveys on the most recent State of CSS Survey. I’ve been saying for a while there’s a change in the air, in how we architect web applications. After years of abstracting away the platform to manage it’s limitations–whether with JavaScript Frameworks and Libraries, CSS pre-processors, polyfills, we’ve added complexity and cost, not although good reason at times. But the platform is increasingly powerful, and it is time for us to really embrace it once more.

If you remotely share Sacha’s conviction that this is a watershed moment for CSS, then we have you covered at Developer Summit, with in depth sessions and a whole day workshop on modern CSS by Miriam Suzanne, one of the people instrumental in much of its development at the W3C.

Platform Strategy and Its Discontents

Web developers and browsers have capped the web’s mobile potential by ensuring it will feel terrible on the phones most folks have. A web that can win is a web that doesn’t feel like sludge. And today it does.This failure has many fathers. Browsers have not done nearly enough to intercede on users’ behalf; hell, we don’t even warn users that links they tap on might take them to sites that lock up the main thread for seconds at a time!

Things have gotten so bad that even the extremely weak pushback on developer excess that Google’s Core Web Vitals effort provides is a slow-motion earthquake. INP, in particular, is forcing even the worst JS-first lemon vendors to retreat to the server — a tacit acknowledgement that their shit stinks.

So this is the strategic logic of why web performance matters in 2024; for the web to survive, it must start to grow on mobile. For that growth to start, we need the web to be a credible way to deliver these sorts of 80/20 capability-enabled mobile experiences with not-trash performance. That depends both on browsers that don’t suck (we see you, Apple) and websites that don’t consistently lock up phones and drain batteries.

Source: Platform Strategy and Its Discontents – Infrequently Noted

Cassandra, the daughter of the King of Troy, was fated to be able to predict the future, but cursed that no one would believe her. I’m sure Alex Russell at times feels like Cassandra. A long time contributor to the Web in numerous ways (developer of Dojo one of the early web frameworks, working on the Chrome and IE teams, alongside Frances Berriman coining the term and fleshing out the ideas behind Progressive Web Apps, a lot of work at the W3C) Alex has for years highlighted the challenges the Web as a platform faces in the era of mobile. This new piece is not easy reading but not without hope. Above all Alex lays the responsibility for the Webs success or failure on us who care about it and develop for it. 

Quick guide to web typography for developers

In this guide, we’ll go over key typography settings and learn how we can manipulate them with CSS to make text on your apps and websites look good by default. This tutorial will be useful for developers that want to get 80% of results with 20% of efforts, without diving head first into typography. It might come handy for people who are already good with typography but didn’t work with web closely and want to quickly learn CSS equivalents of familiar concepts.

Source: Quick guide to web typography for developers

Al kinds of typographical tips and suggestions for Web designers.

Flexible Typesetting is now yours, for free

Originally published in 2018, Flexible Typesetting has sold thousands of copies and given a new generation of designers fresh mental models to craft meaningful, multidimensional typography. It is required reading in elite design programs and has encouraged the rethinking of core curricula.

Source: Tim Brown: Flexible Typesetting is now yours, for free

Speaking of typography, like a number of the books in the wonderful and now lamented A Book Apart series, Flexible Typesetting is now available online and like several of the books, for free.

Software engineering reimagined for the AI-Native era

AI is redefining the software development process. By viewing development through a lens of problem-solving rather than code creation, engineers can focus on outcomes and value generation – not just lines of code.

Source: Software engineering reimagined for the AI-Native era | ajfisher

A very thoughtful piece by long time speaker Andrew Fisher about what the nature of ‘AI Native’ software development might look like. If you are a software developer I feel you should be thinking about this a lot, as of course we will be at our developer summit.

Making content-aware components using CSS :has(), grid, and quantity queries

A big thing you need to contend with when working on design systems is anticipating all the different ways someone may use a component. The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well.

Source: Making content-aware components using CSS :has(), grid, and quantity queries – Piccalilli

One of the real strengths of web components is encapsulation–a component is by default (largely) sealed off from the DOM it is embedded in–global CSS doesn’t inherit, or cascade, into the component (caveats for CSS custom properties, slots). Which is also a kind of weakness–since there are times you will want the global style inherited. Here Eric Baily explores using modern CSS features that aid in creating components that are self-aware, and display themselves nicely no matter where they might be placed. 

And at Developer Summit we have in depth sessions on web components and on modern CSS, and workshops on each of these.

HTML Whitespace is Broken

Recently, I was working on a project which required a deeper understanding of how whitespace works in HTML. I was never a fan of HTML’s whitespace behavior before as I’ve been burned by it a few times. But as I dug into it more deeply, I found myself discovering complex design issues that I wanted to explore in a blog post. This is partially to write down my knowledge in this space for future reference and partially to vent about how unnecessarily complicated it all is.

Source: HTML Whitespace is Broken – Devel without a Cause

The web is full of things that you as a developer don’t really need to worry about most of the time (liek the difference between attributes and properties) until you do. Whitespace may be one of those things for you one day, so when it becomes a thing, reach for this in depth article.

Come To The Light-dark() Side

You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s not forget the color palette itself! Switching from a “light” mode to a “dark” mode may involve new variations to get the right amount of contrast for an accessible experience.It is indeed a lot of work. But I’m here to tell you it’s now a lot simpler with modern CSS!

Source: Come To The Light-dark() Side | CSS-Tricks

Which reminds me, Conffab needs a light mode (and Web Directions needs a dark mode). Might have to get onto that, and it’s much easier thanks to this article from Sara Joy.

OK, that should keep you going for the weekend!

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