Web Platform

JSON is the lingua franca of web APIs. RFC 8259 is short and worth reading once — it clarifies edge cases around numbers, encoding, and trailing commas.

Every file upload in your app uses this. Know the MIME boundary, Content-Disposition, and Content-Type mechanics to build and debug file upload APIs.

Correct Content-Type headers drive content negotiation, browser rendering, and API behavior. Wrong types cause security and parsing bugs.

The spec behind every HTML page, form, and browser API. The canonical reference for how browsers actually parse and process HTML.

Every frontend framework (React, Vue, Svelte) ultimately produces DOM operations. Understanding the event model and tree structure prevents subtle bugs.

Every fetch() call and XHR request is governed by this spec. It also defines CORS behavior in detail.

CSS drives all visual layout. Key modules: Grid, Flexbox, Custom Properties, Cascade layers, Container Queries. The snapshot identifies what's stable vs experimental.

JavaScript is the execution model of the web. The spec is the canonical reference for language semantics — closures, coercion, prototype lookup, module resolution, and async scheduling.

Every component framework (React, Vue, Lit, Angular) either compiles to or interacts with these primitives. Shadow DOM is how browsers isolate component internals. Understanding the native model prevents framework lock-in.

The simplest client-side persistence. Used everywhere for auth tokens, user preferences, feature flags, and cross-tab state. Know the 5 MB limit, synchronous blocking, and origin scoping rules.

The foundational event model that every web application uses. Understanding event propagation (capture, target, bubble), event.preventDefault(), and the difference between key and code prevents input handling bugs.

The modern way to handle all pointing devices with one code path. Replaces separate mouse + touch event handling. Required for drawing apps, drag interactions, and multi-touch. Pressure and tilt enable pen/stylus features.

The gating mechanism for every sensitive browser API. Check permission state before requesting access to avoid unexpected prompt dialogs. The change event lets you react when users revoke permissions in browser settings.

Required for maps, location-based search, delivery tracking, geofencing, and any feature that needs the user's physical location. Understanding accuracy levels (GPS vs Wi-Fi vs IP) and the permission flow is essential.

Required for video calls, audio recording, photo capture, barcode scanning, and AR experiences. Understanding constraints, track lifecycle (enabled, muted, ended), and device enumeration prevents broken camera/mic UX.

The established GPU rendering API in browsers. Powers Three.js, Babylon.js, PixiJS, MapboxGL, Google Earth, and countless games and visualizations. WebGL 2.0 has near-universal support and is the baseline for serious graphics work.

Service Workers power offline support, background sync, and push notifications. Required for serious PWA/installable app behavior.

Required for Add to Home Screen / Install App functionality on iOS and Android. Defines how your web app presents when installed as a native-like app.

The bridge between CSS animations and JavaScript control. Required for complex choreography, scroll-driven animations, and animation libraries (GSAP, Motion One) that target this API.

The only serious client-side database in browsers. Required for offline-first apps, large dataset caching, and any storage that outgrows localStorage's 5 MB or needs indexed queries.

Any CPU-intensive work (parsing, compression, crypto, WASM) must run off the main thread to keep UI responsive. Workers are the browser's concurrency primitive — understand their message passing model and limitations (no DOM access).

The correct way to do crypto in the browser — no npm packages needed. Required for client-side encryption, token signing, secure key storage, and WebAuthn integration. Also available in Node.js and Deno.

Streams are how modern browsers handle large data: fetch response bodies, file reads, compression, and encoding are all stream-based. Understanding backpressure and piping is essential for efficient data processing.

The standard way to implement lazy loading, infinite scroll, ad viewability tracking, and scroll-triggered animations. Far more performant than scroll event listeners — runs off the main thread.

The data source behind Core Web Vitals (LCP, FID/INP, CLS), RUM (Real User Monitoring), and performance debugging. PerformanceObserver is the modern API; the older performance.timing is deprecated.

Every SPA router (React Router, Next.js, Vue Router) is built on pushState/popstate. The Navigation API is the modern replacement with better intercept semantics. Understanding the history stack prevents navigation bugs.

Required for web push notifications — the re-engagement channel for PWAs. Works with Service Workers and the Notifications API. Understanding VAPID and the subscription lifecycle prevents broken push implementations.

