Protocol Stack Map
How internet protocols relate — from finding things (DNS, URI) and moving packets (IP, TCP) up through encryption (TLS), request/response (HTTP), and the application platform (HTML, OAuth, WebSocket).
Naming & Addressing
How machines find each other: DNS, URIs, IP addressing, domain registration4 specsDNS is the phone book of the internet. Every domain, email MX record, SPF/DKIM TXT record, and service discovery entry depends on it.
The record types (A, MX, TXT, CNAME) you configure in every DNS panel live in this spec. Know what you're setting.
Every URL in your app, API, auth redirect, webhook, or deep link is built on this grammar. Essential for routing, redirects, and OAuth callback validation.
Browsers parse URLs per this standard, not raw RFC 3986. Critical for client-side routing, form encoding, and cross-origin behavior.
Transport
How packets move reliably between endpoints: IP, TCP, UDP, QUIC5 specsYour servers, load balancers, firewalls, and security groups are all defined in IPv4/CIDR. Know the addressing model.
ISPs and cloud providers are rolling out IPv6 dual-stack. AAAA records, IPv6 CIDR, and dual-stack routing are real concerns.
Every HTTP request your app makes rides on TCP. Understanding TCP helps with latency, timeouts, keep-alives, and connection pooling.
DNS runs over UDP. QUIC and HTTP/3 run over UDP. Media and gaming often use UDP for low-latency delivery.
Transport Security
Encryption and authentication at the transport layer: TLS, HSTS2 specsEvery HTTPS connection, SMTP/IMAP over TLS, OAuth token exchange, and API call uses TLS. It is the foundational security layer.
Certificate Trust
Public key infrastructure, certificate issuance policy, Web PKI1 specGoverns every TLS certificate you buy or provision via Let's Encrypt/ACM/Digicert. Understanding BR helps with cert errors, CAA records, and domain validation requirements.
HTTP
Request/response application protocol: semantics, caching, HTTP/1.1, HTTP/35 specsThis is the core contract of every web API, browser request, and server response. You can't design or debug HTTP without knowing this.
Correct caching is the difference between a fast app and an expensive, slow one. Mis-configured cache headers cause stale data bugs and unnecessary origin load.
HTTP/1.1 is still the baseline. Load balancers, proxies, and debugging tools often present HTTP in this format. Understanding the wire format is essential.
HTTP/3 is the current performance frontier for web delivery. CDNs enable it automatically; understand it for performance tuning and debugging.
Error response formats are the most inconsistent part of most APIs. RFC 9457 gives you a standard shape that clients can handle generically.
State & Sessions
Browser identity, sessions, and cross-origin trust: cookies, origin model, CORS, CSP3 specsSessions, auth tokens, tracking, and CSRF defenses all run through cookies. Know SameSite, Secure, HttpOnly, and domain scoping to avoid security bugs.
Every browser-side API call to a different origin hits CORS. Misconfigured CORS is a top source of dev frustration and security holes.
A well-configured CSP is the strongest mitigation against XSS. Required by modern security audits and browser hardening.
Data Formats
How data is serialized and exchanged: JSON, multipart, media types4 specsJSON 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.
JSON Schema is the standard way to document and validate API request/response shapes. OpenAPI 3.1 fully adopts it. Know it if you design APIs.
Authentication & Authorization
Who can do what: OAuth 2.0, OpenID Connect, JWT, WebAuthn8 specsThe foundation of modern app auth: third-party login, API authorization, SSO, and machine-to-machine access all use OAuth 2.0.
Every API that accepts an OAuth access token uses bearer token transport. Know the header format and the security implications of each transport method.
Required for all public clients (SPAs, mobile apps, desktop apps). If you're building a non-confidential OAuth client, PKCE is mandatory per current best practice.
The original RFC 6749 allowed patterns now known to be insecure. RFC 9700 is the current security baseline — follow it, not just the base OAuth spec.
Sign-in with Google/Apple/GitHub all use OIDC. If your app authenticates users via a third party, you're using OIDC whether you know it or not.
JWTs are the token format for OIDC ID tokens and many OAuth implementations. Understanding the structure and security tradeoffs is essential.
When your app verifies a JWT from an identity provider, it fetches the public key as a JWK from the OIDC discovery endpoint.
Passkeys are the modern replacement for passwords. WebAuthn is the browser API. Every new auth system should evaluate it for primary or MFA flow.
Identity & Provisioning
User identity federation, directory, and provisioning: SCIM, SAML, LDAP2 specsEnterprise customers expect SCIM for automatic user lifecycle management from their IdP (Okta, Entra ID). Required for enterprise SaaS SSO packages.
Browser Platform
The application runtime: HTML, DOM, CSS, JavaScript, Storage, Workers, Web Components, Crypto, Streams, and platform APIs22 specsThe 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.
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.
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.
Input & Interaction
User input event models: Pointer, Touch, Keyboard, Gamepad, Drag & Drop, and interaction primitives7 specsThe 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.
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.
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.
Device Access & Sensors
Hardware and sensor APIs: Geolocation, Camera/Mic, Bluetooth, USB, Serial, Orientation, Permissions18 specsThe 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 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.
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.
Graphics & XR
GPU rendering and immersive experiences: WebGL, WebGPU, WebXR3 specsThe 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.
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.
Real-time
Bidirectional and streaming communication: WebSocket, WebTransport, SSE3 specsReal-time features — chat, live dashboards, collaborative editing, notifications, trading UIs — run on WebSockets. Every serious app eventually needs them.
The go-to protocol for server-push without WebSocket complexity. Used for AI/LLM streaming responses, live notifications, and real-time dashboards over plain HTTP.
For gaming, live collaboration, and real-time data where WebSocket's TCP head-of-line blocking matters. Runs over QUIC so multiple streams don't block each other.
WebRTC
Peer-to-peer audio/video/data in browsers: WebRTC, ICE, STUN, TURN, DTLS-SRTP5 specsVideo calls (Meet, Zoom web), voice calls, peer-to-peer file transfer, and collaborative tools. The browser API surface for real-time A/V communication.
NAT traversal is why WebRTC calls fail. ICE is how browsers find a working path between peers. Know it when debugging call connectivity failures.
STUN is how WebRTC discovers the public-facing address for peer-to-peer connections. Every WebRTC deployment needs a STUN server.
~15-20% of WebRTC calls require TURN relay because both peers are behind symmetric NAT. Without TURN, those calls fail silently.
Media Delivery
Audio, video, and asset delivery: MSE, EME, HTTP range requests2 specsVideo players (YouTube, Netflix, Twitch) use MSE for adaptive streaming. Required if you build a custom media player or do in-browser video processing.
Required for any platform that distributes premium or licensed video content (streaming services, pay-per-view, licensed media).
API Design
Standards for describing and building APIs: OpenAPI, GraphQL, gRPC, AsyncAPI5 specsOpenAPI is the de-facto standard for API documentation, code generation, mock servers, and contract testing. Most APIs you build should have an OpenAPI spec.
GraphQL solves over-fetching and under-fetching in complex UIs. If your frontend needs flexible, composable data queries across multiple entity types, GraphQL is the tool.
gRPC is the dominant service-to-service RPC in polyglot microservices. Smaller payloads and faster than JSON/REST for high-throughput internal APIs.
Protobuf is the wire format for gRPC and many high-performance internal APIs. Schemas are also used for event/message contracts in Kafka/pubsub systems.
If you have event-driven systems (Kafka, RabbitMQ, WebSocket APIs, IoT), AsyncAPI is the description format. Analogous to OpenAPI for async what OpenAPI is for REST.
Every email your company sends or receives goes through SMTP. You need this to configure mail servers, debug delivery failures, and understand SPF/DKIM/DMARC.
The structure of every email header you've ever seen is defined here. Essential for email deliverability debugging and understanding DKIM header signing.
Your email client (Outlook, Gmail app, Thunderbird, Apple Mail) uses IMAP or JMAP to read mail. Essential for mail server configuration and client integration.
Without a correct SPF record, your domain's email will fail or be deferred by major receivers (Gmail, Outlook). Set correctly as part of basic email deliverability.
DKIM is required to pass DMARC. Without it, your email won't be trusted by major providers. Set up alongside SPF as part of any serious email configuration.
VPN & Tunneling
Encrypted tunnels and virtual private networks: IPsec, IKEv2, WireGuard, GRE, L2TP10 specsIPsec is the dominant VPN technology for enterprise site-to-site links (AWS VPN, Azure VPN Gateway, on-prem firewalls). Understanding tunnel vs transport mode, SAs, and the SPD is essential for configuring and debugging VPN connectivity.
ESP is the workhorse of IPsec — every encrypted VPN tunnel uses it. When your cloud VPN shows 'Phase 2 SA established', that's an ESP SA. Understanding ESP's SPI, sequence numbers, and algorithm negotiation is key to VPN troubleshooting.
IKEv2 is how IPsec tunnels are established and rekeyed. Every cloud VPN gateway (AWS, GCP, Azure), enterprise firewall, and mobile VPN client uses IKEv2. Phase 1/Phase 2 failures are the #1 VPN debugging scenario.
WireGuard is replacing IPsec and OpenVPN for most new VPN deployments. Its simplicity (~4,000 lines of kernel code vs 400,000+ for OpenVPN/IPsec) makes it auditable. Used by Tailscale, Mullvad, Mozilla VPN, and most modern VPN services.
AH is mostly historical — ESP does everything AH does and adds encryption. However, AH appears in legacy configurations and exam material. Understanding why it was replaced helps explain modern IPsec design decisions.
GRE is the standard tunneling protocol for carrying routing protocols (OSPF, EIGRP) across IPsec links. AWS Transit Gateway, SD-WAN overlays, and many enterprise networks use GRE+IPsec. Also the basis for PPTP's data channel.
L2TP/IPsec was the default VPN protocol on every major OS for a decade. Understanding L2TP explains why many legacy VPN deployments use UDP port 1701, why they're always paired with IPsec, and how they differ from pure IPsec tunnel mode.
Mobile VPN clients constantly switch networks (Wi-Fi to cellular, roaming between APs). Without MOBIKE, every IP change tears down the VPN and forces a full IKEv2 re-handshake. MOBIKE is why modern mobile VPN clients reconnect instantly.
PPTP is a cautionary tale in protocol design. Understanding why it's broken (DES key space in MS-CHAPv2, RC4 key reuse in MPPE) teaches important lessons about protocol-level cryptographic failures. Never deploy it.
The IPsec RFC ecosystem is large and interconnected. When you need to find the right RFC for a specific algorithm, extension, or use case, this roadmap saves hours of cross-referencing.
Blockchain & Web3
Decentralized protocols and standards: EIPs/ERCs, BIPs, DIDs, Verifiable Credentials14 specsAll Ethereum JSON-RPC APIs (Infura, Alchemy, local nodes, MetaMask) use JSON-RPC 2.0. You need to know the protocol to interact with EVM chains.
Understanding EIP-1 gives you the map for reading all other EIPs. Know which type a given EIP is (Core, Networking, Interface, ERC) and what Final vs Draft status means.
ERC-20 is the most widely deployed standard in the Ethereum ecosystem. Every DeFi integration, exchange, and wallet interacts with ERC-20 tokens constantly.
NFTs, digital ownership, gaming assets, and on-chain certificates all use ERC-721. The standard that launched the NFT market.
EIP-712 is the standard for secure off-chain message signing used in permit() flows, meta-transactions, and Sign-In with Ethereum. Prevents blind signing attacks.
EIP-1559 is how Ethereum gas fees work since London fork (2021). Required knowledge for estimating transaction costs, building gas estimation into apps, and understanding ETH supply.
SIWE is the Web3 equivalent of Sign-In with Google. Enables dApps to authenticate users via their Ethereum address without a password, using their wallet signature.
Every modern cryptocurrency wallet (Ledger, Trezor, MetaMask, Coinbase Wallet) uses BIP-32 for key derivation. The foundation of the seed phrase model.
Seed phrases are the primary backup mechanism for all HD wallets. BIP-39 defines the 12/24 word format, wordlist, and checksum — everything about the backup experience.
Derivation paths determine which addresses you get from a seed phrase on each chain. BIP-44 paths (m/44'/60'/0'/0/0 for ETH) explain why the same seed gives different addresses on different wallets.
DIDs are the foundation of self-sovereign identity (SSI) and Web3 identity. They underpin Verifiable Credentials, Sign-In with Ethereum, and many blockchain identity schemes.
The W3C standard for digital credentials. Increasingly important for identity verification, age proofs, academic credentials, and government ID use cases.
More gas-efficient than deploying separate ERC-20 + ERC-721 contracts. Standard for gaming, semi-fungible assets, and multi-edition NFTs.
Every NFT's display (image, name, description, traits) is driven by this metadata schema. Off-chain storage of this JSON (IPFS, Arweave, HTTP) is a critical design decision.