周刊收集包括前端（但不限于前端）的文章、新聞、開源項目、工具等等，每周一更新。
?? News
layui 即將退出歷史舞臺
layui 官網將于 2021 年 10 月 13 日進行下線。
Webpack 5.54.0 發布
Webpack 5.54.0 現已發布，主要更新內容有：
- Features
- 改進常量折疊以允許跳過更多 && || 和 ?? 分支
- 允許在 webpack 中使用所有的 hashing，用 output.hashFunction 進行配置
- 在模塊中使用 eval 時，不再完全從內部圖分析中跳出
- Bug 修復
- force bump enhanced - 解決錯誤的方法
- Performance
- 減少創建 snapshots 時的分配次數
- 添加 output.hashFunction: "xxhash64"一個基于 wasm 的超快速哈希函數
- 改進短字符串序列化時的 UTF-8 轉換
- 提高依賴項的 hashing 性能
https://github.com/webpack/webpack/releases/tag/v5.54.0
Taro 3.3.9 發布
新增Taro 小程序端構建后支持CI（持續集成）的插件：@taorjs/plugin-mini-ci。支持構建完畢后自動打開小程序開發者工具、上傳作為體驗版、生成預覽二維碼（暫時僅支持微信、字節、百度、支付寶小程序）。
https://github.com/NervJS/taro/releases/tag/v3.3.9
?? 文章
企業微信超大型工程-跨全平臺UI框架最佳實踐
https://mp.weixin.qq.com/s/JdQmgQ57nWQM99JW_ueFVg
?? 近 20k Star的項目說不做就不做了，但總結的內容值得借鑒
https://juejin.cn/post/7010922819143860261
使用 MediaPipe BlazePose GHUM 和 TensorFlow.js 進行 3D 姿態檢測
3D 姿態檢測為健身、醫療、動作捕捉等應用開啟了全新的設計機會。在瀏覽器中通過 3D 動作捕捉來驅動角色動畫就是一個很酷的案例。快來嘗試一下吧～
實時演示版：https://3d.kalidoface.com/
https://mp.weixin.qq.com/s/tOlWR6aZpPG5L-LKiV2ecg
?? 幽靈依賴的危害
“幽靈依賴” 指的是 項目中使用了一些 沒有被定義在其 package.json 文件中 的 包。
https://zhuanlan.zhihu.com/p/412419619
Partytown: 在Web Worker運行第三方腳本
https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp
40個非V8 JavaScript 實現對比
https://notes.eatonphil.com/javascript-implementations.html
Index Signatures in TypeScript
https://dmitripavlutin.com/typescript-index-signatures/
Theatre.js: Motion Design
可以通過編程和可視化的方式來為使用Three.js、HTML/SVG甚至是小頁面元素或js變量值創建的3D對象設置動畫。
20秒完成機器學習模型訓練和部署?! 說說 Pipcook 2.0
https://mp.weixin.qq.com/s/Zy7jRcXGYnuwB9WJuSoeGQ
Webpack 原理系列十：HMR 原理全解析
https://mp.weixin.qq.com/s/cbYMpuc4hnV9NA4VfqJLvg
React 框架運行時優化方案的演進
https://mp.weixin.qq.com/s/4Y6DuY5rDohgdCm0MP5WBA
如何使用 GitHub Actions 自動化開發流程
作者介紹他們公司如何使用 GitHub Actions，將各種開發步驟自動化，舉了很多例子，演示了測試、代碼格式化、構建、部署的配置文件應該怎么寫。
https://posthog.com/blog/automating-a-software-company-with-github-actions
CSS 的絕對長度單位都不準確
CSS 有幾個長度單位屬于絕對長度，比如像素 px、厘米 cm、英寸 in、點 pt。但是，這些單位都不是準確長度。
https://www.smashingmagazine.com/2021/07/css-absolute-units/
JavaScript 中的貨幣計算
我們在計算金錢的時候，一定要十分嚴謹，確保每一分錢都計算在內，但是 JavaScript 的 Number 類型卻無法勝任這一工作，在本文中，作者將介紹 Number 無法勝任這項工作的原因以及如何在 JavaScript 中正確地進行金錢計算。
https://www.honeybadger.io/blog/currency-money-calculations-in-javascript/
JavaScript eventing deep dive
重新學習瀏覽器事件。
https://web.dev/eventing-deepdive/
推斷式預渲染
https://web.dev/speculative-prerendering/
?? 工具、軟件
Elk: 針對嵌入式系統的小型js引擎
https://github.com/cesanta/elk
Code2flow: 為動態語言生成調用流程圖
支持 JavaScript, Python, Ruby and PHP。
https://github.com/scottrogowski/code2flow/
Hotkey: 簡單易用的快捷鍵綁定庫
<a href="/page/2" data-hotkey="j">Next</a>
<a href="/help" data-hotkey="Control+h">Help</a>
<a href="/rails/rails" data-hotkey="g c">Code</a>
<a href="/search" data-hotkey="s,/">Search</a>
https://github.com/github/hotkey
React CountUp
簡簡單單展示動態數字效果。
https://github.com/glennreyes/react-countup
next-i18next: 翻譯你的 Next.js 應用
https://github.com/isaachinman/next-i18next
react-windows-ui: Windows Fluent風格的UI
demo: https://virtualvivek.github.io/react-windows-ui/#/
https://github.com/virtualvivek/react-windows-ui
ow: 面向人類的函數參數校驗工具庫
import ow from 'ow';
const unicorn = {
rainbow: '??',
stars: {
value: '??'
}
};
ow(unicorn, ow.object.exactShape({
rainbow: ow.string,
stars: {
value: ow.number
}
}));
//=> ArgumentError: Expected property `stars.value` to be of type `number` but received type `string` in object `unicorn`
https://github.com/sindresorhus/ow
周刊首發于GitHub，歡迎訂閱：
