Labs

The 3D version of CosmicRace. Every planet sits where it really is on today's date, placed from NASA JPL orbital elements and checked against JPL Horizons to within a tenth of a degree, and turns on its real axis, so Uranus rolls on its side, Venus spins backwards and Earth's day and night match the clock. Drag to orbit, scroll to zoom, click a planet to fly to it and ride along its orbit. The Sun is a shader with churning granulation and a corona; Earth has city lights on its night side, sun glint on the oceans, drifting clouds and a thin blue atmosphere; Saturn's rings and the planet cast shadows on each other. Thirteen moons of Mars, Jupiter, Saturn, Uranus and Neptune circle their planets where JPL Horizons puts them, Phobos and Deimos as real shape models. Ceres, Pluto, Haumea, Makemake and Eris follow orbits fitted to JPL Horizons, with Pluto and Charon circling their shared centre of mass and Haumea as its stretched, ringed shape; where no spacecraft has looked, the surface is an artist's impression, labelled as such. Thousands of asteroids orbit on the GPU, with the Kirkwood gaps and Jupiter's Trojans, under a Milky Way set at its real angle. True scale shows how empty space really is, and Race mode brings back the original 2D game: circular tracks, real average speeds, and any planet can be moved onto another's track. Planet maps from NASA missions (SDO, MESSENGER, Cassini, LRO, Voyager, Dawn, New Horizons), Irwin et al. 2024 and Solar System Scope (CC BY 4.0), brightness and colour calibrated to measured albedos and spectra.

A colour-mixing quiz in four levels, from two colours to five: see the strips, then pick their mix from five swatches. The answer is the average of the colours' red, green and blue values, and the palette can be pastel, vivid, dark or random, with the hex codes shown or hidden. A short tutorial opens the game, the header keeps count of right and wrong answers, and the chosen swatch grows into the result card on a shared motion layout.

A gallery of 35 interactive backgrounds that answer the cursor, each one a full page you can tune live. Three.js scenes include a morphing particle swarm, a wobbling jelly, liquid chrome, refracting crystal shards, silk ribbons, a terrain flyover, a wormhole, a voxel landscape and a field of pillars. Shader pieces simulate water you can drag ripples through, ink-like fluid, caustics, a soap-film iridescence, a raymarched lava lamp, reaction-diffusion coral, slime-mould networks, the Game of Life, fractals, a kaleidoscope and fire, alongside an LED pixel wall, halftone print, fireworks, lightning, a dot-wave corridor and classic canvas pieces like flow fields, glyph rain and a synthwave grid. Every background has its own palettes, colour pickers and sliders; Shuffle rolls a random look, the gallery (G) shows them all, the arrow keys step through them and H hides the panel.

The solar system as a race track. Each planet circles the sun at its real average orbital speed in km/h, along an orbit whose real length in kilometres sets how long a lap takes, all drawn in a single SVG. Move a planet onto another planet's orbit and it keeps its own speed, so Mercury on Neptune's track laps far faster than Neptune does, while a year counter ticks over with Earth. Fading trails, orbit and planet labels, and a size-ratio view can be switched on from the menu.

A colour-mixing quiz with no table of answers anywhere in it. Paints are mixed by the geometric mean of their reflectances — the Beer-Lambert idea that pigments subtract light and so multiply rather than average, which is why yellow and blue come out green here and grey in anything that averages RGB. The palette is built by that same function: five pigments are given a hex, and the other twenty colours are declared as mixtures and coloured by whatever the mixer makes of them, so no swatch can disagree with the question. Which pairs the game may ask about is then discovered rather than written down — every pair is mixed, and the ones landing squarely on a named colour become askable, which turns up combinations nobody listed, like pink and sky blue making lavender or teal and rose making grey. Difficulty is measured, not assigned: a round scores high when its answer is easy to confuse with another paint, when it resembles one of its own parents, and when the parents are themselves mixtures. Rounds are drawn up that curve, and the three wrong owls slide from across the paint box to near misses as it steepens.

An addition game for young learners: after a countdown, answer sums of two numbers from 1 to 10 by picking one of four options, and every right answer fuels a rocket climbing towards the moon. Correct answers add speed, wrong ones take it away and the rocket slowly loses speed on its own, so the race is against the clock; the end screen shows your time, flags a new record and lists every answer. The rocket is an inline SVG whose exhaust flickers faster as it speeds up, and a flame flies from Earth into the rocket on each correct answer.

