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

在本文中，將介紹一組個人覺得非常實用并且有益的工具和類庫，希望對大家的工作有比較大的幫助。

訪問以上網站，你可以看到一系列的復雜動畫效果， ; 但動畫效果流暢并且沒有卡頓， 不信的話，大家可以嘗試一下， 另外兩個加分點：

• 非常專業的API
• 非常好的callback系統設計

使用非常簡單，如下：

    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是一個非常簡單，迷你和創意十足的js工具，可以幫助你做一些相關滾動檢測的功能

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

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

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

越來越多的公司開始使用vue和react來開發web應用， 因此出現了很多不同的IDE， 用來幫助開發人員使用特定類庫或者框架來開發web相關應用，CodesandBox就是其中的一個， 它可以用來開發react，vue，preact和Svelte

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

如果你的應用缺少了依賴， 這個工具也會提示出錯，并且提示添加新的包

更多功能，大家可以看看工具主站，工具不錯，大家可以體驗一下。

這是一個不依賴任何類庫的現代HTML5音頻播放器。相信很多音樂制作愛好者會非常欣賞這個web應用

這個播放器允許你創建自定義設計和布局， 這有個例子：

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

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

如jQuery般簡單， 比jQuery UI更優越， 和React一樣強大

一個將CSS動畫轉化成keyframe對象的命令行工具， 以便適用于web animation API

一個命令行工具，可以用來檢查SVG文件內容， 提供svg文件相關信息，例如， 節點數量， 路徑， 容器，形狀， 樹狀層次等等

如果你有更多更好的工具分享，歡迎在評論區分享哦~