开发的过程中经常会使用到的各种辅助软件,学会并灵活的使用这些工具,可以提高开发效率,提高排查问题的速度,达到一个事半功倍的效果;这里我就列出在开发的过程中我会使用的一些工具,分享给大家。
轻量级文本编辑器
Sublime
轻量级文本编辑器,各种使用技巧,前端开发神器,各种插件欲罢不能,如:Emmet、Browser Sync、Markdown Preview(强烈推荐,写博客必备)。
必备浏览器插件
- JetBrains IDE Support。
编辑器和不错的插件组合
- JetBrains IDE Support加上webstorm简直不要太爽。
- sublime加上Browser Sync也非常棒。
色彩与图标
CSS滤镜
-
界面:
有各种各样的滤镜效果,可以直接调节参数观察变化。
值得一提的是,这个网站还有很多其他 css 生成器。
比如:Border Image, Border Radius, Box Shadow, Filter Effects, Multi-Column, Outline Border, Overflow(x,y), RGBa, Text Rotate, Text Shadow, Textarea Resize, Transform
-
可以访问这里去使用这些 css 生成器:CSS Generators
渐变CSS代码生成器
-
Ultimate CSS Gradient Generator
界面如下图:
目前 css 写渐变还很复杂,但是用了这个工具简直太方便了,直接生成 css 代码,还能兼容 ie。
配色
-
日本的一个配色网站。罗列了很多不饱和经典的颜色,当然,自己选配还是很重要的。
-
Adobe 出的在线配色工具,里面有些现成的配色方案还是很不错的。
-
提供了各种预览模式,可以在模板网站中预览,在色块中预览。
图标
-
对中文的搜索支持很好。实际上它是先把中文翻译为英文再搜索的。
-
比上面介绍的那个好用的多,字体图标,不需要考虑像素大小,全部是矢量图。并且图标精美。如果不使用 BootStrap,单独添加图标的话,这一套图标在合适不过了。
-
阿里巴巴制作的图标库。
数据处理
Json
-
将json数据输入进去,会生成一个树形的结构,方便查看每个节点。
展示
reveal.js
-
在网页上展示 slides 幻灯片,太酷了。针对不会代码的人还有一个在线编辑器:http://slides.com
还有一个新手入门教程:Reveal.js Tutorial-Reveal.js for Beginners
本文不定期更新。
如有任何想说的请留言哦,我会根据大家的建议修改有疑义的内容。
欢迎大家关注我的 Github。