编程知识 cdmana.com

湖中劍 前端周刊 #10(ESLint8、Web 端側 AI、react-if)

閱讀原文,體驗更佳!

周刊收集包括前端(但不限於前端)的文章、新聞、開源項目、工具等等,每周一更新。

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

關注我們

每期發布時公眾號(湖中劍)會推送消息,歡迎關注。

圖片

版权声明
本文为[湖中劍]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/10/20211014014520258t.html

Scroll to Top