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

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

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

HTML

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 代码

图标

色彩

插画

图片

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

参考

可访问性

部署

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

其他

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

你可能感兴趣的:(前端)