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]
Find and Replace or Remove Multiple Instances of a Substring in JavaScript
A quick hack with a practical example
In JavaScript, if there is nothing much complicated that you want to find/search and then replace/remove in a given string, there is a small but effective (granted, not much efficient) hack. Find out below with an example:
[Read More]Remove or Replace a Substring in JavaScript String
When the start and end indexes are known
If we know of the start and end index, we can remove or replace the substring from a JavaScript string in the following way:
[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]
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]