Forem: Nishant Singh

JavaScript Pollyfills

Nishant Singh — Sun, 22 Dec 2024 11:06:32 +0000

Understanding Polyfills in JavaScript

In JavaScript development, a polyfill is a piece of code (typically JavaScript) that provides modern functionality on older browsers that do not natively support it. Polyfills allow developers to use new JavaScript features without worrying about compatibility issues with older environments.

What is a Polyfill?

A polyfill is essentially a backward-compatible shim that replicates the behavior of modern features in JavaScript. For instance, if a browser does not support Array.prototype.map, a polyfill can be written to add this functionality.

Why Use Polyfills?

Cross-Browser Compatibility: Ensure your code runs on older browsers.
Future-Proofing: Use modern JavaScript features without waiting for full browser adoption.
Consistent Behavior: Guarantee that the feature behaves the same way across all environments.

Befor we dive into some example one of the most common Polyfill question asked in interviews is Promise.all. Watch our video on this -

Example: Polyfills for `Array.prototype.map` and `Array.prototype.filter`

`Array.prototype.map` Polyfill

The map method creates a new array populated with the results of calling a provided function on every element in the original array.

Here’s a polyfill for Array.prototype.map:

if (!Array.prototype.map) {
  Array.prototype.map = function (callback, thisArg) {
    if (this == null) {
      throw new TypeError('Array.prototype.map called on null or undefined');
    }
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    const result = [];
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        result[i] = callback.call(thisArg, this[i], i, this);
      }
    }
    return result;
  };
}

`Array.prototype.filter` Polyfill

The filter method creates a new array with all elements that pass the test implemented by the provided function.

Here’s a polyfill for Array.prototype.filter:

if (!Array.prototype.filter) {
  Array.prototype.filter = function (callback, thisArg) {
    if (this == null) {
      throw new TypeError('Array.prototype.filter called on null or undefined');
    }
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    const result = [];
    for (let i = 0; i < this.length; i++) {
      if (i in this) {
        if (callback.call(thisArg, this[i], i, this)) {
          result.push(this[i]);
        }
      }
    }
    return result;
  };
}

Using Polyfilled Methods

Here’s how you can use the polyfilled map and filter methods:

const numbers = [1, 2, 3, 4, 5];

// Using map to double the numbers
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]

// Using filter to get even numbers
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // Output: [2, 4]

Best Practices for Polyfills

Check Native Support: Always check if the browser already supports the feature to avoid overwriting native implementations.
Use Modern Tools: Leverage tools like Babel or core-js to automate polyfilling in your projects.
Be Mindful of Performance: Polyfills may have performance implications compared to native implementations.
Limit Polyfills: Only include polyfills for features your target audience’s browsers are missing.

Conclusion

Polyfills are essential for creating backward-compatible JavaScript applications. By understanding how to write and use polyfills, you can ensure your code works seamlessly across different browsers and environments. The examples of map and filter show how simple and effective polyfilling can be for extending JavaScript functionality.

Watch more content on our Youtube channel - Frontend With Chandel

Async/Await and Promises in JavaScript

Nishant Singh — Sun, 22 Dec 2024 10:54:21 +0000

Understanding Async/Await and Promises in JavaScript

JavaScript’s ability to handle asynchronous operations is crucial for modern web development. Promises and async/await are two key mechanisms to manage asynchronous code effectively. This article explores these concepts, their usage, and best practices, along with examples.

What are Promises?

A Promise represents a value that may be available now, or in the future, or never. It allows developers to write asynchronous code that’s more manageable and less error-prone than traditional callbacks.

States of a Promise:

Pending: The initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

Creating and Using Promises

Here’s an example of creating and consuming a Promise:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success or failure
      if (success) {
        resolve('Data fetched successfully!');
      } else {
        reject('Error fetching data.');
      }
    }, 1000);
  });
};

