Web开发利器推荐（二）

看到一个很棒的系列，介绍了不少对web开发颇有帮助的利器，解决了不少开发中遇到的繁杂事，翻译来分享一下：

Webflow

经过这些服务，一个没有HTML/CSS知识的人，就能在55分钟内搭建一个跨浏览器的页面。 这是为网页设计师准备的完美解决方案，已经有超过26 000人在使用Webflow。 只能免费建立两个项目，想要建立更多项目的收费也很合理。 这个工具真的很酷。

若是你和我同样是个不喜欢GUI的前端，就能够在Webflow上导出几个免费的响应式布局模板。 我还想推荐responsive layout generator 和 Responsive Patterns。

Parallax.js

功能强大、使用简单的视差效果库。

能够给全部的元素应用视觉差效果，经过设置data-depth控制速度。 Parallax.js有一系列的参数：

<ul id="scene"
  data-calibrate-x="false" 
  data-calibrate-y="true"  
  data-invert-x="false"     
  data-invert-y="true"  
  data-limit-x="false"
  data-limit-y="10"
  data-scalar-x="2"
  data-scalar-y="8"
  data-friction-x="0.2"
  data-friction-y="0.8"> 
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>

传递父元素：

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

Intention.js

很小，但颇有用的库，简化了建立彻底自适应布局的开发过程。 用起来很简单。 操做原理如图所示：

Device.js

该脚本相似Modernizr，包含了 ios/android/windows/blackberry phone/tablet landscape/portrait 的 HTML 类。

谈到跨设备开发，我想说起 Risizer -响应设计测试的工具。 有不少相似的服务，可是我认为这种方法是最方便的。

GistBox

GistBox能同步你的Github 的 Gist。 能够经过标签排序，管理方便，随时查看。 它是一个Chrome扩展。

CSS Modal

起初，该项目是由一个团队成员建立的HTML5样板。 CSS Modal-轻松让网站能自适应窗口变化。 首先要添加此代码：

<section class="semantic-content" id="modal-text" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    <div class="modal-inner">
        <header id="modal-label"><!-- Header --></header>
        <div class="modal-content"><!-- The modals content --></div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
        data-dismiss="modal">×</a>
</section>

而后在body的结束标记以前添加modal.js。 这是完成了！

Dotdotdot.js, Uikit, HTML2PDF

最近，我须要用省略号来代表有更多的文字。 但标准文本溢出只能在一句中。 我发现一个好脚本dotdotdot.js，它完美地解决了这个问题。

UIKit——轻量级的web开发框架。

HTML2PDF——基于phantom.js。 还能够在线把HTML转换成PDF。

---

英文原文：Awesomeness & Usefulness for Web Developers #2
由SegmentFault整理编译