DEV Community: Ajay Kumar Verma

How to generate all subarrays in javascript in 2022?

Ajay Kumar Verma — Wed, 12 Oct 2022 18:46:32 +0000

Hello Readers,

Interviewers like to ask questions about the subarrays as it gives a clear indication of the logical thinking and aptitude of a candidate.

Considering the above, we are going to start a new tag MCAIQ (most commonly asked interview questions) on weekendtutorial that will contain the most frequently asked questions in the interview. This will be your single stop for all such questions and interview preparations.

we will see how to generate all the subarrays of an array in javascript using iterative and recursive ways both.

Generate all subarrays using iteration

Problem Statement

Given an array, generate all the possible subarrays of the given array using an iterative way.

Input : [1, 2, 3]

Output: [1], [1, 2], [1, 2, 3], [2], [2, 3], [3]

Input: [1, 2]

Output: [1], [1, 2], [2]

Implementation

Generate all subarrays using recursion

Implementation

I hope you have learned something if you like the article please share it with friends and help weekendtutorial to grow. This site is run by ads and it is required for it to be alive and grow.

Read the following articles –

This is all for today. Please visit our other articles, and keep learning.

Learn debouncing and throttling in a simple way

Ajay Kumar Verma — Mon, 26 Sep 2022 10:14:10 +0000

If you’re a frontend developer you must have handled the various events like button clicking, form submit, and window scroll events, etc through event handlers.

Some events are lightweight and don’t interfere with the UX behavior but some are just the opposite of it, for instance, it is strongly advised to not attach any event handler on the window scroll event or resize event.

The reason is in comparison to other events, depending on the browser and the device the scroll event can fire a lot, which places lots of scroll callbacks into the callback queue and call stack. Thus, the page becomes unresponsive and not scrollable.

The two widely known techniques that solve the above problem are —

Debouncing
Throttling

Let’s see how debouncing and throttling helps to solve the above problem and other use cases also.

What is Debouncing?

Debounce technique can be understood by a timer. When the button is pressed the timer started. If the button is pressed again before the timer expires, the timer is reset. This ensures that the button can only be registered as being pressed once per debounce period.

Let me take another example, the elevator

Imagine you’re in an elevator and the door is about to close. But, just before that another person comes in, the elevator door opens again. Now it waits for another person for a specific time and if no one comes door is closed. So, we see the timer reset on the new call and “group” multiple sequential calls into a single one.

Other use cases —

SearchBar
Autocomplete feature
Auto-saving user input
the clicking of a button that makes API calls

Implementation of debouncing

Let’s create an index.html file having an input field.

On keypress, we suppose to call an API. Let’s handle this behaviour by debouncing.

and debounce.js –

if you check the console, you will find that the no. of time the event handler called is way less than the actual input size. And thats the big performance boost!

What is Throttling?

Throttling technique can be understood by a counter. When the button is pressed the counter is incremented. Now till the counter reaches a certain threshold all button pressing is ignored. This limits the number of times the button can be registered as being pressed in a given period of time.

Other use cases —

Shooting game — Pistol takes 1 sec time between each shot but the user clicks the mouse button multiple times.
Infinite scrolling

Implementation of throttling

Let’s update the above index.html file with a button.

On the button click, we suppose to call an API. Let’s handle this behaviour by throttling.

throttling.js –

We can see that button handler will be called at each 500ms and all the button click within this window is ignored.

As we have seen the performance benefits of using the debounce and throttle, based on your use case, you can use it in your code base.

Note:

Underscore and Lodash.js libraries also have the debounce and throttle method, you can check that as well.

If you want to know how to create a javascript object, please check –

https://weekendtutorial.com/what-is-object-in-javascript-and-how-to-create-it/

https://weekendtutorial.com/how-to-implement-binary-heap-in-javascript-in-2022/

References

Twitter scrolling issue in 2011

Binary Heap | How to Implement in Javascript in 2022?

Ajay Kumar Verma — Thu, 05 May 2022 19:31:25 +0000

This article could be considered a complete guide on the binary heap. It contains the definition, its type, applications, and full implementation with an example.

Binary Heap

A binary heap is a tree data structure that has 2 properties

It should be a perfect binary tree (a.k.a structure-property)
Each node of the tree should be either ≥ or ≤ than both of its children. In other words, It should be either Min heap or Max heap. (a.k.a heap property)

Perfect Binary Tree

A binary tree that is almost complete, the last level of the tree-filled from left to right.

e.g tree given in max heap and min heap is an example of a perfect binary tree

Note: if you have not read the binary tree before, please checkout

Types of Binary Heap

It is of 2 types —

Max Heap
Min Heap

Max Heap

A BH where each node of the tree is ≥ (greater than or equal to) than both of its children. Thus the root of the tree would be maximum among all of the nodes.

e.g below tree is an example of a Max heap

Min Heap

A BH where each node of the tree is ≤ (smaller than or equal to) than both of its children. Thus the root of the tree would be minimum among all of the nodes.

e.g below tree is an example of a Min heap

Representation of Binary Heap

A BH can be represented by the list of tree nodes as well by an Array. In this article, we will only focus on the Array representation of it.

Key points to note here are —

the root of the tree is arr[0]
for any index i,

parent index = ( i – 1 ) / 2
left child index = 2 * i + 1
right child index = 2 * i + 2

Application of Heap

Heap Sort
Priority Queue
Graph Algorithms (Dijkstra— Shortest Path algorithm, Prims — MST)
Problems where you need to keep finding min after every iteration e.g

Here is the complete list of problems on BH — Heap Problems

Binary Max Heap Implementation in Javascript

Usage

Approach 1: Insert the array elements one by one in the heap. Heap insert function calls function heapifyUp internally.

let pq = new BinaryMaxHeap();

let arr = [80,70,40,20,10,60,50,30];

for (let i = 0; i < arr.length; i++) {
    pq.insert(arr[i]);
}

console.log('Heap using approach 1', pq);

Approach 2: Insert complete array elements in the heap (by calling the build_heap function).

Heap function build_heap calls function heapify which heapify the whole heap.

let pr = new BinaryMaxHeap();

pr.build_heap(arr);

