# JavaScript Async Explained Like a Grocery Store 🛒

aarthirs — Sat, 13 Jun 2026 07:32:12 +0000

When I first learned JavaScript's Event Loop, I kept reading explanations like:

"Asynchronous tasks are offloaded to Web APIs and their callbacks are placed into the Microtask Queue or Macrotask Queue."

I memorized the words.

But I didn't actually understand what was happening.

Then I started thinking about JavaScript like a grocery store.

JavaScript = One Cashier

Imagine a store with only one cashier.

The cashier can only serve one customer at a time.

That's JavaScript.


`console.log("A");
console.log("B");
console.log("C");`

Output:

A
B
C

Simple. One task after another.

The Problem

Now imagine a customer says:

"Wait 5 seconds before helping the next customer."

If the cashier literally waited 5 seconds, the entire store would stop moving.

That's exactly what would happen if JavaScript handled timers itself.

Browser Web APIs = Helpers

Instead, JavaScript asks a helper:

`setTimeout(() => {
  console.log("Hello");
}, 5000);`

JavaScript says:

"Hey Browser, can you watch this timer for me?"

The browser helper takes the job.

JavaScript immediately continues working.

Start
End

After 5 seconds, the helper comes back and says:

"The timer finished."

Callback Queue = Waiting Line

The browser cannot interrupt JavaScript directly.

So it places the callback into a waiting line.

Browser Helper
      ↓
Callback Queue

The callback waits until JavaScript is free.

Event Loop = Store Manager

The Event Loop is like a manager constantly checking:

Is the cashier busy?

If yes:

Wait

If no:

Take the next customer from the waiting line

That's all the Event Loop does.

Why Does Promise Run Before setTimeout?

`console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");`

Output:

Start
End
Promise
Timeout

Because JavaScript has two waiting lines:

High Priority Line

Promise.then()
queueMicrotask()

Normal Line

setTimeout()
setInterval()
DOM events

The Event Loop always clears the high-priority line first.

That's why Promise executes before setTimeout.

What About fetch()?

`fetch("/users")
  .then(res => res.json())
  .then(data => console.log(data));`

The browser handles the network request.

JavaScript doesn't sit around waiting for the server.

Once the response arrives, the callback gets added to the queue and runs when JavaScript is ready.

Why Do Web Workers Exist?

Imagine the cashier receives a task that takes 10 minutes.

Nobody else gets served.

The store freezes.

That's what happens when JavaScript performs heavy calculations on the main thread.

Web Workers solve this by hiring another cashier.

Heavy work runs on a separate thread while the main UI remains responsive.

Final Mental Model

Whenever you see async JavaScript:

JavaScript = Cashier

Browser Web APIs = Helpers

Callback Queue = Waiting Line

Event Loop = Manager

Web Workers = Extra Cashiers

Once this model clicks, the Event Loop becomes much easier to understand than memorizing definitions.

# The Turing Dial: A Solstice Cryptography Protocol

aarthirs — Sun, 07 Jun 2026 15:19:26 +0000

This is a submission for the June Solstice Game Jam

How It Works (The Theme Connection)
The game maps the physical passage of time during the Solstice to computational logic constraints. As the game clock cycles from day to night, your processing framework degrades across three environmental phases:

Sunrise (Unary): Pure binary processing.
High Noon (Boolean): Advanced algebraic logic gates (AND, OR, NOT).
Midnight (Enigma): Hard cryptographic bit-parity challenges that honor Turing's codebreaking at Bletchley Park.

Behind the Curtain: Best Google AI Usage

Instead of using the Gemini API as a simple chat box, Gemini 2.5 Flash acts as our automated Procedural Level Designer.

Every time the environment transitions, the system fires a background request to Google AI Studio. Gemini dynamically parses the current game state and feeds back:

A unique, context-aware matrix puzzle directive (puzzleHint).
The dynamic numeric or parity solution ruleset (solutionKey).
A curated, inspiring quote reflecting Alan Turing's legacy, Juneteenth, or Pride Month (historyQuote).

If the network connection ever fails, a native hardware fallback loop steps in to ensure seamless offline gameplay.

Built With

Pure HTML5 / CSS Grid (with a custom CRT scanline terminal effect)
Modular Vanilla JavaScript
Official @google/genai SDK via CDN

Play the Game

GitHub Repository: github
Live Demo:vid demo

DEV Community: aarthirs