周刊收集包括前端（但不限于前端）的文章、新聞、開源項(xiàng)目、工具等等，每周一更新。
?? 文章
Whistle 實(shí)現(xiàn)原理 —— 從 0 開始實(shí)現(xiàn)一個(gè)抓包工具
通過(guò)這篇文章可以大致了解 Whistle 的實(shí)現(xiàn)原理，并學(xué)習(xí)如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的抓包調(diào)試工具。
項(xiàng)目 Github 地址：https://github.com/avwo/whistle
https://mp.weixin.qq.com/s/_MGh5MN7RY2coTblMUV6Yg
使用CSS做一碗營(yíng)養(yǎng)充足的早餐面
學(xué)習(xí)本文，你會(huì)學(xué)會(huì):
- :before/:after 偽類元素的使用
- 鞏固 box-shadow 的使用
- 線性漸變和徑向漸變的學(xué)習(xí)
通過(guò)封面我們可以看到這碗豐盛的早餐面共有餐具、煎蛋、面條、蔥花、火腿五部分組成，下面咱們來(lái)一起看看小包是如何烹飪的。
https://mp.weixin.qq.com/s/UgPqPTcFw5KaF8SbWv3Hjw
如何在 Vue 中使用 防抖 和 節(jié)流
在監(jiān)聽頻繁觸發(fā)的事件時(shí)，一定要多加小心，比如 用戶在輸入框打字、窗口大小調(diào)整、滾動(dòng)、Intersection Observer 事件。
這些事件總是被頻繁觸發(fā)，可能 幾秒一次。如果針對(duì)每次事件都發(fā)起 fetch 請(qǐng)求（或類似的行為），那顯然是不明智的。
我們需要做的就是減緩事件處理程序的執(zhí)行速度。這種緩沖技術(shù)就是 防抖（debounce） 和 節(jié)流（throttle） 。
在本文中，你會(huì)了解到如何在 Vue 組件中 使用 防抖 和 節(jié)流 控制 觀察者（watchers） 和 事件處理程序。
https://juejin.cn/post/7034458741990752287
今天不聊中間層，我們來(lái)聊聊中間頁(yè)
平常代碼編程中我們會(huì)碰到一些交互問(wèn)題or團(tuán)隊(duì)間的合作問(wèn)題，需要處理鏈接跳轉(zhuǎn)之間的問(wèn)題，假如我們作為提供方，需求方來(lái)自不同的業(yè)務(wù)團(tuán)隊(duì)，甚至有時(shí)來(lái)自第三方。
當(dāng)然不僅限于此，還有很多令人腦殼疼的場(chǎng)景，這時(shí)候我們可以提供一個(gè)中間頁(yè)作為對(duì)接橋梁，在此頁(yè)面去攬下所有對(duì)接的活。但針對(duì)過(guò)渡頁(yè)的合理使用和一些tips，我這里想單獨(dú)拎一篇小文章出來(lái)說(shuō)說(shuō)，繼續(xù)看看吧。
https://juejin.cn/post/7036920014389116941
聊聊vue中的keep-alive
https://mp.weixin.qq.com/s/PXaK6E9TAceoTa5I-PR_hQ
精讀《深入了解現(xiàn)代瀏覽器 一》
雖然本文寫于 2018 年，但如今依然值得學(xué)習(xí)，因?yàn)闉g覽器實(shí)現(xiàn)非常復(fù)雜，從細(xì)節(jié)開始學(xué)習(xí)很容易迷失方向，缺乏整體感，而這篇文章從宏觀層面開始介紹，幾乎沒有涉及代碼實(shí)現(xiàn)，全都是思路性的描述，非常適合培養(yǎng)對(duì)瀏覽器整體框架性思維。
https://mp.weixin.qq.com/s/lqEOHU89JM0ERfC8kdIymg
Web 性能優(yōu)化：控制關(guān)鍵請(qǐng)求的優(yōu)先級(jí)
構(gòu)建一個(gè)網(wǎng)站服務(wù)看似簡(jiǎn)單：發(fā)送 HTML，瀏覽器識(shí)別出接下來(lái)需要加載什么資源。然后，我們耐心的等待頁(yè)面就緒。
你不知道的是，這背后發(fā)生了很多事情。你有沒有想過(guò)，瀏覽器是如何判斷哪些資產(chǎn)需要以什么順序被請(qǐng)求的？
https://mp.weixin.qq.com/s/P63LEMaXLMyWGYVdLiWxZw
沒想到吧！這個(gè)可可愛愛的游戲居然是用 ECharts 實(shí)現(xiàn)的！
echarts是一個(gè)很強(qiáng)大的圖表庫(kù)，除了我們常見的圖表功能，echarts有一個(gè)自定義圖形的功能，這個(gè)功能可以讓我們很簡(jiǎn)單地在畫布上繪制一些非常規(guī)的圖形，基于此，我們來(lái)玩一些花哨的。
Flappy Bird小游戲體驗(yàn)地址：https://foolmadao.github.io/echart-flappy-bird/echarts-bird.html
https://juejin.cn/post/7034290086111871007
「全碼」 通用搭建：現(xiàn)代 Web 研發(fā)體系中的新一代低/零碼搭建
https://zhuanlan.zhihu.com/p/435484949
剖析 npm、yarn 與 pnpm 依賴管理邏輯
我們?cè)陧?xiàng)目開發(fā)的過(guò)程中會(huì)引用到各種不同的庫(kù)，各種庫(kù)又依賴了其他不同的庫(kù)，這些依賴應(yīng)該如何進(jìn)行管理，今天這篇文章主要聊的就是這個(gè)事情。
https://mp.weixin.qq.com/s/3k4u-jw_iKsBeYyHJoSKMA
Rethink Modal Management
React 組件里的 Modal 部分，應(yīng)該寫在哪，怎么管理其狀態(tài)，應(yīng)該困擾過(guò)不少朋友。ebay 的開發(fā)者提供了一套方案，包含創(chuàng)建、注冊(cè)和使用 Modal。使用 Modal 提供了多種形態(tài)，命令式直接調(diào)、結(jié)合 hooks 用 useModal 等，并且可以和 redux 結(jié)合，方便在 redux devtool 中查看 modal 狀態(tài)。
import NiceModal, { useModal } from '@ebay/nice-modal-react';
import HelloModal from './HelloModal';
// ...
const modal = useModal(HelloModal);
// Show the modal and pass arguments as props
modal.show({ name: 'Nate' });
// ...
https://medium.com/@ebaytechblog/rethink-modals-management-in-react-cf3b6804223d
?? 工具、軟件
Sandpack
Sandpack是CodeSandbox開源的瀏覽器打包方案。
這次開源兩個(gè)包：@codesandbox/sandpack-client and @codesandbox/sandpack-react。
sandpack-client負(fù)責(zé)加載Sandpack以及通信，sandpack-react是針對(duì)React的封裝庫(kù)。
https://codesandbox.io/post/sandpack-announcement
React PDF Reader
PDF.js的React封裝版本。
https://github.com/ZEISS/react-view-pdf
周刊首發(fā)于GitHub，歡迎訂閱：
