DEV Community: Rahul Sharma

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Rahul SharmaFollow

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Catch me on

Speech-to-Text Application In Few Lines of JavaScript and HTML

Rahul Sharma — Sat, 19 Oct 2024 11:50:57 +0000

In this article, we will create a speech-to-text application with just a few lines of code using HTML, JavaScript, and CSS.

There are many tools that can change speech into text, but here, we will make our own speech-to-text app using HTML, JavaScript, and CSS. We’ll use a browser's SpeechRecognition API, which is already built into most web browsers like Chrome, Firefox, Safari, and Edge.

What is the SpeechRecognition API?
The SpeechRecognition API allows web applications to convert spoken words into text using a browser’s built-in speech recognition service. It supports real-time speech input, language selection, and various events to handle speech detection and results. For more detailed information, visit the MDN Web Docs on SpeechRecognition.

Let’s get started!

Design the structure of your app with an HTML layout.

First, create an HTML file, which will be the layout (structure) of our app. I’ll keep it simple so you can understand it easily. You can add extra design to make it look nicer if you like.

<html>
  <head>
    <title>Voice to Text</title>
  </head>
  <body>
    <button id="startButton">Start Voice Input</button>
    <button id="clear">Clear</button>
    <select id="language">
      <option value="en-US">English</option>
      <option value="hi-IN">Hindi</option>
    </select>
    <div id="output" contentEditable="true">Hello</div>
  </body>
</html>

We’ve made a simple layout that includes:

A button to start voice input,
A button to clear the text,
A dropdown to choose a language,
A box (div) to show the text output.

We’ve used the contentEditable attribute to make sure we can edit the text inside the box.

Also, each element has an id so we can easily refer to them later in our JavaScript code.

Pretty simple, right? But it doesn’t do anything yet. Let’s make it work using JavaScript!

Bring your app to life with JavaScript.

Add the following JavaScript code to your HTML file inside the <script> tag, before the closing </body> tag.

// Reference to the elements
const startButton = document.getElementById("startButton");
const outputDiv = document.getElementById("output");
const clearButton = document.getElementById("clear");

// Constants for the language and the default language
const LANG = "en-US";

// Event listeners for the clear button
clearButton.addEventListener("click", () => {
  outputDiv.textContent = "";
});

// Create a new SpeechRecognition object
const recognition = new (window.SpeechRecognition ||
  window.webkitSpeechRecognition ||
  window.mozSpeechRecognition ||
  window.msSpeechRecognition)();

// Set the language of the recognition
recognition.lang = LANG;

// Event listeners for the recognition
recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  outputDiv.textContent += ` ${transcript}`;
};

// Event listeners for the start and end of the recognition
recognition.onstart = () => startButton.textContent = "Listening...";;
recognition.onend = () => startButton.textContent = "Start Voice Input";;
startButton.addEventListener("click", () => recognition.start());
function onLanguageChange() {
  recognition.lang = document.getElementById("language").value;
}

In this code, we’ve added functionality to the buttons and the speech recognition object. Here’s how it works:

When you click the start button, the recognition object begins listening to your speech.
Once it hears speech, it converts it to text and adds it to the output box (div).
The clear button removes all text from the output box.

We’ve also added a dropdown to choose the language. When you change the language, the recognition object updates to match your selection. Don’t forget to add the onLanguageChange function to the onchange event of the dropdown.

Enhancing Visual Appeal with CSS

Now, let’s make our app look nicer. Add the following CSS code to your HTML file inside the <style> tag, before the closing </head> tag.

  <style>
    * {
      font-size: 16px;
    }
    body {
      padding: 8px 16px;
      font-family: sans-serif;
      min-width: 90vw;
      min-height: 90vh;
    }
    button, select, option {
      padding: 8px;
      margin: 8px;
      width: 200px;
    }
    #output {
      padding: 8px;
      margin: 8px;
      border: 1px solid #ccc;
      border-radius: 8px;
      min-height: 100%;
      height: 85vh;
    }
  </style>

That’s it! You’ve created a speech-to-text app with just a few lines of code using HTML, JavaScript, and CSS. You can now run your app in a browser and start turning speech into text.

Here is the complete code for you to check out: Github Repository and Live Demo.

Feel free to change the layout and styles to match your preferences. You can also add more features, like saving the text to a file or sending it to a server. There are endless possibilities.

I hope this article was helpful! If you have any questions or feedback, leave a comment below. Happy coding!

Must Read If you haven't

How to create JSX template engine from scratch

Rahul Sharma ・ Nov 23 '22

React.js state management using signals

