useQueryParams – A React Hook for managing state in URL query parameters

Once you’ve set up a QueryParamProvider high up your component tree, you can start using useQueryParam to get (and set) querystring parameters import * as React from 'react'; import { useQueryParam, NumberParam, StringParam } from 'use-query-params'; const UseQueryParamExample = () => { // something like: ?x=123&foo=bar in the URL const [num, setNum] = useQueryParam('x', NumberParam); …

The UX of LEGO Interface Panels

George Cave takes a look at the UX of the LEGO Interface Panels These iconic, low-resolution designs are the perfect tool to learn the basics of physical interface design. Armed with 52 different bricks, let’s see what they can teach us about the design, layout and organisation of complex interfaces. The UX of LEGO Interface …

tinykeys – A tiny and modern library for keybindings

Small and lightweight, I like: import tinykeys from "tinykeys" tinykeys(window, { "Shift+D": () => { alert("The 'Shift' and 'd' keys were pressed at the same time") }, "y e e t": () => { alert("The keys 'y', 'e', 'e', and 't' were pressed in order") }, "$mod+KeyD": () => { alert("Either 'Control+d' or 'Meta+d' were …

Native Image Lazy-Loading: loading-attribute-eagle-polyfill

Today, Rick Viscomi noted that some sites have set eagle – instead of eager – as the value for Native Image Lazy-Loading: Native image lazy loading landed months ago in Chrome 76. You can set img[loading] to auto, lazy, or eager. According to @HTTPArchive, 34 websites are setting it to loading="eagle" 🤔 There's a Lord …

Checkboxland – Render anything as HTML checkboxes

Checkboxland is a JavaScript library for rendering anything as HTML checkboxes. You can use it to display animations, text, and arbitrary data. It also supports plugins, so you can build more powerful APIs on top of it. Heh. Can’t quite think of a reason when exactly to use this, but it’s fun nonetheless 😅 Checkboxland …

10 Modern Layouts in 1 Line of CSS

Already making rounds on Twitter last week, but now the video’s been released too: In this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a single line of code. Learn a few layout tricks you can implement …

New in Chrome 84

Chrome 84 has been released, which contains some nice additions. Pete LePage walks us through: Chrome 84 is rolling out now! Users can start common tasks within your app with App Icon Shortcuts. The Web Animations API adds support for a slew of previously unsupported features. Wake Lock, and the Content Indexing API graduate from …

Song Exploder Episode 187: Apparat – Goodbye

This episode from Song Exploder gives us a good insight in how Goodbye by Apparat came to be. The Netflix original series Dark debuted in December 2017. It’s a really mysterious, mind-bending German science fiction show with a unique tone. A big part of that tone is announced every episode with the music in the …