fetchData()
  .then((result) => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch((error) => {
    console.error(error);
  });

What is Async/Await?

Async/Await is syntactic sugar built on top of Promises, introduced in ES2017 (ES8). It allows asynchronous code to be written in a synchronous-looking manner, making it more readable and easier to debug.

Key Points:

The async keyword marks a function as asynchronous.
The await keyword pauses the execution of an async function until the Promise is resolved or rejected.

Using Async/Await

Here’s the same example rewritten with async/await:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success or failure
      if (success) {
        resolve('Data fetched successfully!');
      } else {
        reject('Error fetching data.');
      }
    }, 1000);
  });
};

const fetchAsyncData = async () => {
  try {
    const result = await fetchData();
    console.log(result); // Logs: Data fetched successfully!
  } catch (error) {
    console.error(error);
  }
};

fetchAsyncData();

Comparing Promises and Async/Await

Feature	Promises	Async/Await
Syntax	Chaining with `.then` and `.catch`	Looks like synchronous code with `await`
Readability	Moderate, especially with long chains	High, especially for sequential tasks
Error Handling	`.catch` for errors	`try/catch` for errors
Debugging	Stack traces can be challenging	Easier due to synchronous-like flow

Example: Handling Multiple Promises

Both Promises and async/await can handle multiple asynchronous operations using Promise.all or loops. Here’s an example:

Using `Promise.all`:

const fetchData1 = () => Promise.resolve('Data 1');
const fetchData2 = () => Promise.resolve('Data 2');

Promise.all([fetchData1(), fetchData2()])
  .then((results) => {
    console.log(results); // Logs: ['Data 1', 'Data 2']
  })
  .catch((error) => {
    console.error(error);
  });

Using Async/Await:

const fetchAsyncData = async () => {
  try {
    const results = await Promise.all([fetchData1(), fetchData2()]);
    console.log(results); // Logs: ['Data 1', 'Data 2']
  } catch (error) {
    console.error(error);
  }
};

fetchAsyncData();

Best Practices for Async/Await and Promises

Use try/catch for Error Handling:
Always wrap await calls in try/catch blocks to handle errors gracefully.
Avoid Blocking Code:
Do not use await inside loops without careful consideration as it can lead to performance bottlenecks. Use Promise.all for parallel execution.
Chain Promises Wisely:
For simpler operations, Promises with .then and .catch may suffice. Use async/await for complex flows.
Keep Functions Modular:
Break down large functions into smaller ones to keep your async code clean and maintainable.

Conclusion

Promises and async/await are powerful tools for managing asynchronous operations in JavaScript. While Promises provide flexibility and a structured way to handle async tasks, async/await enhances readability and debugging. Understanding when and how to use them effectively will greatly improve your JavaScript development workflow.

Watch more content on our Youtube channel - Frontend With Chandel

JavaScript Event Loop

Nishant Singh — Sun, 22 Dec 2024 10:44:21 +0000

Understanding the JavaScript Event Loop

JavaScript is a single-threaded, non-blocking, asynchronous programming language. At the heart of its asynchronous behavior is the event loop. Understanding how the event loop works is crucial for writing efficient and bug-free JavaScript code. This article breaks down the key concepts of the JavaScript event loop and how it manages asynchronous operations.

What is the Event Loop?

The event loop is a mechanism in JavaScript that allows the language to handle asynchronous operations, despite being single-threaded. It continuously checks the call stack and the callback queue to determine what code to execute next.

Key Components of the Event Loop

Call Stack:
- The call stack is a data structure that records function calls.
- When a function is invoked, it is added to the top of the call stack.
- When the function execution is complete, it is removed from the stack.
Web APIs:
- Web APIs provide the functionality for asynchronous operations, such as setTimeout, fetch, and DOM events.
- These APIs delegate tasks to the browser’s threads for processing.
Callback Queue:
- The callback queue holds callbacks and tasks that are ready to be executed.
- These callbacks are added to the queue after the corresponding Web API operation completes.
Microtask Queue:
- Microtasks are prioritized over regular callbacks in the callback queue.
- Examples include Promise.then, MutationObserver, and queueMicrotask.
Event Loop:
- The event loop continuously monitors the call stack and the callback queue.
- If the call stack is empty, the event loop pushes the first task from the callback or microtask queue to the call stack for execution.

