DEV Community: Vishal Gupta

This will get your Pull Request merged Quickly

Vishal Gupta — Fri, 31 Jul 2020 17:42:19 +0000

These PR reviews points are for the Software Company products, for open source libs PR there could be little deviation from these points.

Pull request review is a collaborative process, all the team members should participate in this, with the thought of improving the code

Keep the PR Small

PR should be as small as possible and very much specific to the problem statement it is trying to solve, avoid to make unnecessary changes in the PR.

Put proper and elboartive PR description

Add proper PR description, screenshot to your PR so that the reviewer can quickly prepare a mental model of the changes, and there will be less back and forth around the PR.

PR Navigation

Add proper comments to your PR so that it is easier for the reviewer to understand the changes better and navigate easily in the PR.

Mention Impacts

Mention about the impacts this PR can make on the existing critical features so the reviewer can help you in identifying any edge case or scenario missed by you.

Be open for suggestions

Always remember PR review is not Criticism, it is collaboration, so take suggestions sportingly and use it as an opportunity to improve your code and skills.

What if you disagree.?

Disagreements will definitely occur during the PR review, but always remember to voice out your opinion in calm and friendly manner and keep it a collaborative positive discussion, rather than a competition of being who is right.

Also, put proper elaborative reasoning behind your disagreement

Be quick in fixing PR comments

Once you have received the feedback on your PR make sure you fix those comments ASAP, if you will delay may be the reviewer loose context of the changes.

Feel free to add your thoughts and practices for PR reviews

React: `useFetchData` Custom Hook

Vishal Gupta — Sat, 11 Jul 2020 15:42:25 +0000

If you observe common state logic in many components make a custom hook

React hooks are very useful when you want to take out common logic out of your components.

In our live projects we make some components which makes API calls, parse data and display it to the user.

There are lot of state transitions happening behind this.

* Initial State
* Loading
* Data Received

These 3 are the common state transitions for each and every component, which means we can create a custom hook out of it.

Now, let's make a custom hook.

Custom Hook

import { useEffect, useReducer, useCallback } from 'react';


const INITIAL_STATE = {
  data: undefined,
  isLoading: false,
  hasError: false,
};

/**
 * Hook to fetch data and handling loading and error state.
 * @param {Promise} fetchData promise to fetch data. [Dependancy]
 * @param {Array} params parameters to pass to fetch data. [Dependancy]
 */
const useFetchData = (fetchData, params = EMPTY_ARRAY, initialState = INITIAL_STATE) => {
  const [state, dispatch] = useReducer(REDUCER, initialState);

  const usefetchDataEffect = useCallback(() => fetchDataEffect(dispatch, fetchData, params), [fetchData, ...params]);

  useEffect(usefetchDataEffect, [usefetchDataEffect]);

  return [state, { fetchData: usefetchDataEffect }];
};

export default useFetchData;

Helper Functions

const setLoading = dispatch => dispatch({ type: 'SET_LOADING' });

const setError = dispatch => dispatch({ type: 'SET_ERROR' });

const setData = (dispatch, data) => dispatch({
  type: 'SET_DATA',
  payload: { data },
});

/**
 * Fetches and saves Data.
 * Handles Error.
 * @param {Promise} fetchData promise which returns data
 * @param {Array} params parameters to be passed to fetchData promise
 * @param {Function} dispatch function to update state
 */
const fetchDataEffect = (dispatch, fetchData, params) => {
  setLoading(dispatch);
  fetchData(...params)
    .then((data) => {
      setData(dispatch, data);
    })
    .catch(() => {
      setError(dispatch);
    });
}

Usage

const [{ isLoading, hasError, data: componentData }, { fetchData }] = useFetchData(fetchComponentData, [dependency]);

NOTE

Try to parse the API response in fetchComponentData function so the component receives parsed data to display.

For simplicity, I have not included definition of reducers.

Backend For Frontend - Using Node.js

Vishal Gupta — Sat, 08 Feb 2020 05:34:17 +0000

Super fast client application is the need of current digital era, personalisation in the client application is icing on the cake.

At Goibibo, Hotels Business is very much focussed, as much as we care about customers’ experience for booking the hotel on our B2C platform, we also care about the experience for the hoteliers while using our platform to manage their Hotel.

For Hoteliers we have a very vast application to manage their property, the application is built using React.js at frontend and Django at backend and it is well known as Extranet in Hotels domain.

Challenges

