# 📖 2020 年度汇总

# 📰 业界动态

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

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

🔗 站点链接	📄 介绍
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 年社区和开发者报告，主要包含了全球开发者工作与生活平衡情况、赋能社区健康以及全球软件安全报告三个部分。

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

工具分类

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

Svg Spreact (opens new window) - Public endpoint to generate SVG Sprites
SVG Path Visualizer 📐 (opens new window) - Enter a SVG path data to visualize it and discover all its different commands
SVG Favicon Maker (opens new window) - 可以用字母、Emoji制作 SVG 格式的 Favicon。
SVG Path Editor (opens new window) - 一个在线的免费的 SVG Path 编辑器

Nice Color Palettes (opens new window) - A JSON of the top color palettes on ColourLovers.com, as RGB hex strings.
BackgroundCheck (opens new window) - Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.
colorcube.js (opens new window) - Dominant color extraction from RGB images—DOM port of Ole Krause-Sparman's algorithm
Color Thief (opens new window) - 一个可以抓取图片中使用过哪些颜色的工具
palettelist (opens new window) - pick 2 colors to generate your palettes
Sorted Colors (opens new window) - Sorted Colors a tool to sort the named CSS colors in a way that it shows related colors together.
chroma.js (opens new window) - Chroma.js is a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales.

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.

Layoutit! (opens new window) - Layoutit! is a CSS Grid Generator.
Grid Graden (opens new window) - A game for learning CSS grid layout 🥕
Griddy (opens new window) - Learn the CSS Grid!
Introduction To CSS Grid Layout (opens new window) - Firefox 为开发者准备的 CSS Grid Layout 上手教程

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 的小工具，已上手，很好用。