Labs

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 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, rendered only after mount to avoid server-render mismatches, and dark mode follows the system until you toggle it.

A progress dashboard for a freelancer juggling ten clients: four stat cards, a progress trend filterable by coding, testing, design or completion rate, time spent per client, progress per client stacked by type of work, and a client table filtered by status that opens into a detail popup. Each client's progress is split across coding, testing and design in proportion to the hours spent on each, and the latest week on the trend is computed from the current clients' average. The charts are Recharts over a hardcoded set of clients.

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 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 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 product page for premium headphones: a crossfading image carousel with autoplay and thumbnails, a rating summary whose per-star bars are worked out from fourteen reviews, and a review form in a modal, checked field by field, whose submission goes to the top of the list with a Your Review badge. A fixed full-screen photo, with separate landscape and portrait crops, sits behind a blurred features section. Built with motion and react-hot-toast, with images from Unsplash.

Pricing for ArchiFive, an architecture firm: three fixed packages per project, Basic, Premium and Full Service, and a custom package built from six services, whose total appears once you pick the first one. The cards arrive on a staggered spring, there is a dark mode, and the buttons answer with toasts. Built with motion and react-hot-toast.

An online magazine shop, MagStore: eight titles with Unsplash covers, a category filter and search across titles and descriptions, a detail view that opens as a modal on desktop and a bottom sheet on mobile, and a slide-over cart with quantities and a subtotal. Checkout is simulated and ends with a random order number. Built with motion, with a dark-mode toggle that starts from the system setting.

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.

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.

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 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.

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.

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 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 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 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 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.

An animated background of particles drifting and bouncing off the edges, with a line between every pair closer than the connection distance, fading as they move apart. A settings drawer sets the count, connection distance, speed and size, and the particle, line and background colours from pickers or presets, while the header text switches between black and white to stay readable on the chosen background. Drawn on a 2D canvas in a requestAnimationFrame loop, with motion for the drawer.

A solar system in a tilted bubble, built with nothing but HTML and CSS: no images, no SVG, no canvas. Seven planets circle on a rotate3d keyframe, each with its own period, on an orbit plane tilted in 3D, and their sizes are scaled from real diameters. The sun is drawn as two halves, the top one stacked above the orbit plane, so planets pass both behind and in front of it, over a perspective floor of 900 grid cells and a field of stars.

A Q&A game with a coin economy: you start with ten coins, asking a question costs one, every answer you give earns one, and an answer chosen as the best earns its author ten. Browse questions with six filters, answer in forty characters or fewer, pick a winning answer on your own questions, and check the rankings and profiles. Cards open into a question on a shared motion layout, and a coin flies into the header whenever your balance goes up.

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 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.

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.

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.

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.

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.