By Adobe: React Spectrum includes three libraries: React Spectrum — A React implementation of Spectrum, Adobe’s design system. React Aria — A library of React Hooks that provides accessible UI primitives for your design system. React Stately — A library of React Hooks that provides cross-platform state management and core logic for your design system. […]
Tag Archives: link
How Records & Tuples will improve React
Covered here before are Records and Tuples, two Immutable Datastructures most likely coming to JavaScript. Sebastien Lorber takes a look at how these will improve React. A whole category of React bugs are related to unstable object identities: Performance: can trigger re-renders that could be avoided Behavior: can trigger useless effect re-executions, and lead to […]
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); […]
Custom Elements Locator – Chrome extension to find custom elements on a page
This extension will find any custom element on a page. Custom Elements Locator →
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 […]
SPACEX – ISS Docking Simulator
This simulator will familiarize you with the controls of the actual interface used by NASA Astronauts to manually pilot the SpaceX Dragon 2 vehicle to the International Space Station. Successful docking is achieved when all green numbers in the center of the interface are below 0.2. Movement in space is slow and requires patience & […]
Chrome DevTools Pong – A game to play inside the Chrome DevTools
Move over Chrome Dino Game! Now you can play Pong inside the Chrome DevTools. Chrome DevTools Pong → Spoiler: How it works In case you were wondering: it’s a regular Pong game, but with the elements visually hidden (opacity: 0;) so that they only show up in the DevTools’ Layers Panel. So simple, that becomes […]