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

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

反对 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

把 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/

AI 正在一直拓展前端的技术边界，算法的加持也为前端研发注入了全新的力量。本文为大家介绍什么是端智能，端智能的利用场景以及 Web 端侧实现 AI 的基本原理概念。

https://mp.weixin.qq.com/s/9PoFZVs7jiI992y6MWLqUQ

回流和重绘是前端开发的高频词汇之一，你能够在各种面经，性能优化相干文章能够看到，然而很多都是草草带过。本文带你从浏览器渲染流程中理解回流与重绘的原理。

https://mp.weixin.qq.com/s/EFwNP3EK8_D_azXEW-7WMA

https://mp.weixin.qq.com/s/sYnU-yUiuRF6gMTV3cvU2w

https://mp.weixin.qq.com/s/hktDuC1nky06tAaAi-mwMA

https://www.emgoto.com/react-inline-edit/

对于 React 的开发哲学。

https://github.com/mithi/react-philosophies

https://mp.weixin.qq.com/s/214uq3G2qnDpiVZE5w5UkA

轻量级的网页版 IDE。

demo:https://www.reactoxide.com/

https://github.com/bootrino/reactoxide

一个乏味而且很灵便的国际化工具。

https://github.com/schummar/schummar-translate

这种写法像 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，欢送订阅：

我的周刊

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

📰 News

ESLint 8

Sanitizer API

📖 文章

说一说 Web 端侧 AI

浏览器渲染之回流重绘

Shadow DOM 的一次开掘 —— 揭秘 range input 的内部结构

深刻 WebAssembly 之解释器实现篇

教你打造一个内联的编辑输入框组件

React 的哲学

一款 APK 是怎么诞生的？

🛠 工具、软件

React Oxide

schummar-translate: TypeScript 驱动的翻译工具

react-if