Rahul Sharma ・ Sep 21 '22

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Rahul SharmaFollow

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Catch me on

10 Steps to Create a Custom ESLint Plugin

Rahul Sharma — Fri, 28 Jun 2024 14:02:45 +0000

Ever get frustrated with confusing or inconsistent function names in your code?

In this article, we're going to solve that problem by creating a custom ESLint plugin to keep code neat and readable by enforcing consistent function names.

So, what's ESLint? Think of it as a helpful tool that checks your code for mistakes and makes sure you're following good coding practices. The cool part? You can create your own rules to fit your style!

Let's get started:

New Project: Create a new project and install ESLint by running the following command in your terminal:

mkdir myplugin
cd myplugin
npm init --y
npx eslint --init

Plugin Directory: Next, create a directory called eslint-plugin and a file named index.js inside it. This is where our custom rules will live.

Plugin Structure: In index.js, we'll set up our plugin. This file will have some properties like meta and rules.
- meta: This holds the plugin name and version.
- rules: This is where we'll define our custom rule to check function names.

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {}
};

Rule Object: Inside rules, we'll create our rule. The key is the rule ID, and the value is an object with a create function.

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {
    prefix: {},
  },
};

Checking Function Names: create function returns an object with a Identifier method. In the Identifier function, we check if the code is an arrow function. Then, we make sure the function names start with a specific prefix, like "on" or "get" etc.

const rulePrefix = ["is", "pre", "on", "post", "get", "set"];

const isValidName = (name) => {
  const isValid = (prefix) => name.indexOf(prefix) === 0;
  return rulePrefix.some(isValid);
};

const plugin = {
  meta: {
    name: "func-prefix-matching",
    version: "0.0.1",
  },
  rules: {
    prefix: {
      create(context) {
        return {
          Identifier: (node) => {
            if (node.parent?.init?.type === "ArrowFunctionExpression") {
              const { name } = node;
              if (!isValidName(name)) {
                context.report(
                  node,
                  `${name} should start with ${rulePrefix.join(", ")}.`
                );
              }
            }
          },
        };
      },
    },
  },
};

Reporting Errors: If a function name doesn't start with the right prefix, we use context.report() to flag it as an error.

context.report(node, `${name} should start with ${rulePrefix.join(", ")}.`);

ESLint Configuration: Now, we need to tell ESLint to use our plugin. We do this by adding it to the plugins object in our ESLint configuration file.

import prefixMatcher from "./plugin/index.mjs";

export default [
  {
    files: ["src/**/*.js"],
    plugins: { prefixMatcher },
  },
];

Configuring the Rule: Set up the rule in the rules section with your chosen namespace.

import prefixMatcher from "./plugin/index.mjs";

export default [
  {
    files: ["src/**/*.js"],
    plugins: { prefixMatcher },
    rules: {
      "prefixMatcher/prefix": "warn",
    },
  },
];

Testing Code: Create some code examples with both correct and incorrect function names in a folder called src.

const someFunction = () => {
  console.log("Hello World");
};
someFunction();

Running ESLint: Finally, run npm run lint in your terminal to see ESLint in action.

npm run lint

If everything's set up correctly, ESLint will check your code and show error messages for any function names that don't follow the rules.

1:7  warning  someFunction should start with is, pre, on, post, get, set  prefixMatcher/prefix

✖ 1 problem (0 errors, 1 warning)

Thanks for reading! I hope this article helps you create your own ESLint plugin to enforce consistent function names in your code. I'm also attaching the code for the plugin here.

Must Read If you haven't

How to create JSX template engine from scratch

Rahul Sharma ・ Nov 23 '22

React.js state management using signals

Rahul Sharma ・ Sep 21 '22

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Rahul SharmaFollow

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Catch me on

20+ Handy JavaScript Functions to Simplify Your Code | JavaScript Tutorial

Rahul Sharma — Sun, 12 May 2024 05:48:11 +0000

JavaScript is a functional programming language, and functions play a crucial role. They allow you to encapsulate reusable code and perform specific tasks. Here are some quick examples of functions that can make your life easier:

Regular function

function sum(a, b) {
  return a + b;
}

Function expression

const sum = function (a, b) {
  return a + b;
};

Arrow function

const sum = (a, b) => {
  return a + b;
};
// OR
const sum = (a, b) => a + b;

Generator function

function* indexGenerator() {
  let index = 0;
  while (true) {
    yield index++;
  }
}
const g = indexGenerator();
console.log(g.next().value); // => 0
console.log(g.next().value); // => 1

Create an array of numbers from 1 to n

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Create an array of numbers from 1 to n with a step

