DEV Community: jeetvora331

Render Props in React, Frontend System Design

jeetvora331 — Sat, 07 Oct 2023 11:05:19 +0000

If you are a beginner in React, you might have heard of the term “render props” and wondered what it means and how to use it. In this article, I will explain the concept of render props, show you some examples of how they can be used, and discuss the benefits and drawbacks of this pattern.

What are render props?

Render props are a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

The term “render prop” refers to a prop that is used to render some UI. It doesn’t have to be called render, although that is a common convention. You can name it anything you like, such as childrenor component.

How to use render props?

To use render props, you need to follow these steps:

Create a component that accepts a prop that is a function. This prop is usually called render, but you can name it anything you want. For example, children or component.
In the component, invoke the function prop with some arguments that are relevant to the component’s functionality or state. For example, data, loading, error, etc.
Return the result of invoking the function prop as part of the component’s JSX output.
In another component, use the first component and pass a function as the prop that renders some UI based on the arguments. You can use any JSX syntax you want inside the function, such as elements, components, hooks, etc.

Example

Suppose you want to create a component that displays the current time and updates it every second. You can use render props to pass a function that renders the time in different formats, such as 12-hour or 24-hour.

First, you create a Clockcomponent that accepts a render prop. The render prop is a function that accepts one argument: time. The Clock component uses the useStateand useEffecthooks to store and update the current time every second. It then invokes the render prop with the time and returns its result.



import React, { useState, useEffect } from "react";

function Clock({ render }) {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return render(time);
}

Use the Clock componennt and pass a function that renders the time in 12-hour format. You can use the toLocaleTimeStringmethod to format the time according to your locale.



function App() {
  return (
    <div className="App">
      <h1>Render Props Example</h1>
      <Clock
        render={(time) => {
          return <p>The current time is {time.toLocaleTimeString("en-US")}</p>;
        }}
      />
    </div>
  );
}

Result

Why use render props?

Render props are useful for sharing code between components without having to create a higher-order component (HOC) or use inheritance. HOCs are functions that take a component and return a new component with some additional functionality. Inheritance is when a component extends another component and inherits its behavior.

Render props uses composition instead of wrapping or extending components. Composition is when a component uses another component as part of its output. Render props allow us to compose components dynamically by passing functions as props.

When to use render props?

Render props are best suited for scenarios where you need to share some state or behavior between components, but you don’t want to create a separate component for each use case.

For example, You can create a component that fetches data from an API and passes it to the render prop function. This way, you can reuse the same data fetching logic for different components that need the same data.

What are the drawbacks of render props?

Performance: Render props can cause unnecessary re-rendering of components if the function passed as a prop changes on every render. To avoid this, you can use memoization techniques such as React.memo or useCallback hooks.
Readability: Render props can make the code harder to read and understand if the function passed as a prop is too long or complex. To avoid this, you can extract the function into a separate variable or component.

Conclusion

Render props are a powerful technique for sharing code between React components using a prop whose value is a function. They allow us to reuse stateful logic without having to create higher-order components or use inheritance. However, they also have some drawbacks that we need to be aware of and avoid. Render props are best suited for scenarios where we need to share some state or behavior between components, but we don’t want to create a separate component for each use case

React-router-dom 6 for beginners

jeetvora331 — Wed, 27 Sep 2023 19:14:53 +0000

React router dom is a library that allows you to handle routing in your React web applications. Routing is the process of matching the URL of the browser to the corresponding component or page that should be rendered. React router dom provides a declarative and flexible way to define your routes using components.

Installing React router dom

# using npm
npm install react-router-dom

# using yarn
yarn add react-router-dom

Importing React Router DOM

To use React Router DOM in your code, you need to import the components and hooks that you need from the library. For example, if you want to use the BrowserRouter, Routes, Route, Link, and useNavigate in your code, you can import them like this:

import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";

All of the above are Named Exports,

Creating Routes

The first thing you need to do is to create a browser router and wrap your app with it. The browser router is a component that uses the HTML5 history API to keep your UI in sync with the URL. To create routes in your application, you need to use the Routes and Route components. The Routes component is a container for all your routes, and the Route component defines a single route with a path and an element. For example, if you want to create three routes for your home page, about page, and contact page, you can do something like this:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
    </BrowserRouter>
  );
}

The path prop of the Route component specifies the URL pattern that matches the route. The element prop of the Route component specifies the component that renders when the route matches. The BrowserRouter component is a wrapper that provides the history API for navigation.

Creating Links

To create links in your application, you need to use the Link component. The Link component is a wrapper for the <a> tag that prevents the default browser behavior of reloading the page when clicking on a link. It also updates the URL and navigates to the corresponding route. For example, if you want to create a navigation bar with links to your home page, about page, and contact page, you can do something like this:

function NavBar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

Navigating Programmatically

To navigate programmatically in your application, you need to use the useNavigate hook. The useNavigate hook returns a function that allows you to navigate to a specific URL or go back or forward in the history stack. For example, if you want to create a button that navigates to the contact page when clicked, you can do something like this:

function ContactButton() {
  let navigate = useNavigate();
  return (
    <button onClick={() => navigate("/contact")}>
      Go to Contact Page
    </button>
  );
}

Difference between microtask and macrotask queue in the event loop

