Modal

JSX (JavaScript XML) is a syntax extension for JavaScript used primarily in React that lets you write HTML-like markup directly within your JavaScript code. It gets transpiled by tools like Babel or SWC into regular `React.createElement()` calls before reaching the browser. JSX supports embedding dynamic expressions with curly braces, conditional rendering, and mapping over arrays, making it a powerful and intuitive way to describe UI structures declaratively.

A canary release is a deployment strategy where a new version is gradually rolled out to a small subset of users before reaching the full audience. Automated monitoring compares error rates, latency, and key metrics between the canary and the stable version. If the canary performs well, traffic is incrementally shifted; if anomalies are detected, the release is automatically rolled back, minimizing the blast radius of potential issues.

Tree shaking is a dead code elimination technique used by modern bundlers like Webpack, Rollup, and esbuild to remove unused exports from the final JavaScript bundle. It relies on the static structure of ES module `import`/`export` syntax to determine which code is actually referenced and safely discard the rest. For tree shaking to work effectively, libraries must use ESM format and avoid side effects in their module initialization, which is why the `sideEffects` field in `package.json` matters.

A feature flag (also called feature toggle) is a technique that lets you enable or disable functionality in production without deploying new code. Flags can target specific users, percentages, or environments, enabling practices like A/B testing, canary releases, and kill switches. Tools like LaunchDarkly, Unleash, and Statsig provide automated flag management with real-time evaluation and analytics.

State management refers to the strategies and tools used to handle, store, and synchronize application data across components in a frontend application. In React, state can live locally in components via `useState`, be shared via Context, or be managed by external libraries like Redux, Zustand, Jotai, or Recoil. Choosing the right state management approach depends on your app's complexity — many apps over-adopt heavy solutions when simpler patterns would suffice.

Color contrast is the measurable difference in luminance between foreground text (or UI elements) and their background. WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments. Tools like Chrome DevTools, Stark, and WebAIM's contrast checker help developers verify compliance during development.