周刊收集包括前端(但不限于前端)的文章薯蝎、新聞、開源項(xiàng)目谤绳、工具等等良风,每周一更新。
?? News
Node v17.1.0 已發(fā)布
一次小更新闷供,此次引入了對(duì)JSON斷言的支持以及新的promise_hook模塊(用于暴露V8 PromiseHook API給用戶)烟央。
https://nodejs.org/en/blog/release/v17.1.0/
?? 文章
淺析 Web 錄屏技術(shù)方案與實(shí)現(xiàn)
隨著互聯(lián)網(wǎng)技術(shù)飛速發(fā)展,網(wǎng)頁錄屏技術(shù)已趨于成熟歪脏。例如可將錄屏技術(shù)運(yùn)用到在線考試中疑俭,實(shí)現(xiàn)遠(yuǎn)程監(jiān)考、屏幕共享以及錄屏等婿失;而在我們開發(fā)人員研發(fā)過程中钞艇,對(duì)于部分偶發(fā)事件,異常監(jiān)控系統(tǒng)僅僅只能告知程序出錯(cuò)豪硅,而不能清晰的告知錯(cuò)誤的復(fù)現(xiàn)路徑哩照,而錄屏技術(shù)或許能幫我們定位并復(fù)現(xiàn)問題。那么本文將從有感錄屏和無感錄屏兩方面給讀者分享一下錄屏這項(xiàng)技術(shù)懒浮,希望可以幫助你對(duì)網(wǎng)頁錄屏有一個(gè)初步認(rèn)識(shí)飘弧。
https://mp.weixin.qq.com/s/f55pB-MEO6VboFsihb-_gQ
助力雙 11 個(gè)性化會(huì)場(chǎng)高效交付:Deco 智能代碼技術(shù)揭秘
在這次雙11的個(gè)性化會(huì)場(chǎng)我們大規(guī)模使用Deco進(jìn)行研發(fā)识藤,帶來了48%左右的效率提升,本文將為大家揭秘Deco提效之秘次伶。
https://mp.weixin.qq.com/s/oMMvLWz6u5aMSKCsCGg0Hg
記一次 Bundleless 遷移經(jīng)歷痴昧,重新認(rèn)識(shí) Vite 預(yù)構(gòu)建
最近在公司探索落地 Bundless 構(gòu)建工具,嘗試將現(xiàn)有的一些業(yè)務(wù)項(xiàng)目 從 Webpack 往 Vite 遷移冠王,由于中后臺(tái)項(xiàng)目一般對(duì)瀏覽器兼容性要求不高赶撰,可以大膽引入一些前沿且激進(jìn)的方案,因此在公司找到了一個(gè)業(yè)務(wù)中后臺(tái)項(xiàng)目初步嘗試引入 Vite柱彻。
https://mp.weixin.qq.com/s/pUzUr1lTfX3wkzJL_Xv1oQ
Js 異步處理演進(jìn)豪娜,Callback=>Promise=>Observer
https://juejin.cn/post/7029093184332365855
TypeScript 4.5 — 淺談模塊能力增強(qiáng)
https://mp.weixin.qq.com/s/zZnXaBbsADoBNPCc4mD_HA
使用 React Query 優(yōu)雅地統(tǒng)一請(qǐng)求的狀態(tài)控制寫法
https://swizec.com/blog/you-can-use-react-query-for-slow-computation-not-just-api/
兩條命令讓你的git自動(dòng)變基
https://segmentfault.com/a/1190000040712052
Record, replay and measure user flows
Chrome 97 將提供 Recorder 功能,要嘗鮮的可下載 Chrome Canary 版體驗(yàn)哟楷。Recorder 可實(shí)現(xiàn)用戶操作的錄制侵歇、重放和性能測(cè)量,有點(diǎn)像 Selenium 的改進(jìn)版吓蘑。此外還可把過程導(dǎo)出為 Puppeteer 腳本,想到的場(chǎng)景是 BUG 復(fù)現(xiàn)坟冲,預(yù)計(jì)各大廠內(nèi)會(huì)有配套的平臺(tái)產(chǎn)出或接入磨镶。
https://developer.chrome.com/docs/devtools/recorder/
Node.js 多進(jìn)程/線程 —— 日志系統(tǒng)架構(gòu)優(yōu)化實(shí)踐
https://mp.weixin.qq.com/s/s3DeAxrEbVmqtCHGP9lstg
?? 工具、軟件
react-animated-numbers
數(shù)字滾動(dòng)效果健提,適用于數(shù)據(jù)展示場(chǎng)景琳猫。
demo: https://optimistic-noyce-cf2473.netlify.app/
https://www.npmjs.com/package/react-animated-numbers
React Native BLE PLX: 低功耗藍(lán)牙
低功耗藍(lán)牙技術(shù)廣泛運(yùn)用于可穿戴設(shè)備,react-native-ble-plx 是 React Native 上用于集成藍(lán)牙的庫私痹。
https://github.com/dotintent/react-native-ble-plx
Bundle Scanner: 掃描網(wǎng)頁npm依賴
輸入 URL脐嫂,他會(huì)告訴你這個(gè)站點(diǎn)用了哪些 npm 依賴。
原理是紊遵,雖然網(wǎng)站上用的 JavaScript 都是壓縮后的账千,但有些東西在壓縮前后是不變的,比如字面量和對(duì)象的 key暗膜,通過他們來對(duì)比即可實(shí)現(xiàn)匀奏。
周刊首發(fā)于GitHub,歡迎訂閱: