2023-第三十三周

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

技术
工具
更新
- Page Lifecycle API
其他

技术

Tech debt gets worse before it gets better

这篇文章讨论了技术债务的问题。开始进行清理项目时，技术债务会变得更糟，直到最终能够删除旧代码。这是因为系统的改变会导致技术债务的积累，而清理项目则会进一步增加技术债务。文章强调了不要等到技术债务变得无法忍受才开始清理，也不要在清理项目中途停下来。同时，文章还解释了为什么技术债务会变得更糟，并提出了解决技术债务的方法。

技术债务在清理过程中会变得更糟，直到最后才开始变好。
清理技术债务的项目会导致系统中存在重复的代码和组件。
不要等到技术债务变得无法忍受才开始清理，同时在清理过程中不要中途停止。

Sending UI over APIs

服务器驱动的用户界面（Server-driven UI）是一种新的 UI 开发方法，通过 API 将 UI 从服务器发送到客户端。这种方法具有动态和灵活的特点，可以实现快速迭代和个性化用户体验。一些知名的科技公司如 Instagram、Lyft 和 Airbnb 已经采用了这种方法。服务器驱动的 UI 可以在服务器端更新而无需更改客户端，实现实时变化的 UI。这种方法具有快速迭代和后端开发人员参与前端开发的优势，但也面临一些挑战，如应用商店规范和离线用户体验管理。总之，服务器驱动的 UI 在现代 JavaScript 开发中变得越来越重要，并为 UI 开发带来了新的方向和机遇。

服务器驱动的用户界面（UI）是一种通过 API 发送 UI 的技术，它改变了我们对 UI 开发的思考方式。
服务器驱动的 UI 可以在服务器端动态生成，并通过 API 发送到客户端，从而实现更快的迭代和个性化的用户体验。
服务器驱动的 UI 的采用带来了许多好处，包括即时的错误修复和快速迭代，后端开发人员参与前端开发，以及动态和个性化的用户体验。

Everything about Framer Motion layout animations

这篇文章是关于 Framer Motion 中布局动画的深入介绍。它解释了如何使用 layout prop 来实现布局动画，并提供了一些技巧来解决动画中可能出现的问题。文章还介绍了 shared layout animations 的概念，以及如何使用 layoutId 来实现组件之间的平滑过渡。总的来说，这篇文章是一个全面的指南，帮助读者理解和应用 Framer Motion 中的布局动画。

Framer Motion 是一个强大的动画库，可以实现各种布局动画效果。
布局动画可以通过设置 layout 属性来实现，可以平滑地过渡组件的位置和大小。
共享布局动画是一种特殊的布局动画，通过设置 layoutId 属性，实现多个组件之间的过渡效果。

WebAssembly: byte-code of the future

WebAssembly 是一种开放标准的字节码格式，可以在各种浏览器中运行。它可以将多种编程语言编译为字节码，例如 Rust、Ruby、Python 和 JavaScript。WebAssembly 具有安全性和跨平台的特点，在浏览器以外的环境中也可以运行。编写 WebAssembly 可以使用 Wat 文本格式或者高级语言如 AssemblyScript。WebAssembly 可以在浏览器、服务器和云端等多种环境中执行。它还可以用于云函数等应用场景，在未来将广泛应用于各种编程语言和硬件中。

WebAssembly 是一个开放标准的字节码格式，可以支持多种编程语言，并且可以在浏览器、服务器和硬件设备上运行。
WebAssembly 的设计初衷是为了提供一个安全的、通用的运行时环境，类似于 Java 虚拟机或.NET Common Language Runtime。
使用 WebAssembly 可以编写高效、可读性更好的代码，并且可以在浏览器、服务器和云端等不同环境中执行。

How we reduced the size of our JavaScript bundles by 33%

