Blog | Frontend Weekly

《介绍 react.dev》。React 官方文档网站已经更新，现在的网址是 react.dev。新网站教授使用函数组件和 Hooks 的现代 React，并包括了图表、插图、挑战和 600 多个交互式示例。旧版 React 文档网站已移至 legacy.reactjs.org。新网站分为 “学习 React” 和 “API 参考” 两个主要部分，前者是一个自定进度的课程，后者提供每个 React API 的详细信息和用法示例。新网站还添加了很多沙盒，让用户可以快速玩转 React API、探索想法并检查理解。

https://react.dev/blog/2023/03/16/introducing-react-dev

《介绍 “安全 npm”，一个 Socket npm 包装器 - Socket》。Socket 推出了一款名为 “safe npm” 的 CLI 工具，用于保护开发人员在使用 npm install 时免受恶意软件、拼写错误、安装脚本、抗议软件和遥测等方面的影响。该工具透明地包装了 npm 命令，并在安装过程中保护开发人员免受恶意软件、拼写错误、安装脚本、抗议软件、遥测等 11 种问题的影响。

https://socket.dev/blog/introducing-safe-npm

《GitHub - gajus/turbowatch：Node.js 的极速文件变更检测器和任务编排工具。》。Turbowatch 是一个用于 Node.js 的极快文件更改检测器和任务编排器。它可用于自动化响应文件更改的任何操作，例如运行（并自动重新启动）长时间运行的进程（如您的 Node.js 应用程序）或构建资产（如 Docker 镜像）。

https://github.com/gajus/turbowatch/

《JulesBlom.com - React API 地图》。这篇文章介绍了一种学习 React API 的方法，即通过将其组织成一个空间地图来帮助理解。作者将 React 的不同部分联系在一起，形成了一个可供探索的结构，并在 “推荐阅读” 部分中添加了一些经过筛选的优质博客文章链接，以便更好地理解 React API。

https://julesblom.com/writing/map-of-react-api

《发布 v6.9.0・remix-run/react-router》。React Router 发布了 6.9.0 版本，支持使用 React 组件定义路由元素和错误元素字段。此外，还引入了 Lazy Route Modules，以保持应用程序包的小巧和支持代码分割路由。此功能通过 lazy () 路由属性实现，是一个异步函数，解析路由定义的非匹配部分。

https://github.com/remix-run/react-router/releases/tag/react-router%406.9.0

《Execa 7 的无 Shell 脚本 | ITNEXT》。Execa 7 提供了类似于 zx 的模式，但采用更简单的纯 JavaScript 方法。使用 Execa，不需要记忆任何 shell 语法，几乎所有特定于 shell 的功能都可以在 JavaScript 中表达。

https://itnext.io/shell-free-scripts-with-execa-7-885fb3b42f83

《2023 年每个前端开发人员都应该知道的 6 个 CSS 片段》。本文介绍了六个有用的 CSS 技巧，包括使用容器查询、创建滚动吸附效果、避免使用 grid 的 position: absolute、快速制作圆形、使用层叠样式表（cascade layers）控制变体和使用逻辑属性（logical properties）来减少代码量。

https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/

《Nuxt 3.3》。Nuxt.js 发布了新版本，增加了本地模块开发、自动重启服务器和性能优化等功能。该版本还提供了一些新的组件和可组合函数，包括错误处理组件 <NuxtClientFallback> 和处理不受信任用户输入的 useHeadSafe 可组合函数。此外，该版本还改进了类型定义和 Nitro 引擎，支持自定义配置模式，并且有更好的 Chrome DevTools 支持。

https://nuxt.com/blog/v3-3

《深入探究 TanStack 查询中的突变》。TanStack Query 有三个主要概念：查询、变异和查询失效。本文将重点介绍变异，包括变异的副作用、失效和并行实现。通过使用 useMutation Hook，可以轻松地处理所有更新、创建和删除请求。同时，乐观更新是使用 TanStack Query 变异的关键优势之一。

https://blog.logrocket.com/deep-dive-mutations-tanstack-query/

《React Hooks 是一个错误吗？| jakelazaroff.com》。本文探讨了 React 编程模型的不同之处，以及为什么有些人更喜欢使用 signal-based components。作者认为，人们对组件的心理模型与 React 中的函数组件和 hooks 的工作方式不匹配。与类组件相比，signal-based components 更加相似。文章还介绍了 Solid 等信号驱动框架，并讨论了它们与 React hooks 之间的区别和权衡。最后，作者总结说，现在的框架似乎正在尝试在 hooks 的可组合性和类的稳定性之间取得平衡。

https://jakelazaroff.com/words/were-react-hooks-a-mistake/

《基于 React Query 的请求防抖》。React Query 不支持 deboucing，因此需要将其包装在一个简单的抽象中。作者提出了一种方法来扩展 React Query 以添加新功能，代码行数少于 40 行。通过动画演示，展示了防抖的实际效果，使用防抖后，应用程序只触发了 1 个请求并交换了 294 B 的数据，请求减少了 91％，传输的数据减少了 99％。

https://rafaelcamargo.com/blog/deboucing-requests-with-react-query/

《零配置类型安全》。SvelteKit 现在可以自动生成类型注释，无需手动添加。通过在 SvelteKit 应用程序中添加类型注释，可以实现网络全面的类型安全性。现在，SvelteKit 框架可以为我们类型化 load 和 data，这是计算机所擅长的 —— 让我们专注于创造性的工作。使用 VSCode 的用户只需升级到最新版本的 Svelte 扩展即可，其他编辑器的扩展也可以使用此功能，只要它们支持 Language Server Protocol 和 TypeScript 插件。

https://svelte.dev/blog/zero-config-type-safety

MDH 前端周刊第 92 期：react.dev、npm 安全、Execa 7、Reactivity、React Query

📒 Go语言爱好者周刊：第 181 期 —— ChatGPT + Golang

3月19日内容汇总

March 19, 2023 · 11 min read

加菲猫

前端开发 @NETEASE

📒 小技巧集合

新学到一个省时间的技巧，随机分支，再也不需要为分支名发愁了！我写了个自定义脚本，会随机 checkout 到名为「sorrycc-xxxx」的分支。脚本大致逻辑是这样，const length = 4;const id = (Math.random() * 1e20).toString(36).substring(0, length);await $反引号git checkout -b sorrycc-${id}反引号;

gh 命令可以在命令行里操作 github，比如提 PR、绑定 ssh key 等，相见恨晚。

https://github.com/cli/cli

利用 openai 帮你写 commit 信息，可以省去部分重复劳动，适用于对 commit 信息要求不高的业务项目。

https://goonlinetools.com/snapshot/code/#42rshrrrk3gq5h171lxiu

在「Privacy & Security > Developer Tools」里把 Terminal 等开发者工具加上，绕开系统的安全策略，据说可以让请求和编译更快。

习惯用 Purrple Cat 作为工作背景音。

查 IP 或运营商数据可在命令行中输入「curl cip.cc」。

换了个 VSCode 主题「Nako」，红色系，挺好看。

📒 dynamicgo 开源：基于原始字节流的高性能+动态化 Go 数据处理

⭐️ Go语言中嵌入类型的一些重要规则，你知道多少

⭐️ Go 高性能 - channel 缓冲区

⭐️ Go 高性能 - singleflight 防止缓存击穿

📒 开源工作者福音，用 ChatGPT 评审 Pull Request，解决双手又能多提交两个commit了

📒 【webpack核心库】耗时7个小时，用近50张图来学习enhance-resolve中的数据流动和插件调度机制

⭐️ 并发编程--协同等待WaitGroup的最佳实践

⭐️ 一文搞懂Go subtest

📒 Webpack 最近的任意代码漏洞是怎么回事

⭐️ Go语言中部分实现的接口(技巧)

⭐️ 别乱用了，用新的。Go SliceHeader 和 StringHeader 将会被废弃！

📒 拒绝搬运文档，从实际出发介绍几个开发中用得上的TypeScript技巧

⭐️ Go 高性能 - timer 内存优化到 0 分配

⭐️ Go 高性能 - defer 优化

📒 .vue 怎么变成 .js，我们来试一试！看完会更懂 Vue 吗

⭐️ Go 高性能 - 对象池

⭐️ Go 高性能 - 切片过滤器

⭐️ 【译】该如何使用合理 Go 语言的 struct

⭐️ 【译】Go语言：使用 Singleflight 优化你的代码

