Technical Documentation

Engineering
Handbook.

A curated encyclopedia of modern web engineering terminology, designed to help developers and stakeholders master the technical landscape.

Why This Handbook Exists

Modern web engineering moves fast. New frameworks, rendering models, and deployment patterns appear every year, and the vocabulary alone can overwhelm newcomers and experienced developers alike. This handbook is a curated reference written by a practicing full-stack engineer — not an auto-generated glossary — to explain the concepts that matter when building production-grade web applications.

Each entry goes beyond a dictionary definition. We cover what the term means in practice, when you should care about it, and how it connects to adjacent ideas like performance, security, and maintainability. Whether you are a developer sharpening your craft, a product manager evaluating technical trade-offs, or a student preparing for interviews, these explanations are designed to stand on their own.

The topics here reflect real decisions made while building elangodev.com: Next.js App Router architecture, Supabase-backed real-time features, edge rendering strategies, accessible design systems, and the performance tooling that keeps Core Web Vitals in the green. For deeper walkthroughs with code examples, visit the technical blog.

Read Technical Articles

Performance & Rendering

How browsers paint pixels, how React hydrates server output, and why milliseconds matter for user trust and search rankings.

Web Vitals

Google's Core Web Vitals — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — measure real-user experience quality.

LCP tracks how quickly the main content appears; aim for under 2.5 seconds. INP replaced First Input Delay and measures responsiveness to taps and clicks; keep it under 200 ms. CLS quantifies unexpected layout shifts during load; stay below 0.1. These metrics directly influence SEO rankings and conversion rates, so they should be monitored in production via tools like Lighthouse, CrUX, or Real User Monitoring.

Hydration

The process where React attaches event listeners and state to HTML that was pre-rendered on the server, making a static page interactive.

Server-side rendering produces HTML quickly, but without hydration the page cannot respond to clicks. Hydration cost is proportional to component tree size — oversized client bundles delay Time to Interactive. React Server Components reduce hydration scope by keeping heavy logic on the server. Selective hydration and streaming further improve perceived performance on slow networks.

SSR vs SSG

Server-Side Rendering generates HTML per request; Static Site Generation pre-builds HTML at deploy time.

SSG is ideal for content that changes infrequently — blogs, marketing pages, documentation — because responses are served from a CDN with near-zero compute cost. SSR suits personalized or frequently updated data like dashboards and user-specific feeds. Next.js supports Incremental Static Regeneration (ISR) to combine both: static speed with background revalidation. Choose based on data freshness requirements and infrastructure budget.

Edge Computing

Running application logic on geographically distributed nodes close to end users rather than in a single central data center.

Edge functions (Vercel Edge, Cloudflare Workers) execute lightweight JavaScript at CDN points of presence, cutting round-trip latency for auth checks, A/B routing, and geo-personalization. They are not a replacement for full databases — keep edge logic stateless and fast. Pair edge middleware with origin APIs for data-heavy operations.

Lazy Loading

Deferring the initialization or download of resources until they are actually needed.

Images below the fold, route-level code splits, and heavy chart libraries are common lazy-load candidates. Native `loading="lazy"` on images and dynamic `import()` in React reduce initial bundle size. Balance lazy loading with layout stability — reserve space for deferred content to avoid CLS penalties.

Brotli Compression

A lossless compression algorithm that typically achieves 15–25% better ratios than GZIP for text assets.

Modern CDNs and servers negotiate Brotli automatically for HTTPS clients that support it. Pre-compress static assets at build time for maximum benefit. Brotli shines on CSS, JavaScript, and JSON; binary assets like images already use specialized codecs and should not be Brotli-compressed.

Lighthouse

An open-source auditing tool built into Chrome DevTools that scores performance, accessibility, SEO, and best practices.

Lighthouse runs in a simulated mobile environment by default, so desktop scores may differ from production. Use it in CI to catch regressions, but validate with field data (CrUX) because lab scores do not capture real network variability. Focus on actionable audits rather than chasing a perfect 100.

Tree Shaking

Dead-code elimination that removes unused exports from JavaScript bundles during the build step.

Tree shaking requires ES modules (`import`/`export`) and side-effect-free packages. Libraries marked as side-effectful in `package.json` may prevent shaking. Audit bundle analyzers regularly — a single barrel file re-exporting an entire icon library can negate shaking benefits.

