Be more productive with these tools! ⛄️ February picks for you
Tags: webdev, javascript, design, productivity
Published: 2020-02-03 14:51:46

Already started some new year proposals or are you still wondering which one has the highest priority on your list (like me :smile:)? 
In any case don't lose the focus, you still have plenty of time ahead to model your resolutions path!

![go](https://media.giphy.com/media/cmzp1CfhZRkMtlCuVj/giphy.gif)

&nbsp;

-------------------

&nbsp;

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

Vue paycard enhances a payment form with smooth micro-interactions, like number formatting, validation and automatic card type detection. 

It is built with vuejs (the React version is on the way :smile:) and fully responsive.

Give it a try with the sample below:

{% codepen https://codepen.io/JavaScriptJunkie/pen/YzzNGeR %}


[Github](https://github.com/muhammederdem/vue-interactive-paycard)

&nbsp;

-----------------------

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

Freezeframe.js is a library allowing to pause and re-enable animated gif images. You can choose for mouse hover or click events, touch event or with a manual toggle functions. 
Thanks to the library you can activate the animation only in specific cases (mouse hover, for instance) making the image much more catchy.


1 - Dowload the library

```shell
npm install freezeframe

or

yarn add freezeframe
```

2 - Import it in your code

```javascript
// es6
import Freezeframe from 'freezeframe';

// Commonjs
const Freezeframe = require('freezeframe');

// 1. Save a reference to your freezeframe instance
const ff = new Freezeframe({
  trigger: false
});

// 2. Add event listeners to the instance
ff.on('start', (items) => {
  // do something on start
};

ff.on('stop', (items) => {
  // do something on stop
};

ff.on('toggle', (items, isPlaying) => {
  if (isPlaying) {
    // do something on start
  } else {
    // do something on stop
  }
};

```

3 - Bind the library to an element in your template

```html
<img class="freezeframe" src="image.gif" />

<!-- We can target a parent element if we need to wrap multiple images -->
<div class="freezeframe">
  <img src="image1.gif">
  <img src="image2.gif">
  <img src="image3.gif">
</div>
```

[Examples](http://ctrl-freaks.github.io/freezeframe.js/)

&nbsp;

-----------------------

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

In the last month collection, [Aweys Ahmed](https://dev.to/aweysahmed) suggested `humaaans` library as alternative to unDraw. :tada: Many thanks Aweys for the hint! :smile:

Humaaans is a free library to manipulate and compose illustrations focusing on people (from here the name "humaaans").
It's available on [InVision Studio](https://www.invisionapp.com/studio), which grants designers full control over the illustrations and mixing the different body parts, colours, clothing and hairstyles. A [dropbox folder](https://www.dropbox.com/sh/grfucsjeaxe811s/AAABFGXFyqCNmF5gmijgJzOxa?dl=0) contains the illustrations (as .png files), a .studio and a .sketch project file that you can freely download. 

The amount of interchangeable elements is great, making it easy to create different scenes fitting a wide spectrum of projects and situations:

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

Starting with different pre-generated templates, you can apply several backgrounds to your illustration in order to give some more context details.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x4tkskku0883ynq67lbu.gif)

If you are a professional designer or simply interested in a cool instrument to enhance your creativity, probably humaaans will be a good  add-on to your tool set.

[Website](https://humaaans.com/)

&nbsp;

---------------------

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

Scene.js is an interesting JavaScript library for creating animated websites. It offers many different features to create advanced and appealing animations with few lines of code.

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

A simple usage can be the case when you need to animate some text:
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8fflfrd4walxb4di7ljp.gif)

```javascript
new Scene({
    ".overflow .text span": i => ({
      0: {
        transform: {
          translateY: "100%",
        }
      },
      1: {
        transform: {
          translateY: "0%",
        }
      },
      options: {
        delay: i * 0.2,
      }
    }),
  }, {
    easing: "ease-in-out",
    selector: true,
  }).play();
```

On the other side, if you need to develop more advanced scenarios, you can use the scenejs timeline library, where you can have full control over time, properties and items:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gn4jrgpy3qeczx6j2go8.gif)

```javascript
var clapperScene = new Scene({
    ".clapper": {
      2: "transform: translate(-50%, -50%) rotate(0deg)",
      2.5: "transform: rotate(-15deg)",
      3: "transform: rotate(0deg)",
      3.5: "transform: rotate(-10deg)",
    },
    ".clapper-container" : {
      0: Scene.zoomIn({ duration: 1 }),
    },
    ".clapper .circle": {
      0.3: Scene.zoomIn({ duration: 1 }),
    },
    ".clapper .play": {
      0: "transform: translate(-50%, -50%)",
      0.6: Scene.zoomIn({ duration: 1 }),
    },
    ".top .stick1": {
      2: "transform: rotate(0deg)",
      2.5: "transform: rotate(-20deg)",
      3: "transform: rotate(0deg)",
      3.5: "transform: rotate(-10deg)",
    },
    ".stick1 .rect": i => ({
      0: "transform: scale(0) skew(15deg)",
      0.7: "transform: scale(1)",
      options: { delay: 0.6 + i * 0.1 },
    }),
    ".stick2 .rect": i => ({
      0: "transform: scale(0) skew(-15deg)",
      0.7: "transform: scale(1)",
      options: { delay: 0.8 + i * 0.1 },
    }),
  }, {
    easing: "ease-in-out",
    selector: (selector) => "[data-timeline] " + selector,
  });
  new Timeline(
    clapperScene,
    document.querySelector("#timeline .example_result"),
    { keyboard: false },
  );
```

On their [Website](https://daybrush.com/scenejs/) you can find other examples, like the counter below with a different animation for each step, making it much fancier:

{% codepen https://codepen.io/daybrush/pen/zWMeJW %}



---------------------

&nbsp;

![Sortable](https://thepracticaldev.s3.amazonaws.com/i/4y1hpq87glv5m3hh6pkz.png)

Sortable is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. 
It offers different features to use with a list or a grid, like the obvious drag & drop and sorting, but also the possibility to move items between list or to clone an element from one group to another.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6a4v9dsp194c07ktjwny.gif)

This is the code used in the example above:

```html
<div id="example2-left" class="list-group col">
    <div class="list-group-item">Item 1</div>
    <div class="list-group-item">Item 2</div>
    <div class="list-group-item">Item 3</div>
    <div class="list-group-item">Item 4</div>
    <div class="list-group-item">Item 5</div>
    <div class="list-group-item">Item 6</div>
</div>

<div id="example2-right" class="list-group col">
    <div class="list-group-item tinted">Item 1</div>
    <div class="list-group-item tinted">Item 2</div>
    <div class="list-group-item tinted">Item 3</div>
    <div class="list-group-item tinted">Item 4</div>
    <div class="list-group-item tinted">Item 5</div>
    <div class="list-group-item tinted">Item 6</div>
</div>
```



```javascript
new Sortable(example3Left, {
    group: {
        name: 'shared',
        pull: 'clone' // To clone: set pull to 'clone'
    },
    animation: 150
});

new Sortable(example3Right, {
    group: {
        name: 'shared',
        pull: 'clone'
    },
    animation: 150
});
```

&nbsp;

Below another example, showing how the library can be used also with grid elements:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cw5mti3bboycb5ha7ymm.gif)

&nbsp;

It also supports different javascript frameworks:

- **Vue** [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
- **React** [react-sortablejs](https://github.com/SortableJS/react-sortablejs)
- **Angular** [ngx-sortablejs](https://github.com/SortableJS/ngx-sortablejs)
- **jQuery** [jquery-sortablejs](https://github.com/SortableJS/jquery-sortablejs)
- **Knockout** [knockout-sortablejs](https://github.com/SortableJS/knockout-sortablejs)
- **Meteor** [meteor-sortablejs](https://github.com/SortableJS/meteor-sortablejs)
- **Polymer** [polymer-sortablejs](https://github.com/SortableJS/polymer-sortablejs)


[Website](https://sortablejs.github.io/Sortable/)