📒 相关文章推荐

Dr. Axel 提出两个提案：Iterator Helpers 和 Set Methods — 本篇文章所讲的内容值得你去研究! Dr. Axel 提出了两个具有前瞻性的 ECMAScript 提案，并在本文中介绍了它们，以及解释了为什么它们会对 JavaScript 开发者有用的原因。第一个提案是关于 iterator helpers （用于处理可迭代数据的新的实用方法），第二个提案是关于 Set methods，它扩展了 ES6 的 Set 对象

https://2ality.com/2022/12/iterator-helpers.html

构建同构 JS 库的五个挑战 — 在 JS 中，同构的意思就是在服务端和浏览器端通过最少的适配使用相同的代码

https://doordash.engineering/2022/12/06/five-challenges-to-building-an-isomorphic-javascript-library/

Next, Nest, Nuxt… Nust? — “这篇博客文章是为在寻找新的 JavaScript 后端框架的人准备的。”如果这些框架的名字你分不清，那么这篇文章就是为你准备的。Marius 解释了 Next 和 Gatsby 等系统做了什么，并触及了一些不同之处

https://www.twilio.com/blog/comparing-nextjs-nestjs-nuxt-gatsby

优化 INP 指标，提升用户体验 — 文章仔细介绍了INP指标，如何计算以及如何优化。INP 指标 -— 从用户交互到页面渲染下一帧的时间差，越短越好

https://web.dev/optimize-inp/

我们是如何为 Monorepo 项目配置 pnpm 和 Turborepo 的

https://nhost.io/blog/how-we-configured-pnpm-and-turborepo-for-our-monorepo

Node 之道：关于设计、架构与最佳实践 — “全图鸟瞰” 式的总结是非常受欢迎的。我们都在为架构设计探索新的设计思路、处理之道。作者在文中总结了在构建高质量 Node 应用程序时，所获得的所有来之不易的最佳实践

https://alexkondov.com/tao-of-node/

新选型流行的 Node 开发模式与工具

https://practica.dev/blog/popular-nodejs-pattern-and-tools-to-reconsider/

制作现代 npm 包的最佳实践 — 手把手引导如何基于最新的最佳实践创造自己的 npm 包。如果你已经掌握了，也值得再次访问，这是一个很好的、常看常新的资源

https://snyk.io/blog/best-practices-create-modern-npm-package/

SWR v2.0: 用于数据获取的 React Hooks — SWR(Stale-While-Revalidate) 的第二个主要版本包括新的 Mutation API、改进的乐观更新 UI 功能、新的开发人员工具以及改进的对并发渲染的支持

https://swr.vercel.app/blog/swr-v2

避免这些常见的 useState 陷阱 — “你首先需要了解 useState 的潜在问题，以便于避免它们，” 所以 Johannes 带我们用一个案例来深入分析和了解

https://profy.dev/article/react-usestate-pitfalls

Josh W Comeau 更新了他的热门文章 - Why React Re-Renders

https://www.joshwcomeau.com/react/why-react-re-renders/

用 Three.js 和 react-three-fiber 创建一个 3D 的圣诞体验

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

📒 Learning Go by examples: part 7 - Create a cross-platform GUI/Desktop app in Go

📒 解决 Antd 样式预设影响全局样式问题

注意 Antd 打包默认会带一套 global.less 样式预设，在某些老工程用的时候，样式预设可能会影响全局样式。由于 Antd 的组件样式都是建立在这个格式化后的样式上的，不引入这个文件则会导致组件内部样式出问题。解决方案是 收敛 global.less，并保证外部的全局样式无法轻易覆盖 antd 的样式。

首先需要限定 global.less，手动套一层作用域：

*[class*='ant-'] {
  @import 'global.less';
}

antd 相关的组件都至少会有一个以 ant- 开头的 class，我们只要利用好这个特点及 CSS 属性选择器即可达到目的

这里存在一个问题，如何将 Antd 的 global.less 文件替换为自己的模块，有两种解决方案：

• 用 patch-package 打补丁，但是如果第三方库体积过大会 OOM
• 另一种思路是用 NormalModuleReplacementPlugin 在构建阶段去替换模块

下一步是提升组件样式的权重，此举还能间接提升所有 antd 的样式的权重，避免外部的全局样式对 antd 造成侵入。

既然是改样式，那就用 CSS 界的 babel —— PostCSS，写个 PostCSS 插件，将所有 .ant 开头的类选择器都同样升高即可。利用的是 postcss-selector-parser 这个 PostCSS 官方提供的解析选择器的库，过滤出「第一个以 ant- 开头的类选择器」，在其前面添加一个属性选择器 [class*='ant-']，如果这个选择器排在当前 rule 的第一个或者前面是一个 combinator，则再加一个通配符 *。

如何优雅地彻底解决 antd 全局样式问题

📒 对于“前端状态”相关问题，如何思考比较全面

📒 二十张图片彻底讲明白Webpack设计理念，以看懂为目的

📒 【第2820期】去哪儿网用户体验之端上优化实践

📒 有趣的 Go HttpClient 超时机制

📒 JavaScript 中文周刊 #68 - 如何优化 INP 指标，提升用户体验

📒 原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑

📒 【综合笔试题】难度 4/5，有一定代码量的图论搜索题

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

⭐️ 看了这篇你会发现，你是懂Go内存分配的

📒 你构建的代码为什么这么大

📒 Go语言中常见100问题-#24 Not making slice copies correctly

📒 理解 Go generate

https://go.dev/blog/generate

https://blog.carlmjohnson.net/post/2016-11-27-how-to-use-go-generate/

📒 专注性能的多端研发框架 - ice.js 3 正式发布！

📒 【综合笔试题】难度 1.5/5，常规二叉树爆搜题

📒 低代码没有做到的事情，ChatGPT做到了

⭐️ Vue3生命周期Hooks的原理及其与调度器(Scheduler)的关系

📒 开始做请求方案的调研，这是 Umi/Bigfish 今年最佳实践的最后一个拼图。第一个深入看的是 React Query，翻了 Practical React Query | TkDodo's blog 系列文章后做了两篇笔记。然后对 React Query 路转粉，学习到不少关于请求的细节处理思路，推荐大家都好好读一读

https://tkdodo.eu/blog/practical-react-query

📒 DebugBear 更新了一篇《2022 In Review: What’s New In Web Performance?》 总结 2022 年 Web 性能领域的变化，包括提升资源优先级的 Priority Hints、Chrome 不做 OSCP 证书校验后的性能提升、用于衡量交互后响应速度的 INP 指标、Google 将 Core Web Vitals 纳入排名因素、Chrome 浏览器支持前进后退缓存、HTTP/3 标准化、Chrome DevTool 和 performance API 会提示哪些资源会 block、用于提前提供资源列表的 103 响应、Chrome 108 开始支持全页面预渲染、Safari 支持 AVIF、Safari 原生支持图片懒加载