console.log('Heap using approach 2', pr);

Note:- Both Approaches results in the valid binary max heap. Resulting heap ordering could be same or different.

Result

Binary Min Heap Implementation in Javascript

Usage

Approach 1: Insert the array elements one by one in the heap. Heap insert function calls function heapifyUp internally.

let pq = new PriorityQueue();

let arr = [80,70,40,20,10,60,50,30];

for (let i = 0; i < arr.length; i++) {
    pq.insert(arr[i]);
}

console.log('Heap using approach 1', pq);

Approach 2: Insert complete array elements in the heap (by calling the build_heap function).

Heap function build_heap calls function heapify which heapify the whole heap.

let pr = new PriorityQueue();

pr.build_heap(arr);

console.log('Heap using approach 2', pr);

Note:- Both Approaches results in the valid binary min heap. Resulting heap ordering could be same or different.

Result

Summary

There are plenty of practical problems that will be solved easily by the binary heap data structure. It is a must one for all computer science grads.

In many programming languages, it is provided natively but knowing the core implementation and building a custom one is real learning.

The code in this article (which is written in javascript) can be imported to other programming languages of your choice.

Try to build it in the programming language you preferred.

Keep learning, and stay safe.

How to integrate Google ReCaptcha v3 correctly in 2022?

Ajay Kumar Verma — Tue, 12 Apr 2022 08:53:15 +0000

A solution to prevent email spamming.

Google Recaptcha is one of the industry-standard methods that solve the email spamming problem.

What is Email Spamming?

Email spam a.k.a junk emails refers to uninvited emails, usually sent to a large list of recipient email users. This recipient’s email addresses are stolen or purchased by attackers for money theft or commercial purpose depending on what attackers want.

These emails most of the time have hidden malware that was not supposed to open and if someone opens their mail and clicks the links will become a victim of these attackers.

e.g.

the places which is the source of the email spam –

Login, signup and reset password forms on the site
Comment and contact us section in a blog

There are 4 types of Google ReCaptcha –

In this article, we are going to integrate the google ReCaptcha v3 which is the latest.

If you’re already using Google Recaptcha v2 and you want to move to Google Recaptcha v3, you can read the Google documentation for the same, it is pretty straightforward.

Steps to Integrate Google Recaptcha V3

Step 1. Register your website on recaptcha admin

First of all, we need to register the website on the ReCaptcha admin console.

It looks like this –

Step 2. Client-Side Integration

After registering the website on the admin console, note down the reCAPTCHA keys.

e.g.

In the above image, you must be seeing the reCaptcha Keys.

ReCaptcha gives 2 keys –

Site Key – this is the public key and is used in client-side integration.
Secret Key – this is the private key and can’t be exposed to anyone. This should be safely stored in your backend server.

Let’s start with the client-side integration –

1. Load the JavaScript API with your site key

<script src="https://www.google.com/recaptcha/api.js?render=<site_key>"></script>

in the above, you will pass the actual Recaptcha Site Key in the place of <site_key>

e.g if the Recaptcha Site Key is sdfjhjk124jkhk

you will pass it as ?render=sdfjhjk124jkhk

2. Call grecaptcha.execute on each action you wish to protect

<script>
    function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                // Add your logic to submit to your backend server here.
            });
        });
    }
</script>

Whichever input box you wish to protect, it could be your signup, login or some other field, you need to update the click handler for that, similar to above.

You can see the above code, we pass the actual Recaptcha site key and one callback function to the grecaptcha.execute function.

When the callback is executed, we get the token in it. And this token immediately needs to be passed to the backend server for fetching the user score.

3. Send the token immediately to your backend with the request to verify

This will trigger the server-side flow.

Step 3. Server-Side Integration

With the token passed by the client and with the Recaptcha Secret Key that was already stored at the server-side, the backend will make the call to google site-verify api.

The google site-verify API returns a score that is between 0.0 to 1.0. We also set one threshold score default of 0.5 up to which score we will allow users to make requests.

If the score is less than the threshold score we can say that the user is not human and it’s a bot.

If the score is >threshold score then the user is human and the actual functionality of click is allowed.

Request end point

Site Verify Response

The response is a JSON object.

Challenge

On StackOverflow, I was searching for something and found out most of the people are implementing it incorrectly.

They are getting the score from server-side and comparing the score and threshold on the client-side which is completely wrong.

e.g. Below implementation is wrong

<script>
    function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                var score = fetchScoreFromAPI(token);
                if (score > THRESHOLD_SCORE) {
                    callCommentApi();
                }
            });
        });
    }
</script>

The above is incorrect due to –

the client never does the validation
Attackers can easily manipulate the score and see the comment API endpoint and flood it with unsolicited emails.

Here is the correct implementation –

<script>
    function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
            grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                callCommentAPI(token);
            });
        });
    }
</script>

// At server side
function callCommentAPI(token){
    var score = fetchScoreFromAPI(token);
    if (score > THRESHOLD_SCORE) {
        // execute logic for comment API
    }
}

So, we have just passed the token to the existing API and the validation is done at the server-side which is the more secure and correct way of doing it.

Also, you can notice that even if the comment API URL is exposed to the public but it won’t get spammed as it first checks the score.

Summary

I hope you have learned something new. Let me know if you think you can solve it differently or if something is wrong with the article.

Please read my other popular articles –

Nginx Tutorial
Browser Storage

That’s all for now, let’s meet next time soon.

How to Refactor the global variables in javascript?

Ajay Kumar Verma — Mon, 21 Mar 2022 19:03:02 +0000

A deeper dive into the namespace pattern to refactor the global variables.

We all have heard or read that globals are bad practices.

Polluting the code space with multiple globals leads to unmanageable and unpredictable code. It is always advisable to keep the globals in check and have it as minimum as possible.

In this part, we will be discussing one approach that will reduce the global variables with much ease.

Suppose in your codebase the following globals are present —

// Constructors
function X() {}
function Y() {}

// global vars
var res = 1;

// global objects
var module1 = {
   a: 1,
   b: 2
};

var module2 = {};
module2.a = 10;
module2.b = 20;

var module3 = {};

In the above block, we have 6 global variables. Now, we can refactor this code to have only one global object, and all the constructors, variables, and objects will be part of it.

