DEV Community: Nirmal Kumar

A Guide to Debouncing in JavaScript and React | Create a Custom Hook

Nirmal Kumar — Wed, 15 Nov 2023 17:27:48 +0000

Introduction

In our daily surfing of the web, we’ve encountered dynamic web features like auto-complete search boxes (as in Google), drag-and-drop functionality, and smooth scrolling effects. These seamless interactions often rely on techniques like debouncing and throttling to ensure a smooth user experience. These techniques are crucial for handling tasks like API calls, scrolling effects, etc., In this article, we will look into implementing the debounce functionality in JavaScript and later convert it into a reusable hook in React.

What is Debouncing?

Debouncing is a technique used in web development to control the rate at which a particular function or action is triggered in response to an event, typically user input or some form of interaction. It ensures that the function is only executed once after a specified period of inactivity following the event, even if the event itself occurs multiple times in quick succession.

Why Debouncing?

Let’s consider a scenario of a social media application where you need to find your friends’ named John and you need to see the results in real-time without pressing any button. So whenever you enter a character in the search bar, an API call will be fired to fetch the friend list. But we don’t want that to happen as the API calls to the server is costly and we need to optimize it for efficient usage of the backend resources. To solve this, debounce comes in handy. We will implement the debounce functionality in such a way that the API call won’t be fired until a certain time has elapsed since the last input. Debouncing can also be used in tasks like handling scroll events or preventing excessive form submissions.

Debouncing in JavaScript

In this section, we will see how to implement the debouncing functionality in JavaScript.

We know the setTimeout function in JavaScript will execute a callback after a certain delay. For Debouncing, we will make use of the setTimeout as it would be a good fit. As we know, setTimeout takes in 2 parameters, the callback function and the delay. It returns a value which is the id of the corresponding setTimeout. As and when the user is typing, we will make sure to clear the timeout function so the callback function won’t be fired until there is no input from the user for the duration of the delay.

const debounce = (cbFn, delay = 500) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      cbFn(...args);
    }, delay);
  };
};

In the above, the debounce function takes in the cbFn as the first parameter and the delay as the second parameter with a default value of 500ms. It returns a function which can be called further in our application. When called, the function will clear any previously set timeout and create a brand new setTimeout function with the desired delay. When there is no input from the user for the desired delay, the callback function will be executed.

To see the debouncing functionality in action, let’s create a simple input and add the debouncing functionality to it.

Create index.html and add the following content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debounce</title>
</head>
<body>
    <input type="text">
    <p>The entered value will appear below when there is no input for 1 second</p>
    <div>Entered Value:</div>
    <script src="script.js"></script>
</body>
</html>

Now add the JavaScript in the script.js file.

const input = document.querySelector("input");
const div = document.querySelector("div");

const debounce = (cbFn, delay = 500) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      cbFn(...args);
    }, delay);
  };
};
const callDebouncedFunction = debounce((args) => {
  div.innerText = `Entered Value: ${args}`;
}, 1000);
input.addEventListener("input", (e) => {
  callDebouncedFunction(e.target.value);
});

Here, we have created a simple input field and a <p> element and a <div> element which shows the entered input value. In the script.js file, we have added an event listener to the input field. We have created a callDebouncedFunction by invoking the debounce function and passing in a callback function that updates the div element's text content with the entered value. The debounce delay is set to 1000 milliseconds (1 second) in this case. So the div will be updated only when there is no input from the user for 1 second.

Check the demo for the above in Codepen.

Implementing Debouncing in React

Now, let’s move on to implementing the debouncing functionality in React. Bootstrap a basic react app using Vite using the below command.

# npm
npm create vite@latest react-debounce -- --template react

# Yarn
yarn create vite react-debounce -- --template react

Once the above step is done, Run the below commands to start the local dev server.

# npm
npm install
npm run dev

# yarn
yarn
yarn dev

Let’s implement the debouncing functionality in react. In theApp.jsx file add the following content.

import { useState } from "react";

