福利！2017年7月前端開發者超實用干貨大合集

網頁離不開設計更離不開前端的實現，無論是JS庫還是適用于Wordpress 的 GraphQL 都能在特定的時候，解決網站的特定需求。每月都會涌現一批頗為實用的網頁前端干貨，它們都是特定的開發需求下的產物，也許其中正好有你想要的東西呢？

HeroPatterns

這是一組頗為有用的SVG格式的圖案合集，可以用于網站背景這個網站還配備了定制色彩和透明度的設置，你可以通過簡單的復制粘貼添加到CSS當中。

TestCafe

TestCafe 是一款端到斷（e2e）的測試工具，可以幫你測試網站和web應用，就像真實用戶在使用它們一樣。當它開始測試的時候，會自動執行一系列的操作，包括啟動瀏覽器，運行指定的測試單元，生成報告，截屏等。

SugarJS

SugarJS 是一款更加易用、采用更加易讀語法構建的JS庫，可以幫你來操作對象、數組和日期。這套JS庫當中還提供了一些實用的功能，比如 .escapeHTML() ，它可以將HTML 元素轉換為其他的格式。

MS

這個方便的JS庫能夠幫你將時間、數字和常規的字符串轉換為毫秒，比如 ms('2 days') 就能轉換為毫秒 172800000 。

pa11y

pa11y 是一系列優秀工具的合集，能夠幫你改善網站和APP的可訪問性。pa11y中包含了用來測試任何網站的可訪問性問題的CLI，用來顯示錯誤、生成報告的儀表盤，以及針對像Codehip 或者 Travis 這樣的 CI 工具所設計的 CLI。

Feather Icons

這是一套擁有現代設計風格和氛圍的圖標，它基本上可以輕松應用于所有的平臺，包括 iOS、Windows 和 Ubuntu，不論你所設計的是網頁還是APP。這些圖標是以SVG 格式呈現的，還可以搭配 React 和 Angular 組件。

React Flight

這是一個可以在你的應用中構建動畫組件的 React 模塊，它的庫 靈感來源于 Sketch 的規則，你可以在其中輕松快速的向UI 組件添加交互性。

BounceJS

這是一個用來創造彈跳特效的庫，它的動效主要是通過CSS3和一些預設來實現的。你可以通過 npm ，bower 來安裝JS庫，簡單的復制生成的CSS3代碼來應用動效。

Bojler

Bojler 是一款 email 框架，其中包含了相應的HTML代碼規范，幫你在目前流行的電子郵件客戶端上更好的呈現郵件內容。

Devicon

這是一組集合了關于編程語言、設計和開發工具的圖標合集。這些圖標都是實用的SVG和字體格式，而諸如 Firefox、AWS 和 HTML 5 這樣的常見圖標也包含在其中。

Now UI Kit

這是一組基于 Bootstrap 4的響應式界面，其中包了3款可定制的模板和50種元素，除了 HTML 的版本之外，這些UI還包含了PSD和 Sketch 格式的版本。

T-Scroll

T-Scroll 是一款JavaScript 庫，它提供元素在視窗上可見時候的動效，其中有少量可控選項，和預設動效。

Ory Editor

Ory Editor 是更加現代的網頁編輯器，Ory編輯器是在React 和 Flux 的基礎上構建起來的，由于它可以讓用戶便捷地預覽效果，從而讓編輯更加方便。你無需學習HTML 或者 Markdown 等標記語言語法就能自己創建網頁。

TadViewer

Tad Viewer 是一款桌面端查看 CSV 文檔的工具，它可以兼容 大型的數據文件，這款程序可以在 Windows 、macOS 和 Linux 上使用。

Smooth Scroll Polyfill

光滑的滾動效果無疑能夠帶來更加愉悅的用戶體驗，目前這款插件可適用于 Chrmoe、Firefox 和 Opera 這些瀏覽器，使用平滑滾動插件可以模擬 IE 和 Safari 中的平滑效果。

Noty

Noty 是一款用來呈現通知的JS庫，它可以輕松地顯示提醒、成功、報錯、警告和信息推送甚至對話框。Noty 可以同 mo.js、bounce.js 這樣的動效庫一起聯動。

HopScotch

Hopscotch 是一款由 LinkedIn 實例化的開源項目。作為而一個框架，它可以讓開發人員更為便捷地添加產品預覽。

SurveyJS

SurveyJS 是另外一款足夠炫酷的 JS庫，顧名思義，它是一款幫你創造調查問卷的JS庫，其中包含有各種各樣的調查問卷，并且它還被移植到了多個流行的JS框架中，包括 AngularJS，VueJS 和 React。

WP GraphQL

GraphQL 是足以替代 REST 架構的強大存在，它幾乎支持所有的Web API，而 WP GraphQL 這個插件則可以讓你的Wordpress 支持 GraphQL 的內容插件。對于 REST 和 GraphQL 的差異，你可以看這里。

Monaco Editor

Monaco Editor 是一款強大的視覺代碼編輯器，這款編輯器是由微軟所開發的，支持多種語言，包含了 HTML，CSS，LESS，CoffeeScript、PHP 以及 Intellisence，可以幫你更快地寫代碼。

【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