網頁離不開設計更離不開前端的實現，無論是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，可以幫你更快地寫代碼。

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