We follow micro-service architecture at the core and all the client applications catering hoteliers, directly get data from those micro-services, this started influencing engineers to debate on where to keep the representation logic like, if we keep it at frontend then all the client applications (web, iOS, android and mobile-web) have to write the same logic 3 times, and keeping it in backend is never a good idea. Moreover, getting data from more than one service is again an overhead for client apps and it also exposes all backend services to client applications, that is why we need a Backend For Frontend or BFF.

UI processing on Client

Most of the UI processing logic resides on the client, so there is always chance of duplicity in the UI rendering logic for different screen size client application.

The Payload Variance

For different screen size clients we can keep the payload size as per the client requirement, which will eventually help in optimising system performance.

Collective Response

Different micro services, returns response as per their implementation, so client application needs to process that response every time as per their requirement.

BFF implementation

BFF is again a micro service, which listens to client request and figures out from which backend micro-service it has to fetch the data to serve client application.

We have implemented BFF in Express.js, we chose express because of default non-blocking IO behaviour, following is the tech stack:

Express.js — Server
Mongo DB — For caching API Data
PM2 — Process Manager
Redis — For caching user token

BFF Responsibilities

BFF act as the main source of truth for all the frontend clients, following the major responsibilities for BFF layer:

Authenticated response for client side applications
Merge response from various backend services and provide the response as per the client requirement
Trim response as per client app requirement, dynamic pagination
Support GRPC enabled micro-services by exposing http APIs as proxy
Caching frequent static API calls
Personalisation for rendering selective UI for the varied sized client application
Multi language support for different client applications Support Client-Server Socket connection for realtime updates

Optimise your Web Product performance

Vishal Gupta — Mon, 13 Jan 2020 15:43:15 +0000

Today it’s not about ‘get the traffic’ — it’s about ‘get the targeted and relevant traffic

Relevant traffic will come only when your web product is properly targeted and performant.

Performance is the key to success applies to the web products more than ever before

Basic Performance Improvements

Put css in the head tag
Put scripts just before the body closing tags
Make your page HTML syntactically correct
Make less http calls
Avoid 301 Redirections

These performance steps are very simple and easy to implement

Some advance Optimisation steps

Bundling

Bundle your javascript files and css files appropriately to make sure that it keeps a balance between a single file size multiple https call, now a days mostly the trend is to send Critical CSS and Immediately usable component

Minification

Minify your javascript & css files to reduce the file size

CSS Improvements

Mark media queries as non blocking to speed up the first render
Use less CSS overall

JS Improvements

Use async & defer appropriately to avoid render blocking
Put inline JS if it is considerably small

Images

Use scalable images like SVGs
Use sprites for the icons
Use webp images with the fallback to jpeg
Use LazyLoad for the images

Fonts

Do not use custom fonts if not required
Prioritise based on browser support
Choose only the relevant styles you need
Keep character sets down to a minimum
Host fonts locally or prefetch
Store in LocalStorage with Base64 Encoding

Caching

Leverage browser caching as much as possible, as per product requirement
Add durable cache expiration header in static assets
Enable component caching at server side
Enable CDN caching for assets

Rendering

Keep first render from the server to deliver fast first page render
Successive renders could be on client side for good user experience
For better performance, implement progressive rendering
Make use of browser intersection observer API to reduce rendering load on browser

Networking Improvements

Ensure that number of network round trips are lesser
Implement DNS prefetch, for quick DNS resolution
Implement GRPC support both at Backend & Frontend for faster request response cycle
Reduce/Remove network redirection
Always use Ajax call for interacting with servers for user interaction
Implement Brotli compression
Make use of fast reverse proxy server for performance tuning of the resources

Monitoring

Use Chrome performance analyser Light House for verifying impact of improvements
Use page speed to verify page load time

The focus of this article is to list down the improvements which can be done, there is always some scope of performance improvement in a web product. Intentionally I have not mentioned the links and code snippets so that readers explore more about the terminologies instead of directly using the snippet.

My Experience at YourQuote (Social Network)

Vishal Gupta — Wed, 08 Jan 2020 10:42:03 +0000

YourQuote

YourQuote is a social writing platform where you can post your Original thoughts and Quotes, you can socialise based on your writing and reading interest. It has both Mobile App and Web App.

You can explore, read and share quotes without logging.

Interview

After a fantastic discussion with Harsh Snehanshu(CEO) and Ashish Singh(CTO), Ashish decided to give me a problem statement to solve which will decide my journey with Yourquote.
After waiting for a day with excitement, I received a problem statement which is explained in detail at the end of this post.
Tried to provide a probable solution to Ashish on the same day, he suggested some optimisations and I was able to quickly present the modified solution.
Next day Harsh Notified me that I am in, super happy I was.

Joining

