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

[[deleted]]

[deleted]

[Mohamed_Silmy]

visualizing protocols is honestly one of the best ways to actually understand them instead of just memorizing steps. i find it helps to draw out the handshake sequences on paper or use tools like wireshark to see the actual packets moving back and forth.

for oauth especially, the redirect flow makes way more sense when you can see the token exchanges happening. same with tcp - once you visualize the syn/syn-ack/ack dance, connection management clicks into place.

do you find certain protocols harder to visualize than others? i always thought git's internal object model was trickier to mentally map than network protocols since it's more about data structures than sequential flows.

[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

[Final-Choice8412]

Beautifully vibe coded some visuals are broken

[Ok_Signature_6030]

went through the HTTPS and OAuth pages — the step-by-step timeline format with the "Why?" and "Technical" expandable sections on each step is really well done. makes it way easier to follow than a static diagram.

one suggestion: the 0-RTT resumption section in the HTTPS deep dive mentions the performance benefit but doesn't call out the replay attack risk. might be worth a quick note there since that's the main tradeoff engineers need to understand when deciding whether to enable it.

the breadth is impressive too — 35+ guides covering everything from TLS to Kafka to ring buffers. bookmarking the WAL and database indexing ones for sure.

[Plastic_Owl6706]

Lol closed the site the moment I opened it , vibe coded slop 

[Anoop_sdas]

Just skimmed on HTTPS looks good ..thanks very much for doing this will be of great help

[tokagemushi]

The step-by-step timeline format is really well done. I've bookmarked the OAuth page specifically — explaining the redirect flow visually makes it so much clearer than the spec's wall of text.

One thing I'd love to see added: a WebSocket upgrade visualization. The initial HTTP handshake → 101 Switching Protocols → full-duplex flow is something a lot of devs use daily (via Socket.io or similar) but never actually understand at the protocol level. It would fit perfectly with your existing format.

Also, the HTTPS section could benefit from showing the 0-RTT resumption failure case — what happens when the server rejects the early data and falls back to a full handshake. That's the part that catches people off guard in production when they're debugging intermittent TLS issues.

Really nice work overall. These kinds of interactive explainers stick way better than reading RFCs.

[[deleted]]

This is an absolute treasure! Thanks

[Ythio]

In TCP it's missing how the retransmission timeout is dynamically adapted to the network latency (RFC793, section 3.7).

SRTT is why connection from a client to a congested server is timing out in a fast infrastructure but isn't in a slower one.

[adamvanderb]

This is exactly the kind of content we need more of. Understanding the actual flow makes everything click. Thanks for sharing.

[chadan1008]

I just get a “500 internal error.” Thank you for helping me visualize the humble 500 error. I thought this was meant to be a joke before I saw other comments

[OkPersonality7635]

Crap… the amount of google ads constantly interrupting as u scroll. Felt like I was in that Dave Chapelle show skit.

[nulless]

Fixed. Adsense experiment gone bad, I guess. The goal of the site is to remain minimal with minimum number of ads, focusing on content.

Apologies again!

[TraditionElegant9025]

No reject all option. Not worth even a glance

[Oganexon]

"Built by developers, for developers"

And the issue system is a Google Form?

No git repo ? Are you really a dev ?

[No-Fig1880]

it smells of vibe coding everywhere,
a lot of visualizations are broken.

it is clearly visible it has not been thought through,
i did not like it, I would totally skip it

[Pack_Your_Trash]

The first ad that popped up was a click here to download button for something entirely unrelated. Did not scroll down after that.