前端周刊第68期

周刊首发于微信公众号“写代码的宝哥”，欢迎各位前端小伙伴前来关注！

快讯

• 距离 jQuery 1.0 发布已过去 17 年
• Node 20.6.0 将内置 .env 文件支持：node -env-file=.env index.js

文章

• Use web components for what they’re good at。这篇文章是对 If Web Components are so great, why am I not using them? 的回应，Web Components 并不是一无是处，它有自己擅长的某些方面，我们要扬长避短，充分利用好 Web Components 技术
• Shadow DOM: Not by Default - Enhance 是一个 HTML FIRST 的全栈 Web 框架（类似 htmx），团队成员 Simon MacDonald 解释为什么没有把 Shadow DOM 作为默认配置使用
• WebAssembly: byte-code of the future - 本文介绍了 WebAssembly（.wasm）的基本概念、基本使用（浏览器和 Node 端）及未来展望

• Deep Dive: Caching and Revalidating - 深入学习 Next.js App Router 结构下缓存及校验原理，作为官方文档 Caching in Next.js 的补充
• Using TypeScript in React - React 官方文档增加了 TypeScript 章节。深入浅出地介绍了 TypeScript 与 React 结合使用的所有知识，非常有用
• On React Suspense’s throttling - 在这篇文章中，作者讲述了嵌套 Suspense 组件时会出现的一些奇怪行为（作者 Andrei Gătej 的个人博客近期都是谈论 React 方面比较深入的话题，值得一读）
• Building a Two-Way Data Binding Hook for Form Inputs in React - 作者介绍了如何在 React 中通过 Hook 来实现与 Vue 中 v-model 相似的双向数据绑定效果
• 📽️ React Query With The App Router - 11 分钟的视频介绍 React Query v5 是如何在 Next.js 的 App Router 架构中工作的

• Getting Started in a New Codebase - 如何开始一个新的代码库？作者给出了几点建议
• How to make an impact as a developer advocate - 如何做一个有影响力的 Developer Advocate（DA）
• Why You Should Make a Game Engine: 5 Years as a Developer - 一位游戏引擎开发人员的 5 年感想。总结下来就是有能力、很幸运

• Getting started with SCSS - SCSS 简单入门教程
• I built a garbage collector for a language that doesn't need one - 作者闲来无事，为 Rust 写了一个垃圾收集器库（使用 Rust 语言），虽然 Rust 并不需要
• Val Town Runtime v3 – My mistakes were easy, the solutions simple - Val Town 是一个线上编写和运行代码的平台。本文作者谈了在建站时遇到的大坑。结论是：不要为 JavaScript 添加自定义功能，而是通过编辑器功能让标准 JavaScript 更简单
• What helps people get comfortable on the command line? - 本文列举了特别舒服于使用命令行程序时一些场景。仅存在于命令行程序中的一些“杀手级应用”算一个，像 oh-my-zsh、fish 这类 shell 程序也算一个

发布

• Expresso TS 1.7.0 - Typescript + Node.js 轻量级框架，用于快速构建后端应用
• Vitest v0.34.2 - Vite 驱动的单元测试框架

• Bun v0.8 - debugger 支持、SvelteKit 支持、一些新的 CLI tools
• FormKit 0.18.4 - Vue 表单框架

工具

• blog-cells：让你可以在任何博客或网站上添加代码片段。它与 Jupyter 笔记本类似，但由 JavaScript 驱动，完全在浏览器中运行
• Styled2Tailwind - 一个 codemod，用于将 Styled-Components 代码转换成 TailwindCSS 代码。🌟 开发动机：Styled-Components 与服务器组件并不兼容，而 Tailwind 则可以直接插入，并且表现出色！

• Multi - MacOS 上一款免费的视频通话软件。好用的地方不仅在于可以远程视频聊天，还能成为多人协作软件。

• Excalidraw editor - 一个手绘风格的网页白板。repo。

资源

• You Don't Know JS Yet (book series) - 2nd Edition - 2nd Edition") - Kyle Simpson 的《你不知道的JS（第二版）》正在书写中，目前已经已经完成了 2 本。同样，所有内容都可以在Github 上免费阅读
• Web Performance Tips ⚡ - 这个站点列举了很多关于提升 Web 性能方面的 Tips。

库

• TypeChat - 编写程序时，ChatGPT 这类大语言模型（LLM）的提问得到的回答往往不能直接用于项目。TypeChat 就是 LLM 到应用程序之间的桥梁——通过预定义类型，由 TypeChat 为我们定义 Prompts 并规范化 LLM 的返回的数据，并返回给我们高度定义好的 Response
• useHooks 2.1 - 50+ 现代、服务器安全（server-safe） React Hooks 集合，来自 ui.dev 团队

• UnoCSS - 按需、即时的原子 CSS 引擎
• Tremor - 用于快速构建仪表盘页面（Dashboard）的 React 库
• Refine - 一个通用的 React 框架，快速构建成熟的企业级 CRUD 项目

• React Hook Form - 高性能、灵活的 的表单 React 表单校验库，适用于 React Web 及 React Native。这里有篇教程可供学习
• AutoAnimate - 零配置、框架无关、即插即用的动画工具，为你的项目添加平滑的过渡效果

---

资料来源：Bytes #215、#216、React Newsletter #381 & DEV Community Newsletter

本文由mdnice多平台发布