2016 年我最喜歡的前端工具

又是一年即將過去，正如咱們所預期的同樣，隨着大量涌入的創新、刺激、使人興奮的新工具和技術，Web 平臺正呈現着爆炸式的發展態勢繼續前進。同時，咱們的生活也變得如同開發人員同樣，更加得簡單。

React 和 Angular 等流行工具照舊進行着更新，而像 Vue.js 這樣的新工具已嶄露出了頭角，並迅速地抓住了大量開發者的興趣。

衆所周知，因爲我策劃了一份專一於開發工具的週刊，在研究的過程當中我也趕上了一些荒謬的事情，因此我會更在乎那些流行的工具。可是，對於既有趣又實用的，卻被人們不多留意的工具，我依然表示讚揚。

因此，就像去年同樣，在本文中我將與你們分享，這一年裏我最喜歡的一些專爲前端開發者打造的工具。

Modaal

我老是感受，像是那些具有無障礙特色的工具，在咱們行業中每每都不被看好。因此，我將分享的第一個工具是一個靈活、易用的模態窗口插件。

雖然，咱們不難發現一個模態窗口插件，可是卻不多找到一個具有檢測全部窗口功能及其功能性的插件。這種模態窗口的表現也正如它應該具有的特色同樣——它是響應式的。它能夠基於用戶交互準確地執行（例如，當您敲擊 ESC 鍵時，它會關閉）。同時，它還經過了 Web 內容無障指南 2.0 版的 AA 級別，接受幾乎全部類型的內容，支持全屏操做，而且提供前/後打開和關閉的回調事件，等等。

下面是 CodePen 上的演示，我將經過代碼來示範如何使用它。

可是，使用 Modaal 惟一的缺點是目前它依賴 jQuery，因此不能用 jQuery 的 slim 插件進行構建。我在 CodePen 上演示的是 jQuery 3.1.1 版本，同時我也測試了它在 V2.0 版本中的表現。因此，在 jQuery 1.11.2 及以上版本中，它應該可以正常運行。

Jam API

這個 WEB 服務可以在衆多不一樣的場景中派上用場，而不只僅侷限在前端開發領域。它被描述爲「一種利用 CSS 選擇器可將任何站點轉換爲 JSON 可訪問 API 的服務。」因此，它是一個幫助你抓取內容的工具——可是，CSS 那部分確實會讓前端開發人員感受到頗有趣。

當你使用 API 時，你須要對 Jam API 網站執行 POST 請求，併發送你想要抓取網站的 URL 地址，而代碼將根據你使用的 Node, Ruby 等不一樣的環境進行展現。爲了便於你們瞭解，我將對他們在 GitHub 倉庫上提供的 JavaScript 示例進行演示。使用這個示例，我將構建一個簡單的工具來爲你們展現，如何從個人 CSS values 網站上抓取到任何 CSS 屬性的可能值。

下面是 CodePen 上的演示：

固然，這個例子是毫無心義的，由於 CSS Values 網站已經這樣作了。但能夠經過這個簡單的方式來演示 Jam API 的工做原理。

JavaScript 的關鍵代碼部分以下：

body: JSON.stringify({
  url: 'http://cssvalues.com',
  json_data: '{"values": "#' + prop + ' ul"}'
})

在這裏我輸入了想要抓取的網站地址，而後我使用了 CSS 選擇器來肯定須要抓取頁面的哪一個部分。所以，若是用戶輸入display屬性， JavaScript 將計算以下：

body: JSON.stringify({
  url: 'http://cssvalues.com',
  json_data: '{"values": "#display ul"}'
})

自從搭建了本身的網站後，我知道了每一個 CSS 屬性都有一個 ID 匹配了其屬性的名稱。我還知道了每一個屬性在無序列表中都會列出其值。所以，只要你瞭解 HTML 的結構，獲取這些值對你就是十分有用的。

postcss-grid-kiss

