📖 2021 年度汇总

2021 年收获了不少好用的可以提高生产力的工具，有一些甚至改变了我的开发模式，工作习惯。

介绍几个我认为非常值得推荐的工具：

• Raycast - 它可以代替老牌生产力工具 Alfred，它的插件系统可以创建快速连接、连接 GitHub、Linear 等常用快捷操作，也可以定制自己的插件，对开发者非常友好。
• slidev - 为程序员而生的 Slide/PPT 工具，我用它写了几篇 PPT，同事们都说你的 PPT 也太酷了。我觉得前端开发者的 PPT 就应该酷一点。
• naive-ui - 还不错的 Vue 3 UI 组件库，我们公司的项目已经开始使用 naive-ui 了。
• GitHub Copilot - 不仅仅是一个 VSCode 智能补全插件，甚至想帮你写文章。
• TopNotch - 让你的 2021 款 MBP 假装没“刘海儿”

📈 趋势报告 & Conf

持续关注前端业界发展动态

🔗 站点链接	📄 介绍
State of CSS 2021 (opens new window)	2021 CSS 现状调查
State of Vue.js 2021 (opens new window)	2021 Vue 现状调查，目前还在调研报告收集阶段，你也可以参与其中
Vue Conf 2021 大会PPT与视频回顾 (opens new window)	本年度的第四届中国区 Vue Conf 2021年05月22日在杭州举办，连接为大会PPT与视频回顾资源
第十六届D2前端技术论坛「精心」 (opens new window)	精益求精，体验创新
2021 Javascript 开源社区获奖名单 (opens new window)	由 GitNation 开源基金会策划，社区进行提名的 Javascript 开源项目获奖名单，旨在提倡支持社区优秀的开源项目。

✨ 星推汇总

Github Star 推荐集合

• unified (opens new window)

  ☔️ Unified提供了一系列接口，将文本解析为语法树，使用语法树编译处理文本。以下是 unified 的工作原理

• github1s (opens new window)

  One second to read GitHub code with VS Code. 使用 VSCode 在线浏览托管在 github 代码

  同类型工具 🏄‍♂️ surf. (opens new window)

• Open MCT (opens new window)

  由 NASA Ames 研究中心出品的 Open MCT (Open Mission Control Technologies) 是用于桌面端以及移动端的下一代任务控制框架。 值得一提的是，此页面使用 Vue 开发

• TS Node (opens new window)

  Node.js 端的 TypeScript 执行环境，配合 nodemon，可以实现 Node 端实时编译项目。

  参考 script: nodemon --watch './**/*.ts' --exec 'ts-node' index.ts

• 🐚 zx (opens new window)

  A tool for writing better scripts，用写 ES Modules 的方式写 Shell 脚本。

• slidev (opens new window)

  为开发者打造的演示文稿工具，是 Vue 核心成员 Anthony Fu (opens new window) 的又一力作，开放 Beta 测试仅一个月就收获 1w+ Star 的仓库，佩服 Anthony Fu 的创造力。

• Naive UI (opens new window)

  尤大推荐，最近比较火的基于 Vue 3 搭建的 UI 组件库，截止目前 4.2K Star，由图森未来出品

• petite-vue (opens new window)

  尤大的新玩具，仅 5.8kb 的微型 Vue

• https://github.dev (opens new window)

  Press the . key on any repository or pull request, or swap .com with .dev in the URL, to go directly to a VS Code environment in your browser.

  在 GitHub 任意 Repository 或者 PR 页面按下 . 即可一键开启 GitHub Web Editor.

• unplugin (opens new window)

  Unified plugin system for build tools.

  一个可以统一构建工具而开发的插件系统，编写一次，即可生成 Vite、Rollup、Webpack 可以运行的插件。

• unocss (opens new window)

  The instant on-demand atomic CSS engine.

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

  • 重新构想原子化 CSS (opens new window) - 中文翻译
  • Reimagine Atomic Css (opens new window) - 英文原文

