Code Entity RSS Feed

Understanding Scope and Context in JavaScript

Vishal Sharma — Fri, 12 May 2023 07:47:58 GMT

In JavaScript, scope and context are two different concepts that refer to different aspects of how variables and functions are accessed and used within the language.

Scope

Scope refers to the accessibility and visibility of variables, functions, and objects in some particular part of your code during runtime. It determines where variables and functions are defined and where they can be accessed. JavaScript has function scope and block scope, each with its unique characteristics.

Function Scope

Function scope refers to the accessibility of variables within a function and its nested functions. Variables declared with the var keyword and functions declarations have function scope. This means that you can access a variable or can call function anywhere in parent function regardless of where you have written it. Which is also called hoisting in JS.

If you try to access a variable before value assignment which is generally where we declare it you will give undefined value.

calculateTax(50000, true) // Accessed before declaration

function calculateTax(income, isRich) {
  console.log(tax) // it will print undefined

  if (isRich) {
    var extraTax = 4000
  } else {
    var extraTax = 0
  }

  console.log(extraTax) // 4000 as variables declares with var have function scope

  var taxRate = 0.2
  var tax = income * taxRate + extraTax
  console.log("Tax to be paid: $" + tax)
}

console.log(taxRate) // ReferenceError: taxRate is not defined

Block Scope

ES6 (ECMAScript 2015) introduced block scope with the let and const keywords. Variables declared with let and const have block scope, meaning they are accessible only within the block in which they are defined. (Typically in curly braces {})

function printNumbers() {
  for (let i = 0; i < 5; i++) {
    console.log(i)
  }
  console.log(i) // ReferenceError: i is not defined
}
printNumbers()

Here, the variable i is accessible within the for loop’s block but not outside of it.

Context

Context refers to the value of the this keyword within a function, indicating the object to which the function belongs. Understanding context is crucial when working with object-oriented JavaScript and dealing with method invocations.

const person = {
  name: "John",
  greet: function () {
    console.log("Hello, " + this.name)
  },
}

person.greet() // Hello, John

In this example, the greet function is defined within the person object. When invoked using person.greet(), the value of this refers to the person object, allowing access to its name property.

However, context can be easily misunderstood or lost, leading to unexpected results.

const person = {
  name: "John",
  greet: function () {
    setTimeout(function () {
      console.log("Hello, " + this.name) // Undefined
    }, 1000)
  },
}

person.greet()

In this case, the this inside the setTimeout callback function does not refer to the person object but to the global object (e.g., window in browsers). Consequently, this.name results in undefined. To maintain the correct context, you can use arrow functions (In which this refers to parent’s value of this) or explicitly bind the desired context using bind() or call().

Let’s resolve this issue and access the name property of the person object correctly using both approaches:

Using an Arrow Function:

Arrow functions have lexical scoping, meaning they inherit the this value from their surrounding code. You can replace the regular function inside setTimeout with an arrow function to maintain the context of the person object.

const person = {
  name: "John",
  greet: function () {
    setTimeout(() => {
      console.log("Hello, " + this.name) // Hello, John
    }, 1000)
  },
}

person.greet()

By using an arrow function, the this inside the arrow function will refer to the this value of the surrounding greet method, which is the person object.

Using Function Binding:

Another way to handle the context is by explicitly binding the desired context using the bind() method. You can bind the this value of the greet method to the anonymous function inside setTimeout.

const person = {
  name: "John",
  greet: function () {
    setTimeout(
      function () {
        console.log("Hello, " + this.name) // Hello, John
      }.bind(this),
      1000
    )
  },
}

person.greet()

Both approaches will output the desired result, printing “Hello, John” to the console after a delay of 1000 milliseconds.

Finally, Understanding scope and context in JavaScript is crucial for writing clean and error-free code, particularly when dealing with asynchronous operations. It allows you to control how variables and functions are accessed and how objects are referenced within your code, ultimately leading to more reliable and maintainable JavaScript applications.

Creating a Custom Hook in React

Vishal Sharma — Tue, 28 Mar 2023 12:11:44 GMT

What are Hooks?

Hooks are a feature introduced in React version 16.8 that allow developers to use state and other React features in functional components without the need for class components. Hooks are functions that allow you to use state, lifecycle methods, and other React features inside functional components.

There are several built-in hooks in React, including:

useState: allows you to add state to a component.

useEffect: allows you to perform side effects in a component (such as fetching data from an API and only run when value in dependency array change).

useLayoutEffect: similar to useEffect but runs synchronously after all DOM mutations.

useContext: allows you to access context values in a component.

useReducer: an alternative to useState that allows for more complex state management.

useRef: allows you to reference DOM elements or values that persist between renders.

useMemo: allows you to memoize a value (i.e. only recalculate when value in dependency array change).

useCallback: allows you to memoize a function (i.e. only recreate when value in dependency array change).

What is a custom hook?

React custom hooks are reusable functions that encapsulate and share logic between components. They allow developers to abstract away complex logic and create more modular, composable code. Custom hooks are created using the use prefix and follow the rules of hooks in React, meaning they can only be called at the top level of a component or other hook.

As a React developer, it’s important to learn the process of creating custom hooks to solve problems or add missing features within your own React projects. You can create custom hooks for various purposes like fetching, posting data, managing local storage, listening to screen size (breakpoints) change for css in js.

To create a custom hook, it’s important to remember the following two rules:

Custom Hooks should always be named with the prefix use. For example, a custom hook that manages local storage could be named useLocalStorage, while a hook that handles authentication could be named useAuthentication. In our case, we’ll be creating a hook called useFetch.

Custom Hooks should be composed of one or more built-in React Hooks or other custom Hooks. This means that every custom Hook is essentially a new combination of Hooks. If a custom Hook doesn’t use any Hooks internally, it shouldn’t be considered a custom Hook and should not use the use prefix.

Let’s Start Creating our own custom hook called useFetch.

Before start coding we will do brainstorming about what we need this custom hook to do and how much code abstraction we want.

So generally when we fetch data from api we set that data in a state variable or in store and show that data in UI using JSX.
We also store error in case if api fail or throw any error we would show proper error message in UI.
Then we also use a loading state to convey user that there is some processing going on by showing a loader or skeleton screen.
At last we also want to cancel the previous api call if we make same api call again. This is useful in case where user is searching. We should cancel the previous calls to make sure user see correct data on UI.

Now let’s start the coding 🚀

import { useState, useEffect } from "react"

export const useFetch = ({ url }) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url)
        const json = await response.json()
        setData(json)
        setLoading(false)
      } catch (error) {
        setError(error)
        setLoading(false)
      }
    }

    fetchData()
  }, [])
  return { data, loading, error }
}

Above we have an implementation of the hook which we can use in a component.

function MyComponent() {
  const { data, loading, error } = useFetch({
    url: "https://jsonplaceholder.typicode.com/todos/1",
  })

  if (loading) {
    return <div>Loading...</div>
  }

  if (error) {
    return <div>Error: {error.message}</div>
  }

  return <div>{data.title}</div>
}

But this is lacking some features like

It will only run on component mount. There is no other way to refetch the data.
This is always run on component mount we can’t skip the call.

Let’s add missing features to this hook

import { useState, useEffect, useCallback } from "react"

export const useFetch = ({ url, skip = false }) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  const fetchData = useCallback(() => {
    ;(async () => {
      try {
        const response = await fetch(url)
        const json = await response.json()
        setData(json)
        setLoading(false)
      } catch (error) {
        setError(error)
        setLoading(false)
      }
    })()
  }, [url])

  useEffect(() => {
    if (skip) return
    fetchData()
  }, [fetchData, skip])
  return { data, loading, error, refetch: fetchData }
}

Now this hook will the the api call

When we update the url (if this is a state and cause re-render)
We are now exporting a new function refetch and we can call this function to fetch data again on let’s say a button click.
At last we have added a new config property skip. If we set this to true the API call will be skipped and we can use refetch to fetch the data.

Finally we will add the abortController to cancel the previous api call the we try to make next api call before previous call finish executing.

import { useState, useEffect, useCallback, useRef } from "react"

export const useFetch = ({ url, skip = false }) => {
  const abortController = useRef(null)
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  const fetchData = useCallback(() => {
    ;(async () => {
      try {
        setLoading(true)
        abortController.current?.abort()
        abortController.current = new AbortController()
        const response = await fetch(url, {
          signal: abortController.current.signal,
        })
        const json = await response.json()
        setData(json)
        setError(null)
        setLoading(false)
      } catch (error) {
        setData(null)
        setError(error)
        setLoading(false)
      }
    })()
  }, [url])

  useEffect(() => {
    if (skip) return
    fetchData()
  }, [fetchData, skip])
  return { data, loading, error, refetch: fetchData }
}

By creating custom hooks like this, we are encapsulating complex logic and can reuse this across multiple components, making our code more modular and easier to maintain.

Now to to make a fetch API call in a component we just need a single expression like this.

const { data, loading, error, refetch } = useFetch({
  url: "https://jsonplaceholder.typicode.com/todos/1",
  skip: true,
})

Overall, React custom hooks are a powerful way for creating reusable and modular code in React applications. They can help reduce duplication, improve code organization, and make it easier to maintain and update complex logic over time.

Checkout following libraries for more custom ready to use hooks

Solid JS vs React JS. What is Better?

Vishal Sharma — Sat, 11 Mar 2023 12:11:44 GMT

Choosing the correct JavaScript framework is crucial for the success of your web development project in today’s fast-paced world. With a lot of options, deciding on the most suitable one for your needs can be confusing.

With ReactJS being released in 2013 it should not be much of a surprise that it’s more popular than SolidJS which was first open-sourced in 2018 and officially had version 1.0 released in 2021, making it roughly 5 years younger than ReactJS. But SolidJS is faster and efficient then ReactJS in almost all the metrics.

So what is SolidJS?

SolidJS is a modern frontend library that focuses on performance and fine-grained reactivity which means that it will not re-render the components every time a state updates but will track the functions and blocks using a dependency and update or execute that part only. Therefore it doest not use a virtual DOM but instead makes use of a compiler to track and update the reactive parts of your components.

On the surface, SolidJS and ReactJS appear to be closely related. Both SolidJS and ReactJS use JSX for templating (HTML in JS) and use hooks, functional components. SolidJS follows the same philosophy as ReactJS, with unidirectional data flow, read/write segregation and immutable interfaces.

But in browser, both manipulate page’s HTML elements (DOM) differently to deliver the desired user experience. ReactJS uses virtual dom and diffing algorithm to update dom on state update and SolidJS use reactive primitives (proxies) to manage state and use its compiler to update dom thus does not require a virtual dom.

A Brief Comparison

Feature	ReactJS	SolidJS
TypeScript support	✅	✅
Declarative nature	✅	✅
Unidirectional data flow	✅	✅
JSX first-class support	✅	✅
Direct manipulation of the DOM	❌	✅
Avoids component re-rendering	❌	✅
Highly performant	❌	✅
Rich community and ecosystem	✅	❌
Excellent developer documentation	✅	✅
Scaffolding tools	✅	✅
Conditional rendering	✅	✅
Server-side rendering (i.e., hydration)	✅	✅
Concurrent rendering (i.e., suspense)	✅	✅

Now we’ll go into more detail on the similarities and differences between ReactJS and SolidJS.

Starting a new project

The most critical part of adopting any frontend framework is its ease of use. No matter how performant a framework is, If using it to create a new project is too complex, its adoption in the frontend ecosystem will be slow.

Creating a new ReactJS project

ReactJS has different options for creating a new project, including create-react-app, Vite and a manual setup using Webpack. The most widely used is create-react-app. You can read more about this topic here. With Node.js installed on your computer, you can run this command on your terminal to create a new React project using create-react-app:

> npx create-react-app react-app

This will generate a new react application named react-app with webpack as the build tool and npm as the default package manager.

Creating a new SolidJS project

You can use SolidJS Vite Templates to create a new app. To create your new SolidJS app, run following commands on your terminal:

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm

This will generate a new SolidJS app named my-app with npm as the package manager and Vite as the build tool. Now you can use npm run dev to run the local server.

Component Structure

Components are one of the fundamental building blocks of modern frontend frameworks. React and SolidJS have exactly the same programmatic structures and support for components (individual, reusable pieces of code). SolidJS components look very similar to React functional components, and they both use JSX, the popular HTML-like syntax extension to JavaScript.

React and SolidJS offer the same components, but each framework has a unique rendering approach. React components render every time (barring memoization use), while SolidJS components only render once.

//SolidJS component

import Component from "./Component"

function App() {
  return (
    <div>
      <h1>Solid Application</h1>
      <Component />
    </div>
  )
}

export default App

//ReactJS component

import Component from "./Component"

function App() {
  return (
    <div>
      <h1>React Application</h1>
      <Component />
    </div>
  )
}

export default App

As you can see basic structure of both components is same. Also both use props the same way. The only difference is Solid does not allow prop destructuring as it loses the reference of the state variable due to this.

State Management

State refers to the data that frontend app use to either show on UI or do some action on. States are meant to change on user interaction and update the UI accordingly. State can be both global (available throughout the app) and local(available to a specific component).

State Management in ReactJS

For local state management in individual components, React use useState hook. Hooks are basically functions intended to run when triggered by the framework at specific times. For eg. useState function will run whenever component re-render and keeps track of the value you set using setter method. Under the hood useState hook use Closures to achieve this. Apart form this we can use useRef hook also to store the data but this is not going to trigger the re-render of the function.

State Management in SolidJS

SolidJs also use similar approach to manage state called createSignal. It looks similar to react but is very different fundamentally. createSignal method returns an array of two functions [getter,setter] = createSignal() which we can call to get and set the value. On the other hand, the SolidJS createSignal method can be used outside a component, so it’s easy to export it like any other variable and import it in any component it’s needed. This makes handling global state straightforward in SolidJS. Apart from this SolidJs also have a concept of derived Signal where you can do the operations on the the existing state to return a new value which will change every time state updates.

A function that accesses a signal is effectively also a signal: when its wrapped signal changes it will in turn update its readers.

const [count, setCount] = createSignal(0) //Signal
const doubleCount = () => count() * 2 // Derived Signal

Side Effects

React use useEffect hook to trigger side-effects on state change. useEffect hooks accepts a callback function and a dependency array. An empty dependency array means effect callback will run only once on component mount. We can also return a cleanup function from the callback which react is going to run every-time before re-calling the functions and at last on component unmount.

useEffect(() => {
  const connection = createConnection(serverUrl, roomId)
  connection.connect()
  return () => connection.disconnect()
}, [roomId])

Above useEffect callback will run on component mount and after that every time roomId change. That’s why it is preferred to pass primitive data types in dependency array as objects, arrays as react uses referential equality to check whether these complex values have changed. To make sure object is created only when required we can use useMemo hook which returns the same value and reference until a value in dependency array change. In case of functions we should use useCallback hook which again is going to return same function reference until a value in dependency array change.

In SolidJS an effect can be created by importing createEffect from solid-js and providing it a function. The effect automatically subscribes to any signal that is read during the function’s execution and reruns when any of them change. This means that we just need to use the state getter function inside the createEffect and sold will take care of the rest.

const [count, setCount] = createSignal(0)
createEffect(() => {
  console.log("The count is now", count())
})

The above callback function inside create effect will reruns whenever count changes.

Memoization

React depends on memoization for its applications to render quickly so it provides different memoization techniques from component memoization to functions memoization. Its important in react to use these as react will re-render components on state update and its upto us to figure out if we want to re-render a component, calculate a value or initialize a function on state update or not.

memo

memo is a higher order function which takes a component as first param and a callback function with boolean return value in second param. If you don’t pass second param react will shallow compare the current and previous props to determine if to render a component or not.

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
  //true means component will not  re-render
  //false means component  re-render.
  //This is the inverse from shouldComponentUpdate.
}
export default React.memo(MyComponent, areEqual)

Unlike the shouldComponentUpdate() method on class components, the areEqual function returns true if the props are equal and false if the props are not equal. This is the inverse from shouldComponentUpdate.

useCallback

useCallback hook lets you cache a function definition between re-renders. Means if you are passing a function down to a component which is using memo the component will still re-render on parent re-render as you are creating new definition of the passed function. In that case you can you useCallback hook that let’s you cache the function reference between re-renders.

const cachedFn = useCallback(fn, dependencies)

useMemo

useMemo lets you cache the result of a calculation between re-renders. So if you are doing some very expensive operation to get a value on component render you can use this hook to cache the value so that if any dependency updates that only function will run to calculate the value.

const cachedValue = useMemo(calculateValue, dependencies)

SolidJS createMemo

SolidJS manages memoization through a single method called createMemo. This method keeps track on any signal or derived state used and run only when any value updates.

const [count, setCount] = createSignal(0)
const cachedData = createMemo(() => {
  //some expensive operations using count()
  console.log(count())
})

Is SolidJS Better Than ReactJS?

Deciding whether to learn SolidJS or ReactJS depends on several factors you want to prioritize in your web app or web development journey.

SolidJS outperforms ReactJS in terms of performance and user-friendliness. Although it shares similarities with React, SolidJS has distinct implementation differences. For instance, state management in SolidJS is more straightforward, and its rendering and DOM update mechanisms are faster than those of ReactJS. Additionally, SolidJS offers a wide range of built-in functionalities that would require external libraries in ReactJS.

However, SolidJS being a relatively new framework, hasn’t gained the same level of adoption and ecosystem size as ReactJS. Therefore, it may be easier to find third-party packages and integrations that are compatible with ReactJS rather than SolidJS.

Furthermore, resources for learning and problem-solving are more readily available for ReactJS on websites like Stack Overflow and programming blogs. Additionally, if you’re looking for job opportunities in web development, ReactJS currently has a larger job market than SolidJS.

Ultimately, learning SolidJS should not pose a challenge for those who have already learned React because SolidJS offers a simpler syntax compared to React and use things similar to react like JSX, States, Effects, Memos.

Infinite scrolling in React

Vishal Sharma — Sun, 19 Feb 2023 12:11:44 GMT

So What is infinite scrolling?

Infinite scrolling is a technique used in web design to allow users to scroll through a large amount of content without having to navigate through multiple pages. It works by loading new content as the user scrolls down the page, dynamically updating the content as the user reaches the end of the current page.

How can we Implement this technique?

Infinite scrolling is often implemented using JavaScript, either by listening to scroll events or by using the IntersectionObserver API, which allows you to detect when an element enters or exits the viewport. When the user reaches the end of the current page, a new request is made to the server to load additional content, which is then appended to the existing content on the page.

Why do we need Infinite Scrolling?

Infinite scrolling is often used in social media platforms, such as Facebook, Twitter, and Instagram, as well as in e-commerce sites, blogs, and news sites. The goal is to provide a seamless user experience by eliminating the need to click through multiple pages to view more content.

Drawbacks of this technique.

Infinite scrolling has become a popular design trend, but it also has some drawbacks. One potential issue is that it can make it difficult for users to find specific content, as there is no clear navigation system to access different parts of the content. Additionally, infinite scrolling can cause performance issues if large amounts of content are loaded at once, which can slow down the user’s device or network or if the list become too large and user starts experiencing leg while scrolling.

Let’s Start.

Here’s an example of how to implement infinite scrolling using the IntersectionObserver API in a React:

import { useState, useEffect, useRef } from "react"
import "./App.scss"
import CollegeCard from "./components/college-card/college-card"
import { Loader } from "./components/presentational/loader/loader"
import { getCollegeList } from "./services/get-college-list"

function App() {
  const loadingRef = useRef(null)
  const [isLoading, setIsLoading] = useState(true)
  const [page, setPage] = useState(-1)
  const [colleges, setColleges] = useState([])

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: "20px",
      threshold: 1.0,
    }
    const observer = new IntersectionObserver(handleObserver, options)
    if (loadingRef.current) {
      observer.observe(loadingRef.current)
    }
  }, [])
  const handleObserver = entities => {
    const target = entities[0]
    if (target.isIntersecting) {
      setPage(page => page + 1)
    }
  }
  useEffect(() => {
    ;(async () => {
      if (page > -1) {
        setIsLoading(true)
        const collegeList = await getCollegeList(page)
        if (collegeList.length === 0) {
          setIsLoading(false)
        } else {
          setColleges(c => [...c, ...collegeList])
        }
      }
    })()
  }, [page])
  return (
    <div className="container">
      <h2>Colleges in North India</h2>
      <div className="cards">
        {Array.isArray(colleges) &&
          colleges.map((college, i) => (
            <CollegeCard key={i} college={college} />
          ))}
      </div>
      {
        <div ref={loadingRef} style={{ display: isLoading ? "block" : "none" }}>
          <Loader />
        </div>
      }
    </div>
  )
}

export default App

Take a look at this Demo which is using this code written above.

Front End interview archive

Vishal Sharma — Mon, 02 Jan 2023 12:11:44 GMT

Company 3

Round one

Difference between let, var, const.
Temporal dead zone.
Type of class

Closure output code snippet

let a = 52
function b() {
  let a
  console.log(a)
  a = 7
}

Priority queue and callback queue.

Output

let b = {
  name: "Vishal",
  getName() {
    console.log(this.name)
  },
}
setTimeout(b.getName, 0)

How to get vishal in console for previous question.
this in arrow function
Flatten a nested array.
Difference between Debounce and Throttle.
Implement both.
Difference between Context API and Redux.
Which to use in which case.
Memoization of state in Redux
useSelector hook
useReducer hook (useCase)
Usecases of useCallback and useMemo hook
Micro FE- React.lazy
In which case we still need to use class component (Error Boundary)
React Handson: Get Data from API- Render it to a table Add a checkbox filter data based on a property(true/false) by value of checkbox

Round Two

Questions about project.
Questions about micro FE (as my current project is a micro FE).
Prototype in JS.
Implement Class based and prototypal inheritance.
What is proto.
what is hasOwnProperty
Generator function
Its use in redux saga.
How it works
Some features of es6+
Arrow functions and normal functions
Some features of React 18
Major difference between class based and functional components (From a developer POV.)
useEffect() vs componentDidUpdate()
Difference in setState in class and functional component.
Create any custom hook (Again created useForm)
Testing React testing library vs Enzyme.
Enzyme Shallow va mount.
How you build and deploy the app.
Github package versioning and publishing (As we were using github to publish packages).

Round Three (Managerial)

Explain hooks.
How hooks work (closures).
React component lifecycle (Three Phases).
useEffect() all 3 phases.
create a custom hook to manage a from (Again created useForm hook).
How to check if user is offline.
Intercept API in offline (workbox).
How remember me works in browser.

Company 4

Round One

Design a Grid (40 minutes)
- Make it reusable and configurable.
- Column based Sorting, Filtering.
- Option to render custom cell and column.
- Pagination
- Loader, No data state
Questions around it.
- Async data loading
- Infinite scrolling
- Using scroll event or Intersection observer.
- React Virtualization

Round Two

Reverse an array
Improve solution (do not use new array) (use two pointers).
2Sum problem ( Given an array and a target number, Return all combinations for target sum and remove duplicated like if returning [1,6] do not return [6,1]).
3Sum problem. (Update solution to return combination of 3 values)
Implement Linked List
- Create Add, Get methods.
Reverse the linked list.
Create a Binary tree in js like create a Tree class and a Node class.
Add methods like adding value, getting value.
DFS and BFS traversal.
Merge two sorted array.

