Photo by Priscilla Du Preez on Unsplash

The problem statement that made me dig deep into this topic and write this article is .

In one of my recent React project, I am taking utmost care to make sure that I let no stone unturned to achieve the best performance. Among things like lazy loading, code splitting and image optimisation, tree shaking is turning out to be very useful.

Most of the libraries these days provide an option of tree shaking by default. With tree shaking, only the modules that you’ve imported from a library are used while creating the build instead of using…


How often do you encounter bugs in production which are impossible to reproduce locally? IDK about you, but it happens a lot to me.

Viewing the script and adding a breakpoint might help us at times but what if we need to change something in that script? We’re out of luck, isn’t it?

Well, the one way in which I solve this issue is by using a chrome extension called Resource Override.

With resource override, you can override any resource, be it a script or style, etc to point to your local host (or any other resource). …


Presence of <img /> tag is one of the main reason why some site loads slow. Here are some tricks which can be used to improve the performance of the website by handling the download of image efficiently.

1. Using and instead of just :

When we use something like we instruct the browser to download something.png from the server and display it in the browser. The problem here is that regardless of the screen size, the image getting downloaded will be the same. Smaller devices might not require a large image, but we’re downloading the…


NaN is something which we use less frequently in JavaScript but still it’s worth understanding the concept.

What is NaN?

NaN is a property that represents Not a Number value. We get NaN when we try to do a numeric operation on something which cannot be converted to a Number.

Note: Be careful while using “+” as this can be used for both string concatenation and number addition.

Whenever we perform any numeric operation, JS engine has to make sure that all the elements participating in the operation are either number or can be converted to a number.

In the…


image from freepik

Does your app require a fixed address bar in mobile browsers? Read mode intended to solve problem, creates a lot of problem for some use case. The sudden disappearing and appearing of the address bar as you scroll through mobile browser is pain in the ASS at times.

My use case was that I wanted a fixed address bar when my app was in certain state. It didn’t matter if the address bar was hidden or visible. But having a changing behaviour caused terrible problems with styling.

Here are some of the solutions I tried in progressive steps. If any…


Do you have multiple HLS videos to be played one after the other? And do you want to cache the next video so that it starts playing immediately when u go to next?

Well, if your answer is “yes” to the above question, then this article is for you.

The above image is from my status update app where I have multiple hls videos playing one after the other.

Problem Statement

Though my app was working perfectly, it was taking some time for the next video to load. …


I’ve been trying to integrate sqlite3 into my electron project which is built using electron-forge.

This is a brief and to the point article on how I solved this problem.

Here is my app’s tech stack:

  1. Electron.
  2. React.
  3. Electron-forge.
  4. Webpack (electron-forge).
  5. TypeScript.

NOTE: After the first few attempt and some research, I realized that was an advance package over hence I tried solving things for .

Following things I tried and failed:

  1. re-building the sqlite3 module with node-gyp
  2. using instead of sqlite3
  3. Working with as suggested in this article .

The only thing that worked…


I won’t be talking about what is deno here, rather I will explain the code to create a simple local server. To learn more about deno follow their official page.

Code link

Github repo on deno-project

Installing deno

For windows run the following command from your PowerShell ISE

iwr https://deno.land/x/install/install.ps1 -useb | iex


As you might have heard about DENO a lot these days. It claims to be a JS runtime just like NODE. But what is a JS runtime?

Photo by Alex wong on Unsplash

To understand this, let’s first dive into other related concepts.

I have heard of JS Engine, but what is it?

Just like all other programming languages, even JS requires a compiler to execute the code. The only way (wait till you read further) to run a javascript code is in the browser since the compiler aka the JS ENGINE lives in the browser.

Many browsers came up with their own JS engine:

  1. V8 engine by Chrome.
  2. SpiderMonkey by Mozilla.
  3. Chakra by IE

and…


Every browser limits the number of concurrent connections to a single domain as well as it has a limit for overall concurrent connections.

The above image is taken from StackOverflow. It shows the number of parallel connections various browser supports.

But why does the browser limit the number of calls at all?

To understand this lets first understand what happens when a network call is initiated.

What happens when you make a network call?

HTTP 1.0

When you make a network call from your browser using ajax, or when you request a script or a style stored in a CDN, your browser has to establish a TCP connection with the server. …

Ishwar Rimal — @theHumbleBeing

I write articles on JavaScript, electron, and react. Opted for curators for better reach, not money. Open link in incognito to read for free (or contact me)

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