Design Tokens

CSS-in-JS is an approach where styles are written directly in JavaScript files, often co-located with the components they style. Libraries like Styled Components, Emotion, and Stitches generate unique class names at build time or runtime, eliminating style conflicts. While it enables dynamic styling based on props and full encapsulation, the trend has shifted toward zero-runtime solutions and utility-first CSS due to performance concerns.

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.

In Flutter, the widget tree is the hierarchical structure of nested widgets that defines the entire UI of an application. Everything in Flutter is a widget — from layout structures like `Column` and `Row` to styling wrappers like `Padding` and `Theme` to interactive elements like `GestureDetector`. Flutter maintains three parallel trees (widget, element, and render object) that work together to efficiently rebuild only the parts of the UI that actually changed when state updates.

Cross-platform development is the practice of building applications that run on multiple operating systems (iOS, Android, web, desktop) from a single codebase. Frameworks like React Native, Flutter, and Kotlin Multiplatform each take different approaches — from shared UI rendering to shared business logic with native UI. The key trade-off is between code reuse efficiency and the ability to deliver platform-native experiences that feel right on each device.

Usability testing is a UX research method where real users attempt to complete specific tasks while observers note difficulties, confusion, and behavior patterns. It can be moderated (with a facilitator) or unmoderated (self-guided with recording), and conducted on prototypes or live products. Even testing with just 5 users typically uncovers the majority of usability issues, making it one of the highest-ROI activities in product development.

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.