前端开发常用免费资源,显著提升工作效率
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 代码
在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993 希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。
图标
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 检测某个网站使用的技术栈
作者:LeanCloud
链接:https://juejin.im/post/6875943665597546510
来源:掘金
前端开发常用免费资源,显著提升工作效率相关推荐
- 常用快捷键整理,提升工作效率!
作者:陌北有棵树,Java人,架构师社区合伙人! IDEA快捷键 方法相关 Ctrl+B 进入方法定义 or 返回方法被调用的地方 Ctrl+Alt+B Ctrl+F12 查看当前类所有方法 Ctrl ...
- 九个特别的工作网站,开发人员的工具箱,可以拥有很多的使用资源,节省大量的时间,并提升工作效率
九个特别的工作网站,开发人员的工具箱,可以拥有很多的使用资源,节省大量的时间,并提升工作效率. 一.Tool.lu-程序员的工具箱 点击进入 网站同样提供了各式各样的在线工具,但该网站侧重于编程方向. ...
- CDN公共库、前端开发常用插件一览表(VendorPluginLib)
============================================================= ==========================前端CDN公共库==== ...
- 前端开发常用技巧(update...)
前端开发常用技巧 JS 1.JavaScript删除子节点的方法 2.JS 动态生成div并添加点击事件 CSS 1.文本溢出处理 2.使用伪类 添加下划线 3.使用伪类 添加下划线 下划线居中 4. ...
- Web前端开发常用的开发工具
Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言.尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要.为了使得Web开发人员能够更加专注于业务层面的开发 ...
- python 提升工作效率_Python那些事——5个提升生产效率的Python开发和配置的小技巧...
在以前,作为一个刚开始使用Python的开发者,我时常为布设一个有效的开发环境感到困扰.找到一套自己能顺畅使用的环境且为此培养一个正确的习惯是很困难的. 之前我一直没有意识到这些事情对我的工作效率影响 ...
- 开发常用镜像资源替换为国内开源镜像(yum,compose,maven,docker,android sdk,npm,国内开源镜像汇总)...
一.国内开源镜像站点汇总 阿里云开源镜像站 (http://mirrors.aliyun.com/) 网易开源镜像站 (http://mirrors.163.com/) 中国科学技术大学开源镜像站 ( ...
- 好用的办公软件可以提升工作效率,常用的都有哪些?
现在很多公司都是在家办公,我们的工作沟通大部分都是在线上,好用的办公软件能把我们的想法最大程度地呈现给团队.工欲善其事,必先利其器.如果要问职场中最不能缺少的是什么,那必须是好用的办公软件.好用的办公 ...
- 工具推荐:程序员必备的 7 个开发工具,让你的工作效率提升200%
如果要想早点完成自己的工作,就必须借助于一些开发工具来提高自己的工作效率,今天就给大家总结一些工作中常用到的工具. Everything 不知道大家在日常工作中会不会遇到这样的情况,每次找文件的时候总 ...
最新文章
- java学习规划-转的
- MySQLinnodb_monitor及死锁检测
- ZendStudio导入一个已有的网站
- JS实现的ajax和同源策略
- jQuery.Validate 验证
- 动画延迟效果css,每个子元素都有延迟的CSS动画
- php 登陆 才能查看,WordPress登录后才能查看网站内容,未登录跳转登录页面教程...
- ztree 实例地址
- Atitit 时间的展示格式与存储格式 目录 1.1. 赛事时间的格式起源	1 1.1.1. 六十[编辑]	1 1.2. 1h 12m 23s 模式 (可读性最好	2 1.3. 日常模式 1:45:
- 红帽linux镜像下载教程,最新版:如何到Redhat官网下载RedHat镜像及申请试用安装序号...
- ORACLE 锁解释
- android前置摄像头拍摄,Android前置摄像头拍摄倒置照片
- python绘制3d动态模型_python+matplotlib库绘制数学3d模型分析图
- freemarker模板生成pdf文件
- 石墨笔记,Onenote,Effie哪个更适合评论家?
- 【计算机网络】知识点整理 第四章 网络层(王道考研视频学习记录)
- 中国大学mooc上的python-Python程序设计及应用(上)
- c++中CreateEvent函数解析(2)
- 计算机类学术论文格式,学术论文格式要求-北京交通大学.doc
- 微信小程序生成分享海报组件