• vitesse-nuxt3 (opens new window)

  Vitesse for Nuxt 3 🏔💚⚡️

  Vitesse 家族新成员，适配Nuxt 3的开发模版

  如果喜欢更轻量、好用的 Nuxt 3 模版，可以参考我的开发模版nuxt3-starter (opens new window)

• tldraw (opens new window)

  小而美的画图工具

• star-history (opens new window)

  The missing star history graph of GitHub repos

  追踪你感兴趣的项目的 star 走势。也可以比较不同仓库之间的差异哦。比如下图：

• Vitest (opens new window)

  A blazing fast unit-test framework powered by Vite ⚡️

  由 Vite 驱动的快速的单元测试框架

  🔗 链接：https://vitest.dev/

🔧 工具类

积累了各种有用的技术栈/解决方案

🔮 传送门
第 25 期
第 26 期
第 27 期
第 28 期
第 29 期
第 30 期
第 31 期
第 32 期
第 33 期
第 34 期
第 35 期
第 36 期

工具分类

汇集了 CSS、SVG、Fonts & Icons、Design System、短链接、Vue技术栈 相关分类的工具

CSS

• Flexbox Playground (opens new window) - 一个可以探索 Flexbox 布局的 Playground
• Glassmorphism CSS Generator (opens new window) - Themesberg 提供的毛边玻璃效果 CSS 生成器
• Neumorphism.io (opens new window) - 用于生成 Neumorphism（新拟物设计风格）的 CSS 样式工具
• 📋 Copy & Paste CSS (opens new window) - 借鉴业界经典的 CSS 案例，提供了可一键复制用于粘贴的 CSS 样式，包括了 Button、Box-shadow、Form Inputs、Color Palettes 等
• couleur (opens new window) - 一个调色板工具🎨
• smooth shadow (opens new window) - 一个可以用于生成平滑阴影效果的小工具
• Shadow Palette Generator (opens new window) - 用于创建逼真的 CSS 阴影的小工具
• Animate Backgrounds (opens new window) - 该站点提供了一些可以应用于网站的动态背景源代码
• Gradient Editor (opens new window) - 一个免费的可以创建渐变色图案的工具，同时可以导出开发者用到的CSS代码
• CSS Specificity Calculator (opens new window) - 一个可视化的CSS选择器优先级权重计算器
• Mobile Color Palette (opens new window) - 🎨 只需选择一个主色调，即可生成适合移动端 App 使用的 UI 调色盘
• conic.css (opens new window) - 简洁、漂亮的 conic gradients 预设集合
• Sass Online Playground (opens new window) - 一个 Sass 在线运行环境

Tailwind CSS 相关

• Windi CSS (opens new window) - 下一代的实用类优先的类库，有完全代替 Tailwind CSS 之势
• Tailwind Mobile (opens new window) - Tailwind CSS 的移动端版本，支持 IOS 以及 Material Design 风格主题，支持 React、Vue、Svelte以及 Angular 框架
• Twind (opens new window) - The smallest, fastest, most feature complete Tailwind-in-JS solution in existence
• Derealize (opens new window) - 一个 Tailwind CSS Editor
• TailwindCSS Buttons (opens new window) - 基于 TailwindCSS 编写的，可以一键复制粘贴各种按钮样式工具
• Tailwind CSS Cheat Sheet (opens new window) - Tailwind CSS Cheat Sheet

SVG

• SVG REPO (opens new window) - 收录了 300.000+ 开源的 SVG ICONS
• SVG API (opens new window) - 通过 API 的方式获取 200k+ SVG Icons
• svgtofont (opens new window) - 将 svg icons 集合打包成字体的工具。支持 TTF/EOT/WOFF/WOFF2/SVG 类型的字体文件
• SVG Backgrounds (opens new window) - 一个快速可以定制 SVG 背景的小工具
• SVGCode (opens new window) - 可以将位图转换为矢量图（SVG）的 PWA 应用
• svgi (opens new window) - 一个用于检查 SVG 文件内容的 CLI 命令行工具

