2016达内前端视频_前端工具：2016年我的最爱

2016达内前端视频

Another year has passed and, as we all expected, the Web Platform is continuing to explode with innovation, irritation, fatigue, and a huge influx of new tools and technologies that promise to make our lives as developers easier.

又过了一年，并且，正如我们所有人所期望的那样，Web平台将继续以创新， 激怒 ， 疲劳以及大量新工具和技术涌入 ，这些新工具和技术有望使我们作为开发人员的生活更加轻松。

As usual, we’ve seen updates to popular tools like React and Angular, while new tools like Vue.js have come on the scene and quickly scooped up a large amount of interest.

像往常一样，我们已经看到了流行工具(如React和Angular)的更新，而新工具(如Vue.js)已经出现并Swift引起了人们的极大兴趣。

As many of you know, because I curate a weekly newsletter that focuses on tools, I come across a preposterous amount of things in my research. Naturally, I give some attention to the popular stuff. But I also appreciate some of the lesser-noticed things that are both interesting and practical. So, just like I did last year, in this article I’ll describe some of my favorite finds of the year in the area of tools for front-end developers.

就像你们中许多人所知道的那样，因为我策划了一份每周一期的通讯 ，重点关注工具，所以我在研究中遇到了很多荒谬的事情。 自然，我会关注流行的东西。 但我也欣赏一些有趣而实用的鲜为人知的事情。 因此， 就像我去年一样 ，在本文中，我将介绍当年我最喜欢的前端开发人员工具发现。

莫代尔 (Modaal)

It always feels like tools featuring accessibility tend to go unappreciated in our industry, so the first one I’m including here is this flexible and easy-to-use modal window plugin.

总是感觉具有可访问性的工具在我们的行业中往往不受欢迎，因此，我要介绍的第一个工具是此灵活易用的模态窗口插件。

It’s not difficult to find a modal window plugin, but it’s rare to find one that checks almost all the boxes in terms of functionality and features. This modal window behaves exactly as it’s supposed to behave – it’s responsive, it functions correctly based on user interaction (e.g. it closes when you hit ESC, among other things), it’s WCAG 2.0 Level AA accessible, accepts virtually all types of content, has full-screen support, offers callback events for before/after open and close, and lots more.

找到模态窗口插件并不难，但是很少会找到在功能和特性方面都已选中所有复选框的插件。 此模式窗口的行为与预期的行为完全相同-它具有响应能力，可以根据用户交互正确运行(例如，当您按ESC键时它会关闭)，可以访问WCAG 2.0 Level AA，接受几乎所有类型的内容，具有全屏支持，提供打开和关闭之前/之后的回调事件，还有更多功能。

Below is a CodePen demo I whipped up to demonstrate how it can be used.

下面是我编写的CodePen演示，以演示如何使用它。

See the Pen Modaal Window Examples using Modaal by SitePoint (@SitePoint) on CodePen.

见钢笔使用Modaal Modaal窗口实例由SitePoint( @SitePoint上) CodePen 。

The only major drawback to using Modaal is the fact that it currently has jQuery as a dependency and it doesn’t work with jQuery’s slim build. My CodePen demo above is using jQuery 3.1.1. I also tested it in v2.0 and Modaal is supposed to work with jQuery 1.11.2 and above.

使用Modaal的唯一主要缺点是，目前它已将jQuery作为依赖项，并且不适用于jQuery的苗条版本。 我上面的CodePen演示使用的是jQuery 3.1.1。 我也在v2.0中进行了测试，并且Modaal应该与jQuery 1.11.2及更高版本一起使用。

果酱API (Jam API)

This web service could come in handy for a number of different things, not necessarily only related to front-end development. It’s described as “a service that allows you to turn any site into a JSON accessible API using CSS selectors.” So it’s a tool that lets you scrape content – but the CSS part really makes it interesting for front-end devs.

该Web服务可用于许多不同的事情，而不必仅与前端开发有关。 它被描述为“一项允许您使用CSS选择器将任何网站转换为JSON可访问API的服务。” 因此，它是一个使您能够抓取内容的工具-但是CSS部分确实使前端开发人员感兴趣。

To use the API, you execute a POST request to the Jam API website, sending the URL of the website you want to scrape. The code will vary depending on if you’re using Node, Ruby, etc. For our purposes, I’ll expand on the JavaScript example they provide on their GitHub repo. Using that example, I was able to build a simple tool to let you display the possible values for any CSS property, which is scraped from my CSS Values website.

