前端工具：我 2017 年最喜欢的发现

又一年过去了，我相信你们所有人都会遇到一些有趣的新编码技巧、技术、CSS 技巧（当然！）以及其他能让你们在 2018 年提高生产力的东西。

你们中的一些人可能知道，我负责策划一个名为 Web Tools Weekly 的每周时事通讯，在其中我每周都会提供数十个指向新工具的链接，主要关注对前端开发人员有用的内容。所以说我过去 12 个月里遇到过 **很多新工具** 真是轻描淡写了。

就像我过去几年做的那样，我整理了一些我最喜欢的前端工具发现。

请注意，这不是 2017 年“最佳”或“最受欢迎”工具的列表——这与流行度或 GitHub 星数无关。这些是我认为独特、有趣且实用的工具——但不一定是广为人知的。它们是我个人今年最喜欢的发现，仅此而已。

tlapse

在开发新项目时，尤其是在大型且冗长的项目中，很容易忘记项目布局经历了多少次更改。tlapse 是一款命令行实用程序，允许您以指定的时间间隔设置工作的自动屏幕截图，本质上为您提供了一系列屏幕截图形式的开发视觉时间线。

该项目在 GitHub 上拥有 1100 多颗星，因此看来开发人员确实找到了它的用途，即使乍一看它似乎有点自恋。除了能够回顾项目进展的新颖性之外，我想 tlapse 还可以用于向客户、项目经理或其他开发团队成员发送视觉进度报告。

您可以将 tlapse 作为全局 npm 包安装

npm install -g tlapse

然后在后台运行它并开始您的工作

tlapse -- localhost:3000

默认情况下，tlapse 将以一分钟的间隔拍摄屏幕截图，并且屏幕截图将添加到当前项目中的 tlapse 文件夹中（即您执行命令的位置）

Running tlapse with the default settings

有用的是，tlapse 仅在检测到布局以某种方式发生更改时才会拍摄屏幕截图。因此，如果下一个计划的屏幕截图与上一个相同，它将跳过它

如果要使用不同的目录或更改屏幕截图频率，请将这些作为选项与常规命令一起输入

tlapse --every 3m --directory ./screenshots -- localhost:3000

顾名思义，tlapse 允许您制作延时视频或动画 GIF，以演示您的工作进度。以下是我在模拟构建基于 Bootstrap 的布局时创建的一个

总的来说，这是一个易于使用的工具，即使对于那些不太熟悉命令行的人来说也是如此，并且肯定有一些用例需要拍摄正在进行的工作的屏幕截图。

KUTE.js

JavaScript 动画库并不少见。但 KUTE.js 吸引了我的眼球，因为它主要卖点是：性能。不可否认的是，如果您今天甚至要考虑在 Web 应用中使用复杂的动画，那么您必须准备好应对由此产生的潜在性能问题，因为用户可能会在移动设备或较慢的连接上访问您的应用。

当您访问 KUTE.js 主页时，就会看到一个丰富多彩、复杂且超级流畅的动画，证明了该工具声明的真实性。

除了性能之外，我还喜欢另外两点

非常棒的 API
出色的回调系统

您可以通过创建补间对象来开始构建动画。例如

var tween = KUTE.fromTo(
  '.box',
  {backgroundColor:'yellow'},
  {backgroundColor:'orange'},
  {complete: callback}
);

上面的示例创建了一个具有各种选项的 fromTo() 补间。在 fromTo() 中，我指定了目标元素的选择器、要动画化的属性的起始值和结束值，以及在动画完成时要执行的回调函数。

您还可以使用 to()、allTo() 和 allFromTo() 创建补间，后两种方法允许您将动画应用于对象集合。

回调功能非常细致，允许您在指定点运行代码（其中可能包括完全调用新的动画），包括

动画开始时
动画的每一帧
动画暂停时
动画在暂停后恢复时
动画停止时
动画完成后

我只触及了可用功能的表面。网站上的文档很好，因此请查看以获取完整的 API。下面的 CodePen 基于 API 文档中的一个演示，该演示使用 .chain() 方法链接多个转换动画。

查看 Louis Lazaris 在 CodePen 上创建的笔使用 KUTE.js 链式转换动画（@impressivewebs）。

ScrollDir

滚动库已经流行了一段时间了。ScrollDir 来自 Dollar Shave Club 的开发人员，是一个非常简单、小巧且直观的实用程序，可帮助您使用滚动检测执行一些简单操作。

一旦您引入该库，在最简单的形式中，脚本就可以正常工作。您不需要调用 scrollDir() 方法或任何类似的东西。如果您打开浏览器的开发者工具并在运行 ScrollDir 的页面上上下滚动时检查实时 DOM，您就可以看到它的作用

如上图所示，此实用程序向页面的 <html> 元素添加了一个 data-scrolldir 属性，该属性会更改为两个值之一，具体取决于滚动方向

<!-- when the user is scrolling down -->
<html data-scrolldir="down">

