在本月的资源合集中，我们将与大家分享有关前端与设计类的新工具、代码片段以及酷炫的字体，这些资源能够大大提升你的开发与设计工作效率。
这个列表中也包含了一些我很喜欢的工具，例如免费的任务管理应用程序、易用的网站构建器，以及能够帮助你清理 GitHub 上冗余 forks 的工具。当然，这些资源大多都是免费的。那么，一起来 Enjoy 吧！
1. FREEPHOTOS
<img src="https://pic3.zhimg.com/v2-076105916f4128f09d8af4433d332722_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-076105916f4128f09d8af4433d332722_r.jpg"> FreePhotos 是一个免费的创意图片共享网站，它通过搜索引擎抓取了一些高品质、可商用的优质图片，供大家下载使用。图片的分类也很详细，涉及了景观、技术、商业、自然、幻想、人物等图像。你可以任意下载图片，并将它们用在你的项目上。网站地址：【传送门】
2. GOOGLE INVISIBLE RECAPTCHA
<img src="https://pic2.zhimg.com/v2-3b60fa08b7db955310df40e9b266dd69_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic2.zhimg.com/v2-3b60fa08b7db955310df40e9b266dd69_r.jpg">自 No CAPTCHA reCAPTCHA 推出以来，数以百万的互联网用户只需点击一下便可证明他们是正常的用户，这一验证系统被称为无懈可击的 CAPTCHA 。目前自 No CAPTCHA reCAPTCHA 推出以来，数以百万的互联网用户只需点击一下便可证明他们是正常的用户，这一验证系统被称为无懈可击的 CAPTCHA 。目前它正在进一步的迭代，正常的用户将看不到“我不是机器人”复选框，而对于那些黑客和机器人程序，无疑将是个更大的挑战。网站地址：【传送门】
3. GRID GARDEN
<img src="https://pic2.zhimg.com/v2-0973ed52cbe2d18c9a2c204520f5b305_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic2.zhimg.com/v2-0973ed52cbe2d18c9a2c204520f5b305_r.jpg">这可能是一款目前这可能是一款目前 最容易让你上瘾的在线游戏，通过编写 CSS 代码来挑战 24 个胡萝卜花园关卡。在愉悦的交互式学习中，你会轻松的掌握 CSS Grid 布局。前端er, Have a try!网站地址：【传送门】
4. WAYBACK MACHINE DOWNLOADER
<img src="https://pic1.zhimg.com/v2-4941b7e2c3c718b242715ac57ca969f8_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic1.zhimg.com/v2-4941b7e2c3c718b242715ac57ca969f8_r.jpg">想看一看某个网站在过去是什么样子吗？想看一看某个网站在过去是什么样子吗？ 这个工具可以帮助你下载任何网站的任意历史版本，而你仅需要点击两次就可以完成时光的穿越。网站地址：【传送门】
5. WEB LOAD SPEED TEST
<img src="https://pic3.zhimg.com/v2-e286618c0e3eebdbf9bb41af8ae0f7da_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-e286618c0e3eebdbf9bb41af8ae0f7da_r.jpg">你的网站加载速度有多快？你的网站加载速度有多快？ Test load speeds 能帮助你一次性测试 6 个地区的加载速度，以确保你的网站正常的工作。网站地址：【传送门】
6. JSON WEB CONTAINER
<img src="https://pic4.zhimg.com/v2-a68edf4489c010bdb48641aec0510fa3_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic4.zhimg.com/v2-a68edf4489c010bdb48641aec0510fa3_r.jpg"> JSON Web Container 是 Jasonette 框架的一个不错的补充，你可以使用 HTML / JavaScript / CSS 将其转换为原生组件，并可将 JSON 单个标记。网站地址：【传送门】
7. BURST
<img src="https://pic3.zhimg.com/v2-57deef757929f6cb9013e24737549d2a_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-57deef757929f6cb9013e24737549d2a_r.jpg"> Burst 是一个拥有超过 1000 张图片的高清图库，并且每周更新。这些图片可以免费使用在你的项目上。网站地址：【传送门】
8. GORILLASTACK AWS CLOUDTRAIL LISTENER (SLACK)
<img src="https://pic2.zhimg.com/v2-a0d42a8861769a87af90501fcc46a7e5_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic2.zhimg.com/v2-a0d42a8861769a87af90501fcc46a7e5_r.jpg"> GorillaStack 是专为 Slack 打造的聊天机器人。如果你使用 Amazon Web Services 的话，它会让你的使用过程更加的便捷。你可以定制并管理实时工作流，以便在 Slack 内监控 AWS CloudTrail，而你仅需要一分钟就可以搞定它的安装。网站地址：【传送门】
9. TIPPY.JS
<img src="https://pic1.zhimg.com/v2-5f26d14e565ae770cc4b50d37624f1ec_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic1.zhimg.com/v2-5f26d14e565ae770cc4b50d37624f1ec_r.jpg"> Tippy 是一个轻量级的纯 JavaScript 工具提示库。它具备众多不同的交互方式，并且适用于各种常见的浏览器。网站地址：【传送门】
10. SHOUTEM
<img src="https://pic1.zhimg.com/v2-e14524ad87d92d04d65650f2cb7084a0_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic1.zhimg.com/v2-e14524ad87d92d04d65650f2cb7084a0_r.jpg"> 这款工具可以轻松的创建原生的跨平台应用程序。你只需要利用相应的模版，就能够完成 Android 或 iOS 应用程序的创建，而无需任何的 APP 开发经验。如果你着急赶项目，或许它是一个不错的选择。网站地址：【传送门】
11. SKETCH STARTER DESIGN TEMPLATE
<img src="https://pic3.zhimg.com/v2-8d926eb5ed9ded8199aa3dd9b4ffa502_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-8d926eb5ed9ded8199aa3dd9b4ffa502_r.jpg">打算学习 Sketch 吗？这是一个免费的打算学习 Sketch 吗？这是一个免费的 Sketch 入门学习模版，它包含了基础的网页设计工具与模版的使用介绍。它将为你的 Sketch 入门学习之旅保驾护航。网站地址：【传送门】
12. MALINA SEAMLESS PATTERNS
<img src="https://pic1.zhimg.com/v2-464e83eaa65313a83135909873e6f758_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic1.zhimg.com/v2-464e83eaa65313a83135909873e6f758_r.jpg"> 这套无缝图案为各类项目提供了完美的背景素材。图案包含了 20 种不同的样式，便于你应用于网页和打印项目，并具备 EPS，PNG 和 JPG 格式。 （另外，矢量图也是可编辑的。）网站地址：【传送门】
13. REACTOUR
<img src="https://pic3.zhimg.com/v2-57d0b068a951db6b7fe13a49f20f554a_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-57d0b068a951db6b7fe13a49f20f554a_r.jpg"> 这个工具将以游戏的画风，指导你了解 React 组件的方方面面，从而帮助你了解 React 组件的功能以及掌握如何使用它。网站地址：【传送门】
14. ALCAMY
<img src="https://pic3.zhimg.com/v2-2acbc0dbc8307f17fb83d15ccd472d6e_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-2acbc0dbc8307f17fb83d15ccd472d6e_r.jpg">这是一个帮助你提高技能和职业生涯的这是一个帮助你提高技能和职业生涯的 开源学习平台。在这里，你不仅可以学习如何创建聊天机器人模块的相关知识，还能够了解区块链、技术驱动的闪电式扩张、机器学习等前沿技术。网站地址：【传送门】
15. ANIMISTA
<img src="https://pic4.zhimg.com/v2-1e0e129dcaf187dcd5658cb93eebab13_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic4.zhimg.com/v2-1e0e129dcaf187dcd5658cb93eebab13_r.jpg"> 这个工具可以帮助你在浏览器中创建 CSS 动画。 虽然它仍处于测试阶段，但它浅显易懂、易于使用，并且有大量的选项可以指导你完成动画的制作。网站地址：【传送门】
16. ANYMAP
<img src="https://pic4.zhimg.com/v2-e979ea3eabc6d2bd38b79fcd56d60807_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic4.zhimg.com/v2-e979ea3eabc6d2bd38b79fcd56d60807_r.jpg">只需要一些 JavaScript 和 HTML5 编程技巧，你就可以创建出基于数据的交互式地图。同时，你可以将天气、结果报告、统计数据等信息与其结合使用，来增强数据的可视化效果。当然，只需要一些 JavaScript 和 HTML5 编程技巧，你就可以创建出基于数据的交互式地图。同时，你可以将天气、结果报告、统计数据等信息与其结合使用，来增强数据的可视化效果。当然，这款工具也是制作交互式仪表盘和并行式报告的最佳选择。网站地址：【传送门】
17. CREATE-DMG
<img src="https://pic1.zhimg.com/v2-96cd5df1843c3c5c74f2442b39fb610c_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic1.zhimg.com/v2-96cd5df1843c3c5c74f2442b39fb610c_r.jpg">利用利用 这个工具，你仅需要几秒钟便可为 macOS 应用程序创建出一个好看的 DMG。网站地址：【传送门】
18. BASH GUIDE
<img src="https://pic3.zhimg.com/v2-f27f533d2bbf7b5a017dee07561bf8ee_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-f27f533d2bbf7b5a017dee07561bf8ee_r.jpg">想学习 Bash 吗？Bash 脚本是由一系列命令组成的计划文本文件，而想学习 Bash 吗？Bash 脚本是由一系列命令组成的计划文本文件，而本指南将帮助你更好地了解、掌握这些命令的使用方法。网站地址：【传送门】
19. ADLANTA
<img src="https://pic3.zhimg.com/v2-5fbf988a0e54098a4ab316c90d1d9a72_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-5fbf988a0e54098a4ab316c90d1d9a72_r.jpg"> Adlanta 是一个简单、美丽的圆角风格的无衬线字体，它包含了一套完整的字符集，涉及常规的标点符号以及偏细的字体样式。网站地址：【传送门】
20. BOMBA STOUT TYPEFACE
<img src="https://pic2.zhimg.com/v2-daf31d2393b6e7f9036a3d2cc88e9025_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic2.zhimg.com/v2-daf31d2393b6e7f9036a3d2cc88e9025_r.jpg"> Bomba Stout 是一个免费的手工字体。由于大胆与俏皮的风格，它将带你置身于视频游戏的回忆中。它有两种样式供你选择：圆润平滑的字体边缘以及具备强有力棱角的字体边缘。网站地址：【传送门】
21. EDUARDO AND AURELIA
<img src="https://pic4.zhimg.com/v2-4ecd56345299d6a288c871331397720f_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic4.zhimg.com/v2-4ecd56345299d6a288c871331397720f_r.jpg"> Eduardo 和 Aurelia 是一款特殊的字体，包含大写与小写两种样式。无论你选择了它们中的哪一种字体样式，都可以让你的项目充满着个性的色彩。网站地址：【传送门】
22. ELARIS SERIF
<img src="https://pic3.zhimg.com/v2-27cea7b2769fb90e6914b9af1ad8d232_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-27cea7b2769fb90e6914b9af1ad8d232_r.jpg"> Elaris 是一个具备经典设计风格的全大写的衬线字体。它常用在标题、Logo 上，而免费版本包括四个字体重量，即常规、半粗体、粗体和黑体。网站地址：【传送门】
23. SOURCE HAN SERIF
<img src="https://pic3.zhimg.com/v2-20dddb65beb1e3b9a8055cf9e218230e_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-20dddb65beb1e3b9a8055cf9e218230e_r.jpg">这是一款由 Adobe 与谷歌联合推出的这是一款由 Adobe 与谷歌联合推出的思源宋体字体。目前支持四种不同的东亚语言，包括：繁体中文、简体中文、日文和韩文，每一种字体都包含了 65,535 个字符以及 7 种字重。网站地址：【传送门】
24. VERDE SANS
<img src="https://pic1.zhimg.com/v2-413808cdf09827500d4d339a84460b08_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic1.zhimg.com/v2-413808cdf09827500d4d339a84460b08_r.jpg"> Verde Sans 是一款厚重、有趣的标识字体。它包含了一整套大小写的字符与数字。网站地址：【传送门】
25. ZILAP SLEEP
<img src="https://pic3.zhimg.com/v2-62983fcef58de68c3f07d0dcf2426c2a_b.jpg" data-rawwidth="1856" data-rawheight="1280" class="origin_image zh-lightbox-thumb" width="1856" data-original="https://pic3.zhimg.com/v2-62983fcef58de68c3f07d0dcf2426c2a_r.jpg"> Zilap Sleep 是一款粗糙、沉重的新颖字体。字符集包含了大写字符和一些字形，可用于强调主题背景的排版。网站地址：【传送门】
感谢你的阅读。若你有所收获，欢迎点赞与分享。
注：
- 本文版权归原作者所有，仅用于学习与交流；
- 若出现打不开网页的情况，请自备梯子；
- 如需转载译文，烦请按下方注明出处信息，谢谢！
英文原文：What’s New for Designers, April 2017
作者：Ben Dowling
译者： IT程序狮
译文地址： zhuanlan.zhihu.com/p/26614356
欢迎在我的微信公众帐号【IT程序狮】上获取最新的IT干货资料。
