# 📖 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 推荐集合

# 🔧 工具类

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

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

工具分类

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

# CSS

# Tailwind CSS 相关

# SVG

# 字体 & 图标

# 图像

# 邮件订阅

# 设计系统

  • 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 周边

# 📚 精品教程

今年主要推荐的都是一些大厂官方出品的教程集合,比如谷歌、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开发测试软件