Francesco Leardini

Posted on Sep 4, 2019 • Edited on Sep 12, 2019

Be more productive with these tools! 🍇 September picks for you

#productivity #javascript #webdev #design

Summer is going to end soon 😞 therefore let's have a look at some new JS libraries to not lose the good mood! 🎉🎉

Granim.js is a simple and lightweight javascript library that allows to configure gradient animations.

<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 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:

Anime.js 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:

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

Snake highlight animation

(Simply tab from one login field to the next to see the effect)

Animated submit button

(Click on the button to see it live)

The major browsers are supported (🔥 even IE 8+ 🔥)

Popper.js 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.

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:

and once at the bottom left corner:

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 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 removeBg as extension or we can even use it from our application via API:

// 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);
});

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:

and the final result:

CSS Wand 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:

This snippet is provided:

Below the same snippet in a copyable version:

 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.

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