Monday, August 31, 2026 One coin, one turn, about 4 minutes
Lee Meyer's new polyfill takes the CSS random() function to every browser, Safari already ships it native, and a layout can now deal itself a fresh arrangement on every load.
The globe on the right is live. In Safari 26.2 each capsule lands with rotate: random(per-element, -10deg, 10deg, by 2deg), so every load scatters a different spill. Everywhere else you are seeing the hand-set fallback tilts.
Turn 114 dispenses Series 01 Tooling, Series 02 Technique with today's chase, and Series 03 Workflow
Today's Art Direction
A gachapon shop page printed in two inks and a coin's worth of chance.
Gachapon machines sell bounded randomness: every turn of the crank pays out, you just do not choose which capsule. Today's page borrows that contract for a capsule-toy shop, with an ink marquee, a coin-slot masthead, series plates for shelves, and a globe of two-tone capsules scattered by CSS random() itself where the browser allows. The print treatment is risograph: red and blue inks over a warm black keyline on butter yellow, with every major frame printed twice and slipped a few pixels out of register.
Engine parts and heavy machinery.
July's report from the Rust browser engine: web fonts now render inside inline SVG, 2D canvas went multithreaded for frame rates up to 55 percent higher, and font-feature-values support landed alongside text-decoration-thickness. 488 commits in one month, and Linux arm64 builds joined the download list.
The chase lives here.
Safari 26.2 ships the function native, Chromium keeps it behind a flag, and Firefox has not started. Lee Meyer's css-random-polyfill closes the gap: write the expression into a custom property and every other browser resolves it too, steps and shared bases included.
The demos run from a starfield to a prize wheel, and the syntax reads like plain CSS: a minimum, a maximum, and an optional step. Controlled chance in the presentation layer, with no script in sight at author time. The MDN reference has the full grammar.
Daniel Schwarz rounds up a proposed geolocation element, Chrome support for @supports named-feature(), and flex-wrap: balance, which distributes wrapped flex items as evenly as balanced text. Firefox 154 and Chrome 152 notes close it out.
How the work gets made.
Jeff Atwood's worry is bigger than code quality: when programmers stop asking each other questions in public, the commons that trained these models stops growing. It reads as a companion piece to the hands-first Friday rule in Saturday's issue.
Simon Willison snapshotted the full toolbelt of OpenAI's ChatGPT Codex work environment into one reference page: 232 tool interfaces and 44 skill definitions, captured this morning. For anyone designing agent products, it is a rare look at a production toolbelt laid flat on the table.
Prize Card · Borrow this pattern
Give repeated items a small random tilt and offset so a grid reads as hand-placed: a sticker wall, a photo pile, gallery thumbs, a badge shelf. One declaration does it where CSS random() runs, and an nth-child fallback covers everyone else.
.cap { rotate: var(--tilt, 0deg); }
.cap:nth-child(3n) { --tilt: -6deg; }
.cap:nth-child(3n + 1) { --tilt: 4deg; }
@supports (rotate: random(0deg, 1deg)) {
.cap { --tilt: random(per-element, -10deg, 10deg, by 2deg); }
}
What keeps it honest: keep the range small and stepped so items look placed rather than broken, jitter ornaments and imagery only and never text blocks, and make the fallback a real composition, since most visitors will see it for a while yet.
The insert sheet: fold it into your own machine.
Build a one-page shop landing page for a capsule-toy (gachapon) brand and its monthly toy series. Ground: flat butter yellow (#F3CB4D) with coarse print grain. Content sits on warm cream panels (#FBF4E2) with 2-3px warm-black keylines (#2A2118). Give each major panel a second, misregistered border pass: a red or blue outline (#D64426 / #2E6BB5) offset 4px diagonally, like a two-color riso print slipping registration. Type: a rounded display face (Fredoka) for the nameplate, headline, and series titles; a plain grotesque (Hanken Grotesk) for body copy at 19px with 1.7 line height; a typewriter mono (Space Mono) for slot labels and this insert sheet. Give the headline a solid red offset shadow with no blur. Masthead: an ink marquee bar carrying the brand and nav, then a coin disc stamped with the issue or edition number in place of a metadata table. Hero: a centered headline and deck over a machine band, split between an illustrated capsule-machine plate and a globe panel of CSS-drawn two-tone capsules (a circle, straight color split at 52 percent, ink keyline, one highlight dot). Tilt and nudge each capsule with random(per-element, -10deg, 10deg, by 2deg) inside an @supports guard, with hand-set nth-child tilts as the fallback. Sections are series plates: a filled ink chip reading SERIES 01 beside a rounded display title. Items are cream capsule cards with a mono stock label in one corner; mark one card as the CHASE item with a small red filled tag. Close with a prize card explaining one reusable pattern and a collector's checklist of links with printed square checkboxes. Guardrails: body text at least 19px and never justified; capsule tilts stay within 10 degrees and never touch text blocks; warm black on cream for all small text; no neon, no glow shadows, no gradients beyond the capsule split; any illustration shares one treatment (riso grain, red and blue inks, the same yellow paper).
Paste it into Claude Code, Cursor, v0, Lovable, or Bolt; Beaver Builder AI runs it too.
A capsule machine is the honest version of randomness: a floor, a ceiling, and a prize on every turn. That is also the entire grammar of random(), which is why it belongs in the presentation layer.
Collector's checklist, series 114