Still the primary touch API on iOS Safari (Pointer Events support is newer and incomplete). Required for pinch-to-zoom, swipe gestures, and touch-specific UX. Most apps need both Touch and Pointer Events.

Required for building rich text editors (Notion, Google Docs, ProseMirror, Tiptap). The beforeinput event with inputType lets you intercept and customize every editing operation before it happens.

Powers file upload drop zones, sortable lists, kanban boards, and drag-based UI. The DataTransfer API is shared with clipboard events. Understanding dragover prevention (preventDefault) and data transfer types is essential.

The display side of web notifications (Push API handles delivery). Used for chat messages, calendar reminders, and real-time alerts. Understanding the permission model and notification lifecycle prevents spam UX.

Required for video players, presentations, games, and immersive experiences. Understanding the security restrictions (user gesture required, no cross-origin iframes by default) prevents fullscreen request failures.

Essential for pausing animations/video, reducing network requests, and saving state when the user navigates away. Analytics and session tracking depend on visibility events to measure actual engagement time.

Required for mobile games, video players, and apps that need landscape mode. Lock prevents disorienting rotation during gameplay or presentations. Understanding the fullscreen requirement for lock() prevents failures.

Required for recipe apps, presentation slides, navigation/maps, music players, and any app where the screen must stay on. The automatic release on visibility change means you must re-acquire on visibilitychange.

Required for voice memos, video recording, screen recording tools, and any app that captures media. Understanding chunk-based recording (timeslice parameter) enables real-time upload during recording.

Required for screen sharing in video calls, screen recording tools, and remote support apps. Understanding the user-driven selection (browser shows picker) and tab audio capture enables proper UX.

Enables motion-based UX (shake to undo, tilt to scroll), compass features, step counting, and AR experiences. The unified permission model means understanding the base Sensor lifecycle covers all sensor types.

The successor to WebGL with dramatically better performance and GPU compute support. Enables ML inference on GPU, real-time ray tracing, physics simulation, and AAA-quality rendering in the browser. Ships in Chrome, Edge, and Firefox.

The standard for browser-based VR/AR: headset rendering, controller input, room-scale tracking, and AR overlays. Supports Meta Quest, Apple Vision Pro, HoloLens, and phone-based AR. Works with WebGL and WebGPU for rendering.

Essential for responsive components that need to adapt to their container size (not just viewport). Powers container-query polyfills, responsive charts, and layout-aware components.

Required for any 'Copy to clipboard' button, paste-from-image, or rich text editing. The async API requires user gesture and permissions — understanding the security model prevents frustrating clipboard failures.

Used by every file upload, image preview, drag-and-drop, and client-side file processing feature. Blob URLs are the bridge between binary data and DOM elements (img, video, a[download]).

Required whenever you work with binary data in JavaScript — ArrayBuffers from fetch, WebSocket binary frames, file contents, or crypto operations all need encoding/decoding. UTF-8 is the web's canonical encoding.

Required for web-based games and interactive experiences. The polling model (no events for button presses) means you need a requestAnimationFrame loop. Supports Xbox, PlayStation, Switch Pro, and generic HID controllers.

Required for rich text editors, annotation tools, and any feature that reads or manipulates text selection. The Selection/Range model is how browsers track cursor position in contenteditable regions.

Enables web apps to communicate with BLE devices: fitness trackers, smart home sensors, medical devices, and custom hardware. The user-driven device picker (no background scanning) provides the security model.

Enables web-based firmware updates, microcontroller programming (Arduino, ESP32), and custom USB device control without native drivers. Chrome-only but the only web path to raw USB access.

Enables web-based communication with serial devices: Arduino/microcontroller consoles, GPS receivers, lab equipment, POS terminals, and CNC machines. Uses the Streams API for data flow.

Enables web apps to access HID devices that the Gamepad API doesn't cover: custom controllers, macro pads, LED strips, barcode scanners, and specialized input devices. Complements Gamepad API for non-standard controllers.

Required for web-based music production tools, DAWs, visualizers, and MIDI controller integration. SysEx access requires explicit user permission due to the ability to reprogram devices.

Enables haptic feedback for notifications, game events, form validation errors, and timer alerts on mobile devices. Simple API but important for mobile-first UX and accessibility.

Required for video players, video calls, and live streaming UIs that need to stay visible while multitasking. Document PiP extends this to custom player controls, chat overlays, and productivity widgets.