# 📖 2020 年度汇总

# 📰 业界动态

前端框架工具依然在快速更迭,学习不能停

  • Vue 于 2020å¹´9月18日 发布 v3.0
  • React 于 2020å¹´10月20日 发布 v17.0
  • Webpack 于 2020å¹´10月11日 发布 v5.0
  • TypeScript 于 2020å¹´8月21日 发布 v4.0
  • Tailwind CSS 于 2020å¹´11月19日 发布 v2.0

# 📈 趋势报告

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

🔗 站点链接 📄 介绍
The State of Developer Ecosystem in 2020 Infographic (opens new window) JetBrains 开展的第四次年度开发者生态系统调查的汇总结果。2020 年初接受调查的 19,696 位开发者的反馈帮助我们确定了工具、技术、编程语言和开发领域许多其他激动人心的方面的最新趋势。
State of CSS 2020 (opens new window) 2020 CSS 现状调查
State of JS 2020 (opens new window) 2020 JS 现状调查,目前还在调研报告收集阶段,你也可以参与其中
State of Vue.js 2021 (opens new window) 2021 Vue 现状调查,目前还在调研报告收集阶段,你也可以参与其中
The State of the Octoverse 2020 (opens new window) GitHub 在 2020 年底发布了 2020 年社区和开发者报告,主要包含了全球开发者工作与生活平衡情况、赋能社区健康以及全球软件安全报告三个部分。

# 🔧 工具类

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

🔮 传送门
第 13 期
第 14 期
第 15 期
第 16 期
第 17 期
第 18 期
第 19 期
第 20 期
第 21 期
第 22 期
第 23 期
第 24 期

工具分类

汇集了 SVG、Color、Fonts & Icons、CSS Grid 相关分类的工具

# SVG

# Color

# Fonts & Icons

  • FontSpark (opens new window) - a simple tool to help designers quickly find the best fonts for their projects
  • Entypo+ (opens new window) - 411 carefully crafted premium pictograms by Daniel Bruce
  • glow-sans (opens new window) - SHSans-derived CJK font family with a more concise & modern look. 未来荧黑·未來熒黑·ヒカリ角ゴ:基于思源黑体改造,拥有粗度和宽度系列,更加简明现代的超大字体家族。
  • icones (opens new window) - ⚡️ Icon Explorer with Instant searching, powered by Iconify
  • Font Playground (opens new window) - 一个可以玩转字体的可视化工具
  • Phosphor Icons (opens new window) - Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.

# CSS Grid

# JAMStack 技术栈

JAMStack 技术栈相关内容

🔗 站点链接 📄 介绍
JAMStack Themes (opens new window) JAMStack 主题
How to deploy a vue site on Netlify (opens new window) 来自 Sarah Drasner 的小教程
Bejamas (opens new window) 集合了一些 JAMStack 站点模版
VueTelemetry (opens new window) Discover websites made with Vue.js/VuePress/Next.js ...

# 📚 精品教程

2020 我的工作偏向Web动效,所以跟Web动效相关的教程多了一点

🔗 站点链接 📄 介绍
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript (opens new window) Web 端实现一个圆环形的倒计时器
Create a user controlled dark or light mode (opens new window) Web 端实现用户可控制的暗色模式功能
How to use and reuse everything in SVG… even animations (opens new window) SVG 复用可复用的一切,包括动画
Motion Paths – Past, Present and Future (opens new window) SVG 实现 Motion 动画
A user's guide to CSS variables - Increment: Frontend (opens new window) 来自 LEA VEROU 的 CSS Variables 指南
7 Practical Tips for Cheating at Design (opens new window) TailwindLab 团队出品的设计教程,用策略来改善你的设计
What does 100% mean in CSS? (opens new window) Amelia Wattenberger 带你用绝佳的例子了解 CSS 中的单位 100% 意味着什么?
A CSS-only, animated, wrapping underline. (opens new window) 纯 CSS 实现 underline 动效
Full-Bleed Layout Using CSS Grid (opens new window) CSS Grid 布局教程
FLIP Your Animations (opens new window) 使用 FLIP 技术让你的动画保持 60 fps
Debounce VS Throttle: Definitive Visual Guide (opens new window) 用可视化的例子,说明前端开发中,Debounce 和 Throttle 方法的区别
SVG 动画开发实战 (opens new window) 我撰写的《SVG 动画开发实战》小册,由 VitePress 驱动,托管于 GitHub

# 💻 应用推荐

免费or开源的精品软件

应用 平台 📄 介绍
GitPoint (opens new window) iOS GitHub in your pocket
Itsycal for Mac (opens new window) macOS 📅 Mac 端的好用的日历软件
Gifski (opens new window) macOS Convert videos to high-quality GIFs
Nucleo (opens new window) macOS Icon Organizer & Icon Library
Pretzel (opens new window) macOS A smart, simple desktop app that shows and searches keyboard shortcuts based on your currently focused app.
Color Slurp (opens new window) macOS The best Mac color picker in the universe! (free)
Iconset (opens new window) macOS 一站式 SVG 图标管理工具 Organize SVG icons in one place
Responsively (opens new window) macOS 一款前端开发者必备的浏览器响应式调试工具,让你工作起来更容易。重要的是免费
massCode (opens new window) macOS A free and open source code snippets manager for developers. It helps you create and organize your own personal snippets collection and have quick access to it.
Hidden Bar (opens new window) macOS 一个可用于隐藏 Mac 系统的 Menu Bar 的小工具,已上手,很好用。