📖 2021-10

聚焦前端，记录过去一个月发现的值得推荐的前端技术栈、文章、教程以及应用，每月28日更新，本期第三十四期。2021 年度第十期。

星推

Github Star 推荐

• unocss

  The instant on-demand atomic CSS engine.

  Antfu 又出新项目了，性能上比 Tailwind 的 JIT 引擎快 200 倍的原子化 CSS 引擎，作者推荐阅读一下他的博文，了解一下原理也是好的。

  • 重新构想原子化 CSS - 中文翻译
  • Reimagine Atomic Css - 英文原文

工具

字节跳动开源项目

这个月的稀土开发者大会上，字节跳动开源了一些比较不错的项目

• Modern.js

  Modern.js 由字节跳动 Web Infra 团队发起的开源项目，目标打造现代 Web 工程体系，提出了一整套现代 Web 开发范式。

• Arco Design

  2021.10.27，由字节跳动开源的企业级产品设计系统，包含完善的设计开发资源、灵活丰富的生态平台，同时提供了 React 和 Vue 3.0 版本，值得上手尝试

  

• Semi Design

  就在前一天，2021.10.26，抖音系的企业级产品设计系统也开源了，相比较 Arco Design 而言，生态差了一点，并且暂时没有 Vue 版本的UI库。同一个公司下竞争还挺强烈。😄

  

短链接

• sli.dev/new - 快速在 stackblitz 上创建 Slidev 项目
• node.new/nodemon - 快速在 stackblitz 上创建使用 nodemon 运行的应用
• vscode.dev/ - 可以在浏览器里直接使用 VSCode 了

Web 工具

• Mantine

  A fully featured React components library

  基于 React 构建的一些 hooks 以及助手类库

• Erase.bg

  顾名思义，一个借助 AI 能力可以擦除图片背景的 Web 工具

• changesets

  一个可以代替 lerna 管理 monorepo 项目的工具

• CSS Specificity Calculator

  一个可视化的CSS选择器优先级权重计算器

• Parametric Color Mixer

  根据一组色彩搭配进行混色的小工具

• devhints

  开发者小抄，提供一些清单，比如 bash shell 命令、es6 语法用法等

• colord

  A tiny yet powerful JavaScript tool for high-performance color manipulations and conversions

  用于操纵颜色的 JS 类库

• Gradient Editor

  一个免费的可以创建渐变色图案的工具，同时可以导出开发者用到的CSS代码

  

• Animate Backgrounds

  该站点提供了一些可以应用于网站的动态背景源代码

资源

• 3D ICONS

  Beautifully crafted open source 3D icons

  该站点提供免费好看的 3D 图标

阅读

• Reimagine Atomic Css

  Vue、Vite 核心成员 Anthony Fu 介绍了什么是原子化 CSS、以及目前的 Utility First 的 CSS库，以及他造的新轮子 unocss ，性能对比TailwindCSS、WindiCSS 有所提升，未来可能会作为 WindiCSS V4 版本的新引擎。比较期待。

往期

下期再见，可以 Watch 本月刊的 GitHub 仓库 github.com/xiaoluobodi…

原文：xiaoluoboding.github.io/monthly/202…