Browser Playground
This page collects interactive demos from the site. The playground is not a replacement for a full training environment; it lets readers inspect state changes, parameter effects, and output boundaries before returning to the article or download bundle for code-level verification.
| Module | Question to observe | Evidence to check | Note |
|---|---|---|---|
| Algorithm lab | Search state, pruning, path rollback, and complexity changes. | Step trace, current state, and failed input. | Small demos prioritize mechanism clarity over large data volume. |
| Deep learning math | Matrix shapes, gradient flow, receptive fields, and attention weights. | Input matrix, output matrix, and hand-check notes. | Numerical examples simplify optimization details from real frameworks. |
| Networking fundamentals | DNS cache, TLS handshake, proxy boundaries, and cache revalidation. | Timeline, status code, cache hit or miss. | Networking demos are for education and troubleshooting literacy. |
| Animation showcase | How article structure can become a compact visual sequence. | Keyframe, topic, and related article link. | Animations are navigational aids, not replacements for article text. |
Algorithm playground
Watch the algorithm while it runs
The playground currently includes eight queens, Iris K-means, and a handwritten digit recognizer, all running entirely in the browser.
Related visualization tool
The LLM visualizer is also listed under the algorithm playground
Use this entry when you want to inspect tokens, attention, sampling, and KV cache in the LLM visualizer.
Deep learning math visualizer
Compute gradients, optimizers, convolution, and attention
Every module runs locally in the browser with fixed toy values so formulas land on matrices, paths, and heatmaps.
Network fundamentals visualizer
From DNS to CDN: change parameters and inspect request time
Every value is computed locally in the browser and corresponds to deterministic lab scenarios; no probing requests are sent.
Remotion animations
Short animations that make algorithm steps visible
These videos are rendered with Remotion and lazy-loaded so the first screen stays fast.
Short animation
CNN Convolution Scan
See how a 3x3 kernel slides, multiplies, sums, and builds a feature map in eight seconds.
Short animation
Matrix Chain Rule
Connect y = Wx + b, MSE loss, and the outer-product form of dL/dW.
Short animation
Backpropagation Graph
Watch the softmax cross-entropy signal move through W2, ReLU, and W1.
Short animation
Optimizer Geometry
Compare gradient descent, momentum, and Adam on the same quadratic loss surface.
Short animation
Convolution Receptive Field
Use a 5x5 input and 3x3 kernel to show output size, local windows, and im2col.
Short animation
Attention Heatmap
Put QK^T / sqrt(dk), softmax weights, masking, and KV cache into one matrix view.
Short animation
DNS Resolution and TTL Cache
Compare recursive miss latency with a TTL-window cache hit path.
Short animation
CIDR Routing and MTU
Show longest-prefix selection and segmentation of a 3600-byte payload.
Short animation
TCP ACK, Retransmission, and cwnd
Use one fixed loss event to expose ACK stalling and window reduction.
Short animation
TLS 1.3 Handshake Flights
Separate key shares, certificate verification, and first-request RTT.
Short animation
HTTP/3 and CDN Waterfall
Compare handshake RTT reduction with CDN cache-hit savings.
Short animation
K-means Iteration
Watch assignment, centroid movement, and SSE reduction as visible clustering steps.
Short animation
Eight Queens Backtracking
A board animation for row-by-row tries, conflict pruning, and backtracking intuition.
Privacy and execution model
The demos prefer browser-side execution. Unless a page states otherwise, sample input is not uploaded as training data. If a demo needs a model, CSV, or image file, the related download page explains what the file is and which article it supports.