Progressive Enhancement

Accessibility (often abbreviated a11y) is the practice of designing and building websites and apps so they can be used by everyone, including people with visual, motor, auditory, or cognitive disabilities. This involves proper semantic markup, keyboard navigation support, sufficient color contrast, and screen reader compatibility. Beyond being an ethical responsibility, accessibility is increasingly a legal requirement in many jurisdictions.

CSS Custom Properties (also called CSS Variables) let you define reusable values with `--my-variable` syntax and reference them anywhere using `var(--my-variable)`. Unlike preprocessor variables in Sass or Less, they are live in the browser, cascade through the DOM, and can be updated dynamically with JavaScript. They're essential for theming systems, dark mode implementations, and maintaining consistent design tokens across large stylesheets.

A component library is a curated set of pre-built, reusable UI elements — buttons, inputs, modals, cards — packaged for consistent use across projects. Libraries like Material UI, Chakra UI, or Radix provide accessible, themeable building blocks so developers don't have to reinvent common patterns. A well-maintained component library drastically reduces development time and ensures visual consistency throughout an application.

Reconciliation is React's algorithm for comparing the previous and current Virtual DOM trees to determine the minimum number of changes needed to update the actual DOM. React uses heuristics like element type comparison and the `key` prop to efficiently decide whether to update, replace, or remove DOM nodes. Understanding reconciliation explains why unique `key` props on list items matter — without them, React can't reliably track which items changed, leading to bugs and poor performance.

Smoke testing is a quick, automated verification that the most critical functions of an application work after a new deployment or build. Rather than running the full test suite, smoke tests check essential paths — can the app start, does the login work, do key API endpoints respond. They are typically the first automated gate in a deployment pipeline, catching catastrophic failures before more expensive tests run.

Breadcrumb navigation is a secondary navigation pattern that shows the user's current location within a site hierarchy as a trail of links (e.g., Home > Products > Shoes). It helps users understand where they are and quickly navigate back to parent pages without relying on the browser's back button. Proper implementation uses an ordered list within a `<nav>` element with `aria-label="Breadcrumb"` for accessibility.