Unraveling the JPEG

“Unraveling the JPEG” is a great deep dive into the JPEG image format. This article is about how to decode a JPEG image. In other words, it’s about what it takes to convert the compressed data stored on your computer to the image that appears on the screen. It’s worth learning about not just because …

SwiftUI

Yesterday, apart from revealing a $999 monitor stand, Apple announced SwiftUI which got me quite excited. SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. With a declarative Swift …

Including content from other files in your HTML (“HTML Includes”)

Nice find by Scott Jehl from Filament Group: Instead of fetching files over XHR and then injecting their contents, you can also use an iframe + leverage its onload event to include the contents of any other file directly into the current web page. <iframe src="signal.svg" onload="this.before((this.contentDocument.body || this.contentDocument).children[0]);this.remove()" ></iframe> The example above loads up …

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 …

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 …

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 …