周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。
📰 News
ESLint 8
支持 ES2022。
- Class public instance fields and private instance fields
- Class public static fields and private static fields
- Class private instance methods and accessors
- Class private static methods and accessors
- RegExp match indices
- Top-level await
https://eslint.org/blog/2021/10/eslint-v8.0.0-released
Sanitizer API
把html字符串不加处理直接渲染到页面上是很危险的行为，一不小心就会触发XSS问题，Sanitizer API提案就是为了解决这个问题。
const $div = document.querySelector('div')
const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`
const sanitizer = new Sanitizer()
$div.setHTML(user_input, sanitizer) // <div><em>hello world</em><img src=""></div>
目前还没有浏览器支持，Chrome 93+ 可在 about://flags 里搜索开启，也可以使用 sanitizer-polyfill 补丁。
📖 文章
说一说Web端侧AI
AI 正在不断拓展前端的技术边界， 算法的加持也为前端研发注入了全新的力量。本文为大家介绍什么是端智能，端智能的应用场景以及 Web 端侧实现 AI 的基本原理概念。
https://mp.weixin.qq.com/s/9PoFZVs7jiI992y6MWLqUQ
浏览器渲染之回流重绘
回流和重绘是前端开发的高频词汇之一，你可以在各种面经，性能优化相关文章可以看到，但是很多都是草草带过。本文带你从浏览器渲染流程中了解回流与重绘的原理。
https://mp.weixin.qq.com/s/EFwNP3EK8_D_azXEW-7WMA
Shadow DOM 的一次挖掘 —— 揭秘 range input 的内部结构
https://mp.weixin.qq.com/s/sYnU-yUiuRF6gMTV3cvU2w
深入 WebAssembly 之解释器实现篇
https://mp.weixin.qq.com/s/hktDuC1nky06tAaAi-mwMA
教你打造一个内联的编辑输入框组件
https://www.emgoto.com/react-inline-edit/
React的哲学
关于React的开发哲学。
https://github.com/mithi/react-philosophies
一款 APK 是怎么诞生的？
https://mp.weixin.qq.com/s/214uq3G2qnDpiVZE5w5UkA
🛠 工具、软件
React Oxide
轻量级的网页版IDE。
demo:https://www.reactoxide.com/
https://github.com/bootrino/reactoxide
schummar-translate: TypeScript驱动的翻译工具
一个有趣而且很灵活的国际化工具。
https://github.com/schummar/schummar-translate
react-if
这种写法像Vue模板里的if条件，同时用过React和Vue的人可能会觉得模板语言对于分支判断很方便。
const Bar = ({ name, age, drinkingAge }) => (
<div>
<Header />
<If condition={age >= drinkingAge}>
<Then>
<span className="ok">Have a beer, {name}!</span>
</Then>
<Else>
<span className="not-ok">Sorry, {name}, you are not old enough.</span>
</Else>
</If>
<Footer />
</div>
);
https://github.com/romac/react-if
周刊首发于GitHub，欢迎订阅：
