2016 年我最喜欢的前端工具 - 网站源码_资源分享

译者：IT流程狮

镜像：https://zhuanlan.zhihu.com/p/24687464

又是两年将要往后，正像他们所市场预期的那样，随著大批涌向的控制技术创新、抑制、令人激动的新辅助工具和控制技术，Web 网络平台正呈现出着爆发式的产业发展势头长驱直入。与此同时，他们的日常生活也显得有如开发人员那样，更为得单纯。

…………………………………………………………………………………………………………………………………………………………………………………………………………………………….

React 和 Angular 等盛行辅助工具阿尔热莱加佐斯县展开着预览，而像 Vue.js 这种的新辅助工具已展露出出了宝文街，并快速地紧紧抓住了大批开发人员的浓厚兴趣。

不可否认，虽然我策画了这份著眼于开发辅助工具的月刊，在科学研究的操作过程中我也碰上了许多可笑的事，因此就要更在乎这些盛行的辅助工具。但，对既有意思又新颖的，却被现代人极少留心的辅助工具，我仍然则表示赞许。

因此，就像今年那样，在责任编辑中我将与我们分享，这两年里我最喜欢的许多专为后端开发人员打造的辅助工具。

Modaal

我总是感觉，像是这些具备无障碍特点的辅助工具，在他们行业中往往都不被看好。因此，我将分享的第一个辅助工具是一个灵活、易用的模态窗口插件。

2016 年我最喜欢的前端工具

虽然，他们不难发现一个模态窗口插件，但却极少找到一个具备检测所有窗口功能及其功能性的插件。这种模态窗口的表现也正像它应该具备的特点那样——它是响应式的。它可以基于用户交互准确地执行（例如，当您敲击 ESC 键时，它会关闭）。与此同时，它还通过了 Web 内容无障指南 2.0 版的 AA 级别，接受几乎所有类型的内容，支持全屏操作，并且提供前/后打开和关闭的回调事件，等等。

下面是 CodePen 上的演示，我将通过代码来示范如何使用它。

2016 年我最喜欢的前端工具

但，使用 Modaal 唯一的缺点是目前它依赖 jQuery，因此不能用 jQuery 的 slim 插件展开构建。我在 CodePen 上演示的是 jQuery 3.1.1 版本，与此同时我也测试了它在 V2.0 版本中的表现。因此，在 jQuery 1.11.2 及以上版本中，它应该能够正常运行。

Jam API

这个 WEB 服务能够在众多不同的场景中派上用场，而不仅仅局限在后端开发领域。它被描述为“一种利用 CSS 选择器可将任何站点转换为 JSON 可访问 API 的服务。”因此，它是一个帮助你抓取内容的辅助工具——但，CSS 那部分确实会让后端开发人员感觉到很有意思。

2016 年我最喜欢的前端工具当你使用 API 时，你需要对 Jam API 网站执行 POST 请求，并发送你想要抓取网站的 URL 地址，而代码将根据你使用的 Node, Ruby 等不同的环境展开展示。为了便于我们了解，我将对他们在 GitHub 仓库上提供的 JavaScript 示例展开演示。使用这个示例，我将构建一个单纯的辅助工具来为我们展示，如何从我的 CSS values 网站上抓取到任何 CSS 属性的可能值。

下面是 CodePen 上的演示：

2016 年我最喜欢的前端工具

当然，这个例子是毫无意义的，因为 CSS Values 网站已经这种做了。但可以通过这个单纯的方式来演示 Jam API 的工作原理。

JavaScript 的关键代码部分如下：

body: JSON

