隨着 Apple、Google 等科技企業一年一度的開發者大會的到來，這些企業旗下產品相關的新資源也隨之放出，比如 Apple 的新的開源數據庫，以及 Google 新推出的移動端手機測速應用。

此外，GitHub 等平臺還推出了面對新手的 Git 使用課程，也是素質相當過硬的課程。在今天的前端乾貨大合集當中，我們會推薦一些正在興起的新工具，接下來，我們一一介紹。

VuePress

VuePress 是來自 Vue 開發者的新工具，它是使用 Vue.js 來生成靜態網頁的網頁生成器。它可以爲每個頁面預先生成靜態的 HTML 頁面，並且作爲 SPA（單頁應用程序）運行。

其中還附帶一些安裝即可使用的功能，包括 Google Analytics ID、搜索、導航、側邊欄以及 PWA。

網址：https://vuepress.vuejs.org/

IMG-2

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 庫，它適用於靜態圖片，也可以集成到相機中。

網址：https://github.com/tehnokv/picojs