Accessibility (a11y)
Accessibility is the practice of building web interfaces usable by people with disabilities, including those using screen readers, keyboards, switches, or magnification. It is governed by the Web Content Accessibility Guidelines (WCAG) and surfaced in the browser through the accessibility tree derived from semantic HTML and ARIA. Accessible markup also improves SEO and general usability for everyone.
ARIA
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes - roles, states, and properties - that communicate the semantics of custom or dynamic widgets to assistive technologies when native elements are insufficient. The first rule of ARIA is to prefer a native HTML element over an ARIA role whenever one exists. Misused ARIA can make an interface less accessible, not more.
Bundle
A bundle is the output file (or files) a build tool produces by combining and transforming source modules into something a browser can load. Modern bundlers like Vite, esbuild, and webpack tree-shake unused code, split bundles into chunks, and emit hashed filenames for cache busting. Bundle size directly affects load performance, so teams budget and monitor it.
Cascade
The cascade is the CSS algorithm that decides which declaration wins when multiple rules target the same element, weighing origin, layer, specificity, and source order. Understanding the cascade - and newer controls like cascade layers (@layer) - is essential to writing predictable styles. The "C" in CSS stands for this cascading behaviour.
Client-Side Rendering (CSR)
Client-side rendering delivers a near-empty HTML shell plus JavaScript that builds the DOM in the browser after download and execution. It enables rich interactivity and cheap static hosting but harms first-paint performance and SEO for content that arrives only after JS runs. CSR is the default for plain single-page applications without a server-rendering layer.
Component
A component is a reusable, self-contained unit of UI that encapsulates its markup, styling, and behaviour and exposes a typed interface of inputs and outputs. Frameworks such as React, Angular, Vue, and Svelte make components the primary building block, composing them into trees. Web Components are the browser-native standard for the same idea.
Core Web Vitals
Core Web Vitals are a Google-defined set of user-centric performance metrics - Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) - used to measure loading, responsiveness, and visual stability. They are field-measurable, influence search ranking, and have published "good" thresholds. INP replaced First Input Delay (FID) as a Core Web Vital in March 2024.
CSS Custom Properties
CSS custom properties (CSS variables) are author-defined values declared with a --name syntax and read with var(--name), cascading and inheriting like normal properties. Unlike preprocessor variables they are live at runtime, so they can be updated with JavaScript or media queries and power theming and design tokens. They are scoped to the element where they are declared.
CSS Grid
CSS Grid is a two-dimensional layout system that arranges elements into rows and columns simultaneously, defined on a container with display: grid. It excels at page-level and component-level layouts where alignment across both axes matters, complementing the one-dimensional Flexbox. Features like grid-template-areas and minmax() make complex responsive layouts declarative.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift is a Core Web Vital measuring the sum of unexpected layout shifts during a page's lifetime, scoring visual stability. Shifts are caused by images without dimensions, dynamically injected content, and web fonts that reflow text. A good CLS is 0.1 or less; it is reduced by reserving space with explicit width/height or aspect-ratio.
Critical Rendering Path
The critical rendering path is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into rendered pixels: parsing HTML into the DOM, CSS into the CSSOM, combining them into the render tree, then layout and paint. Render-blocking CSS and synchronous scripts stall this path. Optimising it - inlining critical CSS, deferring scripts - improves first paint.
DOM
The Document Object Model is the browser's in-memory tree representation of an HTML document, exposing nodes that scripts can read and mutate to change the page. Direct DOM manipulation is expensive, which is why frameworks introduce abstractions like the Virtual DOM or fine-grained reactivity. The DOM is also where accessibility semantics ultimately live.
Design Tokens
Design tokens are named, platform-agnostic values - colours, spacing, typography, radii - that encode design decisions as data and feed multiple targets (CSS, native, documentation). They decouple design intent from implementation, enabling consistent theming and dark/light modes. On the web they are commonly exposed as CSS custom properties.
Event Loop
The event loop is the concurrency model that lets single-threaded JavaScript handle asynchronous work by processing a queue of callbacks after the call stack is empty. It distinguishes macrotasks (timers, I/O) from microtasks (Promise callbacks), draining all microtasks between macrotasks. Blocking the loop with long synchronous work freezes the UI and harms responsiveness.
Flexbox
Flexbox (the CSS Flexible Box Layout) is a one-dimensional layout model that distributes space along a single axis - row or column - and aligns items on the cross axis. It is ideal for components like toolbars, navigation bars, and centring content, where alignment in one direction dominates. For two-dimensional layouts, CSS Grid is the better tool.
Hydration
Hydration is the process by which client-side JavaScript attaches event listeners and reactive state to server-rendered HTML, making a static page interactive without re-rendering it from scratch. It is the bridge between SSR/SSG and a working SPA. Costly hydration of large trees has driven techniques like partial hydration, islands, and resumability.
Hoisting
Hoisting is JavaScript's behaviour of moving declarations to the top of their scope during compilation, so var and function declarations are usable before their textual position. let and const are hoisted but live in the temporal dead zone until initialised, throwing if accessed early. Understanding hoisting prevents subtle reference and timing bugs.
Interaction to Next Paint (INP)
Interaction to Next Paint is a Core Web Vital that measures responsiveness by reporting the longest interaction latency (input to next visual update) a user experiences during a visit. It replaced First Input Delay as a Core Web Vital in March 2024 because it captures the full interaction, not just the first input's delay. A good INP is 200 milliseconds or less.
Islands Architecture
Islands architecture renders a page as mostly static HTML with isolated interactive "islands" that hydrate independently, rather than hydrating the whole page. Each island ships only the JavaScript it needs, dramatically cutting client bundle size for content-heavy sites. Astro popularised the pattern; it pairs well with server-first rendering.
JSX
JSX is a syntax extension to JavaScript, popularised by React, that lets developers write HTML-like markup directly in code, which a compiler transforms into function calls that create elements. It is not HTML and not a string template; it is expressions producing a UI description. Attribute names differ from HTML (for example className instead of class).
Largest Contentful Paint (LCP)
Largest Contentful Paint is a Core Web Vital measuring loading performance: the render time of the largest image or text block visible in the viewport. A good LCP is 2.5 seconds or less. It is improved by optimising the LCP element's delivery - preloading hero images, eliminating render-blocking resources, and using a fast server or CDN.
Lazy Loading
Lazy loading defers fetching a resource until it is actually needed - typically when it scrolls near the viewport or a route is visited - to speed up initial load. The browser-native loading="lazy" attribute handles images and iframes, while route-based code splitting lazily loads JavaScript. Care must be taken not to lazy-load above-the-fold or LCP elements.
Media Query
A media query is a CSS feature that applies styles conditionally based on characteristics of the device or environment, such as viewport width, orientation, prefers-color-scheme, or prefers-reduced-motion. They are the foundation of responsive design. Container queries complement them by responding to a parent's size rather than the viewport.
Memoization
Memoization caches the result of an expensive computation keyed by its inputs so repeated calls return the cached value instead of recomputing. In UI frameworks it prevents needless re-renders and recalculation - React's useMemo/memo, Vue's computed, Angular's memoized signals. Over-memoizing adds overhead and bugs, so it should target measured hot paths.
Progressive Enhancement
Progressive enhancement is a strategy of building a baseline experience with semantic HTML that works everywhere, then layering CSS and JavaScript to enhance it for capable browsers. It makes content resilient to script failures, slow networks, and older clients. It contrasts with graceful degradation, which starts from the full experience and removes features.
Reactivity
Reactivity is a programming model where the UI automatically updates when underlying state changes, without manual DOM manipulation. Frameworks implement it via Virtual DOM diffing (React), dependency-tracked signals (Solid, Angular, Vue), or compile-time reactivity (Svelte). Fine-grained reactive systems update only the exact DOM nodes that depend on changed state.
Render-Blocking Resource
A render-blocking resource is a file - typically synchronous CSS or non-deferred JavaScript in the document head - that the browser must download and process before it can paint content. They delay first paint and harm Core Web Vitals. Mitigations include inlining critical CSS, loading non-critical CSS asynchronously, and adding defer/async to scripts.
Responsive Web Design
Responsive web design is an approach that makes a single codebase adapt its layout to any screen size using fluid grids, flexible images, and media or container queries. It replaced separate "mobile sites" and is now the default expectation. A mobile-first methodology - designing the smallest layout first and enhancing upward - is the common implementation.
Server-Side Rendering (SSR)
Server-side rendering generates a page's full HTML on the server for each request and sends it to the browser, which displays content immediately and then hydrates it for interactivity. SSR improves first paint, SEO, and social previews compared with pure client rendering, at the cost of server compute and hydration. Frameworks like Next.js, Nuxt, and Angular SSR provide it.
Shadow DOM
The Shadow DOM is a browser standard that attaches an encapsulated, isolated subtree to an element, scoping its markup and styles so they do not leak in or out. It is a core building block of Web Components, enabling true style and DOM encapsulation without naming conventions. Slots let external content project into the shadow tree.
Single-Page Application (SPA)
A single-page application loads one HTML document and then updates the view via JavaScript and client-side routing, avoiding full-page reloads as the user navigates. SPAs feel app-like and reduce server round trips but must handle routing, code splitting, SEO, and accessibility of dynamic updates themselves. Pairing them with SSR/SSG mitigates their first-load weaknesses.
Specificity
Specificity is the weight CSS assigns to a selector to resolve conflicts in the cascade, computed from the count of ID, class/attribute/pseudo-class, and type selectors. A more specific selector wins over a less specific one regardless of source order. Overusing high-specificity selectors and !important makes stylesheets hard to maintain; methodologies and cascade layers tame it.
Static Site Generation (SSG)
Static site generation renders pages to HTML at build time rather than per request, producing files a CDN can serve instantly with no server compute. It offers the best performance and security for content that changes infrequently, with rebuilds or incremental regeneration handling updates. Frameworks like Next.js, Astro, and Hugo support SSG.
Tree Shaking
Tree shaking is a build-time optimisation that removes code never imported or used (dead code) from the final bundle, relying on the static structure of ES modules. It shrinks bundle size and load time. It works best when libraries are written as side-effect-free ES modules and the bundler is told which files have side effects.
Transpilation
Transpilation is source-to-source compilation that converts code from one language or syntax level to another a target environment understands - for example TypeScript to JavaScript, or modern ECMAScript to an older baseline. Tools like Babel, esbuild, swc, and the TypeScript compiler perform it. It lets teams use new language features while supporting older browsers.
TypeScript
TypeScript is a statically typed superset of JavaScript developed by Microsoft that adds optional type annotations, interfaces, generics, and compile-time checking, transpiling to plain JavaScript. It catches a large class of errors before runtime and powers editor tooling like autocompletion and refactoring. It has become the default language for serious front-end projects.
Viewport
The viewport is the visible area of a web page within the browser window, whose size drives responsive layout. The tag controls how mobile browsers scale and size the layout viewport, and width=device-width, initial-scale=1 is the standard responsive setting. CSS viewport units (vw, vh, dvh) size elements relative to it.
Virtual DOM
The Virtual DOM is an in-memory representation of the UI that a framework diffs against the previous version to compute the minimal set of real DOM mutations needed after a state change. Popularised by React, it trades some overhead for a simpler declarative programming model. Signal-based frameworks achieve similar ergonomics without a diffing step.
Web Component
A Web Component is a custom, reusable element built from three browser standards - Custom Elements, Shadow DOM, and HTML templates - that works across frameworks and plain HTML. It encapsulates markup, style, and behaviour behind a tag like
Web Worker
A Web Worker runs JavaScript on a background thread separate from the main UI thread, communicating via message passing, so heavy computation does not block rendering or interaction. It has no DOM access by design. Workers improve responsiveness for tasks like parsing, encryption, and data processing, and underpin offline-capable service workers.
Service Worker
A service worker is a script the browser runs in the background, separate from the page, acting as a programmable network proxy that can intercept requests, cache responses, and enable offline use and push notifications. It is the foundation of Progressive Web Apps. Because it controls fetches, it must be scoped carefully and updated through a defined lifecycle.
Progressive Web App (PWA)
A Progressive Web App is a website that uses modern browser capabilities - a service worker, a web app manifest, and HTTPS - to be installable, work offline, and behave like a native app. PWAs offer app-like reach without app-store distribution. Core ingredients are an offline strategy, a manifest describing icons and display mode, and responsive, accessible UI.
State Management
State management is the discipline of storing, updating, and sharing application data across a component tree in a predictable way. Options range from local component state and context to dedicated libraries (Redux, Zustand, Pinia, NgRx) and reactive primitives (signals). The guideline is to keep state as local as possible and lift or centralise only what must be shared.
Code Splitting
Code splitting breaks an application's JavaScript into smaller chunks loaded on demand - typically per route or per heavy component - instead of one large bundle. It reduces the initial download and time-to-interactive. Bundlers implement it through dynamic import() and framework-level lazy routing, and it pairs naturally with lazy loading.
Content Security Policy (CSP)
A Content Security Policy is an HTTP response header that tells the browser which sources of scripts, styles, images, and other resources are allowed to load, mitigating cross-site scripting and data injection. A strict, nonce-based CSP is a strong defence-in-depth control for front-end apps. It must be tuned carefully to avoid breaking legitimate inline scripts and third-party widgets.
Cross-Site Scripting (XSS)
Cross-site scripting is a vulnerability where an attacker injects malicious script that runs in another user's browser in the context of a trusted site, stealing data or hijacking sessions. The primary front-end defences are contextual output encoding, treating all user input as untrusted, avoiding innerHTML with unsanitised data, and a strict Content Security Policy. Frameworks auto-escape interpolated values by default.
Hot Module Replacement (HMR)
Hot Module Replacement is a dev-server feature that swaps updated modules into a running application without a full page reload, preserving state and speeding up the edit-refresh cycle. Vite and webpack provide it. It is a development-only optimisation and does not affect production bundles.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that provides low-level, single-purpose classes (like flex, pt-4, text-center) composed directly in markup, with a build step that purges unused styles. It trades semantic class names for speed and consistency, enforcing a design system via configuration tokens. Critics note verbose markup; proponents value its maintainability at scale.
Debouncing and Throttling
Debouncing and throttling are techniques to limit how often a function runs in response to frequent events like scroll, resize, or keystrokes. Debouncing waits until activity stops for a set delay before firing once; throttling fires at most once per interval. Both reduce wasted work and improve responsiveness, and are common in search-as-you-type and infinite-scroll handlers.