.stringify({

url: http://cssvalues.com

json_data: {“values”: “#+ prop + ul”}})

在这里我输入了想要抓取的网站地址，然后我使用了 CSS 选择器来确定需要抓取页面的哪个部分。因此，如果用户输入 display 属性， JavaScript 将计算如下：

body: JSON

.stringify({

url: http://cssvalues.com

json_data:{“values”: “#display ul”}})

自从搭建了自己的网站后，我知道了每个 CSS 属性都有一个 ID 匹配了其属性的名称。我还知道了每个属性在无序列表中都会列出其值。因此，只要你了

postcss-grid-kiss

当我第一次看到这个辅助工具时，我认为它简直是个笑话。但显然它是一个真正的 PostCSS 插件，旨在使 W3C 新网格布局模块语法显得一目了然。

通常情况下，当他们使用网格布局时，CSS 将这种展示：

body

{

display: grid

;

align-content: space-between

;

grid-template-rows: 120px 1fr 60px

;

grid-template-columns: 150px 1fr

;

grid-template-areas: “header header” “sidebar main “ “footer footer”

}

body > header

{

grid-area: header

;

align-self:

start

}

body > .sidebar

{

grid-area:

sidebar

}

body > main

{

grid-area:

main

}

body > footer

{

grid-area: footer

;

justify-self: center

;

align-self:

end

}

但，当他们使用了 postcss-grid-kiss，你的写法将是这种的：

body

{

grid-kiss: “+——————————+ “ “| header ↑ | 120px” “+——————————+ “ ” “ “+–150px—+ +—– auto —–+ “ “| .sidebar | | main | auto “ “+———-+ +—————-+ “ ” “ “+——————————+ “ “| ↓ | “ “| → footer ← | 60px “ “+——————————+ “ }

是的，你没看错：你基本上可以使用 ASCII 字符作为 grid-kiss属性值来绘制你的网站布局了。然后，此插件将会帮你处理，类似于第一个代码块中显示的这些与 CSS 等效的代码内容。

与此同时，文档中包含了一个可以让你实时操作语法的地方。它还鼓励开发人员在其键盘上切换插入键，并使用其文本编辑器中提供的多光标功能来更有效率的展开网格绘制。

虽然，我不是 PostCSS 的使用者，而只是在实时操作中展开了语法的尝试。但无论如何，我认为在列表中增添上这款辅助工具仍然是明智之举。

MJML App

HTML 电子邮件正在蓬勃产业发展，你可能已经注意到，每个月都会有大批的资源和辅助工具正被发布，它们用来帮助响应式电子邮件展开通讯设计和编码。MJML 应用流程是一款原生的桌面应用流程，你可以使用 MJML 创建和编辑响应式 HTML 电子邮件，与此同时它也是一个编译为电子邮件兼容 HTML（即嵌套表代码）的自定义标记语言框架。

2016 年我最喜欢的前端工具在今年年初，它的框架和应用流程都已发布了，该应用流程可在 Windows，OSX 和 Linux 上使用。而编辑器也有众多的主题供你选择，与此同时它还支持分屏视图与实时预览。

这里有一个单纯的 MJML 语法示例：

Testing

</mj-body> </mjml>

您可以在此 Gist 中了解到，它可以渲染有效的 HTML 。虽然，它确实有些麻烦，但这种才能使语言和应用流程显得有用——你不必担心它的兼容性，它会为你做所有的工作。这款应用流程还支持导出 MJML 或 HTML，你还可以在 GitHub 中以匿名 Gists 来快速的保存模板。

DevTools Timeline Viewer

这是一个由 Chrome DevTools 团队出品的官方辅助工具，它支持你轻松地查看，并共享你 DevTools 时间轴踪迹的 URLS。Chrome DevTools 中的时间轴选项卡可以帮助你记录，并分析你的网络应用流程的活动情况。通过对 JavaScript 的分析、图形等内容，你可以检测出潜在的性能问题。

2016 年我最喜欢的前端工具通过捕获的许多时间线数据（或者通过刷新时间线打开的页面，要么通过点击“记录”并与页面交互）你将看到基于捕获内容的详细图形和数据。

当你右键单击时间轴时，你会注意到有“加载时间轴数据”和“保存时间轴数据”的选项。“保存…”选项将为你导出以 JSON 格式文件的时间轴数据。然后，你可以将该数据保存到 Dropbox，GitHub Gist 或 Google 云盘上，以便与他人共享。从此，你可以非常方便的与远程工作人员，以及同事共享时间线数据了。

你可以看到，我使用 Gist 在此处导出的数据示例。如果你还不熟悉 Chrome DevTools 上的时间轴，这是一个了解它的好地方。

Notification Logger

这个辅助工具，你可以很单纯的得到它。如果你做了大批的 JavaScript 调试工作，你很可能是在使用 console.log 消息。这比做让人厌烦的 alert() 更有用，但每次你想做一个单纯的日志时，打开控制台仍然有点繁琐。

2016 年我最喜欢的前端工具 Notification Logger 便可轻松的解决此问题，它使用的 Notification API 将为你的console.log 消息转换为桌面通知。当你使用 logger.init 初始化后，你就可以仅通过桌面通知，或同时通过桌面通知和 console 控制台，来调用logger.destroy 恢复到正常的 console.log 功能。

这是有意义的。不仅你不必打开控制台来查看日志消息，虽然消息通知与浏览器窗口是分离的，而且你不必取消停靠 DevTools 来获得你的原始窗口大小。

Intercooler.js

这个辅助工具已经在 Hacker News 上引起了不少人的注意，与此同时也出现了关于它如何有用的许多争议。它被描述为“具有属性的 Ajax ”，这也让它吸引了喜欢使用 Hook HTML 并需要较少 JavaScript 库的这些人的注意。

2016 年我最喜欢的前端工具该库通过添加到 HTML 元素的预定义 ic- * 属性展开工作，在网站上提供了完整的参考。例如，你可以使用ic-target 和 ic-get-from 等属性来创建一个内置的点击编辑 UI；使用 ic-history-elt 添加 URL /历史记录支持；使用ic-prepend-from 和 ic-poll 创建暂停/播放 UI. 你也可以在示例页面上，获得更多的描述和演示。