An analog clock you design yourself. Eight preset themes, from Station to Planets, are the starting point; the Customize panel then opens up the face, hands, markings and numbers one part at a time: width, length, colour, shape, roundness, distance from the centre and shadows, with six Google fonts for the numerals. The hands can tick or sweep, the clock can follow any of 35 timezones, and saved themes persist in localStorage. It is plain DOM and CSS transforms, no canvas or SVG; in sweep mode the second hand keeps adding to its rotation past 360° so it never spins backwards at the top of the minute.

Upload a picture and Pixelify resamples it onto a grid from 2×2 up to 128×128, reading one colour from the centre of each cell on a hidden canvas and previewing the result beside the original as you drag the slider. The output is plain HTML and CSS rather than an image: one class per colour and a div per pixel laid out in a CSS grid, ready to copy to the clipboard or download as a page you can host anywhere.

A compound interest calculator: set the starting amount, the yearly rate, the period, how often interest compounds (yearly, quarterly, monthly or daily) and a regular contribution with its own frequency, and the results update as you type. The balance is worked out period by period rather than from the closed formula, so contributions and compounding at different frequencies can be combined, and the growth shows as a stacked area of deposits against interest or as a table. Built with Recharts, with a light and dark theme.

A night clearing rendered in real time with Three.js: a full moon behind drifting cloud, wind rolling through 180,000 blades of grass, barked trees with moss and lichen, ground mist and fog. Nearly four hundred fireflies hover over the meadow, each flashing on its own rhythm and climbing as it lights, the way real males do, and their light falls on the grass, the leaf litter and the trunks around them. Press and hold and the swarm gathers into a swirl at your pointer while the lens racks focus onto it. Keep holding: every firefly is an oscillator nudging its timing toward the others (the Kuramoto model), and within seconds the whole swarm flashes as one, like the synchronous fireflies of the Great Smoky Mountains. A phase dial in the corner shows them falling into step. Night sounds of crickets and a breeze are synthesised on request.

A one-button game in the style of Stick Hero: hold the mouse, a finger or the space bar to grow a stick, let go to drop it across the gap, and the crab walks over if it reaches the next pipe. Landing in a pipe's small centre zone scores double, and the best score is kept in localStorage. Everything on screen, the crab, palm trees, waves and pipes, is drawn by hand on a 2D canvas every frame, with a slower-scrolling background for parallax, the crab's legs wiggling in alternating phase as it walks, and sharp rendering on high-density screens.

The 3D version of Crab&Stick, built with Three.js. The rules and speeds are the 2D game's: hold the mouse, a finger or the space bar to grow a stick, let go to drop it across the gap, and the crab walks over if it reaches the next pipe. Landing on the red dot at a pipe's centre scores double, and the best score is kept in localStorage. Everything is modelled in code, with no image or model files: the crab, from ellipsoids and cylinders, scuttles sideways with its six legs lifting in alternating phase, follows the stick with its eyes on stalks, blinks, and snaps its pincers after a perfect landing; pipes rise out of a low-poly sea whose waves are a sum of sines, with foam rings bobbing at the waterline. Sandy islands with palm trees and drifting clouds give the depth that the 2D game's parallax faked, and a miss ends in a splash.

A Flappy Bird remake: tap, click or press space to flap through the pipes, one point per pipe, with the best score kept in localStorage. The look is its own: a hand-drawn SVG bird, DynaPuff type, checkerboard pipes and a scrolling ground, and clouds and a sun made of blurred divs. The bird is a DOM element moved by a requestAnimationFrame loop with simple gravity and a fixed flap impulse, tilting with its speed.

A remake of Chrome's offline T-Rex runner that fills the whole window instead of a 600x150 strip. Space, the up arrow or a tap jumps (hold for a higher jump), the down arrow or a swipe down ducks or drops fast, and the best score is kept in localStorage. The rules follow the original: speed climbing from 6 to 13, cactus groups that appear as it speeds up, pterodactyls at three heights after 8.5, a flashing score every 100 points and an inverted night sky with moon and stars every 700. Every sprite is a pixel bitmap drawn on a canvas at whole-pixel scale, collisions are tested pixel by pixel, and the blips are square waves from the Web Audio API.

