Some libraries you can use with Vanilla JS
Tags: javascript, webdev, html
Published: 2021-04-18 11:55:49

Never underestimate the power of simplicity. It's hard to imagine the application of concepts like push real-time notifications, using databases, having a rich text editor with Vanilla JS. But you can do a lot with it. Here are some examples of their libraries that make Vanilla JS somewhat impeccable. I will try to embellish each library with its features and other attributes concerning its documentation.

### Pushjs
I've been breaking my head all around to find the best tutorials for implementing the push notification feature. But [Pushjs](https://pushjs.org/) made my work painless. The documentation is easy and beginner-friendly.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oaxqwlt1rtbebi1pru6o.png)


All the effort that you need to take is to create an HTML file in a folder. 
The next step is followed by the installation part. Either install it using the npm package manager or using [Github](https://github.com/Nickersoft/push.js) download the zip file. After downloading, unzip the folder and copy-paste *push.min.js* and *serviceWorker.min.js* into your project directory.

#### Code for index.html
```
<body>

    <script src="push.min.js"></script>
    <script src="serviceWorker.min.js"></script>

    <script>
        function start() {
            Push.create("Hello from Unnati!", {
                body: "Here's your push notification demo",
                icon: 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg',
                timeout: 4000,
                onClick: function () {
                    window.focus();
                    this.close();
                }
            });
        }
    </script>
    <h1>Push notification implementation</h1>
    <h3>Click on this button to view notification</h3>

    <a href="javascript:void(0)" onclick="start()">Start</a>

</body>

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3ejkpwqf1ey18w52b6v.png)

### EditorJS
Next, the amazing library on the list is [Editor Js](https://editorjs.io/). We need text editors in our project quite often, hence EditorJs is one of the simple and captivating libraries. You can use it with Vanilla Js, ReactJs, and other frameworks. Making your text bold or italics or adding a heading, has it all. Just quickly run through the documentation and you'll get a clear gist of this library. Let's come to the coding part. Again, you can either install it using the npm package manager or use its cdn.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl4ahfafztmo5cm02ogh.png)
##### index.html
```
<body>
    <h1>Enter your content here</h1>

    <div id="editorjs"></div>

    <button id='button'>Save article</button>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="index.js"></script>
  </body>

```
#### index.js
```
try {
  
  var editor = new EditorJS({
    holderId : 'editorjs',
    placeholder: 'Let`s write an awesome story!',
    autofocus: true,
     
  });

  editor.isReady
    .then(() => {
      console.log("Editor.js is ready to work!");
    })
    .catch((reason) => {
      console.log(`Editor.js initialization failed because of ${reason}`);
    });

  const btn = document.getElementById("button");

  btn.addEventListener("click", function () {
    editor.save().then((outputData) => {
        console.log('Article data: ', outputData)
      }).catch((error) => {
        console.log('Saving failed: ', error)
      });
      
      
  });
} catch (reason) {
  console.log(`Editor.js initialization failed because of ${reason}`);
}
```

After installing if your try to import editorjs it will give an error, you need to make some configurations for import to work. Hence, you use the above code for reference.
It can also help you to save your write-up material. 
You get a lot of options for configuring your editor like adding headers, lists, embed.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c15fxvvh0eusrk3b90uf.png)

```
import Header from '@editorjs/header';
import List from '@editorjs/list';
import MyParagraph from 'my-paragraph.js';
const editor = new EditorJS({

  tools: {
    header: Header,
    list: List,
    myOwnParagraph: MyParagraph
  },
  defaultBlock: "myOwnParagraph"
})

```

### Howler.js
You must've used audio and video tags in your projects. [Howlerjs](https://howlerjs.com/), is here to enhance your experience. The [documentation](https://github.com/goldfire/howler.js#documentation)  explains the code well. Here's the reference piece of code which gives you a basic idea of HowlerJS
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6ddip7hzp2n4yo1mmc1.png)
```
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi7cqt6lj7d75jslv1ya.gif)
### Reveal.js
Ever wondered one day you'll be able to create presentation slides using Javascript. [Reveal.js](https://revealjs.com/), made it possible. This is an amazing library that I would like to add to the list. You can install it using npm package manager or navigate to [Github](https://github.com/hakimel/reveal.js) and download zip and include the files in your project folder. Create an HTML file and fetch all the CSS and javascript files. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8o9fdm8m7tfiw0cyhcw.png)
```
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
```

**Javascript files**
```
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
     Reveal.initialize({
	hash: true,
        plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
   });
</script>
```

#### For the slides part.
In *index.html* inside body tag create a div with id name reveal and nest another div with id name slides. Inside the nested keep adding the section div depending upon the slide requirement.
```
<div class="reveal">
  <div class="slides">
   <section>
    <h1>Slide 1</h1>
    <h3>This is an amazing library</h3>
   </section>
  <section>
   <h1>Slide 2</h1>
   <h3>You can just play around with a lot of stuff</h3>
  </section>
  <section>
   <h1>Slide 3</h1>
   <h3>That's it for the slide Show</h3>
   </section>
  </div>
</div>
``` 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyi28fd9ksc8rgyh2rct.gif)


### ChartJS
Presentations and displaying graphical charts go hand in hand. Javascript has a stunning library [Chartjs](https://www.chartjs.org/) where we can represent data using these charts. It includes bar graphs, pie diagrams, dot diagrams, and a lot more.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypwg7rkhw264n7gqknk9.png)
Here's the sample code for the pie chart
```
 var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

```  

There are a lot of other popular and useful libraries which can be used with Vanilla Js. That's it for this post. If you know more stunning libraries like these please do mention them in the comment section below.