當我第一次看到這個工具時，我認爲它簡直是個笑話。但顯然它是一個真正的 PostCSS 插件，旨在使 W3C 新網格佈局模塊語法變得一目瞭然。

一般狀況下，當咱們使用網格佈局時，CSS 將這樣展現：

body {
  display: grid;
  align-content: space-between;
  grid-template-rows: 120px 1fr 60px;
  grid-template-columns: 150px 1fr;
  grid-template-areas: 
  "header  header"
  "sidebar main  "
  "footer  footer"
}

body > header {
  grid-area: header;
  align-self: start
}

body > .sidebar {
  grid-area: sidebar
}

body > main {
  grid-area: main
}

body > footer {
  grid-area: footer;
  justify-self: center;
  align-self: end
}

可是，當咱們使用了 postcss-grid-kiss，你的寫法將是這樣的：

body {
  grid-kiss:
    "+------------------------------+      "
    "|           header ↑           | 120px"
    "+------------------------------+      "
    "                                      "
    "+--150px---+  +----- auto -----+      "
    "| .sidebar |  |      main      | auto "
    "+----------+  +----------------+      "
    "                                      "
    "+------------------------------+      "
    "|              ↓               |      "
    "|         → footer ←           | 60px "
    "+------------------------------+      "
}

是的，你沒看錯：你基本上可使用 ASCII 字符做爲grid-kiss屬性值來繪製你的網站佈局了。而後，此插件將會幫你處理，相似於第一個代碼塊中顯示的那些與 CSS 等效的代碼內容。

同時，文檔中包含了一個可讓你實時操做語法的地方。它還鼓勵開發人員在其鍵盤上切換插入鍵，並使用其文本編輯器中提供的多光標功能來更有效率的進行網格繪製。

雖然，我不是 PostCSS 的使用者，而只是在實時操做中進行了語法的嘗試。但不管如何，我認爲在列表中增添上這款工具依然是明智之舉。

MJML App

HTML 電子郵件正在蓬勃發展，你可能已經注意到，每月都會有大量的資源和工具正被髮布，它們用來幫助響應式電子郵件進行通信設計和編碼。MJML 應用程序是一款原生的桌面應用程序，你可使用 MJML 建立和編輯響應式 HTML 電子郵件，同時它也是一個編譯爲電子郵件兼容 HTML（即嵌套表代碼）的自定義標記語言框架。

在今年年初，它的框架和應用程序都已發佈了，該應用程序可在 Windows，OSX 和 Linux 上使用。而編輯器也有衆多的主題供你選擇，同時它還支持分屏視圖與實時預覽。

這裏有一個簡單的 MJML 語法示例：

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-text>Testing</mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

您能夠在此 Gist 中瞭解到，它能夠渲染有效的 HTML 。雖然，它確實有些麻煩，但這樣才能使語言和應用程序變得有用——你沒必要擔憂它的兼容性，它會爲你作全部的工做。這款應用程序還支持導出 MJML 或 HTML，你還能夠在 GitHub 中以匿名 Gists 來快速的保存模板。

DevTools Timeline Viewer

這是一個由 Chrome DevTools 團隊出品的官方工具，它支持你輕鬆地查看，並共享你 DevTools 時間軸蹤影的 URLS。Chrome DevTools 中的時間軸選項卡能夠幫助你記錄，並分析你的網絡應用程序的活動狀況。經過對 JavaScript 的分析、圖形等內容，你能夠檢測出潛在的性能問題。

經過捕獲的一些時間線數據（或者經過刷新時間線打開的頁面，要麼經過點擊「記錄」並與頁面交互）你將看到基於捕獲內容的詳細圖形和數據。

當你右鍵單擊時間軸時，你會注意到有「加載時間軸數據」和「保存時間軸數據」的選項。「保存...」選項將爲你導出以 JSON 格式文件的時間軸數據。而後，你能夠將該數據保存到 Dropbox，GitHub Gist 或 Google 雲盤上，以便與他人共享。今後，你能夠很是方便的與遠程工做人員，以及同事共享時間線數據了。