这篇文章介绍了 Dropbox 在优化网页性能方面的努力。他们发现模块捆绑器是导致性能问题的一个常被忽视的原因。为了解决这个问题，他们决定替换现有的捆绑器，并选择了 Rollup 作为新的捆绑器工具。通过逐步实施和优化，他们成功地减少了 JavaScript 捆绑文件的大小，提高了性能，并减轻了维护负担。整个过程中还揭示了现有架构中的瓶颈，并通过使用 Rollup 的插件生态系统来解决这些问题。最终，他们取得了显著的性能和生产效率提升，并为未来的发展打下了基础。

随着网页和应用程序变得越来越复杂，模块打包工具成为影响性能的重要因素。
Dropbox 团队决定替换现有的模块打包工具，以优化性能并简化开发流程。
通过采用 Rollup 作为模块打包工具，Dropbox 成功减小 JavaScript 包的大小、改善前端开发速度，并解决了多年的技术债务。

An Overview of CSS Sizing Units

这篇文章讲解了 CSS 的四种不同的大小单位：绝对单位、字体相对单位、视口相对单位和容器相对单位。文章解释了每种单位的使用情况和最佳选择，并提供了一些示例和注意事项。

CSS 大小单位可分为四大类：绝对单位、字体相对单位、视窗相对单位和容器相对单位。
绝对单位是与特定媒体相关的单位，如厘米和像素。
字体相对单位使用字体度量来计算元素的尺寸，如 em 和 ch。
视窗相对单位以视窗的尺寸为基准来计算元素的尺寸，如 vw 和 vmin。
容器相对单位以父元素的尺寸为基准来计算元素的尺寸，如 cqw 和 cqh。

On React Suspense’s throttling

这篇文章讨论了 React 的 Suspense 组件中的节流（throttling）概念，它延迟显示嵌套 Suspense 组件的回退组件，直到其父级 Suspense 组件停止挂起为止。文章介绍了 Suspense 组件的基础知识，并提供了嵌套 Suspense 组件的示例，配有图表来说明过程。文章最后解释了为什么 React 使用节流以及它是如何工作的。

工具

styled2tailwind

将您的 Styled-Components 转换为 TailwindCSS，使用这个方便的 codemod 工具

croner

在 JavaScript 或 TypeScript 中触发函数或评估 cron 表达式。无依赖项。最多功能。Node、Deno、Bun 和浏览器都适用

next-connect

TypeScript 准备就绪的 Next.js、Micro、Vercel 或 Node.js http/http2 的最小路由器和中间件层。

更新

Page Lifecycle API

Page Lifecycle API（页面生命周期 API）是现代浏览器为了节省资源和提升用户体验而引入的一种机制。该 API 提供了一些生命周期钩子，让开发者能够在浏览器进行干预时安全地处理页面，而不会影响用户体验。这个 API 定义了页面的不同生命周期状态，以及相应的事件，开发者可以根据这些状态和事件来优化页面的行为。这种解决方案既提高了开发者对系统干预的可预测性，又允许浏览器更积极地优化系统资源，从而使所有用户受益。

Page Lifecycle API 是现代浏览器中的一个新特性，它可以让开发者在页面被挂起或丢弃时做出相应处理，以提高用户体验。
Page Lifecycle API 引入了生命周期状态的概念，定义了系统主动触发的状态，帮助浏览器限制隐藏或非活动标签页消耗的资源。
Page Lifecycle API 为开发者提供了新的 API 和事件，使其能够响应这些系统主动触发的状态转换，并构建更具弹性的应用程序，同时也让浏览器能更好地优化系统资源。

其他

始终努力构建一个更小的系统。
有很多原因会推动你，去构建一个比原先设想的更大的系统，人类似乎有一种提供更多功能的欲望。你应该抵制这种欲望，在满足设计目标的前提下，始终努力构建一个更小的系统，这样你最终会得到一个比最初设计更好的系统。

我自己的经历是，如果你明确知道自己要构建什么，并且唯一需要做的就是执行，那么远程工作的效果会好得多。
反过来，如果你不知道自己需要构建什么，尝试边做边发现，并且依赖于同事的快速反馈，那么面对面工作会好得多。
但是，现实是大多数公司，尤其是大公司的员工，都属于第二类，所以不适合远程工作。

-- Hacker News 读者

css 看屏幕刷新率