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

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

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

柵格工具 CSS Grid Generator

這是一個由 Sarah Drasner 所創建的新工具，它能夠讓創建 CSS 網格更加直觀。它可以幫助你在創建復雜布局的時候（比如創建重疊的網格區域）的時候節省更多時間。這款工具能夠自動生成相應的代碼，復制粘貼到你自己的網站即可。

谷歌深入解讀現代瀏覽器原理（英文）

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

3D引擎 Zdog

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

儀表盤布局生成工具 UIBot App

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

可訪問性檢測插件 Accesibility Insights

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

測試庫 NightwatchJS

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

布局工具 Playroom

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

CSS庫 Pylon

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

UI組件合集 Vant

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

自動化工具 Robo

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

Readme 文檔生成器

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

效果合集 CSS Wand

CSSWand 是一個漂亮的效果合集，純粹使用 HTML 和 CSS 來構建，并且你能夠直接將相應的代碼復制粘貼到你的網站上，相當方便。

Git表情符 Gitmoji

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

作品集網站搭建工具Gitfolio

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

代碼質量檢測工具PHPInsights

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

自動重構工具Rector

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

免費儀表盤 gx Admin

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

圖標合集RemixIcon

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

響應式字體工具RFS

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

腳本合集WP Scripts

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

結語

這是 6 月的第三波干貨，我們之前發布了《第一波！2019年6月30款超實用設計工具合集》和《第二波！2019年6月設計圈超實用干貨大合集》兩波干貨，如果你正在尋找干貨素材，那么這兩波最新的設計素材就不要錯過了~

原文鏈接：Fresh Resources for Web Designers and Developers (June 2019)
原文作者：Thoriq Firdaus