要使用该API，您需要对Jam API网站执行POST请求，并发送您要抓取的网站的URL。 根据您是否使用Node，Ruby等，代码将有所不同。出于我们的目的，我将扩展它们在GitHub存储库中提供JavaScript示例。 使用该示例，我能够构建一个简单的工具，让您显示任何CSS属性的可能值，这些属性是从我的CSS Values网站上抓取的 。

See the Pen Using Jam API to fetch CSS Data from cssvalues.com by SitePoint (@SitePoint) on CodePen.

见笔使用果酱API来获取cssvalues.com CSS数据由SitePoint( @SitePoint上) CodePen 。

Of course, this example is pointless because the CSS Values website does this already. But it’s a simple way to demonstrate how Jam API works. The key part of the JavaScript is this:

当然，此示例毫无意义，因为CSS Values网站已经这样做了。 但这是演示Jam API如何工作的简单方法。 JavaScript的关键部分是：

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

Here I input the URL of the website I want to scrape, then I use a CSS selector to determine what part of the page to grab. So the above JavaScript would compute to the following if the user enters the display property:

在这里，我输入要抓取的网站的URL，然后使用CSS选择器确定要抓取页面的哪一部分。 因此，如果用户输入display属性，则上述JavaScript将计算为以下内容：

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

Having built the site myself, I know that every CSS property’s section has an ID that matches its property’s name. And I also know that each property lists its values in an unordered list. So grabbing those values is trivial with a useful service like this as long as you know the structure of the HTML.

我自己建立了站点，我知道每个CSS属性的部分都有一个与其属性名称匹配的ID。 而且我还知道，每个属性都在无序列表中列出其值。 因此，只要您知道HTML的结构，就可以使用这样的有用服务来获取这些值很简单。

postcss-grid-kiss (postcss-grid-kiss)

When I first saw this one, I thought it was a joke. But apparently it’s a real PostCSS plugin that aims to make the W3C’s new Grid Layout Module syntax absurdly simple.

当我第一次看到这个时，我以为是个玩笑。 但是显然，这是一个真正的PostCSS插件，旨在使W3C的新Grid Layout Module语法变得非常简单。

Normally, when using Grid Layout, your CSS will look like this:

通常，当使用“网格布局”时，您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
}

But with postcss-grid-kiss, you instead write something like this:

但是，使用postcss-grid-kiss时，您可以编写如下代码：

body {
  grid-kiss:
    "+------------------------------+      "
    "|           header ↑           | 120px"
    "+------------------------------+      "
    "                                      "
    "+--150px---+  +----- auto -----+      "
    "| .sidebar |  |      main      | auto "
    "+----------+  +----------------+      "
    "                                      "
    "+------------------------------+      "
    "|              ↓               |      "
    "|         → footer ←           | 60px "
    "+------------------------------+      "
}

Yes, you’re seeing that right. You essentially draw your website’s layout using ASCII characters as a value of the grid-kiss property. The plugin then processes the code to the valid CSS equivalent similar to what’s shown in the first code block.

是的，您看到的没错。 本质上，您使用ASCII字符作为grid-kiss属性的值来绘制网站的布局。 然后，该插件将代码处理为等效于有效CSS的代码，类似于第一个代码块中显示的内容。

The documentation includes a live playground where you can try out the syntax. Developers are encouraged to toggle the insert key on their keyboard and use the multi-cursor feature of their text editor to make grid drawing more efficient.

该文档包括一个现场游乐场 ，您可以在其中试用语法。 鼓励开发人员在其键盘上切换插入键，并使用其文本编辑器的多光标功能来提高网格绘图的效率。

I’m not a PostCSS user, so I haven’t actually used this one other than fiddling around with the playground. Regardless, this still made my list for the sheer ingenuity.

我不是PostCSS用户，所以除了在操场上闲逛以外，我实际上并没有使用过这个。 无论如何，这仍然使我的列表非常机灵。

MJML应用 (MJML App)

HTML email is booming and, as you’ve probably noticed, there are lots of resources and tools being released every month to help with responsive email newsletter design and coding. MJML app is a native desktop application that allows you to create and edit responsive HTML emails using MJML, which is a custom markup language framework that compiles to email-compatible HTML (i.e. nested table code).

