2023-第二十六周

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

技术
工具
更新
设计
- 纯干货！如何利用激励体系提升用户粘性
- Exploring Universal And Cognitive-Friendly UX Design Through Pivot Tables And Grids
AI
其他

技术

React Best Practices in 2023 - Part 4: Writing Clean and Efficient React Code- Best Practices and Optimization Techniques

本文讨论了在 React 应用程序中编写干净高效代码的各种最佳实践。建议实现错误边界、对函数组件使用 React.memo、使用代码检查工具提高代码质量、避免默认导出、使用对象解构、使用 Fragment 和传递对象而不是多个 props。这些实践可以提高代码库的可维护性、性能和可读性。

在编写 React 代码时，实现错误边界、使用 React.memo 和对象解构等方法可以编写干净高效的代码。
使用类似 ESLint 的代码检查工具可以提高代码质量和一致性。
使用具名导出替代默认导出，使用 Fragment 替代不必要的包装 div，并倾向于传递对象而不是多个 props，以使代码库更有组织性和易于导航。

Avoid parameter drilling by using the Node.js AsyncLocalStorage

本文讨论了在 Node.js 应用程序中共享上下文的挑战，并介绍了 AsyncLocalStorage 类，它提供了一种在 Web 请求或任何其他异步操作的生命周期中存储特定上下文数据的方法。不推荐使用全局变量来共享上下文，并且传递参数或将其附加到请求对象可能会很麻烦。AsyncLocalStorage API 可以用于关联 ID、存储当前用户、事务 ID、报告数据等。文章还提到了 JavaScript 的 Async Context 提案。

在处理异步代码时，全局变量可能会造成问题，因为它们可能会相互干扰。
Node.js 中的 AsyncLocalStorage 类提供了一种在整个异步操作的生命周期中存储特定上下文数据的方法，避免了干扰。
JavaScript 的 Async Context 提案旨在扩展 AsyncLocalStorage 的用途，并可能在将来成为 ECMAScript 标准的一部分。

React Server Component 初体验与实践 —— 将博客迁移到 Next.js App Router

从 Hexo 迁移到了 Next.js，并使用了 React Server Component 和 Next.js 13 的 App Router。
保留了 Hexo 作为 CMS，但需要额外写很多序列化步骤。
在 React Server Component 中，可以直接调用 Hexo 的 API，还可以直接把 Hexo API 返回的 warehouse 的 Document 和 Query 实例用 prop 传来传去。
使用了 Next.js App Router 实现 Nested Layout。
介绍了利用 React 18 Concurrent Rendering 的能力保障优先更新高用户体验的 stat 数据

Things you might not know about Next Image

本文解释了 Next.js Image 组件的工作原理，并澄清了周围一些误解。Next Image 组件是一个无需繁琐操作的图像优化解决方案，支持现代格式并为不同屏幕尺寸生成多个版本。Next Image 的架构包括三个组件：React Next Image 组件、Image API 和 Image Optimizer。Image API 充当图像代理，而 Image Optimizer 根据环境使用不同的库。该文章揭穿了有关图像裁剪的误解，澄清了显示图像宽度和加载图像宽度之间的差异，并解释了如何在没有 Next Image 组件的情况下使用图像优化。它还讨论了使用 import 导入本地图像和了解响应式图像的'sizes'属性的重要性。

Next.js 中的 Next Image 组件提供了无需繁琐操作的图像优化功能，支持现代格式并为不同屏幕尺寸生成定制版本。
该组件实际上并不对图像进行裁剪，而是使用宽度和高度属性来防止布局变化，并在出现不匹配时拉伸或缩小图像。
Image API 可以单独与 Next Image 组件一起使用，用于在画布上呈现图像或优化 OG 图像等场景。

Faking a :snapped selector with Scroll-Driven Animations

本文讨论了如何使用滚动驱动动画来模拟一个:snapped 选择器，该选择器将匹配当前在启用滚动捕捉的祖先滚动器中捕捉的元素。文中提供了代码和实现方法，并附带演示。然而，该方法并非完美，也存在一些限制。作者建议应该在 CSS 中内置一种适用于捕捉元素的样式设置方式。

滚动驱动动画可以用来模拟一个虚构的:snapped 选择器，从而实现基于滚动捕捉的动态元素样式设置。
通过将滚动驱动动画与其他 CSS 特性结合使用，开发人员可以创建出粘性定位、文本缩小和滚动保持状态等独特效果。
尽管提供的代码提供了一种将样式应用于捕捉元素的解决方法，但它存在一些限制并被认为是一种巧妙的解决方案，凸显了需要一个专门的 CSS 功能来处理捕捉元素的需求。