https://www.debugbear.com/blog/2022-in-web-performance

📒 StackDiary 更新了《The Most Popular Node.js Frameworks in 2022》和《The Most Popular CSS-in-JS Libraries in 2022》，分别由 Next.js 和 Styled-Components 拔得头筹，Styled-Components 已连续 4 年第一

https://stackdiary.com/node-js-frameworks/

https://stackdiary.com/css-in-js-libraries/

📒 发现一本免费的算法书《Hello 算法》，没细看，感兴趣可关注

https://www.hello-algo.com/

📒 React 的 useEvent RFC 里，useEvent 更名为 useEffectEvent，Event function 更名为 Effect Event

https://github.com/reactjs/reactjs.org/pull/5373

📒 看到 Codux 发布，来自 Wix 联合创始人的作品。这是一个 React 组件可视化编辑器，类似 Storybook，特点是和代码之间双向同步

https://dev.to/codux/introducing-codux-15j5

📒 React Router 发布 6.5，支持 Optional Route Segments。在任何 path 段末尾添加一个 ? 会使整个路径段成为可选，对静态段和动态参数都有效

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

📒 Tauri Mobile 发布 Alpha，支持 iOS 和 Andriod，需要用 2.0.0-alpha.0 版本的依赖

https://tauri.app/blog/2022/12/09/tauri-mobile-alpha/

📒 MDH 前端周刊第 80 期：SvelteKit 1、Tauri Mobile、RR 6.5、useEffectEvent

📒 🌼 细数那些惊艳一时的 CSS 属性

📒 关于无感刷新Token，我是这样子做的

📒 JavaScript 中的依赖注入

📒 我的Vue.js生态开源之旅

📒 为什么用公钥加密却不能用公钥解密

⭐️ 「Go工具箱」一文读懂主流web框架中路由的实现原理

⭐️ Go类型系统：有何与众不同

📒 相关文章推荐

何时使用 gRPC 与 GraphQL - 本篇文章比较了两个流行的 API 协议，以了解每个协议在哪些方面最有效

https://stackoverflow.blog/2022/11/28/when-to-use-grpc-vs-graphql/

关于使用 Rust 优化 JavaScript 的讨论 — 在最近的 Next.js 会议上与 Vercel 的 Lee Robinson 交谈

https://stackoverflow.blog/2022/12/09/ready-to-optimize-your-javascript-with-rust/

用于安全发布和安全消费的新 npm 功能 — GitHub 正在继续努力使 npm 生态系统更加安全。这篇文章介绍了两个新东西：细粒度访问令牌 用于帮助包所有者控制对发布工作流程的访问，以及一个新的 代码浏览器，可以直接查看来自官方 npm 站点的包的内容

https://github.blog/2022-12-06-new-npm-features-for-secure-publishing-and-safe-consumption/

在 2023 年使用 TypeScript 设置 Node.js — 这是一本方便、制作精良的入门读物，可以帮助你在短短四分钟内掌握使用 TypeScript 和 Node 的基本知识。

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

40+ Node.js 集成测试最佳实践 — 组件/集成测试正在成为越来越受欢迎的后端测试技术。这个仓库深入研究了各种快速模式和实践，以创建良好的组件测试。同时，还有一个演示应用程序和使用 Jest、Mocha、Express、Fastify 和 Nest.js 的示例

https://github.com/testjavascript/nodejs-integration-tests-best-practices

“停止编写虚假的 React 代码” — Jack 不喜欢在 React 应用中使用普通的 JavaScript，因为惯用的 React 风格的方法会让人感觉更自然。他分享了一些避免自己陷入同样问题的规则

https://www.youtube.com/watch?v=s-lumOeD2fk

Storybook 团队已经分享了对包括 Next.js、SvelteKit 和 Remix 在内的框架的 未来支持的更新。其中大部分将于 2023 年到来

https://storybook.js.org/blog/framework-api/

📒 Redis分布式锁的10个坑

📒 一文彻底理解Go语言栈内存/堆内存

📒 Rollup 与 Webpack 的 Tree-shaking

📒 Rollup源码：模块打包与Tree-Shaking

📒 Vite 特性和部分源码解析

📒 【第2814期】如何更新 NPM 依赖

📒 Webpack深度进阶：两张图彻底讲明白热更新原理！

📒 二十张图片彻底讲明白Webpack设计理念，以看懂为目的

📒 谈谈复杂应用的状态管理（下）：基于 Zustand 的渐进式状态管理实践

📒 谈谈复杂应用的状态管理（上）：为什么是 Zustand

📒 React Native工程Monorepo改造实践

📒 【第2813期】网易严选APP端上H5容器化建设

📒 Go 1.20 新特性之 time.Compare

📒 【综合笔试题】难度 3.5/5，括号相关剪枝搜索题

📒 Umi 中如何根据服务端响应数据动态更新路由

📒 深度解析 React 性能优化 API

📒 Go1.20 将会修改全局变量的初始化顺序。梅度二开，继续打破 Go1 兼容性承诺！

⭐️ 两种 Option 编程模式的实现，Uber推荐这一种

📒 哔哩哔哩 Web 首页重构——回首2021

📒 前端食堂技术周刊第 63 期：Vite 4.0、State of CSS 2022、Rome v11、Web 性能日历、VueConf 2022 PPT

📒 【综合笔试题】难度 3/5，多解法热门搜索题

📒 ChatGPT 以及相关开源项目体验

📒 Webpack 构建流程

玩转webpack（一）上篇：webpack的基本架构和构建流程

玩转webpack（一）下篇：webpack的基本架构和构建流程

📒 MDH 前端周刊第 79 期：ChatGPT、Vite 4、SWR 2、Intl.Segmenter

📒 Google Go 编程规范

⭐️ Go版本大于1.13，程序里这样做错误处理才地道

📒 【第2809期】大型会场活动线上保障方案

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

📒 相关文章推荐

Storybook 发布了 一个新的 API。本次更新旨在使对 Vite、Next.js、Svelte、Remix 和 Nuxt 等的支持在 2023 年更容易发布。"对任何框架的零配置支持"。

https://storybook.js.org/blog/framework-api/

入门 Zustand — 本文给出了几个使用 Zustand 的技巧。Zustand 是一个相对最小的状态管理库，拥有很多热情的用户

https://tkdodo.eu/blog/working-with-zustand

Shopify 衡量 React Native 渲染时间的解决方案 — 阅读本文可以了解更多关于 Shopify 的开源库 react-native-performance 是如何工作的，用户如何使用该库，以及为什么测量性能如此重要

https://shopify.engineering/measuring-react-native-rendering-times

给 React 开发者的一篇 CSS 变量教程 — 这是一篇新推出的文章，对如何在项目中使用 CSS 变量（自定义属性）进行了深入的研究

https://www.joshwcomeau.com/css/css-variables-for-react-devs/

📒 【VueConf 2022】尤雨溪：Vue的进化历程

