loading...
Cover image for Be more productive with these tools! 🍇 September picks for you

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

paco_ita profile image Francesco Leardini Updated on ・4 min read

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

Alt Text

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:

blend

blen2

blend3
 



 
Animejs

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+ 🔥)

Alt Text
 



 
popper

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:

top-left-example

and once at the bottom left corner:

bottom-left-example

 



 
removeBg

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:

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

and the final result:
final

 



 
Alt wand
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:
 
Alt rotate

This snippet is provided:
 
Alt Text

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.

 
Alt Text

Posted on by:

paco_ita profile

Francesco Leardini

@paco_ita

Software Engineer ∙ International speaker ∙ Focusing on Javascript, Angular, React and PWAs

Discussion

pic
Editor guide
 

Thanks, I may use Granim.js in a personal project of mine.

 

Glad it was useful! Indeed it can be used in many different scenarios.

 

Please don't stop this series. It was super helpful and fun to see cool new things to try out.

 

Many thanks Neeraj for your feedback! It really helps to keep going 😄

 

I haven't known those tools before, and they all look useful for my task. Thanks!

 

I don't think I knew about any of these before, and they all look great. Thanks!