How It All Works Together

Here’s a step-by-step explanation of how the event loop operates:

Function Execution:
- When the JavaScript engine runs, the main script is added to the call stack and executed line by line.
Asynchronous Operations:
- When an asynchronous function (e.g., setTimeout) is called, the browser delegates it to a Web API.
Task Completion:
- Once the asynchronous operation completes, its callback is added to the appropriate queue (callback queue or microtask queue).
Event Loop Processing:
- The event loop checks if the call stack is empty.
- If empty, it processes tasks from the microtask queue first, then the callback queue.

Example: Event Loop in Action

Consider the following code snippet:

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

Execution Flow:

console.log('Start') is executed and prints Start.
setTimeout is called, and its callback is sent to the Web API.
Promise.resolve().then adds its callback to the microtask queue.
console.log('End') is executed and prints End.
The microtask queue is processed, and Promise is printed.
The callback queue is processed, and Timeout is printed.

Output:

Start
End
Promise
Timeout

Best Practices for Working with the Event Loop

Avoid Blocking the Call Stack:
- Long-running tasks block the call stack and delay asynchronous operations. Use setTimeout or Web Workers for heavy computations.
Prioritize Microtasks:
- Use Promise or queueMicrotask for tasks that must run before the next event loop iteration.
Understand Callback Timing:
- Recognize that microtasks execute before the callback queue, ensuring higher priority for Promise-based logic.

Conclusion

The JavaScript event loop is a powerful mechanism that enables asynchronous programming. By understanding its components and behavior, you can write more efficient and predictable code. Remember to keep the call stack clear, leverage microtasks wisely, and respect the asynchronous nature of JavaScript.

Building a Quote Generator in React: A Beginner's Guide

Nishant Singh — Sun, 08 Sep 2024 19:08:20 +0000

If you're looking to enhance your React skills by building simple projects, a Quote Generator is an ideal choice. In this guide, we’ll create a Quote Generator that fetches random advice from an external API using React, axios, and a loading state to enhance the user experience. This project will help you get hands-on practice with state management, conditional rendering, and API handling in React.

Project Overview

This Quote Generator will display random pieces of advice by fetching data from the Advice Slip API. Upon clicking a button, a new piece of advice will be displayed, with a loading indicator showing while the advice is being fetched.

Prerequisites

Before we dive into the code, ensure you have the following:

Basic knowledge of React, including hooks like useState.
Familiarity with axios for API requests.
Node.js and npm installed.

Step 1: Set Up Your React Project

First, create a new React project by running the following command in your terminal:

npx create-react-app quote-generator

Once the setup is complete, navigate to the project folder:

cd quote-generator

Install axios, which we'll use to fetch data from the API:

npm install axios

Step 2: Update `App.js`

Replace the default content in src/App.js with the following code:

import { useState } from "react";
import "./App.css";
import axios from "axios";
const apiUrl = "https://api.adviceslip.com/advice";

function App() {
  const [advice, setAdvice] = useState(
    "Please click button to see your advice !!"
  );
  const [isLoading, setIsLoading] = useState(false);

  const handleQuoteGenerate = async () => {
    setIsLoading(true);
    const response = await axios.get(apiUrl);
    setAdvice(response.data.slip.advice);
    setIsLoading(false);
    // console.log(response.data);
  };

  return (
    <div className="App">
      <h1> Quote Generator </h1>
      <section className="quote-container">
        {isLoading ? (
          <p className="quote">...</p>
        ) : (
          <blockquote className="quote">{advice}</blockquote>
        )}
      </section>
      <button className="default-btn" onClick={handleQuoteGenerate}>
        Give Me Advice
      </button>
    </div>
  );
}

export default App;

Code Explanation

State Management:
- We define two states using the useState hook:
  - advice: This holds the current piece of advice, initialized with a default message ("Please click button to see your advice!!").
  - isLoading: This is a boolean flag that manages the loading state, initially set to false.
