← Back to WatchStarFork

wsf-xxxiii

Published Jan 1, 2022

News

CSS Snapshot 2021 has been released. It collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2021.

Safari has been maintaining its newfound momentum with the release of Safari 15.2, which supports wide gamut color on <canvas>. While Chromium 94+ browsers have the display-p3 color space available, Safari 15.2 also adds the rec2020 color space in the mix. And since Safari can handle CSS Level 4 colors such as color(rec2020 1 1 0), it's much easier to draw on a wide-gamut canvas. See the full Safari 15.2 release notes.

More exciting things are lined up in Safari TP 137:

• the :has() pseudo-class, informally but sort of inaccurately known as the parent selector, has been enabled by default.
• new color spaces have been added: color(srgb-linear), color(xyz-d50), color(xyz-d65), oklab() and oklch().
• one of the two Safari bugs that complicated my recommendations for media queries units has been fixed: rem in media queries are now calculated using font-size: initial, not the html element font-size.

Articles

Interaction Design, Accessibility

An interactive version of Doug Engelbart's 1968 demo by Christina Engelbart and Bret Victor.

Under-Engineered Dependency Questions by Adrian Roselli. A common interface pattern allows users to choose one item from a pre-defined set of choices, while still allowing them to add a custom selection if nothing else fits. Often these are radio buttons with one choice labeled “Other” that makes another field visible.

Component libraries, accessibility and transparency, Bruce Lawson on evaluating component libraries' accessibility claims.

Building a toast component by Adam Argyle. Toasts are non-interactive, passive, and asynchronous short messages for users. Generally they are used as an interface feedback pattern for informing the user about the results of an action.

Bramus's answer to the question of one thing that people can do to make their website better is to Embrace the Platform.

CSS

Standardizing Focus Styles With CSS Custom Properties by Stephanie Eckles. We’re going to look at a technique to make your focus styles more manageable across your project by using CSS custom properties and learn about a modern CSS focus selector.

Two talks by Rachel Andrew: CSS Layout from the inside out at State of the Browser and The fundamentals of CSS layout at the Chrome Dev Summit.

Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or a weird behavior. Defensive CSS by Ahmad Shadeed is a collection of snippets to mitigate that.

Breaking Out of the Box by Patrick Brosset. CSS is about styling boxes. In fact, the whole web is made of boxes, from the browser viewport to elements on a page. But every once in a while a new feature comes along that makes us rethink our design approach.

Performance

Introducing fuite: a tool for finding memory leaks in web apps by Nolan Lawson. It's a CLI tool built on top of Puppeteer that lets you run scenarios against a SPA, such as clicking on internal links then hitting the back button, and reports back any suspicious growth in memory usage.

In Debug memory leaks with the Microsoft Edge Detached Elements tool, Patrick Brosset demonstrates the main features of the Dev Tools panel available in Edge 97.

A Unified Theory of Web Performance by Alex Russell:

And so we have the three parts of a uniform mission or theory of web performance:

1. The mission of web performance is to expand access to information and services on the web.
2. We do this by reducing latency and variance across all interactions in a user’s session to return the system to an interactive state more reliably.
3. To accomplish this, we work to improve the tail of the distribution because that is how we make systems accessible, reliable, and equitable.

Languages, algorithms, data structures

Rust for JavaScript peeps, a chill guide by Yoshua Wuyts.

The data model behind Notion's flexibility by Jake Teton-Landis: it's blocks all the way down.

Regarding statecharts: Florens Verschelde walks us through Learning XState by refactoring an old project. Using XState and React, Andy Jakubowski has built a replica of the Citizen Quartz Multi Alarm III watch, based on David Harel's 1987 paper that introduced statecharts.

Reimagining projections for the interactive maps era, Vladimir Agafonkin on the complexities of making adaptive projections, a novel way to make interactive maps more accurate on a global scale, without any compromises to user experience, rendering quality or street-level precision.

Making software

Towards a research community for better thinking tools, a loosely structured collection of different building blocks from which I think we can build a good research community to push this space forward by Linus.

Making Colophon Cards: Baldur Bjarnason has been documenting the process, the design, development, research, marketing, discussion with my advisers, and other details of his specific take on the note-oriented personal information manager.

A hundred things I learned working on the React team, a Twitter mega-thread by Dan Abramov.

Graphics

In Coloring With Code — A Programmatic Approach To Design, George Francis shows you how to use culori to create beautiful, inspiring, and unique color palettes/combinations, all from the comfort of your favorite text editor!

I've been a big fan of Marc Edward's vector icon speedruns but I couldn't always tell what's going on. Camera iris icon speedrun aims to be a director’s commentary for my camera iris icon speedrun, noting the techniques used, and why they were chosen.

Rounding polygon corners, an interactive notebook by Mathieu Jouhet.

Books & Resources

The second edition of the Data Science at the Command Line book has just been released.

Patterns.dev, a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React by Lydia Hallie and Addy Osmani.

Designing Design Tools, Nolwenn Maudet's dissertation investigating the questions: How do designers work with design software? And how can we design novel design tools that better support designer practices? (via Raghav Agrawal).

Now Open: the Typographica Library, a digital bookshelf of type and lettering resources to aid research and selection.

Google Fonts Knowledge, a library of original guides to the world of typography, which the Google Fonts team is producing in collaboration with typographic experts from around the world.

Tools

Open Props, a CSS system based on custom properties by Adam Argyle.

SolidJS, simple and performant reactivity for building user interfaces.

floating-ui, a powerful toolkit to position floating elements while intelligently keeping them in view.

Serve folder for web development: This page lets you host a local folder with web development files, such as HTML, JavaScript and CSS, directly in your browser. It works using Service Workers: everything is served from your local system only, nothing is uploaded to a server, and your files are not shared with anybody else.

A browser game. Wordle: guess the hidden word in six tries. There's a single puzzle each day, so no binge risk.