文档结构  
原作者:Louis Lazaris (2016-12-20)    来源:SitePoint [英文]
CY2    计算机    2016-12-27    0评/10846阅
翻译进度:已翻译   参与翻译: vincentsun (13), 小吕 (3)

又一年过去了,正如我们所预料的那样,随着创新、刺激、抑制和大量新工具、新技术的涌入,Web平台持续爆发,这将会使开发人员的工作变得更轻松。

和平常一样,我们看到流行工具像React和Angular已经更新,而新工具如Vue.js也已经出现,并迅速攫取了大量的关注。

正如你们许多人所知道的,因为我要主持每周时事通讯比较关注工具,我会通过我的研究来排除那些不合理的。通常,我会关注一些流行的东西。但我也欣赏一些不太注意的,既有趣又实用的东西。所以,就像去年我做的一样,我将在这篇文章中介绍一些我最喜欢的工具给前端开发人员。

第 1 段(可获 1.88 积分)

Modaal

我觉得具有可访问性特性的工具在我们的行业中往往不会被欣赏,所以我要第一个介绍的是一款灵活和易于使用的模态窗口插件。

Modaal

我们不难找到一个模态窗口插件,但很少能找到一个就功能和特性而言,检查几乎所有盒子的工具。这种模态窗口完全我们预期的方式来运行——它是响应式的,它基于用户交互能够正确工作(例如当你按ESC键时关闭等),它的WCAG 2 AA级访问,接受几乎所有类型的内容,具有全屏幕支持,为在开和关之前/后提供回调事件等等。

第 2 段(可获 1.51 积分)

下面是我简单制作的CodePen演示,用于证明它如何工作。

CodePen上查看Modaal Window Examples using Modaal,作者为SitePoint (@SitePoint) 。

 

使用Modaal唯一的主要的缺点是,它目前依赖jQuery,以及它不兼容jQuery的slim版本。上述的CodePen演示使用了jQuery 3.1.1。我还测试了它在v2.0中的工作情况,Modaal应当兼容jQuery 1.11.2以上版本。

Jam API

这个Web服务可以为许多不同的事情派上用场,不一定只涉及前端开发。它被描述为“一个使用CSS选择器的,允许你把任何网站转换为JSON 可访问的API的工具”。所以这是一个让你刮取的内容的工具——但CSS部分真的对前端开发者来说非常有趣。

第 3 段(可获 1.88 积分)

Jam API

要使用它的API,你要对Jam API网站执行一个POST请求,将你需要刮取的网站的URL发送过去。代码会有所不同,这依赖于你是使用Node,还是Ruby等。出于我们的目的,我会扩展他们在GitHub目录提供的JavaScript例子。利用那个例子,我能够制作一个简单的工具供你展示任何CSS属性可能的值,这是从我的CSS值网站刮取的。

CodePen上查看Using Jam API to fetch CSS Data from cssvalues.com,作者为SitePoint (@SitePoint) 。

 

当然,这个例子没什么意义,因为CSS值网站已经做过这个事情了。但这是一个简单的方式来说明Jam API是如何工作的。JavaScript代码关键部分如下:

第 4 段(可获 1.69 积分)
body: JSON.stringify({
  url: 'http://cssvalues.com',
  json_data: '{"values": "#' + prop + ' ul"}'
})

在这里我输入我想要刮取的网站的URL,然后我使用一个CSS选择器来决定抓取页面的哪个部分。因此,如果用户输入display属性,上述的JavaScript会计算出下面的内容:

body: JSON.stringify({
  url: 'http://cssvalues.com',
  json_data: '{"values": "#display ul"}'
})

由于CSS值网站是我自己建立的,我知道每个CSS属性的章节有一个匹配它的属性名的ID。我同时知道,每个属性在一个无序列表中列出它的所有值。因此,只要你知道HTML结构,利用一个有用的工具抓取这些值是很容易的。

第 5 段(可获 1.25 积分)

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
}
第 6 段(可获 0.58 积分)

但是随着postcss-grid-kiss, 你写东西可以像这样:

body {
  grid-kiss:
    "+------------------------------+      "
    "|           header ↑           | 120px"
    "+------------------------------+      "
    "                                      "
    "+--150px---+  +----- auto -----+      "
    "| .sidebar |  |      main      | auto "
    "+----------+  +----------------+      "
    "                                      "
    "+------------------------------+      "
    "|              ↓               |      "
    "|         → footer ←           | 60px "
    "+------------------------------+      "
}
第 7 段(可获 0.11 积分)

是的你没看错。你基本上可以将你网站的布局使用ASCII字符绘制出来,作为grid-kiss 属性的值。然后插件将代码转换成有效的CSS,结果与第一个代码块中显示的基本类似。

插件文档包含一个生动的游乐场,在这里你可以尝试其语法。插件鼓励开发人员点击键盘上的insert键,并使用其文本编辑器的多光标功能,以使网格绘图更高效。

我不是一个PostCSS使用者,除了在操场上摆弄一下之外,我没有真正使用过这个工具。无论如何,这仍然使我的清单充满纯粹的创造力。

第 8 段(可获 1.41 积分)

MJML App

