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
order, by Tobias Ahlin
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
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)
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 —
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
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:
<span style="background-color: var(--dummy-var, #f0f0f0)">Hello</span>
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
culori = require('http://127.0.0.1:8000/build/culori.umd.js');
In Firefox, using
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.
Don’t be afraid to start over. This time you’re not starting from scratch, you’re starting from experience. — Biggs Burke