Frontend Concepts — Deep Reference
100+ frontend concepts every frontend developer should be able to explain. Organized by category. Each concept includes what it is, how it works internally, code examples, and practical context.
Files
| # | File | Topics |
|---|---|---|
| 1 | 01-react-internals-and-rendering.md | Hydration, partial hydration, islands architecture, streaming SSR, concurrent rendering, time slicing, reconciliation algorithm, fiber architecture, virtual DOM diffing complexity, suspense boundaries, selective hydration, server components, tearing in concurrent UI, scheduler priorities, render waterfalls, edge rendering |
| 2 | 02-data-and-state-patterns.md | Structural sharing, immutable data patterns, referential equality, memoization pitfalls, stale closure problem, race conditions in UI state, finite state modeling, event sourcing in frontend, optimistic UI rollback strategy, offline conflict resolution, CRDT basics for collaboration, WebRTC |
| 3 | 03-javascript-runtime.md | Event loop (macro vs microtasks), task starvation, priority inversion in async code, AbortController, backpressure in streams API, streaming fetch response handling |
| 4 | 04-browser-rendering-and-performance.md | Layout thrashing, critical rendering path, render blocking resources, browser compositing layers, paint vs composite vs layout, GPU acceleration in CSS, CSS containment, subpixel rendering, deterministic rendering, idempotent UI actions |
| 5 | 05-browser-apis.md | IntersectionObserver internals, ResizeObserver loop limits, MutationObserver cost, IndexedDB, Web Workers vs Service Workers, SharedArrayBuffer, Transferable objects, OffscreenCanvas, WebAssembly integration, PerformanceObserver API, Long Tasks API, Pointer events |
| 6 | 06-web-components.md | Shadow DOM, Custom Elements lifecycle, Web Components interoperability |
| 7 | 07-build-and-module-systems.md | Tree shaking internals, code splitting strategies, dynamic import chunking, Module Federation, micro-frontend orchestration |
| 8 | 08-networking-and-caching.md | 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, CORS preflight, speculative prerendering |
| 9 | 09-security.md | SameSite cookie modes, CSRF vs XSS mitigation, Content Security Policy (CSP), Trusted Types, DOM clobbering, prototype pollution |
| 10 | 10-performance-metrics-and-memory.md | First Input Delay (FID), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS), Largest Contentful Paint (LCP), browser memory leak detection, detached DOM nodes, garbage collection timing |
| 11 | 11-accessibility.md | Accessibility tree, ARIA live regions internals |
| 12 | 12-project-setup-guide.md | Vite + React + TS/JS scaffold, Tailwind, React Router, Vitest + RTL, Zustand, TanStack Query, React Hook Form, Axios, folder structure, env variables, interview scenario recipes, speed tips |
| 13 | 13-vite.md | How Vite works (native ESM, esbuild pre-bundling, Rollup builds), HMR internals, vite.config.ts anatomy, environment variables, CSS handling, static assets |
| 14 | 14-eslint.md | ESLint flat config (v9+), key rules (hooks, TS, imports), plugins (react-hooks, jsx-a11y, import), VS Code integration, old vs new config format |
| 15 | 15-prettier.md | Prettier config, ESLint integration (eslint-config-prettier), VS Code setup, pre-commit hooks (husky + lint-staged) |
| 16 | 16-bundlers.md | How bundling works, Webpack vs Rollup vs esbuild vs Vite vs Turbopack vs SWC comparison, production build step-by-step, chunks, hashing, source maps |
| 17 | 17-react-project-fundamentals.md | React render cycle, JSX internals, hooks deep dive (useState, useEffect, useRef, useMemo, useCallback, custom hooks), component patterns, keys, error boundaries, React 18/19 features, package.json, tsconfig.json |