关于前端:湖中剑-前端周刊-10-ESLint8Web端侧AIreactif

周刊收集包含前端（但不限于前端）的文章、新闻、开源我的项目、工具等等，每周一更新。

📰 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 补丁。

https://web.dev/sanitizer/

📖 文章

说一说 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，欢送订阅：

我的周刊