WebSims

Topic routing · ready

RabbitMQ Simulator

Follow messages through exchanges and queues.

JavaScript

jsv9000.app

JavaScript Visualizer 9000 Tasks vs Microtasks Run

a() b()

JSV9000 - Event Loop

Step through JavaScript’s event loop.

jsbubbl.es

JS Bubbles - Scope

See lexical scope as nested bubbles.

CSS

flexboxfroggy.com

FLEXBOX FROGGY Level 1 of 24

Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right using justify-content.

flex-start: Items align to the left side.
flex-end: Items align to the right side.
center: Items align at the center.
space-between: Equal spacing between items.
space-around: Equal spacing around items.

For example, justify-content: flex-end; moves the frog right.

1
2
3
4
5
6
7
8
9
10

#pond display: flex;

Flexbox Froggy

Learn Flexbox by guiding frogs home.

cssgridgarden.com

CSS Grid Garden

Water your garden with CSS Grid.

Sass Playground
Write Sass and inspect the compiled CSS.

Database

yashkantharia.github.io

SQL VisualiserSpeed: ━━━━━●━━　 Theme　 Reset

Execution PlanFROM oJOIN cWHERESELECT

SQL Editor Messages

SELECT o.id, c.name, o.quantity
FROM Orders o
JOIN Customers c
  ON o.customer_id = c.id
WHERE o.quantity > 1

▶ Run & Visualize

Process Visualization Idle

101Alicequantity: 1

102Bobquantity: 2

103Alicequantity: 1

Final Output

id	name	quantity
102	Bob	2

SQL Visualiser

Follow rows through SQL query execution.

Regex

regexr.com

.*Untitled PatternSave　 Newby gskinner

ExpressionJavaScript ▾　 Flags ▾

/\b[A-Z]\w*\b/g

Text　 Tests4 matches

Git makes Branches.

CSS grows Gardens.

ToolsReplace　 List　 Details Explain

Roll over tokens to explore your expression.

\bWord boundary. Start of a word.

[A-Z]Character set. An uppercase letter.

\w*Word. Zero or more word characters.

\bWord boundary. End of a word.

RegExr

Test patterns and understand each match.

Blockchain

blockchaindemo.io

Blockchain Demo

Experiment with blocks, mining, and consensus.

Block Programming

Beginners friendly

blockly.games

Blockly Games

Solve mazes with drag-and-drop programming blocks.

More to explore

AST

AST Explorer
Explore the syntax tree behind your code.

Data Structures

Request a simulator

Describe a simulator you wish existed, or point us to a polished interactive tool. A focused request is enough. We will handle the categorization and review.

No account neededEmail optional

Start with one choice

I have an idea Describe a simulator you wish existed. I know a tool Introduce a working interactive tool.

Tell us about the idea

Required unless marked optional.

Simulator idea

What should people be able to change or see?

Reference URL Optional

Tell us about the tool

Required unless marked optional.

Tool name

Public tool URL

What can people interact with?

Your relationship to the tool

I made or maintain it I use it I found it

I checked that the simulator currently loads and works.

Email for follow-up Optional Only used if we need to ask about this request.

No account required. Sent to WebSims through Formspree.

id	name	price
1	Laptop	1200
2	Mouse	25
3	Monitor	300

WebSims

Git

Learn Git Branching

Visualizing Git Concepts with D3

git rebase

Explain Git with D3

RabbitMQ