周刊收集包含前端（但不限于前端）的文章、新闻、开源我的项目、工具等等，每周一更新。
📖 文章
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
https://juejin.cn/post/7034290086111871007
「全码」通用搭建：古代 Web 研发体系中的新一代低 / 零码搭建
https://zhuanlan.zhihu.com/p/435484949
分析 npm、yarn 与 pnpm 依赖治理逻辑
咱们在我的项目开发的过程中会援用到各种不同的库，各种库又依赖了其余不同的库，这些依赖应该如何进行治理，明天这篇文章次要聊的就是这个事件。
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，欢送订阅：
我的周刊