2023.04月刊

开源工具

xstate

https://xstate.js.org/docs/zh/
用于现代 Web 的 JavaScript 和 TypeScript 的有限状态机(opens new window)和状态图(opens new window)。

技术好文

2022 大前端总结和 2023 就业分析

https://juejin.cn/post/7196110128038690876
本文主要讲了前端2022的主流趋势，年度大戏低码和2023就业行情分析，对未来的2个可能放大的点AI和Cropto和前端相关的部分也有一点点覆盖。

TS被高估了

https://dioxmio.medium.com/typescript-is-overrated-802ab6e3b82b
很多开发者眼里，TypeScript 是更高级、更先进的 JavaScript 语言。但是作者认为，TypeScript 有一些缺点，不应该视而不见。

Chrome 112 ：CSS 支持嵌套语法、document.domain 正式禁用！

https://mp.weixin.qq.com/s/0sC5Bk5_FAel6lq819_cYQ
本文主要列举了几项Chrome 112 版本带来的新的特性

CSS 支持嵌套语法
document.domain 正式禁用
X-Requested-With Header 开启弃用实验！主要是为了保护用户隐私，
SPA 丝滑的过渡效果

function spaNavigate(data) {
  // 判断浏览器是否兼容
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // 使用 transition
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

快速入门 GraphQL：一个接口实现 CRUD

https://mp.weixin.qq.com/s/rRFubAwTy46Re5TCW1vl3A
本文主要通过实际的案例介绍了graphql的crud的操作，同时简单描述了其基本原理。

Chrome 发布 WebGPU

https://mp.weixin.qq.com/s/6o6Ci0bMEC4Y9e1Pxfi6zQ
本文大致介绍了WebGPU带来的特性，以及当前阶段设备支持情况，列举了目前已支持的库，同时推荐了相关资源。

基于 HTTP Range 实现文件分片并发下载！

https://mp.weixin.qq.com/s/J55UtidL_WI0zSJM1C7kXQ
本文采用详细的过程实现了分片并发下载的前后端实现过程，同时介绍了分片后合并操作的具体实践。

用过Pinia后vuex都不香了

https://mp.weixin.qq.com/s/0MLg7yurTqV869r01V4rQw
本文介绍了Pinia的详细使用过程，但其实也没有阐述相比vuex好在哪里，可以作为PInia入门使用的教程案例。

我把我的简历丢给chatGPT，他问了我这些问题

https://mp.weixin.qq.com/s/58W3Gzd7VhqRPUJMOcJ1Tg
本文描述了chatGPT会如何根据简历信息，综合性的提出八股文和关于项目经验的问题，同时一些问题确实属于高频面试问题，可以作为面试者的自我演练模拟过程，很有借鉴意义。

预测2024年之后的前端开发模式

https://mp.weixin.qq.com/s/09cNQFc_JHneFQY9Xv25qg
本文视野从“提高效率”和“提高门槛”两个层面阐述了未来可能追求的前端开发模式

工程师应该如何写作

https://www.yuque.com/serviceup/misc/cn-writing-for-engineers
讲述了写作过程需要注意的要点
在写作开始之前

你得有话可说
不要混淆写作和学习
了解你的听众
尊重你的心态
趁热打铁
再工作前将铁加热

在写作时

从最重要的开始，而不是从头开始避免像叙事文一样铺垫过多内容
在充实内容之前先解决故事线的问题大纲应该是写任何大型文件的第一个里程碑
再开始润色之前先完成内容
让你的文字可以略读比如提供锚点，使用户能够在不实际阅读的情况下衡量内容
提供摘要部分

写作的练习

持续写作
利用小型写作任务作为练习
今早获得对你的大纲的反馈
向选定的听众分发文本的草稿

什么是 Linear 设计风格？

https://sspai.com/post/79347
Linear 软件公司是一家提供项目管理和协作工具的公司，它的产品旨在帮助团队更高效地协作，跟踪任务和进度，从而实现项目的顺利进行。但在本文中，Linear 往往指代的是一种设计风格，这是一种风格简洁、直观、以用户体验优先的设计。

React SSR 实现原理：从 renderToString 到 hydrate

React SSR 实现原理：从 renderToString 到 hydrate
React SSR 是服务端通过 renderToString 把组件树渲染成 html 字符串，浏览器通过 hydrate 把 dom 关联到 fiber 树，加上交互逻辑和再次渲染。
服务端 renderToString 就是递归拼接字符串的过程，遇到组件会传入参数执行，遇到标签会拼接对应的字符串，最终返回一段 html 给浏览器。
浏览器端 hydrate 是在 reconcile 的 beginWork 阶段，依次判断 dom 是否可以复用到当前 fiber，可以的话就设置到 fiber.stateNode，然后在 completeWork 阶段就可以跳过节点的创建。
这就是 React SSR 从服务端的 renderToString 到浏览器端的 hydrate 的全流程的原理

如何检查前端项目中未使用的依赖包？

如何检查前端项目中未使用的依赖包？
本文主要列举了两个工具的具体使用方法，及各自的特性，在实际使用过程中可以根据具体的场景进行选型落实。
Depcheck 是一款用于分析项目中依赖关系的工具，它可以帮助我们找出以下问题：在 package.json 中，每个依赖包如何被使用、哪些依赖包没有用处、哪些依赖包缺失。它是解决前端项目中依赖包清理问题的一个常用工具。
npm-check 用于检查项目中的依赖项，并提供有关过期，未使用和缺少依赖项的信息。npm-check 是基于 depcheck 实现的。它可以提示项目依赖项的状态，但它只会检查并更新项目的直接依赖项，并不会检查和更新嵌套的依赖项（即项目的依赖项的依赖项）