⭐️ 【Go官方博文】Go 切片：用法和内部结构

⭐️ 【译】Go语言：深入探究 array 与 slice

⭐️ Go 中的性能分析和执行跟踪

⭐️ Go 语言中接口嵌入接口

📒 2个奇怪的React写法

⭐️ Learn Go with tests

https://studygolang.gitbook.io/learn-go-with-tests

https://quii.gitbook.io/learn-go-with-tests/

📒 React 中文周刊 #131 - React hooks 是一个错误吗

⭐️ Go 高性能 - 互斥锁和读写锁

⭐️ Go是一门面向对象编程语言吗

⭐️ 「每周译Go」如何在 Go 使用 interface

⭐️ Go设计模式--桥接模式，让代码既能多维度扩展又不会臃肿

⭐️ Go语言中常见100问题-#29 Comparing values incorrectly

📒 深入理解Render阶段Fiber树的初始化与更新

📒 你不知道的 async、await 魔鬼细节

📒 2023 年 Web 框架性能报告

⭐️ Go 语言各个版本支持 Go Modules 的演进史

📒 MDH 前端周刊第 91 期：代码提取、Turborepo、Farm、React 常见错误、tRPC、技术债

pnpm v8.0.0-beta.0 发布，默认去除重复对等依赖项等。

auto-install-peers is true by default
dedupe-peer-dependents is true by default
The registry field is removed from the resolution object in pnpm-lock.yaml
save-workspace-protocol is rolling by default
resolve-peers-from-workspace-root is true by default

https://github.com/pnpm/pnpm/releases/tag/v8.0.0-beta.0

《WTF 是代码提取？》。本文介绍了一种新的开发方式 —— 代码共存（code collocation），即将服务器端和客户端代码放在同一个文件中。作者认为这种方式可以提高开发效率，因为大部分代码都在两个位置上运行，没有必要将它们分开成不同的文件。然而，由于服务器端和客户端有不同的限制，需要将它们分开并创建代码包。文章介绍了三种策略：导出抽取、函数抽取和闭包抽取，并详细解释了如何使用这些策略来实现代码共存。最后，作者还介绍了一种称为 “标记函数” 的方法，可以让开发者自定义标记以及相应的转换过程。（编者注：元框架开发必备技能）

https://www.builder.io/blog/wtf-is-code-extraction

《为什么 Turborepo 从 Go 迁移到 Rust - Vercel》。Turborepo 是一个用于 JavaScript 和 TypeScript 代码库的高性能构建系统。该系统通过增量构建、并行执行和远程缓存来避免重复工作。随着使用量的增加和产品需求的变化，Turborepo 决定从 Go 逐步迁移到 Rust。该迁移主要基于 Rust 的正确性、强大的生态系统以及开发人员的愉悦度等因素。Turborepo 正在采取渐进式的迁移方式，目前已经实现了 “Rust-Go-Rust Sandwich” 的状态，即 Rust 是入口点，可以选择使用 Rust 或 Go 来实现特定命令的功能。

https://vercel.com/blog/turborepo-migration-go-rust

《如何为你完全不了解的项目做出贡献？》。本文介绍了一个名为 Bun 的 JavaScript/TypeScript 运行时，它与 Deno/Node 类似，但具有更快的启动时间。作者通过编写测试套件来测试 Bun 的性能，并在测试过程中遇到了问题。作者分享了自己处理问题的方法，包括询问前任维护者、规范功能 / 问题、运行测试、编写测试用例并更改代码等步骤。

https://grifel.dev/how-to-contribute-without-knowledge

《比 Vite 快 5 倍？2ms HMR？Farm：基于 Rust 的极速构建引擎！》。Farm 是一个使用 Rust 编写的构建引擎，比 Webpack 快 10 倍以上，比 Vite 快 5 倍。它支持 HTML、CSS、JavaScript、静态资源等模块的编译能力，并且采用按需编译，在加载时编译除首屏需要的模块外的其他模块，理论上对任意规模的项目都能支持秒启动。所有能力都由插件实现，支持 Rust 和 Js 插件。

https://zhuanlan.zhihu.com/p/611603260

《React 初学者常见错误》。这篇文章介绍了 React 开发中常见的 9 种陷阱，包括：使用零进行条件判断、直接修改状态、未生成 key、缺少空格、在更改状态后访问它、返回多个元素、从不受控制到受控制的转换、缺少样式括号和异步效果函数。对于每种陷阱，文章都提供了解决方法，并给出了示例代码。

https://www.joshwcomeau.com/react/common-beginner-mistakes/

《@githubnext/github-copilot-cli》。GitHub Copilot CLI 是一个命令行体验，可以让 GitHub Copilot 在命令行中帮助你。它将自然语言转换为 shell 命令，并具有不同领域的模式。安装后，您可以使用以下三个命令：??：将自然语言翻译为任意 shell 命令；git?：将自然语言翻译为 Git 命令；gh?：将自然语言翻译为 GitHub CLI 命令。（编者注：装完再也没用过，因为 git 命令已成肌肉记忆）

https://www.npmjs.com/package/@githubnext/github-copilot-cli#whats-the-point-of-the-eval-and-alias-stuff

《使用 tRPC 和 React 的全栈 TypeScript》。tRPC 是一种使用 TypeScript 在全栈应用程序中创建完全类型安全 API 的方法。 tRPC 服务器应用程序生成具有类型安全函数的类型安全路由器（例如 CRUD 操作：创建用户，按标识符获取用户，获取所有用户），客户端应用程序可以直接调用这些函数。在幕后，仍然使用 HTTP 在客户端和服务器之间通信。相比 GraphQL 和 REST，tRPC 主要用于较小的项目，其中不需要协调许多服务（例如 GraphQL），或者我们不一定按照标准化的 RESTful 方法工作。但是，随时可以从 tRPC 迁移到 GraphQL / REST，因为 tRPC 最终只是服务器上的函数，可以直接在 REST 路由器或 GraphQL 解析器中使用。

https://www.robinwieruch.de/react-trpc/

《优秀工程师和卓越工程师的区别》。Intercom 的 CTO DARRAGH CURRAN 概述了造就杰出工程师的六个特征。其中包括野心和决心，习惯性简化，快速调试任何东西的能力，愿意帮助别人成为伟大的人，知道什么是有价值的，以及有创造力和积极性。Kotlyar说，工程文化是由被雇用的人、他们采取的行动以及被奖励和赞美的特质所塑造的。

https://www.intercom.com/blog/traits-of-exceptional-engineers/

monorepo 项目用 pnpm publish 可以自动替换 Workspace Protocol 为实际的版本号，可以让发布省不少事。

https://github.com/umijs/umi/pull/10719

MDH 前端周刊第 91 期：代码提取、Turborepo、Farm、React 常见错误、tRPC、技术债

📒 Go语言爱好者周刊：第 180 期 —— 通用 goroutine 池

3月12日内容汇总

March 12, 2023 · 15 min read

加菲猫

前端开发 @NETEASE

⭐️ Go 高性能 - map 优化 (三)

⭐️ Go 高性能 - map 优化 (二)

⭐️ Go 语言中结构体嵌入结构体

⭐️ Go Slice 扩容的这些坑你踩过吗

📒 Go 为什么不像 Rust 用？！做错误处理

📒 字节跳动自研 Web 构建工具 Rspack 正式发布

⭐️ 跟着 Go 作者学泛型

⭐️ Webpack 迁移 Rspack 速攻实战教程（前瞻版）

⭐️ Go 高性能 - 内存对齐

⭐️ Go 高性能 - map 优化 (一)

📒 Next.js了解篇｜一文带你梳理清楚 Next.js 的功能

📒 Go 在 3.8 妇女节（女神节）发布最新版本 Go 1.20.2 和 Go 1.19.7 安全更新

📒 解析 React 性能优化 API

⭐️ Go 高性能 - 逃逸分析

📒 一篇文章带你理解 React 中最“臭名昭著”的 useMemo 和 useCallback

📒 GSAP从入门到精通

⭐️ 最新最全Go主流框架高频面试题大全

📒 2023 年静态站点生成器 (SSG) 指南

📒 Node.js Toolbox：发现 Node.js 包的一种新方法

https://nodejstoolbox.com/

⭐️ Golang下的ORM框架gorm的介绍和使用

⭐️ 如何使用 splitChunks 精细控制代码分割

📒 浅析 SplitChunksPlugin 及代码分割的意义

