wsf-vii

Published Apr 30, 2019

Web platform. Chrome 74 comes with private class fields, the prefers-reduced-motion media query, CSS transition events

Usability / Accessibility. Scott O'Hara's gallery of accessible form controls / This video of a chimpanzee browsing Instagram has been shared a gazillion times (for good reason) / Ryan Florence is building accessible React components as Reach UI; freshly released, the Tooltip component

UI. Svelte 3 has been released / Are you managing state? Think twice. by Krasimir Tsonev / Facebook has 30,000 React components / Stretch is a flexbox layout engine implemented in Rust that works on the web, iOS, and Android

CMS. Content Management Meta-System by Dorian Taylor / Pollen by Matthew Butterick is a SSG written in Racket; its documentation is a pleasure to read

Task runners. Guppy by Josh Comeau / JSUI by Kitze / Glicky by Alex Saunders

Keeping up. Elixir, Phoenix, Absinthe, GraphQL, React, and Apollo: an absurdly deep dive by Zach Schneider, and a comically long string of technologies / WASM: Universal Application Runtime

Creative coding. shapeConverter converts Illustrator shapes (saved as Illustrator 8 files) into Processing code / Geometry Algorithms by Dan Sunday / Collisions by Samuel Hodge, collision detection for circles, polygons, and points

Knowledge work. WorldBrain/Memex is an open-source browser extension to full-text search your browsing history & bookmarks (!) / Writing a technical book for Manning by Barry Pollard

Today I Learned

Tagged template literals. Andy Bell shares this neat trick for enabling HTML syntax highlighting for plain strings:

const html = str => str;

// without the tag
`<div class='hello'>
	World
</div>`;

// with the tag
html`<div class="hello">World</div>`;

String.raw (last edition's TIL) also works nicely for this purpose, and allows interpolating values in the template:

const html = String.raw;

html`<div class=${className}>${text}</div>`;

Update: There are some differences between String.raw and having no tag, so use dummy-tag instead for the most consistent result.

Webpack performance. To find out which steps in a Webpack build process take most time, run your build with these flags:

webpack --profile --progress

You'll get a list of timings like the one below (which is abridged for brevity):

12527ms building modules
40ms hashing
491ms chunk assets processing
19280ms chunk asset optimization
3566ms after chunk asset optimization
215ms emitting

Soundtrack: Jay-Jay Johanson — Kings Cross