星期三 03 下午 七月 9o 2025
Getting kinetic with React Three Fiber
#435 — July 9, 2025
Together with
⚛️ React Status
How to Create Kinetic Image Animations with React Three Fiber — A fantastic visual effect for the Web (which can try live here) that’s explained in technical detail. It’s amazing what React Three Fiber can do and might inspire you to have a play for yourself..
Dominik Fojcik
💡 Codrops is a ‘go to’ for this sort of thing – they have a solid back-catalog of React Three Fiber tutorials if you want to create dramatic visual Web experiences.
▶ What Every React Developer Should Know About Signals — Ryan, the creator of SolidJS, put eight hours into making this ten minute video which is a good look at the state of signals in modern JavaScript code and compares them to React’s approach.
Ryan Carniato
Embrace Web RUM Provides User-Focused Observability — Embrace Web RUM connects technical performance to user engagement. Get full session timelines, Core Web Vitals and JS exceptions in context, and user journey analysis with intelligent issue correlation. Learn more and get started for free today.
Embrace sponsor
IN BRIEF:
TypeScript 5.9 Beta has been released.
Nuxt is to Vue.js as Next.js to React, so it’s interesting to see Vercel has acquired NuxtLabs, the company directly maintaining Nuxt. This means Nuxt, Next.js, and Svelte now all have close ties with Vercel. Vue’s creator Evan You is optimistic about this development.
A comparison of data egress costs from about 40 popular providers and cloud services, including Vercel, AWS, Fly and Linode.
@vitejs/plugin-rsc provides React Server Components support for Vite and is newly under the @vitejs organization.
The Story of Patreon’s Internationalization Overhaul — Content creator monetization platform Patreon had its own homegrown legacy i18n library for its React-based frontend, but overhauled it with a more modern (though unnamed) approach using codemods. The tale is told in an interesting way.
Val Booth (Patreon)
Building a Lightweight Reactive State Manager with ES6 Proxies — What if you didn’t need a library for reactive state management? An interesting exploration of a built-in JavaScript mechanism for reacting to state changes. React doesn’t use this approach under the hood (though Vue 3 does) but it’s worth understanding.
Loren Stewart
📄 Rendering CT Scan Animations in the Cloud – Above, we touched on using React Three Fiber to render dramatic Web effects, but it can have scientific applications too. Noah Teuscher
🛠 Code, Tools & Libraries
BlockNote 0.33: A ‘Notion-Like’ Block-Based Text Editor — A ProseMirror and TipTap-based editor that lets you drag and drop blocks, add real-time collaboration, AI features, customizable ‘slash command’ menus, and more. There are tons of examples to enjoy.
TypeCell
Server-Side Support for MCP in Next.js — Enable your users to securely grant AI applications like Claude, Cursor, and others access to their data within your app.
Clerk sponsor
Unistyles 3.0: Powerful Styling for React Native Apps — Claims to be “the only styling library on the market that uses native code and C++ to get job done”, it’s tightly integrated with React Native’s Fabric renderer, and focused entirely on the New Architecture.
Jacek Pudysz
💡 Jacek has written more about Unistyles on the Expo blog taking more of a look at Unistyles’ benefits over other approaches.
Microsoft Open Sources Its GitHub Copilot Chat Extension — Even if you have no interest in AI, it offers a good look at how MS builds its own extensions and how a particularly large extension can be organized overall.
VS Code Team
Next.js Boilerplate 5.0 – Boilerplate starter app for Next.js with auth, database support, i18n, forms, and more.
📅 React DayPicker 9.8 – Customizable date picker. Now with better keyboard navigation.
🔎 React Scan 0.4 – Scan for performance issues and eliminate slow renders in your app.
react-force-graph 1.48 – Component for rendering force-directed graphs.
📊 Ant Design Charts 2.6 – React chart library. Demos and code samples.
Material UI 7.2 – Independent React components using Material Design.
🤖 React ChatBotify 2.2 – Library for creating chat bot experiences.
stylex 0.14.0 – The styling system that powers Facebook itself.
♟︎ React Chessboard 5.1 – Render chess boards. (Examples.)
📊 Recharts 3.1 – D3-powered chart library for React.
📰 Classifieds
⚡️Add lightning-fast barcode & QR scanning to your web app with STRICH, a sleek JS library. Clear, predictable pricing. Free trial and demo!
⚛️ Join React Summit US to learn under the stars! Meet Addy Osmani, Amy Dutton, Tanner Linsley & more Nov 18 & 21 in NYC & online.
📢 Elsewhere in JavaScript
A roundup of some other interesting stories in the broader JavaScript landscape, in case you’ve missed them:
Over on Reddit, an ex-Meta engineer posted an interesting comment about how Meta / Facebook serves up React as part of the main Facebook site.
JS1024 is an annual JavaScript code golfing contest. You’ve got till July 19 to submit a JavaScript program written in 1024 bytes or less on the theme of ‘Creepy’.
New versions of all maintained Node.js release lines will be released next week due to some discovered security vulnerabilities.
jsonrepair is a Node library, CLI tool, and basic online tool for fixing up invalid JSON documents so they’ll parse.
Deno 2.4 was released, reintroducing its deno bundle
bundler, improved support for some Node globals, and improved Node.js API support generally.
James Sinclair explores the differences between arrow functions and named functions in JavaScript.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
#435 — July 9, 2025
Together with
⚛️ React Status
How to Create Kinetic Image Animations with React Three Fiber — A fantastic visual effect for the Web (which can try live here) that’s explained in technical detail. It’s amazing what React Three Fiber can do and might inspire you to have a play for yourself..
Dominik Fojcik
💡 Codrops is a ‘go to’ for this sort of thing – they have a solid back-catalog of React Three Fiber tutorials if you want to create dramatic visual Web experiences.
▶ What Every React Developer Should Know About Signals — Ryan, the creator of SolidJS, put eight hours into making this ten minute video which is a good look at the state of signals in modern JavaScript code and compares them to React’s approach.
Ryan Carniato
Embrace Web RUM Provides User-Focused Observability — Embrace Web RUM connects technical performance to user engagement. Get full session timelines, Core Web Vitals and JS exceptions in context, and user journey analysis with intelligent issue correlation. Learn more and get started for free today.
Embrace sponsor
IN BRIEF:
TypeScript 5.9 Beta has been released.
Nuxt is to Vue.js as Next.js to React, so it’s interesting to see Vercel has acquired NuxtLabs, the company directly maintaining Nuxt. This means Nuxt, Next.js, and Svelte now all have close ties with Vercel. Vue’s creator Evan You is optimistic about this development.
A comparison of data egress costs from about 40 popular providers and cloud services, including Vercel, AWS, Fly and Linode.
@vitejs/plugin-rsc provides React Server Components support for Vite and is newly under the @vitejs organization.
The Story of Patreon’s Internationalization Overhaul — Content creator monetization platform Patreon had its own homegrown legacy i18n library for its React-based frontend, but overhauled it with a more modern (though unnamed) approach using codemods. The tale is told in an interesting way.
Val Booth (Patreon)
Building a Lightweight Reactive State Manager with ES6 Proxies — What if you didn’t need a library for reactive state management? An interesting exploration of a built-in JavaScript mechanism for reacting to state changes. React doesn’t use this approach under the hood (though Vue 3 does) but it’s worth understanding.
Loren Stewart
📄 Rendering CT Scan Animations in the Cloud – Above, we touched on using React Three Fiber to render dramatic Web effects, but it can have scientific applications too. Noah Teuscher
🛠 Code, Tools & Libraries
BlockNote 0.33: A ‘Notion-Like’ Block-Based Text Editor — A ProseMirror and TipTap-based editor that lets you drag and drop blocks, add real-time collaboration, AI features, customizable ‘slash command’ menus, and more. There are tons of examples to enjoy.
TypeCell
Server-Side Support for MCP in Next.js — Enable your users to securely grant AI applications like Claude, Cursor, and others access to their data within your app.
Clerk sponsor
Unistyles 3.0: Powerful Styling for React Native Apps — Claims to be “the only styling library on the market that uses native code and C++ to get job done”, it’s tightly integrated with React Native’s Fabric renderer, and focused entirely on the New Architecture.
Jacek Pudysz
💡 Jacek has written more about Unistyles on the Expo blog taking more of a look at Unistyles’ benefits over other approaches.
Microsoft Open Sources Its GitHub Copilot Chat Extension — Even if you have no interest in AI, it offers a good look at how MS builds its own extensions and how a particularly large extension can be organized overall.
VS Code Team
Next.js Boilerplate 5.0 – Boilerplate starter app for Next.js with auth, database support, i18n, forms, and more.
📅 React DayPicker 9.8 – Customizable date picker. Now with better keyboard navigation.
🔎 React Scan 0.4 – Scan for performance issues and eliminate slow renders in your app.
react-force-graph 1.48 – Component for rendering force-directed graphs.
📊 Ant Design Charts 2.6 – React chart library. Demos and code samples.
Material UI 7.2 – Independent React components using Material Design.
🤖 React ChatBotify 2.2 – Library for creating chat bot experiences.
stylex 0.14.0 – The styling system that powers Facebook itself.
♟︎ React Chessboard 5.1 – Render chess boards. (Examples.)
📊 Recharts 3.1 – D3-powered chart library for React.
📰 Classifieds
⚡️Add lightning-fast barcode & QR scanning to your web app with STRICH, a sleek JS library. Clear, predictable pricing. Free trial and demo!
⚛️ Join React Summit US to learn under the stars! Meet Addy Osmani, Amy Dutton, Tanner Linsley & more Nov 18 & 21 in NYC & online.
📢 Elsewhere in JavaScript
A roundup of some other interesting stories in the broader JavaScript landscape, in case you’ve missed them:
Over on Reddit, an ex-Meta engineer posted an interesting comment about how Meta / Facebook serves up React as part of the main Facebook site.
JS1024 is an annual JavaScript code golfing contest. You’ve got till July 19 to submit a JavaScript program written in 1024 bytes or less on the theme of ‘Creepy’.
New versions of all maintained Node.js release lines will be released next week due to some discovered security vulnerabilities.
jsonrepair is a Node library, CLI tool, and basic online tool for fixing up invalid JSON documents so they’ll parse.
Deno 2.4 was released, reintroducing its deno bundle
bundler, improved support for some Node globals, and improved Node.js API support generally.
James Sinclair explores the differences between arrow functions and named functions in JavaScript.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
发布者