The popularity of HTML5 Canvas elements is well known, as they allow web developers to create animations, full-fledged applications, interactive charts as well. But sadly, it is very hard for someone to understand canvas, especially if he/she has come from the Flash animation background. In this tutorial, we will explore the Easel.js library, which allows us to work with HTML5 Canvas elements. The syntax of Easel.js is similar to ActionScript and it even has features like Display List, Stage, Graphics which ultimately makes the use of canvas easier for the Flash developers. Now that we have a little idea about ... Read More
In this tutorial, we will show how you can use Parsley.js, which is a JavaScript library that is mainly used to validate forms. Parsley helps in validating the forms in a very subtle and easy manner, and it is one of the widely used form validation libraries out there. Features of Parsley.js There are plenty of reasons why Parsley is a good choice for validating your JavaScript forms. Some of them are mentioned below. Intuitive DOM API − The DOM API allows you to use simple English inside your HTML tags, and Parsley will do the rest. There's no ... Read More
TaffyDB is a lightweight and powerful in-memory database that can be used in both browser and server-side applications. It is open-source and free to use. In this tutorial, we will take a couple of examples to show how you can use TaffyDB to store some data, execute some queries on the data, and also perform important operations on the data. Let's Start with a Simple Example Let's start with a very basic example in which we will create some data and then try to print that data on the browser. The first step for us is to have TaffyDB. For ... Read More
Popper.js is a JavaScript library that is used when we want to build poppers and tooltips and manage them. It helps us in positioning tooltips and popovers in most modern web applications. In this tutorial, we will show how you can use Popper.js to position tooltips, but it should be noted that Popper is not just all about tooltips, yet is somewhat the foundation on which it is built. Let's Start with a Small Example Let's create a simple tooltip with a button to understand how we can use popper.js. The first step is to install popper.js on our machine. ... Read More
FusionCharts is a JavaScript library that you can use when you want to create charts and maps and put them in your web application. In this tutorial, we will show how you can use FusionChart.js to create two different charts. Before we learn how to create charts, the first important thing is to know how we can install FusionCharts onto our local machines. Installing FusionCharts There are multiple ways with which we can install FusionCharts. Using CDN You can use the CDN link given below to directly gain access to the files of FusionCharts. Install from NPM You ... Read More
Handsontable is a JavaScript library that is used when we want to create a data grid. It provides a spreadsheet-like experience, pretty similar to Excel. In this tutorial, we will explain how you can use handsontable.js to create a data grid with your own data. In addition, we will see how to use different options available in handsontable.js. While there might be different spreadsheets like grid creators that you can use, the handsontable.js stands out from most of them because of its ability to work with vanilla JavaScript, React or Angular as well. Before you can start working with handsontable.js, ... Read More
Quill is a free and open-source text editor that falls under the category of WYSIWYG editors and is mainly built for the modern web that we use today. It is a highly customizable text editor and has many expressive API. Quill is very easy to use and provides a good interface that is even understandable to those that have worked on markup only. In this tutorial, we will take multiple examples to explain how you can build a text editor using Quill.js. While there are dozens of rich text editors that belong to the WYSIWYG text editors, the most widely ... Read More
It is a well-known fact that code is prone to errors, and sometimes even when we know that a particular workflow will work fine for some cases, there's a good chance that we forget about some other cases. In simple terms, it can be said that when we test a code manually, we might miss something. For example, suppose we have two functions, func1() and func2(), and we know that func1() works for the cases that we have defined in our test, but we found out that func2() doesn't work. Then we fix func2() but later forgot to check whether ... Read More
Auto-formatting is one of those features that are hard to implement but at the same time increases the userexperience a lot. There are different JavaScript libraries that one can use when they want to auto-format the input text content, but the most popular of them is Cleave.js. Cleave.js is a JavaScript library that is mainly used when we want to format the input text content and it works very smoothly. It is very lightweight and easy to get started with. In this tutorial, we will take a couple of examples to demonstrate how you can use Cleave.js to autoformat input ... Read More
AOS.js (Animation on Scroll) is an animation-providing JavaScript library that makes it easier to add tons of animations by simply changing the name of the class in the div tag in which you want to add an animation. While there are different animation JavaScript libraries out there, AOS.js is probably the simplest of them. In this tutorial, we will explore different types of animations that we can use in AOS.js with the help of different examples. The first category of animations that we will explore are the fading one's. Before we do that, we first need to make sure that ... Read More