Ideally, all codebases should thrive to have a single global variable.

Having multiple globals are bad because of many reasons —

they could be modified accidentally and are error-prone.
also, it may cause name collision with your code or 3rd party library

Solution —

Refactored code —

// Global object
var APP = APP || {};

// Constructors
APP.X = function () {};
APP.Y = function () {};

// variables
APP.res = 1;

// objects
APP.modules.module1 = {a: 1, b: 2};
APP.modules.module2 = {};
APP.modules.module2.a = 10;
APP.modules.module2.b = 20;
APP.modules.module3 = {};

There is a problem with the code e.g if you want to use the below

var module1 = APP.modules.module1;

you have to make 3 checks like below

var module1 = APP && APP.modules && APP.modules.module1;

and this is kind of irritating.

To solve this we need to have a handy function that deals with the namespacing part.

Let's call this function ‘namespace()’ and use it like this —

APP.namespace(‘APP.modules.module1’)

which is equivalent to —

var APP = {
   modules: {
      module1: {
      }
   }
};

Implementation of namespace() function

var APP = APP || {};

APP.namespace = function (str) {
  var parts = str.split('.'),
      parent = APP;

  // remove the redundant global
  if (parts[0] === 'APP') {
      parts = parts.slice(1);
  }

  for (var i = 0; i < parts.length; i++) {
      if (typeof parent[parts[i]] === 'undefined') {
          parent[parts[i]] = {};
      }
      parent = parent[parts[i]]; 
  }

  return parent;
}

Let's test the above.

We can see that —

APP.namespace(‘APP.modules.module1’)

gives the desired result and also passing the APP (the top global object in the namespace) is redundant. We can achieve the same by passing just modules.module1

APP.namespace(‘modules.module1’)

Let me know if you like the namespace pattern. If you like my article, please follow me. Thanks for reading the article, See you soon!

Binary Tree | the best 5 coding questions you must solve

Ajay Kumar Verma — Thu, 10 Mar 2022 19:55:55 +0000

In this article, we will see the top 5 most commonly asked interview problems on binary tree.

If you’re preparing for the job interviews for the position of software engineer/software developer or any role related to programming, you have to have a strong grasp of the data structures.

Non-linear data structures like Trees, Graphs are favorite topics from the interviewer’s point of view. This blog is about the binary tree data structure.

We have just started the interview problem series where we will see the top interview question that is asked in almost every interview. Along with the problems, we will also provide the solution in detail so that it can be clearer to you.

Note: If you have not read this, please do it first Binary Tree — How to implement using Javascript in 2022?

One strong suggestion though — Try the problems by yourself first.

Once you’ve exhausted all the options and nothing working out only then check the solution. Believe me, practicing this will boost your confidence.

You will find that most of the time, you have almost reached the solution. Later this will be programmed in your mind and you’ll be able to find the approaches and reach the solution without any hint or help.

List of problems

Size of the binary tree (i.e count of all nodes)
Height of the binary tree
The maximum node in the binary tree
The minimum node in the binary tree
Sum of all nodes in the binary tree

Problem 1. Size of the binary tree

The size of the binary tree is the total number of nodes present in the tree.

for example, the size of the below tree is 8

Size of tree = size of left subtree + size of right subtree + 1

function size(root) {
   if (root === null) return 0;

   return size(root.left) + size(root.right) + 1;
}

TC: O(N) ~ have to visit each node of the tree at most once
SC: O(N) ~ in case of skewed tree

2. Height of the binary tree

The height of the tree is the distance of the farthest leaf node from the root node of the tree.

for example, the height of the below tree is 4

Height of tree = Max(Height of left subtree, Height of right subtree) + 1

function height(root) {
   if (root === null) return 0;
   return Math.max(height(root.left), height(root.right)) + 1;
}

TC: O(N) ~ have to visit each node of the tree at most once
SC: O(N) ~ in case of skewed tree

3. The maximum node in the binary tree

The maximum node can be either root node or will be from the left or right subtree.

If we take the maximum of the above 3, the result will be the maximum node in the tree.

for example, the maximum of the below tree is 80

Largest node of tree =
Max(Largest in left subtree, Largest in right subtree, root.data)

function largest(root) {
   if (root === null) return 0;
   return Math.max(
        largest(root.left),
        largest(root.right),
        root.data
    );
}

TC: O(N) ~ have to visit each node of the tree at most once
SC: O(N) ~ in case of skewed tree

4. The minimum node in the binary tree

The minimum node can be either root node or will be from the left or right subtree.

If we take the minimum of the above 3, the result will be the minimum node in the tree.

for example, the minimum of the below tree is 10

Smallest node of tree =
Min(Smallest in left subtree, Smallest in right subtree, root.data)

function smallest(root) {
   if (root === null) return 0;
   return Math.min(
        smallest(root.left),
        smallest(root.right),
        root.data
    );
}

TC: O(N) ~ have to visit each node of the tree at most once
SC: O(N) ~ in case of skewed tree

5. Sum of all nodes in the binary tree

To sum all the nodes of the tree we need to visit each node using any tree traversal method. In this, I’m using postorder traversal.

for example, the maximum of the below tree is 360

sumTree = sumTree(left subtree) + sumTree(right subtree) + root.data

function sumTree(root) {
   if (root === null) return 0;
   return sumTree(root.left) + sumTree(root.right)+root.data;
}

TC: O(N) ~ have to visit each node of the tree at most once
SC: O(N) ~ in case of skewed tree

Summary

We have seen the most common problems that are asked in the interviews. We will come up with more problems that will cover the entire tree data structure.

Please stay along with the weekendTutorial and medium for the latest articles.

It would encourage me to write more if you follow me here, I would really appreciate it.

Thank you for reading this, Let’s meet next time.

Binary Tree – How to implement using Javascript in 2022?

Ajay Kumar Verma — Sat, 19 Feb 2022 19:55:55 +0000

In this article, we will read about the binary tree in detail. We will see how to build and traverse it in javascript.

Tree data structure

A tree is a non-linear data structure that follows some hierarchy. It is a collection of the tree nodes.

A tree node stores the information about its node value, its left child address, and right child address.

