前端周刊 #9 | layui退出歷史舞臺(tái)、姿態(tài)檢測(cè)TensorFlow.js、幽靈依賴危害、代碼流程圖

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

?? News

layui 即將退出歷史舞臺(tái)

layui 官網(wǎng)將于 2021 年 10 月 13 日進(jìn)行下線。

image

https://www.layui.com/

Webpack 5.54.0 發(fā)布

Webpack 5.54.0 現(xiàn)已發(fā)布,主要更新內(nèi)容有:

  1. Features
  • 改進(jìn)常量折疊以允許跳過更多 && || 和 ?? 分支
  • 允許在 webpack 中使用所有的 hashing,用 output.hashFunction 進(jìn)行配置
  • 在模塊中使用 eval 時(shí),不再完全從內(nèi)部圖分析中跳出
  1. Bug 修復(fù)
  • force bump enhanced - 解決錯(cuò)誤的方法
  1. Performance
  • 減少創(chuàng)建 snapshots 時(shí)的分配次數(shù)
  • 添加 output.hashFunction: "xxhash64"一個(gè)基于 wasm 的超快速哈希函數(shù)
  • 改進(jìn)短字符串序列化時(shí)的 UTF-8 轉(zhuǎn)換
  • 提高依賴項(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)打開小程序開發(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)目說不做就不做了,但總結(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)用開啟了全新的設(shè)計(jì)機(jī)會(huì)。在瀏覽器中通過 3D 動(dòng)作捕捉來驅(qū)動(dòng)角色動(dòng)畫就是一個(gè)很酷的案例。快來嘗試一下吧~

image

實(shí)時(shí)演示版:https://3d.kalidoface.com/

https://mp.weixin.qq.com/s/tOlWR6aZpPG5L-LKiV2ecg

?? 幽靈依賴的危害

“幽靈依賴” 指的是 項(xiàng)目中使用了一些 沒有被定義在其 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

image

https://dmitripavlutin.com/typescript-index-signatures/

Theatre.js: Motion Design

可以通過編程和可視化的方式來為使用Three.js、HTML/SVG甚至是小頁(yè)面元素或js變量值創(chuàng)建的3D對(duì)象設(shè)置動(dòng)畫。

https://www.theatrejs.com/

20秒完成機(jī)器學(xué)習(xí)模型訓(xùn)練和部署?! 說說 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)化開發(fā)流程

作者介紹他們公司如何使用 GitHub Actions,將各種開發(fā)步驟自動(dòng)化,舉了很多例子,演示了測(cè)試、代碼格式化、構(gòu)建、部署的配置文件應(yīng)該怎么寫。

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ì)算金錢的時(shí)候,一定要十分嚴(yán)謹(jǐn),確保每一分錢都計(jì)算在內(nèi),但是 JavaScript 的 Number 類型卻無法勝任這一工作,在本文中,作者將介紹 Number 無法勝任這項(xiàng)工作的原因以及如何在 JavaScript 中正確地進(jì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)語言生成調(diào)用流程圖

支持 JavaScript, Python, Ruby and PHP。

image

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ù)字效果。

image

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

image

demo: https://virtualvivek.github.io/react-windows-ui/#/

https://github.com/virtualvivek/react-windows-ui

ow: 面向人類的函數(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,歡迎訂閱:

我的周刊

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容