All Guides
Ethernet Frames
Interactive guide to the ethernet frame, field by field: preamble, MAC addresses, EtherType, payload, and FCS.
Markdown Reference
Comprehensive reference for CommonMark, GitHub Flavored Markdown (GFM), and Obsidian callouts with examples for all features.
CSS white-space, word-break and overflow-wrap explained
How CSS white-space, word-break, and overflow-wrap work, and which one to reach for when text wraps badly or overflows its container.
How to Vertically Center Text in CSS Properly
Why text doesn't center properly in buttons and badges. Learn about leading space, font metrics, and how to fix it with text-box-trim and margin-block.
Base Encoding Guide
A comprehensive guide to base encoding formats including Base64, Base32, Base58, and their use cases.
How UUIDs work
UUID format, versions v1 through v8, and their trade-offs. When to pick v4, v7, or v5.
Font Optimization for the Web
Strategies to load fonts as fast as possible, for fun and for profit
Data Serialization Formats
Exploring Protobuf, Cap'n Proto, FlatBuffers, Avro, and Thrift.
Parts of a URL
WHATWG vs RFC 3986 vocabulary, the structure of a URL, and why one component has two specs that disagree on its boundaries.
Useful TypeScript Patterns
Type theory names are hard to remember, but some of them are very useful in practice. These are some types I've found useful in everyday TypeScript coding.
How Unicode works
How Unicode encodes text. Code points, graphemes, UTF-8 vs UTF-16 vs UTF-32, surrogates, normalization, and string length.
The many ways to deal with overflowing text
An interactive guide demonstrating techniques for handling long words and overflowing text, including truncation with ellipsis, line clamping, wrapping, breaking, hyphenating, and more.
How to get sticky elements to stick
Learn why your position: sticky element is not working, and the three techniques to use to make it work.
Writing a JavaScript Codemod with JSCodeShift
Learn how jscodeshift transforms code by writing a small codemod that strips React.memo from functional components.
How a pretty printer works
Understand how a pretty printer works and how we can write a very basic one to help us automate code formatting.
An interactive guide to Flexbox
An interactive flexbox guide and playground to visualize and experiment with various flexbox css properties.
How to deal with time
A comprehensive guide on how to work with local time, instants, dates and timestamps. Understand how time, time zones and offsets work to avoid bugs and mistakes when writing software.
React Hooks constraints explained
An explanation of why React hooks have limitations, such as why you cannot call them in an if-else statement.