踏入IT行业，我不知道大家是因为它高薪，还是因为对技术的热爱，而我当年误入此行业，完全是因为找不到工作，所以才来做了前端开发的工作，是一种误打误撞上的意外收获，说真心有多喜欢，也太不上来，只是会有点小毛病，只要是看到网站上别人那些漂亮炫酷的动画效果，就会忍不住去看看它的源码，我把这个叫做开发者的职业病，关于这个，我后面写篇文章，跟大家一起来探讨，关于开发者的那些职业小毛病。今天就不做那么多讨论了，当然你也可以在留言区，把你认为程序员应该有的一些优秀职业小毛病，跟大家进行分享讨论。
然而，我今天要重点跟大家分享的是一些前端开发者工具资源，这些资源，不仅可以帮助你提供效率，同时还可以帮助你做出炫酷的界面效果。
下面我就直接把这些资源分享给大家，大家可以根据工具后面的地址去进行直接访问，因为公号平台，不支持直接外链，所以，大家只能复制到浏览器里进行打开。
01、Alertify.js：http://alertifyjs.com/
AlertifyJS是一个用于开发浏览器对话框和通知的JavaScript框架，它不仅提供了默认浏览器对话框的替代，它使得创建自己的界面变得非常简单。
image
02、Alfred：https://www.alfredapp.com/
Alfred是Mac OS X的获奖应用程序，可以通过热键和关键字提高了效率。
03、AlloyUI：http://alloyui.com/
AlloyUI是一个构建在YUI3（JavaScript）之上的框架，它使用Bootstrap（HTML / CSS）为构建高可扩展应用程序提供了一个简单的API。
04、AngularJS：https://angularjs.org/
AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，AngularJS允许您扩展应用程序的HTML词汇表。
image
05、Backbone：http://backbonejs.org/
Backbone.js为Web应用程序提供了具有键值绑定和自定义事件的模型的结构，具有丰富的可枚举功能API的集合，具有声明性事件处理的视图，并通过RESTful JSON接口将其全部连接到现有的API。
06、Bitbucket：https://bitbucket.org/
Bitbucket提供分布式版本控制，让你的团队，你的代码，您的团队轻松协作。
image
07、Colourcode: http://colourco.de/
一款寻找颜色代码的工具。可以修改色调的变化，亮度，饱和度，可以导出为png格式。
08、CSS Comb：http://csscomb.com/
一款可以使你的代码变得优雅的工具。
09、CSSCompressor：http://www.cssdrive.com/index.php/main/csscompressor/
这是一款压缩CSS代码，从而达到增加加载速度并节省带宽的目的。
10、CSS Lint：http://csslint.net/
这是一个开源的CSS代码质量工具。
image
11、CSSCSS：https://zmoazeni.github.io/csscss/
CSS代码冗余分析器。
12、Dabblet：http://dabblet.com/
这是一款交互式的CSS游乐场和代码共享工具。可以保存到Github上。
13、Dromaeo：http://dromaeo.com/
一款JavaScript性能测试套件工具，以Dromaeosaurs命名。
14、Ember.js：http://blog.debugme.eu/front-end-web-developer-tools/emberjs.com
Web应用程序的框架，为每个前端Web开发人员提供应用的工具包。
15、Fontastic：http://fontastic.me/
一个字体图标库网站，快速创建您的图标字体，提升网站加载速度。
image
16、Fontello：http://fontello.com/
图标自定义字体构建工具。
17、Foundation：http://foundation.zurb.com/
可以轻松设计出任何设备上看起来很棒的响应式网站，应用和电子邮件。
18、Framework 7：http://framework7.io/#.Vd7TmPmqqko
全功能的HTML框架，用于构建iOS和Android应用程序。
19、GitHub：https://github.com/
GitHub是人们如何构建软件。 拥有超过1000万人口的社区，开发人员可以使用强大的协作开发工作流程来发现，贡献超过2600万个项目。
20、Grunt：https://gruntjs.com/
JavaScript 的构建工具。
21、HTML5 Boilerplate：https://html5boilerplate.com/
HTML5 Boilerplate可帮助您构建快速，强大和适应性强的Web应用程序或网站。
image
22、HTML5 Please：http://html5please.com/
一个HTML5，CSS3等功能查询工具，在这里就可以知道他们是否可以使用。
23、Icomoon：https://icomoon.io/
IcoMoon应用程序可让您以不同的格式构建和使用您自己的图标集，包括SVG，图标字体或简单的PNG / CSS精灵。
24、JavascriptOO：http://www.javascriptoo.com/
一个可以查看JavaScript项目的示例，类别，安装命令，CDN链接，项目和作者统计信息的工具。
25、jQuery：http://jquery.com/
jQuery是一个快速，小巧，功能丰富的JavaScript库。通过使用多种浏览器的易于使用的API。
26、jQuery UI：http://jqueryui.com/
jQuery UI是在jQuery JavaScript库之上构建的一组用户界面交互，效果，小部件和主题。无论您是建立高度互动的Web应用程序，还是只需要在表单控件中添加日期选择器，jQuery UI就是完美的选择。
27、JS Hint：http://jshint.com/
JSHint是一个社区驱动的工具，用于检测JavaScript代码中的错误和潜在问题，并强制执行团队的编码约定。 它非常灵活，因此您可以轻松地将其调整为您期望代码执行的特定编码准则和环境。
28、JSFiddle：https://jsfiddle.net/
使用JSFiddle代码编辑器在线测试您的JavaScript，CSS，HTML或CoffeeScript。
[图片上传中...(image-11e61a-1531758385854-6)]
29、JSontoHTML：http://json2html.com/
json2html是一个开源的JavaScript库，它使用JSON模板将JSON对象转换为HTML。
30、LightTable：http://lighttable.com/
Light Table通过即时反馈将您连接到您的创作，并通过代码显示数据值。
31、LiveReload：http://livereload.com/
LiveReload监控文件系统中的更改。 一旦您保存文件，就会根据需要进行预处理，浏览器将被刷新。
32、Meteor：https://www.meteor.com/
Meteor是一个完整的开源平台，用于以纯JavaScript构建网络和移动应用。
image
33、Modernizr：http://modernizr.com/
Modernizr使您轻松编写条件JavaScript和CSS来处理每种情况，无论浏览器是否支持功能。
34、Normalize.css：http://necolas.github.io/normalize.css/
Normalize.css使浏览器更加一致地呈现所有元素，并符合现代标准。 它只是针对需要规范化的样式。
35、Paletton：http://paletton.com/
用于创建色彩组合的设计器工具。
[图片上传中...(image-70f82f-1531758385854-4)]
36、Pesticide：http://pesticide.io/
一种使用轮廓加速CSS布局调试的工具。
37、PhantomCSS：https://github.com/Huddle/PhantomCSS
PhantomCSS拍摄由CasperJS拍摄的截图，并使用Resemble.js将其与基线图像进行比较，以测试rgb像素差异。PhantomCSS然后生成图像差异，以帮助您找到原因。
38、QUnit：http://qunitjs.com/
QUnit是一个功能强大，易于使用的JavaScript单元测试框架。它由jQuery，jQuery UI和jQuery Mobile项目使用，并且能够测试任何通用的JavaScript代码，包括其自身。
39、Responsinator：https://www.responsinator.com/
响应者帮助网站制作者快速了解自己的响应网站在最流行的设备上的外观。它不会精确地复制它将如何看待，准确的测试总是测试在真实的设备。
40、Responsive：http://responsive.victorcoulon.fr/
用于响应式设计测试的工具。
41、Responsive Design Testing：http://mattkersley.com/responsive/
这个是一个为了帮助您在设计和构建响应式网站时进行测试用的工具。在地址栏（而不是浏览器的地址栏）中输入您的网站的URL，就可以测试出个尺寸下的页面显示效果，非常方便。
[图片上传中...(image-ae52ba-1531758385853-3)]
42、Retinize：http://retinize.it/
RetinizeIt是帮助网页设计师和前端Web开发人员，从PSD的iOS或Retina就绪的网站切片UI元素的一款工具。
**
43、Sass：http://sass-lang.com/**
Sass是世界上最成熟，稳定和强大的专业级CSS扩展语言。 它是超级大国的CSS。
44、Stack Overflow：https://stackoverflow.com/
这个是专业与爱好者程序员的问答网站，里面有大量的问题解答资源。
**
45、Sublime Text 3：http://blog.debugme.eu/front-end-web-developer-tools/www.sublimetext.com/3**
Sublime Text是一个复杂的文本编辑器，用于代码，标记和散文。
你会喜欢光滑的用户界面，非凡的功能和惊人的表现。 崇高的文本3目前处于测试阶段。 尝试一下！
46、Type-o-matic：http://type-o-matic.net/
这是一个可以查找页面上的所有字体的工具。
47、TypeWonder：http://typewonder.com/
TypeWonder可帮助用户在其网站上检查或测试Google Font，而无需实际更改实时网站上的任何内容。
[图片上传中...(image-2f250a-1531758385853-2)]
48、Vue.js：http://vuejs.org/
Vue.js是构建现代Web界面的库。它为数据反应组件提供了一个简单而灵活的API。
49、WebStorm：http://www.jetbrains.com/webstorm/
WebStorm是一款轻巧而强大的IDE，完美适用于Node.js的复杂客户端开发和服务器端开发。
50、What Font Is：http://www.whatfontis.com/
使用什么字体您可以确定您要查找的字体！
51、Wordmark.it：http://wordmark.it/
Wordmark.it旨在通过快速显示使用计算机上安装的字体的任何文本的预览来帮助字体选择过程。
52、Yeoman：http://yeoman.io/
Yeoman是一个可以帮助您启动新项目，制定最佳实践保持高效。
[图片上传中...(image-bc7664-1531758385853-1)]
53、Gulp：http://gulpjs.com/
Gulp是一个基于流的自动化构建工具，它可以缩小和复制所有JavaScript文件或静态图像等。
54、React：https://facebook.github.io/react/
React是一个用于创建用户界面的开源JavaScript库，旨在解决开发单页应用程序时遇到的挑战。
55、Browserify：http://browserify.org/
Browserify可以通过捆绑您的所有依赖项在浏览器中要求（'模块'）。
56、Webpack：https://webpack.github.io/
可以 将许多模块包装成几个捆绑资产的打包构建工具。
57、Babel：https://babeljs.io/
用于编写下一代JavaScript的编译器。应该由每个前端Web开发人员使用。
58、PostCSS：https://github.com/postcss/postcss
PostCSS是一种使用JavaScript插件来转换CSS的工具。
59、cssnext：http://cssnext.io/
cssnext是一个CSS透明器，它允许您使用最新的CSS语法。它将新的CSS规范转换为更兼容的CSS，因此您不需要等待浏览器支持。
60、Visual Studio 2015：
https://www.visualstudio.com/zh-hans/vs/?rr=https%3A%2F%2Fxituqu.com%2F226.html
Visual Studio 2015是一个丰富的集成开发环境，用于为Windows，Android和iOS以及现代Web应用程序和云服务创建令人惊叹的应用程序。
61、Can I Use：http://caniuse.com/
兼容性表格支持HTML5，CSS3，SVG和其他各种浏览器技术。
62、npm：https://www.npmjs.com/
npm是Node.js.的包管理器。它是在2009年创建的一个开源项目，以帮助JavaScript开发人员轻松共享封装的代码模块。
63、ECMAScript 6：http://es6-features.org/#Constants
ECMAScript为常见的数据类型提供了许多短语，可以节省您的时间，并使您的程序更易于阅读。
64、Atom：https://atom.io/
Atom是一个现代化，平易近人的文本编辑器工具，无需配置文件。
65、MaterializeCSS：http://materializecss.com/
这是一款基于Google材料设计的现代化的响应式CSS框架。
66、JSPM：http://jspm.io/
JSPM是SystemJS通用模块加载程序的软件包管理器，构建在动态ES6模块加载器之上。
67、Helium CSS：https://github.com/geuis/helium-css
网站上的许多网页上发现未使用的CSS的工具。 该工具基于JavaScript，并从浏览器运行，最后，它会生成一个报告，详细说明每个样式表和在任何给定页面上未找到的选择器。
**68、FontAwesome：http://fontawesome.io/ **
Font Awesome 字体可提供可缩放矢量图标,以及修改图标大小、颜色、阴影以及任何可以用CSS的样式。
**69、Bootstrap：http://www.bootcss.com/ **
这个是比较简洁、直观、强悍的前端开发框架，可以进行响应式开发，但有的属性对于ie8以下的浏览器不兼容，显示不是很友好，如果你是做主流浏览器开发的话，用它不会错。
**70、Moment.js：http://momentjs.cn/ **
JavaScript 日期处理类库，有多种时间的日期样式。
71、CoffeeScript：http://coffee-script.org/
CoffeeScript 是一门编译到 JavaScript 的小巧语言，CoffeeScript 尝试用简洁的方式展示 JavaScript 优秀的部分。
**72、skrollr：http://prinzhorn.github.io/skrollr/ **
skrollr是一个开源的视差滚动js插件，兼容性极强，可以兼容各种浏览器（包括IE）以及手机端（IOS/Android），基本上没有兼容不了的。
73、PhotoSwipe.js：http://photoswipe.com/
PhotoSwipe.js是JavaScript 的一个图片展示库，是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。
**74、jquery-mobile:http://jquerymobile.com/ **
jquery-mobile是jQuery 团队开发的用于辅助手机端 web app 开发的库，基于 HTML5。
75、interact.js: http://interactjs.io/
interact.js: 一个适用于现代浏览器的，用于处理 手势、拖放、缩放等的库。
76、Ionic：http://www.ionic.wang/
一款接近原生的Html5移动App开发框架 会html css js就可以开发app。
77、Foundation：http://www.foundcss.com
Foundation 中文网 迄今为止最好的响应式前端框架
78、FrozenUI：http://frozenui.github.io/
一款专注移动web前端UI框架工具。
79、materializecss：http://www.materializecss.cn/
基于Material Design的主流前端响应式框架。
80、mui：http://dev.dcloud.net.cn/mui/
最接近原生APP体验的高性能前端框架。
[图片上传中...(image-e1358a-1531758385852-0)]
81、AntDesign：https://ant.design
这个是个基于react的后台UI框架。
82、eleme：http://element.eleme.io/
一个基于vue2.0的UI框架，可以快速实现建站需求。
**83、TypeScript：https://www.tslang.cn/ **
TypeScript是微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
84、CoffeeScript：http://coffee-script.org/
CoffeeScript是一套JavaScript的转译语言，创建者 Jeremy Ashkenas 戏称它是- JavaScript 的不那么铺张的小兄弟。
**85、Less：http://lesscss.cn/ **
Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，可以运行在 Node 或浏览器端。
网友评论