API Call:
- The handleQuoteGenerate function is an asynchronous function that fetches advice from the Advice Slip API.
- Before the request is made, we set isLoading to true to display the loading indicator. After the API request completes, the fetched advice is set in the advice state, and isLoading is set back to false.
Conditional Rendering:
- We use a ternary operator to conditionally render the loading indicator (...) when isLoading is true. Once the advice is fetched and isLoading is false, the <blockquote> tag displays the fetched advice.
Button:
- The "Give Me Advice" button triggers the handleQuoteGenerate function, fetching a new piece of advice every time it's clicked.

Step 3: Add Some Basic Styling

To improve the visual appearance of the app, let's add some simple styles. In the src/App.css & src/index.css file, add the following CSS:

/* src/App.css */
.App {
  text-align: center;
}

.quote-container {
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
  width: 650px;
  background: linear-gradient(
    150deg,
    #2b2e4a,
    #3e345e,
    #57386e,
    #723b78,
    #903c7a,
    #af3d73,
    #cd3f63,
    #e84545
  );
}

.quote {
  font-weight: bold;
  font-size: 20px;
  color: white;
}

.default-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background-color: #2b2e4a;
  color: white;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
}

.default-btn:hover {
  background-color: #3e345e;
}

Now, add in src/index.css

/* src/index.css */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    135deg,
    #ffe5ce,
    #ffd0ba,
    #ffb9b0,
    #ffa2b0,
    #fd8dba,
    #ec7cca,
    #cd72de,
    #9c71f2
  ); /* made at https://learnui.design/tools/gradient-generator.html */
}

Step 4: Run the Application

Once you've added the code and styles, run your application with:

npm start

This will launch the app in your browser, where you’ll see a heading, the default advice message, and the button. Click the button to fetch a new piece of advice from the API.

Features of the App

API Integration: The app integrates with the Advice Slip API to fetch random advice.
Loading Indicator: A simple loading indicator (...) is shown while waiting for the advice to load.
User Interaction: The user can click the button multiple times to fetch new pieces of advice.

Potential Enhancements

Once you're comfortable with this basic version of the quote generator, you can extend it with additional features:

Error Handling: Implement error handling for cases when the API fails to respond.

   try {
     const response = await axios.get(apiUrl);
     setAdvice(response.data.slip.advice);
   } catch (error) {
     setAdvice('Oops! Something went wrong.');
   } finally {
     setIsLoading(false);
   }

Save Favorite Quotes: Allow users to save their favorite quotes using localStorage.
Sharing: Add a feature to allow users to share their favorite advice on social media.

Conclusion

Building this simple Quote Generator in React is an excellent project for beginners. It allows you to get hands-on experience with axios for API requests, React’s useState for managing state, and useEffect for handling side effects like fetching data. Plus, it’s a fun and interactive app that can be easily extended with new features as your React skills grow!

Checkout other projects as well

Understanding `async` and `defer` in JavaScript: A Guide for Interview Preparation

Nishant Singh — Sun, 01 Sep 2024 17:29:25 +0000

JavaScript is a language that runs in the browser to enhance user experience by manipulating the Document Object Model (DOM), handling events, and performing asynchronous operations. When a web page is loaded, the browser parses the HTML and executes the JavaScript in the order it encounters the <script> tags. However, JavaScript execution can block the parsing of HTML, potentially slowing down the page load time. To optimize this, modern web development uses async and defer attributes on <script> tags, especially when loading external scripts.

This article will delve into what async and defer are, how they work, and their key differences—knowledge that is crucial for any JavaScript developer, particularly in interviews.

1. The Default Behavior of Script Tags

Before we explore async and defer, it’s essential to understand the default behavior of <script> tags:

Blocking Behavior: When the browser encounters a <script> tag, it stops parsing the HTML, downloads the script, and executes it immediately before continuing with the rest of the HTML.
Order of Execution: If there are multiple script tags, they are executed in the order they appear in the HTML document. This can lead to slower page loads, as the browser waits for each script to download and execute before moving on.

