Front-End RoundupGathered from around the web

Weekly · 26 Oct – 1 Nov 2026

CSS-Tricks goes independent, random() reaches Chrome, and TanStack shrinks React

CSS-Tricks is independent again, and its return lifted the mood among web educators. CSS random() is now in Chrome 156 and Firefox Nightly, and the demos piled up. TanStack shipped Redact, a smaller React for the browser, and AI 1.0, while Node 26 became the LTS line and TypeScript 7.1 learned to check Vue, Svelte and SQL files. WebMCP got a W3C polyfill, and Chrome is about to draw live HTML into canvases. This page also catches up on two posts from last week that reached us late. 71 posts from 36 sources.

CSS-Tricks is independent again

Geoff Graham announced that CSS-Tricks has a new owner: him. "Even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous." Frontend Focus notes that after a spell under DigitalOcean, the site is independent once again.

  • The newsletter is back too: What's!important #19 catches up after the hiatus with CSS refraction effects, scroll state queries and @custom-media. The Frankenstein Table is "a super scary way" to build tables with other layout techniques, like CSS Grid.
  • Andy Bell's If we stop, we lose starts from that news. Since the tech industry bet on LLMs, the numbers have taken "a dramatic tumble" industry-wide and many educators have gone quiet, but a talk with Geoff about his plans perked him up. To "we don't need articles and courses because we can just ask an LLM now", he answers that he could also eat an entire can of spray cheese: "It ain't gonna nourish me!"
  • The Index #204 calls it "a big win for the web". "We're not done yet!"

CSS gets random()

CodePen Spark #531 is a special edition: random(), which landed in Safari last year, is now in Chrome 156 and has just appeared in Firefox Nightly.

  • Chris Coyier starts with the basics, randomly placing three squares with random colours, and Coding2Go gives a 4-minute rundown on YouTube.
  • Temani Afif's confetti shape explosion blows any border-only shape into confetti on hover, using random(), shape(), sibling-index() and sibling-count(). His converter turns an SVG into shape() code to do the same with a logo.
  • Chris Bolson places numbers at random for a Halloween FizzBuzz, with a pseudo-random fallback, and Antoine Villepreux gets deterministic randomness without random() from trigonometric functions and calc().
  • The Polyplane blog has a collection of examples and ideas for the proposed random-item(), and Lee Meyer made early demos work in every browser with a fallback polyfill for CSS-Tricks.

The previous Spark has more shape(): a single-element clock from Matthew Morete, and a tour of the solar system from Chris Bolson using :scroll-marker and the new attr() functions (Chromium only for now).

More CSS

  • Kevin Powell says stop using min-width in your media queries: the range syntax is much easier to use. In his newsletter he explains anonymous boxes: text alone in a flex button is wrapped in one, so one rule with gap handles buttons with and without an icon, with no .button--with-icon modifier.
  • Master.dev collects useful @custom-media presets. Only Firefox has it, behind the layout.css.custom-media.enabled flag; Chrome has an intent to prototype and Safari nothing yet. So each preset also comes in container style query syntax, and a PostCSS plugin can process them.
  • Temani Afif continues his series with two circles connected by border-shape: curved and distorted links that follow both circles through anchor positioning. Only Chrome and Edge support everything so far.
  • Kitty Giraudel finally plays with cascade layers, four years after Miriam Suzanne's guide, and tries them on their own site, which still carries leftovers of the Sass Guidelines 7-1 architecture. The idea: a weak selector in a stronger layer beats a strong one in a weaker layer.
  • David Bushell asks Tangled, the GitHub alternative, to hire a front-end accessibility expert. Its new Svelte UI sets text at 12px with a 16px line height, which makes the site practically unusable for him, and the new front end leaves little room to zoom or override it.

Browsers and the platform

Frontend Focus had a busy week:

  • HTML-in-Canvas arrives in stable Chrome next week. It draws real, live HTML into 2D, WebGL and WebGPU canvases, and text selection, form controls, Find-in-Page and screen readers still work. Three.js, Babylon.js and PixiJS already support it.
  • Firefox 159 turns on scroll-driven animations by default, so they work in all major engines, and adds scoped custom element registries.
  • DeadTag: attackers are buying the expired domains of old analytics, ad and widget scripts, so any site still carrying the tag loads their code. Scott Helme's advice: audit your tags.
  • Since Chrome 155, sites can use the Digital Credentials API to offer credentials such as digital IDs to a wallet app on the user's phone.

Also:

  • Chrome 156 is stable and no longer caches module fetch failures, so a failed dynamic import() can be retried. Safari 27.1 previews the Device Posture and Viewport Segments APIs on the iPhone Duo behind flags, to detect folds and screen segments (JavaScript Weekly).
  • WebKit fixed processes that weren't closed under memory pressure, switched its media player to GStreamer's playbin3, released libsoup 3.8.1 with security fixes and deprecated the legacy libwpe API: from 2.56 (March 2027) apps using it get warnings (Igalia).
  • Chris Kirk-Nielsen shared his Interop 2027 shortlist, heavy on CSS: flex-wrap: balance, if(), filter() on images, gap decorations, corner-shape, object-view-box (his own proposal), customizable <select>, and reading-flow "before masonry". Shop Talk Show episode 738 covers Interop voting, margin-trim, AI-assisted tests and streaming content into a page without first building a recursive tree.
  • What should go on a dynamic social media card? Chris Coyier looks at how links unfurl across platforms and argues most generated cards waste the image by restating the title and description.
  • The W3C completed its www-talk archives: the messages from 1993 to February 1995, rebuilt from partial copies, including Tim Berners-Lee announcing the list and Dan Connolly posting an HTML DTD.