<!-- when the user is scrolling up -->
<html data-scrolldir="up">

在页面尚未滚动时，它默认为“down”，尽管它似乎可以受益于将“neutral”类作为第三种可选状态。

有了此属性，使用 CSS 轻松对页面的布局进行自定义更改非常容易，利用 CSS 的属性选择器

[data-scrolldir="down"] .header-banner {
  top: -100px;
}

[data-scrolldir="up"] .footer-banner {
  bottom: -100px;
}

您可以在下面的 CodePen 中看到上述代码与一些简单的 CSS 转换相结合，这与 ScrollDir 主页上的示例类似

查看 Louis Lazaris 在 CodePen 上创建的笔 ScrollDir 基本演示（@impressivewebs）。

如果您选择使用脚本的非自动版本，ScrollDir 提供了一些次要的 API 选项。无论哪种情况，它都非常易于使用，我相信如果您正在构建需要根据滚动方向更改页面内容的内容，它会派上用场。

CodeSandbox

由于使用 React 和 Vue 等库进行 Web 应用开发的流行，许多不同的 IDE 和其他代码工具已经出现，旨在帮助使用特定库或框架的开发人员。

CodeSandbox 是当前四大主要参与者（React、Vue、Preact 和 Svelte）的在线代码编辑器。此工具在某种程度上与 CodePen Projects 属于同一类别，但专门为上述四个库中的每一个而设计。

CodeSandbox 的一个不错的功能是在左侧边栏中添加 npm 包的能力，位于名为“Dependencies”的面板下。有一个名为“Add Package”的按钮，允许您搜索 npm 注册表中的包

Searching for npm packages on CodeSandbox

如果您的应用缺少依赖项，CodeSandbox 将使用错误消息和添加所需包的选项来指示这一点。在下面的 GIF 中，我将此 React 计算器应用作为示例项目拼凑到 CodeSandbox 中

Installing missing dependencies on CodeSandbox

请注意，该项目仍然缺少依赖项，我能够立即安装它。这是该项目我版本的 CodeSandbox 链接。

另一个引起我注意的功能是在代码窗口中“窥视”函数定义的能力

与许多原生 IDE 一样，这使您能够跟踪函数的源代码，以便更快地进行调试等。还有一些简洁的内联代码完成功能，就像原生 IDE 一样。

还有更多我未在此处讨论的功能——包括 GitHub 集成、通过 ZEIT 部署等等——因此请务必浏览不同的面板以了解您可以做什么。

AmplitudeJS

AmplitudeJS 是一款无依赖项（现在我们都喜欢这样，不是吗？）的 HTML5 音频播放器，“专为现代网络打造”。我认为许多拥有网页开发经验的独立爱好者音乐制作人会因为各种原因而喜欢上它。

Amplitude 允许你使用自己的自定义设计和布局构建自己的音频播放器。要添加歌曲列表，你可以通过 JSON 格式在主要的 Amplitude.init() 方法中添加它。这是一个包含三首歌曲的示例

Amplitude.init({
  songs: [
    {
      name: "Song Name One",
      artist: "Artist Name",
      album: "Album Name",
      url: "/path/to/song.mp3",
      cover_art_url: "/path/to/artwork.jpg"
    },
    {
      name: "Song Name Two",
      artist: "Artist Name Two",
      album: "Album Name Two",
      url: "/path/to/song.mp3",
      cover_art_url: "/path/to/artwork.jpg"
    },
    {
       name: "Song Name Three",
      artist: "Artist Name Three",
      album: "Album Name Three",
      url: "/path/to/song.mp3",
      cover_art_url: "/path/to/artwork.jpg"
    }
  ]
});

此播放器背后的代码使用 Web Audio API 生成音频，这有点像添加 HTML5 的 audio 元素，但只使用 JavaScript。因此，你理论上可以使用零 HTML 生成 AmplitudeJS 播放器的功能版本。请参阅此 CodePen 作为示例，它会自动播放播放列表中的唯一歌曲，并且没有 HTML。即使你检查生成的 DOM，那里也没有任何内容；它只是 JavaScript。在这种情况下，我正在 init() 方法中使用 "autoplay": true 选项（默认值为 false，当然）。

如果你想查看使用 AmplitudeJS 可以构建的灵活多样的音频播放器，请务必查看示例页面。 Flat Black Player 可能是我最喜欢的，因为它与老式的 MP3 播放器很相似。我已将其放入下面的 CodePen 演示中

查看 Louis Lazaris (@impressivewebs) 在 CodePen 上创作的 Pen LeEgyj。

在配置 AmplitudeJS 方面，以下是一些亮点。

你在 JSON 中提供的所有信息都可以动态添加到播放器的任何位置。例如，以下 HTML 将显示当前播放歌曲的歌曲名称、艺术家、专辑和文件 URL