jeetvora331 — Thu, 21 Sep 2023 22:12:33 +0000

What is the event loop?

The event loop is a mechanism that allows JavaScript to execute asynchronous code in a single-threaded environment. It works by constantly checking two queues: the microtask queue and the macrotask queue. These queues store the callbacks of the asynchronous operations that are waiting to be executed.



setTimeout(function() {
  console.log("Hello after 3 seconds");
}, 3000);

The callback function in this example will be executed after 3 seconds, but not immediately. It will be placed in the macrotask queue, and will wait for its turn to run.

What is the difference between microtask and macrotask queue?

The main difference between microtask and macrotask queue is their priority. The event loop always gives higher priority to the microtask queue, and will process all the callbacks in the microtask queue before moving on to the macrotask queue.

The microtask queue contains the callbacks of operations that are considered more urgent or important, such as promises and mutation observers APIs.

The macrotask queue contains the callbacks of operations that are less urgent such as timers, I/O events, and user interface events.



console.log("Start");

setTimeout(function() {
  console.log("Timeout");
}, 0);

Promise.resolve().then(function() {
  console.log("Promise"); // microTask!
});

console.log("End");

What do you think will be the output of this code? You might expect it to be:

Start -> Timeout -> Promise -> End

But actually, it will be:

Start -> End -> Promise -> Timeout

Let's decode step by step:

Because the callback of setTimeout is placed in the macrotask queue, while the callback of Promise.resolve is placed in the microtask queue.

The event loop will first execute the synchronous code (console.log("Start") and console.log("End"))
Then it will check the microtask queue and execute all the callbacks there (console.log("Promise"))
Then it will check the macrotask queue and execute one callback there (console.log("Timeout")).

Why to know the difference is important?

Understanding the difference between microtask and macrotask queue can help you write better asynchronous code in JavaScript. It can help you avoid some common mistakes such as:

Blocking the event loop by creating too many microtasks or long-running microtasks. This can cause performance issues and delay other important tasks.
Creating race conditions or unexpected results by relying on the order of execution of different types of tasks. For example, if you use setTimeout to schedule some code after a promise, you cannot guarantee that the promise will resolve before the timeout.
For example, if you use setTimeout with a delay of 0 milliseconds to defer some code execution, you might miss some events that happen in between.

To avoid these mistakes follow some best practices, such as:

Use promises or async/await instead of callbacks whenever possible. Promises are easier to read, write, and debug than nested callbacks. They also allow you to handle errors more easily.
Use queueMicrotask instead of setTimeout with a very small delay. These methods are more reliable and efficient than setTimeout, as they schedule a microtask without any delay.

Conclusion

I hope this article helped you understand the difference between microtask and macrotask queue in the event loop. Checkout my easy to understand article on Debounce and Throttling in JS 🚀

Different Types of Export in React

jeetvora331 — Wed, 13 Sep 2023 12:15:30 +0000

When working with React, you'll often hear about "exporting" and "importing" components. These are fundamental concepts that enable the modular structure of React applications. In this article, we'll explore the different types of exports in React and how they're used.

What are Exports?

In JavaScript, modules are individual files containing code. This code can be functions, objects, values, classes, or React components. The exportkeyword allows these elements to be used in other JavaScript files, thus making the code reusable and modular.

There are two main types of export in React: named export and default export.

Default export

A file can have no more than one default export. This type of export is commonly used when a file exports only one component.

// Message.js
import React from 'react';

const Message = () => {
  return <div>Hello React!</div>;   
}

export default Message;

You can import the Message component in another file like this:

import Message from "./Message";

Note that the name Message is arbitrary and can be changed to anything you like

import HelloMessage from "./Message";

Named Exports

A file can have as many named exports as you like. Named exports are used when a file exports multiple components or values

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

To use these functions in another file, we need to import them using the same names and curly braces:

// App.js
import React from 'react';
import { add, subtract } from './utils'; // import the utility functions

function App() {
  return (
    <div>
      <p>{add(2, 3)}</p>
      <p>{subtract(5, 2)}</p>
    </div>
  );
}

export default App;

Alternatively, we can use the * symbol to import all the named exports from a file as an object, which is very similar to other languages like python and java

// App.js
import React from 'react';
import * as utils from './utils'; // import all the named exports as an object

function App() {
  return (
    <div>
      <p>{utils.add(2, 3)}</p>
      <p>{utils.subtract(5, 2)}</p>
    </div>
  );
}

export default App;

When to use named export and when to use default export?

Use named export when you want to export multiple variables or functions from a file.
Use default export when you want to export only one variable or function from a file.
Use named export when you want to keep the same name for your variables or functions across different files.
However, it's important to note that you can use both default and named exports in the same file.

Conclusion
Always ensure to match the export type with the corresponding import syntax to avoid errors. Remember, a file can have multiple named exports but only one default export. I hope that this article was helpful and informative for you. Happy coding! 😊

Different Types of Scope in JavaScript

jeetvora331 — Mon, 04 Sep 2023 12:25:30 +0000

Scope is a term that refers to the visibility and accessibility of variables, functions, and objects in a program. In other words, scope determines where and how we can use these elements in our code.

JavaScript has three types of scope: global scope, function scope, and block scope. function and block scope are also known as Local Scope. Let’s look at each one in detail.

Global Scope