Dino Run rebuilt in 3D with Three.js, in a faceted low-poly style: every model is made in code from a few crumpled, flat-shaded primitives, with no image or model files. The camera looks down at the T-Rex from slightly above and can swing sideways at any time, from a front-on view to one behind the dino looking down the lane: drag with the mouse or use the left and right arrows, while the space bar or up arrow jumps and the down arrow ducks. Before a run you can pick a colour theme: the sunset Dusk, a white Mono like the original with the dino kept green, or a soft Pastel. Dust puffs from the feet on take-off, trails behind the run and billows on landing, and the dino squashes and stretches as it jumps. The rules are the 2D game's: speed climbing from 6 to 13, cactus groups as it speeds up, pterodactyls at three heights after 8.5, a flashing score every 100 points and a night sky with moon and stars every 700. Collisions still test the original pixel sprites, so the 3D game is exactly as fair as the 2D one.

A memory puzzle on a 3×3 board: study nine marbles, each a colour and a symbol, press Play, then put them back from a shuffled tray. One wrong placement ends the round. Sixteen levels raise the difficulty by mixing in more shapes and colours, from two shapes in a single colour to nine of each, so later boards leave fewer repeats to lean on. Marbles can be dragged onto the board or tapped into place, travelling between tray and board on shared layout animations; their glossy highlights, the glass panes and the waves behind them are plain CSS and SVG.

No JavaScript at all: not a single script tag. A solar system in a floating glass bubble, built with nothing but HTML and CSS, with no images, SVG or canvas either. The orbit plane is a real 3D plane, so planets pass in front of and behind the Sun. Each planet turns to face the camera and spins its own gradient-painted surface, and a day/night terminator computed from the orbit geometry keeps it lit from the Sun all the way round: full behind it, a crescent as it swings in front. Saturn's rings hold their attitude in space, the asteroid belt is spokes cut by rings, and even the pause and names toggles are plain checkboxes styled with CSS.

A bike configurator: choose the frame material, colour, wheel size and gears, add accessories, and a live total with a price breakdown and a delivery estimate keeps up as you go. The preview is a stack of transparent PNG layers, so recolouring the frame is a matter of laying a different frame image over the same bike. The total springs on every change, and the dark mode starts from the system setting.

A shop for LEGO-style bricks where every product is an inline SVG: picking one of six colours recolours the brick on its card by swapping the HSL shades of its top, front and side faces, and changes the price. The colour buttons double as quantity badges, a stepper sits on each card, and a cart dropdown keeps a line per colour with remove and a running total. Built with motion and react-hot-toast, with a dark mode that follows the system.

A feedback form that tries to make leaving feedback feel good: five stars, each with its own caption from "Yikes, that was bad" to "Loved it!", a message box that asks for at least ten characters, and a thank-you view that plays back your rating and words. Clicking a star releases a copy of it that grows to four times its size and fades away. It is a single React component, with motion for the hover, tap and entrance animations and a dark mode that follows the system.

A T-shirt designer on the product page: pick one of five colours and a size, then upload a JPG, PNG or SVG, drag it around the print area and resize it from the corner. The price is the base shirt scaled by size plus a print cost that grows with the area the image covers, recalculated as you resize. The artwork sits over the shirt mockup at a position stored as fractions of the print area, so it stays in place at any screen size.

A dashboard for a library's circulation desk. A band of today's numbers opens it: checkouts against the same weekday last week, returns due, books on loan, overdue loans and active readers. Below sit borrowing activity with weekends shaded and a 7-day average, borrowing by category, a weekday-by-hour heatmap of the busiest hours, returns due over the next two weeks, a status donut that switches the list below it between available, borrowed and overdue books, the five most borrowed titles, waiting lists that flag titles with more than three readers queuing per copy, and a month-against-month comparison. Date-range and category filters in the header feed the panels through a shared React context, and every chart is Recharts. The data is generated when the page loads, a hundred copies of twenty-five titles and six months of borrowing that runs busier at weekends and after school, so the numbers are different on every visit.

A dashboard for a plant's last 30 days: five cards for leaf count, sunlight, water, soil pH and height, each switching the main chart, the page's colour and the calculations to that measure. A diagnostics list shows the latest unusual readings, and a calculations panel works out growth rate or the minimum, maximum and average over a date range you choose, or the Pearson correlation between two measures, stated in plain words. The 30 days are generated when the page loads, with occasional spikes, drops and missing readings built in, and the charts are Recharts.