In a tree, a tree node can have multiple children.

Basic Terminology in Tree

Before diving into the code, let’s understand the basic terminologies –

root – root is the topmost node of the tree e.g 10 is the root node in the above picture.

siblings – The children of the parent are siblings to each other e.g 20 & 30 are siblings as both are children of node 10.

cousins – uncles’ children are cousins to ourselves e.g node 30 is the uncle of nodes 40 & 50. Hence, nodes 40, 50, 60, and 70 are all cousins.

height of a node – Distance from the current node to the farthest leaf e.g Height(20) = 2 because 80 is the farthest leaf from node 20.

depth of a node – distance from the root to the node e.g depth(20) = 1

Height of entire tree = Height of the root node

Depth of entire tree = Height of entire tree

Binary Tree data structure

A binary tree is a tree where a tree node can have 0, 1, or 2 children at most.

How to Implement binary tree in Javascript?

function TreeNode(data) {
  this.data = data;
  this.left = null;
  this.right = null;
}

function createTree() {
  let root = new TreeNode(10);

  root.left = new TreeNode(20);
  root.right = new TreeNode(30);

  root.left.left = new TreeNode(40);
  root.left.right = new TreeNode(50);

  root.right.left = new TreeNode(60);
  root.right.right = new TreeNode(70);

  root.left.left.right = new TreeNode(80);

  return root;
}

How to traverse a binary tree?

Traversal means visiting each node of the binary tree.

There are 3 ways to traverse a binary tree –

Preorder traversal
Inorder traversal
Postorder traversal

There is one more traversal Level Order traversal that is not in the scope of this article. We will read that when we solve the Left View, Right View of the binary tree, etc.

Preorder Traversal (using recursion)

It traverses the tree in the following fashion – data Left Right.

The preorder traversal for the above tree is – 10 20 40 80 50 30 60 70

function preOrder(root) {
  if (root === null) return;

  // print the node data
  console.log(root.data);

  // goto left
  preOrder(root.left);

  // goto right
  preOrder(root.right);
}

Time Complexity: O(n) (each tree node is processed once)

Space Complexity: O(h) h is the height. of the tree.

Preorder Traversal (without recursion)

The recursive one was pretty simple but if you’re going to apply for a software developer position you might be asked to traverse the tree iteratively i.e without recursion.

We would be using one stack to remember the previous node and one array to store the answer.

To solve this, think of the preorder formula – data left right and visualize it.

Consider an example with just 3 nodes –

       5

   /       \
 10        15

Preorder for this is – 5 10 15

Now, after processing node 5, next will be node 10. If we are using a stack and pushing the left and right node of the current node, then the right node will be pushed first and then the left one because we need to traverse left children first.

If you understood this, the implementation will be easier to understand.

function preOrder(root) {

  let ans = [];

  if (root === null) return ans;

  // push root into stack
  let stack = [root];

  // loop while stack is not empty
  while (stack.length) {

    let cur = stack.pop();

    // push the node data to ans
    ans.push(cur.data);

    // push right node into stack
    if (cur.right) {
      stack.push(cur.right);
    }

    // push left node into stack
    // as it pushed last so will be pop first
    // i.e this ensures data left right ordering
    if (cur.left) {
      stack.push(cur.left);
    }

  }

  return ans;
}

Time Complexity: O(n) (each tree node is processed once)

Space Complexity: O(h) + O(n) ~= O(n) h is the height of the tree.

Inorder Traversal (using recursion)

It traverses the tree in the following fashion – Left data Right

The inorder traversal for the above tree is – 40 80 20 50 10 60 30 70

function inOrder(root) {
  if (root === null) return;

  // goto left
  inOrder(root.left);

  // print the node data
  console.log(root.data);

  // goto right
  inOrder(root.right);
}

Time Complexity: O(n) (each tree node is processed once)

Space Complexity: O(h) h is the height. of the tree.

Inorder Traversal (without recursion)

Inorder formula: left data right

From the formula, we will follow below steps —

Step1: We will go to the left and keep pushing every node into the stack.

Step2: Pop the stack top element

Step3: goto right and follow Step1

function inOrder(root) {

  let ans = [];

  if (root === null) return ans;

  // push root into stack
  let stack = [];

  let cur = root;

  // loop while stack is not empty
  while (cur || stack.length) {

    // goto left
    while(cur) {
      stack.push(cur);
      cur = cur.left;
    }

    // push the node data to ans
    cur = stack.pop();
    ans.push(cur.data);

    // push right node into stack
    cur = cur.right;

  }

  return ans.reverse();
}

Time Complexity: O(n) (each tree node is processed once)

Space Complexity: O(h) + O(n) ~= O(n) h is the height of the tree.

Postorder Traversal (using recursion)

It traverses the tree in the following fashion – Left Right data

The postorder traversal for the above tree is – 80 40 50 20 60 70 30 10

function postOrder(root) {
  if (root === null) return;

  // goto left
  postOrder(root.left);

  // goto right
  postOrder(root.right);

  // print the node data
  console.log(root.data);
}

Time Complexity: O(n) (each tree node is processed once)

Space Complexity: O(h) h is the height. of the tree.

Postorder Traversal (without recursion)

Let’s think of the preorder traversal solution again. This is similar to that.

preorder formula: data left right

Let's see how can we reach to postorder from the preorder.

Now, reverse the left and right position, the formula will become data right left

And if we reverse the entire formula, the final formula will become – left right data

which is the formula for the postorder traversal.

function postOrder(root) {

  let ans = [];

  if (root === null) return ans;

  // push root into stack
  let stack = [root];

  // loop while stack is not empty
  while (stack.length) {

    let cur = stack.pop();

    // push the node data to ans
    ans.push(cur.data);

    // push left node into stack
    if (cur.left) {
      stack.push(cur.left);
    }

    // push right node into stack
    if (cur.right) {
      stack.push(cur.right);
    }
  }

  return ans.reverse();
}

Time Complexity: O(n) (each tree node is processed once)

Space Complexity: O(h) + O(n) ~= O(n) h is the height of the tree.

Conclusion

We have seen the implementation of the binary tree in javascript and its traversal preorder, inorder, and postorder in both recursive and non-recursive ways.

