編者按：很久沒有更新給網(wǎng)頁設(shè)計師和前端開發(fā)者所準(zhǔn)備的干貨素材了，這是來自 Hongkiat 網(wǎng)站的每月(其實是不定期)新素材合集，主要是一些代碼片段、代碼庫以及前端開發(fā)工具。下面是正文。

又到了給前端開發(fā)的同學(xué)分享新素材的時候了。這個月的合集當(dāng)中，我們匯集了針對多種不同的開發(fā)語言的相關(guān)的前端開發(fā)工具，但是，其中最重要的還是幾個能夠幫助開發(fā)者更好更快編寫代碼的工具。

舉個例子，我們找到了一個能夠評估代碼質(zhì)量的 PHP 庫，一個可以自動重構(gòu)代碼的 PHP 庫(是不是超級贊!)，以及使用 JavaScript 庫執(zhí)行端到端測試的簡單方法。多的不說了，咱們來看都有哪些新貨吧!

柵格工具 CSS Grid Generator

這是一個由 Sarah Drasner 所創(chuàng)建的新工具，它能夠讓創(chuàng)建 CSS 網(wǎng)格更加直觀。它可以幫助你在創(chuàng)建復(fù)雜布局的時候(比如創(chuàng)建重疊的網(wǎng)格區(qū)域)的時候節(jié)省更多時間。這款工具能夠自動生成相應(yīng)的代碼，復(fù)制粘貼到你自己的網(wǎng)站即可。

谷歌深入解讀現(xiàn)代瀏覽器原理(英文)

也許你做前端的時間并不短了，但是你真的完全了解現(xiàn)代瀏覽器的工作原理么?這是來自 Google 的系列文檔，幫你全面解析現(xiàn)代瀏覽器的工作原理，帶你一窺現(xiàn)代瀏覽器是如何利用 CPU、GPU 和內(nèi)存等硬件，幫你實現(xiàn)各種各樣的功能。這個系列的文檔的拆解，會有助于編寫性能更高的代碼。其中的插圖來自 Mariko Kosaka，相當(dāng)?shù)腝萌可愛，讓人易于理解。

3D引擎 Zdog

Zdog 是一個 JavaScript 庫，也是一個對于設(shè)計師極為友好的偽3D引擎，讓你可以通過 HTML Canvas 繪制逼真而視覺效果極為突出的 3D 動畫效果。這個 JavaScript 庫的創(chuàng)建者是 Matafizzy，他曾因為制作 Isotope、Flickity 和 Packery 等 JavaScript 庫而出名，如果你對于他的作品感興趣，可以多關(guān)注一下。

儀表盤布局生成工具 UIBot App

UIBot 是一款專門生成儀表盤界面的工具，你只需要簡單的點擊頂部的按鈕，就能自動生成全新的布局和配色!你甚至不需要像在其他的工具當(dāng)中從零開始托拽就能生成布局。不過相應(yīng)的，你最終可能依然不會使用它的布局樣式，但是這并不影響你參考它所生成的布局樣式對不對?

可訪問性檢測插件 Accesibility Insights

這是一個可以幫你測試蘋果網(wǎng)站的可訪問性的插件，它會幫你找到網(wǎng)站中所存在的可訪問性的問題，并且提供解決問題的相關(guān)指南，這款插件有針對 Chrome 瀏覽器和微軟 Edge 瀏覽器的版本。

測試庫 NightwatchJS

這是一個能簡化端到端測試的 JavaScript 庫。NightwatchJS 能夠利用標(biāo)準(zhǔn)的 W3C WebDriver API 連接瀏覽器，并與之交互，并執(zhí)行測試。它支持眾多驅(qū)動程序，包括 WebDriver 服務(wù)、GeckoDriver，并可以在火狐瀏覽器、ChromeDriver 和 SafariDriver 上進行測試。

布局工具 Playroom

Playroom 是一款獨特的工具。簡單地說，它是一個類似布局設(shè)計系統(tǒng)和組件庫的小工具，但是它還能提供預(yù)覽，并且模擬各種不同窗口大小的組件。它的便捷性還體現(xiàn)在顯示布局元素的粒度變化上。

CSS庫 Pylon

PylonCSS 是一款不同于其他 CSS 庫的工具，它提供自定義的組件，而不是單純提供一組類。這讓你可以以類似 iOS 的方式，更加具有表現(xiàn)力地包裝和實現(xiàn)網(wǎng)站效果。舉個例子，我們可以使用 來創(chuàng)建一個水平的元素堆棧，或者使用來創(chuàng)建垂直堆棧。

