前端工具：2015年我最喜欢的一些发现-CSDN博客

我们即将在2015年底发布，我相信你们都同意今年已经是挤满了网络设计和开发新工具的一年了。在撰写时事通讯时，我遇到了很多有趣的事情，因此我认为在年底的帖子中总结一些我最喜欢的发现会很酷。

在开始之前，我应该提到：

我不一定要保证这些工具的质量或安全性。
仅仅因为我在2015年发现了它们，并不意味着它们是在2015年建造的（其中有些比这更旧）。
它们没有任何特定的顺序。
并非所有这些工具都一定是“前端”工具，但是我正在这种情况下进行讨论。

因此，让我们开始吧！

ai2html

让我们从一开始就肯定会引起很多人关注的想法开始。这来自《纽约时报》新闻编辑室开发人员，其描述为：

用于Adobe Illustrator的[A] n开源脚本，可将Illustrator文档转换为html和css。

ai2html

它使用JavaScript编写，通过将.js文件放入Illustrator安装的“ Scripts”文件夹中而被添加到Illustrator。完成后，请按照以下步骤操作：

创建您的Illustrator图稿。
- 将画板尺寸调整为希望div出现在网页上的尺寸。
- 确保将Document Color Mode设置为RGB 。
通过选择以下文件来运行脚本：文件>脚本> ai2html。
转到包含Illustrator文件的文件夹，然后找到位于ai2html-output文件夹内的HTML文件。

您可以自定义图像格式，PNG和JPEG质量，页面响应性，HTML文件数量等等的导出。《纽约时报》甚至还收集了其团队以及其他人使用该示例的示例。

位置

这很整齐。这是一个命令行工具，可帮助您在源代码上构建统计信息。默认情况下，输出只是一个简单的结果列表，但是您可以将其切换为CSV，JSON或CLI表格式。通过npm安装后，您将运行以下命令：

sloc index.html

我在一个具有很大HTML文件的项目中运行了上面的命令，结果如下：

---------- Result ------------

            Physical :  9788
              Source :  6340
             Comment :  645
 Single-line comment :  0
       Block comment :  645
               Mixed :  642
               Empty :  3445

Number of files read :  1

------------------------------

注意注释类型的细分

并使用以下命令，该命令以JSON格式输出：

sloc --format json index.html

我们得到以下结果：

{
  "files": [
    {
      "path": "index.html",
      "stats": {
        "total": 9788,
        "source": 6340,
        "comment": 645,
        "single": 0,
        "block": 645,
        "mixed": 642,
        "empty": 3445
      },
      "badFile": false
    }
  ],
  "summary": {
    "total": 9788,
    "source": 6340,
    "comment": 645,
    "single": 0,
    "block": 645,
    "mixed": 642,
    "empty": 3445
  }
}

您也可以在节点模块中，通过浏览器中的JavaScript或Grunt插件来使用它。

走道

随着SVG工具和资源的爆炸式增长，在本文中仅包含一些SVG内容是合适的。这是“动画SVG元素的简便方法”。我可以保证它的易用性。

该项目的主页上有一个示例，说明您可以使用此库执行的操作。

它支持path ， line和polyline元素的动画，并允许您定义持续时间值和缓动函数。几分钟后，我就可以使用一些公共领域的SVG艺术作品将演示放在一起。

见笔Walkway.js例如SVG动画由SitePoint（ @SitePoint ）上CodePen 。

虽然确实存在更复杂的SVG动画库，但我为简单起见是傻子。 Walkway确实做得很好，并且很容易实现。

VisSense.js

该库可能有很多不同的用例。描述为：

用于观察DOM元素的可见性更改的实用程序库。立即知道元素何时变为隐藏，部分可见或完全可见。

VisSense.js

很棒的事情是，这不适用于display: none和visibility: hidden在CSS中的事情，但也会在元素从屏幕上滚动时触发。这可以在游戏或独特的滚动界面中派上用场。

演示页面上有许多非常好的示例。这是一个示例代码片段，因此您可以了解其用法：

var video = $('#video');
var visibility = VisSense(video[0], { fullyvisible: 0.75 });

