A step by step introduction into the world of bundling JS apps.

webpack is one of the most famous bundlers out there with rollup. You might be using it without even knowing it, for example, Create-React-App uses webpack to bundle all its dependencies. It helps developers focus on the development and handles bundling all the assets, modules and dependencies into a single bundle. Now with webpack 5 out, I thought it would be a good idea to introduce everyone to this awesome utility.

Using webpack, you can create your own custom solutions/boilerplates, rather depending on what you find on the…


Performance is one of the core aspects in the development process. There are already techniques used in JavaScript which help us with that, especially how to handle event behaviour. But the implementation changes when try to use them depending on the framework/library. This part 1 of two part series looking and debouncing and throttling in general, and how to use them in React.

Debouncing

*Note :To better understand how debouncing works, its easier to visualise using scenario based interpretation

Requirement - search based on user input. Expected behaviour is, user enters the text and an api is called to filter…


Interviews can be a way to challenge yourself and help find your shortcomings

For the past month, I have been assigned as a panellist in the recruitment team for a new client project. We were assigned to hire 40 devs, 20 front-end(React) and 20 backend. I was in charge of the frontend.

The interviews started and it did not go as we had hoped for. There were a lot of candidates who came unprepared and lacked the basic understanding of front-end technologies like HTML, CSS and JavaScript. Even if you don’t get all the questions right, what matters is how…


Load large lists the intelligent way

Recently I was given the task to manipulate a huge chunk of data. The minimum number of records at any given point was around half a million. Generally, the backend guys would help us out by adding pagination to the API, but this time I was on my own(plus I was not aloud to create my own backend).

To show what happens when we try to loop through a large data array:


dispatching async actions never looked so good

So this is the third instalment in my Redux-Toolkit series, you can find:

When it comes to managing state in a React application, Redux has become somewhat of an industry standard. Now with the introduction of Redux Toolkit, life has never been easier. Its functional, easy to setup and you get to create slices of your store for better code maintainability and modularity.

Redux at its core is synchronous, so we need to add middleware like Redux-Thunk or Saga to help us…


This is a continuation of my previous story.

Let’s take a slice of choco-chip cake, the slice will contain the cake, the frosting and the choco-chips. Now if we were to think of the whole cake as the redux store. The traditional design says keep the the reducer, constants, actions in separate files, or a cake slice where the cake, frosting and the choco-chips are served separately.

In Redux-Toolkit, the createSlice method helps us create a slice of that redux-store, which contains the reducer and actions in a single file. …


A simpler (functional) state management

So I just came to know about this because of a new project of mine, where the team wants to do actual research before diving into the project. They don’t want to follow the same old technology stack, they wanted to have some fun.

So when I was asked if I had worked on React/Toolkit, I said yes ,thinking they meant the Redux dev toolkit, but I was wrong.

Side-note this is part one of a three part series where I will take you from beginner to advance feature of the toolkit.

So what is Redux-toolkit?

Redux-toolkit is a new…


Axios Cancel and Fetch Abort

Asynchronous behaviour is the base for any XHR call in JS. Handling this behaviour to produce desired output, may seem easy. After all its just a simple Promise.then or await, but as conditions change, the solution has to be altered to accommodate them.

There might be occasions when the user invokes an event multiple times, with different inputs. As JS makes async request to the endpoint, one cannot think the responses will also be in the same order.


Challenge yourself, look where others won’t 🙆‍♂️

This is going to be a short one, it has been around five years since I started my career as a developer. I moved from backend to database and finally found my place in front-end. Now been working as a React-dev for the past 3 years I feel like I found my Ikigai.

I love to learn and explore, but now and then I would feel like I have plateaued and feel a void, because I had stopped growing. …


A custom react hook to fetch the height and width of element

When designing a web app which has has to follow RWD(responsive web design), there are some limitations which you will face no matter how well you know CSS. There will be areas where you would be like “Why can’t this be done by using CSS,” you would do a lot of research, but at the end you would realise, this is a dead end.

The Why?

This happened to me, the problem I faced was to create responsive graphs. As a developer the first thing that comes to…

Abhimanyu Chauhan

A UI /UX Designer and JS Enthusiast, with a passion for travelling and writing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store