Terraform

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.

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.

Props drilling is the practice of passing data through multiple levels of intermediate components that don't actually use the data themselves, just to get it to a deeply nested child that needs it. This creates tight coupling between components and makes refactoring painful. Common solutions include React's Context API for global-ish state, state management libraries like Zustand or Redux, or component composition patterns that restructure the tree to reduce nesting depth.

CI/CD (Continuous Integration / Continuous Deployment) is a set of practices that automate building, testing, and deploying code every time a developer pushes changes. Continuous Integration merges code into a shared branch frequently and runs automated tests, while Continuous Deployment automatically releases validated changes to production. Together they form the backbone of modern software delivery, reducing manual errors and accelerating release cycles.

Semantic HTML means using HTML elements that clearly describe their meaning and purpose, such as `<article>`, `<nav>`, `<header>`, and `<section>`, instead of generic `<div>` tags. This practice improves accessibility for screen readers, boosts SEO by helping search engines understand page structure, and makes code far more readable for other developers. It's considered a foundational best practice in modern web development.

Container Queries allow CSS styles to respond to the size of a parent container rather than the browser viewport, solving a long-standing limitation of media queries. By marking an element as a containment context with `container-type`, its children can use `@container` rules to adapt their layout based on the container's dimensions. This makes truly reusable components possible — a card component can rearrange itself whether it's in a sidebar or a full-width section.