Joined YQ within a month and came to know that Ashish and whole Backend team is going on trekking that sounded cool and scary as all the responsibilities came on my shoulders now.

First Challenge

First Challenge was to keep up the server in the absence of Ashish, and no one expected that celery workers will mess up.
Notifications got affected due to some problem in celery workers, some how was able to fix that issue, after that there was no looking back.

YQ Web Resurrected

YQ website was written in jQuery to serve for SEO needs, but performance and UX was not very satisfactory, so we started planning to revamp it to achieve SEO and Performance.
I am huge fan of Vue.js and hence I figured out a way of doing SSR with Vue.js which can serve for SEO and Performance. We sat with the design team and development kicked off in no time.
Within 30 working days we were able to completely revamp the YQ website.
Rendering of web pages was so fast, transitions were so smooth, I felt like everyone falling in love with me and YQ web.
Info → YQ web alexa rank is improved drastically, now under 1500 in India.

Business Model

YQ is facing tough time as of now due to funding crunch.
Well, YQ knows how to survive and YQ family is so supportive that they will not let YQ die.
Getting some support from google ads as of now.
You can also support YQ by using YQ premium from YQ Store, publish your quote books from YQ Book Store

Interview Problem Statement

Think of User to User Recommendation Engine, figure out optimised ways to store the recommendations and process them efficiently, also figure out how to serve those recommendation to client machine.
Lately I initiated this project using dGraph.

Closing Words

YQ is love, YQ team is bunch of some really intelligent, calm and humble people. Try YQ once, you will fall in love with it.

Download Now

Drag & Drop is Super Simple

Vishal Gupta — Mon, 30 Dec 2019 18:17:08 +0000

There are lot of applications on internet which gives drag and drop functionality, it seems tricky but it is super simple to implement.

It is also a very popular interview question for coding round but the implementation is quite simple and interesting.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div style="text-align: center">
      <h3>Drag & Drop</h3>
    </div>
    <div id="app">
      <div>
        <ul class="listHolder">
          <li class="listElement" draggable="true">1</li>
          <li class="listElement" draggable="true">2</li>
          <li class="listElement" draggable="true">3</li>
          <li class="listElement" draggable="true">4</li>
        </ul>
      </div>

      <div>
        <ul class="listHolder">
          <li class="listElement" draggable="true">5</li>
          <li class="listElement" draggable="true">6</li>
          <li class="listElement" draggable="true">7</li>
          <li class="listElement" draggable="true">8</li>
        </ul>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

Javascript

import "./styles.css";

var listHolders = document.getElementsByClassName("listHolder");
var listElems = document.getElementsByClassName("listElement");
var selectedElem = null;
var beforeElement = null;

for (const elem of listElems) {
  elem.addEventListener("dragstart", dragStart);
  elem.addEventListener("dragend", dragEnd);
  elem.addEventListener("dragover", dragOver);
  elem.addEventListener("dragleave", dragLeave);
}

for (const holder of listHolders) {
  holder.addEventListener("dragenter", dragEnter);
  holder.addEventListener("dragleave", dragLeave);
  holder.addEventListener("drop", drop);
}

function dragStart(e) {
  selectedElem = this;
  this.className += " hold";
  setTimeout(() => {
    this.className = "remove";
  }, 0);
}

function dragOver(e) {
  e.preventDefault();
  beforeElement = this;
  this.className += " dropzone";
}

function dragEnter() {
  this.className += " dropzone";
}

function dragLeave() {
  beforeElement = null;
  this.classList.remove("dropzone");
}

function drop() {
  this.className = "listHolder";
  if (this.children.length && beforeElement) {
    beforeElement.after(selectedElem);
  } else {
    this.append(selectedElem);
  }
  beforeElement.className = "listElement";
  selectedElem = null;
}

function dragEnd() {
  this.className = "listElement";
}

css

body {
  font-family: sans-serif;
}

.listHolder {
  padding: 10px;
  border: #000 solid 1px;
  background: mediumslateblue;
  min-width: 100px;
  min-height: 100px;
}

ul {
  list-style-type: none;
}

#app {
  display: flex;
  justify-content: space-between;
}

.listElement {
  padding: 10px;
  background: white;
  border: #000 solid 1px;
  margin-top: 5px;
}

.dropzone {
  border: #000 dashed 2px;
}

.remove {
  display: none;
}

.hold {
  border: red solid 3px;
}

Simple implementation

CodeSandbox Example to play with the visual output.

You can fork it for making your own version of drag drop.

Detailed docs

Happy Coding

Upload Media directly to S3 bucket from Client.

Vishal Gupta — Fri, 27 Dec 2019 16:02:45 +0000

