我用于前端开发的工具

本文最初发表于我的个人博客。

前端开发是一门相当复杂的学科，你几乎不需要只用浏览器和代码编辑器（至少对于大型项目来说是这样）。我决定发布一份我用于开发的工具清单。希望这能帮助其他人找到一些可以在他们的工作流程中使用的优秀工具。

基本内容

这些都是我每天使用的工具，没有它们我就无法创作出很多文学作品。

• VS Code - 你需要在某个地方编写代码。我选择的编辑器是微软的 VS Code。它免费、轻量级（与 WebStorm 等 IDE 相比），拥有大量开箱即用的功能和扩展程序，使其更加强大。
• 浏览器 - 我使用 Firefox 作为默认浏览器，有时开发时会切换到 Chrome。但我也安装了其他浏览器进行测试。
• DevDocs - 一款聚合不同项目文档的 Web 应用。它支持离线模式。每当我需要查找文档时，我都会选择这个页面。我主要用它来查找 JS 和 DOM/浏览器相关的内容。因为我实在找不到类似的（易于搜索且内容详尽）工具。你应该试试看。
• Google - 是的，我经常用 Google 查找信息。比如 Bug、操作方法（有时很基础），或者软件包和库的示例和文档（如果 DevDocs 上没有的话）。
• MDN - 任何 Web 开发者的绝佳资源。该网站的部分内容可以通过前面提到的 DevDocs 访问，但部分页面仅在 MDN 上发布。我主要在需要查看一些 a11y 相关内容时使用它，因为那里有一些关于该主题的优秀文章。
• StackOverflow - 通常通过 Google 访问。如果你遇到问题，很可能在那里找到解决方案。
• Github - 当我遇到某个软件包的问题，​​或者只是想了解更多信息时，我会深入研究源代码或问题。在这里，你几乎可以像在 StackOverflow 上一样频繁地找到问题的答案。我个人认为，如果我遇到的问题与某个软件包相关，那么 Github 问题解决起来会更成功（除非它是 React 或类似的非常流行的软件包）。当然，我也用它来进行版本控制。

CSS

• CSS-Tricks - 除了他们的博客（可以找到大量有趣的文章和技巧）之外，还有一个指南版块，其中包含有关某些 HTML/CSS 和 JS 概念的深入文章。如果我需要复习网格知识，我通常会去那里。不过其他指南也很棒，所以绝对值得一看。
• CSS 参考- 如果我需要复习一些 CSS 知识，或者使用一些我不了解/不常用的属性，这绝对是我的首选资源。它深入讲解了每个 CSS 属性，并配有清晰的示例，方便你在项目中理解和使用。作者是优秀的Sara Soudain。
• 我可以使用吗- 如果您关心浏览器支持并负责任地使用尖端功能（又称渐进式增强），那么这是一个必备工具。

性能和优化工具

• SVGOMG - 你很少能从专门针对 Web 进行优化的设计师那里获得 SVG。在这种情况下，我会使用 SVGOMG 来优化和压缩 SVG。你会惊讶地发现，你可以摆脱多少无用的东西。它是SVGO的 Web GUI ，所以如果你愿意，也可以通过 CLI 获得同样的效果。
• Shrinkme.app - 我需要快速优化图片时会用到的 Web 应用。它支持批量上传，开箱即用，效果非常好。
• Sqoosh - 当我需要最大限度地发挥图片性能或需要创建 webp 格式的图片时，我会使用它。它提供多种选项，助您获得所需的效果。您还可以调整图片大小并将其转换为不同的格式。它相当前沿（它是由 Google Chrome 团队制作的，旨在演示现代浏览器的功能），因此您必须使用 Chrome 或其他基于 Chromium 的浏览器（Opera、Brave 等）。上次我在 Firefox 上测试时，它无法正常工作。
• Icomoon 应用- 我需要创建自定义图标集时，它就是我的首选工具。你可以从现有图标（免费或付费）中选择，也可以上传自己的图标。之后，你可以用它来生成图标字体或 SVG 图标集（目前比较好的解决方案）。
• Google Fonts - 当我需要一些自定义网页字体时，这通常是我的首选。我通常会下载所需的文件并自行托管（为了获得更好的性能）。它的优点在于，你可以只选择所需的编码，避免下载不必要的字符。注意：你可以在旧的 Google Fonts 页面上选择编码，但我在新网站上找不到它。如果你知道它在哪里（或者它是否存在），请告诉我。
• Glyphhanger - 减小文件大小是提升网站性能的最佳方法之一。Web 字体经常使用许多我们不需要的字形，因此我使用 Glyphhanger 进行字体子集设置。您可以指定字体中所需的 Unicode 范围或字符，Glyphanger 会为您创建一个仅包含指定字符的新字体文件。它还可以将.ttf文件转换为更适合 Web 的其他格式，例如.woff和.woff2。使用它需要一些技巧，但我认为当字体性能成为问题时，它是一个值得考虑的选择。
• Lighthouse - 我在发布网页之前会进行测试，我最常用的工具之一是 Chrome 浏览器中的 Lighthouse Audit。它会检查多个方面最常见的问题，并为每个方面给出评分以及改进建议。作为初步检查，它非常有用，可以帮你查看是否有我在开发过程中遗漏的问题。
• 字体样式匹配器- 如果您想在加载自定义字体后使字体交换不那么明显，您可以使用这个强大的工具来匹配默认字体和自定义字体的样式。