2. The `async` Attribute

The async attribute is used to load scripts asynchronously, which means the browser doesn’t block the HTML parsing while the script is being downloaded. However, the script will execute immediately after it has been downloaded, potentially out of order relative to other scripts.

Key Points:

Non-blocking Download: The script is downloaded while the HTML continues to be parsed.
Execution Timing: The script is executed as soon as it is downloaded, without waiting for the rest of the HTML to be parsed.
Order of Execution: Scripts with the async attribute may execute in any order, depending on which script finishes downloading first.

Example:



<script async src="script1.js"></script>
<script async src="script2.js"></script>

In this case, script1.js and script2.js are downloaded concurrently. Whichever script finishes downloading first will execute first, potentially leading to an unpredictable order of execution.

When to Use async:

For independent scripts that don’t rely on each other or the DOM being fully parsed (e.g., analytics or advertisement scripts).

3. The `defer` Attribute

The defer attribute also loads scripts asynchronously, but it ensures that the scripts are executed in the order they appear in the document. Additionally, scripts with the defer attribute will only execute after the HTML parsing is complete.

Key Points:

Non-blocking Download: Like async, the script is downloaded while the HTML continues to be parsed.
Execution Timing: The script is executed after the HTML document has been fully parsed.
Order of Execution: Scripts with the defer attribute execute in the order they appear in the document.

Example:



<script defer src="script1.js"></script>
<script defer src="script2.js"></script>

Here, script1.js and script2.js are downloaded concurrently, but they will execute in the order they appear, only after the HTML parsing is complete.

When to Use defer:

For scripts that rely on the DOM being fully loaded or that need to be executed in a specific order (e.g., main application scripts).

4. Comparison of `async` and `defer`

Attribute	HTML Parsing	Script Download	Script Execution	Execution Order
`async`	Continues	Asynchronously	Immediately after download	Unpredictable, as per download order
`defer`	Continues	Asynchronously	After HTML parsing is complete	Preserved as per document order

5. Common Interview Questions

When it comes to interviews, understanding async and defer is essential. Here are some common questions you might encounter:

What is the difference between async and defer attributes in a script tag?
- async executes the script as soon as it's downloaded, while defer waits until the entire HTML document is parsed.
When would you use async over defer and vice versa?
- Use async for independent scripts that don’t depend on other scripts or the DOM. Use defer for scripts that need the DOM to be fully parsed or that depend on other scripts.
What are the potential issues with using async?
- Since async scripts may execute in an unpredictable order, it can lead to issues if one script depends on another.

6. Conclusion

Understanding async and defer is crucial for optimizing the performance of web pages. By knowing when and how to use these attributes, you can ensure faster page loads and a better user experience. As a JavaScript developer, particularly in an interview setting, being able to articulate the differences and appropriate use cases for async and defer will demonstrate your proficiency in modern web development practices.

Make sure to experiment with these attributes in your projects to get a solid grasp of their behavior. Happy coding!

React Interview Questions

Nishant Singh — Sun, 18 Aug 2024 12:10:18 +0000

Hellooo everyone,
Most of the frontend developer are preparing for interviews these days. So, the questions comes first before we start preparation is from where to start.

Don't worry I am here to help you with the topics you should cover one by one.

React is one of the most popular library and have large community that makes it perfect for every company to hire developers who knows react very well. Then often look into the candidate who knows react in depth.

Before taking you to further, there is Youtube video for this.

Below is the main topics -

✅HOOKS**

useState()
useEffect() ❗
useRef() ❗
useContext()
useReducer()
useMemo() ❗
useCallback() ❗

✅HOC - High Order Components**

When to use?
How to use?
Example?

✅Life Cycle methods of components**

3 phase (mounting, unmounting, updating) ❗

✅State Management**

State/Props
Props Drilling ❗
Context

✅Virtual DOM**

Reconciliation ❗
React fibre
Renders
Diff Algorithm ❗
How render works

✅Custom Hooks**