📒 Nodejs 的 stream 操作

import { Readable } from "node:stream";
import fs from "node:fs";

const readable = new Readable();
readable.push("测试内容");
readable.push(null); // no more data

// 将可读流复制到标准输出
readable.pipe(process.stdout);

// 将可读流复制到文件
const writable = fs.createWriteStream("/xxx");
readable.pipe(writable);

Node.js 流（stream）：你需要知道的一切

📒 Vite 4.0 正式发布！

📒 Go1.20 将禁止匿名接口循环导入！这是一次打破 Go1 兼容性承诺的真实案例

📒 【第2806期】从Lint工具窥探前端的clean-code

📒 Go1.20 继续优化 errors 库

📒 《MiniReact》带你循环渐进了解React原理

📒 从0.5到1用golang上线一个web项目

📒 从0到0.5用golang写一个web项目

📒 我们是如何追逐元宇宙、XR等“概念股”浪潮的

⭐️ [译]Uber 的 Go语言开发规范

📒 【第2805期】React 数据获取与性能优化

📒 就在刚刚 Go 1.20 rc 1 发布啦!

📒 CSS 小技巧

background 有哪些属性：

• background-color
• background-image
• background-position
• background-size
• background-repeat

常见用法：

background-image: url(xxx);

/** 背景图片填充，适配短边，两个属性通常一起用 */
background-size: contain;
background-repeat: no-repeat;

/** 背景图片填充，适配长边 */
background-size: contain;

/** 自定义背景图片大小，同时自定义布局 */
background-size: 58px 48px;
background-position: top 0 left 6px;

transition 动画可以配合 will-change 属性一起用：

background: transparent;
will-change: background;
transition: background 0.3s ease;

📒 React Streaming SSR 原理解析

⭐️ Nest.js进阶系列四：Node.js中使用Redis原来这么简单！

⭐️ Redis学习-入门篇

📒 【面试高频题】难度 2/5，回溯算法经典运用

📒 【第2804期】Islands 架构原理和实践

📒 Go 1.19.4 和 Go 1.18.9 发布安全更新，涉及 os http 以及 http2 header 缓存等问题

⭐️ 源码深度解析之 Spring IOC

📒 前端食堂技术周刊第 62 期：11 月登陆浏览器的新特性、VueConf 2022、第 93 次 TC39 会议、TS 挑战

📒 还在用HttpUtil？SpringBoot 3.0全新HTTP客户端工具来了，用起来够优雅！

📒 历时8个月，10w字！前端知识体系+大厂面试总结（基础知识篇）

📒 你也是业务开发？提前用这个设计模式预防产品加需求吧

📒 美团二面：TCP 四次挥手，可以变成三次吗

📒 Go1.20 继续小修小补 errors 库

📒 MDH 前端周刊第 78 期：技术文档框架、CSS Architecture、Tailwind 抽象泄漏、调试战术

原文链接：

https://www.yuque.com/chencheng/mdh-weekly/hdwfxidpn4u2bboo

MDH 前端周刊第 78 期：技术文档框架、CSS Architecture、Tailwind 抽象泄漏、调试战术

📒 【面试高频题】难度 3/5，状态压缩 DP 及其优化

📒 面试官：net/http库知道吗？能说说优缺点吗

📒 Go语言中常见100问题-#23 Not properly checking if a slice is empty

📒 【第2802期】Islands Architecture（孤岛架构）在携程新版首页的实践

📒 Go 语言代码风格规范-指南篇

📒 Redis 7.0 源码调试环境搭建与源码导读技巧

📒 相关文章推荐

Ant Design v5.0: 企业级设计语言 React UI 组件库 — Ant Design 5.0 版本提供了更多的组件，简约的设计以及更强的动态主题和定制主题。这里有面向老用户的升级指南：从 v4 到 v5 – 官方首页。

https://github.com/ant-design/ant-design/issues/38671

如何优化 Vue.js 应用程序 — 涵盖了构建 Vue 应用程序时要牢记的一些基本思想。

https://www.smashingmagazine.com/2022/11/optimizing-vue-app/

以正确的方式编写和组织 Node API 测试

https://larswaechter.dev/blog/nodejs-api-testing/

使用 TypeScript 生成原生的 ESM

https://2ality.com/2021/06/typescript-esm-nodejs.html

需要避免的 Node.js 架构陷阱

https://blog.appsignal.com/2022/11/23/nodejs-architecture-pitfalls-to-avoid.html

Hyperstack：一个受 Rails 启发的新的 Node.js Web 框架

https://hyperstackjs.io/

将 React 交互时间缩短 4 倍

https://www.causal.app/blog/react-perf

在 Deno 中使用框架构建应用程序.. 比如 Reac

https://deno.com/blog/frameworks-with-npm

在 React 应用中使用几种数据结构的真实案例

https://profy.dev/article/javascript-data-structures

Clapy：一款 Figma 插件，可基于 Figma 设计产出 React 组件

https://clapy.co/

📒 GoLand 迎来五周年，同时发布 2022.3：有彩蛋

📒 了解微前端，深入前端架构的前世今生

📒 CSS 方案 2022

⭐️ 公司新来一个同事，把优惠券系统设计的炉火纯青！

⭐️ 傻瓜方式分析前端应用的体积

📒 Go语言中常见100问题-#22 Being confused about nil vs. empty slices

📒 18.6K Star！这款 JSON 数据可视化工具太优雅了！

📒 Go 服务自动收集线上问题现场

📒 TypeScript从平凡到不凡（基础篇）

⭐️ Webpack配置全解析（优化篇）

📒 用 Wireshark 让你看见 TCP 到底是什么样！

📒 大象在云端起舞：后 Hadoop 时代的字节跳动云原生计算平台——云原生计算团队采访

📒 【面试高频题】难度 3/5，设计跳表（数据结构经典考察）

📒 动图图解 | UDP就一定比TCP快吗

⭐️ 深入理解 golang 的互斥锁

📒 说两个 Go 循环里的坑，第二个在JS里也有

📒 React Server Component: 混合式渲染

📒 前端工程化基建探索（5）Vite4.0.0都悄悄在“卷”出来了，是时候去探索Vite的设计和实现了

📒 前端工程化基建探索（4）从源码出发探索理解webpack核心特性

📒 前端食堂技术周刊第 61 期：State of JavaScript、Prettier 2.8、Flexbox 交互式指南

📒 彻底搞懂 React 18 并发机制的原理

📒 读完《重构》我学到了这些提升代码质量的编程技巧

📒 一款好用的 Go 调用链可视化工具

📒 用Go学设计模式- 模板模式

📒 Go Context 怎么用，原理是啥，看完这篇就清晰了

📒 Go 模糊测试fuzzing的原理分析

📒 为iframe正名，你可能并不需要微前端

📒 现代CSS样式重置最佳实践！

📒 如何解决前端领域的竞态问题

📒 【第2795期】雪球跨端架构建设之三端同构篇

