useDimensions – a React Hook to measure DOM nodes

import React from 'react' import useDimensions from 'react-use-dimensions' const MeasuredNode = () => { const [ref, { x, y, width, height }] = useDimensions(); return ( <p ref={ref}> I am a paragraph at ({x}px, {y}px) position with a width of {width}px and height of {height}px </p> ); }; Handy. Uses window.resize+window.scroll internally, yet I’m quite …

Inuit Cartography: A Coastline Map Carved out of Driftwood

In Kalaallit Nunaat (Greenland), the Inuit people are known for carving portable maps out of driftwood to be used while navigating coastal waters. These pieces, which are small enough to be carried in a mitten, represent coastlines in a continuous line, up one side of the wood and down the other. The maps are compact, …

Exceptional Exceptions: Cleverly throwing Exceptions in PHP

TIL, from the Engagor Clarabridge Development Blog: When creating an \Exception in PHP (including your own extended classes), you can pass in a third argument named $previous. It defines the previous \Exception used for exception chaining, leaving you with better errors for debugging: try { $this->doSomeImportantStuffWith($foo); } catch (VeryDescriptiveException $e) { // do some stuff …

12 Tips for More Accessible React Apps

If you want to improve the accessibility of your React apps but you don’t know how or where to start, this talk is just what you need. Manuel shares 12 tips that will help you build web sites and applications that can be used by anyone. Each tip fits on one slide and you’ll be …

How to Steal a Tesla and What You Should Do to Protect Yourself

It’s possible to unlock and start a Tesla using only using a driver’s App username and password (without the need of a key nor the pincode to unlock the onboard dashboard!) Let this be a reminder to never trust free Wifi; especially not Wifi that requires you to “log in” (*). Also: Services like these …

CSS masonry with flexbox, :nth-child(), and order

Tobias Ahlin: On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order. Flexbox …

Train of SpaceX‘s Starlink Satellites captured as they fly over Holland

Yesterday SpaceX deployed the first batch of satellites for “Starlink”, its ambitious internet-from-space program. In total 60 of the 12000 planned satellites got deployed. Holland based Dr. Marco Langbroek captured the train of satellites as they passed over Leiden, the Netherlands, about 22.5 hours after launch. Over the coming days the “train” of objects will …