The idea of this article is to give you consolidated knowledge all at once. From the interview point of view, the non-recursive traversals are very important.

If you like my article, please buy me a coffee!

I'm also on medium, please follow me there.

Thanks for reading the article!

Browser Storage In detail – part 1

Ajay Kumar Verma — Tue, 08 Feb 2022 20:29:19 +0000

Every web developer needs to understand the in and out of browser storage because this is the prerequisite for making a website and knowing how it works behind the scene.

It is hard to imagine a website without any storage as every modern website, be it a social website or a big e-commerce website, or just a plain blog static website needs to store something, hence this topic becomes more critical to understand.

There are a few important keywords coming in the article at multiple places. So, please follow the below definition for those terms –

Session – session is a browser tab, which is alive if the tab is open and dead when it is closed.
Static website – a website that has the static hardcoded content which doesn’t change much
Dynamic website – a website where the content of the website is coming dynamically
Client – a client is a machine that makes the request (from the browser) to the server for some resources
Server – a server is also a machine that serves the client request

Why do we need browser storage?

One question that would be popping be in your mind is why do we need to store anything. The reason for storage are –

Data Persistence
Authentication
To speed up the application
Accessibility with low network

Data persistence

Sometimes we want to persist some data throughout the session or even when the session ends in the storage for example user state or user-id in a session.

Based on the user-id in the session storage, we can say whether the user is logged in or not.

Most of the applications might be built on the logic when the user hits the login button then post login you keep the user-id from the response in the session storage.

Now, if the user refreshes the tab, you still want to be logged in, and that will be achieved through the user-id.

Keeping the user-id in the session is not a problem unless it’s been validated on the backend with each Node or service API request. If the user-id has tampered i.e not correct service APIs can log out the user.

This is just one use case, there are many where we may require storage for Data persistence.

Authentication

Suppose you are building a simple application that supports login. To implement it,

Store the email and password in the local store and if matches allow the user to log in.

Thus, storage is helpful in the authentication.

Speed up the application

Storing the images and videos or a big API response will speed up the website as it won’t go again to download the image or video or make the API call for the same response again.

Many companies use the above to save the extra second that costs for the resources which can be stored.

Accessibility with offline/low Network

As most of the places on the planet earth are still with low internet or offline mostly, to target those users, companies are trying to serve their website even in offline mode.

And it is possible using the service workers, cache storage, and IndexedDB. I’ll try to write one tutorial that will cover the above later.

Now it should be clear why we need the storage.

Before we dive into the client-side storage, we need to revisit the definition of static and dynamic websites –

Dynamic Website

Here, the client makes the request to the server for the data to be placed inside the HTML, once the server gives the data to the client this HTML file gets served.

The data is stored in the server using some kind of database (i.e server-side storage) and the server with the help of some server-side code, fetches the data and sends it to the client.

As data is dynamic and website depends on it, it is known as dynamic websites.

Static website (using Browser storage behind the scene)

Everything is the same as a dynamic website except the data is stored in the browser (client-side storage i.e browser storage) through Javascript API. With the help of these Javascript APIs data could be fetched whenever needed.

In most cases, both the storage client-side and server-side are used together.

Note :-

There is a size limit on the client-side storage though, it depends on the browser and user settings but approx. 5MB is the limit on the local storage.
It is advisable to not store the sensitive data in the client-side storage because they are less secure and could be easily manipulated.

Conclusion

This is where the first part concludes. Please wait for the next part, stay tuned!

If interested in building an application please read How to Build a Quote Generator using Javascript

Please follow me on – medium.com also for more articles!

Learn Nginx and its basics in 2022

Ajay Kumar Verma — Sat, 05 Feb 2022 08:46:53 +0000

A few weeks ago, I had to do a complex redirect of a request e.g if the request coming to nginx has a specific query param or is coming from a specific host then internally redirect to a different path.

I had completed my logic and was certain about its working but as the saying goes —

Your software will eventually fail unless it's verified with all the edge cases.

However, due to our system dependency, I cannot merge the code to staging dev for testing as in case of nginx failure, it will block other developers to write/test their node API or client code.

So, to mitigate this, I have set up the nginx in my local computer and did thorough testing. Once it’s fine locally, the code is ready to be pushed in staging for further testing. This way I save lots of time without hampering others' work.

In this article, I’ll walk through the basics of nginx, installation, and set up locally, setting up logs, and a few others.

Let’s start with the definition of nginx.

What is Nginx?

Nginx is a short form of engine x is an HTTP and reverse proxy server. It is heavily used as a load balancer and serves static files, sometimes even complete static websites like the company’s blog hosted on Nginx!.

Load balancer

In simple terms, the Load balancer is like a middle man sitting in between the concerned parties e.g assume A is the list of clients and B is the list of the servers then —

Case 1: With No Load Balancer

All incoming requests would be going to just one server which in the worst case, makes it hang or crash. You probably have heard the term Node API or Service API is down which means the box or the server serving that API request is hung or crashed due to request overload or OutOfMemory etc. Thus making the UX unresponsive.

Case 2: With Load Balancer

All incoming requests will have to go through the Load Balancer. It maintains the routing table and gets notification if any of the boxes or server goes down (through polling).

It efficiently distributes the network requests across servers and if one server goes down it redirects the requests to others servers that are online. Thus, maintaining the availability of the server always online.

Nginx Configuration File

This file is a tree-like structure and contains the instructions in the form of rules/blocks.

# main context (outside any other context i.e global context)

# event context
event {
  worker_connections 1024;
}

#http context
http {

  # server context 
  server {
     # code goes here
  }
  server {
     # another server context, code goes here
  }
}

Before we dive into creating our own web server, let's learn the Nginx configuration file structure in a crisp mode -

Main Context —

The main context a.k.a. global context is the topmost context and all other contexts are part of it e.g Event context, HTTP context. It is used to configure details that affect the entire application on a granular level.

Event Context —

Event Context is contained within the Main context. It deals with connection handling in general. All the directives defined within this context deals with how worker processes should handle the incoming connections.

The HTTP Context —

