UI/UX & Frontend Glossary

DOM — Explained with Examples

The DOM (Document Object Model) is a tree-structured representation of HTML that browsers create, enabling JavaScript to dynamically access and modify page content.

Virtual DOM — Explained with Examples

The virtual DOM is a lightweight JavaScript representation of the real DOM, enabling efficient UI updates through batching and diffing.

Shadow DOM — Explained with Examples

Shadow DOM provides encapsulated DOM subtrees with style isolation, enabling self-contained web components that do not leak styles or behavior.

SPA — Explained with Examples

A Single Page Application (SPA) loads a single HTML page and dynamically updates content via JavaScript, avoiding full page reloads.

MPA — Explained with Examples

A Multi-Page Application (MPA) reloads the entire page from the server on each navigation, with each page having its own URL.

SSR — Explained with Examples

Server-Side Rendering (SSR) generates HTML on the server for each request, improving initial load time and SEO for JavaScript applications.

SSG — Explained with Examples

Static Site Generation (SSG) pre-builds HTML pages at compile time, serving them as static files for fast load speeds and simple hosting.

ISR — Explained with Examples

Incremental Static Regeneration (ISR) updates static pages after build without a full rebuild, combining static speed with dynamic freshness.

PWA — Explained with Examples

A Progressive Web App (PWA) is a web application that uses modern capabilities to deliver an app-like experience with offline support.

Responsive Design — Explained with Examples

Responsive design makes web layouts adapt to any screen size using fluid grids, flexible images, and CSS media queries.

Mobile-First Design — Explained with Examples

Mobile-first design starts with the smallest screen layout and progressively enhances for larger screens, prioritizing core content and performance.

Web Components — Explained with Examples

Web Components are reusable custom HTML elements built with browser-native APIs: Custom Elements, Shadow DOM, and HTML Templates.

CSS Preprocessor — Explained with Examples

A CSS preprocessor extends CSS with variables, nesting, mixins, and functions, compiling to standard CSS for browser consumption.

Accessibility — Explained with Examples

Accessibility (a11y) ensures web applications are usable by people with disabilities through semantic HTML, ARIA attributes, and keyboard support.

Internationalization — Explained with Examples

Internationalization (i18n) prepares software for multiple locales by separating content from code, enabling translation and cultural adaptation.

Lazy Loading — Explained with Examples

Lazy loading defers loading non-critical resources until needed, improving initial page load time and reducing bandwidth usage.