The Glossary of Frontend Development

Foundational Web Technologies

HTML (HyperText Markup Language) — The markup language that defines a page's structure and semantics: headings, paragraphs, links, forms, and the elements that give content meaning.

CSS (Cascading Style Sheets) — The styling language that controls how HTML is presented: color, spacing, typography, and layout.

DOM (Document Object Model) — The browser's live, in-memory tree representation of a page's HTML, which JavaScript can read and modify.

CSSOM — The browser's tree representation of a page's CSS rules, combined with the DOM to produce the render tree used for painting.

Reflow / Repaint — The expensive browser work triggered when layout or visual properties change; minimizing unnecessary reflows and repaints is a core performance concern.

Components & Frameworks

Component — A self-contained, reusable unit of markup, styling, and logic (a button, a card, a nav bar) that can be composed into larger UIs.

Props — Data passed from a parent component down to a child, used to configure how the child renders or behaves.

Prop Drilling — The awkward pattern of passing props through several layers of components that don't themselves need the data, just to reach a deeply nested child.

Reconciliation / Diffing — The process by which a UI library compares a new render output to the previous one and computes the minimal set of real DOM changes needed.

Compiler-Based Framework — A framework (like Svelte) that transforms component code into precise, imperative DOM updates at build time, rather than diffing a virtual DOM at runtime.

Rendering Strategies

CSR (Client-Side Rendering) — The browser downloads a minimal HTML shell and JavaScript builds the UI in the browser; fast subsequent navigation, slower first paint.

SSR (Server-Side Rendering) — The server generates full HTML for each request, improving first paint and SEO at the cost of server load.

SSG (Static Site Generation) — Pages are pre-rendered to static HTML at build time and served from a CDN, trading freshness for speed.

ISR (Incremental Static Regeneration) — A hybrid where statically generated pages are regenerated on demand or on a schedule, without a full site rebuild.

Hydration — Attaching client-side JavaScript behavior and state to server-rendered static HTML, turning it into an interactive app.

Islands Architecture — Shipping mostly static HTML with small, independently hydrated interactive "islands," minimizing the JavaScript sent to the client.

Build Tooling

Bundler — A tool (Webpack, Vite, esbuild, Rollup) that combines many source files into optimized bundles for the browser.

Transpiler — A tool (Babel) that converts modern JavaScript syntax into older syntax more browsers can run.

Linter / Formatter — Tools (ESLint, Prettier) that catch code errors and enforce consistent style automatically.

Package Manager — A tool (npm, yarn, pnpm) that installs, versions, and resolves a project's third-party dependencies.

Styling & Layout

Flexbox — A one-dimensional CSS layout system for aligning and distributing items along a row or column.

CSS Grid — A two-dimensional CSS layout system for arranging items into rows and columns simultaneously.

Media Query — A CSS rule that applies styles conditionally based on characteristics like viewport width, enabling responsive design.

Mobile-First Design — Designing the smallest-screen layout first, then progressively enhancing it for larger viewports.

CSS-in-JS — An approach that writes component styles directly in JavaScript, scoping them automatically to the component.

Utility-First CSS — An approach (popularized by Tailwind CSS) that composes styles from small, single-purpose utility classes rather than custom stylesheets.

Frontend Engineering

State Management — Patterns and libraries for storing and updating application state predictably, especially state shared across many components (store-based, atom-based, or context-based approaches).

Debouncing — Delaying a function's execution until a pause occurs in the events triggering it — useful for search inputs or resize handlers.

Throttling — Limiting a function to run at most once per fixed interval, no matter how often it's triggered.

Virtual DOM — An in-memory representation of the UI that a framework diffs against the previous version to compute minimal real-DOM updates.

Code Splitting — Breaking a JavaScript bundle into smaller chunks that load on demand, reducing initial load time.

Tree Shaking — A build-time optimization that strips unused exports and dead code out of the final bundle.

Progressive Enhancement — Building a baseline experience that works without JavaScript or advanced features, then layering on enhancements for capable browsers.

Accessibility (a11y) — Designing and building applications usable by people with disabilities, typically guided by WCAG standards and semantic HTML/ARIA attributes.

Memoization — Caching the result of an expensive render or computation so it's skipped on subsequent renders unless its inputs change.

Controlled vs. Uncontrolled Components — A distinction (common in form handling) between components whose value is driven entirely by application state versus components that manage their own internal value.

Performance

Core Web Vitals — Google's metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — for measuring real-world loading, interactivity, and visual stability.

TTFB (Time to First Byte) — The time between a request being sent and the first byte of the response arriving; reflects backend and network latency more than frontend code.

Lazy Loading — Deferring the loading of a resource — an image, a module, a chunk of data — until it's actually needed.

*written with Claude Sonnet 5