const range = (n, step = 1) => Array.from({ length: n }, (_, i) => i * step);
console.log(range(10, 2)); // [1, 3, 5, 7, 9]

Create an array and fill it with a value

const fill = (len, value) => Array(len).fill(value);
console.log(fill(3, 0)); // [0, 0, 0]

Shuffling an array

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4])); // [3, 2, 1, 4]

Remove Duplicated from Array

const removeDuplicated = (arr) => [...new Set(arr)];
console.log(removeDuplicated([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ]

const removeDuplicate = (arr) =>
  Object.values(arr.reduce((a, b) => (a[b] ? a : { ...a, [b]: b }), {}));
console.log(removeDuplicate([1, 2, 3, 3])); // Result: [ 1, 2, 3, ]

Generate random number

const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random(1, 10)); // Result: 1 ~ 10

Find largest numbers

const findLargest = (arr) => arr.map((subArr) => Math.max(...subArr));
console.log(
  findLargest([
    [4, 5, 1, 3],
    [13, 27, 18, 26],
    [32, 35, 37, 39],
    [1000, 1001, 857, 1],
  ])
); // [5, 27, 39, 1001]

Find smallest numbers

const findSmallest = (arr) => arr.map((subArr) => Math.min(...subArr));
console.log(
  findSmallest([
    [4, 5, 1, 3],
    [13, 27, 18, 26],
    [32, 35, 37, 39],
    [1000, 1001, 857, 1],
  ])
); // [1, 18, 32, 857]

Pick a random element from an array

const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
console.log(pick([1, 2, 3, 4])); // 2

Convert array to object

const toObject = (arr) => ({ ...arr });
console.log(toObject(["a", "b"])); // { 0: 'a', 1: 'b' }

Find intersection of two arrays

const intersection = (arr1, arr2) => {
  const set = new Set(arr1);
  return arr2.filter((x) => set.has(x));
};
console.log(intersection([1, 2, 3], [2, 3, 4])); // [2, 3]

Remove falsy values from an array

const compact = (arr) => arr.filter(Boolean);
console.log(compact([0, 1, false, 2, "", 3, "a", "e" * 23, NaN, "s", 34])); // [1, 2, 3, 'a', 's', 34]

Reverse String

const reverseString = (str) => str.split("").reverse().join("");
console.log(reverseString("hello")); // olleh

Is String Palindrome

const isPalindrome = (str) => str === str.split("").reverse().join("");
console.log(isPalindrome("madam")); // true

Check object is empty or not

const isEmpty = (obj) => Object.keys(obj).length === 0;
console.log(isEmpty({})); // true

Find the number of days in a month

const getDaysInMonth = (date) =>
  new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
console.log(getDaysInMonth(new Date())); // 31

Generate a random color

const getRandomColor = () =>
  `#${Math.floor(Math.random() * 16777215).toString(16)}`;
console.log(getRandomColor()); // #f0f0f0

const randomHex = () =>
  `#${Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padEnd(6, "0")}`;
console.log(randomHex()); // #f0f0f0

Must Read If you haven't

How to create JSX template engine from scratch

Rahul Sharma ・ Nov 23 '22

React.js state management using signals

Rahul Sharma ・ Sep 21 '22

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Rahul SharmaFollow

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Catch me on

JavaScript Proposal: Signals API

Rahul Sharma — Wed, 01 May 2024 16:34:50 +0000

Must Read If you haven't

Maximizing Performance: How to Memoize Async Functions in JavaScript

Rahul Sharma ・ Oct 20 '23

What, Why and How Javascript Static Initialization Blocks?

Rahul Sharma ・ Jan 20 '23

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Rahul SharmaFollow

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Catch me on

What, When, Where, Backend For A Frontend (BFF) Architecture Pattern

Rahul Sharma — Sat, 27 Jan 2024 07:40:46 +0000

Dive into Headless and MACH technologies with my latest YouTube video: What, When, Where, Backend For A Frontend (BFF) Architecture Pattern. Discover the role of BFF in modern application development. Don't miss out!

Must Read If you haven't

Maximizing Performance: How to Memoize Async Functions in JavaScript

Rahul Sharma ・ Oct 20 '23

What, Why and How Javascript Static Initialization Blocks?

Rahul Sharma ・ Jan 20 '23

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Rahul SharmaFollow

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Catch me on

CREATE A LIBRARY WITH JSX & CUSTOM STATE

Rahul Sharma — Sat, 30 Dec 2023 07:19:46 +0000

CREATE A LIBRARY WITH JSX & CUSTOM STATE

Rahul Sharma ・ Nov 28 '23

#jsx #state #javascript #webdev

Must Read If you haven't

Maximizing Performance: How to Memoize Async Functions in JavaScript

Rahul Sharma ・ Oct 20 '23

What, Why and How Javascript Static Initialization Blocks?

Rahul Sharma ・ Jan 20 '23

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23

Youtube Github LinkedIn Medium Stackblitz Hashnode HackerNoon

Rahul SharmaFollow

Passionate JavaScript Developer 🚀 | Crafting Web Magic ✨ | Code Enthusiast 💻

Catch me on

CREATE A LIBRARY WITH JSX & CUSTOM STATE

Rahul Sharma — Tue, 28 Nov 2023 05:00:00 +0000

The core of any JavaScript framework is the state, which plays a vital role in web application development. The state determines what to render on the screen and when to render. This article explores the implementation of a state similar to React in vanilla JavaScript and its integration with the JSX template engine.

If you are not familiar with the JSX template engine, you can check out my article, "How to create JSX template engine from scratch"

How to create JSX template engine from scratch

Rahul Sharma ・ Nov 23 '22

What is state?

The state is a JavaScript object that holds application data. Any change in the state updates the application's UI. This article focuses on creating a signal state object responsible for holding application data, with state changes triggering UI updates.

The hooks pattern, specifically useState and useEffect, will be followed to implement a React-like state.

useState: Creates the state, taking the initial state as an argument and returning the current state along with the function to update it.
useEffect: Tracks state changes, executing a callback function whenever the state changes.

Let's Understand this with a counter-example.

import { useState, useEffect } from "react";
const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count changed");
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

In the example above, a counter component was created to increase the count when the button is clicked. The state was created using useState, and changes in the state are monitored using useEffect.

The objective is to replace useState and useEffect with custom hooks.

For creating the state, will make use of the Javascript Proxy API.

What is Proxy API?

The Proxy object allows you to create an object that can be used in place of the original object, but which may redefine fundamental Object operations like getting, setting, and defining properties. Proxy objects are commonly used to log property accesses, validate, format, or sanitize inputs, and so on.

To understand the Proxy API better, consider the following example:

const checkout = {
    price: 100,
    quantity: 1,
    total: 100
};
// Change quantity
checkout.quantity = 2;
console.log(checkout.total); // 100

In this example, a checkout object has been created, encapsulating attributes such as price, quantity, and total. Notably, adjusting the quantity to 2 does not affect the total, resulting from the necessity to manually update the total for each change in quantity or price.

To mitigate this issue, the Proxy pattern can be employed. The Proxy accepts two parameters: the object intended for proxying and the handler object. The handler object incorporates methods such as get and set, which are invoked during operations on the object.

const checkout = {
    price: 100,
    quantity: 1,
    total: 100
};

const handler = {
    get: function(target, key) {
        if (key === 'total') {
            return target.price * target.quantity;
        }
        return target[key];
    },
};

const checkoutProxy = new Proxy(checkout, handler);

checkoutProxy.quantity = 3;
console.log(checkoutProxy.total); // 300

In the provided example, accessing the total property of the checkout object triggers the get method of the handler object. The get method operates with two arguments, namely the target object and the accessed key, verifying whether the key is 'total.' If true, it yields the result of the multiplication of price and quantity; otherwise, it returns the value associated with the key in the target object.

Utilizing the set method allows for updating the total in response to changes in either price or quantity. The implementation approach is adaptable, with a preference for exclusively employing the get method for state management, as exemplified in the aforementioned instance.

Let's see how to utilize the Proxy API to create the state.

To begin, create a new file to centralize all the state-related code. I've named the file state.js.

// Observe the changes in the state
let targetFunc;
class Observer {
  constructor() {
    this.subs = new Set();
  }
  add() {
    targetFunc && this.subs.add(targetFunc);
  }
  notify() {
    this.subs.forEach((sub) => sub && sub());
  }
}

// Helper functions
const isFunction = (target) => typeof target === 'function';
const isObject = (target) => typeof target === 'object' && target !== null;
const clone = (acc, target) => {
  if (isObject(acc)) {
    Object.keys(acc).forEach((key) => {
      if (isObject(acc[key])) target[key] = clone(acc[key], target[key]);
      else target[key] = acc[key];
    });
  } else {
    target = acc;
  }
  return target;
};

// Hooks
const setter = (prx, dep) => (data) => {
  const result = isFunction(data) ? data(prx.data) : data;
  if (isObject(result)) clone(result, prx.data);
  else prx.data = result;
  dep.notify();
};
const createOptions = (dep) => ({
  get(target, key) {
    dep.add();
    if (isObject(target[key]))
      return new Proxy(target[key], createOptions(dep));
    return target[key];
  },
});

// Public functions
export const useState = (data) => {
  const dep = new Observer();
  const prx = new Proxy({ data }, createOptions(dep));
  return [() => prx.data, setter(prx, dep)];
};
export const useEffect = (fun) => {
  targetFunc = fun;
  targetFunc();
  targetFunc = null;
};

Let's dive into the different sections:

Observer Class
Helper functions
Private functions
Hooks

1. Observer Class

In the provided code, a class named Observer has been established. This class serves the purpose of monitoring alterations in the state. It encompasses two methods, namely, add and notify.

add: This method is used to add the function to the subscribers set.
notify: This method is triggered when the state changes. It calls all the functions in the subscribers set.

2. Helper functions

isFunction: Checks if the target is a function.
isObject: Checks if the target is an object.
clone: Clones data from the source to the target, but only if the data is an object.

3. Private functions

setter: This function serves to modify the state. It takes a proxy object and an observer object as inputs. The function it returns is responsible for updating the state. It checks whether the data is a function; if so, it calls the function with the current state as an argument. Otherwise, it updates the state with the provided data. Following the state update, it triggers the notify method of the observer object.
createOptions: This function generates the options object for the proxy. It takes the observer object as an input and returns the options object. This options object contains a get method, activated each time the state is accessed. It adds the function to the subscriber's set and returns the value associated with the key from the state. If the key's value is an object, it creates a new proxy object for that object and returns it.

4. Hooks

useState: This function is utilized for state creation. It takes the initial state as an argument and returns the current state along with the function to update the state. It initiates a new observer object and a new proxy object. The function returned is responsible for providing the current state, while the setter function is used to update the state.
Note:** The function returning the current state is intentional; it enables tracking changes in the state. Returning the state directly would hinder our ability to monitor state alterations.
useEffect: This function monitors changes in the state. It takes a callback function as an argument and is triggered whenever the state undergoes a change. It sets the callback function as the targetFunc and executes it. Afterwards, it sets the targetFunc to null.
Note:** A dependency array is unnecessary because useEffect inherently monitors changes in the state used within the callback function.

Time to add our custom hooks. Let's update the counter component with our custom hooks.

import { useState, useEffect } from "./state";
const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count changed");
  });

  return (
    <div>
      <h1>{count()}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Next, connect the state.js file to the JSX runtime.

import { useEffect } from './state';

const appendChild = (parent, child, j = 0) => {
  if (Array.isArray(child)) {
    child.forEach((nestedChild, i) => appendChild(parent, nestedChild, i));
  } else {
    if (!parent.childNodes[j]) {
      parent.appendChild(
        child.nodeType ? child : document.createTextNode(child)
      );
    } else if (child !== parent.childNodes[j].data) {
      parent.childNodes[j].data = child;
    }
  }
};

export const jsx = (tag, props) => {
  const { children } = props;
  if (typeof tag === 'function') return tag(props);
  const element = document.createElement(tag);
  Object.entries(props || {}).forEach(([name, value]) => {
    if (name.startsWith('on') && name.toLowerCase() in window)
      element.addEventListener(name.toLowerCase().substr(2), value);
    else element.setAttribute(name, value);
  });

  // Updated Here
  useEffect(() => {
    const list = Array.isArray(children) ? children : [children];
    const res = list.map((child) => {
      const value = typeof child === 'function' ? child() : child;
      return value;
    });
    appendChild(element, res);
  });

  return element;
};

export const jsxs = jsx;

The only modification is the inclusion of the useEffect function in the jsx runtime. It activates the appendChild function with the updated state whenever there is a state change.

Note: Whenever the state is updated, it doesn't re-render the entire component. It only re-renders the part of the component linked to the state. This is due to our use of the Proxy API for state creation, which only re-renders the component when the state is accessed. If the state is not accessed, the component won't undergo a re-render.

Thanks for reading. I hope you enjoyed it. If you have any questions, please leave them in the comments section below. I'll be happy to answer them.

Demo: https://stackblitz.com/edit/stackblitz-starters-byy5vn

Thanks for reading! I hope you enjoyed this article. Feel free to share your thoughts in the comments below.

Must Read If you haven't

Maximizing Performance: How to Memoize Async Functions in JavaScript

Rahul Sharma ・ Oct 20 '23

What, Why and How Javascript Static Initialization Blocks?

Rahul Sharma ・ Jan 20 '23

Simplify JavaScript's Async Concepts with One GIF

Rahul Sharma ・ Nov 2 '23