Global scope is the outermost or top-level scope in a JavaScript program. Any variable, function, or object that is declared outside of any function or block belongs to the global scope. These elements are accessible from anywhere in the program, even inside other functions or blocks.

var firstName = "Jeet"; // global variable
function greet() {
  console.log("Hello, " + firstName); // access global variable inside function
}
greet(); // Hello, Jeet
console.log(firstName); // Jeet

In the above code, the variable firstName is declared in the global scope and can be used both inside and outside the greet function.

However, using too many global variables can be a bad practice, as it can lead to name collisions, pollution of the global namespace, and security risks. Therefore, it is advisable to limit the use of global variables and use local variables whenever possible.

Function Scope

Function scope is the scope that is created when we define a function. Any variable, function, or object that is declared inside a function belongs to the function scope. These elements are only accessible within the function and cannot be accessed outside of it.

function greet() {
  var name = "Jeet"; // local variable
  firstName.log("Hello, " + firstName); // access local variable inside function
}
greet(); // Hello, Jeet
console.log(firstName); // ReferenceError: firstName is not defined

In the above code, the variable firstName is declared in the function scope of greet and can only be used inside that function. If we try to access it outside of the function, we get a ReferenceError.

Function scope also creates a new scope for each invocation or call of the function. This means that each time we call a function, it creates a separate copy of its local variables and parameters. These copies are independent of each other and do not affect each other’s values.

function add(x) {
  var y = 10; // local variable
  return x + y;
}
console.log(add(5)); // 15
console.log(add(7)); // 17
console.log(y); // ReferenceError: y is not defined

Block Scope

Block scope is the scope that is created when we use curly braces {} to create a block of code. A block can be a standalone statement or part of a control structure such as an if statement, a forloop, or a switchcase. Any variable, function, or object that is declared inside a block belongs to the block scope. These elements are only accessible within the block and cannot be accessed outside of it

However, block scope only applies to variables declared with the keywords letand const, which were introduced in ES6 (ECMAScript 2015). Variables declared with the keyword varare still subject to function scope and do not respect block boundaries.

if (true) {
  var x = 10; // var variable
  let y = 20; // let variable
  const z = 30; // const variable
}
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined

Block scope allows us to create more modular and encapsulated code, as it prevents variables from leaking into the global or outer scopes. It also helps us to avoid name collisions and redeclaration errors, as we can use the same variable name in different blocks without affecting each other.

for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}
console.log(i); // ReferenceError: i is not defined

for (var j = 0; j < 3; j++) {
  console.log(j); // 0, 1, 2
}
console.log(j); // 3

In the above code, the variable i is declared with let and follows block scope rules. Therefore, it can only be accessed inside the for loop and not outside of it. The variable j is declared with var and follows function scope rules. Therefore, it can be accessed both inside and outside the for loop. However, this can lead to unexpected results, as the value of j is changed by the loop and does not reflect the intended scope.

Super Imp Interview Question

Predict the output of the following code

for (var i = 1; i <= 4; i++) {
    setTimeout(function() {
      console.log(i);
    }, 0);
  }

Try to run this code on an online JS compiler here

Conclusion

In this article, we learned about the different types of scope in JavaScript: global scope, function scope, and block scope. We also learned how to use the keywords var, let, and const to declare variables in different scopes and how they affect the visibility and accessibility of these variables. We saw that using block scope can help us write more modular and encapsulated code, while avoiding name collisions and redeclaration errors. We hope this article helped you understand the concept of scope in JavaScript better and how to use it effectively in your programs.

Beginners guide to TailwindCSS !

jeetvora331 — Thu, 31 Aug 2023 22:37:21 +0000

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build modern websites without ever leaving your HTML. It is one of the most popular and widely used CSS frameworks in the web development community, with over 2.5 million downloads per month1. In this article, we will explore the roadmap for Tailwind CSS 2023, and how you can get started with learning and using this amazing tool.

What is Tailwind CSS?

Tailwind CSS is not a typical CSS framework that provides you with ready-made components like buttons, cards, or navbars. Instead, it gives you a set of low-level utility classes that you can combine and customize to create any design you want, directly in your HTML.

This is NOT Tailwind



<button class="btn btn-primary">Submit</button>

This is TailwindCSS



<button class="bg-cyan-500 hover:bg-cyan-700 text-white font-bold py-2 px-4 rounded">Submit</button>

Each class in Tailwind CSS corresponds to a single CSS property and value, such as bg-blue-500 for background-color: #4299e1; or py-2 for padding-top: 0.5rem; padding-bottom: 0.5rem; By using these classes, you can style any element with fine-grained control, without having to write any custom CSS.

Why use Tailwind CSS?

1. Fast and easy to use
You don’t have to spend time setting up complex build tools, writing long and repetitive CSS files, or maintaining a separate style guide. You can just start coding right away, and see the results instantly in your browser.

2. Flexible and customizable
You can create any design you can imagine, without being limited by the predefined components or styles of other frameworks. You can also tweak every aspect of Tailwind CSS to suit your needs and preferences.

3. Consistent and scalable
You can ensure that your website looks and behaves the same across different browsers, devices, and screen sizes, by using the responsive and stateful modifiers provided by Tailwind CSS. You can also avoid code duplication and keep your projects maintainable by creating reusable abstractions with Tailwind CSS.

