In this article, we are going to explore a pattern for frontend scalability. we are also going to explore the pros and cons of the ABC pattern.

Atomic Business Component

Reusable UI components can be shared across apps and they don’t carry any business logic them. But business UI components have business logic…

My MacBook shut down most of the time because I am working and lazy to put the charger in.

It shows a notification at 10% battery but I usually forget.

How about a irritating Beep sound which start when battery is below 10%


Save the following script somewhere — You…

Ok, I did some experiments around large video files and Google Photos and Family sharing.

Before we start this experiment, let me tell you the initial state.

We have 3 people (me, wife, and kid). We have 100 GB.

So, right now, it shows — Total Approx 74GB used

Upload 2.4 GB Video file


Well, why we need to reason for this simple statement and write a 2-page article on this?

It is just simple common sense. Client code (even which we wrote) will be executed on the client machine. we don’t have control over machines and the network.

Even if we make UI checks and hide stuff on UI, anybody else can still make an API call with any value.

Never trust client UI

We must do validations on the server-side at 1st priority and client-side validations at 2nd priority.

How we can fix not version so that developer, CI/CD, production, everybody uses the same node version?

Step 1 — Add nodeVersionLock in package.json

we need to add preinstall and prestart scripts too.

Step 2 — Throw errors when undesired node-version found.

Step 3— AutoUpdate of Dockerfile & GitbHub YML

This step is optional and custom. it depends on your setup.

This is an example of my setup where I am calling the above script using pre-commit hooks.

Photo by Becca Tapert on Unsplash

Ok, Let me ask this very brave question. Why in 2020, the pure frontend code repo is still private?

In my opinion, there are no such benefits by keeping frontend code repo in private walls.

1. The output is already public

we generate the build/dist folder by webpack or similar tools. this is the end result…

Google sheet can be used as an excellent tool for internationalization in React App. It sounds strange but let me explain.

for Internationalisation, we need to maintain a big JSON file that holds the lang-keys and its translations. call it, langData.json.

generally, langData.json is part of code repo and every…


import { Button, DatePicker, message, Alert } from 'antd';

Right Way

import Button from 'antd/es/button';
import Alert from 'antd/es/alert';
import DatePicker from 'antd/es/date-picker';
import message from 'antd/es/message';

We Indians are very much frustrated with IRCTC. Here are a few suggestions.

1. Remove AC1 and AC2 compartments

Take a look at Mumbai Rajdhani

AC1 has 22 seats = 22x4730 = 1,04,060

AC2 has 54 seats = 54x2835 =1,53,090

AC3 has 64 seats = 72x2040 =1,46,880

You can clearly see that,

AC3 can pack 3…

I have 2 kinds of git repos.

  1. Work-related code where I use my work email Id while git commits.
  2. Open Source code where I use my personal email id while git commits.

A lot of times, email mismatch happen. there is an easy solution for it.

The root cause of this mismatch is the “global” flag

git config --global "EMAIL ID"

setting up “per repo” or “repo specific” user name and email is the solution.

Or you can directly edit the git config file.


It is quite easy to set up a “pre-commit” hook to verify If email is not specified.

Narendra Sisodiya

12+yrs exp. JavaScript Expert. Full Stack Expert. React, Nodejs Mongo AWS, Terraform Pulumi. IITian, Open Source. Currently Software Architect @

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