Drag and Drop

Progressive enhancement is a web development strategy that starts with a baseline of functional HTML content accessible to all browsers, then layers on CSS styling and JavaScript interactivity for more capable environments. This approach ensures that core functionality works everywhere, while users with modern browsers get a richer experience. It contrasts with graceful degradation, which starts with the full experience and tries to handle failures.

A webhook is a mechanism where one system sends an automated HTTP request to another system when a specific event occurs. Unlike polling, where the client repeatedly checks for updates, webhooks push data in real time, making them far more efficient. They are widely used to connect services — for example, triggering a deployment when code is merged or sending a Slack notification when a payment is processed.

Server-Side Rendering (SSR) is a technique where web pages are rendered to HTML on the server for each request, rather than relying on client-side JavaScript to build the page in the browser. SSR provides faster initial page loads and better SEO since search engines receive complete HTML content. Modern SSR in frameworks like Next.js supports streaming, allowing the server to progressively send HTML chunks as they become ready rather than waiting for the entire page to render.

Optimistic UI is a pattern where the interface immediately reflects the expected result of a user action before the server confirms it. For example, a "like" button instantly shows the liked state while the API request happens in the background. This makes the app feel significantly faster and more responsive. If the server request fails, the UI rolls back to the previous state and notifies the user.

Atomic Design is a methodology by Brad Frost for creating design systems by breaking interfaces into five hierarchical levels: atoms (basic HTML elements), molecules (simple component groups), organisms (complex UI sections), templates (page-level layouts), and pages (specific instances with real content). This approach provides a consistent mental model for organizing component libraries in React, React Native, or Flutter projects and ensures systematic scalability of the UI.

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.