Be more productive with these tools! 🍇 September picks for you
Tags: productivity, javascript, webdev, design
Published: 2019-09-04 12:57:38

Summer is going to end soon :disappointed: therefore let's have a look at some new JS libraries to not lose the good mood! :tada::tada:
&nbsp;


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2czkmvllu0tb9y7zv5br.png)

[Granim.js](https://sarcadass.github.io/granim.js/) is a simple and lightweight javascript library that allows to configure gradient animations.

```javascript
<canvas id="canvas-basic"></canvas>

var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#ff9966', '#ff5e62'],
                ['#00F260', '#0575E6'],
                ['#e1eec3', '#f05053']
            ]
        }
    }
});
```

On the website you can find [different examples](https://sarcadass.github.io/granim.js/examples.html) showing both basic and more advanced features.
For example, we can blend an image with a gradient animation to create really suggestive results. This can be then combined with a custom logic that displays different colours according to the time of the day:

![blend](https://thepracticaldev.s3.amazonaws.com/i/pba7h9ijvdgqj71cbhyp.png)

![blen2](https://thepracticaldev.s3.amazonaws.com/i/rrn7acdqk6obhj43i4gf.png)

![blend3](https://thepracticaldev.s3.amazonaws.com/i/bnt1eguiaqrp8ungvd55.png)
&nbsp;
<hr>
&nbsp;
![Animejs](https://thepracticaldev.s3.amazonaws.com/i/1x3w8kfj4rgybl4vd4cy.png)

[Anime.js](https://animejs.com/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

We can import it and start using it in no time:

```javascript
import anime from 'animejs/lib/anime.es.js';

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});
```

A rich set of examples is available to experiment the library capabilities:

#### Animated hand written text

{% codepen https://codepen.io/mellis84/pen/JpVZNw default-tab=result%}

#### Snake highlight animation
(Simply tab from one login field to the next to see the effect)

{% codepen https://codepen.io/ainalem/pen/EQXjOR default-tab=result%}

#### Animated submit button
(Click on the button to see it live)

{% codepen https://codepen.io/andrewmillen/pen/MoKLob default-tab=result%}


The major browsers are supported (:fire: even IE 8+ :fire:)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/onxjn6zpsuj9bx0sp07o.png)
&nbsp;
<hr>
&nbsp;
![popper](https://thepracticaldev.s3.amazonaws.com/i/kcop44oqmnxsrt5n6pla.png)

[Popper.js](https://popper.js.org/) is a JS ES2015 library used to position "poppers" in web applications.
> A popper is an element on the screen which "pops out" from the natural flow of your application.
 
Common examples of poppers are tooltips, popovers, and drop-downs.
It is a *positioning engine*, whose purpose is to calculate the position of an element and make it possible to place it near a given reference object.

With the following code we can instruct the target "popper" element to be displayed at the left/bottom/top of its reference element according to its position. This can very easily solve the issue of tooltips that should be dynamically displayed at different points according to their position in the parent container. 

```javascript
var popper = new Popper(referenceElement, onLeftPopper, {
    placement: 'left',
    modifiers: {
        flip: {
            behavior: ['left', 'bottom', 'top']
        },
        preventOverflow: {
            boundariesElement: container,
        },
    },
});

```
When we are at the top left corner of the container:

![top-left-example](https://thepracticaldev.s3.amazonaws.com/i/uz6w0i8mcj4zdm25sztf.png)

and once at the bottom left corner:

![bottom-left-example](https://thepracticaldev.s3.amazonaws.com/i/yrrj7wvoob9gti9r0kxc.png)

&nbsp;
<hr>
&nbsp;
![removeBg](https://thepracticaldev.s3.amazonaws.com/i/20f3e32o1bvozf76a4x6.png)

How many times did we need to edit a picture and set a transparent background? Indeed we can achieve this with several programs, like MS Paint.Net, for example. 
However do they still provide good results when the background is composed by multiple colours or patterns? Probably yes, to some extent, but it would require quite some efforts proportional to the background complexity.

For those cases [RemoveBG](https://www.remove.bg/) come to the rescue!

It is an online tool capable of removing the background from uploaded photos and also replace it with a new one.
If we use Photoshop we can [integrate](https://www.remove.bg/photoshop) removeBg as extension or we can even use it from our application via [API](https://www.remove.bg/api):

![api](https://thepracticaldev.s3.amazonaws.com/i/iiupqzdewo6sypr4m0qs.png)

```javascript
// Requires "request" to be installed (see https://www.npmjs.com/package/request)
var request = require('request');
var fs = require('fs');

request.post({
  url: 'https://api.remove.bg/v1.0/removebg',
  formData: {
    image_file: fs.createReadStream('/path/to/file.jpg'),
    size: 'auto',
  },
  headers: {
    'X-Api-Key': 'INSERT_YOUR_API_KEY_HERE'
  },
  encoding: null
}, function(error, response, body) {
  if(error) {
   return console.error('Request failed:', error);
  }
  else if(response.statusCode != 200) {
    return console.error('Error:', response.statusCode, body.toString('utf8'));
  }

  fs.writeFileSync("no-bg.png", body);
});
```
&nbsp;
I tried it and I was impressed how accurate was the output.
We can even refine the intermediate version to achieve a more precise result before saving the final image.

Below the original image:
&nbsp;
![original](https://thepracticaldev.s3.amazonaws.com/i/bc70zbf3nq9dftm7er54.jpeg)

and the final result:
![final](https://thepracticaldev.s3.amazonaws.com/i/8its1w0drd54r5nc4zyb.png)

&nbsp;
<hr>
&nbsp;
![Alt wand](https://thepracticaldev.s3.amazonaws.com/i/uhful9kckjl8okm8nwqg.png)
[CSS Wand](https://www.csswand.dev/) collects a set of common CSS effects (like: rotate, shrink, ripple, etc.) that we can copy and use in our project. 

For the following rotate effect:
&nbsp;
![Alt rotate](https://thepracticaldev.s3.amazonaws.com/i/kglgrvyraftu2zqd0w1u.png)

This snippet is provided:
&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x7gpxigvwwdy54iac738.png)

Below the same snippet in a copyable version:
```css
 button {
  color: #1D9AF2;
  background-color: #292D3E;
  border: 1px solid #1D9AF2;
  border-radius: 4px;
  padding: 0 15px;
  cursor: pointer;
  height: 32px;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}
button:hover{
  transform: rotateZ(-30deg);
}
```

Therefore we can see CSS Wand as a library of rules we can access when we need to quickly style some elements in our web app or simply as a reference. 

&nbsp;
<hr>

And these were the September discoveries! Come back next month for a new set.

&nbsp;
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/rmc01kvqpn36wu1ajiwx.jpg)