Hoisting in JS
Closures.
Design Patterns in JS.
Questions around callbacks, promises and async await.
Top level await in Node.
SSR vs CSR, ISR(Next.js)
Prototypal Inheritance (Implement)
How react use closures.
create useState hook.
Why we bundle code.
Any Idea about vite (How it is fast for development).

Company 5

Round One (Automated)

What is React.
Walkthrough Resume.
Some React MCQs
Hands on - Screen Shared (Used VS Code) Create a quiz application in React. (Wireframes given) Expected
- Timer of 30 seconds.
- On click of an option show correct i green and incorrect in red. Wait for 3 seconds before moving to next question.
- At last show total score.

Round Two

Some input output snippets.
What is Hoisting.
Function Expressions.
Some questions around setTimeout and promise.
Problem Solving Given an unsorted array with values -1000<n<1000 find largest product of any 3 values .
Event Delegation.
Event Delegation in React.
Redux and Context API.
State memoization.
React Hands on Create a chess layout with all the divs clickable and on click show and alert box with x,y coordinates of that div. Improve it by using event delegation.

Round Three(Managerial)

Discussion around project.
Tech stack I use (Prefer).
Redux (Architecture), React-Redux.
Jest & React Testing Library.
PWA (Offline request handling) workbox.
Custom Hook (Implement any hook) I implemented useForm from react-hook-forms
useCallback and useMemo (useCase).
Optimizing a react component.
Handson Create a folder structure where folder should expend and collapse on click and file should not be clickable.

Round Four (Director)

Intro
Project discussion.
React Handson. Create a custom RadioWrapper where options can be passed as children but manage state in wrapper. Used useContext. Now Optimize it in such a way that when use click on an option, only options with changing states(prev selected and current selected) should rerender.
Project discussion

Company 6

Round One

Introduction
What are closures, give examples.
What is bind().
Write polyfill for bind.
Convert it to call() and apply().
Pure components in React.
What is shallow Copy and Deep Copy.
Write a function to deepcopy an object.
Modify it so that it can deepcopy nested arrays.
3Sum problem.
What is a Binary Tree.
Write a function for DFS.
Covert recursion into loop.
Function to print top view of binary tree (Approach and pseudo code).
What is curring.
Write a function for sum of infinite curring sum(1)(2)(3)....(n)().
What is Critical Render Path.
Explain all the steps.
Techniques to optimize page’s performance.

Round Two

Infinite Curring (Repeated).
XSS and CSRF attacks.
Difference between Context API and Redux.
Binary Tree zig-zag traversal.
Write a function to return all the nodes from dom which contain given class name string.
React Hands on Code a Stopwatch. Three button—> Start , Pause, Reset.
React Handson Create a input field. Make an API call(Dummy) when user type. Debounce this API request.
Difference between Debounce and Throttle.

Round Three (Managerial)

Intro
Why this Company.
About current Project.
Role and Responsibilities

Company 7

Round One

JS code snippets.
React hooks code. Identify the issue.

const A = ({ isActive }) => {
  const [b, setB] = useState(isActive)
  if (isActive) {
    useEffect(() => {
      console.log("I am active")
    }, [])
  }
}

There are two issues in this.

What is Redux
Why we need React redux
Is it mandatory to use react-redux library.
I said no, What is another way.
Can we use redux in vanilla js
I said yes. How?
what is connect method
Can you implement it.
First with class based component.
Convert it into functional component.

Round Two

Create a timer in React.
Increment time by 1 second (faced react 18 double render issue. Fixed it).
Modify it ti create timer with given time in seconds from input field and keep decreasing unit 0.
Now change input from seconds to minutes and show two divs like digital clock (minutes:seconds).
Now add a pause button.
Add a reset button to reset clock to input field value.
Virtual DOM.
How diffing algo work.
Optimizing rerender in react.
Problem Solving: Given an array [1,0,2,0,1,2,1,0,1,2] Sort this array in one pass. First is to create three arrays and concatenate. Improve to inplace sorting.

Company 8

Round One

Hoisting.
Difference between let, const, var.
callback queue and priority queue.
Implement debounce.
What is a prototype
what is proto
Implement promise.all
Promise array can have string, number, object.
Merge 2 sorted arrays.

Round Two

Lift coconut puzzle.
Divide a cake into 8 pieces using 3 cuts.
zig zag tree traversal.
Move zeros to last in one pass [0,1,2,5,0,7,9]—>[1,2,5,7,9,0,0]
Suppose we have an image of Map of India where user can click on a state. Write an algorithm to find which state is clicked

Other

Round 1

Create a tic tac toe game.

Round 1

JS output Code snippets.
Write debounce in JS
Call Stack, Event Queue
CSS- centering a DIV
Adding gap in flex.
Grid basics
Symantec tags.
Block, inline, inline-block

Round One

JS output code snippets
What is a polyfill.
Write polyfill for bind()
Write a function to flatten a nested object
Object can have array as property
Write a function to return all pythagorean triplets from an array.

Round One

Why react.
React vs vanilla js
Component lifecycle.
Hands on: Create star rating component We can pass rating in props. Rating can have decimal value to .5 like 1.5, 2.5 Print half star in that case. If I hover on any star, all previous stars should fill and on click persist rating and onblur go to prev rating.

Front End interview questions compilation

Vishal Sharma — Sun, 25 Dec 2022 12:11:44 GMT

This article is a compilation of all the questions asked during my job hunt in product-based companies.

I followed this blog during my Interview preparation. Do check this out. All front end Interview questions asked during my recent job hunt.

Interview Process

In most of the companies I went through either 4 or 5 rounds.

First Round JavaScript,CSS advance concepts with 1 or 2 competitive problems(Leetcode easy or medium). Second Round Advance Javascript and React concepts with 1 UI assignment in React. Third Round Same as previous Round but more focused on React with a Senior Dev. Fourth Round(Only in few companies) Design Patterns in JS and React. Questions about application architecture (From Previous projects) and 1 or 2 FE application architecture design problems. Fifth Round Managerial Round with some technical questions. Mostly about previous projects.

Javascript

Create Promise.allSettled() custom implementation where if all promises fail then it should reject and if any promise pass it should resolve.

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("data")
  }, 1000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("data")
  }, 3000)
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("error")
  }, 500)
})

const p4 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("data")
  }, 0)
})

const customPromiseAll = promises => {
  const result = []
  let rejected = 0
  let complete = 0

  return new Promise((resolve, reject) => {
    promises.forEach((p, i) => {
      p.then(data => {
        result[i] = data
        complete++
        if (complete === promises.length) {
          resolve(result)
        }
      }).catch(err => {
        result[i] = err
        complete++
        rejected++
        if (rejected === promises.length) {
          reject(result)
        }
        if (complete === promises.length) {
          resolve(result)
        }
      })
    })
  })
}

customPromiseAll([p1, p2, p3, p4])
  .then(data => console.log(data))
  .catch(err => console.log(err))

Randomize a given array.

const arr = [0, 1, 2, 3, 4]

const randomize = arr => {
  let randomIndex = Math.floor(Math.random() * arr.length)

  for (let i = 0; i < arr.length; i++) {
    ;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
    randomIndex = Math.floor(Math.random() * arr.length)
  }
  return arr
}

const newArr = randomize(arr)
console.log(newArr)

Write a function which takes a string class name and return an array of all the elements that contain the class in document. i.e. Basic implementation of querySelectorAll() with class.

function getAllClasses(name) {
  const el = []
  let curr = [document.body]
  while (curr.length) {
    let first = curr.shift()
    const nodes = first.children
    const arr = [...nodes]
    arr.forEach(node => {
      curr.push(node)
      if (node.className === name) {
        el.push(node)
      }
    })
  }

  return el
}

console.log(getAllClasses("abc"))

Write a JSON structure of a directory like which contain files, folders with nested files folders.

{
  "name": "root",
  "type": "folder",
  "children": [
    {
      "name": "file1",
      "type": "file"
    },
    {
      "name": "folder1",
      "type": "folder",
      "children": [
        {
          "name": "file2",
          "type": "file"
        }
      ]
    }
  ]
}

Now write a function to traverse this object and print output on console with proper indentation on console.

const traverse = (data, indent, obj) => {
  obj.str += "\n" + " ".repeat(indent) + data.name
  if (data.type === "folder") {
    data.children.forEach(child => {
      traverse(child, indent + 2, obj)
    })
  }
  return obj.str
}

console.log(traverse(directoryRoot[0], 0, { str: "" }))

Flatten a nested object. Object property can have a string, number, array(nested),boolean, object.

const details = {
  name: "vishal",
  telephone: 9816120038,
  skills: ["Javascript", "react", "html", "css"],
  address: {
    city: "Bilaspur",
    state: "Himachal Pradesh",
    pin: 174021,
  },
  experience: {
    current: {
      company: "PS",
      time: {
        joining: "30th May 2021",
      },
    },
    previous: {
      company: "Infosys",
      time: {
        joining: "3rd December 2018",
        leaving: "24th May 2021",
      },
    },
  },
}

const flattenObjFun = (obj, prefix, flattenObj) => {
  Object.keys(obj).forEach(key => {
    if (
      typeof obj[key] === "object" &&
      obj[key] !== null &&
      !Array.isArray(obj[key])
    ) {
      flattenObjFun(obj[key], `${prefix}_${key}`, flattenObj)
    } else {
      flattenObj[`${prefix}_${key}`] = obj[key]
    }
  })

  return flattenObj
}

const flatObj = flattenObjFun(details, "details", {})

console.log(flatObj)
//output
{
  details_name: 'vishal',
  details_telephone: 9816120038,
  details_skills: [ 'Javascript', 'react', 'html', 'css' ],
  details_address_city: 'Bilaspur',
  details_address_state: 'Himachal Pradesh',
  details_address_pin: 174021,
  details_experience_current_company: 'PS',
  details_experience_current_time_joining: '30th May 2021',
  details_experience_previous_company: 'Infosys',
  details_experience_previous_time_joining: '3rd December 2018',
  details_experience_previous_time_leaving: '24th May 2021'
}

Create a static funtion LastFullfilled() to Promise object. It will take an array of promises and will resolve or reject only when last promise(Takes most time) will resolve or reject.(Return only last response).

function task(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(time)
    }, time)
  })
}

const tasksList = [task(1000), task(5000), task(3000)]

Promise.lastFullfilled = function (promises) {
  let complete = 0
  let failed = 0
  return new Promise((resolve, reject) => {
    promises.forEach(promise => {
      promise
        .then(data => {
          complete++
          if (complete === promises.length) {
            resolve(data)
          }
        })
        .catch(err => {
          complete++
          failed++
          if (failed === promises.length) reject(err)
        })
    })
  })
}

Promise.lastFullfilled(tasksList)
  .then(results => console.log(results))
  .catch(error => console.error(error))

Polyfill for call(), apply(), bind()

const obj1 = {
  a: 5,
  printA(a1, a2) {
    console.log(this.a)
    console.log(a1, a2)
  },
}

const obj2 = {
  a: 7,
}

const customCall = function (context, ...args) {
  const fun = this
  context.fnRef = fun
  context.fnRef(...args)
}
Function.prototype.customCall = customCall
obj1.printA.customCall(obj2, 1, 2)
//7
//1 2

const customApply = function (context, args = []) {
  const fun = this
  context.fnRef = fun
  context.fnRef(...args)
}
Function.prototype.customApply = customApply
obj1.printA.customApply(obj2, [3, 4])
//7
//3 4
const customBind = function (context) {
  const fun = this
  return function (...args) {
    context.fnRef = fun
    context.fnRef(...args)
  }
}
Function.prototype.customBind = customBind

const bindFn = obj1.printA.customBind(obj2)
bindFn(7, 8)
//7
//7 8

Polyfill of array reduce, map, flat

function customReduce(callback, initialVal) {
  let prevValue = initialVal

  for (let i = 0; i < this.length; i++) {
    prevValue = callback(prevValue, this[i], i, this)
  }
  return prevValue
}

if (!Array.prototype.customReduce) {
  Array.prototype.customReduce = customReduce
}

const value = [1, 2, 3, 4].customReduce((acc, curr, index, arr) => {
  return acc + curr
}, 0)

console.log({ value }) // { value: 10 }

function customMap(callback) {
  const newArr = []
  for (let i = 0; i < this.length; i++) {
    newArr.push(callback(this[i], i, this))
  }
  return newArr
}

if (!Array.prototype.customMap) {
  Array.prototype.customMap = customMap
}

const newArr = [1, 2, 3, 4, 5].customMap((value, index, arr) => {
  return value * index
})

console.log(newArr) //[ 0, 2, 6, 12, 20 ]

function customFlat(arr, depth) {
  return arr.reduce((acc, curr) => {
    const isArray = Array.isArray(curr)
    return acc.concat(isArray && depth > 0 ? customFlat(curr, depth - 1) : curr)
  }, [])
}

if (!Array.prototype.customFlat) {
  Array.prototype.customFlat = function (depth = 3) {
    return customFlat(this, depth)
  }
}

console.log([1, 2, [3, 4, [5, 6, [7, [8, 9, 10]]]]].customFlat())
//[1, 2, 3, 4,  5,6, 7, 8, 9, 10]

Closure (Basic problem) Create a function which returns an objet with next() as property. Calling next should return +1 value every time it is called. Like 1,2,3,4…

const closure = () => {
  let a = 0
  return {
    next: () => {
      a = a + 1
      return a
    },
  }
}

const value = closure()

console.log(value.next()) //1
console.log(value.next()) //2
console.log(value.next()) //3
console.log(value.next()) //4

Implement debounce and throttle

//Debounce
const debounce = (fn, delay) => {
  let timer = null

  return (...args) => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn(...args)
    }, delay)
  }
}

const fn = debounce(() => {
  console.log("Only in one second")
}, 1000)

fn()
fn()
fn()
fn()
fn()

//Throttle
const throttle = (fn, delay) => {
  let allow = true

  return (...args) => {
    if (allow) {
      fn(...args)
      allow = false
      setTimeout(() => {
        allow = true
      }, delay)
    }
  }
}

const fn1 = throttle(() => {
  console.log("Only after one second")
}, 1000)

fn1()
fn1()
fn1()

//Output
// Only after one second
// Only in one second

React.js Handson

Create a commentBox and show the comments list. In Comments list user can reply to a comment till nth level. User can Edit any comment.

Solution

Fetch live data from a cricket score API.
- Create 3 buttons Start, Pause, Reset
- Clicking on start should fetch data from API after every 10 seconds and show in browser.
- Clicking on pause should pause timer.
- Clicking on reset should reset timer
Design a basic HTML previewer.
Design an accordion with open and close animation. Add props openOne. If it is true then only one accordion should be opened at a time in Accordion Group. If false all can be opened.
Fetch Data from an API and render to a table. Add a checkbox filter. On checking only the records with a field(status) true should come in table.
Design a grid component. It should be reusable and configurable. Add column level sorting and filtering. Add pagination, async data loading and infinite scrolling.
2 hours assignment: Create a quiz application in React. (Wireframes given) Expected
1. Timer of 30 seconds.
2. On click of an option show correct in green and incorrect in red. Wait for 3 seconds before moving to next question.
3. At last show total score.
Create a 4X4 layout with all the divs clickable and on click show and alert box with x,y coordinates of that div. Improve it by using event delegation. (This was in Vanilla.js) Demo
Create a folder structure where folder should expend and collapse on click and file should not be clickable. Demo
Create a custom RadioWrapper where options can be passed as children but manage state in wrapper. Used useContext. Now Optimize it in such a way that when use click on an option, only options with changing states(prev selected and current selected) should rerender.
Create a tic tac toe game.
Create star rating component We can pass rating in props. Rating can have decimal value to .5 like 1.5, 2.5 Print half star in that case. If I hover on any star, all previous stars should fill and on click persist rating and onblur go to prev rating.
Code a Stopwatch. Three button—> Start , Pause, Reset.
Create a input field. Make an API call(Dummy) when user type. Debounce this API request.

7 ways to generate a react project

Vishal Sharma — Wed, 25 May 2022 12:11:44 GMT

Creating a new React application is not a simple task.

Creating a new React application requires careful consideration of various factors that will impact its scalability, collaboration and compatibility with your current and future tools and needs. These decisions include the type of app you are building (e.g. Complex web app, static landing site , content heavy blog site or an seo targeted e-commerce app), the level of server engagement, the number of developers working on the app, the reuse of components from other applications, and the build and deployment process. These decisions should be made with your end goal in mind and will require a significant amount of effort to ensure the success of the app.

So let’s start with what’s React?

React is a JavaScript library for building user interfaces. It was developed by Facebook and is widely used for building web and mobile applications. React allows developers to create reusable components that can be easily managed and composed to build complex user interfaces. React uses a virtual DOM (Document Object Model) to optimize the rendering of components and improve the performance of the application.

This article presents a collection of the methods, frameworks and tools for creating React applications. These options range from optimizing for quick setup for small websites (or just to test react) to catering to global scale, and some even do both. I hope that this article will assist you in constructing a React application that satisfies your needs, reduces errors and time wasted in the process.

1. Nothing but React

You can include the React bundle from a CDN directly in your HTML file to quickly get a taste of how React works and what it can do. However, this method is not recommended for creating production applications.

To use React from a CDN (Content Delivery Network) in an HTML file, you can include the React and ReactDOM libraries by adding script tags to the head of your HTML file.

Here is an example of how to include React and ReactDOM from a CDN in an HTML file:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
  </head>
  <body>
    <!-- your HTML content goes here -->
  </body>
</html>

Note that the exact URL of the React library may vary depending on the version of React that you want to use. You can find the latest version of React and ReactDOM at the following URLs:

Once you have included the React and ReactDOM libraries in your HTML file, you can use React to create and render components in your application.

For example, you can create a simple React component using the React.createElement function and render it to the page using the ReactDOM.render function:

<!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>React CDN</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
    <script>
      ReactDOM.createRoot(document.getElementById("root")).render(
        React.createElement("h1", null, "Hello world!")
      )
    </script>
  </body>
</html>

This will render an h1 element with the text Hello world!.

Using this way use can not use .jsx syntax because we don’t have babel parser in place to parse and covert the syntax to plain JS.

2. From Scratch (Without any tooling)

React and React DOM are JavaScript libraries that are typically installed via the npm package manager. These libraries provide the building blocks for creating web applications using the React framework.

Once React and React DOM are installed, it is common to also set up a build tool such as webpack and a transpiler such as Babel in order to bundle and transpile the code for the application. This process involves creating configuration files that specify how webpack and Babel should be used to build the application.

Overall, the process of setting up a React application involves installing the necessary npm packages and configuring webpack and Babel to properly build and transpile the code. This allows developers to manage all of the build-related configuration in a centralized location, making it easier to maintain and update the application as it grows.

I have written a detailed blog explaining this method. Read it here

3. Next.js

Next.js is a popular framework for building server-rendered React applications. It provides a simple and efficient way to create React projects with automatic code splitting, server-side rendering, and optimized performance.

To generate a new React project using Next.js, you can follow these steps:

Install the create-next-app command-line tool by running npm install -g create-next-app. This will allow you to easily create a new Next.js project.
Create a new Next.js project by running the create-next-app command and specifying a name for your project:

create-next-app my-project or use npx create-next-app my-project which don’t require you to install create-next-app package locally.

This will create a new directory with the specified name and generate the basic file structure and configuration for a Next.js project.

Navigate to the new project directory and install the dependencies by running npm install.
Run the development server by running npm run dev. This will start the development server and open a new browser window with your Next.js app.
Modify the pages/index.js file to modify the homepage and add content to your app.
Next.js uses the pages directory to define the routes of your app. Each JavaScript file in the pages directory corresponds to a route, and the components exported from those files are rendered when the corresponding route is accessed.

For example, the pages/index.js file defines the root route of the app, and the components exported from this file are rendered when the root route is accessed.

To create a new route create a new js file in pages directory and default export the react component. Next will create a route for you with name of the js file.

For example, create pages/newPage.js file and next will create /newPage route.

Next by default will server side render each page and will return static html along will react bundle to browser.
You can also create dynamic routes in pages directory. Dynamic routes are routes that have a variable component, such as /posts/:id or /users/:username. These routes allow you to render different content for each value of the variable component. For example To create a dynamic route for /posts/:id create a folder with name posts in pages directory and inside this folder create file [id].js. Along with this you can create an index.js which will render on /posts route.

Along with a react component you can also use lifecycle methods of next.js.

In a Next.js page getServerSideProps, getInitialProps, getStaticPaths, and getStaticProps are functions that can be used to fetch data or perform other tasks before a page is rendered. These functions are called “lifecycle methods” because they are executed at different stages of the page rendering process.

Here is a brief overview of these lifecycle methods:

getServerSideProps is a function that is executed on the server side before the page is rendered. It allows you to fetch data or perform other tasks that require server-side rendering, such as server-side rendering with authenticated content or server-side rendering with a database. The results of getServerSideProps are passed to the page as props.
getInitialProps is a legacy function that was used in Next.js versions prior to 9.3. It is similar to getServerSideProps but is executed on the server side as well as the client side. If you are using a version of Next.js prior to 9.3, you can use getInitialProps to fetch data or perform other tasks before the page is rendered.
getStaticProps is a function that is executed at build time to generate static pages. It allows you to fetch data or perform other tasks that do not require server-side rendering, such as generating static pages with data from an API or a file system. The results of getStaticProps are passed to the page as props and are available at runtime.
getStaticPaths is a function that is used in conjunction with getStaticProps to generate static pages for dynamic routes.To generate static pages for dynamic routes, you need to specify the values of the variable component that you want to pre-render. You can do this by implementing the getStaticPaths function in your page file.

In general, you should use getServerSideProps when you need to perform server-side rendering, such as with authenticated content or a database. You should use getStaticProps when you need to generate static pages, such as with data from an API or a file system, getStaticPaths to create and return list of dynamic paths on build time . You should avoid using getInitialProps if you are using a version of Next.js newer than 9.3.

By using these lifecycle methods, you can control the data and behavior of your pages in a Next.js application and optimize the rendering process for different scenarios.

Here is an example of a page file with all lifecycle methods

// pages/posts/[id].js
import React from "react"
// Server Side fetch
import fetch from "node-fetch"

const Posts = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>Welcome to my Next.js application.</p>
    </div>
  )
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch("https://.../posts")
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map(post => `/posts/${post.id}`)

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should return 404.
  return { paths, fallback: false }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

export default Posts

Finally Next also provides a way to create api routes. Create api folder inside pages and inside this create apiRoute.js. Here you can default export a function to handle api calls to /api/apiRoute.js. Inside the function we can use switch case statement to handle api methods like GET, POST.

export default function handler(req, res) {
  const { method, body } = req

  switch (method) {
    case "POST": {
      res.status(200).json({ name: "John Doe", method })
    }
    case "GET": {
      res.status(200).json({ name: "John Doe", method })
    }
  }
}

To build your Next.js app for production, run the npm run build command and then the npm run start command to start the production server.

Overall next.js is a good to go if your application involves lots of dynamic rendering and routing but you also want to use server side rendering to improve page performance and seo.

4. Gatsby

Gatsby.js is a static site generator for React that allows you to build fast and modern websites. It comes GraphQL out of the box to access data. GraphQL allows you to declaratively express your data needs. This is done with queries, queries are the representation of the data you need.