无障碍功能（简称 a11y）

• VoiceOver - macOS 上的默认屏幕阅读器。使用它不需要太多练习（我发现这篇关于它的文章非常有用），但我尽量在开发过程中定期使用它。正因如此，我对 aria 属性和屏幕阅读器专用文本的使用量显著增加。你可能会惊讶地发现，一些普通的网页组件对于依赖屏幕阅读器的用户来说，提供的上下文和信息少得可怜。
• A11y 指南- 我通常会尝试寻找一些现有的、具有良好 A11y 的解决方案，但这并不总是可行的。在这种情况下，如果我需要创建一个兼顾可访问性的交互式组件，我会参考这个页面。你可以找到关于可访问性、原因和方法的详细说明。此外，页面还提供了示例代码，你通常只需稍加努力就可以复制和重复使用。
• WAI-ARIA 规范- 我很少准备规范。但如果我准备，通常就是这份。它包含大量关于 aria 角色、属性以及如何使用它们的宝贵信息。我想说，对于任何认真对待 a11y 的人来说，这都是必读的。

荣誉提名

最后但同样重要的是，这里列出了我发现的一些有用但并不经常使用的其他工具。

• 响应式断点生成器- 手动创建包含大量变体的响应式图像非常麻烦。这个工具可以减轻您的这种痛苦。
• HTML Arrows - 特殊字符列表，包含 Unicode 代码（适用于 CSS、JS、纯 Unicode 等不同上下文）和 HTML 实体，以便在 Web 上安全使用。当我想要获得良好的排版效果时，我时常会用到它。
• 字符引用- 与上述工具类似，但包含的信息较少。它主要显示 HTML 实体，因此如果您需要，这可能是更好的选择。
• 排版速查表- 讲解常见的排版规则和问题。如果你想提升网页排版能力，这是一个很好的起点。
• 模块化比例- 我设计时通常会用这个工具来选择一些模块化比例。它能帮助你创造出和谐的垂直节奏。想了解更多，推荐阅读A List Appart 上的这篇文章，或者Tim Brown 在 2010 年 Build Conf 大会上的演讲录音。
• CSS 渐变生成器
• 平滑阴影生成器- 当您想在网络上获得美观的阴影时。
• 贝塞尔曲线生成器- 动画的自定义计时功能
• 缓动函数- 可在 CSS 动画和过渡中使用的不同缓动函数库。
• ngrok - 当我需要向其他人展示我在本地主机上运行的程序，或者需要在不同的设备上进行测试时，我会使用它。有时，当 Browserstack 的本地主机扩展无法正常工作时，我会使用它。
• 分享按钮- 如果您需要简单的分享按钮，而不需要周围的所有 JS 和跟踪混乱，那么这就是一颗宝石。
• Unix时间戳转换器
• CSS 到 JS 转换器——当您使用 CSS-in-JS 库并需要从 CSS 转换为 JS 或反之亦然时，这可能会很方便。
• 浏览器默认样式- 常见浏览器的默认样式列表。

结束

就是这样。这些是我在工作中使用过的工具，它们帮助我提高效率并交付高质量的作品。希望其中一些对你有用。如果觉得有用，请在 Twitter 或评论区告诉我。或者，如果你还有其他很棒的建议，我也很乐意听取。