前端周刊第65期：RSC、Type vs Interface、Syntax.fm、tsup

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

快讯

理解 React 服务组件 - Vercel 团队文章，也是 Next.js 的创建公司。如果觉得 Dan Abramov 的“让我们从头开始重新创建 RSCs”太深入了，那么这是一篇很好的基础解释——涵盖 RSCs 要解决的问题、为什么要使用它以及 Next.js 中是如何让 RSCs 很容易使用的

Type vs Interface: 你应该用哪个? - 了解 TypeScript 中接口和类型别名之间的主要区别，包括它们的用例和需要考虑的重要特性。
[[观点] 如果 Web 组件这么棒，为什么我不使用它？](https://daverupert.com/2023/07/why-not-webcomponents/ "[观点] 如果 Web 组件这么棒，为什么我不使用它？") - Web Component 是 Web 标准接口，为何推出之后发展缓慢？Dave 分析了其中的问题
▶ 如何构建一个拖放式看板 - 一个完整的视频教程，使用 React 构建一个基于看板模式的类似 trello 的应用程序。顺便可以作为 dnd-kit 拖放工具包的入门介绍。
🎧 著名技术播客 Syntax.fm 最近一期讨论一些有趣的话题 - 包括： ▶️ server-side JavaScript standards、 ▶️ Rust for JavaScript developers 及 ▶️ the role of polyfills 等

[观点] ▶ 这不是我 3 年前写 CSS 的方式 - 作者回顾一下改变他处理 CSS 方式的一些最重要的影响……并试图根据过去预测未来。这个视频可以看成是作者在完成 #100DaysOfMoreOrLessModernCSS 挑战后的感想。
CSS 和可访问性：构建更具包容性的用户体验 - Carie Fisher 概述了哪些 CSS 媒体特性可用于检测用户偏好，以及如何使用它们来设计和构建更具包容性的网页
暂停和恢复 CSS 中的动画 - 你知道在 CSS 中可以暂停和恢复动画吗？例如将鼠标悬停在一个元素上，可以暂停一个分散注意力的动画
在 CSS 中生成随机值 - 介绍一种使用纯 CSS 中生成伪随机值的有趣方法

Chrome 中的一次性权限 - 是 Chrome（从 116 开始）引入的一个新的一次性授权选项。目前只对桌面系统中的地理定位、相机和麦克风权限可用
7月 Web 平台引入的新特性 - 包括 Scroll-driven animations、Privacy Sandbox APIs 等
[算法] 快速排序简介 - 一篇对初学者友好的快速排序算法介绍，最后给出了一个JavaScript 实现
如何为你的项目找到一个合适的测试策略 - 金字塔型还是螃蟹型？本文将带你了解如何将不同的测试类型组合成与你的项目相匹配的合理策略
谷歌公布了一些关于如何加载谷歌地图 JavaScript 代码的重大改进 - 谷歌公布了一些关于如何加载谷歌地图JavaScript代码的重大改进
虚拟键盘API - 你是否遇到过这样的问题:手机上有一个固定元素，但当键盘被激活时，它可能会被隐藏起来？Ahmad 探讨了这个问题，为什么会发生，以及我们如何用虚拟键盘 API 解决这个问题。不过这个 API 的支持还很有限（仅 Chrome Android）

VanJS 1.0: 一个1KB的响应式UI框架，没有React/JSX - VanJS 是 Google 的一个程序员业余时间创建的一个 JS UI 框架，日前发布了 1.0 版本。不是 React，也不用学习 JSX，就是在写原生 JS
eslint-config-prettier 8.10 - 关闭与 Prettier 冲突的 ESLint 规则
Backbone 1.5 - 一个老牌前端 MVC 框架，仍在更新
Shoelace 2.6 - 一个原生 Web Component 组件库
Prisma 5.1 - 下一代 Node.js + TypeScript ORM
Safari Technology Preview 175

Hackathon Starter 8.0: Node Web 应用的开始模板 - 用于快速开始构建 Node 应用程序，内置了很多关键功能，比如 auth/OAuth、Bootstrap 5、帐户管理、电子邮件表单等
Vite React 模板：一个生产就绪，可扩展的 Vite React 开始模板 - 仓库 README 有详细列举用到的技术栈

tsup 7.2: 零配置打包你的 TypeScript 库 - esbuild 驱动的一个打包工具。这里有篇 tsup 教程可供学习
dnt：一个用来发布发布混合 npm 模块（ESM & CommonJS）的工具 - Deno团队提供了一个工具，可以让你用 JavaScript 或 TypeScript 编写模块，然后将它们转换为支持 CommonJS、ESM、浏览器、Deno、Node 等格式/环境

Aniso：一个开源的 ASCII 工具，生成基于文本的图像 - 允许你上传各种类型的媒体文件，以自动将媒体转换为基于 ASCII 的图像，结果很酷
PythonMonkey - 通过在 Python VM 中内嵌 Mozilla SpiderMonkey 的方式，使用 Python 引擎提供JS主机环境，实现 Python 中调用 JavaScript
Size Limit 8.2: JavaScript性能估算工具 - 计算运行您的JS应用程序或库的真实“成本”，并保持对性能的关注，并在事情出错时（比如在CI系统中）发出警报。支持ES模块和树摇动。tree shaking.

Parvus: 一个可访问的、开源的图片预览库，没有任何依赖
Radix Vue：Radix UI 的 Vue 版本实现
OGL 1.0: 最小化 WebGL 框架 - WebGL 本身并不是最容易使用的技术，所以像 Three.js 这样的库经常被用来使它更容易访问。OGL 与 Three.js 有着相似的动机，但更接近 WebGL

Macintosh.js: 运行在 Electron 中的虚拟麦金塔电脑（Macintosh） - 这是一个运行在 Electron 中的虚拟机，可以在 1991 年的麦金塔 Quadra 900 上运行 Mac OS 8，而不需要安装单独的模拟器和操作系统

本文由mdnice多平台发布