Book 02 · Cheat sheet

Web Development

The languages, protocols and rendering strategies behind applications that run in the browser.

01AJAXAsynchronous JavaScript and XML: AJAX (Asynchronous JavaScript and XML) is a technique for loading server data in the background with JavaScript and updating part of a page without a reload.
AJAX loads data in the background and updates part of the page.
The term dates from 2005; XMLHttpRequest came earlier.
Today's requests usually carry JSON, not XML.
02Angular: Angular is a complete, TypeScript-based web framework from Google with components, routing, forms, an HTTP client and dependency injection built in.
Angular is a complete TypeScript web framework developed by Google.
It includes routing, forms, an HTTP client and dependency injection.
Components are TypeScript classes with templates; services hold shared logic.
03Bundler: A bundler is a build tool that combines JavaScript modules and their dependencies into a few optimized files that browsers can download and run quickly.
A bundler combines many modules and assets into a few optimized files.
It follows import statements from an entry point to build a dependency graph.
Tree shaking, minification, and code splitting make bundles smaller and faster to load.
04CMSContent Management System: A CMS (content management system) is software that lets people create, edit and publish website content through an editor instead of writing code.
A CMS lets non-developers create and publish content through an editor.
It separates content from the code that displays it.
WordPress, Drupal and Joomla are traditional CMSs that also render pages.
05Code Splitting: Code splitting is a technique that breaks a web app's JavaScript into smaller chunks loaded on demand, so the first page load downloads only the code it needs.
Code splitting breaks one large bundle into smaller chunks that load on demand.
Dynamic import() marks where the bundler should start a new chunk.
Route-based splitting gives each page its own code; component-level splitting defers heavy widgets.
06Cookie: A cookie is a small piece of data a website asks the browser to store and send back with later requests, often used to keep users logged in.
Servers set cookies with the Set-Cookie response header.
Browsers send cookies back automatically on matching requests.
Session cookies usually store only a random ID, not user data.
07Core Web Vitals: Core Web Vitals are three metrics that measure a page's real-user experience: loading speed (LCP), responsiveness (INP), and visual stability (CLS).
The three Core Web Vitals are LCP (loading), INP (responsiveness), and CLS (visual stability).
Good scores are LCP of 2.5 s or less, INP of 200 ms or less, and CLS of 0.1 or less.
A page passes when at least 75 percent of real visits meet those thresholds.
08CORSCross-Origin Resource Sharing: CORS is a browser security mechanism that lets a server declare which other websites may read its responses when they make requests from JavaScript.
Browsers block cross-origin reads by default under the same-origin policy.
CORS headers from the server tell the browser which origins are allowed.
Preflight OPTIONS requests check permission before certain requests.
09CSRClient-Side Rendering: CSR is a rendering approach where the browser downloads a mostly empty HTML page plus JavaScript, then builds the page content on the user's device.
CSR builds the page in the browser with JavaScript.
The server sends a minimal HTML shell and a script bundle.
Navigation after the first load is fast and needs only data.
10CSSCascading Style Sheets: CSS is the style sheet language that controls how HTML content looks on screen, including colors, fonts, spacing, layout, and animations.
CSS controls the visual presentation of HTML.
A rule is a selector plus one or more property and value pairs.
The cascade and specificity decide which rule wins in a conflict.
11CSS Grid: CSS Grid is a two-dimensional CSS layout system that arranges elements into rows and columns at the same time, making complex page layouts simple to build.
display: grid turns an element into a grid container, and its direct children become grid items.
Grid controls rows and columns at the same time, so it is two-dimensional.
The fr unit, repeat(), and minmax() build flexible, responsive tracks.
12Debounce: Debouncing delays a function until a burst of events has paused for a set time, so a search box sends one request after typing stops, not one per keystroke.
Debounce waits until events stop for a set time, then runs once.
Throttle runs at most once per interval during continuous events.
Use debounce for search-as-you-type, autosave and validation.
13DOMDocument Object Model: The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.
The DOM represents a page as a tree of nodes.
JavaScript uses DOM APIs to read and modify the page.
Changes to the DOM are reflected on screen.
14Domain Name: A domain name is the human-readable address of a website, such as example.com, which the DNS system translates into the IP address of the server that hosts it.
A domain name is a readable address that DNS turns into an IP address.
It is read right to left: TLD, registered name, then subdomains.
Domains are registered through a registrar and must be renewed.
15ES ModulesECMAScript Modules: ES modules are JavaScript's built-in module system: each file keeps its own scope and shares code with other files through import and export.
ES modules share code with export and import, and keep everything else private.
They are part of the language standard and run in browsers and Node.js.
Static imports let tools see the dependency graph, which makes tree shaking possible.
16FlexboxCSS Flexible Box Layout: Flexbox is a CSS layout model that arranges items in a single row or column and controls how they grow, shrink, align, and share the available space.
display: flex makes an element a flex container and its children flex items.
Flexbox lays out items in one dimension: a row or a column.
justify-content aligns items on the main axis; align-items aligns them on the cross axis.
17Frontend: The frontend is the part of an application that runs in front of the user, usually in the browser, drawing the interface and responding to clicks and typing.
The frontend is the user-facing part of an application, usually running in the browser.
On the web it is built with HTML, CSS and JavaScript.
It gets and changes data by calling the backend through APIs.
18HTMLHyperText Markup Language: HTML is the markup language that defines the structure and content of web pages, such as headings, paragraphs, links, images, and forms.
HTML defines the structure and meaning of web page content.
Content is marked up with tags, and tags can carry attributes.
Browsers turn HTML into the DOM, which CSS and JavaScript work with.
19HTTPHypertext Transfer Protocol: HTTP is the protocol that browsers, apps, and servers use to exchange web pages and data through a simple cycle of requests and responses.
HTTP works as a series of requests and responses.
Methods like GET and POST describe the requested action.
Status codes like 200 and 404 summarize the result.
20HTTP Header: An HTTP header is a name-and-value line sent with an HTTP request or response, carrying details such as the content type, caching rules or credentials.
Headers are Name: value lines that describe an HTTP request or response.
Requests use them for credentials and preferences; responses, for format and handling.
Common ones include Content-Type, Authorization, Cache-Control and Set-Cookie.
21HTTP Status Code: An HTTP status code is a three-digit number a server sends with every response to tell the client whether the request succeeded, failed, or needs more action.
Every HTTP response includes a three-digit status code.
The first digit gives the class: 1xx info, 2xx success, 3xx redirect, 4xx client error, 5xx server error.
A 4xx error means the request should change; a 5xx error means the server failed.
22Hydration: Hydration is the step where JavaScript in the browser takes over server-rendered HTML, attaching event handlers and state so the page becomes interactive.
Hydration makes server-rendered or static HTML interactive.
The framework attaches event handlers and state to existing HTML.
Until hydration finishes, the page can look ready but not respond.
23iframeInline Frame: An iframe is an HTML element that embeds another web page inside the current page, commonly used for videos, maps, payment forms and third-party widgets.
An <iframe> embeds a separate web page, with its own DOM and scripts, inside the current page.
The same-origin policy isolates cross-origin iframes; they talk to the parent through postMessage().
The sandbox and allow attributes limit what an embedded page can do.
24JavaScript: JavaScript is the programming language that runs in web browsers to make pages interactive, and it also runs on servers through runtimes like Node.js.
JavaScript adds interactivity and logic to web pages.
Every major browser runs it without plugins.
It handles slow operations asynchronously with promises and async/await.
25jQuery: jQuery is a JavaScript library that made selecting elements, handling events, animating and making AJAX requests easy with one short, cross-browser syntax.
jQuery is a JavaScript library first released in 2006.
It smoothed over browser differences with the short $ syntax.
It made DOM selection, events, animation and AJAX simple.
26JSXJavaScript XML: JSX is a JavaScript syntax extension for writing HTML-like markup inside code, used mainly with React to describe what the user interface should look like.
JSX lets you write HTML-like markup inside JavaScript.
It was introduced with React in 2013.
A compiler turns each tag into a function call; TSX is the TypeScript form.
27Lazy Loading: Lazy loading is a technique that delays loading images, videos, scripts or other resources until they are actually needed, usually when they scroll into view.
Lazy loading defers fetching a resource until it is needed.
loading="lazy" on images and iframes enables native browser lazy loading.
IntersectionObserver and dynamic import() cover custom and JavaScript cases.
28Local Storage: Local storage is a browser feature that lets a website save text as key-value pairs on the user's device, where it stays even after the browser is closed.
Local storage saves string key-value pairs in the browser, separately for each origin.
Data persists after the browser closes, until code or the user deletes it.
sessionStorage has the same API, but its data is cleared when the tab closes.
29Media Query: A media query is a CSS rule that applies styles only when the device or browser matches conditions such as screen width, orientation, or a dark color scheme.
A media query applies CSS only when conditions about the device or viewport are true.
Width-based queries define breakpoints for responsive layouts.
Preference queries such as prefers-color-scheme and prefers-reduced-motion respect user settings.
30Minification: Minification is the process of shrinking code files by removing whitespace, comments and long names without changing behavior, so web pages download faster.
Minification removes whitespace, comments, and long names without changing behavior.
It applies to JavaScript, CSS, and HTML and usually runs in production builds.
Source maps connect minified code back to the original for debugging.
31Next.js: Next.js is a React framework that adds routing, server-side rendering, static generation and server code, so a whole web app can be built as one project.
Next.js is a React framework for full web applications.
Folders and files in the app directory define the routes.
Server Components run on the server; client components add interactivity.
32npmNode Package Manager: npm is Node.js's default package manager and the world's largest software registry; it downloads a project's dependencies and tracks their versions.
npm is Node.js's package manager and the largest JavaScript package registry.
package.json lists dependencies and scripts; package-lock.json pins exact versions.
npm install fills node_modules; npm run executes scripts; npx runs package commands.
33Polyfill: A polyfill is code that adds a modern web feature to older browsers that lack it, so developers can use the standard API everywhere without special cases.
A polyfill implements a missing web feature using features the browser already has.
It detects the feature first and only fills it in when it is absent.
Transpilers rewrite new syntax; polyfills add missing functions and objects at runtime.
34Progressive Enhancement: Progressive enhancement is a web design strategy that starts with a basic page that works for everyone, then adds richer features where browsers support them.
Start with content and functionality that work in plain HTML.
Add CSS for presentation and JavaScript for richer interaction as optional layers.
Core tasks keep working when scripts fail, load slowly, or are blocked.
35PWAProgressive Web App: A PWA is a website built with modern web APIs so it can be installed on a device, work offline, and behave much like a native app from a single codebase.
A PWA is a website that can be installed and used like an app.
It needs HTTPS, a web app manifest, and a service worker.
Service workers cache files so the app can work offline.
36React: React is an open-source JavaScript library for building user interfaces from reusable components that update automatically when their data changes.
React is a JavaScript library for building user interfaces.
UIs are made of reusable components that receive props and hold state.
JSX lets you write HTML-like markup inside JavaScript.
37React Hooks: React hooks are functions such as useState and useEffect that let a function component keep state, run side effects and share logic with others.
Hooks are functions starting with use that give function components React's features.
useState holds state; useEffect runs side effects after rendering.
Call hooks only at the top level, in the same order on every render.
38Responsive Design: Responsive design is an approach to building web pages whose layout, images, and text adapt automatically to any screen size, from phones to large monitors.
One responsive site adapts to phones, tablets, and desktops.
Flexible layouts, relative units, and media queries are the core tools.
Mobile-first means styling for small screens first, then enhancing.
39SEOSearch Engine Optimization: SEO is the practice of improving a website's content and technical setup so that search engines can find, understand, and rank its pages for relevant searches.
SEO helps pages get discovered, indexed, and ranked by search engines.
Technical SEO includes crawlable HTML, titles, canonical URLs, and sitemaps.
SSR and SSG make content visible to crawlers without JavaScript.
40Service Worker: A service worker is a script the browser runs in the background, apart from the page, to intercept network requests and enable offline use and push messages.
A service worker is a background script that can intercept a site's network requests.
It enables offline support, caching strategies, push notifications, and background sync.
It has no DOM access and requires HTTPS, except on localhost.
41SPASingle-Page Application: An SPA is a web application that loads a single HTML page and then updates content with JavaScript, so moving between views does not reload the page.
An SPA loads one HTML page and updates it with JavaScript.
Navigation is handled in the browser without full page reloads.
Data usually comes from an API as JSON.
42SSGStatic Site Generation: SSG is a technique that renders a website's pages to plain HTML files at build time, so servers or CDNs can deliver them instantly without extra work.
SSG renders pages to HTML files once, at build time.
Every visitor receives the same prebuilt files, often from a CDN.
Static pages are fast, cheap to host, and easy to scale.
43SSRServer-Side Rendering: SSR is a technique where the server builds the full HTML for a page on each request, so users and search engines receive ready-to-read content immediately.
SSR generates HTML on the server for each request.
Users see content sooner, especially on slow devices.
Crawlers receive complete content, which helps SEO.
44State Management: State management is how an application stores, updates and shares the data that changes while it runs, and keeps the interface in sync with it.
State is data that changes and affects what users see.
Local state stays in one component; shared state moves to context or a store.
Redux, Zustand, Pinia and NgRx are common store libraries.
45Svelte: Svelte is a front-end framework that compiles components into small, efficient JavaScript at build time instead of running a large framework in the browser.
Svelte compiles components to efficient JavaScript at build time.
It updates the DOM directly, without a virtual DOM.
Svelte 5 uses runes such as $state and $derived for reactivity.
46Tailwind CSS: Tailwind CSS is a utility-first CSS framework: instead of custom stylesheets, you style elements with small, single-purpose classes right in your HTML.
Tailwind CSS styles elements with small, single-purpose utility classes.
Prefixes such as md:, hover: and dark: apply styles conditionally.
A shared design scale keeps spacing, colors and sizes consistent.
47Throttling: Throttling makes a function run at most once per interval, however often it is called, so scroll and resize handlers update steadily without running every time.
Throttling runs a function at most once per interval, however often it is called.
It suits continuous actions such as scrolling, resizing and dragging.
Debouncing waits for the events to stop; throttling keeps a steady pace while they continue.
48Transpiler: A transpiler is a tool that translates source code from one language or language version into another at a similar level, such as TypeScript into JavaScript.
A transpiler converts source code into other source code at a similar level of abstraction.
Common jobs: TypeScript to JavaScript, modern JavaScript to older JavaScript, and JSX to function calls.
It parses code into an AST, transforms the tree, and prints new code.
49Tree Shaking: Tree shaking is a build optimization that removes code a program never uses from the final bundle, based on which ES module exports are actually imported.
Tree shaking drops exports that are never imported from the final bundle.
It depends on the static import and export syntax of ES modules.
Side effects can block removal; "sideEffects": false in package.json helps bundlers.
50TypeScript: TypeScript is a programming language built on JavaScript that adds static types, catching many bugs before the code runs, and compiles to plain JavaScript.
TypeScript is JavaScript plus optional static types.
Type errors are reported before the code runs.
Types are removed at build time, leaving plain JavaScript.
51UI ComponentUser Interface Component: A UI component is a self-contained, reusable piece of an interface, such as a button, a form or a card, that bundles its markup, style and behavior.
A UI component is a reusable, self-contained piece of an interface.
It takes inputs, called props, and renders its markup, styles and behavior from them.
Pages are built by nesting components inside each other.
52URLUniform Resource Locator: A URL is the address of a resource on the web, made of parts such as a scheme, a host, a path and a query string that tell a browser where and how to fetch it.
A URL is the address of a resource, combining where it is and how to fetch it.
Its main parts are the scheme, host, optional port, path, query string, and fragment.
The fragment after # stays in the browser and is not sent to the server.
53Virtual DOM: The virtual DOM is a lightweight copy of a page's element tree kept in JavaScript memory, which UI libraries compare to update the real DOM efficiently.
The virtual DOM is an in-memory JavaScript copy of the page's element tree.
Libraries diff the new virtual tree against the old one and update only what changed.
Its main benefit is declarative code, not raw speed over hand-written DOM updates.
54Vite: Vite is a fast build tool for web projects: it serves code to the browser almost instantly in development and bundles it into optimized files for production.
Vite is a fast development server and build tool for web projects.
In development it serves native ES modules and transforms files on demand.
Hot module replacement updates changed modules without a full reload.
55VueVue.js: Vue is an open-source JavaScript framework for building user interfaces from components, known for its gentle learning curve and reactive data.
Vue is a progressive JavaScript framework for building user interfaces.
Reactive data updates exactly the parts of the page that use it.
HTML-based templates use directives such as v-if, v-for and @click.
56Web Accessibility: Web accessibility is the practice of building websites that everyone can use, including people who rely on screen readers, keyboards, captions, or zoom.
Accessibility makes websites usable by people with disabilities.
WCAG is the main standard, and level AA is the common target.
Semantic HTML provides keyboard and screen reader support for free.
57Web Browser: A web browser is an application that fetches web pages from servers and turns their HTML, CSS, and JavaScript into the interactive pages you see on screen.
A browser requests web pages from servers and displays them.
Its rendering engine turns HTML and CSS into the DOM, a layout, and pixels.
A JavaScript engine runs page scripts that make pages interactive.
58Web Worker: A web worker is a browser feature that runs JavaScript on a background thread, so heavy computations don't freeze the page's user interface while they run.
A web worker runs JavaScript on a background thread, separate from the main UI thread.
The page and the worker talk only through postMessage() and message events.
Workers can't touch the DOM, but they can use fetch, timers, and WebAssembly.
59WebAssembly: WebAssembly is a compact binary code format that runs in web browsers at near-native speed, letting languages like C++, Rust, and Go power fast web code.
WebAssembly (Wasm) is a binary format that runs at near-native speed.
Code in languages like C++, Rust, and Go can be compiled to Wasm.
It runs in a secure sandbox and works alongside JavaScript.
60Webpack: Webpack is a module bundler that follows an app's imports and combines its JavaScript, CSS, images and other files into optimized bundles for the browser.
Webpack bundles an app's modules and assets into files for the browser.
It builds a dependency graph by following every import from an entry file.
Loaders handle non-JavaScript files; plugins extend the build.
61WebSocket: WebSocket is a protocol that keeps a single connection open between a browser and a server so both sides can send each other messages instantly at any time.
WebSocket provides a persistent, two-way connection between client and server.
It starts as an HTTP request that is upgraded to the WebSocket protocol.
Either side can send messages at any time with low overhead.