📒 5W1H 带你入门 Monorepo

⭐️ 面试官：请说一下如何优化结构体的性能

⭐️ Go 高性能 - 打印调用堆栈

⭐️ Go 高性能 - 结构体优化 (一)

⭐️ Go 高性能 - index vs value in for

⭐️ Go 高性能 - int to string

📒 参考云谦大佬的项目，用 ChatGPT 给前端相关文章写总结

https://github.com/sorrycc/url-system

https://github.com/advancedlogic/GoOse

https://pkg.go.dev/golang.org/x/net/html

📒 前端构建工具进化历程

📒 18个很有用的 CSS 技巧

📒 Go 语言怎么一键生成一个 gRPC 服务

⭐️ Go 最细节篇｜内存回收又踩坑了

⭐️ Go设计模式实战--用状态模式实现系统工作流和状态机

⭐️ 「每周译Go」如何在 Go 中使用结构体标签（文末有GIFT）

⭐️ Go设计模式--享元模式，节省内存的好帮手

📒 MDH 前端周刊第 90 期：Signals、Signia、Replit、ChatGPT、CHIPS、技术债

《Demystifying Create React Signals Internals · Daishi Kato's blog》。本文主要介绍了 create-react-signals 库的内部工作原理，这个库的主要目的是将 React 组件中的状态管理从 React 自身分离出来，并使用 signals 来实现状态管理。Signals 是一种包含订阅、获取和设置值等功能的存储对象。文章讲解了如何使用自定义 JSX 转换器将 Signals 转换为可在 React 中使用的组件，以及如何处理对象类型的信号和跳过 diffing 等问题。作者认为，Signals 仍然是 React 中一个开放的研究领域，而使用 Observable 作为新的基元可以进一步探索这种方法。

https://blog.axlight.com/posts/demystifying-create-react-signals-internals/

《The JavaScript Site Generator Review》。该篇文章对当前流行的七种 JavaScript 网站生成器进行了评论。对于 npm 安装时间、客户端 JavaScript 基线、node_modules 权重、npm 审计、遥测（TELEMETRY）等内容进行了测试。其中，有些工具使用创建 x 包来安装依赖，并且包括了帮助用户安装依赖的步骤。然而，这些工具中有一些隐藏了 npm 审计结果（包括关于高严重度的安全漏洞）。还有一些工具默认开启了遥测功能，需要用户选择退出。此外，该文还附带了作者之前的评论和文章链接。

https://www.zachleat.com/web/site-generator-review/

《Effective Higher-Order Components :: Building Better Software Slower》。本文介绍了 React 中的高阶组件（Higher-Order Components，简称 HOC），它是一个接受组件的函数，并在附加逻辑的包裹下返回它。作者指出，虽然 HOC 带来了无限的可能性，但实际应用应限于透明地添加包装或逻辑。同时，作者提出了 HOC 的一些惯例和注意事项，例如 HOC 不应该改变所提供的组件的 API，HOC 应该有一个符合 withNoun 模式的名字，除了组件本身之外，HOCs 不应该有任何参数等等。此外，作者还介绍了一些最常见的 HOC，例如 Props记录、添加格式化等。最后，作者强调，HOC 应该是一个减轻 JSX 精神负担的工具，而不是炫耀函数式编程技巧的机会。钩子是一个更可预测的、明确的模式，但好的 HOC 依然存在并提供了强大的模式。

https://www.bbss.dev/posts/effective-hocs/

《Introducing ChatGPT and Whisper APIs》。OpenAI 宣布，其 ChatGPT 和 Whisper 模型现已可用于 API，让开发者能够使用尖端的语言和语音转文本功能。通过一系列系统级别的优化，自去年 12 月以来，ChatGPT 的成本降低了 90％；现在将这些节省成本传递给 API 用户。开发者现在可以在 API 中使用我们的开源 Whisper large-v2 模型，获得更快速、更具成本效益的结果。Snap Inc.、Quizlet、Instacart 和 Shopify 等公司已经开始使用 ChatGPT API 和 Whisper API。OpenAI 还改进了 API 服务条款以更好地满足开发者的需求。同时，OpenAI 还提供专用实例，使开发者能够深入控制特定模型版本和系统性能。

https://openai.com/blog/introducing-chatgpt-and-whisper-apis

《ChatGPT use case examples for programming - RisingStack Engineering》。本文介绍了一些人们如何在职业网页开发中使用 GPT 等 “AI” 工具。作者分享了他的同事们使用 GPT 及其各种变体的经验，以帮助读者更好地理解它们的实用性。例如，Code GPT 是一个 VS Code 插件，可以从注释提示中生成代码、生成单元测试、查找问题、重构代码、记录和解释代码、以及提出问题。ChatGPT 则可用于编写 Mongo 查询、代替 StackOverflow 等。然而，作者指出，使用这些工具时需要小心检查生成的内容，因为 GPT 可能会产生不对的结果。此外，尽管 “AI” 不会大规模取代就业岗位，但它将提高生产力，就像 Photoshop 是更好的画笔一样。

https://blog.risingstack.com/chatgpt-use-case-examples-for-programming/

《React vs Signals: 10 Years Later》。本文探讨了 JavaScript 中的信号（Signals）技术，以及它与 React 的区别和联系。信号是一种细粒度的响应式编程技术，可以用于前端开发中的数据流管理。尽管在 React 和虚拟 DOM 的兴起中，信号被认为是不可预测和危险的模式，但实际上信号从未消失，而是以第三方库或框架的形式存在。本文介绍了 SolidJS，这是一种新型的信号技术，它采用了组合、单向数据流和显式变异等原则，并将所有东西都视为 Effect，与 React 不同的是，它不会将所有操作视为纯函数，而是通过隔离更新来实现状态变化。作者认为，React 曾经 “修复” 了前端开发，但现在信号技术的复兴又将其推向了新的竞争时代。

https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71

《I'm not sure I understood this article. I think... — DEV Community》。这是 Dan 对于上一篇文章（Signals 主题）的评论。他探讨了 React 和 Solid 在处理渲染逻辑上的不同策略。React 的核心思想是，能够编写渲染逻辑，使其在初始化和更新时都能够运行，并且不会与传递的数据不同步。Solid 则只有模板中的 “空洞” 是响应式的，因此不能像 React 那样使用 if 语句和控制流。作者认为，Solid 的优点在于可以避免部分逻辑的重新执行，但这并不是最终的理想状态。通过编译器，可以实现在不重组代码的情况下自动确定 “组”，以达到类似 useMemo 的优化效果。最后，作者指出 React 不需要将渲染逻辑从内向外编写才能实现更新，这是 React 默认具备的响应性。

https://dev.to/dan_abramov/comment/256g9

《Remote Access to Your Repls via SSH》。Replit 是一个基于云的编码平台，它的所有付费计划都增加了使用 SSH 远程访问 Repls 的功能。订阅了付费计划的用户可以添加他们的 SSH 密钥，并远程操作他们的 Repl。此举使用户能够充分利用 Replit 的功能，同时继续使用其本地开发环境。Replit 将每个 Repl 放入自己的容器中，一旦连接被打开就会运行。在该容器内，一个 SSH 服务器处理所有远程访问需求。一个代理接收连接，验证密钥，并将 SSH 连接通过加密的 SSH 隧道路由到 Repl。

https://blog.replit.com/ssh

《Introducing Signia》。TLDraw 的开发团队发布了其核心反应式状态管理系统的开源项目 Signia。该库是用于使用基于逻辑时钟的新惰性反应模型处理细粒度反应值（称为 “信号”）的原始库，它诞生的原因是需要高效地处理经常更改的大型派生不可变集合。除了核心库之外，还发布了与 React 绑定的内容。Signia 的 API 类似于 Jotai、@preact/signals 和 Recoil 等类库，其主要区别特征是具有增量派生和内置支持回滚的事务。Signia 的反应性系统基于单个整数，即全局逻辑时钟，每当更新根状态值时，该时钟就会递增。比较时钟值允许 Signia 始终缓存派生值，而不管它们是否正在被积极观察。Signia 的响应式系统基于逻辑时钟和差异，可以实现增量计算派生值。

https://tldraw.substack.com/p/introducing-signia

