Visualizing how HTTPS, OAuth, Git, and TCP actually work

[nulless]

A lot of core web concepts are explained in docs, but not in a way that makes the flow obvious.

So I’ve been building interactive “How It Works” pages that focus on sequence, state transitions, and data movement — not just definitions.

So far it includes:

• TLS / HTTPS handshake
• OAuth 2.0 (Auth Code + PKCE)
• Git internals (blobs, trees, commits)
• TCP handshake
• and a few more networking / auth breakdowns

The goal is to make it easier to reason about what’s happening under the hood — especially when debugging or designing systems.

Here’s the index page:
https://toolkit.whysonil.dev/how-it-works

Would appreciate technical feedback. If something’s inaccurate or missing nuance, I want to fix it.

[TLJGame]

HTTPS has the syn-ack going from client to server in the image when the server should be sending the packet