周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。
📰 News
Firefox 92 for developers
开发者需要注意的Firefox 92版本升级事项，Firefox 92已于2021年9月7日发布。
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/92
Node v16.9.0
此次更新里包含了一个实现性的”包管理“管理器Corepack，Corepack不仅能够管理npm，还支持Yarn和pnpm。
V8引擎也升级到了9.3版本，带来了 Error cause 以及 Object.hasOwn。
相关阅读：
https://mp.weixin.qq.com/s/VwoAixWa-I795bSNNG3sww
https://nodejs.org/en/blog/release/v16.9.0/
📖 文章
探究CSS Paint API
目前仅Chrome（Edge）支持的有趣效果，通过CSS Paint API和JavaScript实现。
https://css-tricks.com/exploring-the-css-paint-api-blob-animation/
React Hooks和Components组件测试
Jest和 React Testing Library都是流行的测试库，但作者认为它们缺乏可视化测试的能力，因为这才是更接近于真实场景。作者使用Storybook来展示测试谜题中一直缺失的一角。
https://marmelab.com/blog/2021/08/31/testing-react.html
Next.js应用中的状态管理
本文将介绍一些模式，帮助你避免常见场景中的难题，以及“提供者（provider）地狱”。
https://www.smashingmagazine.com/2021/08/state-management-nextjs/
为什么用Electron开发应用是可行的
https://nielsleenheer.com/articles/2021/why-electron-apps-are-fine/
打包非JavaScript资源（图片、字体、wasm等）
如何引入、打包不同类型的资源，以及注意事项。
https://web.dev/bundling-non-js-resources/
DevTools新功能介绍: 多浏览器版
了解开发工具的新功能，不仅仅有Chrome，还有Firefox、Safaro、Edge。
这里的每一个点都有可能帮助你节省开发调试时间。
https://www.smashingmagazine.com/2021/09/devtools-cross-browser-edition/
以生产消费模式设计国际化方案
一个软件产品走向国际市场，在不同的国家和地区使用，必然要在设计软件时考虑国际化。传统的国际化方案面对小型的软件项目，手动维护还比较轻松，但面对大型规模的软件项目，手动维护过程就显得极其繁琐，且容易出错导致问题不断。作者在文中提出了一种新的国际化思路，让国际化的任务处理起来更加系统。
https://mp.weixin.qq.com/s/QfTf02GrEXrbCnQswnWFuQ
巧用CSS filter，让你的网站更加酷炫！
https://juejin.cn/post/7002829486806794276
太震撼了！我把七大JS排序算法做成了可视化！！
作者偶然看到了一个 Java 的 50 种排序算法的可视化的视频，但是此视频却没给出具体的实现教程，于是他用 JavaScript + canvas 去实现了这个酷炫的效果。
https://mp.weixin.qq.com/s/jIYgscACvtfkNqr7UTCOgw
隐藏在 Eslint 的 fix 功能中的可以用来面试的算法题
https://mp.weixin.qq.com/s/4-imp-DKpLz4VaCHiGDUkw
推荐 10 个很“哇塞”的Web“资源”给前端工友，收藏等于学会~
https://juejin.cn/post/7003114103094902792
推荐一款切图神器，设计稿一键导出 Vue/微信小程序 代码
https://mp.weixin.qq.com/s/LWTdiFs0dnuXMxP2OFm99Q
从零到一实现企业级微前端框架，保姆级教学
https://juejin.cn/post/7004661323124441102#heading-0
美团-设计稿（UI视图）自动生成代码方案的探索
https://mp.weixin.qq.com/s/BKPSR4pU8tDKcKWJnTXJiQ
web前端运行时动画性能监控
https://jelly.jd.com/article/601fc77d61dbb7014cff31b1
从底层实现看 React 表单方案演进(上)
https://juejin.cn/post/7005866790903529503
🛠 工具、软件
Data Table Component 7.0: 灵活强大的React数据表格库
https://react-data-table-component.netlify.app/?path=/story/getting-started-intro--page
Colorwaver
一款自动获取相机图片颜色的app，只需要用手机相机对着任何东西，app就会自动获取主要颜色。
https://github.com/mrousavy/Colorwaver
react-web-editor：一个WYSIWYG编辑器
支持元素拖拽和大小调整的WYSIWYG（所见即所得）编辑器，同时也支持富文本编辑。
https://github.com/CHEWCHEWW/react-web-editor
React Recipes
另一个hooks合集，让你摆脱重复造轮子。
https://github.com/craig1123/react-recipes
React Render Tracker
帮助你发现无意中制造的重复渲染和卸载问题。
https://github.com/lahmatiy/react-render-tracker
use-cannon
怎么才能让动画更真实？一个重要的因素就是物理引擎。
use-cannon就是这样的hooks库，能够助你一臂之力。
demo：https://cannon.pmnd.rs/#/demo/Pingpong
https://github.com/pmndrs/use-cannon
react-native-iap
在iOS或Android上接入应用内购功能。
https://github.com/dooboolab/react-native-iap
react-monacoeditor
Monaco Editor组件 For React。
demo: https://wangchujiang.com/react-monacoeditor/
https://github.com/jaywcjlove/react-monacoeditor
Renamer：批量重命名文件
Renamer是一个用Node写的命令行工具，可以帮你批量重命名文件。
也支持在JS使用，这样你还可以自定义替换规则。
import path from 'path'
class Suffix {
replace (filePath) {
const file = path.parse(filePath)
const newName = file.name + ' [DONE]' + file.ext
return path.join(file.dir, newName)
}
}
export default Suffixhttps://github.com/75lb/renamer
cron-parser
cron规则解析工具。
* * * * * *
┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ |
│ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun)
│ │ │ │ └───── month (1 - 12)
│ │ │ └────────── day of month (1 - 31, L)
│ │ └─────────────── hour (0 - 23)
│ └──────────────────── minute (0 - 59)
└───────────────────────── second (0 - 59, optional)https://github.com/harrisiirak/cron-parser
matrix-rain
矩阵数字雨效果（黑客帝国）。
如果电脑有Node环境，可以直接执行 npx matrix-rain查看效果。
https://github.com/nojvek/matrix-rain
Naming cheatsheet：命名速查表
写代码其中一个难题就是如何给变量、函数命名，我们可以借鉴下别人的成果。
最后，我觉得有必要制定自己的命名规则，保持代码的一致性。
https://github.com/kettanaito/naming-cheatsheet
周刊首发于GitHub，欢迎订阅：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。