export default function App() {
  const [debouncedValue, setDebouncedValue] = useState("");

  const debounce = (cbFn, delay = 250) => {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        cbFn(...args);
      }, delay);
    };
  };

  const handleChange = debounce((v) => {
    setDebouncedValue(v);
  }, 1000);

  return (
    <div style={{ display: "flex", gap: "5px", flexDirection: "column" }}>
      <input type="text" onChange={(e) => handleChange(e.target.value)} />
      <p style={{ fontSize: "24px" }}>
        The entered value will appear below when there is no input for 1 second
      </p>
      <p style={{ fontSize: "24px" }}>
        Debounced Value:{" "}
        <span style={{ fontWeight: "bold" }}>{debouncedValue}</span>
      </p>
    </div>
  );
}

Similar to the vanilla implementation, we have created an input field.

We use the useState hook to manage the debouncedValue. This state is displayed as the result after debouncing.

We have defined the debounce function and a hanldeChange which calls the debounce function. The handleChange method is attached to the onChange of the input field. The debounce delay is set to 1000ms. This ensures that the state updates only when you've paused for a second, avoiding constant updates.

The Custom Debounce Hook

In React, custom hooks are your superpower for encapsulating and reusing functionality across components. In this section, we will implement the custom useDebounce hook.

Create the useDebounce.jsx file and add the below content.

import { useEffect, useState } from "react";

export default function useDebounce(value, delay = 250) {
  const [debouncedValue, setDebouncedValue] = useState("");

  useEffect(() => {
    const timeoutId = setTimeout(() => setDebouncedValue(value), delay);
    return () => {
      clearTimeout(timeoutId);
    };
  }, [value, delay]);

  return debouncedValue;
}

The custom useDebouncehook takes two parameters: the value we want to debounce (value) and an optional delay time (delay) in milliseconds with a default value of 250ms. Inside the hook, we are making use of useState to manage the state of the debounced value. In the useEffect's body, we set the timer using setTimeout to update the debounced value after the delay. This will run whenever one of the values of the dependency array (value and delay) changes. In the useEffect's cleanup function, we clear the previous timers if the value or delay changes before the timer completes, preventing multiple quick updates. This ensures that the value is only updated once the user has paused their input for the desired delay.

Let’s integrate this hook into the App component.

import { useState } from "react";
import useDebounce from "./useDebounce";

export default function App() {
  const [value, setValue] = useState("");
  const debouncedValue = useDebounce(value, 1000);

  return (
    <div style={{ display: "flex", gap: "5px", flexDirection: "column" }}>
      <input
        type="text"
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <p style={{ fontSize: "24px" }}>
        The entered value will appear below when there is no input for 1 second
      </p>
      <p style={{ fontSize: "24px" }}>
        Debounced Value:{" "}
        <span style={{ fontWeight: "bold" }}>{debouncedValue}</span>
      </p>
    </div>
  );
}

We have defined a state variable called value to manage the input element. We are passing this state to the useDebounce hook and also passing the delay of one second. That’s it, we have implemented the debouncing functionality. To see this in action, check the codesandbox here.

Conclusion

In this article, we have seen the basic definition of debouncing and its implementation in vanilla JS. Also, we have converted that into a reusable react hook which can be reused across the components. This functionality can be applied in many use cases like Real-Time searching, Input validation, Infinite scrolling and any use case where you need to delay an action for a desired time. You can take this approach and integrate it into your applications. Thanks for Reading.

Create a Telegram Bot with Node.js

Nirmal Kumar — Mon, 09 Oct 2023 15:25:14 +0000

Introduction

In this simple tutorial, we will explore creating a Telegram Bot using Node JS. We will Create a Telegram Bot that will send a random Chuck Norris Joke. By following along, you'll learn how to use Node.js, connect to APIs, and add some fun to your Telegram chats.

Prerequisites:

You should have Node.JS installed in your system, preferably the LTS version.
A Telegram account so you can create a Bot

Creating the Telegram Bot:

First and Foremost step, we need to create a Telegram bot in the telegram App. Follow the below steps to create the Telegram bot.

Open the Telegram App.
Now Search for @BotFather and open it. It is like the bot admin for the whole of Telegram.
If you are creating a bot for the first time, Click on /start.
Next, click on /newbot and follow the on-screen instructions to create the bot.
Once the bot has been created, copy the Bot API key and save it for later.

Setting up the Bot in Node JS:

Next, let's set up our development environment.

mkdir chuck-norris-telegram-bot
npm init -y

Let’s install the necessary dependencies from npm

npm i node-telegram-bot-api dotenv axios

