wsf-xxvii
News
CSS Nesting Module, which introduces the ability to nest one style rule inside another, has been published as a Working Draft. The syntax is a good fit for hred to make nested queries shorter as a replacement for :scope.
Pre-recorded talks & slides are up for the W3C Workshop on Wide Color Gamut and HDR for the Web, and a live Questions & Answers session is due for September 13.
Relatedly, the Eyedropper API is available in Chrome 95 (Canary). It uses a Promise to communicate its outcome:
let eyedropper = new EyeDropper();
button.addEventListener('click', () => {
eyedropper
.open()
.then(result => console.log(result.sRGBHex))
.catch(err => console.log('No selection'));
});...although some choices are still being debated. For now, the result only includes the hex code for the color (under the hyper-specific sRGBHex property), but it's expected to make use of the Color API when that's ready.
GitHub CLI 2.0 was released, with added support for extensions, opens up a lot of fun possibilities.
Things to read & watch
Moiré no more by Marcin Wichary, on using a FFT (Fast Fourier transform) to remove patterns from images. Incredible stuff.
Why are hyperlinks blue? by Elise Blanchard. I love a good trip down memory la— eh, who am I kidding, I got my first computer in the early 2000s (team Windows Me). Interesting nonetheless.
Tech brief: JSON Pointer by Tom MacWright about the new-to-me RFC 6901 specification.
Software Crisis 2.0 by Baldur Bjarnason, An essay on our industry's core expertise: failed software projects
.
On Variance and Extensibility by Steven Wittens. Making code reusable is not an art, it's a job
.
What they don’t tell you when you translate your app by Eric Bailey. Forget inverting binary trees, translating or localizing a digital experience is one of the most difficult things you can do with software.
Fixing and/or making browsers
Improving CSS Grid compatibility with GridNG, a rewrite of the CSS Grid module in Chromium-based browsers that fixes some long-standing bugs.
Still on the topic of NewGeneration things, Key data structures and their roles in RenderingNG.
Finally, Web Browser Engineering is a work-in-progress book by Pavel Panchekha & Chris Harrelson. Web browsers are ubiquitous, but how do they work? This book explains, building a basic but complete web browser, from networking to JavaScript, in a thousand lines of Python.
Don't miss the bibliography for more reads.
Filtered for @keyframes
Josh W. Comeau has published An Interactive Guide to CSS Keyframe Animations.
An ingenious use for animations is for interpolating font sizes (or other CSS properties, for that matter). It's the insight that powers Typetura, for example: use the animation-delay property as a knob to scrub through a paused animation.
It would be great to have this technique work in CSS alone, but currently the animation-delay property only accepts a <time> and CSS lacks a function to strip units off lenghts, and so it seems impossible to calc() a delay based on the viewport's dimensions due to incompatible units.
(What we do have is other CSS functions that will make fluid typography easier to think about once they're uniformly supported.)
New books
On the desk: A Biography of the Pixel by Alvy Ray Smith (Pixar co-founder). I started in the middle with the section on splines, but the whole book seems super interesting. Also promising: Kill it with fire, on dealing with legacy code, by Marianne Bellotti.
Everything I Know about Life I Learned from Powerpoint by Russell Davies is available for pre-order.
A few tweaks
I've made a few tweaks to the format of these w/s/f posts to make them less appalling to screen reader users. Out with the slashes, in with the paragraphs & headings.
Instead of the ° (degrees) character, which gets read out loud by assistive technology, external links are now adorned with a contentless circle. (Excuse the pixel units, but ems still don't get rendered reliably.)
.post a[href^='http']::after {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
box-sizing: border-box;
border: 0.1em solid;
display: inline-block;
vertical-align: super;
margin-inline: 0.15em;
}A little weekend project I'd toy with is to try & see what kinds of simple shapes you can produce with just one CSS pseudo-element (surely this has been done a thousand times before). Multiple overlapping gradients feel like cheating but take you pretty far.