2024-第二十八周

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

技术

15 page speed optimizations that sites ignore (at their own risk)

这篇文章探讨了网页速度优化对用户体验和业务的重要性，详细列举了 20 个主要网站在页面速度优化方面存在的问题和改进建议。作者强调了页面速度对用户满意度和业务指标的影响，提醒了网站管理者应该关注和优化页面加载速度，同时给出了优化建议的优先级和实施方法。

• 网站页面速度优化对业务影响重大，快速加载可以提高转化率、降低跳出率，对用户满意度和搜索排名也有显著影响。
• 通过合理设置浏览器缓存、减少未使用的 JavaScript、优化图像元素等简单优化技巧，可以有效提升页面速度和用户体验。
• 许多网站未充分利用页面速度优化技术，可能是因为一些技术的新颖性、复杂性或者缺乏相关知识，但忽视最佳实践仍会对用户体验和业务产生负面影响。

译：PPR 是岛屿架构吗？

本文介绍了 Next.js 的 Partial Pre-Rendering（PPR）和岛屿架构的区别。它解释了 PPR 的概念，以及岛屿架构在 Astro 和 Fresh 中的应用。文章对比了 PPR 和岛屿架构的不同之处，并指出了它们在服务器端渲染和客户端渲染方面的重点。作者还提到了与之相关的技术选择和历史螺旋。最后强调了多阶段计算的重要性。

• Partial Pre-Rendering（PPR）和岛屿架构（Islands Architecture）虽然在表面上看起来相似，但实际上具有完全不同的重点，PPR 侧重于服务器端渲染，而岛屿架构侧重于客户端渲染。
• 岛屿架构将整个屏幕视为一个由静态 HTML 构成的海洋，通过独立的交互式 UI 岛屿来描述页面结构，而不需要 JavaScript 的非交互式 HTML 被视为静态部分。
• 在技术选择的螺旋中，PPR 需要设计服务器端的静态/动态边界，而岛屿架构需要设计客户端的交互式/非交互式边界，因此它与 React Server Components(RSC) 架构更为相似，而非 PPR。

Building an AI toolbar for text editors

这段文字介绍了作者尝试创建一个浮动的 AI 工具栏，用于文本编辑器。工具栏能够与 AI 交互，修改选定的文本并生成新的内容。作者还分享了使用 Framer Motion 实现工具栏动画、避免文本拉伸效果、以及如何集成 AI 解决方案到文本编辑器的方法。同时还介绍了 Liveblocks 文本编辑器的功能，如实时协作、评论、提及和通知，以及相关的 React 组件和功能。

• 介绍了一种浮动的 AI 工具栏，用于文本编辑器，可以通过选中文本后生成新的文本。
• 详细介绍了如何使用 Framer Motion 避免文本在动画中的拉伸变形，提升阅读体验。
• 介绍了如何集成 AI 解决方案到文本编辑器中，实现实时协作、评论和通知等功能。

Sneaky React Memory Leaks: How the React compiler won't save you

这篇文章探讨了在 React 中闭包如何导致内存泄漏，并介绍了新的 React 编译器如何处理这个问题。文章指出，尽管编译器做了一些优化，但仍未完全解决闭包内存泄漏的问题。作者还提出了一种使用 bind 函数的实验性解决方案，以规避闭包导致的内存泄漏。最后，强调了编写小型、纯净的组件以及使用内存分析工具等最佳实践。

• 闭包在 React 中可能导致内存泄漏，因为它们会共享相同的上下文对象，即使其中一些闭包不再使用也会使整个上下文对象保持活动状态。
• 新的 React 编译器会缓存那些不依赖于其他值的值，比如在示例中缓存了 BigObject，从而防止了内存泄漏。
• 即使使用 React 编译器，闭包仍然可能导致内存泄漏，而开发人员需要注意并遵循最佳实践，如编写纯组件和使用内存分析工具。

工具

dotui

易于访问、适用于移动设备的现代化用户界面组件。

更新

Vitest

这段文字是关于 Vitest 2.0 版本发布的更新内容列表，包括了许多重大变化、新功能、bug 修复和其他改进。更新涉及了项目的多个方面，包括配置、浏览器模式、运行器、间谍（spy）、UI、测试覆盖率、依赖项和其他实用工具。新版本包含了许多重要的变化和增强功能，以及许多 bug 修复和性能优化。

• 引入了许多新特性和改进，包括更好的浏览器模式支持、更准确的覆盖率报告以及更稳定的测试运行环境。
• 修复了许多 bug，包括一些与浏览器模式和覆盖率报告相关的问题，提高了测试框架的稳定性和可靠性。
• 的变化涉及到了多个方面，涵盖了浏览器模式、覆盖率报告、mock 函数、配置选项、并行测试支持、UI 界面等多个领域的改进和优化。

React Flow 12 release

这段文字介绍了 React Flow 12 的新发布内容，包括支持服务器端渲染、计算流程的钩子和辅助功能、暗黑模式、以及使用 TSDoc 来改善开发体验等主要功能。此外，还介绍了一些性能改进和其他新功能。该版本还包括对 React Flow 的性能改进和其他新功能的详细介绍。

• React Flow 12 发布了，主要功能包括服务器端渲染支持、计算流的 Hooks 和辅助函数、以及暗黑模式。
• 为了支持服务器端渲染，React Flow 12 可以显示静态 HTML 图表、动态生成 opengraph 图片，并预渲染流程以供可爬取内容使用。
• 除了主要功能外，还添加了一些其他功能，如 useConnection 钩子、受控视口、视口门户组件等，以提高用户体验。

AI

aieditor

AiEditor 是一款面向人工智能的下一代富文本编辑器。

其他

Advantages of incompetent management

这段文字探讨了管理能力的含义和影响。它指出，具有管理能力的机构通常设定目标并实现它们，但这往往会导致一些意想不到的问题。文章提到了管理效率、组织的庞大与不必要的工作、Bug 修复等方面的挑战。作者还讨论了管理水平的差异以及如何适应不同类型的管理方式。文章最后提到了招聘和面试过程中的相关问题。

• 管理者应当设定可实现的目标，并通过组织和激励实现这些目标，然而即使达到这些目标，也可能导致不利后果。
• 不效率的管理可能会在组织中产生积极的影响，因为优化和预算削减可能被视为失败，而请求更多资源可能会受到谴责。
• 管理者在设置目标时应考虑资源分配的零和游戏，而管理效率和修复错误可能会因组织的规模和复杂性而变得更加困难。