https://javascriptcodex.com/ The illustrated JavaScript course — the language, the browser platform, and the modern tooling, explained with diagrams. en https://javascriptcodex.com/intro https://javascriptcodex.com/intro What JavaScript is, where it runs, what it can and can't do in a browser, and why it stayed the default language of the web. Part 1: Core JavaScript https://javascriptcodex.com/manuals-specifications https://javascriptcodex.com/manuals-specifications Where to look things up once you outgrow a tutorial — the ECMAScript spec, MDN, and the compatibility tables that tell you what actually runs where. Part 1: Core JavaScript https://javascriptcodex.com/code-editors https://javascriptcodex.com/code-editors How code editors split into full IDEs and fast lightweight editors, when to reach for each, and how to pick one without getting stuck. Part 1: Core JavaScript https://javascriptcodex.com/devtools https://javascriptcodex.com/devtools How to open the browser's developer tools, read the errors it shows, and run JavaScript straight from the console. Part 1: Core JavaScript https://javascriptcodex.com/hello-world https://javascriptcodex.com/hello-world How to attach JavaScript to a web page with the <script> tag — inline code, external files via src, and the attributes you can safely ignore. Part 1: Core JavaScript https://javascriptcodex.com/structure https://javascriptcodex.com/structure How JavaScript is built from statements, why semicolons matter more than they look, and how to comment code without breaking it. Part 1: Core JavaScript https://javascriptcodex.com/strict-mode https://javascriptcodex.com/strict-mode What "use strict" does, why it exists, where it must go, and when modern classes/modules make it automatic. Part 1: Core JavaScript https://javascriptcodex.com/variables https://javascriptcodex.com/variables How to store data in named variables with let and const — declaring, assigning, reassigning, copying, naming, and why const communicates intent. Part 1: Core JavaScript https://javascriptcodex.com/types https://javascriptcodex.com/types The eight data types JavaScript can store — number, bigint, string, boolean, null, undefined, symbol, object — and how to tell them apart with typeof. Part 1: Core JavaScript https://javascriptcodex.com/alert-prompt-confirm https://javascriptcodex.com/alert-prompt-confirm How the browser's three built-in dialogs — alert, prompt, and confirm — let a script talk to a person, what each one returns, and why they freeze the page. Part 1: Core JavaScript https://javascriptcodex.com/type-conversions https://javascriptcodex.com/type-conversions How JavaScript turns values into strings, numbers, and booleans — the automatic conversions you rarely notice and the explicit ones you control. Part 1: Core JavaScript https://javascriptcodex.com/operators https://javascriptcodex.com/operators How JavaScript's arithmetic, string, unary, assignment, increment, bitwise, and comma operators behave, plus the precedence rules that decide what runs first. Part 1: Core JavaScript https://javascriptcodex.com/comparison https://javascriptcodex.com/comparison How JavaScript compares values — booleans as results, lexicographic string order, type coercion in loose equality, strict equality, and the null/undefined traps. Part 1: Core JavaScript https://javascriptcodex.com/ifelse https://javascriptcodex.com/ifelse How to branch your code with if, else, else if, and the ternary ? operator — plus the truthy/falsy rules that decide which branch runs. Part 1: Core JavaScript https://javascriptcodex.com/logical-operators https://javascriptcodex.com/logical-operators How ||, &&, and ! actually work in JavaScript — value-returning short-circuit evaluation, not just true/false. Part 1: Core JavaScript https://javascriptcodex.com/nullish-coalescing-operator https://javascriptcodex.com/nullish-coalescing-operator The ?? operator returns the first value that isn't null or undefined — how it works, why it beats || for defaults, and the precedence traps to watch for. Part 1: Core JavaScript https://javascriptcodex.com/while-for https://javascriptcodex.com/while-for How to repeat work in JavaScript with while, do..while, and for, plus break, continue, and labels for escaping nested loops. Part 1: Core JavaScript https://javascriptcodex.com/switch https://javascriptcodex.com/switch How switch compares one value against many candidates with strict equality, why break matters, and how fall-through lets you group cases. Part 1: Core JavaScript https://javascriptcodex.com/function-basics https://javascriptcodex.com/function-basics How to declare functions, pass arguments, use default parameters, return values, and name them so the code reads like prose. Part 1: Core JavaScript https://javascriptcodex.com/function-expressions https://javascriptcodex.com/function-expressions A function in JavaScript is a value you can store, copy, and pass around — and where you write it decides whether it exists before the code runs or only once execution reaches it. Part 1: Core JavaScript https://javascriptcodex.com/arrow-functions-basics https://javascriptcodex.com/arrow-functions-basics Arrow functions give you a compact syntax for writing functions, with an implicit return for one-liners and curly braces when you need a full body. Part 1: Core JavaScript https://javascriptcodex.com/javascript-specials https://javascriptcodex.com/javascript-specials A fast, connected recap of the First Steps chapter — code structure, strict mode, variables, interaction, operators, loops, switch, and functions, with the subtle gotchas pulled to the front. Part 1: Core JavaScript https://javascriptcodex.com/debugging-chrome https://javascriptcodex.com/debugging-chrome Use the browser's Sources panel — breakpoints, the debugger statement, the Scope/Call Stack/Watch panes, and step-by-step tracing — to see exactly what your code does while it runs. Part 1: Core JavaScript https://javascriptcodex.com/coding-style https://javascriptcodex.com/coding-style Practical style conventions — braces, line length, indentation, semicolons, nesting, function placement, style guides, and linters — that make JavaScript readable and less error-prone. Part 1: Core JavaScript https://javascriptcodex.com/comments https://javascriptcodex.com/comments How to comment well — strip out comments that narrate what the code does, keep the ones that explain architecture, function usage, and the reasons behind a design. Part 1: Core JavaScript https://javascriptcodex.com/ninja-code https://javascriptcodex.com/ninja-code A tongue-in-cheek tour of code-obfuscation 'tricks' that teaches, by inversion, exactly which habits make code unreadable — and what to do instead. Part 1: Core JavaScript https://javascriptcodex.com/testing-mocha https://javascriptcodex.com/testing-mocha Learn Behavior Driven Development by building a pow function test-first with Mocha, Chai, describe/it blocks, nested groups, and setup hooks. Part 1: Core JavaScript https://javascriptcodex.com/polyfills https://javascriptcodex.com/polyfills How transpilers rewrite modern syntax for old engines and polyfills add missing built-in functions, so you can write current code that still runs everywhere. Part 1: Core JavaScript https://javascriptcodex.com/object https://javascriptcodex.com/object Objects store keyed collections of data — how to create them, read and write properties with dot and bracket notation, use computed keys and shorthands, test for existence with in, and iterate with for..in. Part 1: Core JavaScript https://javascriptcodex.com/object-copy https://javascriptcodex.com/object-copy Objects are held and copied by reference while primitives copy as whole values, which shapes how equality, cloning, and nested data behave. Part 1: Core JavaScript https://javascriptcodex.com/garbage-collection https://javascriptcodex.com/garbage-collection How JavaScript automatically frees memory by tracking which values are still reachable from the roots, and how the mark-and-sweep collector works under the hood. Part 1: Core JavaScript https://javascriptcodex.com/object-methods https://javascriptcodex.com/object-methods How to give objects behavior with methods, and how the value of `this` is decided at call-time by whatever sits before the dot. Part 1: Core JavaScript https://javascriptcodex.com/constructor-new https://javascriptcodex.com/constructor-new How constructor functions plus the new operator let you stamp out many similar objects from one blueprint. Part 1: Core JavaScript https://javascriptcodex.com/optional-chaining https://javascriptcodex.com/optional-chaining Use ?. to read, call, and delete through nested values that might be null or undefined without crashing. Part 1: Core JavaScript https://javascriptcodex.com/symbol https://javascriptcodex.com/symbol Symbols are guaranteed-unique primitive keys used for collision-free hidden object properties and for hooking into JavaScript's built-in behaviors through well-known symbols. Part 1: Core JavaScript https://javascriptcodex.com/object-toprimitive https://javascriptcodex.com/object-toprimitive How JavaScript turns an object into a string or number when an operator demands a primitive, and the three methods you can define to control it. Part 1: Core JavaScript https://javascriptcodex.com/primitives-methods https://javascriptcodex.com/primitives-methods Primitives stay lightweight, yet you can call methods on strings, numbers, booleans, symbols, and bigints because JavaScript wraps them in a temporary object just long enough to run the call. Part 1: Core JavaScript https://javascriptcodex.com/number https://javascriptcodex.com/number Everything about regular JavaScript numbers: exponential and alternate-base syntax, rounding, the IEEE-754 precision trap, NaN/Infinity tests, and parsing numbers out of strings. Part 1: Core JavaScript https://javascriptcodex.com/string https://javascriptcodex.com/string How JavaScript stores text as UTF-16 strings, and the full toolkit for quoting, indexing, slicing, searching, and comparing them. Part 1: Core JavaScript https://javascriptcodex.com/array https://javascriptcodex.com/array How JavaScript arrays really work — zero-based indexing and at(), the push/pop/shift/unshift toolbox, the object underneath, performance, looping, the writable length, and why you never compare arrays with ==. Part 1: Core JavaScript https://javascriptcodex.com/array-methods https://javascriptcodex.com/array-methods A tour of the array toolbox — adding, removing, searching, iterating, and transforming — with the mental models behind splice, map, filter, sort, and reduce. Part 1: Core JavaScript https://javascriptcodex.com/iterable https://javascriptcodex.com/iterable How for..of really works — the Symbol.iterator protocol, writing your own iterators, the iterable vs array-like distinction, and Array.from to bridge them. Part 1: Core JavaScript https://javascriptcodex.com/map-set https://javascriptcodex.com/map-set Map stores keyed data with keys of any type, and Set stores unique values — both remember insertion order and beat plain objects and arrays at their respective jobs. Part 1: Core JavaScript https://javascriptcodex.com/weakmap-weakset https://javascriptcodex.com/weakmap-weakset Part 1: Core JavaScript https://javascriptcodex.com/keys-values-entries https://javascriptcodex.com/keys-values-entries How to pull keys, values, and key/value pairs out of plain objects, and how to borrow array methods to transform an object into a new one. Part 1: Core JavaScript https://javascriptcodex.com/destructuring-assignment https://javascriptcodex.com/destructuring-assignment Unpack arrays and objects into individual variables with defaults, renaming, rest patterns, nesting, and clean function parameters. Part 1: Core JavaScript https://javascriptcodex.com/date https://javascriptcodex.com/date How the built-in Date object stores time as a millisecond timestamp, how to read and set its components, why months count from zero, autocorrection, date diffs, and honest benchmarking. Part 1: Core JavaScript https://javascriptcodex.com/json https://javascriptcodex.com/json How JSON.stringify and JSON.parse turn objects into portable text and back, plus the hooks — replacer, space, toJSON, and reviver — that let you shape the result. Part 1: Core JavaScript https://javascriptcodex.com/recursion https://javascriptcodex.com/recursion How a function that calls itself actually runs — the base case and recursive step, the execution-context stack that powers it, and the recursive data structures (trees, linked lists) that recursion was made for. Part 1: Core JavaScript https://javascriptcodex.com/rest-parameters-spread https://javascriptcodex.com/rest-parameters-spread Gather any number of arguments into an array with rest parameters, and expand an iterable into a list with spread syntax — plus copying arrays and objects. Part 1: Core JavaScript https://javascriptcodex.com/closure https://javascriptcodex.com/closure Every JavaScript function permanently remembers the scope it was born in, and that single rule — closure — explains how counters keep state, how variables stay alive after a function returns, and when memory gets freed. Part 1: Core JavaScript https://javascriptcodex.com/var https://javascriptcodex.com/var How var differs from let and const — no block scope, tolerant redeclarations, and hoisting — plus the IIFE trick that older code used to fake privacy. Part 1: Core JavaScript https://javascriptcodex.com/global-object https://javascriptcodex.com/global-object The global object collects the built-in and environment-provided values available everywhere, reachable through window, global, or the portable globalThis. Part 1: Core JavaScript https://javascriptcodex.com/function-object https://javascriptcodex.com/function-object Functions are callable objects: read their name and length, hang your own properties on them, and use a named function expression to reference a function reliably from inside itself. Part 1: Core JavaScript https://javascriptcodex.com/new-function https://javascriptcodex.com/new-function How new Function builds a function from a string at run time, and why its scope is deliberately global instead of the surrounding one. Part 1: Core JavaScript https://javascriptcodex.com/settimeout-setinterval https://javascriptcodex.com/settimeout-setinterval How to defer and repeat function calls with setTimeout and setInterval, cancel them, and control timing precisely with nested timeouts. Part 1: Core JavaScript https://javascriptcodex.com/call-apply-decorators https://javascriptcodex.com/call-apply-decorators How to wrap a function in another function that adds behavior — caching, logging, timing — using call, apply, and call forwarding without touching the original code. Part 1: Core JavaScript https://javascriptcodex.com/bind https://javascriptcodex.com/bind Why methods forget their object when passed around as callbacks, and how bind pins this (and arguments) in place. Part 1: Core JavaScript https://javascriptcodex.com/arrow-functions https://javascriptcodex.com/arrow-functions Arrow functions have no this, no arguments, no super, and can't be called with new — which makes them ideal for small callbacks that borrow their surrounding context. Part 1: Core JavaScript https://javascriptcodex.com/property-descriptors https://javascriptcodex.com/property-descriptors Every object property carries three hidden flags — writable, enumerable, configurable — and this lesson shows how to read them, change them, and lock an object down entirely. Part 1: Core JavaScript https://javascriptcodex.com/property-accessors https://javascriptcodex.com/property-accessors How accessor properties let a getter and setter run behind a plain-looking property read or write, and why that indirection is so useful for validation and refactoring. Part 1: Core JavaScript https://javascriptcodex.com/prototype-inheritance https://javascriptcodex.com/prototype-inheritance How objects in JavaScript quietly fall back to a linked prototype object when a property is missing, and the rules that govern that lookup. Part 1: Core JavaScript https://javascriptcodex.com/function-prototype https://javascriptcodex.com/function-prototype How the prototype property on a constructor function decides the [[Prototype]] of every object it builds with new. Part 1: Core JavaScript https://javascriptcodex.com/native-prototypes https://javascriptcodex.com/native-prototypes How JavaScript's built-in objects store their methods on shared prototypes, and when it is safe to touch those prototypes yourself. Part 1: Core JavaScript https://javascriptcodex.com/prototype-methods https://javascriptcodex.com/prototype-methods The modern ways to read and set a prototype without __proto__, plus how prototype-less objects give you a safe dictionary for user-supplied keys. Part 1: Core JavaScript https://javascriptcodex.com/class https://javascriptcodex.com/class How the class keyword builds a constructor function plus prototype methods, and what it adds on top: strict mode, non-enumerable methods, getters/setters, computed names, and class fields. Part 1: Core JavaScript https://javascriptcodex.com/class-inheritance https://javascriptcodex.com/class-inheritance How one class extends another with `extends`, how `super` calls parent methods and constructors, and the prototype and [[HomeObject]] machinery that makes it all work. Part 1: Core JavaScript https://javascriptcodex.com/static-properties-methods https://javascriptcodex.com/static-properties-methods How static methods and properties attach to the class itself rather than its instances, why factory and comparison methods live there, and how statics are inherited through the class prototype chain. Part 1: Core JavaScript https://javascriptcodex.com/private-protected-properties-methods https://javascriptcodex.com/private-protected-properties-methods How to split an object into a public interface and hidden internals using protected `_` conventions and language-enforced private `#` fields. Part 1: Core JavaScript https://javascriptcodex.com/extend-natives https://javascriptcodex.com/extend-natives You can extend built-ins like Array and Map with your own methods, control what their methods return using Symbol.species, and understand why built-in classes don't inherit each other's static methods. Part 1: Core JavaScript https://javascriptcodex.com/instanceof https://javascriptcodex.com/instanceof How `instanceof` walks the prototype chain to test class membership (including inheritance), how to override it with `Symbol.hasInstance`, and how `Object.prototype.toString` acts as a typeof on steroids. Part 1: Core JavaScript https://javascriptcodex.com/mixins https://javascriptcodex.com/mixins How to bolt reusable behavior onto a class in JavaScript by copying methods into a prototype, since a class can only extend one parent. Part 1: Core JavaScript https://javascriptcodex.com/try-catch https://javascriptcodex.com/try-catch How try...catch intercepts runtime errors, how the error object and throw work, and the rethrowing and finally patterns that keep error handling honest. Part 1: Core JavaScript https://javascriptcodex.com/custom-errors https://javascriptcodex.com/custom-errors Build your own error classes by extending Error, organize them into a hierarchy, check them with instanceof, and wrap low-level failures into higher-level errors. Part 1: Core JavaScript https://javascriptcodex.com/callbacks https://javascriptcodex.com/callbacks How callback-based asynchronous code works, how to report errors with error-first callbacks, and why deeply nested callbacks turn into the pyramid of doom. Part 1: Core JavaScript https://javascriptcodex.com/promise-basics https://javascriptcodex.com/promise-basics How a promise links producing code to consuming code through its pending/fulfilled/rejected state, and how then, catch, and finally subscribe to the outcome. Part 1: Core JavaScript https://javascriptcodex.com/promise-chaining https://javascriptcodex.com/promise-chaining How to run asynchronous steps in sequence by returning values and promises from .then handlers, building a flat chain instead of nested callbacks. Part 1: Core JavaScript https://javascriptcodex.com/promise-error-handling https://javascriptcodex.com/promise-error-handling How rejections travel down a promise chain to the nearest .catch, why handlers get an invisible try..catch, how to rethrow, and how to trap unhandled rejections. Part 1: Core JavaScript https://javascriptcodex.com/promise-api https://javascriptcodex.com/promise-api The six static Promise methods — all, allSettled, race, any, resolve, reject — and exactly when to reach for each. Part 1: Core JavaScript https://javascriptcodex.com/promisify https://javascriptcodex.com/promisify How to wrap a callback-based function so it returns a promise instead, plus a reusable promisify helper that handles error-first callbacks with one or many result arguments. Part 1: Core JavaScript https://javascriptcodex.com/microtask-queue https://javascriptcodex.com/microtask-queue Why promise handlers always run after the current code finishes, how the microtask queue schedules them, and how that timing explains unhandled-rejection detection. Part 1: Core JavaScript https://javascriptcodex.com/async-await https://javascriptcodex.com/async-await How the async and await keywords let you write promise-based code that reads top to bottom, plus error handling with try..catch and the edge cases worth knowing. Part 1: Core JavaScript https://javascriptcodex.com/generators https://javascriptcodex.com/generators How generator functions pause and resume with yield, act as iterables, compose with yield*, and exchange values and errors with the calling code. Part 1: Core JavaScript https://javascriptcodex.com/async-iterators-generators https://javascriptcodex.com/async-iterators-generators Iterate over data that arrives over time using Symbol.asyncIterator, async generators, and for await..of — with a real paginated-fetch example. Part 1: Core JavaScript https://javascriptcodex.com/modules-intro https://javascriptcodex.com/modules-intro Modules let you split a program across files that share functionality through export and import, each with its own scope, strict mode, and one-time evaluation. Part 1: Core JavaScript https://javascriptcodex.com/import-export https://javascriptcodex.com/import-export A tour of every export and import form — inline and standalone exports, renaming with as, default exports, re-exports, and where these statements are allowed to live. Part 1: Core JavaScript https://javascriptcodex.com/modules-dynamic-imports https://javascriptcodex.com/modules-dynamic-imports Load modules on demand with the import() expression, which returns a promise for the module object and works from anywhere in your code. Part 1: Core JavaScript https://javascriptcodex.com/proxy https://javascriptcodex.com/proxy How a Proxy wraps an object and intercepts fundamental operations like reads, writes, and function calls, and how Reflect lets each trap forward the operation faithfully. Part 1: Core JavaScript https://javascriptcodex.com/eval https://javascriptcodex.com/eval eval runs a string as live JavaScript, returns the last statement's value, and — in a way that's usually best avoided — can read and write the surrounding scope. Part 1: Core JavaScript https://javascriptcodex.com/currying-partials https://javascriptcodex.com/currying-partials Turning f(a, b, c) into f(a)(b)(c) so you can lock in arguments early and spin off tidy specialized functions. Part 1: Core JavaScript https://javascriptcodex.com/reference-type https://javascriptcodex.com/reference-type The dot operator returns a hidden Reference Type value that carries this into the call — pull the method off first and this evaporates. Part 1: Core JavaScript https://javascriptcodex.com/bigint https://javascriptcodex.com/bigint BigInt is a numeric type for integers of any size, created with an n suffix or the BigInt() function, that behaves like a number but never mixes with one silently. Part 1: Core JavaScript https://javascriptcodex.com/unicode https://javascriptcodex.com/unicode JavaScript strings are UTF-16, so rare characters take two code units (surrogate pairs) and visually identical letters can differ byte-for-byte until you normalize them. Part 1: Core JavaScript https://javascriptcodex.com/weakref-finalizationregistry https://javascriptcodex.com/weakref-finalizationregistry How WeakRef holds an object without keeping it alive, and how FinalizationRegistry runs a callback after the garbage collector reclaims it. Part 1: Core JavaScript https://javascriptcodex.com/immutable-array-methods https://javascriptcodex.com/immutable-array-methods The non-mutating twins of sort, reverse, and splice — toSorted, toReversed, toSpliced, with, plus findLast and findLastIndex — and why returning a fresh copy makes state predictable. Part 1: Core JavaScript https://javascriptcodex.com/object-and-map-grouping https://javascriptcodex.com/object-and-map-grouping Sort any iterable into buckets by a computed key in one call — Object.groupBy for string keys, Map.groupBy for object keys — and retire the hand-rolled reduce boilerplate. Part 1: Core JavaScript https://javascriptcodex.com/set-methods https://javascriptcodex.com/set-methods The built-in Set now speaks set algebra directly — union, intersection, difference, symmetricDifference, and three containment checks — so you can drop the hand-rolled loops and the Lodash helpers. Part 1: Core JavaScript https://javascriptcodex.com/iterator-helpers https://javascriptcodex.com/iterator-helpers Chainable map, filter, take, drop and friends that live on Iterator.prototype and pull one value at a time — lazy pipelines that never build intermediate arrays and can bound an infinite generator. Part 1: Core JavaScript https://javascriptcodex.com/array-from-async https://javascriptcodex.com/array-from-async Build an array from an async iterable or an iterable of promises, awaiting each element in sequence — the clean way to drain an async generator or paginate an API into one list. Part 1: Core JavaScript https://javascriptcodex.com/promise-with-resolvers https://javascriptcodex.com/promise-with-resolvers One call hands you a promise plus its resolve and reject functions, so you can settle a promise from outside its constructor without the old outer-variable dance. Part 1: Core JavaScript https://javascriptcodex.com/error-cause-and-aggregate https://javascriptcodex.com/error-cause-and-aggregate Chain errors with the cause option so a boundary can add context without losing the root failure, and bundle many failures into one AggregateError the way Promise.any does. Part 1: Core JavaScript https://javascriptcodex.com/logical-assignment-and-clone https://javascriptcodex.com/logical-assignment-and-clone Three sharp modern tools: the ??=, ||= and &&= assignment operators, Object.hasOwn for safe key checks, and structuredClone for real deep copies. Part 1: Core JavaScript https://javascriptcodex.com/decorators-and-static-blocks https://javascriptcodex.com/decorators-and-static-blocks How Stage 3 class decorators wrap classes, methods, fields, and accessors through a (value, context) contract that still needs a build step, and how ES2022 static blocks run one-time setup at class definition. Part 1: Core JavaScript https://javascriptcodex.com/regexp-v-and-d-flags https://javascriptcodex.com/regexp-v-and-d-flags Two modern regex flags: v upgrades character classes with real set algebra and multi-character string sets, and d reports the exact start and end index of every match and capture group. Part 1: Core JavaScript https://javascriptcodex.com/temporal https://javascriptcodex.com/temporal A tour of Temporal — the immutable, time-zone-aware replacement for Date — covering Instant, ZonedDateTime, the Plain types, Duration, arithmetic, rounding, and its real-world support status. Part 1: Core JavaScript https://javascriptcodex.com/intl https://javascriptcodex.com/intl Locale-aware dates, numbers, currencies, lists, plurals, sorting, and text segmentation with the built-in Intl namespace — no libraries required. Part 1: Core JavaScript https://javascriptcodex.com/typescript-for-js-developers https://javascriptcodex.com/typescript-for-js-developers A JavaScript developer's on-ramp to TypeScript: annotations, interfaces, unions, narrowing, and generics as a compile-time-only layer that erases before your code ever runs. Part 1: Core JavaScript https://javascriptcodex.com/browser-environment https://javascriptcodex.com/browser-environment The browser wraps the JavaScript language core with a host environment — window, the DOM, and the BOM — each governed by its own specification. Part 2: The Browser Platform https://javascriptcodex.com/dom-nodes https://javascriptcodex.com/dom-nodes How the browser turns HTML into a live tree of node objects that JavaScript can read and change. Part 2: The Browser Platform https://javascriptcodex.com/dom-navigation https://javascriptcodex.com/dom-navigation How to move between DOM nodes using navigation properties for parents, children, and siblings, plus element-only shortcuts and table-specific links. Part 2: The Browser Platform https://javascriptcodex.com/searching-elements-dom https://javascriptcodex.com/searching-elements-dom How to reach any element on a page by id, CSS selector, tag, class, or name, plus matches, closest, and the difference between live and static collections. Part 2: The Browser Platform https://javascriptcodex.com/basic-dom-node-properties https://javascriptcodex.com/basic-dom-node-properties Every DOM node is a JavaScript object from a class hierarchy, and this chapter maps the classes and the everyday properties for reading a node's type, tag, and contents. Part 2: The Browser Platform https://javascriptcodex.com/dom-attributes-and-properties https://javascriptcodex.com/dom-attributes-and-properties HTML attributes and DOM properties look like two names for the same thing, but they live in different places, carry different types, and sync in ways that trip people up — this chapter untangles them. Part 2: The Browser Platform https://javascriptcodex.com/modifying-document https://javascriptcodex.com/modifying-document Create, insert, move, clone, and remove DOM nodes to build live, dynamic pages. Part 2: The Browser Platform https://javascriptcodex.com/styles-and-classes https://javascriptcodex.com/styles-and-classes JavaScript can reach an element's look two ways — through its CSS classes or through inline styles — and knowing which to reach for (and how to read the value back) keeps your UI code clean. Part 2: The Browser Platform https://javascriptcodex.com/size-and-scroll https://javascriptcodex.com/size-and-scroll How to read an element's width, height, borders, padding, and scroll offsets in pixels using the offset/client/scroll geometry properties — and why CSS values are the wrong tool for the job. Part 2: The Browser Platform https://javascriptcodex.com/size-and-scroll-window https://javascriptcodex.com/size-and-scroll-window How to read the window's visible size, the full document height, and the current scroll position — plus the methods that move the page, and the historical quirks that make you take a Math.max of six properties. Part 2: The Browser Platform https://javascriptcodex.com/coordinates https://javascriptcodex.com/coordinates The two coordinate systems on a web page — window-relative and document-relative — how getBoundingClientRect reports them, and how to convert between them so a tooltip stays glued to its element whether the page scrolls or not. Part 2: The Browser Platform https://javascriptcodex.com/introduction-browser-events https://javascriptcodex.com/introduction-browser-events How the browser turns user actions into events, and the three ways to attach handler code that reacts to them. Part 2: The Browser Platform https://javascriptcodex.com/bubbling-and-capturing https://javascriptcodex.com/bubbling-and-capturing An event on an element travels down through its ancestors and back up through them, and understanding that journey is what lets one handler serve a whole subtree. Part 2: The Browser Platform https://javascriptcodex.com/event-delegation https://javascriptcodex.com/event-delegation Instead of wiring a handler onto every element, put one handler on a shared ancestor and let bubbling bring the events to you. Part 2: The Browser Platform https://javascriptcodex.com/default-browser-action https://javascriptcodex.com/default-browser-action How the browser reacts to events on its own, and how to cancel that behavior with preventDefault, return false, passive handlers, and defaultPrevented. Part 2: The Browser Platform https://javascriptcodex.com/dispatch-events https://javascriptcodex.com/dispatch-events Create and fire your own events from JavaScript with Event, CustomEvent, and dispatchEvent, pass data via detail, cancel with preventDefault, and understand why nested events run synchronously. Part 2: The Browser Platform https://javascriptcodex.com/mouse-events-basics https://javascriptcodex.com/mouse-events-basics The mouse event family — their fixed firing order, the button and modifier-key properties every event carries, the two coordinate systems, and how to stop mousedown from selecting text. Part 2: The Browser Platform https://javascriptcodex.com/mousemove-mouseover-mouseout-mouseenter-mouseleave https://javascriptcodex.com/mousemove-mouseover-mouseout-mouseenter-mouseleave How mouseover/out, mousemove, and mouseenter/leave differ, why bubbling and relatedTarget matter, and how to delegate hover handling across many elements. Part 2: The Browser Platform https://javascriptcodex.com/mouse-drag-and-drop https://javascriptcodex.com/mouse-drag-and-drop Build drag'n'drop from scratch with mousedown/mousemove/mouseup, keep the pointer's grab offset, and detect drop targets under the cursor with elementFromPoint. Part 2: The Browser Platform https://javascriptcodex.com/pointer-events https://javascriptcodex.com/pointer-events One unified event model that handles mouse, touch, and pen input, with multi-touch, device pressure, and pointer capturing built in. Part 2: The Browser Platform https://javascriptcodex.com/keyboard-events https://javascriptcodex.com/keyboard-events How keydown and keyup work, the difference between event.key and event.code, auto-repeat, default actions, and why keyboard events alone can't reliably track text input. Part 2: The Browser Platform https://javascriptcodex.com/onscroll https://javascriptcodex.com/onscroll The scroll event lets you react to page and element scrolling, why you can't cancel it after the fact, and how to block scrolling at its real source instead. Part 2: The Browser Platform https://javascriptcodex.com/form-elements https://javascriptcodex.com/form-elements How to reach forms and their controls through document.forms and form.elements, and how to read and set values on input, textarea, select, and option. Part 2: The Browser Platform https://javascriptcodex.com/focus-blur https://javascriptcodex.com/focus-blur How elements gain and lose focus, why the focus and blur events behave differently from most others, and how tabindex, capturing, and focusin/focusout let you work around their quirks. Part 2: The Browser Platform https://javascriptcodex.com/events-change-input https://javascriptcodex.com/events-change-input The events that fire when form data changes — change on commit, input on every keystroke or paste, and the clipboard trio cut/copy/paste — plus why the clipboard sits behind a wall of safety restrictions. Part 2: The Browser Platform https://javascriptcodex.com/forms-submit https://javascriptcodex.com/forms-submit How the submit event lets you validate or cancel a form before it leaves the page, and how form.submit() sends a form from code without firing that event. Part 2: The Browser Platform https://javascriptcodex.com/onload-ondomcontentloaded https://javascriptcodex.com/onload-ondomcontentloaded How a page's lifecycle unfolds through DOMContentLoaded, load, beforeunload, and unload, and how to hook into each stage reliably. Part 2: The Browser Platform https://javascriptcodex.com/script-async-defer https://javascriptcodex.com/script-async-defer How defer and async change when the browser downloads and runs your scripts, and how to pick the right one. Part 2: The Browser Platform https://javascriptcodex.com/onload-onerror https://javascriptcodex.com/onload-onerror How to know when a script, image, or other external resource finishes loading or fails, and how cross-origin rules limit what errors you can see. Part 2: The Browser Platform https://javascriptcodex.com/mutation-observer https://javascriptcodex.com/mutation-observer MutationObserver watches a DOM node and fires a callback whenever its children, attributes, or text change — ideal for reacting to markup you don't control. Part 2: The Browser Platform https://javascriptcodex.com/selection-range https://javascriptcodex.com/selection-range How Range marks a pair of boundary points in the DOM, how Selection turns ranges into a visible highlight, and the simpler text-only selection API for input and textarea. Part 2: The Browser Platform https://javascriptcodex.com/event-loop https://javascriptcodex.com/event-loop How the browser (and Node.js) schedules your code: the endless task loop, why rendering waits for your task to finish, and the strict order in which macrotasks and microtasks run. Part 2: The Browser Platform https://javascriptcodex.com/observer-apis https://javascriptcodex.com/observer-apis Three browser observers — IntersectionObserver, ResizeObserver and PerformanceObserver — that hand you batched, off-the-main-path notifications instead of the scroll and resize event storms they replaced. Part 2: The Browser Platform https://javascriptcodex.com/dialog-and-popover https://javascriptcodex.com/dialog-and-popover Build modals, menus, and popovers with the platform's own top-layer primitives — the dialog element and the Popover API — instead of hand-rolling overlays, z-index stacks, and focus traps. Part 2: The Browser Platform https://javascriptcodex.com/view-transitions https://javascriptcodex.com/view-transitions Animate DOM state changes and page navigations natively — the browser snapshots the old and new states and cross-fades or morphs between them, so you delete your FLIP and clone-node code. Part 2: The Browser Platform https://javascriptcodex.com/web-animations-api https://javascriptcodex.com/web-animations-api Drive animations from JavaScript with element.animate — a real Animation object you can play, pause, reverse, seek, rescale in speed, and await, plus a look at scroll-driven timelines. Part 2: The Browser Platform https://javascriptcodex.com/navigation-api https://javascriptcodex.com/navigation-api A single navigate event that catches every same-origin navigation — links, back/forward, and programmatic calls — plus intercept() to render it yourself without a full page load. Part 2: The Browser Platform https://javascriptcodex.com/accessibility-and-aria https://javascriptcodex.com/accessibility-and-aria How assistive technology reads your page through the accessibility tree, why semantic HTML beats ARIA, and how to get names, live regions, keyboard focus, and motion preferences right. Part 2: The Browser Platform https://javascriptcodex.com/clipboard-and-drag-drop https://javascriptcodex.com/clipboard-and-drag-drop Copy and paste with the async Clipboard API — text, rich HTML, and images through the permission gate — then move data with native HTML5 drag-and-drop, from the draggable attribute to DataTransfer and the dragover preventDefault trick. Part 2: The Browser Platform https://javascriptcodex.com/device-and-capability-apis https://javascriptcodex.com/device-and-capability-apis How to ask the browser for powerful capabilities the respectful way — checking permission state first, gating on a real user gesture, feature-detecting before you call, and scheduling non-urgent work for idle time. Part 2: The Browser Platform https://javascriptcodex.com/popup-windows https://javascriptcodex.com/popup-windows How to open, control, close, move, and communicate with popup windows using window.open and the related window methods, plus the browser rules that limit what you can do. Part 3: Advanced Web Platform https://javascriptcodex.com/cross-window-communication https://javascriptcodex.com/cross-window-communication How the Same Origin policy walls off windows and frames from each other, and the sanctioned escape hatches — document.domain, sandbox, and postMessage. Part 3: Advanced Web Platform https://javascriptcodex.com/clickjacking https://javascriptcodex.com/clickjacking How clickjacking tricks a user into clicking a hidden victim button, and the layered defenses — framebusting, sandbox, X-Frame-Options, covering divs, and SameSite cookies — that stop it. Part 3: Advanced Web Platform https://javascriptcodex.com/security-in-depth https://javascriptcodex.com/security-in-depth A production-grade tour of browser security: XSS and its defenses, Content Security Policy, Trusted Types, CSRF, Subresource Integrity, CORS at the trust level, and modern auth with passkeys and OAuth2. Part 3: Advanced Web Platform https://javascriptcodex.com/arraybuffer-binary-arrays https://javascriptcodex.com/arraybuffer-binary-arrays How JavaScript models raw bytes: ArrayBuffer as the memory, typed arrays and DataView as the views that interpret it. Part 3: Advanced Web Platform https://javascriptcodex.com/text-decoder https://javascriptcodex.com/text-decoder Turn raw bytes into JavaScript strings with TextDecoder, and strings back into UTF-8 bytes with TextEncoder. Part 3: Advanced Web Platform https://javascriptcodex.com/blob https://javascriptcodex.com/blob Blob is binary data with a type attached — the object the browser uses for downloads, uploads, images, and object URLs. Part 3: Advanced Web Platform https://javascriptcodex.com/file https://javascriptcodex.com/file A File is a Blob with a name and modification date, and FileReader pulls its contents into a string, ArrayBuffer, or data URL through events. Part 3: Advanced Web Platform https://javascriptcodex.com/fetch https://javascriptcodex.com/fetch fetch() sends a network request and hands back a promise that resolves in two stages — first the response headers, then the body you read with a second method call. Part 3: Advanced Web Platform https://javascriptcodex.com/formdata https://javascriptcodex.com/formdata Use the FormData object to capture form fields, files, and Blobs, then POST them with fetch as multipart/form-data. Part 3: Advanced Web Platform https://javascriptcodex.com/fetch-progress https://javascriptcodex.com/fetch-progress Read a fetch response chunk-by-chunk through response.body to track how many bytes have downloaded and show real progress. Part 3: Advanced Web Platform https://javascriptcodex.com/fetch-abort https://javascriptcodex.com/fetch-abort Use AbortController to cancel an in-flight fetch (or any async task) by wiring its signal into fetch and calling abort() when the work is no longer needed. Part 3: Advanced Web Platform https://javascriptcodex.com/fetch-crossorigin https://javascriptcodex.com/fetch-crossorigin How the browser guards cross-origin fetch requests with CORS — origins, safe requests, preflight, response headers, and credentials. Part 3: Advanced Web Platform https://javascriptcodex.com/fetch-api https://javascriptcodex.com/fetch-api A tour of every fetch option beyond method/headers/body — referrer, mode, credentials, cache, redirect, integrity, keepalive — with what each one controls and when you'd reach for it. Part 3: Advanced Web Platform https://javascriptcodex.com/url https://javascriptcodex.com/url Use the built-in URL class to build, parse, and safely encode web addresses instead of juggling raw strings. Part 3: Advanced Web Platform https://javascriptcodex.com/xmlhttprequest https://javascriptcodex.com/xmlhttprequest XMLHttpRequest is the older browser API for HTTP requests — event-driven, capable of tracking upload progress, and still worth knowing where fetch falls short. Part 3: Advanced Web Platform https://javascriptcodex.com/resume-upload https://javascriptcodex.com/resume-upload Build resumable file uploads by asking the server how many bytes it already has, then slicing the file and sending only the rest. Part 3: Advanced Web Platform https://javascriptcodex.com/long-polling https://javascriptcodex.com/long-polling Long polling keeps a persistent link to the server by holding each request open until a message is ready, giving you near-instant delivery with plain HTTP and no special protocol. Part 3: Advanced Web Platform https://javascriptcodex.com/websocket https://javascriptcodex.com/websocket How WebSocket opens a persistent two-way channel between browser and server, from the HTTP handshake to frames, backpressure, close codes, and a working chat. Part 3: Advanced Web Platform https://javascriptcodex.com/server-sent-events https://javascriptcodex.com/server-sent-events EventSource opens a persistent HTTP connection so the server can stream text events to the browser, with built-in auto-reconnect, message ids, and custom event types. Part 3: Advanced Web Platform https://javascriptcodex.com/streams-api https://javascriptcodex.com/streams-api Process data piece by piece with readable, writable, and transform streams — reading chunk by chunk, piping through processing chains, and letting a slow consumer push back on a fast producer. Part 3: Advanced Web Platform https://javascriptcodex.com/realtime-transports https://javascriptcodex.com/realtime-transports Two low-latency transports beyond WebSocket: WebRTC for peer-to-peer media and data with NAT traversal, and WebTransport for multiplexed client-server messaging over HTTP/3. Part 3: Advanced Web Platform https://javascriptcodex.com/web-workers https://javascriptcodex.com/web-workers How Web Workers run JavaScript on a real background thread, communicate through postMessage, copy data with structured clone, and hand off buffers with zero-copy transferables. Part 3: Advanced Web Platform https://javascriptcodex.com/shared-memory-and-atomics https://javascriptcodex.com/shared-memory-and-atomics How SharedArrayBuffer lets multiple threads read and write the same memory, why it needs cross-origin isolation, and how Atomics gives you race-free updates and wait/notify coordination. Part 3: Advanced Web Platform https://javascriptcodex.com/service-workers-and-pwa https://javascriptcodex.com/service-workers-and-pwa How a service worker acts as a programmable network proxy to make web apps installable and offline-first, covering the lifecycle, the Cache API and caching strategies, the manifest, and a look at Background Sync and Push. Part 3: Advanced Web Platform https://javascriptcodex.com/cookie https://javascriptcodex.com/cookie How cookies flow between server and browser, how to read and write them with document.cookie, and what each attribute (domain, path, expires, secure, samesite, httpOnly) actually controls. Part 3: Advanced Web Platform https://javascriptcodex.com/localstorage https://javascriptcodex.com/localstorage How localStorage and sessionStorage keep key/value strings in the browser, how their scope and lifetime differ, and how the storage event lets same-origin windows talk to each other. Part 3: Advanced Web Platform https://javascriptcodex.com/indexeddb https://javascriptcodex.com/indexeddb A deep, example-driven tour of IndexedDB: opening and versioning databases, object stores, transactions, indexes, cursors, and a promise wrapper for clean async code. Part 3: Advanced Web Platform https://javascriptcodex.com/bezier-curve https://javascriptcodex.com/bezier-curve Bezier curves are shapes defined by control points; De Casteljau's algorithm builds them by repeated linear interpolation, and a matching polynomial formula describes the same curve. Part 3: Advanced Web Platform https://javascriptcodex.com/css-animations https://javascriptcodex.com/css-animations Animate CSS properties with transitions, timing functions, steps, and @keyframes, then hook into transitionend and lean on transform/opacity for smooth performance. Part 3: Advanced Web Platform https://javascriptcodex.com/js-animation https://javascriptcodex.com/js-animation Build smooth, fully controllable JavaScript animations with requestAnimationFrame, a reusable animate() helper, and a toolbox of timing functions plus easeIn/Out/InOut transforms. Part 3: Advanced Web Platform https://javascriptcodex.com/webcomponents-intro https://javascriptcodex.com/webcomponents-intro A high-level tour of why component architecture matters and which browser standards make up web components. Part 3: Advanced Web Platform https://javascriptcodex.com/custom-elements https://javascriptcodex.com/custom-elements Define your own HTML tags with a JavaScript class, hook into their lifecycle callbacks, react to attribute changes, and extend built-in elements. Part 3: Advanced Web Platform https://javascriptcodex.com/shadow-dom https://javascriptcodex.com/shadow-dom Give a component its own private DOM tree with scoped styles and its own id space, isolated from the surrounding page. Part 3: Advanced Web Platform https://javascriptcodex.com/template-element https://javascriptcodex.com/template-element The <template> element is an inert, syntax-checked container for HTML you clone and inject later — perfect for reusable component markup. Part 3: Advanced Web Platform https://javascriptcodex.com/slots-composition https://javascriptcodex.com/slots-composition How Shadow DOM slots pull light-DOM content into a component's shadow tree via composition, producing a virtual flattened DOM without moving any nodes. Part 3: Advanced Web Platform https://javascriptcodex.com/shadow-dom-style https://javascriptcodex.com/shadow-dom-style How CSS crosses (or doesn't cross) the shadow boundary — :host, ::slotted, cascading rules, and custom properties as styling hooks. Part 3: Advanced Web Platform https://javascriptcodex.com/shadow-dom-events https://javascriptcodex.com/shadow-dom-events How the browser retargets events at shadow DOM boundaries, how composedPath and the composed flag control what crosses those boundaries, and how to fire custom events that escape a component. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-introduction https://javascriptcodex.com/regexp-introduction How to build regular expressions in JavaScript with the two syntaxes, what each of the six flags does, and how str.match, str.replace, and regexp.test use them to search, replace, and test text. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-character-classes https://javascriptcodex.com/regexp-character-classes How regex character classes like \d, \s, \w and their inverses match whole categories of characters, plus how the dot and the s flag behave. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-unicode https://javascriptcodex.com/regexp-unicode How the u flag makes regular expressions treat 4-byte characters as one and unlocks Unicode property classes like \p{L}. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-anchors https://javascriptcodex.com/regexp-anchors The ^ and $ anchors pin a pattern to the start or end of a string, and together they let you demand a full, exact match. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-multiline-mode https://javascriptcodex.com/regexp-multiline-mode The m flag turns ^ and $ into per-line anchors, matching at every line break instead of only at the string boundaries. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-boundary https://javascriptcodex.com/regexp-boundary Learn how the \b word boundary anchor matches the invisible edges between word and non-word characters, and where it falls short. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-escaping https://javascriptcodex.com/regexp-escaping How to match special regexp characters literally by escaping them, why /.../ and new RegExp differ, and why string-based patterns need doubled backslashes. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-character-sets-and-ranges https://javascriptcodex.com/regexp-character-sets-and-ranges How square brackets in a regexp let one position match any character from a set, a range, or a character class — plus exclusions, escaping rules, and the u flag for astral characters. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-quantifiers https://javascriptcodex.com/regexp-quantifiers Quantifiers control how many times a pattern repeats — from the exact {n} form to the everyday shorthands +, * and ?. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-greedy-and-lazy https://javascriptcodex.com/regexp-greedy-and-lazy How quantifiers backtrack in greedy mode, how the lazy mode flips that behavior, and why a fine-tuned character exclusion sometimes beats both. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-groups https://javascriptcodex.com/regexp-groups How parentheses in a regexp group sub-patterns, capture matched text, and expose it by number or name in match, matchAll, and replace. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-backreferences https://javascriptcodex.com/regexp-backreferences Reuse what a capturing group already matched — by number with \N or by name with \k<name> — to match balanced quotes and other repeated text. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-alternation https://javascriptcodex.com/regexp-alternation The regexp | operator lets you match any one of several full sub-patterns, and parentheses control exactly how far its reach extends. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-lookahead-lookbehind https://javascriptcodex.com/regexp-lookahead-lookbehind Match text based on what comes before or after it — without consuming those surrounding characters — using lookahead and lookbehind assertions. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-catastrophic-backtracking https://javascriptcodex.com/regexp-catastrophic-backtracking Some innocent-looking regexps blow up to exponential work on certain inputs, and you fix it either by removing ambiguity or by forbidding the engine from backtracking. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-sticky https://javascriptcodex.com/regexp-sticky The sticky flag y anchors a regexp to an exact position via lastIndex, so exec matches only there and never scans ahead. Part 3: Advanced Web Platform https://javascriptcodex.com/regexp-methods https://javascriptcodex.com/regexp-methods A tour of every string and regexp method for searching and replacing — match, matchAll, split, search, replace, replaceAll, exec, and test — with their traps around the g flag and lastIndex. Part 3: Advanced Web Platform https://javascriptcodex.com/core-web-vitals https://javascriptcodex.com/core-web-vitals How to measure and fix the speed your real users actually feel using the three Core Web Vitals, LCP, INP, and CLS, with PerformanceObserver, the web-vitals library, and a practical audit-diagnose-fix loop. Part 3: Advanced Web Platform https://javascriptcodex.com/canvas-webgl-webgpu https://javascriptcodex.com/canvas-webgl-webgpu Draw with pixels instead of elements: the Canvas 2D immediate-mode model and render loop, the GPU pipeline behind WebGL, the emerging WebGPU compute-and-render API, and moving rendering off the main thread with OffscreenCanvas. Part 3: Advanced Web Platform https://javascriptcodex.com/web-audio-and-codecs https://javascriptcodex.com/web-audio-and-codecs Synthesize and shape sound with the Web Audio node graph, then reach the browser's built-in video and audio codecs directly through WebCodecs for custom media pipelines. Part 3: Advanced Web Platform https://javascriptcodex.com/webassembly https://javascriptcodex.com/webassembly What WebAssembly is and why it exists: a compact sandboxed bytecode that runs beside JavaScript at near-native speed, its module/instance/memory model, the cost of crossing the JS boundary, how to load it with instantiateStreaming, and which toolchain compiles C, Rust, or AssemblyScript down to a .wasm. Part 3: Advanced Web Platform https://javascriptcodex.com/modules-and-packages https://javascriptcodex.com/modules-and-packages How real projects are wired together: ES modules at the ecosystem level, the anatomy of package.json, npm versus pnpm and what a lockfile guarantees, semantic versioning ranges, the exports field, and supply-chain hygiene. Part 4: Ecosystem & Tooling https://javascriptcodex.com/package-managers https://javascriptcodex.com/package-managers How npm, pnpm, Yarn and Bun actually resolve and lay out dependencies on disk — flat hoisting versus a content-addressed store, the phantom-dependency trap, lockfiles and frozen installs, and how to pick one in 2026. Part 4: Ecosystem & Tooling https://javascriptcodex.com/publishing https://javascriptcodex.com/publishing How to take code from a repo to a registry: the publisher side of package.json, the exports map, why ESM-only is winning, previewing the tarball, provenance via trusted publishing from CI, and when JSR beats npm. Part 4: Ecosystem & Tooling https://javascriptcodex.com/monorepos https://javascriptcodex.com/monorepos One repo with many packages: linking local packages with workspaces, skipping unchanged work with Turborepo's content-aware cache, scaling to Nx, wiring TypeScript project references, and publishing with Changesets. Part 4: Ecosystem & Tooling https://javascriptcodex.com/supply-chain-security https://javascriptcodex.com/supply-chain-security How to stay safe in an ecosystem where malicious packages are industrialized: lockfiles, cooldowns, install-script blocking, scoped short-lived tokens, provenance, SBOMs, and a practical way to vet a new dependency. Part 4: Ecosystem & Tooling https://javascriptcodex.com/build-tools https://javascriptcodex.com/build-tools Why a bundler exists, how Vite serves native ES modules in development and ships optimized chunks in production, and how tree-shaking, code-splitting, minification and source maps turn a folder of modules into a few small hashed files. Part 4: Ecosystem & Tooling https://javascriptcodex.com/transpilers https://javascriptcodex.com/transpilers How a transpiler turns source into an AST and back, why down-leveling syntax is different from polyfilling a missing API, and what Babel, SWC, esbuild and tsc each actually do in a 2026 toolchain. Part 4: Ecosystem & Tooling https://javascriptcodex.com/typescript-tooling https://javascriptcodex.com/typescript-tooling How TypeScript's tooling actually works in 2026 — splitting type-checking from emit, writing a tsconfig that matches your project, cutting big type-checks with project references, running .ts files directly, and what the Go-native TypeScript 7 compiler changes. Part 4: Ecosystem & Tooling https://javascriptcodex.com/code-quality https://javascriptcodex.com/code-quality How linting and formatting split the job of keeping a codebase clean — ESLint's flat config and typed rules for likely bugs, Prettier for opinionated style, Biome as a fast Rust all-in-one, and how to enforce them on save, on commit, and in CI. Part 4: Ecosystem & Tooling https://javascriptcodex.com/testing https://javascriptcodex.com/testing A modern JavaScript testing stack — the testing pyramid, fast unit tests and mocking with Vitest, behavior-first component tests with Testing Library, real-browser end-to-end flows with Playwright, and how to keep it all deterministic and green in CI. Part 4: Ecosystem & Tooling https://javascriptcodex.com/git-hooks https://javascriptcodex.com/git-hooks How git hooks catch broken code and malformed commit messages before they land — pre-commit, commit-msg and pre-push stages driven by husky or lefthook, lint-staged keeping commits fast, commitlint enforcing Conventional Commits, and why CI still has to back all of it up. Part 4: Ecosystem & Tooling https://javascriptcodex.com/ci-cd https://javascriptcodex.com/ci-cd How JavaScript projects ship automatically — GitHub Actions workflows, jobs and runners, dependency caching, matrix builds, secrets and environments, and automated releases with Changesets and semantic-release publishing over OIDC. Part 4: Ecosystem & Tooling https://javascriptcodex.com/node-and-runtimes https://javascriptcodex.com/node-and-runtimes How JavaScript runs on the server: the Node runtime built on V8 and libuv, its event loop and core modules, CommonJS versus ESM, native TypeScript in 2026, and how Deno and Bun compare on permissions, tooling, and speed. Part 4: Ecosystem & Tooling https://javascriptcodex.com/edge-serverless-runtimes https://javascriptcodex.com/edge-serverless-runtimes How JavaScript runs close to your users: serverless functions versus long-running servers, V8 isolates and sub-5ms cold starts, the WinterTC web-standard API surface shared across Node, Deno, Bun and Workers, and Hono as the cross-runtime framework that ties them together. Part 4: Ecosystem & Tooling https://javascriptcodex.com/deploying-apps https://javascriptcodex.com/deploying-apps A practical walkthrough of shipping a JavaScript app to production: choosing between static, serverless, container, and VPS hosting; the build-to-artifact-to-CDN flow; handling env vars and secrets safely; cache-control headers; and wiring up a custom domain with TLS. Part 4: Ecosystem & Tooling https://javascriptcodex.com/how-frameworks-work https://javascriptcodex.com/how-frameworks-work The single problem every UI framework solves — keeping the DOM in sync with your state — and the three strategies used to do it: virtual DOM diffing, fine-grained signals, and compilers that ship surgical DOM code. Part 4: Ecosystem & Tooling https://javascriptcodex.com/rendering-models https://javascriptcodex.com/rendering-models Where and when your HTML gets produced — at build time, per request on the server, or in the browser — and the concrete tradeoffs each choice makes for first paint, interactivity, SEO, and server cost. Part 4: Ecosystem & Tooling https://javascriptcodex.com/meta-frameworks https://javascriptcodex.com/meta-frameworks What a meta-framework layers on top of a UI library — routing, data fetching, rendering, bundling, and deploy adapters — and a practical way to pick between Next.js, Astro, SvelteKit, and Remix for a given project. Part 4: Ecosystem & Tooling