XLblog 追逐全栈技术

大话WEB前端开发必备神器

2018-04-02

开发的过程中经常会使用到的各种辅助软件,学会并灵活的使用这些工具,可以提高开发效率,提高排查问题的速度,达到一个事半功倍的效果;这里我就列出在开发的过程中我会使用的一些工具,分享给大家。

轻量级文本编辑器

Sublime

轻量级文本编辑器,各种使用技巧,前端开发神器,各种插件欲罢不能,如:Emmet、Browser Sync、Markdown Preview(强烈推荐,写博客必备)。

必备浏览器插件

  • JetBrains IDE Support。

编辑器和不错的插件组合

  • JetBrains IDE Support加上webstorm简直不要太爽。
  • sublime加上Browser Sync也非常棒。

色彩与图标

CSS滤镜

  • Filter Effects

    界面:

    Filter Effects

    有各种各样的滤镜效果,可以直接调节参数观察变化。

    值得一提的是,这个网站还有很多其他 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

    界面如下图:

    Ultimate CSS Gradient Generator

    目前 css 写渐变还很复杂,但是用了这个工具简直太方便了,直接生成 css 代码,还能兼容 ie。


配色

  • nipponcolors

    日本的一个配色网站。罗列了很多不饱和经典的颜色,当然,自己选配还是很重要的。

    nipponcolors

  • Adobe Color CC

    Adobe 出的在线配色工具,里面有些现成的配色方案还是很不错的。

    Adobe Color CC

  • paletton

    提供了各种预览模式,可以在模板网站中预览,在色块中预览。

    paletton


图标

  • easyicon

    对中文的搜索支持很好。实际上它是先把中文翻译为英文再搜索的。

    easyicon

  • Font-Awesome

    比上面介绍的那个好用的多,字体图标,不需要考虑像素大小,全部是矢量图。并且图标精美。如果不使用 BootStrap,单独添加图标的话,这一套图标在合适不过了。

    Font-Awesome

  • iconfont.cn

    阿里巴巴制作的图标库。

    iconfont


数据处理

Json

  • json editor

    将json数据输入进去,会生成一个树形的结构,方便查看每个节点。

    jsoneditor


展示

reveal.js

本文不定期更新。

如有任何想说的请留言哦,我会根据大家的建议修改有疑义的内容。
欢迎大家关注我的 Github。


下一篇 只图一乐

留言