《The 25 Percent Rule for Tackling Technical Debt》。这篇文章讨论了技术债务的不同类型，并提出了一种 “25% 规则”，即每周花费 10％的时间解决日常技术债务，另外 10％的时间解决每周技术债务，剩下的 5％用于处理每月和每年的技术债务。作者认为，解决技术债务并不是大规模修复的问题，而是通过文化建设来实现。通过改进日常工作中的代码、庆祝重构代码的能力以及知道何时选择好的而不是完美的，可以帮助解决技术债务问题。

https://shopify.engineering/technical-debt-25-percent-rule

《You Don't Need a Build Step》。本文探讨了为什么现代 Web 开发需要构建步骤，以及如何使用 Deno 和 Fresh 等工具实现无需构建的开发。文章介绍了构建步骤的来龙去脉，包括编译、压缩、打包和代码分割等过程，并列举了一些流行的构建工具。作者认为，构建步骤是现代 Web 开发不可避免的一部分，但也带来了复杂性和长时间的构建时间。使用 Deno 和 Fresh 可以实现无需构建的开发，从而提高开发效率和代码质量。

https://deno.com/blog/you-dont-need-a-build-step

《Three ways to activate an inspector in Node.js | pawelgrzybek.com》。本文介绍了三种激活 Node.js inspector 的方法，其中一种是使用 NODE_OPTIONS 环境变量来调试间接运行 Node 的进程。如果您是 Node.js 调试器的新手，可以查看作者之前发布的两篇文章：“在 Google Chrome 中进行基本的 Node.js 调试” 和 “解释 Visual Studio Code 调试器中的继续、步过、步入和步出操作”。

https://pawelgrzybek.com/three-ways-to-activate-an-inspector-in-node-js/

MDH 前端周刊第 90 期：Signals、Signia、Replit、ChatGPT、CHIPS、技术债

📒 Go语言爱好者周刊：第 179 期 —— Google 出品的分布式应用 Go 框架 weaver

3月5日内容汇总

March 5, 2023 · 9 min read

加菲猫

前端开发 @NETEASE

⭐️ 小厂内部私有Go module拉取方案3

📒 知识星球相关文章

269 - 《基于 ChatGPT 的 URL 系统》

268 - 《我的 RSS 订阅》

267 - 《读书笔记：交办的技术》

259 - 《程序员高效工作法》

📒 前端工程 dotfile 相关

umi-fabric - 一个包含 prettier，eslint，stylelint 的配置文件合集

https://github.com/umijs/fabric

tsconfig/bases - 提供各种前端工程的 tsconfig.json 配置

https://github.com/tsconfig/bases

⭐️ 论文分享 | 大语言模型的 few-shot 或许会改变机器翻译的范式

📒 如何使用乾坤实现微前端架构（附 vue + react 演示）

⭐️ 你说 Go 的切片原生支持并发吗

📒 前端组件级别的抽象方向

📒 OpenAI 又放大招了，GPT3.5 API 开放使用，1分钟上手体验！

📒 uni-app 黑魔法探秘（一）——重写内置标签

📒 「Go工具箱」Pie ：一个高性能、类型安全的slice操作库

📒 全网最详细去中心化 Module Federation的实现原理

📒 最全的React拖拽排序组件库对比研究

📒 掌握 JavaScript 中的迭代器和生成器

📒 CSS容器查询获得主流浏览器支持，是什么？怎么用

⭐️ 一文吃透 Go 内置 RPC 原理

⭐️ 用Go语言0代码10分钟完成一个学生管理系统带页面，私活必备

⭐️ Go 陷阱 - goroutine 竞态

⭐️ Go 陷阱 - interface{} 和 *interface{} 相等吗

⭐️ Redis 官方 Go 客户端来了！！！

Gopher 们应该都有使用过 Redis 吧，那 Go 的 Redis 客户端你用的哪一个呢？

不少人可能用是 github.com/go-redis/redis，毕竟这个 Star 数最多：

最近这个库被 Redis 官方”收“了，成为了 Redis 官方支持的客户端。最新版本 v9 导入地址变为：

import "github.com/redis/go-redis/v9"

Redis 官方 Go 客户端来了！！！

📒 从微信 JS-SDK 出发，一起了解 JSBridge 的神奇功能

📒 人物志｜缨缨：一个有故事的女同学

⭐️ 不会「函数选项模式」的Gopher看过来~

📒 前端食堂技术周刊第 72 期：Signals 是前端框架的未来、Chrome Headless、ts-reset、magic-regexp、Bun 新文档

⭐️ 通过 React Router V6 源码，掌握前端路由

📒 MDH 前端周刊第 89 期：HTML-first、Node 调试、Dead 组件探测、框架鹰鸽博弈、沙箱

《Debugging Node.js, The Right Way》。作者介绍了如何使用 Node.js 进行调试，而不是依赖于 console.log()。首先需要使用 --inspect-brk Flag 启动Node.js进程，然后打开浏览器的开发工具，连接到 Node 进程。通过使用调试器语句和添加断点，可以方便地调试代码，并且可以通过添加条件断点来跳过不感兴趣的迭代。文章还介绍了如何在 VS Code 中直接调试，以及如何调试通过 NODE_OPTIONS 启动的 Node 脚本。

https://www.builder.io/blog/debug-nodejs

《Self hosting in 2023》。作者介绍了如何将静态页面托管在树莓派上，以及如何设置自己的 DDNS，从而将域名连接到本地服务器。作者通过购买一个二手的树莓派、安装 Coolify 和 DDClient 等简单的步骤，仅花费了大约一个小时的时间便将博客部署在了自己的本地服务器上。这样做不仅节约了成本，而且提供了更好的开发体验。文章还提到了一些可能的运营成本，如一次性成本、电费、域名费用等。

https://grifel.dev/decentralization/

《React Hooks: Compound Components》。一篇老文，作者介绍了复合组件的概念，以及如何使用 React Context 来创建具有良好表达性和实用性的组件 API 。它使用一个例子来展示复合组件 API 的好处，以及如何使用 React.cloneElement 和 React Context 来实现它。

https://kentcdodds.com/blog/compound-components-with-react-hooks

《Maximising performance with React code splitting techniques》。React 是一个流行的 JavaScript 库，用于构建用户界面，但随着应用程序规模的增长，JavaScript 包的大小会变得很大，导致加载时间慢和性能差。为了解决这个问题，React 提供了多种代码分割技术，允许你将代码分割成更小的块，减少初始 JavaScript 捆绑的大小，提高应用程序的性能。这篇文章介绍了 React 的代码分割技术，包括动态导入、带 Suspense 的 React Lazy、可加载组件、基于路由的代码拆分、预加载、嵌入关键的 CSS 和动态块。

https://edvins.io/react-code-splitting-techniques

《Improved type safety in Storybook 7》。本文介绍了 Storybook 7 中的类型安全改进。Storybook 7为组件 Story 格式（CSF）3和新的TypeScript（4.9+）满足操作者的组合实现了增强的类型安全。新的 Meta 和 StoryObj 类型可以自动推断出组件道具的类型。通过使用 satisfies 操作符，TypeScript现在能够更好地显示这些警告。Storybook 7 测试版中已经可以使用新的 Meta 和 StoryObj 类型。

https://storybook.js.org/blog/improved-type-safety-in-storybook-7/

《The case for frameworks》。本文探讨了 JavaScript 框架的使用和开发者的自我利益，其中涉及了进化博弈论中的鹰鸽博弈概念。文章指出，即使 JavaScript 框架的性能不佳，但由于其在经济层面的优势，它们仍然非常受欢迎。「当71%的开发者已经在使用React时，招聘React开发者就变得容易了，从经济角度来看，这是一个巨大的优势。」React 作为一个具体的JS框架被讨论，并且指出单页应用程序的开发对于某些网站是很有用的，而 React 可以帮助开发者省去时间和成本。「开发人员是昂贵的。他们的工资最终是由客户支付的。但并不是所有的客户都同样有价值。」

https://seldo.com/posts/the_case_for_frameworks

《useSyncExternalStore First Look》。关于 useSyncExternalStore 的介绍。1）useSyncExternalStore 主要是用于库，但不只是用于库。它是用来订阅外部状态的，但意义比我想象的要广，浏览器是一个外部存储，你可能想在你的 React 应用中与之同步它是并发安全的，所以可以避免 UI 中的视觉不一致，2）如果订阅函数参数不稳定，React 会在每次渲染时重新订阅到 Store，3）getSnapshot 函数参数必须返回不可变的值，4）其可选的第三个函数参数 getServerSnapshot 是为了支持 SSR 它必须在初始客户端渲染时返回与服务器上完全相同的数据，这意味着你不能在服务器上读取浏览器的API。如果你不能在服务器上提供一个初始值，通过在服务器上抛出一个错误并将其包裹在边界中来显示一个回退，使该组件只在客户端使用。