Architecture & Infrastructure

Patterns for scaling backends, distributing frontends, and operating reliable systems in production.

Serverless Architecture

Cloud providers manage server provisioning; developers deploy discrete functions triggered by HTTP, queues, or events.

Serverless excels for bursty, unpredictable traffic and rapid prototyping. Cold starts remain a consideration for latency-sensitive paths — mitigate with provisioned concurrency or edge runtimes. Stateless functions pair well with managed databases and object storage. Track execution duration and memory allocation to control costs.

Micro-frontends

An architectural pattern where independent frontend teams ship self-contained applications composed into a single shell.

Micro-frontends reduce coupling in large organizations but add integration complexity — shared design tokens, routing, and authentication must be coordinated. Module Federation and iframe-based isolation are common approaches. For small teams, a well-structured monolith with feature folders is often simpler and faster.

Content Delivery Network (CDN)

A distributed network of edge caches that serve static and dynamic content from locations nearest to each user.

CDNs reduce latency, absorb traffic spikes, and provide DDoS mitigation. Cache-control headers determine freshness — use long `max-age` for hashed assets and short or `stale-while-revalidate` for HTML. Purge APIs let you invalidate content after deployments.

BFF Architecture

Backend For Frontend — a dedicated API layer tailored to a specific client (mobile, web, partner).

A BFF aggregates multiple upstream services into a single response shape optimized for one UI, reducing over-fetching and simplifying client code. It also isolates breaking API changes from the frontend. Avoid creating too many BFFs — one per major client surface is a practical limit.

DevOps

Practices that unify software development and IT operations to shorten release cycles and improve reliability.

DevOps emphasizes automation: infrastructure as code, automated testing, and continuous deployment pipelines. Culture matters as much as tooling — blameless post-mortems and shared on-call rotation build resilient teams. Platforms like GitHub Actions and Vercel integrate deployment into the developer workflow.

CI/CD

Continuous Integration merges code frequently with automated tests; Continuous Delivery/Deployment ships validated changes to production.

CI catches regressions before they reach users. CD automates the path from green builds to live environments. Feature flags decouple deployment from release, letting you ship code dark and enable it gradually. Rollback strategies — blue-green deploys or instant revert — are essential safety nets.

Frontend & React

Component models, styling systems, and browser APIs that shape how modern interfaces are built.

React Server Components (RSC)

React components that execute exclusively on the server and stream serialized output to the client without shipping their JavaScript.

RSC enables direct database queries inside components and shrinks client bundles. They cannot use hooks, browser APIs, or event handlers — pair them with Client Components for interactivity. The App Router in Next.js 13+ is built around this model. Understand the server/client boundary to avoid accidental bundle bloat.

CSS Houdini

Low-level browser APIs that let developers extend CSS rendering with custom paint, layout, and animation worklets.

Houdini enables effects impossible with standard CSS alone — custom border paints, masonry layouts, and scroll-linked animations. Browser support is growing but not universal; always provide fallbacks. The Paint API is the most widely adopted subset today.

Atomic Design

Brad Frost's methodology for building design systems from atoms (buttons, inputs) through molecules, organisms, templates, and pages.

Atomic Design creates a shared vocabulary between designers and engineers. Atoms map to primitive components; organisms combine them into nav bars and cards. The hierarchy prevents one-off styles and encourages reusable tokens. Start with atoms and tokens before building complex organisms.

Semantic HTML

Using HTML elements for their intended meaning (`<nav>`, `<article>`, `<main>`) rather than generic `<div>` wrappers.

Semantic markup improves accessibility — screen readers navigate by landmarks — and helps search engines understand page structure. It also reduces CSS complexity by leveraging native element behavior. Prefer `<button>` over clickable `<div>` elements for interactive controls.

Shadow DOM

A web standard that encapsulates a component's internal DOM and styles, preventing leakage in either direction.

Web Components use Shadow DOM for style isolation — critical for embeddable widgets on third-party sites. React does not use Shadow DOM by default; CSS Modules and scoped styling achieve similar goals within React apps. Understand encapsulation trade-offs when mixing frameworks.

PWA (Progressive Web App)

