SIGNAL PATH

From your fingertip
to the server and back

What actually happens when you press a key? This is the complete journey — every stage, every protocol, every transformation — from nerve impulse to photon. Click any stage to see exactly how it works.

🫳→⌨️→🖥️→🌐→📍→📦→🔒→📨→☁️⟳📬→🔓→🎨→🖥️→✨→👁️

The Request

your intent travels out

🧠🫳👁️👂

Deep dive

You

A human being with intent

Everything starts here. Your brain's motor cortex fires, nerve signals race down your arm at 120 m/s, and your finger strikes a key.

🧠

Motor cortexDecides to act — press, click, swipe, speak

👁️

Visual systemReads the screen at ~60 Hz, guiding your actions

🫳

Hands & fingersExecute sub-millimeter movements on input surfaces

👂

Auditory systemProcesses audio feedback, voice-command loops

⚡ nerve impulses → mechanical force

⌨️🖱️🖲️📷🎤🕹️

Deep dive

Input Devices

Atoms → bits

Hardware transducers that convert physical actions into electrical signals. Each has its own protocol for reporting state to the computer.

⌨️

KeyboardKey matrix scanned → scan code → USB HID report

🖱️

Mouse / TrackpadOptical sensor or capacitive grid → delta-X/Y + button state

📷

CameraCMOS sensor → ISP → H.264 or MJPEG frames → USB Video Class

🎤

MicrophoneDiaphragm vibration → ADC → PCM audio samples → USB Audio Class

📱

TouchscreenCapacitive digitizer → multi-touch coordinates → I²C / USB HID

📡 electrical signals over USB / Bluetooth / I²C

🖥️⚙️🪟🔤

Deep dive

Operating System

Hardware abstraction → application events

The kernel receives raw device data, translates it through drivers and the HID subsystem, routes it through the window manager to the focused application.

⚙️

Device driversTranslate bus-specific data into OS-native input events

🧠

Kernel HID subsystemNormalizes scan codes → keycodes → key symbols

🪟

Window managerFocus tracking — which window gets this event?

🔤

Input method / UnicodeCompose sequences, CJK input, emoji picker → characters

♿

Accessibility layerVoiceOver / screen readers intercept and announce

📬 OS event dispatched to the focused application

🌐🔒📄🎨

Deep dive

Browser

Multi-process sandboxed runtime

The browser is an operating system within an operating system. It receives the OS event, routes it through its own process architecture, and dispatches it into the DOM.

🏗️

Browser processMain controller — UI, navigation, network, storage management

📦

Renderer processSandboxed per-site — handles DOM, CSS, JS for one origin

🎮

GPU processCompositing, WebGL, hardware video decode

📨

IPC (Mojo)Inter-process messages carry events across sandbox boundary

🛡️

Site isolationSecurity boundary — each origin runs in its own process

📨 IPC message → renderer process event queue

📄⚡🔄

Deep dive

DOM & JavaScript

Events fire, your code runs

The renderer dispatches a DOM event (keydown, click, input) through the capture → target → bubble chain. Your JavaScript event handler fires and decides to make a network request.

🌳

DOM event dispatchEvent propagates: capture phase → target → bubble phase

⚡

JavaScript engineV8 / SpiderMonkey / JSC — executes your handler

🔄

Event loopMacrotasks → microtasks → requestAnimationFrame → repeat

📡

fetch() / XHRYour code calls fetch(url) — a network request begins

Specs:Browser Platform (22)

📤 fetch() → Request object constructed

🏷️📍🔎🌍

Deep dive

URL Parsing & DNS

Hostname → IP address

The browser parses the URL (RFC 3986), extracts the hostname, and resolves it to an IP address via the DNS hierarchy — cache → stub resolver → recursive resolver → authoritative nameserver.

🏷️

URL parsingscheme://host:port/path?query#fragment — per RFC 3986

💾

DNS cache checkBrowser cache → OS cache → router cache

🔎

Recursive resolverISP DNS or 1.1.1.1 / 8.8.8.8 walks the tree

🌍

Root → TLD → AuthRoot servers → .com → example.com → A/AAAA record

🔐

DoH / DoTDNS-over-HTTPS (RFC 8484) or DNS-over-TLS encrypts the query

Specs:Naming & Addressing (4)

🔢 resolved IP address → initiate connection

📦🔀🌐

Deep dive

Transport

Reliable delivery across the internet

A TCP three-way handshake opens a connection (SYN → SYN-ACK → ACK), or QUIC does a 1-RTT handshake over UDP with built-in encryption. Your packets traverse multiple autonomous systems to reach the server.

🤝

TCP handshakeSYN → SYN-ACK → ACK — 1.5 round trips to connect

⚡

QUIC (RFC 9000)UDP-based, 0/1-RTT, built-in TLS 1.3, multiplexed streams

🔀

IP routingPackets hop through routers, BGP selects the path

📊

Congestion controlTCP Cubic or BBR — adapt to network conditions

Specs:Transport (5)

🔌 TCP/QUIC connection established

🔒📜🔑🛡️

Deep dive

TLS Encryption

Prove identity, encrypt everything

TLS 1.3 negotiates a cipher suite, the server proves its identity with an X.509 certificate, both sides derive a shared secret via ECDHE, and all subsequent data is encrypted.

👋

ClientHello / ServerHelloNegotiate TLS version, cipher suite, key share

📜

Certificate chainServer presents cert → intermediate → root CA

✅

ValidationBrowser checks chain, expiry, revocation (OCSP), CT logs

🔑

Key exchange (ECDHE)Both sides compute shared secret — forward secrecy

🛡️

HSTSBrowser remembers to always use HTTPS for this domain

Specs:Transport Security (2)Certificate Trust (1)

🔐 encrypted tunnel — all data now ciphertext

📨📋📦

Deep dive

HTTP Request

Method + URL + headers + body

Your request is framed as HTTP. HTTP/1.1 sends plaintext headers; HTTP/2 uses binary frames with HPACK compression; HTTP/3 runs HTTP/2 semantics over QUIC.

📝

Request lineGET /api/data HTTP/2 — method, path, version

📋

HeadersHost, Accept, Authorization, Cookie, User-Agent…

📦

BodyJSON, form data, multipart — if POST/PUT/PATCH

🔄

HTTP/2 multiplexingMultiple requests share one connection, no head-of-line blocking

Specs:HTTP (6)

📨 HTTP request frames in flight

🔑🍪🛡️📊

Deep dive

Application Layer

Auth, cookies, CORS, data formats

The request carries authentication tokens, cookies, and content headers. The browser enforces same-origin policy, CORS, and CSP before the request even leaves.

🔑

AuthenticationOAuth 2.0 Bearer token, JWT, API key in headers

🍪

CookiesAutomatically attached — SameSite, Secure, HttpOnly flags

🛡️

CORS preflightBrowser sends OPTIONS first for cross-origin requests

📊

Content-Typeapplication/json, multipart/form-data, text/html…

🔒

CSPContent Security Policy restricts what the page can load

Specs:State & Sessions (3)Authentication & Authorization (8)Data Formats (4)

📦 authenticated request → origin server

MIDPOINT

☁️⚙️🗄️💽

Deep dive

The Server

Your request arrives at its destination

After traversing the entire stack, your request hits the origin — load balancer → reverse proxy → application server → database → business logic → response.

⚖️

Load balancerDistributes traffic across server instances

🔄

Reverse proxyNginx/Caddy — TLS termination, routing, caching

⚙️

App serverYour code runs — Node.js, Go, Python, Rust, Java…

🗄️

DatabasePostgreSQL, Redis, S3 — read/write your data

📤

Response generationStatus code + headers + body assembled

📨 HTTP response begins the journey back

The Response

data flows back to you

📬📋✅

Deep dive

HTTP Response

Status + headers + body

The server responds with a status code, headers (Cache-Control, Set-Cookie, Content-Type), and body. The response travels back through HTTP framing, TLS encryption, and TCP/QUIC transport.

✅

Status code200 OK, 301 redirect, 404 not found, 500 error…

📋

Response headersCache-Control, ETag, Set-Cookie, Content-Encoding…

📦

Response bodyHTML document, JSON payload, binary data, streamed chunks

🗜️

CompressionBrotli or gzip — shrinks payload before TLS encryption

Specs:HTTP (6)

🔐 encrypted response traverses the internet in reverse

🔓📦🔀

Deep dive

Back Through the Wire

TLS decrypt → TCP reassemble → IP route home

The response travels back through every network layer in reverse. TLS decrypts the ciphertext, TCP reassembles segments in order, and IP routes packets back to your machine.

🔀

IP routingResponse packets traverse autonomous systems back to you

📦

TCP reassemblySegments arrive (possibly out of order) → reassembled

🔓

TLS decryptionSymmetric key decrypts the payload

📬

Socket deliveryData lands in the browser's network process

Specs:Transport (5)Transport Security (2)

📄 raw HTML/CSS/JS/JSON delivered to renderer

🌳🎨📐🖼️

Deep dive

Render Pipeline

Bytes → pixels in 16.67 ms

The browser's rendering engine parses HTML into DOM, CSS into CSSOM, merges into a render tree, calculates layout, paints, and composites — all targeting 60 fps (16.67 ms per frame).

📄

HTML → DOMStreaming parser builds the DOM tree incrementally

🎨

CSS → CSSOMStylesheets cascade into computed styles per element

📐

LayoutBox model, flexbox, grid — compute geometry for every node

🖌️

PaintConvert layout boxes into draw operations (paint records)

🧩

CompositeLayer tree → GPU tiles → final frame buffer

Specs:Browser Platform (22)

🖼️ frame buffer ready → GPU output

🖥️📺💡

Deep dive

Display

Electrons → photons

The GPU writes the frame buffer, a display cable (DisplayPort, HDMI, or internal eDP) carries the signal to the monitor, and the panel energizes individual pixels.

🎮

GPURasterizes tiles, composites layers → frame buffer

🔌

Display cableDisplayPort / HDMI / eDP — digital video signal

💡

Panel technologyLCD backlight + liquid crystals, or OLED self-emission

✨

Photons emittedEach subpixel (R/G/B) emits light at a specific intensity

✨ photons cross the gap → your retina

👁️🧠💡

Deep dive

Your Eyes & Brain

Photons → perception → understanding

Photons hit your retina, rod and cone cells fire, the optic nerve carries signals to the visual cortex, and your brain assembles meaning. You see the page. You understand. You act again.

👁️

Retina~120M rods + ~6M cones convert photons to nerve impulses

⚡

Optic nerve~1.2M fibers carry signals to the brain at ~150 m/s

🧠

Visual cortexV1 → V2 → V4 — edge detection, color, shape, meaning

💭

PerceptionYou see the result. You decide what to do next.

🔄

And then you press another key, click another link, speak another command — and the entire journey happens again, in milliseconds.

Explore the protocol stack →Browse all specs →