当前位置: 代码迷 >> 综合 >> 前端开发常用免费资源,显著提升工作效率
  详细解决方案

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

热度:34   发布时间:2024-02-22 09:30:30.0

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

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 检测某个网站使用的技术栈
  相关解决方案