前端速來！2017年6月前端開發者干貨大合集

每個月的前端開發者干貨素材大合集，相對而言更加專注于為網頁設計師和前端開發者搜集相關的工具和素材，這次的大合集當中包含一款頗為有趣的屏幕錄像軟件，幾款適用范圍較廣的基于Material Design的框架，還有一些性能測試庫也非常好用。這些前端工具與素材功能各不相同，總會有一兩款是你感興趣，甚至正好想要的~

Kap

Kap 是一款設計精巧的macOS 屏幕錄像軟件，它是基于Web技術來搭建的開源APP。這款應用中最令人著迷的是它的即時轉碼輸出功能。Kap 是幫你記錄APP的絕佳工具。

Sizzy

Sizzy 是一款用來測試響應式網站的開發工具，它可以幫你在一塊屏幕上測試多個屏幕尺寸下的顯示效果。比起Chrome 內容之的移動端模擬器，Sizzy 要方便太多。值得一提的是，它也是Chrome 瀏覽器插件。

Muse UI

Muse UI 是一款基于 Vue.js 2.0 采用Material Design 風格的 UI 庫，其中包含了諸如 Appbar、Card 和 Dialog 這樣典型的Material design 風的控件。在它的基礎上快速構建UI是個不錯的選擇。

Advanced WP-CLI

作為一名 WordPress 開發者，我我幾乎每天都會用到 WP-CLI 。我最近才發現，WP-CLI 還能讓你在創建主題的時候，作為 PHP UnitTest 的腳手架而存在！下面是 WP-CLI 的開發者 Daniel Bachhuber 所列舉的 WP-CLI 的高級用法列表。

Lunacy

Lunacy 是一款在Windows 平臺下的 Sketch 文檔閱工具。包含文本、柵格」漸變和陰影的Sketch 文檔都可以正常顯示，無需聯網，直接使用，完全免費。

K6

對于每個Web應用而言，速度都很關鍵。但是如何衡量速度呢？這就是K6能幫你搞定的事情了。它會模擬網站的流量，計算加載速度。簡單的說，K6就是測試速度和性能的單元測試工具。

Checker Service

網絡檢測工具也能多，它們常常能夠檢測DNS、加載速度、SEO、安全以及SSL等，今天的這個服務列表當中包含了大量這類檢測工具，其中絕大多數是免費的，還有一部分是提供高階功能的收費工具。

SVGito

SVGito 是一款用來優化 Sketch 生成的SVG文檔的實用小工具，將你生成的SVG 文檔的相應代碼粘貼到 SVGito 當中，就能返還給你優化好的代碼。

Launchaco

想為你的項目起一個沒人用過又足夠好聽的名字以及相應的域名還蠻不容易的，而Launchaco 就是幫你解決這個問題的，它會幫你結合社交媒體（Twitter、Facebook等）的域名和用戶名的信息，幫你生成一個合用的名稱，甚至生成相應的標識。

Obnoxious

這是一組使用CSS生成的獨特的動畫的合集。如果你的內心和大腦不夠堅強的話……還是不要打開它們了，哈哈。

CSS Grid Cheat Sheet

在剛剛學習CSS柵格的時候，碰到新的屬性，新的測試單元，以及全新的Web布局和實戰范例，可能是一件略顯棘手的事情。而今天所推薦的這個工具，就是幫你縮短這個過程，真正落到實地。

Workbox

Workbox 是來自谷歌的一個全新的項目，旨在構建漸進式的Web應用（PWA），它類似于 Yeoman 和 Create React APP，讓你可以通過一行命令來完成一系列的任務。

Mavo

Mavo 是一個來自 Lea Verou的全新開源項目，它是一個能將裸 HTML 標記和一些自定義屬性直接轉換為 Web應用的庫。它和其他的庫（諸如 Backbone、Vue.js 以及 React）相比，更易于使用，因為它能讓技術沒那么專精的用戶同樣可以輕松構建出優秀的Web應用。

Material UI

和 Muse UI類似，它也是一個基于 Material Design 設計語言的UI框架。不過 Material UI 是基于 React 來開發的。所以，選擇 Material UI還是選擇 Muse UI，就要看你的團隊更傾向于 React 還是 Vue.js了。

Lazy Image

Lazy Image 是一個用來按要求加載圖片的自定義 HTML 元素，這個自定義元素在元素對象中提供了一個附加的 .active 對象，可以在任何需要的事件或者用戶交互中觸發它。

Mac CLI

Mac CLI 是一款能夠透過終端來管理你的 macOS 的優秀工具。對于熱衷于使用命令行來控制系統的開發者而言，這是多么實用的東西啊！

Keeping You Awake

KeepingYouAwake 是一款防止Mac進入睡眠狀態的菜單欄小工具，一旦你激活了它，它就能讓你的Mac一直處于開啟狀態。

JSON Feed

JSON Feed 基于 JSON 格式的Feed 標準，它可以借助 WordPress - pluginhre - build 來實現。讓我們同 XML 說再見吧。

Carbon

簡而言之，Carbon 就是 PHP版的 Moment.js。它是一款用來生成可控日期和時間字符串的PHP庫。

SpeedRacer

SpeedRacer 是今天所推薦的另外一款性能單元測試工具。K6是通過模擬用戶訪問的流量來評估性能，而SpeedRacer 則是直接借助瀏覽器來實際測試性能，兩者可以搭配起來使用。

【2016年干貨大合集都在這里】

1. 《干貨｜2016年11月開發者超實用干貨大合集》
2. 《設計師專場！2016年10月設計圈實用干貨大合集第二波》
3. 《開發者福利！2016年10月設計圈實用干貨大合集》
4. 《再來一發！2016年9月設計圈實用干貨第二波》
5. 《開學福利！2016年9月設計圈超實用干貨大合集》
6. 《高溫福利！2016年8月設計圈最新干貨大合集》
7. 《再來！2016年7月設計圈干貨大合集第二波！》
8. 《超贊！2016年7月新鮮出爐的設計圈實用干貨大合集》
9. 《精準投放！2016年六月設計圈超實用干貨大合集》
10. 《月底福利！2016年5月第二波超實用設計圈干貨》
11. 《上手就用！2016年五月設計圈新鮮干貨大合集》
12. 《姍姍來遲！2016年四月設計圈干貨大合集》
13. 《質量保證！2016年三月可靠實用的設計圈干貨》
14. 《多多益善！2016年二月設計圈實用干貨第二波》
15. 《開工福利！2016年二月設計圈實用干貨大合集》
16. 《干貨干貨干貨！2016年第二波設計圈干貨大合集》

原文地址：hongkiat
原文作者：Thoriq Firdaus
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com