4. Fun and creative
You can experiment with different combinations of utility classes, and discover new ways of styling your elements. You can also learn more about CSS properties and values, and how they affect the layout and appearance of your website.

Start with these resources

The official documentation
The official documentation of Tailwind CSS is the most authoritative source of information about the framework. It covers every aspect of Tailwind CSS in detail, with clear explanations, examples, and references. It also has a search function, a cheat sheet, and a FAQ section.
Tailwind Labs YouTube Channel
The official YouTube channel of Tailwind CSS is a great way to learn about the framework visually. It features videos on how to use Tailwind CSS for various projects, such as landing pages, dashboards, forms, and more. It also has tutorials on how to use Tailwind UI, Tailwind JIT, and Tailwind Play.
Practice on Tailwind Play
It is the official online playground for Tailwind CSS, you can experiment and tryout your design straight away. There is no need to install anything, just start coding.

Making Clones of your favorite website is important!

Making clones of your favorite websites is a great way to learn Tailwind CSS, because it helps you to:

Practice using the utility classes By recreating the design and layout of existing websites, you can learn how to apply the utility classes provided by Tailwind CSS to style any element. You can also experiment with different combinations of classes, and see how they affect the appearance and behavior of your components.

Improve your HTML and CSS skills By making clones of your favorite websites, you can also improve your HTML and CSS skills, and following best practices for web development.

Build your portfolio and showcase your work By making clones of your favorite websites, you can also build your portfolio and showcase your work to potential employers or clients. You can demonstrate your proficiency in using Tailwind CSS, as well as your creativity and attention to detail.

If you are looking for some examples of website clones made with Tailwind CSS, you can check out this GitHub repository, where you can find clones of websites like Twitter, WhatsApp, Tesla, and more.

Conclusion

Tailwind CSS is a utility-first CSS framework that enables you to rapidly build modern websites without ever leaving your HTML. It is fast, flexible, consistent, scalable, fun, and creative. In 2023, Tailwind CSS will be updated with new features and improvements that will make it even better.

If you liked this article do checkout my article on must have TailwindCSS plugins for faster workflow here. Share this article with your fellow devs and learners.

3 Cool Developer Console Tricks you must know! (with code)

jeetvora331 — Thu, 17 Aug 2023 22:21:13 +0000

The developer console is a powerful tool that allows you to inspect, debug, and interact with your web pages. You can access the console by right-clicking on the page and selecting “Inspect Element” or by using a keyboard shortcut (usually Ctrl+Shift+I or Cmd+Option+I). The console tab in the developer tools window lets you run JavaScript commands, view errors and warnings, and log information.

But did you know that the console can do much more than that? In this article, we will show you some of the hidden features and tricks that can make your life easier

1. How to access the currently selected element in the elements tab as a variable.

While working in the browser, you might right-click on an element and select “Inspect Element” to view it in the elements tab. Then, you might want to assign it to a variable to work with it in JavaScript. You can do this by using the $0 variable in the console. This variable returns the currently selected element in the elements tab.



let image = $0

This will assign the image to the image variable. You can then manipulate it as you wish.

If you select another element, the previous one gets assigned to the $1 variable, while the new one replaces it for the $0 variable. Each time you select another element, the numbers increase by one, allowing you to access a backlog of previously selected elements. For example, if you inspect a heading element after inspecting a paragraph element, you can type:



let prev= $1
let curr= $0

This will assign the paragraph element to the prev variable and the heading element to the curr variable.

2. To measure the time of a fetch request from console

To do this is to use the console.time() and console.timeEnd() methods. These methods allow you to start and stop a timer and display the elapsed time in the console.

Make a fetch call using an async function and then use the 2 specified methods to measure the duration of the fetch call.



async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/2');
  const data = await response.json();
  console.log(data);
}

//start timer 
console.time()

// call the async function
getData()

//end timer
console.timeEnd()

Result:

You can also use the Network tab, To do this, you need to open the developer tools (F12 or Ctrl+Shift+I), click on the Network tab, and then make the fetch request in the console. You will see a list of requests in the Network tab, and you can click on any request to see more information about it.

3. JSON to Table

The best method to visualize JSON array is to convert that into tabular form.

This method takes an array or an object as an argument and displays it as a table in the console. This can be useful for visualizing and comparing data.

The console.table() method is a JavaScript function that allows you to display data in a tabular format in the browser’s developer console.



async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();

  // Show data in a Table
  console.table(data);
}


// call the async function
getData()

Results:

These are some of the developer console tricks that all developers should know. They can help you improve your productivity, efficiency, and creativity as a web developer. I hope you found them useful and interesting. If you have any feedback, please let me know in the comments below. Thank you for reading ! 😊

Write React code with CDN in HTML! 🌐

jeetvora331 — Fri, 04 Aug 2023 16:20:29 +0000

This is a Popular Interview Question

React is a popular JavaScript library for building user interfaces. It allows you to create reusable components that can render data and handle events. However, sometimes you may want to write some basic react code without installing any libraries or using create-react-app, which is a tool that sets up a modern web app by running one command. In this article, we will show you how to do that using CDN script files.

CDN stands for Content Delivery Network, which is a system of servers that deliver web content to users based on their geographic location. CDN script files are files that are hosted on a CDN server and can be accessed by adding a script tag to your HTML file. By using CDN script files, you can use React without downloading or installing anything on your local machine.