https://julesblom.com/writing/usesyncexternalstore

MDH 前端周刊第 89 期：HTML-first、Node 调试、Dead 组件探测、框架鹰鸽博弈、沙箱

📒 Vue3中watch与watchEffect有什么区别

📒 「每周译Go」如何构建和安装 Go 程序

📒 Go语言爱好者周刊：第 178 期 — Go 实现的纸牌游戏

2月26日内容汇总

February 26, 2023 · 5 min read

加菲猫

前端开发 @NETEASE

题图：爱心猫

📒 bun 文档网站上线了

https://bun.sh/docs

推荐用来跑 npm scripts，极快。

📒 封装新版axios（v0.22.0）中的取消请求

📒 微前端接入Sentry的不完美但已尽力的实践总结

📒 总是跳转到国内版(cn.bing.com)？New Bing使用全攻略

📒 怎么在5分钟之内跑起来一个完整项目之gin

⭐️ Go 高性能 - 切片比数组快吗

⭐️ Go 高性能 - 切片预分配 N 倍+ 优化

📒 PNPM 如何给第三方库打补丁

https://github.com/antfu/pnpm-patch-i

📒 「Go框架」iris框架中mvc使用进阶

📒 Go1.20 arena 能手动管理内存了，怎么用

⭐️ Go语言空结构体这3种妙用，你知道吗

⭐️ 一文吃透 Go 内置 RPC 原理

⭐️ 外观模式，一个每天都在用，却被多数人在面试中忽视的模式

📒 一起玩转Vue中的JSX：让你一次性掌握它的特性!

📒 分享6款yyds的可视化搭建开源项目

📒 类型编程原理和编写类型安全代码

📒 前端食堂技术周刊第 71 期：LightningCSS、State of React Native、Sandpack 2.0、ChatGPT 与前端、2023

📒 「每周译Go」在 Go 中定义方法

📒 「读源码」为什么注册路由时没有传入上下文，在接口方法中却能取到

⭐️ 一文告诉你如何判断Go接口变量是否相等

📒 PHP vs Go，为什么 Go 不支持命名参数调用函数

📒 MDH 前端周刊第 88 期：错误处理、CSS 嵌套、应用模块化、useWorker

React 实现了下发服务器端函数的引用，类似 RPC 。

https://twitter.com/wongmjane/status/1625166863062958081

React Native 年度报告显示 Turborepo 是最受欢迎的 monorepo 工具。

https://results.stateofreactnative.com/monorepo-tools/

Nextjs 新增了 Api routes 的替代品 route handler 。

https://beta.nextjs.org/docs/routing/route-handlers

React Hook Form 支持跨框架使用了，建议更名为 @tanstack/hook-form，哈哈。

https://github.com/react-hook-form/core

《How to handle errors in React: full guide》。直接 try…catch 会有不少限制，但使用 React 官方的 ErrorBoundary 也有不少限制。这个限制是，React生命周期之外的错误不捕获，比如 resolved promises, async code with setTimeout, various callbacks and event handlers。怎么解？dan 给了个 Hack 方案，简单说就是 try {} catch(e) { setState(() => throw e) }。基于此，我们可以稍微封装下，比如 useThrowAsyncError 或 useCallbackWithErrorHandling，这样就不需要每次声明一个新的 setState 了。同时也可以考虑用 bvaughn/react-error-boundary 。

https://www.developerway.com/posts/how-to-handle-errors-in-react

《TypeScript Brand type with Zod》。Brand Type 可以用来创建一个新类型，比如把 string 包装成 Email。然后结合 Type Guards，即可确保类型安全，又能做数据校验。Type Guards 的部分可以用 zod 。

https://linux-china.davao.page/blog/2023-02-16-ts-brand-with-zod/

《Modularizing React Applications with Established UI Patterns》。好文，作者通过案例教你如何用成熟的 UI 模式把 React 应用模块化。说人话就是，把大组件拆小。几个思路，1）提取子组件以拆分视图，2）提取非视图逻辑到 hooks，3）提取领域模型以封装逻辑。但是也要注意别过度优化。

https://martinfowler.com/articles/modularizing-react-apps.html

《React Component Composition》。图解 Composition。

https://punits.dev/jargon-free-intros/react-component-composition/

Umi 例行每周四发一版，我觉得有趣的功能包括，1）基于 @clack/prompts 优化 create-umi 界面，2）优化命令行执行速度，该 lazyImport 的 lazyImport，同时优化了 @ant-design/icons 集合的读取方式，3）新增 legacy 模式支持做产物的 es5 校验，4）升级 Vite 到 4.1。

Umi 新增 Roadmap 2023，是 Umi 团队每周迭代的一部分，每周四更新，有兴趣共享的同学欢迎直接回 issue 认领。一个非 docs PR 即可加入 Umi Contributor 群。

Umi 团队新增一条规则，每人每周需共享 1-2 个想法，每周三开 Discussion 征集，这是试运行第一周的 Discussion 链接。

MDH 前端周刊第 88 期：错误处理、CSS 嵌套、应用模块化、useWorker

📒 Golang 语言标准库 io 详解

📒 Go语言爱好者周刊：第 177 期 — Go 版 ElasticSearch

2月19日内容汇总

February 19, 2023 · 6 min read

加菲猫

前端开发 @NETEASE

题图：Bigfish x 情人节。

📒 ChatGPT ✖️ 前端 = 有点er意思

📒 基于gpt3引擎实现CLI版本的chatgpt~（数量取胜的go语言学习法）

📒 基于qwik和iris(go)写全栈啦-短链服务（数量取胜的go语言学习法）

📒 云原生运维相关文章

📒 告别“复制粘贴”，带你自己配一个Babel

⭐️ Go 陷阱 - 接口方法调用

📒 【面试高频题】难度 4/5，单调栈的热门运用

📒 【第2858期】React 纪录片心得 — 重新思考最佳实践

⭐️ Go 陷阱 - 缓冲区内容不输出

⭐️ 百里挑 15 个 Git 技巧

📒 组件库实战——按需加载工程化

📒 Go 也要过情人节，并发布了安全更新 Go 1.20.1 和 Go 1.19.6

Go 1.20.1 发布了

Go 也要过情人节，并发布了安全更新 Go 1.20.1 和 Go 1.19.6

📒 前端食堂技术周刊第 70 期：Volar 的新开端、Lighthouse 10、良好的组件设计、React 纪录片、2022 大前端总结

⭐️ 聊聊 Ant Design V5 的主题（上）：CSSinJS 动态主题的花活

⭐️ Go 高性能 - 字符串拼接 1000+ 倍优化

📒 技术角度告诉你ChatGPT是什么？和一些深度思考

📒 闲鱼大终端UI组件库——FishUI建设之路

📒 ChatGPT 相关

AI量化投资训练营-基础班

https://twitter.com/kliu128/status/1623472922374574080/

https://tanstack.com/

https://platform.openai.com/docs/api-reference/completions/create#completions/create-prompt

https://huggingface.co/datasets/fka/awesome-chatgpt-prompts

https://github.com/f/awesome-chatgpt-prompts

https://github.com/lencx/ChatGPT

📒 细说 Vue 响应式原理的 10 个细节！

📒 MDH 前端周刊第 87 期：re-render、Resumable React、ESLint 性能、监控

《React recursively re-renders child components, but there is a nuance》。Alex Sidorenko 的 React 可视化渲染系列文章 +1。通过可视化的方式告诉你为啥通过 children 渲染子组件，能避免 state 变更时子组件 re-render。

https://alexsidorenko.com/blog/react-render-children-prop/

《Resumable React: How To Use React Inside Qwik》。关于如何在 Qwik 内使用 React，你可以建立 React 应用程序，而无需在用户的浏览器中加载 React。当然，在你需要交互的时候，还是需要动态加载 React（感觉不一定是件好事，没解决问题，只是把问题转移了，可能在交互时会卡一下）。

https://www.builder.io/blog/resumable-react-how-to-use-react-inside-qwik