When to use?
Example (clean, maintainable, Reusable)

✅Lazy Loading**

Code Splitting ❗
Chunking
Suspense

✅SSR vs CSR**

Routing (RBAC - Route Based Access Control)
Protected Routes ❗
Query Params
Dynamic Routing

✅Redux/Zustand (RTK)**

Redux Toolkit (RTK)
How to use?
When to use?
Why?

✅Async Tasks**

API calls (fetch/axios)
Events
Promises ❗

✅Performance**

Lazy Loading ❗
Asset Optimization ❗
Bundler
JS/CSS optimization
CDN/ Server
Optimized Code ❗

✅Styling**

Tailwind CSS
Stylex (Facebook)
Material UI
Ant UI
CSS/SCSS/LESS/SASS

✅Miscellaneous**

Reusability
Modularity
Testability
Testing
Accessibility ❗
Security ❗

Watch more content on our Youtube channel - Frontend With Chandel

Frontend Interview Preparation Day 2 - Linked List

Nishant Singh — Sat, 22 Jun 2024 13:13:13 +0000

Hi there 🙏, today is June 22, 2024. So, I woke up at 7 AM ⏰ today, did some morning walk, yoga for 30 mins. Went to temple & then started the routine.

Today's Plan - 💯

June 22 (Sat): Study linked lists, practice easy problems. (4 hours)

Watch the videos for linked list from Udemy Course.
Master the Coding Interview: Data Structures + Algorithms

✅ What is linked list? ⛓️

A linked list is a linear data structure that stores a collection of data elements dynamically.
Nodes represent those data elements, and links or pointers connect each node.
Each node consists of two fields, the information stored in a linked list and a pointer that stores the address of its next node.
The last node contains null in its second field because it will point to no node.
A linked list can grow and shrink its size, as per the requirement.
It does not waste memory space.

✅ The linked list mainly has three types, they are:

Singly Linked List
Doubly Linked List
Circular Linked List

✅ Essential Operation on Linked Lists 🚥

Traversing: To traverse all nodes one by one.
Insertion: To insert new nodes at specific positions.
Deletion: To delete nodes from specific positions.
Searching: To search for an element from the linked list.

✅ Application of a Linked List

A linked list is used to implement stacks and queues.
A linked list also helps to implement an adjacency matrix graph.
It is used for the dynamic memory location.
The linked list makes it easy to deal with the addition and multiplication of polynomial operations.
Implementing a hash table, each bucket of the hash table itself behaves as a linked list.
It is used in a functionality known as undo in Photoshop and Word.
With that, you have reached the end of this tutorial on Linked Lists.

✅ Some leet code question which I solved today 👨‍💻

All the above leet code questions are solved from my end, I hope you will also try the same. If you can't solve it no problem. Learn it and try again. Never give up.

Always remember, your career is a marathon, not a sprint.

✅ Checkout some of my post

Frontend Interview Preparation

MAANG Interview Preparation Day 1 - The Plan

Frontend Interview Preparation Day 1 - The Plan

Nishant Singh — Sat, 22 Jun 2024 12:46:03 +0000

Hello everyone 🙏, just writing this post to motivate you all to start preparation of you dream company MAANG. This is just a post related to what I am planning to do in coming weeks and I will try to post each and everything related to interview preparation.

20 June 2024, is the last working 👨‍💻 day at MakeMyTrip. As I am looking forward for better opportunity and career. So, I took this decision because I need a break from work, meanwhile I will also learn DSA and other stuff.

Making it short, today 21 June 2024, I started to plan 🔖 everything how much time I have to study, how many topics I have to cover etc. I will go one by one.

I generate a master plan using chat-gpt of 8 weeks of interview preparation. I will suggest you all to do the same. This plan covers an 8-week period, focusing on algorithms, data structures, system design, and behavioral questions. Each day has a study duration of approximately 4-5 hours.

