DEV Community: Abhijeet Yadav

Resources for interview preparations (Front End).

Abhijeet Yadav — Tue, 04 Aug 2020 13:29:08 +0000

Hello there, if you have come to this post that means you are currently getting interviewed or are looking forward to get interviewed in the near future.

Keeping that in mind I've compiled a list of resources one can refer to get an upper hand during the interview process.

Q&A format

123 essential javascript questions

Tricky questions on hoisting, inheritance, closures, null vs undefined, NaN...
70 javascript interview questions

Dive deep into hoisting, inheritance, closures, promises, events...
javascript mcq

Practical code snippets in Q&A format.

Concepts

alexander zlatkov's how javascript works medium posts

Internal working of JS includes event loop, v8 engine, classes and inheritance, storage engines, shadow dom, webRTC, garbage collection, service workers, web workers, web socket, HTTP/HTTP2, network layer, browser engine, rendering engine...
akshay saini's youtube channel

Learn about event delegation, event propagation, debouncing, throttling, call, apply, bind, polyfills, curring.
design pattern soumyajit pathak's medium posts

Brief overview of different design pattern
addy osmani

Dive deep into design pattern such as singleton, mediator, revealing module, pub sub...
javascript concepts visualised

not so easy concepts made easy with awesome visualiser.
how to architect a front end application

Learn different layer of front end application and their roles in the overall architecture.

HTML, CSS

boxmodel

Learn about the box model
flex

Layout using flexbox
grid

Layout using grid
specificity

Learn about CSS specificity and selector priorities
position

Learn different positioning system used in CSS
inline vs inline-block

Learn difference between inline vs inline block vs block

React

react vs angular change detection

Learn how angular and react differ from each other in the context of change detection mechanism
fiber architecture traversal

Learn internal of React's fiber tree traversal process
fiber architecture reconciliation

Learn internal of React's fiber tree reconciliation process
internal working of props and life cycle hooks

Learn internal of props and state updation along with life cycle hooks

Alogorithms

tech dose

Get to know the why of the solutions and how to develop intuition for algorithmic problems.
tushar roy's

Learn concepts of tree, graphs, dynamic programming. Different traversal strategies and problems.
my code school

Learn the math and run time analysis of algorithms

All front end interview question

link

All front end Interview questions asked during my recent job hunt.

Abhijeet Yadav — Tue, 04 Aug 2020 12:28:57 +0000

Interview questions for front end

This readme is a compilation of all the question asked during my recent COVID-19 job hunt. I've also attached a list of resources that I'd referred for the preparations.

The questions are divided into following sections.

JS
Coding
Assignments
Miscellaneous

The solution are not production ready code and just represents a rough idea of my approach. Try implementing your own approach.

Edits made on 20/08/2020. Click to view changes

JS

1) Given a multidimensional array with depth of n, flatten it. Once flattened make it available as a method on array instance

Solution



/**
 * [1,2,[3,4]] -> [1,2,3,4]
 */

let arr = [1,2,[3,4, [5,6, [7, [8, 9, 10]]]]]

function flatten(arr) {
  return arr.reduce(function(acc, next){
    let isArray =  Array.isArray(next)
    return acc.concat(isArray ? flatten(next) : next)
  }, [])
}

if (!Array.prototype.flatten) {
  Array.prototype.flatten = function() {
    return flatten(this)
  }
}
console.log(arr.flatten());

2) Create a promise from scratch

Solution



class CustomPromise {
  state = "PENDING"
  value = undefined
  thenCallbacks = []
  errorCallbacks = []

  constructor(action) {
    action(this.resolver.bind(this), this.reject.bind(this))
  }

  resolver(value) {
    this.state = "RESOLVED"
    this.value = value
    this.thenCallbacks.forEach((callback) => {
      callback(this.value)
    })
  }

  reject(value) {
    this.state = "REJECTED"
    this.value = value
    this.errorCallbacks.forEach((callback) => {
      callback(this.value)
    })
  }

  then(callback) {
    this.thenCallbacks.push(callback)
    return this 
  }

  catch (callback) {
    this.errorCallbacks.push(callback)
    return this 
  }
}

let promise = new CustomPromise((resolver, reject) => {
  setTimeout(() => {
    const rand = Math.ceil(Math.random(1 * 1 + 6) * 6)
    if (rand > 2) {
      resolver("Success")
    } else {
      reject("Error")
    }
  }, 1000)
})

promise
  .then(function(response){
    console.log(response)
  })
  .catch(function(error){
    console.log(error)
  })

3) Filter movie list by average rating, name. Sort filtered list by any field inside movie object

Solution



// O(M)
function getMovies() {
  return []; // [{id, name, year}]
}

// O(R)
function getRatings() {
  return []; // [{id, movie_id, rating}]   0 <= rating <= 10   // e.g 9.3
}

/**
 * minAvgRating ->
 *    avgRating >= minAvgRating
 *
 * sort ->
 *    name -> ascending order movies by name
 *   -name -> descending
 *
 *    avgRating
 * 
 *
 * search ->
 *   'ave' -> 'Avengers'
 *   'avengers' -> 'Avengers'
 *   'AvengersInfinitywar' -> 'Avengers'
 */
const toLower = str => str.toLocaleLowerCase()

