2023-第三十一周

xFeedBeta

@agedcoffee

AgedCoffee·a year ago

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

技术
工具
更新
- Sharp - WASM
设计
- The Looking Glass: Higher Level Design
其他

技术

Understanding React Server Components

React Server Components (RSCs) 是在 React 框架中加入了数据获取和远程客户端与服务器通信功能的组件。RSCs 解决了传统的客户端和服务器之间的紧密关系问题，并通过在服务器上进行渲染来提高性能。RSCs 还可以减少客户端 JavaScript 包的大小，并提供更快的页面加载速度。RSCs 与客户端组件和服务器组件可以在同一个 React 树中进行交互。然而，RSCs 也有一些限制，例如无法使用生命周期钩子和状态。在 Next.js 中，通过 App Router 可以使用 RSCs，并且可以选择将组件设置为客户端组件。

React Server Components（RSCs）将 React 的基本功能扩展到了数据获取和远程客户端 - 服务器通信的范畴。
RSCs 解决了传统 React 在服务器渲染和 Suspense 方面的一些问题，提供了更好的性能和用户体验。
RSCs 减少了客户端 JavaScript 包的大小，提高了页面加载速度，并且可以与客户端组件和 Suspense 无缝集成。

Why is DNS still hard to learn?

这篇文章讨论了为什么学习和调试 DNS 问题会很困难。作者指出了一些原因，包括系统的隐藏性、处理隐藏系统的方法、DNS 服务器提供的扩展调试信息等。此外，文章还提到了一些与 DNS 相关的工具和一些奇怪的问题，如负缓存、getaddrinfo 实现的差异等。最后，作者提出了改进工具和输出格式的一些建议。

DNS 是一个被广泛使用的技术，但学习和调试 DNS 问题很困难，因为其中很多系统是隐藏的。
DNS 的隐藏系统包括计算机上的 DNS 库、解析器的缓存以及解析器与权威域名服务器之间的对话，这些都不容易直接观察和理解。
通过教育人们了解这些隐藏系统，改进工具输出的可读性，以及增加调试信息等方式，可以使学习和调试 DNS 问题更加容易。

6 Ways to Use Extract in TypeScript

本文介绍了 TypeScript 中一种非常有用的工具类型 Extract 的多种用法。其中包括通过区分标识符提取联合类型的成员、通过成员形状提取联合类型的成员、提取联合类型中的所有字符串、布尔值和数字、提取联合类型中的所有函数、从联合类型中排除 null 和 undefined 以及找到两个联合类型中的共同成员。

TypeScript 的 Extract 是一种非常有用的工具，可以从一个联合类型中提取特定的成员。
Extract 可以根据联合类型的鉴别属性或形状来提取特定的成员。
Extract 还可以用于从联合类型中提取特定类型的成员，如字符串、布尔值、函数等。

The value of a prototype is in the insight it imparts, not the code.

这段文字讲述了原型开发的价值和重要性。原型可以帮助我们快速验证想法，获取反馈，并做出决策。它可以帮助我们了解问题，找到解决方案，并提供有价值的见解。原型不仅是代码的产物，更是一个学习的工具，可以帮助产品和工程团队做出关键的商业决策。文中还介绍了不同类型的原型，以及如何进行原型设计的方法和步骤。最后，强调了通过原型学习到的知识对于项目的成功和未来类似项目的重要性。

原型设计是验证想法、获取反馈、收集数据的重要工具，帮助产品和工程团队做出关键性的业务决策。
原型的价值在于提供洞察力，而不仅仅是编写的代码。它可以帮助我们快速失败，获取决策所需的数据，并安全地进行试错。
原型设计是一个学习工具，它通过与利益相关者的对话，帮助我们发现需求、解决问题、改善产品，并为最终产品的成功与否起到决定性作用。

How to Send Emails with React Using Resend

本文介绍了如何使用 React Email 和 Resend 发送邮件，并使用 Next.js 构建了一个典型的投资组合联系表单。通过 Resend API，我们可以发送邮件，并使用 React Email 创建邮件组件。文章详细介绍了如何设置 Next.js 应用程序、获取 Resend API 密钥、创建邮件组件以及使用 Resend 发送邮件的步骤。最后，强调了使用 React Email 和 Resend 可以简化创建和发送邮件的过程，并提供了相关文档和示例代码的链接。