Daily Tasks: 🥧
- June 21 (Fri): Introduction to arrays and strings, practice easy problems. (4 hours) - DONE
- June 22 (Sat): Study linked lists, practice easy problems. (4 hours)
- June 23 (Sun): Dive into stacks and queues, practice medium problems. (4 hours)
- June 24 (Mon): Understand hash tables, practice medium problems. (4 hours)
- June 25 (Tue): Learn trees (binary trees and binary search trees), practice easy problems. (4 hours)
- June 26 (Wed): Explore graphs, practice easy problems. (4 hours)
- June 27 (Thu): Review and recap the week’s topics, practice a mixed set of problems. (4 hours)
- June 28 (Fri): Study heaps and priority queues, practice medium problems. (4 hours)
- June 29 (Sat): Understand tries, practice medium problems. (4 hours)
- June 30 (Sun): Learn about sorting algorithms, practice medium problems. (4 hours)
- July 1 (Mon): Explore searching algorithms, practice medium problems. (4 hours)
- July 2 (Tue): Study dynamic programming, practice medium problems. (4 hours)
- July 3 (Wed): Introduction to backtracking, practice medium problems. (4 hours)
- July 4 (Thu): Review and recap the week’s topics, practice a mixed set of problems. (4 hours)

This is my plan don't try the same if you are working professional with other priorities. Please take help from Chat-GPT to generate customized plan, it is free.

Next, I updated my resume 🗒️, If you have any confusion 😕 about how to make a resume, here is the link please follow along, it is very helpful. Design, write, and format a professional resume that stands out

✅ Resume should be of 1 page 📄 only, which has all the skills you know and which is required for job. Don't mention anything you don't know.
✅ Resume should contain your experiences with impact, like if you developed something and it reduces cost mention it properly.
✅ Focus on Relevance: Highlight experiences that are most relevant to the job you are applying for.
✅ Use Action Verbs: Start each bullet point with strong action verbs like "developed," "managed," "implemented," etc.
✅ Quantify Achievements: Whenever possible, use numbers to quantify your achievements (e.g., "Increased sales by 20%").
✅ Be Specific: Provide specific examples of your accomplishments and responsibilities.
✅ Highlight Key Skills: Emphasize skills that are listed in the job description.

