前端开发必备工具箱 - 网站源码_资源分享

前端合作开发是一个极为复杂的方向，至少就大工程项目而言，你极难约莫应用领域程序和GUI完成组织工作。这里列出了我在合作开发过程中加进的辅助工具。我期望那个条目能帮助其它人发现一些能用在组织工作流程中的好辅助工具。

必不可少辅助工具

这些是我日常采用的辅助工具，缺了它们我极难高效组织工作。

VS Code—— 我选择的GUI是谷歌公司出品的 VS Code。免费、高性能（和 WebStorm 之类的 IDE 相比），大批照相狸尾豆的优点，丰富的扩展。应用领域程序 —— 我的预设应用领域程序是 Firefox，有时候切换到 Chrome 进行合作开发。我也安装了其它应用领域程序，德博瓦桑县测试主要用途。DevDocs—— 那个网页应用领域汇集了各种工程项目的文件格式，还全力支持app采用。当我须要查阅文件格式时，一般会出访那个公交站点。我主要用它查阅 JS 和 DOM/应用领域程序方面的文件格式。我真没找出什么能和它相媲美的辅助工具（详细而易于搜寻）。你应该看一看。Google—— 没错，我时常玩游戏搜寻。有关某一 bug 的重要信息，如何做自已（有时候会是很基础的事），应用领域软件和软件库的实例标识符和文件格式（假如 DevDocs 没收录于），我单厢玩游戏搜一搜。MDN—— 对任何 web 合作开发人员来说这都是极为棒的资源。那个公交站点的部分文本可以在之前提到的 DevDocs 上找出，但是有些网页只有 MDN 上有。我主要用它查阅一些有关可出访性的文本，下面有不少讨论这一主题的该文。StackOverflow—— 时常 google 到下面的文本。假如有难题，多半能在下面找出标准答案。GitHub—— 某一应用领域软件我有疑问，或是想知道有关它的更多重要信息，就要到它的 GitHub 仓库去翻 issue 和标识符，通常能找出难题的标准答案，就像 StackOverflow。据我个人的经验，假如有有关某一某一应用领域软件的难题，在 GitHub 库塞县到有关 issue 的机率要高于在 StackOverflow 上找出有关难题（像 React 这类特别流行的库例外）。当然，我也采用 GitHub 的管理工具功能。

CSS

CSS-Tricks—— 你能在下面找出大批有趣的该文和诀窍。那个网站上也有一个手册（Guides）栏目，包含有关某一 HTML、CSS、JS 概念的深入细致传授。我常常出访那个公交站点预览有关分层布局的科学知识。但是其它手册也极为棒。那个公交站点绝对有戏。CSS Reference—— 假如须要预览 CSS 科学知识或是查下不熟悉、不常用的优点，就要访问那个公交站点。下面对每个 CSS 优点的传授很深入细致，给出的实例也很清楚，便于你理解这些优点并应用领域于自己的工程项目。公交站点的作者是Sara Soudain。Can I Use—— 假如你在意应用领域程序相容性，期望负责任地采用最前沿优点（渐进式增强），那么这是必不可少的辅助工具。

性能强化

