Hydration

The View Transitions API is a browser-native way to create animated transitions between different DOM states or page navigations, previously only possible with complex JavaScript animation libraries. It captures a snapshot of the current state, applies the DOM update, then animates between the old and new snapshots using CSS. This API works for both single-page app state changes and multi-page navigations, enabling smooth page transitions with minimal code that feels native to the platform.

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.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes like `flex`, `pt-4`, `text-center`, and `bg-blue-500` to build designs directly in your markup. Instead of writing custom CSS, you compose pre-built classes to create any design, which results in smaller final CSS bundles thanks to automatic purging of unused styles. Its configuration file allows full customization of the design system including colors, spacing, breakpoints, and typography.

A design system is a collection of reusable components, guidelines, and standards that ensure visual and functional consistency across a product or suite of products. It typically includes a component library, design tokens, typography rules, color palettes, and documentation. Design systems bridge the gap between designers and developers, enabling teams to build interfaces faster while maintaining a unified look and feel.

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.

A Higher-Order Component (HOC) is an advanced React pattern where a function takes a component as input and returns a new enhanced component with additional props or behavior. Common use cases include adding authentication checks, analytics tracking, or data fetching logic to existing components. While HOCs were a primary code reuse pattern in class-based React, custom hooks have largely replaced them in modern functional component code due to their simpler composition model.