This is the sibling of the Event context and written side-by-side of the event context rather than nested. This context will hold the majority of the configurations if we are using Nginx as a web server or reverse proxy.

Note:-

There can only be one Event context and HTTP context within the nginx configuration.

Later in the article, We will see 2 more contexts — server context and location context.

How to install Nginx in macOS?

If you are not using brew then install it first. Open your terminal and do the followings —

install brew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once the brew is installed, do

brew install nginx

Once nginx is installed, you can verify it by

nginx -v

Above should print nginx version: nginx/<some version number>

e.g.
nginx version: nginx/1.21.0

Once nginx is installed, the brew will create the nginx folder at the below location -

/usr/local/etc/nginx

the default nginx.conf will look like this -

events {
  worker_connections 1024;
}

http {
  server {
    listen       8080;
    server_name  localhost;
    location / {
      root   html;
      index  index.html index.htm;
    }
  }
}

To start the nginx services do the following —

nginx

if there is any error it will be logged in the terminal, to test if it is serving the default HTML file, hit the URL -

http://localhost:8080

and to stop it —

nginx -s stop

How to serve files from a different location?

Let's modify the nginx.conf file to read the HTML file from a different location —

First, create a folder that contains the HTML file index.html (with below content) that you want to serve e.g I’ve created nginx-poc inside the Download folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>This is index html file from nginx-poc folder</h1>
</body>
</html>

Copy the complete path of this folder that will be the root and open the nginx.conf to update it

using vim editor or nano or any other way you prefer to open the file (e.g nano) —

nano /usr/local/etc/nginx/nginx.conf

and update the root location

events {
  worker_connections 1024;
}

http {
  server {
    listen       8080;
    server_name  localhost;
    location / {
      root   /Users/Download/nginx-poc;
      index  index.html index.htm;
    }
  }
}

Now stop the nginx and start it again to see the updated changes. Hit the localhost URL with port 8080 -

How to do Url redirection?

Sometimes, the need may arise for URL redirection when the existing resource is moved to a different location. Let’s see how can we achieve this —

Create a js folder and a few js files in it inside the nginx-poc folder —

|-- nginx-poc
| |-- index.html
| |-- js
| | |-- a.js
| | |-- b.js
| | |-- c.js
| | |-- b-latest.js

Just have one simple console.log(<filename>) inside each js file -

e.g for a.js

console.log('serving a.js');

for b-latest.js

console.log('serving b-latest.js');

and so on.

Let’s say the file b.js is no longer useful and we want to serve the b-latest.js in place of it. Of course, we can say that wherever our anchor link is pointing to b.js we’ll replace it with the b-latest.js, but it has 2 issues -

It is time-consuming and is error-prone.
The old URL will give the 404 and that's something we should thrive to reduce. Ideally, there shouldn’t be any 404 redirects, it should be kept as low as possible.

One simple solution would be to do it from nginx internal redirect —

events {
  worker_connections 1024;
}

http {
  server {
    listen       8080;
    server_name  localhost;

    root   /Users/Download/nginx-poc;

    location /js {
      rewrite /js/b.js /js/b-latest.js break;
    }

    location / {
      # root   /Users/Download/nginx-poc;
      index  index.html index.htm;
    }
  }
}

Let me go through each change to make it clearer —

