网页设计师自学干货合集
来源：西安天琥设计培训学校 时间：2020/11/29 14:13:57
1、栅格工具CSSGridGenerator
这是一个由SarahDrasner所创建的新工具，它能够让创建CSS网格更加直观。它可以帮助你在创建复杂布局的时候（比如创建重叠的网格区域）的时候节省更多时间。这款工具能够自动生成相应的代码，复制粘贴到你自己的网站即可。
2、谷歌深入解读现代浏览器原理（英文）
也许你做前端的时间并不短了，但是你真的完全了解现代浏览器的工作原理么？这是来自Google的系列文档，帮你全面解析现代浏览器的工作原理，带你一窥现代浏览器是如何利用CPU、GPU和内存等硬件，帮你实现各种各样的功能。这个系列的文档的拆解，会有助于编写性能更高的代码。其中的插图来自MarikoKosaka，相当的Q萌可爱，让人易于理解。
3、3D引擎Zdog
Zdog是一个JavaScript库，也是一个对于设计师极为友好的伪3D引擎，让你可以通过HTMLCanvas绘制逼真而视觉效果极为突出的3D动画效果。这个JavaScript库的创建者是Matafizzy，他曾因为制作Isotope、Flickity和Packery等JavaScript库而出名，如果你对于他的作品感兴趣，可以多关注一下。
4、仪表盘布局生成工具UIBot App
UIBot是一款专门生成仪表盘界面的工具，你只需要简单的点击顶部的按钮，就能自动生成全新的布局和配色！你甚至不需要像在其他的工具当中从零开始托拽就能生成布局。不过相应的，你终可能依然不会使用它的布局样式，但是这并不影响你参考它所生成的布局样式对不对？
5、可访问性检测插件AccesibilityInsights
这是一个可以帮你测试苹果网站的可访问性的插件，它会帮你找到网站中所存在的可访问性的问题，并且提供解决问题的相关指南，这款插件有针对Chrome浏览器和微软Edge浏览器的版本。
6、测试库NightwatchJS
这是一个能简化端到端测试的JavaScript库。NightwatchJS能够利用标准的W3CWebDriverAPI连接浏览器，并与之交互，并执行测试。它支持众多驱动程序，包括WebDriver服务、GeckoDriver，并可以在火狐浏览器、ChromeDriver和SafariDriver上进行测试。
7、布局工具Playroom
Playroom是一款独特的工具。简单地说，它是一个类似布局设计系统和组件库的小工具，但是它还能提供预览，并且模拟各种不同窗口大小的组件。它的便捷性还体现在显示布局元素的粒度变化上。
8、CSS库Pylon
PylonCSS是一款不同于其他CSS库的工具，它提供自定义的组件，而不是单纯提供一组类。这让你可以以类似iOS的方式，更加具有表现力地包装和实现网站效果。举个例子，我们可以使用来创建一个水平的元素堆栈，或者使用来创建垂直堆栈。
9、UI组件合集Vant
Vant是一组基于Vue.js的构建的移动端UI组件合集，整个合集包含超过55款不同的组件，并且数量还在不断的迭代增加中。它支持TypeScript，SSR（服务器端渲染）和i18n，这意味着你可以将组件中的内容直接翻译为本地语言。
10、自动化工具Robo
很多朋友可能已经熟悉使用Gulp和Grunt来设置任务运行程序，这样在开发期间可以自动化工作流程，比如合并文件，缩小CSS和JavaScript等。这些工具大都使用Node.js构建。如果我告诉你，用PHP也能做到同样的事情，是不是觉得特别赞？这款工具就是Robo。
11、效果合集CSS Wand
CSS Wand是一个漂亮的效果合集，纯粹使用HTML和CSS来构建，并且你能够直接将相应的代码复制粘贴到你的网站上，相当方便。
Git表情符Gitmoji我们观察到一个非常有趣的趋势，那就是越来越多的人开始在gitcommit中使用表情符号。为了迎合这一趋势，Gitmoji就诞生了。仔细看看Gitmoji，看看有没有你喜欢的表情符号？下次你也可以在你的回复中使用这些表情符号！
12、作品集网站搭建工具Gitfolio
Gitfolio是一款非常有趣的网站搭建工具，它能够基于你的Github配置文件构建一个作品集网站，并生成博客，速度和效率都非常高。
13、代码质量检测工具PHPInsights
PHPInsights是一款能够分析PHP代码质量的工具，它能够检查Classess的使用、抽象类、接口的使用情况，以及代码的复杂性和样式的质量。你可以在开发期间或者CI管道中运行它，以检查整体代码的质量。它还兼容流行的PHP平台，比如Laravel、Wordpress和Magento，开箱即用的体验相当不错。
14、自动重构工具Rector
Rector其实指代的是Reconstructor，它是一款能够帮你将PHP代码库中的代码自动重构的工具，相比于其他同类工具它更加现代化。它可以通过Composer安装，并且使用Docker镜像，输入命令即可执行，你可以将很多重活交给它来完成，非常便捷。
15、0元仪表盘gxAdmin
NgxAdmin是一款0元的仪表盘，它是基于Angular、Bootstrap和Nebular来构建的，界面元素使用的是流行的AngularUI组件，它配备有3个开箱即用的主题，同时你还可以根据自己的偏好安装不同的主题。NgxAdmin0元可商用。
17、图标合集RemixIcon
这是一个非常友好的图标合集。这个系列中，每个图标都包含有几个不同的变体，并且以线性和填充两种样式来呈现。截至目前，这套合集中总共有1574个图标，你可以下载SVG格式的，也有对应的图标字体以及PPT和Keynote格式的文档。
18、响应式字体工具RFS
RFS（ResponsiveFontSize）是一个CSS库，让你可以根据视窗大小，自动缩放字体。这个库好是和CSS处理器一起使用，它几乎可以和所有的流行的预处理器一起使用，包括Less、Sass、Stylus以及PostCSS。
19、脚本合集WPScripts
WPScripts是一个用于开发WordPress的可复用程序脚本合集，它包含一个开箱即用的预定义的推荐配置，确保你不用花费大量的时间来调整配置。安装好了之后，访问wp-scripts，你可以使用它来执行构建的命令，编译代码，执行端到端测试等等。
常见问题