Checkout various Libraries at cdnjs
and UNPKG

Import React with CDN
To use React with CDN, you need to add two script tags to your HTML file: one for React and one for ReactDOM. React is the core library that provides the functionality for creating components and elements. ReactDOM is the library that provides the functionality for rendering React elements to the DOM. You can use the following script tags to load the latest versions of React and ReactDOM from unpkg, which is a CDN service that hosts npm packages:



<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/reactdom@18/umd/react-dom.development.js"></script>

So to render some Text on the screen with JS or React, we need to have an existing element in the DOM. So just create an empty div with id="root"



<div id="root"></div>

Now that we have loaded React and ReactDOM, we can write some basic react code in your HTML file. For example, we can create a simple component that renders an <h1> tag with some text:



<script type="text/babel">
  // Define a component called Greetings
  function Greetings() {
    return <h1>Hello readers, Thankyou for reading this blog !</h1>;
  }

  // Render the component to the DOM
  ReactDOM.render(
    <Greetings />,
    document.getElementById("root")
  );
</script>

we use type="text/babel" for the script tag, which tells the browser to treat the code as JSX, which is a syntax extension for JavaScript that allows you to write HTML-like code in React. JSX is not supported by most browsers, so we need to use a tool called Babel to transform it into plain JavaScript. Babel is also available as a CDN script file, which you can add to your HTML file before the react code

This will load Babel from a CDN:



<script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>

Now you have everything you need to write basic react code without installing libraries or using create-react-app. You can save your HTML file and open it in your browser to see the result. You should see something like this:

Complete Code



<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>

    <script type="text/babel">
  // Define a component called Greetings
  function Greetings() {
    return <h1>Hello readers, Thankyou for reading this blog !</h1>;
  }

  // Render the component to the DOM
  ReactDOM.render(
    <Greetings />,
    document.getElementById("root")
  );
</script>

  </body>

</html>

Congratulations! You have successfully written your first basic react code using CDN script files. You can use this method to experiment with React and learn its basics.

Throttling in JavaScript Easiest Explanation✨🚀

jeetvora331 — Tue, 11 Jul 2023 20:26:17 +0000

What is Throttling?

For example, if you have a function that fetches some data from an API every time the user scrolls the page, you might want to throttle it so that it only makes one request every second, instead of making hundreds of requests as the user scrolls. This way, you can avoid overloading the server or the browser with unnecessary requests and reduce the bandwidth consumption.

How to Implement Throttling in JavaScript?

There are several ways to implement throttling in JavaScript. One common approach is to use a timer function such as setTimeout or difference of time method (old method) to wrap the function being throttled. The timer function can be used to enforce a delay between calls to the throttled function, allowing it to be called only once within the specified time period.

Pictorial Representation
Here you can see that once the function is executed successfully it starts a blocking delay timer which blocks all the clicks. Once the delay is expired it accepts the clicks and executes the function.

Here’s an example of how to implement a throttle function using setTimeout:



function throttle(mainFunction, delay) {
  let timerFlag = null; // Variable to keep track of the timer

  // Returning a throttled version 
  return (...args) => {
    if (timerFlag === null) { // If there is no timer currently running
      mainFunction(...args); // Execute the main function 
      timerFlag = setTimeout(() => { // Set a timer to clear the timerFlag after the specified delay
        timerFlag = null; // Clear the timerFlag to allow the main function to be executed again
      }, delay);
    }
  };
}

Use Case



// Define a function that fetches some data from an API
function fetchData() {
  console.log("Fetching data...");
  // Simulate an API call with a random delay
  setTimeout(() => {
    console.log("Data fetched!");
  }, Math.random() * 1000);
}

// Throttle the fetchData function with a delay of 5000 ms
const throttledFetchData = throttle(fetchData, 5000);

// Add an event listener to the window scroll event that calls the throttledFetchData function
window.addEventListener("scroll", throttledFetchData);

In this example, we define a throttle function that takes a callback and a delay as arguments. The throttle function returns a new function that wraps the callback with a logic that uses setTimeout to create a timer. The timer ensures that the callback is only called once within the delay period. If the returned function is called again before the timer expires, it does nothing.

We then define a fetchData function that simulates an API call with a random delay. We use the throttle function to create a throttledFetchData function that has a delay of 5000 ms. We add an event listener to the window scroll event that calls the throttledFetchData function.

If you run this code and scroll the page, you will see that the fetchData function is only called once every 5 second, regardless of how fast or slow you scroll.

Why Use Throttling?

Throttling can improve the performance and user experience of web pages by reducing the number of unnecessary or redundant operations. It can also prevent some issues such as:

Overloading the server or the browser with too many requests or calculations
Exceeding the rate limits or quotas of APIs or services
Wasting bandwidth or resources on operations that are not visible or relevant to the user
Creating janky or laggy animations or interactions

Non Tech Example of throttling:

Changing speed of Fan
When changing speed of fan, it takes few seconds to reach at the desired speed. Thus before changing the speed again, we need to wait for few seconds so the fan reaches at a steady state.

When to Use Throttling?

Throttling is suitable for scenarios where you want to limit how often a function can be called, but you don’t want to miss any calls. For example, you might want to use throttling for:

