DEV Community

Cover image for Be more productive with these tools! ⛄️ February picks for you
Francesco Leardini
Francesco Leardini

Posted on • Updated on

Be more productive with these tools! ⛄️ February picks for you

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

go

 


 

Alt Text

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 😄) and fully responsive.

Give it a try with the sample below:

Github

 


Alt Text

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

npm install freezeframe

or

yarn add freezeframe
Enter fullscreen mode Exit fullscreen mode

2 - Import it in your code

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

Enter fullscreen mode Exit fullscreen mode

3 - Bind the library to an element in your template

<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>
Enter fullscreen mode Exit fullscreen mode

Examples

 


Alt Text

In the last month collection, Aweys Ahmed suggested humaaans library as alternative to unDraw. 🎉 Many thanks Aweys for the hint! 😄

Humaaans is a free library to manipulate and compose illustrations focusing on people (from here the name "humaaans").
It's available on InVision Studio, which grants designers full control over the illustrations and mixing the different body parts, colours, clothing and hairstyles. A dropbox folder 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

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

Alt Text

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

 


Alt Text

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

A simple usage can be the case when you need to animate some text:
Alt Text

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();
Enter fullscreen mode Exit fullscreen mode

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

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 },
  );
Enter fullscreen mode Exit fullscreen mode

On their Website you can find other examples, like the counter below with a different animation for each step, making it much fancier:


 

Sortable

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

This is the code used in the example above:

<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>
Enter fullscreen mode Exit fullscreen mode
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
});
Enter fullscreen mode Exit fullscreen mode

 

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

Alt Text

 

It also supports different javascript frameworks:

Website

Top comments (5)

Collapse
 
colinmcdermott profile image
Colin McDermott

Nothing wrong with listicles, great post @paco_ita

Some comments may only be visible to logged-in visitors. Sign in to view all comments.