前端技术观察第 27 期

《前端技术观察》是由字节跳动IES前端团队收集、整理、推荐的业界高品质前端资源合集，主要分为以下几个板块：

• Highlights
• 优秀的工具、库
• 好的教程、深度解读已有技术的文章
• 业界最新的技术、热点文章
• 业界对（新）技术的深度地、优秀地实践
• Tutorial
• Tools And Codes

《前端技术观察》的目的是让大家：

• 更及时的了解到业界最新的技术
• 受益于高质量的教程、文章
• 了解业界更优秀的代码、工具
• 更多地、氛围更浓厚地讨论、研究、落地技术

highlights

Webpack 5正式发布（英）

包括基本介绍，升级指南和升级的主要变化

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

Promise V8源码分析（一）

主要介绍Promise的构造函数/then/resolve的源码

https://mp.weixin.qq.com/s/V47KQoVOm7Eiioo2VSgxIw

NPM 7.0发布（英）

新版本的主要特性（包括工作区/v2版package-lock等），内部更新内容（比如Arborist的应用），以及不兼容更改

https://mp.weixin.qq.com/s/NMHOgbqr27id8HZO5GW4bg

当Rust与Web相遇 - 编程范式之间的冲突？（英）

介绍了JS的基本特性（包括单线程/内存管理/事件循环等），Rust的基本特性（多线程/MRSW等），并通过一个游戏例子对比了两者的区别以及性能

https://www.jakobmeier.ch/blogging/Rust_on_the_Web.html#the-land-of-javascript

理解ECMAScript规范（二）

ECMAScript中原型查找的相关规范

https://mp.weixin.qq.com/s/JRHP-YyW_z7oZZXUG17p9Q

NodeJS源码之事件循环

介绍了事件循环的各个阶段，以及NodeJS实现中的关键代码

https://mp.weixin.qq.com/s/Y0xAANfyIobCeVGxR1qtmQ

浏览器是如何调度进程和线程的？

结合chrome浏览器介绍了多进程架构，以及渲染进程中的多线程

https://mp.weixin.qq.com/s/bkSmKYGHk0V5eZIfuSTNyQ

RSLint: 一款Rust编写的超快JS Linter(英)

一款目前还在不断完善的Linter，目标是最快的JS Linter

https://github.com/RDambrosio016/RSLint

用其他语言编写JS工具是否已经是一种新的趋势(英)

本文结合例子，讨论了用JS和其他语言编写JS工具的优劣

https://2ality.com/2020/10/js-plus-other-languages.html

手写Redux-Saga源码

Redux-Saga是一套Redux的异步解决方案，使用Generator来处理异步流程。本文分析了Redux-Saga的基本框架（包括channel/run/effect等处理），并从零开始实现了一套

https://segmentfault.com/a/1190000037525337

tutorial

如何使用 CSS Grid 设置文章排版

本文介绍如何使用几行简单的 CSS 代码，就能实现文章的排版布局

https://joshwcomeau.com/css/full-bleed/

Vimium 插件的使用方法

Vimium 是 Chrome 浏览器的一个插件，可以只用键盘来操作网页，本文是它的教程

https://codefaster.substack.com/p/look-ma-no-mouse-vimium

使用 CSS :: marker 自定义列表符号

Chrome 86 开始支持使用:marker伪类自定义

和
的列表符号。

https://web.dev/css-marker-pseudo-element/

100 行代码重写 Facebook 的 'Recoil' React 库

Recoil 是一个 Facebook 团队开发的 React 的状态管理库（非 React 团队）

https://bennetthardwick.com/blog/recoil-js-clone-from-scratch-in-100-lines/

RxJS响应式编程动手入门

https://goodguydaniel.com/blog/hands-on-reactive-programming-rxjs

RxJS 是一个 JS 的响应式编程

tools And codes

Diagram Maker

亚马逊推出的开源流程图制作工具

https://github.com/awslabs/diagram-maker

nb

一个命令行笔记软件

https://github.com/xwmx/nb

optimizt

一个命令行图片压缩工具，支持压缩 PNG、JPEG、GIF 和 SVG 格式，并可以选择输出 WebP 格式

https://github.com/funbox/optimizt

uTools

跨平台、插件化的桌面搜索框工具，可以大幅提升办公效率

https://u.tools/

Library Detector

一个可检测各种浏览器库和框架，并展示的浏览器框架

https://github.com/johnmichel/Library-Detector-for-Chrome

本系列会持续更新，欢迎大家持续关注。IES前端团队负责字节跳动互娱社区全线产品前端开发工作，包括但不限于抖音、火山、轻颜、faceu等。如果你想加入我们的团队，欢迎投递简历到 lisqpersonal@163.com 标题：【求职】岗位-姓名-电话