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.

Every upload, download, attachment, and asset pipeline crosses these layers. Misunderstanding header vs envelope causes MIME spoofing bugs, parser differentials, and broken file validation. Start here before diving into individual format specs.

Extension spoofing (`virus.exe` → `photo.jpg`) and MIME spoofing are common attack vectors. Magic-byte detection is the first line of defense in upload validation, antivirus, and content sniffing.

JSON cannot carry raw binary; Base64 is how file bytes appear in API responses, data URLs, PEM blocks, and JWT segments. Know the difference between standard Base64 and Base64url.

PNG is the default lossless image format on the web — screenshots, UI assets, icons with transparency, and OCR-friendly graphics. Chunk structure matters for metadata stripping and security review.

JPEG dominates photo storage and delivery. EXIF metadata (GPS, camera, orientation) lives in APP1 markers — relevant for privacy, image processing, and upload pipelines.

SVG powers icons, logos, charts, and interactive graphics. Because it's XML (not opaque binary), XSS and SSRF via embedded references are real risks in upload pipelines.

PDF is the standard for invoices, reports, contracts, and printable documents. Object/stream structure, encryption, and embedded content matter for parsing, redaction, and security review.

ZIP is everywhere — downloads, backups, Java JARs, Office Open XML. Central-directory-at-end structure, path traversal (`../../`), and zip bombs are critical security concerns.

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.

PEM is how keys and certificates appear in `.pem` files, environment variables, and Kubernetes secrets. The BEGIN/END lines are the envelope; the Base64 block is the payload.

GIF remains common for short animated loops and legacy assets. GIF89a extension blocks enable animation timing and transparent pixels.

WebP delivers smaller files than JPEG/PNG for equivalent quality — widely used for web delivery via `<picture>`, CDN transforms, and Next.js image optimization.

AVIF is the next-generation web image format — `<picture>` fallbacks, CDN support, and browser adoption make it worth knowing for asset pipelines and performance work.

`.gz` files, HTTP Content-Encoding: gzip, and tarball distribution (`.tar.gz`) all depend on this format. Know header vs raw DEFLATE stream.

Docker layers, npm pack, Linux package sources, and backup workflows use tar. ustar and PAX extensions define long filenames and metadata.

iPhone photos default to HEIC — upload pipelines, image conversion services, and CDN transcoding need to handle this container. AVIF shares the same HEIF structure with AV1 instead of HEVC.

CBOR is the binary envelope behind COSE cryptographic messages and many constrained-device protocols. Typed length-prefixed encoding without a schema — unlike Protobuf.

XML remains embedded in enterprise integrations, document formats, and legacy APIs. Namespaces, entity expansion (XXE), and DTD processing are security-critical in parsers.

YAML configs power most DevOps tooling. Anchor/alias and implicit typing cause subtle bugs — know why `countries: [NO, US]` parses as `[false, null]` in YAML 1.1.

OOXML is the dominant enterprise document format. Every `.docx` is a ZIP you can unzip — knowing the part layout enables templating, mail-merge, and malware scanning.

Parquet is the standard lakehouse/warehouse on-disk format (Spark, DuckDB, BigQuery export, Snowflake). Column chunk layout explains why analytics workloads beat row-oriented JSON/CSV.

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.

WOFF2 is the standard delivery format for `@font-face` on the web — smaller than raw TTF/OTF. Font table structure comes from OpenType; WOFF2 is the transport envelope.

Legacy Windows bitmap format still encountered in scanners, game assets, and older pipelines. Simple header + raw pixels — useful for understanding uncompressed raster layout.

TIFF is the archival/print industry standard — scanned documents, GIS, medical imaging, and DNG raw photos. IFD tag model is a classic variable-header design.

Favicons (`favicon.ico`) and Windows app icons use this format. Modern favicons often use PNG inside ICO containers or switch to `<link rel="icon">` with PNG/SVG.

Common on Linux for compressed tarballs and package sources. Block header + CRC footer structure; decompression bombs are a security concern like gzip/zip.

7z often achieves better compression than ZIP/gzip. Understanding stream/header separation helps when debugging extraction tools and archive security policies.

MessagePack is a practical middle ground when JSON is too large and Protobuf is too rigid. Know tag-byte structure for debugging wire captures.

ODF is the default format for LibreOffice/OpenOffice and some government mandates. ZIP envelope + XML payload pattern mirrors OOXML design.

Arrow is the interchange layer between Python/R/JVM analytics, DuckDB, and Parquet readers. IPC framing is how columnar data crosses process boundaries without JSON overhead.

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.