loading...
Cover image for Be more productive with these tools!  🍉  August picks for you

Be more productive with these tools! 🍉 August picks for you

paco_ita profile image Francesco Leardini Updated on ・4 min read

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

Editor.js

Editor

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:

sample

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

block

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

Howler

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

DEMO

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.

bit

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

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

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

plugins

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

 

SweetAlert2

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:

Alt Text

into something more catchy:

Alt Text

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:

Alt Text

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!!

 

Alt Text

 

Posted on by:

paco_ita profile

Francesco Leardini

@paco_ita

Software Engineer ∙ International speaker ∙ Focusing on Javascript, Angular, React and PWAs

Discussion

pic
Editor guide
 

Man! These are great suggestions! I saved a couple of them and also read the September edition.

Great work!

 

I am happy you could use some of those libraries in your projects.

If you want and have time, I would be interested in knowing which ones you chose and how did you use them.