乾貨｜20個前端開發實用工具合集
隨著 Apple、Google 等科技企業一年一度的開發者大會的到來，這些企業旗下產品相關的新資源也隨之放出，比如 Apple 的新的開源資料庫，以及 Google 新推出的移動端手機測速應用。
此外，GitHub 等平臺還推出了面對新手的 Git 使用課程，也是素質相當過硬的課程。在今天的前端乾貨大合集當中，我們會推薦一些正在興起的新工具，接下來，我們一一介紹。
VuePress
VuePress 是來自 Vue 開發者的新工具，它是使用 Vue.js 來生成靜態網頁的網頁生成器。它可以為每個頁面預先生成靜態的 HTML 頁面，並且作為 SPA（單頁應用程式）執行。
其中還附帶一些安裝即可使用的功能，包括 Google Analytics ID、搜尋、導航、側邊欄以及 PWA。
網址：https://vuepress.vuejs.org/
IMG-2
在這裡相信有許多想要學習web前端的同學，大家可以+下web前端學習分享裙：九六零+五零八+九二零，即可免費領取一整套系統的 web前端學習教程！
IMG-2 是一個用來引入新的自定義元素 img-2 的 JavaScript 庫。
它針對新的元素添加了許多優化，這些優化不會同標準的 img 元素混淆，從而真正改變了影象的載入方式。
使用自定義元素的時候，圖片會被預先快取，並且只有在圖片進入使用者視野內的時候，才會從快取中加載出來。
網址：https://github.com/RevillWeb/img-2
Tabler
Tabler 是一個基於 Bootstrap 4 的優雅的儀表盤元件。
這個儀表盤中包含了自定義的圖表、表單、圖示等元素，讓開發人員可以快速構建管理面板。
網址：https://tabler.github.io/
DayJS
DayJS 是一個用來格式化時間和日期的 JS 庫，更重要的是，DayJS 和 Moment.js 類似，它僅有 2Kb 的大小。
如果你想要一個更輕量級的庫，那麼它可能是個不錯的選擇。
網址：https://github.com/xx45/dayjs
UnifiedArchive
UnifiedArchive 是一個用來處理壓縮檔案的 PHP 庫，它支援各種格式，包括 RAR、Zip、Gzip、Tar 等許多不同的壓縮包型別。
此外，它還提供一些 API 來處理從壓縮包中提取的檔案。
網址：https://github.com/wapmorgan/UnifiedArchive
Github Learning Lab
Github 剛剛釋出了一個完全免費的課程，涵蓋了如何使用 Github 和 Git。
目前，其中包括了5門課程，你可以從中學到不少幫你帶來便捷的知識，比如如何使用 Github 託管程式碼，如何使用 Github 來獲得免費的專案、站點和部落格，以及如何管理和合並有衝突的專案，如何和開發人員一起協同工作等等。
網址：https://lab.github.com/
WordPress UnitTest DOM Parser
如果你要為 WordPress 做單元測試，需要測試 DOMElement 的時候，這些來自 Takayuki Miyauchi 的建議非常有用。
Popmotion
這是一個用來製作流暢動畫的JS庫，Popmotion 提供了一種名為 Physics 的 API，讓你可以創建出接近真實效果的動畫。
你可以使用它將動畫輸出為各種不一樣的形式，包括 CSS、SVG，Three.js 甚至 React.js。
網址：https://popmotion.io/
Driver.js
這是一個用來幫你將使用者注意力集中到特定頁面的 JS 庫，如果你想介紹特定的功能，或者將使用者引導到特定的任務中的時候，可以使用它。
Driver.js 大小僅有4KB，可以自定義，並且對於鍵盤操作非常友好。
網址：https://kamranahmed.info/driver
Replace Animated GIF with Video
GIF 如今已經幾乎無處不在了，但是 GIF 常見的問題在於，它非常之大，這不僅浪費頻寬，而且素質往往不高。
Google 所提供的這個指南教你如何使用視訊來替代 GIF。
Text Mask
這是一個用來轉換特殊格式文字的 JS 庫，它可以用來格式化電話號碼、貨幣或者信用卡號碼等。
在使用者輸入文字的時候，其中的特定內容會被格式化，從而達到改善使用者體驗的目的。
網址：https://github.com/text-mask/text-mask
Compare Mobile Site Speed
這個比較移動端網頁載入速度的工具是 Google 所開發的，讓你可以更為便捷地在手機上檢測網站在移動端上的載入速度，在檢測過程中，你除了可以選擇特定的網站之外，還能選擇特定的國家。
VueNut
在使用 Vue.js 和 Vuex 來構建 Web 應用的時候， VueNut 是你的好夥伴，VueNut 可以更為輕鬆地幫你探索所儲存的資料狀態，並且可以在開發過程中輕鬆地操控這些資料。
網址：https://lusaxweb.github.io/vuenut.org/
FoundationDB
最近，蘋果在 Github 上將 FoundationDB 開源了。
這是一個用來匹配關鍵資料的資料庫系統，它有著良好的擴充套件性和強大的效能。
現如今，越來越多的大型公司開始開源他們的產品，這本身就是一件很酷的事情。
網址：https://github.com/apple/foundationdb
StoryBooks
StoryBooks 是一個獨立的用來構建 React 元件的工具，它在瀏覽器中執行的時候有一整套的UI，可以用來檢視每個元件的不同的狀態。
網址：https://github.com/storybooks/storybook
GhostText
GhostText 是一個瀏覽器拓展，它可以讓你在瀏覽器中編輯的內容和文字編輯器中的內容同步。
如果你同時喜歡在瀏覽器中調整程式碼也喜歡在本地的文字編輯器中寫程式碼的話，那麼它是非常有用的。它適用於 Chrome、Firefox 和 Opera。
網址：https://github.com/GhostText/GhostText
Coala
Coala 是一個 CLI，它提供了一個可以用來檢視和修復程式碼的介面，無論你使用哪種語言。
你可以在程式碼編輯器中使用 Coala，將其與 CI 整合，並且使用.coafile 中的配置語法對其進行自定義。Coala 支援許多語言，比如 CSS、JS、PHP等。
網址：https://coala.io/
ReactStrap
ReactStrap 是一個轉換為可重用的 React 元件的 Bootstrap4 的元件合集。
如果你想針對舊有的 Bootstrap 網站進行更為現代的改造，可能會用到這個庫。
網址：https://reactstrap.github.io/
Reacto
Reacto 也是一個基於 React 工具，它是一個在 Electron 的基礎上搭建起來的整合開發環境，主要被設計使用 ReactJS 開發 Web 應用。
如果你的開發工作主要是圍繞著 ReactJS 進行的話，它是非常順手的。
網址：https://github.com/eveningkid/reacto
PicoJS
這是一個支援人臉檢測的 JS 庫，它適用於靜態圖片，也可以整合到相機中。