JS Queue Demo

Problem Statement

The hardest JavaScript concepts to learn are the invisible ones: why setTimeout(…,0) runs after a Promise.then, what order microtasks vs. macrotasks vs. requestAnimationFrame vs. requestIdleCallback fire in, how source code becomes execution, and how the browser turns HTML/CSS into pixels. Reading about the event loop rarely sticks — you have to see it.

Proposed Solution

JS Queue Demo (a full "JS Visualizer") makes these mechanisms visible and interactive. Its flagship Event Loop view lets you step through real source code and watch the call stack, microtask queue, macrotask queue, animation-frame queue, and idle-callback queue fill and drain in the correct priority order (microtask → macrotask → rAF → idle), with live console output appearing exactly when it would in a real runtime. Beyond the event loop, it visualizes the compilation pipeline, browser rendering, DOM/CSSOM construction, network, and React.

Full Solution Details

• Event Loop — editable source code, play/step/reset controls with a speed slider, and a 5-queue model (call stack, microtask, macrotask, animation frame, idle callback) animating in priority order, with synchronized console output.
• Compilation pipeline — visualizes source → execution stages.
• Browser rendering — how the browser renders, stage by stage (HTML input → stages).
• DOM/CSSOM — construction of the DOM and CSSOM from markup/styles.
• Network and React views round out the runtime/browser story.
• Editable inputs — most visualizers take your own code/HTML so you can experiment.

Technical Documentation

React + TypeScript + Vite, organized by Feature-Sliced Design — each visualizer is its own feature (browser-rendering, compilation-pipeline, dom-cssom, event-loop/queues, network, react) with its own screen/parts, helpers/transform-stages, hooks, and types. The core pattern is a transform-stages helper per feature that converts input (code/HTML/CSS) into an ordered list of discrete, animatable stages, which the screen then plays back step-by-step under user controls (play/step/speed). The event-loop simulator models the actual runtime semantics — separate queues with correct draining priority — rather than faking the animation, which is what makes it pedagogically accurate. Uses the author's meemaw for clean conditional rendering.

Tech Stack

React, TypeScript, Vite, meemaw, Lucide; Feature-Sliced Design; per-feature stage-transform + playback engine.

System Design

 Tabs: JS Runtime (Event Loop · Compilation) | Browser (Rendering · Network · DOM/CSSOM) | React

 Event Loop feature:
   editable source → transform-stages → ordered steps
        │  controls: play / step / reset / speed
        ▼
   animate: Call Stack → Microtask → Macrotask → Animation Frame → Idle
            (correct priority draining) → synchronized Console Output

 Each feature mirrors this: input → transform-stages → step-through visualization

Smart Architectural Decisions

• Model the real semantics, then animate. The event-loop view uses genuinely separate queues with correct priority draining (microtask → macrotask → rAF → idle) — so it teaches the truth, not a hand-wavy animation. Pedagogical accuracy is the whole value.
• transform-stages as a shared mental model. Every visualizer reduces its input to an ordered list of discrete stages and plays them back — one reusable pattern across event loop, compilation, rendering, and DOM/CSSOM, which is why the app could grow to six visualizers cleanly.
• Editable inputs. Letting users run their own code/HTML turns it from a fixed animation into an experimentation sandbox — far better for learning.
• Feature-Sliced isolation keeps six distinct, complex visualizers from entangling.

Impacts

Turns the most notoriously confusing parts of JavaScript and the browser into something you can step through and see — a genuinely useful learning tool (and a strong demonstration that the author deeply understands these internals himself).

Demonstrated Skills

Deep understanding of JS runtime internals (event loop, microtask/macrotask/rAF/idle priority) and browser internals (compilation, rendering, DOM/CSSOM); building an accurate simulation engine (stage transforms + playback); React + Feature-Sliced Design across many features; interactive/animated UI; technical teaching and explanation.