2023-第二十九周

xFeedBeta

@agedcoffee

AgedCoffee·a year ago

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

技术
工具
更新
- Storybook 7.1
其他
- How to Do Great Work
- 穿透 Web3

技术

Software engineering: problem-solving and critical-thinking

软件工程经常被误解为仅仅是编码，但它涉及问题解决和批判性思维。工程师首先要理解问题，然后使用分解和模式识别等策略来提出解决方案。批判性思维应用于设计、实施和测试阶段，考虑可扩展性和性能等因素。软件工程是关于理解问题、构思解决方案并应用批判性思维以确保有效性。随着软件的重要性越来越高，工程师需要成为优秀的问题解决者和批判性思考者。

软件工程不仅仅是编码，还需要解决问题和批判性思维的技能。
工程师必须理解问题，构思解决方案，并应用问题解决策略来开发有效的软件系统。
批判性思维在整个软件开发过程中至关重要，从设计到实施和测试，以确保高效和高质量的代码。

Introducing Flame graphs: It’s getting hot in here

火焰图是一种用于识别代码瓶颈和理解代码执行模式的可视化工具。现在在 VS Code 和 JetBrains 编辑器的 AppMap 扩展中提供了火焰图。火焰图提供了函数执行的分层视图，使开发人员能够快速识别耗时的函数并优化代码效率。它们揭示了长时间运行的查询、N+1 查询以及函数对整体性能的影响等见解。AppMap 在火焰图的基础上进行了改进，通过突出显示应用程序中的缺陷并展示它们的直接影响。该工具还提供了序列图、传统的依赖和跟踪视图。

火焰图提供了代码执行模式的可视化表示，帮助开发人员识别瓶颈并优化性能。
火焰图的颜色方案帮助开发人员理解不同类型的代码，如 SQL 查询、函数调用和外部服务调用。
AppMap 通过突出显示应用程序中的缺陷并展示这些缺陷的直接影响，使问题的识别和修复更加容易。

How React 18 Improves Application Performance - React 18 如何提升应用性能

React 18 引入了改进应用程序性能的并发特性。JavaScript 中的主线程逐个执行任务，长时间的任务可能会阻塞其他任务。使用 50ms 的基准来保持流畅的视觉体验。总阻塞时间（TBT）和交互到下一次绘制（INP）是用于衡量长时间任务对性能影响的指标。传统的 React 渲染是同步的，导致延迟和无响应的 UI。React 18 引入了并发渲染器，允许非紧急渲染让出主线程，并优先处理更重要的任务。并发渲染器还可以根据用户交互暂停和恢复渲染。

React 18 引入了并发渲染，它允许非阻塞渲染并优先处理更重要的任务，提高了应用程序的性能。
React 18 的并发渲染器可以根据用户交互等外部事件暂停和恢复渲染，以优化用户体验。
通过使用 startTransition 函数，开发人员可以将更新标记为非紧急的，通过优先处理重要任务进一步增强性能。

How to Iterate Over Object Keys in TypeScript

本文讨论了在 TypeScript 中遍历对象键的挑战，并提出了几种解决方案。作者解释了使用 Object.keys 返回一个字符串数组而不是所有键的联合可能会导致在尝试访问对象上的值时出现问题。他们提出了两个主要的解决方案：将键转换为 keyof typeof 以缩小类型范围，并使用类型断言在索引之前检查键是否实际上在对象上。文章还提到了通用函数方法和将 Object.keys 包装在自定义函数中。作者总结说，类型转换是他们首选的解决方案，但承认在某些场景中其他方法可能更合适。

在 TypeScript 中遍历对象键可能会有挑战，因为 Object.keys 的限制，它返回一个字符串数组而不是所有键的联合。
使用 keyof typeof 进行类型转换或使用类型断言可以帮助更安全、更具体地缩小类型范围并访问对象键的值。
虽然类型转换是最简单且通常足够的解决方案，但 isKey 类型断言和通用函数方法提供了在 TypeScript 中遍历对象键的替代方法。

