- Published on
2023-第三十二周
- Authors
- Name
- AgedCoffee
- @__middle__child
该周报主要为各个地方内容的汇总整理
技术
How to Crack System Design Interview in 2023?
这篇文章介绍了如何准备软件工程师或软件开发者面试中的系统设计部分。作者提到了四个步骤：学习基本的系统设计概念、阅读科技巨头的工程博客、解决常见的系统设计问题、进行实践练习。文章还列举了一些系统设计的关键概念和常见问题，并推荐了一些学习资源。最后，文章祝愿读者在系统设计面试中取得好成绩。
- 系统设计面试的重要性：在软件工程领域，系统设计是高级工程师、领导者和架构师等职位最为重要的技能之一，是整个面试过程中最关键的环节。
- 系统设计面试的期望：面试官希望你能够设计满足要求并具有良好可扩展性的系统，能够比较各种方案并选择最优解，同时还需要掌握与系统设计相关的基本知识。
- 准备系统设计面试的四个步骤：学习基本系统设计概念、阅读科技巨头的工程博客、解决常见的系统设计问题、进行反复练习和模拟面试。
Building a Design System with React Web Components
这篇文章介绍了如何使用 React 将组件编译为 Web 组件，并在任何 Web 应用程序或框架中使用。作者使用 Preact 来替代 React，并添加了事件处理和样式支持。他们还通过共享 JS 依赖和 CSS 来优化设计系统的打包大小。最终，他们成功地创建了一个可以在任何地方使用的设计系统。
- 为了在不同的 Web 应用程序和框架中使用，我们将 React 编译为 Web 组件，从而构建了一个通用的设计系统。
- 我们使用 Preact 作为 React 的替代，以在 Web 组件中实现样式和事件处理的功能。
- 为了进一步优化，我们创建了一个应用程序提供者和主题提供者，以减小设计系统的包大小并实现共享的 JS 依赖和 CSS 样式。
The simplest example to understand Server Actions in Next.js
Server Actions 是 Next.js 中的一个新功能，它允许我们通过调用服务器上的函数来获取数据。通过使用 Server Actions，我们可以在客户端组件中直接调用服务器上的函数，而无需创建 API 路由并使用 fetch 来获取数据。Server Actions 的工作原理是，Next.js 会将我们定义的函数转化为可通过 API 调用的函数，并在客户端组件中进行调用。这样，我们可以方便地从服务器获取数据，同时也可以进行更复杂的操作，如修改数据库、发送邮件等。然而，需要注意的是，由于任何人都可以调用已存在的 Server Actions 并传递任意参数，因此我们需要对接收到的参数进行验证，以确保安全性。总之，Server Actions 是一个方便获取服务器数据的功能，可以在 Next.js 应用中发挥重要作用。
How To Scale Node.js Applications with Clustering
本文介绍了如何使用 Node.js 的 cluster 模块来扩展应用程序的性能。当在具有多个 CPU 的系统上运行 Node.js 程序时，默认情况下，它只使用一个 CPU 来执行。这可能导致单个进程在接收过多请求时被负载过载，从而影响应用程序的性能。为了解决这个问题，Node.js 引入了 cluster 模块，它可以在同一台机器上创建多个相同的应用程序实例，并使用负载均衡器将负载均匀分配给这些实例。本文将指导如何使用 cluster 模块来扩展 Node.js 应用程序，并使用 loadtest 和 pm2 工具来测试性能和进行进一步扩展。
- Node.js 的单线程执行模型可能导致应用程序在处理大量请求时性能下降和崩溃。
- Node.js 的 cluster 模块可以创建多个应用程序实例，以实现负载均衡和提高性能。
- 使用 pm2 模块可以自动将应用程序扩展到多个 CPU，进一步提升性能。
工具
zod-to-openapi
从 Zod 模式生成 OpenAPI(Swagger) 文档的库
flatdraw
一个简单的画布绘制网页应用，具有响应式用户界面。使用 TypeScript、React 和 Next.js 开发
jimp
一个完全使用 JavaScript 编写的图像处理库，适用于 Node 环境，无需任何外部或本地依赖
express-rate-limit
express 限流中间件
node-html-to-image
在 node 环境中把 html 转换成图片
pino
node json 日志打印