A one-page tour of the eight planets: an orbital simulation you can pause, reset and speed up from 0.1× to 5×, six comparison charts (size, mass, moons, distance, orbit and temperature) drawn with Recharts, and a card per planet that opens into a detail view. The orbits are pure CSS: each planet circles on a keyframe animation whose duration is its real orbital period divided by 1000, and the speed slider rescales every duration at once through calc(). Distances and sizes are schematic rather than to scale, so all eight fit on one screen, and the page follows the system's light or dark theme.

A space-weather console in a sci-fi skin: solar-flare intensity by X, M and C class, an aurora forecast that reads the current Kp index on a scale from Quiet to Strong, and solar-wind speed and density on a two-axis chart, across six regions and under a live UTC clock. The history is generated when the page loads and the latest point is redrawn every five seconds, so the charts move without any data feed behind them. Charts are Recharts with gradient fills, set in Orbitron and Lexend.

A pricing page with four plans: Basic, Plus, Pro and a Custom plan you build by toggling seven add-ons on top of five included features, priced as you go. Billing switches between monthly and annual at 15% off, prices animate as they change, and the subscribe buttons run a short mock checkout. The monthly and annual switch slides on a shared motion layout, and the light and dark theme starts from the system setting.

A launch page for a premium road bike, CyclePro, that borrows from brutalism: hard angles, heavy type and a dark palette. Section edges are clip-path polygons whose depth scales with the window, a fixed full-screen photo shows through the page as it scrolls, and each section slides in with motion whenever it enters view. It runs through features, specs, reviews and an FAQ built on native details elements, and ends in a validated pre-order form that confirms the reservation in place.

A sales dashboard, SalesVision, with four views (overview, sales, regions and products) behind a collapsible sidebar. A filter popover picks the time period, from daily to yearly, and any mix of five regions, and the charts redraw for the selection: trend lines per region, the last 30 days, grouped and stacked bars across ten product categories, and each region's share. The charts are Recharts in one cobalt hue with a single hot accent: a spotlight trend, a hover-driven donut and ranked bars, and dark mode follows the system until you toggle it.

A study tracker across eight subjects: overall progress, hours and completed subjects up top, a six-week trend for assignments, exams and completion, each subject's progress stacked by assignments, exams and projects, time spent per subject, and a details table with deadlines and status badges. Every panel has its own status filter (urgent, in progress, completed, untouched) that folds into a dropdown on mobile, and urgency is worked out against today's date. Built with Recharts and motion, in a light and dark theme that starts from the system setting.

A support chat widget seen from both sides: a simulation panel switches between the admin and four customers, or registers a new one, with a PIN check for an email that is already known. Conversations have quoted replies, read ticks, unread badges and messages grouped under Today, Yesterday or the date, and the admin works from an inbox sorted by the latest message. Both sides are typed by hand by switching users, and everything lives in memory. Built with motion, date-fns and react-hot-toast.

A one-page site for a painter, Elena Frost: a hero that slowly zooms as you scroll, a masonry gallery filterable by abstract, landscape and portrait with an enlarged view, the artist's story, services, a timeline of the artist's journey, rotating testimonials and a contact form. Built with motion, in Montserrat and Playfair, with imagery from Unsplash.

A one-page site for a tattoo artist, Mike Dash: a portfolio of nine pieces filterable by black, colour and minimal, with a lightbox, then about, services with stats, testimonials and a contact form that simulates sending. A fixed full-screen background shows through semi-transparent sections, which slide in each time they scroll into view, and the display type is Pirata One. Built with motion and lucide-react.

A freelancer's working dashboard for ten clients, saved in the browser. A header timer tracks design, coding or testing time per client and logs it when stopped; time can also be logged by hand. Stat cards and every chart are computed from those entries and from progress snapshots: an eight-week progress trend, hours per client by kind of work for this week, 30 days or all time, a day-by-day time log with undoable deletes, unbilled work priced at each client's rate with mark-as-invoiced, and progress per client. The client table searches, sorts and filters, shows hours against budget, and opens a dialog to edit details and progress, archive, restore or delete. Time exports as CSV. The charts are Recharts.

A task manager for shared chores: create groups, add members and tasks with a frequency, then tick tasks off, reassign them, change due dates or rotate every task to the next member in one go. New tasks go to whoever has the fewest, and a removed member's tasks are handed on to someone else. A dashboard tracks totals, completion rate, how tasks are spread across members and the three due soonest. Built with motion and lucide-react.

