前端开发必备工具箱

Tomas Pustelnik 原作, New Frontend 翻译。

前端开发是一个相当复杂的方向,至少就大项目而言,你很难仅用浏览器和编辑器完成工作。这里列出了我在开发过程中用到的工具。我希望这个列表能帮助其他人发现一些可以用在工作流程中的好工具。

必备工具

这些是我日常使用的工具,缺了它们我很难高效工作。

  • VS Code —— 我选择的编辑器是微软出品的 VS Code。免费、轻量(和 WebStorm 之类的 IDE 相比),大量开箱即用的特性,丰富的扩展。
  • 浏览器 —— 我的默认浏览器是 Firefox,有时切换到 Chrome 进行开发。我也安装了其他浏览器,以供测试之用。
  • DevDocs —— 这个网页应用汇聚了各种项目的文档,还支持离线使用。当我需要查询文档时,一般会访问这个站点。我主要用它查询 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 角色和属性的有价值信息。要我说,任何严肃对待可访问性的开发者,都需要读下这篇规范。

值得一提

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

结语

以上就是我在工作中使用的提高效率的工具,希望能帮你发现一些有用的工具。欢迎在 Twitter 上向我反馈,包括推荐其他好用的工具。

LeanCloud 提供包括数据存储、文件存储、消息推送、即时通讯、可自动扩容的云引擎容器和大数据分析工具...

4.9k 声望
8.4k 粉丝
0 条评论
推荐阅读
LeanCloud 云引擎支持预览环境
云引擎最近支持了 预览环境,可以自动将 Pull request 部署到一个新的环境,每个预览环境有单独的域名,让开发者在线上测试过后再合并 PR。

LeanCloud1阅读 1.5k

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco23阅读 2.2k评论 3

网站集合
以下整理了平常用到的一些网站,其实是看到收藏夹日渐庞大,强迫症又犯了= =,后面持续更新,如果有比较好用的网站或者有需要什么网站都欢迎留言~

Fw恶龙30阅读 12.6k评论 4

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan24阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.3k评论 1

LeanCloud 提供包括数据存储、文件存储、消息推送、即时通讯、可自动扩容的云引擎容器和大数据分析工具...

4.9k 声望
8.4k 粉丝
宣传栏