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整理編譯