Shadow DOM

Dart is the programming language created by Google and used as the sole language for Flutter development. It features a sound type system, null safety, async/await support, and compiles both ahead-of-time (AOT) for production performance and just-in-time (JIT) for fast development cycles with hot reload. Dart's syntax feels familiar to developers coming from JavaScript, TypeScript, Java, or Kotlin, making the transition to Flutter relatively smooth.

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.

Lazy loading is a performance optimization technique that defers loading of non-critical resources until they are actually needed — typically when they enter the viewport. It is commonly applied to images, videos, and below-the-fold components to speed up initial page load. Modern browsers support native lazy loading via the `loading="lazy"` attribute, while JavaScript-based solutions offer more control through Intersection Observer.

CSS Animation uses `@keyframes` rules and the `animation` property to create complex, multi-step animations entirely in CSS without JavaScript. Combined with CSS transitions for simple state changes, these tools handle most UI animation needs performantly since browsers can optimize them on the GPU compositor thread. Properties like `transform` and `opacity` are particularly efficient to animate because they don't trigger layout recalculations or repaints.

Design tokens are the smallest units of a design system — named values representing colors, spacing, typography, border radii, and other visual properties. They act as a single source of truth that can be translated into platform-specific formats (CSS variables, Swift constants, XML resources). By changing token values in one place, you can update the look and feel of an entire application across multiple platforms simultaneously.

CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously, making it ideal for complex page layouts. Unlike Flexbox which works in one axis at a time, Grid allows you to place items precisely in both horizontal and vertical directions using named areas or line numbers. Features like `grid-template-areas`, `auto-fill`, and `minmax()` make it possible to create responsive layouts with minimal code.