React JS Render Form With Dynamic Data From Backend API

including field validations

We need to plot a form whose entire fields are coming from the backend. Since the fields are not known in advance, we cannot add them statically. The data about each field, such as its id to save with, name, validations, etc. all comes in the API response too.

For the given scenario, I have used React Hook Form. The demo and example code for a dynamic questionnaire is shared below.

[Read More]

Exclude Yourself From Google Analytics Without Filtering IP Addresses or Using Extensions

Including localhost calls. Works regardless of location, browser, or device.

When you visit your own blog or website, Google Analytics still tracks it as a view, which kind of corrupt your stats a little. If you want to check your site and keep the analytics data clean and legitimate, you must somehow exclude yourself from all the visits on all the pages. [Read More]

JavaScript Find Total Time Duration

Excluding overlapping and idle times

Say we have a an array of objects with start and end times in each. This could be anything, ranging from work experience (the way LinkedIn shows per job), to education, to sports career. We want to sum all these small experiences, excluding overlapping and idle times, and give out the total duration, which can further be converted into years, months, or days. [Read More]

Get User Country and Region on Browser With JavaScript Only

Without Using IP Address

Get user country by browser JavaScript

Detecting the country and region of the visiting user on the browser is certainly possible using JavaScript alone, without using any third-party geolocation service such as ipstack. The only consideration: It may not be accurate, and depend on the timezone selected by the user on their system, which can be changed. But since hardly anybody changes their system-auto-detected timezone nowadays (except for testing, which I have shown below), it is a good enough and cheap detection method for non-critical use cases.

[Read More]

JSON Dictionary for Mapping Timezone Cities to Countries

In my blog post get user country and region on browser with JavaScript only, I explained how to generate and use a dictionary to map timezone cities to their countries. Below are the complete JSON dictionaries, 1. cities (region part removed) to countries and 2. full timezones (with regions and cities) to countries, that can be copied or downloaded:

Notice that the keys “Kolkata” and “Calcutta” are both present and map to India. The reason is that “Kolkata” is what you find in moment-timezone, whereas selecting any Indian timezone returns me the spelling “Calcutta”. Therefore, I’ve kept both.

[Read More]

JavaScript Generate Your Own Random Number Without Math Random

A Custom Code for Finding Pseudo-generated Number

We know that there is no true random number. The best we get is pseudo-random number, which comes from a seed value. I was wondering if I could get a random number without using Math.random() function of JavaScript. So I developed an algorithm of my own, which is a few lines of code that works by keeping, updating, and shifting a seed array in the state. [Read More]

Compare Two JavaScript Objects and Get the Updated Keys

Where the Value of the Key Has Changed.

Compare two javascript objects.

We have two similar JavaScript objects and are interested in finding which key(s), if any, have changed at the first level. A key in the object could hold any data type in its value, including array and object, and it could also be deeply nested. The change could mean anything, such as added, added to, removed, removed from, modified, shuffled, etc.

You may require this kind of key identification in cases where you compare the old and new states, such as previous and new filters, and figure out what exactly changed.

[Read More]

JavaScript Token Bucket Algorithm

And its Possible Uses

Token Bucket is a rate-limiting algorithm in which there is a bucket that gets refilled at a particular rate with tokens. To perform an action, one or more tokens can be taken out or redeemed from this bucket. When there are no more tokens left, the action cannot be performed until the bucket is refilled and further tokens are available. [Read More]

JavaScript: Change the Behavior of a Class Method at Runtime

Useful Strategy to Perform Different Operations Without Repeated if Else or Switch Statements

Recently I came across a problem where I needed to perform two different sets of operations throughout the application for two types of users. The trouble was:

  1. I needed to turn on or off an operation based on certain condition, which would only be known once the user was logged in, not at the beginning.
[Read More]
When you purchase through links on, I may earn an affiliate commission.