Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

April 18, 2021 11:55 am GMT

Some Vanilla JS libraries you must try

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 made my work painless. The documentation is easy and beginner-friendly.

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

EditorJS

Next, the amazing library on the list is Editor Js. 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.

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.

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, is here to enhance your experience. The documentation explains the code well. Here's the reference piece of code which gives you a basic idea of HowlerJS

<script>    var sound = new Howl({      src: ['sound.webm', 'sound.mp3']    });</script>

Reveal.js

Ever wondered one day you'll be able to create presentation slides using Javascript. Reveal.js, 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 and download zip and include the files in your project folder. Create an HTML file and fetch all the CSS and javascript files.

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

ChartJS

Presentations and displaying graphical charts go hand in hand. Javascript has a stunning library Chartjs where we can represent data using these charts. It includes bar graphs, pie diagrams, dot diagrams, and a lot more.

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.

Original Link: https://dev.to/commentme/some-vanilla-js-libraries-you-must-try-17a3

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To