HTML电子邮件正在蓬勃发展，并且，您可能已经注意到，每月都有大量资源和工具发布，以帮助进行响应式电子邮件通讯的设计和编码。 MJML应用程序是一个本地桌面应用程序，允许您使用MJML创建和编辑响应HTML电子邮件， MJML是一种自定义标记语言框架，可以编译为与电子邮件兼容HTML(即嵌套表代码)。

Both the framework and the app were released early this year, and the app is available on Windows, OSX, and Linux. The editor has lots of themes to choose from and features a split-screen view with live preview.

该框架和该应用程序均于今年年初发布，并且该应用程序可在Windows，OSX和Linux上使用。 该编辑器有很多主题可供选择，并具有带实时预览的分屏视图。

Here’s a simple example of the MJML syntax:

这是MJML语法的简单示例：

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

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

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

That would then render to the valid HTML, which you can see in this Gist. It’s pretty messy, but that’s what makes a language and application like this so useful – you don’t have to worry about making things compatible, it will do all the work for you.

然后，它将呈现为有效HTML，您可以在此Gist中看到。 这很混乱，但这就是使这样的语言和应用程序如此有用的原因–您不必担心使事情兼容，它将为您完成所有工作。

The app allows you to export as MJML or HTML, and you can quickly save your templates as anonymous Gists (I don’t see a way to hook it into your GitHub account, but that would be nice).

该应用程序允许您将其导出为MJML或HTML，并且可以快速将模板另存为匿名Gists(我看不到将其挂接到GitHub帐户的方法，但这很好。)

DevTools时间轴查看器 (DevTools Timeline Viewer)

This is an official tool from the ChromeDevTools team that allows you to easily view and share URLs for your DevTools Timeline traces.

这是ChromeDevTools小组的官方工具，可让您轻松查看和共享DevTools时间轴跟踪的URL。

The Timeline tab in Chrome’s DevTools allows you to record and analyze your web app’s activity, from which you can investigate potential performance issues by means of JavaScript profiling, painting, and more.

Chrome的DevTools中的“时间轴”选项卡允许您记录和分析Web应用程序的活动，您可以在其中通过JavaScript分析，绘画等方式调查潜在的性能问题。

After you capture some timeline data (either by refreshing the page with Timeline open or by hitting “Record” and interacting with the page), you’ll see detailed graphics and data based on what was captured.

捕获一些时间轴数据后(通过在打开的时间轴上刷新页面或单击“记录”并与页面进行交互)，您将看到基于捕获的内容的详细图形和数据。

When you right-click on the timeline, you’ll notice there are options to “Load Timeline data” and “Save Timeline data”. The “Save…” option will export the timeline data as a JSON file. You can then save that data to Dropbox, a GitHub Gist, or Google Drive so you can share the data with others. Very handy for sharing Timeline data with remote workers and colleagues.

右键单击时间线时，您会注意到“加载时间线数据”和“保存时间线数据”有一些选项。 “保存...”选项会将时间轴数据导出为JSON文件。 然后，您可以将该数据保存到Dropbox，GitHub Gist或Google Drive，以便与他人共享数据。 与远程工作人员和同事共享时间线数据非常方便。

You can see an example of data I exported here using a Gist. If you’re not familiar with Chrome’s DevTools Timeline, this is a good place to start.

您可以在此处查看使用Gist 导出的数据示例。 如果您不熟悉Chrome的DevTools时间轴，那么这是一个不错的起点 。

通知记录器 (Notification Logger)

This tool is as simple as it gets. If you do any amount of JavaScript debugging, chances are you’re utilizing console.log messages. This is more useful than doing annoying alert() stuff, but it’s still a little tedious to have to open the console every time you want to do a simple log.

该工具非常简单。 如果您进行了大量JavaScript调试，则很可能会利用console.log消息。 这比做烦人的alert()东西有用，但是每次您想做一个简单的日志时都必须打开控制台，这仍然有些繁琐。

Notification Logger converts your console.log messages to desktop notifications using the Notification API. After you initialize it using logger.init, you can log messages via desktop notifications only, or simultaneously via both desktop and console. Then you can revert back to normal console.log functionality by calling logger.destroy.

Notification Logger使用Notification API将您的console.log消息转换为桌面通知。 使用logger.init初始化它logger.init ，您可以仅通过桌面通知记录消息，或者同时通过桌面和控制台记录消息。 然后，您可以通过调用logger.destroy恢复到常规console.log功能。

This makes sense not only because you don’t have to open the console to view your log messages, but the notifications are separate from the browser window so you don’t have to undock the DevTools to get your original window size.

