Web開發利器推薦（一）

看到一個很棒的系列，介紹了不少對web開發頗有幫助的利器，解決了不少開發中遇到的繁雜事，翻譯來分享一下：

---

Prepros

這是很讚的預處理程序。 Prepros能編譯不少種語言 (LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml, Markdown)，實時壓縮和鏈接JS，優化圖片，當CSS或HTML變化時自動刷新瀏覽器，多設備測試。

因此你不用購買Liverload 和 Ghostlab，Prepros是開源、免費的。 相似的功能只能經過Grunt實現，但Prepros讓事情變得簡單。

付費版本提供了 1-Click FTP/SFTP 部署、遠程設備的檢查和調試、其餘有用的解決方案。

Brackets

Adobe團隊用NodeJS爲web程序員開發的開源編輯器。 它的界面有點像 Sublime Text，它有實時自動加載工具、插件系統、HTML/CSS/JS自動補全。 Brackets容許在HTML文檔裏編輯CSS，按下CMD/CTRL + E後，找到相應選擇器。 裏面還不少像CSS過渡編輯器這樣的智能工具。

VerbalExpressions

誰不愛寫正則表達式？ 若是用VerbalExpressions寫JavaScript進行URL檢查的正則表達式可能會像這樣：

// Create an example of how to test for         correctly formed URLs
var tester = VerEx()
        .startOfLine()
        .then( "http" )
        .maybe( "s" )
        .then( "://" )
        .maybe( "www." )
        .anythingBut( " " )
        .endOfLine();

// Create an example URL
var testMe = "https://www.google.com";

// Use RegExp object's native test() function
if( tester.test( testMe ) ) alert( "We have a correct URL "); // This output will fire
else alert( "The URL is incorrect" );

VerbalExpressions也能操做 Ruby, C#, Python, Java, Groovy, PHP, Haskell, C++, Objective-C的正則。

HTML.js

這個是 fork 自 Voyeur.js 的庫，壓縮後才2KB，語法良好，用於遍歷和操做DOM。

查找元素

HTML.div.h1; // body>div>h1, return H1 elent
HTML.div.h1.innerHTML = "Ilya Pestov"; 
HTML.div.ul.li; // return array of li elements

HTML.find("#example"); // return one node
HTML.find(".example"); // return array of nodes
HTML.find("#example").h1.em;

回調函數

HTML.tag...use( callback(element) ) Root HTMLElement

HTML.div.ul.li.use(); // return div element
HTML.div.ul.li.use(function(li, i) {
        // loop in list 
        li.innerHTML = "List item #" + i;
});

HTML.div.ul.use(function(ul) {
        ul.style.background = "blue";
        ul.li; //..
});

建立元素

HTML.create.tag...mult( factor ) Array

HTML.create.div; // return div element
HTML.create.div.h1; // return H1 with div parent
HTML.create.div.h1.em;

HTML.create.ul.li.mult(10).use(function(li, i) { // create 10 li elements 
     li.innerHTML = "Created list items!"; // 
});

//HTML.tag...eq( begin , end ) HTMLElement|Array
HTML.create.ul.li.mult(10).eq(7).innerHTML = "The 8th item.";

HTML.ul.li.eq(2, 6).use(function(li, i) {
     li.create.em.innerText = "Hello World";
});

HTML.js還提供了操做DOM的好方法： .each(), remove(), ify(), ._other(), _fn()等。詳情請看文檔。

LiveScript

LiveScript是一種編譯爲JavaScript的語言。 它能直接映射到JavaScript，能避免重複的樣板。

take = (n, [x, ...xs]:list) -->
  | n <= 0     => []
  | empty list => []
  | otherwise  => [x] ++ take n - 1, xs

take 2, [1 2 3 4 5] #=> [1, 2]

take-three = take 3
take-three [3 to 8] #=> [3, 4, 5]

# Function composition, 'reverse' from prelude.ls
last-three = reverse >> take-three >> reverse
last-three [1 to 8] #

寫成JS

var take, takeThree, lastThree, slice$ = [].slice;
take = curry$(function(n, list){
  var x, xs;
  x = list[0], xs = slice$.call(list, 1);
  switch (false) {
  case !(n <= 0):
    return [];
  case !empty(list):
    return [];
  default:
    return [x].concat(take(n - 1, xs));
  }
});
take(2, [1, 2, 3, 4, 5]);
takeThree = take(3);
takeThree([3, 4, 5, 6, 7, 8]);


lastThree = function(){
  return reverse(takeThree(reverse.apply(this, arguments)));
};
lastThree([1, 2, 3, 4, 5, 6, 7, 8]);
function curry$(f, bound){
  var context,
  _curry = function(args) {
    return f.length > 1 ? function(){
      var params = args ? args.concat() : [];
      context = bound ? context || this : this;
      return params.push.apply(params, arguments) <
          f.length && arguments.length ?
        _curry.call(context, params) : f.apply(context, params);
    } : f;
  };
  return _curry();
}

git-html5.js

Git在JavaScript下的應用。 相似Brackets的插件，我很確定這是geek們的好幫手。

衆籌: Ghost - 一個博客平臺

據我所知這是第一次衆籌合做的CMS。 做者John O'Nolan的項目在Kickstarter得到了400000美金，是他所需金額的785%。 Ghost 是開源項目，設計美觀，能夠理解的和自適應的管理界面。

Infogr.am

Infographics 不只可以管理大量的信息，也更生動地把數據顯示在時間和空間上，還能統計趨勢。 Infogram 是很是簡單的建立圖表的工具。 它能把圖表，地圖，照片，視頻和數據導入XLS，XLSX或CSV。 據我所知，這是惟一交互式的圖表生成器。 這仍是個社交網絡。 能與朋友分享信息和嵌入到您的網站。

英文原文：Awesomeness & Usefulness for Web Developers
由SegmentFault整理編譯