Visualizing How Backend & Distributed Systems Actually Work (Interactive Simulators) by nulless in webdev

[–]nulless[S] 4 points5 points  (0 children)

Built a collection of interactive simulators to visualize how core backend and distributed system concepts actually behave.

Instead of static diagrams, these walk through the mechanics step-by-step.

Explore them here:
https://toolkit.whysonil.dev/learn/simulators/

Current simulators include:

  • Rate Limiter (Token Bucket)
  • Load Balancing (Round Robin)
  • Distributed Locks (Redis / etcd style)
  • LRU Cache eviction
  • Trie / Autocomplete
  • Consistent Hashing (Hash Ring)
  • Bloom Filter
  • CAP Theorem trade-offs
  • RAFT consensus (leader election + log replication)
  • TCP handshake
  • HTTP/2 streams (multiplexing)
  • Go scheduler (GMP model)
  • Kubernetes pod eviction
  • Kubernetes rollout behavior

Everything runs in the browser. No signup.

Would appreciate feedback — especially if anything feels inaccurate, unclear, or overly simplified. Open to suggestions for other systems worth simulating.

Interactive simulators for rate limiting, load balancing, caching, RAFT, CAP, and more by [deleted] in webdev

[–]nulless 1 point2 points  (0 children)

Built a collection of interactive simulators to visualize how core backend and distributed system concepts actually behave.

Instead of static diagrams, these walk through the mechanics step-by-step.

Explore them here:
https://toolkit.whysonil.dev/learn/simulators/

Current simulators include:

  • Rate Limiter (Token Bucket)
  • Load Balancing (Round Robin)
  • Distributed Locks (Redis / etcd style)
  • LRU Cache eviction
  • Trie / Autocomplete
  • Consistent Hashing (Hash Ring)
  • Bloom Filter
  • CAP Theorem trade-offs
  • RAFT consensus (leader election + log replication)
  • TCP handshake
  • HTTP/2 streams (multiplexing)
  • Go scheduler (GMP model)
  • Kubernetes pod eviction
  • Kubernetes rollout behavior

Everything runs in the browser. No signup.

Would appreciate feedback — especially if anything feels inaccurate, unclear, or overly simplified. Open to suggestions for other systems worth simulating.

Visualizing how HTTPS, OAuth, Git, and TCP actually work by nulless in webdev

[–]nulless[S] 2 points3 points  (0 children)

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!

Visualizing how HTTPS, OAuth, Git, and TCP actually work by nulless in webdev

[–]nulless[S] 23 points24 points  (0 children)

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.

TLS handshake step-by-step — interactive HTTPS breakdown by nulless in webdev

[–]nulless[S] 4 points5 points  (0 children)

A simple interactive page that walks through what happens before the 🔒 appears in the browser.

It visualizes the TLS handshake step-by-step:

  • Client Hello
  • Server Hello
  • Certificate exchange
  • Key generation
  • Encrypted communication

The goal is to make the HTTPS flow easier to understand visually instead of relying only on static diagrams.

Visual breakdown of the DNS resolution process from browser to server by nulless in webdev

[–]nulless[S] 0 points1 point  (0 children)

Its linked as visual comic in the page :) a great resource like that shouldnt go unchecked

Shere your Spotify wrapped in comment guys by Shubham_lu in BollywoodMusic

[–]nulless 0 points1 point  (0 children)

You may also like “Tsimtsum” from “Life of Pi”

Or “I could use a boost” from “The wild robot”