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

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 检测某个网站使用的技术栈

end

LeanCloud，领先的 BaaS 提供商，为移动开发提供强有力的后端支持。更多内容请关注「LeanCloud 通讯」