📒 【第2785期】雪球跨端架构建设之跨端容器篇

📒 Go 语言代码风格规范-概述篇

📒 DNS中有哪些值得学习的优秀设计

📒 Go语言爱好者周刊：第 169 期 — 正确率 23%

📒 相关文章推荐

重构 React 代码：减少 43% 代码并且数据结构更加清晰

https://profy.dev/article/react-junior-code-review-and-refactoring-1

使用 TypeScript 编写 React 组件

https://www.robinwieruch.de/typescript-react-component/

What and Why：Next.js 13 中的 React Server Components

https://thetombomb.com/posts/react-server-components-nextjs

Twix: 使用 Tailwind CSS 实现 React 组件样式

https://github.com/Idered/twix

Deno v1.28 发布：现在有 130 万个新模块。Deno 现在正式支持以“稳定”的方式使用 npm 模块，并且不需要涉及 node_modules、package.json 或 npm install 这些出现在 Node 中的内容

https://deno.com/blog/v1.28

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

Wireit：升级 npm 脚本，使它们更智能、更高效

https://github.com/google/wireit

使用 WebAssembly 增强 Node.js

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

函数式编程到底有什么优点 — 本篇文章是由即将出版的 《Skeptic’s Guide to Functional Programming with JavaScript》的作者 James 以一种更容易理解的方式书写的函数式编程思想的文章，相信你读完本篇文章会大有收获

https://jrsinclair.com/articles/2022/whats-so-great-about-functional-programming-anyway/

用 Storyboook 和 Nightwatch 实践组件驱动开发

https://pineview.io/supercharge-your-storybook-with-nightwatch-testing/

tslog v4.0：支持 JS、TS 的日志输出库— 功能丰富，类型齐全，可以通过本机 V8 进行堆栈跟踪 API、显示代码框架等。现在支持 Node 和浏览器

https://tslog.js.org/

📒 开源低代码表单方案 Formily 的核心设计思路

📒 微前端场景下的代码共享

📒 相关文章推荐

How to Create and Publish a React Component Library

How to Build a Rust CLI Tool to Generate Typescript Types from Rust

Build Micro frontends in NextJS and ReactJS with Webpack 5 Module Federation

Building React App with Module Federation and NextJS/React

📒 Next.js 相关内容

使用 Next.js 搭建 Monorepo 组件库文档

理解 Next.js 中的 CSR、SSR、SSG、ISR 以及 Streaming

Next.js 13 新增特性：

• 启用实验性 app 目录实现约定式路由，路由每个片段必须要有一个目录承载，内部包含一个 page.tsx 作为主页面，还可以包含 layout.tsx 作为该路由的公共导航，切换路由时，不会刷新

• app 目录下的组件默认启用 Server Component（当然也可用于 SSG 渲染），与传统的 SSR 不同，优点是拥有 流式 HTML 和选择性注水

• React Suspense API 解锁了 React 18 中的两个主要 SSR 功能：

  • 在服务器上流式传输 HTML 要实现这个功能，需要从原来的方法切换 renderToString 切换到新 renderToPipeableStream 方法
  • 客户端的选择性注水作用 使用 hydrateRoot 代替 createRoot 方法

• 区分服务端组件和客户端组件

  • Next.js 12 在 useEffect、 onChange 等回调函数可以在客户端执行（一般针对浏览器和 Node API 判断）
  • 在 Next13 中 ， 在 app 目录下由于启用了 Server Component，无法使用 client-only 特性（例如 useState、useEffect 、createContext），因此判断环境非常重要。如要使用 useState 等状态管理的 hook，那么该组件只在客户端执行，需要在首行加入 'use client' 指令

• 数据请求。Next.js 13 的 app 目录不再需要 getStaticProps、getServerSideProps，而是默认启用了 Static Rendering（相当于 SSG），如果需要切换渲染模式，只需要修改 fetch 的缓存策略：

  fetch('https://...'); // 默认 'force-cache'，相当于 `getStaticProps`
  
  fetch('https://...', { next: { revalidate: 10 } }); // 请求被缓存 10s，相当于 `getStaticProps` 加上 `revalidate` 参数
  
  fetch('https://...', { cache: 'no-store' }); // 每次刷新都会重新请求，相当于 `getServerSideProps`
  

  获取数据之后可以直接用 use() 在服务端消费，渲染 UI。注意 app 目录下的 Server Component 不能用 useState（虽然可以加上 'use client' 改为客户端组件），Next.js 13 建议都在服务端调接口获取数据

• 此外在 SSG 渲染中常用的 getStaticPaths 改为了 generateStaticParams

参考：

https://beta.nextjs.org/docs/rendering/server-and-client-components#when-to-use-server-vs-client-components

https://beta.nextjs.org/docs/rendering/static-and-dynamic-rendering

https://beta.nextjs.org/docs/data-fetching/fetching

https://beta.nextjs.org/docs/upgrade-guide#dynamic-paths-getstaticpaths

一个 Next.js 13 的演示教程，里面讲了一个 use 导致的无限循环 bug

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

你好，Next.js 13

📒 React-query 相关文章

React Query 原理与设计

用react-query解决你一半的状态管理问题

📒 适合团队和个人项目的 Golang 编码规范

📒 优化 CSS 代码的12个小技巧

📒 推荐一款SQL自动检查神器，再也不用担心SQL出错了！

📒 【第2791期】可扩展 CSS 的演变

📒 接口502了，运维和研发谁的锅

📒 Element Plus 组件库相关技术揭秘：7. 组件实现的基本流程及 Icon 组件的实现

📒 突破 etcd 限制！字节自研 K8s 存储 KubeBrain

📒 有趣的 Go HttpClient 超时机制

📒 【综合笔试题】难度 3.5/5，常见序列 DP 题目及其优化思路

📒 socket是并发安全的吗

📒 PGO 是啥，咋就让 Go 更快更猛了

📒 前端食堂技术周刊第 60 期：TypeScript 4.9、Ant Design 5.0、用 vanilla-extract 编写高性能的 CSS

📒 MDH 前端周刊第 77 期：布局动画、Arrow JS、vanilla-extract、antd 5、dumi 2

📒 三种获取Go项目根目录的方式，让你做架构，选哪种

📒 【第2788期】去哪儿低代码平台跨端渲染方案及落地

📒 Gophers如何准备面试

📒 一步一图带你深入理解 Linux 物理内存管理

📒 「每周译Go」理解 Go 中包的可见性

📒 Go语言中常见100问题-#21 Inefficient slice initialization

📒 Go Time 第 256 期

https://changelog.com/gotime/256

📒 Google Go 风格指南

https://google.github.io/styleguide/go/index

📒 Go语言爱好者周刊：第 168 期 — GoLand 2022.3 RC 发布

📒 相关文章推荐

一个 Next.js 13 的演示教程，里面讲了一个 use 导致的无限循环 bug

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

