wsf-vii
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 / A video of a chimpanzee browsing a photo social media platform 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 / 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