这不仅有意义，因为您不必打开控制台来查看日志消息，而且通知与浏览器窗口是分开的，因此您无需取消对DevTools的固定即可获得原始窗口大小。

Intercooler.js (Intercooler.js)

This one has had some attention on Hacker News, and there was a little bit of debate over how useful it is. It’s described as ‘Ajax with attributes’, which will immediately grab the attention of those who like the ease of use of libraries that hook into HTML and require less JavaScript.

这个话题引起了Hacker News的关注，关于它的实用性还存在一些争议 。 它被描述为“具有属性的Ajax”，它将立即吸引那些喜欢易于使用的，可以插入HTML并需要较少JavaScript的库的人们的注意。

The library works by means of predefined ic-* attributes that you add to your HTML elements, a full reference of which is available on the site.

该库通过添加到HTML元素中的预定义ic-*属性来工作，该属性的完整引用可在网站上获得。

For example, you can use attributes like ic-target and ic-get-from to create an inline click-to-edit UI; use ic-history-elt to add URL/history support; use ic-prepend-from and ic-poll to create a pause/play UI, and lots more described and demoed on the examples page.

例如，您可以使用ic-target和ic-get-from类的属性来创建嵌入式点击编辑UI； 使用ic-history-elt添加URL /历史记录支持； 使用ic-prepend-from和ic-poll创建一个暂停/播放用户界面， 示例页面上对此进行了更多描述和演示。

The one drawback to the library is the fact that it relies on jQuery (looks like 1.10.2+ support). But I’m guessing this isn’t such a big deal because the target developers for this sort of project are probably similar to those using jQuery.

该库的一个缺点是它依赖jQuery(看起来像1.10.2+支持)。 但是我猜这没什么大不了的，因为这类项目的目标开发人员可能与使用jQuery的目标开发人员相似。

Intercooler promises to allow you to add Ajax to an existing app “incrementally without rewriting everything” and will work unobtrusively alongside any back-end technology or other JavaScript frameworks.

Intercooler承诺允许您“递增地将Ajax添加到现有应用程序中，而无需重写所有内容”，并且可以与任何后端技术或其他JavaScript框架兼容地工作。

荣誉奖 (Honorable Mentions)

Here are a few more cool things I found this year…

这是我今年发现的一些更酷的东西…

• RE-Build – Build regular expressions using natural language

  重新构建 –使用自然语言构建正则表达式

• Grunt Unused – A Grunt task to check for unused files (.jpg, .png, .css, .js, etc.) in a project and output them to the console with the option to delete

  Grunt Unused –一项Grunt任务，用于检查项目中未使用的文件(.jpg，.png，.css，.js等)并将其输出到控制台，并带有删除选项

• Just – A library of dependency-free utilities that just do one thing

  Just –只做一件事的无依赖实用程序库

• Landmarks – Allows you to navigate a web page via WAI-ARIA landmarks, using the keyboard or a pop-up menu

  地标 –允许您使用键盘或弹出菜单通过WAI-ARIA地标浏览网页

• Atomize – Test how much your website can benefit from adopting Atomic CSS

  Atomize –测试您的网站可以从采用Atomic CSS中受益多少

• Ergo Web Tools – Desktop-grade, front-end web development tools for iPad

  Ergo Web Tools –适用于iPad的桌面级前端Web开发工具

• FLIP.js – A helper library to automatically remap expensive animations to more efficient ones

  FLIP.js –帮助程序库，可自动将昂贵的动画重新映射为更高效的动画

• BackstopJS – An easy way to visually test web app URL states for broken layouts and other issues

  BackstopJS –一种简便的方法，可以直观地测试Web应用程序URL状态是否存在布局中断和其他问题

您对本年度前端工具有何发现？ (What’s your find of the year in front-end tools?)

If there’s a lesser-known tool or library you’ve found over the past year that’s improved your workflow or simplified some development process, feel free to share it in the comments.

如果您在过去一年中发现了鲜为人知的工具或库，从而改善了工作流程或简化了某些开发过程，请随时在评论中分享。

I hope a few of the ones I’ve referenced in this post will prove useful for you or your team. And now we’re ready to turn the page into a new year of front-end development…

我希望本文中引用的一些内容对您或您的团队有用。 现在，我们已经准备好将页面变成前端开发的新一年……

翻译自: https://www.sitepoint.com/front-end-tools-my-favorite-finds-of-2016/

2016达内前端视频