前端技術觀察第 27 期

《前端技術觀察》是由字節(jié)跳動IES前端團隊收集、整理、推薦的業(yè)界高品質(zhì)前端資源合集，主要分為以下幾個板塊：

• Highlights
• 優(yōu)秀的工具、庫
• 好的教程、深度解讀已有技術的文章
• 業(yè)界最新的技術、熱點文章
• 業(yè)界對（新）技術的深度地、優(yōu)秀地實踐
• Tutorial
• Tools And Codes

《前端技術觀察》的目的是讓大家：

• 更及時的了解到業(yè)界最新的技術
• 受益于高質(zhì)量的教程、文章
• 了解業(yè)界更優(yōu)秀的代碼、工具
• 更多地、氛圍更濃厚地討論、研究、落地技術

highlights

Webpack 5正式發(fā)布（英）

包括基本介紹，升級指南和升級的主要變化

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

Promise V8源碼分析（一）

主要介紹Promise的構造函數(shù)/then/resolve的源碼

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

NPM 7.0發(fā)布（英）

新版本的主要特性（包括工作區(qū)/v2版package-lock等），內(nèi)部更新內(nèi)容（比如Arborist的應用），以及不兼容更改

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

當Rust與Web相遇 - 編程范式之間的沖突？（英）

介紹了JS的基本特性（包括單線程/內(nèi)存管理/事件循環(huán)等），Rust的基本特性（多線程/MRSW等），并通過一個游戲例子對比了兩者的區(qū)別以及性能

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

理解ECMAScript規(guī)范（二）

ECMAScript中原型查找的相關規(guī)范

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

NodeJS源碼之事件循環(huán)

介紹了事件循環(huán)的各個階段，以及NodeJS實現(xiàn)中的關鍵代碼

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

瀏覽器是如何調(diào)度進程和線程的？

結合chrome瀏覽器介紹了多進程架構，以及渲染進程中的多線程

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

RSLint: 一款Rust編寫的超快JS Linter(英)

一款目前還在不斷完善的Linter，目標是最快的JS Linter

https://github.com/RDambrosio016/RSLint

用其他語言編寫JS工具是否已經(jīng)是一種新的趨勢(英)

本文結合例子，討論了用JS和其他語言編寫JS工具的優(yōu)劣

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

手寫Redux-Saga源碼

Redux-Saga是一套Redux的異步解決方案，使用Generator來處理異步流程。本文分析了Redux-Saga的基本框架（包括channel/run/effect等處理），并從零開始實現(xiàn)了一套

https://segmentfault.com/a/1190000037525337

tutorial

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

本文介紹如何使用幾行簡單的 CSS 代碼，就能實現(xiàn)文章的排版布局

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

Vimium 插件的使用方法

Vimium 是 Chrome 瀏覽器的一個插件，可以只用鍵盤來操作網(wǎng)頁，本文是它的教程

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 團隊開發(fā)的 React 的狀態(tài)管理庫（非 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

本系列會持續(xù)更新，歡迎大家持續(xù)關注。IES前端團隊負責字節(jié)跳動互娛社區(qū)全線產(chǎn)品前端開發(fā)工作，包括但不限于抖音、火山、輕顏、faceu等。如果你想加入我們的團隊，歡迎投遞簡歷到 [email protected] 標題：【求職】崗位-姓名-電話