Web is becoming media rich day by day.

Most of the webapps now provides functionality of uploading user generated content, this content could be an Image or Video.

Generally the cloud storages used for storing media are storage buckets like S3 buckets

Now if we want to upload image to S3 bucket, there are 2 methods:

1. From Server - media upload to S3 bucket will happen on server and it is costly process on large scale

2. From Client - we are about to see it in detail here, in this method media upload to S3 bucket happens from the client which saves server processing and cost

Client Side Media Upload Algo

Server uses aws sdk to use S3 bucket methods
Server expose and API to get Signed Url from aws and send to client
Client hits the API to get the signed url from the server
Client post the file on the signed url using XHR request
Client will be able to track the progress of the upload and can take some action once the Upload is complete
Enable CORS on S3 bucket setting

Now lets do some coding

Server

Create simple Express Server
Expose an endpoint to get signed URL

// server
// npm install aws-sdk

const express = require("express");
const app = express();
const port = 3000;

const AWS = require("aws-sdk");
const s3 = new AWS.S3({
  accessKeyId: "<aws_access_key_id>", // aws access id here
  secretAccessKey: "<aws_secret_access_key>", // aws secret access key here
  useAccelerateEndpoint: true
});
const params = {
  Bucket: "<Bucket Name>",
  Key: "<Put your key here>",
  Expires: 60*60, // expiry time
  ACL: "bucket-owner-full-control",
  ContentType: "image/jpeg" // this can be changed as per the file type
};

// api endpoint to get signed url
app.get("/get-signed-url", (req, res) => {
  const fileurls = [];
  s3.getSignedUrl("putObject", params, function(err, url) {
    if (err) {
      console.log("Error getting presigned url from AWS S3");
      res.json({
        success: false,
        message: "Pre-Signed URL error",
        urls: fileurls
      });
    } else {
      fileurls[0] = url;
      console.log("Presigned URL: ", fileurls[0]);
      res.json({
        success: true,
        message: "AWS SDK S3 Pre-signed urls generated successfully.",
        urls: fileurls
      });
    }
  });
});

app.listen(port, () => console.log(`Server listening on port ${port}!`));

S3 Bucket setting

Create a DNS compliant bucket name
Set default encryption
Give appropriate read and write permissions
Get aws accelerated URL like yourbucketname.s3-accelerate.amazonaws.com
Add following CORS rules

<?xml version=”1.0" encoding=”UTF-8"?>
<CORSConfiguration>
<CORSRule>
 <AllowedOrigin>*</AllowedOrigin>
 <AllowedMethod>POST</AllowedMethod>
 <AllowedMethod>GET</AllowedMethod>
 <AllowedMethod>PUT</AllowedMethod>
 <AllowedMethod>DELETE</AllowedMethod>
 <AllowedMethod>HEAD</AllowedMethod>
 <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Client

Make API call to server, get signed URL
Post multipart formdata to signed URL
Track progress, make UI changes accordingly

import axios from "axios";
const getSignedURL = () => {
  return new Promise((resolve, reject) => {
    axios
      .get("<server-base-url>/get-signed-url")
      .then(data => {
        resolve(data);
      })
      .catch(err => {
        reject(err);
      });
  });
};

const uploadMediaToS3 = () => {
  const config = {
    onUploadProgress: function(progressEvent) {
      var percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(percentCompleted);
    }
  };

  let fd = new FormData();
  fd.append("file", files[0]);

  getSignedURL().then(data => {
    axios
      .put(data.urls[0], fd, config)
      .then(res => console.log("Upload Completed", res))
      .catch(err => console.log("Upload Interrupted", err));
  });
};

// add event listener to a html element
const uploadButton = document.getElementById("uploadButton");
uploadButton.addEventListener("onclick", uploadMediaToS3);

Advantages of using client side upload method

It reduces load on servers.
Client can show actual upload progress
Client can abort the upload
Client can handle upload stop, pause and resume functionalities
At AWS we can pipe lambdas to do processing on these images and make it public only after processing it.

As per the use case server may want to maintain the state of uploads started by client

Closures in Javascript

Vishal Gupta — Fri, 06 Dec 2019 19:39:05 +0000

Closure is basically an inner function which has access to variable of outer function.

Lets see an example:

function outer() {
  var a = 123;

  function inner() { // this function act as closure
    console.log(a);
  }

  inner();
}

outer(); // it will print '123'

The amazing thing is, even if the outer function returns the inner function then also inner function will have access to outer function variables, in other programming languages if a function returns then it becomes ready for garbage collection or is completely removed from the heap, but in Javascript if there is closure then the parent function variables remain in the heap.