Midjourney 从零基础到落地实践

Building a full-stack, fully type-safe pnpm monorepo with NestJS, NextJS & tRPC

本教程指导您构建一个全栈、端到端的类型安全的 pnpm monorepo，使用 NestJS、NextJS 13 和 tRPC。它涵盖了 monorepo 的设置，添加 NestJS 应用程序，添加 NextJS 13 应用程序以及进行配置更新以实现两个应用程序之间的无缝集成。该教程还演示了如何在 NestJS 和 NextJS 中使用 tRPC，包括将 tRPC 服务器添加到 NestJS 和将 tRPC 客户端添加到 NextJS。最后，它提供了将 monorepo 部署到 Railway 的说明。本教程强调了开发体验和选择的技术堆栈的优势。

本教程指导您使用 NestJS、NextJS 13 和 tRPC 构建一个全栈、端到端的 monorepo，提供无缝的开发体验。
monorepo 的设置使用 pnpm 工作区，允许在同一个存储库中独立管理前端和后端项目。
tRPC 服务器被集成到 NestJS 中，提供了后端和前端应用之间的类型安全通信。

Thinking in React Query

An Introduction to Streaming on the Web

Web 流提供了一种标准化的方式，可以在网络连接上异步发送和接收数据。它通过实时更新和交互增强了 Web 应用程序的性能和响应能力。Web 流可以分为可写流（WritableStream）、可读流（ReadableStream）和转换流（TransformStream）三种类型。数据流中的基本单元是数据块（chunks），其大小和形状可以不同。常用的与 Web 流交互的方法包括 Fetch API 和 getReader 方法。Web 流还具有处理反压的能力，确保数据的生产和消费之间达到平衡。服务器发送事件（SSE）是另一种将实时更新从服务器流式传输到客户端的方法。

Web 流提供了一种标准化且高效的处理数据的方式，可以实现 Web 应用程序的实时更新和交互。
Web 流中的反压处理确保数据的生产和消费平衡，防止内存溢出并保持数据流的平稳。
服务器发送事件（SSE）使用长连接的 HTTP 连接，从服务器实时向客户端流式传输更新，非常适用于需要实时数据的应用程序。

Useful DevTools Tips and Tricks

该文章讨论了使用浏览器开发者工具提高调试工作效率的 15 个流行技巧。这些技巧包括缩放开发者工具界面、删除网页上烦人的覆盖层、列出页面上使用的字体、测量页面上的任意距离、检测未使用的代码、更改视频的播放速度、在不同语言中使用开发者工具、禁用事件监听器等。文章为每个技巧提供了逐步说明，并鼓励读者在评论部分分享自己的技巧。

一些流行的开发者工具技巧包括缩放 UI 界面、删除烦人的覆盖层、列出页面上使用的字体、测量任意距离、检测未使用的代码、更改视频的播放速度以及在不同语言中使用开发者工具等。
浏览器开发者工具提供了一系列面板和功能，可以极大地增强您的调试工作流程和工作效率。
通过探索和利用这些不太为人所知的功能，您可以优化调试流程，更高效地解决常见问题。

An Introduction to Command Injection Vulnerabilities in Node.js and JavaScript

本文讨论了 Node.js 和 JavaScript 应用程序中命令注入的安全漏洞。命令注入发生在操作系统将不受信任的用户输入作为命令执行时，允许攻击者获取未经授权的访问或危害系统。文章重点介绍了命令注入的风险和影响，并提供了几种最佳实践来减轻这些漏洞，包括输入验证和清理、将命令与参数分离、限制命令执行，并遵循最小权限原则。文章还推荐了一本进一步学习如何保护 Node.js 应用程序免受命令注入漏洞影响的书籍。

Node.js 和 JavaScript 应用程序中的命令注入漏洞可能导致未经授权的访问、数据泄露或完全系统崩溃。
为了减轻命令注入漏洞的风险，关键是实施输入验证和清理、将命令与参数分离、避免执行用户提供的输入作为命令执行的一部分，并遵循最小权限原则。
了解风险、参考真实世界的事件，并遵循最佳实践，可以帮助开发人员有效地保护他们的 Node.js 应用程序免受命令注入漏洞的影响。

