DEV Community: Prashant Yadav

Reactivity in JavaScript frameworks

Prashant Yadav — Sun, 23 Apr 2023 17:09:16 +0000

What is Reactivity?.

The process in which the view of the application is automatically updated when the state changes are known as Reactivity.

Let us see two different examples to understand Reactivity.

In vanilla JavaScript, we will do something like this to update the view whenever the state changes.

const root = document.getElementById('root');
root.innerHTML = `
  <button id="increment-btn">Increment</button>
  <span id="count-tracker">0</span>
  <button id="decrement-btn">Decrement</button>
`;

const incrementBtn = root.querySelector('#increment-btn');
const decrementBtn = root.querySelector('#decrement-btn');

const span = root.querySelector('#count-tracker');
let count = 0;

decrementBtn.addEventListener('click', () => {
  count--;
  span.innerText = count;
});

incrementBtn.addEventListener('click', () => {
  count++;
  span.innerText = count;
});

You see how after every state update count-- and count++, we are manually updating the view span.innerText = count.

But on the other hand in this React example,

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <button onClick={() => setCount(count => count - 1)}>Decrement</button>
      <span>{count}</span>
      <button onClick={() => setCount(count => count + 1)}>Incremenet</button>
    </>
  );
}

The framework/library explicitly handles the view change under the hood giving us the freedom to focus more on the business logic and state management and build and ship things faster.

Not only React but all the major JavaScript frontend frameworks abstract Reactivity, because this is the part where many frameworks do the performance optimization, for example using virtual DOM with Reconciliation (using an intelligent diffing algorithm to check what has changed in the view and updating only that elements).

The most challenging thing for Reactivity is deciding WHEN to update the view and WHAT to update.

When to update the View?

There is no particular answer to when to update the view and each framework has a different implementation of Reactivity according to how the framework is developed, but the one thing that is common is that the update happens in batches.

Frequent updates are very expensive and they will outthrow the complete purpose of creating the framework, otherwise same could have been done in the vanilla JavaScript.

One way is how React does this is that it debounces the updates and batches multiple updates together and this are done when the state updates, like in the component lifecycle event ShouldComponentUpdate.

In the below example,

function Count() {
  const [count, setCount] = useState([]);
  const [totalCount, setTotalCount] = useState(0);

  const onAddCount = count => {
    setCount(counts => [...counts, count]);
    setTotalCount(totalCounts => totalCounts + 1);
  };
}

There are two state updates happening one after another, if the view is also updated synchronously then we will see there is a glitch (views will be changing one after the other) and the changes won’t reflect properly. (For this example, though it won’t be visible to the naked eye when you are doing the animation it will be visible.) That is why batch updates are important.

What to update in the View?

Now that we know WHEN to update the view, let us see how to decide WHAT to update.

To decide WHAT to update, we will have to track what has been changed, for primitive values, it is simple to track changes, but for Objects, it is hard, as Objects can be mutated after defining and we cannot freeze them as this beats all the purpose.

Objects have to be extensible but still, there should be a way to track the mutation.

For example,

const person = {
    firstName: 'Prashant'
}

// getting property
Object.defineProperty(person, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(person, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(person.firstName); // Prashant

// changing the property value
person.changeName = 'Prashant2';

console.log(person.firstName); // Prashant2

person.blog = 'Learnersbucket';

console.log(person.blog); // Learnersbucket

Here if you see, I have defined an object with a single property firstName and I was able to get and set its value and it can be tracked, but when I added a new property blog, I was not aware of it.

To solve this we can use Proxies. Using the Proxy object, we can build a proxy for another object that can intercept and alter its core activities.

In simple terms, proxies will work as observers through which we can monitor what has changed in the object.

const person = {
    firstName: 'Prashant'
}

const handler = {
  set(target, prop, value) {
    console.log(`${prop} is changed from ${target[prop]} to ${value}`);
    target[prop] = value;
  },
};

const proxyPerson = new Proxy(person, handler);

proxyPerson.firstName = "Prashant 2"; 
// "firstName is changed from Prashant to Prashant 2"

proxyPerson.blog = "Learnersbucket";
// "blog is changed from undefined to Learnersbucket"

Is this that simple?, No! This is one way of handling mutation, not every framework does that, each one keeps on experimenting and uses many performant techniques, but this is one of tracking the mutation.

Once the mutation is tracked, it is easier to decide what has changed and update only that part.

I hope you now have a decent idea about Reactivity in front-end frameworks.

I am author of the Ebook JavaScript Interview Guide(860+ copies sold), if you are preparing for JavaScript Interview, do checkout the book.

Also, You can follow me on Twitter for tips and tricks to solve the coding interviews and more solved examples of Algorithms.

⚡️ Use ChatGPT on any website 🔥

Prashant Yadav — Mon, 17 Apr 2023 11:36:52 +0000

A few days back I created Butler-AI that allows you to use the ChatGPT on any website by simply typing the command “butler: whatever you want to do;”. It is a Chrome extension and works like a charm on many different websites.

You can see how it works in the following image.

After receiving an overwhelming response to it, I decided to create a simple tutorial around this on how it works and how you can create a similar extension of your own.

So let’s get started.

Setup the chrome extension

Chrome currently suggests using the Manifest V3 to define any extension and we are going to use the same. manifest.json is the config file that defines any Chrome extension.

Define a manifest.json in your directory and inside that add the following things.

{

    "name": "Butler AI - Powered by ChatGPT",
    "description": "Use the power of ChatGPT at your fingertips, The butler will serve its master.",
    "author": "Prashant Yadav",
    "version": "0.0.1",
    "manifest_version": 3,
    "permissions": ["storage", "activeTab"],
    "host_permissions": [""],
    "action": {
        "default_popup": "popup.html"
    },
    "content_scripts": [
        {
            "matches": [""],
            "runAt": "document_end",
            "js": ["script.js"],
            "all_frames": true
        }
    ]
}

Many things are self-explanatory, let’s do a walkthrough of the important properties.

permissions: This defines all things this Chrome extension will have access to, we want access to the activeTab to observe what is being written in the command and respond to that and storage to access the localStorage and store some secrets like ChatGPT API key.
action: default_popup: The default HTML page that opens when you click on the ICON of the extension.
content_scripts: This defines which javascript file to load when a new tab opens and when to run this. Basically, we will open the script.js on the document_end (when page load is complete) and for all the URLs all_urls in all the frames Iframes as well. Inside this script.js our all logic will be present.

popup.html

Written a simple message just to make sure popup.html is loading properly.

<!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>Butler AI</title>
  </head>
  <body>
    <h1>Butler AI Powered By ChatGPT</h1>
  </body>
</html>

script.js

Printing a message to check if the script is being properly injected or not.

console.log("ButlerAI");

Load the Chrome extension

Now that our boilerplate is ready, let’s load the extension and see if it working fine or not.

Remember that we will have to load this on developer mode on the local machine.

Open the Chrome browser.
Go to settings > extensions.
Enable the Developer mode on right handside top corner.
Click on Load unpacked button on the left handside top corner.
Navigate and load your directory.

Once you have loaded the extension, open a new tab and navigate to StackEdit and in the console, the message ButlerAI should be printed.

Observe the text being written on any webpage

For this tutorial, I am going to run this extension on the StackEdit which is a popular markdown editor. Now that the extension is loaded, inside the script.js we will have to observe what the user is typing and find if anything in the context butler: whatever is the command; is written or not.

To do this, we will listen to the keypress event on the whole window (activeTab) and when the user stops typing, we will parse the HTML and look for any text that starts with butler and ends with ;.

Observe what the user is typing on the active tab

This we will do on the debounced event because we want to search only when a user stops typing, thus debouncing is a good thing to do.

// helper function to debounce function calls
function debounce(func, delay) {
    let inDebounce;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => func.apply(context, args), delay);
    };
}

// debounced function call
const debouncedScrapText = debounce(scrapText, 1000);

// observe what the user is typing
window.addEventListener("keypress", debouncedScrapText);

Here the scrapText function will be debounced after 1000 milliseconds that is if the user stopped typing for 1 second then only the function scrapText will be invoked.

Finding text that starts with butler

We will have to first collect all the text from the page and then check which text starts with butler: and ends with ;. If any such text is found then we will store the HTML node that contains this text so that we will populate it back with the response of the command and also extract the command.

To narrow down the search, rather than parsing the whole page, we will only parse the HTML element that accepts text. For example where the user can type or provide input.

On the StackEdit the area where the user can write has the attribute contenteditable="true" thus we can get this element and get its text and parse them.

// regex to check the text is in the form "butler: command;"
const getTextParsed = (text) => {
    const parsed = /butler:(.*?)\;/gi.exec(text);
    return parsed ? parsed[1] : "";
};

// helper function to get the nodes, extract their text 
const getTextContentFromDOMElements = (nodes, textarea = false) => {
  if (!nodes || nodes.length === 0) {
    return null;
  }

  for (let node of nodes) {
    const value = textarea ? node.value : node.textContent;
    if (node && value) {
      const text = getTextParsed(value);
      if (text) return [node, text];
      else return null;
    }
  }
};

// function to find the text on active tab
const scrapText = () => {
  const ele = document.querySelectorAll('[contenteditable="true"]');
  const parsedValue = getTextContentFromDOMElements(ele);
  if (parsedValue) {
    const [node, text] = parsedValue;
    makeChatGPTCall(text, node);
}

Here we are getting all the HTML elements, extracting their text, and checking if they are matching the pattern we are expecting, once they match, we get that node (HTML element) and the command.

Different websites have different ways of accepting input, thus you will see that I am checking if the node is of type textarea or not and getting its value accordingly.

Once we have them we are passing them forward to make the ChatGPT API call.

Get the command response with ChatGPT API

Create this function that will accept the command and the node and populate the node with the response from the ChatGPT API for this command.

We are going to use the completions API of ChatGPT with the text-davinci-003 model. You can use any of the APIs and Models as per your preference, but remember you have limited tokens in the free tier so make a note of it while testing to not exhaust the limit. Explore your choice through this ChatGPT playground.

You will have to pass your API key in the Authorization headers to make it work.

const makeChatGPTCall = async (text, node) => {
  try {
    const myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Authorization", `Bearer ${apikey}`);

    // set request payload
    const raw = JSON.stringify({
      model: "text-davinci-003",
      prompt: text,
      max_tokens: 2048,
      temperature: 0,
      top_p: 1,
      n: 1,
      stream: false,
      logprobs: null,
    });

    // set request options
    const requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: raw,
      redirect: "follow",
    };

    // make the api call
    let response = await fetch("https://api.openai.com/v1/completions", requestOptions);
    response = await response.json();
    const { choices } = response;

    // remove the spaces from the reponse text
    const text =  choices[0].text.replace(/^\s+|\s+$/g, "");

    // populate the node with the response
    node.textContent = text;
  } catch (e) {
    console.error("Error while calling openai api", e);
  }
};

