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 this scenario, I have used React Hook Form. The example code for a dynamic questionnaire is shared below.

[Read More]

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

Works regardless of location, browser, or device

When you visit your own blog or website, Google Analytics still tracks it as a view, which is akin to polluting your whole stats. 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]

React Docs Ebooks

In EPUB, MOBI, and PDF formats

I wanted to read React official docs in my Kobo e-reader device, but I could not find it anywhere in book form. I found this gist and its thread quite helpful. I installed pandoc and after spending some time in slightly reformatting the book and its table of contents, I managed to export the docs, with additional help from Zamzar file converter, in EPUB, PDF, and MOBI formats. [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

Detecting the country and region of the visiting user on 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 go about changing their system-auto-detected timezone nowadays (except for testing, which I have shown below), I believe 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. [Read More]
json 

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 a Value of the Key Has Changed

We have two similar JavaScript objects, and we are interested in finding which of the 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, or shuffled etc.

This kind of key identification might be required in cases where you need to compare the old and new state, such as previous and new filters, and figure out what exactly changed.

[Read More]