# Tech watch

[Canonical source](<https://sebastien.rigaux.be/en/tech-watch/page/4>)

## [NocoDB: a spreadsheet interface for your databases](<https://sebastien.rigaux.be/en/tech-watch/links/nocodb-a-spreadsheet-interface-for-your-databases>)

NocoDB provides a spreadsheet-style interface for managing tables, views, and access controls without writing code. It combines grid, gallery, form, Kanban, and calendar views with REST APIs and an SDK for programmatic access.

Deployment options range from Docker with SQLite or PostgreSQL to an automated setup with PostgreSQL, Redis, Traefik, and SSL renewal. For production evaluation, note that the repository lists a Sustainable Use License, while its standalone binaries are intended for local testing.

2026-10-28 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/nocodb-a-spreadsheet-interface-for-your-databases.md>) · [Original resource](<https://github.com/nocodb/nocodb>)

## [Tailwind CSS: a directory of components, templates, and tools](<https://sebastien.rigaux.be/en/tech-watch/links/tailwind-css-a-directory-of-components-templates-and-tools>)

All UtilityCSS brings together free and paid Tailwind CSS resources, organized by type, use case, and technology. Its listings include copy-paste components, templates, Next.js starters, and color-management tools, several of which support Tailwind CSS v4’s OKLCH formats.

Filters help narrow the catalog to building blocks for a project, but the directory alone does not guarantee their quality or accessibility. The page advises checking those details with each resource.

2026-10-28 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/tailwind-css-a-directory-of-components-templates-and-tools.md>) · [Original resource](<https://allutilitycss.com/>)

## [Fontastic Space: compare fonts and their metrics](<https://sebastien.rigaux.be/en/tech-watch/links/fontastic-space-compare-fonts-and-their-metrics>)

Fontastic Space compares Google Fonts side by side, with anatomy overlays, OpenType metrics, and compatibility scores. Its Playfair Display + DM Sans example compares x-height, cap height, and string width, then provides CSS rules ready to reuse.

The scores draw on several typographic analysis frameworks, but remain a guide: the tool also lets you inspect the visual result in a paragraph or banner before choosing a pairing.

2026-10-28 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/fontastic-space-compare-fonts-and-their-metrics.md>) · [Original resource](<https://fontastic.space/>)

## [prompts.chat: AI prompts integrated with developer tools](<https://sebastien.rigaux.be/en/tech-watch/links/promptschat-ai-prompts-integrated-with-developer-tools>)

prompts.chat brings together community prompts for ChatGPT, Claude, Gemini, and other assistants, alongside an interactive book on prompt engineering. The repository also provides a CLI, a Claude Code plugin, and an MCP server for using prompts across different tools.

For a team, self-hosting provides a private prompt library with custom branding and authentication configured by the setup wizard. The integration examples range from `npx prompts.chat` to a remote MCP connection, without requiring a single access method.

2026-10-28 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/promptschat-ai-prompts-integrated-with-developer-tools.md>) · [Original resource](<https://github.com/f/prompts.chat>)

## [Dessa learns to speak without converting audio to text](<https://sebastien.rigaux.be/en/tech-watch/links/dessa-learns-to-speak-without-converting-audio-to-text>)

Unlike voice systems that turn speech into text before responding, Dessa processes audio directly, end to end. Trained only on human conversation, this speech-to-speech model runs full-duplex: it can listen and talk at once, interrupt, or punctuate an exchange with laughter and backchannels. Its demos also show how pauses and intonation convey meaning.

Inference is reported to run faster than real time, with local execution on a MacBook Pro M4 Max or better. This is still a research preview; the team is inviting AI safety researchers to assess the risks of a model that perceives emotion in speech.

2026-10-28 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/dessa-learns-to-speak-without-converting-audio-to-text.md>) · [Original resource](<https://block.xyz/dessa>)

## [Archify turns a question into an interactive HTML map or page](<https://sebastien.rigaux.be/en/tech-watch/links/archify-turns-a-question-into-an-interactive-html-map-or-page>)

Archify is an open-source Agent Skill that helps an AI agent turn a description, question, or repository evidence into an **interactive diagram** or a concise page with a clear conclusion and sources. It supports ten diagram types, from architecture maps to timelines, and outputs a self-contained HTML file with no runtime dependencies.

Maps can be explored and refined in plain language, without learning a diagram editor. For one-page answers, sources can be pinned to a specific commit; the result can also be exported as a long image or PDF. The skill works with Claude Code, Codex, Cursor, OpenCode, and GitHub Copilot.

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/archify-turns-a-question-into-an-interactive-html-map-or-page.md>) · [Original resource](<https://archify.si/>)

## [Fallback Font Generator: reduce font-related CLS](<https://sebastien.rigaux.be/en/tech-watch/links/fallback-font-generator-reduce-font-related-cls>)

This tool adjusts a system font to more closely match a brand font while it loads. It generates the required `@font-face` rules—including `size-adjust`, `ascent-override`, `descent-override`, and `line-gap-override`—using a visual preview and adjustable controls.

The approach targets layout shifts caused by differences in font metrics. The resulting CSS can be copied into a project, though the page notes that the tool is not supported in Safari.

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/fallback-font-generator-reduce-font-related-cls.md>) · [Original resource](<https://screenspan.net/fallback>)

## [React: making UI states explicit in the agentic era](<https://sebastien.rigaux.be/en/tech-watch/links/react-making-ui-states-explicit-in-the-agentic-era>)

When an agent changes a UI, checking a single account cannot cover every role, plan, or feature flag. Matt Rothenberg shows how values scattered across hooks, providers, and layouts can hide overlooked states — such as a Delete button shown to a view-only user.

Making display state an explicit component input lets teams render relevant combinations directly, test them, or compare them in a visual grid. Storybook and Playwright complement this approach, but they do not choose which scenarios to cover; that decision still matters.

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-making-ui-states-explicit-in-the-agentic-era.md>) · [Original resource](<https://mattrothenberg.com/notes/pure-ui-agentic-era/>)

## [Interop 2027: ten CSS proposals, from accessibility to animation](<https://sebastien.rigaux.be/en/tech-watch/links/interop-2027-ten-css-proposals-from-accessibility-to-animation>)

Josh W. Comeau reviews ten proposals being considered for Interop 2027: CSS functions, custom border shapes, anchor- and scroll-related queries, reading order, intrinsic-size animations, and grid decorations. Several address practical problems: `reading-flow` could align keyboard navigation with a responsive layout, while grid decorations could draw separators without adding empty DOM cells.

The proposals are at different stages of maturity. As of October 2026, several are available in Chromium but not yet in Firefox or Safari; `inherit()` is implemented in no browser. The article shows where progressive enhancement is feasible, with safeguards such as `@supports` for height transitions.

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/interop-2027-ten-css-proposals-from-accessibility-to-animation.md>) · [Original resource](<https://www.joshwcomeau.com/css/interop-2027/>)

## [OGL: a minimal WebGL library for writing custom shaders](<https://sebastien.rigaux.be/en/tech-watch/links/ogl-a-minimal-webgl-library-for-writing-custom-shaders>)

OGL keeps abstractions to a minimum for WebGL rendering and custom shaders. This dependency-free ES module library shares some conventions with Three.js, but provides fewer features and leaves room to use native WebGL commands directly.

Its Math, Core, and Extras split helps keep integrations modular; the README lists 29 KB minified and gzipped for the full set before tree-shaking. Commented examples cover both a camera-based scene and a fullscreen shader. The low abstraction level makes the code easier to learn and extend, while leaving more WebGL details to the developer.

2026-10-26 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/ogl-a-minimal-webgl-library-for-writing-custom-shaders.md>) · [Original resource](<https://github.com/oframe/ogl>)

## [Chums brings Claude Code and Codex to Apple Watch](<https://sebastien.rigaux.be/en/tech-watch/links/chums-brings-claude-code-and-codex-to-apple-watch>)

Chums connects an Apple Watch and iPhone to Claude Code or Codex agents running on a Mac. Its interface makes agent activity visible, shows tool calls, and lets users respond to permission requests or dictate instructions.

The Node.js hub stays on the Mac, but the watch API is exposed through Tailscale Funnel and protected by a token. The project is open source and requires no Chums account, though setup involves building the apps with Xcode and configuring several dependencies—a trade-off between local control and a more demanding installation.

2026-10-25 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/chums-brings-claude-code-and-codex-to-apple-watch.md>) · [Original resource](<https://github.com/lcoutodemos/chums>)

## [Claude SEO brings multi-agent SEO audits to Claude Code](<https://sebastien.rigaux.be/en/tech-watch/links/claude-seo-brings-multi-agent-seo-audits-to-claude-code>)

Claude SEO turns Claude Code into an SEO auditing tool: specialist agents assess indexing, performance, content, structured data and visibility in AI search, then produce a prioritized action plan. Reports stay on the machine, but analyzed pages are sent to Claude, as with other Claude Code workflows.

The repository also emphasizes tooling reliability, with automated checks, support for Python 3.11 through 3.14, and safeguards against untrusted web content. Live-data extensions are optional; without Google API keys, Core Web Vitals results are lab estimates.

2026-10-24 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/claude-seo-brings-multi-agent-seo-audits-to-claude-code.md>) · [Original resource](<https://github.com/AgriciDaniel/claude-seo>)

## [Clairic: typed extraction and estimates from unstructured data](<https://sebastien.rigaux.be/en/tech-watch/links/clairic-typed-extraction-and-estimates-from-unstructured-data>)

Cloudflare introduces Clairic, an extraction model available in preview on Workers AI. From text or images, it returns typed values such as dates, numbers, and lists, and can also compute, estimate, or forecast values, with confidence scores and intervals for estimates. Its responses are well-formed, but not necessarily correct.

The API can process multiple fields in parallel and return extracted text with its source offsets. Cloudflare notes limits in the current checkpoint: multi-step arithmetic, estimates without supporting evidence, and detailed forecasting call for caution. The authors recommend leaving complex calculations to code and using confidence scores and intervals to guide review.

2026-10-24 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/clairic-typed-extraction-and-estimates-from-unstructured-data.md>) · [Original resource](<https://blog.cloudflare.com/clairic-extraction-model/>)

## [CSS \`random()\`: Add playful variation without breaking layout](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout>)

The CSS `random()` function adds visual variation in the browser, without JavaScript or Sass loops. Brecht De Ruyte demonstrates it with subtly tilted letters, cards animated on scroll, and shadows that respond to card rotation. A caching key can keep multiple properties in sync, while `sibling-index()` calculates the structure of a fanned-out card stack.

These effects are best suited to decorative elements: the article advises against randomizing grids, body text, or interactive targets. With browser support still rolling out, it recommends a stable baseline enhanced through `@supports`, and stresses respecting `prefers-reduced-motion` and screen-reader access.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/css-random-add-playful-variation-without-breaking-layout.md>) · [Original resource](<https://www.smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/>)

## [Next.js 16.4: faster navigation without prefetching everything](<https://sebastien.rigaux.be/en/tech-watch/links/nextjs-164-faster-navigation-without-prefetching-everything>)

To reduce loading skeletons in v0, the team combines Next.js Partial Prefetching with cache rules suited to public and personalized data. Playwright `instant()` tests check that priority content is ready at click time, and remain in the codebase as CI regression checks.

Prefetching also responds to user intent: in large grids, details load on hover, focus, or touch rather than for every visible card. That adjustment followed a 2.9× increase in prefetch requests. The overall comparison reports lower daily costs, while cautioning that the change cannot be attributed to this refactor alone.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/nextjs-164-faster-navigation-without-prefetching-everything.md>) · [Original resource](<https://nextjs.org/blog/improving-navigation-experience-in-v0-with-nextjs-16-4>)

## [Vercel Shop speeds up a Shopify storefront with Next.js](<https://sebastien.rigaux.be/en/tech-watch/links/vercel-shop-speeds-up-a-shopify-storefront-with-nextjs>)

Vercel Shop pairs a Next.js storefront with Shopify, which remains responsible for the catalog, payments, and checkout. Cache Components serve product data quickly, then stream personalized content; meanwhile, the cart updates before the server responds through an optimistic UI.

The template adds agent-facing options: an opt-in shopping assistant, skills for extending the store, and Markdown served through the `Accept` header. It offers a concrete starting point for these flows while keeping Shopify as the commerce engine.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/vercel-shop-speeds-up-a-shopify-storefront-with-nextjs.md>) · [Original resource](<https://vercel.shop/>)

## [Astro 7.4 adds build timings and parallel prerendering](<https://sebastien.rigaux.be/en/tech-watch/links/astro-74-adds-build-timings-and-parallel-prerendering>)

Astro 7.4 introduces `astro build --timings`, breaking down time spent rendering pages, running Vite plugins, processing Markdown, and transforming images. The release example shows how the report exposed sequential network requests and helped cut generation time for blog pages.

The release also separates image services for build and runtime, and adds `notFound()` for manually composed entrypoints. Parallel prerendering and custom redirect pages remain **experimental**; the former can increase memory use. One upgrade requirement to check: Astro now requires Node.js 22.22.0 or later.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/astro-74-adds-build-timings-and-parallel-prerendering.md>) · [Original resource](<https://astro.build/blog/astro-740/?ck_subscriber_id=2550494205&utm_source=convertkit&utm_medium=email&utm_campaign=%E2%9A%9B%EF%B8%8F%20This%20Week%20In%20React%20%23302%3A%20Next.js%2C%20React%20Router%2C%20DevTools%2C%20Security%2C%20shadcn%2C%20Hydrogen%2C%20Vinext%2C%20Mutative%2C%20R3F%20%7C%20RN%200.88%2C%20Expo%2058%2C%20Navigation%2C%20FastImage%2C%20Screens%2C%20Device%20Hub%2C%20Edge%20to%20Edge%20%7C%20TypeScript%2C%20PHP%2C%20CrUX%2C%20Rsdoctor%2C%20Astro%20-%2023823401>)

## [c15t 3: one consent engine for eight frameworks](<https://sebastien.rigaux.be/en/tech-watch/links/c15t-3-one-consent-engine-for-eight-frameworks>)

c15t 3 rebuilds consent management around a shared engine with adapters for Next.js, React, Vue, Nuxt, Astro, Svelte, TanStack Start, and plain HTML sites. Banners can be rendered into server HTML, while a **consent manifest** avoids waiting on the backend for every request. The reported gains depend on the deployment mode and come from benchmarks published by the project.

The migration preserves choices stored by v2, but changes APIs, packages, and the backend. Codemods handle part of the upgrade; clients and backend must move to v3 together. The release also introduces more strictly validated policy rules and a rewritten self-hosted backend supporting PostgreSQL, MySQL, and SQLite.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/c15t-3-one-consent-engine-for-eight-frameworks.md>) · [Original resource](<https://c15t.com/changelog/3.0.0>)

## [React Bits 2.0 reworks animated components and creative tools](<https://sebastien.rigaux.be/en/tech-watch/links/react-bits-20-reworks-animated-components-and-creative-tools>)

React Bits 2.0 announces 216 animated components: 104 have been rebuilt or redesigned, and more than 20 have dropped extra dependencies. Demos add presets and click interactions, while Background Studio, Shape Magic, and Texture Lab have been rebuilt to tune effects live and export the results.

The update also refreshes the documentation and landing page, which is reported to use about five times less JavaScript. The catalog supports expressive interface prototyping; the range of animations still makes it worth assessing their runtime and dependency costs before integrating them into a product.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-bits-20-reworks-animated-components-and-creative-tools.md>) · [Original resource](<https://x.com/davidhaz/status/2110662315959803905?s=46>)

## [Mutative: immutable updates without the spread syntax](<https://sebastien.rigaux.be/en/tech-watch/links/mutative-immutable-updates-without-the-spread-syntax>)

Mutative lets developers write mutations against a draft to produce a new immutable state, avoiding manual spread copies at every level. It also supports arrays, `Set` and `Map`, along with patches and optional freezing.

Its benchmarks report a geometric mean 3.6 times faster than Immer with matched settings, or 6.6 times with each library’s defaults. Results vary by workload; hand-written reducers remain faster in most of the cases shown.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/mutative-immutable-updates-without-the-spread-syntax.md>) · [Original resource](<https://mutative.js.org/>)

Page 4 / 22

[Previous](<https://sebastien.rigaux.be/en/tech-watch/page/3>)

[Next](<https://sebastien.rigaux.be/en/tech-watch/page/5>)