如何用 JavaScript 来对 2800 万数据进行去重? — 这是 Stack Overflow 上一个很有趣的问题

https://stackoverflow.com/questions/74329830/deduping-28-million-strings-using-javascript

Sourcegraph 公司讲述了为什么他们选择从 Monaco 编辑器切换到 CodeMirror

https://about.sourcegraph.com/blog/migrating-monaco-codemirror

新的 JavaScript 时间 API 提案 --- Temporal（已进入 stage 3）

https://vladmihet.hashnode.dev/temporal-api-javascript-dates-but-better

Rome v10：由 Rust 驱动的 JS Linting 与格式化工具 — 由 Babel 的作者 创建的项目自然会引起大家的兴趣

https://rome.tools/blog/2022/11/08/rome-10/

Node 安全版本：v19.0.1、v18.12.1、v16.18.1 和 v14.21.1

https://nodejs.org/en/blog/vulnerability/november-2022-security-releases/

Hapi v21：简单、安全的 Node 应用程序框架 - 专注于现代化和全面 Node v18（和 ESM）支持。值得注意的是 Hapi 不光没有外部依赖，还提供了很多开箱即用的功能

https://github.com/hapijs/hapi

在多个云提供商上部署一个简单的 Node 应用程序

https://medium.com/eleven-sh/deploying-a-simple-node-js-app-with-https-on-cloud-providers-in-2022-heroku-render-fly-io-aws-9358294803c5

将 TypeScript 与 Node.js 结合使用

https://www.robinwieruch.de/typescript-node/

用 Wails 和 React 在 Go 中构建一个桌面应用程序 — Wails 于 Go(lang) 就像 Electron 于 Node 一样，你可以前端用 JavaScript，后端用 GO 在 Mac、Linux 和 Windows 上开发桌面应用程序

https://react.statuscode.com/link/131395/web

CRACO v7.0：覆盖 Create React App 配置 — 如果你仍然喜欢 Create React App，而不是如 Next.js 之类的更大的 React 应用构建方式，CRACO 让你继续使用 CRA，但增加了一个可理解的配置层

https://github.com/dilanx/craco

📒 当谈论协程时，我们在谈论什么

⭐️ 看一遍就理解：IO模型详解

⭐️ 🎉 dumi 2，它来了它来了它来了

⭐️ 面试必备：零拷贝详解

📒 2022年我的面试万字总结（代码篇）

📒 【第2785期】雪球跨端架构建设之跨端容器篇

⭐️ Go 1.20新特性前瞻

⭐️ 实战总结！18种接口优化方案的总结

📒 深入理解 Golang map 设计理念与实现原理

📒 为什么我抓不到baidu的数据包

📒 React这25个精选库，将助你工作更上一层楼

📒 React 中的重新渲染

📒 【常见题型总结】二分以及为何能二分（二段性的拓展）

📒 保姆级教程！2 万字 + 30 张图搞懂 MySQL 是怎么加行级锁的

📒 我修复了一个 Vite Bug，让我的项目首屏性能提高了 25%

📒 Nuxt.js 3.0 正式发布！

📒 【第2784期】从cdnjs 的漏洞来看前端的供应链攻击与防御

📒 Go1.20 中两个关于 Time 的更新，终于不用背 2006-01-02 15:04:05 了！

📒 JavaScript错误处理完整指南

⭐️ 使用反射操作channel

⭐️ 成为 Go 高手的 8 个 GitHub 开源项目

🌛 使用useReducer + useContext 代替 react-redux

📒 前端食堂技术周刊第 59 期：GitHub Universe 2022、Rome v10、Parcel v2.8.0、可扩展的 CSS 演变

⭐️ 万字图文讲透数据库缓存一致性问题

📒 【面试高频题】难度 2/5，经典区间 DP 模板题（详解如何思考区间 DP 问题）

📒 打脸了兄弟们，Go1.20 arena 来了！

📒 【第2782期】得物API一站式协作平台探索与落地

📒 如何在测试中发现goroutine泄漏

⭐️ 忘了又看，看了又忘？保姆级教学，一口气教你玩转 3 种高频设计模式！

📒 【中级/高级前端】为什么我建议你一定要读一读 Tapable 源码

📒 MDH 前端周刊第 76 期：可扩展的 CSS、TanStack Router、Solid Start Beta、Rome 10

React Router 6 提供了 deferred API，让我们可以区分页面的关键数据和可选数据。可选数据不应该影响页面渲染，比如博客文章的评论、购物车中的推荐产品、最近的搜索等。用法如下。同时可选数据加载报错不会让整体路由渲染报错。

const critical1Promise = fetch('/xxx').then(res => res.json);
const critical2Promise = fetch('/xxx').then(res => res.json);
const lazy1Promise = fetch('/xxx').then(res => res.json);
const lazy2Promise = fetch('/xxx').then(res => res.json);
export const loader = async () => {
  return defer({
    critical1: await critical1Promise,
    critical2: await critical2Promise,
    lazy1: lazy1Promise,
    lazy2: lazy2Promise,
  });
}

这和在组件里用 useEffect 有啥区别？useEffect 的方式，不能做到所有请求并行发起，相比之下会慢一些。「The earlier you initiate a fetch, the better, because the sooner it starts, the sooner it can finish.」

https://dev.to/infoxicator/react-router-6-deferred-fetch-4k68

MDH 前端周刊第 76 期：可扩展的 CSS、TanStack Router、Solid Start Beta、Rome 10

📒 Node.js 安全最佳实践

📒 2种方式！带你快速实现前端截图

⭐️ Go学设计模式-程序流程要动态切换？用这个模式写更丝滑

📒 2022 年 JavaScript 从 ES6 到 ES12 新特性汇总

📒 【第2781期】React 渲染的未来

📒 Go语言爱好者周刊：第 167 期 —— 结构化日志期待下

📒 相关文章推荐

基于 Amplify Studio 使用少量代码实现 Figma-to-React 组件

https://aws.amazon.com/blogs/mobile/new-build-responsive-figma-to-react-components-with-almost-no-code/

JavaScript 中的 “realm” 是什么

https://weizman.github.io/page-what-is-a-realm-in-js/

2022 年如何构建，测试并发布一个 TypeScript 编写的 npm 包

https://www.strictmode.io/articles/build-test-and-publish-npm-package-2022

'Next.js 打包出的产物会感谢你' — 如果你的 Next.js 应用打包出的产物比预期的更加大一些，前端工程师 Renato 的打包优化建议会使你受益。

https://renatopozzi.me/articles/your-nextjs-bundle-will-thank-you

基于 Storybook test runner 实践代码测试的覆盖率

https://storybook.js.org/blog/code-coverage-with-the-storybook-test-runner/

教你打包并发布一个 Vue.js 3.0 插件的 npm 包 — 使用 Vite 打包构建出产物，使用 vue-tsc 生成类型带来更好的开发体验。

https://vueschool.io/articles/vuejs-tutorials/how-to-package-and-distribute-a-vue-js-3-plugin-on-npm/

