Dictionary

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.

Server-Side Rendering (SSR) is a technique where web pages are rendered to HTML on the server for each request, rather than relying on client-side JavaScript to build the page in the browser. SSR provides faster initial page loads and better SEO since search engines receive complete HTML content. Modern SSR in frameworks like Next.js supports streaming, allowing the server to progressively send HTML chunks as they become ready rather than waiting for the entire page to render.

Shadow DOM is a browser API that allows you to attach a hidden, encapsulated DOM tree to an element, isolating its styles and markup from the rest of the page. This means CSS defined inside a Shadow DOM won't leak out, and external styles won't bleed in. It's the core technology behind Web Components and is used by frameworks to achieve true style encapsulation without CSS naming conventions or tooling.

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.

State management refers to the strategies and tools used to handle, store, and synchronize application data across components in a frontend application. In React, state can live locally in components via `useState`, be shared via Context, or be managed by external libraries like Redux, Zustand, Jotai, or Recoil. Choosing the right state management approach depends on your app's complexity — many apps over-adopt heavy solutions when simpler patterns would suffice.

Static Site Generation (SSG) is a rendering strategy where HTML pages are pre-built at build time rather than generated on each request. The resulting static files can be served from a CDN with extremely fast load times and minimal server infrastructure. Frameworks like Next.js, Gatsby, and Astro support SSG, often combined with Incremental Static Regeneration (ISR) to update specific pages in the background without rebuilding the entire site.

Storybook is an open-source tool for building and testing UI components in isolation, outside of your main application. Developers define "stories" — different states and variations of a component — which are rendered in a dedicated browser-based workshop. It supports React, Vue, Angular, and other frameworks, making it invaluable for component documentation, visual regression testing, and collaboration between designers and developers.

Styled Components is a popular CSS-in-JS library for React and React Native that uses tagged template literals to style components. It automatically generates unique class names, supports dynamic styling based on props, handles vendor prefixing, and provides full theming capabilities. The library colocates styles with components, making it easy to understand what each component looks like and to delete styles safely when removing components.