HTML email蓬勃发展,而且你可能已经注意到,每个月都会发布很多资源和工具,帮助响应式email通讯的设计和编码。MJML app 是一个原生的桌面应用,允许你使用MJML来创建和编辑响应式的HTML email,MJML是一个自定义标记语言框架,可以编译成为email兼容的HTML(即嵌套的表格代码)。

MJML App

框架和应用都是今年年初发布的,应用程序有Windows,OSX和Linux版本。编辑器有许多主题可供选择,并具有分割屏幕视图与实时预览功能。

第 9 段(可获 1.33 积分)

这是MJML语法的一个简单的例子:

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-text>Testing</mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

然后这些代码会被转换为有效的HTML,你可以在这个Gist里看到。这种语言还是相当混乱的,但这正是使得像这样的语言和应用程序非常有用的原因——你不必担心兼容性,它会为你做所有的工作。

这个应用允许你导出为MJML或HTML,你可以快速将你的模板保存为匿名的Gist(我没看到能将其连接到GitHub账户的方法,但如果能做到,那就太棒了)。

第 10 段(可获 1.21 积分)

DevTools Timeline Viewer

这是来自于ChromeDevTools团队的一个官方工具,它允许你很容易对你的DevTools Timeline(开发工具时间线)记录查看和共享URL。

DevTools Timeline Viewer

Chrome DevTools中的Timeline选项卡允许你记录和分析你的Web应用程序的活动,从中你可以通过JavaScript分析、绘制等方式调查潜在的性能问题。

在捕获了一些Timeline数据之后(要么在Timeline工具打开的时候刷新页面,要么单击“记录”并与页面交互),你将看到基于捕获的详细图形和数据。

第 11 段(可获 1.19 积分)

当你右键单击Timeline时,你会注意到有一个“载入Timeline数据”和“保存Timeline数据”的选项。“保存...”选项会将Timeline数据导出为一个JSON文件。你可以将导出的数据存储到DropBox、GitHub Gist或Google Drive上,以便将数据分享给他人。这是非常方便的一种与远程的工作者和同事分享Timeline的方式。

你可以使用Gist看到我这里导出的数据的一个例子。如果你不熟悉Chrome的DevTools Timeline,这里是一个很好的起点

Notification Logger

这个工具是能达到同样功能的最简单的工具了。如果你进行任何的JavaScript调试,你很有可能会使用 console.log 消息。这比起恼人的 alert() 事件更有用,但每次你想做一个简单的日志时打开控制台仍有点无聊。

第 12 段(可获 1.86 积分)

Notification Logger

Notification Logger 将你的 console.log 消息通过Notification(通知) API转换成桌面通知。当你使用logger.init初始化后,你可以仅通过桌面通知的方式记录消息,或者同时通过桌面和控制台。然后你可以通过调用logger.destroy返回普通的console.log功能。

这项工作是有意义的,不仅仅是因为你不需要打开控制台来看你的日志信息,而且是因为通知是与浏览器窗口分开的,因此你不需要最小化DevTools来获取你的原始窗口大小。

第 13 段(可获 1.06 积分)

Intercooler.js

这项工作在Hacker News中引起了一些关注,有一些关于它多么有用的讨论。它被描述为“有属性值的Ajax”,这迅速吸引了一些人的注意,这些人喜欢钩入HTML,需要更少JavaScript代码的的库函数的易用性。

Intercooler.js

这个库通过预定义加入HTML元素的 ic-* 属性的方式工作。 网站上有一个完整的接口文档

举例来说,你可以使用像 ic-targetic-get-from 这样的属性来创建一个内联的点击即可编辑的界面;使用 ic-history-elt 来增加URL或访问历史支持;使用 ic-prepend-fromic-poll 来创建一个暂停/播放界面,有更多的例子在这个举例页面进行描述和演示。

第 14 段(可获 1.48 积分)

这个库的一个缺点是它依赖于jQuery(看起来与1.10.2+版本兼容)。但我猜测这不是一个大问题,因为这类项目的目标开发者与jQuery的基本是一拨人。

二等奖

这里有更多的我今年找到的酷炫的工具…

  • RE-Build – 利用自然语言生成正则表达式
  • Grunt Unused – 一个 Grunt 任务,用于检查一个工程中未使用的文件(.jpg, .png, .css, .js等)并将他们输出到命令行中,同时提供删除选项
  • Just – 一个只做一件事的无依赖的公用程序库
  • Landmarks – 允许你仅使用键盘或一个弹出式菜单,通过WAI-ARIA地标浏览一个网页
  • Atomize – 检查你的网站采用Atomic CSS能获取多少收益
  • Ergo Web Tools – iPad上的桌面级前端网站开发工具
  • FLIP.js – 自动将昂贵复杂的动画映射到更有效率动画的辅助库
  • BackstopJS – 一个用于可视化测试网站应用URL状态,防止破坏的布局和其他问题的简单的方式
第 15 段(可获 2.58 积分)

你今年找到的最佳前端工具是什么?

该作者的更多文章

如果在过去几年你找到了更冷僻的,提高工作流或简化一些开发流程的工具或代码库,请在评论中自由分享出来。

我希望本文中提到的部分工具能帮助你和你的团队。现在,我们已经准备好去探索新的一年前端工具的发展了...

第 16 段(可获 1.15 积分)

文章评论