var visibility_monitor = visibility.monitor({
  fullyvisible: function() {
    video.play();
  },
  hidden: function() {
    video.stop();
  }
}).start();

在这种情况下，我们要告诉浏览器仅在屏幕上可见至少75％的视频时播放视频，否则停止视频。图书馆有许多方法，包括hidden() visible() fullyVisible() visibilitychange()和percentagechange() 您可以查看文档以获取有关这些功能和其他功能的详细信息。

is.js

这被称为“微型检查库”，它具有一个不错的API，可让您执行各种数据检查。

is.js

这里有些例子：

is.decimal(41.5); // true
is.number('hello'); // false
is.regexp(/test/); // true
is.usZipCode('90201'); // true
is.socialSecurityNumber('017-90-7890'); // true
is.hexColor('#333'); // true
is.odd(42); // false
is.domNode(el); // depends on the value of el
is.iphone(); // depends on device
is.ipad(); // depends on device
is.inNextWeek(myDate); // depends on date value

那只是可用的一小部分。应该注意的是，文档列出了一系列的“环境”检查（包括浏览器测试，设备测试，操作系统等），所有这些似乎都是通过用户代理字符串检查来完成的。所以我会对此保持谨慎。但是除此之外，这是一个精巧的小程序库，可以作为许多项目上的首选实用程序之一使用。

Grunt SassyClean

正如Sass官方网站上指出的那样，许多Sass开发人员在Sass中使用“部分”来模块化他们的Sass代码库。例如，一个项目可能包含_reset.scss ， _typography.scss ， _mixins.scss等文件。然后通过@import指令将它们放入您的项目中。

Grunt SassyClean

Grunt SassyClean是一项Grunt任务，它允许您删除所有未使用的部分。也就是说，您可能在文件夹结构中包含了它们，但是由于某种原因，您实际上并未在项目中使用它们。

在您的Gruntfile中，您将在grunt.initConfig() ：

sassyclean: {
  options: {
    modules: ['sass/modules/**/*.scss',
              'sass/themes/**/*.scss',
              'sass/layout/**/*.scss',
              'sass/base/**/*.scss'],
    buildfiles: ['sass/**/*.scss'],
    remove: false,
    days: null
  },
}

使用buildfiles选项，您可以选择要检查的部分导入目录（视情况而定）。默认位置是sass/但是（如上所示）可以更改。 modules选项使您可以定义存在部分的目录数组。 remove选项告诉Grunt是否立即删除文件。如果选择false ，则不会删除文件，而是将文件名记录到控制台。最后，使用days选项，仅当未在指定天数内对其进行修改的情况下，才可以删除部分。

萨斯导演

这是来自Una Kravets的另一个简洁但简单的小Sass工具，在启动新的Sass项目时可能对您有用。如前所述，Sass项目通常会导入许多局部。这些可以组织成清单文件或主文件。使用清单文件的内容，Sass Director生成一个终端命令，该命令执行后将自动创建项目的目录结构和文件。

萨斯导演

因此，如果您的main.scss文件如下所示：

@import "vendors/bootstrap";
@import "vendors/jquery-ui";

@import "utils/variables";
@import "utils/functions";
@import "utils/mixins";
@import "utils/placeholders";

@import "base/reset";
@import "base/typography";

@import "layout/navigation";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/forms";

@import "components/buttons";
@import "components/carousel";
@import "components/cover";
@import "components/dropdown";

@import "pages/home";
@import "pages/contact";

@import "themes/theme";
@import "themes/admin";

生成的终端命令将如下所示：

mkdir vendors;cd vendors;
touch _bootstrap.scss;touch _jquery-ui.scss;
cd ../;mkdir utils;cd utils;
touch _variables.scss;touch _functions.scss;
touch _mixins.scss;touch _placeholders.scss;
cd ../;mkdir base;cd base;touch _reset.scss;touch _typography.scss;
cd ../;mkdir layout;cd layout;touch _navigation.scss;
touch _grid.scss;touch _header.scss;touch _footer.scss;
ouch _sidebar.scss;touch _forms.scss;
cd ../;mkdir components;cd components;touch _buttons.scss;
touch _carousel.scss;touch _cover.scss;touch _dropdown.scss;
cd ../;mkdir pages;cd pages;touch _home.scss;touch _contact.scss;
cd ../;mkdir themes;cd themes;touch _theme.scss;touch _admin.scss;
cd ../;cd ../;