工具

typesafe-router

React Router 的小型包装库，可显着提高类型安全性。

panda.css

CSS-in-JS 具有构建时生成的样式、RSC 兼容、多变体支持和一流的开发人员体验

webperf-snippets

Web 性能片段

ModHeader - Modify HTTP headers

修改请求头和响应头

tween.js

JavaScript/TypeScript 动画引擎

psd

适用于 Web 和 Node.js 的快速零依赖 PSD 解析器

更新

styled-component v6

remix 1.18

nestjs v10

NestJS 10 已发布，带来了错误修复、改进和新功能。这个版本引入了使用 SWC（Speedy Web Compiler）来加快开发速度。现在可以在测试中覆盖模块，使模拟更加简单。NestJS 10 支持 Redis 通配符订阅，允许订阅与给定模式匹配的消息。CacheModule 已移至独立的包中。不再支持 Node.js v12，要求使用 TypeScript v4.8 或更高版本的 CLI 插件。有关从 Nest v9 升级的迁移指南可供使用。NestJS 项目提供企业咨询和支持服务。社区和赞助商的支持对项目的发展至关重要。

NestJS 10 引入了 SWC（Speedy Web Compiler），用于加快开发过程，显著提高了默认的 TypeScript 编译器的速度。
新版本允许在测试中覆盖模块，使得整个模块的模拟更加容易，而不仅仅是个别提供者。
NestJS 10 现在支持 Redis 通配符订阅，允许用户订阅与特定模式匹配的消息。

设计

纯干货！如何利用激励体系提升用户粘性

本文主要讲述了用户激励体系的设计与应用。用户激励体系是促进用户增长和活跃的常用手段，分为平台精神激励、物质利益激励和社交情感激励三种。好的激励体系是能够像指挥棒一样，激励用户沿着指定的方向成长，是激励用户增长与用户召回，刺激用户活跃度的有力武器。激励体系伴随着用户增长的全流程“获取—激活—留存—推荐—变现”各个过程，采用不同的激励方式能辅助产品快速达到目标。文章还分析了好看视频的用户人群与现阶段背景，并提出重新打造符合好看人群特征的激励体系的思路。

Exploring Universal And Cognitive-Friendly UX Design Through Pivot Tables And Grids

该文章讨论了创建包容性和用户友好的表格设计的重要性。重点关注认知障碍对表格感知的影响，并提出改进表格可用性的建议。文章强调了减少认知负荷、最大化信号与噪音比以及有效使用认知偏见的必要性。它还讨论了颜色调色板和在表格设计中的使用的作用。总体目标是创建对所有用户易于理解和导航的表格。

表格是一种流行的数据可视化方式，但对于认知障碍的个体来说可能很难理解，因此包容性设计非常重要。
在设计表格时，应考虑认知负荷、认知偏见和信号与噪音比，以确保所有用户都有良好的用户体验。
在表格中正确使用颜色非常重要，因为颜色传递信息和情感，影响信息的感知方式。

AI

GPT-4's Secret Has Been Revealed

OpenAI 的 GPT-4 语言模型备受期待，但近期的发布令许多人失望，因为揭示出它实际上是八个较小模型的集合，而不是一个创新的突破。这种被称为专家混合范式的方法首次由谷歌工程师在 2021 年成功使用。然而，OpenAI 的营销策略成功地在模型周围制造了神秘感和炒作，使人们相信它具有神奇的能力，并阻止竞争对手模仿他们的技术。尽管如此，GPT-4 仍然是一个令人印象深刻的语言模型，具有出色的性能，即使它没有满足人们对人工智能的重大突破的期望。

GPT-4 不是单一的庞大模型，而是由八个较小的模型巧妙组合而成。
为了防止人们对该领域进展的失去信心，以及防止竞争对手模仿他们的技术，OpenAI 隐瞒了 GPT-4 并非突破性的事实。
GPT-4 是一次商业营销的典范，隐藏了它不尽人意的方面，同时保持着话题的高度关注，并增强了它神秘的氛围。

ihKXuJ

其他

生命的行为目的，不是为了食物和能量，而是为了负熵，争取负熵最大化。
熵代表衰老和死亡，那么负熵就代表对抗衰老和死亡。

-- 维基百科条目《熵与生命》

每当你有一种“应该有人在这里做某事”的感觉，那个应该做这件事的人很可能就是你。

-- 《高级工程师的道路》