CSS Grid Layout Module Level 2: Masonry Layout

A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal. 🤔 Masonry Layout? Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it […]

Using React’s Key Attribute to remount a Component

Nik Graf details a little trick I also use from time to time: changing the key of a React component to force remount it. Upon clicking a contact in the list, the active contact’s id is used as the key for the Detail component. <Detail key={activeContact.id} contact={activeContact} /> Using React’s Key Attribute to remount a […]

JavaScript’s Syntactic Quirks

Jason Orendorff looked into the JS spec, in detail … JavaScript is rather hard to parse. Here is an in-depth accounting of its syntactic quirks, with an eye toward actually implementing a parser from scratch. One quirk most JS devs have will have certainly heard of is Automatic Semicolon Insertion (ASI). JavaScript’s Syntactic Quirks →

Responsive Images the Simple Way

The logic behind displaying an image responsively is complicated. It involves determining how large the image will be displayed, as well as understanding whether the user is on a high-resolution display, among other things. Thankfully, the browser is better equipped than we are to handle this logic. All we need to do is give it […]

The 8-bit Arcade Font, Deconstructed

In his book Arcade Game Typography designer Toshi Omagari breaks down the evolution, design, and history of arcade game fonts. In this video from the Vox by Design series he’s interviewed and asked about his favorite 8-bit fonts. Video game designers of the ’70s, ’80s, and ’90s faced color and resolution limitations that stimulated incredible […]