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

HeroPatterns

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

TestCafe

TestCafe 是一款端到斷（e2e）的測(cè)試工具，可以幫你測(cè)試網(wǎng)站和web應(yīng)用，就像真實(shí)用戶在使用它們一樣。當(dāng)它開始測(cè)試的時(shí)候，會(huì)自動(dòng)執(zhí)行一系列的操作，包括啟動(dòng)瀏覽器，運(yùn)行指定的測(cè)試單元，生成報(bào)告，截屏等。

SugarJS

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

MS

這個(gè)方便的JS庫能夠幫你將時(shí)間、數(shù)字和常規(guī)的字符串轉(zhuǎn)換為毫秒，比如 ms('2 days') 就能轉(zhuǎn)換為毫秒 172800000 。

pa11y

pa11y 是一系列優(yōu)秀工具的合集，能夠幫你改善網(wǎng)站和APP的可訪問性。pa11y中包含了用來測(cè)試任何網(wǎng)站的可訪問性問題的CLI，用來顯示錯(cuò)誤、生成報(bào)告的儀表盤，以及針對(duì)像Codehip 或者 Travis 這樣的 CI 工具所設(shè)計(jì)的 CLI。

Feather Icons

這是一套擁有現(xiàn)代設(shè)計(jì)風(fēng)格和氛圍的圖標(biāo)，它基本上可以輕松應(yīng)用于所有的平臺(tái)，包括 iOS、Windows 和 Ubuntu，不論你所設(shè)計(jì)的是網(wǎng)頁還是APP。這些圖標(biāo)是以SVG 格式呈現(xiàn)的，還可以搭配 React 和 Angular 組件。

React Flight

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

BounceJS

這是一個(gè)用來創(chuàng)造彈跳特效的庫，它的動(dòng)效主要是通過CSS3和一些預(yù)設(shè)來實(shí)現(xiàn)的。你可以通過 npm ，bower 來安裝JS庫，簡單的復(fù)制生成的CSS3代碼來應(yīng)用動(dòng)效。

Bojler

Bojler 是一款 email 框架，其中包含了相應(yīng)的HTML代碼規(guī)范，幫你在目前流行的電子郵件客戶端上更好的呈現(xiàn)郵件內(nèi)容。

Devicon

這是一組集合了關(guān)于編程語言、設(shè)計(jì)和開發(fā)工具的圖標(biāo)合集。這些圖標(biāo)都是實(shí)用的SVG和字體格式，而諸如 Firefox、AWS 和 HTML 5 這樣的常見圖標(biāo)也包含在其中。

Now UI Kit

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

T-Scroll

T-Scroll 是一款JavaScript 庫，它提供元素在視窗上可見時(shí)候的動(dòng)效，其中有少量可控選項(xiàng)，和預(yù)設(shè)動(dòng)效。

Ory Editor

Ory Editor 是更加現(xiàn)代的網(wǎng)頁編輯器，Ory編輯器是在React 和 Flux 的基礎(chǔ)上構(gòu)建起來的，由于它可以讓用戶便捷地預(yù)覽效果，從而讓編輯更加方便。你無需學(xué)習(xí)HTML 或者 Markdown 等標(biāo)記語言語法就能自己創(chuàng)建網(wǎng)頁。

TadViewer

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

Smooth Scroll Polyfill

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

Noty

Noty 是一款用來呈現(xiàn)通知的JS庫，它可以輕松地顯示提醒、成功、報(bào)錯(cuò)、警告和信息推送甚至對(duì)話框。Noty 可以同 mo.js、bounce.js 這樣的動(dòng)效庫一起聯(lián)動(dòng)。

HopScotch

Hopscotch 是一款由 LinkedIn 實(shí)例化的開源項(xiàng)目。作為而一個(gè)框架，它可以讓開發(fā)人員更為便捷地添加產(chǎn)品預(yù)覽。

SurveyJS

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

WP GraphQL

GraphQL 是足以替代 REST 架構(gòu)的強(qiáng)大存在，它幾乎支持所有的Web API，而 WP GraphQL 這個(gè)插件則可以讓你的Wordpress 支持 GraphQL 的內(nèi)容插件。對(duì)于 REST 和 GraphQL 的差異，你可以看這里。

Monaco Editor

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

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

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

原文地址：hongkiat
原文作者：Thoriq Firdaus
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com