Fetching data from an API or a database when the user scrolls, resizes, or types
Updating or animating elements on the page when the user scrolls, resizes, or moves the mouse
Logging or tracking user actions or events when they occur frequently

Conclusion

Throttling is a technique that limits how often a function can be called in a given period of time. It is useful for improving the performance and responsiveness of web pages that have event listeners that trigger heavy or expensive operations. Throttling can be implemented in JavaScript using timer functions such as setTimeout or setInterval. Throttling is suitable for scenarios where you want to limit how often a function can be called, but you don’t want to miss any calls.

I hope you found this blog helpful and learned something new about throttling in JavaScript. You can check out my article on Debouncing in JavaScirpt Here.

If you have any questions or feedback, please feel free to leave a comment below. Thanks for reading! 😊

JavaScript Debounce, Easiest explanation !(with Code)

jeetvora331 — Mon, 10 Jul 2023 16:17:59 +0000

Debouncing is a programming technique that helps to improve the performance of web applications by limiting the frequency of function calls. In this blog post, we will learn what debouncing is, why it is useful, and how to implement it in JavaScript with code examples.

What is debouncing?

Debouncing is a way of delaying the execution of a function until a certain amount of time has passed since the last time it was called. This can be useful for scenarios where we want to avoid unnecessary or repeated function calls that might be expensive or time-consuming.

For example, imagine we have a search box that shows suggestions as the user types. If we call a function to fetch suggestions on every keystroke, we might end up making too many requests to the server, which can slow down the application and waste resources. Instead, we can use debouncing to wait until the user has stopped typing for a while before making the request.

How to implement debouncing in JavaScript?

There are different ways to implement debouncing in JavaScript, but one common approach is to use a wrapper function that returns a new function that delays the execution of the original function. The wrapper function also keeps track of a timer variable that is used to clear or reset the delay whenever the new function is called.



const debounce = (mainFunction, delay) => {
  // Declare a variable called 'timer' to store the timer ID
  let timer;

  // Return an anonymous function that takes in any number of arguments
  return function (...args) {
    // Clear the previous timer to prevent the execution of 'mainFunction'
    clearTimeout(timer);

    // Set a new timer that will execute 'mainFunction' after the specified delay
    timer = setTimeout(() => {
      mainFunction(...args);
    }, delay);
  };
};

Using wrapping function with debounce



// Define a function called 'searchData' that logs a message to the console
function searchData() {
  console.log("searchData executed");
}

// Create a new debounced version of the 'searchData' function with a delay of 3000 milliseconds (3 seconds)
const debouncedSearchData = debounce(searchData, 3000);

// Call the debounced version of 'searchData'
debouncedSearchData();

Now, whenever we call debouncedSearchData, it will not execute searchDataimmediately, but wait for 3 seconds. If debouncedSearchData is called again within 3 seconds, it will reset the timer and wait for another 3 seconds. Only when 3 seconds have passed without any new calls to debouncedSearchData, it will finally execute searchData.

Image Representation

The image clearly shows that whenever the function is called again, the setTimeout() gets overwritten.

Here are three simple real life examples of debouncing:

Submit button:When you click a submit button on a website, it doesn’t send the data immediately, but waits for a few milliseconds to see if you click it again. This way, it prevents accidental double submissions and errors.
Elevator: When you press the button to call the elevator, it doesn’t move immediately, but waits for a few seconds to see if anyone else wants to get on or off. This way, it avoids going up and down too frequently and saves energy and time.
Search box: When you type something in a search box, it doesn’t show suggestions on every keystroke, but waits until you stop typing for a while. This way, it avoids making too many requests to the server and improves the performance and user experience.

Conclusion

Debouncing is a useful technique to optimize web applications by reducing unnecessary or repeated function calls that might affect the performance or user experience. We can implement debouncing in JavaScript by using a wrapper function that returns a new function that delays the execution of the original function until a certain amount of time has passed since the last call.

I hope you found this blog helpful and learned something new about Debouncing in JavaScript. You can check out my article on Throttling in JavaScirpt Here.

Critical Rendering Path in JavaScript - Make your website FAST!!

jeetvora331 — Fri, 07 Jul 2023 18:57:58 +0000

If you are a web developer, you probably want your website to load fast and look good on any device. But how do you achieve that? How does the browser turn your HTML, CSS, and JavaScript code into a beautiful webpage that users can see and interact with?

In this blog post, we will explore the concept of the critical rendering path (CRP), which is the sequence of steps that the browser takes to display a webpage on a user’s device. We will also learn some tips and best practices to optimize the CRP and improve the performance of your website.

What is the Critical Rendering Path?

The critical rendering path (CRP) is the sequence of steps that the browser goes through to convert the HTML, CSS, and JavaScript files into pixels on the screen. It starts with the browser requesting the files from the server and ends with the fully rendered page being displayed to the user.

The CRP consists of the following steps:

Document Object Model (DOM)
CSS Object Model (CSSOM)
Render Tree
Layout
Paint

How does each step work?

1. Document Object Model (DOM)
The DOM is created as the browser parses the HTML file. The HTML file consists of tags that represent different elements on the page, such as headings, paragraphs, images, links, etc. The browser converts these tags into tokens, which are then converted into nodes, which are then connected into a tree-like structure based on their hierarchy.

