编者按：好久没更新2019年6月为网页设计师和前端开发者准备的干货了，这是来自Hongkiat网站的每月（其实不定期）更新。资料合集，主要是一些代码片段、代码库、前端开发工具。以下是正文。又到了和前端开发的同学分享新资料的时候了。在这个月的合集中，我们收集了很多不同开发语言的相关前端开发工具，但最重要的是几款可以帮助开发者更好更快写代码的工具。例如，我们找到了一个评估代码质量的PHP库、一个自动重构代码的PHP库（是不是很棒！），以及一个使用JavaScript库执行端到端测试的简单方法。话不多说，让我们看看有什么新鲜事吧！GridToolsCSSGridGenerator这是SarahDrasner创建的新工具，可以更直观地创建CSS网格。它可以帮助您在创建复杂布局（例如创建重叠网格区域）时节省更多时间。这个工具可以自动生成相应的代码，复制粘贴到自己的网站即可。谷歌深度解读现代浏览器原理（英文）或许你从事前端工作已久，但你真的完全了解现代浏览器的工作原理吗？这是来自谷歌的一系列文档，帮助你全面解析现代浏览器浏览器的工作原理，将向你展示现代浏览器是如何利用CPU、GPU和内存等硬件来帮助你实现各种功能的。该系列文档的反汇编将有助于编写性能更高的代码。插图来自MarikoKosaka，相当可爱且通俗易懂。3D引擎ZdogZdog是一个JavaScript库，也是一个对设计者极其友好的伪3D引擎，可以让你通过HTMLCanvas绘制逼真、视觉效果出众的3D动画效果。这个JavaScript库的创建者是Matafizzy，他以制作Isotope、Flickity和Packery等JavaScript库而闻名。如果你对他的作品感兴趣，可以多多关注。仪表盘布局生成工具UIBotAppUIBot是一款仪表盘界面生成工具。您只需要简单地点击顶部的按钮，就可以自动生成新的布局和配色方案！您甚至不需要像在其他工具中那样从头开始拖动以生成布局。但是相应的，你最后可能还是用不到它的布局样式，但是这不影响你参考它生成的布局样式对不对？辅助功能检测插件AccessibilityInsights是一个可以帮助你测试苹果网站的工具。辅助功能插件，帮助您发现网站的辅助功能问题，并提供解决问题的相关指导，该插件有Chrome浏览器和MicrosoftEdge浏览器版本。测试库NightwatchJS这是一个简化端到端测试的JavaScript库。NightwatchJS可以利用标准的W3CWebDriverAPI与浏览器连接、交互和执行测试。它支持许多驱动程序，包括WebDriver服务、GeckoDriver，并且可以在Firefox、ChromeDriver和SafariDriver上进行测试。布局工具PlayroomPlayroom是一个独特的工具。简单的说，它是一个类似于布局设计系统和元件库的小工具，但它也可以提供预览和模拟各种窗口大小的元件。它的便利性还体现在显示布局元素的粒度上。CSS库PylonPylonCSS是一个不同于其他CSS库的工具，它提供自定义组件而不是简单地提供一组类。这使您能够以类似iOS的方式更有表现力地包装和实现网站效果。例如，我们可以使用来创建元素的水平堆叠，或者使用来创建垂直堆叠。UI组件集合VantVant是一套基于Vue.js的移动端UI组件集合。整个系列包含超过55个不同的组件，并且数量还在迭代增加。它支持TypeScript、SSR（ServerSideRendering）和i18n，这意味着你可以直接将组件中的内容翻译成本地语言。自动化工具Robo很多朋友可能已经熟悉使用Gulp和Grunt来设置任务运行器，从而可以在开发过程中将工作流自动化，例如合并文件、缩小CSS和JavaScript等。这些工具中的大多数都是使用Node.js构建的。如果我告诉您您可以用PHP做同样的事情，那不是很棒吗？那个工具就是Robo。Readme文档生成器几乎每一个开源项目都会有一个对应的Readme.md文件，但是创建一个合适漂亮的readme文档可能是一件非常麻烦和麻烦的工作，你可以尝试使用这个工具来简化创建过程。EffectCollectionCSSWandCSSWand是一个精美的效果合集，纯HTML和CSS构建，你可以直接复制粘贴相应的代码到你的网站，非常方便。GitemojiGitmoji我们观察到一个非常有趣的趋势，那就是越来越多的人开始在gitcommit中使用emoji。为了迎合这一趋势，Gitmoji应运而生。好好看看Gitmoji，看看有没有你喜欢的emoji？您下次也可以在回复中使用这些表情符号！PortfoliowebsitebuilderGitfolioGitfolio是一个非常有趣的网站构建器，它可以基于你的Github配置文件来构建一个portfolio站点并以极快的速度和效率生成博客。代码质量检测工具PHPInsightsPHPInsights是一款可以分析PHP代码质量的工具。它可以检查Classess的使用，抽象类和接口的使用，以及代码的复杂度和风格的质量。您可以在开发期间或在CI管道中运行它以检查整体代码质量。它还与Laravel、Wordpress和Magento等流行的PHP平台兼容，以获得非常好的开箱即用体验。自动重构工具RectorRector其实指的是Reconstructor，它是一个可以帮助你自动重构PHP代码库中代码的工具。与其他类似工具相比，它更现代。可以通过Composer安装，使用Docker镜像，输入命令即可执行，可以把很多繁重的工作交给它，非常方便。FreeDashboardgxAdminNgxAdmin是一个免费的仪表板，它基于Angular、Bootstrap和Nebular构建，界面元素使用流行的AngularUI组件，它配备了3个开箱即用的主题，同时您还可以根据自己的喜好安装不同的主题。NgxAdmin可免费用于商业用途。图标集RemixIcon这是一个非常友好的图标集。该系列中的每个图标都有几种不同的变体，并且有线性和填充样式。截至目前，该合集中共有1,574个图标。您可以下载SVG格式的它们，以及相应的图标字体和PPT和Keynote格式的文档。响应式字体工具RFSRFS（ResponsiveFontSize）是一个CSS库，可以让你根据窗口的大小自动缩放字体。这个库最适合与CSS处理器一起使用，它适用于几乎所有流行的预处理器，包括Less、Sass、Stylus和PostCSS。ScriptCollectionWPScriptsWPScripts是用于WordPress开发的可重复使用的应用程序脚本集合，它包括开箱即用的预定义推荐配置，确保您不必花费大量时间来调整配置。安装后，访问wp-scripts，您可以使用它来执行构建命令、编译代码、执行端到端测试等。
