2024-第八周

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

技术

The TSConfig Cheat Sheet

这篇文章介绍了 TypeScript 中 tsconfig.json 文件中的常用配置选项，包括基本选项、严格性选项、编译选项、构建库选项、在单体库中构建选项、不使用 TypeScript 编译选项、在 DOM 中运行选项以及不在 DOM 中运行选项。文章详细解释了每个选项的作用和推荐设置，旨在帮助开发者快速配置 TypeScript 项目。

• tsconfig.json 是一个庞大的文件，但实际上只有少数几个配置选项是必须关注的。
• 建议所有项目都使用基本选项，包括 esModuleInterop, skipLibCheck, target, allowJs, resolveJsonModule, moduleDetection 和 isolatedModules。
• 对于特定情况，如构建库或在 DOM 中运行代码，还需要特定的配置选项，如 declaration, composite, sourceMap, declarationMap, lib 等。

The best way to get NVM working in CI/CD systems

本文主要介绍了作者在为公司的 Docker 基础镜像和 CI/CD 环境提供 nvm（Node Version Manager）时所遇到的挑战和解决方案。作者首先介绍了 nvm 的特点和安装方式，然后详细讨论了在 Dockerfile 和 Jenkins 中如何使 nvm 正常工作的方法。最后，作者提出了将 nvm 转化为命令行工具的解决方案，并介绍了如何通过简单的包装脚本来自动暴露通过 npm 安装的正确二进制文件的方法。文章总结了管理多个 Node 版本的技巧，并希望读者可以从中获得有用的见解和提示。

• 为了在公司的 Docker 基础镜像和 CI/CD 中实现 nvm，作者经历了一番艰辛的探索和尝试。
• 通过在 Dockerfile 中使用 SHELL 指令来让 nvm 在 Docker 容器中正常工作，并创建了一个可执行的 nvm 命令来简化流程。
• 最终，作者还介绍了如何使用简单的包装脚本来自动暴露通过 npm 安装的正确二进制文件，以便在开发和 CI/CD 环境中管理多个 Node 版本。

Why do reflows negatively affect performance?

这篇文章讨论了网页布局变化引起的重新布局（reflow）对性能的负面影响。重新布局会消耗大量的 CPU 资源，降低网页的速度和用户体验，影响用户与网站的交互。文章还解释了重新布局的工作原理和 CPU 的处理能力，以及如何影响页面的响应速度和用户体验。文章强调了重新布局对网站性能和用户体验的重要性，特别提到了对谷歌核心 Web 指标中的累积布局偏移（CLS）以及网站的 SEO 性能的影响。

• 布局重算（reflow）是当我们改变与布局相关的属性时发生的，它会触发浏览器的像素渲染管道，包括布局（reflow）、绘制（paint）和合成（composite）等步骤。
• 布局重算会占用大量 CPU 资源，因为它需要复杂的算法来处理 CSS 规则，而 CPU 在执行布局重算时无法处理其他重要任务，导致页面渲染速度变慢，用户体验下降。
• 布局重算会对网站性能产生负面影响，如延迟、页面布局变化和用户交互不流畅，这直接影响用户体验和网站关键指标，甚至可能影响 SEO 表现。

React Labs: What We've Been Working On – February 2024

这篇文章介绍了 React 团队在研究和开发中取得的重大进展。他们详细介绍了 React 编译器的发展和优化，以及新功能“Actions”和“React Canaries”的引入。此外，文章还提到了即将发布的 React 19 版本，并简要介绍了正在研究的新功能“Activity”。最后，文章提及了团队成员在各种会议和播客上的演讲和讨论。

• React 编译器已经在 Instagram.com 上投入使用，并正在为 Meta 的其他平台准备首个开源发布。
• React 的新功能“Actions”允许在客户端和服务器上处理数据，并支持异步操作和乐观状态更新。
• React 的 Canary 频道已经推出了一系列新功能，包括服务器组件、资源加载、文档元数据和 Actions，并准备随时发布到稳定版。

Base32 Encoding Explained

这篇文章解释了 Base2ⁿ编码的基本原理，以及如何从头开始实现 Base32 编码。作者详细讨论了如何将数字转换为 Base8 和 Base32，并展示了如何编码和解码任意数据。此外，作者还提到了 Base64 编码，并展示了如何通过相同的方法来实现 Base64 编码。文章强调了理解 Base64 和 Base32 背后的原理的重要性，同时也警告了自行实现 Base64 编码的风险。

• Base32 是一种用来表示数字或字节的编码方式，使用 32 个字符来表示 5 个比特的数据。
• 通过位操作和字符映射，可以将数据转换成 Base32 编码的字符串。
• 除了 Base32，文章还介绍了 Base64 的实现方法，但强调了实际应用中应使用编程语言内置的 Base64 实现。

前端性能优化教程——资源提示

这篇文章介绍了前端性能优化中的资源提示技术，包括 preconnect、dns-prefetch、preload、prefetch 和 Fetch Priority API。通过这些技术，开发人员可以指导浏览器提前处理关键资源、建立连接以及预加载未来可能使用到的资源，以提升页面加载效率。文章详细介绍了每种资源提示的用法和注意事项，并提供了相关的示例和重要提示。

