Labs

Systems you can poke at.

Every simulation from the lessons, on its own page. Change the inputs and watch what happens, then read the lesson that explains why. Free, no account needed.

• CSS

  Box model

  Change padding, border, margin and box-sizing and watch the rendered size of an element change.

  From: CSS fundamentals · Frontend Developer

• CSS

  Flexbox playground

  Flip direction, justify, align and wrap on a live flex container until the axes make sense.

  From: Flexbox & Grid · Frontend Developer

• JavaScript

  Event loop

  Step through the call stack, microtasks and tasks to see exactly when each callback runs.

  From: Async JavaScript · Frontend Developer

• Go

  Go channels

  Send, receive and close on buffered and unbuffered channels and see who blocks, and when.

  From: Concurrency · Backend with Go

• SQL

  SQL joins

  Run INNER, LEFT, RIGHT, FULL and CROSS joins on the same two tables and compare the rows.

  From: Joins · SQL & Databases

• SQL

  Index vs sequential scan

  Count the pages a sequential scan and a B-tree index lookup read to find one row.

  From: Indexes · SQL & Databases

• Git

  Git graph

  Type real Git commands and watch commits, branches and HEAD move on a live commit graph.

  From: Branching & merging · Git & Collaboration +2

• AI

  Tokenizer

  Split text into tokens with a toy vocabulary and see why code and rare words cost more.

  From: How LLMs work · AI Engineer

• AI

  Next-token sampling

  Adjust temperature, switch between greedy and sampled decoding, and watch each candidate token’s odds shift.

  From: How LLMs work · AI Engineer

• AI

  Embedding space

  Drop a query into a 2-D embedding space and rank its nearest neighbours by cosine similarity.

  From: Embeddings · AI Engineer

• Linux

  chmod calculator

  Toggle read, write and execute per class and read the octal mode and ls -l string together.

  From: Linux essentials · DevSecOps Engineer

• Cloud

  IAM policy evaluator

  Evaluate AWS IAM policies against a request and trace why it is allowed or denied.

  From: Cloud identity & access · DevSecOps Engineer

• Security

  Threat model explorer

  Walk a data-flow diagram, find the trust-boundary crossings and apply STRIDE to each flow.

  From: Threat modeling · DevSecOps Engineer

• Kubernetes

  NetworkPolicy reachability

  Apply Kubernetes NetworkPolicies and see which Pods can still reach which.

  From: Kubernetes security · DevSecOps Engineer

• Kubernetes

  HPA autoscaling

  Throw traffic at a Horizontal Pod Autoscaler and watch replicas, CPU and dropped requests over time.

  From: Autoscaling · DevSecOps Engineer

• Infrastructure

  Load balancer

  Compare balancing algorithms, health checks and consistent hashing under simulated load.

  From: Load balancing · DevSecOps Engineer +1

• System design

  Rate limiter

  Run one stream of requests through fixed window, sliding log, sliding counter and token bucket limiters side by side.

  From: Rate limiting · System Design

• System design

  Quorum reads and writes

  Pick N, W and R, take replicas down, and see exactly when a read misses the latest write.

  From: Replication · System Design

• System design

  Bloom filter

  Add words to a bit array, check membership, and watch false positives appear as it fills.

  From: Choosing a datastore · System Design