周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。
发布
Taro 3.5 canary 发布:支持适配 鸿蒙
Next.js 强劲对手来了!💿 Remix 正式宣布开源
📖 文章
为什么 Web3 与区块链有关
互联网迄今有两个阶段:Web 1.0 和 Web 2.0。
下一个阶段自然就是 Web 3.0(简称 Web3)。本文谈谈我对 Web3 的一些初步理解,它到底是什么。
React 轮播动画探索
我们的产品大大管它叫氛围气泡,在很多应用(淘宝、抖音、bilibili)的直播间场景都会有类似这样营造氛围感的组件,能够让你感知到其他用户在当前直播间的行为。
100行代码实现React核心调度功能
想必大家都知道React有一套基于Fiber架构的调度系统。这套调度系统的基本功能包括:
- 更新有不同优先级
- 一次更新可能涉及多个组件的render,这些render可能分配到多个宏任务中执行(即时间切片)
- 高优先级更新会打断进行中的低优先级更新
本文会用100行代码实现这套调度系统,让你快速了解React的调度原理。
LOOK 直播活动地图生成器方案
对于前端而言,与视觉稿打交道是必不可少的,因为我们需要对照着视觉稿来确定元素的位置、大小等信息。如果是比较简单的页面,手动调整每个元素所带来的工作量尚且可以接受;然而当视觉稿中素材数量较大时,手动调整每个元素便不再是个可以接受的策略了。
在最近的活动开发中,笔者就刚好碰到了这个问题。这次活动开发需要完成一款大富翁游戏,而作为一款大富翁游戏,地图自然是必不可少的。在整个地图中,有很多的不同种类的方格,如果一个个手动去调整位置,工作量是很大的。那么有没有一种方案能够帮助我们快速确定方格的位置和种类呢?下面便是笔者所采用的方法。
JS 的 6 种打断点的方式,你用过几种?
Debugger 是前端开发很重要的一个工具,它可以在我们关心的代码处断住,通过单步运行来理清逻辑。而 Debugger 用的好坏与断点打得好坏有直接的关系。
Chrome Devtools 和 VSCode 都提供了 Debugger,它们支持的打断点的方式有 6 种。
Webpack 实战系列一:正确使用 Sourcemap
Sourcemap 协议最初由 Google 设计并率先在 Closure Inspector 实现,它能够将经过压缩、混淆、合并的代码还原回未打包状态,帮助开发者在生产环境中精确定位问题发生的行列位置。
发展至今,Sourcemap 已广泛受 Webpack、Rollup、Babel、Less、Typescript、Chrome、Safari、VS Code 等工具支持。
V8 编译浅谈
本文是一个 V8 编译原理知识的介绍文章,旨在让大家感性的了解 JavaScript 在 V8 中的解析过程。本文主要的撰写流程如下:
- 解释器和编译器: 计算机编译原理的基础知识介绍
- V8 的编译原理: 基于计算机编译原理的知识,了解 V8 对于 JavaScript 的解析流程
- V8 的运行时表现: 结合 V8 的编译原理,实践 V8 在解析流程中的具体运行表现
基于 Vite 搭建开发体验超级丝滑的 Vue3 组件库开发框架
我们这次就要来搭建这么一套体验超级丝滑的组件库开发框架。先上一个最终成果的例子,随后再一步一步地教大家去实现。
在线体验:jrainlau.github.io/MY-Kit/inde…
🛠 工具、软件
Github Wrapped
年底了,你可以在 Github Wrapped 上看到自己的年度报告。
下图是我的:
周刊首发于GitHub,欢迎订阅: