Bookmarks

Introduction to the basics of web typography

Technique for laying out several elements that need to switch between horizontal/side-by-side layout to vertical/above-each-other layout at a certain "breakpoint" but without media queries. Also they won't collapse so that one element is larger than the others.

Quick but comprehensive comparison of making SVGs accessible

Interesting post from Nolan Lawson about making sure you include JS execution time, CSS formatting and CSS layout steps when measuring performance. Tl;dr: wrap a setTimeout inside a requestAnimationFrame.

Good post on the semantics of buttons vs links in HTML

Really interesting post about using "use case maps", mostly about automatic creation of them. But I'm most interested in the concept itself. The tldr is that they're architecture diagrams (showing the different parts of a system), marked up with arrows showing how the user flows through the system in an individual use-case.

React v15 documentation, Since the v16 docs were launched previous versions were inaccessible online. This site archives the v15 docs

Useful site that uses AI to remove backgrounds from images (and replace with them transparency). Potentially useful for web design

Really great primer on the aria-live attribute, with some examples of how to use it

Good mental model for how React hooks are internally implemented

Interesting collection of "technical-looking" line drawings of every day objects

Useful tool for determining the install size of npm dependencies

Nice san serif font

Interesting definition of an architect role at Khan Academy. tl;dr: "an architect acts as a sort of product manager for the system in which software is built. This “system” consists of the coding standards, tools, platforms, and even processes used by the engineers on the team to build features for their users. Architects look for ways in which the system can better serve the engineers."

Buffer's take on a Career ladder (explicitly not a ladder). Uses a "sphere of influence idea" to gauge level, instead of a checklist of skiils

Quick & helpful guide for installing npm without sudo

Very useful tool to preview/generate/edit the <meta> tags used by Twitter/Facebook/etc to show page previews

Calendar showing a bunch of exhibitions at London museums/galleries. Bit slow to load, but nice design

Tool from Chrome dev team to compress images - png, jpg, svg

Super useful tool to convert a raw SVG (say from Sketch) and convert it to JSX, and also running it through SVGO to optimise it.