又到了新的一年，在過(guò)去的2017年，我相信大家都在工作和開發(fā)中遇到了很多有趣的前端代碼工具或者是類庫(kù)， 希望在來(lái)到的2018年， 我們依然能夠找到更多有用的輔助前端工具及其類庫(kù)。

在本文中，將介紹一組個(gè)人覺(jué)得非常實(shí)用并且有益的工具和類庫(kù)，希望對(duì)大家的工作有比較大的幫助。

訪問(wèn)以上網(wǎng)站，你可以看到一系列的復(fù)雜動(dòng)畫效果， ; 但動(dòng)畫效果流暢并且沒(méi)有卡頓， 不信的話，大家可以嘗試一下， 另外兩個(gè)加分點(diǎn)：

• 非常專業(yè)的API
• 非常好的callback系統(tǒng)設(shè)計(jì)

使用非常簡(jiǎn)單，如下：

    var el = document.querySelector(".box");
    var tween = KUTE.fromTo(
      el,
      { translateX: 0, rotateX: 0 },
      { translateX: 100, rotateX: 25 },
      { perspective: 100, duration: 2000 }
    );
    tween.start();

scrolldir是一個(gè)非常簡(jiǎn)單，迷你和創(chuàng)意十足的js工具，可以幫助你做一些相關(guān)滾動(dòng)檢測(cè)的功能

使用這個(gè)迷你的js，你不需要使用javascript，只需要使用css即可控制頁(yè)面布局，代碼如下：

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

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

越來(lái)越多的公司開始使用vue和react來(lái)開發(fā)web應(yīng)用， 因此出現(xiàn)了很多不同的IDE， 用來(lái)幫助開發(fā)人員使用特定類庫(kù)或者框架來(lái)開發(fā)web相關(guān)應(yīng)用，CodesandBox就是其中的一個(gè)， 它可以用來(lái)開發(fā)react，vue，preact和Svelte

codesandbox的一個(gè)非常不錯(cuò)的特性就是添加npm包到左邊的邊欄， 叫依賴關(guān)系。 這里有個(gè)添加包，允許你搜索相關(guān)的包

如果你的應(yīng)用缺少了依賴， 這個(gè)工具也會(huì)提示出錯(cuò)，并且提示添加新的包

更多功能，大家可以看看工具主站，工具不錯(cuò)，大家可以體驗(yàn)一下。

這是一個(gè)不依賴任何類庫(kù)的現(xiàn)代HTML5音頻播放器。相信很多音樂(lè)制作愛(ài)好者會(huì)非常欣賞這個(gè)web應(yīng)用

這個(gè)播放器允許你創(chuàng)建自定義設(shè)計(jì)和布局， 這有個(gè)例子：

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"
    }
  ]
});

一個(gè)基于ES6的前端框架， 廣告詞如下：

如jQuery般簡(jiǎn)單， 比jQuery UI更優(yōu)越， 和React一樣強(qiáng)大

一個(gè)將CSS動(dòng)畫轉(zhuǎn)化成keyframe對(duì)象的命令行工具， 以便適用于web animation API

一個(gè)命令行工具，可以用來(lái)檢查SVG文件內(nèi)容， 提供svg文件相關(guān)信息，例如， 節(jié)點(diǎn)數(shù)量， 路徑， 容器，形狀， 樹狀層次等等

如果你有更多更好的工具分享，歡迎在評(píng)論區(qū)分享哦~