Consider this simple HTML file:

<html>
  <head>
    <title>Tech Blog</title>
  </head>
  <body>
    <h1>Hello Reader</h1>
    <p>This is my tech blog.</p>
    <img src="logo.png" alt="Logo">
  </body>
</html>

The browser will parse this file and create a DOM tree like this:

The DOM tree represents all the content of your website and can be accessed and modified by JavaScript. For example, you can use document.getElementById() or document.querySelector() to select a specific element in the DOM tree and change its attributes or content.

2. CSS Object Model (CSSOM)
The CSSOM is created as the browser parses the CSS file. The CSS file consists of rules that define how different elements on the page should look, such as colors, fonts, margins, borders, etc. The browser converts these rules into tokens, which are then converted into nodes, which are then connected into a tree-like structure based on their specificity.

Consider this simple CSS file:

body {
  font-family: Arial;
  background-color: white;
}

h1 {
  color: blue;
  font-size: 36px;
}

p {
  color: black;
  font-size: 18px;
}

img {
  width: 100px;
  height: 100px;
}

The browser will parse this file and create a CSSOM tree like this:

The CSSOM tree represents all the styles of your website and can be accessed and modified by JavaScript. For example, you can use document.styleSheets or element.style to select a specific style sheet or element in the CSSOM tree and change its rules or properties.

3. Render Tree
The render tree is created as the browser combines the DOM and the CSSOM trees. The render tree contains only the visible elements on the page and their computed styles. The render tree is used to determine how each element should be displayed on the screen, such as their size, position, color, etc.

For example, consider the same HTML and CSS files from the previous examples. The browser will combine them and create a render tree like this:

The render tree does not include elements that are not visible on the page, such as <head>, <title>, <script>, <style>, etc. It also does not include elements that have display: none or visibility: hidden styles. The render tree can be modified by JavaScript as well, such as by adding or removing elements, changing their styles, etc.

4. Layout
The layout step is also called reflow or layout thrashing. It is the process of calculating the size and position of each element in the render tree, relative to the viewport. The viewport is the visible area of the browser window, which can vary depending on the device, screen size, zoom level, etc.

For example, consider the same HTML and CSS files from the previous examples. The browser will calculate the layout of each element in the render tree and assign them coordinates like this:

The layout step can be triggered by various events, such as resizing the browser window, changing the font size, adding or removing elements, changing their styles, etc. The layout step can be expensive and time-consuming, especially if it affects many elements on the page. Therefore, it is important to minimize the number of layout events and optimize their performance.

5. Paint
The paint step is also called rasterization or painting. It is the process of painting each element in the render tree onto pixels on the screen, using layers and compositing. Layers are used to group elements that have similar properties or effects, such as opacity, transform, animation, etc. Compositing is used to merge different layers into a final image that is displayed to the user.

For example, consider the same HTML and CSS files from the previous examples. The browser will paint each element in the render tree onto pixels on the screen like this:

The paint step can be triggered by various events, such as scrolling, hovering, animating, etc. The paint step can be expensive and time-consuming, especially if it affects many pixels on the screen. Therefore, it is important to minimize the number of paint events and optimize their performance.

Conclusion

The critical rendering path is an important concept for web developers who want to improve their website’s performance and user experience. By understanding how each step works and applying some optimization techniques, you can make your website load faster and look better on any device.

If you want to learn more about web performance and CRP, you can check out this resources:
Web performance | MDN

Python DSA Cheat-sheet for SuperHeros

jeetvora331 — Fri, 07 Jul 2023 18:32:14 +0000

Here is a python cheat sheet that can be useful in solving data structure and algorithm problems. It covers some of the basic and intermediate operations on lists, tuples, dictionaries and sets, as well as some common algorithms and their complexities. I hope you find it helpful.



# Python Cheat Sheet for Data Structures and Algorithms

# List and Tuple Operations

# Creating a list or tuple
my_list = [1, 2, 3, 4] # use square brackets for lists
my_tuple = (5, 6, 7, 8) # use parentheses for tuples

# Accessing elements by index
first = my_list[0] # get the first element of the list (index 0)
last = my_tuple[-1] # get the last element of the tuple (index -1)

# Slicing a list or tuple
sublist = my_list[1:3] # get a sublist from index 1 (inclusive) to index 3 (exclusive)
subtuple = my_tuple[:2] # get a subtuple from the beginning to index 2 (exclusive)
reversed_list = my_list[::-1] # get a reversed list using negative step

# Concatenating two lists or tuples
new_list = my_list + [9, 10] # create a new list by adding another list
new_tuple = my_tuple + (11, 12) # create a new tuple by adding another tuple

# Repeating a list or tuple
repeated_list = my_list * 2 # create a new list by repeating the original list twice
repeated_tuple = my_tuple * 3 # create a new tuple by repeating the original tuple three times

# Checking membership of an element
is_in_list = 3 in my_list # returns True if 3 is in the list, False otherwise
is_in_tuple = 9 in my_tuple # returns False if 9 is not in the tuple, True otherwise

# Iterating over a list or tuple
for x in my_list: # loop through each element x in the list
    print(x) # print x

for i, x in enumerate(my_tuple): # loop through each index i and element x in the tuple
    print(i, x) # print i and x

