A new month arrived and it is time to review some new Javascript libraries!! 🔥
 

Editor.js

Editor.js is a block-styled editor for rich media stories.

Block-styled means that each element (paragraphs, headings, images, lists, quote) is treated independently as a contenteditable. It differentiates from other typical solutions where a single main contenteditable workspace wraps all the HTML content. However, this approach can bring to styles overload and other annoying side effects.

Editor.js allows to create inline editing menus:

or block settings menus, whose scope is the whole editable target block and not only the selected text:

To use it in our web app - after importing the base editorjs - we can add the desired tools available as individual plugins.

This modularity comes by design and allows us to import only the features we need:

import EditorJS from '@editorjs/editorjs'; 
import Header from '@editorjs/header'; 
import List from '@editorjs/list'; 

const editor = new EditorJS({ 
  /** 
   * Id of Element that should contain the Editor 
   */ 
  holderId: 'codex-editor', 

  /** 
   * Available Tools list. 
   * Pass Tool's class or Settings object for each Tool you want to use 
   */ 
  tools: { 
    // Here we can include the tools we want
    header: Header, 
    list: List 
  }, 
})

Another nice aspect is that the output is JSON, compared to other editors producing heavy HTML-markup.

Below an example of output from the Medium platform:

<section name="0ed1" class="section section--body section--first">
   <div class="section-divider">
      <hr class="section-divider">
   </div>
   <div class="section-content">
      <div class="section-inner sectionLayout--insetColumn">
         <h3 name="f8e8" class="graf graf--h3 graf--leading graf--title">
            <br>
         </h3>
         <p name="982b" class="graf graf--p graf-after--h3">
            The example of text that was written in 
            <strong class="markup--strong markup--p-strong">one of 
            popular</strong> text editors.
         </p>
         <h3 name="c2ad" class="graf graf--h3 graf-after--p">
            With the header of course
         </h3>
         <p name="83d3" class="graf graf--p graf-after--h3">
            So what do we have?
         </p>
      </div>
   </div>
</section>
<section name="d1d2" class="section section--body">
  ...
</section>

And the same content generated by Editor.js:

{
    "time" : 1550476186479,
    "blocks" : [
        {
            "type" : "paragraph",
            "data" : {
                "text" : "The example of text that was written in 
                          <b>one of popular</b> text editors."
            }
        },
        {
            "type" : "header",
            "data" : {
                "text" : "With the header of course",
                "level" : 2
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "So what do we have?"
            }
        }
    ],
    "version" : "2.8.1"
}

We can see clearly how the Editor.js output looks much less verbose.
 

Howler.js

This JavaScript audio library allows to add sound effects to a web site, stream web radios or provide advanced sound controls for sound tracks.

It is light (7KB gzipped) and without any external dependencies.
Also, it offers optimisations out of the box. Already loaded sounds are automatically cached and re-used on subsequent calls.

The usage is simple and intuitive:

import {Howl, Howler} from 'howler';

// Setup the new Howl.
const sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// Play the sound.
sound.play();

// Change global volume.
Howler.volume(0.5);

Demo examples
 

Bit

Bit is a platform providing a collection of React UI components (buttons, charts, calendar, ...), similar to Semantic-UI-React.

Anyone can publish personal components and make them freely available for the community.

Private hubs - where only signed members have access - are also available and they can be very handy.
Imagine to work on a project spanning across different teams. Being able to share components with our colleagues can greatly boost the teams productivity. It can easily prevent classical scenarios where a generic autocomplete input field is implemented twice by two different teams!!
Does it sound familiar? 🤦‍♂️
 

Flicking

Flicking is a flexible carousel that easily integrates with the most popular JS frameworks (React, Vue.js, Angular).

It offers functionalities like infinite scroll, free scroll, multiple panel and others:

There are also plugins available to further extend the base features:

Give it a try (the example below uses Angular):

SweetAlert2

If you need to customise javascript popups and make them more stylish, but you do not want to use a whole design framework for it, then SweetAlert2 is right for you. It has zero dependencies and it can be integrated with Angular and React.

You can upgrade plain popups:

into something more catchy:

We can choose the notification type (success, info, error, ...) and define different input types for the popup content:

Swal.fire({
  title: 'How old are you?',
  type: 'question',
  input: 'range',
  inputAttributes: {
    min: 8,
    max: 120,
    step: 1
  },
  inputValue: 25
})

The previous snippet generates a range selection popup:

When the user clicks on one button, the alert is closed and the Swal.fire() returns a Promise. We just have to resolve the promise to detect the user's answer. Simple and quick!

The library provides also a way to detect if the user dismissed the popup (pressing ESCkey or clicking on the cancel button, for instance). In this case Swal.fire() returnsan object { dismiss: reason } with the reason of dismissal.

What I like of SweetAlert2 is its simplicity, but still the possibility to create nice custom notifications.

Several other usage examples are available on their website.
 

🎉 That's it for this month 🎉
Come again in September for a new article full of discoveries!!