UI組件合集 Vant

Vant 是一組基于 Vue.js 的構(gòu)建的移動端UI組件合集，整個合集包含超過 55 款不同的組件，并且數(shù)量還在不斷的迭代增加中。它支持 TypeScript，SSR(服務(wù)器端渲染)和 i18n，這意味著你可以將組件中的內(nèi)容直接翻譯為本地語言。

自動化工具 Robo

很多朋友可能已經(jīng)熟悉使用 Gulp 和 Grunt 來設(shè)置任務(wù)運行程序，這樣在開發(fā)期間可以自動化工作流程，比如合并文件，縮小 CSS 和 JavaScript 等。這些工具大都使用 Node.js 構(gòu)建。如果我告訴你，用 PHP 也能做到同樣的事情，是不是覺得特別贊?這款工具就是 Robo。

Readme 文檔生成器

幾乎每個開源項目都會有一個對應(yīng)的 Readme.md 文件，但是想要創(chuàng)建一個恰如其分又美觀的自述文檔可能是一個非常麻煩費事的事情，你可以嘗試使用這款工具來簡化創(chuàng)建的過程。

效果合集 CSS Wand

CSSWand 是一個漂亮的效果合集，純粹使用 HTML 和 CSS 來構(gòu)建，并且你能夠直接將相應(yīng)的代碼復(fù)制粘貼到你的網(wǎng)站上，相當(dāng)方便。

Git表情符 Gitmoji

我們觀察到一個非常有趣的趨勢，那就是越來越多的人開始在 git commit 中使用表情符號。為了迎合這一趨勢，Gitmoji 就誕生了。仔細看看 Gitmoji，看看有沒有你喜歡的表情符號?下次你也可以在你的回復(fù)中使用這些表情符號!

作品集網(wǎng)站搭建工具Gitfolio

Gitfolio 是一款非常有趣的網(wǎng)站搭建工具，它能夠基于你的 Github 配置文件構(gòu)建一個作品集網(wǎng)站，并生成博客，速度和效率都非常高。

代碼質(zhì)量檢測工具PHPInsights

PHPInsights 是一款能夠分析 PHP 代碼質(zhì)量的工具，它能夠檢查 Classess 的使用、抽象類、接口 的使用情況，以及代碼的復(fù)雜性和樣式的質(zhì)量。你可以在開發(fā)期間或者 CI 管道中運行它，以檢查整體代碼的質(zhì)量。它還兼容流行的 PHP 平臺，比如 Laravel、Wordpress 和 Magento，開箱即用的體驗相當(dāng)不錯。

自動重構(gòu)工具Rector

Rector 其實指代的是 Reconstructor，它是一款能夠幫你將 PHP 代碼庫中的代碼自動重構(gòu)的工具，相比于其他同類工具它更加現(xiàn)代化。它可以通過 Composer 安裝，并且使用 Docker 鏡像，輸入命令即可執(zhí)行，你可以將很多重活交給它來完成，非常便捷。

免費儀表盤 gx Admin

Ngx Admin 是一款免費的儀表盤，它是基于 Angular、Bootstrap 和 Nebular 來構(gòu)建的，界面元素使用的是流行的 Angular UI 組件，它配備有 3 個開箱即用的主題，同時你還可以根據(jù)自己的偏好安裝不同的主題。Ngx Admin 免費可商用。

圖標(biāo)合集RemixIcon

這是一個非常友好的圖標(biāo)合集。這個系列中，每個圖標(biāo)都包含有幾個不同的變體，并且以線性和填充兩種樣式來呈現(xiàn)。截至目前，這套合集中總共有 1574 個圖標(biāo)，你可以下載 SVG 格式的，也有對應(yīng)的圖標(biāo)字體以及 PPT 和 Keynote 格式的文檔。

響應(yīng)式字體工具RFS

RFS(Responsive Font Size)是一個 CSS 庫，讓你可以根據(jù)視窗大小，自動縮放字體。這個庫最好是和 CSS 處理器一起使用，它幾乎可以和所有的流行的預(yù)處理器一起使用，包括 Less、Sass 、Stylus 以及 PostCSS 。

腳本合集WP Scripts

WP Scripts 是一個用于開發(fā) WordPress 的可復(fù)用程序腳本合集，它包含一個開箱即用的預(yù)定義的推薦配置，確保你不用花費大量的時間來調(diào)整配置。安裝好了之后，訪問 wp-scripts，你可以使用它來執(zhí)行構(gòu)建的命令，編譯代碼，執(zhí)行端到端測試等等。