# Unpacking a list or tuple
a, b, c, d = my_list # assign each element of the list to a variable
e, f, g, h = my_tuple # assign each element of the tuple to a variable

List Methods



# List methods (do not apply to tuples)
my_list.append(5) # add an element 5 at the end of the list
my_list.insert(2, 6) # insert an element 6 at index 2 of the list
my_list.remove(4) # remove the first occurrence of element 4 from the list
my_list.pop() # remove and return the last element of the list
my_list.pop(1) # remove and return the element at index 1 of the list
my_list.index(3) # return the index of the first occurrence of element 3 in the list
my_list.count(2) # return the number of times element 2 appears in the list
my_list.sort() # sort the list in ascending order (modify the original list)
my_list.reverse() # reverse the order of the list (modify the original list)
my_list.copy() # return a shallow copy of the list
my_list.clear() # remove all elements from the list

Dictionary Operations

Dictionaries are unordered collections of key-value pairs that do not allow duplicate keys
Dictionaries are mutable (can be changed) and support indexing by key, membership testing by key,
Iteration by key or value or item, and unpacking into variables



# Creating a dictionary
my_dict = {"name": "Alice", "age": 25, "gender": "female"} # use curly braces and colons for dictionaries

# Accessing values by keys
name = my_dict["name"] # get the value associated with the key "name"
age = my_dict.get("age") # get the value associated with the key "age" or None if not found

# Adding or updating key-value pairs
my_dict["email"] = "alice@gmail.com" # add a new key-value pair to the dictionary
my_dict["age"] = 26 # update the value associated with the key "age"

# Removing key-value pairs
del my_dict["gender"] # delete the key-value pair with the key "gender" from the dictionary
email = my_dict.pop("email") # remove and return the value associated with the key "email"
name, age = my_dict.popitem() # remove and return an arbitrary key-value pair as a tuple

# Checking membership of a key
is_in_dict = "name" in my_dict # returns True if "name" is a key in the dictionary, False otherwise

# Iterating over a dictionary
for key in my_dict: # loop through each key in the dictionary
    print(key) # print key

for value in my_dict.values(): # loop through each value in the dictionary
    print(value) # print value

for key, value in my_dict.items(): # loop through each key-value pair in the dictionary
    print(key, value) # print key and value

# Unpacking a dictionary into variables
name, age, gender = my_dict # assign each key of the dictionary to a variable
{"name": name, "age": age, "gender": gender} = my_dict # assign each value of the dictionary to a variable

Dictionary methods



my_dict.keys() # return a view object of the keys of the dictionary
my_dict.values() # return a view object of the values of the dictionary
my_dict.items() # return a view object of the key-value pairs of the dictionary
my_dict.update({"city": "New York", "age": 27}) # update the dictionary with another dictionary or iterable
my_dict.copy() # return a shallow copy of the dictionary
my_dict.clear() # remove all key-value pairs from the dictionary

Set Operations

Sets are unordered collections of elements that do not allow duplicates
Sets are mutable (can be changed) and support membership testing, iteration, and mathematical set operations




# Creating a set
my_set = {1, 2, 3, 4} # use curly braces for sets (but no colons)
empty_set = set() # use the set() function to create an empty set

# Adding or removing elements
my_set.add(5) # add an element 5 to the set
my_set.remove(4) # remove an element 4 from the set (raises KeyError if not found)
my_set.discard(3) # remove an element 3 from the set (does nothing if not found)
my_set.pop() # remove and return an arbitrary element from the set (raises KeyError if empty)
my_set.clear() # remove all elements from the set

# Checking membership of an element
is_in_set = 2 in my_set # returns True if 2 is in the set, False otherwise

# Iterating over a set
for x in my_set: # loop through each element x in the set
    print(x) # print x

String Methods

These string methods can be helpful in solving various string manipulation problems that you may encounter in Data Structure and Algorithm problems on platforms like LeetCode.



my_string = "   Hello, World!   "

# Length of a string
length = len(my_string)
print(length)  # Output: 19

# Splitting a string into a list
my_list = my_string.split(" ")
print(my_list)  # Output: ['', '', '', 'Hello,', 'World!', '', '', '']

# Joining elements of a list into a string
my_string = " ".join(my_list)
print(my_string)  # Output:    Hello, World!

# Checking if a substring exists in a string
if "Hello" in my_string:
    print("Substring found!")  # Output: Substring found!

# Replacing occurrences of a substring
new_string = my_string.replace("World", "Python")
print(new_string)  # Output:    Hello, Python!

# Converting a string to lowercase/uppercase
lowercase = my_string.lower()
uppercase = my_string.upper()
print(lowercase)  # Output:    hello, world!
print(uppercase)  # Output:    HELLO, WORLD!

# Checking if a string starts/ends with a specific substring
starts_with_hello = my_string.startswith("Hello")
ends_with_exclamation = my_string.endswith("!")
print(starts_with_hello)  # Output: False
print(ends_with_exclamation)  # Output: True

# Removing leading/trailing whitespace from a string
stripped_string = my_string.strip()
print(stripped_string)  # Output: Hello, World!

# Checking if a string is alphanumeric
is_alphanumeric = my_string.isalnum()
print(is_alphanumeric)  # Output: False

# Counting occurrences of a substring
count = my_string.count("Hello")
print(count)  # Output: 1