您可以在线尝试，甚至可以将其安装为Sublime插件。

真棒

这是Lea Verou的易于使用，无依赖的自动完成脚本，可以替代非常有问题的datalist元素。

该工具完全可以完成所有工具的工作：提供一种无需任何额外JavaScript即可轻松使用它的方法，并为专家用户提供高级自定义功能。例如，放入脚本和CSS文件后，可以在HTML中执行以下操作：

<input class="awesomplete"
       data-list="Cobol, Java, JavaScript, PHP, Python, Ruby" />

这将产生以下结果：

见笔Awsomplete演示由SitePoint（ @SitePoint ）上CodePen 。

除了简单使用，可以定制它通过（例如）改变的最小字符数需要被下拉出现之前（默认值为2）类型的，调整的项目的最大数目，以显示（默认为10 ），以及是否自动选择显示的第一个选项。

您还可以通过操纵项目的过滤，排序等方式来扩展它，或者使用内置事件或方法添加自己的自定义项。

我的网站费用是多少？

蒂姆·卡德尔茨（Tim Kadlec）的这个项目以实用的方式解决了性能问题。在移动网络和次优网络上，性能最为重要，因此此在线工具可让您：

找出某人在全球范围内的移动网络上使用您的网站要花多少钱。

我的网站费用是多少？

该项目由WebPagetest驱动，您可以通过运行新测试或通过打入WebPagetest ID来获取现有测试的结果来获得结果。

JSCS

JSCS代表“ JavaScript代码样式”。这不是一个新项目，但这是我去年遇到的一个问题，我认为每个JavaScript开发人员都应该知道它的存在。

JSCS

描述为：

代码样式的linter / formatter，用于以编程方式执行样式指南。您可以使用150多种验证规则为您的项目/公司配置JSCS，其中包括来自流行样式指南（如jQuery，Airbnb，Google等）的预设。

您可以将其与可用的软件包/插件之一一起使用（包括Grunt，Sublime，Atom，Brackets等），也可以通过npm安装它并使用如下命令手动运行它：

jscs file.js --preset=jquery

这将对照jQuery的JavaScript样式指南测试您的代码，并提出相应的建议。您还可以从许多其他预设以及一系列其他选项中进行选择。

这是我在一个JavaScript文件上运行JSCS时的示例终端输出：

JSCS终端输出

如您所见，这是一个非常强大的工具，您可能想将其引入自己团队的工作流程中。

最好的休息

最后，这里有一些“值得一提的内容”，也许也值得一看：

csswizardry-grids –哈里·罗伯茨（Harry Roberts）着，所以它一定很好。
xr –就像我说的，我喜欢简单的事情，一件事情做得很好，所以这个“围绕XMLHttpRequest的包装器”列出了清单。
Bootply – Bootstrap一直是受欢迎的主题，因此值得一看的Bootstrap编辑器和Playground 。
ES功能测试 –“功能测试ES6 + JavaScript语法和API。使用这些浏览器内测试结果可以为每个浏览器提供最佳代码。在符合ES6 +的浏览器中加载本机ES6 +代码，并在较旧的浏览器中加载转码。”
您可能不需要jQuery插件 –可以根据IE支持进行过滤的无jQuery插件和脚本的目录。
tota11y –“帮助可视化您的网站使用辅助技术的效果。”
它在哪里？ –一个Chrome扩展程序，“可以使GitHub上的代码导航更加轻松。只需单击一下，即可查找并跳过类/方法定义。”
背包 –“使CSS开发再次充满乐趣，其功能应开箱即用。它基于PostCSS构建，是模块化的，不会增加任何膨胀，而且闪电般快速。”
Microm –使您可以将用户麦克风的音频流转换为可下载的音频文件（MP3，WAV，base64）。
SVG Path Builder –您必须先玩这个才能习惯，但看起来是创建自定义SVG图形的一种非常不错的方法