前端开发常用免费资源，显著提升工作效率

Jatin Rao 原作，授权 New Frontend 翻译。

最近几个月我收集了大量可以显著提升开发效率的资源链接，在这篇文章中我会分享其中一些。这些资源对我很有帮助，希望对你也是如此。闲话少叙，下面是一些很棒的免费资源！

HTML

• W3C Markup Validator 检查网页文件的标记是否合法
• Meta Tags 编辑生成用于社交网络等站点的元标签，并预览效果
• Favicon Generator 将 GIF、PNG、JPG 格式的图像文件转换为 ICO 格式

CSS

• W3C CSS Validator 检查 CSS 文件是否合法
• Animate.css 开箱即用的跨浏览器 CSS 动画效果
• animista 按需定制 CSS 动画效果
• CSSeffectsSnippets CSS 动画效果收集，点击某个效果即可复制相应的代码片段至剪贴板
• SpinKit 汇集了实现各种加载效果的 CSS 代码片段
• CSS Minifier 在线 CSS 代码极简化/压缩工具

JavaScript

• JavaScript 30 使用原生 JavaScript 在 30 天内完成 30 个项目
• Codewars 和其他人一起完成真实的代码挑战，提升你的技术
• ESLint 检测、修正 JavaScript 代码的问题
• Prettier 格式化 JavaScript 代码

图标

• Font Awesome 网站开发最流行的图标集
• Feather 简洁美观的开源图标
• Ionicons 精心绘制的开源图标
• Simple Icons 常见品牌的 SVG 图标
• Material Design Icons 轻快、精美的符号图标，包括常见操作和事项
• Tabler Icons 681 枚可定制的开源 SVG 图标

色彩

• Material Design Colors Material Design 色彩
• Flat UI Colors 2 14 组配色、280 种颜色
• Color Hunt 分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感
• Color Space 配色方案、CSS 颜色渐变生成工具
• uiGradients 美观的颜色渐变
• Colors and Fonts 色彩和字体工具
• Coolors 配色方案生成工具

插画

• Undraw 持续更新的精美的 SVG 插画集
• manypixels 免费插画集
• IRA Design 通过调配渐变色、搭配手绘组件定制插画
• Free Illustrations by Lukasz Adam 免费 SVG 插画
• Blobmaker 在线 SVG 形状生成器
• Get Waves 在线 SVG 波形生成器

图片

• Unsplash 可供免费使用的图片
• Pexels 精美的免费图片和视频
• Burst 免费高分辨率图片，可用于网站和商业用途
• ISO Republic 使用 CC0 许可的免费高分辨率图片和视频
• Pixabay 令人惊叹的免费（公共领域）图片和视频站点
• StockSnap.io 精美的免费图片，同样使用 CC0 许可
• Photopea 在线图片编辑工具，支持大量高级功能
• Online Image Compressor 在线图片压缩工具，一次可以压缩多达 20 张图片
• Bulk Resize Photos 最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器）

参考

• Front-end Developer Handbook 2019 前端开发者手册 2019 版，如何学习前端开发实践的全面指引
• HackerRank 2020 Developer Skills Report HackerRank 的 2020 年开发者技能报告，有 116648 名开发者参与调查
• Stack Overflow Developer Survey 2020 Stack Overflow 的 2020 年开发者调查报告，将近 65000 名开发者参与调查
• HTML & CSS 很好的学习 HTML、CSS 的资料
• Refactoring UI 从开发者的角度讲解如何应用特定的策略来设计美观的用户界面
• Airbnb JavaScript Style Guide Airbnb 的 JavaScript 风格指南，算是目前业界最流行的 JavaScript 代码风格指南
• JavaScript & jQuery 很好的学习 JavaScript 和 jQuery 的资料
• You Don't Know JS 深入理解 JavaScript 语言的核心机制
• Eloquent JavaScript 面向编程初学者的 JavaScript 教程
• Learning JavaScript Design Patterns JavaScript 设计模式，面向 JavaScript 和 jQuery 开发者
• Web Content Accessibility Guidelines (WCAG) 2.1 各种让网站的可访问性更好的建议

可访问性

• NV Access Windows 平台下的屏幕阅读器
• ChromeVox Chrome Extension Google 出品的 Chrome 屏幕阅读插件
• axe Chrome Extension 给 Chrome 开发者工具增加可访问性测试的插件

部署

• GitHub Pages GitHub 提供的免费静态网站托管服务
• Netlify 30 秒内部署你的网站
• Vercel 快速部署你的网站
• Surge 只需一个命令就可以发布你的网站
• Heroku 在云端构建、运行你的应用

其他

• web.dev 评测网站性能（基于 Lighthouse）
• Shape Divider 定制各种形状的网站分区 SVG 的工具
• GTmetrix 网页性能分析工具
• Can I Use 前端技术的浏览器支持情况
• Carbon 代码转图片工具
• Wappalyzer 检测某个网站使用的技术栈