《Speeding up the JavaScript ecosystem - eslint》。Speeding up 系列的第三篇。1）检测方法是 --cpu-prof + Speedscope（通常还可以用上 hyperfine 跑多次做 benchmark），2）解析器从 @typescript-eslint/parser 换成 @babel/eslint-parser + @babel/preset-typescript 可以节省不少时间，从 2.1s 到 0.6s，缺点是不支持 type-aware 的 linting 规则（我们通常也不会用他们），3）rslint 值得关注。

https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-3/

《Vite with ESLint》。手把手教你如何在 Vite 项目中加上和 Vite 集成的 ESLint，基于 vite-plugin-eslint。但个人感觉 ESLint 不应该集成（因为会影响构建速度），而应该单独用，同时编辑器里也有提示了，所以在提交和 CI 里做校验就够了。

https://www.robinwieruch.de/vite-eslint/

《Custom React Hooks and When to Use Them》。关于自定义 Hooks，是什么、可复用的提取、不可复用的提取、提取数量等，最后还是要注意抽象的代价，抽象不是免费的，有时适当重复反而更好，推荐下 Dan 的 The Wet Codebase 分享。

https://thoughtbot.com/blog/custom-react-hooks

《2022大前端总结和2023就业分析》。来自狼叔的年度大作，推荐。

https://mp.weixin.qq.com/s/SicYTABGjXcJJTqYEbL5dQ

《字节前端监控实践》。感觉含金量挺高的，摘录其中错误报警的部分。1）sourcemap 结果可以用 mozila 的 sourcemap 库进行反解，2）为了保密，sourcemap 不会传到公网，而是传给后端存在内部，Sentry 有类似工具（注：sourcemap 构建慢怎么办？并发多跑一次带 sourcemap 的），3）要做堆栈聚合，合并同类错误，4）通过记录 commit + git blame 可以直接分配报错信息到人。

https://juejin.cn/post/7195496297150709821

MDH 前端周刊第 87 期：re-render、Resumable React、ESLint 性能、监控

📒 「每周译Go」在 Go 中定义结构体

📒 leader要我三天时间搭一套react-cli出来，我答应了

⭐️ Go for range 一不小心就掉坑里了

📒 Go 工具链想主动上报使用数据，你愿意吗

📒 Go语言爱好者周刊：第 176 期 —— 题目来了

2月12日内容汇总

February 12, 2023 · 7 min read

加菲猫

前端开发 @NETEASE

题图：dannyhowe @ unsplash。

⭐️ Go 并发编程 - 数据竞态

⭐️ x/exp/maps, slices 纷纷被同意加入 Go 标准库

📒 怎么把自己造的轮子发布到 Go Module上

📒 【面试高频题】难度 2.5/5，综合贪心的序列 DP 题

⭐️ 聊聊Golang饱受争议的error

⭐️ 万字长文告诉你Go 1.20中值得关注的几个变化

📒 向 Swift 学习？Go 考虑简单字符串插值特性

📒 如何从 0 开始配置 Mac

📒 Understanding HTML Form Encoding: URL Encoded and Multipart Forms

📒 从 0 实现 use-context-selector

📒 为什么说Go的函数是“一等公民”

⭐️ Go 陷阱 - 错误处理三剑客

🌟 上次给 UMI 的文档提了两个 PR 被合并，成了 UMI contributor：

https://github.com/umijs/umi/releases/tag/v4.0.48

📒 「每周译Go」了解 Go 中的指针

📒 【面试高频题】难度 1/5，简单二叉树寻值问题

var ans, k int

func kthSmallest(root *TreeNode, _k int) int {
    k = _k
    dfs(root)
    return ans
}

func dfs(root *TreeNode) {
    if root == nil || k == 0 {
        return
    }
    dfs(root.Left)
    if k--; k == 0 {
        ans = root.Val
    }
    dfs(root.Right)
}

常规解法是先遍历所有树节点再排序，或者遍历树节点+优先队列（看做是 top K 问题），但这两种解法都没有利用该树为二叉搜索树的特性，而我们知道，二叉搜索树的中序遍历是有序的，因此我们只需要对二叉搜索树执行中序遍历，并返回第 k 小的值即可。中序遍历有「迭代」和「递归」两种写法。

【面试高频题】难度 1/5，简单二叉树寻值问题

📒 TypeScript 5.0 将支持全新的装饰器写法！

⭐️ Go异步任务处理解决方案：Asynq

📒 MDH 前端周刊第 86 期：CRA 未来、吐槽 React、React 清依赖小技巧、Darkmode

《The Future of Create React App and Why It Exists》。Dan 写了篇长文梳理了 CRA 的问题和规划。一些问题包括，1）脚手架的困境，一旦 clone 就很难再更新，然后你的项目配置会逐渐变得陈旧，要么放弃，要么需要花大量精力换新，2）因为是 CSR 所以有空 HTML 的问题，但 Dan 也并不喜欢 MPA，比如 astro，混用多种技术影响 DX，完整的页面刷新让客户端状态失效影响 UX，3）请求瀑布问题，比较好的解法是让数据获取和路由结合，这就需要元框架，4）懒加载（await import）问题，引入额外的请求瀑布，解法是数据获取+路由+构建工具，一样也需要元框架。Dan 期望 CRA 具备 SSG and SSR, automatic code splitting, no client-server waterfalls, route prefetching, navigation preserving client UI state 等功能，然后考虑多 CRA 的多条路，决定不做了，把 CRA 变成一个社区方案的启动器。

https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741

《React I Love You, But You're Bringing Me Down》。骂得好，哈哈，爱之深，责之切啊。如果你想吐槽 React，照着念就完了。1）表单没有稳定官方方案，一路用社区库过来，目前相对好的是 Formik 和 React-hook-form，看看人家 Svelte，2）Context 太敏感，一碰就 re-render，为了性能而拆大量的 Provider 瀑布流组件，太难看了，提供一个 useContextSelector 有那么难吗？3）关于 DOM 和 ref，React.forwardRef + TypeScript 写通用组件太难了，同时 ref 不仅仅是关于 dom，每次用 ref 都是因为 useEffect API 太奇怪，换句话说，refs 是对 react 创造的问题的一种解决方案，4）关于 useEffect，需要阅读一篇 61 页的论文才能用好也太难了，看看人家 Solid.js，5）关于 Hooks 规则，Rules of Hooks 不容易记住，6）关于老父亲 Facebook，略。那作者为啥还留下？因为「It's the ecosystem, stupid.」

https://marmelab.com/blog/2022/09/20/react-i-love-you.html

《Little React Things: Cleaning up dependencies - Zeke Hernandez》。Zeke Hernandez 介绍了一个减少列表项 rerender 的小技巧，虽然对用户来说性能提升不明显，但至少打开 react devtool 的「Highlight Updates」时会看起来很爽，这就够了。方法是，event handler 用 useCallback 包一下，同时清空依赖，没有依赖就不会触发 event handler 生成新的了。那依赖怎么清？1） setState 无需写入依赖，2）setState 用 function 的形式。

https://www.zekehernandez.com/posts/cleaning-up-dependencies

《4 Common Mistakes Made by Node.js Developers》。文章介绍了 4 个 Node 开发的常见错题。1）没有明确定义的日志级别，可尝试 winston, pino, morgan 等库，2）无脑选择 Docker 基础镜像，又大又耗性能，比如 node:18 300M+，选 slim 或 alpine 就够了，slim 70M，alpine 50M，3）签署 JWT 时不使用非对称加密，对称加密不够安全，4）Storing passwords without unique salting。

https://amplication.com/blog/4-common-mistakes-made-by-nodejs-developers

MDH 前端周刊第 86 期：CRA 未来、吐槽 React、React 清依赖小技巧、Darkmode

⭐️ Go 陷阱 - nil != nil

⭐️ Go1.20 那些事：错误处理优化、编译速度提高、PGO 提效等新特性，你知道多少

📒 Go语言爱好者周刊：第 175 期 — Go 2023 调查问卷

2月5日内容汇总

February 5, 2023 · 5 min read

加菲猫

前端开发 @NETEASE

题图：烟花兔。

📒 10 GitHub Repositories You Should Know as a JavaScript Developer

⭐️ Go 高性能 - 字符串 & 切片转换提升 10 倍+

⭐️ Go 高性能 - 两种内存大小为 0 的数据类型

⭐️ Taro 正式发布 3.6 版本：支持跨端路由、请求库，支持纵向拓展鸿蒙、Web 端平台插件，小程序持续集成 CI 能力升级

⭐️ 深入理解 go sync.Cond