你能夠看到，我使用 Gist 在此處導出的數據示例。若是你還不熟悉 Chrome DevTools 上的時間軸，這是一個瞭解它的好地方。

Notification Logger

這個工具，你能夠很簡單的獲得它。若是你作了大量的 JavaScript 調試工做，你極可能是在使用console.log消息。這比作讓人厭煩的alert()更有用，可是每次你想作一個簡單的日誌時，打開控制檯仍然有點繁瑣。

Notification Logger 即可輕鬆的解決此問題，它使用的 Notification API 將爲你的console.log消息轉換爲桌面通知。當你使用logger.init初始化後，你就能夠僅經過桌面通知，或同時經過桌面通知和 console 控制檯，來調用logger.destroy恢復到正常的console.log功能。

這是有意義的。不只你沒必要打開控制檯來查看日誌消息，因爲消息通知與瀏覽器窗口是分離的，並且你沒必要取消停靠 DevTools 來得到你的原始窗口大小。

Intercooler.js

這個工具已經在 Hacker News 上引發了很多人的注意，同時也出現了關於它如何有用的一些爭議。它被描述爲「具備屬性的 Ajax 」，這也讓它吸引了喜歡使用 Hook HTML 並須要較少 JavaScript 庫的那些人的注意。

該庫經過添加到 HTML 元素的預約義ic- *屬性進行工做，在網站上提供了完整的參考。例如，你可使用ic-target和ic-get-from等屬性來建立一個內置的點擊編輯 UI；使用ic-history-elt添加 URL /歷史記錄支持；使用ic-prepend-from和ic-poll建立暫停/播放 UI. 你也能夠在示例頁面上，得到更多的描述和演示。

該庫惟一的缺點就是它依賴 jQuery（看起來 1.10.2+ 版本支持）。但我猜這不是一個大問題，由於這種類型項目的目標開發人員，極可能是使用 jQuery 的那些人。

Intercooler 承諾你能夠用增量的形式，將 Ajax 添加到現有的應用程序中，而不須要重寫，同時，它也能夠與任何後端技術或其餘 JavaScript 框架一塊兒工做。

榮譽提名

這裏還有一些我今年發現的很酷的東西：

• RE-Build- 使用天然語言構建正則表達式；
• Grunt Unused - 一個 Grunt 任務，用於檢查項目中未使用的文件；（.jpg，.png，.css，.js 等），並經過刪除選項將其輸出到控制檯；
• Just -一個零依賴的 npm 模塊庫，它只作一件事；
• Landmarks –經過鍵盤或彈出菜單來爲視障人士進行網頁導航；
• Atomize - 測試你的網站能夠經過採用 Atomic CSS 得到多少收益；
• Ergo Web Tools - 用於 iPad 桌面級的前端 Web 開發工具；
• FLIP.js –用於執行 FLIP 動畫的輔助庫；
• BackstopJS –自動 CSS 迴歸測試工具。

今年你發現了哪些好用的前端工具呢？

若是你在過去的一年中，也發現了一些不知名的工具或者庫，它們改善了你的工做流程或簡化了一些開發過程，那麼，歡迎在評論中與咱們分享。同時，但願我在本文中說起的這些工具，可以幫助你或你的團隊。

若是以爲文章不錯，不妨點個贊。

注：

1. 因爲譯者水平有限，若翻譯不當之處，還請你們多多指正，我會盡快修改；
2. 本文版權歸原做者全部。如需轉載譯文，煩請註明出處，謝謝！

英文原文：Front-end Tools: My Favorite Finds of 2016
做者：Louis Lazaris
譯者：IT程序獅
譯文源自：http://www.jianshu.com/p/778c7db3ea3d