wsf-viii

Published May 9, 2019

Web platform. Firefox to Enable Hyperlink Ping Tracking By Default, and a TIL for me that the ping attribute exists and it's enabled already in the other browsers / Making Future Interfaces: ES Modules (video) by Heydon Pickering is extremely funny / CSS Masonry with flexbox, :nth-child(), and order, by Tobias Ahlin

Creative coding. Tinkersynth by Josh Comeau is now open source / I've just seen the movie Arrival (2016) and apparently Stephen Wolfram did some work for it / Pts., a JavaScript creative coding library / Sam Saccone has written a JS driver for thermal printers, Susie Lu has done some receipt dataviz with it

React / Web Components. web.dev's publishing guides for performant React apps / Intro to React hooks (video) by Kathryn Middleton / interweave, a React library to safely render HTML without dangerouslySetInnerHTML / phtml: transform HTML with JavaScript (why)

UX / Accessibility. Read Erin Kissane's classic book, The Elements of Content Strategy, online / Local-first software (You own your data, in spite of the cloud), latest essay by the always excellent Ink & Switch / Flotato / WPCampus have requested an accessibility audit for Gutenberg (WordPress's new post editor); the results are in, and Rachel Cherry has gone through all of it and posted nuggets in a Twitter megathread / Microsoft's Guidelines for Human-AI Interaction / GOV.UK's Service Manual / The Firefox experiments I would have liked to try by Ian Bicking

Explorables. Unraveling the JPEG by Omar Shehata, from the first issue of Parametric Press / Immersive Math by Jacob Ström, Kalle Åström, and Tomas Akenine-Möller

Keeping up. Instant serverless APIs, powered by SQLite (slides) by Simon Willison, with some references in the thread

Knowledge work. Making Sense of Complexity: Using SenseMaker as a Research Tool (paper) / The Web Project Guide, From Spark to Launch and Beyond

Work(life). Impostor Syndrome and Burnout, some reflections by Elizabeth Churchill / The Selfish Programmer, video + transcript by Justin Searls / I asked Lobste.rs: (paraphrasing) What are some software project ideas that have been low-key bugging you for a while, and despite usable variants of the idea already out there, you're compelled to write your own?. It got lots of fun answers.

Huh. Highly composite numbers are eminently splittable (via Michael Fogleman)

TIL

Computed styles in the clipboard

I was abruptly reminded that when you copy some text from a web page, WebKit-based browsers (Chrome, Safari) will adorn the text/html entry in the clipboard with several inline styles — font-size, font-family, color, background-color, and many more — that it computes by looking at the element and its ancestors in the DOM.

My colleagues and I are working rich text editing capabilities based on contenteditable and when the user pastes some content, you usually want to strip out the extraneous styles. Nobody wants to use a text they copied from a "dark mode" website as-is, right?

But now we wanted to add support for coloring and highlighting portions of the text in the RTE editor, and realized that as the user copies and pastes text around, we can't discern whether the values for color and background-color are something our editor has set (matching the author's intention) or whether it was picked up from some ancestor in the DOM (and should therefore be discarded).

After many attempts at somehow marking up the <span>s so that we know we had set the color, and failing due to the browser's style computation process wherein all CSS colors are serialized to their rgba() equivalent, we found a variant that seems promising:

<div contenteditable>
	<span style="background-color: var(--dummy-var, #f0f0f0)">Hello</span>
	World
</div>

Using an inexistent CSS variable with a fallback value we prevent Chrome/Safari from computing a rgba() equivalent of the color and we can definitely tell that it was us who put it there. More details in this Chromium issue.

P.S.: You can use clipboard-inspector to peek into your clipboard.

Loading local files in Observable

As I'm adding features to culori, Observable is the perfect place to test them visually before I push a new version to npm. I wondered whether you could load a local version of the library into a notebook, so I don't have to publish pre-releases to npm (which, to this day, I'm not 100% sure how to do), and it turns out you can!

You just start up a local server (the quickest is to run python -m SimpleHTTPServer in your project directory), and then in the notebook load the library from 127.0.0.1:

culori = require('http://127.0.0.1:8000/build/culori.umd.js');

In Firefox, using localhost instead of 127.0.0.1 won't work.

Mike Bostock points out that you can also use <input type='file'> in the notebook to load local files.

Claude Shannon was born 103 years ago. Here are 103 of his quotes compiled by Jimmy Soni, one of the authors of Shannon's biography A Mind at Play.

Parting thought

Don’t be afraid to start over. This time you’re not starting from scratch, you’re starting from experience. — Biggs Burke