node-telegram-bot-api - This provides all the necessary API functions to set up and run our telegram bot.
dotenv - To read the .env file secret keys.
axios - To make HTTP Rest API calls with the chuck norris jokes API.

Coding the Bot:

Let’s add the API key to the .env file

TELEGRAM_BOT_API_KEY=<Your_API_Key>

We will be using ES6 modules to code the bot. So add the below line in package.json

{
  // rest of the package.json
  "type": "module" // Add this line to use ES6 modules in our code
  // rest of the package.json scripts and dependencies
}

Create an index.js file and copy the contents below

import dotenv from "dotenv";
import TelegramBot from "node-telegram-bot-api";
dotenv.config();

const TELEGRAM_BOT_API_KEY = process.env.TELEGRAM_BOT_API_KEY;
const telegramBot = new TelegramBot(TELEGRAM_BOT_API_KEY, { polling: true });

telegramBot.onText(/\/start/, (msg) => {
  telegramBot.sendMessage(msg.chat.id, `Welcome ${msg.chat.first_name}`);
});

In the above code, we are loading the env keys from the .env file using dotenv library. Then we are creating an instance of Telegram Bot passing the api key.
The onText() function of the telgram api takes in two arguments, where the first argument is a regular expression that matches the input command. The second argument is a callback function that executes when the regExp is matched.
Here we are just greeting the user once they click start in the bot.

Let’s test it. Start our bot running the below command

npm start

Now, Head over to Telegram and Open the Bot that we created and click start.

As expected, our bot responded with a Welcome message. Now Let’s move on to creating the bot command for getting the Jokes.

Creating the Bot Command:

Now, let’s create a bot command that will be used by the users to send commands to the bot.
To create a command, open the BotFather App in Telegram.

Send /mybot command to the BotFather and Select your father in the button displayed.
Then Click on Edit Bot → Edit Commands.
Create the following command as shown below and send it to the bot. joke - Send a random Chuck Norris Joke

That’s it. The /joke command is created. Now let’s move on to create the bot response for that command.

Creating the Bot Response:

Open index.js in vs code and add the below code to it.

telegramBot.onText(/\/joke/, async (mesg) => {
  // To implement the functionality to fetch the Joke from the API
});

Whenever the user sends the /joke command this function will be executed. Let’s move into implementing the functionality now.

Let’s create a separate file api.js that will be used to fetch Jokes from the Chuck Norris API.

import axios from "axios";

export const getJoke = async () => {
  try {
    const response = await axios.get("https://api.chucknorris.io/jokes/random");
    const data = response.data;
    return data.value;
  } catch (error) {
    console.log(error);
    return "No Jokes";
  }
};

The getJoke() function will fetch a random Joke by hitting the Chuck Norris API.

Let’s import this function in index.js and use it as our bot response.

// Import it at the top
import { getJoke } from "./api.js";

// let's complete the bot response
telegramBot.onText(/\/joke/, async (msg) => {
  const joke = await getJoke();
  telegramBot.sendMessage(msg.chat.id, joke);
});

So, whenever the user sends the /joke command, our bot will fetch a random Joke from the Chuck Norris API and send the response back to the user.

Note: We need to import the *getJoke* from *./api.js* (with extension) not just *./api*. Else it will throw an error

Let’s test it. Open the Command Prompt and start the app by running the below command.

npm start

Now, open our bot and send the /joke command.

Yes! As you can see, the bot responds with a funny(?) Chuck Norris joke.

Conclusion:

That’s it. Our Bot is ready. Feel free to add more bot commands and play around. To summarize, In this tutorial, we learned how to create a telegram bot using Node.JS and also how to create bot commands and how to send bot responses back to the user. You can find the source code of this article in my GitHub.

Don’t use State for React Forms. Use this instead!

Nirmal Kumar — Thu, 31 Aug 2023 04:16:26 +0000

Learn how to optimize the performance of react forms by replacing useState with the native feature of JavaScript.

Photo by Lautaro Andreani on Unsplash

Introduction

When it comes to handling forms in react, the most popular approach is to store the input values in state variables. One of the reasons for following this approach is because, it's React, after all, and everyone tends to use the hooks that come with it. Using hooks solves a lot of problems in React, but is it required when it comes to forms? Let's check it out.

Problem with using States

