web application

A service worker is a script that runs in the background and does not require the web page to load. It runs on a separate thread and cannot directly access the DOM. It interacts with webpages through the post messages.

For the first time, I used service workers to push notification, and it is effortless to integrate it, in your javascript code.

The service worker is asynchronous and cannot use XHR and localStorage inside it.

Vue-storefront is a headless and backend agnostic e-commerce PWA (Progressive Web App). The best part in this is Offline mode, as it managed to do this by making extensive use of the browser cache.

Variables are fundamental building blocks of any programming language. For better understanding any programming language we first have to understand variables. In Javascript, we can define a variable using these three keyword var, let, const. These three keywords behave differently in a different scenario. In this blog, we will look into the lifecycle and scope of the variable.


Visual Studio Code is by far one of the best IDE for developers due to its large numbers of plugins, cross-platform, etc. We will be mainly focusing on Remote - SSH plugin for Visual Studio Code that will help us to connect to a remote server/system for application development using our local workstation cool!

Overview Vuejs composition API is a uniquely designed progressive library that is built on top of JavaScript. This powerful library makes coding easier as it is specially configured to make codes shorter, organised, more readable, approachable etc. For people who have used this powerful tool, you’ll agree that it works pretty well especially looking at how it works with components & their data, methods, computed properties etc. Without a doubt, vuejs latest is pretty much self explanatory especially if you are working with small components that have limited functionality.

Without a doubt, react forms can be sometimes complicated. Thankfully, formik is designed to make your job easy. With formik, forms in react will be easy. Plus it will help improve the performance of your application.

This article will help you get the basics of chrome’s developer tool and turn you from a novice user to a Power user.

Many times we write javascript or jquery for a particular effect. But these effects are easily achieved by CSS. We write many lines of code in javascript and jquery which can be achieved by writing a few lines of code in CSS. In this section, we will discuss some of them. In this blog, we will only discuss basic detail.

The first and most fundamental concept in building a responsive web design is the units that we use to set many of our properties with.
In this article, we are going to learn some CSS units and how they are different from each other and when to use a particular unit according to your requirements.

Almost everyone these days wants a mobile version of their website. If we think of a website we don’t have to explicitly say a “responsive website“. It is expected from the developer to make a website responsive.


Directory Structure
Using External CDN
Deploy on Heroku

Portals is a feature which was added in React 16. It lets you render children into DOM node outside of the parent component. How to create Portal? ReactDOM.createPortal(child,domNode) where child can be any renderable React element such as fragment, strings or elements and domNode is DOM element. What can we do with Portals? We can make Modals, Tooltips or even opening a different window sharing same state as the component from which it is opened is also achievable using Portals.
React has many different types of components and all provide different kind of use cases and performance optmizations. In this post we will see different types of components in brief and which component to use when Basic Component  These are the default component of react which we use always, this has the all the react features like state, props, etc class Welcome extends React.Component { render() { return <h1Hello, {this.
Authentication is one of the most basic features in any web app, in this post we will see some of the best practices on how to implement authentication in react apps. There are several ways of protecting your routes from an unauthenticated user in your React Application, for example, it can be done by using HOC pattern or by using React Context API. Lets see first how to protect routes using React Router.
Angular CLI Angular CLI is a command line tool that you use to initialize, develop, scaffold, and maintain Angular applications. What’s New The 7.1.2 release of Angular is here! This is a major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. This release contains new features for our tool chain, and has enabled several major partner launches. The new version depends on the latest version of TypeScript (v3.
Environment Variables and Modes In the previous blog post we saw how to install a project using vue-cli@3 and some essential features. In this feature will see some optional but useful features with vue cli. Environment variables are quite essential to every project. We should put variables like api base url, access keys, secret keys, etc in this and can easily have different values for dev, production etc. Lets see how to do.
Code splitting is quite an interesting concept and can be used with vue router easily. PS: This an advanced topic, so its important to have a good understanding of vue-router before reading this. Let’s first understand what is the use of code splitting. If we have large project with lot of components and we build via cli the final bundle.js file can become quite large. This can cause issue during first time loading of the page as sometimes the bundle js file might go into mb’s

Vuex is a great tool for state management, but i find that using vuex causes lot of boilerplate code. I will try to explain it in this blog post and will explore a tool called “vuex-map-fields” which i think makes things simpler.

Before going further, its important to realize that vuex-map-fields is only useful for two way data binding of form fields.