That’s it, reload the extension and see the magic, it should work like a charm on StackEdit.

The most challenging part of this extension is reading the values from different websites as a user writes and then populating back them with the response. For security purposes, websites do many internal things and block the updation of value by just changing the content through javascript.

I made this work on many websites. You can get the source code of Butler-AI for $10, but I leave it up to you, to try and make it work on as many websites as possible.

You can also watch the tutorial on my youtube channel.

Also, follow me on Twitter for tips and tricks to solve the coding interviews and more solved examples of Algorithms. I write 2 - 3 post weekly on my blog learnersbucket.com.

React interview question - Detect overlapping circles

Prashant Yadav — Fri, 09 Dec 2022 09:54:28 +0000

I have written an Ebook that has 100 JavaScript, 20 React, & 2 Frontend system design questions. Get a free preview or grab your copy for $10 or ₹599.

I have been collecting frontend interview questions since the last 4 years and have been writing about it on my blog learnersbucket.com

Lately I have came across this interesting question that has been asked in an Uber interview and I tried to solve it.

Question

Draw circles on the screen on the click and whenever two circles overlap change the color of the second circle.

When a user clicks anywhere on the DOM, create a circle around it of a radius of 100px with red background.
If two or more circles overlap, change the background of the later circle.

Approach

Let us understand the logic of creating the circle first.

As we have to create the circle with a radius of 100px (200px diameter), rather than generating the circle on the click, we will store the coordinates of the position where the circle should be generated when the user clicks and then create circles out of these co-ordinates.

As all the circles will be in absolute position so that they can be freely placed on the screen, we will calculate the top, bottom, left, and right positions that will help in placement as well as detecting if two circles are colliding.

Get the clientX and clientY coordinates when the user clicks and align the circle around with a simple calculation so that it is placed in the center. Also before updating the state check if the current circle is overlapping with the existing circles then update the background color of the current.

// helper function to gather configuration when user clicks
const draw = (e) => {
  // get the co-ordinates where user has clicked
  const { clientX, clientY } = e;

  // decide the position where circle will be created and placed
  // as the circle is of 100 radius (200 diameter), we are subtracting the values
  // so that circle is placed in the center
  // set the initial background color to red
  setElementsCoordinates((prevState) => {
    const current = {
      top: clientY - 100,
      left: clientX - 100,
      right: clientX - 100 + 200,
      bottom: clientY - 100 + 200,
      background: "red",
    };

    // before making the new entry
    // check with the exisitng circles
    for (let i = 0; i < prevState.length; i++) {
      // if the current circle is colliding with any existing
      // update the background color of the current
      if (elementsOverlap(current, prevState[i])) {
        current.background = getRandomColor();
        break;
      }
    }

    return [...prevState, current];
  });
};

Assign the event listener and draw the circle on the click.

// assign the click event
  useEffect(() => {
    document.addEventListener("click", draw);
    return () => {
      document.removeEventListener("click", draw);
    };
  }, []);

Helper function to detect collision and generate random colors.

// helper function to generate a random color
const getRandomColor = () => {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

// helper function to detect if two elements are overlapping
const elementsOverlap = (rect1, rect2) => {
  const collide = !(
    rect1.top > rect2.bottom ||
    rect1.right < rect2.left ||
    rect1.bottom < rect2.top ||
    rect1.left > rect2.right
  );

  return collide;
};

Generate the circles from the coordinates which we have stored after the user has clicked. As the detection is done before making entry into the state, the circles are generated with different colors if they will be colliding.

// circle element
const Circle = ({ top, left, background }) => {
  return (
    <div
      style={{
        position: "absolute",
        width: "200px",
        height: "200px",
        borderRadius: "50%",
        opacity: "0.5",
        background,
        top,
        left,
      }}
    ></div>
  );
};

return (
  <div>
    {/* render each circle */}
    {elementsCoordinates.map((e) => (
      <Circle {...e} key={e.top + e.left + e.right} />
    ))}
  </div>
);

Putting everything together.

import { useEffect, useState } from "react";

// helper function to generate a random color
const getRandomColor = () => {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

// helper function to detect if two elements are overlapping
const elementsOverlap = (rect1, rect2) => {
  const collide = !(
    rect1.top > rect2.bottom ||
    rect1.right < rect2.left ||
    rect1.bottom < rect2.top ||
    rect1.left > rect2.right
  );

  return collide;
};

const Example = () => {
  // store the configuration of each circle
  const [elementsCoordinates, setElementsCoordinates] = useState([]);

  // helper function to gather configuration when user clicks
  const draw = (e) => {
    // get the co-ordinates where user has clicked
    const { clientX, clientY } = e;

    // decide the position where circle will be created and placed
    // as the circle is of 100 radius (200 diameter), we are subtracting the values
    // so that circle is placed in the center
    // set the initial background color to red
    setElementsCoordinates((prevState) => {
      const current = {
        top: clientY - 100,
        left: clientX - 100,
        right: clientX - 100 + 200,
        bottom: clientY - 100 + 200,
        background: "red",
      };

      // before making the new entry
      // check with the exisitng circles
      for (let i = 0; i < prevState.length; i++) {
        // if the current circle is colliding with any existing
        // update the background color of the current
        if (elementsOverlap(current, prevState[i])) {
          current.background = getRandomColor();
          break;
        }
      }

      return [...prevState, current];
    });
  };

  // assign the click event
  useEffect(() => {
    document.addEventListener("click", draw);
    return () => {
      document.removeEventListener("click", draw);
    };
  }, []);

  // circle element
  const Circle = ({ top, left, background }) => {
    return (
      <div
        style={{
          position: "absolute",
          width: "200px",
          height: "200px",
          borderRadius: "50%",
          opacity: "0.5",
          background,
          top,
          left,
        }}
      ></div>
    );
  };

  return (
    <div>
      {/* render each circle */}
      {elementsCoordinates.map((e) => (
        <Circle {...e} key={e.top + e.left + e.right} />
      ))}
    </div>
  );
};

export default Example;

Output

JavaScript SDE Cheat Sheet

Prashant Yadav — Mon, 09 May 2022 07:21:40 +0000

I am currently running #250DaysOfJSQuestions on twitter where I share one JavaScript interview questions daily, follow me on twitter @learnersbucket for web dev and interview related content.

In 2019 January, during the lockdown, I had started solving problems in JavaScript and writing articles on it on my blog, over the time I have solved 300+ problems. This cheat sheet contains list of problem that can be asked to a JavaScript dev.

This is a curated list of solved problems in JavaScript categorized on the type & nature of the problem which you can refer to and use as a cheat sheet for interview preparation.

It contains Data Structures & Algorithms, functions, async, closure, & hoisting-related problems.

DataStructures

Algorithms

It contains only the important ones, you can checkout the whole list here.

Sorting

Searching

JavaScript specific problems.

I am currently working on this list, these are few random questions, you can find the full list here.

JavaScript projects.

More questions will be added to it as and when I write them.

How to merge objects in javascript

Prashant Yadav — Mon, 02 May 2022 10:50:45 +0000

This is a series of #250DaysOfJSQuestions that I had started on twitter where I share one JavaScript interview question daily, follow me on twitter @learnersbucket for web dev and interview related content.

Question 1. Learn how to merge two or more objects in javascript.

Almost everything in javascript is object, but still it does not have any good methods to merge two or more different objects.

After ES6 there are new methods added which can be used to merge objects in javascript.

There are two different types of merge that can be performed on the objects.

1). Shallow merge
2). Deep merge

Shallow Merge objects

In shallow merge only the properties owned by the object will be merged, it will not merge the extended properties or methods.

Using `...` spread operator

... spread operators copies all the properties of the objects into another object.

let obj1 = {
  name: 'prashant',
  age: 23,
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript'
}

let merge = {...obj1, ...obj2};

console.log(merge);

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  qualification: "BSC CS"
}
*/

Using Object.assign() method

Object.assign(target, source1, soure2, ...) method copies all the enumerable own property of source object to target object and returns the target object.

let obj1 = {
  name: 'prashant',
  age: 23,
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript'
}

let merge = Object.assign({}, obj1, obj2);

console.log(merge);

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  qualification: "BSC CS"
}
*/

We have used an empty object {} as a target and passed the sources objects which should be merged in target.

Using custom function to merge objects

We can also create custom function to merge two or more objects.

let merge = (...arguments) => {

  // Create a new object
  let target = {};

  // Merge the object into the target object
  let merger = (obj) => {
     for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
    // Push each value from 'obj' into 'target'
     target[prop] = obj[prop];
    }
     }
  };

  // Loop through each object and conduct a merge
  for (let i = 0; i < arguments.length; i++) {
    merger(arguments[i]);
  }

  return target;
}

let obj1 = {
  name: 'prashant',
  age: 23,
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript'
}

let merged = merge(obj1, obj2);;

console.log(merged);

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  qualification: "BSC CS"
}
*/

Deep Merge Objects

To deep merge an object we have to copy the own properties and extended properties as well, if it exits. The best way to do so is to create a custom function.

let merge = (...arguments) => {

  // Variables
  let target = {};

  // Merge the object into the target object
  let merger = (obj) => {
      for (let prop in obj) {
     if (obj.hasOwnProperty(prop)) {
         if (Object.prototype.toString.call(obj[prop]) === '[object Object]') {
        // If we're doing a deep merge and the property is an object
        target[prop] = merge(target[prop], obj[prop]);
         } else {
        // Otherwise, do a regular merge
        target[prop] = obj[prop];
         }
     }
      }
  };

 //Loop through each object and conduct a merge
 for (let i = 0; i < arguments.length; i++) {
     merger(arguments[i]);
 }

 return target;
};

let obj1 = {
  name: 'prashant',
  age: 23,
  nature: {
    "helping": true,
    "shy": false
  }
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript',
  nature: {
    "angry": false,
    "shy": true
  }
}

console.log(merge(obj1, obj2));

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  nature: Object {
    angry: false,
    helping: true,
    shy: true
  },
  qualification: "BSC CS"
}
*/

We can combine both the function for shallow copy and deep copy together to create a single function which will perform merge based on the arguments passed.

If we will pass true as first argument then it will perform deep merge else it will perform shallow merge.

let merge = (...arguments) => {

   // Variables
   let target = {};
   let deep = false;
   let i = 0;

   // Check if a deep merge
   if (typeof (arguments[0]) === 'boolean') {
      deep = arguments[0];
      i++;
   }

   // Merge the object into the target object
   let merger = (obj) => {
    for (let prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
                // If we're doing a deep merge and the property is an object
                target[prop] = merge(target[prop], obj[prop]);
            } else {
                // Otherwise, do a regular merge
                target[prop] = obj[prop];
            }
        }
    }
   };

   //Loop through each object and conduct a merge
   for (; i < arguments.length; i++) {
    merger(arguments[i]);
   }

   return target;
};

