2024-第二十四周

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

技术

移动网页高度自适应最佳实践

这篇文章总结了移动 Web 开发中遇到的一些高度处理问题，包括不推荐使用的单位（vh, svh, dvh, lvh）、常规页面交给浏览器处理、输入框文字大小限制、使用 dvh 单位解决固定高度问题、利用 CSS 变量解决虚拟键盘弹出的高度调整，并提供了一些最佳实践和解决方案。

• 移动 Web 开发需要充分利用浏览器处理常规页面，同时避免使用无效的长度单位（vh, svh, dvh, lvh）。
• 在 iOS Safari 下，文本框的字体大小应不小于 16px，以避免页面在输入框获得焦点时出现缩放问题。
• 为解决移动端浏览器高度限制和虚拟键盘弹出问题，可采用使用 dvh 单位并处理兼容性，以及利用 CSS 变量动态调整容器高度来解决。

How to Use Rem Units in CSS for Accessible Design

这篇文章介绍了相对 CSS 单位（例如'rem'和'em'）的重要性，以及它们如何改善网站的适应性和可访问性。它解释了'rem'单位与'px'和'em'单位的区别，讨论了它们在网页设计中的实际用途，并强调了'rem'单位对响应式设计和无障碍网站设计的特殊优势。文章还提倡不断学习，以不断提高对无障碍设计的理解，并推荐了适用于网站所有者、设计师和开发人员的可访问设计资源。

• 相对 CSS 单位（如 rem 和 em）可以根据用户设定或其他元素进行缩放，提高网站的适应性和可访问性。
• 使用 rem 单位可以相对于根元素的字体大小进行缩放，确保网站根据用户设置进行适当缩放。
• Rem 单位在响应式设计和可访问性方面具有优势，能简化设计、增加可读性，并有助于满足无障碍设计的原则。

Using the Page Visibility API

这段文字介绍了页面可见性 API 及其在网页开发中的应用。它解释了如何检查页面的可见性状态，并讨论了页面可见性在分析、资源管理和改善用户体验方面的重要性。文章还指出了在使用页面可见性检查时需要避免的一些模式，以及如何解决这些问题。

• 页面可见性 API 可以让开发者检测页面是否可见，并在页面可见性改变时触发相应的逻辑，从而帮助管理资源和改善用户体验。
• 开发者可以利用页面可见性 API 来记录页面可见性变化的数据，用于分析用户会话生命周期和优化资源管理，比如在页面隐藏时停止执行某些操作。
• 在使用页面可见性 API 时，开发者需要避免一些常见陷阱，比如在页面隐藏时自动暂停媒体播放，应该在恢复播放前先检查用户是否有交互过媒体。

玩转 stream API

这篇文章介绍了计算机科学中的流（stream）概念及其在实践中的运用。主要包括可读流和可写流的基本构造、队列策略、转换流与管道操作、以及流在实际场景中的应用，如加密大文件传输和日志输出。文章强调了流的重要性以及对数据处理效率和用户体验的影响。

• 流是计算机科学中用于连续数据传输的重要概念，可以防止内存溢出并实现快速响应。
• 可读流和可写流是流的基本构造，通过控制器和读取器实现数据的传输和处理。
• 队列策略在流处理中起着关键作用，通过指定队列大小和背压机制来提高数据处理的效率并避免内存溢出。

工具

next-view-transitions

在 Next.js 应用程序的路由器中应用 CSS 视图过渡效果。

easy-email-editor

Easy Email Editor 是一个功能齐全、基于 React 和 MJML 的顶尖开源 SaaS 电子邮件编辑器。

next-cache-toolbar

一个工具栏，帮助识别数据缓存条目

merge-anything

递归地合并各种对象及其他类型。一种简单而轻量级的整合方法。

npm-package-json-lint

可配置的用于 package.json 文件的代码检查工具

playroom

使用 JSX 进行设计，由您自己的组件库提供支持。

react-docgen

一个用于从 React 组件文件中提取信息以生成文档的命令行工具和库。

ts-pattern

🎨 一款用于 TypeScript 的全面模式匹配库，拥有智能的类型推断功能。

更新

Announcing TypeScript 5.5 RC

TypeScript 5.5 发布候选版，新增了很多新功能和性能优化。其中包括推断类型断言、常量索引访问的控制流缩小、在 JSDoc 中的类型导入、正则表达式语法检查等。此外，还有对编辑器和观察模式的可靠性改进、API 消费的便利性优化、更严格的装饰器解析、声明文件生成的简化等。同时，还对不推荐使用的特性进行了禁用处理。

• TypeScript 5.5 引入了推断类型断言、常量索引访问的控制流细化、JSDoc 中的类型导入等新功能，提升了代码的类型安全和可读性。
• 新版 TypeScript 进行了性能和大小的优化，包括在语言服务和公共 API 中实现了单态化对象、改进了控制流节点的单态化，以及对 transpileModule 和 transpileDeclaration 进行了优化，提高了编译速度和运行效率。
• 对于声明文件的生成和引用规则进行了改进，支持新的模块模式和文件扩展名的解析，同时简化了声明文件生成中的引用指令，提升了生成文件的一致性和性能。

设计

B 端页面常用布局适配方案 🎉

青云 QingCloud 产品中常见、常用的布局或页面模版。通过代码的方式将其实现，辅助设计师、开发者快速了解适配效果，降低沟通成本，侧面提升设计师产出设计方案的合理性与可行性，进一步提升产品交互一致性。

其他

很多人觉得，代码质量是软件公司的生命。但是，大多数公司的生死存亡并不取决于它的代码库的质量。可怕的代码库也可能带来了数十亿美元的收入。市场不会激励优秀的工程，它会激励速度和执行力。

-- 《完美的代码库无法拯救你的公司》

The Future Belongs to the Comprehensivist

这段文字讨论了广义专家（comprehensivist）的概念，认为在当今世界快速变化的环境中，具备连接各种信息、看清全局的能力将比专精特定领域的人更有成功的可能。作者提到了动物界的过度专门化对物种存亡的影响，以及现代社会中培养终身成功的有效策略。最后强调了专家时代的结束，广义专家的重要性。

• 在当今世界，能够跨界连接信息、看到整体局势并预测未来趋势的综合性人才将变得越来越宝贵。
• 随着环境快速变化，过度专业化可能导致个体在适应能力下降时面临灭绝，因此成为全面发展的综合人才更为重要。
• 培养创业思维将成为有效策略，因为创业者通常具备综合能力，他们需要连接各种信息并看到不同于他人的可能性。

typescript-编码规范指南