const getAvrgRating = (movie, movingWithRatings) => {
  let count = 0;
  return movingWithRatings.reduce((acc, value, index) => {
    const movieMatch = movie.id === value.movie_id
    if (movieMatch) {
      acc+=value.rating
      count++
    }
    if (index === movingWithRatings.length - 1) {
      acc = acc/count
    }
    return acc
  }, 0)
}

const isSubString = (str1, str2) => {
  str1 = toLower(str1.split(" ").join(""))
  str2 = toLower(str2.split(" ").join(""))
  if (str1.length > str2.length) {
    return str1.startWith(str2)
  } else {
    return str2.startWith(str1)
  }
}

const moviesList = getMovies()
const movingWithRatings = getRatings();
function queryMovies({ search, sort, minAvgRating }) {
  let filteredMovies = movingWithRatings.filter(movie => getAvrgRating(movie, movingWithRatings) >= minAvgRating);
  filteredMovies = filteredMovies.map(movie => moviesList.filter(listItem => listItem.id === movie.movie_id).pop())
  filteredMovies = filteredMovies.filter(movie => isSubString(toLower(movie.name), toLower(search)))
  filteredMovies = filteredMovies.sort((a, b) => {
    const isDescending = sort[0] === '-' ? true : false
    let sortCopy = isDescending ? sort.slice(1) : sort
    const value1 = a[sortCopy]
    const value2 = b[sortCopy]
    if (isDescending) {
      return value1 > value2 ? -1 : 1
    }else {
      return value1 < value2 ? -1 : 1
    }
  })
  filteredMovies = filteredMovies.map(movie => ({
    ...movie,
    avgRating: movingWithRatings.filter(ratedMovie => ratedMovie.movie_id === movie.id)[0].rating
  }))
  return filteredMovies
}

4) Given an end point URL to fetch all the posts and comments. Do the following.

Map all the comments to the posts it belongs to. The resultant data after mapping should be of below structure.

Solution




//service.js
const POSTS_URL = `https://jsonplaceholder.typicode.com/posts`;
const COMMENTS_URL = `https://jsonplaceholder.typicode.com/comments`;

export const fetchAllPosts = () => {
  return fetch(POSTS_URL).then(res => res.json());
};

export const fetchAllComments = () => {
  return fetch(COMMENTS_URL).then(res => res.json());
};


import { fetchAllPosts, fetchAllComments } from "./service";



const fetchData = async () => {
  const [posts, comments] = await Promise.all([
    fetchAllPosts(),
    fetchAllComments()
  ]);

  const grabAllCommentsForPost = postId =>
    comments.filter(comment => comment.postId === postId);

  const mappedPostWithComment = posts.reduce((acc, post) => {
    const allComments = grabAllCommentsForPost(post.id);
    acc[post.id] = allComments;
    return acc;
  }, {});

  console.log("mappedPostWithComment ", mappedPostWithComment);
};

fetchData();

5) Implement a method getHashCode on string instance. The method should be available on all strings.

Solution



let s1 = "sample"

if (!String.prototype.getHashCode) {
  String.prototype.getHashCode = function(){
    console.log('String instance ', this)
    return this
  }
}

6) What does the below expressions evaluate to



    1+true
    true+true
    ‘1’+true
    ‘2’ > ’3’
    ‘two’>’three’

Solution



2
2
1true
false
true

7) Implement bind and reduce.

Solution




//bind
if (!Function.prototype.bind) {
  Function.prototype.bind = function(...arg){
    const func = this
    const context = arg[0]
    const params = arg.slice(1)
    return function(...innerParam) {
      func.apply(context, [...params, ...innerParam])
    }
  }
}

//reduce
Array.prototype.reduce = function(func, initState) {
  const arr = this
  const callback = func
  let init = initState

  arr.forEach(function(value, index){
      init=callback(init, value)
  })
  return init
}

8) Implement debounce function

Solution



const debounce = function(func, interval) {
  let timerId;
  return function(e){
    clearTimeout(timerId)
    timerId = setTimeout(function(){
      func.apply()
    }, interval)
  }
}
debounce(apiCall, 3000)

9) Implement throttling function

Solution



const throttle = (callback, interval) => {
  let timerId;
  let allowEvents = true;

  return function() {
    let context = this;
    let args = arguments;

    if (allowEvents) {
      callback.apply(context, args)
      allowEvents = false;
      timerId = setTimeOut(function(){
        allowEvents = true
      }, interval)
    }
  }
}

10) Design API polling mechanism. The API is called after a fixed interval. The API is a stock API that fetches the latest price of stock. Upon fetching the results, render the UI.

The question demands the design aspect of the solution and not the code. It was open ended question.

Solution



//With setInterval, throttling and flags
setInterval=>Endpoint=>Render

//with the inversion of control
//Endpoint=>Render=>setTimeout=>Endpoint=>Render=>SetTimeout...

11) Convert class based inheritance code given below to ES5 code.



class Parent(name){
  constructor(name) {
    this.name=name
  }

  getName(){return this.name}
}

class Children extends Parent {
  constructor(props){
    super(props)
  }
}

Solution



function Parent(name) {
  this.name = name
}

Parent.prototype.getName = function() {
  return this.name
}

function Children(name){
  Parent.call(this, name)
}

Children.prototype = new Parent()