I bought some stuffs from amazon which helps in problem solving. Don't get excited it's just a small white board 📋. I prefer this board because it's portable and handy, for large white boards you have to hang it some where or you need extra space during coding. So, I highly recommend to buy this size of white board. It easily fits your desk.
(White Board)[https://amzn.in/d/098jHWGO]
A timer for deep focus 💡, so that you can keep track that you are working not wasting time. I pause the timer if I leave my seat. Just a website which helps you to keep track of it.
Timer
Notebook 📔 to write important points which you need before interview for faster revision.
Of course a laptop 💻 for coding.

That's all, you are almost ready with your plan for this battle. This planning is almost took 2 hours

*Now the execution time * ⏰

June 21 (Fri): Introduction to arrays and strings, practice easy problems. (4 hours)

So, on day 1 after planning everything I watch some lectures from my Udemy courses on Array & Strings from this course, this is for javascript developers, if you are looking for DSA in other language feel free to search on Udemy or other platform. This course cost me only INR 499 💰.

Master the Coding Interview: Data Structures + Algorithms

This video tutorial for Array & strings is covered within 1 hour with 1.25x speed on udemy.

Now its high time we start practising some leet code questions. ❓

I solved these questions on leet code all are easy ones.

Array 💣

Please try these questions. If you are not able to solve it don't worry try again.

I want everyone to watch this video 📺 if you feel that you can't do it or if you have self doubt, please watch this video.
Must Watch

Always remember, your career is a marathon 🏃‍♂️, not a sprint.

Frontend Interview Preparation

Nishant Singh — Sat, 18 May 2024 10:12:51 +0000

Just started my interview preparation for MAANG companies. I am going through lots of blogs and articles to list down topics which are important for interview preparation.

Although this is my first post, I have never thought of writing any articles/blogs. But this will be a journey, where I can express my learnings. I have enrolled to some of Udemy courses to brush up my skills.

Udemy Courses -

Don't go for all courses at once, go for one or two, please checkout the sample video before enrolling to courses. These courses are not expensive as I have waited for price drop and single course cost me INR 500 only.

Please don't be impulsive, buy only if you have interest in it.

Here are some of my findings -

WEB Concepts

CRP (critical rendering path).
Debouncing/Throttling
Event Delegation/Bubbling.
Bundle Splitting
Preload, Pre connect, Prefetch, Prerender.
Web Workers
HTTP2
Etag/Cache-Control Response Header
Document Fragment.
Reflow.
Image compression.
Memory Leak.

WEB Security

Transfer-encoding
Same origin policy
Access-Control-Allow-Origin
CORS
Content Security Policy.
CSRF
Referrer-Policy
Inner HTML
X-XSS Protection
X-Frame Options

COMPONENTS

Image Carousel
Star Component (REVIEW 5 STAR)
Comment Section
Pagination
Search Bar.
Accordion.
Navbar.
Traffic Light

Other Topics

Web Components
PWA (Progressive Web Apps)
Micro frontend.
Typescript.

Interview Preparation

Important Links

One book which is recommended by one of my friend from Google for System Design is:
Designing Data-Intensive Applications: The Big Ideas Behind Reliable, Scalable, and Maintainable Systems

Apart from this DSA is very important to brush up your coding skill I will suggest start coding on Leet code. Adding some questions to start with -

Coding Websites
Leetcode
Frontend

DSA Questions

Array

Linked List

All the above leetcode questions are solved from my end, I hope you will also try the same. If you can't solve it no problem. Learn it and try again. Never give up.

These are my findings, but I know this is not enough for interview preparation for tier 1 companies. But it's just the beginning, I will continue to update the topics and also share the interview process. Feel free to comment if anything goes missed from my end.

Always remember, your career is a marathon, not a sprint.

Watch more content on our Youtube channel - Frontend With Chandel

Forem: Nishant Singh

JavaScript Pollyfills

Understanding Polyfills in JavaScript

What is a Polyfill?

Why Use Polyfills?

Example: Polyfills for Array.prototype.map and Array.prototype.filter

Array.prototype.map Polyfill

Array.prototype.filter Polyfill

Using Polyfilled Methods

Best Practices for Polyfills

Conclusion

Async/Await and Promises in JavaScript

Understanding Async/Await and Promises in JavaScript

What are Promises?

States of a Promise:

Creating and Using Promises

What is Async/Await?

Key Points:

Using Async/Await

Comparing Promises and Async/Await

Example: Handling Multiple Promises

Using Promise.all:

Using Async/Await:

Best Practices for Async/Await and Promises

Conclusion

JavaScript Event Loop

Understanding the JavaScript Event Loop

What is the Event Loop?

Key Components of the Event Loop

How It All Works Together

Example: Event Loop in Action

Best Practices for Working with the Event Loop

Conclusion

Building a Quote Generator in React: A Beginner's Guide

Project Overview

Prerequisites

Step 1: Set Up Your React Project

Step 2: Update App.js

Code Explanation

Step 3: Add Some Basic Styling

Step 4: Run the Application

Features of the App

Potential Enhancements

Conclusion

Checkout other projects as well

Understanding `async` and `defer` in JavaScript: A Guide for Interview Preparation

1. The Default Behavior of Script Tags

2. The async Attribute

3. The defer Attribute

4. Comparison of async and defer

5. Common Interview Questions

6. Conclusion

React Interview Questions

Frontend Interview Preparation Day 2 - Linked List

Today's Plan - 💯

Frontend Interview Preparation Day 1 - The Plan

Array 💣

Frontend Interview Preparation

Interview Preparation

Important Links

Array

Linked List

Example: Polyfills for `Array.prototype.map` and `Array.prototype.filter`

`Array.prototype.map` Polyfill

`Array.prototype.filter` Polyfill

Using `Promise.all`:

Step 2: Update `App.js`

2. The `async` Attribute

3. The `defer` Attribute

4. Comparison of `async` and `defer`