let obj1 = {
  name: 'prashant',
  age: 23,
  nature: {
    "helping": true,
    "shy": false
  }
}

let obj2 = {
  qualification: 'BSC CS',
  loves: 'Javascript',
  nature: {
    "angry": false,
    "shy": true
  }
}

//Shallow merge
console.log(merge(obj1, obj2));

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  nature: Object {
    angry: false,
    shy: true
  },
  qualification: "BSC CS"
}
*/

//Deep merge
console.log(merge(true, obj1, obj2));

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  nature: Object {
    angry: false,
    helping: true,
    shy: true
  },
  qualification: "BSC CS"
}
*/

There are other libraries available which you can use to merge or two objects like

Jquery's $.extend() method

$.extend(deep, copyTo, copyFrom) can be used to make a complete deep copy of any array or object in javascript.

Lodash merge() method

which will merge objects and arrays by performing deep merge recursively.

Frontend System Design - Capture product visible on viewport when user stops scrolling.

Prashant Yadav — Sun, 26 Sep 2021 11:01:28 +0000

Visit learnersbucket.com If you are preparing for your JavaScript interview. You will find DSA, System Design and JavaScript Questions.

This system design question was asked to one of my linkedin connection in NoBroker’s interview. When he approached me regarding the solution of this. It immediately caught my attention and I solved this problem that day itself.

As it is an interesting problem I thought of writing an article around it, so here it is.

The question was quoted as “If user scroll and see any property and stays there for more than 5 sec then call API and store that property”.

Apart from online real-estate platform, this can be also applied on others platforms as well, such as social media like Facebook where if users reads a post for few seconds, store and use it to provide recommendations of new posts. Same can be used on E-commerce platform or other platforms where products are listed.

Let us see how should we approach such problems and then solve it with an example. I have created a dummy HTML template which contains different blocks, which we can use for testing.

