Unpacked

88 frontend concepts, unpacked with diagrams. Inspired by this tweet. Also an excuse to test out wiretext.app.

Hydration & SSR

Hydration Partial Hydration Islands Architecture Streaming SSR Selective Hydration Server Components Edge Rendering Speculative Prerendering

React Internals

Concurrent Rendering Time Slicing Reconciliation Algorithm Fiber Architecture Virtual DOM Diffing Complexity

Data Patterns

Structural Sharing Immutable Data Patterns Referential Equality Memoization Pitfalls

JavaScript Runtime

Stale Closure Problem Event Loop (Macro vs Microtasks)Task Starvation Priority Inversion in Async Code

Rendering Pipeline

Layout Thrashing Critical Rendering Path Render Blocking Resources Browser Compositing Layers Paint vs Composite vs Layout GPU Acceleration in CSS CSS Containment Subpixel Rendering

Build & Bundling

Tree Shaking Internals Code Splitting Strategies Dynamic Import Chunking Module Federation

Web Platform

Shadow DOM Custom Elements Lifecycle Web Components Interoperability

Concurrency & Workers

Web Workers vs Service Workers SharedArrayBuffer Transferable Objects OffscreenCanvas WebAssembly Integration

Observers & DOM

IntersectionObserver Internals ResizeObserver Loop Limits MutationObserver Cost IndexedDB Detached DOM Nodes

Caching & Network

Service Worker Lifecycle Traps Cache Invalidation Strategies Stale-While-Revalidate ETag vs Cache-Control HTTP/3 and QUIC Priority Hints Preload vs Prefetch vs Preconnect

Security

CORS Preflight SameSite Cookie Modes CSRF vs XSS Mitigation Content Security Policy (CSP)Trusted Types DOM Clobbering Prototype Pollution

Concurrent UI

Race Conditions in UI State Tearing in Concurrent UI Scheduler Priorities Render Waterfalls Suspense Boundaries Deterministic Rendering Idempotent UI Actions

Architecture

Micro-Frontend Orchestration Finite State Modeling Event Sourcing in Frontend Optimistic UI Rollback Strategy

Real-time & Streams

Offline Conflict Resolution CRDT Basics for Collaboration WebRTC Backpressure in Streams API AbortController Streaming Fetch Response Handling

Performance

Browser Memory Leak Detection Garbage Collection Timing PerformanceObserver API Long Tasks API First Input Delay (FID)Interaction to Next Paint (INP)Cumulative Layout Shift (CLS)Largest Contentful Paint (LCP)

Accessibility

Accessibility Tree ARIA Live Regions Internals Pointer Events