A web application enhanced with service workers, a web manifest, and HTTPS to deliver installable, offline-capable experiences.

PWAs bridge the gap between web reach and native-app features like home-screen icons and push notifications. Service workers cache assets and enable background sync. Not every site needs PWA features — evaluate based on repeat-visit frequency and offline requirements.

WebAssembly (Wasm)

A portable binary instruction format that runs near-native speed in browsers, compiled from languages like Rust and C++.

Wasm excels for compute-heavy tasks — image processing, cryptography, game engines — that would choke JavaScript. It interoperates with JS through a linear memory model. For most CRUD applications, JavaScript remains sufficient; reach for Wasm when profiling shows a genuine CPU bottleneck.

Security & APIs

Protecting users and data while building reliable interfaces between systems.

Cross-Site Scripting (XSS)

An attack where malicious scripts are injected into trusted pages, often via unsanitized user input.

Prevent XSS by escaping output, using Content Security Policy (CSP) headers, and avoiding `dangerouslySetInnerHTML` without sanitization libraries like DOMPurify. Stored XSS persists in databases; reflected XSS appears in URL parameters. Both can steal session tokens and deface sites.

JWT (JSON Web Token)

A compact, signed token format for transmitting claims between parties, commonly used for stateless authentication.

JWTs contain a header, payload, and signature verifiable with a shared secret or public key. Keep payloads small and set short expiration times. Store tokens in httpOnly cookies rather than localStorage to mitigate XSS theft. Rotate signing keys periodically.

CORS

Cross-Origin Resource Sharing — a browser mechanism that controls whether a web page can request resources from a different origin.

Servers opt in via `Access-Control-Allow-Origin` headers. Preflight OPTIONS requests add latency for non-simple methods. Misconfigured CORS either blocks legitimate API calls or opens endpoints to any origin — use explicit allowlists, never `*` with credentials. CORS is a browser constraint, not server-side authorization.

GraphQL

A query language and runtime that lets clients request exactly the fields they need from a single endpoint.

GraphQL reduces over-fetching compared to REST but introduces complexity — N+1 query problems, caching difficulties, and schema governance. Tools like DataLoader batch database calls. For simple CRUD APIs, REST with OpenAPI may be faster to ship and easier to cache at the CDN layer.

WebSockets

A protocol providing full-duplex, persistent communication over a single TCP connection.

WebSockets enable real-time features — chat, live dashboards, collaborative editing — without HTTP polling overhead. They require connection management, reconnection logic, and horizontal scaling via pub/sub backplanes like Redis. For infrequent updates, Server-Sent Events (SSE) are simpler.

A11y (Accessibility)

Designing products usable by people with disabilities, including visual, motor, auditory, and cognitive impairments.

Accessibility is a legal requirement in many jurisdictions (ADA, EAA) and improves UX for everyone. Follow WCAG 2.2 guidelines: sufficient color contrast, keyboard navigation, ARIA labels where native semantics are insufficient, and focus management in modals. Test with screen readers and automated tools like axe.

Optimization & Data

Techniques for keeping interfaces responsive and databases fast under load.

Debouncing

Delaying a function call until input stops changing for a specified interval.

Search-as-you-type and window resize handlers are classic debounce use cases. A 300 ms debounce on search prevents firing an API call on every keystroke. Implement with `setTimeout`/`clearTimeout` or utility libraries. Debouncing waits for silence; throttling fires at a fixed rate.

Throttling

Limiting a function to execute at most once per time window, regardless of how many times it is triggered.

Scroll position tracking and analytics beacons benefit from throttling — record position every 100 ms instead of every pixel. Unlike debouncing, throttling guarantees periodic execution during continuous events. Choose based on whether you need the final value (debounce) or regular samples (throttle).

Elasticsearch

A distributed search and analytics engine built on Apache Lucene, designed for full-text search at scale.

Elasticsearch indexes JSON documents and supports complex queries, aggregations, and geo-search. It powers log analytics (ELK stack) and product search bars. Operate it as a managed service when possible — self-hosted clusters require expertise in shard allocation and JVM tuning.

Keep Learning

This handbook covers 30 core concepts across 5 categories. For step-by-step tutorials and architecture walkthroughs, visit the technical blog or get in touch for consulting.

Contact for Consulting