第三波！2019年6月网页设计师前端干货大合集

编者按：很久新给网页设师端发者所准备的素了，这自 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，你可以使用它来执行构建的命令，编译代码，执行端端测等等。

结语

文链：Fresh Resources for Web Designers and Developers (June 2019)
原文作者：Thoriq Firdaus