Year round learning for product, design and engineering professionals

Some reading for the week of May 20, 2024

This week, with Code coming up next month in Melbourne,  June 20 and 21 (Early Bird pricing ends soon), a roundup of recent development focussed reading. Plus a bonus video or two from recent conferences–read on! 

State of HTML 2023

While JavaScript was taking over the web, and CSS was gaining new superpowers year over year, it could seem like HTML was content to stay dormant, happy to cede center stage to its younger siblings. After all once you’ve learned about s and s 1 through 6, what else is there to know?

Quite a lot, as it turns out! Once again we drafted Lea Verou to put her in-depth knowledge of the web platform to work, and help us craft a survey that ended up reaching far beyond pure HTML to cover accessibility, web components, and much more.

SourceState of HTML 2023

The state of HTML is a sibling of the State of CSS and State of JavaScript surveys. The most recent results just dropped, and here Lea Verou wraps up the findings–how do developers use HTML? What do they know about it? and what new do they want from it?
And, we have State of CSS author Hui Jing Chen talking about the as yet unreleased results of the State of CSS 2023 report at Code.

Compute Pressure API

Fast and delightful web applications should balance workloads when the system’s computing resources are used at (near) full capacity. The Compute Pressure API’s goal is to prevent, rather than mitigate, bad user experience in the web app itself and also for the user’s device to not become too hot, too loud, or to drain the battery at an unacceptable rate.

SourceCompute Pressure API – Web APIs | MDN

At Code last year Kenneth Rohde Christiansen talked abut emerging features in the Web Platform, including the Compute Pressure API. Learn more about it now at MDN.

Bonus

Watch Kenneth’s Code 2023 Keynote on Conffab (no signup or signin required!)

The Times You Need A Custom @property Instead Of A CSS Variable

Custom properties and CSS variables are often used interchangeably when describing placeholder values in CSS despite the fact that they are different but related concepts. Preethi Sam walks through an example that demonstrates where custom properties are more suitable than variables while showcasing the greater freedom and flexibility that custom properties provide for designing complex, refined animations.

SourceThe Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine

CSS variables have become increasingly widely used in recent years, but the related CSS Properties while in some ways very similar provide more capabilities as Preethi Sam describes here.

Want a quick refresh on CSS Variables? We first covered them way back in 2014!

Using CSS Scroll-Driven Animations for Section-Based Scroll Progress Indicators

[Scroll-Driven Animations] allow you to control animations based on the scroll progress of any particular element (often the whole document), or, a particular element’s visibility progress within the document

SourceUsing CSS Scroll-Driven Animations for Section-Based Scroll Progress Indicators – Frontend Masters Boost

A new feature in CSS that sounds rather anodyne, but enables a lot of animation that previously required JavaScript–Preethi Sam (author of the previous article as well) goes into detail about them here. 

Why use Web Components over traditional DOM manipulation?

If you’ve been following my articles on HTML Web Components, you may have come away thinking…This looks a lot like traditional DOM manipulation. And you’d be right!

Web Components basically do exactly the same thing you can do with HTML and vanilla JS already. So why would you even bother using Web Components?

SourceWhy use Web Components over traditional DOM manipulation? | Go Make Things

Chris Ferdinandi has a series on Web Components, and here considers how they compare with traditional DOM manipulation.

Bonus

We’ve already declared 2024 to be the year of Linux on the Desktop Web Components, and you won’t want to miss Keith Cirkle from Github at Code talking about their experience with them–but why not check out this talk from Ben Taylor at Web Directions Summit late last year that is a great introduction and demystifier. Again no signup or signin required.     

BASIC turns 60: Why simplicity was this programming language’s blessing and its curse

Since the 1960s, BASIC has introduced countless beginners to computer programming. Here’s how the language got started, the paths it cleared for Windows and Apple, and where you can still find it today.

SourceBASIC turns 60: Why simplicity was this programming language’s blessing and its curse 

Like many of, let’s just say, a certain vintage, I first learned to program (after a fashion) using BASIC, on Australia’s knock-off version of the legendary TRS-80, the Dick Smith 80 (for younger and non Australian readers Dick Smith was the founder of a chain of electronics stores in the late 1970s or early 1980s).

BASIC ingrained some bad habits that needed undoing when I learned Pascal a few years later at University–GOTO is harmful apparently, line numbers as entry points to what you could think of as functions.

“Serious” programmers always disparaged BASIC in all its forms (BASIC probably thanks CSS for taking some of the heat later in life)–eh gatekeepers gotta gatekeep.But I have found memories and am grateful for that gateway to the rest of my life. Thanks BASIC!

delivering year round learning for front end and full stack professionals

Learn more about us

I have yet to have an end-to-end conference experience that was as professional as what was provided by Web Directions

Joe Toscano Founder, designgood.tech