A Sudoku game with four difficulties, from 40 cells removed on Easy to 65 on Expert, each with its own hint allowance and an optional error limit. Play with the keyboard (numbers, arrows, delete, and N for pencil notes) or the on-screen pad, with undo, a pausable timer, highlighting of matching numbers, save, load, export and import of a game, and stats kept in localStorage. Puzzles are generated by a randomised backtracking solver that fills a grid and then clears cells.

A tile puzzle, PuzzleSnap: choose one of twelve photos, which a hidden canvas cuts into nine square tiles, shuffled and turned at random. Drag a tile onto another to swap them and click one to turn it a quarter, until every tile is back in place and upright, against a timer. Dragging is dnd-kit with separate mouse and touch sensors, and there is a focus mode, a dark mode and confetti at the end.

A working nutrition tracker with ninety days of synthetic history. A scrollable strip of days shows each one filled to its calories against goal; pick one, or step with the arrow keys or a swipe. Each day shows what's left with exact bars against every goal, meals grouped as breakfast, lunch, snacks and dinner, where the energy came from, when you ate, and which foods drove each nutrient. Log food from a searchable list with servings, meal and time, edit or remove it with undo, quick-add your most logged foods, set your own goals, and read a four-week Chart.js trend and a seven-day grid. Everything stays in your browser.

A one-page site for a furniture maker, Simone Louis: a hero over a fixed full-screen photo, a portfolio of nine pieces that open into an enlarged view, an about section with stats, services, testimonials and a contact form that simulates sending. Sections slide in each time they scroll into view, the mobile menu is a full-screen blurred overlay, and the photography comes from Unsplash. Built with motion.

A logistics dashboard for five warehouses: summary cards for delivered, in transit, new and average delivery time, a shipment trend per warehouse, each warehouse's share and total, and deliveries stacked across ten categories. A filter sets the period from daily to yearly, scaling the numbers to match, and any mix of warehouses, and the data regenerates with every change. The sidebar collapses to an icon rail, there is a dark mode, and every chart is Recharts, with the pie's labels placed by hand.

A monitoring dashboard for three volcanoes, Mount Etna, Kilauea and Mount St. Helens: eruption classes on an area chart filterable by VEI, a six-day ash-cloud forecast with a spread index and emission level, and seismic tremor frequency and magnitude on a two-axis chart. The history is generated on load and the latest reading is redrawn every five seconds, while a simulated alert reports an eruption every twenty seconds as a toast and in the notification panel. Glassy cards over Recharts, motion and sonner.

A world clock styled after iOS: a large clock for the selected city above a list of others, a searchable list of 51 cities to add from, and an edit mode to delete cities or drag them into a new order. Each city's time is worked out from UTC with its offset and ticks every second, and the list reorders on motion's Reorder. Light and dark themes start from the system setting.

A shopping cart for a snack shop, SnackFit: change quantities, remove an item through a confirmation that slides up over it, and try a coupon code against a mock check. Shipping turns free above $50, tax is added, and checkout runs a short simulated payment that ends on a success screen. Items move into place with motion layout animations as the cart changes.

Sorting algorithms stepped one comparison at a time, with the array, the code pointer, the counters and the sound all rendering the same frame index — the run is traced before anything is drawn, so the pointer cannot drift from the animation and stepping backwards costs exactly what stepping forwards costs. The sound is a Web Audio instrument in about eighty lines, no dependency and no audio files: pitch is the value, mapped exponentially from F3 across 2.2 octaves, so an out-of-order pair falls and a settled one rises.

A first-principles tutorial on garbage collection in JavaScript. It opens by explaining what memory is, what a reference is, and the three designs anyone has made work — manual free, reference counting, and tracing from roots — so that "reachability, not reference counting" means something before it is asserted. Then seven short programs, each with its object graph drawn out and walked by a real mark-and-sweep collector: a reference cycle that is collected anyway, a closure quietly holding a million-element array, a detached DOM node kept alive by a cache, a Map and a WeakMap that differ by one word, and tri-colour marking interrupted mid-walk to show why the write barrier exists. Every lesson also says why the collector is built that way, what the rule costs you in real code, and how to check the claim yourself. An eighth view drops references entirely and shows the same collector as memory — a nursery, an old generation, promotion after two survivals. A ninth is the part most tutorials skip: how to find a leak in your own application with a heap snapshot, a retainer chain and the three-snapshot technique. A tenth lists the sources: the ECMAScript specification's liveness clause, V8's own posts, Ungar's 1984 paper, and the Node commands that produced the numbers, with their real output. The point is that a leak in JavaScript almost always means "still reachable by accident", and that reachability is a substitute for a question no collector can answer.

