# 📖 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 引擎,作者推荐阅读一下他的博文,了解一下原理也是好的。

  • 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

# Tailwind CSS 相关

# SVG

# 字体 & 图标

  • 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 提供的一个调整图片大小的工具

# 邮件订阅

# 设计系统

  • 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 / 小程序 等技术栈的组件库解决方案。

# 短链接

# Vue 技术栈

# 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开发测试软件