⭐️ 每周更新优质技术文章，欢迎点赞关注！
置顶内容
· 114 min read
前端开发 @NETEASE
2月26日内容汇总
· 5 min read
前端开发 @NETEASE
题图：爱心猫
📒 PNPM 如何给第三方库打补丁
https://github.com/antfu/pnpm-patch-i
⭐️ 外观模式，一个每天都在用，却被多数人在面试中忽视的模式
📒 前端食堂技术周刊第 71 期：LightningCSS、State of React Native、Sandpack 2.0、ChatGPT 与前端、2023
📒 「读源码」为什么注册路由时没有传入上下文，在接口方法中却能取到
📒 PHP vs Go，为什么 Go 不支持命名参数调用函数
📒 MDH 前端周刊第 88 期：错误处理、CSS 嵌套、应用模块化、useWorker
React 实现了下发服务器端函数的引用，类似 RPC 。
React Native 年度报告显示 Turborepo 是最受欢迎的 monorepo 工具。
Nextjs 新增了 Api routes 的替代品 route handler 。
React Hook Form 支持跨框架使用了，建议更名为 @tanstack/hook-form，哈哈。
《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 链接。
2月19日内容汇总
· 6 min read
前端开发 @NETEASE
题图：Bigfish x 情人节。
📒 基于gpt3引擎实现CLI版本的chatgpt~（数量取胜的go语言学习法）
📒 基于qwik和iris(go)写全栈啦-短链服务（数量取胜的go语言学习法）
📒 云原生运维相关文章
📒 【第2858期】React 纪录片心得 — 重新思考最佳实践
📒 Go 也要过情人节，并发布了安全更新 Go 1.20.1 和 Go 1.19.6
Go 也要过情人节，并发布了安全更新 Go 1.20.1 和 Go 1.19.6
📒 前端食堂技术周刊第 70 期：Volar 的新开端、Lighthouse 10、良好的组件设计、React 纪录片、2022 大前端总结
⭐️ 聊聊 Ant Design V5 的主题（上）：CSSinJS 动态主题的花活
📒 ChatGPT 相关
https://twitter.com/kliu128/status/1623472922374574080/
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
📒 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。
《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 里做校验就够了。
《Custom React Hooks and When to Use Them》。关于自定义 Hooks，是什么、可复用的提取、不可复用的提取、提取数量等，最后还是要注意抽象的代价，抽象不是免费的，有时适当重复反而更好，推荐下 Dan 的 The Wet Codebase 分享。
《2022大前端总结和2023就业分析》。来自狼叔的年度大作，推荐。
《字节前端监控实践》。感觉含金量挺高的，摘录其中错误报警的部分。1）sourcemap 结果可以用 mozila 的 sourcemap 库进行反解，2）为了保密，sourcemap 不会传到公网，而是传给后端存在内部，Sentry 有类似工具（注：sourcemap 构建慢怎么办？并发多跑一次带 sourcemap 的），3）要做堆栈聚合，合并同类错误，4）通过记录 commit + git blame 可以直接分配报错信息到人。
MDH 前端周刊第 87 期：re-render、Resumable React、ESLint 性能、监控
2月12日内容汇总
· 7 min read
前端开发 @NETEASE
题图：dannyhowe @ unsplash。
⭐️ x/exp/maps, slices 纷纷被同意加入 Go 标准库
📒 【面试高频题】难度 2.5/5，综合贪心的序列 DP 题
📒 Understanding HTML Form Encoding: URL Encoded and Multipart Forms
🌟 上次给 UMI 的文档提了两个 PR 被合并，成了 UMI contributor：
📒 【面试高频题】难度 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 小的值即可。中序遍历有「迭代」和「递归」两种写法。
📒 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.」
《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
2月5日内容汇总
· 5 min read
前端开发 @NETEASE
题图：烟花兔。
📒 10 GitHub Repositories You Should Know as a JavaScript Developer
⭐️ Go 高性能 - 字符串 & 切片转换提升 10 倍+
⭐️ Taro 正式发布 3.6 版本：支持跨端路由、请求库，支持纵向拓展鸿蒙、Web 端平台插件，小程序持续集成 CI 能力升级
📒 React团队回应用Vite替换Create React App的建议
⭐️ 「好文推荐」转Go必看 《 Go 工程化 - 面向对象，存在吗》
📒 相关文章推荐
⭐️ 为什么 Go 不支持 []T 转换为 []interface
📒 TypeScript 5.0 beta 发布：新版 ES 装饰器、泛型参数的常量修饰、枚举增强等
⭐️ 如何使用jenkins搭建一个中小企业前端项目部署环境
⭐️ 这些关于 Golang timezone 时区的坑， 我已经帮你踩过了
📒 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 驱动开发。
《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 手动写。
《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/
1月29日内容汇总
· 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 就可以实现很好的效果。
在 Next.js v13 中使用异步 React — React 正在原生的支持异步，现在你可以在 Next.js 中试用它，作者提供了一个快速概览。
React Native 发布了 v0.71 — 这是一个“功能丰富”的版本，包括“默认 TypeScript 文件”，使用 Flexbox Gap 简化布局，以及受网络标准启发的可访问性、样式和事件 props。
用 React Hook Form 和 Zod 构建表单 — 这是作者承诺的一系列录屏视频中的第一个，不仅涉及到开发一个集成后端 API 的表单，还涉及到开发时常遇到的一些问题。该视频的时长长达 95 分钟。
⭐️ lerna + dumi + eslint多包管理实践
⭐️ 经过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
加速 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
📒 腾讯云开发者 2022 年度热文
📒 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协议非常简单，无论客户端还是服务端实现都非常简单。
《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/
《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 的，不会有闭包数据陈旧问题。
1月22日内容汇总
· 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 插件
📒 Golang 相关文章
Golang实现一个linux命令ls命令（命令行工具构建）
📒 相关文章推荐
关于未捕获 Promise 异常状态的问题 — 你可能会无感知地遇到 promise 的异常问题，Jake 就解决了这么一个关于 promise 报 unhandled promise rejection 错误的问题。
关于 React 'Concurrent Mode' 的所有内容都在这 — 本文对 Concurrent Mode 进行深入的、以实例为导向的探索(并发模式已经是整合到 React 18 中的一组功能，而不是一个独特的"模式")。
使用 GitHub Copilot 编写单元测试? — 即使你觉得像 Copilot 这样的 AI 工具在编写生产代码上不太靠谱，但它可能在快速编写单元测试上有一定的作用。
https://www.strictmode.io/articles/using-github-copilot-for-testing
类型安全的 React Query —— 一切都与信任有关 — 类型定义应该是值得信赖的。如果他们不是，他们“成为一个纯粹的建议”断言这篇文章建议可以做些什么来使他们成为这样。
Zustand vs Signals：对比 React 状态管理库 — 将最时髦的状态管理库之一——zustand 与 Signals 进行比较，后者是 Preact 团队最新发布的一个状态管理库。
https://medium.com/@kevinschaffter/zustand-vs-signals-e664bff2ce4a
⭐️ 掌握了这篇 Dockerfile 中的 ARG 作用域， 就算 Build 镜像 CI 入门了 【文末抽奖】
📒 前端食堂技术周刊第 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 不仅可用于校验后端数据，还会返回类型。
《Data binding in React: how to work with forms in React》，johnwcomeau 的每篇文章也值得阅读，这篇比较新手向，深入解答了面试必问问题「受控和不受控」。
《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。
《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，同时给出了每个指标提升的注意点和可执行操作。
《The hardest part of web dev》，关于 timing 的知识。其中 react 中，1）渲染函数在React更新DOM之前运行，2）useInsertionEffect回调在React更新DOM后运行，但在浏览器重新计算页面布局之前，3）useLayoutEffect回调在浏览器重新计算页面布局后运行（考虑到useInsertionEffect回调注入的任何CSS），但在浏览器重新绘制之前，4）useEffect回调在浏览器完成重绘后运行。
MDH 前端周刊第 83 期：React Query、CSS 3D、JavaScript Wrapped 2022、React 新文档
⭐️ Go语言中常见100问题-#27 Inefficient map initialization
⭐️ Go 设计模式｜组合，一个对数据结构算法和职场都有提升的设计模式
1月15日内容汇总
· 10 min read
前端开发 @NETEASE
📒 相关文章推荐
Gluon：基于网站创建桌面应用的框架 — 这是一种使用 Node 和已安装的浏览器把 Web 站点构建为桌面应用的新方案。值得注意的是，Gluon 同时支持 Chromium 和 Firefox。Deno 也可以替代 Node。已经支持 Windows 和 Linux，本周刚刚完成了对 macOS 的初步支持。
Node v19.3.0 (Current) 发布 — 这是几周前发布的版本，v19.3 是一个典型的增量更新版本，内容包含了 npm 升级到 v9.2.0，这本身是一个足够需要阅读发行说明的内容。
构建同构 JS 库的五大挑战 — 同构（isomorphic）的意思是代码可以同时在客户端和服务器上以最小调整就可以运行的代码或者库。
2023 年如何发布 npm — 这是一个指南，描述了如何在 2023 年将开源包发布到 npm 以及需要注意的事项。如果你想在 2023 年编写和发布一个包，你需要用 Typescript 编写它并将其发布为 ES 模块。
🌟 2022 年的 JavaScript 新星项目 — Michael Rambeau 第七次以 JavaScript 领域的"趋势项目"综述为我们的 2023 年度揭幕。Bun 占据了 2022 年的头把交椅，但我们会把其他的留给你去看。一些特邀作者也分享了他们对生态系统的看法。
Evan You 回顾 2022 年与展望 2023 年 — 你可能会因为 Vue.js 和 Vite 而认识 Evan，在这里他回顾了 2022 年 Vue 世界发生的事情（比如 Vue 3.x 成为新的默认版本）以及我们在 2023 年 可以期待的事情，包括神秘的 Vapor 模式。他还提醒我们，Vue 2.x 还有一年才会失效。
JS Function Composition：有什么大不了的？ — James 关于 JavaScript 基础知识的文章总是很受欢迎，去年我们得到了一篇新鲜的文章，关注一个常见的活动：函数组成。"这有什么大不了的？"他问道。
https://jrsinclair.com/articles/2022/javascript-function-composition-whats-the-big-deal/
开发人员面临的十个常见的 JavaScript 问题 — 这可是一篇好文章。如果你已经用 JavaScript 工作了很多年，这些都是你（可能）知道要避免的坑，但是这里有足够的东西可以让你反复思考。
https://www.toptal.com/javascript/10-most-common-javascript-mistakes
Storybook v7.0 进入 Beta 阶段 — 这是近两年来这个流行的前端 UI 开发工具的第一个大版本更新（这里会有 Breaking Change）。有很多新功能，包括性能改进、交互测试等等。在此查看 完整的更改日志。您现在可以通过 迁移指南 尝试 Beta 版。
在 React Native 中对 TypeScript 进行头等支持 — 随着新发布的 v0.71，你会得到一个新的“默认是 TypeScript (TS)”的应用程序模板 —— TS 声明随基本包一起发布，文档现在也是 TypeScript 优先的（当然，Flow 或常规 JavaScript 仍然是可以使用的）。
在 Reddit 上，有一个关于 为什么人们喜欢使用 Next.js 的讨论。
https://www.reddit.com/r/reactjs/comments/zprham/why_do_people_like_using_nextjs/
⭐️ Next.js 刚刚在 GitHub 中 超过了 Create React App 的 Star 数，如果你喜欢这种受欢迎程度的测量方式。
3 个导致 App 崩溃的 React 错误 — 一位名为 Jack Herrington 的 React YouTuber 讲解了三个编写 React 时会犯的错误（以及如何解决它们）。
在 TypeScript 中像专家一样处理错误 — “学习我用来处理错误和编写更简洁代码的设计模式。”
📒 记落地vite到项目中的遇到一个bug, 最终被vite官方merge pr
📒 Google 出品的 Rust 教程
https://github.com/google/comprehensive-rust
📒 UMI 微生成器调研
https://umijs.org/docs/guides/generator
https://github.com/umijs/umi/blob/master/packages/preset-umi/src/commands/generators/component.ts
📒 【面试高频题】难度 3.5/5，综合最短路的 DP 问题
⭐️ Go 1.19.5、1.18.10 更新涉及 compiler, linker, net/http, sync/atomic
📒 面试问 Dockerfile 的优化， 千万不要只会说减少层数
📒 Go 服务网络不通？net/http自带的这个工具帮你快速定位
📒 前端食堂技术周刊第 66 期：2022 JS Rising Stars、Lightning CSS、年度最受欢迎文章
📒 MDH 前端周刊第 82 期：Lightning CSS、Tailwindcss、HTTPie AI、chalk-next 投毒
《Zustand vs. Signals》，作者从 DX、性能和 Devtool 三个方面了对比这两个「小众」的状态管理库，简单说就是，1）Zustand 生态和周边更好，而 Signals 性能更好和更自动，2）作者下一个大型项目的选择还是 Zustand，因为对 Signals 的实践以及用的 React 内部 API 不太方向。
https://medium.com/@kevinschaffter/zustand-vs-signals-e664bff2ce4a
Evan You 写了一篇 《2022 Year In Review》，介绍 2022 总结和 2023 规划。2022 主要是默认 Vue 3、Volar 1、Vue Npm 下载量 x2、回传 Vue 3 功能的 Vue 2.7；2023 则是细粒度 Mirror 版本、类 Solid 的 Vapor Mode 编译模式等。
《How to ship》 包含了 4 个关于产品如何准时发布的 Tips，1）明确 MAVP（最小实际可行产品）的边界，注意不是偏 DEMO 类的 MVP，2）在前者的基础上削减范围，3）搭配可灵活调整的 Deadline，4）别让自己成为团队卡点。
《React ref Callback Use–Cases》，你可能不知道 ref 除了是 object 以外，还可以是 function，即 ref callback。ref callback 有一些应用场景，比如 mount 时（新增一个 list item 时）做滚动或聚焦、计算 DOM 尺寸或滚动位置、传递 DOM 给多个消费者等。
《A React Developer’s First Take on Solid》，一个 React 开发者对 Solid 的第一印象。1）Solid 的优点是小和快，2）同时也有一些由于引入 Proxy 以及 Solid 不同的组件渲染机制后的缺点，比如 prop 不能在函数参数里析构等，3）SolidStart 是一个测试软件，有大量粗糙的边界场景，4）会在真实项目中用吗？不会！
https://jakelazaroff.com/words/a-react-developers-first-take-on-solid/
《Getting started with SolidStart》，SolidStart 入门文章，手把手教你写一个旅行 App。注：SolidStart 是基于 Solid 的元框架。
https://blog.logrocket.com/getting-started-solidstart-solid-js-framework/
《JavaScript Rising Stars 2022》，一年一期，这是第 7 期，可以了解 2022 JavaScript 社区的变化，但是以 Github Star 为衡量标准，并不能完全代表其流行度。
MDH 前端周刊第 82 期：Lightning CSS、Tailwindcss、HTTPie AI、chalk-next 投毒
⭐️ Go1.20 新特性：context支持自定义取消原因
⭐️ Go学设计模式--装饰器和职责链，哪个模式实现中间件更科学
📒 【第2832期】V8 执行 JavaScript 的过程
⭐️ Golang 库: 为什么 Golang slog 库不支持 Fatal
1月8日内容汇总
· 2 min read
前端开发 @NETEASE
📒 Golang 内存管理
https://golang.design/under-the-hood/zh-cn/part2runtime/ch07alloc/basic/
https://zhuanlan.zhihu.com/p/27807169
https://medium.com/a-journey-with-go/go-memory-management-and-allocation-a7396d430f44
📒 【中级/高级前端】为什么我建议你一定要读一读 Tapable 源码
📒 二十张图片彻底讲明白Webpack设计理念，以看懂为目的
⭐️ Go语言中常见100问题-#26 slices and memory leaks
📒 El-Table 源码解析(二)——探究多级表头实现原理
📒 【第2826期】2022 年回顾：Web 性能有哪些新变化
⭐️ Golang知识点(defer): 面试经常变量在 defer 中的值， 其实在问变量的作用域
1月1日内容汇总
· 11 min read
前端开发 @NETEASE
📒 相关文章推荐
一个关于 useEffect 的可视化指南 — 奇怪的是，最受欢迎的文章出现在 2022 年的第一期中。作者创建了一系列 React 渲染的可视化指南文章（比如关于 useMemo 和 props 的文章），在这篇文章中他把注意力转向了 useEffect。如果你想了解更多，还有一个关于 头等函数如何工作的可视化演示
我们能承认 React Hooks 是个坏主意吗？ — 第二受欢迎的项目是一个“快速链接”，但这个话题有足够的争议，让很多人谈论！Amy 认为“React Hooks 是个坏主意”。不管你喜不喜欢，你都会有自己的看法
https://medium.com/codex/can-we-all-just-admit-react-hooks-were-a-bad-idea-c48120c5188d
2022 React 库 — React 生态系统已经变得如此之大，问题更多的是选择太多，而不是没有需要的东西。如果您正在为一个新项目选择库，那么这个列表（Robin 多年来一直在更新）仍然很有用。希望我们能看到 2023 年的版本
回顾 2022 的 React 趋势 — 在今年年初，作者看了看他认为 2022 年重要的事情。他在 Remix、服务端渲染、并发渲染和行为测试方面做得很好，这些都是今年讨论最多的话题
https://www.chakshunyu.com/blog/what-you-should-definitely-look-out-for-in-react-in-2022/
Awesome React Components：一个精心整理的组件清单
React Render Tracker：发现有关意外重渲染的性能问题 — 这个工具可以显示组件树状态随时间变化的差异，这样您就可以更好地研究发生了什么
Plasmo：“它就像浏览器扩展的 Next.js” — 一个面向 React 和 TypeScript 的框架，用于构建您自己的浏览器扩展
<ClickToComponent />：快速跳转到组件源代码
要避免的 10 个 React 反模式 — 一个精心呈现的 8 分钟视频，快速介绍了各种替代的更优方法（或至少值得斟酌）
📒 Golang 相关文章
new：为变量分配存储空间，返回指针类型，一般不常用make：为复合数据类型（slice、map、chan）分配存储空间
在 Go 语言中，原生类型都有默认值，即类型的零值
- 布尔型的零值：
false - 整型的零值：
0 - 字符串类型的零值：
"" - 指针、函数、接口、Slice、Map、Channel 的零值：
nil
需要注意的是，Go 语言类型的零值初始化是递归完成的，即 数组、结构体 的每个元素都进行零值初始化。
在 Go 语言中，推荐定义零值可用的结构体，不仅对程序的安全性和正确性非常重要，它还可以无需预先显式初始化即可直接使用，使 Go 程序代码更优雅。
总结一下，短变量声明在同一作用域内重复使用，只是重新赋值，不会重新创建变量（即指针还是同一个），但是如果在不同作用域（例如 if 语句块），就会创建一个新的变量（内存地址与之前不同）。
Go 语言怎么解决编译器错误“err is shadowed during return”
Go 语言错误处理为什么更推荐使用 pkg/errors 三方库
总结一下：
unsafe.Pointer主要用来实现 指针类型转换，任意指针类型*T都可以转换为unsafe.Pointer，unsafe.Pointer可以转换为任何类型的指针值*Tuintptr主要用来实现 指针运算，实际是数值类型，可以用于存储内存地址。将unsafe.Pointer转换为uintptr，然后使用uintptr值进行算术运算，最后将运算结果uintptr值再转换为unsafe.Pointer
显式类型转换：
// 整型变量省略类型，编译器根据字面量推导默认是 int
var a = 100
a := 100
// 如果需要声明指定类型的整型变量，也可用显式类型转换，例如：
var a = int8(100)
b := int8(60)
变量声明块：
var (
a int = 100
b int = 200
)
var (
c = 300
d = 3.14
f = true
)
var (
e, f, g int = 10, 20, 30
h, i, j string = "a", "b", "c"
)
📒 天呐！我用 go 从零开始写了一个 k8s 应用管理工具（附完整代码和开发过程）
📒 在 Docker build 环境持久化 node_modules 目录
想在 docker build 环境中持久化 node_modules 需要使用到 BuildKit 的 mount 功能，该功能有几个前置条件：
- docker 版本必须高于 18.09
BuildKit需要手工启用，可在 docker build 命令前添加环境变量DOCKER_BUILDKIT=1启用- 如果前两个条件不满足，则需要具备 Jenkins 和构建机的读写权限，以调整构建环境参数
- 修改 Dockerfile，使用
RUN --mount=type=cache运行npm install和npm run build指令（--mount=type=cache）
开启 BuildKit 还有其他特性，比如输出日志更友好，基本每一步都会输出耗时，就这一条，值了！
实际操作分为 2 步：
修改 Jenkins 配置，在 docker build 命令前加上环境变量。修改后镜像构建命令长这样：
$ DOCKER_BUILDKIT=1 docker build .
修改 Dockerfile，将 RUN npm install 和 RUN npm run build 指令前面加上 RUN --mount=type=cache npm xxx：
FROM node:alpine as builder
WORKDIR /app
COPY package.json /app/
RUN --mount=type=cache,target=/app/node_modules,id=my_app_npm_module,sharing=locked \
--mount=type=cache,target=/root/.npm,id=npm_cache \
npm i --registry=https://registry.npmmirror.com/
COPY src /app/src
RUN --mount=type=cache,target=/app/node_modules,id=my_app_npm_module,sharing=locked \
npm run build
参考：
Docker 从入门到实践 - 使用 BuildKit 构建镜像
https://docs.docker.com/build/buildkit/
⭐️ 【第2823期】打包JavaScript库的现代化指南
⭐️ 通过分析gin、beego源码，读懂web框架对http请求处理流程的本质
📒 这两个特性将在 Go1.20 中被弃用，受影响最大的居然是国内的面试官
📒 Go语言中常见100问题-#25 Unexpected side effects using slice append