前端周热点124：FLIP, Lifecycle, Next.js, TypeScript, Vanilla-Extract, LiveView, Remix-烟雨网

大家好！

在经过短暂的几周后，React生态终于缓了口气，各种公告也逐渐放慢！；
我们仍然有一些不错的文章在发表。Next.js的TypeScripts针对Next.js的插件看起来相当棒！
GitHub Universe会议已经结束。Guthub看起来准备在更多的场景中使用React，在一些可交互的文档中也可以使用实现MDX的Github Blocks.

💡 在Twitter上订阅期刊 – visual format 🎨

⚛️ React

Inside Framer’s Magic Motion

一篇有趣生动的介绍Layout动画的可交互文章。它极大的解构了FLIP技术的，允许通过css transforms(position，scale)使这种转化表现的更好。我们一步步重现了Framer Motion的布局动画。

类似的主题，我推荐也可以阅读Frameer Motion动画布局概览.

Timeline of a React Component With Hooks

一篇含有可交互Demo的文章，展示了React组件的生命周期，包含hooks、refs和Dom 更新/渲染（移动端不能用）。还包括一个知识测验，有很多文章引用。

Next.js 13 TypeScript Plugin

Shu Ding正在开发一个TypeScript 语言服务插件（源码）,通过在Next.js和Server Components约定的基础上，包含文档、新的错误以及自动完成，大大改善了Next.js DX。这很好的弥补了TypeScript无法从ES Module导出类型的缺陷，也是框架作者强烈呼吁的功能。

Writing Performant CSS with vanilla-extract

一篇非常详尽介绍vanilla-extract的文章，这是Mark Dalgleish(CSS Modules的作者)开发的无运行时的CSS-in-JS库。还提到了它的原子CSS overlay Sprinkles。基于React的示例：重新实现了Tailwind UI组件。和Tailwind以及其它CSS-in-JS解决方案做了很多比较。它看起来很强大，实际上用起来并不简单，我们必须好好学习。

📖 React beta版本文档: class component API ref (WIP)
🐙 GitHub UI using React (Hacker News thread): GitHub似乎越来越多地使用React。他们也有一个React设计系统。 Primer React。即将推出的GitHub Blocks功能可以使README成为互动的，也是用MDX实现的。
📜 Fetching data in React: the case of lost Promises: 这是一篇图文并茂的交互式文章，介绍了在发出请求时可能出现的竞赛条件。给出了一些技术来避免它们。我也写了一篇关于这个问题的文章😜（这两篇文章都值得一读，很有互补性）。
📜 A Love Letter to React: Phoenix（Elixir框架）的创建者解释了他是如何受到React的启发而创建LiveView的：一个在服务器端渲染的HTML上添加互动性的解决方案。LiveView让我想起了Remix!
📜 Open Development for Remix: Remix希望该项目由社区驱动。一切都变得公开：roadmap/进程，以及在Youtube上进行的规划会议。
📜 Type-safe environment variables on both client and server with Remix: 有意思的解决方案是用Zod解析env变量，并将其中一些变量暴露给客户端，包括类型安全和自动完成。
📜 Chromatic – Interaction tests for user behavior: Storybook interaction tests are now integrated with Chromatic SaaS
📜 React Server vs Client components in Next.js 13
📜 What is a state manager
📜 A novel schema-first approach to building forms
📜 Creating fluffy trees with Three.js (part 1)
📊 I compared deploy speeds for Reflame, Vercel, Netlify, Cloudflare Pages on the same repo: the marketing around “instant deploy” is not always true.
💰 Remotion – We raised CHF 180k to simplify programmatic video!: I bring my modest contribution 🤭
🐦 Comparison between Next.js 12 and the Next.js 13 experimental app dir!
🗣 RemixConf 2023 CFP Open
📦 Fontpie: new CLI solution to avoid custom font layout shifts (see this demo to understand). It makes techniques used in next/font framework-agnostic.
📦 Remix-Vite: adds Hot Module Replacement support to Remix
📦 craco 7.0: allows to customize CRA – CRA v5 support
📦 Redwood 3.3
📦 Rockpack 3.0 – create-react-app on steroids + SSR