Commented root in location / — This is moved to the server context. Adding the root to the server context makes it available for all the location contexts within it.
Added location context to handle the /js request — This request will handle all the request coming from /js, /js/* i.e request for /js/b.js will fall in this location. We are rewriting the request URL internally from /js/b.js to /js/b-latest.js and then we are adding a break which means no more parsing of any other rewrite!

Note:—

The server context is a child of the HTTP context. There could be multiple server contexts, unlike event and HTTP context which are allow allowed once.
The location context is a child of the server context. Similar to server context, multiple location contexts are allowed. They are the ones where actual handling of the incoming request is done.

How to add custom logs?

Logs are really important, they are needed to test our logic. In case any issue comes in production code, we can easily debug by seeing the nginx logs. Let me show you how can we set it up locally so that we can test and view the complete logic along with logs in localhost.

By default, nginx has 2 types of logs — access log and error log

Access log —

This logs the visitor's activity e.g requested URL, IP addresses, host, referrer, etc. If a request is served successfully it will log in access.log file.

access_log <location of log file> log_format;

In log_format, we can add what data we want to log but just a note, it is an optional thing.

One important point to remember is log_format must be placed under the HTTP context otherwise it will throw an error.

e.g.

Syntax - 

log_format <log_format_name> string;

log_format custom '$remote_addr - $remote_user [$time_local] '
'"$request" "$uri" $status $body_bytes_sent ''"$http_referer" "$http_user_agent" "$gzip_ratio"';

Error log —

This logs each glitch and Syslog i.e if a request was not served by any means it will be recorded in the error.log file.

Syntax -

error_log <location of error.log file> <error-severity-level>

error_log /usr/local/etc/nginx/logs/error.log notice;

Configuration file after adding the logs —

events {
  worker_connections 1024;
}

http {
  log_format custom '$remote_addr - $remote_user [$time_local] '
      '"$request" "$uri" $status $body_bytes_sent '
      '"$http_referer" "$http_user_agent" "$gzip_ratio"';

  server {

     listen       80;

     server_name  localhost;

     root   /Users/Downloads/nginx-poc;

     access_log /usr/local/etc/nginx/logs/acess.log custom;
     error_log /usr/local/etc/nginx/logs/error.log notice;
     rewrite_log on;

     location /js {
       rewrite /js/b.js /js/b-latest.js break;
     }

     location / {
       index  index.html index.htm;
     }
   }
}

The rewrite_log should be ON to record the internal redirect. Also, notice severity level means it is just a notice which can be simply ignored i.e nothing serious.

How to handle query params?

It may arise a case when we want to internally redirect the request based on query parameters. Let’s see how can we implement the below 3 cases in the nginx.conf file —

events {
  worker_connections 1024;
}

http {
  log_format custom '$remote_addr - $remote_user [$time_local] '
      '"$request" "$uri" $status $body_bytes_sent '
      '"$http_referer" "$http_user_agent" "$gzip_ratio"';

  server {

     listen       80;

     server_name  localhost;

     root   /Users/Downloads/nginx-poc;

     access_log /usr/local/etc/nginx/logs/acess.log custom;
     error_log /usr/local/etc/nginx/logs/error.log notice;
     rewrite_log on;

     location /js {
       if ($query_string ~* "latest=true") {
         rewrite /js/b.js /js/b-latest.js break;
       }

       if ($query_string ~* "latest=false") {
         rewrite /js/b.js /js/c.js  break;
       }

       rewrite /js/b.js /js/a.js break;
     }

     location / {
       index  index.html index.htm;
     }
   }
}

Case 1 —

request is for b.js → serve b-latest.js iff query params have latest=true

Case 2 —

request is for b.js → serve c.js iff query params have latest=false

Case 3 —

request is for b.js → serve a.js default

Conclusion

Nginx is not just it, and can’t be covered in just one article. But, I hope this will let you get started to know more. With the local setup, It becomes really handy when you want to test your nginx logic locally before deploying it to your staging or production.

I really hope you like the article, if yes, please follow me and if possible buy me a coffee. This article is originally published on my website, keep visiting that also for regular updates.

Thank You! Stay tuned for more articles.

Switch statements in javascript – How to refactor?

Ajay Kumar Verma — Sun, 30 Jan 2022 20:18:17 +0000

The Switch statements are perfectly nice and majorly used in the other traditional language like C, C++, and Java.

Why Switch statement?

The switch statement executes different actions based on the different conditions. Of course, we can solve the above with an if-else ladder but that will make the program too much clumsy. Also, the if-else ladder is advisable only if you have a max of 3 conditions to check.

Javascript has the switch statement but if you’re interested in python then just as a side information python doesn’t have the switch statement but it achieves the same with the dictionary mapping.

Since the dictionary mapping is similar to object creation in javascript, taking the inspiration from python, we can replace the switch statement with multiple objects which is not a bad idea. This will keep the code simple and maintainable in long run.

Let’s see the most occurred examples which we must have faced in our coding career -

Example 1

Write a code that returns the todays’ day in string e.g Sunday

using the switch statement

let day = new Date().getDay(); 
switch (day) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}
console.log(day); // for 30/01/2022 it will return Sunday

Output verification from console.log

without switch i.e Refactored code

const day = new Date().getDay();
const dayMapper = {
    0: "Sunday",
    1: "Monday",
    2: "Tuesday",
    3: "Wednesday",
    4: "Thursday",
    5: "Friday",
    6: "Saturday"
};
if (dayMapper.hasOwnProperty(day)) {
  console.log(dayMapper[day]); // Sunday
} else {
  console.log("Something went wrong");
}

Output verification from console.log

This is the most basic example, lets's see one more common but complex example

UseCase: Suppose we have to send a GA event for a page e.g for the Home page we will be sending the event label as Page name + its current layout name.

The catch is the page name is coming from the data attribute in DOM.

Let me explain it further with an example -

we need to return the (Page name_Layout name) following for the page name found in the data attribute

homePage -> Home_index
productPage -> Product_pdp
blogPage -> Blog_blog

Example 2

Assume HTML which has the page name stored in data attribute is written as -

HTML for homepage:
<div id="my-div" data-page-name="homepage"></div>

using the switch statement

let pageName = document.querySelector('#my-div').dataset.pageName;
let page;
let layout;
let ans;
switch (pageName) {
  case "homepage":
    page = "Home";
    layout = "index";
    break;
  case "productpage":
    page = "Product";
    layout = "pdp";
    break;
  case "blogpage":
    page = "Blog";
    layout = "blog";
    break;
}
ans = page + '_' + layout;
console.log(ans);

Output verification from console.log

without switch i.e Refactored code

let pageName = document.querySelector('#my-div').dataset.pageName;
let dataPageMapper = {
  homepage: 'Home',
  productpage: 'Product',
  blogpage: 'Blog' 
};
let pageLayoutMapper = {
  home: 'index',
  product: 'pdp',
  blog: 'blog' 
};
let page = dataPageMapper.hasOwnProperty(pageName) && dataPageMapper[pageName];
let layout = pageLayoutMapper[page.toLowerCase()];
let ans = page + '_' + layout;
console.log(ans);

Output verification from console.log

Conclusion

Above one is the cleaner way to do it. If in the future, we have more pages available we just need to make the entries in the mapper objects, that's it.

But with a switch statement, it will be a long ladder of statements and if you forgot to add the break statement then you will fall into the famous switch pitfalls.

Let me know your thoughts like how you handle the switch thing in your code.

If you like my article, you can buy me a coffee

Please also check my other articles on my website https://weekendtutorial.com

Edit

In Example 1 -

Since array is also an object so we could optimise the code further -

const dayNum = new Date().getDay();
const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
];
console.log(days[dayNum]); // Sunday

In Example 2 -

We could have club the object like this -

let pageName = document.querySelector('#my-div').dataset.pageName;
let dataPageMapper = {
  homepage: {
     page: 'Home',
     layout: 'index'
  },
  productpage: {
     page: 'Product',
     layout: 'pdp'
  },
  blogpage: {
     page: 'Blog',
     layout: 'blog'
  } 
};

let pageObj = dataPageMapper.hasOwnProperty(pageName) && dataPageMapper[pageName];

let ans = pageObj.page + '_' + pageObject.layout;
console.log(ans);

Above is also fine, but actual example was taken considering the possibility of when the clubbing the object is least feasible.

Of course, if the object are coming from different files or place, we can still create another by clubbing them but that will introduce another problem viz. code duplicacy which should be avoided.

Build a Quote Generator using Javascript

Ajay Kumar Verma — Fri, 28 Jan 2022 16:48:42 +0000

As part of our weekend tutorial, we will build a Quote generator using Javascript this time.

Before we implement it, let’s have a glimpse of the final version of what we will make –

This Quote Generator application has the following feature –

A button when clicked generate the Quote
A Twitter button when clicked put the quote to Twitter

Project Directory Structure

|-- quote-generator
| |-- css
| | |-- style.css
| |-- js
| | |-- main.js
| |-- index.html

After you’ve created the above directories in your local machine, please follow along.

Quote Generator Implementation

Let’s implement the index.html code first.

index.html

At the head of the above HTML file, we have included the quote-specific CSS and font awesome icon CSS (this is for the quote and Twitter icon).

And in the body of the HTML, a quote-container div is added which will hold the quoted content, quote author, Twitter button, and New Quote button.

On click of the New Quote button, the next quote will be generated through AJAX request, and its code is written in the main.js file which has been added at the bottom of the body in the HTML file.

style.css

We are using the Montserrat google font which is added at the top of the CSS file. Quote Container div in the body is centered using the flex.

Rest other CSS codes are self-explanatory.

main.js

The above code is written in vanilla javascript. Let me explain each function in detail –

tweetQuote

This function is responsible for tweeting the quote on Twitter. It calls the tweeter intent API with quoted text and quote-author as a query param.

fetchQuote

This is an async function that is responsible for fetching the quotes and returning the promise for the quotes.

Click listener is bound over the Twitter button and New Quote button which calls the above functions respectively.

Challenges

To show the next quote on click of the New Quote button, we need to have the quotes list beforehand otherwise UX will be really bad.

Now once the API response is received i.e quotes are available, you will feel like storing it to avoid hitting the API again and again on click of the button.

Storing the response is not necessary, yes, you heard it right!

To solve the above without making a request on each button click, we can cache the promise.

A promise is stateful, and as soon as it’s fulfilled, its value cannot be changed. You can use .then() multiple times to get its contents, and you’ll get the same result every time.

So, with quotesPromise.then we will be getting the quotes list each time and there we pick a random quote that is shown on the quote container.

That is all in this tutorial. If you like the article please share it with your friends and community.

Learning Data structure? read my other article — How to implement the stack and reverse it in javascript?

Check out more such articles and tutorials on https://weekendtutorial.com/

Reverse Stack using Javascript

Ajay Kumar Verma — Sun, 09 Jan 2022 11:50:43 +0000

In this article, I would like to discuss about the stack data structure.

1. What is Stack?

Stack is a linear data structure which works on a principle of Last in First Out (popularly known as LIFO).

If you know about the recursion where program has to go deep (in downwards) and build the solution upward, stack is the obvious choice for it.

Other problems where Stack suited the most -

Checking if parenthesis or balanced or not
Reversing array using stack
expression computation

2. How to create Stack in Javascript?

Stack have following primitive operation -

push(val)
pop()
peek()
is_empty()

Lets define the object prototype of Stack -

function Stack() {
  this.arr = [];
  this.top = 0;
}

arr - an array which holds the stack item
top - a pointer which points to the top of stack

push(val)

push function take val and insert it to the top of stack

Stack.prototype.push = function (val) {
  this.arr[this.top] = val;
  this.top = this.top + 1;
}

pop()

pop remove the top element of the stack, also returned it

Stack.prototype.pop = function () {
  if (this.is_empty()) {
    throw new Error("Underflow, stack is empty");
  }

  var topEl = this.arr[this.top - 1];

  this.top = this.top - 1;
  this.arr.pop();

  return topEl;
}

peek()

peek function doesn't delete the data from the stack, instead it just return the top of the stack

Stack.prototype.peek = function () {
  if (this.is_empty()) {
    throw new Error("Underflow, stack is empty");
  }

  return this.arr[this.top - 1]; 

}

is_empty()

is_empty function returns true if the stack is empty else false

Stack.prototype.is_empty = function () {
  return this.top === 0;
}

Lets put all the code together -

function Stack() {
  this.arr = [];
  this.top = 0;
}

Stack.prototype.push = function (val) {
  this.arr[this.top] = val;
  this.top = this.top + 1;
}

Stack.prototype.pop = function () {
  if (this.is_empty()) {
    throw new Error("Underflow, stack is empty");
  }

  var topEl = this.arr[this.top - 1];

  this.top = this.top - 1;
  this.arr.pop();

  return topEl;
}

Stack.prototype.is_empty = function () {
  return this.top === 0;
}

3. How to reverse stack?

Approach 1 - Modify original Stack

Pop element from stack one by one and store in new string, this new string will be the reverse of original string.

Let's create a reverse function which reverse the stack and return the reverse string.

Stack.prototype.reverse = function () {
  if (this.is_empty()) {
    throw new Error("Underflow, stack is empty");
  }

  var revStr = '';

  while(!this.is_empty()) {
    revStr += this.pop();
  }

  return revStr;
}

Approach 2 - Keep original Stack as it is

Since, with the above implementation, we have the reference of the stack arr which have the stack data. Now with top pointer we can loop over arr and process the stack and store the reverse string and return.

Stack.prototype.reverseAlternate = function () {
  if (this.is_empty()) {
    throw new Error("Underflow, stack is empty");
  }

  var revStr = '';

  for (var i = this.top - 1; i >= 0; i--) {
    revStr += this.arr[i];
  }

  return revStr;
}

Combining all code together with example -

function Stack() {
  this.arr = [];
  this.top = 0;
}

Stack.prototype.push = function (val) {
  this.arr[this.top] = val;
  this.top = this.top + 1;
}

Stack.prototype.pop = function () {
  if (this.is_empty()) {
    throw new Error("Underflow, stack is empty");
  }

  var topEl = this.arr[this.top - 1];

  this.top = this.top - 1;
  this.arr.pop();

  return topEl;
}

Stack.prototype.is_empty = function () {
  return this.top === 0;
}

Stack.prototype.reverse = function () {
  if (this.is_empty()) {
    throw new Error("Underflow, stack is empty");
  }

  var revStr = '';

  for (var i = this.top - 1; i >= 0; i--) {
    revStr += this.arr[i];
  }

  return revStr;
}

Stack.prototype.reverseV1 = function () {
  if (this.is_empty()) {
    throw new Error("Underflow, stack is empty");
  }

  var revStr = '';

  while(!this.is_empty()) {
    revStr += this.pop();
  }

  return revStr;
}

var stack = new Stack();

stack.push('a');
stack.push('b');
stack.push('c');

console.log(stack.reverse()); // cba
console.log(stack.reverseV1()); // cba

TC - O(n) to process stack
SC - O(n) for storing the reverse string

Github Link