JavaScript Guide
Language internals, runtime, frameworks — how things work at code level
⚙️ Language Internals
The Event Loop — Why setTimeout(fn, 0) Doesn't Execute Immediately
Execution order of Call Stack, Task Queue, and Microtask Queue
Why JavaScript is single-threaded yet async: the event loop pulls callbacks from Task Queue when Call Stack is empty. Promise .then goes to Microtask Queue, executing before regular Tasks.
Closures & Scope Chain — How Functions Remember Outer Variables
The internal structure of scope chains created by Lexical Environment objects
Closures capture and preserve the Lexical Environment at function creation time. When a function references outer scope variables, that Lexical Environment object survives garbage collection.
Prototype Chain — Inheritance Before class Existed
The relationship between __proto__, prototype, and Object.create()
JavaScript's class is syntactic sugar. Internally it works via prototype chains. An object's __proto__ points to its parent, and property lookup follows the chain upward.
Promise Internals — How then() Enters the Microtask Queue
Promise's 3 states and the execution mechanism of thenable chaining
Promise is a state machine with 3 states: pending/fulfilled/rejected. On resolve(), callbacks registered via then enter the Microtask Queue. async/await is syntactic sugar for Promises.
🔷 TypeScript
TypeScript Type System — It All Disappears After Compilation
What structural typing is and why it differs from Java's nominal typing
TypeScript types exist only at compile time — zero trace in runtime JavaScript. Unlike Java, compatibility is judged by "structure" not "name" (Structural Typing).
TypeScript Generics — Understanding T Once and for All
Using "types decided later" in functions, classes, and interfaces
T is a placeholder for "unknown type." T becomes a concrete type at call time. Without generics you'd use any, and any defeats the purpose of TypeScript.
Discriminated Unions — The Pattern Used Instead of Enums in TypeScript
Branch on a type field and TypeScript auto-narrows types in each branch
Pattern distinguishing union types via a common field (discriminant). switch/if branches auto-narrow types. Similar to Rust's enum + match.
🟢 Node.js
Node.js Event Loop — 6 Phases Different from the Browser
timers → pending → idle → poll → check → close, and where process.nextTick fits
Node.js event loop (libuv) cycles through 6 phases unlike browsers. setTimeout in timers phase, setImmediate in check phase, process.nextTick between all phases.
Node.js Streams — Processing Large Data Without Memory Explosion
How Readable, Writable, Transform + backpressure work
Reading a 10GB file with fs.readFile() explodes memory. Streams flow data in chunks keeping memory constant. Backpressure pauses producers when consumers are slow.
ESM vs CommonJS — Why require and import Are Different
Sync vs async loading, and what "type": "module" means
CommonJS (require) is sync loading, ESM (import) is async. Compatibility issues and solutions from both systems coexisting in Node.js.
🌐 Browser APIs
Web Workers — How to Use Multi-Threading in JavaScript
Structured Clone of postMessage and SharedArrayBuffer
Web Workers run JavaScript on a separate thread from main. No DOM access, communicate via postMessage. Offload heavy computation to Workers to keep UI responsive.
Service Worker Lifecycle — The Order of install, activate, fetch
The core of PWA — how offline caching works
Service Workers act as proxies between browser and network. Lifecycle: install → activate → fetch. Cache API stores resources for offline app functionality.
Intersection Observer — Detect Element Visibility Without Scroll Events
Performance-friendly implementation for lazy loading, infinite scroll, animation triggers
Intersection Observer fires callbacks when elements enter/exit the viewport. Better performance than scroll events + getBoundingClientRect(), executed at browser-optimized timing.
Popover API — Why You Can Now Build Tooltips Without JavaScript
A single popover attribute handles open/close, Esc dismissal, and accessibility automatically
Traditional tooltips required event listeners, state management, and manual ARIA synchronization. The Popover API replaces all of that natively. Just popover and popovertarget attributes handle open/close, Esc key, and keyboard navigation automatically.
Popover API — What Browser-Native Tooltips Actually Change
Replace JS event listeners, manual ARIA sync, and state management with two HTML attributes
Before Popover API, a single tooltip required event listeners, state tracking, and manual ARIA sync. The popover and popovertarget attributes handle open/close, Esc key, and focus restoration automatically.
🔬 Open Source Analysis
background-removal-js — How Background Removal Actually Works in the Browser
IS-Net ONNX Model + WASM Inference + Canvas API — A Fully Client-Side Pipeline
imgly's background-removal-js takes an image and outputs a transparent PNG. It runs the IS-Net model via ONNX Runtime WASM entirely in the browser. No server needed. 7K stars.
OpenGenerativeUI — How CopilotKit Recreated Claude's Visual Artifacts as Open Source
CopilotKit Deep Agents + LangGraph + Sandboxed iframe — The Pipeline Where AI Generates Charts, 3D, and Diagrams in Real Time
CopilotKit shipped an open-source reproduction of Claude's interactive visual artifact generation. Next.js 16 frontend + Python LangGraph agent generates HTML/SVG/Chart.js/Three.js code, rendered in sandboxed iframes. MIT license. 1.1K stars.
Pretext — A Pure JS Layout Library That Measures Text Height Without DOM
Get glyph widths from Canvas measureText(), then line calculation is pure arithmetic — zero layout reflow
To find out how many lines text takes in a browser, you'd normally use getBoundingClientRect or offsetHeight — but these force layout reflow. Pretext uses Canvas measureText() to get glyph widths directly from the font engine, then performs line calculation as pure arithmetic on cached width values. Zero DOM access. layout() runs in 0.09ms for 500 text batches. By chenglou (creator of React/Relay). ⭐ 7.1K.