The workbench
Think by making.
Small experiments that run in your browser. Pick one. It opens here, on the bench.
Bench 01 / Beneath the interface
How software runs.
Scheduling, compiled code, and search, one small view at a time.
The event-loop explorer
Predict the console order of a short script. Then step through the call stack and the queues.
console.log("start");setTimeout(() => console.log("timer"), 0);Promise.resolve().then(() => console.log("promise"));console.log("end");
Call stack
- script
Microtasks
- empty
Tasks (by time)
now 0 ms- empty
Console
No output yet.
Use the arrow keys to step.
The script starts.
console.log("text")- Prints the text. Use a string in quotes or a whole number.
setTimeout(() => …, 10)- Runs the callback as a task after the delay. No delay means 0.
Promise.resolve().then(() => …)- Runs the callback as a microtask. Add more .then(…) for a chain.
queueMicrotask(() => …)- Runs the callback as a microtask.
async function name() { … }- Declares a function. Its body can use every rule here.
name()- Calls an async function that you declared above.
await null- Stops an async function for one microtask turn. await Promise.resolve() does the same.
() => …- A callback: one console.log, or { … } with more statements inside.
End each statement with ; or a new line. Text after // is a comment. Use a delay of 0, 10, 20, … up to 1000. Up to 1,200 characters, 30 lines, 12 functions, and 4 levels of nesting.
- What this shows
- Synchronous code runs first. Then the browser runs every microtask. Then it takes the next task.
- Honest note
- This teaching model leaves out rendering and requestAnimationFrame. The check runs the same program in a worker in your browser. It never runs code as text.
Bench 02 / Many hands
Building together.
People and AI change one piece of work. Watch the work stay whole.
Bench 03 / Things in motion
A ball and an arm.
A cricket delivery and a robot arm. Each one moves by a small rule.
Field notes
The experiments run locally in your browser.
Small enough to inspect.