字体 & 图标

• Icon Duck (opens new window) - 提供 108,210 个开源的开源图标
• Flagpack (opens new window) - 260+ 开源的国旗图标集合
• Fraunces (opens new window) - 免费字体资源 Fraunces
• Remix Icon (opens new window) - Remix Icon 是一套面向设计师和开发者的开源图标库。Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的，并确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易读。目前已收录 2271 枚 Icon
• Google Fonts (opens new window) - 谷歌字体库
• 3D ICONS (opens new window) - 该站点提供免费好看的 3D 图标
• IconKitchen (opens new window) - 一款应用 Icon 生成器 For Web
• Iconoir (opens new window) - 一个开源、免费的 SVG 图标集合，目前有 974 枚图标
• Squircley! (opens new window) - 一个界面精美的用于快速生成 icon、logo 背景图案的小工具

图像

• Storytale (opens new window) - 在这里能获取到超过 2835 个高质量的插画，为你的项目添加生机活力。
• error404.fun (opens new window) - 该站点提供了一些Web站点 404 页面可以用到的免费插画
• Mac OSX Remastered Wallpapers (opens new window) - 该站点收集了历年来苹果到 macOS 系统壁纸，可供下载
• figen (opens new window) - 一个用于创建文章封面的小工具，可以定制标题、背景图等
• anywebp (opens new window) -webp 格式图像转换器，该工具提供了双向转换功能，比如 png 转换为 webp, webp 转换为 png
• Avatar (opens new window) - 一个简单的头像剪裁工具
• Free Image Resize (opens new window) - PROMO 提供的一个调整图片大小的工具

邮件订阅

• Bytes.dev (opens new window) - Your weekly dose of JavaScript
• Front-End Front (opens new window) - A crowd curated feed of front-end related articles
• ES.Next News (opens new window) - 5 ECMAScript.next links every week, in your inbox
• 📖 Front-end Tech-stack Share Weekly (opens new window) - 我提供的 Twitter 新闻简报，主要聚焦前端技术栈，每周一和你分享、积累前端技术栈

设计系统

• Naive UI (opens new window) - 尤大推荐，最近比较火的基于 Vue 3 搭建的 UI 组件库，截止目前 4.2K Star，由图森未来出品
• Arco Design (opens new window) - 由字节跳动开源的企业级产品设计系统，包含完善的设计开发资源、灵活丰富的生态平台，同时提供了 React 和 Vue 3.0 版本，值得上手尝试
• Semi Design (opens new window) - 抖音系的企业级产品设计系统也开源了，相比较 Arco Design 而言，生态差了一点，并且暂时没有 Vue 版本的UI库。同一个公司下竞争还挺强烈。😄
• Reach UI (opens new window) - React 无障碍设计系统基础设施
• TDesign (opens new window) - TDesign 是一套完整的 企业级设计体系，拥有基于 Vue / React / 小程序 等技术栈的组件库解决方案。

短链接

• https://vite.new (opens new window) - 这个短地址可以用于快速在 stackblitz 创建一个 Vite 应用
• http://sli.dev/new (opens new window) - 快速在 stackblitz 上创建 Slidev 项目
• https://node.new/nodemon (opens new window) - 快速在 stackblitz 上创建使用 nodemon 运行的应用
• https://vscode.dev/ (opens new window) - 可以在浏览器里直接使用 VSCode 了

Vue 技术栈