GraphQL is certainly not required, but the benefits of adopting GraphQL are significant. GraphQL will simplify the process of building and optimizing your pages, so it’s considered a best practice for structuring and writing Gatsby applications.

One of the key benefits of Gatsby.js is it let’s you create multiple pages using a single template on build time. In gatsby-node.js, you can use the GraphQL query to generate pages.

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  // Define a template for blog post
  const blogPost = path.resolve(`./src/templates/blog-post.js`)

  // Get all markdown blog posts sorted by date
  const result = await graphql(
    `
      {
        allMarkdownRemark(sort: { frontmatter: { date: DESC } }, limit: 1000) {
          nodes {
            fields {
              slug
            }
            frontmatter {
              title
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    reporter.panicOnBuild(
      `There was an error loading your blog posts`,
      result.errors
    )
    return
  }

  const posts = result.data.allMarkdownRemark.nodes

  // Create blog posts pages
  // But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js)
  // `context` is available in the template as a prop and as a variable in GraphQL

  if (posts.length > 0) {
    posts.forEach((post, index) => {
      const previous = index === posts.length - 1 ? null : posts[index + 1]
      const next = index === 0 ? null : posts[index - 1]

      createPage({
        path: post.fields.slug,
        component: blogPost,
        context: {
          slug: post.fields.slug,
          previous,
          next,
        },
      })
    })
  }
}

It uses server-side rendering and code splitting to deliver fast initial load times and smooth navigations. It also includes optimized image loading and automatic asset optimization to further improve the performance of your site.

Gatsby.js also offers a rich developer experience with features such as hot reloading, error debugging, and integration with popular tools and libraries. You can also use Gatsby’s plugin system to extend the functionality of your site with features such as analytics, SEO, or social media integration.

Gatsby.js also provides a flexible and powerful routing system that allows you to define the routes and corresponding pages of your site. You can create static pages or use dynamic routes to render different content for different URLs.

In addition to its core features, Gatsby.js has a vibrant and active community that maintains a wide variety of plugins and themes to help you build your site. You can use these resources to quickly add functionality or customize the appearance of your site.

How to start?

To setup gatsby project you can choose from Gatsby Starter Library which provides multiple starter projects with different frameworks integration out of the box. https://www.gatsbyjs.com/starters/ or we can you gatsby’s Quick Start Guide https://www.gatsbyjs.com/docs/quick-start/

Gatsby also have a next.js like approach for routing where we create a .js files in pages directory and export default the React component and then that component will be exposed to /<filename> route. In addition to this we can export a Head function from the file and return from that function will be injected to head tag of the page.

I have used Gatsby to create this blog site.

Why Gatsby?

Gatsby is all about speed: well-optimized websites with great SEO and performance and great ramp-up speed to build the app. It generates static HTML in advance, which can subsequently be stored on CDNs (Content Delivery Network) across the globe to facilitate quicker access.

One best thing I like about gatsby is its plugin ecosystem where you can get a plugin for almost anything.

From transforming markdown to html, adding _target to external routes. Ahead caching internal routes created by markdown, Adding custom meta tags, Generating RSS Feed you will get a plugin for the task you want to do or to extend its functionality.

Overall, Gatsby.js is a powerful and flexible tool for building fast and modern websites with React. Whether you are building a blog, portfolio, or e-commerce site, Gatsby.js has the tools and resources you need to create a high-performing and scalable site.

5. Remix.run

Remix is fullstack React frameworks similar to next.js but with its own unique features and benefits. Originally offered as a paid subscription service, the creators of Remix announced in October 2021 that the framework would be made open source.

One key feature of Remix is its focus on server-side rendering (SSR). This means that the backend and frontend of an application can be built using a single Remix app. Instead of fetching data on the frontend and rendering it on the screen, as is the case with vanilla React, Remix fetches data on the backend and serves the HTML directly to the user. This approach has the benefit of minimizing the amount of JavaScript that is required on the client side, resulting in faster page loads and a more efficient user experience.

But wait next is also doing same thing so what’s the difference. Why would I use Remix instead of Next.

Well Co-Founder of Remix Ryan Florence has written a detailed blog on this topic. You can read it here.

In this blog he has listed following advantages of using Remix over Next.

Remix is as fast or faster than Next.js at serving static content
Remix is faster than Next.js at serving dynamic content
Remix enables fast user experiences even on slow networks
Remix automatically handles errors, interruptions, and race conditions, Next.js doesn’t
Next.js encourages client side JavaScript for serving dynamic content, Remix doesn’t
Next.js requires client side JavaScript for data mutations, Remix doesn’t
Next.js build times increase linearly with your data, Remix build times are nearly instant and decoupled from data
Next.js requires you to change your application architecture and sacrifice performance when your data scales
We think Remix’s abstractions lead to better application code

One of the standout features of Remix is its support for nested routing. Nested routing refers to the idea of linking segments of the URL to the component hierarchy in the user interface. This has a number of benefits, as it allows developers to use the URL to control things like which layouts are rendered on the page, which JavaScript bundles are loaded, and what data dependencies those layouts have.

In contrast to some web applications that fetch data inside of components, which can result in slower page loads and a less smooth user experience, Remix loads data in parallel on the server and sends a fully formed HTML document to the client. This helps to improve the performance and efficiency of the application, as it minimizes the amount of data that needs to be transferred over the network and reduces the number of requests that need to be made.

You can follow https://remix.run/docs/en/v1/tutorials/blog this blog to setup the remix project.

6. Create React App

This one is the most commonly used tool on the list, but probably the last choice for a real-world production application.

Create React App is a command-line tool that allows you to quickly create and set up a new React application. It is developed and maintained by the React team and is the easiest way to create a new React application.

Using Create React App, you can create a new React application with just a few commands. It will automatically set up a development environment for you, including installing the necessary dependencies, configuring Webpack and Babel, and creating a development server.

One of the key benefits of Create React App is its simplicity. It abstracts away many of the complexities of setting up a React application, allowing you to focus on building your application instead of worrying about the underlying configuration.

Create React App will abstract the config and provide support of

Importing svg as component
Sass, Just need to install sass compiler.
Testing with Jest and React Testing Library.
Latest React Features like using React.lazy for code splitting.

Create React app is good option if creating admin dashboards where seo is not important and focus is on shipping product quickly instead of website optimization.

To create a new react app follow these steps

npx create-react-app my-app
cd my-app
npm install
npm start

Create React App also provides option to add typescript and to change package manager to yarn instead of npm.

npx create-react-app my-app --template typescript

This command will generate a typescript project.

In addition, the structure of a React app created with Create React App is consistent across projects, which makes it easier to switch between different React projects and understand how they are organized.

7. Vite

Vite is a modern build tool for JavaScript applications that allows you to quickly set up and develop a new project. It is designed to be fast and lightweight, making it an excellent choice for building React applications.

I personally prefer vite over cra as dev build time is too fast in vite. Around 10x fast.

Why Vite is fast

At its core, Vite does 2 things

Serve your code locally during development.
Bundle your Javascript, CSS and other assets together for production.

There are other tools(bundlers) that do the same thing, such as webpack, Parcel and Rollup, so what makes Vite different?

The problem with the tools mentioned above is that they have to build everything on every save, and if you have a very large application, that could take several minutes every time you save, even with Hot reloading in some frameworks, the update speed gets significantly slower as you add more code and dependencies to the app.

Vite has taken a different approach to this, kind of a reverse approach. Vite starts the server right away, takes the dependencies that don’t change often, and pre-bundles them using esbuild.

Vite uses route-based code-splitting to figure out what parts of the code actually need to be loaded, and doesn’t have to pre-bundle everything.

Vite serves the source code using native ES Module support in modern browsers. This lets the browser take the job of bundling in development, which consequently makes your code to load instantly, no matter how large the app is.

It also supports Hot Module Replacement for an extremely fast feedback loop during development.

When building for production, Vite uses Rollup under the hood, so you don’t have to worry about configuring it.

Creating a Project with Vite

To create a Vite application, open your terminal and navigate to the folder where you want to save the Vite program. Then run this command:

npm create vite@latest

You’ll be prompted to select a framework and a variant(template). In our case, we’ll be using React, so select React.

You can also directly specify the template you want to use and the project name in one single line:

npm create vite@latest react-app --template react

Next, run the following commands in the terminal

cd react-app
npm install
npm run dev

Running the above command will start the development server. Then open your browser and enter http://localhost:3000.

Vite is faster then cra but is relatively new and don’t have that much community compared to cra. But it’s a good option if you are creating a side project in react as it comes with various templates and also support server side rendering.

Apart from react you can generate projects in several other frameworks also. https://vitejs.dev/guide/#trying-vite-online

Conclusion

There we go! We’ve looked at 7 different methods for generating a React Project. Each with its own pros and cons. Now that you have a better understanding of the options available to you, you can choose the best method for creating your next big thing. I hope this article was helpful in your decision-making process.

Create React project without CRA(or any build tool)

Vishal Sharma — Fri, 13 May 2022 12:11:44 GMT

But why? Can’t we use CRA or other similar tools.

While CRA can be a useful tool for quickly getting started with a new React project, creating a project from scratch has several advantages that can be valuable for developers who want more control, a deeper understanding of their project, or the opportunity to try out new technologies and approaches.

Creating a React project from scratch has several advantages over using a tool like Create React App (CRA).

One of the main advantages is that it gives you more control over the project setup and configuration. When you use CRA, the tool handles a lot of the setup and configuration for you, which can be convenient. However, this also means that you have less control over how the project is set up and how it is built.

On the other hand, when you create a project from scratch, you have the opportunity to fully customize the project setup and build process to suit your needs. This can be particularly useful if you have specific requirements or preferences for how your project should be set up, or if you want to use a particular build tool or configuration that is not supported by CRA.

Another advantage of creating a project from scratch is that it can help you better understand the underlying technologies and tools that are being used in your project. By setting up the project yourself, you will gain a deeper understanding of how the different pieces fit together and how they work, which can be valuable knowledge to have as you develop and maintain your project.

Finally, creating a project from scratch also gives you the opportunity to learn and experiment with new technologies and approaches. While CRA is a convenient tool that can help you get started quickly, it may not always support the latest technologies or best practices. By creating a project from scratch, you can try out new tools and approaches and see how they work in your project.

Before we start

Before starting, you need to set up the environment:

Installing Node.js

Node.js is an open-source, cross-platform runtime environment that helps us write JavaScript applications and execute them.

Node >=18.0.0 You can get it from: https://nodejs.org/en/. This will also install the npm (node package manager).

IDE

To start coding with React, we can use the Visual Studio Code IDE which can be downloaded from: https://code.visualstudio.com/download. I personally prefer vscode but you can use any text editor of your choice like atom, webstorm, sublime.

Let’s Start

To generate a React project without using any tooling, you can follow these steps:

Create a new directory for your project and navigate to it.
Initialize a new npm package by running npm init and following the prompts. This will create a package.json file in your project directory.
Install the React and ReactDOM packages by running npm install react react-dom. This will add the React and ReactDOM packages to your project as dependencies and update the package.json file.
Create an index.html file in your project directory and add the following content:

<!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>React CDN</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

Create an index.js file in your project directory and add the following content:

import "/node_modules/react/umd/react.development.js"
import "/node_modules/react-dom/umd/react-dom.development.js"

const element = React.createElement("h1", null, "Hello world!")
ReactDOM.render(element, document.getElementById("root"))

Run a local development server by installing a tool such as http-server and running http-server in your project directory.
Open your browser and navigate to the URL of your local development server to view your React app.

Now let’s enhance this by using babel to transpile ths .jsx syntax and webpack to generate dev and prod bundles.

To enhance the project that using webpack and Babel, we can follow these steps:

Install the webpack and webpack-cli packages by running npm install --save-dev webpack webpack-cli. This will add the webpack and webpack-cli packages to your project as development dependencies and update the package.json file.
Install the Babel packages by runningnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader. This will add the Babel packages to your project as development dependencies and update the package.json file.
Create a webpack.config.js file in your project directory and add the following content:

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
}

This configuration tells webpack to use the babel-loader to transpile your JavaScript code using the Babel presets for environment and React.

Modify the index.html file to include the bundle file generated by webpack:

<!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>React CDN</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Webpack will create build at this path -->
    <script src="dist/bundle.js"></script>
  </body>
</html>

Modify the package.json file to include the following scripts:

"scripts": {
    "build": "webpack --mode production",
  }

Modify index.js to:

import ReactDOM from "react-dom/client"

const element = <h1>Hello World</h1>
ReactDOM.createRoot(document.getElementById("root")).render(element) // React 18

This script allow you to build your project for production using npm run build.

Run npm run build to build your project. This will generate dist folder with bundle.js file.
Now run index.html using http-server module or you can use live server extension if you are using vscode.
Let’s include html template file in webpack configuration to generate a complete prod ready bundle.

To include the HTML template in webpack configuration, you will need to use a webpack plugin called html-webpack-plugin. This plugin allows you to specify an HTML template file that will be used to generate an HTML file for your application.

To use the html-webpack-plugin, you will first need to install it as a dependency for your project. You can do this by running the following command in your terminal:

npm install html-webpack-plugin --save-dev

Once the html-webpack-plugin is installed, you can add it to your webpack configuration by adding the following code to your webpack.config.js file:

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  // other webpack configuration goes here
  plugins: [
    new HtmlWebpackPlugin({
      template: "path/to/template.html",
      filename: "index.html",
    }),
  ],
}

This will tell webpack to use the specified HTML template file to generate an HTML file for your application. The generated HTML file will be placed in the output directory specified in your webpack configuration and will be served when your application is built and run.

You can also use the html-webpack-plugin to customize the generated HTML file by specifying various options such as the title of the page, the favicon, and any metadata that should be included in the head of the HTML file. For more information on the options available for the html-webpack-plugin, you can refer to the plugin’s documentation.

Run npm run build to build your project. This will generate dist folder with bundle.js and index.html file.
You can run this index.html similarly using http-server module or you can use live server extension.
There’s something still pending in this config which is we can not import css files to project.
To setup this install style loader and css loader by running npm install --save-dev style-loader css-loader.
Now add this to webpack config by making following changes.

// Add this to rules array in module object.
{
  test: /\.css$/,
  use: ["style-loader", "css-loader"],
}

Create a style.css file and add some styles in it.
Import this file in index.js
Repeat step 8 & 9. You will see the css changes applied. But this will add changes in js bundle and webpack will inject these as style tag on run time.
To extract css into separate file we can use MiniCssExtractPlugin.

But it’s not practical to build the project after making a single change. So we will setup a dev mode using webpack-dev-server

Install Webpack Dev Server using npm install --save-dev webpack-dev-server.
Create a webpack.config.dev.js and add following code.

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  devServer: {
    historyApiFallback: true,
  },
  devtool: "source-map",
}

We have some extra properties in this config.
- historyApiFallback: The development server will use the historyApiFallback option to support client-side routing.
- source-map: The source-map option will generate source maps for the output bundle to facilitate debugging.
This configuration file can be used with the webpack-dev-server to start a development server for project. To use this add following script to package.json. "start": "webpack-dev-server --mode development --config webpack.config.dev.js"
Run npm run start or npm start to start the development server and view your React app. Webpack will automatically transpile your code using Babel and reload the page when you make changes.

Now we can change the folder structure a bit so that we can make it similar to conventional react project.

Create a folder with name public at root and move index.html to this folder.
Create a folder with name src at root and move index.js and styles.css to this folder.

Also we need to change these paths webpack and webpack dev config.

entry: "./src/index.js",

new HtmlWebpackPlugin({
   template: "public/index.html",
 }),

After this activity your folder structure should look like:

Now we need to have a way to copy static assets like fonts and images to the bundle folder

To copy static assets such as images, fonts, or other media files using webpack, you can use the copy-webpack-plugin and the file-loader.

npm install --save-dev copy-webpack-plugin

Here is an example of how to use the copy-webpack-plugin to copy static assets in your webpack configuration file:

const CopyWebpackPlugin = require("copy-webpack-plugin")

module.exports = {
  // your webpack configuration goes here
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          to: "assets", // This will be the path you will use to import the file. For eg. /assets/image.png
          globOptions: {
            ignore: ["**/index.html"], //Ignore index.html file
          },
        },
      ],
    }),
  ],
}

This configuration will copy all files from the public directory to the assets directory in the output directory. Now you can import the files present in public folder using absolute path directly in image src or in css url

Copy an image.png file to public folder
Change element variable in index.js to

const element = (
  <>
    <h1>Hello World</h1>
    {/* Src path will be the path you will give in `to` property in config */}
    <img src="/assets/image.png" />
  </>
)

Restart the server and you will see and image in browser.

copy-webpack-plugin is not designed to copy files generated from the build process; rather, it is to copy files that already exist in the source tree, as part of the build process.

This means that if we want to import images dynamically into .js or .css we can not use this. For that we need to use file-loader

npm install --save-dev file-loader

Copy following code to webpack.config.dev.js rules array.

{
  test: /\.(png|jpg|gif|svg)$/,
  use: {
  loader: "file-loader",
  options: {
    name: "[name].[ext]",
    outputPath: "assets/",
    },
  },
}

Now you can import image file to js file using import syntax. Let’s try it out

Copy a image file image2.png to src folder.
Import file in index.js using following syntax.

import image from "./image.png"

Modify img tag to use the imported file

const element = (
  <>
    <h1>Hello World</h1>
    <img src={image2} />
  </>
)

Now you can see the result in browser.

To get a bit clarity how this works add a new image tag with src path from assets and run npm run build.

Check the dist folder to how webpack is generating the final build.

At last

Now as a final step we can modify webpack.config.js a bit to include versioning in the build process. Webpack provides versioning support out of the box.

In webpack.config.js modify output.filename to bundle.[hash].js.

Delete the dist folder and run npm run build. Webpack will generate bundle with a hash code.

If you are pushing the code to git add .gitignore file at root level and add following code

node_modules
dist

This will ignore the node_modules and dist folder as we don’t need to push these.

What Next

We can add sass or postcss support using loaders.
Extract out css to separate bundles and hash css bundles also.
Add svgr to import svg as react components.

Heap Tree

Vishal Sharma — Fri, 22 Apr 2022 12:11:44 GMT

What is a Heap Tree

A heap is a special type of tree-based data structure that satisfies the heap property: the value of each node is always greater than or equal to the value of its parent, with the exception of the root node, which has no parent. There are two types of heaps: min heaps and max heaps. In a min heap, the value of each node is always greater than or equal to the value of its parent, while in a max heap, the value of each node is always less than or equal to the value of its parent.

Heaps are typically implemented using an array, where the parent and child nodes of each node are found using the following formulas:

The index of the left child of a node at index i is 2 * i + 1
The index of the right child of a node at index i is 2 * i + 2
The index of the parent of a node at index i is (i - 1) / 2

For example, consider the following min heap:

This heap can be represented as a Max Heap array as follows: [20,12,18,8,11,7,5] This heap can be represented as a Min Heap array as follows: [5,11,7,20,18,12,8]

To insert a new element into a heap, we first add it to the end of the array and then percolate it up the heap until it is in the correct position. To do this, we compare the value of the new element with the value of its parent and swap them if necessary. This process is repeated until the heap property is satisfied.

To remove the minimum (or maximum) element from a min (or max) heap, we remove the root node and replace it with the last element in the array. We then percolate this element down the heap until it is in the correct position. To do this, we compare the value of the element with the values of its children and swap it with the smaller (or larger) child if necessary. This process is repeated until the heap property is satisfied.

Heaps are commonly used for implementing priority queues, where the priority of each element is represented by its value in the heap. They are also used in algorithms for sorting and searching data, such as heap sort and Dijkstra’s algorithm.

Overall, heaps are a useful data structure for efficiently storing and manipulating data in a tree-like structure, and they have many practical applications in computer science.

Here is an example implementation of a min heap class in JavaScript:

class MinHeap {
  constructor() {
    this.heap = []
  }

  getParentIndex(index) {
    return Math.floor((index - 1) / 2)
  }

  getLeftChildIndex(index) {
    return 2 * index + 1
  }

  getRightChildIndex(index) {
    return 2 * index + 2
  }

  hasParent(index) {
    return this.getParentIndex(index) >= 0
  }

  hasLeftChild(index) {
    return this.getLeftChildIndex(index) < this.heap.length
  }

  hasRightChild(index) {
    return this.getRightChildIndex(index) < this.heap.length
  }

  getParent(index) {
    return this.heap[this.getParentIndex(index)]
  }

  getLeftChild(index) {
    return this.heap[this.getLeftChildIndex(index)]
  }

  getRightChild(index) {
    return this.heap[this.getRightChildIndex(index)]
  }

  swap(index1, index2) {
    const temp = this.heap[index1]
    this.heap[index1] = this.heap[index2]
    this.heap[index2] = temp
  }

  peek() {
    if (this.heap.length === 0) {
      throw new Error("Heap is empty")
    }
    return this.heap[0]
  }

  poll() {
    if (this.heap.length === 0) {
      throw new Error("Heap is empty")
    }
    const item = this.heap[0]
    this.heap[0] = this.heap[this.heap.length - 1]
    this.heap.pop()
    this.heapifyDown()
    return item
  }

  add(item) {
    this.heap.push(item)
    this.heapifyUp()
  }

  heapifyUp() {
    let index = this.heap.length - 1
    while (this.hasParent(index) && this.getParent(index) > this.heap[index]) {
      this.swap(this.getParentIndex(index), index)
      index = this.getParentIndex(index)
    }
  }

  heapifyDown() {
    let index = 0
    while (this.hasLeftChild(index)) {
      let smallerChildIndex = this.getLeftChildIndex(index)
      if (
        this.hasRightChild(index) &&
        this.getRightChild(index) < this.getLeftChild(index)
      ) {
        smallerChildIndex = this.getRightChildIndex(index)
      }
      if (this.heap[index] < this.heap[smallerChildIndex]) {
        break
      }
      this.swap(index, smallerChildIndex)
      index = smallerChildIndex
    }
  }
}

Here is an example of how you can use the MinHeap class to create a min heap tree:

const heap = new MinHeap()

heap.add(5)
heap.add(8)
heap.add(9)
heap.add(4)
heap.add(7)
heap.add(1)
heap.add(3)

console.log(heap.heap) // [1, 5, 3, 8, 7, 9, 4]

      1
    /   \
    5    3
  /   \  /  \
  8    7 9  4

To create a max heap, you can use the same class but change the comparison operator (<) in the heapifyDown function to > to ensure that the current node is swapped with the larger child.

Binary Search Tree

Vishal Sharma — Tue, 19 Apr 2022 12:11:44 GMT

What is Binary Search Tree (BST)

A binary search tree (BST) is a type of binary tree that is used for searching and sorting data. It is called a “search tree” because it can be efficiently used to search for the presence or absence of a particular element in the tree. It is called a “binary” tree because each node has at most two children.

In a BST, the left child of a node is always less than the value of the node, and the right child is always greater than the value of the node.

This means that if we want to search for a particular value in the tree, we can start at the root node and then decide which direction to go based on whether the value we are looking for is less than or greater than the value of the current node. If the value is less than the current node, we go left; if it is greater, we go right. This process is repeated until we either find the value we are looking for or reach a null node, indicating that the value is not present in the tree.

One of the main benefits of using a BST is that it allows us to search for values in O(log n) time, where n is the number of nodes in the tree. This is much faster than searching through an unsorted list, which takes O(n) time.

Inserting and deleting elements from a BST is also relatively efficient. To insert a new element into the tree, we follow the same process as searching for a value, except that instead of stopping when we find the value we are looking for, we continue until we reach a null node. Then, we insert the new element as the left or right child of the node, depending on whether it is less than or greater than the value of the node. To delete a node from the tree, we need to find the node and then remove it while maintaining the BST property.

Here is an example implementation of a binary search tree class in JavaScript:

class TreeNode {
  constructor(value) {
    this.left = null
    this.right = null
    this.value = value
  }
}

class BinarySearchTree {
  constructor() {
    this.root = null
  }

  insert(value) {
    let newNode = new TreeNode(value)
    if (!this.root) {
      this.root = newNode
      return
    }
    let curr = this.root
    while (curr) {
      if (value <= curr.value) {
        if (curr.left) {
          curr = curr.left
        } else {
          curr.left = newNode
          break
        }
      } else {
        if (curr.right) {
          curr = curr.right
        } else {
          curr.right = newNode
          break
        }
      }
    }
  }
  lookup(value) {
    if (!this.root) return "Empty Array"
    let curr = this.root
    while (curr) {
      if (value === curr.value) {
        return curr
      } else if (value < curr.value) {
        curr = curr.left
      } else {
        curr = curr.right
      }
    }
    return "Not Found"
  }
  remove(value) {
    if (!this.root) return "Empty Array"
    let curr = this.root
    let parentNode = null
    while (curr) {
      if (value < curr.value) {
        parentNode = curr
        curr = curr.left
      } else if (value > curr.value) {
        parentNode = curr
        curr = curr.right
      } else {
        if (!curr.right) {
          if (!parentNode) {
            this.root = curr.left
          } else {
            if (curr.value < parentNode.value) {
              parentNode.left = curr.left
            } else if (curr.value > parentNode.value) {
              parentNode.right = curr.left
            }
          }
        } else if (!curr.right.left) {
          if (!parentNode) {
            this.root = curr.left
          } else {
            curr.right.left = curr.left
            if (curr.value < parentNode.value) {
              parentNode.left = curr.right
            } else if (curr.value > parentNode.value) {
              parentNode.right = curr.right
            }
          }
        } else {
          let leftmost = curr.right.left
          let leftmostParent = curr.right
          while (leftmost.left !== null) {
            leftmostParent = leftmost
            leftmost = leftmost.left
          }
          leftmostParent.left = leftmost.right
          leftmost.left = curr.left
          leftmost.right = curr.right
          if (!parentNode) {
            this.root = leftmost
          } else {
            if (curr.value < parentNode.value) {
              parentNode.left = leftmost
            } else {
              parentNode.right = leftmost
            }
          }
        }
      }
    }
  }
}

const tree = new BinarySearchTree()
tree.insert(9)
tree.insert(4)
tree.insert(6)
tree.insert(20)
tree.insert(170)
tree.insert(15)
tree.insert(1)
console.log(tree.lookup(20))
/**
TreeNode {
  left: TreeNode { left: null, right: null, value: 15 },
  right: TreeNode { left: null, right: null, value: 170 },
  value: 20
}
 */
console.log(tree.lookup(150)) // Not Found
console.log(JSON.stringify(traverse(tree.root)))
/**
 * {"value":9,
 *  "left":{"value":4,"left":{"value":1,"left":null,"right":null}, "right":{"value":6,"left":null,"right":null}},
 *  "right":{"value":20,"left":{"value":15,"left":null,"right":null},"right":{"value":170,"left":null,"right":null}}}
 */

//     9
//  4     20
//1  6  15  170

function traverse(node) {
  const tree = { value: node.value }
  tree.left = node.left === null ? null : traverse(node.left)
  tree.right = node.right === null ? null : traverse(node.right)
  return tree
}

const maxDepth = function (root) {
  if (!root) return 0
  let maxDepth = 0
  const helper = (root, depth) => {
    if (root.left) helper(root.left, depth + 1)
    if (root.right) helper(root.right, depth + 1)
    if (!root.left) {
      if (depth > maxDepth) maxDepth = depth
      return
    }
    if (!root.right) {
      if (depth > maxDepth) maxDepth = depth
      return
    }
  }
  helper(root, 1)
  return maxDepth
}

BSTs are commonly used in a variety of applications, such as

Implementing associative arrays
Representing mathematical expressions
Storing data in databases.
Algorithms for sorting and searching data, such as quicksort and merge sort.

Tree Traversal

Tree traversal is the process of visiting all the nodes in a tree in a specific order. There are three common types of tree traversal: inorder, preorder, and postorder.

Tree traversal is often used to perform some operation on all the nodes of a tree, such as printing the values of the nodes or evaluating a mathematical expression represented by the tree. It can also be used to create a copy of a tree or to delete all the nodes of a tree.

In order to implement tree traversal, we can use either a recursive or an iterative approach.

Let’s consider following BST as an example

Inorder traversal:

In an inorder traversal, we first visit the left child of a node, then the node itself, and then the right child. This means that the nodes of the tree are visited in the order: left child, root, right child.

function inorderTraversal(node) {
  if (node !== null) {
    inorderTraversal(node.left)
    console.log(node.data)
    inorderTraversal(node.right)
  }
}

For Above BST Inorder traversal array would be : [9,11,12,18,20,21,22]

Preorder traversal:

In a preorder traversal, we first visit the root node, then the left child, and then the right child. This means that the nodes of the tree are visited in the order: root, left child, right child.

function preorderTraversal(node) {
  if (node !== null) {
    console.log(node.data)
    preorderTraversal(node.left)
    preorderTraversal(node.right)
  }
}

For Above BST preorder traversal array would be : [18,11,9,12,21,20,22]

Postorder traversal:

In a postorder traversal, we first visit the left child, then the right child, and then the root node. This means that the nodes of the tree are visited in the order: left child, right child, root.

function postorderTraversal(node) {
  if (node !== null) {
    postorderTraversal(node.left)
    postorderTraversal(node.right)
    console.log(node.data)
  }
}

For Above BST preorder traversal array would be : [9,12,11,20,22,21,18]

It’s also possible to implement these tree traversal functions using an iterative approach rather than a recursive one. The iterative approach involves using a stack to keep track of the nodes that need to be visited. Here is an example of an iterative inorder traversal function:

function inorderTraversalIterative(root) {
  const stack = []
  let current = root

  while (current !== null || stack.length > 0) {
    while (current !== null) {
      stack.push(current)
      current = current.left
    }
    current = stack.pop()
    console.log(current.data)
    current = current.right
  }
}

Similar iterative approaches can be used for preorder and postorder traversal as well.

Conclusion

In conclusion, binary search trees (BSTs) are a type of binary tree data structure that are used for searching and sorting data. They are called search trees because they can be efficiently used to search for the presence or absence of a particular element in the tree, and they are called binary trees because each node has at most two children. BSTs are characterized by the property that the left child of a node is always less than the value of the node, and the right child is always greater than the value of the node. This allows us to search for values in O(log n) time, where n is the number of nodes in the tree. BSTs are also relatively efficient for inserting and deleting elements, making them a useful data structure for storing and manipulating data in a hierarchical manner.

Binary Tree

Vishal Sharma — Sun, 17 Apr 2022 10:11:44 GMT

What is a Binary Tree

A binary tree is a data structure that consists of nodes arranged in a tree-like structure. Each node has at most two children, referred to as the left child and the right child. The node at the top of the tree is called the root, and the nodes at the bottom of the tree are called leaves.

Binary trees can be implemented in many different ways, depending on the requirements of the application. One common way to implement a binary tree is to use a class with fields for the data stored at the node and references to the left and right children of the node.

Here is an example implementation of a binary tree class in JavaScript:

class BinaryTreeNode {
  constructor(data) {
    this.data = data
    this.left = null
    this.right = null
  }
}

class BinaryTree {
  constructor() {
    this.root = null
  }

  insert(data) {
    const newNode = new BinaryTreeNode(data)
    if (this.root === null) {
      this.root = newNode
    } else {
      let current = this.root
      while (true) {
        if (data < current.data) {
          if (current.left === null) {
            current.left = newNode
            break
          }
          current = current.left
        } else {
          if (current.right === null) {
            current.right = newNode
            break
          }
          current = current.right
        }
      }
    }
  }

  search(data) {
    let current = this.root
    while (current !== null) {
      if (data === current.data) {
        return true
      }
      if (data < current.data) {
        current = current.left
      } else {
        current = current.right
      }
    }
    return false
  }

  remove(data) {
    this.root = this._remove(this.root, data)
  }

  _remove(node, data) {
    if (node === null) {
      return null
    }
    if (data < node.data) {
      node.left = this._remove(node.left, data)
      return node
    }
    if (data > node.data) {
      node.right = this._remove(node.right, data)
      return node
    }
    if (node.left === null && node.right === null) {
      return null
    }
    if (node.left === null) {
      return node.right
    }
    if (node.right === null) {
      return node.left
    }
    let minNode = this._findMin(node.right)
    node.data = minNode.data
    node.right = this._remove(node.right, minNode.data)
    return node
  }
}

const tree = new BinaryTree()

tree.insert(5)
tree.insert(15)
tree.insert(9)
tree.insert(6)
tree.insert(12)
tree.insert(3)

console.log(tree.search(12)) // BinaryTreeNode { data: 12, left: null, right: null }
console.log(tree.search(6)) // BinaryTreeNode { data: 6, left: null, right: null }
console.log(tree.search(47)) // Not Found

tree.remove(6)
console.log(tree.search(6)) // Not Found

Binary trees have several properties that make them useful for certain types of problems. One property is that the height of a binary tree is logarithmic in the number of nodes it contains. This means that as the number of nodes in the tree increases, the height of the tree grows at a slower rate. This property makes binary trees well-suited for searching and sorting operations, as the time complexity of these operations is often related to the height of the tree.

There are several different types of binary trees, each with its own characteristics. Some common types of binary trees include:

Binary search tree

A binary search tree is a type of binary tree where the value of each node is greater than the values of the nodes in its left subtree and less than the values of the nodes in its right subtree. This property allows for efficient search and insertion operations, as the tree can be traversed in a way that narrows down the possible location of the desired value.

Complete binary tree

A complete binary tree is a type of binary tree where all levels of the tree are fully filled except possibly the last level, and the nodes in the last level are filled from left to right.

Full binary tree

A full binary tree is a type of binary tree where every node has either 0 or 2 children.

Perfect binary tree

A perfect binary tree is a type of binary tree that is both complete and full.

Binary trees are used for a variety of purposes, such as representing hierarchical relationships, searching, sorting, and decision-making. They can be implemented using a variety of techniques, including arrays, linked lists, and dynamic memory allocation.

Conclusion

In conclusion, binary trees are a widely used data structure in computer science, with many practical applications in areas such as file systems, decision-making, web navigation, network routing, and expression parsing. They are implemented using a variety of techniques, including arrays, linked lists, and dynamic memory allocation. Binary trees can be traversed using various techniques, such as inorder, preorder, and postorder traversal, and they can be balanced using techniques such as red-black trees and AVL trees. Overall, binary trees are a powerful tool for organizing and manipulating data in a hierarchical manner.

Data Structure and Algorithms with JS - Part 4 : Tree

Vishal Sharma — Sat, 16 Apr 2022 12:11:44 GMT

A tree is a non-linear data structure that represents a hierarchical relationship between nodes. Each node in a tree has a value and can have zero or more child nodes, which are connected to it via edges. The node at the top of the tree is called the root node, and the nodes that do not have any children are called leaf nodes.

The tree data structure is often used to represent hierarchical relationships in data, such as the structure of a file system, the structure of an organization, or the structure of a decision-making process.

Some common terminologies used in the context of tree data structure:

Root: The root of a tree is the topmost node in the tree. It is the ancestor of all other nodes in the tree.
Child: A child of a node is a node that is directly connected to it via an edge. A node can have zero or more children, depending on the structure of the tree.
Parent: A parent of a node is a node that is directly connected to it via an edge. Every node in a tree, except for the root, has a parent.
Leaf: A leaf is a node that does not have any children. Leaf nodes are the terminal nodes of a tree.
Subtree: A subtree of a tree is a portion of the tree that includes a node and all of its descendants.
Ancestor: An ancestor of a node is a node that is located above it in the tree and can be reached by traversing the tree upwards from the node. The root of the tree is an ancestor of every node in the tree.
Descendant: A descendant of a node is a node that is located below it in the tree and can be reached by traversing the tree downwards from the node. Every node in the tree is a descendant of the root.
Sibling: Siblings are nodes that have the same parent.
Degree: The degree of a node is the number of children it has.
Height: The height of a tree is the number of edges on the longest downward path between the root and a leaf. The height of a node is the number of edges on the longest downward path between the node and a leaf.
Depth: The depth of a node is the number of edges on the path from the root to the node.
Level: The level of a node is the number of ancestors it has. The root of the tree is at level 0, and the children of the root are at level 1, and so on.
Path: A path in a tree is a sequence of nodes connected by edges.
Traversal: Traversal refers to the process of visiting and processing the nodes of a tree in a specific order. There are various tree traversal algorithms, including

Some characteristics of the tree data structure:

Hierarchical structure:

Trees have a hierarchical structure, with the root node at the top and the leaf nodes at the bottom. This structure allows for the representation of complex relationships between nodes.

Recursive structure:

Trees have a recursive structure, with each node potentially having its own sub-tree of child nodes. This allows for the representation of an unbounded number of nodes within a tree.

Non-linear:

Trees are a non-linear data structure, meaning that the nodes in a tree are not stored in a contiguous block of memory like an array. Instead, each node is stored separately and is connected to other nodes via edges.

Efficient search:

Trees can be used to efficiently search for specific values within a dataset. For example, binary search trees allow for efficient search operations by exploiting the hierarchical structure of the tree.

Efficient insertion and deletion:

Trees can be used to efficiently insert and delete elements, particularly if the tree is balanced.

Flexible structure: Trees have a flexible structure, which allows them to adapt to changing data and changing requirements. For example we can have any number of child nodes to fit our requirements.

There are several types of tree data structures, each with its own characteristics and use cases:

N-ary tree:

Trees can have more than two children per node, in which case they are called n-ary trees.

Binary tree:

A binary tree is a tree data structure in which each node has at most two children. Binary trees are commonly used to implement search algorithms, such as binary search. Read More…

Binary search tree:

A binary search tree is a binary tree in which the value of each node is greater than the values of its left children and less than the values of its right children. Binary search trees are used to efficiently search for specific values within a dataset. Read More…

Balanced tree:

A balanced tree is a tree data structure in which the heights of the left and right subtrees of each node differ by at most 1. Balanced trees are used to maintain efficient search and insertion/deletion operations. Read More…

Heap:

A heap is a tree data structure that satisfies the heap property, which states that the value of each node is greater than or equal to the values of its children (in a max-heap) or less than or equal to the values of its children (in a min-heap). Heaps are used to implement efficient priority queues and sorting algorithms.

A max-heap is a complete binary tree in which the value of each node is greater than or equal to the values of its children. The root node of a max-heap is the maximum element in the heap.

A min-heap is a complete binary tree in which the value of each node is less than or equal to the values of its children. The root node of a min-heap is the minimum element in the heap. Read More…

Trie:

A trie (also known as a prefix tree) is a tree data structure used to store a dynamic set or associative array where the keys are sequences (usually strings). Tries are used for efficient prefix-based search, such as for spelling correction or for efficient data retrieval in databases. Read More…

Splay tree:

A splay tree is a self-balancing binary search tree that rearranges itself after each search operation to bring the searched-for item closer to the root. Splay trees are used to implement efficient data structures for dynamic sets and associative arrays. Read More…

Red-black tree:

A red-black tree is a self-balancing binary search tree that maintains a specific coloring scheme (red and black) in order to balance the tree. Red-black trees are used to implement efficient data structures for dynamic sets and associative arrays. Read More…

AVL tree:

An AVL tree is a self-balancing binary search tree that maintains balance by enforcing a height difference constraint between the left and right subtrees of each node. AVL trees are used to implement efficient data structures for dynamic sets and associative arrays. Read More…

Binary Search Tree Implementation using JavaScript

class TreeNode {
  constructor(value) {
    this.left = null
    this.right = null
    this.value = value
  }
}

class BinarySearchTree {
  constructor() {
    this.root = null
  }

  insert(value) {
    let newNode = new TreeNode(value)
    if (!this.root) {
      this.root = newNode
      return
    }
    let curr = this.root
    while (curr) {
      if (value <= curr.value) {
        if (curr.left) {
          curr = curr.left
        } else {
          curr.left = newNode
          break
        }
      } else {
        if (curr.right) {
          curr = curr.right
        } else {
          curr.right = newNode
          break
        }
      }
    }
  }
  lookup(value) {
    if (!this.root) return "Empty Array"
    let curr = this.root
    while (curr) {
      if (value === curr.value) {
        return curr
      } else if (value < curr.value) {
        curr = curr.left
      } else {
        curr = curr.right
      }
    }
    return "Not Found"
  }
  remove(value) {
    if (!this.root) return "Empty Array"
    let curr = this.root
    let parentNode = null
    while (curr) {
      if (value < curr.value) {
        parentNode = curr
        curr = curr.left
      } else if (value > curr.value) {
        parentNode = curr
        curr = curr.right
      } else {
        if (!curr.right) {
          if (!parentNode) {
            this.root = curr.left
          } else {
            if (curr.value < parentNode.value) {
              parentNode.left = curr.left
            } else if (curr.value > parentNode.value) {
              parentNode.right = curr.left
            }
          }
        } else if (!curr.right.left) {
          if (!parentNode) {
            this.root = curr.left
          } else {
            curr.right.left = curr.left
            if (curr.value < parentNode.value) {
              parentNode.left = curr.right
            } else if (curr.value > parentNode.value) {
              parentNode.right = curr.right
            }
          }
        } else {
          let leftmost = curr.right.left
          let leftmostParent = curr.right
          while (leftmost.left !== null) {
            leftmostParent = leftmost
            leftmost = leftmost.left
          }
          leftmostParent.left = leftmost.right
          leftmost.left = curr.left
          leftmost.right = curr.right
          if (!parentNode) {
            this.root = leftmost
          } else {
            if (curr.value < parentNode.value) {
              parentNode.left = leftmost
            } else {
              parentNode.right = leftmost
            }
          }
        }
      }
    }
  }
}

const tree = new BinarySearchTree()
tree.insert(9)
tree.insert(4)
tree.insert(6)
tree.insert(20)
tree.insert(170)
tree.insert(15)
tree.insert(1)
console.log(tree.lookup(20))
/**
TreeNode {
  left: TreeNode { left: null, right: null, value: 15 },
  right: TreeNode { left: null, right: null, value: 170 },
  value: 20
}
 */
console.log(tree.lookup(150)) // Not Found
console.log(JSON.stringify(traverse(tree.root)))
/**
 * {"value":9,
 *  "left":{"value":4,"left":{"value":1,"left":null,"right":null}, "right":{"value":6,"left":null,"right":null}},
 *  "right":{"value":20,"left":{"value":15,"left":null,"right":null},"right":{"value":170,"left":null,"right":null}}}
 */

//     9
//  4     20
//1  6  15  170

function traverse(node) {
  const tree = { value: node.value }
  tree.left = node.left === null ? null : traverse(node.left)
  tree.right = node.right === null ? null : traverse(node.right)
  return tree
}

const maxDepth = function (root) {
  if (!root) return 0
  let maxDepth = 0
  const helper = (root, depth) => {
    if (root.left) helper(root.left, depth + 1)
    if (root.right) helper(root.right, depth + 1)
    if (!root.left) {
      if (depth > maxDepth) maxDepth = depth
      return
    }
    if (!root.right) {
      if (depth > maxDepth) maxDepth = depth
      return
    }
  }
  helper(root, 1)
  return maxDepth
}

Trees are a common data structure used in computer science to represent hierarchical relationships between objects.

Some common applications of tree data structures include:

Hierarchical data representation:

Tree data structures are often used to represent the hierarchical data structures, such as the hierarchy of files and directories in a file system or organizational structures. Each directory is represented as a node in the tree, with the files in that directory being the child nodes of the directory node.

Decision making:

Trees can be used to represent decision-making processes, such as in the game of chess where each move is represented as a node in the tree and the possible subsequent moves are the child nodes. The tree can be searched to find the best move based on a set of predetermined criteria.

Web navigation:

Trees can be used to represent the structure of a website, with the home page being the root node and the child nodes representing the pages linked from the home page. This can help with navigation and search functionality on a website.

Searching and sorting:

Trees can be used to implement efficient search and sorting algorithms, such as binary search trees and red-black trees to filter large amount or to find related keywords and results in a search engine.

Network routing:

Trees can be used to represent the topology of a network or network routing algorithms, with the nodes representing devices and the edges representing connections between the devices. This can help with routing data packets through the network.

Parsing:

Trees can be used to represent the structure of a mathematical expression, with the nodes representing the operators and the leaves representing the operands. This can be used to evaluate the expression or to simplify it. Other then this Trees are often used in natural language processing and computer science to represent the structure of a sentence or program.

Here are some tree data structure problems from LeetCode

Data Structure and Algorithms with JS - Part 3 : Stack and Queue

Vishal Sharma — Mon, 28 Mar 2022 12:11:44 GMT

Stack

A stack is a linear data structure that follows the Last In First Out (LIFO) principle. This means that the last element added to the stack will be the first one to be removed.

Stacks are commonly used to store data temporarily while a program is executing. They can be used to implement function calls, as well as to reverse the order of items.

Operations that are typically supported by stacks include:

push: adds an element to the top of the stack
pop: removes the element at the top of the stack and returns it
peek: returns the element at the top of the stack without removing it
isEmpty: returns true if the stack is empty, false otherwise

Here is an Example of a Stack implementation using LinkedList in Javascript

class StackNode {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

class Stack {
  constructor() {
    this.top = null
    this.bottom = null
    this.length = 0
  }
  peek() {
    return this.bottom.value
  }
  isEmpty() {
    return !!this.length
  }
  push(value) {
    let newNode = new StackNode(value)
    if (!this.top) {
      this.top = newNode
      this.bottom = newNode
    } else {
      newNode.next = this.top
      this.top = newNode
    }
    this.length++
    return this
  }
  pop() {
    if (!this.top) return null
    let value = this.top.value
    if (this.length === 1) {
      this.bottom = null
    }
    this.top = this.top.next
    this.length--
    return value
  }
}
const myStack = new Stack()
console.log(myStack.push("google"))
/**
 Stack {
  top: StackNode { value: 'google', next: null },
  bottom: StackNode { value: 'google', next: null },
  length: 1
}
 */
console.log(myStack.push("udemy"))
/**
 Stack {
  top: StackNode {
    value: 'udemy',
    next: StackNode { value: 'google', next: null }
  },
  bottom: StackNode { value: 'google', next: null },
  length: 2
}
 */
console.log(myStack.push("discord"))
/**
 Stack {
  top: StackNode {
    value: 'discord',
    next: StackNode { value: 'udemy', next: [StackNode] }
  },
  bottom: StackNode { value: 'google', next: null },
  length: 3
}
 */
console.log(myStack.pop()) //discord
console.log(myStack.pop()) //udemy
console.log(myStack.peek()) //google
console.log(myStack.isEmpty()) //true

We can implement stack using array and linked list both.

Array-based stack: This type of stack is implemented using an array, where the elements are stored in contiguous memory locations. The array can be resized as needed to accommodate new elements. Insertion and deletion operations are typically O(1) time complexity.

Linked list-based stack: This type of stack is implemented using a linked list, where each node in the list contains a value and a pointer to the next node in the list. Insertion and deletion operations are typically O(1) time complexity.

Stacks are widely used in computer science and have many practical applications. Some common uses of stacks include:

Evaluating mathematical expressions: Stacks are often used to evaluate mathematical expressions, such as infix, prefix, and postfix notation.

Compiler design: Stacks are used in compiler design for tasks such as syntax parsing, symbol table management, and code generation.

Function calls: Stacks are used to store information about function calls in a program, including the return address and the values of local variables. Javascript call stack and an error we encounter in infinite loop stack overflow. 😝😝

Undo/redo functionality: Stacks can be used to implement undo/redo functionality in text editors, image editors, and other software applications.

Backtracking: Stacks can be used to store the state of a problem as it is being solved, allowing the algorithm to backtrack and try alternative solutions if necessary.

Maze solving: Stacks can be used to store the path taken during a maze-solving algorithm, allowing the algorithm to backtrack and try alternative paths if necessary.

Topological sorting: Stacks can be used to implement topological sorting algorithms, which are used to order the vertices of a directed acyclic graph.

Memory management: Stacks are used in memory management to keep track of the memory used by a program and to allocate and deallocate memory as needed.

DFS (depth-first search): Stacks are used to implement DFS algorithms, which traverse the graph or tree vertically.

Here are some Leetcode problems that involve stacks:

Valid Parentheses: Given a string containing just the characters ’(’, ’)’, ’{’, ’}’, ’[’ and ’]’, determine if the input string is valid.
Evaluate Reverse Polish Notation: Evaluate the value of an arithmetic expression in Reverse Polish Notation.
Basic Calculator: Implement a basic calculator to evaluate a simple expression string.
Decode String: Given an encoded string, return its decoded string.
Min Stack: Design a stack that supports push, pop, top, and retrieving the minimum element in constant time.
Maximal Rectangle: Given a 2D binary matrix filled with 0’s and 1’s, find the largest rectangle containing only 1’s and return its area.
Trapping Rain Water: Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it is able to trap after raining.
Evaluate Division: Equations are given in the format A / B = k, where A and B are variables represented as strings, and k is a real number (floating point number). Given some queries, return the answers.
Remove Duplicate Letters: Given a string s, remove duplicate letters so that every letter appears once and only once. You must make sure your result is the smallest in lexicographical order among all possible results.

Queue

A queue is a linear data structure that follows the first-in, first-out (FIFO) principle. This means that the first element added to the queue will be the first one to be removed. Queues are often used to store data that needs to be processed in a specific order, and they support a limited set of operations, such as inserting an element at the back of the queue (also known as enqueuing), removing an element from the front of the queue (also known as dequeuing), and checking the element at the front of the queue.

Queues can be implemented using an array or a linked list. Array-based queues have a fixed size and may need to be resized if the number of elements exceeds the capacity of the array. Linked list-based queues can grow and shrink dynamically as elements are added and removed.

Here is an Example of a Queue implementation using LinkedList in Javascript

class QueueNode {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

class Queue {
  constructor() {
    this.first = null
    this.last = null
    this.length = 0
  }
  peek() {
    return this.first.value
  }
  enqueue(value) {
    let newNode = new QueueNode(value)
    if (!this.first) {
      this.first = newNode
      this.last = newNode
    }
    this.last.next = newNode
    this.last = newNode
    this.length++
    return this.last
  }
  dequeue() {
    if (!this.first) return null
    if (this.first === this.last) this.last = null
    let value = this.first.value
    this.first = this.first.next
    this.length--
    return value
  }
}
const myQ = new Queue()
console.log(myQ.enqueue("Joy")) //QueueNode { value: 'Joy', next: null }
console.log(myQ.enqueue("Matt")) //QueueNode { value: 'Matt', next: null }
console.log(myQ.enqueue("Pav")) //QueueNode { value: 'Pav', next: null }
console.log(myQ.dequeue()) //Joy
console.log(myQ.enqueue("Sam")) //QueueNode { value: 'Sam', next: null }
console.log(myQ.dequeue()) //Matt
console.log(myQ.dequeue()) //Pav

There are several types of queue data structures, each with its own characteristics and use cases:

Standard queue: A standard queue is a basic queue data structure that supports the operations of enqueuing and dequeuing elements. It can be implemented using an array or a linked list.

Circular queue: A circular queue is a queue data structure that uses a fixed-size array and wraps around when the end of the array is reached. It allows for efficient insertion and deletion operations, but requires careful handling to avoid overwriting elements that have not yet been dequeued.

Priority queue: A priority queue is a queue data structure where each element has a priority associated with it. Elements are dequeued in order of their priority, with the highest priority element being dequeued first. Priority queues can be implemented using an array, a linked list, or a heap data structure.

Double-ended queue (deque): A double-ended queue (deque) is a queue data structure that allows for efficient insertion and deletion at both ends of the queue. It can be implemented using an array or a linked list.

Blocking queue: A blocking queue is a queue data structure that blocks enqueuing operations if the queue is full and dequeuing operations if the queue is empty. This can be used to synchronize multiple threads or processes that are accessing the queue.

Concurrent queue: A concurrent queue is a queue data structure that is designed to be thread-safe, allowing multiple threads to enqueue and dequeue elements concurrently without the need for explicit synchronization.

Some common uses of queues include:

Task scheduling: Queues can be used to store tasks that need to be processed in a specific order, such as jobs in a printer queue or tasks in a CPU scheduling algorithm.

Communication buffers: Queues can be used to store data that needs to be transmitted between two systems, such as packets in a network communication protocol.

BFS (breadth-first search): Queues are used to implement BFS algorithms, which traverse the graph or tree horizontally (level by level)..

Event-driven programming: Queues can be used to store events that need to be processed in a specific order, such as user input events in a graphical user interface (GUI).

Asynchronous programming: Queues can be used to store tasks that need to be executed asynchronously, such as in a web server handling multiple requests simultaneously.

Here are some Leetcode problems that involve queues:

Implement Queue using Stacks: Implement a first-in, first-out (FIFO) queue using only two stacks.
Rotate Array: Given an array, rotate the array to the right by k steps, where k is non-negative.
Queue Reconstruction by Height: Suppose you have a random list of people standing in a queue. Each person is described by a pair of integers (h, k), where h is the height of the person and k is the number of people in front of this person who have a height greater than or equal to h. Write an algorithm to reconstruct the queue.
Find Median from Data Stream: Median is the middle value in an ordered integer list. If the size of the list is even, there is no middle value. So the median is the mean of the two middle value.
Sliding Window Maximum: Given an array nums, there is a sliding window of size k which is moving from the very left of the array to the very right. You can only see the k numbers in the window. Each time the sliding window moves right by one position.
Design Circular Queue: Design your implementation of the circular queue. The circular queue is a linear data structure in which the operations are performed based on FIFO (First In First Out) principle and the last position is connected back to the first position to make a circle.
Number of Islands: Given a 2d grid map of ‘1’s (land) and ‘0’s (water), count the number of islands. An island is surrounded by water and is formed by connecting adjacent lands horizontally or vertically. You may assume all four edges of the grid are all surrounded by water.
Number of Provinces: There are n cities. Some of them are connected, while some are not. If city a is connected directly with city b, and city b is connected directly with city c, then city a is connected indirectly with city c. A province is a group of directly or indirectly connected cities and no other cities outside of the group. Return the total number of provinces.

Conclusion

In conclusion, we can say that Stacks and Queues are linear data structures that are used to store and manipulate data in a specific order. Stacks follow the last-in, first-out (LIFO) principle, while Queues follow the first-in, first-out (FIFO) principle. Both data structures support a limited set of operations, such as pushing and popping elements in the case of stacks, and enqueuing and dequeuing elements in the case of queues.

Data Structure and Algorithms with JS - Part 2 : Linked List

Vishal Sharma — Mon, 07 Mar 2022 12:11:44 GMT

A linked list is a linear data structure that consists of a sequence of nodes. Each node in a linked list stores a reference to an object and a reference to the next node in the sequence. The last node in the list typically has a reference to null, indicating the end of the list.

Linked lists have several advantages over arrays.

Insertions and deletions at the beginning of the list are very fast, as they only require updating a single reference. In contrast, inserting or deleting an element at the beginning of an array requires shifting all the elements of the array by one position, which can be time-consuming.
Linked lists also don’t required consecutive memory space, because they store the data and a reference to the next node, rather than the entire list of elements together.

However, linked lists have some disadvantages compared to arrays.

They do not provide constant-time access to individual elements, since you have to start at the beginning of the list and follow the references to find the element you are looking for.
Linked lists also require more memory per element, because they store both the data and the reference to the next element.
Because each element within an array only needs to store its value, compared to a linked list where there is also a pointer field along with the data field, an array takes up less memory.

Linked lists are often used in applications where the list is frequently modified, such as in the implementation of stacks, queues, and hash tables.

Here is an example of a simple linked list implementation in JavaScript:

class LinkedNode {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

class LinkedList {
  constructor(value) {
    this.head = new LinkedNode(value)
    this.tail = this.head
    this.length = 1
  }
  append(value) {
    const newNode = new LinkedNode(value)
    this.tail.next = newNode
    this.tail = newNode
    this.length++
  }
  prepend(value) {
    const newNode = new LinkedNode(value)
    newNode.next = this.head
    this.head = newNode
    this.length++
  }
  insert(index, value) {
    //check params
    if (index >= this.length) {
      this.append(value)
    } else {
      let targetNode = this.traverseToIndex(index)
      const newNode = new LinkedNode(value)
      newNode.next = targetNode.next
      targetNode.next = newNode
      this.length++
    }
  }
  remove(index) {
    if (index > this.length) return "Invalid Index Value"
    if (index === 0) {
      this.head = this.head.next
      this.length--
      return
    }
    let targetNode = this.traverseToIndex(index)
    targetNode.next = targetNode.next.next
    this.length--
  }
  traverseToIndex(index) {
    let currNode = this.head
    for (let i = 1; i < index; i++) {
      currNode = currNode.next
    }
    return currNode
  }
  reverse() {
    if (!this.head.next) return
    // Method 1
    // let curr = this.head
    // this.head = null
    // while(curr){
    //   this.prependNode(curr)
    //   curr = curr.next
    // }

    //method 2
    let first = this.head
    let second = first.next
    while (second) {
      let temp = second.next
      second.next = first
      first = second
      second = temp
    }
    this.head.next = null
    this.head = first
  }
  prependNode(node) {
    let newNode = new LinkedNode(node.value)
    newNode.next = this.head
    this.head = newNode
  }
  printList() {
    const array = []
    let currNode = this.head
    while (currNode !== null) {
      array.push(currNode.value)
      currNode = currNode.next
    }
    return array
  }
}

const sampleList = new LinkedList(10)
sampleList.append(20)
sampleList.append(30)
sampleList.prepend(5)
sampleList.prepend(15)
sampleList.insert(3, 56)
sampleList.printList()
sampleList.reverse()
sampleList.printList()

There are several types of linked lists that you can implement in JavaScript. Some common types of linked lists include:

Singly linked list:

A singly linked list is a linked list where each node stores a reference to the next node in the list, but not to the previous node. This means that you can only traverse the list in a single direction, starting from the head of the list. The linked list we have implemented above is a singly linked list. Singly Linked list node:

class LinkedNode {
  constructor(value) {
    this.value = value
    this.next = null
  }
}

Doubly linked list:

A doubly linked list is a linked list where each node stores a reference to both the next and previous nodes in the list. This allows you to traverse the list in both directions, starting from either the head or the tail of the list.

Here is an example of a doubly linked list implementation in JavaScript:

class LinkedNode {
  constructor(data) {
    this.data = data
    this.next = null
    this.prev = null
  }
}

class LinkedList {
  constructor() {
    this.head = null
    this.tail = null
  }

  add(data) {
    const newNode = new LinkedNode(data)
    if (this.head === null) {
      this.head = newNode
      this.tail = newNode
    } else {
      this.tail.next = newNode
      newNode.prev = this.tail
      this.tail = newNode
    }
  }

  remove(data) {
    let current = this.head
    while (current !== null) {
      if (current.data === data) {
        if (current.prev !== null) {
          current.prev.next = current.next
        }
        if (current.next !== null) {
          current.next.prev = current.prev
        }
        if (current === this.head) {
          this.head = current.next
        }
        if (current === this.tail) {
          this.tail = current.prev
        }
        return
      }
      current = current.next
    }
  }

  contains(data) {
    let current = this.head
    while (current !== null) {
      if (current.data === data) {
        return true
      }
      current = current.next
    }
    return false
  }

  printForward() {
    let current = this.head
    while (current !== null) {
      console.log(current.data)
      current = current.next
    }
  }

  printBackward() {
    let current = this.tail
    while (current !== null) {
      console.log(current.data)
      current = current.prev
    }
  }
}

You can use this doubly linked list implementation by creating a new instance of the LinkedList class and adding nodes to the list using the add method:

const list = new LinkedList()
list.add(1)
list.add(2)
list.add(3)

console.log(list.contains(2)) // prints true
console.log(list.contains(4)) // prints false

list.remove(2)
console.log(list.contains(2)) // prints false

list.printForward() // prints 1 3
list.printBackward() // prints 3 1

Circular linked list:

A circular linked list is a linked list where the last node in the list points back to the first node, forming a circular loop. This allows you to traverse the list in a loop, starting from any node in the list.

Here is an example of a circular linked list implementation in JavaScript:

class LinkedNode {
  constructor(data) {
    this.data = data
    this.next = null
  }
}

class LinkedList {
  constructor() {
    this.head = null
  }

  add(data) {
    const newNode = new LinkedNode(data)
    if (this.head === null) {
      this.head = newNode
      newNode.next = this.head
    } else {
      let current = this.head
      while (current.next !== this.head) {
        current = current.next
      }
      current.next = newNode
      newNode.next = this.head
    }
  }

  remove(data) {
    if (this.head === null) {
      return
    }
    let current = this.head
    while (current.next !== this.head) {
      if (current.next.data === data) {
        current.next = current.next.next
        return
      }
      current = current.next
    }
    if (this.head.data === data) {
      if (this.head.next === this.head) {
        this.head = null
      } else {
        current.next = this.head.next
        this.head = this.head.next
      }
    }
  }

  contains(data) {
    let current = this.head
    if (current === null) {
      return false
    }
    do {
      if (current.data === data) {
        return true
      }
      current = current.next
    } while (current !== this.head)
    return false
  }
}

You can use this circular linked list implementation by creating a new instance of the LinkedList class and adding nodes to the list using the add method:

const list = new LinkedList()
list.add(1)
list.add(2)
list.add(3)

console.log(list.contains(2)) // prints true
console.log(list.contains(4)) // prints false

list.remove(2)
console.log(list.contains(2)) // prints false

Skip list:

A skip list is a data structure that combines elements of linked lists and arrays to provide fast search and insertion operations. In a skip list, each node has multiple pointers to other nodes, allowing you to skip over large sections of the list when searching for an element. It is a linked list with multiple levels, where each level has a certain probability of being skipped during a search. This allows the skip list to have a search time that is logarithmic (O(log(n))) in the number of elements, similar to a balanced binary search tree. Skip lists are interesting data structures that rely on a random element in its design.

Here is an example of a Skip linked list implementation in JavaScript:

class SkipListNode {
  constructor(val) {
    this.val = val
    this.next = new Array(16 + 1).fill(null)
    this.level = 0
  }
}

class SkipList {
  constructor() {
    this.head = new SkipListNode(null)
    this.MAX_LEVEL = 16
    this.level = 0
  }

  randomLevel() {
    let level = 0
    while (Math.random() < this.P && level < this.MAX_LEVEL) {
      level++
    }
    return level
  }

  search(val) {
    let curr = this.head
    for (let i = this.level; i >= 0; i--) {
      while (curr.next[i] !== null && curr.next[i].val < val) {
        curr = curr.next[i]
      }
    }
    curr = curr.next[0]
    if (curr !== null && curr.val === val) {
      return curr
    }
    return null
  }

  insert(val) {
    let curr = this.head
    let update = new Array(this.MAX_LEVEL + 1).fill(null)
    for (let i = this.level; i >= 0; i--) {
      while (curr.next[i] !== null && curr.next[i].val < val) {
        curr = curr.next[i]
      }
      update[i] = curr
    }
    curr = curr.next[0]
    if (curr === null || curr.val !== val) {
      let level = this.randomLevel()
      if (level > this.level) {
        for (let i = this.level + 1; i <= level; i++) {
          update[i] = this.head
        }
        this.level = level
      }
      curr = new SkipListNode(val)
      for (let i = 0; i <= level; i++) {
        curr.next[i] = update[i].next[i]
        update[i].next[i] = curr
      }
    }
  }

  remove(val) {
    let curr = this.head
    let update = new Array(this.MAX_LEVEL + 1).fill(null)
    for (let i = this.level; i >= 0; i--) {
      while (curr.next[i] !== null && curr.next[i].val < val) {
        curr = curr.next[i]
      }
      update[i] = curr
    }
    curr = curr.next[0]
    if (curr !== null && curr.val === val) {
      for (let i = 0; i <= this.level; i++) {
        if (update[i].next[i] !== curr) {
          break
        }
        update[i].next[i] = curr.next[i]
      }
      while (this.level > 0 && this.head.next[this.level] === null) {
        this.level--
      }
    }
  }
}

const list = new SkipList()
list.insert(1)
list.insert(2)
list.insert(3)
list.insert(6)
console.log(list.search(2)) // prints Node with val 2
console.log(list.search(4)) // prints null
list.remove(2)
console.log(list.search(2)) // prints null

XOR linked list:

An XOR linked list is a data structure that uses a special type of pointer called an “exclusive or” (XOR) pointer to store the reference to the next node in the list. XOR linked lists can be used to implement a doubly linked list using only a single field in each node, rather than two fields (one for the next node and one for the previous node). This can be more memory-efficient, but can also be more complex to implement. We can not implement a proper XOR linked list in Javascript as we cannot access the memory address. So in js it will be equivalent to a doubly linked list.

Here are a few Leetcode problems that involve linked lists:

Reverse Linked List: Reverse a singly linked list.

Merge Two Sorted Lists: Merge two sorted linked lists and return it as a new sorted list.

Add Two Numbers: You are given two non-empty linked lists representing two non-negative integers. The digits are stored in reverse order and each of their nodes contain a single digit. Add the two numbers and return it as a linked list.

Linked List Cycle: Given a linked list, determine if it has a cycle in it.

Linked List Cycle II: Given a linked list, return the node where the cycle begins. If there is no cycle, return null.

Remove Nth Node From End of List: Given a linked list, remove the n-th node from the end of list and return its head.

Palindrome Linked List: Given a singly linked list, determine if it is a palindrome.

Conclusion

Linked List Type	Insertion Complexity	Access Complexity	Pros	Cons
Singly Linked List	O(1)	O(n)	Simple to implement.	Poor performance for certain operations. (e.g. inserting at a specific position.)
Doubly Linked List	O(1)	O(n)	Allows for insertion and deletion at both ends of the list.	Requires more memory due to additional pointers.
Circular Linked List	O(1)	O(n)	Allows for efficient insertion at the end of the list.	Poor performance for certain operations. (e.g. inserting at a specific position.)
Skip List	O(log n)	O(log n)	Allows for efficient search and insertion.	Requires more memory due to additional pointers.
XOR Linked List	O(1)	O(n)	Uses less memory than doubly linked list.	Complex to implement and may have poor performance for certain operations.

Data Structure and Algorithms with JS - Part 1 : Arrays

Vishal Sharma — Fri, 25 Feb 2022 12:11:44 GMT

Arrays are a fundamental data structure in computer science and are used in a wide variety of applications. They are particularly useful for storing and manipulating large datasets, as they allow us to access and manipulate elements quickly using their indices.

There are several advantages to using arrays:

Arrays are efficient for storing and accessing data. Because elements are stored in a contiguous block of memory, we can access them quickly using their indices.
Arrays are easy to use. They offer a simple interface for storing, accessing, and manipulating data.
Arrays are flexible. We can store elements of any data type in an array, and we can add or remove elements at any time.

There are also some limitations to using arrays:

Arrays have a fixed size. Once we create an array, we cannot change its size unless we create a new array and copy the elements from the old array to the new one.
Arrays are not always the most efficient data structure for certain operations. For example, inserting or deleting elements from the middle of an array can be time-consuming, as it requires shifting all the elements after the inserted/deleted element.

Despite these limitations, arrays are still a widely used data structure due to their simplicity and efficiency. They are commonly used in a variety of programming languages, including C, C++, Java, and Python, as well as in many other applications.

In JavaScript, arrays are a subclass of the object data type, and they have a length property that represents the number of elements in the array. They are dynamic, which means that we can add or remove elements from the array at any time.

Elements of small enough arrays are stored in an internal fixed-size array. V8 allocates some extra space in the internal array to achieve constant amortized time for push() and similar operations that grow the array. When the array length decreases, the internal array may also shrink.

Once a JS array becomes large (this also includes holey arrays), V8 starts using a hash table to store the array elements. The array is now associated with the “slow” dictionary elements kind.

From [V8 Deep Dives] Understanding Array Internals

We can manipulate arrays in various ways. Here are a few examples:

push method adds an element to the end of the array
unshift method adds an element to the beginning of the array
pop method removes the last element of the array
shift method removes the first element of the array
splice method removes or adds elements to the array at a specific index

Let’s Implement basic Array class in js

class MyArray {
  constructor() {
    this.length = 0
    this.data = {}
  }

  get(index) {
    return this.data[index]
  }
  push(item) {
    this.data[this.length] = item
    this.length++
    return this.length
  }
  pop() {
    let lastItem = this.data[this.length - 1]
    delete this.data[this.length - 1]
    this.length--
    return lastItem
  }
  delete(index) {
    this.shiftItems(index)
    delete this.data[this.length - 1]
    this.length--
  }
  shiftItems(index) {
    for (let i = index; i < this.length - 1; i++) {
      this.data[i] = this.data[i + 1]
    }
  }
}

const newarr = new MyArray()
newarr.push("Hi") //1
newarr.push("fiji") //2
newarr.push("you") //3
newarr.push("me") //4
newarr.delete(2) //3
newarr.get(2) //me
console.log(newarr) //{ length: 3, data: { '0': 'Hi', '1': 'fiji', '2': 'me' } }

Algorithms implemented using Arrays

Sorting

Sorting is a common operation in competitive programming. Sorting an array can make it easier to search for a specific element or to find the minimum or maximum element. There are many different sorting algorithms to choose from, including

Selection Sort
Bubble Sort
Insertion Sort
Merge Sort
Quick Sort

Searching

Linear search and binary search are two algorithms that can be used to search for a specific element in an array.

Linear search is a simple algorithm that involves iterating through the array element by element and comparing each element to the target element. If the target element is found, the search is complete. If the target element is not found, the search continues until the end of the array is reached. Linear search has a time complexity of O(n), where n is the size of the array. This means that the time taken by the algorithm increases linearly with the size of the array.

Binary search is a more efficient algorithm that can be used to search for an element in a sorted array. It works by dividing the array in half and comparing the target element to the middle element. If the target element is less than the middle element, the search continues in the left half of the array. If the target element is greater than the middle element, the search continues in the right half of the array. This process is repeated until the target element is found or it is determined that the element is not present in the array. Binary search has a time complexity of O(log n), which means that the time taken by the algorithm increases logarithmically with the size of the array.

Techniques used to solve problems using Arrays

Prefix sums:

Prefix sums are a technique that can be used to quickly find the sum of a range of elements in an array. They work by storing the cumulative sum of the elements in the original array in a new array. For example, if the original array is [1, 2, 3, 4], the prefix sum array would be [1, 3, 6, 10]. Here is an example of how you might implement prefix sums in JavaScript:

function prefixSums(array) {
  let prefixSumArray = [array[0]]
  for (let i = 1; i < array.length; i++) {
    prefixSumArray[i] = prefixSumArray[i - 1] + array[i]
  }
  return prefixSumArray
}

let array = [1, 2, 3, 4]
let prefixSumArray = prefixSums(array)
console.log(prefixSumArray) // Output: [1, 3, 6, 10]

You can then use the prefix sum array to quickly find the sum of a range of elements in the original array. For example, to find the sum of the elements in the range [1, 3] (i.e., the sum of the second, third, and fourth elements in the array), you can use the following code:

let startIndex = 1
let endIndex = 3
let sum = prefixSumArray[endIndex] - prefixSumArray[startIndex - 1]
console.log(sum) // Output: 9

Prefix sums have a time complexity of O(n) and require O(n) additional space to store the prefix sum array. They are useful for quickly answering queries about ranges of elements in an array, and they can be especially useful in dynamic programming problems where you need to perform repeated queries on the same array.

Here are a few examples of Leetcode problems where prefix sums can be used to efficiently find the solution:

Subarray Sum Equals K: Given an array of integers and a target sum, find the number of contiguous subarrays whose sum is equal to the target sum.
Minimum Size Subarray Sum: Given an array of n positive integers and a positive integer s, find the minimal length of a contiguous subarray of which the sum ≥ s. If there isn’t one, return 0 instead.
Range Sum Query - Mutable: Given an integer array nums, you are allowed to perform the following operations: sumRange(i, j): Returns the sum of the elements in nums between indices i and j (i ≤ j), inclusive. update(i, val): Modifies nums by updating the element at index i to val.
Number of Subarrays with Bounded Maximum: We are given an array A of positive integers, and two positive integers L and R. Return the number of (contiguous, non-empty) subarrays such that the value of the maximum array element in that subarray is at least L and at most R.
Subarray Product Less Than K: Your are given an array of positive integers nums. Count and return the number of (contiguous) subarrays where the product of all the elements in the subarray is less than k.

In all of these problems, prefix sums can be used to efficiently find the sum or product of a range of elements in the array, which can then be used to solve the problem.

Two pointer technique:

The two pointer technique is a technique that involves using two pointers to iterate through an array and perform some operation on the elements. It is often used to solve problems that involve finding a pair of elements that meet some condition or to find the maximum or minimum of a contiguous subarray.

Here is an example of how the two pointer technique might be used to find the maximum sum of a contiguous subarray in an array:

function maxSumSubarray(array) {
  let maxSum = 0
  let start = 0
  let end = 0
  let currentSum = 0
  while (end < array.length) {
    currentSum += array[end]
    if (currentSum > maxSum) {
      maxSum = currentSum
      start = start
      end = end
    } else if (currentSum < 0) {
      currentSum = 0
      start = end + 1
    }
    end++
  }
  return maxSum
}

let array = [2, -3, 4, -1, -2, 1, 5, -3]
let maxSum = maxSumSubarray(array)
console.log(maxSum) // Output: 7

In this example, the two pointers start and end are used to mark the start and end of the current contiguous subarray. The currentSum variable is used to store the sum of the elements in the current subarray. The algorithm iterates through the array, adding each element to the currentSum and updating the maxSum and start and end pointers as necessary.

The two pointer technique can be very useful for solving problems that involve finding pairs of elements or subarrays that meet certain conditions. It is often used in competitive programming and can be an efficient way to solve certain types of problems.

Here are a few examples of Leetcode problems where two pointers technique can be used to efficiently find the solution:

Two Sum: Given an array of integers, return indices of the two numbers such that they add up to a specific target.
3Sum: Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Find all unique triplets in the array which gives the sum of zero.
Container With Most Water: Given n non-negative integers a1, a2, …, an, where each represents a point at coordinate (i, ai). n vertical lines are drawn such that the two endpoints of line i is at (i, ai) and (i, 0). Find two lines, which together with x-axis forms a container, such that the container contains the most water.
Valid Palindrome: Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.
Reverse String: Write a function that reverses a string. The input string is given as an array of characters char[].

Do not allocate extra space for another array, you must do this by modifying the input array in-place with O(1) extra memory.

In all of these problems, the two pointer technique can be used to efficiently iterate through the array and perform some operation on the elements, such as comparing them to a target value or checking for palindromicity.

Sliding window:

The sliding window technique is a technique that involves maintaining a window of elements in an array and sliding it along the array to perform some operation on the elements in the window. It is often used to solve problems that involve finding the maximum or minimum of a contiguous subarray or finding the number of elements that meet some condition.

Here is an example of how the sliding window technique might be used to find the maximum sum of a contiguous subarray of size k in an array:

function maxSumSubarray(array, k) {
  let maxSum = 0
  let currentSum = 0
  for (let i = 0; i < k; i++) {
    currentSum += array[i]
  }
  maxSum = currentSum
  for (let i = k; i < array.length; i++) {
    currentSum += array[i] - array[i - k]
    maxSum = Math.max(maxSum, currentSum)
  }
  return maxSum
}

let array = [2, -3, 4, -1, -2, 1, 5, -3]
let maxSum = maxSumSubarray(array, 3)
console.log(maxSum) // Output: 7

In this example, the sliding window is represented by the currentSum variable, which stores the sum of the elements in the current window. The algorithm iterates through the array, adding each element to the currentSum and subtracting the element that is being removed from the window. The maxSum variable is used to store the maximum sum of all the windows.

The sliding window technique can be very useful for solving problems that involve finding the maximum or minimum of a contiguous subarray or the number of elements that meet a certain condition. It is often used in competitive programming and can be an efficient way to solve certain types of problems.

Here are a few examples of Leetcode problems where the sliding window technique can be used to efficiently find the solution

Minimum Window Substring: Given a string S and a string T, find the minimum window in S which will contain all the characters in T in complexity O(n).
Longest Substring Without Repeating Characters: Given a string, find the length of the longest substring without repeating characters.
Find All Anagrams in a String: Given a string s and a non-empty string p, find all the start indices of p’s anagrams in s.
Longest Substring with At Most Two Distinct Characters: Given a string s , find the length of the longest substring t that contains at most 2 distinct characters.
Sliding Window Maximum: Given an array nums, there is a sliding window of size k which is moving from the very left of the array to the very right. You can only see the k numbers in the window. Each time the sliding window moves right by one position. Return the max sliding window.

In all of these problems, the sliding window technique can be used to efficiently iterate through the array or string and perform some operation on the elements in the window.

2D Array:

The 2D array technique is a technique for working with two-dimensional arrays, which are arrays that have rows and columns. 2D arrays are commonly used to store and manipulate data in a variety of contexts, such as image processing, data analysis, and competitive programming.

There are many algorithms and techniques that can be used to work with 2D arrays, including looping through the elements of the array, rotating the array, finding the maximum or minimum of a submatrix, and using prefix sums to find the sum of a range of elements.

To use the 2D array technique effectively, it is important to have a good understanding of how 2D arrays work and how to manipulate them. This may involve understanding how to access and modify elements of the array, how to iterate through the elements of the array, and how to use algorithms and techniques to perform operations on the elements of the array.

Overall, the 2D array technique is a powerful tool for working with data and solving problems in a variety of contexts, and it is an important concept to understand for those interested in computer science and data analysis.

Here are a few examples of Leetcode problems where the 2D array technique can be used to find the solution.

Rotate Image: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise).
Maximal Square: Given a 2D binary matrix filled with 0’s and 1’s, find the largest square containing only 1’s and return its area.
Spiral Matrix: Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral order.
Spiral Matrix II: Given a positive integer n, generate a square matrix filled with elements from 1 to n^2 in spiral order.
Set Matrix Zeroes: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in-place.

In all of these problems, the 2D array technique can be used to manipulate and analyze the elements of the array in order to find the solution.

Dynamic Programming:

Dynamic programming is a technique for solving problems by breaking them down into smaller subproblems and storing the results of these subproblems to avoid redundant work. It is often used to solve problems that have overlapping subproblems, such as optimization problems or problems that involve computing the same value multiple times.

Here is an example of how dynamic programming might be used to solve the Fibonacci sequence problem:

function fibonacci(n) {
  let cache = new Array(n + 1).fill(0)
  return fibonacciHelper(n, cache)
}

function fibonacciHelper(n, cache) {
  if (n === 0 || n === 1) {
    return n
  }
  if (cache[n] > 0) {
    return cache[n]
  }
  cache[n] = fibonacciHelper(n - 1, cache) + fibonacciHelper(n - 2, cache)
  return cache[n]
}

console.log(fibonacci(10)) // Output: 55

In this example, the fibonacci function uses dynamic programming to compute the nth number in the Fibonacci sequence. The fibonacciHelper function is used to compute the Fibonacci value recursively, with a cache to store the results of previous computations to avoid redundant work.

Dynamic programming can be very useful for solving problems that involve optimization or computing the same value multiple times. It is often used in competitive programming and can be an efficient way to solve certain types of problems.

Here are a few examples of Leetcode problems where dynamic programming can be used to find the solution.

Climbing Stairs: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the top?
Maximum Subarray: Given an integer array nums, find the contiguous subarray (containing at least one number) which has the largest sum and return its sum.
Unique Paths: A robot is located at the top-left corner of a m x n grid (marked ‘Start’ in the diagram below). The robot can only move either down or right at any point in time. The robot is trying to reach the bottom-right corner of the grid (marked ‘Finish’ in the diagram below). How many possible unique paths are there?
Minimum Path Sum: Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which minimizes the sum of all numbers along its path.

5. Coin Change: You are given coins of different denominations and a total amount of money amount. Write a function to compute the fewest number of coins that you need to make up that amount. If that amount of money cannot be made up by any combination of the coins, return -1.

In all of these problems, dynamic programming can be used to break the problem down into smaller subproblems and store the results of these subproblems to avoid redundant work. This can help to improve the efficiency of the solution and make it possible to solve larger or more complex problems.

These are just a few examples of the many algorithms and techniques that are commonly used in competitive programming and that involve working with arrays.

Conclusion

Arrays are a fundamental data structure that is commonly used in competitive programming. These are some techniques and algorithms that can be used to work with arrays and solve problems efficiently, such as linear search, binary search, sorting algorithms, prefix sums, two pointer technique, sliding window technique, 2D array techniques, and dynamic programming.

To be successful in competitive programming, it is important to have a strong understanding of these techniques and be able to apply them effectively to solve problems. This may involve understanding how to access and modify elements of an array, how to iterate through the elements of an array, and how to use algorithms and techniques to perform operations on the elements of an array.

Overall, the ability to effectively work with arrays is an important skill for those interested in competitive programming and can be the key to solving a wide range of problems.

Common Searching Algorithms Implementation using Javascript

Vishal Sharma — Fri, 11 Feb 2022 12:11:44 GMT

Array searching is the process of looking for a specific element or value within an array. There are many different algorithms that can be used to search an array, and the choice of which one to use can depend on the size of the array, the type of elements it contains, and the desired performance characteristics. Some common array search algorithms include linear search and binary search.

Linear Search

Linear search is a simple search algorithm that involves looking at each element of the array one by one, starting at the first element, until the desired element is found. This can be done by looping through the array and comparing each element to the search key until a match is found.

Here is an example of a linear search algorithm written in JavaScript:

function linearSearch(array, searchKey) {
  for (let i = 0; i < array.length; i++) {
    if (array[i] === searchKey) {
      return i // search key found, return its index
    }
  }
  return -1 // search key not found
}

// Example usage
const array = [8, 5, 3, 9, 1]
const searchKey = 5
const index = linearSearch(array, searchKey)

if (index >= 0) {
  console.log(`${searchKey} found at index ${index}`)
} else {
  console.log(`${searchKey} not found in array`)
}
//Output : 5 found at index 1

Linear search has a time complexity of O(n), where n is the size of the array. This means that the time taken by the algorithm increases linearly with the size of the array.

Binary Search

Binary search is a more efficient search algorithm that involves dividing the array in half and comparing the search key to the middle element. If the search key is less than the middle element, then the algorithm repeats the process on the left half of the array. If the search key is greater than the middle element, then the algorithm repeats the process on the right half of the array. This process is repeated until the search key is found or it is determined that the search key is not present in the array.

Here is an example of a binary search algorithm written in JavaScript:

function binarySearch(array, searchKey) {
  let left = 0
  let right = array.length - 1

  while (left <= right) {
    const middle = Math.floor((left + right) / 2)
    if (array[middle] === searchKey) {
      return middle // search key found, return its index
    } else if (array[middle] < searchKey) {
      left = middle + 1 // search in right half of array
    } else {
      right = middle - 1 // search in left half of array
    }
  }

  return -1 // search key not found
}

// Example usage
const array = [1, 3, 5, 8, 9]
const searchKey = 5
const index = binarySearch(array, searchKey)

if (index >= 0) {
  console.log(`${searchKey} found at index ${index}`)
} else {
  console.log(`${searchKey} not found in array`)
}
//Output : 5 found at index 1

This function takes an array and a search key as input, and returns the index of the first occurrence of the search key in the array, or -1 if the search key is not found. The function uses a while loop to repeatedly divide the search area in half until the search key is found or it is determined that the search key is not present in the array. The left and right variables keep track of the bounds of the search area, and the middle variable is calculated as the average of left and right. The value of the element at the index middle is compared to the search key, and the search area is updated accordingly. If a match is found, the index of the element is returned. If the search area becomes empty (left > right), the function returns -1, indicating that the search key was not found.

It’s important to note that this implementation of binary search only works on sorted arrays. If the array is not sorted, the results of the search will be unpredictable.

Binary search has a time complexity of O(log n), which means that the time taken by the algorithm increases logarithmically with the size of the array.

Conclusion

In general, binary search is much faster than linear search for large arrays. However, it can only be used if the array is already sorted, and it requires more memory to store the sorted array. Linear search, on the other hand, can be used with unsorted arrays and requires less memory. Therefore, the choice between linear search and binary search depends on the specific requirements of the problem you are trying to solve.

Common Sorting Algorithms Implementation using Javascript

Vishal Sharma — Sun, 16 Jan 2022 12:11:44 GMT

Array sorting is the process of arranging the elements of an array in a specific order, such as ascending or descending order. The order can be based on the value of the elements, or on some other criterion such as the length of the elements in the case of strings.

There are many different algorithms that can be used to sort arrays, and the choice of which one to use can depend on the size of the array, the type of elements it contains, and the desired performance characteristics. Some common array sorting algorithms include quicksort, mergesort, and heapsort.

Common Sorting Algorithms

Selection Sort

Selection sorting works by iterating through the array and selecting the minimum element at each step. The minimum element is then swapped with the current element, and the process is repeated until the array is fully sorted.

//Selection Sort
/**
 * @description This function takes an array as input and sorts it in ascending order using the selection sort algorithm.
 */
const selectionSort = array => {
  for (let i = 0; i < array.length; i++) {
    let minIndex = i
    for (let j = i + 1; j < array.length; j++) {
      if (array[j] < array[minIndex]) {
        minIndex = j
      }
    }
    ;[array[i], array[minIndex]] = [array[minIndex], array[i]]
  }
  return array
}

//Example
let unsortedArray = [5, 2, 7, 1, 3]
let sortedArray = selectionSort(unsortedArray)
console.log(sortedArray) // Output: [1, 2, 3, 5, 7]

Selection sort has a time complexity of O(n^2), which means that the time taken by the algorithm increases quadratically with the size of the array. This makes it less efficient than some other sorting algorithms.

Bubble Sort

Bubble Sorting works by iterating through the array and comparing adjacent elements. If an element is greater than the element after it, the two elements are swapped. This process is repeated until the array is fully sorted.

//Bubble Sort
/**
 * @description This function takes an array as input and sorts it in ascending order using the bubble sort algorithm.
 */
const bubbleSort = array => {
  let swapped = true
  while (swapped) {
    swapped = false
    for (let i = 0; i < array.length; i++) {
      if (array[i] > array[i + 1]) {
        ;[array[i], array[i + 1]] = [array[i + 1], array[i]]
        swapped = true
      }
    }
  }
  return array
}

//Example
let unsortedArray = [5, 2, 7, 1, 3]
let sortedArray = bubbleSort(unsortedArray)
console.log(sortedArray) // Output: [1, 2, 3, 5, 7]

Bubble sort also has a time complexity of O(n^2), which means that the time taken by the algorithm increases quadratically with the size of the array. This makes it less efficient than some other sorting algorithms, such as quicksort and mergesort, which have a time complexity of O(n log n). However, bubble sort is simple to implement and can be a good choice for small arrays or when memory is limited.

Insertion Sort

Insertion sort is a simple sorting algorithm that works by building up a sorted list one element at a time. It iterates through the input array and inserts each element in its correct position in the sorted list.

The algorithm works by iterating over the input array and comparing each element with the elements that come before it. If an element is smaller than the one that comes before it, it is inserted in its correct position. This process continues until the entire array is sorted.

//Insertion sort
/**
 * @description This function takes an array as input and sorts it in ascending order using the insertion sort algorithm.
 */
function insertionSort(array) {
  for (let i = 1; i < array.length; i++) {
    let currentValue = array[i]
    let j
    for (j = i - 1; j >= 0 && array[j] > currentValue; j--) {
      array[j + 1] = array[j]
    }
    array[j + 1] = currentValue
  }
  return array
}

let arr = [5, 2, 4, 6, 1, 3]
console.log(insertionSort(arr)) // Output: [1, 2, 3, 4, 5, 6]

Insertion sort also has a time complexity of O(n^2) in the worst case, which makes it less efficient than other sorting algorithms for large inputs. However, it has a relatively low overhead and can be useful for sorting small arrays or partially sorted arrays.

Merge Sort

Merge sort is a divide and conquer sorting algorithm that works by dividing the input array in half, sorting the two halves, and then merging them back together in a sorted manner.

The merge function takes in two sorted arrays and merges them into a single sorted array. It does this by comparing the first element of each array and adding the smaller of the two to the result array. This process continues until one of the arrays is fully merged into the result array, at which point the remaining elements of the other array are simply appended to the result.

//Merge sort
/**
 * @description This function takes an array as input and sorts it in ascending order using the merge sort algorithm.
 */
function mergeSort(array) {
  if (array.length <= 1) {
    return array
  }

  const middle = Math.floor(array.length / 2)
  const left = array.slice(0, middle)
  const right = array.slice(middle)

  return merge(mergeSort(left), mergeSort(right))
}

function merge(left, right) {
  const result = []
  let leftIndex = 0
  let rightIndex = 0

  while (leftIndex < left.length && rightIndex < right.length) {
    if (left[leftIndex] < right[rightIndex]) {
      result.push(left[leftIndex])
      leftIndex++
    } else {
      result.push(right[rightIndex])
      rightIndex++
    }
  }

  return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex))
}

let arr = [5, 2, 4, 6, 1, 3]
console.log(mergeSort(arr)) // Output: [1, 2, 3, 4, 5, 6]

Quick Sort

Quick sort is a divide and conquer sorting algorithm that works by selecting a “pivot” element from the input array and partitioning the other elements into two sub-arrays based on whether they are less than or greater than the pivot. The pivot and the sub-arrays are then sorted recursively using the same process.

function quickSort(array, left, right) {
  if (left < right) {
    const pivotIndex = partition(array, left, right)
    quickSort(array, left, pivotIndex - 1)
    quickSort(array, pivotIndex + 1, right)
  }
  return array
}

function partition(array, left, right) {
  const pivot = array[right]
  let i = left
  for (let j = left; j < right; j++) {
    if (array[j] < pivot) {
      ;[array[i], array[j]] = [array[j], array[i]]
      i++
    }
  }
  ;[array[i], array[right]] = [array[right], array[i]]
  return i
}

let arr = [5, 2, 4, 6, 1, 3]
console.log(quickSort(arr, 0, arr.length - 1)) // Output: [1, 2, 3, 4, 5, 6]

The partition function in the example above selects the last element of the input array as the pivot and rearranges the other elements in the array such that all elements less than the pivot are placed before it and all elements greater than the pivot are placed after it. The pivot is then returned to its correct position in the sorted array by swapping it with the element at the partition index.

Quick sort has a time complexity of O(n log(n)) in the average case and O(n^2) in the worst case. It is generally faster than merge sort and can be implemented in-place (i.e., without requiring additional space), which makes it a good choice for sorting large arrays on devices with limited memory. However, it is not a stable sort, meaning that the order of elements that compare as equal may not be preserved in the sorted output.

Conclusion

Ultimately, the best sorting technique to use will depend on the specific requirements of your application, such as the size and type of the input array, the amount of available memory, and the required stability of the sort. It is often a good idea to benchmark different sorting techniques to determine the most efficient solution for your specific use case.

Data Structure and Algorithms with JS - Part 0

Vishal Sharma — Sat, 01 Jan 2022 12:11:44 GMT

Data structures are an essential aspect of computer science and programming. They provide a way to organize and store data in a computer so that it can be accessed and modified efficiently. In this blog, we will cover some basic concepts and common data structures that you should know as a programmer.

What is a data structure?

A data structure is a way of organizing and storing data in a computer so that it can be accessed and modified efficiently. There are many different types of data structures, each with its own set of benefits and drawbacks.

Some common data structures include arrays, linked lists, stacks, queues, trees, and graphs.

Arrays

An array is a linear data structure that stores a fixed-size sequence of elements of the same data type. The elements in an array are stored in contiguous memory locations and can be accessed using an index. Arrays are efficient for accessing and modifying elements, but they are not very flexible when it comes to inserting and deleting elements.

Linked Lists

A linked list is a linear data structure that consists of a sequence of nodes. Each node contains a value and a reference (or pointer) to the next node in the list. Linked lists are flexible because they allow you to insert and delete elements easily, but they are not as efficient as arrays for accessing and modifying elements.

Stacks

A stack is a linear data structure that follows the last-in, first-out (LIFO) principle. It has two main operations: push and pop. Push adds an element to the top of the stack, and pop removes the element from the top of the stack. Stacks are often used to implement undo/redo functionality and to evaluate expressions.

Queues

A queue is a linear data structure that follows the first-in, first-out (FIFO) principle. It has two main operations: enqueue and dequeue. Enqueue adds an element to the end of the queue, and dequeue removes the element from the front of the queue. Queues are often used to implement task scheduling and buffering.

Trees

A tree is a non-linear data structure that consists of nodes organized into a hierarchy. The top node is called the root, and the nodes below it are called child nodes. Each child node may have its own child nodes, forming a sub-tree. Trees are often used to represent hierarchical relationships and to perform operations such as searching and sorting.

Graphs

A graph is a non-linear data structure that consists of a set of vertices (or nodes) and a set of edges that connect the vertices. Graphs can be directed (where the edges have a direction) or undirected (where the edges have no direction). They are often used to represent relationships and connections between data.

Choosing the right data structure

When choosing a data structure, it’s important to consider the operations that you will be performing on the data and the efficiency of each data structure for those operations. For example, if you need to access and modify elements frequently, an array might be a better choice than a linked list. On the other hand, if you need to insert and delete elements frequently, a linked list might be a better choice.

What is an Algorithm?

As a computer programmer, it is important to understand the basics of algorithms and time space complexity. An algorithm is a set of steps that can be followed to solve a problem. It is the foundation of computer programming and is used to create software, applications, and websites.

One important aspect of algorithms is their time and space complexity, which measures how efficient an algorithm is in terms of the resources it uses. Time complexity refers to the amount of time an algorithm takes to complete its task, while space complexity refers to the amount of memory or storage space it requires.

What is Complexity Notation!?

One way to measure the efficiency of an algorithm is through the use of Big O notation. Big O notation is a way to describe the upper bound of an algorithm’s time complexity. It is typically used to describe the worst case scenario, or the maximum amount of time it will take for the algorithm to run.

For example, if an algorithm has a time complexity of O(n), this means that the time it takes to run will increase linearly with the size of the input (n). An algorithm with a time complexity of O(n^2) means that the time it takes to run will increase with the square of the size of the input.

Other common notations for time complexity include Omega notation (Ω), which describes the lower bound of an algorithm’s time complexity, and Theta notation (Θ), which describes both the upper and lower bounds of an algorithm’s time complexity.

Here is a table comparing the different notations:

Notation	Meaning
O	Upper bound
Ω	Lower bound
Θ	Both upper and lower bounds

There are several different types of time and space complexity cases.

The most common ones are:

O(n) - This type represents the linear time complexity of an algorithm, where n is the size of the input data. An algorithm with an O(n) time complexity means that the time it takes to complete the task increases linearly with the size of the input data.

O(1) - O(1) time complexity is considered the best possible time complexity. This represents a constant time complexity, meaning that the time it takes to complete the task does not depend on the size of the input data.

O(log n) - This type represents a logarithmic time complexity, meaning that the time it takes to complete the task increases logarithmically with the size of the input data.

O(n log n) - This type represents a time complexity that is a combination of linear and logarithmic.

O(n^2) - This type represents a quadratic time complexity, meaning that the time it takes to complete the task increases exponentially with the size of the input data.

Big-O Complexity Chart: http://bigocheatsheet.com/

In general, we want to choose algorithms with the lowest possible time complexity. However, it’s important to keep in mind that time complexity is just one factor to consider when choosing an algorithm. Other factors, such as the simplicity of the algorithm and the amount of space it requires, may also be important considerations.

Overall, understanding algorithm and time space complexity is crucial for choosing the most efficient solution to a problem. By using the different types and understanding their meanings, we can better evaluate the efficiency of different algorithms and choose the one that best fits our needs.

Basics of Markdown - Syntax and Examples

Vishal Sharma — Sun, 28 Nov 2021 12:11:44 GMT

Markdown is a lightweight markup language that is used to format text on the web. It was created in 2004 by John Gruber, a software developer, and Aaron Swartz, an internet activist, as a way to write and format text in a simple and straightforward manner.

Markdown is written in plain text, which means you can use any text editor to write in it. It uses a set of special characters and symbols to indicate formatting, such as bold, italic, and headers. This makes it easy to read and write, as you don’t have to use complex formatting tools or HTML tags.

Here is a table of the most common Markdown syntax:

Syntax	Description
#	Denotes a heading. The number of `#` symbols indicates the heading level (e.g. # is a top-level heading, `##` is a second-level heading, etc.)
* , -	Denotes a bullet point in a list.
1.	Denotes a numbered list.
[text](url)	Denotes a link. The `text` is the text that will be displayed, and the `url` is the link destination.
text	Denotes bold text.
_text_ , *text*	Denotes italic text.
>	Denotes a blockquote.
``` code ```	Denotes a code block. Anything between the backticks will be formatted as code.
![alt text](image url)	Denotes an image. The alt text is a description of the image, and the image url is the location of the image.
___	Denotes an horizontal Line

Here are some examples of how these syntax elements can be used in Markdown:

# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5
###### Heading Level 6

* Bullet point 1
* Bullet point 2
* Bullet point 3

1. Numbered list item 1
2. Numbered list item 2
3. Numbered list item 3

---
horizontal line


- Unordered List item 1
- Unordered List item 2
- Unordered List item 3

[Link example](http://example.com)
![alt text](https://images.unsplash.com/photo-1541364983171-a8ba01e95cfc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80)

**Bold text**

*Italic text*

> Blockquote

`Single line of code`

```
Multiline of code
Next line
Last line
```

Preview of above markdown

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Bullet point 1
Bullet point 2
Bullet point 3

Numbered list item 1
Numbered list item 2
Numbered list item 3

horizontal line

Unordered List item 1
Unordered List item 2
Unordered List item 3

Link example

Bold text

Italic text

Blockquote

Single line of code

Multiline of code
Next line
Last line

As you can see, Markdown is a simple and easy-to-use language that allows you to format text for the web without the need for complex tools or HTML tags. It is widely used in blogging platforms, online forums, and even in version control systems like Git.

Checkout my markdown previewer project

Hiding an Element with CSS: Display vs Visibility vs Opacity

Vishal Sharma — Fri, 17 Sep 2021 12:11:44 GMT

CSS offers various ways to hide elements on a web page, but it’s important to understand the differences between them in order to choose the right one for your specific use case. In this blog post, we will explore the display: none, visibility: hidden, and opacity: 0 properties and how they can be used to hide elements.

Here’s a quick comparison table:

Property	Description	Collapses	Events	Tab Order	Animatable
display: none	Hides an element and takes up no space in the layout	✅	❌	❌	❌
visibility: hidden	Hides an element but takes up space in the layout	❌	❌	❌	❌
opacity: 0	Makes an element fully transparent but still takes up space in the layout	❌	✅	✅	✅

##### display: none

The display property determines how an element is displayed on the web page. The none value completely removes the element from the document, including all its children. This means that the element will not take up any space on the page and will not be visible to the user.

.toggle {
  display: none;
}

One important thing to note about display: none is that it not only hides the element, but it also removes it from the document entirely. This means that any events or interactions associated with the element will no longer work. For example, if the element is a button that triggers an action when clicked, that action will no longer be triggered when the button is hidden using display: none.

visibility: hidden

Unlike display: none, the visibility: hidden property does not remove the element from the document. Instead, it only hides the element and leaves empty space where the element would have been.

.toggle {
  visibility: hidden;
}

This can be useful in cases where you want to hide an element but still want to preserve its layout and keep its space on the page. For example, if you have a navigation menu with multiple items and you want to hide one of the items temporarily, using visibility: hidden will allow you to keep the layout of the menu intact.

opacity: 0

The opacity property determines the transparency of an element. A value of 0 means that the element is completely transparent and not visible to the user.

.toggle {
  opacity: 0;
}

Like visibility: hidden, opacity: 0 does not remove the element from the document. It only makes the element transparent, so it will still take up space on the page and any events or interactions associated with the element will still work.

Choosing the right property

When it comes to hiding elements, you should choose the right property based on your specific needs. Here are some general guidelines to help you make the right decision:

If you want to completely remove the element from the document and change layout, use display: none.
If you want to hide the element but preserve its layout and space on the page, use visibility: hidden.
If you want to hide the element but still allow it to interact with the user, use opacity: 0.

It’s important to note that these properties can be used in combination with each other, depending on your needs. For example, you can use opacity: 0 to make an element transparent and visibility: hidden to hide it, or you can use display: none to remove an element from the document and opacity: 0 to make it transparent. This is useful when you are adding a complex animation using keyframes and need to have different behaviors in animation cycle.

Conclusion

In conclusion, the display:none, visibility:hidden, and opacity:0 CSS properties are all useful for hiding elements on a webpage. display:none completely removes the element from the page, while visibility:hidden and opacity:0 only hide the element but still take up space on the page. It’s important to consider which one is most appropriate for the specific situation, as they can affect the layout and functionality of the page in different ways. Understanding and utilizing these properties can help create a more polished and visually appealing website.

CSS Pre Processors- SASS

Vishal Sharma — Sun, 15 Aug 2021 12:11:44 GMT

CSS preprocessors are tools that allow you to write more efficient and maintainable CSS code. They extend the capabilities of plain CSS by adding features such as variables, mixins, and functions, which can help you write more modular and scalable stylesheets.

There are several popular CSS preprocessors available, including Sass, Less, and Stylus. In this blog, we’ll take a look at Sass and provide some examples of how it can be used to make your CSS more efficient and maintainable.

What is Sass?

Sass (short for Syntactically Awesome Stylesheets) is a CSS preprocessor that adds features such as variables, mixins, and functions to CSS. It is written in Ruby, but can be used with any project regardless of the programming language being used. Sass files have a .scss extension and are compiled into regular CSS files that can be used in any web project.

Why use Sass?

There are several benefits to using Sass in your web projects:

Maintainability

Sass allows you to use variables and mixins, which can make your CSS code more maintainable by allowing you to define styles in a single place and reuse them throughout your stylesheets. This can help reduce duplication and make it easier to update your styles in the future.
Modularity

Sass allows you to use import statements to split your stylesheets into smaller, more manageable files. This can make it easier to organize your code and keep your stylesheets organized and easy to read.
Functionality

Sass adds features such as functions and operators, which can help you write more efficient and powerful stylesheets. For example, you can use functions to perform calculations and generate styles dynamically, or use operators to concatenate strings or perform other operations.

How to use Sass

To use Sass in your project, you’ll need to install a Sass compiler. There are several options available, including the command-line sass compiler, preprocessor plugins for popular text editors, and compilers like dart-sass to integrate with build tools like webpack.

Once you have a Sass compiler installed, you can start using Sass in your project by creating .scss files and using the @import directive to include them in your main stylesheet.

Here’s an example of how you might use Sass in a project (We will be using scss syntax in this blog to write sass code):

// Define a variable for the primary color
$primary-color: #333;

// Define a mixin for reusable styles
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// Use the mixin and the variable in your styles
.btn {
  background-color: $primary-color;
  @include border-radius(5px);
}
// when this Sass code is compiled, it will output the following CSS:
.btn {
  background-color: #333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

As you can see, Sass allows you to use variables and mixins to make your CSS more maintainable and efficient. There are many more features available in Sass, including functions, operators, and control directives such as @if, @else, @while, @for, @each.

Conditional Execution @if

As you’d expect, the Sass @if directive and its companions @else if and @else, allow you to include Sass code in the CSS output only if certain conditions are met. The basic syntax is simple:

$age: 27;

.bg-color {
  @if $age < 18 {
    background-color: red;
  } @else if $test == 18 {
    background-color: blue;
  } @else {
    background-color: green;
  }
}
// when this Sass code is compiled, it will output the following CSS:
.bg-color {
  background-color: green;
}

Conditional Looping - @while

As its name implies, the @while directive will continue to output CSS produced by the statements while the condition returns true.

$font-size: 1;

@while $font-size < 4 {
  .font-size-#{$font-size} {
    font-size: #{$font-size}rem;
  }
  $font-size: $font-size + 1;
}
// when this Sass code is compiled, it will output the following CSS:
.font-size-1 {
  font-size: 1rem;
}
.font-size-2 {
  font-size: 2rem;
}
.font-size-3 {
  font-size: 3rem;
}

⚠️ Heads up! Although @while is necessary for a few particularly complex stylesheets, you’re usually better of using either @each or @for if either of them will work. They’re clearer for the reader, and often faster to compile as well.

Unconditional Looping @for

You can use the @for directive to execute a group of statement a specific number of times. It has two variations. The first, which uses the through keyword, executes the statements from to , inclusive and replacing the through keyword with to makes the loop exclusive, that is, it will not be executed when the variable is equal to :

@for $i from 1 through 4 {
  .font-size-#{$i} {
    font-size: #{$i}rem;
  }
}
// when this Sass code is compiled, it will output the following CSS:
.font-size-1 {
  font-size: 1rem;
}
.font-size-2 {
  font-size: 2rem;
}
.font-size-3 {
  font-size: 3rem;
}
.font-size-4 {
  font-size: 4rem;
}

@for $i from 1 to 4 {
  .font-size-#{$i} {
    width: 2px * $i;
  }
}
// when this Sass code is compiled, it will output the following CSS:
.font-size-1 {
  font-size: 1rem;
}
.font-size-2 {
  font-size: 2rem;
}
.font-size-3 {
  font-size: 3rem;
}

Map through list or map @each

Finally, the @each directive will execute a set of items in either a list or a map. For such a powerful structure, the syntax is quite straightforward:

//List
$align: (left, right, center);
@each $direction in $align {
  .text-#{$direction} {
    text-align: $direction;
  }
}
// when this Sass code is compiled, it will output the following CSS:
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

