这里记录一些我用到的或者见到的比较好用方便的前端开发相关的工具吧。
开发工具
-
Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。
-
EditPlus EditPlus是一款由韩国 Sangil Kim (ES-Computing)出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器,你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。
色彩与图标
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。
QQ截图取色-16进制
在按下 Ctrl+Shift+A
后,再按一下 Ctrl
就可以看到截图框下面的颜色代码变成16进制的代码了。
如下图:
普通截图:
按住 Ctrl
:
可以看到第一幅图中的 51, 51, 51 变成了 #333333。
配色
-
日本的一个配色网站。罗列了很多不饱和经典的颜色,当然,自己选配还是很重要的。
-
Adobe 出的在线配色工具,里面有些现成的配色方案还是很不错的。
-
提供了各种预览模式,可以在模板网站中预览,在色块中预览。
图标
-
对中文的搜索支持很好。实际上它是先把中文翻译为英文再搜索的。
-
比上面介绍的那个好用的多,字体图标,不需要考虑像素大小,全部是矢量图。并且图标精美。如果不使用 BootStrap,单独添加图标的话,这一套图标在合适不过了。
-
阿里巴巴制作的图标库。
数据处理
Json
-
将json数据输入进去,会生成一个树形的结构,方便查看每个节点。
展示
reveal.js
-
在网页上展示 slides 幻灯片,太酷了。针对不会代码的人还有一个在线编辑器:http://slides.com
还有一个新手入门教程:Reveal.js Tutorial-Reveal.js for Beginners
本文不定期更新。