5 Common Pitfalls with Server Components in Next13 (with examples)

本文讨论了在使用 NextJS 13 中的 App Router 功能时常见的问题和解决方案。它强调了在服务器组件中使用 React Hooks、在服务器组件中使用事件处理程序以及直接将服务器组件导入客户端组件时可能出现的问题。文章针对每个问题提供了解决方案，包括添加"use client"以启用熟悉的行为，根据需要将组件转换为服务器组件，并使用路由更改来触发重新渲染。

NextJS 13 中的 App Router 取代了 Pages Router，并引入了默认的服务器组件，但在使用 React Hooks 和事件处理程序方面存在一些限制。
直接将服务器组件导入客户端组件可能会导致 fetch 请求问题和组件行为低效，需要将其转换为客户端组件或仔细组合服务器和客户端组件。
服务器组件在状态或数据更改时不会自动重新渲染，因此需要依赖路由更改来触发重新渲染。

Writing CSS In 2023: Is It Any Different Than A Few Years Ago?

本文讨论了 CSS 的演变如何影响我们今天编写 CSS 的方式。作者强调了几个具有重大影响的特性，如容器查询、级联层、:is() 和:where() 伪选择器、新的颜色函数语法和用户偏好查询。作者还提到，尽管这些特性改变了 CSS 的方法，但它们在生产环境或日常使用中尚未得到广泛采用。总体而言，文章强调了在这些新特性的推动下编写 CSS 的兴奋和乐趣。

CSS 的特性，如容器查询和级联层，改变了 CSS 的编写方式，使得创建响应式布局和管理级联变得更加容易。
类似:is() 和:where() 的关系伪选择器在管理特异性和简化命名约定方面非常有用。
CSS 中颜色函数的更新语法，如 rgb() 和 hsl()，使得定义颜色值更加方便，不再需要在不同函数版本之间做出选择。

Write Clean Server-Side React Code with Higher-Order Server Components

React 18 引入了服务器组件，但它们有一些限制，可能会导致耦合和重复的代码。一种方法是在页面级别获取数据并将其传递给使用者组件，但这会导致耦合。另一种方法是为每个使用者组件获取数据，但这会导致重复。一个清晰的方法是使用高阶服务器组件，它可以获取数据并将其作为 props 传递给包装组件。这样可以实现可重用和解耦的代码。提供了示例和代码片段供参考。

React 18 中的服务器组件可能导致耦合和重复的代码，使数据获取和传播变得困难。
在最近的服务器组件中获取数据可以帮助解决耦合问题，但可能会导致多个获取请求，并违反单一责任原则。
使用高阶服务器组件可以提供一种清晰的解决方案，通过获取数据并将其作为 props 传递给包装组件，无论它们是服务器还是客户端组件。

Everything You Want To Know About Media Queries and Responsive Design

本文讨论了媒体查询和响应式设计在 Web 应用中的应用。它解释了媒体查询如何根据设备特性（如视口宽度）应用 CSS 规则。响应式设计旨在为不同屏幕尺寸优化的定制化视觉呈现。文章介绍了移动优先设计的概念，强调在设计和开发过程中优先考虑移动体验的重要性。文章还解释了 CSS 像素和设备像素的区别，以及如何使网站具有响应式布局和处理非矩形显示。还讨论了媒体查询中的断点及其使用方法。

媒体查询允许根据设备特性有条件地应用 CSS 规则，实现响应式设计和定制的视觉呈现。
移动优先设计将首先针对移动设备进行设计和开发，以便更容易适应较大的屏幕尺寸。
媒体查询中的断点定义了基于视口大小开始或停止应用条件样式的点，有助于创建响应式布局。

JWTs vs. sessions: which authentication approach is right for you?

