Frontend & JS Digest — Week 27

React's Fragment docs now spell out the canary-only `ref` story: a `FragmentInstance` lets you add listeners, manage focus, scroll a group, read layout rects, and observe visibility across first-level DOM children without paying the wrapper-element tax. It is still canary, but the API is exactly aimed at the awkward places where "just add a div" breaks layout, semantics, or CSS.

Vercel introduces eve, an open-source framework for production agents where an agent is a directory: `agent.ts`, `instructions.md`, tools, skills, subagents, channels, schedules, and connections. The serious part is the batteries-included runtime story: durable sessions, sandboxes, human approvals, MCP/OpenAPI connections, multi-channel adapters, tracing, and evals.

Deno documents `deno desktop`, which turns a Deno project, from a single TypeScript file to a Next.js/Astro/Fresh/Vite-style app, into a redistributable desktop bundle. The interesting pitch is very Deno: framework auto-detection, WebView by default with optional CEF, in-process bindings, cross-compilation, HMR, DevTools, and built-in binary-diff auto-update.

Temani Afif makes native `<input type="range">` sliders wiggly using CSS only: `border-shape`, scroll-driven animations, `@property`, a few custom properties, and no extra DOM. It is Chrome-only for now, but it is another good reminder that modern CSS keeps eating tiny animation libraries and decorative JavaScript.

Research paper on Celestial, a Storybook add-on that generates "distinguishing variations" for UI components: examples that are both realistic enough to look like real product states and distinct enough to map the component's design space. The hybrid approach combines symbolic/static analysis for visually important props with an LLM sampler for plausible content.

Tim Wehrle hides a tiny HTML payload in favicon pixels: encode bytes into RGB channels, add a four-byte length header, load the favicon, draw it to canvas, read the pixels back, and reconstruct the markup. Not useful in the practical sense, which is exactly why it is useful as a browser/data boundary experiment.

A beautifully uncomfortable page that tells you what your browser disclosed the moment you arrived: IP-derived location, device and browser details, preferences, font signals, battery/canvas/clipboard capabilities, and more. The best design choice is that JavaScript being required is not incidental; the page is about the browser being read.

Mature React framework for browser-based admin and B2B apps on top of REST or GraphQL APIs, maintained by Marmelab and built around TypeScript, React, and Material Design. Worth keeping on the shelf whenever the problem is not "invent a UI" but "ship a serious CRUD surface with auth, lists, filters, forms, permissions, and data providers."

Rust renderer for JSX, HTML, and CSS that turns component trees into PNG, JPEG, WebP, SVG, and animations without headless Chromium. It aims squarely at OG/social image generation: `next/og`-compatible APIs, native Node bindings, WASM for edge/browser use, real CSS support, and much lower overhead than starting a browser for every card.

Open-source, local-first markdown editor positioned as a shared knowledge base for humans and coding agents. The shape is sensible: Notion-like editing over plain markdown, MCP integration, agent skills, agentic search, git-backed sync, templates, diagrams, callouts, media, and enough structure for specs, runbooks, postmortems, and PRDs to stay close to the code.

react-stinky is an agent skill for React/TypeScript code review that looks for component API smells, derivable state, bad effects, structure problems, rendering bugs, accessibility gaps, type escapes, and cross-file duplication. The useful bit is the refusal policy: each finding names the cost, gives a concrete fix, cites a source, and tries hard not to flag local conventions that are actually fine.