介绍一些开源的生产力工具可以大大提高我们的开发效率（我一直是这么认为的）。今天给大家推荐一些我一直在用的比较香的工具。其中包括一些文档、可视化工具、分析工具、代码片段、调试工具等。收集UICollectUI[1]gallery是获取日常UI设计灵感的免费在线资源。目前，它有超过6500个条目，并不断更新新内容。在侧边栏中，有类别。包括404页面、登录/注销、购物车、日历、视频播放器等。如果您想在方便的地方找到灵感，然后将其用于您的公司项目或个人项目，我认为这将有很大的帮助。Taskade在日常生活中总是有很多事情要做。例如，工作中有很多待办事项，但很容易忘记一些事情。这时候我们就需要一个带有待办事项的chrome插件——taskade[2]。Taskade简单、干净且设计精美，具有轻松的主题和背景。使用Taskade来组织您的想法，这样您就可以专注于完成工作。Colordot有时我们想找到一种自己喜欢的颜色（有点像我们满意的昵称），但是又没有灵感。这时候，我们可以来到这里[3]，在网页区域自由滑动鼠标，产生不同的颜色。确定一种颜色，然后滑动生成下一种颜色，直到找到您满意的颜色。FontSparkFontSpark[4]是一个字体选择网站，旨在帮助有字体选择困难的用户。用户只需输入要显示的文字即可得到网站推荐的字体，包括字体类型和字号。如果您对推荐的字体不满意，请点击生成按钮进行刷新。名词项目名词项目网站专门提供高质量、可识别的图标。这些图标并没有很酷的设计，通常以单色呈现，但用户很容易识别其所传达的含义。目前，NounProject提供超过200万个图标供用户免费下载，并且还在不断更新中。如果您需要某个图标但还没有找到合适的图标，您不妨访问这个网站[5]。csseffectsCSSeffectsSnippets[6]包含了大约20种CSS动画，无论是加载和阅读，还是移动光标产生的动画，都可以在网站上即时预览。而这还不是它最大的亮点。最推荐的是所有效果点击后都可以快速复制相关代码，方便开发者直接在自己的网站或博客上使用。当然，它可能还需要微调，但没有必要从头开始。不用去网上找这些动画代码，非常方便省时。unDrawunDraw[7]是由希腊设计师KaterinaLimpitsouni开发的开源矢量图库。本站有1000多幅平面矢量图供您下载使用。如果你在做个人网站，但是没有插画的灵感，或许可以看看。DevDocs是一个Web应用程序，它聚合了来自各个项目的文档并支持离线使用。无论你是新手程序员还是经验丰富的程序员，你都需要有一份可以在线查询各种编程手册的文档，而DevDocs[8]汇集了最全的编程开发文档，并且拥有优秀的阅读模式，让你可以quickly查询自己想要的命令极其方便，还支持浏览器扩展。CSSTricksCSSTricks[9]是国外优秀的前端开发博客，主要分享CSS样式的使用技巧、经验和教程。网站不断更新一些优秀的教程和技术，为前端社区做出了巨大的贡献。我也一直在学习这个，这大大拓宽了我在CSS方面的视野。cssreference如果您需要更新您的CSS知识或查找不熟悉和不常用的属性，您可以访问此站点[10]。上面对每一个CSS属性的解释都很深入，给出的例子也很清楚，让你了解这些属性，并应用到自己的项目中。CanIUse前端开发经常需要检查浏览器的兼容性。这里推荐（CanIUse[11]）这是一个为前端开发者定制的查询各种流行浏览器中的CSS和Js特性和兼容的网站，可以很好的保证网页的浏览器兼容性。有了这个工具，你可以快速了解代码在各个浏览器中的效果。LighthouseLighthouse[12]是谷歌开源的自动化工具，主要用于提高网页应用（移动端）的质量。目前的测试项目包括页面性能、PWA、可访问性（accessibility）、最佳实践和SEO。Lighthouse会对每个测试项的结果进行评分，并给出优化建议。这些评分标准和优化建议可以看作是谷歌的网页最佳实践。MajesticMajestic[13]是一个易于使用的GUI工具，用于Jest运行测试。以直观的方式，可以让我们更方便的查看测试用例的输出日志。WappalyzerWappalyzer[14]是一款chrome网站技术分析插件，可以分析目标网站采用的平台架构、网站环境、服务器配置环境、javascript框架、编程语言等参数。iHateRegex对于开发者来说，经常会用到正则表达式，很多类型的复杂字符串都可以用它来匹配，但是唯一的缺点就是写起来难度很大，不仅需要掌握规则，还需要花时间去编写，调试。iHateRegex[15]就是这样一款神器，帮你解决写正则表达式的烦恼。iHateRegex是一款在线开源工具，可以快速检索匹配合适的正则表达式，帮助您完成用户名、邮箱、日期、手机号、密码等常用规则的验证。当然你也可以看到里面的匹配过程，有助于加深理解。
