周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。
📖 文章
Whistle 实现原理 —— 从 0 开始实现一个抓包工具
通过这篇文章可以大致了解 Whistle 的实现原理,并学习如何实现一个简单的抓包调试工具。
项目 Github 地址:/avwo/whistle
https://mp./s/_MGh5MN7RY2coTblMUV6Yg
使用CSS做一碗营养充足的早餐面
学习本文,你会学会:
:before/:after 伪类元素的使用巩固 box-shadow 的使用线性渐变和径向渐变的学习
通过封面我们可以看到这碗丰盛的早餐面共有餐具、煎蛋、面条、葱花、火腿五部分组成,下面咱们来一起看看小包是如何烹饪的。
https://mp./s/UgPqPTcFw5KaF8SbWv3Hjw
如何在 Vue 中使用 防抖 和 节流
在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。
这些事件总是被频繁触发,可能 几秒一次。如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的。
我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是 防抖(debounce) 和 节流(throttle) 。
在本文中,你会了解到如何在 Vue 组件中 使用 防抖 和 节流 控制 观察者(watchers) 和 事件处理程序。
/post/7034458741990752287
今天不聊中间层,我们来聊聊中间页
平常代码编程中我们会碰到一些交互问题or团队间的合作问题,需要处理链接跳转之间的问题,假如我们作为提供方,需求方来自不同的业务团队,甚至有时来自第三方。
当然不仅限于此,还有很多令人脑壳疼的场景,这时候我们可以提供一个中间页作为对接桥梁,在此页面去揽下所有对接的活。但针对过渡页的合理使用和一些tips,我这里想单独拎一篇小文章出来说说,继续看看吧。
/post/7036920014389116941
聊聊vue中的keep-alive
https://mp./s/PXaK6E9TAceoTa5I-PR_hQ
精读《深入了解现代浏览器 一》
虽然本文写于 年,但如今依然值得学习,因为浏览器实现非常复杂,从细节开始学习很容易迷失方向,缺乏整体感,而这篇文章从宏观层面开始介绍,几乎没有涉及代码实现,全都是思路性的描述,非常适合培养对浏览器整体框架性思维。
https://mp./s/lqEOHU89JM0ERfC8kdIymg
Web 性能优化:控制关键请求的优先级
构建一个网站服务看似简单:发送 HTML,浏览器识别出接下来需要加载什么资源。然后,我们耐心的等待页面就绪。
你不知道的是,这背后发生了很多事情。你有没有想过,浏览器是如何判断哪些资产需要以什么顺序被请求的?
https://mp./s/P63LEMaXLMyWGYVdLiWxZw
没想到吧!这个可可爱爱的游戏居然是用 ECharts 实现的!
echarts是一个很强大的图表库,除了我们常见的图表功能,echarts有一个自定义图形的功能,这个功能可以让我们很简单地在画布上绘制一些非常规的图形,基于此,我们来玩一些花哨的。
Flappy Bird小游戏体验地址:https://foolmadao.github.io/echart-flappy-bird/echarts-bird.html
/post/7034290086111871007
「全码」 通用搭建:现代 Web 研发体系中的新一代低/零码搭建
/p/435484949
剖析 npm、yarn 与 pnpm 依赖管理逻辑
我们在项目开发的过程中会引用到各种不同的库,各种库又依赖了其他不同的库,这些依赖应该如何进行管理,今天这篇文章主要聊的就是这个事情。
https://mp./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 propsmodal.show({name: 'Nate' });// ...
/@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封装版本。
/ZEISS/react-view-pdf
周刊首发于GitHub,欢迎订阅:
我的周刊