湖中剑|湖中剑前端周刊 #15 | Whistle 抓包、浏览器原理、echarts做游戏、Sandpack浏览器打包、性能优化湖中剑前端周刊#15|Whistle抓包、

周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。
文章 Whistle 实现原理 —— 从 0 开始实现一个抓包工具
通过这篇文章可以大致了解 Whistle 的实现原理，并学习如何实现一个简单的抓包调试工具。
项目 Github 地址：https://github.com/avwo/whistle
https://mp.weixin.qq.com/s/_MGh5MN7RY2coTblMUV6Yg
使用CSS做一碗营养充足的早餐面
学习本文，你会学会:

:before/:after 伪类元素的使用
巩固 box-shadow 的使用
线性渐变和径向渐变的学习

通过封面我们可以看到这碗丰盛的早餐面共有餐具、煎蛋、面条、葱花、火腿五部分组成，下面咱们来一起看看小包是如何烹饪的。
https://mp.weixin.qq.com/s/UgPqPTcFw5KaF8SbWv3Hjw
如何在 Vue 中使用防抖和节流
在监听频繁触发的事件时，一定要多加小心，比如用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。
这些事件总是被频繁触发，可能几秒一次。如果针对每次事件都发起 fetch 请求（或类似的行为），那显然是不明智的。
我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是防抖（debounce）和节流（throttle）。
在本文中，你会了解到如何在 Vue 组件中使用防抖和节流控制观察者（watchers）和事件处理程序。
https://juejin.cn/post/7034458741990752287
今天不聊中间层，我们来聊聊中间页
平常代码编程中我们会碰到一些交互问题or团队间的合作问题，需要处理链接跳转之间的问题，假如我们作为提供方，需求方来自不同的业务团队，甚至有时来自第三方。
当然不仅限于此，还有很多令人脑壳疼的场景，这时候我们可以提供一个中间页作为对接桥梁，在此页面去揽下所有对接的活。但针对过渡页的合理使用和一些tips，我这里想单独拎一篇小文章出来说说，继续看看吧。
https://juejin.cn/post/7036920014389116941
聊聊vue中的keep-alive
https://mp.weixin.qq.com/s/PXaK6E9TAceoTa5I-PR_hQ
精读《深入了解现代浏览器一》
虽然本文写于 2018 年，但如今依然值得学习，因为浏览器实现非常复杂，从细节开始学习很容易迷失方向，缺乏整体感，而这篇文章从宏观层面开始介绍，几乎没有涉及代码实现，全都是思路性的描述，非常适合培养对浏览器整体框架性思维。
https://mp.weixin.qq.com/s/lqEOHU89JM0ERfC8kdIymg
Web 性能优化：控制关键请求的优先级
构建一个网站服务看似简单：发送 HTML，浏览器识别出接下来需要加载什么资源。然后，我们耐心的等待页面就绪。
你不知道的是，这背后发生了很多事情。你有没有想过，浏览器是如何判断哪些资产需要以什么顺序被请求的？
https://mp.weixin.qq.com/s/P63LEMaXLMyWGYVdLiWxZw
没想到吧！这个可可爱爱的游戏居然是用 ECharts 实现的！
echarts是一个很强大的图表库，除了我们常见的图表功能，echarts有一个自定义图形的功能，这个功能可以让我们很简单地在画布上绘制一些非常规的图形，基于此，我们来玩一些花哨的。
Flappy Bird小游戏体验地址：https://foolmadao.github.io/echart-flappy-bird/echarts-bird.html

湖中剑|湖中剑前端周刊 #15 | Whistle 抓包、浏览器原理、echarts做游戏、Sandpack浏览器打包、性能优化

文章图片

https://juejin.cn/post/7034290086111871007
「全码」通用搭建：现代 Web 研发体系中的新一代低/零码搭建
https://zhuanlan.zhihu.com/p/435484949
剖析 npm、yarn 与 pnpm 依赖管理逻辑
【湖中剑|湖中剑前端周刊 #15 | Whistle 抓包、浏览器原理、echarts做游戏、Sandpack浏览器打包、性能优化】我们在项目开发的过程中会引用到各种不同的库，各种库又依赖了其他不同的库，这些依赖应该如何进行管理，今天这篇文章主要聊的就是这个事情。
https://mp.weixin.qq.com/s/3k4u-jw_iKsBeYyHJoSKMA
Rethink Modal Management
React 组件里的 Modal 部分，应该写在哪，怎么管理其状态，应该困扰过不少朋友。ebay 的开发者提供了一套方案，包含创建、注册和使用 Modal。使用 Modal 提供了多种形态，命令式直接调、结合 hooks 用 useModal 等，并且可以和 redux 结合，方便在 redux devtool 中查看 modal 状态。

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开源的浏览器打包方案。
这次开源两个包：@codesandbox/sandpack-client and @codesandbox/sandpack-react。
sandpack-client负责加载Sandpack以及通信，sandpack-react是针对React的封装库。

文章图片

https://codesandbox.io/post/sandpack-announcement
React PDF Reader
PDF.js的React封装版本。
https://github.com/ZEISS/react-view-pdf
周刊首发于GitHub，欢迎订阅：
我的周刊