• Naive UI (opens new window) - 尤大推荐，最近比较火的基于 Vue 3 搭建的 UI 组件库，截止目前 4.2K Star，由图森未来出品
• petite-vue (opens new window) - 尤大的新玩具，仅 5.8kb 的微型 Vue
• Vitest (opens new window) - 由 Vite 驱动的快速的单元测试框架
• vitesse-nuxt3 (opens new window) | Vitesse 家族新成员，适配Nuxt 3的开发模版
• nuxt3-starter (opens new window) - 更轻量、好用的 Nuxt 3 模版
• vitesse-webext (opens new window) - 作者的目的是让脚手架变得通用，可以兼容多个插件，而我只用它来写 Chrome 插件
• vue-sfc-sandbox (opens new window) - 我开发的一个基于 Vue 3 的在线编译 SFC 的 Sandbox 组件
• vitesse-modernized-chrome-ext (opens new window) - 更现代一点的 Chrome 插件模版，支持 Manifest V3

GitHub 周边

• GitHub Copilot (opens new window) - GitHub 提供的智能代码提示补全VSCode 插件，不仅仅是补全，可能让你编程更顺畅哦。
• star-history (opens new window) - 追踪你感兴趣的项目的 star 走势。也可以比较不同仓库之间的差异哦。
• Giscus (opens new window) - 由 GitHub Discussions (opens new window) 驱动的评论系统
• githubbox (opens new window) - 🏖 将 github 上的仓库地址 github.com 替换为 githubbox.com 即可帮你在 Codesandbox 中打开项目
• Github Skyline (opens new window) - Github 推出的 3D Contributions 统计，也来看看你的 Github Story 吧

📚 精品教程

今年主要推荐的都是一些大厂官方出品的教程集合，比如谷歌、MDN

🔗 站点链接	📄 介绍
Learn CSS (opens new window)	谷歌出品的《学习 CSS》教程，由社区的 CSS 专家联合撰写，有 25 个小章节，在线例子丰富。是不错的 CSS 学习资料
Learn Responsive Design (opens new window)	出自 web.dev 的学习响应式设计教程，共计 16 个章节
New PWA Training (opens new window)	谷歌提供的一些列文章，帮助你上手了解如何开发 PWA 应用
CSS Layout cookbook (opens new window)	MDN (opens new window) 推出的CSS layout cookbook 这本书旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。

💻 应用推荐

增强生产力的好用工具集合

应用	平台	📄 介绍
Rectangle (opens new window)	macOS	Rectangle is a window management app based on Spectacle, written in Swift.
谜底时钟 (opens new window)	iOS	谜底科技开发的时钟 APP，支持漂亮的小组件。
SVG 网页时钟 (opens new window)	Web	简洁的 SVG 网页时钟
wormhole (opens new window)	Web	简洁的 SVG 网页时钟
muzzle (opens new window)	macOS	一个 用途 很有趣的 APP，帮助你缓解在分享屏幕时的因太安静造成的 尴尬
Gitmind (opens new window)	macOS	Gitmind 是一款基于云端的 免费 线上脑图软件，支持线上绘制脑图、流程图、组织架构图、类型图、案例图、ER图、网络拓扑图以及UML图等十多种图形。集思广益，释放创造力。
Raycast (opens new window)	macOS	提升你的生产力的效率工具，有点类似 Mac 上的另一款工具叫 Alfred, Raycast 不仅仅是个查询工具, 它还扩展了一些插件，比如连接 GitHub 提交 issue 等等
Kairo (opens new window)	macOS	一款习惯养成类软件，帮助你成为时间管理大师，界面设计的有点儿可爱。
TopNotch (opens new window)	macOS	一个让2021新款 Macbook Pro 刘海儿 ”变没“ 的小工具
Equinox (opens new window)	macOS	macOS 下可以创建动态壁纸的 App
Obsidian (opens new window)	macOS	macOS 下可基于 Markdown 文件创建本地知识库的 App
Lunacy (opens new window)	macOS	Icons8 出品的免费的设计软件，集成了一些 AI 驱动的工具，比如智能去除图片背景等工具
PAW (opens new window)	macOS	全功能HTTP客户端工具，高级API开发测试软件