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…
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. …
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…
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.
Create your own custom Icon component to render your svgs.
This is something I always wanted to do, create my own Icon component which would be an unopionated reusable component. Meaning anyone could use the component, the same way we use jsx components, without thinking much. To be honest there is only one step that is opinionated.
The answer is simple theses libraries provide us with hundreds of icons, but we might only require a few…
Api calls have never looked so easy
I got a chance to refactor, my teams old code. As I was going through it I found, there was no modularity for the api calling section. They had used Axios but were not using its power to the best.
The main requirements I had to refactor were:
So what is AXIOS
Axios is basically an external library, which is used to make promise…
A UI /UX Designer and JS Enthusiast, with a passion for travelling and writing.