UI hacking最佳工具(非JSFiddle)

本文是翻译,版权归原作者所有


对于设计师而言,编程最难的地方在于建立你的环境。甚至更糟糕的——仅仅为了能够在某个元素上修改代码,你不得不克隆或安装一个完整的项目。

鉴于此,当我用HTML/CSS/jQuery加快工作时,我常常使用浏览器内的开发环境。但是你应当使用哪一款呢?这取决于你正在做什么:

从头开始hack

你只是需要快速编码。体验一种简单的布局、设计或动画:

http://codemagic.gr/

codemagic截图

好处:

http://liveweave.com/

Liveweave截图

Liveweave就像JSFiddle,但是更好一些。更干净,自动的</>元素闭合,以及方便的类库加载。

使用一个框架或类库

你想使用bootstrap,jQuery,angular或任何工具,用下面其中一个工具:

http://jsbin.com/

jsbin截图

容易添加bootstrap、jQuery、angular及更多的类库。

http://plunker.co

Plunker截图

Plunker允许你编辑多个文件,并导出它们!在云端安装你的下一个app。

演示和宣讲

你想演示你的作品,并从其他hacker得到反馈:

http://codepen.io/

codepen

它是hacker们的Dirbbble【注1】,一个JSFiddle的社会化网络。你能够得到诸如’浏览‘和’喜欢‘的反馈,用户能够评价,你甚至可以把网址推送到手机。

还有许多选择……

选择合适的编辑器真的是一种个人喜好。它们都有些小古怪,与jQuery hacking相比,一些编辑器对CSS hacking更友好。一旦你找到了适合你的浏览器内的编辑器——没有什么能阻止你钻研使你获得灵感的代码!

原文地址:http://williamnewton.co/blog/ui-hacking-in-the-browser/ 注1:Dribble:Dribbble是目前最有影响力、最被人讨论的针对设计者的线上社区之一。许多设计师为了寻找灵感,与设计师同行进行交流切磋等都会到这里来。http://dribbble.com/

译文:UI hacking最佳工具(非JSFiddle) 》| 腊八粥