WebMCP

The W3C's Open Source Program launched its second pilot, a polyfill for WebMCP, the incubating API that lets web apps expose their features as tools for agents, browser agents and assistive technologies. It'll be an npm package, starting with lifecycle events and declarative support, and should fade out once browsers implement the API natively. A new Community Group, open to anyone, will run the program.

At the TPAC developer meetup in Dublin, Patrick Brosset argued that agentic browsing should be built by web developers rather than agents scraping the DOM and breaking when the UI changes. You can try WebMCP in Edge today. Syntax compares it with AG-UI in episode 1051.

Frameworks and JavaScript

TanStack had a big week (This Week In React). Redact, Tanner Linsley's AI-driven experiment, is now a real project and a drop-in replacement for React and React DOM in the browser, working with Start, Next.js, Vinext and Vite. Server rendering and Server Components still use React. The trade-off is that Redact renders synchronously, with no time slicing, and React Status points to a tester on r/reactjs who found re-renders cost about twice the CPU on two production sites. TanStack AI 1.0 is stable too, with 23 provider adapters and an experimental agent harness (JavaScript Weekly).

  • TypeScript 7.1 beta adds a programmatic API, source phase imports, --target es2026 and content mappers. Bytes explains the last: plugins, set in tsconfig.json and run with tsc --runExternalCode, turn files such as Vue, Svelte, Astro or SQL into virtual TypeScript files, and span mappings put errors, completions and go-to-definition back in the original file. midudev covers it in Spanish.
  • Node.js 26 is now the active LTS line, with updates until April 2029, and Node 27's first alpha is the first under the new annual schedule (Node Weekly). Upgrade to 26.12.1, 24.22.1 or 22.23.4: they fix ten CVEs, including the "Node2Shell" flaw in the bundled Brotli decoder, which can lead to remote code execution through node:zlib. Express fixed a body-parser crash in 2.4.0 and 1.20.9, and Node can now strip types in node_modules, but only in private packages such as monorepo workspaces.
  • Next.js has a security release planned for 3 November, with seven medium-severity fixes. Owner moved 10,000+ restaurant sites from Next.js to Astro, with React only in islands, and their p75 menu-page LCP went from 5.4s to 0.7s (This Week In React).
  • Den Odell put ten design systems under load. With the CPU slowed 4x, opening a 249-country dropdown took 84ms in Mantine and 134ms in Ant Design but over 200ms in MUI and React Spectrum. Non-React Ionic was slowest to open (1,266ms) but quick with 100 checkboxes. A fix for React Aria's one-at-a-time measuring is in review.
  • Deno: the team is working on getting Deno into a foundation, and a fork, Ende, plans to drop Node compatibility and focus on sandboxing (JavaScript Weekly). With Deno's runtime winding down after the team's move to Cloudflare, Node Weekly links to an analyst warning against a runtime monoculture of Node, Bun and workerd.
  • Electron 45 moves to Chromium 156, SWC's next version is much faster, Bun ships a code formatter and GitHub Actions workflow lockfiles are generally available.
  • LogRocket benchmarked react-markdown against Streamdown, Markstream and Comark for streaming chat replies. Short replies gave little reason to switch, but a long one with six code blocks showed a substantial cost with syntax highlighting under CPU throttling.
  • Pat Kerr, whose 1996 Atari ST prototype was the basis of GTA's vehicle physics, rebuilt it in JavaScript, a fitting companion to Bramus' GTA.js (JavaScript Weekly).

Security, continued

Bytes explains last week's PHP flaws, "php2shell": a huge multipart POST request makes PHP run out of memory mid-parse, and the shutdown routine then follows a planted pointer and runs the attacker's payload. Update to 8.5.12, 8.4.27, 8.3.36 or 8.2.35; Cloudflare's WAF can block known attempts, but PHP says updating is the only complete fix.

Front-End Fire runs through the week of hacks on OpenCode, PHP, Next.js and TLS certificates, and asks whether AI is making code reviews worse. midudev adds attacks on Railway and LiteLLM in a very worrying week for the internet (in Spanish).

AI, agents and tools

Elsewhere

  • CodePen Radio episode 446: CodePen brought the tech behind its Trending and Following feeds in-house, with trending working alongside a reputation score.
  • Smashing Magazine's November wallpapers are out, a monthly tradition for over 15 years.

Catching up from last week

These were published on 22 and 23 October, but reached us after last week's page was written.

  • LogRocket teaches an agent a design system with Google's Open Knowledge Format: Markdown files with YAML frontmatter, one per Primer React component, generated from the package, so the agent loads only what it needs instead of a growing AGENTS.md. Component usage is checked in CI and compared with a flat file.
  • Smashing Newsletter #582 collects free books and guides, from Jeremy Connell-Waite's storytelling site Tell Better Stories to A Book Apart titles that went back to their authors when the publisher closed in 2024, many now free.