<p amplitude-song-info="name" amplitude-main-song-info="true">
<p amplitude-song-info="artist" amplitude-main-song-info="true">
<p amplitude-song-info="album" amplitude-main-song-info="true">
<p amplitude-song-info="url" amplitude-main-song-info="true">

请注意 amplitude-song-info 属性，它定义了要注入到该元素中的数据位。你并不一定需要使用段落，但这是一种方法。你可以在此 CodePen 演示中看到它的实际应用。

借助元数据功能，添加当前歌曲的运行时间或剩余时间指示器非常简单

<p class="amplitude-time-remaining" amplitude-main-time-remaining="true">
<p class="amplitude-current-time" amplitude-main-current-time="true">

另一个很棒的功能是能够使用回调（这几乎是任何优秀 API 的必备条件）。以下是在一个简单示例中使用的两个回调选项

Amplitude.init({
  songs: [
    // songs list would be here...
  ],
  callbacks: {
    before_play: function() {
      document.querySelector('.msg').innerHTML = 'Song will now begin...';
    },
    after_stop: function() {
      document.querySelector('.msg').innerHTML = 'Song has ended!';
    }
  }
});

你可以在此 CodePen 中看到它的实际应用。我已纳入一个基本的播放/暂停按钮来帮助使用回调。要查看最终的回调，你必须等待歌曲完成（暂停不会触发 after_stop 回调）。该按钮仅使用一些 HTML 属性构建，无需额外的脚本。

这只是此播放器功能和灵活性的一个很小的示例。文档非常完善，应该能够让你立即开始使用此工具。

值得一提的工具

这是过去一年我最喜欢的五个工具的详细介绍。但是还有许多其他类似的鲜为人知的工具值得研究。我已在下面列出了一些这些工具

BunnyJS –一个基于 ES6 的前端框架，宣传为“像 jQuery 一样简单，比 jQuery UI 更好，像 React 一样强大”。
keyframes-tool –一个命令行工具，用于将 CSS 动画转换为适合与 Web Animations API 一起使用的关键帧对象。
Konsul –一个 React 渲染器，渲染到浏览器的开发者工具控制台。
across-tabs –跨源浏览器选项卡之间的轻松通信。
svgi –一个 CLI 工具，用于检查 SVG 文件的内容，提供有关 SVG 的信息（节点、路径、容器、形状、树层次结构等的数量）。
CSS in JS Playground –试用几乎所有 CSS-in-JavaScript 解决方案（JSS、styled-components、glamorous 等）的代码。

你今年最喜欢的发现是什么？

就是这样。正如我在开头所说，这并非旨在举办年度最佳工具颁奖典礼，而是更多地关注一些有趣且实用的非主流替代方案。我希望你发现其中一些对你有用。如果你有兴趣继续关注前端开发中涌现的新工具，请务必订阅我的时事通讯。

你过去一年是否偶然发现（或构建）了一些对前端开发人员有兴趣的酷炫工具？请在评论中告诉我，我非常乐意了解一下。

David Dias

# 2017 年 12 月 29 日

抱歉，是 https://frontendchecklist.io

Kilian Valkhof

我正在为前端开发人员和设计师构建一个名为 Polypane 的浏览器，我认为它非常酷 :) 它会同时显示你网站中的所有响应式断点（基于你的 CSS 断点或设备列表），拥有你期望的所有开发者工具，并且可以为你生成概述屏幕截图。哦，测试版可以免费下载！

Lars / LGK (@lgkonline)

评论永久链接# 2018 年 1 月 11 日

确实是一个好主意。尽管我认为 Chrome 在这里已经做得非常出色。但这听起来很有趣，我已经订阅了时事通讯。^^

Carlos Souza

太棒了！了解一些新的有用前端工具总是一件好事……感谢分享这些链接！

Ryan Hefner

# 2017 年 12 月 30 日

您好，我构建了一个小的纵横比计算器，https://aspectrat.io，它允许你快速计算纵横比并根据需要缩放它们。以及常见纵横比和设备的设备分辨率参考。希望它对其他人也像对我一样有用。

Michael Gannon

简单的 CSS :)
http://simplecss.eu

daniel.vukasovich (@dr_vitus_zato)

评论永久链接# 2018 年 1 月 3 日

嘿，超级棒的工具！

Anything Graphic

# 2018 年 1 月 3 日

很棒的工具。很高兴在即将要做的网站上尝试 AmplitudeJS。

FredBienvenu

# 2018 年 1 月 8 日

您好，我最近构建并上传了“另一个”CSS 编辑器：http://www.acrylicss.com/。
在 AcryliCSS 中，你可以使用不同的工具直接修改 HTML div 的形状、位置和颜色。
来试试吧 :)

Lars / LGK (@lgkonline)

# 2018 年 1 月 11 日

put-version 是一款用于将 package.json 中的版本号作为参数添加到 HTML 文档中每个 CSS 和 JS 引用中的好工具。这样，你可以解决浏览器的缓存行为，并确保用户能够获得最新版本。
https://npmjs.net.cn/package/put-version