本文讨论了基于会话的身份验证和 JWT 身份验证在 API 调用之间维护身份验证状态的区别。它解释了基于会话的身份验证涉及在服务器上创建和存储会话记录，而 JWT 身份验证涉及向客户端发送一个自包含的令牌。基于会话的身份验证的好处是简单和可靠，但可能引入延迟和性能问题。JWT 身份验证可以实现更快的授权和与外部应用的互操作性，但它缺乏使令牌无效或更新其中信息的能力。文章建议使用会话 cookie 和 JWT 的组合来实现平衡。文章还提到了 Stytch 的会话管理产品作为提供自定义选项的解决方案。总体而言，文章强调了在选择适当的身份验证方法时评估安全性和延迟之间的权衡的重要性。

基于会话的身份验证依赖于存储在数据库中的服务器端会话记录，提供可靠性，但在规模上可能引入延迟。
JWT 身份验证可以实现更快的授权和与外部应用的互操作性，但缺乏使令牌无效或实时更新授权权限的能力。
使用会话 cookie 和 JWT 的组合可以在性能和安全性之间取得平衡，允许自定义会话持续时间，并减少对非敏感路由的 API 调用。

工具

jscodeshift

jscodeshift 是一个用于在多个 JavaScript 或 TypeScript 文件上运行 codemods 的工具包。它提供了一个运行器，可以对每个传递给它的文件执行提供的转换，并输出转换了多少个文件的摘要。它还提供了对 recast 的封装，提供了不同的 API，recast 是一个 AST 到 AST 的转换工具，尽可能地保留了原始代码的风格。

driver.js

Driver.js 是一个轻量级、无依赖的原生 JavaScript 引擎，可以引导用户在页面上集中注意力。它没有外部依赖，支持所有主流浏览器，并且非常可定制。它可以突出显示页面上的任何元素，创建强大的功能介绍，为用户添加焦点转移器，并且一切都可以通过键盘控制。

virtua

一个零配置、快速且小巧（约 3kB）的 React 虚拟列表和网格组件。

react-content-font

使用 React 组件，仅为页面上使用的字符创建字体。

更新

Storybook 7.1

引入了一个应用内引导流程，使新用户更容易学习和导航组件工作坊。
为 Tailwind、Material UI、Emotion 和 styled-components 等流行库添加了零配置的样式支持。
包括 API 参考文档、Vue 3 源代码片段和响应性改进、UI 文档的目录以及对 Figma 设计插件的官方支持。

其他

How to Do Great Work

本文探讨了发现和追求优秀工作的过程。文章建议要做出优秀的工作，一个人必须选择自己天生擅长、深感兴趣并具有伟大潜力的事物。文章强调了进行个人项目和培养好奇心和探索习惯的重要性。它建议个体要学习足够的关于自己选择的领域的知识，达到知识的前沿，并积极寻找空白和未解答的问题。文章承认找到要做的事情的挑战，特别是对于年轻和雄心勃勃的人来说，但鼓励他们采取行动，保持好奇心，并优化有趣性。它还强调了坚持自己的兴趣并不被外部力量左右的重要性。总的来说，文章认为做出优秀工作的关键在于找到自己深感兴趣的事物，并以激情和好奇心去追求。

要做出优秀的工作，选择自己天生擅长、深感兴趣并具有伟大潜力的事物是很重要的。
要学习足够的关于你选择的领域的知识，达到知识的前沿，并注意到其他人忽视的空白。
跟随你的好奇心、喜悦和渴望去做一些令人印象深刻的事情，并愿意冒险并拥抱工作中的奇异之处。

穿透 Web3

本文介绍了 Web3 的核心概念，包括智能合约、DeFi、DAO 和钱包等。Web3 的核心理念是用户拥有自己的数据和资产，而不是被互联网公司所控制。然而，这也意味着用户需要自己负责管理自己的钱包和资产。Web3 的出现是为了解决信任问题，但也存在着决策效率低下的问题。Web3 可能会成为人类社会的增益，但不可能完全主导这个世界。

xLog

53470-44