//Map
$font-map: (
  xs: 12px,
  sm: 14px,
  md: 16px,
  lg: 18px,
  xl: 24px,
);

@each $key, $value in $font-map {
  .text-#{$key} {
    font-size: $value;
  }
}

// when this Sass code is compiled, it will output the following CSS:
.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-md {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 24px;
}

Functions & Mixins

SCSS also supports functions and mixins.

Functions

Functions allow you to perform operations on values and return a result. For example, you can use the darken function to reduce the lightness of a color by a given percentage:

color: darken(#ff0000, 20%);

SCSS also have a number of built-in modules with functions for working with values and styles. Here are some examples of the types of functions that are available in SCSS:

color module. Some functions from color module are:
- rgb(): The rgb() function allows you to specify a color using the red, green, and blue channels.
- opacify(): The opacify() function increases the opacity of a color.
- transparentize(): The transparentize() function decreases the opacity of a color.
- lighten(): The lighten() function increases the lightness of a color by a given percentage.
- darken(): The darken() function decreases the lightness of a color by a given percentage.
- saturate(): The saturate() function increases the saturation of a color by a given percentage.
- desaturate(): The desaturate() function decreases the saturation of a color by a given percentage.
- grayscale(): The grayscale() function converts a color to grayscale.
- complement(): The complement() function returns the complement of a color.
math module. Some functions from math module are:
- abs(): The abs() function returns the absolute value of a number. width: abs(-100px); // 100px
- ceil(): The ceil() function returns the smallest integer that is greater than or equal to a number. width: ceil(99.5px); // 100px
- floor(): The floor() function returns the largest integer that is less than or equal to a number. width: floor(99.5px); // 99px
- max(): The max() function returns the maximum value in a list of numbers. width: max(100px, 200px, 300px); // 300px
- min(): The min() function returns the minimum value in a list of numbers. width: min(100px, 200px, 300px); // 100px
- percentage(): The percentage() function converts a number to a percentage. width:percentage(math.div(100px, 50px)); // 200%
string module. Some functions from string module are:
- unquote(): The unquote() function removes quotes from a string.
- quote(): The quote() function adds quotes to a string.
- str-length(): The str-length() function returns the length of a string. width: str-length("Hello, world!"); // 13
- to-upper-case(): The to-upper-case() function converts a string to uppercase.
- to-lower-case(): The to-lower-case() function converts a string to lowercase.
list module. Some functions from list module are:
- length(): The length() function returns the length of a list.
```
$list: 1px 2px 3px;
width: length($list); // 3
```
- nth(): The nth() function returns the nth element of a list.
```
$list: 1px 2px 3px;
width: nth($list, 2); // 2px
```
- join(): The join() function concatenates two lists.
```
```scss
  $list1: 1px 2px;
  $list2: 3px 4px;
  width: join($list1, $list2); // 1px 2px 3px 4px
```
```
- append(): The append() function adds an element to the end of a list.
```
$list: 1px 2px;
width: append($list, 3px); // 1px 2px 3px
```
map module. Some functions from map module are:
- map-get(): The map-get() function retrieves the value for a given key in a map.
- map-merge(): The map-merge() function merges two maps together. If the maps have overlapping keys, the values from the second map will overwrite the values from the first map.
- map-remove(): The map-remove() function removes a key-value pair from a map.

Mixins

Mixins, on the other hand, allow you to define a set of styles that can be reused throughout your stylesheet. For example, you might define a mixin for a common button style:

@mixin button {
  font-size: 16px;
  color: #fff;
  background-color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

You can then use the mixin in your stylesheet by including it using the @include directive:

.btn {
  @include button;
}

Mixins can also accept arguments, allowing you to customize the styles that are included. For example:

@mixin button($color) {
  font-size: 16px;
  color: #fff;
  background-color: $color;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn {
  @include button(#000);
}

Overall, functions and mixins are powerful features of SCSS that allow you to write more efficient and maintainable stylesheets. By using these features, you can write code that is easier to read and understand, and that can be easily reused throughout your application.

HTTP Status Code for web developers

Vishal Sharma — Tue, 22 Jun 2021 12:11:44 GMT

HTTP status codes are a crucial part of the World Wide Web, as they provide important information about the status of a given HTTP request. These codes are sent back to the client from the server in response to a request, and they indicate whether the request was successful, or if there was an error.

There are many different HTTP status codes, each with its own specific meaning. For example, the code 200 indicates that a request was successful, while the code 404 indicates that the requested resource could not be found. Other codes include 301for a permanent redirect, “403” for a forbidden request, and 500 for a server error.

One of the most important things to understand about HTTP status codes is that they help to provide more detailed information about a given request. This can be particularly useful for troubleshooting, as it can help to identify where a problem might be occurring in the communication between a client and a server.

200 Series Status Codes

One of the most commonly seen HTTP status codes is the 200 series. These codes indicate that a request was successful, and that the requested information has been returned to the client. For example, a 200 OK status means that the request was received and understood, and the requested resource has been returned.

200 - OK

The first status code is 200 and is just a generic success status. All this says is that request was received and understood, and the requested resource has been returned but it doesn’t give any more information than that. Because of this, the 200 status is the fallback status you should use for any successful request when there is no more specific code to use instead.

201 - Created

Speaking of more specific codes, we have the 201 code. This is a success code that says a resource was successfully created. Most often you will see this as the result of a POST request since most POST requests are used for creating things. For example, if you have an API route for creating a new entry in your DB you should return a 201 if that entry was created successfully.

202 - Accepted

The 202 status code is a bit niche. Essentially, this code just means that the response was successfully received, but that the actual action of the request (creating a resource, updating data, etc.) has not been completed yet. This is commonly used when doing a particular task is very slow so it gets queued up to do later. For example, if you need to generate a large report that you will later email to a user then you may return a 202 to let the client know you are processing the request but have not finished it yet.

204 - No Content

Another specific code is the 204 code which means the request was successful, but there is no data to return. This is very common with DELETE requests since there is usually no data to return as a response to deleting something. The biggest key to this status code is that it cannot contain any data in the body.

300 Series Status Codes

Another commonly seen series is the 300 series, which indicates that the requested resource has been moved or redirected. For example, a 301 Moved Permanently status indicates that the resource has been permanently moved to a new location, and any future requests should be directed to the new location.

301 - Moved Permanently

Probably the most common type of 300 series status code is the 301. This just says that the resource has been permanently moved to a new location, and any future requests should be directed to the new location. This new URL must be sent down in the response with the 301 code. If this happens the browser will automatically redirect users to the new URL. This will also trigger search engines to associate all data from the old URL with the new URL so you shouldn’t lose any rankings in a search engine by doing this.

302 - Found

Similar to the 301 status this status is used to tell the client that the page is at a new URL but this is a temporary change. This means that search engines won’t replace the old URL with this new URL. This is useful if you need to send a user to a different version of the same page, but don’t want that version of the page to replace your main version in search engines. For example, if you are doing A/B tests you would 302 redirect half your users to the alternate version of the site. This is also useful for things like localization where you may want to redirect users to localized versions of your site based on where they are from.

304 - Not Modified

The final important 300 series status code is the 304. This is used for caching and essentially just says that the resource being requested has not changed. This needs to be used in conjunction with a previous 200 status request that included caching headers such as the Cache-Control, and Expires header. When a client tries to access a resource before the cached time period has expired the server will return a 304 to prevent having to retransmit all the data to the client.

400 Series Status Codes

The 400 series of HTTP status codes indicates that there was an error with the request made by the client. This could be due to a malformed request, missing parameters, or other issues. For example, a 404 Not Found status indicates that the requested resource could not be found on the server.

400 - Bad Request

Similar to the 200 status code, the 400 status code represents a generic bad request. This just means that data being sent to the request (URL params, JSON, etc.) is incorrect, malformed, missing, or in some way unusable by the server. This is the default status message to send back when you have a request that cannot be handled due to the client. For example, if you try to send a request to create a new user but don’t pass a name the server will send a 400 status code to let you know the name field is required.

401 - Unauthorized

The 401 status code is a bit confusing since while it uses the word unauthorized (which means you don’t have permission) this status code actually means you are unauthenticated. The main difference here is that being unauthenticated means you are not logged in or attempted to log in with invalid credentials. This can happen if you pass along an invalid API key or no API key at all when dealing with APIs.

403 - Forbidden

When dealing with permissions you should use the 403 status code. This status informs the client that they do not have permission to perform this request. This should only be returned if the client is sending along valid credentials (such as a valid API key), but lack the permissions to do the action. For example, if a basic user tries to access admin data you would return a 403.

404 - Not Found

This is the most common HTTP status code people are aware of and it just means the resource could not be found. This could be used for example if you try to access a URL that does not exist or if you try to access something from the database that does not exist.

429 - Too Many Requests

The final important 400 series status code is 429. This code is used when dealing with rate limiting. For example, if you only allow users to access your API 30 times per minute and someone tries to access it 31 times you would return a 429 status code to let them know they need to wait to send their next request. This also must have a Retry-After HTTP header with the amount of time to wait before requests will be accepted by the API.

500 Series Status Codes

Finally, the 500 series of HTTP status codes indicates an error on the server side. This could be due to a server malfunction, a misconfigured server, or other issues. For example, a 500 Internal Server Error indicates that the server encountered an unexpected condition and was unable to complete the request.

500 - Internal Server Error

By far the most common 500 series code is 500. This code just informs the client there was some form of error on the server. This error could be due to anything from an error in the code leading to the program crashing (even if this error is caused by bad client data), to problems accessing the database. This should be used in any situation where the server has an error and there is no more specific code that is applicable.

503 - Service Unavailable

There aren’t too many other 500 series status codes you will use, but 503 is somewhat common. This status code just means that the server is not able to handle the request. This is common to use when doing some form of planned server maintenance where the server is down while being updated. This should also include a Retry-After HTTP header with the estimated time until the server will be back up.

Conclusion

In addition to providing useful information for troubleshooting, HTTP status codes are also important for optimizing the performance of a website. By understanding the different codes and their meanings, web developers can ensure that their site is returning the appropriate status codes for each request, which can help to improve the user experience and increase the overall efficiency of the site.

Overall, HTTP status codes are an essential part of the web, and they play a vital role in helping to ensure that communication between clients and servers is smooth and efficient. By understanding the different codes and their meanings, we can better understand how the web works, and how to optimize the performance of our own websites.

Top ReactJS Best Practices and Tips to Follow

Vishal Sharma — Sun, 16 May 2021 12:11:44 GMT

React.js is a popular JavaScript library for building user interfaces. It allows developers to create reusable components and efficiently update and render them in response to user interactions.

React created as a JavaScript library that allows integration with many exciting components. Interestingly, React as a library also allows developers to create their own components and share them with other developers. As UI (user interface) is an integral ingredient in app development, React is useful for UI developers determining enhanced user experiences and efficacy. Thus, React is useful for creating exceptional UI, leveraging complex UI to component-based UI. It further allows developers to utilize the small UI components for development to React native iOS and Android applications.

While it offers many benefits, it’s important to follow best practices to ensure a smooth and efficient development process.

As we discuss the advantages of React, now let’s check some of the most fundamental React best practices to follow in 2022:

1. Keep Components Small and Reusable

One of the key best practices in React is to keep your components small and focused. This means breaking down complex components into smaller, more modular pieces. This not only helps with readability and maintainability, but it also allows for better reuse and testing of individual components.

2. Use Functional Components

Another important practice is to use functional components wherever possible. These are components that are defined as a function, rather than a class. Functional components are simpler, easier to test, and can often be optimized for performance by React’s virtual DOM. With react v16.8 react introduced hooks. Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components.

3. Keep State at lowest possible level

It’s also important to properly manage your component state. In React, state is an object that holds the values that determine a component’s behavior and render data to the user. Mismanaging state can lead to unexpected behavior and unnecessary re-renders. To avoid this, try to keep your state as simple as possible and avoid storing complex data structures in it. Also you should keep state at lowest possible level as updating state will trigger rerender for entire subtree from that component. If you are storing data at global level you should use reselect for state memoization or you can also use useSelector hook from react-redux v7.1.0 and react react v18.3.0.

4. Avoid index as key in list

Another best practice is to avoid using index keys in your lists. In React, it’s common to render a list of items using the map() function. However, using the index as the key can lead to inefficient updates and re-renders. Instead, try to use a unique identifier for each item in the list. Using index as key can lead to some functional issues also if you are rendering some interactive component like an input as list item.

5. Organize components into logical folders

Lastly, it’s important to properly structure your React application. This means organizing your components into logical folders, keeping your file and folder names consistent, and using descriptive names for your components. This will help with readability and maintainability as application grows and number of components increase, and make it easier for others to understand and work with your code.

In summary, following best practices in React can help ensure a smooth and efficient development process. This includes keeping components small and focused, using functional components, properly managing state, avoiding index keys in lists, and properly structuring your application. By following these practices, you can create scalable and maintainable React applications.

Server Side Rendering React using Express Server

Vishal Sharma — Sun, 07 Mar 2021 12:11:44 GMT

Server-side rendering with React and Express is a powerful way to provide fast and dynamic page content to users. With server-side rendering, your React components are rendered on the server and then sent to the client. This allows for faster initial page loads and improved search engine optimization.

One of the most popular libraries for server-side rendering with React is Express. Express is a web application framework for Node.js that makes it easy to set up a server and handle HTTP requests.

To use server-side rendering with React and Express, you’ll need to do the following:

Set up an Express server and create a route to handle rendering your React components.
Use ReactDOMServer.renderToString() or ReactDOMServer.renderToStream() to render your components to a string on the server.
Pass the rendered components to your server-side template, which will be used to generate the final HTML to be sent to the client.
Browser will render the static html and after react bundle finish downloading it will hydrate the static html to attach all required event listeners.

Here’s an example of how to render React page on server:

//server/index.js
//React build in /build folder
const express = require("express")
const React = require("react")
const ReactDOMServer = require("react-dom/server")

const path = require("path")
const fs = require("fs")

const app = express()

app.get("/", (req, res) => {
  const App = require("../src/App") // your React component
  const filePath = path.resolve(__dirname, "..", "build", "index.html")
  fs.readFile(filePath, "utf8", (err, htmlData) => {
    if (err) {
      console.error("err", err)
      return res.status(404).end()
    }

    // render the app as a string
    const html = ReactDOMServer.renderToString(<App />)

    // inject the rendered app into html and send it
    return res.send(
      htmlData.replace('<div id="root"></div>', `<div id="root">${html}</div>`)
    )
  })
})

app.listen(3000)

In this example, when a user navigates to the root / route, the App React component is rendered to a string using ReactDOMServer.renderToString(). This rendered output is then passed to the html template and sent to the client as the final HTML along with react bundles.

One advantage of using server-side rendering with React and Express is that it allows us to generate the initial HTML on the server, which can improve the initial load time for the application. This can be especially beneficial for applications that have a lot of dynamic content, or for users with slower internet connections.

Another advantage is that it can improve the SEO of the application. Search engines, such as Google, are able to crawl and index the initial HTML of the page, which can make it easier for users to find the application in search results.

In summary, using server-side rendering with React and Express can improve the performance and SEO of your JavaScript applications. It allows you to generate the initial HTML on the server, which can improve the initial load time and make it easier for search engines to crawl and index the page.

Rendering React Component

renderToString and renderToStream are both methods used in React to render a React component to a string or stream, respectively.

renderToString is used to render a React component to a static HTML string, which can be used for server-side rendering. This method is synchronous and returns the resulting HTML string.

renderToStream is used to render a React component to a stream, which allows for streaming the resulting HTML to the client. This method is asynchronous and returns a Readable stream.

Both methods can be useful for optimizing the performance of a React application by rendering the initial HTML on the server-side and streaming it to the client. However, renderToStream is more suitable for large applications with a lot of data, as it allows for streaming the data in chunks to the client instead of sending it all at once.

Create TODO Application using Vanilla JS and Redux!

Vishal Sharma — Sat, 17 Oct 2020 12:11:44 GMT

In this blog, I am going to show you how to create a simple todo application using vanilla JavaScript and Redux. This is a great way to learn the basics of Redux and how to use it in a practical way.

Before Staring

Before we begin, let’s go over some key concepts and terms that will be used throughout this tutorial:

Actions: An action is a plain javascript object that describes a change in the application’s state. It typically contains a type property that describes the type of action and any additional data that may be needed to make the change.
Reducers: A reducer is a pure function that takes in the current state and an action, and returns a new state based on the action. It is responsible for updating the state of the application based on the actions it receives.
Store: The store is the central repository for all of the application’s state. It is created by passing the root reducer to the createStore() method provided by redux.
Dispatch: Dispatching an action is the process of sending an action to the store so that it can be handled by the reducers and the state can be updated.

Getting Started

First we will generate a vanilla js project using vite.

Run npm create vite@latest todo-app and select Vanilla as Framework.

Next, we need to install the Redux library. We can do this by running the following command in our terminal:

npm install redux --save

Next, we need to create our Redux store. The store holds the state of our application and allows us to dispatch actions that change the state.

Create a file with name store.js and add following code in it.

// store.js
import { createStore } from "redux"

// Our initial state
const initialState = {
  todoArr: [],
}

// Our reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TODO":
      // Add a new todo to the list
      return {
        ...state,
        todoArr: [...state.todoArr, action.payload],
      }
    case "REMOVE_TODO":
      // Remove a todo from the list
      return {
        ...state,
        todoArr: state.todoArr.filter(todo => todo.id !== action.payload),
      }
    default:
      return state
  }
}

// Create our store
const store = createStore(reducer)

export default store

In the code above, we have defined our initial state and our reducer. The reducer takes the current state and an action, and returns a new state based on the action. In our case, we have two actions: ADD_TODO and REMOVE_TODO.

Now, let’s create our HTML page and add some basic styles.

<!-- index.html -->
<!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>Todo App</title>
  </head>
  <body>
    <header>
      <h1 class="header">Todo List</h1>
    </header>
    <main>
      <form class="form">
        <div class="form-element">
          <label for="title">Title</label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="Pickup Groceries"
          />
        </div>
        <div class="form-element">
          <label for="summary">Summary</label>
          <textarea
            id="summary"
            name="summary"
            placeholder="Don't forgat to add milk and eggs"
          ></textarea>
        </div>
        <button type="submit">Add Task</button>
      </form>
      <div id="app"></div>
    </main>
    <script type="module" src="/main.js"></script>
  </body>
</html>

In code above we have created a basic form and a app container for todo list.

Now let’s add the logic to add items to our todo list.

// index.js
import "./style.css"
import store from "./store"

// Get the app container
const form = document.querySelector("form")

form.addEventListener("submit", event => {
  event.preventDefault()
  const formData = new FormData(form)
  const dataObj = {}
  for (const [key, value] of formData) {
    dataObj[key] = value
  }
  if (!dataObj.title) return

  store.dispatch({
    type: "ADD_TODO",
    payload: dataObj,
  })
  form.reset()
})

store.subscribe(() => {
  generateTodoList(store.getState().todoArr)
})

const app = document.querySelector("#app")
const listEl = document.createElement("ol")
listEl.classList.add("todo-list")
listEl.addEventListener("click", e => {
  e.preventDefault()
  const action = e.target.dataset.action.toUpperCase()
  const index = parseInt(e.target.dataset.index)
  store.dispatch({
    type: `${action}_TODO`,
    payload: index,
  })
})

const generateTodoList = list => {
  const htmlList = list.map(
    (todo, i) =>
      `
      <li class="todo-list-item" >
      ${
        todo.complete
          ? `<div class="checkmark">&#10004;</div>`
          : `<button data-action="complete" data-index="${i}" title="Complete Task" class="remove-button">&#10004;</button>`
      }
        <div class="todo-item">
          <p class="todo-title">${todo.title}</p>
          ${todo.summary ? `<p class="todo-summary">${todo.summary}</p>` : ""}
        </div>
        <button data-action="remove" data-index="${i}" title="Remove Task" class="remove-button">&#9747;</button>
      </li>
    `
  )
  listEl.innerHTML = htmlList.join("")
  app.append(listEl)
}

In code above we have added an event listener for form submit event. Where we are extracting data from the form and dispatching an event ADD_TODO to update store.

Then we are subscribing to store changes so that we can update todo list whenever store updates.

At last we have created a basic template to render todo item and added an event listener to mark Item as complete or Remove the Item.

Then we will add some css to style the app.

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #1a202c;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

h1 {
  font-size: 2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #0c6c33;
  cursor: pointer;
  transition: background-color 0.25s;
}
button:hover {
  background-color: #179848;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #1a202c;
    background-color: #ffffff;
  }
  button {
    background-color: #f9f9f9;
  }
  .todo-item {
    background-color: #1a202c;
    color: rgba(255, 255, 255, 0.87);
  }
}

.header {
  text-align: center;
  margin-top: 2rem;
}

.form {
  margin: auto;
  width: 20rem;
}

.form-element {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}
label {
  margin-bottom: 0.75rem;
}

input,
textarea {
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  border: none;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.todo-list {
  margin: 20px 0;
  padding: 0;
  width: 100%;
  max-width: 40rem;
  list-style: none;
}

.todo-list-item {
  display: flex;
  align-items: self-start;
  gap: 1rem;
  padding: 1rem;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.87);
}

.todo-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #1a202c;
}

.todo-title {
  margin: 0;
  font-size: 1.5rem;
}

.todo-summary {
  margin: 0;
  margin-top: 0.5rem;
}

.remove-button {
  padding: 0.25rem;
  border-radius: 4px;
  line-height: 1;
}

.checkmark {
  color: #0c6c33;
}

That’s it. We have created a todo app in Vanilla JS using redux. Next you can add some logic to update a task or store tasks in localstorage for persistance.

Thanks & Keep Coding.

Setting Up Redux in Vanilla JS!

Vishal Sharma — Tue, 13 Oct 2020 12:11:44 GMT

Redux is a powerful state management tool for JavaScript applications, allowing developers to manage and maintain application state in a predictable and efficient manner. In this blog, we will go over the steps to set up Redux in a vanilla JavaScript application.

First we will generate a vanilla js project using vite.

Getting Started

First, we need to install the Redux library. We can do this by running the following command in our terminal:

npm install redux --save

Next, we need to create a store for our application state. The store is the central location where all of our application data is stored and managed. We can create a store by importing the createStore method from the Redux library and passing it our reducer function.

Create a file with name store.js and add following code in it.

import { createStore } from "redux"

export const store = createStore(reducer)

The reducer function is responsible for updating the state based on the action that is dispatched. It is a pure function that takes in the current state and an action, and returns the next state.

Create a file with name reducer.js and add following code.

export const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_ITEM":
      return {
        ...state,
        items: [...state.items, action.item],
      }
    default:
      return state
  }
}

Import this reducer function in store.js file.

Now that we have our store and reducer set up, we can start dispatching actions to update the state. We can dispatch an action by calling the dispatch method on the store, passing in the action object.

Import store from store.js in index.js file and add following code.

store.dispatch({
  type: "ADD_ITEM",
  item: {
    id: 1,
    name: "item1",
  },
})

We can also subscribe to the store to be notified of any state changes. This is useful for updating our UI whenever the state is updated. We can subscribe by calling the subscribe method on the store and passing in a callback function.

store.subscribe(() => {
  console.log(store.getState())
})

Finally, we can access the current state of the store by calling the getState method on the store. This is useful for getting the current state to render in our UI or for performing calculations.

const currentState = store.getState()

Adding Routing to Lit Element!

Vishal Sharma — Sat, 26 Sep 2020 07:47:58 GMT

Now let’s add routing to our project.

For this we will use lit-element-router

Type npm install lit-element-router in console

Now let’s start restructuring our project

We will separate pages and components for better understanding

Create Project files as given in following image:

Now replace code of App.js file with code given below

import { LitElement, html } from "lit-element";
import { router } from "lit-element-router";

//Components
import "./components/navigation/nav-link.component";
import "./components/header/header.component";
import "./router-outlet";

//pages
import "./pages/home/home.page";
import "./pages/contact/contact.page";
import "./pages/about/about.page";

class App extends router(LitElement) {
  static get properties() {
    return {
      route: { type: String },
      params: { type: Object },
      query: { type: Object },
    };
  }

  static get routes() {
    return [
      {
        name: "home",
        pattern: "",
        data: { title: "Home" },
      },
      {
        name: "about",
        pattern: "about",
      },
      {
        name: "contact",
        pattern: "contact",
      },
      {
        name: "not-found",
        pattern: "*",
      },
    ];
  }

  constructor() {
    super();
    this.route = "";
    this.params = {};
    this.query = {};
  }

  router(route, params, query, data) {
    this.route = route;
    this.params = params;
    this.query = query;
  }

  render() {
    return html`
      <app-header></app-header>
      <nav-link href="/">Home</nav-link>
      <nav-link href="/contact">Contact</nav-link>
      <nav-link href="/about">About</nav-link>

      <router-outlet active-route=${this.route}>
        <home-page route="home"></home-page>
        <about-page route="about"></about-page>
        <contact-page route="contact"></contact-page>
        <h1 route="not-found">Not Found</h1>
      </router-outlet>
    `;
  }
}

customElements.define("app-container", App);

Now add below code to router-outlet.js file

import { LitElement, html } from "lit-element";
import { outlet } from "lit-element-router";

class RouterOutlet extends outlet(LitElement) {
  render() {
    return html` <slot></slot> `;
  }
}

customElements.define("router-outlet", RouterOutlet);

Router outlet will act as a container for the page to which we will switch.

Slot is used to render the children of the element. A children is something written between opening and closing tag of element.

Now add following code to nav-link.component.js

import { LitElement, html } from "lit-element";
import { navigator } from "lit-element-router";

class NavLink extends navigator(LitElement) {
  static get properties() {
    return {
      href: { type: String },
    };
  }
  constructor() {
    super();
    this.href = "";
  }
  render() {
    return html`
      <a href="${this.href}" @click="${this.handleClick}">
        <slot></slot>
      </a>
    `;
  }
  handleClick(e) {
    e.preventDefault();
    this.navigate(this.href);
  }
}

customElements.define("nav-link", NavLink);

Let’s add some basic styling to our nav-bar

Wrap nav-links in App.js in div with class nav-container

<div class="nav-container">
    <nav-link href="/">Home</nav-link>
    <nav-link href="/contact">Contact</nav-link>
    <nav-link href="/about">About</nav-link>
</div>

Add styling to App.styles.js

.nav-container {
    display: flex;
    justify-content: space-evenly;
}

Import styles to App.js and add to return array of styles()

Add following code to nav-link.styles.js

import { css } from "lit-element";
export const NavLinkStyles = css`
  .nav-link {
    text-decoration: none;
    border: solid 2px black;
    color: black;
    padding: 5px;
    margin-right: 5px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
  }
  slot {
    font-weight: bold;
  }
  .nav-link:hover {
    color: #ffffff;
    background-color: #000000;
  }
`;

Import styles to nav-link.js and add to styles()

Add nav-link class to <a> tag

<a class="nav-link" href="${this.href}" @click="${this.handleClick}">
    <slot></slot>
</a>

Wolaaa! We have a beautiful Nav Bar now.

Now let’s add some code to pages.

Add some placeholder code to all pages

about.page.js

import { LitElement, css, html } from "lit-element";

class About extends LitElement {
  static get styles() {
    return [css``];
  }
  render() {
    return html` <div>
      <h1>This is About Page</h1>
    </div>`;
  }
  static get properties() {
    return {
      eg: {
        type: String,
      },
    };
  }
  constructor() {
    super();
  }
}
customElements.define("about-page", About);

contact.page.js

import { LitElement, css, html } from "lit-element";

class Contact extends LitElement {
  static get styles() {
    return [css``];
  }

  render() {
    return html` <div>
      <h1>This is Contact Page</h1>
    </div>`;
  }

  static get properties() {
    return {
      eg: {
        type: String,
      },
    };
  }
  constructor() {
    super();
  }
}

customElements.define("contact-page", Contact);

home.page.js

import { LitElement, css, html } from "lit-element";

class Home extends LitElement {
  static get styles() {
    return [css``];
  }

  render() {
    return html` <div>
      <h1>This is Home Page</h1>
    </div>`;
  }

  static get properties() {
    return {
      eg: {
        type: String,
      },
    };
  }
  constructor() {
    super();
  }
}

customElements.define("home-page", Home);

Now spin up the server by typing npm start in console

And try to switch pages by clicking on nav links.

You will notice that as you switch between pages, Url in browser address bar also change.

The is handled by lit-element-router.

Now go to a specific route other then ”/” and refresh the page

You will get Cannot GET /contact in browse.

This is because these routes are generated within our app dynamically and they don’t exist till our app loads.

But Since we refreshed the page webpack-dev-server will try to find index.html in route that don’t exist and we will get this error.

To fix the we will add a property to dev config file

devServer: {
    historyApiFallback: true,
  },

Restart the Server. Now you will see the app will work as intended.

Now whenever webpack detects that given address does not match to any file, it will simply serve the base index file and after that internal router will routes to page specified in URL.

Setting Up Lit Element Project!

Vishal Sharma — Fri, 25 Sep 2020 12:11:44 GMT

Lit Element is a simple library for creating fast, lightweight web components that work in any web page with any framework.

LitElement uses lit-html to render into Shadow DOM , and adds API to manage properties and attributes. Properties are observed by default, and elements update asynchronously when their properties change.

Getting Started

Create a Project Folder and Open it in VS code.

Open console in project directory.

Type npm init

Enter Project name and press enter enter enter …

This will create a Package.json file.

Now We need to install some npm packages.

Type npm install lit-element

We will use webpack to bundle our project.

Type npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server --save-dev

Now we will start creating app components

Create src folder and create App.js file inside it. Copy below code in App.js file

import { LitElement, html, css } from "lit-element";
class App extends LitElement {
  static get styles() {
    return [css``];
  }
  render() {
    return html`
      <div>Loading Application Component Successfully</div>
    `;
  }
  constructor() {
    super();
  }
}

customElements.define("app-container", App);

Now Create another file header.js and copy below code

import { LitElement, css, html } from "lit-element";
class Header extends LitElement {
  static get styles() {
    return [css``];
  }
  render() {
    return html` <div>This is a header in shadow dom</div>`;
  }
  static get properties() {
    return {
      eg: {
        type: String,
      },
    };
  }
  constructor() {
    super();
  }
}

customElements.define("app-header", Header);

Import app-header into App.js

Type import ./header.js

Now inject header component App

Type <app-header></app-header> in render function

  render() {
    return html`
      <app-header></app-header>
      <div>Loading Successfully</div>
    `;
  }

Now create two files in base directory of your project

webpack.dev.js , webpack.prod.js and copy below code respectively

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/App.js",
  },
  devtool: "inline-source-map",
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: {
    app: "./src/App.js",
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

Add following scripts to package.json file

"start": "webpack-dev-server --hot --inline --config webpack.dev.js", "build": "webpack --config webpack.prod.js",

Now type npm start in console.

This will start dev server and by default will run on port 8080

Now lets add some css to our project

Create App.styles.js file in src folder and copy following code

import { css } from "lit-element";
export const AppStyles = css`
  .app-container {
    border: solid 2px black;
  }
  h1 {
    text-align: center;
  }
  .app-body {
    text-align: justify;
  }
`;

Import this file to App.js import { AppStyles } from "./App.styles"; and add this to styles array

static get styles() {
    return [css``, AppStyles];
  }

Add made some changes to html of app js

render() {
    return html`
      <div class="app-container">
        <app-header></app-header>
        <h1 class="app-title">App title</h1>
        <p class="app-body">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam
          numquam in ipsa optio cumque architecto quisquam, at repellendus
          facere iusto consequatur animi inventore possimus quas, sint sunt
          quidem maxime libero?
        </p>
      </div>
    `;
  }

Now if you see in browser you will notice that styles of App component will not effect app-header component. This is because app-header is attached to Shadow DOM of App and thus styles will not pass to it.

This is great for creating reusable independent components which we can directly plug to any part of our application without worrying about styles conflicting with other components.

Finally we have a working lit element project.

In next part we will restructure our project and add routing on it.

Code Entity RSS Feed

Understanding Scope and Context in JavaScript

Scope

Function Scope

Block Scope

Context

Using an Arrow Function:

Using Function Binding:

Creating a Custom Hook in React

What are Hooks?

What is a custom hook?

Solid JS vs React JS. What is Better?

So what is SolidJS?

A Brief Comparison

Starting a new project

Creating a new ReactJS project

Creating a new SolidJS project

Component Structure

State Management

State Management in ReactJS

State Management in SolidJS

Side Effects

Memoization

memo

useCallback

useMemo

SolidJS createMemo

Is SolidJS Better Than ReactJS?

Infinite scrolling in React

So What is infinite scrolling?

How can we Implement this technique?

Why do we need Infinite Scrolling?

Drawbacks of this technique.

Let’s Start.

Front End interview archive

Archive

Company 1

Round One

Round Two

Round Three

Round Four (Managerial)

Company 2

Round One

Round Two

Round Three

Round Four (Managerial)

System design

Handson

Round Five (Director)

Company 3

Round one

Round Two

Round Three (Managerial)

Company 4

Round One

Round Two

Company 5

Round One (Automated)

Round Two

Round Three(Managerial)

Round Four (Director)

Company 6

Round One

Round Two

Round Three (Managerial)

Company 7

Round One

Round Two

Company 8

Round One

Round Two

Other

Round 1

Round 1

Round One

Round One

Front End interview questions compilation

Interview Process

Javascript

React.js Handson