The problem statement that made me dig deep into this topic and write this article is
tree shaking with rc-slider.
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.
sizes instead of just
When we use something like
<img src="something.png"/> 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…
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.
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.
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:
NOTE: After the first few attempt and some research, I realized that
better-sqlite3 was an advance package over
sqlite3 hence I tried solving things for
Following things I tried and failed:
better-sqlite3instead of sqlite3
windows-build-toolas 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.
Github repo on deno-project
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?
To understand this, let’s first dive into other related concepts.
Many browsers came up with their own JS engine:
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.
To understand this lets first understand what happens when a network call is initiated.
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. …