湖中剑 前端周刊 #8 | 2021-09-13

390 阅读4分钟

周刊收集包括前端(但不限于前端)的文章、新闻、开源项目、工具等等,每周一更新。

📰 News

Firefox 92 for developers

开发者需要注意的Firefox 92版本升级事项,Firefox 92已于2021年9月7日发布。

developer.mozilla.org/en-US/docs/…

Node v16.9.0

此次更新里包含了一个实现性的”包管理“管理器Corepack,Corepack不仅能够管理npm,还支持Yarn和pnpm。

V8引擎也升级到了9.3版本,带来了 Error cause 以及 Object.hasOwn。

相关阅读:

mp.weixin.qq.com/s/VwoAixWa-…

nodejs.org/en/blog/rel…

📖 文章

探究CSS Paint API

目前仅Chrome(Edge)支持的有趣效果,通过CSS Paint API和JavaScript实现。

css-tricks.com/exploring-t…

React Hooks和Components组件测试

Jest和 React Testing Library都是流行的测试库,但作者认为它们缺乏可视化测试的能力,因为这才是更接近于真实场景。作者使用Storybook来展示测试谜题中一直缺失的一角。

marmelab.com/blog/2021/0…

Next.js应用中的状态管理

本文将介绍一些模式,帮助你避免常见场景中的难题,以及“提供者(provider)地狱”。

www.smashingmagazine.com/2021/08/sta…

为什么用Electron开发应用是可行的

nielsleenheer.com/articles/20…

打包非JavaScript资源(图片、字体、wasm等)

如何引入、打包不同类型的资源,以及注意事项。

web.dev/bundling-no…

DevTools新功能介绍: 多浏览器版

了解开发工具的新功能,不仅仅有Chrome,还有Firefox、Safaro、Edge。

这里的每一个点都有可能帮助你节省开发调试时间。

www.smashingmagazine.com/2021/09/dev…

以生产消费模式设计国际化方案

一个软件产品走向国际市场,在不同的国家和地区使用,必然要在设计软件时考虑国际化。传统的国际化方案面对小型的软件项目,手动维护还比较轻松,但面对大型规模的软件项目,手动维护过程就显得极其繁琐,且容易出错导致问题不断。作者在文中提出了一种新的国际化思路,让国际化的任务处理起来更加系统。

mp.weixin.qq.com/s/QfTf02GrE…

巧用CSS filter,让你的网站更加酷炫!

juejin.cn/post/700282…

太震撼了!我把七大JS排序算法做成了可视化!!

作者偶然看到了一个 Java 的 50 种排序算法的可视化的视频,但是此视频却没给出具体的实现教程,于是他用 JavaScript + canvas 去实现了这个酷炫的效果。

mp.weixin.qq.com/s/jIYgscACv…

隐藏在 Eslint 的 fix 功能中的可以用来面试的算法题

mp.weixin.qq.com/s/4-imp-DKp…

推荐 10 个很“哇塞”的Web“资源”给前端工友,收藏等于学会~

juejin.cn/post/700311…

推荐一款切图神器,设计稿一键导出 Vue/微信小程序 代码

mp.weixin.qq.com/s/LWTdiFs0d…

从零到一实现企业级微前端框架,保姆级教学

juejin.cn/post/700466…

美团-设计稿(UI视图)自动生成代码方案的探索

mp.weixin.qq.com/s/BKPSR4pU8…

web前端运行时动画性能监控

jelly.jd.com/article/601…

从底层实现看 React 表单方案演进(上)

juejin.cn/post/700586…

🛠 工具、软件

Data Table Component 7.0: 灵活强大的React数据表格库

react-data-table-component.netlify.app/?path=/stor…

Colorwaver

一款自动获取相机图片颜色的app,只需要用手机相机对着任何东西,app就会自动获取主要颜色。

github.com/mrousavy/Co…

react-web-editor:一个WYSIWYG编辑器

支持元素拖拽和大小调整的WYSIWYG(所见即所得)编辑器,同时也支持富文本编辑。

github.com/CHEWCHEWW/r…

React Recipes

另一个hooks合集,让你摆脱重复造轮子。

github.com/craig1123/r…

React Render Tracker

帮助你发现无意中制造的重复渲染和卸载问题。

github.com/lahmatiy/re…

use-cannon

怎么才能让动画更真实?一个重要的因素就是物理引擎。

use-cannon就是这样的hooks库,能够助你一臂之力。

demo:cannon.pmnd.rs/#/demo/Ping…

github.com/pmndrs/use-…

react-native-iap

在iOS或Android上接入应用内购功能。

github.com/dooboolab/r…

react-monacoeditor

Monaco Editor组件 For React。

demo: wangchujiang.com/react-monac…

github.com/jaywcjlove/…

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 Suffix

github.com/75lb/rename…

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)

github.com/harrisiirak…

matrix-rain

矩阵数字雨效果(黑客帝国)。

如果电脑有Node环境,可以直接执行 npx matrix-rain查看效果。

github.com/nojvek/matr…

Naming cheatsheet:命名速查表

写代码其中一个难题就是如何给变量、函数命名,我们可以借鉴下别人的成果。

最后,我觉得有必要制定自己的命名规则,保持代码的一致性。

github.com/kettanaito/…


周刊首发于GitHub,欢迎订阅:

我的周刊