how-to

Short, illustrated explanations of how things work.

How the Internet Works

An interactive guide to what actually happens when you open a web page — DNS, packets, routing, TCP, TLS, HTTP, caches and the physical cables underneath — built around Packet Park, a low-poly isometric simulation in the spirit of the 90s theme-park builders.

Source: docs/ · Live site: https://everyways.github.io/how-to/ (once GitHub Pages is enabled, see below)

What the simulation shows

A request leaves a house, crosses an ISP, an internet exchange and a subsea cable to a data centre on another continent, and comes back. Four scenarios:

Scenario	What it demonstrates
Full journey (cache miss)	DNS lookup → TCP handshake → TLS → HTTP → origin fetch → response
Second visit (cache hit)	Why the edge cache makes the same page dramatically faster
A packet goes missing	Loss, missing acknowledgements, retransmission
Rush hour	Congestion, queueing, and senders backing off

Drag to pan, rotate the camera through four viewpoints, zoom, change speed. Keyboard: ← → rotate, + − zoom, space pause.

How it is built

Three static files, no build step, no dependencies, no external requests:

docs/
├── index.html   the article and the simulator's controls
├── styles.css   layout and theming (light + dark)
└── sim.js       the isometric renderer, world model and scene director

The simulation is plain JavaScript on a 2D canvas. There is no WebGL and no 3D library: buildings are axis-aligned boxes projected isometrically and drawn back-to-front with a painter's algorithm, which is how the games it borrows from did it too.

Key pieces in sim.js:

• Projection — rotXY rotates world tiles into one of four camera orientations, project flattens them to screen space, depthOf gives the sort key.
• World — NODES (buildings) and LINKS (cables as polylines) describe the map; routes are lists of node ids resolved into polylines by routePoints.
• Packets — spawn puts a cube on a route with a speed, an optional delay, an optional drop point, and an onArrive callback used to chain the next hop.
• Director — SCENARIOS holds the scripted steps; each step writes the narration, spawns packets, and completes when they have all landed.

To add a step, add an entry to a scenario's steps array. To add a building, add a node, a cable in LINKS, and a draw function in BUILDERS.

Running locally

Any static server works:

cd docs
python3 -m http.server 8000    # then open http://localhost:8000

Publishing

The site lives in docs/ so it can be published either way:

• Simplest: Settings → Pages → Source: Deploy from a branch, branch main, folder /docs.
• Or via Actions: the included .github/workflows/pages.yml deploys docs/ on every push to main — choose Source: GitHub Actions.

Accuracy

The explanations are deliberately simplified: the simulation collapses many hops into one, ignores IPv6 versus IPv4 details, and draws the DNS hierarchy as a single resolver. Every section is accurate in outline; none is complete. The links at the bottom of the page go to the rigorous versions.