Frontend
# Front-end engineering: UI architecture, design systems, component patterns, atomic design.
❯ cat documents/
-
Atomic design
Concept
2026-08-08
Brad Frost's methodology for composing UIs from a hierarchy — atoms, molecules, organisms, templates, pages.
-
Design systems
Concept
2026-08-08
The shared language of product UI — design tokens, component libraries, documentation, and the governance that keeps them alive.
-
Browser internals
Concept
2026-08-08
What happens between URL and pixels — parsing, the rendering pipeline, the event loop, and the process/security model.
-
Web performance
Concept
2026-08-08
Core Web Vitals and the loading/runtime budgets behind them — measuring real users, then fixing what the metrics actually point at.
-
TypeScript deep dive
Concept
2026-08-08
The type system as a design tool — structural typing, narrowing, generics, the strictness dials, and types that make invalid states unrepresentable.
-
Accessibility
Concept
2026-08-08
Building interfaces that work for everyone — semantic HTML first, ARIA as the escape hatch, keyboard and focus discipline, and testing that catches what tools miss.
-
Component architecture & state management
Concept
2026-08-08
How UI code stays sane as it grows — one-way data flow, composition patterns, and the discipline of putting each piece of state where it belongs.
-
Rendering strategies & meta-frameworks
Concept
2026-08-08
Where HTML gets made — CSR, SSR, SSG, streaming, islands, RSC — the cost model of each, and the meta-frameworks that package the trade-offs.
-
CSS architecture & layout
Concept
2026-08-08
CSS as an engineering discipline — the cascade tamed with layers and tokens, layout owned via flexbox and grid, and the methodology debates settled by trade-off.
-
Frontend testing
Concept
2026-08-08
Testing UIs without testing the framework — behavior-first component tests, network mocking at the boundary, E2E for the money paths, and visual regression for the rest.
-
Hexagonal architecture reference implementation — Frontend (web components)
Concept
2026-08-09
The house hexagonal reference realized for the browser — an npm workspace of per-context module packages, custom elements as the driving adapters, every browser API behind a driven port, the WCCG Context protocol wiring ports from each app shell's assembly point, and an import map deduplicating element-defining packages across micro-frontend bundles.
❯ tree collections/
-
The TypeScript build ecosystem/
5 items
The layered TypeScript toolchain — runtimes, package managers, compilers, bundlers — across the frontend and backend worlds, and the artifact formats they produce.
-
Exercises/
6 items
Practice material: katas, challenges, build projects.