SVGOMG—— 从雕塑家那里收到一份为 web 强化的 SVG 文件，这种事实在太罕见。因此就要用 SVGOMG 强化 SVG，效用极为惊人。这是SVGO 的网页版，因此你也能采用相应的配置文件辅助工具压缩 SVG。Shrinkme.app —— 采用那个网页应用领域强化纯文字极为方便快捷方便。照相狸尾豆，全力支持大批量上载，效用极为不错。Sqoosh—— 须要将图片压缩到极致，或是创建 webp 格式的纯文字的时候，就要采用那个网站。你能用它提供的大批选项调出满意的效用。你也能用它缩放图像或是转换图像格式。它用了很多最前沿技术（当初 Google Chrome 团队做那个辅助工具是为了演示现代应用领域程序的功能），因此你须要采用 Chrome 或基于 Chromium 的应用领域程序（Opera、Brave 等）。我上次试过，在 Firefox 下那个站点并不能正常组织工作。Icomoon app—— 我须要创建定制图标集时会用那个辅助工具。能选择现有图标（免费图标和付费图标），也能上载自己的图标。接着就能生成相应的图标字体或 SVG 图标文件（今时今日，后者是一个更好的选择）。Google Fonts—— 须要创建定制 web 字体时，就要首先出访 Google Fonts。我通常会下载所需文件，然后自行托管，这样性能更好。Google Fonts 有一个很棒的优点，允许只编码须要加进的字符。Glyphhanger —— 减少文件大小是提升网站性能的最佳途径之一。Web 字体时常包含很多我们不须要的字形，因此就要用 Glyphhanger子集化字体。你能指定须要的 Unicode 区段和字符，Glyphanger 会创建一个只包含相应字符的字体文件。它也能将 .ttf 文件转为其它更适合 web 的格式，比如 .woff 和 .woff2。须要花一点功夫正确采用那个辅助工具，但是我觉得存在字体性能难题时，这是一个值得考虑的选项。Lighthouse—— 我在发布网页前会进行测试，Chrome 应用领域程序的 Lighthouse 是最常用的辅助工具之一。它会检查各方面的常见难题并给出评分，也会给出改进提示。这是一个极为好的辅助工具，能初步检查我在合作开发时是否遗漏了一些难题。Font style matcher—— 定制字体加载后会切换字体，假如你希望那个切换不容易察觉，那么能采用那个字体风格匹配器找出和定制字体类似的预设字体。

可出访性

VoiceOver —— macOS 的预设屏幕阅读器。须要花一点时间熟悉那个辅助工具（我推荐这篇介绍该文），但是我努力在合作开发过程中时不时用下 VoiceOver。多亏这一点，我的工程项目中 aria 优点和面向屏幕阅读器的文本采用量大增。采用 VoiceOver 后你会惊讶地发现一些日常采用的网页组件为屏幕阅读器用户提供的上下文重要信息少得可怜。a11y guidelines—— 通常就要尽量去找可出访性良好的解决方案，但是有的时候还是不得不自己动手，这时就要参考那个网页。这篇可出访性指导原则详细解释了什么是可出访性，为什么可出访性很重要，如何实现。很多情况下，复制其中的实例标识符略作调整后即可应用领域于实际工程项目。WAI-ARIA specification—— 我并不时常阅读规范。假如我在读规范，那么往往是在读这一篇。其中包含大批有关如何采用 aria 角色和优点的有价值重要信息。要我说，任何严肃对待可出访性的合作开发人员，都须要读下这篇规范。

值得一提

最后列下个人觉得挺好用但又没那么常用的辅助工具。

Responsive breakpoints generator —— 手动创建响应式图像的多种变体很痛苦。用那个辅助工具就很方便。HTML Arrows—— 各种符号的 Unicode 码、HTML 十六进制编码、HTML 实体编码、HTML 实体。Char reference —— 类似上一个辅助工具，但显示的重要信息更少，主要显示 HTML 实体。Typography cheatsheet —— 传授常用的字体排印规则和难题。Modular scale —— 设计网页时我通常采用那个辅助工具选择模块化的缩放方案。如有兴趣了解更多有关那个主题的文本，请参考 A List Appart 上的这篇该文和 Tim Brown 在 Build Conf 2010 上的演讲。CSS gradient generetor —— 创建渐变背景的在线辅助工具。Smooth shadow generator —— 为网站添加美观的阴影。Bezier curve generator —— 定制 CSS 的立方贝塞尔曲线定时函数。Easing functions —— 各种缓动函数，可用于 CSS 动画和变换。ngrok—— 须要向别人展示作品或是测试不同设备上的效用时，就要采用 ngrok。ngrok 能将本地运行的服务暴露到公网上。但是有的时候配合 Browserstack 的 localhost 扩展时不能组织工作。sharing buttons—— 假如你只须要一个简单的分享按钮，不想用 JS，不想折腾追踪用户的复杂逻辑，那么那个辅助工具特别好用。Unix timestamp converter —— unix 时间戳转换器。CSS to JS converter —— 能将 CSS 转成 JS，也能将 JS 转回 CSS。基于 CSS-in-JS 库合作开发时那个辅助工具极为方便。Browser default styles —— 常见应用领域程序的预设样式。