Frontend Engineering

This section is a curated, in-depth reference for frontend engineering. Each article goes beyond surface-level explanations — the goal is to understand why things work the way they do, not just how to copy a pattern.

Topics are organized into 14 categories in a deliberate order — from the JavaScript engine at the foundation, through the rendering pipeline and component layer, out to delivery and architecture. Reading front-to-back is a complete walkthrough. Use the sidebar to jump to any topic.

---

JavaScript Runtime & Async

Covers the JavaScript engine and async execution model that everything else builds on.

Topics include: the event loop (macrotasks vs microtasks), task starvation and scheduler priorities, promise combinators and error propagation, async/await and error handling, AbortController and streaming fetch, concurrency vs parallelism, and Web Workers vs Service Workers.

---

Rendering & Browser Pipeline

Covers how browsers turn HTML, CSS, and JavaScript into pixels — and how React's rendering model maps onto that pipeline.

Topics include: the critical rendering path, render-blocking resources, paint vs composite vs layout, browser compositing layers, hydration, hydration strategies, streaming SSR, SSR vs SSG vs ISR, the RSC rendering model, concurrent rendering, fiber architecture, the reconciliation algorithm, render waterfalls, the View Transitions API, image and font optimization, and React 19 and the React Compiler.

---

CSS & Layout

Covers CSS at the systems level — not syntax, but architecture and performance.

Topics include: CSS architecture trade-offs, CSS containment, container queries, layout thrashing, animation performance, theming and design tokens, responsive design strategies, and scroll-driven animations.

---

Component & UI Architecture

Covers how to structure the UI layer at a component and system level.

Topics include: React Server Components, Suspense boundaries, error boundaries, compound components, the headless UI pattern, and portal and layering architecture.

---

State Management & Data Patterns

Covers how state flows through an application — including the edge cases that cause subtle bugs.

Topics include: derived state vs redundant state, immutable data patterns, memoization pitfalls, state boundaries, URL as state, data fetching patterns, race conditions in UI state, optimistic UI and rollback strategy, idempotent UI actions, and offline conflict resolution.

---

Bundling & Code Delivery

Covers how code gets from your editor to the browser — and how to make that process faster and leaner.

Topics include: tree shaking internals, code splitting strategies, bundle analysis and dependency auditing, preload / prefetch / preconnect / priority hints, and monorepo tooling.

---

Caching & Storage

Covers caching at every layer — HTTP, CDN, service worker, and client-side storage.

Topics include: HTTP caching strategies, cache invalidation strategies, CDN cache purging, service worker lifecycle traps, and IndexedDB.

---

Networking & Protocols

Covers the network layer between your frontend and the server.

Topics include: HTTP/3 and QUIC, CORS and preflight, SameSite cookie modes, authentication flows, API paradigms (REST, GraphQL, tRPC), WebSockets vs SSE vs long polling, client-side rate limiting, and the Navigation API.

---

Security

Covers the attack vectors and mitigations most relevant to frontend engineers.

Topics include: CSRF vs XSS mitigation, Content Security Policy, Trusted Types, secrets management, prototype pollution, and dependency and supply chain risks.

---

Performance & Core Web Vitals

Covers measurable, user-impacting performance — from individual metrics to browser observation APIs and CI enforcement.

Topics include: Largest Contentful Paint, Cumulative Layout Shift, Interaction to Next Paint, third-party script management, RUM vs synthetic monitoring, performance budgets, Lighthouse CI integration, IntersectionObserver internals, MutationObserver cost, the PerformanceObserver API, the Long Tasks API, and the Speculation Rules API.

---

Memory & Garbage Collection

Covers how the browser allocates and reclaims memory — and how to find and fix leaks.

Topics include: garbage collection timing, browser memory leak detection, detached DOM nodes, and memory profiling with Chrome DevTools.

---

Accessibility

Covers building UIs that work for all users — including the underlying browser and AT mechanics.

Topics include: the accessibility tree, ARIA live regions internals, focus management in SPAs, keyboard navigation patterns, and color contrast and reduced motion.

---

DevX & Delivery

Covers the engineering systems around shipping software reliably and safely.

Topics include: CI/CD pipelines for frontend, feature flags and progressive rollouts, error tracking and observability, design system ownership and versioning, and internationalization (i18n) architecture.

---

Architecture & Decision Making

Covers the higher-order thinking required to make durable technical decisions.

Topics include: framework selection criteria, API contract design, Architecture Decision Records (ADRs), and technical debt identification and prioritization.

---