loading...
Cover image for Be more productive with these tools! ⛄️ February picks for you

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

paco_ita profile image Francesco Leardini Updated on ・5 min read

web discoveriers (8 Part Series)

1) Be more productive with these tools! 🌻 My July picks for you 2) Be more productive with these tools! 🍉 August picks for you 3 ... 6 3) Be more productive with these tools! 🍇 September picks for you 4) Be more productive with these tools! 🎃 October picks for you 5) Be more productive with these tools! ☔️ November picks for you 6) Be more productive with these tools! 🎅 December picks for you 7) Be more productive with these tools! ❄️ January picks for you 8) 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

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

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>

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();

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

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

 

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

Alt Text

 

It also supports different javascript frameworks:

Website

web discoveriers (8 Part Series)

1) Be more productive with these tools! 🌻 My July picks for you 2) Be more productive with these tools! 🍉 August picks for you 3 ... 6 3) Be more productive with these tools! 🍇 September picks for you 4) Be more productive with these tools! 🎃 October picks for you 5) Be more productive with these tools! ☔️ November picks for you 6) Be more productive with these tools! 🎅 December picks for you 7) Be more productive with these tools! ❄️ January picks for you 8) Be more productive with these tools! ⛄️ February picks for you

Posted on by:

paco_ita profile

Francesco Leardini

@paco_ita

Passionate about web technologies | Focusing on Javascript, Angular, React and PWAs

Discussion

markdown guide
 

Nothing wrong with listicles, great post @paco_ita

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

Yet another listicle?

Boring

 

Which topic would you be more interested in reading?

I am writing an article about Web Notifications, but it takes time and with a full job schedule plus courses to prepare is not easy to keep the schedule. Some people find JS libraries list useful and they can apply them to their current project.

 

Honestly it's not even a bad article at all, just that my entire feed that day seemed to be nothing but listicles, so it would've been nice to see some variety.

I see. As said, sometimes describing a list of libraries that we use or test at work or with side projects is much faster than creating some technical articles with a proper structure, content and code samples.

Are there any specific topics you would be interested for web development? I am planning to finish a couple of articles about Web Notifications and add new ones about modern web techniques...I just have to find the time/energy :)