福利！2017年7月前端开发者超实用干货大合集

网页离不开设计更离不开前端的实现，无论是JS库还是适用于Wordpress 的 GraphQL 都能在特定的时候，解决网站的特定需求。每月都会涌现一批颇为实用的网页前端干货，它们都是特定的开发需求下的产物，也许其中正好有你想要的东西呢？

HeroPatterns

这是一组颇为有用的SVG格式的图案合集，可以用于网站背景这个网站还配备了定制色彩和透明度的设置，你可以通过简单的复制粘贴添加到CSS当中。

TestCafe

TestCafe 是一款端到断（e2e）的测试工具，可以帮你测试网站和web应用，就像真实用户在使用它们一样。当它开始测试的时候，会自动执行一系列的操作，包括启动浏览器，运行指定的测试单元，生成报告，截屏等。

SugarJS

SugarJS 是一款更加易用、采用更加易读语法构建的JS库，可以帮你来操作对象、数组和日期。这套JS库当中还提供了一些实用的功能，比如 .escapeHTML() ，它可以将HTML 元素转换为其他的格式。

MS

这个方便的JS库能够帮你将时间、数字和常规的字符串转换为毫秒，比如 ms('2 days') 就能转换为毫秒 172800000 。

pa11y

pa11y 是一系列优秀工具的合集，能够帮你改善网站和APP的可访问性。pa11y中包含了用来测试任何网站的可访问性问题的CLI，用来显示错误、生成报告的仪表盘，以及针对像Codehip 或者 Travis 这样的 CI 工具所设计的 CLI。

Feather Icons

这是一套拥有现代设计风格和氛围的图标，它基本上可以轻松应用于所有的平台，包括 iOS、Windows 和 Ubuntu，不论你所设计的是网页还是APP。这些图标是以SVG 格式呈现的，还可以搭配 React 和 Angular 组件。

React Flight

这是一个可以在你的应用中构建动画组件的 React 模块，它的库 灵感来源于 Sketch 的规则，你可以在其中轻松快速的向UI 组件添加交互性。

BounceJS

这是一个用来创造弹跳特效的库，它的动效主要是通过CSS3和一些预设来实现的。你可以通过 npm ，bower 来安装JS库，简单的复制生成的CSS3代码来应用动效。

Bojler

Bojler 是一款 email 框架，其中包含了相应的HTML代码规范，帮你在目前流行的电子邮件客户端上更好的呈现邮件内容。

Devicon

这是一组集合了关于编程语言、设计和开发工具的图标合集。这些图标都是实用的SVG和字体格式，而诸如 Firefox、AWS 和 HTML 5 这样的常见图标也包含在其中。

Now UI Kit

这是一组基于 Bootstrap 4的响应式界面，其中包了3款可定制的模板和50种元素，除了 HTML 的版本之外，这些UI还包含了PSD和 Sketch 格式的版本。

T-Scroll

T-Scroll 是一款JavaScript 库，它提供元素在视窗上可见时候的动效，其中有少量可控选项，和预设动效。

Ory Editor

Ory Editor 是更加现代的网页编辑器，Ory编辑器是在React 和 Flux 的基础上构建起来的，由于它可以让用户便捷地预览效果，从而让编辑更加方便。你无需学习HTML 或者 Markdown 等标记语言语法就能自己创建网页。

TadViewer

Tad Viewer 是一款桌面端查看 CSV 文档的工具，它可以兼容 大型的数据文件，这款程序可以在 Windows 、macOS 和 Linux 上使用。

Smooth Scroll Polyfill

光滑的滚动效果无疑能够带来更加愉悦的用户体验，目前这款插件可适用于 Chrmoe、Firefox 和 Opera 这些浏览器，使用平滑滚动插件可以模拟 IE 和 Safari 中的平滑效果。

Noty

Noty 是一款用来呈现通知的JS库，它可以轻松地显示提醒、成功、报错、警告和信息推送甚至对话框。Noty 可以同 mo.js、bounce.js 这样的动效库一起联动。

HopScotch

Hopscotch 是一款由 LinkedIn 实例化的开源项目。作为而一个框架，它可以让开发人员更为便捷地添加产品预览。

SurveyJS

SurveyJS 是另外一款足够炫酷的 JS库，顾名思义，它是一款帮你创造调查问卷的JS库，其中包含有各种各样的调查问卷，并且它还被移植到了多个流行的JS框架中，包括 AngularJS，VueJS 和 React。

WP GraphQL

GraphQL 是足以替代 REST 架构的强大存在，它几乎支持所有的Web API，而 WP GraphQL 这个插件则可以让你的Wordpress 支持 GraphQL 的内容插件。对于 REST 和 GraphQL 的差异，你可以看这里。

Monaco Editor

Monaco Editor 是一款强大的视觉代码编辑器，这款编辑器是由微软所开发的，支持多种语言，包含了 HTML，CSS，LESS，CoffeeScript、PHP 以及 Intellisence，可以帮你更快地写代码。

【2016年干货大合集都在这里】

1. 《干货｜2016年11月开发者超实用干货大合集》
2. 《设计师专场！2016年10月设计圈实用干货大合集第二波》
3. 《开发者福利！2016年10月设计圈实用干货大合集》
4. 《再来一发！2016年9月设计圈实用干货第二波》
5. 《开学福利！2016年9月设计圈超实用干货大合集》
6. 《高温福利！2016年8月设计圈最新干货大合集》
7. 《再来！2016年7月设计圈干货大合集第二波！》
8. 《超赞！2016年7月新鲜出炉的设计圈实用干货大合集》
9. 《精准投放！2016年六月设计圈超实用干货大合集》
10. 《月底福利！2016年5月第二波超实用设计圈干货》
11. 《上手就用！2016年五月设计圈新鲜干货大合集》
12. 《姗姗来迟！2016年四月设计圈干货大合集》
13. 《质量保证！2016年三月可靠实用的设计圈干货》
14. 《多多益善！2016年二月设计圈实用干货第二波》
15. 《开工福利！2016年二月设计圈实用干货大合集》
16. 《干货干货干货！2016年第二波设计圈干货大合集》

原文地址：hongkiat
原文作者：Thoriq Firdaus
优设译文：@陈子木

本文由优设网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com