Some weekend reading for front end developers
Ahead of the launch of the Web Directions Developer Summit program next week, we're rounding up some recent reading (and listening) on all things front end development.
Providing Type Definitions for CSS with @property
A cross-browser feature as of the release of Firefox 128 in July 2024 is a new at-rule – @property – which allows defining types as well as inheritance and an initial value for your custom properties.
We’ll learn when and why traditional fallback values can fail, and how @property features allow us to write safer, more resilient CSS custom property definitions.
I think we’ll be hearing a lot more about custom CSS properties and the @property rule, now they’re widely supported. This week I used them to develop the new animated gradient header for our Next conference (100% CSS, no JavaScript–I'll be writing up how I did that soon).
A Structured Approach to Custom Properties
If you’re anything like me, you’ve probably tried a handful of different approaches to organizing your custom properties. Most approaches I’ve used have been adequate, but I rarely feel completely satisfied with them. I spent far too long flailing about trying to find what worked. I should have looked sooner to the realm of design tokens. I think some common standards when building a design system are useful when applied directly to CSS custom properties.
At least at first when we use CSS custom properties were likely to use them relatively naively–as replacements for values in our CSS itself. But there are other, more powerful ways of thinking about CSS properties, like this from Keith J Grant.
Styling Tables the Modern CSS Way
Modern CSS makes styling HTML tables in a considered, responsive nature a breeze. Michelle Barker breaks it all down for you in this deep dive.
You may not find yourself styling tables every day of the week, but when you do, reach for this guide by Michelle Barker.
What ARIA still does not do
In 2014 I wrote an article What ARIA does not do
It stated:
ARIA is a set of attributes that can be added to HTML elements (and other markup languages) to communicate accessibility role, state, name and properties which are exposed by browsers via platform accessibility APIs. This provides a common, interoperable method of relaying the information to assistive technologies. That’s it. It is the same method used by browsers to convey the inbuilt (or default) accessibility information of native HTML features. The difference being that authors can wire up this information for themselves in the DOM using ARIA, before they could not.
10 years later, the message is unchanged.
Recommended by LinkedIn
Steve Faulkner looks back at something he wrote in 2014 on ARIA, and where we are today.
My web platform analysis of the State of JS 2023 results
Here’s my quick summary of the State of JS 2023 results. Let me get this out of the way first: in this blog post, I don’t care about frameworks, libraries, and build tools. I know, a large part of the State of JS series of surveys is about those, but I’m more interested in the web platform itself. So I’m going to focus on the questions that are about the web platform.
Patrick Brosset, of the Edge team gives his thoughts on the State of JS 2023 survey results particularly as they relate to the core Web platform.
Exploring Randomness In JavaScript
Ben Nadel compares the randomness of Math.random() to crypto.getRandomValues() in JavaScript.
Randomness is weird and for developers it can be hard. Here Ben Nadel explores randomness in JavaScript.
Are web components worth it?
In this episode, Jake and Surma chat about web components. Why they were invented, what they’re useful for, and how they would improve.
Want to catch up with Web Components, how we got here, and where we are going on your commute, while you clean the bathroom? Then the recent Off the Main Thread episode has you covered.
An update on invokers: Invoker commands in HTML
One thing I’ve learned over the last year is to deal with changes in explainers and specs and that naming things is hard. In this update on Invokers, I will cover the new syntax and the new name: Invoker Commands. Once again giving you some control over interaction with HTML from opening dialog elements to creating custom counter buttons and video controls.
Invokers, as first seen in the new HTML popover element are going to be a thing. A way of declaratively adding behaviour instead of using JavaScript, we highly recommend you pay attention to them.
More like this?
Each week we round up numerous articles and more we feel developers (and designers and other web folks) should be paying attention to at Conffab.