12) What does following code evaluates to?



//Q.1
var x = 1;
var y = x;

x = 0;
console.log(x, y);

//Q.2
var x = [1];
var y = x;

x = [];
console.log(x,y);

//Q.3
function Abc() { console.log(this); };
Abc()
new Abc();

//Q.4
var x = 1;
var obj = {
  x: 2,
  getX: function () {
    return console.log(this.x);
  }
};

obj.getX()
let a = obj.getX
console.log(a)

//Q.5
//How to get the a to log 2 in the above code

//Q.6
console.log("A");
setTimeout(() => console.log("B"), 0);
setTimeout(() => console.log("C"), 0);
console.log("D");

//Q.7
setTimeout(function() {
  console.log("A");
}, 0);
Promise.resolve().then(function() {
  console.log("B");
}).then(function() {
  console.log("C");
});

console.log("D");

//Q.8
let obj1 = {
  a:1,
  b:2
}

function mutate(obj) {
  obj = {a:4, c:6}
}

console.log(obj1)
mutate(obj1)
console.log(obj1)

Solution



//A.1
0 1

//A.2
[] [1]

//A.3
window object is logged

//A.4
logs 2 and 1

//A.5
a.call(obj);

//A.6
A, D, B , C

//A.7
D, B, C, A

//A.8
{ a: 1, b: 2 }
{ a: 1, b: 2 }

13) Given an array of numbers implement the following



const list = [1,2,3,4,5,6,7,8]
const filteredArray = list.filter(between(3, 6)) // [4,5]

Solution



function between(start, end) {
  return function (value,index) {
    return value>start && value<end
  }
}

Algorithms

1) Consider the following series:



A := 1
B := A*2 + 2
C := B*2 + 3 and so on...

Write a program that:

outputs the number corresponding to a given letter

given a string of letters like 'GREP', computes the sum of the numbers corresponding to all the letters in the string (i.e., G + R + E + P), as given by the above series and

given a large number (that would fit into a standard 32-bit integer), finds the shortest string of letters corresponding to it.

You may use a greedy approach for the last part. Compute the values of the numbers corresponding to letters as and when required and DO NOT pre-compute beforehand and store them in a data structure.

Solution



//A = 1
//B = A*2 +2 
//C = B*2+ 3
//D = C*2+ 3

var genCharArray = function(charA, charZ) {
    var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
        a.push(String.fromCharCode(i));
    }
    return a;
}

var charMap = {};
var charArray = genCharArray('a', 'z');

charArray.forEach(function(char, index){
    charMap[char] = Number(index + 1);
});


var charSequence = function(char){
    if(typeof char==="string"){
        char = charMap[char];
    }
    if(char==1){
        return 1;
    }else{
        return char + 2 * charSequence(char-1);
    }
}

var input = process.argv[2];

if(input.length===1){
    console.log(charSequence(charMap[input]));
}else if(input.length>1){
    var charTotalSequence = input.split("").reduce(function(acc, curr){ 
        return acc + charSequence(charMap[curr]);
    },0);
    console.log(charTotalSequence);
}

2) Given an array find a pair such that it sums to a given number

Solution



let nums = [2, 7, 10, 1, 11, 15, 9]
let target = 11
let numsMap = new Map()
let pairs = nums.reduce((acc, num) => {
  let numToFind = target - num
  if (numsMap.get(numToFind)) {
    return [...acc, [num, numToFind]]
  } else {
    numsMap.set(num, true)
    return [...acc]
  }
}, [])

console.log("Pairs ", pairs)

3) Find the local maxima in a given array. A local maxima is a element that is greater than it's left and right neighbours. I provided a O(n) solution which was quite straight forward before going for optimisation.

Solution



let x = [1, 2, 3, 5, 4] //Outputs: 5
if x.length == 1 return x[0]
else 
 let i = 1
 for(;i<x.length-1;i++){
  if x[i-1]<x[i] and x[i] > x[i+1] return x[i]
 }
 if x.length - 1 == i return x[i]

4) Rotate a matrix clockwise by 90 degree. The solution should be in place.

leetcode

Solution



[
 [1, 2, 3],
 [4, 5, 6],
 [7, 8, 9]
]
//The solution is to first take the transpose of the matrix.
//After taking the transpose the resulting matrix is as follows.
[
 [1, 4, 7],
 [2, 5, 8],
 [3, 6, 9]
]
//After the transpose step, All we have to do is to reverse the array @ each entry.
//The resulting matrix after after reversal is as follows.
[
 [7, 4, 1],
 [8, 5, 2],
 [9, 6, 3]
]
//The above matrix is rotated 90 degree

5) Maximum subarray sum modulo m

Solution

6) Given an array find three element in array that sum to a given target

Solution



let x = [1, 2, 3, 4, 5]
let target = 7
let found = []

const twoPointer = (l ,r, current) => {
  while(l<r){
    const totalSum = current + x[l] + x[r]
    if (totalSum === target) {
      found.push([current, x[l], x[r]])
      return
    } else if (totalSum > target) {
      r--
    } else {
      l++
    }
  }
}

