2024-第二十二周

该周报主要为各个地方内容的汇总整理

技术

Next.js 15 RC

这段文字介绍了 Next.js 15 发布候选版的新特性，包括对 React 19 RC 的支持、实验性功能、缓存更新、部分预渲染、next/after API 等。还提到了 create-next-app 的更新以及外部包的打包优化等改进。同时列举了一些其他变更和贡献者名单。

• Next.js 15 RC 增加了对 React 19 RC 的支持，包括新特性和改进，使开发者能够在稳定发布前测试并提供反馈。
• 引入了 React 编译器（实验性功能），通过对代码的深层理解和自动优化，减少了开发者在使用 useMemo 和 useCallback 等 API 时的手动记忆化操作。
• 对缓存进行了更新，取消了默认的 fetch 请求、GET 路由处理程序和客户端导航的缓存，鼓励开发者根据需要手动选择缓存选项。

Want Out of React Complexity? Try Vue’s Progressive Framework

这篇文章讨论了 JavaScript 客户端和 SDK 对 SQL 数据库的影响，提出了应考虑采用 Drizzle ORM 来替代各种数据库提供商的客户端和 SDK。文章强调了 SQL 的重要性，并介绍了 Drizzle ORM 的特点和优势，以及一些数据库提供商采用该方法的案例。最后，作者呼吁 SaaS 数据库提供商不应误导开发者，而是应该支持通用标准。

• JavaScript 生态系统中存在多种数据库客户端和 SDK，但它们的独特语法和特性使得开发者需要花费额外时间学习和适应，导致生态系统的不稳定性。
• 应 SaaS 数据库提供商考虑放弃自己的客户端，转而支持 Drizzle ORM，因为 Drizzle ORM 提供了一种标准化的、与 SQL 紧密相关的 JavaScript ORM 解决方案。
• 一些数据库提供商已经开始与 Drizzle ORM 团队合作，通过贡献和支持这一开源项目，以实现与数据库的标准化、类型安全的交互，同时保留其特定要求的实现。

How to read files quickly in JavaScript

这篇文章讨论了使用 JavaScript 在服务器上读取文件的各种方法，以及针对这些方法的基准测试结果。作者发现在 Node.js 环境中，使用 fs.readFile 方法通常比其他方法更快，而在 Bun 运行时环境中更是如此。他还提到了针对不同文件大小的测试结果，以及对 fs.promises 方法性能的讨论。

• JavaScript 中读取文件的方法有多种，包括使用 fs.promises、fs.readFile 与 util.promisify、fs.readFileSync 等不同的方式。
• 作者通过对不同读取文件方法的基准测试发现，在 Node.js 环境下，fs.promises 的性能较差，而 Bun 运行时则表现更快。
• 即使在处理大文件时，fs.readFile 方法在作者的测试中仍然保持稳定的性能优势，而作者的基准测试受到 Evgenii Stulnikov 提供的测试案例的启发。

ULTIMATE GUIDE TO MULTI-TENANT SAAS DATA MODELING

如果你考虑到多租户数据，而所有 SaaS 构建者都必须考虑，你应该从第一天就构建“团队”功能。这篇指南解释了如何做（以及为什么）。本指南旨在成为最全面的多租户数据建模指南。这基于我在科技行业的 14 年多经验，构建了多个 SaaS 应用，并与其他 SaaS 构建者进行了比较。文章详细介绍了 SaaS 的基本原则、多租户数据建模、GitHub、Google 和 Linear 等访问模型、资源所有权、用户和组织关联、角色访问控制、计费和订阅、设置和分析等内容。

• 如果你在考虑多租户数据，就必须从一开始就构建“团队”功能，因为它将为用户提供更好的体验，并且随后添加这个功能将变得非常复杂和痛苦。
• 多租户数据建模的基本模型需要包括“用户”和“顶层租户”，并且需要在数据库的每个表中添加“organization_id”以实现数据隔离。
• 为了提供最佳用户体验，最终实现并发用户会话，使用户能够同时登录多个组织，无需注销即可无缝切换。

🛑 Stop resizing your browser: improve testing for responsiveness

这篇文章介绍了在开发移动端和平板设备时，使用浏览器开发工具的设备模式来准确模拟移动设备体验的重要性。作者指出了在调整浏览器大小时无法准确测试响应式设计的问题，并提出了一些改进的方法，如使用 Responsively 等工具进行视觉测试，使用 BrowserStack 或 SauceLabs 等设备仿真服务进行手动和端到端测试，以及在 CI 中自动化视觉回归测试。文章还涉及了设备像素比、视口高度、缩放级别等技术细节。

• 使用浏览器开发工具的设备模式来准确模拟移动和平板设备的体验，而不是简单地调整浏览器大小进行测试。
• 浏览器调整大小无法准确模拟视窗高度、缩放级别、触摸事件模拟、设备方向和用户代理字符串等移动设备特性，而这些对于前端开发和测试非常重要。
• 除了浏览器调整大小测试之外，还可以利用工具进行可视化测试、使用设备仿真服务进行真实设备测试，以及在持续集成中自动化视觉回归测试，以确保前端页面在不同设备上的响应性和可靠性。

工具

magicui

设计工程师的 UI 库。动画组件和效果，您可以复制粘贴到您的应用程序中。免费。开源。

jolly-ui

shadcn/ui 是兼容 React ARIA 的组件库，您可以轻松地复制粘贴到您的应用程序中使用。具有无障碍功能，支持自定义，并且是开源项目。

css-hooks

从原生内联样式中使用高级 CSS 功能

click-to-component

在浏览器中使用 Option+Click 即可立即打开 React 组件的源代码于 VS Code 中查看

pliny

轻松创建内容丰富的网站 - 基于 next.js、contentlayer 和 tailwindcss 构建

设计

Best Practices For Naming Design Tokens, Components And Variables

这篇文章讨论了命名的最佳实践，涵盖了命名灵感、命名规范、设计元素的命名技巧以及设计系统中的命名管理。文章提供了多个资源和案例，深入探讨了如何更好地命名 HTML 类、颜色、UI 组件、设计元素等，以及如何构建灵活、可扩展的设计元素命名系统。文章还推荐了一些在线研讨会和会议，邀请读者深入了解设计元素、组件和设计系统。

• 命名的重要性：设计师和开发者在命名设计标记、颜色、UI 组件、HTML 类和变量时经常遇到困难，因此需要寻求适合的命名方式。
• 命名的灵感与规范：通过 Classnames 等资源获取命名灵感，以及遵循 Javier Cuello 等人总结的命名规范，确保命名具有逻辑性、简洁明了并且为所有人所熟知。
• 灵活的设计标记命名：介绍了灵活的设计标记命名方法，包括设计标记命名手册、灵活的设计标记分类法和设计标记命名清单，以便有效地管理和使用设计标记。

AI

web-llm

浏览器内高效运行的大型语言模型推断引擎

其他

kumiko-sensei

🐙「酷米空」京吹人自己的日语学习软件

运气与努力

这段文字主要讲述了作者对成功的看法，强调了坚持终生学习、良好的判断力以及运气在成功中的重要作用。同时，通过作者自身和其他成功人士的例子，说明了成功往往是多种因素综合作用的结果，而不是单一因素所致。作者还提到了对成功者的学习应该理性辨别，不盲目崇拜，对信息不对称和成功学的商业化现象提出了质疑。

• 坚持终生学习是取得成功的关键，作者单伟建的经历充分证明了这一点。
• 好的判断力比毅力更重要，正确的决策需要建立在知识的学习和积累上。
• 运气是成功的重要因素之一，并不是所有成功都完全取决于个人的努力和才能。