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.
The browser is a hostile runtime with a user attached.
Frontend security is not only backend territory. It lives in forms, tokens, third-party scripts, headers, cookies, dependencies, and every place user-controlled data meets the DOM.
Usable by keyboard, screen reader, pointer, and preference.
Accessibility is engineering discipline: semantic structure, focus management, states, contrast, motion, and testing. It makes the interface more robust for everyone.
Confidence is a stack, not a single test runner.
Healthy frontend testing covers pure logic, components, routes, browser flows, accessibility, visual states, and the contract between UI and data.
The UI is only as good as its loading, error, and empty states.
Data work is where frontend meets product reality: cache policy, retries, pagination, optimistic updates, auth, schemas, and the network behaviors users actually feel.
Not all state belongs in the same place.
Great apps separate local UI state, server state, URL state, global client state, and form state instead of forcing every problem through one store.
Consistency becomes infrastructure.
A design system turns visual decisions into tokens, primitives, patterns, documentation, governance, and accessibility guarantees that survive product growth.
The hardest common UI is also the most important.
Forms combine semantics, validation, errors, accessibility, async submission, browser autofill, security, and product copy into one deceptively small surface.
Discovery starts in the document head and ends in the content tree.
Modern SEO is technical quality, semantic HTML, indexable routes, metadata, structured data, social previews, performance, and content architecture.
Shipping is a frontend skill.
Preview deploys, rollbacks, environment variables, CDNs, edge functions, domains, redirects, and cache rules decide how the work reaches users.
Production is the only environment users believe.
Frontend teams need visibility into errors, source maps, real-user performance, analytics, logs, session behavior, and the difference between lab scores and field data.
Interfaces travel farther than your first language.
Internationalization covers translation, text expansion, plural rules, dates, numbers, currencies, RTL layouts, locale routing, and content that can change shape.
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.