As we already know, whenever the value of the state variable changes inside a component, react will re-render the component to match its current state. Though it's not a big issue in small applications, it may cause performance bottlenecks as your application grows in size. When it comes to form, React will attempt to re-render the component every time the input (state) changes.

Side Tip: I came across this answer on StackOverflow which is very useful for counting the number of times a component has been rendered. We will use that utility function in our code as well.

Let's implement and see the issue with states in action.

Create a basic react app using Vite and clean up unwanted files once the project is created.

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

# yarn
yarn create vite my-vue-app --template react

# pnpm
pnpm create vite my-vue-app --template react

Let's create a react component (say FormWithState) containing a form that takes in two inputs email and password. We will use the state to manage the form inputs.

import { useEffect, useRef, useState } from "react";
import "./Forms.css";

export default function FormWithState() {
  // The count will increment by 2 on initial render due to strict mode then by 1 on subsequent renders
  const countRef = useRef(0);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  useEffect(() => {
    countRef.current = countRef.current + 1;
  });

  function handleSubmit(e) {
    e.preventDefault();
    console.log({ email, password });
  }

  return (
    <div className="form-div">
      <h2>Form With State</h2>
      <form onSubmit={handleSubmit}>
        <div className="input-field">
          <label htmlFor="email2">Email</label>
          <input
            id="email2"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            autoComplete="off"
          />
        </div>
        <div className="input-field">
          <label htmlFor="password2">Password</label>
          <input
            id="password2"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">Submit</button>
        <div>
          <p>
            The Component Re-Rendered <span>{countRef.current}</span> times
          </p>
        </div>
      </form>
    </div>
  );
}

Add this component to the App component and open http://localhost:5173

As you can see, the form component is rendered about 23 times and the count will increase gradually as the number of input fields increases. In most cases, the form values are used only during the form submission. So, is it required to re-render the component about 20+ times just for two input fields? The answer is a clear NO!

Also, when the number of input fields increases, the number of state variables to store the input values increases, thereby increasing the complexity of the codebase. So, what's the alternative approach to avoid re-renders but achieving all the functionalities of the forms?

Using FormData to handle forms

So, the alternative approach is to use the native FormData interface of JavaScript.

There are three ways to create a new FormData object as described in the official docs.

new FormData();
new FormData(form);
new FormData(form, submitter);

We will be using the second method because we already have a form. We just need to pass the form element to the constructor and it will auto-populate the form values. To make this work, we also need to add the name attribute to the input tag. Let's test this approach. Create a component (say FormWithoutState).

import { useEffect, useRef } from "react";

export default function FormWithoutState() {
  // The count will increment by 2 on initial render due to strict mode then by 1 on subsequent renders
  const countRef = useRef(0);

  useEffect(() => {
    countRef.current = countRef.current + 1;
  });

  function handleSubmit(e) {
    e.preventDefault();
    const form = new FormData(e.currentTarget);
    const email = form.get("email");
    const password = form.get("password");
    console.log({ email, password });
    const body = {};
    for (const [key, value] of form.entries()) {
      body[key] = value;
    }
    console.log(body);
    // Do Further input validation and submit the form
  }

  return (
    <div className="form-div">
      <h2>Form Without State</h2>
      <form onSubmit={handleSubmit}>
        <div className="input-field">
          <label htmlFor="email1">Email</label>
          <input id="email1" type="email" name="email" autoComplete="off" />
        </div>
        <div className="input-field">
          <label htmlFor="password1">Password</label>
          <input id="password1" type="password" name="password" />
        </div>
        <button type="submit">Submit</button>
        <div>
          <p>
            The Component Re-Rendered <span>{countRef.current}</span> times
          </p>
        </div>
      </form>
    </div>
  );
}

In this component, we haven't used useState hook at all. Instead, we are adding the name attribute to the input tag. Once the user submits the form, in the handleSubmit function, we are creating the FormData by providing the form object via e.currentTarget. Then we iterate through the FormData.entries() method to get the form key and value to build the form body. We can then use this object for further input validation and submission via fetch or Axios API. But, what about the impact of component re-rendering of this approach? Let's check it out. Add this component to the App component and open http://localhost:5173.

Aren't you surprised? The component didn't re-render at all.

Advantages of using FormData