📒 React团队回应用Vite替换Create React App的建议

📒 React为什么不将Vite作为默认推荐

⭐️ 将Roaring Bitmap序列化为JSON

📒 Flag 2023

📒 Go 1.20 已发布！性能和构建速度上有很大提升！

⭐️ Go 工程化 - 如何实现 implements

⭐️ 「好文推荐」转Go必看《 Go 工程化 - 面向对象，存在吗》

⭐️ Go字符串操作不是你想的那么简单！

📒 相关文章推荐

24个JavaScript循环遍历方法，你都知道吗

JavaScript 数组方法 reduce 的妙用之处

⭐️ 为什么 Go 不支持 []T 转换为 []interface

📒 「Go框架」深入理解web框架的中间件运行机制

📒 TypeScript 5.0 beta 发布：新版 ES 装饰器、泛型参数的常量修饰、枚举增强等

📒 【面试高频题】难度 2/5，简单的复工面试题

⭐️ 如何使用jenkins搭建一个中小企业前端项目部署环境

⭐️ 这些关于 Golang timezone 时区的坑，我已经帮你踩过了

📒 还能这样玩？Go 将会增强 Go1 向前兼容性

⭐️ 一文入门Go云原生微服务「爆肝6千字」

⭐️ sourcegraph 出品的并发库 conc 详解

⭐️ Go语言实现的可读性更高的并发神库

📒 MDH 前端周刊第 85 期：MDH Weekly 官网、2023 趋势、CSS Wish List、Astro

《10 Web Development Trends in 2023》，ROBIN WIERUCH 分析了 2023 年 Web 开发的 10 个趋势，推荐一读。10 个领域包括元框架、应用和渲染模式、Edge ServerLess、数据库复兴、JavaScript Runtime、MonoRepo、Utility-First CSS、类型安全、构建工具、AI 驱动开发。

https://www.robinwieruch.de/web-development-trends/

《20 Things I've Learned in my 20 Years as a Software Engineer》，一篇老文，讲述 20 年工作经验工程师的 20 条 Tips，我读完很有收获，推荐一读。

https://www.simplethread.com/20-things-ive-learned-in-my-20-years-as-a-software-engineer/

《Capture heap snapshots in Node.js》。作者介绍了关于捕获堆快照的 3 个方法，1）node --inspect index.mjs 或 --inspect-brk，2）借助 Node 12 支持的 --heapsnapshot-signal flag，node --heapsnapshot-signal=SIGUSR1 index.mjs，3）用 v8.writeHeapSnapshot() method 手动写。

https://pawelgrzybek.com/capture-heap-snapshots-in-node-js/

《Things I want to see in JavaScript and Frontend development in 2023》，Paul Armstrong 关于 2023 年期望发生的变化。1）axios 别发展了，因为用浏览器原生支持的 fetch 可以省去 7-11kB 的尺寸，2）CSS 方案更少分歧，主要是 tailwind 和 css in js 之间，3）少一些资本支持的开源，因为当资本进入时，同时意味着他们期望得到巨大的金钱回报，4）少 eslint 规则和配置，自动帮你改代码或能解实际错误的规则除外，5）react 要不振作起来要不就 gg 吧，作者吐槽了好多都在点上，主要是发货太慢。

https://paularmstrong.dev/blog/2023/01/20/javascript-and-frontend-things-to-see-in-2023/

MDH 前端周刊第 85 期：MDH Weekly 官网、2023 趋势、CSS Wish List、Astro

📒 Typescript 严格模式有多严格

📒 一个全新的 JavaScript 事件！

📒 DevopsCamp 第一期作业: 《cobra - 03 交互式命令（简单）》解题答案

1月29日内容汇总

January 29, 2023 · 8 min read

加菲猫

前端开发 @NETEASE

题图：擅用工具的兔子工程师。

📒 相关文章推荐

修复生产版本 Node 程序的内存泄露问题 — Kent 在他的 Node 程序中遇到了各种奇怪的内存和 CPU 使用率峰值问题，于是他决定查找原因。这篇文章完整介绍了他对此的探寻过程，最戏剧性的是根本原因完全出乎他的意料。

https://kentcdodds.com/blog/fixing-a-memory-leak-in-a-production-node-js-app

在 Go 应用中嵌入 React UI — Flipt 通过一个 Go 构建的单一二进制文件为其 web 应用提供服务，并将静态资源嵌入其中。Go 在 1.16 版本中支持原生嵌入后，帮助 Flipt 走上了一条通往 React 的道路，而且不需要 Next.js 就可以实现很好的效果。

https://www.flipt.io/blog/embedding-react-in-go

在 Next.js v13 中使用异步 React — React 正在原生的支持异步，现在你可以在 Next.js 中试用它，作者提供了一个快速概览。

https://swizec.com/blog/async-react-with-nextjs-13/

React Native 发布了 v0.71 — 这是一个“功能丰富”的版本，包括“默认 TypeScript 文件”，使用 Flexbox Gap 简化布局，以及受网络标准启发的可访问性、样式和事件 props。

https://reactnative.dev/blog/2023/01/12/version-071

用 React Hook Form 和 Zod 构建表单 — 这是作者承诺的一系列录屏视频中的第一个，不仅涉及到开发一个集成后端 API 的表单，还涉及到开发时常遇到的一些问题。该视频的时长长达 95 分钟。

https://www.youtube.com/watch?v=FXWD_etMJWA

⭐️ lerna + dumi + eslint多包管理实践

⭐️ PHP转Go实践：xjson解析神器「开源工具集」

⭐️ 经过99次失败后，我总结了几点 Golang 反射的经验（附源码）

📒 前端食堂技术周刊第 68 期：Astro 2.0、Nuxt v3.1.0、Bun v0.5、TS 实现 Stage 3 Decorators 提案

Turborepo 1.7

Turborepo 1.7 专注于改善开发者体验，为任务带来更多清晰性，主要特性如下：

改进对持久化任务的支持，"persistent": true
更清晰的输出，需要明确指定 outputs
支持全局安装
只显示错误的输出模式，让日志更清晰，turbo build --output-logs=errors-only

Turborepo 1.7

Turborepo 1.7 发布视频版

加速 JavaScript 生态系统之模块解析

module resolution (模块解析)有着大量的性能损耗，本文对此进行探讨并给出以下建议：

尽可能避免调用文件系统
尽可能使用缓存来表面调用文件系统
使用 fs.stat 或者 fs.statSync 时，总是设置 throwIfNoEntry: false
尽可能限制向上遍历的行为

https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-2/

React 新文档中的最佳实践

https://sebastiancarlos.com/react-js-best-practices-from-the-new-docs-1c65570e785d

React 服务器组件深度指南

https://www.plasmic.app/blog/how-react-server-components-work

📒 一篇文章告诉你 golang 环境变量的所有基础操作

📒 CSS 原生嵌套语法来了！

📒 腾讯云开发者 2022 年度热文

手把手实践一个DAPP，通往Web3.0之路！

探秘微信业务优化：DDD从入门到实践

揭秘前端眼中的Rust！

⭐️ 【好文分享】基于Jira的运维发布平台的设计与实现

📒 DevopsCamp 第一期作业: 《cobra - 02 配置文件的读取与保存（简单）》解题答案

📒 《DevOpsCamp作业: cobra - 01 实现编译与参数绑定（简单）》解题答案

📒 TS、Vue、React、SSR、Node、Deno、Bun：回顾2022，展望2023

📒 MDH 前端周刊第 84 期：tRPC、Zod、慢 Jest、React Debounce、SSSVG

《6 Common SVG Fails (and How to Fix Them)》，出自 CSS Tricks。作者梳理了 6 种常见错误（编者注：后几种感觉不常见），包括 viewbox 错误、width 和 height 缺失、无意 fill 或 stroke 的颜色、id 缺失、clipping 和 masking 冲突、命名空间缺失，并给出了针对这些问题的解法。

https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/

《为何开发人员开始喜欢tRPC啦？》。tRPC 的优点包括：1）无需再次封装，直接使用函数调用远程服务，2）与Zod深度结合，可以直接使用Zod进行数据校验，3）使用非常简单，可以用在任何框架中，4）tRPC over HTTP协议非常简单，无论客户端还是服务端实现都非常简单。

https://linux-china.davao.page/blog/2023-01-14-why-trpc/

《Zod: The Next Biggest thing after Typescript》。看完这篇文章后，你可能不想再使用任何其他的验证库了！

https://dev.to/jareechang/zod-the-next-biggest-thing-after-typescript-4phh

《Speeding up the JavaScript ecosystem - module resolution》，出自 marvinhagemeist。构建、测试、Lint 时有个性能大户是 module resolution，即如何找到文件，虽然规范层有规范层的解法（ESM 引用文件要带后缀），但在规范没大范围落地之前，也可以有一些解法。作者总结了几点，1）尽量避免对文件系统的调用，2）尽可能多的缓存以避免调用文件系统，3）当你使用 fs.stat 或 fs.statSync 时，总是设置 throwIfNoEntry: false，找不到文件时不抛错而是给 undefined，4）尽可能地限制向上的遍历行为。看完这篇，我给 umi 提了个 pr，调整了 webpack 配置里 extensions 的顺序。

https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-2/

https://github.com/umijs/umi/pull/10326

《How to debounce and throttle in React without losing your mind》，作者是 NADIA MAKAREVICH，必读作者系列。关于如何在 React 中做 debounce 和 throttle 而不失去理智。作者先介绍了 debouce 和 throttle 的区别，以及各自的场景是什么，比如 throttle 的场景是拥有自动保存功能的编辑器，及时保存用户输入，以减少因意外情况可能导致的数据丢失。然后介绍了在 React 中使用 debouce 有多困难，你会面临 re-render、陈旧的 state、陈旧的闭包等问题，最终解法是 useRef + useEffect + 保存函数到 ref.current，因为 ref 是 mutable 的，不会有闭包数据陈旧问题。

https://www.developerway.com/posts/debouncing-in-react

MDH 前端周刊第 84 期：tRPC、Zod、慢 Jest、React Debounce、SSSVG

📒 一期每日一GO群分享-flag、viper、协程池、异常处理

1月22日内容汇总

January 22, 2023 · 7 min read

加菲猫

前端开发 @NETEASE

封面图：卷饼兔。

⭐️ 装了啥 2023

编辑器主 WebStorm 开发项目，辅 VSCode 临时编辑项目，再辅 CotEditor 临时打开文件（注：如果是 Rust 项目，会用 VSCode）
WebStorm 插件只装了两个，Github Copilot、Inspection Lens，前者大幅提升编码效率，后者大幅提升编码体验
编程字体用 Monolisa、Dank Mono 和 Operator Mono，一个用久了看腻了切另一个
Terminal 工具是 iTerm2 + zsh + oh-my-zsh 的组合，zsh 额外装了 zsh-autosuggestions 和 fast-syntax-highlighting 插件

装了啥 2023

📒 Golang 相关文章

Golang实现一个linux命令ls命令（命令行工具构建）

10秒改struct性能直接提升15%，产品姐姐都夸我好棒

📒 相关文章推荐

关于未捕获 Promise 异常状态的问题 — 你可能会无感知地遇到 promise 的异常问题，Jake 就解决了这么一个关于 promise 报 unhandled promise rejection 错误的问题。

https://jakearchibald.com/2023/unhandled-rejections/

关于 React 'Concurrent Mode' 的所有内容都在这 — 本文对 Concurrent Mode 进行深入的、以实例为导向的探索(并发模式已经是整合到 React 18 中的一组功能，而不是一个独特的"模式")。

https://blog.codeminer42.com/everything-you-need-to-know-about-concurrent-react-with-a-little-bit-of-suspense/

使用 GitHub Copilot 编写单元测试? — 即使你觉得像 Copilot 这样的 AI 工具在编写生产代码上不太靠谱，但它可能在快速编写单元测试上有一定的作用。

https://www.strictmode.io/articles/using-github-copilot-for-testing

类型安全的 React Query —— 一切都与信任有关 — 类型定义应该是值得信赖的。如果他们不是，他们“成为一个纯粹的建议”断言这篇文章建议可以做些什么来使他们成为这样。

https://tkdodo.eu/blog/type-safe-react-query

Zustand vs Signals：对比 React 状态管理库 — 将最时髦的状态管理库之一——zustand 与 Signals 进行比较，后者是 Preact 团队最新发布的一个状态管理库。

https://medium.com/@kevinschaffter/zustand-vs-signals-e664bff2ce4a

⭐️ 掌握了这篇 Dockerfile 中的 ARG 作用域，就算 Build 镜像 CI 入门了【文末抽奖】

⭐️ 「Go语言进阶」并发编程详解 | 文末抽奖

📒 前端食堂技术周刊第 67 期：2022 State of JS、ESLint 2022、pnpm 2022、大淘宝 Web 端技术概览

📒 MDH 前端周刊第 83 期：React Query、CSS 3D、JavaScript Wrapped 2022、React 新文档

《Type-safe React Query》，Dominik 的每篇文章都值得深入阅读。React Query 的类型可以定义在哪？1）useQuery<Todos>，2）const queryFn: Promise<Todos>，3）axios.get<Todos>，4）res.data as Todos，5）不定义。不定义怎么有类型？用 zod，然后定义 schema，schema 不仅可用于校验后端数据，还会返回类型。

https://tkdodo.eu/blog/type-safe-react-query

《Data binding in React: how to work with forms in React》，johnwcomeau 的每篇文章也值得阅读，这篇比较新手向，深入解答了面试必问问题「受控和不受控」。

https://www.joshwcomeau.com/react/data-binding/

《Clever Code Considered Harmful》，johnwcomeau 这周的另一篇文章。判断代码好不好的一个标准是，一个初级开发人员，一个职业生涯刚刚起步的人，会不会在理解这段代码时遇到困难？

https://www.joshwcomeau.com/career/clever-code-considered-harmful/

《React JS Best Practices From The New Docs》，Sebastian Carlos 阅读完 React 新官网文档后总结的 160 条笔记。我帮我节省了大量时间，我读完他的笔记后记了 20 多条笔记。但如果有空，还是应该完整阅读 React 的新文档。

https://sebastiancarlos.medium.com/react-js-best-practices-from-the-new-docs-1c65570e785d

《JavaScript Wrapped 2022》，作者整理了 TypeScript、React、Angular、Vue、SSR、Node|Deno|Bun 的 2022 发展和 2023 展望，建议熟读。

https://vived.io/javascript-wrapped-2022-frontend-weekly-vol-119/

《3D in CSS》，交互式的 3D CSS 教程。主要是 4 个 CSS 属性，包括 perspective、perspectiveOrigin、translateZ 和 rotate3d。

https://garden.bradwoods.io/notes/css/3d

《Building a fast, animated image gallery with Next.js》，Vercel 把 Next.js Conf 2022 的照片搬上网，同时把这套代码开源。技术栈包括 Cloudinary、Next.js 图像组件、imagemin、Framer Motion、以及用 ai 生成 alt 文本等。

https://vercel.com/blog/building-a-fast-animated-image-gallery-with-next-js

《Our top Core Web Vitals recommendations for 2023》，本文 Google DevRel 团队认为在 2023 年提高 Core Web Vitals 性能的最有效方法的最佳实践集合。涉及的性能指标包括 LCP、TTFB、CLS、FID 和 INP，同时给出了每个指标提升的注意点和可执行操作。

https://web.dev/top-cwv-2023/

《The hardest part of web dev》，关于 timing 的知识。其中 react 中，1）渲染函数在React更新DOM之前运行，2）useInsertionEffect回调在React更新DOM后运行，但在浏览器重新计算页面布局之前，3）useLayoutEffect回调在浏览器重新计算页面布局后运行（考虑到useInsertionEffect回调注入的任何CSS），但在浏览器重新绘制之前，4）useEffect回调在浏览器完成重绘后运行。

https://alexvipond.dev/blog/the-hardest-part-of-web-dev

MDH 前端周刊第 83 期：React Query、CSS 3D、JavaScript Wrapped 2022、React 新文档

📒 自从项目上了SkyWalking，睡觉真香！

⭐️ Go 语言 Web 应用怎么使用 Nginx 部署

⭐️ 发现conc并发库一个有趣的问题

⭐️ 醒醒吧，未来不会有 Go2 了！

⭐️ Go语言中常见100问题-#27 Inefficient map initialization

⭐️ 「每周译Go」了解 Go 中的 init

⭐️ Go 设计模式｜组合，一个对数据结构算法和职场都有提升的设计模式

📒 八个 Web Components 前端框架，一定有一个你用得上

📒 Go语言爱好者周刊：第 174 期