So the following code is also correct...

function outer1() {
  var a = 123;
  return function() { // this function act as closure
    console.log(a);
  }
}

var func  = outer1();

func() // this will also print '123'

Advantages of closures:

Callbacks implementation in javascript is heavily dependent on how closures work
Mostly used in Encapsulation of the code
Also used in creating API calling wrapper methods

Disadvantages of closures:

Variables used by closure will not be garbage collected
Memory snapshot of the application will be increased if closures are not used properly

Lets solve a famous interview problem based on closures

When you are performing an async operation inside a loop in javascript make sure each iteration has its own respective value passed to the operation.
Lets see this question.

What will be the output of the following?

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 3000);
}

Surprisingly the output will be Index: 4, element: undefined(printed 4 times)

This happens because until the loop is executed completely the function inside setTimeout will not be called since it is async function, after the loop is executed functions stacked inside setTimeout will start invoking and will try to print the value of i which will be 4 by then, so how to print the correct value of i with out removing setTimeout

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
 (function(i) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 3000);
})(i)
}

There are lot of problems solved by closures and some are created by closures, make sure to use closures wisely

Feel free to add you thoughts in the comments

Follow me for more such content

Flattening a Javascript Object

Vishal Gupta — Wed, 04 Dec 2019 16:45:49 +0000

Flattening a javascript object is a very common question asked in UI Interviews.

Flattening deeply nested object can be easily achieved by using recursive technique.

The code depends on how a flattened object should look like...

// input
var user = {
  name: "Vishal",
  address: {
    primary: {
      house: "109",
      street: {             
        main: "21",
        cross: "32"
      }
    }
  }
};

//output
{
  user_name: "Vishal",
  user_address_primary_house: "109",
  user_address_primary_street_main: "21",
  user_address_primary_street_cross: "32",
}

Algo:

Iterate over keys of the object
Append child key name into the parent key name
If the child key's value is an object again call the same function
Else assign key to the new value

Code:

var flattendObj = {};
const flattenObject = (obj, keyName) => {
  Object.keys(obj).forEach(key => {
    var newKey = `${keyName}_${key}` 
    if (typeof obj[key] === "object") {
      // calling the function again
      flattenObject(obj[key], newKey);
    } else {
      flattendObj[newKey] = obj[key];
    }
  });
};
console.log(flattendObj);

Recursion is magical, if you know where to stop. 🌀

Follow me for more such content.

Aiming to post the solution of such problems daily. 🔥

Challenge me with more problems. 💪

Debouncing in Javascript

Vishal Gupta — Wed, 04 Dec 2019 11:22:35 +0000

Debouncing is a very good to have feature, when user is expected to do a particular action very very quickly, such as typing a product name for searching in an e-commerce site.

Imagine on each key press the client code makes and API call for fetching the suggestions to be shown in the search result, these are so many api calls, to avoid this situation of making so many api call we can implement debouncing.

Debounce Algo:

Call a function on user action after a delay time
Clear the previous delay time on the next action if the action is performed before that delay time
Make use of setTimeout

Simple Code:

  <input id="debounce-input" />


// debounce logic
var timer = null;
const debounce = (actionHandler, delay) => {
  if (timer) {
    // clearing timer
    clearInterval(timer);
  }
  timer = setTimeout(actionHandler, delay);
};

// some costly function
const fetchDataFromAPI = () => {

  //here you can put your fetch logic

  console.log("fetchData");
};

// event binding to input
const elem = document.getElementById("debounce-input");
elem.addEventListener("input", e => {
  debounce(fetchDataFromAPI, 1000);
});

This is very simple implementation of Debounce just to give the idea that it can be achieved very easily.

One can use closures to move global variables inside the function

We should avoid including big libraries just for using small functionality like this

Palindrome String in Javascript

Vishal Gupta — Wed, 04 Dec 2019 05:33:55 +0000

This is a classical problem asked in mostly all the interviews.
I am posting the solution in Javascript, you can convert it in the language of your own choice.

Algo:

Use two pointers (left & right)
Put left at the start of string and right at the end of string
Check the value at pointer and take decision on the basis of equality
Move the pointers towards each other
Until left is smaller than equal to right

Code:


 const isPalindrome  = function(A){
    A = A.replace(/[^0-9a-zA-Z]/g, "");
    A = A.toLowerCase();
    var left = 0
    var right = A.length; - 1;
    while(left <= right) {
        if(A[left] !== A[right]) {
            return 0
        }
        left++;
        right--;
    }
    return 1;
}

Note: In the above solution I have omitted the special characters and spaces.

Feel free to post suggestions or more efficient code