Chris’ Corner: Shifting

So many interesting little nuggets I’ve saved up for you this week! Let’s do it.

Jehl’s Law of Web Performance:

A website should load before you can say “cumulative layout shift”

lol I love that. Stoyan calculated it to be 1.722 seconds.

Speaking of layout shifts, did you know the ch unit in CSS might be a bit dangerous for screwing up your CLS score? From a Paul Hebert article about this:

The ch unit is equivalent to the width of the 0 character in the currently selected font.

So let’s say your letting FOUT happen because that ensures the first render of your website is as fast as possible. Well that’s good but you might see some layout shifting already. But then if you use the ch unit to size other things, that entire unit might change as soon as the font does load in. Yikes. See the demo.

There keeps being CSS advancements that make CSS preprocessors (like Sass, easily the most popular) less needed. Like the fact that Custom Properties are largely just better than $vars. Now there are more things dropping that make it even more unnecessary. Nesting is landing in all three browsers. Style Queries can do what @mixin does. The relative color syntax can do what the fancy color functions do. Even trigonomic functions are coming to CSS. Sass should be proud though, any good library should be honored to have the native languages adapt to what they did.

What’s left in Sass that we still need?

It sounds small but I super duper agree: single line comments, says Jim.

Have you heard of this WebGPU thing? Every time I hear about it, it is in big terms. Like Andi McClure’s post:

WebGPU is the new WebGL. That means it is the new way to draw 3D in web browsers. It is, in my opinion, very good actually. It is so good I think it will also replace Canvas and become the new way to draw 2D in web browsers. 

Fireship recently did a video 21 Awesome Web Features you’re not using yet and called it “easily the most important feature on this list”. Jeepers.

A funny moment from a few years back:

JSHint is a software tool designed to help developers write JavaScript code. Since its creation in 2011, it has been encumbered by a license which includes the following clause:

The Software shall be used for Good, not Evil.

That stipulation disqualifies JSHint from the distinction of “free” software and “open source” software.

Today, with a release 7 years in the making, we’re removing the clause.

A small change, but Mike Pennisi wrote four essays about the story and complications.

You know how fonts are made up of vector points right? I love the idea of adding a bit of randomization to where, exactly, those points fall. Turns out this is a not-very-new idea.

In its first incarnation Beowolf used to change its shapes in the printer, during printing, using raw PostScript. And that is how, so long ago, they observed Beowolf perform its randomisations on a Next machine. Another anecdote is about how the printing of a big national magazine got severely delayed after an article typeset in Beowolf took hours to output to film. Oh the mischief! These days such shenanigans are no longer allowed and we converted Beowolf into a well behaved but slightly overengineered OpenType font.

So if you buy the font now, it looks random, but it’s just one run through the ol’ random-machine. It would be the same for both of us if we both bought it. But, they offer to generate a special version just for you:

Suppose you want to own a unique piece of digital type history, for €1000 we will generate this family with a randomseed of your choice, once, for you. A bit like NFT, but then you get fonts and no bitcoin nonsense.

You should watch Jen’s WWDC video. So much new CSS stuff! Safari is leading the charge on some of it, but most of this stuff is pretty cross-browser cool or will be soon.