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 and data. Business UI components are created on top of reusable UI components.

Almost every Web application is one big monolithic business component.

Atomic Business Component is a pattern where the smallest part of the entire web application is created in such a manner so that,

  • It doesn’t depend on…


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%

Beep

Save the following script somewhere — You can download it from https://raw.githubusercontent.com/nsisodiya/ubuntu-battery-alarm/master/mac/mac-battery-alarm-service.sh too

#!/bin/bash
while true;
do
echo ""
charging_level=$(pmset -g batt | grep -Eo "\d+%" | cut -d% -f1)
charging_status=$(pmset -g batt | grep charging | cut -f4 -d" " | cut -f1 -d ";")…


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

Now, Let me upload a 2.4 GB video file. It's a 4K video and just 4 minutes long.

Tip — don’t use 4K on your iPhone. we have money to buy iPhone but not space.


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 of most frontend repo. and this folder is already public.

If anybody can do something by looking at your public frontend repo, she/he can do the same thing by looking at your dist folder too.

By uglifying and other stuff, we just reduce the small probability.

2. Data is precious, it is hidden by API

What exactly we are…


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 time, product manager/owner wants some change, the developer needs to make a change in the codebase.

Google sheet as JSON Hosting

We can host this langData.json over Google sheet. Think, Google sheet as JSON hosting website. In this article, we will learn to use an npm-package, which converts a Google-Sheet into a JSON file.

So…


Wrong-Way

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 times more people and still generated more money than AC1

If you increase face of AC3 from 2040 to 2126.25 (just 86 Rupee), AC3 coach will generate same revenue as AC2.

2. Increase General Coachs.


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 user.email "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.

.git/config

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 @ Prophecy.io

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