Sixteen operations on a binary search tree, stepped one comparison at a time: search, insert, delete with its awkward two-child case, invert, the four traversals, and eight questions asked about a tree rather than done to one — height, balanced, longest path, mirror image, valid search tree, path sum, kth smallest, lowest common ancestor. Those last eight are grouped together because they are one idea underneath: a fold from the leaves upward, where a node cannot answer until both children have, and the badge under each node is that node's returned value. A frame is a whole snapshot of the tree rather than a diff, and node ids are stable across frames, so the diagram animates instead of blinking when an operation replaces the root.

Ten graph algorithms across three drawings, because a graph algorithm's lesson lives in a different picture depending on what it does: a node-link diagram for the traversals and the spanning trees, a paintable grid for pathfinding, and a parent-pointer forest for union–find, which is a picture of bookkeeping rather than of any graph. Node positions are authored by hand rather than produced by a force simulation, so every frame draws identical points and stepping backwards lands on a pixel-identical picture. The grid is where A* earns its keep and where it does not: it explores 103 cells against Dijkstra's 218 on the rooms maze for the same 24-step route, and 201 against 227 on a comb maze where the route doubles back and the heuristic is simply wrong. Kruskal draws the union–find forest underneath the graph, so accepting an edge and merging two trees read as one event, and it builds the same tree Prim does in a completely different order.

Thirteen runs over eight problems, ordered as a curriculum rather than by difficulty: Fibonacci first, as four runs on one problem — naive recursion tree, memoised, bottom-up table, two variables — because the argument for the whole technique is watching the same tree get pruned. Then grid paths, coin change, knapsack, longest common subsequence, edit distance, longest increasing subsequence and matrix chain. Three things a printed table cannot do carry the app: arrows drawn from the cells each new cell was read from, a traceback phase that walks backwards and reconstructs the actual answer rather than just its number, and a deliberate wrong run — the knapsack rolling array iterated upwards — where per-cell item stamps make the double-count visible instead of merely described. Every traceback was checked against an independently computed answer: the edit script is replayed and has to turn one word into the other, and the matrix-chain bracketing is re-priced by multiplying it out.

Eleven lessons, each a small component tree with React's work loop walked across it one fiber per frame: beginWork down, completeWork back up, with the code panel showing React's own source and saying, on every lesson, whether what you are reading is verbatim or simplified. It starts before the jargon does — what setState really does (it writes a lane and walks to the root, it does not render), and why the pre-Fiber recursive render could not be paused, because the position in a recursive walk is the JavaScript call stack and a call stack cannot be saved in a variable. From there: the fiber tree as a linked structure, hooks as a second linked list and why that is the real reason for the rules of hooks, the work loop, how keys decide which fiber is which, bailouts, the two trees and the pointer swap, where useLayoutEffect and useEffect actually run, and what happens to half-finished work when something urgent arrives. Every lesson also says why React is built that way and what the choice costs. The fibers are laid out the way the pointers point: child drops down, sibling goes right, return comes back up the left gutter, so reading the diagram is reading the data structure. A twelfth view is a captured profile rather than a drawing — the same 120-component update rendered plainly and inside startTransition, measured at 83.1 ms in one block against 5.5 ms in sixteen, for the same total work — and a Sources view lists every claim with the React file, the function and the constant it came from. Written for someone who has never opened React's source, and built so they do not have to take any of it on trust.

