关于前端:湖中剑-前端周刊-8-20210913

42次阅读

共计 3757 个字符,预计需要花费 10 分钟才能阅读完成。

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

📰 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 Suffix

https://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,欢送订阅:

我的周刊

正文完
 0