const threeSum = (x, target) => {
    for (let i=0;i<x.length;i++) {
      const current = x[i];
      let leftPointer = i+1
      let rightPointer = x.length - 1

      if (current+x[leftPointer]+x[rightPointer] === target) {
        found.push([current, x[leftPointer], x[rightPointer]])
      } else {
        twoPointer(leftPointer, rightPointer, current)
      }
  }
  return found
}

7) Given a string and an integer k, find number of substrings in which all the different characters occurs exactly k times.

link

Solution



const subStrHasSameCharCount = (str, startIndex, endIndex, totalHop) => {
  let charMap = {}
  for (let k=startIndex;k<endIndex;k++) {
    let currentChar = str[k]
    if (charMap[currentChar]) {
      charMap[currentChar]++
    } else {
      charMap[currentChar] = 1
    }
  }
  let totalCount = Object.values(charMap).length > 0
  return totalCount ? Object.values(charMap).every(item => item == totalHop) : false
}


const characterWithCountK = (str, k) => {
  if (k == 0) return ''
  let count = 0
  let initialHop = k
  while (initialHop < str.length) {
    for (let j=0;j<str.length;j++) {
      let startIndex = j
      let endIndex = j + initialHop
      if(endIndex > str.length) continue
      count = subStrHasSameCharCount(str, startIndex, endIndex, k)
        ? count + 1: count
    }
    initialHop+=k
  }
  count = subStrHasSameCharCount(str, 0, initialHop, k)
        ? count + 1: count
  return count
}


let str = 'aabbcc'
let k = 2
console.log(characterWithCountK(str, k))

8) Given two input strings, s1 and s2, containing characters from a-z in different orders, find if rearranging string in s1 results in a string that is equal to s2.

Solution



let s1 = 'dadbcbc'
let s2 = 'ccbbdad'
let charMap = {}

const canBeRearranged = (s1, s2) => {
  if(s1.length!==s2.length){
    return false
  }
  for(let i=0;i<s1.length;i++){
    const charFromString1 = s1[i]
    const charFromString2 = s2[i]
    if(charFromString1 in charMap){
      charMap[charFromString1]++
    } else {
      charMap[charFromString1] = 1
    }
    if(charFromString2 in charMap){
      charMap[charFromString2]--
    } else {
      charMap[charFromString2] = -1
    }
  }
  for(let x in charMap){
    if (charMap[x]!==0){
      return false
    }
  }
  return true
}

canBeRearranged(s1, s2)

9) Given an array or variable input size, write a function to shuffle the array.

Solution



const swap = (index1, index2, arr) => {
  let temp = arr[index1]
  arr[index1] = arr[index2]
  arr[index2] = temp
}

const shuffle = (arr) => {
  let totalLength = arr.length
  while(totalLength > 0) {
    let random = Math.floor(Math.random() * totalLength)
    totalLength--
    swap(totalLength, random, arr)
  }
  return arr
}


let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr = shuffle(arr)

10) Calculate the sum of all elements in a multidimensional array of infinite depth.

Solution



let arr = [4, 5, 7, 8, [5, 7, 9, [3, 5, 7]]]
let sum = 0

const calculateSum = (arr) => {
  arr.reduce(function(acc, currentVal) {
    const isEntryArray = Array.isArray(currentVal)
    if (isEntryArray) {
      return acc.concat(calculateSum(currentVal))
    } else {
      sum+=currentVal
      return acc.concat(currentVal)
    }
  }, [])
}
calculateSum(arr)
console.log(sum)

11) Flatten a nested object of varying debt.

Solution



const obj = {
  level1: {
    level2: {
      level3: {
        more: 'stuff', 
        other: 'otherz',
        level4: {
          the: 'end',
        },
      },
    },
    level2still: {
      last: 'one',
    },
    am: 'bored',
  },
  more: 'what',
  ipsum: {
    lorem: 'latin',
  },
};

var removeNesting = function(obj, parent){
  for (let key in obj){
    if (typeof obj[key] === "object") {
      removeNesting(obj[key], parent+"."+key)
    } else {
      flattenedObj[parent+'.'+key] = obj[key]
    }
  }
}

let flattenedObj = {}
const sample = removeNesting(obj, "");
console.log(flattenedObj);

12) Given a json input, where each entry represents a directory such that each directory in turn can have a nested entry of it's own. Create the resulting directory structure.

Solution

13) Given an array of object containing list of employee data such that each employee has list of reportee. Use this information to construct a hierarachy of employees.

Solution



const employeesData = [{
  id: 2,
  name: 'Abhishek (CTO)',
  reportees: [6] 
}, {
  id: 3,
  name: 'Abhiram (COO)',
  reportees: []
}, {
  id: 6,
  name: 'Abhimanyu (Engineering Manager)',
  reportees: [9] 
}, {
  id: 9,
  name: 'Abhinav (Senior Engineer)',
  reportees: []
}, {
  id: 10,
  name: 'Abhijeet (CEO)',
  reportees: [2, 3],
}];

/*
A (CEO)
----B (CTO)
--------D (Engineering Manager)
------------E (Senior Software Engineer)
----C (COO)
*/

const findCeo = (currentEmp) => {
  let parentEmployee = employeesData.filter(emp => emp.reportees.indexOf(currentEmp.id) > -1)
  if (parentEmployee && parentEmployee.length > 0) {
    return findCeo(parentEmployee[0])
  } else {
    return currentEmp
  }
}

const logHierarchy = (currentEmp, indent) => {
  console.log("-".repeat(indent) + currentEmp.name)
  indent+=4;
  for(let i=0;i <currentEmp.reportees.length;i++) {
    let employee = employeesData.filter(emp => emp.id === currentEmp.reportees[i])
    logHierarchy(employee[0], indent)
  }
}

const traverse = (employee) => {
  let ceo = findCeo(employee)
  logHierarchy(ceo, 0)
}

traverse(employeesData[0])

14) Print a given matrix in spiral form



const inputMatrix = [
  [1, 2, 3, 4,  5],
  [6, 7, 8, 9, 10],
  [11,12,13,14,15],
  [16,17,18,19,20],
]

const exprectOutput = [1,2,3,4,5,10,15,20,19,18,17,16,11,6,7,8,9,14,13,12]

Solution



function spiralParser(inputMatrix){
  const output = [];
  let rows = inputMatrix.length;
  let cols = rows > 0 ? inputMatrix[0].length : 0;

  //singleEmptyRow => Edge case 1 //[]
  if (rows === 0) {
    return []
  }

  if (rows === 1) {
    //singleElementRowNoCol => Edge case 2 //[[]]
    if (cols === 0) {
      return []
    } else if (cols === 1){
      //singleElementRow => Edge case 3 //[[1]]
      output.push(inputMatrix[0][0])
      return output 
    }
  }

  let top = 0;
  let bottom = rows - 1;
  let left = 0;
  let right = cols - 1;
  let direction = 0;
  //0 => left->right
  //1 => top->bottom
  //2 => right->left
  //3 => bottom->top

  while(left <= right && top <= bottom) {
    if(direction === 0) {
      //left->right
      for (let i=left; i<=right;i++) {
        output.push(inputMatrix[top][i])
      }
      top++;
    } else if (direction === 1) {
      //top->bottom
      for (let i=top; i<=bottom;i++) {
        output.push(inputMatrix[i][right])
      }
      right--
    } else if (direction === 2) {
      //right->left
      for (let i=right; i>=left;i--) {
        output.push(inputMatrix[bottom][i])
      }
      bottom--
    } else if (direction === 3) {
      //bottom->top
      for (let i=bottom; i>=top;i--) {
        output.push(inputMatrix[i][left])
      }
      left++
    }
    direction = (direction + 1) % 4
  }
  return output;
}

console.log(spiralParser(inputMatrix2))

15) Find maximum consecutive repeating char in a give string.



let str = 'bbbaaaaccadd'; //max repeating char is a with count 4

Solution



//sudo code
maxNow = if input string length is 1 or greater than 1 ? 1 : 0
maxOverall = if input string length is 1 or greater than 1 ? 1 : 0

for char in inputString starting from index 1
  if char equals prevChar
    maxNow++
    maxOverall = max(maxOverall, maxNow)
  else if char not equals prevChar    
    maxNow = 1

16) Given a input array of varying length, segregate all the 2's at the end of the array.



let inputArr = [2,9,1,5,2,3,1,2,7,4,3,8,29,2,4,6,54,32,2,100]
//ouput => [9,1,5,3,1,7,4,3,8,29,4,6,54,32,100,2,2,2,2,2]

Solution



let slowRunner = 0

for (let fastRunner=0;fastRunner<arr.length;fastRunner++) {
  if (arr[fastRunner]!==2 && arr[slow] == 2) {
    [arr[fastRunner], arr[slow]] = [arr[slow], arr[fastRunner]]
    slowRunner++
  }
}

17) Reverse a linked list



//Input = 1 -> 2 -> 3 -> 4 -> 5 -> 6
//Output = 1 <- 2 <- 3 <- 4 <- 5 <- 6

Solution



//sudo code
let current = head
let prev = null
let next = null

while(current) {
  next = current.next
  current.next = prev
  prev = current
  current = next
}

18) preorder tree traversal using iteration (No recurssion)

Solution



//sudo code
const preorder = (root) => {
  let stack = []
  stack.push(root)

  while(there is element in stack) {
    let current = stack.pop()
    console.log(current.value)
    if (current.right) {
      stack.push(current.right)
    }
    if (current.left) {
      stack.push(current.left)
    }
  }
}

Assignments

1) Design a parking lot system with following requirements:

It can hold up to N vehicles. Handle availability of parking lot.
Entry and exit log of vehicles.
Automated ticketing system for every vehicle entering/exiting the parking lot will have vehicle registration with vehicle details like: Registration No., Color, allocated parking slot.

I should be able to query:

Registration No. of all vehicles of a particular color.
Parking slot of a vehicle given registration no.
Parking slots for vehicles given a color.
List of available slots in the parking lot.

Requirements:

Can use anything to structure the code: Classes/Structs.
Your solution should be extendable for future use cases.

Few code design principles:

Modularity of code.
Naming conventions.
SOLID principles.

Solution

2) Create a react component Ping that makes an API call to a given URL. If the API calls returns status code 200 that means the user is online. However, if the API call receives status code other than 200 it means, the user is offline.

Try changing status form dev tools network panel

Solution

3) Create a dynamic form builder from a json input. The form can be grouped based on id. Each group can have a nested group of it's own.

Solution