An interactive tutorial on the JavaScript event loop, built so a beginner finishes understanding the why as well as the what. It starts from symptoms anyone has seen — a dead button, a spinner that stops spinning, text arriving in bursts — then explains why the platform has one thread at all and what a callback "arriving later" physically is. Fourteen short programs are then traced through the loop's own parts: a call stack, the microtask queue, the task queues, the animation-frame callbacks and the rendering steps, with the panel the loop is currently inside taking the accent border. They cover the stack running to empty, microtasks draining before any task, await as a microtask boundary desugared to .then, why try/catch cannot reach a later task and when an unhandled rejection is reported, what the promise combinators actually cost the loop — Promise.all as a subscription that starts nothing and answers two microtask turns after its inputs settle, the first rejection winning while the other work carries on uncancelled and unreported, and Promise.allSettled waiting for every outcome and never rejecting — rendering as work the browser queues for itself at a rendering opportunity, why a click waits behind a long task and how that becomes INP, microtask starvation, the 4 ms timer clamp, the fact that the spec says a task queue rather than the task queue, how to hand the loop back with scheduler.yield, and how Node differs. Two machine views measure the same loop against a 16.7 ms display frame and walk Node's libuv phases in the order they run since Node 20. Every lesson carries a Why panel, an in-place glossary and a Proof panel: the exact specification sentence — including the ECMAScript algorithms for PerformPromiseAll and PerformPromiseAllSettled that the tick counts are derived from — or the snippet that was run and the output it printed, in Chrome 152 and Node 24.

A first-principles tutorial on the browser's rendering pipeline. It opens by explaining what a browser is actually being asked to do — you hand it a string of bytes and it has to produce a rectangle of coloured pixels, sixty times a second — and works through the machine that does it: tokenizing HTML into a stream of tokens, building a DOM tree from them, parsing CSS into the CSSOM, combining the two into the tree that actually gets drawn, laying that tree out into boxes with real coordinates, painting those boxes into lists of drawing commands, and handing the result to a compositor that can move it around without asking the main thread. Then the question the whole subject turns on: when you change something, which of those stages has to run again? Nine lessons, each a short document or a short loop, traced frame by frame. A classic script in the middle of the body blocks the tokenizer while a deferred one does not; a stylesheet in the head does not block parsing but does block first paint, measured at 448 ms against a 12 ms control; a node with display:none is absent from the render tree while visibility:hidden is present and costs the same layout; a width change re-runs style, layout and paint, a background-color change re-runs style and paint but not layout, and a transform re-runs neither — 59 Layout events against 0 against 1, counted in a real Chrome trace; a loop that reads offsetWidth between writes runs 1,000 layouts and 224.5 ms where the batched version runs two and 0.8 ms; and a CSS transform animation keeps moving at 60 fps through a three-second main-thread block while the same motion written as `left` freezes solid. Every lesson also says why the pipeline is built that way, what the rule costs you in code you will actually write, defines every word it leans on where it uses it, and cites the specification clause or the captured trace behind each claim. Where a claim is Chrome-specific it says which Chrome; where the specification does not define a term that everybody uses — 'reflow' and 'layout' are both engine jargon, not spec vocabulary — it says that too.

An interactive tutorial on React hooks as a mechanism rather than an API, for someone who wants to know why the rules exist rather than what they are. It starts before the jargon: a component is a function, a function's variables die when it returns, a closure outlives the call that made it — and React therefore has to keep your state somewhere else and match this render's hook calls to the last render's state with nothing to match on but the order. Ten lessons then trace that machinery one frame at a time, with React 19.1.0's own functions named as they run: mountWorkInProgressHook building the linked list on fiber.memoizedState, updateWorkInProgressHook cloning it cell by cell while currentHook and workInProgressHook walk in lockstep, the dispatcher swapped into ReactSharedInternals.H before your function is called and swapped back the moment it returns. A hook inside an if is not asserted to be dangerous; the same walk runs, the cursor lands on the wrong cell, the variable quietly takes another hook's value, and React's real dev-mode table and its real thrown error are printed verbatim. Three lessons cover state as a value rather than a box — a pushed array that changes the data and nothing else, Object.is deciding a bail-out and disagreeing with === in both directions, and why setCount(c => c + 1) is a different computation rather than a different style. Three more are about closures: a stale one built step by step inside a custom hook, the three fixes and what each one costs, and why a dependency array is one slot rather than a cache. A twelfth view is a recording rather than a drawing — three copies of the same hook running 20 ms intervals on one component, and the arrays they really pushed. A thirteenth runs eleven fixtures through eslint-plugin-react-hooks and shows the one shape it cannot see. Every number on the page was captured from a real render in Chrome, and the last view lists every file, function and script behind it.

