Drag and Drop

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.

Dark mode is a UI color scheme that uses light-colored text and elements on a dark background. It reduces eye strain in low-light environments, can save battery on OLED screens, and has become an expected feature in modern applications. Implementation typically involves CSS custom properties or design tokens that switch between light and dark theme values, often respecting the user's system-level preference via the `prefers-color-scheme` media query.

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.

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.

Code splitting is an optimization technique that breaks a JavaScript bundle into smaller chunks that are loaded on demand, rather than forcing users to download the entire application upfront. In React, this is achieved through `React.lazy()` and dynamic `import()` statements, which create separate bundles loaded only when the corresponding component or route is accessed. This dramatically improves initial load times, especially for large single-page applications with many routes.

A skeleton screen is a placeholder UI that mimics the page layout with simple shapes and animated gradients while content is loading. Unlike spinners, skeletons give users an immediate sense of the page structure, reducing perceived loading time. They are widely used in apps like Facebook, YouTube, and LinkedIn to create a smoother transition from loading to loaded state.