Web Application

What is Vuex? Managing state in an application full of components can be difficult. Facebook discovered this the hard way and created the Flux pattern, which is what Vuex is based upon. Vuex is an official plugin for Vue.js which offers a centralized data store for use within your application. Vuex features a unidirectional data flow leading to simpler application design and reasoning. Within a Vuex application, the datastore holds all shared application state.
What is Prototyping? A prototype is an example that serves as a basis for future product like an application etc. Prototyping gives developers an opportunity to research new alternatives and test the existing design / functionality to confirm a product’s all over functionality prior to production. A prototype has many benefits, such as the developer and the implementer getting valuable feedback from the user even before the actual project is started.
What are Web Components? Just like HTML elements like divs, spans, tables etc. Web components are custom HTML elements that can be used and reused in web apps and web pages. Component-based architecture is the main architecture for front end development today. Developers can build custom elements that can be embedded into web pages. The elements can be reused and nested anywhere, allowing for code reuse in any pages or apps.

You might have used redux with react, as it is a widespread practice. Many people use redux-saga or redux-thunk for async actions as middlewares. Redux allows you to create your custom middleware as per your requirement. A middleware can be added in between dispatch and reducers so that we can alter the actions or can dispatch other actions (for async actions).

This is done with a function returning function. So, let’s first understand about function returning function.

It is simple and can be done as follows -

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!

What is a Portal anyway? Well, as quoted in the google dictionary, its “a doorway, gate, or other entrance.”

React v16.0 brought a similar concept of Portal that provides a way to transport a piece of UI into some other locations on to the DOM Tree while preserving its position in the React hierarchy, allowing it to maintain the properties and behaviors it has inherited from the React tree. Isn’t that amazing, you put your component in one place, and after the rendering, it’s somewhere else in the DOM tree.

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

Hooks are upcoming features in React and are currently available in version 16.7.0-alpha.2. The hook can be used by installing the above version. npm i react@next react-dom@next So, what are Hooks? Hooks let you use React features without writing classes, they are functions that let you ‘hook into’ React state and life cycles from the functional component. Note : Hooks don’t work inside classes. Below we will see a simple example of the counter using both class and functional components with Hooks to grasp the concept of Hooks.
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.