React.js Basics – Part 2 (for starters and Angular Developers)

Introduction In previous post on this topic, we started with the basics of React.js . We learned that, React is a JavaScript library to create and compose components. Writing a react app is creating components and putting them together. Each component has a name and three distinct characteristics: Props: Component can accept input from other … Read more

Building UI using JavaScript Classes

Introduction Classes are fundamental to Object Oriented Programming. In our applications, it is very common to use Classes for business objects, data transfer objects etc. and today we will see how we can use classes to build a User Interface for front-end projects. Modern UI frameworks such as Angular, React etc. are already using classes … Read more

Import Bootstrap and Font-Awesome using Parcel JS

Introduction In previous post, I talked about importing jQuery and jQuery UI modules in our JavaScript code using Parcel JS. Today, I want to share that how to include bootstrap and font-awesome packages in our application. We will be continuing with the same code-base from previous post. However, I created a new branch (bootstrapimport), so … Read more

Import jQuery and jQuery-UI using Parcel JS

Introduction In my previous post I talked about Parcel JS and how it is a very easy to use JavaScript Bundler. Today, we will see how to import and use JQuery and JQuery-UI libraries in our application when using Parcel JS. Above mentioned libraries are very common and powerful in most of the applications. So, … Read more

Parcel JS – A Blazing fast, zero configuration web application bundler

Introduction JavaScript world has many great tools to assist us in building our applications with ease. One of the common tool in any JavaScript developer’s toolkit is a bundler. You may be already using one for your existing development activities. In this post, we will learn about Parcel. The official website mention it as a … Read more

Structure JavaScript – Building a Simple Data Service

Introduction Data is the life blood of any application. Most of the times, applications are busy doing data operations. Those can be reading, writing, updating or deleting data along with some other business specific data operations. In a typical client/server applications, data can requested from the backend server and then client application use it for … Read more

Structure JavaScript Code using Classes

Introduction Classes are fundamental to Object Oriented Programming (OOP). You can think of a class as a blueprint to create objects. OOP in JavaScript is different than classical OOP as it uses prototypes rather than classes. ES6 classes are a syntax shortcut for a common JavaScript pattern used to simulate classes. If you have worked … Read more

Structure JavaScript Code Using Modules

Introduction Most people (including myself) start out writing JavaScript code by adding function after function into a .js or HTML file. This can get job done but same time can quickly get out of control when working with a lot of code. Without having proper structure, maintaining such code bases, can be a nightmare and … Read more

Structure JavaScript Code

Introduction Modern JavaScript frameworks like Angular, Vue etc have built-in mechanism to structure JavaScript code. When not using these frameworks, we can use simple techniques to structure our JavaScript. In this post I will show you one of them using Revealing module pattern. This pattern is very popular and there are great many resources online … Read more

Cypress – Fast, easy and reliable testing for anything that runs in a browser.

The web has evolved. Finally, testing has too. They really meant it. I was looking for a simple, easy to use and initiative end-to-end testing framework for one of our web application. I tried out cypress for the first time and found myself productive within about 10 mins. Before we go deep into the details … Read more