前端技术双周刊#22-2022.05.05

JavaScript

• ECMAScript 双月报告
  在本次会议中，受关注程度较高的装饰器提案与 Type Annotations 提案均取得了阶段性进展，分别进入到 Stage 3 与 Stage 1。另外，本次会议中没有提案从 Stage 3 进入到 Stage 4。

CSS

• 现代 CSS Reset 解决方案
  现代 CSS Reset 解决方案除去页面样式最基本的呈现外，同时也关注用户体验与可访问性。这也可能是过去，我们在写 CSS 的时候比较容易忽略的环节。

• Exploring the new CSS color functions: CSS Color Module Level 5
  CSS Color Module Level 5目前仍处于草案阶段，但是里面提供了很多新的颜色函数值得关注。

• 奇妙的CSS MASK
  介绍 CSS Mask 属性，本文罗列了一些使用 mask 创造出来的有意思的场景；mask 译为遮罩，允许使用者通过遮罩或者裁剪特定区域的图片的方式隐藏一个元素的部分或者全部可见区域。

前端框架

• 理解 React Hooks 的闭包陷阱
  本文从一个点开始介绍了 hooks 引起的闭包陷阱，产生的原因已经解决方法，通过正确设置 deps 数组，每次用到的 state 改变后执行新函数，引用新的 state，同时注意清理上下次的定时器、事件监听器等。

• 前端框架源码解读之 Vite
  概述了目前前端比较成熟的构建工具，着重介绍 vite 的核心实现原理，以及针对 webpack 的痛点的解决。

开源产品

• UnoCSS Interactive Docs
  一款可以快速搜索原子化 CSS、CSS 属性和相关文档的工具，很流畅！

拓展阅读

• Github 热榜《程序员延寿指南》
  死亡率降低 66.67% 的秘籍！

• Monorepo 的过去、现在、和未来
  社区的 Monorepo 方案一直在不断演进。

• 编译 TS 代码用 tsc 还是 babel？
  文中讨论了 tsc 和 babel 编译 TS 代码的区别，但并不做推荐。具体用什么编译 TS，大家可以根据场景自己选择。

• Web端短视频编辑器的设计与实现
  本文是第十六届D2前端技术论坛分享的主题，让做视频像写 PPT 一样简单，让用户可以快速创作出视频知识内容。

• Chrome DevTools Inspector 扩展实践
  从 chrome devtools inspector 扩展为出发点，介绍了 devtools frontend 调试原理及模块加载方式，react native debugger 调试原理，跨域调试方案，最终实现 devtools inspector 的调试扩展。

编辑：okaychen