周刊收集包括前端（但不限于前端）的文章、新聞、開源項目、工具等等，每周一更新。
?? News
Parcel 2
Parcel 2由Rust重寫，性能有了很大的提升，本次更新：
- ?? 全新的插件系統(tǒng)
- ?? 默認(rèn)啟用tree shaking，并支持ES modules、CommonJS、dynamic imports和CSS modules
- ?? 巨大的性能提升
- ?? 自動code splitting
- ?? 圖片尺寸變化、格式轉(zhuǎn)化以及優(yōu)化, 支持AVIF和WebP，以及對JPEG、PNG無損壓縮
- 等等
更多內(nèi)容可以查看下面官方公告。
React Router 6
可能是發(fā)布前最后一個beta版。
- 花了不少篇幅為 remix 實現(xiàn)中心配置式路由，
<Router>+ useRoutes 的組合，Umi 4 已切到這個版本 - 提供
<Outlet />渲染子路由，不能用 props.children 了 - 全面支持相對路徑，子路由不用寫父路由路徑
- 用 useNavigate() 進行編程式跳轉(zhuǎn)
- 不再提供
<Switch />，用<Routes />代替 -
<Route index />表示 Index 路由 -
<Route />不能被封裝，比如封裝一個<PrivateRoute />用于權(quán)限，取而代之的是<Route element />的方式 -
<Routes />可以嵌套，嵌套在<Route />下的<Routes />會基于前者的 path，注意前者的 path 加 * 后綴，否則后者不匹配時會不顯示 - 不再提供
<Redirect />，推薦服務(wù)端判斷了直接跳，小成本升級也可用<Navigate replace to="/home" />，缺點是不支持服務(wù)端渲染
https://github.com/remix-run/react-router/releases/tag/v6.0.0-beta.7
Nuxt 3 Beta
Nuxt 3發(fā)布了beta版本，其中一個關(guān)鍵更新是引入了新的Server引擎，可以直接部署現(xiàn)有的多個云平臺。
這個版本還支持Vue3和Vite，想了解更多的內(nèi)容可以方面下面鏈接。
https://nuxtjs.org/announcements/nuxt3-beta/
?? 文章
新生代農(nóng)民工也要懂的策略設(shè)計模式
俗話說，凡事講策略。講策略的時候，我們往往會考慮每種情況的成本。策略同樣可體現(xiàn)在我們的代碼之中，合理利用策略模式重構(gòu)邏輯復(fù)雜的代碼，會使項目工程更易維護和擴展。
https://mp.weixin.qq.com/s/nVlZ9V744DQUNiWBP0m8_Q
如何排查React中渲染慢的組件?
https://alexsidorenko.com/blog/react-performance-slow-renders/
React源碼中的位運算技巧
https://mp.weixin.qq.com/s/zrfmXGHK4PG8B6pdGYO6Aw
AWS是如何將AWS SDK的JavaScript包發(fā)布大小減半
JavaScript開發(fā)者都應(yīng)該知道的33個概念
https://github.com/leonardomso/33-js-concepts
教你用CSS實現(xiàn)打字機效果
https://www.sitepoint.com/css-typewriter-effect/
在微前端中加載 Vite 應(yīng)用
https://mp.weixin.qq.com/s/Pd9jQI6DOKJ16hVbLNKtOA
My Logging Best Practices
log的最佳實踐。
https://tuhrig.de/my-logging-best-practices/
VSCode語言插件開發(fā)入門
VSCode 為何可以支持如此之多的編程語言？如何為一門新語言編寫語言插件？又有哪些語言特性可以被應(yīng)用呢？本次分享為大家介紹了 VSCode 提供的編程語言相關(guān)的能力，詳細講解了代碼高亮原理、languages.* API、Language Server Protocol 等內(nèi)容。
https://mp.weixin.qq.com/s/Eqb9hAvG-WeseP9rCl_XRg
從 fabric 源碼來看如何做好一個 canvas 庫
前言，本篇文章可以讓你從 0 到 1 快速了解 canvas，了解 fabricjs 源碼庫的整體組織和關(guān)鍵核心代碼。
https://mp.weixin.qq.com/s/OtKqeE0FnLLxHZUk02dj-w
?? 工具、軟件
react-spring
react-spring是基于spring-physics（彈簧物理）的react動畫庫，動畫效果更加流暢、自然。
https://github.com/pmndrs/react-spring
Caroumesh: 輪播組件中展示3D內(nèi)容
https://github.com/Adonis-Stavridis/caroumesh
Nice Modal
Nice Modal是一個輕量級、零依賴的模態(tài)框管理工具。使用context來全局持久化模態(tài)框的state，這樣的方案可以讓你很簡單的控制模態(tài)框的顯示和關(guān)閉。
import NiceModal from '@ebay/nice-modal-react';
import MyModal from './MyModal';
//...
NiceModal.show(MyModal, { someProp: 'hello' }).then(() => {
// do something if the task in the modal finished.
});
//...
demo：https://ebay.github.io/nice-modal-react/
https://github.com/eBay/nice-modal-react
DOOM Rendered via Checkboxes
這是一個很有意思的項目，使用Checkboxes來渲染DOOM（《毀滅戰(zhàn)士4》），讓你在網(wǎng)頁通過這種方式來玩游戲。
https://healeycodes.com/doom-rendered-via-checkboxes
AnyWebP
一個在線工具，可以把WebP轉(zhuǎn)為JPG/PNG/ICO。
Animated Backgrounds
CSS和JS實現(xiàn)的帶動畫背景的效果合集。
https://animatedbackgrounds.me/
Doodle Ipsum
「Doodle Ipsum」是一個以涂鴉作為測試圖片產(chǎn)生器的在線工具。
提供各種不同樣式的插圖素材，用戶可以在選擇樣式（或隨機）、指定大小比例和背景顏色后產(chǎn)生圖片鏈接，就能將產(chǎn)生的圖片運用在網(wǎng)頁開發(fā)原型、登陸頁面或是任何無代碼工具（No-code tool），例如擁有所見即所得效果的網(wǎng)頁編輯器。
Sapling：展示React組件樹形結(jié)構(gòu)的VS代碼擴展
隨著React項目的大小和復(fù)雜性的增加，查看頁面組件的結(jié)構(gòu)是個費時費力的事情。Sapling在VS Code側(cè)欄中添加了一個依賴關(guān)系樹，用于展示組件的依賴書，并提供跳轉(zhuǎn)到文件的功能。
https://marketplace.visualstudio.com/items?itemName=team-sapling.sapling
周刊首發(fā)于GitHub，歡迎訂閱：