4) Create a minimal excel sheet in pure javascript that supports adding and removing rows, columns. There was time limit on this question of 40 minutes.

Solution

5) You have to make a search input box which will search over a list of users.

The user object has the following fields



   id: a unique id
   name: user’s name
   items: list of items ordered by user
   address: address of the user
   pincode: user address pin code

You have to implement search on all of the fields.

The search results will show up as a list of User Cards.

To Summarize
On typing in the search input box, the search results list opens up. The search could be just a string matching search.

The list of cards can be navigated through keyboard or mouse
only one card should highlight at a time if both mouse and keyboard are used for navigation

(keyboard will take preference if mouse is kept hovered on the list, similarly mouse will take preference if keyboard navigation is not used).

This behaviour is similar to how youtube search works

When no search results are found, an empty card is displayed
The card list would be scrollable.

The highlighted card (via keyboard/mouse) will scroll into view

Solution

Miscellaneous

1) How would you architect a front end application click
1) Implement Lazy loading click
2) What is Server Side Rendering.
3) How to deploy a react app to production.
4) What are service worker/web worker.
5) How to optimise a web app and make it more performant.
6) Explain different type of client side cache strategies.
7) What is CORS.
8) What are higher order component in react.
9) How does connect function work in redux.
10) What are pure components in React.

Resources

link

Binding translations to views

Abhijeet Yadav — Tue, 30 Jun 2020 15:23:57 +0000

This post is last in the series of react i18n integration.

In the previous post we went over how our TranslationServiceProvider exposes API method for our components to consume.

Now a ideal place for TranslationServiceProvider would be inside the root component. When our application is getting initialised, react-i18n exposes ready boolean flag which can be accessed using the useTranslation hook.

import React from "react";
import "./styles.css";
import "antd/dist/antd.css";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { Router } from "react-router-dom";
import { TranslationServiceProvider } from "./providers/TranslationServiceProvider";
import { AppRoutes } from "./routes/index";
import { createHashHistory } from "history";
import "./i18n";

const BrowserHistory = createHashHistory();
export default function App() {
  const { ready } = useTranslation();
  return (
    <>
      {!ready ? (
        <Spin className="suspense-spinner" size="large" />
      ) : (
        <TranslationServiceProvider>
          <Router history={BrowserHistory}>
            <AppRoutes />
          </Router>
        </TranslationServiceProvider>
      )}
    </>
  );
}

Once we have encapsulated our main component with TranslationServiceProvider we should now be able to access all the API method provided by TranslationServiceProvider.

If you remember in the previous post I'd mentioned different ways to consume provider methods for class based and functional component. We will have a look at those in this post.

when we say we want to translate textual contents embedded inside our components, we essentially mean to say, if there's any way can link or bind the textual content inside the component with the one mentioned in the .json file.

react-i18n let's us do that with a set of helper function namely

t (t short form for translate)
<Trans></Trans> (to translate contents with html tag)
<Translation></Translation> (comes handy when translating a standalone texts that are not inside any components)

Let's have a look how we'd inject this helper methods in our class and functional component

import { withTranslation } from 'react-i18next';
import { TranslationServiceHelper } from 'HOC/TranslationServiceHelper';
class ToBeTranslated extends React.pureComponent{
  render() {
    const { t, currentLanguage } = this.props;
    return (
        <p>{t('helloworld')}</p>
    )
  }
}

ToBeTranslated = withTranslation()(ToBeTranslated);
export default compose(TranslationServiceHelper)(ToBeTranslated);

In the above example if you can see () empty parenthesis adjacent to withTranslation. The empty parentheses is where you specify which the namespace should the component look into for resolving the translations. if no namespace is mentioned in withTranslation, default namespace is used for lookup.

Alternatively we can also define the namespace to look for inside the t helper function.

The helloworld inside the t helper function is the key inside the json file that binds the translated content.

render() {
    const { t, currentLanguage } = this.props;
    return (
        <p>{t('home:helloworld')}</p>
    )
  }

The above is how you'd for class components, what if I have a functional component. Well, in that case we can make use of useTranslation hook.

import { useTranslation } from 'react-i18next';
const ToBeTranslated = ({}) => {
 const { t } = useTranslation('home');
 return (
  <p>{t('helloworld')}</p>
 )
}
export default ToBeTranslated

The t helper function suffices for only textual content, what if you have to translate below content.

<div>
 It's
 <span style={{color:'red'}}>free</span>
 Forever!
</div>

Translating the above content is one thing, but how do we define keys for above contents inside json file

"key": "Sus <1>GRATIS</1> Siempre!"

see how <1></1> is substituted instead of . For every html tag we have incrementing numbers inside the json file. <1></1>, <2></2>.

For translation we can use Trans component provided by react-i18n.

<Trans i18nKey="key">
  {"It's"}
  <span style=style={{color:'red'}}>FREE </span>
  Forever!
</Trans>

Bonus

If you plan to scale i18n in your application by including multiple locales, you may wish to load translation based on route. Instead of downloading all the translations in one go it makes sense to download them based on routes.

Let's start by adding useEffect to watch for location

useEffect(() => {
    const pathNameTerms = locationPath.includes("/terms");
    const pathNameHome = locationPath.includes("/home");
    if (pathNameTerms) {
      props.loadNameSpaces("terms");
    } else if (pathNameHome) {
      props.loadNameSpaces("home");
    }
}, [props.location]);

The above peace of code watched for route changes and loads appropriate namespace. It also changes the default namespace to terms and home respectively.

That's it for this series. You can see the above lessons in action below. You can also find the github repo containing all codes mentioned in this series here

Exposing API using React provider

Abhijeet Yadav — Tue, 30 Jun 2020 15:23:47 +0000

This post is third in the series of react i18n integration.

To summarise the previous post, we added the necessary config to initialise react-i18n.

Now let's see how the provider, using this config, exposes API's that are consumed by our react components.

Our provider should have following functionality

get all supported locale list
change language
load namespace
query the current language

The changeLanguage and loadNameSpaces function provided by react-i18n are asynchronous since it requires making XHR call. To make sure our application is rendered only after the above calls are resolved we maintain a boolean isTReady and set it accordingly.

Let's look at the API's now. Start by pasting following code.

import React from "react";
import PropType from "prop-types";
import { withTranslation } from "react-i18next";


let TranslationContext;

const { Provider, Consumer } = (TranslationContext = React.createContext({
  currentLanguage: "",
  isTReady: false,
  localeList: [],
  setTReady: () => {},
  loadNameSpaces: () => {},
  changeLanguage: () => {},
  hasNameSpaceLoaded: () => {},
  setEntityPreferredLocale: () => {}
}));

class TranslationServiceProvider extends React.Component {
  constructor(props) {
    super(props);
    const { tReady } = this.props;

    this.state = {
      currentLanguage: "",
      isTReady: tReady,
      localeList: [
        { id: 1, name: "English", locale: "en" },
        { id: 2, name: "Spanish", locale: "es" }
      ]
    };
  }
}

Now that we have initialised our state. Let's go ahead and add the languageChanged subscriber call inside componentDidMount. The subscriber makes sure to to set isTReady to false when the locales are being fetched. We also set the currentLanguage to the one detected by the plugin.

componentDidMount() {
    const { i18n } = this.props;
    i18n.on("languageChanged", () => {
      this.setTReady(false);
    });
    this.setLang(
      i18n && i18n.language && i18n.language.slice(0, 2).toLocaleLowerCase()
    );
  }

After we are done adding the subscriber, we need API's to changeLanguage and loadNameSpaces.


setLang = lang => {
    this.setState({
      currentLanguage: lang
    });
  };

  setTReady = ready => {
    this.setState({
      isTReady: ready
    });
  };

  loadNameSpaces = ns => {
    const { i18n } = this.props;
    this.setTReady(false);
    i18n.loadNamespaces(ns).then(() => {
      i18n.setDefaultNamespace(ns);
      this.setTReady(true);
    });
  };

  changeLanguage = lang => {
    const { i18n } = this.props;
    this.setTReady(false);
    return i18n.changeLanguage(lang).then(() => {
      this.setTReady(true);
      if (lang) {
        this.setLang(lang.toLocaleLowerCase().slice(0, 2));
      }
    });
  };

  hasNameSpaceLoaded = ns => {
    const { i18n } = this.props;
    return i18n.options.ns.indexOf(ns) > -1;
  };

  setEntityPreferredLocale = locale => {
    this.changeLanguage(locale);
  };

The above API's takes care of loadingNameSpaces, changeLanguage and checking if the namespaces was already loaded using hasNameSpaceLoaded.

This essentially completed a major chunk of out i18n application. The only thing left now is to encapsulate our Component inside TranslationServiceProvider

Our application component subscribes to above API using a HOC.

import React from "react";
import { TranslationConsumer } from "../providers/TranslationServiceProvider";

export const TranslationServiceHelper = Component =>
  class extends React.Component {
    render() {
      return (
        <TranslationConsumer>
          {context => (
            <Component
              {...this.props}
              {...this.state}
              localeList={context.localeList}
              currentLanguage={context.currentLanguage}
              isTReady={context.isTReady}
              loadNameSpaces={context.loadNameSpaces}
              changeLanguage={context.changeLanguage}
              hasNameSpaceLoaded={context.hasNameSpaceLoaded}
              setEntityPreferredLocale={context.setEntityPreferredLocale}
            />
          )}
        </TranslationConsumer>
      );
    }
  };

In the next post we will take a look at how our components consume provider methods. Since, a component can be a class based or functional, our provider should account for both components.

Find the github repo containing all codes mentioned in this series here

Configuring i18n for react

Abhijeet Yadav — Tue, 30 Jun 2020 15:23:29 +0000

This post is second in series of react i18n integration.

To summarise the previous post, we installed bunch of dependency related to i18next library. Then we created locale folder inside the public directory.

Now let's see how those steps come together to make a config file.

Start by creating a file i18n.js inside src/utils/ directory.
paste the following code...

import LocalStorageBackend from 'i18next-localstorage-backend';
import XHRBackEnd from 'i18next-xhr-backend';

export const isDevelopmentEnv = process.env.NODE_ENV === 'development';

export const backEnds = isDevelopmentEnv ? [XHRBackEnd] : [LocalStorageBackend, XHRBackEnd];

export const loadPath = () => '/locales/{{lng}}/{{ns}}.json';

export const backEndOptions = isDevelopmentEnv
  ? [{ loadPath }] : [{ prefix: 'app_name_', versions: { en: 'v1', es: 'v1' } }, { loadPath }];

Let's break this line by line

import LocalStorageBackend from 'i18next-localstorage-backend';

Provides option to store the translated contents once downloaded.

import XHRBackEnd from 'i18next-xhr-backend';

Loads translations from the locales directory.

export const loadPath = () => '/locales/{{lng}}/{{ns}}.json';

loadPath when executed translates to '/locales/en/home.json' OR '/locales/es/home.json'. ns stands for namespace which is defaulted to fileName.

export const backEndOptions = isDevelopmentEnv
  ? [{ loadPath }] : [{ prefix: 'app_name_', versions: { en: 'v1', es: 'v1' } }, { loadPath }];

What does prefix and the versions option inside the backEndOptions stand for?.

Let's say your app is released to production, when the user downloads and opens the web page, the translations are saved in localStorage. What if we make a hotfix after the release. The hotfix contains additional translations. How do we let the app know that the content stored in localStorage is a stale one. We do that by bumping the version number. When version don't match new request is made to translate recent contents.

export const isDevelopmentEnv = process.env.NODE_ENV === 'development';

What is isDevelopmentEnv boolean flag.

You see, when we imported i18next-localstorage-backend on the first line we did so with the intention of using localstorage to store all the translations once it was downloaded. However, this may not be the ideal behaviour we would expect when developing since we may keep changing the translation files.

Sigh!

Let's now create our config file named i18n.js inside the src/ directory. Remember the one we created above was utils for our config file.

Add the following code...

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-chained-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { backEnds, backEndOptions, isDevelopmentEnv } from 'utils/i18n';

if (isDevelopmentEnv) {
  window.i18n = i18n; //useful for debugging
}

i18n
  .use(Backend) 
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    ns: ['common'],
    defaultNS: 'common',
    fallbackLng: 'en',
    debug: true,
    load: 'languageOnly',
    returnObjects: true,
    joinArrays: true,
    cleanCode: true,
    interpolation: {
      escapeValue: false,
    },
    react: {
      wait: true,
      useSuspense: false,
    },
    backend: {
      backends: backEnds,
      backendOptions: backEndOptions,
    },
  });

export default i18n;

Going through each and every config option is beyond the scope of this blog post. Let's quickly glance over the one's that are important.

.use(Backend)

Chains multiple backend provided in the utils, namely XHR and LocalStorage.

.use(LanguageDetector)

Detects Language in given order...

['querystring', 'cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain']. Querystring used is ?lng. When set the contents are translated.

use(initReactI18next)

provides react bindings.

ns: ['common'],

ns stands for namespace. When the app is bootstrapped, files mentioned in the ns list are downloaded. Above example downloads common.json file.

defaultNS: 'common',

When binding translation key to view, the keys will be searched inside the common namespace unless explicitly mentioned otherwise.

fallbackLng: 'en',

If language is not mentioned it will fallback to en. Hence the loadPath defined in utils file will be equal to '/locales/en/common.json'

load: 'languageOnly',

If not set to languageOnly. The lng inside the loadPath will default to en-EN or es-Es.

react: {
 wait: true,
 useSuspense: false,
}

since the process of loading translation file is asynchronous, How should we let our React app know that the file are being fetched? before it shows flash of key,value bindings instead of actual translations. We do that by setting above flags.

I guess, that's it for the config file. In the next post we will look into the providers that will consume the above config and spit out API's for changing language, loading name space based on routes.

Find the github repo containing all codes mentioned in this series here

i18n for react applications

Abhijeet Yadav — Tue, 30 Jun 2020 15:23:06 +0000

This post is first in the series of react i18n integration.

What is i18n and why is it required?

Internationalization(i18n) is the design and development of a product, application or document content that enables support for local languages and cultural settings.

What all topics are covered in the series.

Installation
Configuring i18n for react
Exposing API using React provider
Binding translations to views

Tech

i18next - internationalization-framework for JavaScript.
react-i18next - Provides framework binding for react.

Alright enough Bla Bla. Let's get started with some action.

Installation

$ npm install react-i18next i18next --save

Wouldn't it be nice if our react application can do the following

Detect language based on geography.
Load our translation from a external file.
Store those contents in a cache or localStorage. let's add that capability by installing...

$ npm install i18next-browser-languagedetector i18next-xhr-backend i18next-localstorage-backend i18next-chained-backend

For a smaller application one wouldn't mind storing translations inside config file.

However, For a large applications this won't be an ideal solution.

Hence, to address this we will create locale folder inside the public directory that holds all our translations. For the sake of this tutorial our application will support English (EN) and Spanish (ES).

. public
    ├── locales
        ├── en
            ├── common.json
            ├── terms.json
            ├── home.json
        ├── es
            ├── common.json
            ├── terms.json
            ├── home.json

As you can see, In the above folder structure we have multiple JSON files for each locale. The common.json file contains all translation that are common across multiple routes. terms.json and home.json holds translated content for terms and home routes respectively.

The reason behind choosing i18next was it provides ecosystem containing various tools for integration with different languages and framework. Same learnings can be applied for other languages as well.

Now that we are done with the installation, we will now look into how the above pieces are connected together to make a config file.

Find the github repo containing all codes mentioned in this series here