Year round learning for product, design and engineering professionals

Your weekly Web Directions reading

Week 3 of our 2025 streak features articles, documentaries and bonus presentation videos on a range of topics for anyone working on the Web. From CSS features old and new, to a very engaging and watchable documentary on the origins of Node.JS, and much more.

Remember if you’re keen to talk at one of our 2025 events our CFPs are open.

And stay tuned next week of just about the most exciting announcement we’ve ever made…

How I learned to code with my voice

In January 2025, I developed excruciating pain and pins and needles in my hands, which made it very difficult to type and use my trackpad. I panicked. I couldn’t work. And if I couldn’t work, I couldn’t earn money. And if I couldn’t earn money, I couldn’t afford to eat or pay my mortgage. I was actually really, really, scared.

Source: How I learned to code with my voice

Salma Allam-Naylor tells the story of losing the ability to code with her hands and learning how to do so with her voice. Josh Comeau also wrote about his similar experience. You might one day find this valuable in your own life. Or it might help to reinforce the reality that we are all often situationally disabled–trying to send a text via voice while driving (where this is legal), temporarily disabled (you injure a hand or arm or leg) and more commonly than we’d want to admit to ourselves, permanently disabled. So despite what recent events in the US might suggest, accessibility (like all forms of equity and inclusion) is profoundly important. It is a human right. And you personally, those you love, and we collectively all benefit from it.

The internet used to be fun

I’ve been meaning to write some kind of Important Thinkpiece™ on the glory days of the early internet, but every time I sit down to do it, I find another, better piece that someone else has already written. So for now, here’s a collection of articles that to some degree answer the question “Why have a personal website?” with “Because it’s fun, and the internet used to be fun.”

Source: The internet used to be fun

The early web–pre social media and big platforms–was different. And I’ll happily say better in many ways. Though less lucrative to be sure. Here’s a roundup of a number of essays from all manner of people (including me, and several Conffab speakers) on the once (and hopefully) future web. Smaller, more connected, more personal and authentic.

Live CSS Colors: What You Can Safely Use | That HTML Blog

One of the most exciting developments in Modern™ CSS is the ability to generate new colors in real-time programmatically based on variables or the currentColor keyword. However, there are two separate ways to modify or derive colors, each with its own set of goals and syntax, and the confusing thing about them is they have rolled out at different paces.

The first method you should know about is color-mix. It’s one I’ve been using for some time now, and it was the first one which became widely available in 2023. Can I Use reports 91.93% support which is quite impressive.The second method is newer, called Relative Color syntax. This syntax has rolled out in a more incremental fashion, and if you’re looking for currentColor support in particular (more on that in a moment), Can I Use reports only 77.53% support which in my opinion means it’s not quite ready for widespread production use.

Source: Live CSS Colors: What You Can Safely Use | That HTML Blog

Color in CSS is an increasingly vast, sophisticated, set of properties, values, functions, types, @rules… From humble beginnings with just solid colors in an RGB color space, (I can’t quite recall but my memory is transparency via alpha channels came later) we now have a literally overwhelming set of features. One thing we can do now is ‘generate new colors in real-time programmatically based on variables or the currentColor keyword.’ As Jared White details here.

Node.js: The Documentary | An origin story

A fantastic, professionally produced documentary on the history of Node.js

Is 2025 the Year of the ‘Design Engineer’?

The slow percolation of this new title is something I’ve monitored for a long time. In a bygone era, some might have used the name “Rockstar Web Designer” or “Unicorn”, but thankfully, we’ve at least somewhat matured. So what is a “Design Engineer”, and what prevalence will it have in 2025? Let’s discuss.

Source: Is 2025 the Year of the ‘Design Engineer’? – Blog – zeroheight

In 2024 there was a flurry of discussion about the title ‘design engineer’. Here David Barnes explains why he thinks 2025 is the year of the Design Engineer.

So, you want to push a web platform feature?

Over the years, I’ve helped a few folks get into browser development, and tried to encourage many others. In that process, I found myself giving similar advice, again and again.

This is my attempt to have somewhere I can send browser-curious folks to. So, in this post, I’ll try to outline why you may want to contribute to browsers and how you may go about doing that. I hope some of y’all may find it useful.

Source: So, you want to push a web platform feature?

Standards and Browser developer Yoav Weiss explores why and how you might be involved in getting a new browser feature implemented.

Considerations for making a tree view component accessible

Tree views are notoriously difficult to implement in an accessible way. This post is a deep dive into some of the major considerations that went into how we made GitHub’s tree view component accessible. We hope that it can be used as a reference and help others.

Source: Considerations for making a tree view component accessible – The GitHub Blog

In the tradition of Adem Cifcioglu’s wonderful talks on accessible auto-suggest (from Code 2024 and Respond 2017), this article dives deeply into the challenges in making the common tree view control accessible.

Bonus Video: Watch Adem Cifcioglu’s talk on accessible auto-suggest from Code 2024

CSS nesting: use with caution

There are features that fill me with dread though and right at the top of that list is native CSS nesting. I know that opinion will be rather unpopular, but the whole deal of the site is front-end education for the real world, so I’m here to provide that for you today.

Source: CSS nesting: use with caution – Piccalilli

CSS pre-processors highlighted many aspects of CSS that developers wanted but which had not yet arrived in the spec. In the last decade or so we’ve seen a lot of the most popular pro-processor features come to CSS itself, including CSS nesting. But as the adage goes, be careful what you wish for argues Andy Bell-this may not work exactly as you expect.

Revisiting CSS Multi-Column Layout | CSS-Tricks

Perhaps because, before the web, I’d worked in print, I was over-excited at the prospect of dividing content into columns without needing extra markup purely there for presentation. I’ve used Multi-Column Layout regularly ever since. Yet, CSS Columns remains one of the most underused CSS layout tools. I wonder why that is?

Source: Revisiting CSS Multi-Column Layout | CSS-Tricks

Legendary Web Design figure Andy Clarke revisits an old CSS property he thinks should get a little love: multi-column layouts.

Transitioning Top-Layer Entries And The Display Property In CSS

We are getting spoiled with so many new features involving animations with CSS, from scroll-driven animations to view transitions, and plenty of things in between. But it’s not always the big features that make our everyday lives easier; sometimes, it’s those ease-of-life features that truly enhance our projects. In this article, Brecht De Ruyte puts two features on display: @starting-style and transition-behavior — two properties that are absolutely welcome additions to your everyday work with CSS animations.

Source: Transitioning Top-Layer Entries And The Display Property In CSS — Smashing Magazine

When CSS transitions and animations arrived there was much rejoicing as complicated effects that had required JavaScript and had significant performance impacts were now simple to implement in a performant way. But there were many edge cases, and gotchas, like animating to or from auto values, or display: none. For such cases we again needed to use JavaScript as a workaround. Now with additions to CSS, we no longer need such workarounds as Brecht De Ruyte explains here.

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