The form input values are automatically captured without the need to maintain a state variable for each input field.
The component doesn't re-render on user input.
The API request body can be easily built when using FormData, whereas we would need to assemble the data for submission when using useState.
It eliminates the need for introducing new state variables as and when the form grows.
When dealing with multiple forms, you might end up duplicating similar state variables across components, whereas FormData can be reused easily with just a few lines of code.
One thing that FormData supports out of the box is, it will handle dynamic fields automatically. i.e., If your form has dynamically generated fields (adding/removing fields based on user input), managing their state with useState requires additional handling, whereas FormData will take care of it automatically.

Conclusion

You can check the code for this article on code sandbox here. Hope you learned something new from this article. Leave a comment if you have any doubts. Thanks!

Designing the Hashnode Logo with HTML and CSS

Nirmal Kumar — Fri, 17 Feb 2023 15:00:11 +0000

In this article, we will see how to recreate the Hashnode Logo using plain HTML/CSS. No JavaScript is involved.

Prerequisites

Basic Knowledge of HTML/CSS
A Code editor like VS Code
A web browser like Chrome/Firefox/Edge

Analysing the Logo

The Hashnode Logo comes in light and dark themes and it looks like a tilted square with curved edges and a circle in the centre.

HTML Code

For this project, let's create two files. index.html and style.css.

Open VS Code and create the html boilerplate by pressing ! and enter. Then link the style.css in the head tag. In the body section, let's create two divs, one inside the other as below

<div class="blue-square">
  <div class="circle"></div>
</div>

The outer div has a class blue-square where we will style the outer blue region of the logo and the inner div has a class circle where we will style the inner circle of the logo.

The entire index.html would look like this,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>HashNode Logo</title>
  </head>

  <body>
    <div class="blue-square">
      <div class="circle"></div>
    </div>
  </body>
</html>

Styling with CSS:

In this section, we will style the logo using CSS. Let's make the box-sizing as border-box. Let's remove all the unnecessary margins and paddings that come up with the browser. And finally, let's create a css variable --bgcolor to specify the background as black or white for the respective theme.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  --bgcolor: white;
}

Next, Let's make our Logo centred on the page. Since our blue-square is a direct child of the body element. We can use the body selector and make the div's inside it centred using the flex property.