📒 Element Plus 组件库相关技术揭秘：6. CSS 架构模式之 BEM 在组件库中的实践

📒 【第2780期】如何用油猴提升前端开发效率

🌛 从零实现一个迷你 Webpack

📒 【第2779期】离开后端说前端加密都是空谈

📒 前缀树在前端路由系统中的应用

📒 选择 Go 还是 Rust？CloudWeGo-Volo 基于 Rust 语言的探索实践

📒 还在服务器上捞日志？快搭建一个ELK日志系统吧，真心强大！

📒 开启 GODEBUG 更直观地理解 Go 程序的调度过程

📒 Go语言中常见100问题-#20 Not understanding slice length and capacity

⭐️ Go 13 周年啦！

⭐️ 基于 MF 的组件化共享工作流

📒 快收藏！超强图解Docker常见命令与实战！

📒 Chrome DevTools中的这些骚操作，你都知道吗

📒 【第2777期】React最新提出了一个名为use的Hook

📒 20个常见的前端算法题，你全都会吗

📒 阿里面试官：如何给所有的async函数添加try/catch

📒 「历时8个月」10万字前端知识体系总结（工程化篇）🔥

📒 React 进阶实践指南 - 渲染控制

https://juejin.cn/book/6945998773818490884/section/6958058637042384900

📒 如何用 TypeScript 声明 React HOC

https://react-typescript-cheatsheet.netlify.app/docs/hoc/full_example

https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb

📒 云谦：前端框架的趋势与实践（文字稿）

📒 这30 个优秀的 Go 编码习惯，你都在用吗

⭐️ 一文搞懂Go标准库context包

📒 记一次使用time.Duration类型踩过的坑

📒 golang中time包使用教程之基础使用篇

⭐️ 字节开源WEB框架Hertz太香啦！

📒 面试必问之 JS 事件循环（Event Loop），看这一篇足够

📒 信仰崩了？Preact 开始采用 Vue3 的响应式设计

📒 【常见题型总结】序列 DP 模板题（总结「线性 DP」和「序列 DP」本质区别）

📒 点击页面元素跳转IDE对应代码，试试这几个工具！

📒 Go 十年了，终于想起要统一 log 库了！

📒 前端食堂技术周刊第 58 期：TypeScript 4.9 RC、10 月登陆浏览器的新功能、Turbopack 真的比 Vite 快 10 倍吗

📒 由 transform 被占用引发的思考🤔

📒 TypeScript 4.9 发布！重点新特性解读 ～

📒 聊一聊常见的浏览器数据存储方案

⭐️ MDH 前端周刊第 75 期：CSS-in-JS、Node 18、完美提交、ChiselStrike、Ultra

📒 Happens before 原则在 Go 内存模型中的应用举例

📒 这些最常用的 Go CLI 命令，新手 Gopher 应该掌握

📒 「每周译Go」如何在 Go 中编写包

📒 相关文章推荐

理解 useMemo and useCallback

https://www.joshwcomeau.com/react/usememo-and-usecallback/

React 错误边界指南

https://meticulous.ai/blog/react-error-boundaries-complete-guide/

何时使用 useLayoutEffect 而不是 useEffect

https://javascript.plainenglish.io/react-hooks-when-to-use-uselayouteffect-instead-of-useeffect-3271a96d881a?gi=622ccbf807f3

深度解析好文：为了让 React 更好

https://acko.net/blog/get-in-zoomer-we-re-saving-react/

创建现代 npm 包的最佳实践

https://snyk.io/blog/best-practices-create-modern-npm-package/

useSyncExternalStore：被低估的 React API

https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api

为什么每个 React 开发者都应该学习函数组合

https://medium.com/javascript-scene/why-every-react-developer-should-learn-function-composition-23f41d4db3b1

“为什么我们要放弃 CSS-in-JS” - Emotion 是一个用 JavaScript 编写 CSS 的流行库，但它的一位贡献者讲述了为什么他的团队总体上放弃了 CSS-in-JS 的想法。

https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

在 React 中使用 use - 一个新的 Hook 即将到来

https://vived.io/new-hook-is-coming-to-react-frontend-weekly-vol-109/

⭐️ 理解 Next.js 中的 CSR、SSR、SSG、ISR 以及 Streaming

⭐️ 【第2774期】基于 Module Federation 的模块化跨栈方案探索

⭐️ 组件库Monmrepo架构与开发调试环境构建

📒 你了解 Cookie 中的 SameSite 属性吗

📒 配个 json，表单就出来了？FormRender 初探

⭐️ Go每日一库之调用外部命令的几种姿势

📒 带你提前看看 Go 1.20 包括哪些重大变更和性能提升

📒 GitHub上高质量数据结构与算法项目推荐！

📒 如何使用官方的 Node.js Docker 镜像

https://www.docker.com/blog/how-to-use-the-node-docker-official-image/

📒 Node v18 现在进入 LTS 阶段（v18.12.0）

直至 2023 年 10 月，之前作为 current 版本的 v18 将作为 active LTS 存在，并拥有所有最新的功能特性。本版本的代号是 “氢”——宇宙中最丰富的元素。

https://nodejs.org/en/blog/release/v18.12.0/

📒 route-list：显示 Express/Koa/Hapi/Fastify 路由

如果你想以一种优雅的方式查看基于 Node 的 webapp 的所有路由，那么可以试试它。

https://github.com/VladimirMikulic/route-list

📒 现代 CSS 指南 -- at-rule 规则必知必会

📒 深入浅出 Vite - 推荐阅读

• 手写 Bundler: 实现代码打包、 Tree Shaking
• 手写 Bundler: 实现 JavaScript AST 解析器——词法分析、语义分析

📒 开发小技巧

npm scripts 中的 -- 可以用来转发命令行参数：

{
  "scripts": {
    "build:weapp": "taro build --type=miniprogram",
    "dev:weapp": "npm run build:weapp -- --watch"
  }
}

⭐️ 极致编译速度，一文搞定webpack5升级

📒 Element Plus 组件库核心技术揭秘：5. 从终端命令解析器说起谈谈 npm 包管理工具的运行原理

📒 一文吃透 React 和 Vue 的多节点 diff 原理

📒 看 Go 中的 struct 如何被优化，还有小插曲

📒 Go for 循环有时候真的很坑

📒 用Go学设计模式-提炼流程，减少重复开发就靠它了!

📒 vue中动态引入图片为什么要是require， 你不知道的那些事

⭐️ 聊一聊常见的构建工具关于插件机制的那些通用套路

📒 Chrome 最近带来了哪些有意思的新东西

📒 深入剖析容器技术基础

📒 前端食堂技术周刊第 57 期：Turbopack、Next.js13、Chrome107、Vite3.2、图解 TLS 1.3

📒 Go 语言终极搜索插件

📒 压缩 70% 下载流量 - 记一次店铺优化专项

📒 我们如何用 Next.js 提高 70% 的 React 加载时间

通过用 Next.js 替换 Create React App，商业计划平台 Causal 通过减少加载时间显著改善了用户体验。怎么做到的？一点 SSR 就能帮你很多。

https://www.causal.app/blog/next-js

📒 “为什么我们要放弃 CSS-in-JS”

Emotion 是一个用 JavaScript 编写 CSS 的流行库，但它的一位贡献者讲述了为什么他的团队总体上放弃了 CSS-in-JS 的想法。

https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

📒 在 React 中使用 use - 一个新的 Hook 即将到来

上周我们在一个叫做 use 的新 Hook 后面介绍了 RFC —— 这里有一个更容易理解的介绍。“这个不起眼的发明可能永远改变我们将数据输入应用程序的方式。”

https://vived.io/new-hook-is-coming-to-react-frontend-weekly-vol-109/

📒 程序员应该遵守的编程原则(不止Gopher哦)

📒 前端工程化基建探索：从内部机制和核心原理了解npm

📒 哈啰下一代跨技术栈前端组件库 Quark Design 正式开源！

📒 深入浅出JavaScript异步编程

📒 深度解密Go语言之关于 interface 的 10 个问题

📒 手撸源码系列 - cache2go

📒 《 关于我用拓展运算符把项目搞崩这件事 》

注意函数调用不能接受过长的参数：

const items = [];
const newItems=new Array(1000000)

// ❎ 以下两种情况，如果 newItems 很长容易导致爆栈问题
items.push(...newItems);
items.push.apply(items, newItems);

// ✅ 合理做法
items.concat(newItems);
items = [...items, ...newItems];

《 关于我用拓展运算符把项目搞崩这件事 》

📒 前端性能优化到底该怎么做（下）- 直捣黄龙

📒 Go语言爱好者周刊：第 165 期 —— 基于 fyne 实现一个简单计算器

📒 Next.js 13 相关文章

你好，Next.js 13

https://nextjs.org/blog/next-13

https://beta.nextjs.org/docs/data-fetching/fundamentals#

📒 Monorepo，大型前端项目管理模式实践

📒 React Hooks不优雅

📒 运用「博弈论」分析「先手必胜态」序列具有何种性质，以及如何思考「博弈论」问题

📒 Go 大佬良心发现，愿意给 map 加清除了

📒 Turbopack 很火? 那么就从前端角度看 Rust

📒 Docker夺命连环15问，你能坚持第几问

📒 当函数设计遇到切片

📒 使用Go语言批量同步微信读书笔记到Flomo

⭐️ 一文了解 NextJS 并对性能优化做出最佳实践

📒 比Webpack快700倍的Turbopack，到底快在哪

⭐️ 课代表：Turborepo 笔记

📒 Go标准库依赖的那些modules

📒 使用 Vitest 和 React Testing Library 给 Next.js 应用单元测试

📒 前端初学 ECS 架构，实现超炫的粒子碰撞动画

📒 Go HTTP服务用了优雅关闭，为什么还是报错

⭐️ 【羊了个羊】之我用vue3+ts+vite3从0到1开发了个【兔了个兔】

📒 【第2763期】接入成本最低微前端框架：京东零售micro-app

📒 聊一聊关于微前端架构的几种技术选型

📒 前端食堂技术周刊第 56 期：Solid v1.6.0、State of GraphQL、ViteConf回放、Lerna v6

📒 MDH 前端周刊第 74 期：use、htmx、Stately Studio、TypeRunner、画中画

📒 一文教你搞定所有前端鉴权与后端鉴权方案，让你不再迷惘

📒 1024，我们的节日，Gopher 该干点啥

📒 Go try 新提案靠谱吗？想简化错误处理了

📒 Go语言中常见100问题-#18 Neglecting integer overflows

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

📒 React 服务端渲染在跨端领域中的新视界

📒 学会这 20 个库，让你快速看懂 vue3 和 vite3 源码 🚀

📒 面试官：你会看 Vite 源码吗

📒 用 Go 程序打包和压缩文件，我们可以这么做

📒 Go语言中常见100问题-#17 Creating confusion with octal literals

📒 如何挑选最适合的 Node.js Docker 镜像

当你在编写 DockerFile 时会忽略 FROM node 的含义，作者分享了一些对于版本选择上的考虑。

https://snyk.io/blog/choosing-the-best-node-js-docker-image/

📒 Lerna Reborn：第六个版本更新了什么

使用 Nrwl 管理，面向 Lerna monorepo 的 JavaScript 构建系统并没有过时或弃用，它正在向前迈进一大步。v6 在默认情况下通过高效的任务调度和缓存、VS Code 扩展、Prettier 支持等获得了很大的速度。

https://blog.nrwl.io/lerna-reborn-whats-new-in-v6-10aec6e9091c?gi=ba929beec06d

📒 Node v18.11.0 发布

Node 的最新版本虽然并没有更新很多功能，但却实验性的支持了 --watch 功能。当导入的文件发生变化时，会自动重新启动运行中的进程（这个功能让人想起了 nodemon） – 这个功能最近被 详细讨论过。

https://nodejs.org/en/blog/release/v18.11.0/

📒 【综合笔试题】难度 4.5/5，扫描线的特殊运用（详尽答疑）

📒 复活了！ Lerna V6 带来了哪些新东西

⭐️ 【第2757期】软件架构的23个基本原则

⭐️ 【第2677期】如何在React中应用SOLID原则

📒 前端架构带你 封装axios，一次封装终身受益「美团后端连连点赞」

📒 如何编写 CommonJS 模块，以便它们的导出可以从 ES 模块实现按照名称导入

如果你曾经在使用 CommonJS 和 ES 模块之间纠结过，那么这篇文章或许值得一读。Axel 博士在这里解决了一个关键的交叉兼容性问题。

https://2ality.com/2022/10/commonjs-named-exports.html

📒 njt：快速导航至 npm 包资源

如果你想要快速访问 npm 包的首页、仓库、issues，甚至包成本估算，那么 njt 将会是一个不错的选择。njt 提供了一个快速跳转到与 npm 包相关的各种资源目的地的方法。你可以在终端中安装并使用，也可以通过 LaunchX 扩展程序 将 njt 添加至 VS Code 的命令面板然后使用，或者在 Google 与 Firefox 浏览器进行配置然后搜索，亦或 直接在网页上使用它。如果你对此有兴趣，可以来看看 GitHub 仓库。

https://www.npmjs.com/package/njt

📒 换一种方式对工程中的Api进行封装吧（fashion-axios）

📒 Element Plus 组件库相关技术揭秘：3.ESLint 核心原理剖析

📒 Element Plus 组件库相关技术揭秘：2. 组件库工程化实战之 Monorepo 架构搭建

📒 开源推荐

lazygit

git 命令的 terminal UI 工具，基于 Go 实现。

https://github.com/jesseduffield/lazygit

knip

