这是 「MDH:前端周刊」 第 0005 期,发表于:2021/06/07。本期刊开源(GitHub: sorrycc/weekly),欢迎 issue 区投稿,推荐或自荐项目。
封面图:Sergi Ferrete @ www.unsplash.com 。
https://github.com/GoogleChrome/lighthouse/blob/master/changelog.md
Lighthouse 8 会随 Chrome 93 一起发布。
https://blog.chromium.org/2021/06/chrome-92-web-apps-as-file-handlers-new.html
https://developer.chrome.com/blog/new-in-devtools-92/
以下是 DevTools 的改动,
- CSS grid 编辑器
- Console 里 const 声明的变量可以重新声明
- 改进 CORS 调试
- Network 过滤重命名 XHR 为 Fetch/XHR,添加 Wasm 过滤
- Lighthouse 7.5
- 试验:Puppeteer Recorder
https://cpojer.net/posts/building-a-javascript-testing-framework
手写一个测试框架需要几步?
- 快速找到测试文件
- 并行运行所有测试
- 使用断言框架编写测试和报告结果
- 让测试互不影响
此外,基于 jest 的 50 个 package 会让你事半功倍。
https://mp.weixin.qq.com/s/735yMXZr3GNafaS3mEy8lA
得益于现代浏览器内置了模块处理系统(ESM), 业界新兴开发工具 Snowpack、WMR、Vite 等直接将模块解析加载过程直接交给浏览器, Dev Server 能够秒级启动。和传统开发工具编译时解析加载模块最终打包到 JS Bundle 中相比,本地开发体验提升明显。
作者借鉴 Vite 的思路实现了一个 Unbundled Dev Server,不直接用 Vite 的原因是:
- 依赖预处理过程需要深度定制
- 深度定制需求
- 后续维护与发展
依赖预处理用 CJS 转 ESM 的线上服务是亮点。
https://nathan.vegas/blog/post/1/
https://blog.testdouble.com/talks/2021-06-03-how-to-find-and-remove-dead-css/
https://mp.weixin.qq.com/s/nLlZjMan0mMT0QWAM2jYWA
生成的视频很酷,所以 FateRiddle 是机器人?
https://xie.infoq.cn/article/ddca4caa394241447fa0aa3c0
https://mp.weixin.qq.com/s/EF86vmJfZJ-hUReFHM8HDw
好多不错的 Tip,
- 把一些平时做事的时间换成什么都不做,坐在那“思考”,想一些东西
- 复杂的事哪来?“思考得来”
- 技术与业务两条腿走路
- 发挥稳定型(线性增长)选手比阶段性发挥波峰波谷选手更有优势
- 贝利体系
- 不要担心“做的不好”或“不完美”而不敢同步进展和风险,因为“差的信息”比“没有信息”要好很多
- 不要把自己当做唯一的资源
- “悲观”态度给答复
https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly
https://css-tricks.com/svelte-for-the-experienced-react-dev/
https://juejin.cn/post/6968874442554343455
https://www.youtube.com/watch?v=YtcINOj2w5g
https://github.com/wcandillon/love-death-react
https://mp.weixin.qq.com/s/rEhGzBrkRyY_E250hpFLSQ
https://www.swyx.io/prettier-eslint-react/
https://www.smashingmagazine.com/2021/06/getting-started-webpack/
https://pascalpares.appspot.ovh/webassembly-for-javascript-developers/
https://codepen.io/denic/pen/GRoOxbM
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
https://github.com/devongovett/dprint-node
A node API for the dprint TypeScript and JavaScript code formatter.
https://github.com/kucherenko/jscpd
检测代码重复度。
https://github.com/sorrycc/toy-vite
手写一个 Vite。
https://github.com/danger/danger
提供一些 code review 相关工具,包含各个语言。
https://github.com/daybrush/moveable
Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://github.com/sablejs/sablejs
使用 JavaScript 编写的更快更安全的 JavaScript 解释器,其可以用来:
- 执行沙盒(类似于Figma的插件沙盒,但是更易于使用)
- 小游戏/小程序的动态执行
- 通过将 JavaScript 编译为 opcode 进行代码保护
已覆盖约 95% 的 test262 es5-tests cases。
https://github.com/tree-sitter/tree-sitter
An incremental parsing system for programming tools.
https://github.com/chilllab/react-nice-avatar
基于 Option 生成 avatar 头像。
https://movie.douban.com/subject/35133009/
http://www.vgtime.com/game/11835.jhtml
本周刊每周一发布,同步更新在语雀 「mdh/weekly」 和微信公众号。
微信搜索 「云谦」 或者扫描二维码,即可订阅。
(完)