body {
  background-color: var(--bgcolor);
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

Here, we have given the background-color property to be the variable --bgcolor. We have made the display as flex to make it a flexbox. Height is set to 100vh to take up the entire height of the viewport. justify-content: center will make the div to be centered horizontally and align-items: center will make the div to be centred vertically.

Note: align-items: center won't work if you don't specify a height property to your element.

There won't be anything to be seen on the screen still.

Let's move to style the outer part of our logo which is the blue colored region. Use the .blue-square selector to style the element.

.blue-square {
  width: 60px;
  height: 60px;
  background-color: blue;
  border-radius: 20px;
  rotate: 45deg;
}

Let's give the outer div a height and width of 60px and the background-color of blue. And let's give a border-radius of 20px to look more curved. At this point, it would look like a blue square with curved borders as shown below

But the actual logo is not just a square, but a tilted one. So, let's rotate it by 45deg. Add this property to the above selector.

.blue-square {
  /* Other Properties */
  rotate: 45deg;
}

Now, it will give us the resemblance of the actual logo.

Now, let's move on to design the center circle. But wait, to make the circle centred, we need to make its parent a flexbox and give the justify-content and align-items property to center. So, here the parent of the circle is the blue-square. Let's add those properties to that.

.blue-square {
  /* Other Properties */
  display: flex;
  justify-content: center;
  align-items: center;
}

Now, let's style the circle element. Let's give it a background color the same as the --bgcolor variable. Let's give it a width and height of 24px. To make the div a circle, let's give it a border-radius of 50%. It will make the div to be a circle. As simple as that.

.circle {
  background-color: var(--bgcolor);
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

That's it. The Hashnode logo is complete. Try changing the --bgcolor variable between black and white to see the logo in light and dark modes.

In Dark Mode:

In Light Mode:

Disclaimer: This may or may not have the exact aspect ratio or dimensions and other characteristics of the original logo. For legal use of the Hashnode Logo, contact the Hashnode team directly.

Conclusion

If you found it helpful, please leave a like and let me know your thoughts in the comments below. Follow this space for more such logos in the upcoming days. You can see the logo in action in the below codepen.

Top 5 Software Development Trends in 2023

Nirmal Kumar — Sun, 01 Jan 2023 12:30:44 +0000

Introduction:

The field of software development is constantly evolving and adapting to new technologies and approaches. Keeping up with these trends is important for software developers, as it helps to ensure that they are using the most effective and efficient tools and techniques. In this post, we will explore five current trends in software development and how they are shaping the way we build and deploy software applications.

Artificial intelligence and machine learning:

AI and machine learning are being used in a variety of applications to automate and improve processes. Machine learning algorithms can analyze large amounts of data to identify patterns and make predictions, which can be used to improve decision-making and optimize processes. For example, in the healthcare industry, machine learning can be used to analyze patient data to identify potential health risks and suggest preventative measures. In the finance industry, it can be used to analyze market data and make investment recommendations. And in customer service, it can be used to improve the accuracy of automated responses to customer inquiries. In addition to these practical applications, AI and machine learning are also being used in research and development to advance the state of the art in a variety of fields.

Cloud computing:

The use of cloud computing allows for the delivery of computing resources over the internet, offering greater scalability, flexibility, and cost-efficiency. Companies are using the cloud for a variety of purposes, including data storage, analytics, and development environments. The ability to access and use resources on demand allows for greater agility and the ability to scale up or down as needed. Cloud computing also offers increased security and reliability, as data is stored in secure, redundant servers and accessed over secure networks.

Containers and microservices:

Containers allow for the packaging of an application and its dependencies into a single unit, making it easier to deploy and run the application in different environments. Microservices are a way of building and delivering software applications as a suite of small, modular services, allowing for greater flexibility and scalability. This approach also makes it easier to update and maintain the application, as changes can be made to individual services without affecting the entire application.

DevOps:

DevOps is a set of practices that aims to improve collaboration between development and operations teams, leading to faster delivery of software. By using automation and other tools, DevOps helps to streamline the software development process and increase efficiency. By breaking down the barriers between development and operations, teams can work together more seamlessly and be more responsive to changing needs.

Low-code and no-code platforms:

These platforms allow users to build and deploy applications without the need for traditional coding. This makes it easier for non-developers to create applications and for developers to quickly prototype and build applications. Low-code and no-code platforms often use visual drag-and-drop interfaces, making it easy to build and customize applications without the need for coding knowledge. These platforms can be used for a variety of purposes, including business process automation, data management, and customer relationship management.

Conclusion:

These are just a few of the current trends in software development that are shaping the way we build and deploy software applications. Keeping up with these trends can help developers to stay current and use the most effective tools and techniques for their projects. As the field of software development continues to evolve, it will be important for developers to stay informed and adapt to new technologies and approaches.

5 Lesser Known HTML Tags

Nirmal Kumar — Sat, 31 Dec 2022 08:37:38 +0000

Introduction:

As we all know, HTML is the backbone of Website development, without which all the websites we know today would not even exist. Though HTML has a lot of tags, we use very few of them, e.g., <div>, <p>, <h1> to <h6>, <a> etc., In this article, we will explore 5 lesser-known HTML tags that you may not have heard of but can be useful in various situations.

The `<abbr>` Tag:

The first of the list is the abbreviation tag <abbr>. It can be very useful in situations where we need to express the abbreviation of a term. The <abbr> tag has an attribute named title which is used to show the description of the term when we hover the mouse over the word.

Example:

<abbr title="HyperText Markup Langugae">HTML</abbr> is the backbone of 
web development.

So, when the user hovers over the HTML word, the expansion will be shown to the user.

The `<kdb>` Tag:

The next tag on this list is the Keyboard Input tag <kdb>. This tag is used to display the keyboard input. This is useful when we are providing instructions to the user about the key combination to accomplish a task.

Example:

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text
Press <kbd>Ctrl</kbd> + <kbd>V</kbd> to paste text

The `<dl>` Tag:

The next on this list is the description list <dl> tag. This is used to create a list of terms and their corresponding definition. This is used in conjunction with the <dt> and <dd> tags, which are used to define the terms and the definition respectively.

Example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>A programming language used to build interactive web applications</dd>
</dl>

The `<meter>` Tag:

The 4th tag in the list is the <meter> tag. This tag is used to represent a scalar measurement within a known range, such as the Battery percentage or the percentage of a task that has been completed.

Example:

<p>Battery charge: <meter value="75" min="0" max="100">75%</meter></p>

The `<dfn>` Tag:

The last tag in this list is the <dfn> tag. This tag is used to highlight the defining instance of a term in an HTML document. It is typically used to indicate the first or most important occurrence of a term in a document.

Example:

<p>A <dfn>blog</dfn> is a website where a person or organization publishes 
regular posts, typically consisting of text, images, and links.</p>

Conclusion:

In this article, we explored 5 tags: <abbr>, <kdb>, <dt>, <meter>, and <dfn>. These tags can help add semantic meaning to your content, improve the accessibility of your website, or simply add a little extra functionality. You can find the complete example in the CodePen below.

If you find this article useful, follow me for more such articles.

If you have any questions, Leave a comment below.

Thank you.

5 Fun and Educational React Project ideas for Beginners

Nirmal Kumar — Wed, 28 Dec 2022 17:43:55 +0000

Learn react by building these projects.

Photo by Lautaro Andreani on Unsplash

Introduction:

Are you new to React and looking for some fun and educational projects to help you learn the library? Look no further! In this post, we’ll explore 5 beginner-friendly React projects that will not only help you understand the fundamentals of the library, but also provide you with a sense of accomplishment as you work through each project. Below are the list of the 5 projects.

A Calculator app :

This project can teach you how to build a simple mathematical calculator using React components. To build a calculator app, you will need to create components to represent the different buttons and displays of the calculator, and use React’s state management tools to store and update the values being calculated.

Things you will learn:

How to build a graphical user interface (GUI) with React components.
How to use React’s state management tools to store and update values.
How to handle events and update state based on user input.

A to-do list app:

A to-do list app is a simple project that can teach you the basics of building a React app. To build a to-do list app, you will need to create components to represent each item on the list, and manage the state of the list using React’s built-in state management tools. You will also need to handle user input, such as adding and deleting items from the list. You need to store the items in localStorage and retrieve it back when the user refreshes the page.

Things you will learn:

How to create and manage components in a React app.
How to handle user input and update state based on user actions.
How to use local storage to save data in a React app.

A weather app:

A weather app is a project that can teach you how to use an API to fetch data and display it in your React app. To build a weather app, you will need to find a weather API that provides the data you need, such as current weather conditions and forecast data. You will then need to use React’s built-in tools to make an HTTP request to the API and retrieve the data. You can make use of the React’s inbuilt fetch API to make HTTP requests or you can use an external library like axios.

Things you will learn:

How to use an API to fetch data in a React app.
How to make HTTP requests using React’s built-in tools.
How to handle asynchronous data and display it in your app.

A Portfolio Website:

A portfolio website is a project that can teach you how to build a basic online portfolio using React components. To build a portfolio website, you will need to use React’s state management tools to store and update the state of the website, and use events to handle user input and update the website accordingly. You will also need to use React’s built-in tools to create and style your own components.

Things you will learn:

How to create and style your own components using React’s built-in tools.
How to use state and events to handle user input and update the state of the website.
How to build a simple portfolio website with React.

A Simple Game

A simple game is a project that can teach you how to build a game using React components. To build a game, you will need to use React’s state management tools to store and update the game state, and use events to control the game logic. You will also need to use React’s built-in tools to handle user input and update the game state accordingly. You can build any game of your choice like Tic-Tac-Toe, Snake, Tetris etc.,

Things you will learn:

How to build a simple game with React.
How to use state and events to control the game logic.
How to handle user input and update the game state accordingly.

Conclusion:

React is a powerful tool for building interactive, user-friendly applications. Whether you are a beginner or an experienced developer, all the above said projects are excellent choices to learn and practice your skills with React. Each project provides an opportunity to learn different aspects of the library and build a useful, functional application.

Why I prefer Vite over Create-React-App for React Projects

Nirmal Kumar — Sat, 03 Sep 2022 07:39:11 +0000

Introduction

Vite and Create-React-App (CRA) are build tools for frontend applications that provide a faster developer experience. They provide many features out of the box that significantly reduces the development and shipping time of the applications. They provide a local development server to develop the apps locally and also provide the feature to take an optimized production build for shipping the project.

Main Differences

CRA is used only for Scaffolding React Applications.
Vite can be used for Scaffolding vanilla JS, Vue, React, etc., Applications.

Working with CRA and Vite for React

Let's get our hands dirty and test it ourselves. All the commands will be run from the vs code bash terminal.

Clear NPM Cache

First up, before going into the comparison, let's clear the npm cache by executing the below commands.

$ npm cache clean --force

We are clearing the npm cache to start from scratch. Or else, the packages stored in the cache might be used while scaffolding the app, which will reduce the timings.

Create-React-App

Scaffolding the App:

Now let's try CRA. Open up the terminal and run the following command to install the CRA package globally.

$ npm i -g create-react-app

Now run the below command to create the react app.

$ time npx create-react-app cra-demo

time command in Linux will display the time elapsed details of the command that follows. This command will work in vs code bash terminal as well.

Once the command execution is over, we will see the time taken at the end.

So, for creating an app using CRA, the elapsed time is 1 minute and 50 seconds (110s).

Production Build:
Without making any changes to the app, let's run the build command to check the production bundle size.

$ npm run build

The production build will be available in the build directory. Let's check the size of the build folder using the below command.

$ du -sh build

The production bundle size is 586K.
Now let’s move on to Vite.

Using Vite:

Scaffolding the App:

Before running vite, let's clean the npm cache once again with the command that we used above.

Now, let’s create a react app using the below command

$ time npm create vite@latest vite-demo -- --template react

Great! It just scaffolded an app in 4.5s. But wait! That’s not over yet. Vite will just scaffold the app without installing any dependencies. We need to run one more command to install the dependencies.

$ cd vite-demo
$ time npm install

Let’s time the installation duration and see.

That’s Great again! It just took 15 seconds to install the dependencies. In total VIte roughly took 20 seconds to scaffold a react app. Time has reduced significantly.

Production Build:

Without making any changes to the app, let's run the build command to check the production bundle size.

$ npm run build

The production build will be available in the dist directory. Now check the size of the build folder using the below command.

$ du -sh dist

The production bundle size is just 165K which is less than one-third of the production build created by React.
The lesser the bundle size, the faster rendering of the app by the browsers.

Summary

Let’s summarize our findings in a table for better understanding.

Create React App (CRA)	Vite
It can be used only for scaffolding the react apps	It can be used for scaffolding vanilla js, vue, react, etc.,
It supports Typescript	It supports Typescript
Time taken to create a project is `110s`	Time taken to create a project is `20s`
Production build will be available in the `build` folder by default	Production build will be available in the `dist` folder by default
Production bundle size is `586K`	Production bundle size is `165K`

Conclusion

As we can see from the table above, Vite is the clear winner here. Hence, I prefer Vite over CRA. Comment down your opinions below

DEV Community: Nirmal Kumar

A Guide to Debouncing in JavaScript and React | Create a Custom Hook

Introduction

What is Debouncing?

Why Debouncing?

Debouncing in JavaScript

Implementing Debouncing in React

The Custom Debounce Hook

Conclusion

Create a Telegram Bot with Node.js

Introduction

Prerequisites:

Creating the Telegram Bot:

Setting up the Bot in Node JS:

Coding the Bot:

Creating the Bot Command:

Creating the Bot Response:

Conclusion:

Don’t use State for React Forms. Use this instead!

Introduction

Problem with using States

Using FormData to handle forms

Advantages of using FormData

Conclusion

Designing the Hashnode Logo with HTML and CSS

Prerequisites

Analysing the Logo

HTML Code

Styling with CSS:

Conclusion

Top 5 Software Development Trends in 2023

Introduction:

Artificial intelligence and machine learning:

Cloud computing:

Containers and microservices:

DevOps:

Low-code and no-code platforms:

Conclusion:

5 Lesser Known HTML Tags

Introduction:

The <abbr> Tag:

The <kdb> Tag:

The <dl> Tag:

The <meter> Tag:

The <dfn> Tag:

Conclusion:

5 Fun and Educational React Project ideas for Beginners

Introduction:

A Calculator app :

A to-do list app:

A weather app:

A Portfolio Website:

A Simple Game

Conclusion:

Why I prefer Vite over Create-React-App for React Projects

Introduction

Main Differences

Working with CRA and Vite for React

Clear NPM Cache

Create-React-App

Using Vite:

Summary

Conclusion

The `<abbr>` Tag:

The `<kdb>` Tag:

The `<dl>` Tag:

The `<meter>` Tag:

The `<dfn>` Tag: