Be more productive with these tools! 🍉 August picks for you
Tags: javascript, productivity, webdev, design
Published: 2019-08-14 15:16:37

A new month arrived and it is time to review some new Javascript libraries!! :fire:
&nbsp;

#Editor.js
![Editor](https://thepracticaldev.s3.amazonaws.com/i/fknjk86dmsjpdqtbp6xo.png)

[Editor.js](https://editorjs.io/) 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:  
![sample](https://thepracticaldev.s3.amazonaws.com/i/3tzlnpv21ci9qsza51q1.png)

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

![block](https://thepracticaldev.s3.amazonaws.com/i/1dc3r4xs75i76tbrbsok.png)

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:

```javascript
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:

```HTML
<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:

```json
{
    "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.
&nbsp;



#Howler.js
![Howler](https://thepracticaldev.s3.amazonaws.com/i/8n20p61ednltbx8qjof8.png)

This [JavaScript audio library](https://howlerjs.com/) allows to add sound effects to a web site, stream web radios or provide advanced sound controls for sound tracks.

![DEMO](https://thepracticaldev.s3.amazonaws.com/i/5ed2wekxpj3fk6g6h6yn.png)

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: 

```javascript
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](https://github.com/goldfire/howler.js/tree/master/examples)
&nbsp;



#Bit

[Bit](https://bit.dev/) is a platform providing a collection of React UI components (buttons, charts, calendar, ...), similar to [Semantic-UI-React](https://react.semantic-ui.com/).

![bit](https://thepracticaldev.s3.amazonaws.com/i/sos2y4jyv3pzb2utjcke.png)

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? :man_facepalming: 
&nbsp;


#Flicking
![Flicking](https://thepracticaldev.s3.amazonaws.com/i/sjjpwtv6lsi9bqn6swu3.png)

[Flicking](https://naver.github.io/egjs-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:

![features](https://thepracticaldev.s3.amazonaws.com/i/r3tt9r5pb0rsj5v8xn18.png)


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

![plugins](https://thepracticaldev.s3.amazonaws.com/i/agm16ufqdjljk7bq7azd.png)

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

{% codesandbox egjsngx-flicking-examples-czb2g %}

&nbsp;


#SweetAlert2
![SweetAlert2](https://thepracticaldev.s3.amazonaws.com/i/jtytjx8ohcj5ssr5so9w.png)

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](https://sweetalert2.github.io/) is right for you. It has zero dependencies and it can be integrated with Angular and React.

You can upgrade plain popups:

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

into something more catchy:

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

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

```javascript
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:

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

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 `ESC`key or clicking on the cancel button, for instance). In this case Swal.fire() returnsan 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](https://sweetalert2.github.io/#examples) are available on their website.
&nbsp;

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

&nbsp;

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

&nbsp;