又一个废代码检测工具，支持检测未使用的文件、依赖和 exports。

$ knip --reporter codeowners
--- UNUSED FILES (2)
@org/team src/chat/helpers.ts
@org/owner src/components/SideBar.tsx
--- UNUSED DEPENDENCIES (1)
@org/admin moment
--- UNLISTED DEPENDENCIES (1)
@org/owner src/components/Registration.tsx react
--- UNUSED EXPORTS (4)
@org/team src/common/src/string/index.ts: lowercaseFirstLetter
@org/owner src/components/Registration.tsx: RegistrationBox
@org/owner src/css.ts: clamp
@org/owner src/services/authentication.ts: restoreSession, PREFIX
--- UNUSED TYPES (3)
@org/owner src/components/Registration/registrationMachine.ts: RegistrationServices, RegistrationAction
@org/owner src/components/Registration.tsx: ComponentProps
@org/owner src/types/Product.ts: ProductDetail
--- DUPLICATE EXPORTS (2)
@org/owner src/components/Registration.tsx: Registration, default
@org/owner src/components/Products.tsx: ProductsList, default

https://github.com/webpro/knip

📒 手写 React 渲染器

由于有 react-reconciler，让自定义 React 渲染器变地相当简单。

import ReactReconciler from "react-reconciler";

const reconciler = ReactReconciler({
  // ... configuration options ...
  // 启用突变模式
  // Reconciler 有两种不同的渲染模式，1）突变模式，2）持久模式
  supportsMutation: true,
  
  createInstance(type, props) {
      const element = document.createElement(type);
    Object.keys(props).forEach((prop) => {
      // Filter out non-HTML attributes like:
      if (!["children", "onClick", "key"].includes(prop)) {
        // Appends each html attribute to the element
        element[prop] = props[prop];
      }
    });
    // return the HTML element
    return element;
  },
  createTextInstance: (text) => {
    return document.createTextNode(text);
  },
  getRootHostContext: () => null,
  getChildHostContext: () => null,
  shouldSetTextContent: () => null,
  prepareForCommit: () => null,
  clearContainer: () => null,
  resetAfterCommit: () => null,
  appendInitialChild: () => null,
  appendChildToContainer: () => null,
  finalizeInitialChildren: () => null,
  removeChildFromContainer: () => null,
});

const render = (element, container) => {
  const root = reconciler.createContainer(container, false, false);
    reconciler.updateContainer(element, root, null, null);
};

export { render };

然后就可以拿这个 render 方法进行渲染了。

render(<App />, document.getElementById('root'))

https://www.markcodes.dev/posts/build-react-custom-renderer-part-1

📒 最快前端模板

Jest 作者梳理了他认为最快的 2022 最快前端工具集以及与之配套的 github 仓库模板，结论是 Vite + tailwind + pnpm + eslint & prettier + TypeScript + React。我觉得这里的快有两个含义，1）速度快，2）用于快速启动项目的最小模板。

• Vite 无需多说
• Tailwind 也无需多说，但如果你有自己的 Design System，作者推荐用 emotion
• pnpm 除了快，对 monorepo 的支持也很好
• ESLint & prettier 有一些注意点，1）要分开用，别在 eslint 规则里加 prettier 规则，会慢，2）prettier 和 eslint 都有 --cache 参数，要开启，3）推荐用 @trivago/prettier-plugin-sort-imports 和 prettier-plugin-tailwindcss 对 import 和 tailwindcss 类进行排序，4）期待 rome 的 formatter 和 lint
• npm-run-all 用于并行执行多个命令
• NodeJS 脚本编写，基于 native esm，使用 ts-node + @swc/core + nodemon 的依赖组合实现，没有用基于 esbuild 方案比如 tsx，因为测下来在一些场景会莫名其妙地慢
• TypeScript 无需多说
• VSCode，作者推荐了 4 个插件

大家可能会好奇，作为 Jest 作者，测试工具他选的啥？虽然文章里没提，但从代码里可以看到，用的是 Vitest，哈哈。

https://cpojer.net/posts/fastest-frontend-tooling-in-2022

📒 MDH 前端周刊第 73 期：TypeScript 10 年、最快前端模板、whyframe、template 元素

📒 文章推荐

• 🗂 前端版本兼容问题的探索
• 🗂 对 web.dev 所有 blog 的整理与归档
• 🤯 没 2 年 React Native 开发经验，你都遇不到这些坑

📒 Storybook 7.0 中 Vite 成为内置选项

https://storybook.js.org/blog/first-class-vite-support-in-storybook/

📒 用 Sandpack 打造世界级 Playground

CodeSandbox 开源了 Sandpack，本文教你使用 Sandpack 打造出一个功能齐全的 Playground。

https://www.joshwcomeau.com/react/next-level-playground/

📒 Resumable vs. Hydration

本文介绍了 Qwik 框架可恢复性的实现原理以及与常规补水相比具有的优势。

https://qwik.builder.io/docs/concepts/resumable/

📒 TypeScript 十年，不忘初心

📒 Rollup v3.0.0

Rollup 发布 v3.0.0，带来了大量更新。其中 Breaking Change 包括最低支持 Node 14.18.0、浏览器构建拆成单独的包 @rollup/browse、Node 构建使用 node: 前缀导入内置模块、移除一些以前被废弃的功能，使用时提示警告等。还有包括 Options 配置、插件 API、以及一系列的新特性。

Rollup 3.0 意味着 Vite 即将发布大版本

https://github.com/rollup/rollup/releases/tag/v3.0.0

📒 前端食堂技术周刊第 55 期：Rollup v3.0.0、Volar 1.0 Nika、TypeScript 十年

📒 如何使用 React、SSR 和 Tailwind CSS 构建 SVG 折线图

关于如何在基于 Next.js 或 Gatsby 的服务器端渲染 React 应用程序中创建你自己的基于 SVG 的折线图的教程。

https://thenewstack.io/how-to-build-svg-line-charts-with-react-ssr-and-tailwind-css/

📒 React 渲染的未来

首先回顾当前的渲染模式 (CSR/SSR)然后转向一些新的渲染模式，例如流式 SSR 和服务器组件。这也是在 React Bangalore 的 最近访谈 中的话题。

https://prateeksurana.me/blog/future-of-rendering-in-react/

📒 React Table：一个 “几乎无头” 的表格组件

https://react-table-library.com/

📒 Islands 架构原理和实践

📒 你不需要Next.js（和SSR）

📒 【面试高频题】难度 1.5/5，常规滑动窗口运用题

⭐️ 精读《Headless 组件用法与原理》

📒 学习了！GoMap 会内存泄露

📒 如何让 Go 反射变快

⭐️ Go Gin框架请求自动验证和数据绑定，看完这篇就会用了

📒 一文搞懂Go内联优化

⭐️ Go常见错误集锦之函数式选项模式

📒 Go语言爱好者周刊：第 163 期 —— 错误处理新提案