A first-principles tutorial on authentication as a frontend developer meets it. It opens by explaining why a web request has to carry anything at all — HTTP keeps no memory, a password cannot be sent on every request, so the browser carries a stand-in — and only then introduces the four parties OAuth 2.0 defines. Then ten traced conversations, each drawn as a sequence diagram with the actual request beside every step: what a token replaced and why the server stopped remembering you; the authorization code flow one message at a time, with every parameter named and glossed; what PKCE adds and the exact problem it solves, using RFC 7636's own published test vector recomputed locally; why the implicit flow was retired, and the difference between RFC 9700 saying SHOULD NOT and RFC 10017 saying MUST NOT; a real JWT taken apart to show that the payload is base64url rather than ciphertext, that editing a claim breaks the signature, and that signed is not secret; and how an ID token differs from an access token, a distinction most tutorials blur. The second half is the decision: the same cross-site scripting and the same cross-site request forgery run against localStorage and an HttpOnly cookie at the same time, side by side, with what survives each — and the honest conclusion, which is that HttpOnly converts token theft into session riding rather than granting immunity, and that neither choice touches the attack the current best current practice considers worst. Then refresh tokens and rotation, including where rotation's detection provably fails, and the backend-for-frontend pattern that RFC 10017 strongly recommends instead. It is defensive throughout: mechanisms and mitigations, never payloads. Nothing is asserted without a citation, every credential on screen is fabricated, and the cookie claims — what SameSite=Lax really stops, and the two-minute grace period the attribute-less default still grants a cross-site POST — were measured in headless Chrome rather than repeated.

A two-pane JavaScript scratchpad: the source in one pane, whatever it printed in the other. The code runs in a Web Worker rather than on the page, which is what makes an unbounded loop survivable — a watchdog terminates the thread after two seconds, because terminating it is the only thing that stops a loop that never yields, and every run gets a fresh worker so nothing leaks from one into the next. Output is formatted rather than stringified: Maps, Sets, circular references, sparse arrays and getters each print as themselves, and error line numbers are mapped back to the editor's own numbering. The editor is CodeMirror, with completion scoped to what the sandbox actually exposes instead of the page's globals. Panes stack or sit side by side in either order, and the layout is remembered.

An abstract black hole drawn with 140,000 white particles. The disk spirals in on closed-form Keplerian paths computed on the GPU, and every particle behind the hole is bent by a gravitational lens: the far side of the disk is thrown up over the top and a second, flipped image appears underneath. Throw in an object and it opens in its own popup window as a cloud of points: a rocky planet, a ringed giant, a gas giant, an ice moon, a red dwarf or a comet. The windows talk over a BroadcastChannel, so each object knows exactly where the black hole sits on your screen. Drag its window towards the black hole window to feed it: the closer it gets, the harder the tide stretches it along the line to the hole, its points peel off near side first and stream across the screen into the disk, until it crosses the edge, is drawn out into spaghetti and gone, leaving its window empty.

Off-axis projection, Johnny Lee style. MediaPipe's BlazeFace finds your eyes in the webcam feed; their spacing gives your distance and their position your angle. The camera never rotates: the frustum is skewed so its edges always pass through the screen's edges, which is what turns the screen into a window instead of a TV. Three scenes (targets, a tunnel, orbiting shapes), a strength slider, recenter, and a mouse mode when there's no camera. Video never leaves the device.

Classic Sokoban, drawn on a canvas and tuned for small hands on a phone, that keeps going long after the easy levels. A bear cub pushes wooden crates onto stars: a crate smiles and turns gold when it lands, and looks worried when it is pushed somewhere it can never get out of, while the undo button wiggles to help. Move with the big d-pad, a swipe, the arrow keys, or tap a spot and the cub walks there by the shortest path. There are 90 levels in six worlds. Garden, Beach and Snow are hand-made for young children, from one crate in a straight line upward; Desert, Cave and Space are generated by a backward search from the solved position that keeps the starts needing the most pushes, climbing to six-crate puzzles that take 63 pushes at best. Every level ships with a solution found by a separate forward solver and replayed by an independent rules engine in the tests. Undo is unlimited and even a restart can be undone. Everything on the board is drawn in code, the sounds are synthesised with Web Audio, and finished levels earn a star kept in this browser.

A demo of how much a web page knows about where it is on your screen. Every window of the page reports its viewport position (screenX/screenY and the outer and inner sizes) over a BroadcastChannel. One window is the main window: the oldest one, or whichever you last pressed Set as main in. The main window draws a line to every other window, exactly where it sits on the desktop, so overlapping windows show their outlines through each other, plus a minimap of the whole screen. The other windows only know about the main one and turn a compass needle to point at it as you drag windows around. Windows that close say goodbye; ones that go silent drop out after a few seconds.