In 2017, there are a lot of great front-end tools

Abstract:

It’s a New Year again. In the past 2017, I believe everyone has encountered many interesting front-end code tools or class libraries in their work and development. I hope we can still find more useful auxiliary front-end tools and class libraries in 2018.

In this article, I will introduce a set of tools and libraries that I find very useful and helpful. I hope they can also be of great help to your work.

As a javascript animation class library, there is nothing very new about it, but its biggest feature is that it has excellent performance. In today’s Web animation, performance issues are inevitable, and we have to deal with mobile devices or slow connections

Visit the above website, you can see a series of complex animation effects, but the animation is smooth and no lag, if you don’t believe me, you can try it, two more bonus points:

• Very professional API

• Very good callback system design

• If you want to learn about the front end, you can come to the Q group, which is 291 first, 851 in the middle, and 189 last, where you can learn and communicate, and you can also download materials.

It is very simple to use as follows:

var el = document.querySelector(".box");
Copy the code

var tween = KUTE.fromTo(
el,
{ translateX: 0, rotateX: 0 },
{ translateX: 100, rotateX: 25 },
{ perspective: 100, duration: 2000 }
);
tween.start();
Copy the code

Demo address

ScrollDir

Scrolldir is a very simple, mini and creative JS tool that helps you do some scrolling detection functions

With this mini-js, you don’t need javascript, just use CSS to control the layout of the page, as follows:

[data-scrolldir="down"] .header-banner {top: -100px; }[data-scrolldir="up"] .footer-banner {bottom: -100px; }Copy the code

The online demo

CodeSandBox

More and more companies are using VUE and React to develop Web applications. As a result, a number of different ides have emerged to help developers develop Web-related applications using specific libraries or frameworks. CodesandBox is one of them. Preact and Svelte

One nice feature of CodesandBox is to add NPM packages to the left sidebar called dependencies. There is an add package that allows you to search for related packages

If your application is missing dependencies, the tool will also prompt you for errors and add new packages

More functions, you can see the main tool site, tool is good, you can experience

AmplitudeJS

This is a modern HTML5 audio player that doesn’t rely on any class libraries. I’m sure many music production fans will appreciate this Web application

This player allows you to create custom designs and layouts. Here’s an example:

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

The online demo

More awesome class libraries

BunnyJS

An ES6-based front-end framework with the following tagline:

Simple as jQuery, superior to jQuery UI, and as powerful as React

Keyframe-tool

A command-line tool that converts CSS animations into KeyFrame objects for use with the Web Animation API

svgi

A command line tool that can be used to examine the content of SVG files, providing information about SVG files, such as the number of nodes, paths, containers, shapes, tree hierarchies and so on