编辑推荐

State of JS 2022 发布

2023 年 1 月 11 日，2022 年度 StateOfJS 调查结果正式公布！此次问卷于 2022 年 11 月 21 日至 12 月 22 日进行，共收集了 39472 份问卷。此调查的目的是确定 Web 开发生态系统中即将出现的趋势，以帮助开发人员做出技术选择。因此，该调查的重点是预测未来几年会发生什么，而不是分析现在流行什么，这就是为什么并不包括目前最普遍的功能或技术。

深度阅读

React 18：新玩具、新陷阱以及新可能性

React 18 是向着正确的前进方向迈出的一大步，是预示着更美好的 webdev 生态系统。但如果你对 React 的奇思妙想和抽象不太满意，那你大概是不会喜欢这个包含诸多超赞的新功能，但同时也有更多神奇抽象的版本。

ESLint 机制分析与简单插件实践

ESLint是基于抽象语法树来进行工作的，ESLint默认使用的编译器(parse)是 「Espree」，通过它来解析我们的JS代码生成AST，基于AST，我们就可以对我们的代码进行检查和修改了。

通常我们的Babel编译分为下图这几步，编译/转换/生成。ESlint和它对比，只有第一步是一致的， 因为我们只需要拿到ast中的部分信息，同时直接在源码中进行提示和操作就行，并不需要transform和后续的生成代码。

WebRTC + Tensorflow.js 在运动健康类项目中的前端应用

Tensorflow.js 就是一扇前端开发人员进入深度学习领域最好的大门，它提供了一套完整的 API，让我们可以很方便的使用深度学习模型。它可以在浏览器中运行，也可以在 node.js 中运行。它的 API 设计非常简单，而且它的文档也非常详细，我们可以很快的上手。

外文精选

Vue 2022 Year In Review

We are still in a transition period for the ecosystem to move to Vue 3. So after the switch, we focused more on improving Vue's developer experience by investing in tooling. Our team members have been actively involved in the development of Vite, and we made significant improvements to Vue's IDE and TypeScript support by shipping Volar 1.0.

Lockfile trick: Package an npm project with Nix in 20 lines

I recently needed to package a JavaScript npm project with Nix. This is very simple to do and does not require any ugly workarounds like importing from derivation or generating Nix files and works just fine with sandboxed builds. Here’s the general idea and an example.

实践应用

开箱即用的前端图片压缩方案

前端实现图片压缩无非就是在用户上传图片文件后, 将file转换成image对象, 然后再利用canvas 及其 api 将图片压缩成指定体积. 如下流程:

【不规则布局】有意思的六边形动画

纯 CSS 实现六边形动画效果，很酷炫！