Understand modern
frontend development
A visual reference system for modern frontend engineering — frameworks, tooling, architecture, and the production systems that ship the modern web. Click anything to go deep.
From the network up. The full progression.
Frontend isn't a stack — it's a sequence of layers, each built on what came before. Click any layer to open the full entry. Visited layers are remembered.
The rendering pipeline, frame by frame.
Every pixel you see was once HTML, then DOM, then a layout tree, then painted pixels, then composited layers. Understanding this pipeline is the difference between writing CSS and writing fast CSS.
HTML, CSS, JavaScript — the immutable trio.
Frameworks come and go. These three never have. Every abstraction you'll ever use compiles down to them.
Different answers to the same question: how does UI update?
Every framework is a position on rendering, reactivity, and tradeoffs. None is universally best. All are right for something. Click a card for the full entry.
The whole ecosystem on one canvas.
Every library, framework, and tool — clustered by category, connected by usage patterns. Hover for a summary, click (or focus + Enter) any node to open the full entry.
The invisible 90%. Tools shape how teams ship.
Bundlers, package managers, linters, test runners, deploy pipelines. The dev experience is a product itself.
Structure is a feature.
The folder layout, the boundary between components and features, the discipline of the design system — these decide whether your team can still ship in year three.
Organize by what, not how
Group code by feature, not by file type. A "checkout" folder contains its component, its hooks, its tests, its types. Move one folder, move one feature.
Atoms, molecules, organisms
A discipline, not a rule. Components compose from primitive to complex. Stop one level too soon and you ship a button library — stop the right amount and you ship a system.
One repo, many surfaces
Turborepo, Nx, pnpm workspaces. Share types, design tokens, and config across web, mobile, and docs without publishing internal packages.
Tokens → primitives → patterns
Color, type, spacing as tokens. Buttons, inputs as primitives. Search, dialogs, navigation as patterns. The whole UI flows from this pyramid.
Speed is the most underrated UX.
Every millisecond costs conversion. Every kilobyte costs power. Performance is engineering you can measure — and ignore at your peril.
Six directions. One ecosystem.
Frontend has fragmented into specialties. Each track optimizes for a different intersection of design, engineering, and product.
Manipulate the platform directly.
Four working labs. Read about the event loop, sure — better to watch tasks drain in real time, then change them and see what breaks.
The UI primitives every app ends up shipping.
Modal, dropdown, tabs, command palette. Boring on the surface — full of edge cases underneath. Each pattern below is a small system.
The dev loop lives in the shell.
Every project starts and ends with commands. Pick one to see what it does and how it reshapes the filesystem in a frontend dev pipeline.
The editor is half the job.
The right extensions and shortcuts compound on themselves. Click a shortcut to watch it act on the editor preview.
Essential Extensions
Keyboard Shortcuts
Debugger Workflow
Code travels in stages.
From your working directory to a merged pull request — six states, each with its own representation. Step through, or auto-play the whole flow.
Two agents. One feedback loop.
Modern frontend work is increasingly orchestrated by coding agents. They specialize differently — and the win comes from how they hand off.
Where to go after the map.
Curated, opinionated, kept current. Read these and you'll stay ahead of the curve without drinking from the firehose.