周刊收集包括前端(但不限于前端)的文章约啊、新聞、開(kāi)源項(xiàng)目取董、工具等等棍苹,每周一更新。
?? News
layui 即將退出歷史舞臺(tái)
layui 官網(wǎng)將于 2021 年 10 月 13 日進(jìn)行下線茵汰。
Webpack 5.54.0 發(fā)布
Webpack 5.54.0 現(xiàn)已發(fā)布枢里,主要更新內(nèi)容有:
- Features
- 改進(jìn)常量折疊以允許跳過(guò)更多 && || 和 ?? 分支
- 允許在 webpack 中使用所有的 hashing,用 output.hashFunction 進(jìn)行配置
- 在模塊中使用 eval 時(shí)蹂午,不再完全從內(nèi)部圖分析中跳出
- Bug 修復(fù)
- force bump enhanced - 解決錯(cuò)誤的方法
- Performance
- 減少創(chuàng)建 snapshots 時(shí)的分配次數(shù)
- 添加 output.hashFunction: "xxhash64"一個(gè)基于 wasm 的超快速哈希函數(shù)
- 改進(jìn)短字符串序列化時(shí)的 UTF-8 轉(zhuǎn)換
- 提高依賴(lài)項(xiàng)的 hashing 性能
https://github.com/webpack/webpack/releases/tag/v5.54.0
Taro 3.3.9 發(fā)布
新增Taro 小程序端構(gòu)建后支持CI(持續(xù)集成)的插件:@taorjs/plugin-mini-ci栏豺。支持構(gòu)建完畢后自動(dòng)打開(kāi)小程序開(kāi)發(fā)者工具、上傳作為體驗(yàn)版豆胸、生成預(yù)覽二維碼(暫時(shí)僅支持微信奥洼、字節(jié)、百度晚胡、支付寶小程序)灵奖。
https://github.com/NervJS/taro/releases/tag/v3.3.9
?? 文章
企業(yè)微信超大型工程-跨全平臺(tái)UI框架最佳實(shí)踐
https://mp.weixin.qq.com/s/JdQmgQ57nWQM99JW_ueFVg
?? 近 20k Star的項(xiàng)目說(shuō)不做就不做了,但總結(jié)的內(nèi)容值得借鑒
https://juejin.cn/post/7010922819143860261
使用 MediaPipe BlazePose GHUM 和 TensorFlow.js 進(jìn)行 3D 姿態(tài)檢測(cè)
3D 姿態(tài)檢測(cè)為健身估盘、醫(yī)療瓷患、動(dòng)作捕捉等應(yīng)用開(kāi)啟了全新的設(shè)計(jì)機(jī)會(huì)。在瀏覽器中通過(guò) 3D 動(dòng)作捕捉來(lái)驅(qū)動(dòng)角色動(dòng)畫(huà)就是一個(gè)很酷的案例遣妥∩帽啵快來(lái)嘗試一下吧~
實(shí)時(shí)演示版:https://3d.kalidoface.com/
https://mp.weixin.qq.com/s/tOlWR6aZpPG5L-LKiV2ecg
?? 幽靈依賴(lài)的危害
“幽靈依賴(lài)” 指的是 項(xiàng)目中使用了一些 沒(méi)有被定義在其 package.json 文件中 的 包。
https://zhuanlan.zhihu.com/p/412419619
Partytown: 在Web Worker運(yùn)行第三方腳本
https://dev.to/adamdbradley/introducing-partytown-run-third-party-scripts-from-a-web-worker-2cnp
40個(gè)非V8 JavaScript 實(shí)現(xiàn)對(duì)比
https://notes.eatonphil.com/javascript-implementations.html
Index Signatures in TypeScript
https://dmitripavlutin.com/typescript-index-signatures/
Theatre.js: Motion Design
可以通過(guò)編程和可視化的方式來(lái)為使用Three.js箫踩、HTML/SVG甚至是小頁(yè)面元素或js變量值創(chuàng)建的3D對(duì)象設(shè)置動(dòng)畫(huà)爱态。
20秒完成機(jī)器學(xué)習(xí)模型訓(xùn)練和部署?! 說(shuō)說(shuō) Pipcook 2.0
https://mp.weixin.qq.com/s/Zy7jRcXGYnuwB9WJuSoeGQ
Webpack 原理系列十:HMR 原理全解析
https://mp.weixin.qq.com/s/cbYMpuc4hnV9NA4VfqJLvg
React 框架運(yùn)行時(shí)優(yōu)化方案的演進(jìn)
https://mp.weixin.qq.com/s/4Y6DuY5rDohgdCm0MP5WBA
如何使用 GitHub Actions 自動(dòng)化開(kāi)發(fā)流程
作者介紹他們公司如何使用 GitHub Actions,將各種開(kāi)發(fā)步驟自動(dòng)化境钟,舉了很多例子锦担,演示了測(cè)試、代碼格式化慨削、構(gòu)建吆豹、部署的配置文件應(yīng)該怎么寫(xiě)鱼的。
https://posthog.com/blog/automating-a-software-company-with-github-actions
CSS 的絕對(duì)長(zhǎng)度單位都不準(zhǔn)確
CSS 有幾個(gè)長(zhǎng)度單位屬于絕對(duì)長(zhǎng)度,比如像素 px痘煤、厘米 cm、英寸 in猿规、點(diǎn) pt衷快。但是,這些單位都不是準(zhǔn)確長(zhǎng)度姨俩。
https://www.smashingmagazine.com/2021/07/css-absolute-units/
JavaScript 中的貨幣計(jì)算
我們?cè)谟?jì)算金錢(qián)的時(shí)候蘸拔,一定要十分嚴(yán)謹(jǐn),確保每一分錢(qián)都計(jì)算在內(nèi)环葵,但是 JavaScript 的 Number 類(lèi)型卻無(wú)法勝任這一工作调窍,在本文中,作者將介紹 Number 無(wú)法勝任這項(xiàng)工作的原因以及如何在 JavaScript 中正確地進(jìn)行金錢(qián)計(jì)算张遭。
https://www.honeybadger.io/blog/currency-money-calculations-in-javascript/
JavaScript eventing deep dive
重新學(xué)習(xí)瀏覽器事件邓萨。
https://web.dev/eventing-deepdive/
推斷式預(yù)渲染
https://web.dev/speculative-prerendering/
?? 工具、軟件
Elk: 針對(duì)嵌入式系統(tǒng)的小型js引擎
https://github.com/cesanta/elk
Code2flow: 為動(dòng)態(tài)語(yǔ)言生成調(diào)用流程圖
支持 JavaScript, Python, Ruby and PHP菊卷。
https://github.com/scottrogowski/code2flow/
Hotkey: 簡(jiǎn)單易用的快捷鍵綁定庫(kù)
<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
簡(jiǎn)簡(jiǎn)單單展示動(dòng)態(tài)數(shù)字效果缔恳。
https://github.com/glennreyes/react-countup
next-i18next: 翻譯你的 Next.js 應(yīng)用
https://github.com/isaachinman/next-i18next
react-windows-ui: Windows Fluent風(fēng)格的UI
demo: https://virtualvivek.github.io/react-windows-ui/#/
https://github.com/virtualvivek/react-windows-ui
ow: 面向人類(lèi)的函數(shù)參數(shù)校驗(yàn)工具庫(kù)
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
周刊首發(fā)于GitHub,歡迎訂閱: