湖中剑 前端周刊 #10 | ESLint8、Web端侧AI、react-if

470 阅读2分钟

周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。

📰 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

eslint.org/blog/2021/1…

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.dev/sanitizer/

📖 文章

说一说Web端侧AI

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

mp.weixin.qq.com/s/9PoFZVs7j…

浏览器渲染之回流重绘

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

mp.weixin.qq.com/s/EFwNP3EK8…

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

mp.weixin.qq.com/s/sYnU-yUiu…

深入 WebAssembly 之解释器实现篇

mp.weixin.qq.com/s/hktDuC1nk…

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

www.emgoto.com/react-inlin…

React的哲学

关于React的开发哲学。

github.com/mithi/react…

一款 APK 是怎么诞生的?

mp.weixin.qq.com/s/214uq3G2q…

🛠 工具、软件

React Oxide

轻量级的网页版IDE。

demo:www.reactoxide.com/

github.com/bootrino/re…

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

一个有趣而且很灵活的国际化工具。

github.com/schummar/sc…

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>
);

github.com/romac/react…


周刊首发于GitHub,欢迎订阅:

我的周刊