• 资源提示（resource hint）包括 preconnect、dns-prefetch、preload 和 prefetch，可以帮助浏览器提前执行操作以提升页面加载效率。
• preconnect 用于提前建立关键资源的源之间的连接，而 dns-prefetch 则提前完成域名的 DNS 查询，成本更低。
• preload 用于提前请求渲染页面时必须的资源，而 prefetch 发起低优先级请求获取将来可能用到的资源。fetchpriority 属性可用于增加某个资源的加载优先级，特别适用于优化页面的最大内容绘制（LCP）图像。

工具

marquee

一款漂亮的 React 跑马灯组件

react-use-wizard

一个无需烦恼的 React 向导（步骤条）构建器，由 hooks 驱动

js-tokens

微型 JavaScript 分词器

[typespec]https://github.com/microsoft/typespec

事先描述您的数据，并生成模式、API 规范、客户端/服务器代码、文档等

CodeDiagram

Code Diagram 是一个嵌入在您的 VSCode 中的图形化工具，它能够帮助您可视化代码库、理解架构，并更快地进行代码重构。通过使用 Code Diagram，您可以更清晰地了解代码的结构和关系，提高开发效率

xhook

轻松拦截和修改 XHR（XMLHttpRequest）请求和响应

Web 终极拦截技巧（全是骚操作）

这篇文章主要介绍了拦截技巧在计算机科学领域中的应用和方法。文章中提到了拦截/覆写浏览器 API、拦截/篡改事件、DOM 元素、ServiceWorker 拦截、服务器拦截、拦截篡改 HTTP Response 等内容。同时，还涉及了调试小技巧、WebContainer 原理、沙盒、通用域名服务等相关主题。文章强调了利用中间层思路解决问题的经验和技巧，并提到了安全边界和对安全知识的重视。

• 拦截的方法：介绍了通过拦截/覆写浏览器 API、事件、DOM 元素等方式实现中间层功能的方法和应用场景。
• 服务器拦截：详细描述了在服务器端实现拦截功能的技巧，包括拦截篡改 HTTP 请求、HTTP 响应以及实现通用域名服务的原理和应用。
• 通用域名服务：阐述了使用真实域名转发请求到开发环境的方法，以及解决问题的原理和技术手段。

更新

Remix Vite is Now Stable

这篇文章宣布了 Remix v2.7.0 中对 Vite 的稳定支持。文章介绍了 Remix 对 Vite 的改进和扩展，包括对 SPA 模式、basename 支持、Cloudflare Pages 支持、服务器捆绑、预设配置等方面的更新。同时，还介绍了 Vite 环境下更好的客户端和服务器代码分离、vite-env-only 插件、.css?url 导入、更清晰的构建输出等功能。最后，感谢了早期采用者和社区贡献者，并特别感谢了外部贡献者和 Vite 团队。

• Remix v2.7.0 稳定发布，支持 Vite，带来了 SPA 模式和 basename 支持，使得 React Router 用户可以无需切换到服务器渲染架构就能迁移到 Remix。
• 新增 Cloudflare Pages 支持，通过 Vite 插件集成 Cloudflare 工具，以及与 Cloudflare 团队合作，提升用户体验。
• 引入了 Presets 概念，允许定制 Vite 插件行为，改善了服务器和客户端代码分离，以及解决了 CSS 导入和构建输出的问题。

设计

CSS-only DVD Screensaver animation

这篇文章介绍了作者如何使用 HTML 和 CSS 实现了一个模拟老式 DVD 标志屏保的动画效果。作者首先分解了动画效果的移动和颜色变化两个部分，然后使用 CSS 变量和关键帧动画分别实现了标志的水平和垂直移动以及碰壁时的颜色变化。最后，作者还提到了未来可能会有更多基于 CSS 的动画效果出现，以及一些参考来源。

• 我们从一个无聊的办公室对话开始，思考如何用 HTML 和 CSS 实现一个经典的弹跳 DVD 徽标动画。
• 通过分解动画的水平和垂直移动，以及颜色变化，我们使用 CSS 变量和关键帧动画成功实现了这个有趣的效果。
• 最终，我们分享了代码和交互式演示，展示了如何利用 CSS 变量和动画来实现更实际的项目，并探讨了未来 CSS 属性动画的发展前景。

Okay, Color Spaces

这篇文章探讨了颜色空间的概念和发展。从最基础的红黄蓝三原色到 CIE XYZ 等多维颜色空间的发展，文章介绍了颜色空间如何帮助人们预测颜色混合和创建匹配颜色。然而，传统的颜色空间存在无法完美预测颜色差异的问题。文章介绍了新的颜色空间 Oklab，它采用极坐标系统，以更好地模拟人类对颜色的感知。最后，作者推荐了一些交互式工具，供读者进一步探索颜色空间。

• 颜色空间是一种构造，将颜色排列成一种基于坐标的空间，用于解决颜色混合和匹配问题。
• CIE XYZ 是一种极其有用的颜色空间，可以将颜色混合和匹配问题转化为数学问题，是所有数字影像的基础。
• Oklab 是一种尝试解决颜色感知一致性问题的新型三维颜色空间，通过使用极坐标系统，OKLCH 尝试改进颜色处理和感知一致性。