最近，使用 React 创建和发送电子邮件变得非常困难，但是 React Email 和 Resend 的出现解决了这个问题。
在使用 Next.js 搭建应用程序并设置 Resend 之后，我们可以创建一个典型的投资组合联系表单，用于发送电子邮件。
使用 React Email 和 Resend，我们可以轻松创建和发送电子邮件，它们提供了优秀的开发者体验。

If Web Components are so great, why am I not using them?

Web Components 在过去十年中没有取得广泛应用的原因主要有以下几个方面：1. Web Components 过于低级，主要面向框架作者，而大部分框架已经解决了他们的问题。2. 早期的 Web Components 和 Polymer（Google 的 UI 框架）之间存在混淆，加上 Google 的一些宣传方式不当，使得 Web Components 的推广受阻。3. 缺乏成功案例和知名产品的支持，难以让人投入使用。4. 直到最近才得到广泛支持，之前只是实验性技术。5. Web Components 存在一些性能问题。如果能重新做一遍，就应该将目标用户定位为 WordPress 用户，减少 Google 的影响，简化样式问题，并建立一个行为准则。

存在市场推广问题，缺乏全面的营销策略。
过于底层，设计初衷是为框架开发者而设计，但对于已经解决了大部分问题的框架开发者来说，并没有太大吸引力。
在早期的推广中存在重度宣传的问题，与 Google 的 UI 框架 Polymer 产生混淆，导致推广效果不佳。

The virtual keyboard API

本文介绍了移动设备上固定元素被虚拟键盘遮挡的问题，并介绍了如何使用虚拟键盘 API 来解决这个问题。作者详细解释了问题的原因，并提供了一些使用虚拟键盘 API 的示例和用途。虚拟键盘 API 目前只在安卓版 Chrome 浏览器中支持。作者建议谨慎使用虚拟键盘 API，因为在某些情况下可能会引起其他问题。

移动设备上的固定元素在虚拟键盘激活时可能被键盘遮挡，影响用户体验。
使用虚拟键盘 API 可以解决这个问题，通过检测键盘位置和尺寸来调整布局。
虚拟键盘 API 目前仅在 Chrome for Android 浏览器中支持，使用时需要启用 JavaScript 或者使用 meta 标签或 CSS 属性。

Nginx 使用量子安全加密算法

该文章介绍了量子计算机的威胁以及如何使用量子安全加密算法来保护网站数据的安全。Open Quantum Safe 项目提供了一些能抵御量子计算机攻击的加密算法，并提供了 nginx、Chromium 等软件的编译、集成流程文档。文章还提供了编译 OQS-OpenSSL 和编译 Nginx 的具体步骤。

容器编排器的自我介绍

该文介绍了容器编排器的发展历程，包括容器编排器的自我介绍、Swarm 和 Kubernetes 的介绍。Swarm 是 Docker Compose 的升级版，支持服务发现、负载均衡、滚动更新等特性，但不能实现容器的高可用性。Kubernetes 是目前最受欢迎的容器编排器，支持在多达数千个节点的集群上管理和分配资源，具有强大的功能和性能，支持民主化变革，但配置较为复杂。

工具

ora

优雅的终端 Spinner

size-limit

计算运行您的 JS 应用程序或库的实际成本，以保持良好的性能。如果成本超过限制，请在拉取请求中显示错误

a11y-dialog

一个非常轻巧和灵活的可访问模态对话框脚本

更新

Sharp - WASM

设计

The Looking Glass: Higher Level Design

这段文字主要讲述了设计在解决问题中的重要性以及设计师应该具备的能力和责任。文章强调了设计是有意识地影响结果的行为，是控制我们命运的手段，是创新的魔法粉。同时，文章也指出了人们在评估他人的知识和技能、确定重要目标方面存在的偏见和困难。最后，文章呼吁我们要正确理解设计的本质，并根据目标和相应的知识技能来选择最合适的人来设计解决方案。