<!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>
    <style>
        .wrapper{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .blocks{
            flex: 1 300px;
            height: 300px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 5px;
            background: red;
            font-size: 40px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="blocks">1</div>
        <div class="blocks">2</div>
        <div class="blocks">3</div>
        <div class="blocks">4</div>
        <div class="blocks">5</div>
        <div class="blocks">6</div>
        <div class="blocks">7</div>
        <div class="blocks">8</div>
        <div class="blocks">9</div>
        <div class="blocks">10</div>
        <div class="blocks">11</div>
        <div class="blocks">12</div>
        <div class="blocks">13</div>
        <div class="blocks">14</div>
        <div class="blocks">15</div>
        <div class="blocks">16</div>
        <div class="blocks">17</div>
        <div class="blocks">18</div>
        <div class="blocks">19</div>
        <div class="blocks">20</div>
        <div class="blocks">21</div>
        <div class="blocks">22</div>
        <div class="blocks">23</div>
        <div class="blocks">24</div>
        <div class="blocks">25</div>
        <div class="blocks">26</div>
        <div class="blocks">27</div>
    </div>
</body>
</html>

Now when this web page will be scrolled, we will log the blocks which are within the viewport when ever user stops for more than 1 seconds.

A vital thing to keep in mind is to read the problem statement multiple times and then break the problem into sub-problems so that we can tackle each of them independently.

By reading the problem statement, I figured two sub-problems and decided to break it into two parts.

A way to check if the element is within the viewport.
A way to make the API call only after user stops scrolling and waits for sometime (5 secs in this case), if user scrolls before that then we should revoke the call.

Check if an element is within the viewport.

“With in the viewport” means then element which are within the visible part of the screens not within the visible area.

For this we will create a function which will return true or false, depending upon whether element is within the viewport of not.

To determine this we will use the Element.getBoundingClientRect() method which returns the elements position within the viewport. It returns an object with an element’s height and width, as well as it’s distance from the top, bottom, left, and right of the viewport.

// Get the H1
const h1 = document.querySelector('h1');

// Get it's position in the viewport
const bounding = h1.getBoundingClientRect();

// Log
console.log(bounding);
// {
//  height: 118,
//  width: 591.359375,
//  top: 137,
//  bottom: 255,
//  left: 40.3125,
//  right: 631.671875
// }

Then next thing after getting the elements placement details is to determine if it is within the viewport.

If an element is in the viewport then its position from top and left will always be greater than or equal to 0. It’s distance from the right will be less than or equal to the total width of the viewport, and it’s distance from the bottom will be less than or equal to the height of the viewport.

There are couple of ways to get the width and height of the viewport.

For width, Some browsers support window.innerWidth while some support document.documentElement.clientWidth and some support both. We try using one of them and other as fallback to get the width using OR operator.

(window.innerWidth || document.documentElement.clientWidth)

Similarly to get the height, some browsers support window.innerHeight while some support document.documentElement.clientHeight and some support both. Thus we can use the same fallback approach here as well.

(window.innerHeight || document.documentElement.clientHeight)

Combining this together, We can check if the element is in the viewport like this.

const isInViewport = function (elem) {
     const bounding = elem.getBoundingClientRect();
     return (
       bounding.top >= 0 &&
       bounding.left >= 0 &&
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
       bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

Now we can use this helper method on each element to determine if they are within the viewport or not.

First sub-problem is solved, now lets try to solve the second one.

Call a function when user stops scrolling or any other interactions for sometime.

For this we can use the debouncing technique.

Debouncing is a method or a way to execute a function when it is made sure that no further repeated event will be triggered in a given frame of time.

In simple words if the scroll event is not triggered again within the specified time (assume 5 seconds) then only invoke the function. This is implemented using the setTimeout timer function.

I have already explained two different variations of debouncing.

Based on the use, we can chose any one of them. For this problem we will go with the normal one.

const debounce = (func, delay) => {
  let inDebounce;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(inDebounce);
    inDebounce = setTimeout(() => func.apply(context, args), delay);
  };
};

This takes care of our second sub-problem. Now lets put this all together and create the final solution.

Putting everything together

Lets put each piece in the place to get the final picture.

Select all the elements / products / articles / blocks of the DOM which you want to store in the API call, as I have assigned blocks class to each of them, I will query select them all and store in a variable.

// Get all the products
const blocks = document.querySelectorAll('.blocks');

Next thing is we will need a function which will check which elements are within the viewport and then take appropriate course of action thereafter.

// Helper function to check if element is in viewport
const isInViewport = function (elem) {
    const bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

// Function which will make the API call
const getBlocks = function () {
      blocks.forEach((block) => {
        if (isInViewport(block)) {
          //make API call here
          console.log(block.innerText);
        }
  });

  // add a space
  console.log(" ");
 }

Call this function after debouncing the scroll event for which we will have to assign an event listener.

// Debounce a function call
const debounce = (func, delay) => {
    let inDebounce;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => func.apply(context, args), delay);
    };
};

// Assign the event listener
window.addEventListener('scroll', debounce(getBlocks, 1000), false);

And that's it, we are done.

We can see the working of this in this image.

<!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>
    <style>
        .wrapper{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .blocks{
            flex: 1 300px;
            height: 300px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 5px;
            background: red;
            font-size: 40px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="blocks">1</div>
        <div class="blocks">2</div>
        <div class="blocks">3</div>
        <div class="blocks">4</div>
        <div class="blocks">5</div>
        <div class="blocks">6</div>
        <div class="blocks">7</div>
        <div class="blocks">8</div>
        <div class="blocks">9</div>
        <div class="blocks">10</div>
        <div class="blocks">11</div>
        <div class="blocks">12</div>
        <div class="blocks">13</div>
        <div class="blocks">14</div>
        <div class="blocks">15</div>
        <div class="blocks">16</div>
        <div class="blocks">17</div>
        <div class="blocks">18</div>
        <div class="blocks">19</div>
        <div class="blocks">20</div>
        <div class="blocks">21</div>
        <div class="blocks">22</div>
        <div class="blocks">23</div>
        <div class="blocks">24</div>
        <div class="blocks">25</div>
        <div class="blocks">26</div>
        <div class="blocks">27</div>
    </div>

    <script>
        // Helper function to check if element is in viewport
        const isInViewport = function (elem) {
            const bounding = elem.getBoundingClientRect();
            return (
                bounding.top >= 0 &&
                bounding.left >= 0 &&
                bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        };

        // Debounce a function call
        const debounce = (func, delay) => {
            let inDebounce;
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(inDebounce);
                inDebounce = setTimeout(() => func.apply(context, args), delay);
            };
        };

        // Function which will make the API call
        const getBlocks = function () {
            blocks.forEach((block) => {
                if (isInViewport(block)) {
                    console.log(block.innerText);
                }
            });

            console.log(" ");
        }

        // Get all the products
        const blocks = document.querySelectorAll('.blocks');

        // Assign the event listener
        window.addEventListener('scroll', debounce(getBlocks, 1000), false);
    </script>
</body>
</html>

The frontend Landscape – Different Architectures

Prashant Yadav — Sun, 19 Sep 2021 18:14:23 +0000

Visit learnersbucket.com If you are preparing for your JavaScript interview. You will find DSA, System Design and JavaScript Questions.

Web development (Frontend) has come a long way from its inception. There was a time when static websites were designed using tables for layouts and some styles around it which were only built for desktops.

But today web apps can be created with complex user interfaces and for cross devices. SAAS which are built as web applications allow us to stream movies and music on demand, order pizza, handle bank processes, even book a cab, and do more and more things which makes our life easier.

Over time to create apps which provide so much capabilities, security, flexibility, and also are manageable and scalable, organizations experimented with multiple architectures.

As a developer, architect, or tech lead, when we start a fresh project we need to decide which architecture we will be following. There are an array of options to choose from, but not all of them are fit for every job. We need to understand the challenges we will face along the way to make the right decision for our projects.

Let us explore the current architectures which are available to us for the frontend development.

Server Side Application or Multi Page Application.

Server side rendered websites were a thing back when they had not become the web apps. All they did was display text and images and very minimal interactivity.

These websites were built with server-side rendering which means the HTML was generated on the server along with all the data and it is returned to the browser and then the browser used to render it.

When a page refreshes or the user navigates to a different page, the servers used to send new HTML. This will be repeated every time if your browser does not have the cached version of that page.

As each time when you make the request to the server, the server regenerates the whole HTML even if we are only expecting for minor changes, this hampers the speed of the website.

Though the speed of the website varies on many factors like your internet speed, location of the server, number of users who are trying to access the site, etc.

For small websites these issues are negligible but for modern websites which have more than thousands of lines of code as well as complex logics will take more time for processing. Now imagine when you browse through the website and you have to keep waiting for each web page which you visit.

But the good thing about server-side rendering is that it is great for SEO. Your content is present before you get it, so search engines are able to index it and crawl it just fine.

Single Page Application (Client – Side Rendering)

In the current time, SPAs are the most used implementations. In single page applications client-side rendering is used. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app.

When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the HTML5 History API. New data required for the new page, usually in JSON format, is retrieved by the browser via AJAX requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is like how native mobile apps work.

Using SPAs has many advantages like the whole application code is downloaded just once on initial load and then the entire application logic is available throughout the user session.

As the SPAs only deal with the client side logic, it can be developed independently and to get the data it communicates with APIs by exchanging data with the persistent layer (backend or server side).

The client side and server side are decoupled, which means that we can independently develop new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. The client can also be developed using a new tech stack.

As we don’t have to repeatedly fetch the same resources again and again, we have to make fewer HTTP requests, also the payloads size is smaller which is faster to process.

Because both client and server side are decoupled which means they are smaller in size and faster to download, interpret and process.

All these features enhance the user experience and give an expression of what we usually have when we interact with a native application for mobile devices or desktop.

SPAs also allow us to decide how we are going to split the application logic between server and client. We can have either “thick-client” and “fat-server” or “fat-client” and “thick-server” depending upon which type of problem we are addressing.

Majorly “thick-client” and “fat-server” is used as by keeping all the logic on the server we can use that across multiple clients, that way if we update the logic on one platform it will be available on each client.

The bad thing about this is as the majority of the resources are fetched when the web app loads for the first time it can hamper the initial load time of the application majorly on devices with less processing power and slower networks.

There’s an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there. All the client side routing is managed internally using HTML5 history API.

As the pages in the SPAs are dynamically generated on the run-time, another disadvantage of using SPAs relates to search engine optimization (SEO). When a crawler tries to index your website, it won’t have an easy job indexing all the contents served by an SPA unless we prepare alternative ways for fetching it.

Another disadvantage of using SPAs is on the organizational side. When the SPA is a large application being developed and maintained by coalted teams working on the same codebase, could end up with a mix of approaches and decisions that could confuse team members.

Isomorphic applications (Hybrid approach)

With the above two approaches we learned that server-side rendering can be used to solve the SEO related issues and client-side rendering can be used for performance optimization. What if we could use both of them together and use the best of both to create faster web applications which are also very well SEO optimized.

Isomorphic or universal applications are web applications where the code between server and client is shared and can run in both contexts.

These web applications share code between server and client.When you visit the web app for the first time the application is rendered on the server side using server side rendering techniques with Nodejs and then it is sent to the browser and displayed to the user, here after whenever user navigates the web apps the pages are rendered on client-side with JavaScript using SPA techniques.The content is updated by consuming APIs and fetching data from them.

The complexity of this approach is majorly among the state management. One way to solve this is to create and save the state on the server side and then provide this state to the browser. The browser uses this state to bootstrap the SPA, without this the user must wait for the server side page to render and wait more for the complete re-render process in the browser.

To make the most out of this approach, we can render the page with bare minimum things which is required to create the skeleton of the page such as inline CSS and few HTML content and minimum JavaScript so that browser can load it extremely fast and there after update the content as per requirement on the client side using JavaScript.

With these we can also solve the routing issue, you can either render the pages complete on the server-side or use the hybrid approach. Use the server-side rendering for initial view and then load an SPA, where the server will do the macro routing that serves different SPAs, each with its own routing system to navigate between views.

Isomorphic applications can suffer from the scalability problems if the web app is visited by a large number of users. Having a right caching in place could solve this problem as pages are rendered on server-side.

Micro Frontend Architecture

Micro-Frontend is a fairly new and emerging architecture which is inspired by the micro-services architecture of backend development.

When multiple teams are involved in the development of a single application, it becomes difficult to manage the code base and applications itself as multiple people will be touching the same code base.

This approach tends to solve this problem by splitting the application in different parts depending on the requirement and each of them would be developed independently which would be shipped as a single application. The main idea behind this is to break down a monolithic codebase into smaller parts, allowing to spread out the work among various teams, whether collocated or distributed.

There are different approaches for architecturing a micro-frontends application. Certain architectural decisions have to be made upfront because they will cave the road for future decisions. The decision majorly covers four key areas.

Defining different micro-frontends.
Composing micro-frontends.
Routing micro-frontends.
Communicating between micro-frontends.

You can decide multiple micro-frontends for the same view or having one micro-frontend per view and based on this we can split the application.

The application can be split horizontally or vertically.

In the horizontal split we split the views of the pages into multiple micro-frontends and different teams will be responsible for the development of these views. This approach provides great flexibility as certain micro-frontends could be reused across different views, but it also needs more discipline and governance to make sure we don’t end up with large amounts of micro-frontends.

In the vertical split we split the pages or module completely. For example different teams will be responsible for the development of different modules like authentication, streaming services, search, etc.

JAMSTack

Nowadays there’s another new frontend architecture which is enjoying its success called JAMStack (JavaScript, APIs, Markup).

Being a modern architecture JAMSTack helps to create fast and secure sites and dynamic apis with JavaScript/APIs and pre-rendered markup, served without web servers.

In fact the final output is a static artifact composed of HTML, CSS and JavaScript, basically the holy trinity of frontend development which can be served directly using CDN as it doesn’t require any server side technology to work. The most simplest way of serving a JAMStack application is using Github pages for hosting the final result.

The primary advantages of these architectures are better performances, cheaper infrastructure and maintenance considering they can be served directly by a CDN, great scalability because static files are served, higher security due to decrease of attack surface and easy integration with headless CMS.

JAMStack is a great companion for many websites we have to create especially considering the frictionless developer experience.

Industry focused roadmap to be JavaScript developer – 2021

Prashant Yadav — Sun, 29 Aug 2021 18:30:51 +0000

Visit learnersbucket.com If you are preparing for your JavaScript interview. You will find DSA, System Design and JavaScript Questions.

An Industry Focused Roadmap to become Frontend Developer.

This is guide is my recommendation of libraries/frameworks to learn each aspect of front-end development, based on their popularity across the industry.

This roadmap is targeted at the freshers who are trying to understand front end. If you are already familiar with front end development and want to explore another perspective, then you are welcome to explore it.

Note: If you find an issue, please comment it down, I will try to fix it. Also if you like it, share it with others.

Pre-requisites

Good understanding of core programming concepts.
Already familiar with the working of web such as with web protocols and conventions like HTTP and RESTful APIs.
Comfortable with basic command line actions.

HTML
CSS: Cascading Style Sheets
JavaScript
Single Page Application (SPA)
React (A library to create Single Page Applications)
State Management – Flux/Redux
CSS Modules (CSS in JS)
Maintainability
- Linting JavaScript – ESLint
- Linting CSS – stylelint
- Formatting Code – Prettier
- Testing – Jest + Enzyme
Deployment and Hosting
- Version Control System – GIT
- Package Management – NPM
- Build System – webpack
- Deployment – CI/CD
- Hosting and CDN
Advanced Topics
- Static Types – Typescript
- Mobile App Development – React Native
- Desktop App Development – Electron JS
- Server Side Rendering – Next.js
- Progressive Web Apps (PWA): The future of web development

HTML

HTML is a (Hypertext Markup Language) is not a programming language. It is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be.

HTML consists of a series of elements, which you use to enclose, wrap, or markup different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. For example, consider the following line of text:

<p>Hello World!.</p>

Below figure represents the anatomy of HTML.

HTML is very important from the SEO perspective thus HTML5 introduced many new tags which really helps in SEO optimization.

Apart from that, accessibility is also an important thing to learn in HTML to make sure web-apps are accessible to everyone through different devices.

Things to learn in HTML.

SEMANTIC HTML (HTML5)
Accessibility
DOM

Estimated Time to learn:- 10 to 15 days (3 – 4 hrs daily).

Study Links.

CSS: Cascading Style Sheets

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

It is extremely important to have a good understanding of CSS, it may seem simple but is quite complex to work with. Writing cross device / browser style can be challenging at times.

Things to study under css.

CSS Specificity
CSS Pre-processors
CSS resetting / normalization
CSS Architecture(BEM)
Floats
Flexbox & Grids
SVG
Media Queries
Display Properties
Position properties
Animations
Psuedo Classes

Estimated Time to learn:- 10 – 15 days (3 – 4 hrs daily).

Study Links.

Advanced CSS

CSS is now advanced and provides using normal programming concepts with it like defining variable, functions, using OOPs concepts, etc. There are many extensions of it that help in using it more efficiently.

SASS

Sass stands for Syntactically Awesome Stylesheet is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

Estimated Time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

LESS

Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS.

Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side and client-side.

Study Links

JavaScript

JavaScript or ECMAScript is the language of the web, it is incredibly versatile programming language using which we can build web servers, native mobile apps, web apps, and desktop apps.

Being loosely typed it is easy to learn but hard to master. Practice is the key to mastering it.

In recent times, JavaScript has seen major improvements with lots of new features being added to the language making it more powerful.

ECMAScript 2015 (previously called ECMAScript 6) was released, which had major feature updates, after that every year new features are being added to the language, new version of ECMAScript is referred as ESNext.

Here is a great article incase you want to learn history of JavaScript.

As browsers must implement the new features once they are published to make them useable, which takes time, tools such as Babel enable developers to write these new features in their apps as Babel transpiles them down to browser compatible code.

With the development of Nodejs, JavaScript was able to move out of the web to everywhere, right now you can use JavaScript as a server side languages as well as almost on every platform, Web, Mobile, Desktop, IOT, etc.

Estimated time to learn:- 30 – 45 days (3 – 4 hrs daily).

Study Links (Basic).

Topics to cover to get better at the language.

this
IIFE
Closure
Null vs undefined
Loop vs map
call, apply & bind
hoisting
Scope
attributes vs properties
Ternary operators
Promises vs callbacks
Objects, Object freezing
mutable vs immutable
Symbol
Currying
Debouncing
Throttling
async vs defer
Event Bubbling & Capturing
Prototype & Prototypal Inheritance
Thinking Recursively
Local Storage and Session Storage
CORS
sum(a)(b)(c)…(n)
Web Storage APIs
Event Loop
Web Sockets
Single Page Applications
Server Side rendering
Optimization
Critical rendering path
Lazy loading data

Advanced Study Links

Single Page Application (SPA)

Traditionally website were built with server-side rendering. Browser used to receive HTML from the server and then render it. When page refreshes or user navigates to different page, the servers used to send new HTML.

However in single page applications (SPA) client-side rendering is used. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the HTML5 History API. New data required for the new page, usually in JSON format, is retrieved by the browser via AJAX requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is like how native mobile apps work.

Advantages

Web apps give more native feel and are more responsive as there is no flash between page navigations due to full-page refreshes.
As we don’t have to repeatedly fetch the same resources again and again, we have to make fewer HTTP request, also the payload size are smaller which are faster to process.
The server and client are decoupled which means that we can independently develop new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. The client can also be developed using new tech stack.

Disadvantages

As majority of the resources are fetched when the web app loads for first time it can hamper the initial load time of the application.
There’s an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
SEO issues:- SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. To overcome this, you can either server-side render your app or use services such as Prerender to “render your javascript in a browser, save the static HTML, and return that to the crawlers”.

There is still time when server-side applications are preferred where SEO is involved as well as when we are building small scale applications like blogs etc.

But a SPA application with client-server relation is preferred for large enterprise application where a clear client-server separation scales better for larger engineering teams, as the client and server code can be developed and released independently.

Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response for their action.

While jQuery can be still used for server-side applications to add user interactivity to each page. But it is not easy for jQuery for handle large scale applications. After all, jQuery is primarily a library for DOM manipulation and it’s not a framework.

For this task JavaScript frameworks have been created to provide higher-level abstractions over the DOM, allowing you to keep state in memory, out of the DOM. Using frameworks also brings the benefits of reusing recommended concepts and best practices for building apps.

It is lot easier to onboard a Junior who is not familiar with the code base, but has experience with a framework, will find it easier to understand the code because it is organized in a structure that he is familiar with. Also popular frameworks have great community support and tutorials as well as guide which makes them easy to start with.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

React (A library to create Single Page Applications)

There is no other JavaScript library other than React which has taken the front-end ecosystem by storm in modern time. React is a library built and open-sourced by the smart people at Facebook. In React, developers write components for their web interface and compose them together.

As frontend development is shifting towards a paradigm of component-based development, where each components are developed independently and then clubbed together to create a feature and eventually leads in creating a web app using these features. React encourages that you write your HTML and CSS in your JavaScript itself. This sounds like a crazy idea at first as it is opposite of the existing good practice to write HTML, JavaScript and CSS separately. But if you keep your HTML, CSS, and JavaScript scoped to the component level only, then it is easier to do the development with conflict also different components can be developed individually without any dependency on each other while designing.

Features of React.

Declarative:- You describe what you want to see in your view and not how to achieve it. Each component has its own state, you simply change the state within the component and the view will update itself according to the state. It is also easy to determine how the component will look like just by looking at the HTML in the render() method.
Functional:- Each component is a JavaScript pure function which has props (External data) and state (Internal data). Pure functions are easy to test, and the same goes for functional components.
Maintainable:- React forces composition rather inheritance for scalability and reusability, thus writing your view in a component-based fashion encourages reusability. As each component has their logic and view limited to themselves, it is easier to maintain them.
High Performance:- React use a concept of Virtual DOM and it re-renders everything when there is a change in state or props. Why is there a need for a virtual DOM? While modern JavaScript engines are fast, reading from and writing to the DOM is slow. React keeps a lightweight virtual representation of the DOM in memory. Re-rendering everything is a misleading term. In React it actually refers to re-rendering the in-memory representation of the DOM, not the actual DOM itself. When there’s a change in the underlying data of the component, a new virtual representation is created, and compared against the previous representation. The difference (minimal set of changes required) is then patched to the real browser DOM.
Ease of Learning:- React has very few API’s which remains constant and hardly changes, apart from that it is one of the largest community which providing an array of tools, open-sourced UI components, and a ton of great resources online to get you started on learning React.

Over the years, new view libraries that are even more performant than React have emerged. React may not be the fastest library out there, but in terms of the ecosystem, overall usage experience and benefits, it is still one of the greatest. Facebook is also channeling efforts into making React even faster with a rewrite of the underlying reconciliation algorithm. The concepts that React introduced has taught us how to write better code, more maintainable web apps and made us better engineers.

Estimated time to learn:- 30 – 45 days (3 – 4 hrs daily).

Study Links

Alternatives

State Management – Flux/Redux

React is a library, not a framework, and does not deal with the layers below the view.

As your app grows bigger, you may find that the app structure becomes a little messy. Components throughout the app may have to share and display common data but there is no elegant way to handle that in React. After all, React is just the view layer, it does not dictate how you structure the other layers of your app, such as the model and the controller, in traditional MVC paradigms. In an effort to solve this, Facebook invented Flux, an app architecture that complements React’s composable view components by utilizing a unidirectional data flow.

In summary, the Flux pattern has the following characteristics:

Unidirectional data flow:- Makes the app more predictable as updates can be tracked easily.
Separation of concerns:- Each part in the Flux architecture has clear responsibilities and are highly decoupled.
Works well with declarative programming:- The store can send updates to the view without specifying how to transition views between states.

As Flux is not a framework per se, developers have tried to come up with many implementations of the Flux pattern. Eventually, a clear winner emerged, which was Redux. Redux combines the ideas from Flux, Command pattern and Elm architecture and is the de facto state management library developers use with React these days. Its core concepts are:

App state is described by a single plain old JavaScript object (POJO).
Dispatch an action (also a POJO) to modify the state.
Reducer is a pure function that takes in current state and action to produce a new state.

The concepts sound simple, but they are really powerful as they enable apps to:

Have their state rendered on the server, booted up on the client.
Trace, log and backtrack changes in the whole app.
Implement undo/redo functionality easily.

The creator of Redux, Dan Abramov, has taken great care in writing up detailed documentation for Redux, along with creating comprehensive video tutorials for learning basic and advanced Redux. They are extremely helpful resources for learning Redux.

While Redux does not necessarily have to be used with React, it is highly recommended as they play very well with each other. React and Redux have a lot of ideas and traits in common.

Your app will likely have to deal with async calls like making remote API requests. redux-thunk and redux-saga were created to solve those problems. They may take some time to understand as they require understanding of functional programming and generators. Our advice is to deal with it only when you need it.

react-redux is an official React binding for Redux and is very simple to learn.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternative

MobX

CSS Modules

CSS adds interactivity to the HTML, it is used to define how HTML elements will look and adjust as to the screen, to the sibling, etc. We all understand that writing good CSS is hard, it takes years of experience to get better at it. The major problem we face is writing scalable and maintainable CSSS that also for different screens and devices. To make it easier to work with it, over time, experienced frontend developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using SMACSS, BEM, SUIT CSS, etc.

The bad thing about these methodologies are that they very fragile, they are artificially enforced by conventions and guidelines. They break the moment developers do not follow them.

As you might have realized by now, the front end ecosystem is saturated with tools, and unsurprisingly, tools have been invented to partially solve some of the problems with writing CSS at scale. “At scale” means that many developers are working on the same large project and touching the same stylesheets. There is no community-agreed approach on writing CSS in JS at the moment, and we are hoping that one day a winner would emerge, just like Redux did, among all the Flux implementations. For now, we are banking on CSS Modules. CSS modules is an improvement over existing CSS that aims to fix the problem of global namespace in CSS; it enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling. With CSS modules, large teams can write modular and reusable CSS without fear of conflict or overriding other parts of the app. However, at the end of the day, CSS modules are still being compiled into normal globally-namespaced CSS that browsers recognize, and it is still important to learn and understand how raw CSS works.

If you are a total beginner to CSS, Codecademy’s HTML & CSS course will be a good introduction to you. Next, read up on the Sass preprocessor, an extension of the CSS language which adds syntactic improvements and encourages style reusability. Study the CSS methodologies mentioned above, and lastly, CSS modules.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily). Try styling up your app using the SMACSS/BEM approach and/or CSS modules.

Study Links

Alternatives

Maintainability

Code is read more frequently than it is written. When you work in a large team and are involved with multiple teams across multiple projects. Then it is extremely important to highly value readability, maintainability and stability of the code and there are a few ways to achieve that: “Extensive testing”, “Consistent coding style” and “Typechecking”.

Also when you are in a team, sharing same practices becomes really important. If you are a beginner then read about JavaScript project guidelines.

Linting JavaScript – ESLint

A linter is a tool to statically analyze code and finds problems with them, potentially preventing bugs/runtime errors and at the same time, enforcing a coding style. Time is saved during pull request reviews when reviewers do not have to leave nitpicky comments on coding style. ESLint is a tool for linting JavaScript code that is highly extensible and customizable. Teams can write their own lint rules to enforce their custom styles. At Grab, we use Airbnb’s eslint-config-airbnb preset, that has already been configured with the common good coding style in the Airbnb JavaScript style guide.

For the most part, using ESLint is as simple as tweaking a configuration file in your project folder. There’s nothing much to learn about ESLint if you’re not writing new rules for it. Just be aware of the errors when they surface and Google it to find out the recommended style.

Estimated time to learn:- 2 – 3 days (3 – 4 hrs daily).

Study Links

Alternatives

Linting CSS – stylelint

As mentioned earlier, good CSS is notoriously hard to write. Usage of static analysis tools on CSS can help to maintain our CSS code quality and coding style. For linting CSS, we use stylelint. Like ESLint, stylelint is designed in a very modular fashion, allowing developers to turn rules on/off and write custom plugins for it. Besides CSS, stylelint is able to parse SCSS and has experimental support for Less, which lowers the barrier for most existing code bases to adopt it.

Once you have learnt ESLint, learning stylelint would be effortless considering their similarities. stylelint is currently being used by big companies like Facebook, Github and WordPress.

Estimated time to learn:- 2 – 3 days (3 – 4 hrs daily).

Study Links

Alternatives

Formatting Code – Prettier

Another tool for enforcing consistent coding style for JavaScript and CSS is Prettier.

In most cases, it is recommended to setup Prettier on top of ESLint and stylelint and integrate it into the workflow. This allows the code to be formatted into consistent style automatically via commit hooks, so that developers do not need to spend time formatting the coding style manually.

Note that Prettier only enforces coding style, but does not check for logic errors in the code. Hence it is not a replacement for linters.

Estimated time to learn:- 2 – 3 days (3 – 4 hrs daily). Add prettier extension to your code editor.

Study Links

Testing – Jest + Enzyme

All the above helps to preventing bugs/runtime errors, but once something has been built, it has to be tested to make sure it is meeting all the requirements and working as expected.

Jest is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One particular feature we like is “Snapshot Testing”. Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn’t have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!.

React comes with some testing utilities, but Enzyme by Airbnb makes it easier to generate, assert, manipulate and traverse your React components’ output with a jQuery-like API. It is recommended that Enzyme be used to test React components.

Jest and Enzyme makes writing front end tests fun and easy. When writing tests becomes enjoyable, developers write more tests. It also helps that React components and Redux actions/reducers are relatively easy to test because of clearly defined responsibilities and interfaces. For React components, we can test that given some props, the desired DOM is rendered, and that callbacks are fired upon certain simulated user interactions. For Redux reducers, we can test that given a prior state and an action, a resulting state is produced.

The documentation for Jest and Enzyme are pretty concise, and it should be sufficient to learn them by reading it.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternatives

AVA
Karma

Deployment and Hosting

Version Control System – GIT

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems).

From its definition you would have already realized why GIT is used, it helps us to track the files and folders. If there is any addition or modification to any part in the project, you can track that using git.

The changes are tracked on your local system with corresponding to the remote repository where the whole code base is maintained (A central system).

when we work in team, everyone works on different things, thus we there is a need of a central repository where the whole code base will be maintained. Once you code changes are done, you push that changes to the central repo and pull the others code as per your requirement.

GitHub is a provider of Internet hosting for software development and version control using Git. All the major cloud service provides provides there own central repository storage service.

It important that you are familiar with basic git commands to work in collaborative environment.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternatives

Package Management – NPM

A good developer does smart work rather than hard work, if there is something already build then it is wise to use that rather than building something of yourself.

Thus to download and manage all those we need a package manager. Npm (Node Package Manager) is a package manager for the JavaScript programming language maintained by npm, Inc.

Npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. The package manager and the registry are managed by npm, Inc.

All the packages that are download using npm are registered in package.json file and files and folder are stored inside the node_modules.

package-lock.json is another file which is update every time when you add a new package to your project. It is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

This file is intended to be committed into source repositories, and serves various purposes:

Describe a single representation of a dependency tree such that teammates, deployments, and continuous integration are guaranteed to install exactly the same dependencies. -Provide a facility for users to “time-travel” to previous states of node_modules without having to commit the directory itself. -Facilitate greater visibility of tree changes through readable source control diffs. -Optimize the installation process by allowing npm to skip repeated metadata resolutions for previously-installed packages.

Estimated time to learn:- 3 – 4 days (3 – 4 hrs daily).

Study Links

Alternative

Yarn: A new package manager for JavaScript

Build System – webpack

This part will be kept short as setting up webpack can be a tedious process and might be a turn-off to developers who are already overwhelmed by the barrage of new things they have to learn for front end development. In a nutshell, webpack is a module bundler that compiles a front end project and its dependencies into a final bundle to be served to users. Usually, projects will already have the webpack configuration set up and developers rarely have to change it. Having an understanding of webpack is still a good to have in the long run. It is due to webpack that features like hot reloading and CSS modules are made possible.

We have found the webpack walkthrough by SurviveJS to be the best resource on learning webpack. It is a good complement to the official documentation and we recommend following the walkthrough first and referring to the documentation later when the need for further customization arises.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternatives

Deployment – CI/CD

When you commit your code to the github and once your pull request is approved and merged in the codebase, before deploying it on any cloud service it has to again generate the build and run set of test to make sure things won’t break on the production.

For this we often use tool, which helps us in continuous integration and deployement. Jenkins is one of the most popular Continuous Integration and Continuous Delivery server provider.

It helps us to run:

Run linting for the project.
Run unit tests for the project.
If all the test cases pass then generate a production bundle with webpack into a build directory.

Once setup and configured it can be automatically/manually triggered to run the build pipeline and once the build is generated, it can be deployed using release pipeline.

Often there is a separate team (Devops) who handle it configuration and setting up the CI/CD environment, but if you want you can still learn it. Being familiar with basic things is always good.

Estimated time to learn:- 3 – 4 days (3 – 4 hrs daily).

Study Links

Jenkins

Alternatives

Hosting and CDN

Traditionally, web servers that receive a request for a webpage will render the contents on the server, and return a HTML page with dynamic content meant for the requester. This is known as server-side rendering. As mentioned earlier in the section on Single-page Apps, modern web applications do not involve server-side rendering, and it is sufficient to use a web server that serves static asset files. Nginx and Apache are possible options and not much configuration is required to get things up and runnning. The caveat is that the web server will have to be configured to route all requests to a single entry point and allow client-side routing to take over. The flow for front end routing goes like this:

Web server receives a HTTP request for a particular route, for example /user/john.
Regardless of which route the server receives, serve up index.html from the static assets directory.
The index.html should contain scripts that load up a JavaScript framework/library that handles client-side routing.
The client-side routing library reads the current route, and communicates to the MVC (or equivalent where relevant) framework about the current route.
The MVC JavaScript framework renders the desired view based on the route, possibly after fetching data from an API if required. Example, load up UsersController, fetch user data for the username john as JSON, combine the data with the view, and render it on the page.

A good practice for serving static content is to use caching and putting them on a CDN. We use Amazon Simple Storage Service (S3) for hosting our static website content and Amazon CloudFront as the CDN. We find that it is an affordable and reliable solution that meets our needs.

S3 provides the option to “Use this bucket to host a website”, which essentially directs the requests for all routes to the root of the bucket, which means we do not need our own web servers with special routing configurations.

An example of a web app that we host on S3 is Hub.

Other than hosting the website, we also use S3 to host the build files generated from each successful CI build.

In Visual Studio Code using an extension you can directly deploy static site on Azure and host it.

Estimated time to learn:- 3 – 4 days (3 – 4 hrs daily).

Study Links

Hosting a Static Website on Amazon S3

Alternatives

Advanced Topics

Static Types – Typescript

Static typing brings about many benefits when writing apps. They can catch common bugs and errors in your code early. Types also serve as a form of documentation for your code and improves the readability of your code. As a code base grows larger, we see the importance of types as they gives us greater confidence when we do refactoring. It is also easier to onboard new members of the team to the project when it is clear what kind of values each object holds and what each function expects.

Adding types to your code comes with the trade-off of increased verbosity and a learning curve of the syntax. But this learning cost is paid upfront and amortized over time. In complex projects where the maintainability of the code matters and the people working on it change over time, adding types to the code brings about more benefits than disadvantages.

The two biggest contenders in adding static types to JavaScript are Flow (by Facebook) and TypeScript (by Microsoft). As of date, there is no clear winner in the battle.

You can choose anyone of them but I personally prefer TypeScript. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

TypeScript may be used to develop JavaScript applications for both client-side and server-side execution (as with Node.js or Deno). There are multiple options available for transcompilation. Either the default TypeScript Checker can be used, or the Babel compiler can be invoked to convert TypeScript to JavaScript.

Estimated time to learn:- 7 – 10 days (3 – 4 hrs daily).

Study Links

Alternatives

Mobile App Development – React Native

It is now possible to create cross device mobile applications using just HTML, CSS, JavaScript. Thus it opened a large boundary for web developers to migrate to different platform and do the development using same technology.

React Native is a JavaScript framework for building native mobile apps. React Native brings React’s declarative UI framework to iOS and Android. With React Native, you use native UI controls and have full access to the native platform.

Following features are what makes React Native an idle choice.

Declarative: React makes it painless to create interactive UIs. Declarative views make your code more predictable and easier to debug.
Component-Based: Build encapsulated components that manage their state, then compose them to make complex UIs.
Developer Velocity: See local changes in seconds. Changes to JavaScript code can be live reloaded without rebuilding the native app.
Portability: Reuse code across iOS, Android, and other platforms.

Estimated time to learn:- 20 – 30 days (3 – 4 hrs daily).

Study Links

Alternatives

Desktop App Development – Electron JS

Not only mobile apps but using HTML, CSS, JavaScript you can now build desktop apps as well. The most popular framework for it right now is ElectronJs.

ElectronJs combines the Chromium rendering engine and the Node.js runtime allowing for the development of desktop GUI applications using web technologies.

Electron applications comprise multiple processes. There is the “main” process and several “renderer” processes. The main process runs the application logic, and can then launch multiple renderer processes, rendering the windows that appear on a user’s screen rendering HTML and CSS.

Both the main and renderer processes can run with Node.js integration if enabled.

Most of Electron’s APIs are written in C++ or Objective-C and then exposed directly to the application code through JavaScript bindings.

Estimated time to learn:- 20 – 30 days (3 – 4 hrs daily).

Study Links

Alternatives

Server Side Rendering – Next.js

It is still a viable option to do server side rendering while leveraging the decoupled development capability of server and client or the best of both, some part can be rendered on server side, while some can be updated as per requirement on client side. It really helps enhancing the applications performance.

Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites. React documentation mentions Next.js among “Recommended Toolchains” advising it to developers as a solution when “building a server-rendered website with Node.js”. Traditional React apps render all their content in the client-side browser, Next.js is used to extend this functionality to include applications rendered on the server side.

Estimated time to learn:- 10 – 20 days (3 – 4 hrs daily).

Study Links

Alternatives

Progressive Web Apps (PWA): The future of web development.

A progressive web application (PWA) is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

The three app pillars of a PWA:

Capable: Between modern APIs, WebAssembly, and new and upcoming APIs, web applications are more capable than ever, and those capabilities are only growing.
Reliable: A reliable Progressive Web App feels fast and dependable regardless of the network.
Installable: Installed Progressive Web Apps run in a standalone window instead of a browser tab. They’re launchable from on the user’s home screen, dock, taskbar, or shelf. It’s possible to search for them on a device and jump between them with the app switcher, making them feel like part of the device they’re installed on.

What makes a good Progressive Web App?

Starts fast, stays fast: Performance plays a significant role in the success of any online experience, because high performing sites engage and retain users better than poorly performing ones. Sites should focus on optimizing for user-centric performance metrics.
Works in any browser: Users can use any browser they choose to access your web app before it’s installed.
Responsive to any screen size: Users can use your PWA on any screen size and all of the content is available at any viewport size.
Provides a custom offline page: When users are offline, keeping them in your PWA provides a more seamless experience than dropping back to the default browser offline page.
Is installable: Users who install or add apps to their device tend to engage with those apps more.
Is fully accessible: All user interactions pass WCAG 2.0 accessibility requirements.
Can be discovered through search: Your PWA can be easily discovered through search.
Works with any input type: Your PWA is equally usable with a mouse, a keyboard, a stylus, or touch.
Provides context for permission requests: When asking permission to use powerful APIs, provide context and ask only when the API is needed.
Follows best practices for healthy code: Keeping your codebase healthy makes it easier to meet your goals and deliver new features.

Estimated time to learn:- 7 – 15 days (3 – 4 hrs daily).

Study Links

Web.dev

Miscellaneous articles

This article was based on Grab’s – Frontend Guide and I have just add few extra things to it.

Fullstack (Nodejs + Reactjs) interview experience at Nutanix

Prashant Yadav — Tue, 10 Aug 2021 05:50:40 +0000

Visit learnersbucket.com If you are preparing for your JavaScript interview. You will find DSA, System Design and JavaScript Questions.

I had applied for the MTS-3 Fullstack – SAAS (Nodejs + Reactjs) on Nutanix’s career section and got the shortlisting email on 21’st April 2021. It was for the Bangalore location.

After the email, the recruiter called me and we had brief introduction about myself, my experience, etc and what are they looking for in the candidate and about the Nutanix and role.

1st Round: Phone screen (SDE2 – Full Stack)

I was asked what I do on a daily basis, followed by some JavaScript questions and some Rest API questions.

It went well.

2nd Round: JavaScript Platform & DSA. (SDE3 – Full Stack)

Don’t remember about the interviewer.

In this round I was asked to implement programs based on Closure, Promise and Objects.

Deep Flatten an object.
Flat an array.
Debounce and its variations using promise.
Where do we need to use async code in Nodejs, why?. Etc.

This was a good round, and I learned lots of things. Went good.

3rd Round: System Design (Frontend + Backend) (Team lead – Full Stack)

The interviewer had around 9 years of experience and was leading the team which I was being hired for, we exchanged introductions and started the interview.

As I was being hired for the Payment & Pricing team.

This round was mainly focused towards creating dynamic form and handling the payment and pricing based on the features selected.

Security, CORs, XSS.

How to secure your API, Server side vs Client Side, which to use for security purposes?. What if the same has to be achieved on the alternate side & vice versa.

Lots of discussion of form handling and uncontrolled and controlled form components. Select box, etc.

I haven’t read about security still it went well.

4th round: System Design (Javascript) (Manager – Pricing & Payment Team)

The interviewer was quite nice, he first introduced himself and what they are looking for in a candidate who will join this team, what type of work will be there, etc.

I was asked to implement a Number increment counter in JS.

In this round, I came up with a solution using setTimeout and setInterval, even though it was not perfect he pushed me to the next round.

5th round: DSA (VP – Pricing & Payment Team)

The interviewer was from San Jose and he was a little strange.

He asked me to introduce myself and when I was done, after a pause he unmuted and asked that’s it?. Please elaborate a little. I thought he was doing something else simultaneously and not concentrating towards the interview.

Later he asked me to implement an algorithm to count all possible subarrays in an array with sum k. (Note:- They are not consecutive).

As I had to find all the possible sub arrays, I thought of using Dynamic Programming first.

But the interviewer asked me to implement an O(N ^ 2) algorithm.

Failed in this. He showed me the solution using the bitwise operator.

At the end he was constantly asking me from where I come?, where I am living. In Spite of repeatedly telling him that I live in Mumbai and having been born and brought up here. He was not ready to accept it. I was getting a feeling that he has some personal issue with name.

Verdict.

NOT SELECTED.

I guess because my 4th round went okay and 5th round went bad they dropped me. Interviewer asked me to apply in different verticals, but I lost my interest and so I left it.

Frontend Interview Experience at Amazon Germany

Prashant Yadav — Mon, 02 Aug 2021 07:08:39 +0000

Visit learnersbucket.com If you are preparing for your JavaScript interview. You will find DSA, System Design and JavaScript Questions.

After applying at Amazon India through different means and not hearing back from them, I one day randomly applied at Amazon Germany for frontend role directly in the career section and luckily my resume got shortlisted.

Note:- As I have signed an NDA, I cannot share the exact questions.

I received the email regarding the shortlist and was asked to fill availability for the phone screen.

1st round : Phone Interview.

It was scheduled on 14th June and I had a general discussion with the technical recruiter regarding what I do on a day to day basis followed by a behavioral question and after that he asked me if I was willing to relocate and what are my salary expectations, etc.

He said that your final interview will be scheduled only after your second round goes well.

2nd round: Phone screen with Manager.

The second round was on 2nd July and it was taken by the manager. He asked me to create a web component followed by lots of questions and changes and one CSS styling question. At the end there was a behavioral question.

After that he said will you relocate or work from India?. We are looking for a team member to join us here.

3rd & Final round

It was composed of 5 technical rounds to be done on a single day. The decided date was 28th of July.

I was very nervous before this as I knew I am not well prepared.

3.a:- OOPs (Backend engineer with 9+ years of experience) (same team).

We had a formal introduction followed by one behavioral question and then an oops question, In the end there were two more behavioral questions.

The implementation had to be scalable, otherwise it does not meets the criteria of the question.

This round did not go well because I haven’t prepared for OOPS.

My confidence took a toll.

3.b:- Frontend (Frontend engineer 5+ years of experience) (same team).

I was asked to create a component, followed by lots of questions on accessibility, styling, events, etc.

In the end 3 behavioral questions.

Finished this round in half an hour, It went superb. Boosted my confidence.

3.c:- Cultural fit (BI data engineer) (different team).

Taken by an external team member for unbiased opinion. Solely based on behavioral questions, 6 of them.

All were very different, Had to think about everything I have done in my past experiences and then answer it.

It went okay.

3.d:- Managerial (System design) (same team).

He said let’s start by answering your questions first and then move forward. After that he asked me to implement a frontend system.

Discussed the following points

Layout
Styling
Accessibility
Performance
Tracking user activity
Recommendations
Preferences

Followed by 3 behavioral questions.

This round went nice, the manager seemed to be happy.

3.e:- DSA (FullStack engineer) (Sister team).

Was asked to implement a two way algorithm based on trees. Tree to HTML and HTML to Tree parser with lots of constraints.

Which tree will you choose, why?. How to differentiate nodes and text, etc.

Followed by 3 behavioral questions.

This round did not go well, I had tough time understanding the question. After 1st implementation, the interviewer said there is some misunderstanding and explained the question again and asked me to re-implement the solution.

After second implementation, he asked me to implement the second parser (vice versa).

Verdict.

NOT SELECTED.

The recruiter called me next day and personally gave the feedback, he said there a lots of strong points and push but the team thinks that you need some improvements majorly on writing scalable and maintainable code.

The recruiter had already told me to go through leadership principles and STAR technique because you will be grilled a lot on that.

I was already hesitant that I won’t be able to make it. Still I did my best.

My strength

Frontend components.
System design.

My weakness

OOPs
DSA
Behavioral questions.

I have noted where I have to improve and will work on it.

Long way to go. Life long learning. Keep Hustling 🤞.

PS:- I have 5 more interview experiences which I will share in the coming weeks.

Dream11 – SDE2 – Frontend Interview Experience

Prashant Yadav — Tue, 06 Apr 2021 05:10:12 +0000

Visit learnersbucket.com If you are preparing for your Javascript interview. I have written solutions for more than 300+ solved algorithms and implementation of all important data structures in JS.

I had applied on Dream11 career section for SDE2 Frontend position in March 2021.

Round 1: Hacker rank test

3 questions to be solved in 90 minutes.

Convert binary linked list to decimal.
Coin change problem.
Last stone weight

Round 2: DSA

Largest contiguous subarray.
Common nodes in two binary search tree.

Round 3: Platform round (Javascript)

Implement a function onlyTwice which stores two instances a function invocation and returns first on odd calls and second on even calls.

It was based on singleton design pattern.

const addTwoNumbers = (a, b) => a + b
const myFancyAdd = onlyTwice(addTwoNumbers)

console.log(myFancyAdd(2, 3)) // 5
console.log(myFancyAdd(1, 2)) // 3
console.log(myFancyAdd(3, 4)) // 5
console.log(myFancyAdd(3, 7)) // 3

My answer

const onlyTwice = (fn) => {
  let isOdd = true;
  let first = null;
  let second = null;

  return function(...args) {

    if(isOdd){
      if(!first){
        first = fn(...args);
      }

      isOdd = false;
      return first;
    }else{
      if(!second){
        second = fn(...args);
      }

      isOdd = true;
      return second; 
    }
  }
}

Create throttle function.
Create a polyfill for promise which should handle following edge cases.

const prom = new MyPromise((resolve, reject)=>{
  setTimeout(() => {
    resolve("Done");
  }, 1000);
});


prom.then(function(data){
  console.log('1' + data) // Prints "1 Done" after 1 second
})

prom.then(function(data){
  console.log('2' + data) // Prints "2 Done" after 1 second
})

setTimeout(function(){
  prom.then(function(data){
    console.log('3' + data) // Prints "3 Done" after 2 seconds
  })
}, 2000)


const nwPromise = new Promise(()=>{
  xhr.send();

  xhr.onReadyStateChange = (data)=> {
    resolve(data)
  } 

  xhr.abort()
})

nwPromise.cancel()

My code

const MyPromise = function(fn){
  // Code here

  let result = null;
  let error = null;
  let thenCallBackFunction = [];
  let resolveState = 0;

  const resolve = (data) => {
    resolveState = 1;

    result = data;
    if(thenCallBackFunction.length > 0){
      for(let fn of thenCallBackFunction){
        fn(data);
      }

      thenCallBackFunction = [];
    }

    resolveState = 0;
  }

  const reject = (error) => {
    error = error;
  }

  this.then = (fn2) => {
    if(!result){
      thenCallBackFunction.push(fn2);
    }else{
      fn2(result);
    }
  }

  this.catch = (errorFn) => {
    errorFn(error);
  }

  this.cancel = (cancelFn) => {
    if(resolveState === 0){

    }
  }

  fn(resolve, reject);
}

I did not implemented the .cancel() as there was no time left.

Round 4: System design

Given the following API endpoints create a book reader.

/books (List of books with book IDs)
/book/:book_id/page_count (Returns page count for the requested book)
/book/:book_id/page/:page_number (Returns content for the requested page in RTE)

It will show the list of books
On click open the selected book
Scroll to the next page (no pagination)

Lots of cross question on

Handle latency
Debounce
Direct jump to random page
Caching pages
Pre-loading data
Buffer zone
Optimization.

I failed in the final in this round as the interviewer asked me that if I use debounce (2ms) to load the next page and consider that you are on a 2g network and there is delay of 10ms for response then how will you handle it. I got stuck here.

Also he asked me that suppose your RAM will be able to store only 20 pages at a time then how would you jump to 300th page from the 100th page, when will you make the api call to fetch the page, will you show blank page or not, your scroll should end at 300th page, etc, etc.

How I got my first job as a developer after failing for 300 times

Prashant Yadav — Wed, 03 Jun 2020 05:37:40 +0000

Hi, I am Prashant Yadav, Technical writer at learnersbucket.com

I had recently tweeted about what I had to go through for finding my first job as developer.

// Detect dark theme var iframe = document.getElementById('tweet-1265318896938221575-952'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1265318896938221575&theme=dark" }

After getting such a overwhelming response for my tweet, many people asked me to share my experience about how I got my first job after applying for more than 300 times.

It was one of the most difficult phase which I have went through and I can only say one thing that you should not give up yet.

Here is my journey of finding my first job.

Indian education system
My Background
Struggle to find a job

Indian education system

India is the second most populous country in the world with majority of young peoples which fall in the age group of 18 – 60.

The total of numbers of students who become job eligible every year are more than the populations of many countries.

According to a survey in the year 2016 – 17 there were 35705905 students passed out who were looking for a job.

Course	Number Of Students
Phd	141037
M.Phil	43267
Post Graduate	4007570
Under Graduate	28348197
PG Diploma	213051
Diploma	2612209
Certificate	166617
Integrated	173957

Students who study from top institutions such as IIT’s, NIT’s, BIT’s, IIM’s, IIIT’s, IIS, etc get some priority because it really difficult to get admission into these institutions and one has to crack hard entrance exams for it.

Those who made it to them are some of the brilliant minds on earth.

The students in India often classify themselves as they have studied from Tier1, Tier2, Tier3 colleges.

Tier1 > Tier2 > Tier3. This is how order of priority works mainly for top companies and well funded startups because everyone seek value for money and they want to hire best talent for their work.

Students who are from different streams from these colleges also go for IT jobs because they pay well. So some who has done BTech (4 year Engineering course) from Tier3 college face more difficulty in finding a job than their top levels.

My Background

I live in Mumbai(Bombay) suburbs and done my schooling here only. Me and my brother both were computer geeks from early age.

I was a very average student and had no future goal what so ever. After getting 50% in my 12th or high school, I was not getting admission in any college so using the in-house quota I took BSC(CS) course which is 3 year degree program in the same college.

I never passed any of my semesters in a single attempt and but I think I was lucky enough of not getting failed in any year, some how I used to clear the semesters in the next attempt with god graces 🙏🏻 by just getting the passing marks.

My brother (He is a BTech from Tier 3) recommended me that I should get certain certifications done because a BSC graduate has no value at all in India or I will have to pursue post graduation which is another 3 years of course which was not possible for me (Hard times).

So I did a C++ and Java certification from Aptech for 12000 rupees because the only interest I had was in computers. I became good at problem solving and used to understand things quickly but the course was not so good as it had to be.

It was the last year of the college in which I had to build a project in the final semester (There is no internship for a 3 years course).

Out of 60 peoples in my batch there were only few who did their project by themselves while others have bought the projects. I was one of the few who built the project by their own, PHP was very hot back in 2015 and because everyone was building their projects in JAVA, I decided to use PHP to bring a change and by watching youtube tutorials I have built-ed an online Pet Food Shop.

Struggle to find a job

t was June 2015 when my result came out and I got to know that I have failed in 2 subjects in written exam but for my project I got 90/100.

There is buzz in Indian education system that if you fail for few marks then during re-checking they pass you, so I applied for re-checking of the papers and was waiting for the new result.

Meanwhile because of the financial uncertainties in the family, I decided to look for a job.

Some of my college friends had enrolled in higher education while others had started working in call center, because they didn’t had any knowledge of programming, they just had a degree and getting a job in call centers were not so hard.

I didn’t wanted to join a call center because I knew if get into these then I will never be able to get out of it.

So I decided to try my luck in the IT industry. I took reference from my brothers resume and created a one for myself and then started applying for jobs.

As I had my certification done in JAVA so I decided to apply for JAVA related jobs.

I created my profile on the online job portals like Monster.com, Indeed, Shine.com, etc and after few days I started receiving emails regarding the walk in interviews at different places in Mumbai.

I went for my first walk-in interview and when I reached the place, I saw around 500 students has came for the same position, even after waiting for 10 hours straight I did not even got a chance for the first round of interview.

Next day I went for another walk-in and same happened then again and so on.

After going for around 70 – 75 walk-ins I gave up, I thought I am not going to get a job like this where for a single position so many peoples are applying.

After discussing things with my brother I got to know that as JAVA is the only programming that is thought to the students in engineering that is why so many of them are showing up for walk-ins for JAVA related jobs.

To bring a change, I updated my resume and started applying for PHP job because this was the only other language I knew.

This worked for me and for around next 20 walk-ins to which I went for, I was at least able to give few rounds of interviews but never heard back from them.

I was really getting depressed and frustrated at the same time, you know If I am doing one walk-in in a day then it was already around 100 days which was more than 3 months and I didn’t got a job.

The major problem here was how the companies hire in India, these walk-ins are only done by service based companies who provide service to the clients, products based companies hire limited peoples and they do it directly from campus.

As services based works for different clients, these clients want to know what they are paying for.

So these companies hire students with better degree to show that the best peoples are working on their projects. That is why a BTech grad was getting priority over a BSC(cs) grad because for the same amount of money, someone with better degree will be hired.

That was one of the reason I think that I was not getting any job offer because I had only 3 year degree. Maybe I was also not up to the mark for these companies, I cannot deny it either.

I realized it after sometime, but I was in a no mood to give up. I thought that there would be at least one company who will willing to hire someone on their knowledge rather than degree.

In between I got a call from a consultancy agency that they will help me to get a job by connecting directly to companies which are hiring but I have to pay certain amount of money to them after getting shortlisted.

I did try this but later realized that it is a scam because only after the first interview they selected me and asked me to pay money as a security deposit.

After failing in all these things again I decided to change my strategy and instead of going for walk-ins I decided to apply directly for the companies on their career section.

I used to search for following and related terms on google.

And open all the website then apply on their career section. I even used to go on next pages on google and apply even on those websites too.

I have also searched and applied for companies in specific regions in the suburbs of the Mumbai and applied to them, I don’t exactly remember how many job applications I have given but to my bad luck I didn’t got a response from any them.

It was already November mid and I had lost all my hope, but then one day I got a message on my Monster.com’s profile that a startup is interested in me.

Without wasting anytime I got into the discussion with them and next day I went for the interview. It was a startup mainly into web and e-commerce development with WordPress and Magento. As I had created a Online Pet Food Shop for my final year project, the founder asked me different question on it and later told me that we could have someone like you.

I was very happy, he told me to join his company on 1st of December but I will have to keep my 12th and final year mark sheet as a security deposit to him for 1 year after which he will give them back to me.

It was basically a bond for 1 year to make sure I don’t leave the company quickly.

I came home and shared the news with Dad and my brother. My brother said some companies do ask for these in way or other and freshers have to at least work for sometime in a organization because they invest in their training and they want to recover that value.

So we agreed on it and then Dad asked what will be the salary?, Oh Damn!. I said I forgot to ask about it, I was so desperate to get the job that I did not even think about it.

I called the founder next day and asked him about the salary and he said that it will be 72000 rupees/per year which was 6000 rupees / per month.

My dad did not agree to it, he said no way you should work on such an amount, the basic income in India is 18000 rupees per month. You will be ruining your career.

I took some time to think and later on decided to join the company. I explained my dad that see I don’t have a BTech degree and no one is willing to hire me, even if he is paying 6000 it is better than nothing. Once I start working and gather some experience it will be really helpful for me.

He understood me and said it is up to you. Take your chance.

I was the third employee in that company and it was self-bootstrapped by the owner so he not able to afford to the people with higher salary. I took this opportunity and worked for 6-7 days a week for the next 1.5 years.

These 1.5 years was the best of my life, being a small team with small budget we use to try to build everything ourselves and use open source as much as possible. It taught me many lessons which I could have never learned anywhere else.

From client handling to building and deploying website on cloud and learning new things in short span to woo the clients to get their projects and what not.

The projects I did here shined in my resume which let me get better jobs in my career. From following tutorials to build a project I went on creating a website using wordpress as headless CMS and Reactjs as frontend (Solo).

I was good at handling stuffs and in these 1.5 years got two promotions and while leaving that organization I was already making 18000 / per month.

It has been four years since I have been working and my currently salary in 15x more than my initial salary. I now work with some of the brightest mind in India who have came from these top institutes or as we say Tier1 institutes of country.

When I look back, I feel that it was my best decision to join that organization. I joined it to learn things rather than earning money. I had only one thought in my mind that if I worked hard, I would learn more here than in the next 3 years in my post graduation and it did pay off.

Many people think that it is necessary to have better degree to get a good job and I am not denying it. But not everyone can have the same thing in life, still you can make your own way. It will not be same initially but with time things will get normal.

I found my way after failing so many times and from this I can only suggest one thing to you, Don’t give up yet the best is waiting for you.

I will end this with this quote in Hindi:-

Zindagi inti takleef deti hain
Dil me phir bhi umeed bani rehti hai
Dil kehta hai ki kuch nahi hoga
Par kuch to hoga ye umeed kehti hai

Keep Hustling 😎.

If you want to learn more about how to crack interviews then you can follow me on twitter for some tips and tricks.

Also I have switched from PHP to Frontend development later and if you want to prepare for Full stack web development with javascript then keep visiting my blog learnersbucket.com 😁😁.

DEV Community: Prashant Yadav

Reactivity in JavaScript frameworks

What is Reactivity?.

When to update the View?

What to update in the View?

⚡️ Use ChatGPT on any website 🔥

Setup the chrome extension

popup.html

script.js

Load the Chrome extension

Observe the text being written on any webpage

Observe what the user is typing on the active tab

Finding text that starts with butler

Get the command response with ChatGPT API

React interview question - Detect overlapping circles

Question

Approach

Output

JavaScript SDE Cheat Sheet

DataStructures

Algorithms

Sorting

Searching

JavaScript specific problems.

JavaScript projects.

How to merge objects in javascript

Shallow Merge objects

Using ... spread operator

Using Object.assign() method

Using custom function to merge objects

Deep Merge Objects

Jquery's $.extend() method

Lodash merge() method

Frontend System Design - Capture product visible on viewport when user stops scrolling.

Check if an element is within the viewport.

Call a function when user stops scrolling or any other interactions for sometime.

Putting everything together

The frontend Landscape – Different Architectures

Server Side Application or Multi Page Application.

Single Page Application (Client – Side Rendering)

Isomorphic applications (Hybrid approach)

Micro Frontend Architecture

JAMSTack

Industry focused roadmap to be JavaScript developer – 2021

Pre-requisites

Table of contents

HTML

Things to learn in HTML.

Study Links.

CSS: Cascading Style Sheets

Things to study under css.

Study Links.

Advanced CSS

SASS

Study Links

LESS

Study Links

JavaScript

Study Links (Basic).

Topics to cover to get better at the language.

Advanced Study Links

Single Page Application (SPA)

Advantages

Disadvantages

Study Links

React (A library to create Single Page Applications)

Features of React.

Study Links

Alternatives

State Management – Flux/Redux

Study Links

Alternative

CSS Modules

Study Links

Alternatives

Maintainability

Linting JavaScript – ESLint

Study Links

Alternatives

Linting CSS – stylelint

Using `...` spread operator