Building a website can feel overwhelming at first – especially when you're staring at a blank HTML file, wondering how it ever turns into a real website on the internet. If you're new to web development, you've probably asked yourself: "Where do I even start?"

Well, this tutorial is here to guide you through that journey. We'll build a simple website from scratch and walk through every step — all the way to deploying it on the internet.

Let’s dive in!

Table of Contents

1. Starting with the Website Idea

2. How to Set Up the Project

3. How to build the website

4. How to test the code

5. How to Push your code to Version Control

6. Deployment and Hosting

Starting with the Website Idea

We are going to a build a simple weather app that shows you today’s weather in your city. It will have the following features:

• Search by city name: User enters city name and fetches weather information

• Display the following weather information: temperature, weather condition and wind speed

• Error handling

This is a simple website with pretty basic features, and should be relatively easy to build.

Before we start, let’s go over some prerequisites. I assume you are already familiar with the basics of HTML, CSS and JavaScript. Knowing Git would be helpful, but it’s not necessary – you can still follow along with the steps in this article.

How to Set Up the Project

Let’s begin by setting up the project. To keep things simple, we’ll just use HTML, CSS, and JavaScript to build the website. So, let’s create the following files:

weather-app/
│── index.html
│── style.css
│── script.js

Next, to get the weather data, we’ll use an open-source weather API form Open-Meteo, since it’s free and doesn’t need an API key. It will provide us with the temperature, wind speed, and weather conditions.

Before we really dive in, make sure that you have Git installed in your system. If you don’t have Git, you can refer to Git SCM for an installation guide on Mac and Windows. If you are not familiar with Git, then check out the following guides to get started:

• Learn the Basics of Git in Under 10 Minutes

• Full book on Git and GitHub + version control basics

• Getting Started with GitHub

Now you can create and initialise your Git repository. To initialise a local repository, run the following command inside your project directory:

git init

Next, go to GitHub and create a new repository with the same name as your project. Refer to the Quickstart guide if you are not familiar with the process. Run the commands shown on the screen once you have created the repository.

Once you’re done with these steps, we are ready to get started on the development process.

How to Build the Website

In this phase, we’ll develop or code our website. By looking at the designs and requirements, we’ll decide how to approach the development of each component.

This is a simple, small website with few requirements. So we won’t be using any frameworks, just simple HTML,CSS and JavaScript. But, depending on how complex the requirements are, you may decide to use frameworks like React, Angular, and so on.

First, let’s create a basic layout of the webpage with HTML:

 <div class="container">
      <h1>Weather App</h1>
      <div class="searchContainer">
        <input
          class="inputField"
          id="cityField"
          placeholder="Enter city name..."
          type="text"
        />
        <button id="searchBtn">Search</button>
      </div>
      <div id="weatherContainer">
        <h2 id="cityName"></h2>
        <p id="temperature"></p>
        <p id="condition"></p>
        <p id="windSpeed"></p>
      </div>
      <p id="errorMessage"></p>
    </div>
    <script src="script.js"></script>

We have added the following:

• A search container that will contain our search field with an input to enter city name, and a Search button

• Another container that will display the weather information or error message once the user clicks on Search

Next, let’s style it with CSS:

.container {
  max-width: 400px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: auto;
}

.searchContainer {
  margin: 20px 0;
}

.inputField {
  padding: 10px;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.searchBtn {
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

#weatherContainer {
  display: none; /* Hide until data is available to display */
}

#errorMessage {
  color: red;
  font-weight: bold;
}

With HTML and CSS, we have built a static website that looks like this:

Now, let’s add some functionality to it with JavaScript. We’ll be calling the following endpoints:

• /v1/search for getting longitude and latitude by city name

• v1/forecast for getting weather info

First, let’s add an onclick handler to our button:

document.getElementById("searchBtn").addEventListener("click", () => {
  const city = document.getElementById("cityField").value.trim();
  if (city) {
    getCoordinates(city);
  } else {
    showError("Please enter a city name");
  }
});

Clicking on the search button should call the above two APIs, one after the other. Let’s call the first API in the getCoordinates method:

async function getCoordinates(city) {
  showError("");
  try {
    const response = await fetch(
      `https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1`
    );

    if (!response.ok) {
      throw new Error("City not found");
    }

    const data = await response.json();
    if (!data.results || data.results.length === 0) {
      throw new Error("Location not found");
    }

    const { latitude, longitude, name, country } = data.results[0];
    getWeather(latitude, longitude, name, country);
  } catch (error) {
    showError(error.message);
  }
}

Here, we call the first API to fetch coordinates, and check if the response is positive. If it isn’t we throw an error and show it in the DOM. If the coordinates are fetched successfully, we move forward and get the weather data for those coordinates:

async function getWeather(latitude, longitude, city, country) {
  try {
    const response = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`
    );

    if (!response.ok) {
      throw new Error("Weather data not available");
    }

    const data = await response.json();
    displayWeather(data.current_weather, city, country);
  } catch (error) {
    showError(error.message);
  }
}

Here, again we do the same thing, handle any errors and render the weather data on the screen, inside the displayWeather method:

function displayWeather(weather, city, country) {
  const weatherContainer = document.getElementById("weatherContainer");
  const cityHeader = document.getElementById("cityName");
  const temp = document.getElementById("temperature");
  const condition = document.getElementById("condition");
  const windSpeed = document.getElementById("windSpeed");

  const weatherCondition =
    weatherDescriptions[weather.weathercode] || "Unknown Condition";

  weatherContainer.style.display = "block";
  cityHeader.textContent = `${city}, ${country}`;
  temp.textContent = `Temperature: ${weather.temperature}°C`;
  condition.textContent = `Condition: ${weatherCondition}`;
  windSpeed.textContent = `Wind Speed: ${weather.windspeed} km/h`;
}

Next, the showError method contains our error handling logic. It will display any error on the screen.

function showError(message) {
  const weatherContainer = document.getElementById("weatherContainer");
  weatherContainer.style.display = "none";
  const errorPara = document.getElementById("errorMessage");
  errorPara.textContent = message;
}

Alright, we’re done with the development part! Now it’s time to test our code.

How to Test the Code

Whenever you develop a feature, you’ll want to make sure to test it thoroughly. One way to test is by considering all the ways a user might interact with your website. Then, check how your website behaves in each scenario or test case.

First, let's see if the website works as expected when given a valid city name. Enter a city name and click on search – it should display the weather information like this:

Next, let’s test our error handling, by adding gibberish in the input:

With this input, our API fails, and returns the above error, which is being displayed correctly.

Remember that our website is really simple, so we don’t have a lot of test cases. But in a real world website, a good practice is to make a list of test cases, and test your website against each of them.

In this context, we are doing functional testing to ensure that the website behaves as expected in different scenarios. This includes testing the core functionalities like searching for a city and handling errors. This type of testing is crucial because it verifies that the application performs its intended functions correctly.

In addition to this, you can perform other types of testing on a website:

• Unit Testing: Testing individual components or pieces of code in isolation

• Integration Testing: Testing interactions between different components of the website

• End to End Testing: Testing the entire application flow from start to finish

Once you are sure that the website is working as expected, it’s time to push your code to a remote repository like GitHub and release it into production – that is, on the internet.

How to Push Your Code to Version Control

Before moving forward, you might be wondering why version control is important. Version control helps you keep track of changes in your code in an organized way. Here are the benefits:

• If something breaks in your code, you can revert back to a previous version if necessary.

• Your project is safely stored on GitHub, so you won’t lose progress.

• With branches, you can work on different features at the same time, without them interfering with each other, or the main code. This is helpful especially when there are multiple people working on the project.

• Deployment and Hosting platforms like Netlify integrate seamlessly with version control systems like GitHub.

Let’s push our code to Github now. Make sure you have run all the commands that are displayed when you create the repository for the first time.

Run the following commands:

git add .
git commit -m "Added weather information with API calls"
git push origin main

The first command adds your changes to the staging area. The second one commits your changes locally, while the last one pushes them to the remote repository.

Here, we have pushed the code directly to master. But usually, you will work on a feature in a separate branch and raise a pull request (or merge request), after which your code can be merged into master/main branch.

Now that your code is pushed to GitHub, we’ll move forward to deployment and hosting. you can find the git repo of my code here.

Deployment and Hosting

Before jumping into these steps, let's first understand what deployment and hosting mean. Simply put, deployment is about taking your website and putting it on the Internet, while hosting services store your website to ensure it is accessible to people online.

We'll use Netlify, a beginner-friendly platform that lets you deploy websites directly from your GitHub repository. It's perfect for deploying simple websites built with HTML, CSS, and JavaScript. You also get a free URL with your website (or you can pay for a domain name).

To get started, first visit netlify.com, and sign up with your email or GitHub account. Once logged in, you’ll see a landing page. Click on "Add new site” → “Import an existing project”.

Then, connect your GitHub account by authorising Netlify to access your GitHub repositories. It will show a list of all your GitHub repositories. Search for your repository test-weather-app, or whatever you named it and select it.

Then, you’ll be greeted with the following page to enter configurations. Since our project does not use any frameworks, we do not need to specify any build commands. So, we leave most of the fields empty and click one “Deploy”.

Netlify will deploy your site in a few minutes and will provide you with the link. You can find this example website by visiting the following link:

https://testweatherapp11.netlify.app

Netlify will also give you an option to purchase a custom domain. So, if you aim to build an actual website to profit from, then you can use that option.

If you want to make any changes, Netlify will deploy those automatically when you push them to GitHub.

Wrapping Up

And just like that, your website is live on the internet. That’s all it took. You just wrote some code on your local machine, built a simple web page from scratch, and now it’s live on the internet for other people to use. How great is that!

Now that you have learned how to build a website from scratch and deploy it to the internet, here are few additional things you should remember:

• Website development is not finished just yet. As you keeping building stuff, your website will grow. You’ll explore different designs, fix bugs, and improve features as per feedback.

• As your website grows, you’ll also need to think about website’s performance, with increased usage, and security, to protect yourself and your users from attackers.

• I have described a highly simplified process. Usually there’s requirement gathering, creating a website design, and estimations before you even start the development.

• You’ll also collaborate with other people such as designers, backend engineers, product managers and stakeholders.

• Often, a website is developed in increments, that is a basic version of the website with basic features will be released at first, like we did. Then, for each feature, the whole process starting from the design, through the development and testing to deployment is followed.

• To make your website usable for everyone, including people who have various disabilities, you’ll want to follow web accessibility best practices. There are a number of practices that you should follow during the development phase. I have described them in detail in my web accessibility handbook here.

Conclusion

The journey of building a website from scratch and releasing it to the internet is rewarding in many ways. Through this process, you gain valuable web development skills, plus you’ll get better at using version control to keep track of your work. And sharing what you’ve built with the community is so satisfying.

In this tutorial, I have explained a very simplified process, but remember that real-world projects often involve more complexity, including collaboration, performance optimisation, and security considerations.

As you continue to develop your skills, you'll face new challenges and have great opportunities to enhance your website's functionality and user experience. Embrace the learning process, and enjoy the satisfaction of seeing your creation come to life on the internet. Happy coding!

If you have any questions or need further clarification, please don't hesitate to reach out. Your feedback is always valued and appreciated! Connect with me on Twitter for more updates and discussions. Thank you for reading, and I look forward to seeing you next time!

But not everyone experiences the web in the same way. Websites are difficult to use for people who have visual, hearing, or mobility impairments. These barriers make it harder to navigate content, and in some cases, make the web completely inaccessible.

This handbook will help you understand accessibility and how to implement it. Whether you are a beginner or an intermediate developer, you'll learn basic accessibility practices and some advanced techniques. This will help you make your website more inclusive.

Let’s get started.

Table of Contents

• What is Accessibility?

• Basic Accessibility Practices

  • Semantic and Non-Semantic HTML

  • Text Content

  • Page Layouts

  • Interactive Elements

  • Keyboard Accessibility

  • Form Labels

  • Links

  • Table Accessibility

• Additional CSS and JavaScript Practices

  • Styling Form Elements

  • Color Contrast

  • JavaScript Practices

• Advanced Accessibility Practices: WAI-ARIA

  • The role attribute

  • aria-* attribute

  • Dynamic Content Attributes

  • Form Validation and Errors

  • Using non-semantic elements as buttons

• Multimedia Accessibility

• Mobile Accessibility

What is Accessibility?

Accessibility (A11y) is an important practice in web development that aims to make the website usable (accessible) for all people. This includes people who have disabilities that make it difficult for them to use websites. By making a website accessible to everyone, including people with disabilities, we ensure that they have the same opportunities as we do. We’re also helping to make the web a more inclusive place overall.

What kind of disabilities should we consider? In broad terms:

• Visual impairments: blindness, blurred vision, and colour blindness

• Hearing impairments: low to no hearing

• Mobility Impairments: difficulty with physical movement(s)

• Cognitive Impairments: like Dyslexia and ADHD

People with visual impairments commonly use devices like screen readers to visualise and understand a website’s content, for example. So a big part of web accessibility is designing a website that can be easily accessed by a screen reader.

There are various practices that you, as a developer, can follow to make a website accessible, which I’ll cover in this handbook.

Basic Accessibility Practices

Accessibility is not just an added feature on top of a website you’ve already developed. It is a practice that needs to be followed throughout the development process. Whenever you are creating content on the web page, ask yourself if it is really accessible.

Another important point is that accessibility is not just for people with impairments. It benefits everybody by making a website easier to use, thus improving overall user experience.

How do you achieve good accessibility? Well, there are some practices that you should follow while writing HTML, CSS, and JavaScript code. We’ll discuss some basic practices in this section.

Before we get into it, let’s start by understanding what semantic and non-semantic HTML tags are:

Semantic and Non-semantic HTML

Non-semantic HTML tags do not convey specific meaning or purpose. They can be used for anything, depending on the CSS styling and JavaScript functionality. Examples of non-semantic tags are: <div> and <span>. These tags are mostly used as containers for wrapping other elements.

Semantic HTML tags clearly describe their purpose to the browser and the developers through their names. They improve code readability and also help with SEO (Search Engine Optimisation). Examples of semantic tags include: <button>, <a>, <header>, <footer>.

You can find a list of all semantic elements here.

Importance of using semantic HTML

An essential part of accessibility is using the correct HTML element for its intended purpose. This means, for example, using a <button> tag when you want to render a button.

But why use semantic elements? After all, you can use CSS to make a <div> look like a button. True, but using semantic elements is important for the following reasons:

• Semantic elements have built-in styles and functionality that you otherwise would need to add through CSS and JavaScript. This makes them easier to use.

• They make the code easier to read and maintain, as you can actually see the elements being used rather than seeing a bunch of divs everywhere.

• Screen readers can easily read and interpret semantic elements, helping people with visual impairments.

In the following sections, we’ll understand basic accessibility practices for each type of content you render on HTML. We'll explore how to use the correct HTML tags for each situation, helping you see how choosing the right tag for its purpose improves accessibility.

Feel free to test each example with a screen reader. On Mac, use ⌘+F5 to activate VoiceOver, Mac’s built-in screen reader. For Windows, you can use the built-in screen reader called Narrator by pressing Ctrl + Windows Key + Enter.

Text Content

When writing text content, it’s important to use the correct elements for headings, paragraphs, and lists. Let’s understand with the following examples.

Let’s say you write headings and paragraphs in the following way:

<span id="heading1">Heading 1</span>
<br />
<br />
<span id="heading2">Heading 2</span>
<br />
<br />
This is one paragraph
<br />
<br />
This is another paragraph

This approach has the following problems:

• The screen reader won’t be able to distinguish between headings and paragraphs – it would just read out the contents in one go, thus confusing people who depend on screen readers.

• It’s difficult to style individual paragraphs, since there are no selectors. Even if you add a <span> to each one, it requires extra CSS styling.

• It also contains unnecessary line breaks which can be avoided by using the right elements.

The above code is an example of bad semantics. This is what you should do instead:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is one paragraph</p>
<p>This is another paragraph</p>

Here, we have used the right semantic elements for the text content, which has the following benefits:

• A screen reader is able to distinguish the headings from the paragraph text by reading out the heading level before reading the text.

• h1, h2, and p come with built-in styles and they each render on a new line. This eliminates the need to use line breaks.

• The code looks cleaner and is much more readable.

Lists

To render a list of items, we have the following approaches. The non-semantic approach just groups a bunch of divs together and applies CSS styles to them.

<h2>TODO List</h2>
<div id="mylist">
  <div>Make Breakfast</div>
  <div>Do Laundry</div>
  <div>Complete blog post</div>
</div>

Again, this achieves the desired output but it’s difficult for screen readers to identify this content as a list of items. Instead, use semantic elements:

<h2>TODO List</h2>
<ul id="mylist">
  <li>Make Breakfast</li>
  <li>Do Laundry</li>
  <li>Complete blog post</li>
</ul>

This helps screen readers identify the element as an unordered list and read out each item. <ul> also comes with default styles and bullet points for each list item. You can also use <ol/> for numbered lists, where the screen reader reads out the number on each list item.

You can test the above examples with Mac’s VoiceOver to see the difference.

Emphasized Text

Emphasized text refers to highlighted text that gives importance to certain words or phrases within a piece of content. When adding emphasized text, it’s important to use the right semantic elements like <strong> and <em>.

<p>For best results, use <em>fresh ingredients</em> when cooking.</p>

<p>The process of water turning into gas is called <strong>evaporation</strong>.</p>

These elements add some built-in styles to the text like bold and italic. Also, if you test with VoiceOver, you’ll notice that it puts some emphasis on the text inside these elements. This helps people using screen readers identify emphasised text.

You may also add some colour to the emphasized text. But, there’s no need to add a lot of styles, else it may cause confusion. Visit MDN Docs-Emphasis and Importance to learn more about text emphasis in HTML.

Abbreviations

Next, when writing abbreviations (or acronyms), it’s a good practice to make them visually different and also include the full expansion of the acronym. You can also add some simple styling to the abbreviation. Learn more about abbreviations in MDN Docs-Abbreviations.

Other best practices

Apart from the above, there are a few other practices that are good to follow:

• Use clear language, wherever possible. For example, expand abbreviations: instead of Jan, write January.

• When writing ranges, avoid using dashes if possible, write 1 to 5 instead of 1-5.

• Avoid using characters that may confuse users when a screen reader reads them out, for example ~ or *.

• Avoid excessive exclamations and emojis.

Also, when writing CSS for text content, remember these practices:

• When using styles like font sizes, line height, and letter spacing, ensure that the text is comfortable to read.

• Your headings should stand out from the other text, in case you are using CSS styles. Usually, this is achieved by just using the right heading tags.

• Text color should have 4.5:1 contrast with the background. See the Color Contrast section for details.

If you want more tips on styling text, visit MDN Docs - CSS Text Styling.

Page Layouts

Page layout is concerned with how the content is laid out on the screen. When you start designing a web page, your first thought is how your content should be positioned on the screen.

Typically, a web page consists of a header, nav bar, footer, main content, and sidebar. In the bad old days (phrase borrowed from the docs, sorry), developers used tables to create page layouts consisting of these elements.

But tables made the layouts incredibly complex and hard to maintain. Table layouts are also difficult for screen readers to read, affecting accessibility.

Nowadays, there are much better ways to write page layouts. If you are including a header, nav bar, and footer along with the main content, you can use the following semantic elements:

<header>
  <h1>Header</h1>
  <nav>
    <!-- main navigation in here -->
  </nav>
</header>

<!-- Here is our page's main content -->
<main>
  <!-- Main content here -->
</main>

<footer>
  <!-- footer content in here -->
</footer>

Let’s understand each tag used above (skip if you already know):

• <header>: Represents the introductory section of a webpage, typically containing headings, logos, or navigation links.

• <nav>: Defines a navigation section that contains links to other parts of the website or page, providing easy access to important sections.

• <main>: Represents the main content area that focusses on the primary purpose of the page or the website, excluding common elements like header, footer, or sidebar (may include sidebar depending on the website).

• <footer>: Represents the bottom section of the web page, typically containing metadata, copyright information, or links to related resources.

These elements are called sectioning elements. Following are advantages of using these elements:

• The layout is clear with each element clearly describing its purpose, making the code readable and maintainable.

• Using the right semantic elements makes screen readers identify each part of the layout, thus helping visually impaired users understand how the website is structured.

Of course, you can write the above layouts by using divs, but sectioning elements provide good semantics and help users understand the type of content they are navigating.

Interactive Elements

These consist of elements through which a user interacts with the web page. These elements include buttons, form fields, links, and so on.

Keyboard Accessibility

Each interactive element on a web page should be navigable through the keyboard. This gives a user flexibility while navigating your website. Keyboard accessibility is really helpful for people with mobility impairments that may struggle to use a mouse.

For instance, visit this page and try to navigate to each interactive element by pressing Tab on your keyboard. You can also press Enter/Spacebar to click on a button or a link. This should give you an idea of what a keyboard-accessible website looks like.

For the most part, using the right semantic elements should ensure keyboard accessibility, as they come with built-in functionality. Check out the following example:

<p>
  Visit my blog at 
  <a href="https://www.freecodecamp.org/news/author/KunalN25/">freecodecamp.org</a>
</p>

<button>Click me</button>
<button>Click me again</button>

<div>
  <input type="text" placeholder="Enter your name" />
</div>

Here, we have used the correct semantic elements for the hyperlink, button, and input element. All these elements can be accessed through Tab and interacted with using Enter/Spacebar. Check out other form-related elements in this list.

Some people use a div or span and make them look like an anchor tag or a button with CSS styling. But this is bad for accessibility for two reasons:

• div and span are not tab-able by default. So, even if you do make a div look like a button, the user cannot navigate to it using the keyboard.

• Screen readers won’t be able to identify them as buttons, while in the case of semantic elements, they read these elements out as buttons or links.

But if you absolutely have to use a div to create a clickable element, include the following attributes:

<div id="customButton" role="button" tabindex="0">Click me</div>

Here, we have added two attributes, tabindex and role. We’ll understand the role attribute in a later section.

The tabindex attribute takes an integer that specifies the tab order of tab-able elements, instead of the default top to bottom tab order. A positive integer means the element is focussed in an order specified by the attribute’s value.

But using tabindex to change the default tab order is not recommended, as it may cause confusion for keyboard navigators and affect accessibility. And frankly, it’s not necessary.

You should only ever use the following two values:

• tabindex=”0” makes an element tab-able which means it can be accessed through a keyboard in the natural tab order.

• tabindex=”-1” means the element is not reachable via keyboard navigation.

These attributes make the div behave like a button, but there’s a small piece of JS code you still need to add to make the button clickable via Enter/Return:

document.getElementById("customButton").addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    document.activeElement.click();
  }
});

Here, we have added an event listener to the element that listens for the keydown event. If the key pressed is Enter, then it calls the element’s onclick method.

If you are using a non-semantic element as a button, you need to add this extra code to make it work like a button. So, only use it if it's absolutely necessary. Otherwise, it's always better to use the correct semantic element in the first place.

Keyboard Accessibility is important for audio and video controls too. We’ll discuss this in the Multimedia Accessibility section.

Form Labels

A form label is some text that describes what you need to enter in a form field. Adding labels to form fields is a necessary practice since it lets the user know how to fill the form. But using the right semantic elements is important.

You could do the following and still achieve the desired output:

Enter name: <input type="text" id="name" name="name" />

This is not good for screen reader users, as it does not read out what the input field is for. Even if it reads out “Enter name”, the user may not associate it with the input field. Instead, use the <label> element for form labels.

<div>
      <label for="name">Enter name:</label>
      <input type="text" id="nameField" name="name" />
    </div>

The for attribute associates the label with the input field. With this, when the screen reader’s focus is on the input field, it reads out the label, followed by “edit field” to let the user know they should enter their name in the input field.

Check out the form with the label and form without the label in these examples for more clarity. Use Mac’s Voiceover (⌘+F5) or Windows’ Narrator (Ctrl+Windows+Enter) to see how it reads out the form elements.

Using <label> offers more advantages:

• By linking a <label> to an input field with the for attribute (clickable association), clicking on the label focuses on the input field.

• Clickable association with input field helps the user’s select small inputs like checkboxes or radio buttons.

• It follows semantic HTML and specifies that the text is being used as a form label.

Lastly, remember that the label text should clearly describe what the user should enter into the field. For examples, “Enter name” or “Enter email”.

This applies to buttons as well. Ensure that button text is descriptive enough to tell the user what they are clicking on. Vague texts like “Click me!” or “Click here!” are not helpful. Examples of descriptive text are “Submit Form” or “Download Report” that give the users a clear idea of the button’s action.

Along with these, links also come under interactive elements. But since there are a lot of examples for Links, I’ll discuss them in their own section now.

Links

Links are a key part of web pages as they allow the user to navigate the website. Links serve different purposes: going to a different page in the same website, going to an external website, or downloading something. In this section, you’ll learn about several practices with links that contribute towards accessibility.

Linking to External Websites

When you add a link that lets users open an external website, including the target=_blank attribute opens the link in a new tab.

<a href="https://www.wikipedia.org/" target="_blank"> Wikipedia </a>

This is helpful for users as they don’t need to exit the website, saving them from the hassle of navigating back to the website.

Also, if your link opens in a new tab, it’s a good idea to mention it so the screen readers can read it out and help visually impaired users.

<a href="https://www.wikipedia.org/" target="_blank" >
Wikipedia (opens in new tab)
</a>

Similarly, if your link opens a non-HTML file, like a pdf or docx, you should mention it:

<a target="_blank" href="jan-salary-slip.pdf">
Salary-January (PDF)
</a>

Alternatively, you can use an icon to indicate a link opening in new tab.

<a href="https://www.wikipedia.org/" target="_blank">
  Wikipedia
  <img src="new-tab-icon.png" alt="Opens in new tab" style="width:16px; height:16px; margin-left:5px;">
</a>

When using an icon, make sure that you include the alt attribute with description about the image. We’ll understand its purpose in the Multimedia Accessibility section.

Skip Links

A skip link is a link element placed at the top of a page that links directly to the main content of the page. This allows the users to skip the headers and all the navigation menus, and directly jump to the main content of the page. This is helpful on websites where there’s lot of repetitive content on top like menus or banners.

Skip links are especially helpful for people who are visually impaired and who might be using screen readers. These links provide a way to bypass repetitive navigation menus and directly access the main content. This also helps keyboard navigators, thus saving time and enhancing the user experience.

To add a skip link, add an anchor tag at the very top, just under the body tag, and link it to the main content.

<body>
 <a href="#main">Skip to main content</a>
    <header>
      <h1>Page Title</h1>
      <nav>
        <ul id="nav-links">
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/blog">Blog</a></li>
          <!-- other nav links -->
        </ul>
      </nav>
    </header>
    <main id="main">
      <!-- Main Content -->
    </main>
</body>

The skip link is keyboard accessible and is also read out by the screen reader. Clicking on it takes you straight to the main content. Visit WebAIM and press Tab on your keyboard to see skip links in action.

Link Styling

By default, links created with the anchor tag are visually different from non-link text. This is because the anchor tag has built-in styles like colour, text-decoration, focus-ring (displays when you tab on to the link with the keyboard) and hover effects.

Links should look different from the other text so they’re easily distinguishable. As you saw above, the browser does that for you, so you don’t need to do much. But if you are adding custom styles to the link that fit in better with your theme, you need to follow some best practices:

• Links should have different colors for default, visited, focus and hover states.

• Link text color should be different from the non-link text and should have different styling.

• Link text color should have a contrast of 3:1 between other text and 4.5:1 contrast between background color. See the Color Contrast section for more understanding

An example of custom styling for links is shown below (from the Docs):

a {
  color: #ff0000;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

With the help of pseudo-classes, this adds different styles for when link is hovered, previously visited, focussed (with the keyboard), or active (when the link is being clicked).

You can experiment with different colors and styles, but don’t remove the cursor: pointer or outline properties. Both are important for people using keyboard navigation.

Remember, links already have built-in styles for all the link states. Only add your own if you want something in line with your website’s theme.

Avoid using onclick handlers

Links are used to navigate to another web page on the same website or navigate to an external website. Specifying the link in the href attribute does this for you without any need to add JavaScript code.

But some people add an onclick attribute to anchor elements, to make them behave like buttons and set href=”#” or href="javascript:void(0)" to avoid page refresh. This causes unexpected behaviour and may lead to the following problems:

• Copying or dragging this link adds an unnecessary # or void(0) to the URL, which does not make sense.

• Clicking the link immediately scrolls the page to the top, which may lead to the user losing track of where they were.

• If JavaScript is still downloading, clicking the link does nothing and the web page becomes unresponsive.

It is also bad for semantics and accessibility, as people using screen readers may get confused. If you want to add JavaScript functionality on click of an element, just use a <button>. Only use links when navigating to a proper URL.

Meaningful Link Text

Similar to buttons, when writing link text, keep it meaningful and descriptive and avoid using “Click here” or “Click this”.

<p>
  For more information about accessibility
  <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">
    click here
  </a>
</p>

Instead of the above, do this:

<p>
  For more information about accessibility, visit
  <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">
    MDN Docs - Accessibility
  </a>
</p>

Check out the Good Links and Bad Links examples from the docs. You can also test them with VoiceOver (⌘+F5).

Link Proximity

If your web page has a lot of interactive elements like links and buttons, ensure that they are spaced properly to prevent accidental clicks. This helps people with Motor Control Issues that may click on the wrong link.

Using the margin property should be enough to ensure spacing.

Table Accessibility

In the page layouts section, we saw that using tables for creating page layouts is an outdated practice. However, tables can still be used if you want to display a large amount of data in tabular form. Incorporating accessibility in tables helps screen readers interpret them and help visually impaired users.

Check out MDN Docs - Table Accessibility to understand best practices.

Additional CSS and JS Practices

Most of your accessibility goals should be achieved with HTML alone. But there are certain things to keep in mind when writing CSS and JavaScript to ensure you don't break accessibility.

Styling Form Elements

When styling form elements, remember the following:

• Do not remove the default styles for focus outlines, hover, and disabled state in form elements. You may modify them as per your site design, but they should still be visible.

• Ensure that your labels and placeholder texts are visually clear. Follow colour contrast practices (next section).

• For clickable areas like buttons and inputs, ensure they are large enough so the user can click comfortably.

• Success and Error messages should be physically distinguishable from labels and other text content.

Color Contrast

When you choose colors for your website, your text and background colour should have a good colour contrast. A good color contrast ensures that the text is easily readable by all users (and it also helps people with color blindness in particular).

The WCAG (Web Content Accessibility Guidelines) recommends the following contrast ratios:

Let’s understand the colour contrast ratings:

• AA rating refers to the minimum ratio your colour contrast should be such that the site’s content is readable. As you can see in the table above, this requires a 4.5:1 minimum ratio for body text, a 3:1 ratio for large-scale text, and a 3:1 ratio for active user interface components and graphical objects.

• AAA rating is the ideal standard for accessibility that ensures high contrast for your website. This requires a 7:1 ratio for body text, a 4.5:1 ratio for large-scale text, and isn’t defined for UI components/graphical objects.

Choose a contrast ratio that aligns well with your design, but try to keep it to at least AA rating. To check colour contrast ratio between two colors, you can use the following tools:

• Color Contrast Checker

• Chrome Developer Tools - Identifies text in your website not meeting AA and AAA ratings

JavaScript Practices

Mouse-specific events

When you have functionality triggered by events like mouse-over and mouse-out, they cannot be accessed by people that depend on keyboard navigation. So, to make the functionality accessible by keyboard, you need to add the same event handlers to events like focus and blur.

Client side form validations

When you submit data through a form, the data is validated to check if you have entered valid data. Often, when the data is sent to the server, the server validates the data and lets the UI know if the validation has failed.

To make the website user-friendly, it helps to add form validations on the client-side, so users can get instant feedback if they have entered incorrect data, since the server-side mechanism may take time. This is a very small step towards improving user experience.

Check out the Form Validation Example to understand more.

Apart from the above, one thing you should remember is not to use JavaScript for anything and everything. JavaScript can be used to generate any form of HTML and dynamically apply CSS styling. It is very helpful if you have dynamic content on your website.

But if you have too much HTML generated by JavaScript, it gets hard for screen readers to keep track of the dynamic changes. This makes the website difficult to read for impaired users. So, make sure you don't overuse JavaScript when simple HTML would be enough.

Accessibility for dynamic content updates is covered in the next section.

Advanced Accessibility Practices: WAI-ARIA

As applications started to get bigger and more complex, developers started needing a new set of accessibility features. Semantic elements alone were not enough, especially for complex elements like date pickers and custom widgets.

Depending on semantic HTML does not help when content is updated dynamically on the web page. Nowadays, all websites built with JavaScript have content that isn’t loaded initially, but updated dynamically based on user interactions.

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) was introduced to add more accessibility features wherever they were needed. It defines a set of HTML attributes that you can use to provide additional semantics to your website and improve accessibility.

In the following sections, you’ll learn which attributes were introduced and how you can use them to enhance accessibility.

The role attribute

The role attribute helps add semantic information to non-semantic elements by defining their “role” on the web page. With roles, screen readers can accurately read non-semantic elements and help identify them for people with disabilities.

W3C defines several roles that you can use, depending on their purpose. But keep in mind that you should only use role when necessary. In most cases, it’s better to just use the right semantic elements like <button>, <nav>, <header>, and so on.

But, when semantic elements are not fulfilling your purpose, roles can help. So, let’s understand how to use them with some examples:

If you want to create a button with custom div, adding the role attribute specifies that this element is being used as a button.

<div role="button" tabindex="0">Click Me</div>

When you test this with Mac’s VoiceOver (⌘+F5), it reads out the element as a button. As discussed before, always include the tabindex attribute.

But if you want to use a div instead of a button, you still need to add JavaScript functionality, as explained in the the Keyboard Accessibility section.

Another example is if you are writing a custom link. You can use the following role, so that the screen reader interprets this as a link:

<div role="link">Visit our website</div>

Apart from interactive elements, role attribute can also be used to define elements as navigation menus, side bars, banners, etc. If you are using non-semantic elements for these purposes, always include a role, like the following:

<div role="navigation">
    <!-- Navigation menu items -->
</div>

In this case, the screen reader announces this as a navigation area.

Also, if you have an element that serves as an alert for the user, including the following role makes the screen reader announce it as soon as it shows up on the screen, even if it doesn’t have focus:

<div role="alert">
  Please respond to this alert
</div>

You can find the full list of available roles at MDN Docs: WAI-ARIA Roles.

aria-* attributes

Apart from role, ARIA (Accessible Rich Internet Applications) defines extra attributes to enhance the accessibility of web applications. These attributes give screen readers more information about elements, helping people with disabilities better understand them.

If native semantic elements or the role attribute alone are not sufficient, aria-* attributes can provide extra context. You can find a full list of these attributes in MDN Docs-ARIA.

In the following sections, we’ll see how role and aria-* attributes can improve accessibility. We won’t cover all the attributes here, but we’ll focus on the most commonly used ones.

Dynamic Content Updates

When a web page loads for the first time, its content is read out by the screen reader. But screen readers cannot capture dynamic content, that is content that gets added or removed.

For example, when a web page is showing live sport updates, it gets updated almost every minute. Screen readers will only read out the content displayed when the page is first rendered, but don’t show dynamic updates.

This is not really a problem for many users, but for people with visual impairments, screen readers may not be able to read the changes on the page. Most modern websites are dynamic in nature, so it’s important to consider accessibility of dynamic content updates.

Check out the aria-no-live example from MDN Docs. It loads a new quote every 10 seconds, which you can see clearly as a user with no visual impairment. But the screen reader only reads the initial page content and does not announce the updates. This is not good for accessibility.

To fix this, WAI-ARIA provides the aria-live attribute that makes the screen reader read out content that is updated. You can add this attribute to the element that contains the dynamic content.

It takes the following three values:

• aria-live="off": Default value that means no content is read out

• aria-live="polite" Updates only announced when the user is idle

• aria-live="assertive": Content read out as soon as it is updated.

Depending on the importance of the update, you can decide which value to use.

<div aria-live="polite">
    <!-- Dynamic Content here -->
</div>

In this case, the screen reader waits till the user is done with their current task before announcing the update.

You can add more detail here. With the above attribute, only the text that is updated is read out. But, screen reader users may get confused as to which part of the page is being read out. So, it is helpful if the entire element is read out.

<div aria-live="assertive" aria-atomic="true">
    <!-- Dynamic Content here -->
</div>

The aria-atomic attribute tells screen readers to read out the entire element as a single atomic unit. This avoids confusion for visually impaired users. Check out the aria-live example from MDN Docs with Mac’s VoiceOver (⌘+F5). It reads out the entire element when the content is updated.

Form Validation and Errors

Let’s say you have added some validation to your form through JavaScript. When the validation fails, an error message gets added on the screen. For example, a required message shows up if you have missed a field.

The implementation for error handling involves creating an element containing an error message or a list of errors that render on certain conditions, depending on the JavaScript code. Just as we discussed in the previous section, the screen reader does not read out new content updates.

So, we should make sure that the screen reader reads out the error message as soon as it shows up, to let visually impaired users know that an error has been thrown. We can use the following attributes for this purpose:

<div class="errors" role="alert" aria-relevant="all">
  <ul></ul>
</div>

The alert role does two things. It semantically identifies this element as a piece of important information. Secondly, this role turns the element into a live region which means the screen reader is notified immediately if there are any changes.

The aria-relevant attribute describes what changes need to be announced in a live region. The attribute takes a space-separated list of the following values:

• additions: Announces new content added to the live region

• removals: Content removed from the live region is read out

• text: Announces any modifications to existing content.

It also takes a value all which is a shorthand for additions removals text, meaning all three types of content are read out.

You can check the Form Validation Example from the MDN Docs.

Next, let’s see what to do if we want to mark certain fields as required. Normally, we’d add visual cues like a * and the following message at the top of the form:

<p>Fields marked with an asterisk (*) are required.</p>

This is helpful for regular users, but visually impaired users may get confused as to which fields are required. To make it easier for them, we can use the aria-required attribute.

<input type="text" name="name" id="name" aria-required="true" />

With this attribute, the screen reader mentions this field as “required” while reading it out.

When you are creating input fields, it’s important to include a label, as some screen readers do not read out placeholder text. If you don’t want to include a label field, here are the following alternatives:

You can use the aria-label attribute to add labels to input fields that do not have a label associated with them.

<input type="email" name="email" aria-label="Enter email" />

This attribute provides some text to be read out by a screen reader to describe the input field.

You can go one step further and use the aria-labelledby attribute that uses another element to act as a label for the input field. For example:

<div>
  <span id="emailLabel">Enter your email</span>
  <input type="email" name="email" aria-labelledby="emailLabel" />
</div>

The screen reader reads out the text inside the <span> element to describe the input element. This is similar to having a <label> with a for attribute. You can also use this attribute to reference other interactive elements like <button> or <a> that do not have a label field to reference them.

Keep in mind that the aria-labelledby attribute only defines an accessible name for the element – it does not provide other functionality like clicking on the label to focus on the input element. It’s better to use <label> with a for attribute.

We have already discussed form labels in the Interactive Elements section.

You’ve now seen some of the different attributes that WAI-ARIA offers and how they enhance accessibility. You can visit MDN Docs: WAI-ARIA to check out additional details I may have missed.

Before we move on, remember one thing: use WAI-ARIA only when necessary. Usually, semantic elements are able to achieve majority of your accessibility goals. Don’t over-use WAI-ARIA as they might end up complicating your code.

Multimedia Accessibility

A website’s content is not restricted to text. It also often consists of multimedia content like images, audio, and video. In a lot of cases, multimedia content is easier to understand than text content. While this is true for many users, it poses challenges for users with disabilities.

People with visual impairments cannot see images and people who are deaf or hard of hearing cannot easily interpret audio content. So, as developers, it’s our job to make this type of content accessible for everyone. Let’s understand how to make this possible:

Images

Since people with visual impairments cannot see images, they depend on a screen reader to describe the image. Just writing an img tag with src attribute does not help.

<img src="temple.jpg" />

By default, the screen reader reads out the file path or URL of the image. A file name might give some idea of the image, but still does not describe it.

So, it’s helpful to add an alt attribute to an img. The alt attribute provides an alternate text for the image, and its purpose is to describe the image.

<img
  src="temple.jpg"
  alt="The Meenakshi Temple, situated in Madurai, a South Indian City is dedicated to goddess Meenakshi, a form of Parvati"
/>

Here, instead of reading the file path, the screen reader reads out the alternate text – that is, the value of the alt attribute. The alternate text should provide a description of the image to help users understand what it’s conveying. So, instead of just saying “Temple”, the user knows which temple is being depicted in the image.

You can also add extra context to the image with the title attribute.

<img
  src="temple.jpg"
  alt="The Meenakshi Temple, situated in Madurai, a South Indian City is dedicated to goddess Meenakshi, a form of Parvati"
  title="The Meenakshi Temple"
/>

When focussed on the image, the screen reader reads out the alt text and the title.

Let’s take another example which uses an alternative to the alt attribute:

<img src="temple.jpg" aria-labelledby="temple-label" />
<p id="temple-label">
  The Meenakshi Temple, situated in Madurai, a South Indian City is dedicated to
  goddess Meenakshi, a form of Parvati
</p>

Here, instead of using the alt attribute, we have used the aria-labelledby attribute to link the paragraph element to the image. The text inside p acts as an alternate text for the image. This is helpful if you need to use the same text as an alternate text for different images.

Sometimes, we use images as icons for headers and navigation menus, just for decoration. Usually, these images are not relevant to understand the content of the page. In these cases, you add an empty alt attribute.

<h3>
  <img src="page-icon.png" alt="" />
  History of Meenakshi Temple 
</h3>

If you skip the alt attribute, the screen reader reads out the entire image URL. To avoid this, use an empty alt attribute, so the screen reader simply announces it as an image and moves on, preventing unnecessary distractions for users.

You can also use role=”presentation” to skip reading the image path or alternative text.

Audio and video

When using the <audio> and <video> elements, remember to include multiple sources – that is, provide the audio and video in different formats. For browsers that do not support the formats you have mentioned, include a fallback download link so they can access the resource.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="video.mp3">link to the video</a> instead.
  </p>
</audio>
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="video.mp4">link to the video</a> instead.
  </p>
</video>

Next, let’s understand the shortcomings of using native HTML controls for audio and video.

• They cannot be styled with CSS, so they may not align with your website’s theme.

• The play/pause buttons are not keyboard accessible.

• They don’t have functionality to forward or rewind the video.

To overcome these limitations, we’ll create our custom video player in the next steps. To start, let’s create a container for the video content:

<div class="controls">
  <button class="play-pause">Play</button>
  <button class="stop">Reset Video</button>
</div>

These will work as the play/pause and reset buttons. Then, let’s remove the controls attribute from the <video> to replace them with our custom controls.

const videoPlayer = document.querySelector("video");
videoPlayer.removeAttribute("controls");

Why do we remove it at run time? Let’s say JavaScript does not load due to some issue. In this case, the user can still use the native controls. Next, let’s add some functionality to our buttons:

const playPauseBtn = document.querySelector(".play-pause");
const resetBtn = document.querySelector(".reset");

playPauseBtn.onclick = () => {
  if (videoPlayer.paused) {
    videoPlayer.play();
    playPauseBtn.textContent = "Pause";
  } else {
    videoPlayer.pause();
    playPauseBtn.textContent = "Play";
  }
};

resetBtn.onclick = () => {
  videoPlayer.pause();
  videoPlayer.currentTime = 0;
  playPauseBtn.textContent = "Play";
};

• The video player object is of type HTMLMediaElement, that contains several methods you can use to control the video.

• For the play/pause button, we add a toggling functionality, with the play() and pause() methods.

• To reset the video, we pause it and set the current time to 0.

Now, our custom video player is keyboard accessible, and able to be styled with CSS. You can also add additional functionality like forward/rewind, a timer, and a progress bar. The steps are similar for a custom audio player.

Check out the MDN Docs for more detail about this functionality.

Audio Transcripts

People who are deaf or hard of hearing cannot easily access audio content. So to make it accessible, you need to add transcripts under any audio or video form of content.

If you run a business, you could pay a professional to do the transcripts. Check out the docs for options. To show the transcript on the UI, you could use a show/hide panel. Referring to the docs, see the audio transcript UI (source code) for an example.

If the audio is a recording of some presentation, you should attach links to any documents or presentation decks. Also, include a description for any visual content being referenced.

Video Closed Captioning and Subtitles

First, let’s understand the difference between captions and subtitles. They are implemented in a similar way and visually, they look the same – but their purposes are different.

Captions denote who’s speaking and describe other sound effects in the video. They are mostly added with people who are deaf or hard of hearing in mind. Subtitles help people who don’t understand the language being spoken in the video, by translating it to text that uses the language of their choice.

Let’s see how to add subtitles to your videos. We write subtitles in WebVTT, a format that contains text along with the range of timestamps indicating which text you want in each part of the video. Following is an example of a subtitles file:

WEBVTT

1
00:00:01.230 --> 00:00:02.606
This is the first subtitle.

2
00:00:04.739 --> 00:00:06.074
This is the second.

Save this file and name it with a .vtt extension. To link this file to your video, include it in a <track> element:

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track
    src="captions.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  />
</video>

You should include the <track> element inside the <video> element and placed after all the sources. It has the following attributes:

• kind mentions the type of file being referenced.

• srclang indicates the language the subtitles are in.

• label indicates the text that is shown while the user is selecting a language

• src is the path or URL of the subtitles file, that is the .vtt file we created previously.

This will show subtitles for the specified timestamps. This will not only help people with hearing impairments, but is also useful for people who don’t understand the language, or those who are working in a noisy environment.

For people who are visually impaired, you could also include text that describes certain visuals in parts of the video. This text would be read out by screen reader.

You can also add custom styling to subtitle menu and subtitle text. Check out MDN Docs - Adding captions and subtitles to HTML video for the implementation.

Mobile Accessibility

We have covered many key accessibility practices so far, and they should work well on mobile phones as well. But there are some additional considerations you can follow for mobile users.

First, let’s talk about mouse-specific events. We have already seen how to make mouse-specific events accessible in the JavaScript Practices section. Events like mousedown or mouseup are often used for drag and drop functionalities.

But these are not accessible for touchscreen users, so you should add the same functionality to touch-specific events like touchstart and touchend. The following example is in the context of drag and drop:

source.ontouchstart = (e) => {
  // initiate drag
};

dest.ontouchend = (e) => {
   // drop
};

Next, you have to ensure that you are following responsive design when designing your web pages. Responsive designs make sure the website looks good on both desktop and mobile phones. I have written a detailed guide on responsive design, so check it out if you are interested.

Some other mobile accessibility practices that are good to know:

• Do not disable zoom on your website. Both fully-sighted users as well as those who have visual impairments may need to zoom in to read the website’s content on smaller screens.

• When writing navigation menus, you’d normally conceal it and provide a hamburger icon to open it, as the screen is much shorter/smaller on a mobile phone. In these cases, the hamburger menu should be easily accessible. Check out the example of a good hamburger menu from the docs, in mobile view.

• When creating forms, try to minimise the amount of typing the user needs to do, as it can get annoying for mobile users. This is especially important if your website is primarily designed for mobile users. Check out the docs for examples.

Visit MDN Docs-Mobile Accessibility if you want to learn more.

Testing Accessibility with Tools

There are several tools you can use to test the accessibility of your page. Lighthouse in Chrome Developer Tools is an open source tool that analyses a web page for performance, accessibility, SEO, and more. It generates a report on how a page performs in these areas.

Let’s see how it helps in analysing the accessibility of a page:

Open Chrome Dev Tools and navigate to the Lighthouse tab. Click on “Analyse Page Load” and wait for a few seconds. It will show a report that contains info on how your web page scored on Accessibility and other metrics. It will list down any accessibility issues you may have.

Let’s take the following example:

<h1>Welcome</h1>
<img src="image.jpg" />
<button tabindex="2">Click Here</button>
<div onclick="alert('Clicked!')" class="button">Click Me</div>
<form>
  <input type="text" />
</form>

When tested with the Lighthouse audit, it yields the following results:

As you can see, it’s scored 74 on accessibility, meaning there is room for improvement. It has also shown the accessibility issues within your HTML code, as you might have guessed looking at the code:

• Image elements do not have alt attribute

• Form input does not have a label

• tabindex value is greater than 0.

Let’s correct these issues and run the test again:

This time, it has scored 100 on Accessibility since we have followed all the basic practices.

As you can see, this is a really simple HTML page, and it’s much harder to achieve a score of 100 for large websites. But, you should aim to achieve as high a score as possible. This shouldn’t be too challenging if you make accessibility a part of your development process.

The accessibility score on it’s own does not mean your website is fully accessible. You also need to test the following:

• Manual testing with a screen reader (Mac’s Voiceover or Windows’ Narrator).

• Keyboard accessibility – test whether each and every part of your website is keyboard accessible

• Simulating your website with different color contrasts for different visual impairments.

For simulating, Chrome Developer Tools provides a Rendering tool to emulate your website on different preferences, like light/dark mode, high/low color contrast, reduced motion and various visual impairments.

To access it, open Developer Tools, do ⌘+shift+P (Ctrl+Shift+P on Windows) and type “Rendering”. It will open the following window:

If you have added media queries like the following, you can select these preferences and test whether your website behaves accordingly:

@media (prefers-reduced-motion) {
    * {
        animation: none;
    }
}

So, when you select prefers-reduced-motion, you can test if all the animations have been disabled, and how your website functions.

Apart from the Developer Tools, there’s an NPM plugin called eslint-plugin-jsx-a11y that evaluates React JSX code for accessibility issues.

You can find all the code snippets on GitHub.

Conclusion

Accessibility isn’t just a feature added on top of your code – it should be a part of the development process. When you make a website accessible to everyone, it not only increases your user base, but also promotes inclusivity.

Even though the primary benefactors of accessibility are people with disabilities, it also benefits other users by making the website easier to use overall. A lot of the practices mentioned in the article, like using semantic elements, adding the right attributes, and so on are very easy to follow and go a long way towards ensuring accessibility.

If you are a beginner, you have already done a great job learning about accessibility. Start including simple accessibility practices in your projects. Over time, including these practices will become a natural habit.

I hope this handbook becomes your go-to resource for anything related to accessibility. If you think I've missed something or need clarification on any concepts, feel free to reach out to me on Twitter. For more content on web development, check out out my profile.

References

• MDN Docs-Accessibility

• Web Dev Simplified- Guide on Accessibility

In this article, I am going to show you the essentials of getting started with web development. We’ll explore key tech stacks, beginner-friendly project ideas, helpful resources, and some additional tips.

Two years ago, I wrote an article on this topic. Since the demand for web development still remains very high, I am excited to re-visit it with a more detailed guide. So, stick around until the end.

Table of Contents

1. What is a Website?

   1. Frontend vs Backend

2. Frontend Development

   1. HTML

   2. CSS

   3. JavaScript

   4. Frontend Frameworks and Libraries

   5. Responsive Design

3. Backend Development

   1. Why you should learn a programming language?

   2. Python

   3. Golang

   4. Java

   5. JavaScript

   6. How to choose a programming language?

   7. Backend Frameworks

   8. Databases

   9. APIs

4. Git and GitHub

5. Build a portfolio of projects

6. Deployment and Hosting Services

7. Additional Tips

What is a Website?

A web page is a document displayed in a web browser (like Chrome, Firefox, and so on). It consists of text, images, and other interactive elements. And a website is a collection of web pages that are connected to each other via links.

A website runs on a remote computer referred to as a web server, and is accessed via the internet. Some examples of well-known websites are Wikipedia, Amazon, and YouTube.

Note: When I mention web apps or web applications in this article, I mean the same thing as websites.

A web app has two components, the frontend and the backend. Let’s understand the difference between them.

Frontend vs Backend of a Website

The frontend is the user interface (UI) of the website, which is basically what the user sees on their screen.

The backend refers to the server where the main logic of the website is located. It also includes the database, where all the application’s data is stored.

The frontend and the backend communicate by exchanging data. Let’s take an example of a social media app like Instagram.

When you upload a post, the UI sends the post data to the backend, which processes the data and adds it to the database. Then the next time, when you load the site/app, it fetches all your posts from the backend and displays them on the screen.

In the next two sections, I will show how you can start with frontend and backend development.

Frontend Development

As I mentioned above, frontend development is mainly concerned with the UI – that is, the appearance of the website. To get started with frontend development, you’ll need to learn the following three essentials tools:

HTML

HTML (HyperText Markup Language) is used to write web pages that are displayed by the browser. It defines the structure and content of a web page, making it the backbone of every website.

The content of a web page includes elements such as headings, paragraphs, links, images, lists, and so on. HTML creates and structures all these elements through the use of HTML tags. The browser, in turn, interprets this HTML code and renders it on your screen.

freeCodeCamp’s Responsive Web Design certification in their free curriculum starts off by teaching you HTML basics. You’ll even build your own photo app. So that’s a good place to start and dig deep into HTML.

If you want additional practice, w3schools.com is a helpful resource for beginners as well. It offers clear and step-by-step tutorials for each concept. They also provide an interactive editor for you to practice using HTML tags and see the output web page (as does freeCodeCamp).

Focus on the following areas:

• Creating a simple web page

• Using HTML tags to render content

• Creating Forms

CSS

While HTML defines the structure of the web page, it is not enough as it just creates a skeletal UI of a web page. It just defines what elements are present on the page, and not how they look.

CSS (Cascading Style Sheets) is used to add visual appeal to the web page. It transforms a simple, plain web page into a properly designed user interface.

Here’s how a website looks with plain HTML:

And this is what it looks like when you add CSS:

Much better, right? It actually looks like a proper web page, as compared to the skeletal UI before. This is referred to as “styling” a web page.

CSS styling includes the following:

• Colours, fonts, and element backgrounds

• Organising content in various layouts (grid, flex box, and so on)

• Spacing, that is margins and paddings

• Transitions and Animations (Advanced stuff)

As you continue on in the freeCodeCamp curriculum, you’ll learn CSS as well – so that’s a great way to go.

You can also refer to w3schools.com for CSS Tutorials. Play around with each CSS property in their interactive editors.

Note: HTML and CSS are NOT programming languages.

JavaScript

HTML and CSS are only able to create static websites – that is, you cannot interact with any of the elements on a web page created with just HTML and CSS. The website does not update or respond to any user interactions like button clicks or dropdown selections.

JavaScript (JS) is a programming language that makes a website dynamic and interactive. It adds the following functionalities to a website:

• Handling user interactions like clicks, hovers, keyboard presses, form filling, and so on.

• Updating content dynamically on a web page

• Handling form validations and submissions

• Interacting with the backend servers

JavaScript has many more capabilities that make your website functional and engaging for end users. As you start your JS learning journey, building strong foundation of the concepts is key. Initially, focus on the following areas:

• Basic JavaScript syntax

• JS Functions

• Interacting with DOM (Document Object Model)

• Event Handling

• JS Objects and Arrays

• Asynchronous JavaScript

Refer to the following resources for JavaScript:

• freeCodeCamp for a free, in-depth, JS curriculum

• w3schools.com for basic JavaScript tutorial

• JavaScript Interview Prep Handbook for important JavaScript concepts.

There are a lot of other resources for JavaScript, but I won’t overwhelm you with too many. These two should be enough to get started.

Once you are familiar with HTML, CSS, and JavaScript, you’ll know how to create a simple web page. Keep practicing by building different web pages, such as to-do lists and forms, and try implementing CRUD (Create, Read, Update, Delete) features.

Learn Frontend Frameworks and Libraries

As your website grows, the JavaScript code becomes more and more complex and harder to maintain. This slows down the development process and makes it really challenging for developers.

To address these issues, you can use frameworks and libraries. Frameworks provide a more structured way to build web apps, encouraging modular design and reusability.

By using frameworks, you can focus on building actual features rather than handling the complexities of JavaScript code, which helps you speed up the development process. So I suggest picking up one JS framework/library to develop bigger projects.

React.js – a good option

React JS is a JavaScript library that makes it easy to create dynamic and interactive web pages. It divides your code into components, making it easy to read and maintain. This reduces code complexity and allows reusability.

React is my personal suggestion since it has a gentler learning curve compared to other frameworks. It is in very high demand among frontend roles, as many web apps are built in React.

To start learning React, your best resource is the React Docs. They are very detailed, and include interactive code editors to play around with.

The freeCodeCamp YouTube channel also has some helpful React courses, like this one from Bob Ziroll, and the Frontend Development Libraries certification has a React section as well.

Apart from React, there are other JavaScript frameworks like Angular, Vue, and the jQuery library. These remain popular as well, and depending on which tools are in demand in your area, you can focus on the one that will meet your needs the best.

Note: Make sure you learn all the basic JavaScript concepts and understand them fully before jumping into any framework.

Learn Responsive Design

Before moving on, let’s talk about a fundamental practice in web development.

Responsive design refers to an approach where your design adjusts to fit screens of all sizes, ranging from desktops to tablets and mobiles. A good responsive design drastically reduces the need to write separate code for different screen sizes.

Here’s an interesting fact: mobile phones make up two-thirds of web usage in the entire world. So, to ensure a good user experience, you need to make the website look good on mobile phones.

Learn more about responsive design in this simple guide, and read more about some best practices here.

And here are some other resources that can help you on your frontend journey:

• MDN Docs

• WebDevSimplified - YouTube Channel

Backend Development

Backend Development involves building the server-side of web applications. The server-side hosts the business logic of a website, that powers everything behind the scenes. It is also responsible for managing databases and ensuring smooth flow of data between server and the UI.

To dive into backend development, you need to learn a programming language first.

Why should you learn a programming language?

Learning a programming language equips you with the foundations to build these server-side applications. Think of a language as a way to tell the server what you want it to do.

A programming language serves as a tool to solve problems and create robust, working applications. These languages have various capabilities for handling tasks like storing and managing data, communicating with the front end, and ensuring application security.

Learning a programming language isn’t just about learning the syntax and writing code. It’s about understanding how to create systems that drive a successful website. So, getting familiar with a programming language is a key part of backend development.

There are a number of programming languages out there, each with its own features. Let’s understand a few options:

Python

Python is one of the preferred choices for backend development because of its simplicity. It has a concise and readable syntax making it very popular. It offers good features for database connections and setting up web servers. Python also has libraries for data science and machine learning.

Python is has a lot of tutorials and good community support, making it easy to get started with. It is beginner friendly, fun to learn and has a high demand.

Refer to the following resources for learning Python:

• Ultimate Python Beginner’s Course on freeCodeCamp’s YouTube channel

• GeeksforGeeks Python Tutorial

• Python Tutorial for Beginners on YouTube (Hindi)

• Machine Learning with Python – freeCodeCamp certification

Golang

Golang (Go) is increasing in popularity because of its simplicity and efficiency. Go code executes quickly and efficiently, making it a good option for high performance needs. This also leads to faster development time. Go also has excellent support for concurrency, which leads to efficient processing.

Go is beginner-friendly and has a clean and concise syntax, making it easy to read and maintain. It also has an extensive standard library offering a many built-in functions and tools, so it’s easy to set up a project without much hassle.

Go is growing in popularity because of its efficiency, and many companies are adopting Go for their projects. This has lead to an increasing demand for Golang developers and it’s expected to go up.

Go offers plenty of resources and a growing community for beginners. To get started with Go, refer to the following resources:

• Tour of Go – Interactive Learning with basic Golang concepts

• Golang Handbook from Flavio Copes

• Go Docs – Very detailed

Java

Java is an Object-Oriented Programming (OOP) language, widely used for backend development. Java is known for its security and robustness, making it a preferred choice for applications that require high reliability such as financial and healthcare systems. Java also offers a great support for concurrency.

Java is a good option for beginners as it has extensive resources and a large developer community. This includes plenty of tutorials and detailed documentation to make life easier for beginners as well as experienced developers.

Java has been around for a while, and many existing systems and enterprise applications currently run on Java. So, there is a huge demand for Java developers among big enterprises.

Lastly, the concepts that you learn while coding in Java stick with you and make you a better developer, even if you switch languages going forward.

The following resources can help you get started with Java:

• Java Programming for Beginners on freeCodeCamp.org

• Objects-Oriented Programming in Java

JavaScript

We already know what JavaScript offers to frontend, but it can also be used for backend development through NodeJS.

NodeJS is a run time environment that allows you to run JS code on the server side. This makes it possible to use JavaScript for both the frontend and the backend.

NodeJS follows an event-driven architecture and asynchronous programming, which enables it to handle multiple tasks without stopping execution for a single one (non-blocking I/O). Node is single threaded, so instead of creating multiple threads to handle tasks, it executes them one by one asynchronously by queuing tasks.

Node also follows a modular architecture, meaning you can break your application into smaller, manageable components. It also includes NPM (Node Package Manager) which provides access to thousands of open-source libraries to add functionality like routing, authentication, or database handling.

Why use Node?

• This is a very good option if you are already familiar with JavaScript, as you don’t need to learn any other language.

• Node is fast and efficient, making it easy if you want to set up a small server quickly.

• Node also has a large ecosystem of libraries through NPM.

However, Node is not ideal for CPU-intensive tasks as they can block the main thread, since it’s single threaded.

How to choose a programming language?

With so many options available, it may feel confusing to choose the right one for you. Each language has its own capabilities and no language is objectively better than the other.

Python and Golang are very beginner-friendly with simple syntax. So, if you value a gentle learning curve, then these two are good options. Java is known for its reliability and robustness, with a lot of enterprise-level applications built using Java.

As for the job opportunities, there’s high demand for each of the above languages, so you can choose any one you want. The most important thing is to develop your problem solving skill and understand how reliable software is built.

The choice of language doesn’t really matter in the long run, since the core fundamentals remain the same. So, my advice is to pick any language, learn its syntax and core capabilities, and start solving problems. You can start with the following:

• Learn Data Structures and Algorithms

• Start solving problems on LeetCode

• Learn language specific frameworks and develop projects (Upcoming section)

Backend Development Frameworks

Programming languages alone are not enough to create robust and secure applications. Frameworks, built on the capabilities of these languages, allow you to create these powerful applications. By providing additional functionalities like routing and database handling, they serve as a platform to put your coding skills to the test and also make the development process faster.

Depending on your language of choice, you can learn the following frameworks:

• Django and Flask – Python Based Frameworks

• Java Spring Boot

• Gin – Golang framework (You can create a simple Golang application without using a framework)

Read more about them if you are interested.

Databases

A database is a structured collection of data and is a crucial part of backend development. It plays an important role in storing and managing the application’s data.

Databases are broadly categorised into two types:

• Relational Databases use tables to store data and define relationships between those tables. Examples are MySQL, PostgreSQL, SQLite.

• Non-Relational Databases (NoSQL) are designed to handle unstructured or semi-structured data and are often used for hierarchical or document-based data storage. Examples are MongoDB and Cassandra.

  • MongoDB: A popular NoSQL database for flexible and scalable data storage.

  • Cassandra: Suitable for handling large amounts of distributed data.

To begin with relational databases, learn SQL (Structured Query Language). SQL is used to write queries that perform various operations on the data, such as:

• Creating tables and defining their structure.

• Reading data using SELECT statements.

• Updating existing records.

• Deleting unnecessary or outdated data.

Refer to the following resources to learn SQL:

• Full handbook on SQL

• w3schools.com

• GeeksforGeeks – Great resource to learn about database concepts

Once you are familiar with basic SQL syntax and are able to write queries, explore DBMS (DataBase Management System) concepts. These help you understand how databases are designed, managed, and optimised.

As a beginner, I recommend starting with relational databases because they provide a solid foundation in DBMS concepts involving tables and relationships between them. They are much more widely used among enterprises and learning their concepts can benefit you a lot.

These concepts might take some time to study, but don't worry about it. Take your time and keep working on the development stuff in parallel. You'll understand these concepts better as you gain more experience working with databases.

APIs

APIs (Application Programming Interfaces) are an essential part of backend development as they expose the backend logic to the outside world. APIs are a way for two different applications to communicate with each other. In the context of web development, the frontend interacts with the backend services through APIs.

When you build a web application, the frontend often needs to send and receive data from the backend. Let’s take an example of login functionality. When a user logs in, the frontend sends their credentials to the backend through an API call. The backend verifies this information and responds with the result.

To see these API calls, visit any website and open the Network Tab in Developer Tools. Interact with the website, or just reload the page, you’ll see the API calls being made as you use the website.

Read the following articles to understand more about APIs:

• GeeksforGeeks - What is an API?

• Full beginner-friendly course on APIs

• How does an API work?

At this point, you know how to start with both frontend and backend development. If you've reached this stage, congratulations! You've completed most of the hard work. But there’s one more thing you need to learn before you start developing projects.

Git and GitHub

Git is a version control system that keeps track of changes in a software project. It allows multiple people to work on the project without directly interfering with each other’s work.

GitHub is a remote repository system based on Git. It is like social media, but for your code. GitHub encourages collaboration among developers and keeps track of everyone’s contributions.

GitHub lets you share your project code and view other developers' code, too. This facilitates increased collaboration and learning. I strongly recommend learning Git, especially at the beginning of your development journey.

To get started with Git and GitHub, refer to the following articles:

• Learn the Basics of Git in Under 10 Minutes

• Full book on Git and GitHub + version control basics

• Getting Started with GitHub

Build a Portfolio of Projects

Now, you are ready to start working on projects. A strong portfolio of projects is essential for showcasing your skills. It also helps you apply what you have learned so far and improves your problem-solving skills.

Consider the following project ideas:

• Todo App

• E-Commerce App

• Personal Portfolio website

• Weather App – Use a public API and create a simple UI

• Expense Tracker

You can research more about these ideas and start with some basic features that come to mind. Build either the frontend, the backend, or both, depending on your goals. Share your projects on GitHub to increase their visibility.

Check out GeeksforGeeks for more project ideas.

Deployment and Hosting Platforms

Once you have developed a web project, you can choose to release it to the public. This means that your website will be available on the internet for the public to use. How exciting is that!

Let’s understand the above terms. Deployment refers to the process of uploading your application to a remote system or a server in order to make it live and available to users. Hosting is like renting a space on the Internet for storing your application code. It provides a space to keep your website’s data on the server and displays your website on the internet.

Deploying and Hosting an application mainly follows these steps:

• The application code is written, tested locally, and optimised for production

• The required configurations and secrets (passwords, API keys, and so on) are written as environment variables

• The code is pushed to a version control system like GitHub or GitLab

• The code is scanned for any security vulnerabilities and automated tests are run

• Hosting platforms pull the code from these repositories and make it accessible on the internet.

Hosting services like Netlify, GitHub Pages, and Heroku offer free and paid services and are easy to use for beginners. Netlify only supports frontend applications while Heroku is good for backend and full stack applications with easy integration of databases. GitHub Pages lets you host right from your repository.

Releasing your website to the public is a great opportunity to showcase your work to recruiters and potential collaborators.

Additional Tips

1. Don't spend too much time on tutorials, as you might get stuck in "tutorial hell." Tutorials are important for understanding core concepts, but real learning happens when you work hands-on. So start building as soon as you can, even if it’s just small projects at first.

2. JavaScript might seem overwhelming at first, but start small and practice regularly. Don’t rush to learn multiple things at once, tackle one concept at a time and practice through code for better understanding.

3. Experiment with different frameworks initially to find one that works for you. Once you choose a framework, stick with it until you learn it well.

4. Ensure that your programming language concepts are clear before jumping into any framework.

5. If you feel that a programming language is not working for you, you can switch to a different one, the core fundamentals remain the same.

6. As a beginner, it's important to have a basic understanding of both the frontend and the backend. Later, you can choose to specialise in one or you can choose to focus on both, becoming a "full stack" developer.

7. You will face challenges at first, so don't get discouraged. Keep practicing, and you will get better over time.

8. If you are stuck on any issue, use Chat GPT, Google Search, forums and developer communities, and Stack Overflow as much as possible. I am always available if you need any help.

9. Lastly, stay updated with the latest trends and technologies in web development. Always look for new or improved ways to solve problems. Learning never stops!

Conclusion

Web Development is divided into two parts: frontend and backend development. The frontend is concerned with the website’s appearance while the backend focuses on the server-side logic and databases.

HTML, CSS, and JavaScript are the essentials in frontend development and form the backbone of a website. In backend development, learning a programming language like Python or Java is key. Both frontend and backend frameworks provide additional capabilities and make the development process faster.

Git is a must-have skill as it allows you to share your work and collaborate with other developers. Building a portfolio of projects and sharing on GitHub showcases your work and makes you a better developer. Lastly, utilise deployment platforms as they make your website available to the general public.

That’s it for today! I hope this article helps you start your web development journey. Let me know what you think. Your feedback is always appreciated!

Connect with me on Twitter for more updates and discussions. If you have any questions or clarifications, feel free to reach out. Thank you for reading, and I look forward to seeing you next time!

References:

• How to become a web developer

• Building your first website

• Getting started with backend engineering

• Developer roadmap

If you are a web developer or aspiring to be one, it's important to understand what these companies look for in candidates. Preparing for interviews at these companies can be a daunting task.

So, in this article, I am going to list some of the topics to help you prepare for your next React interview. We'll discuss each topic in detail, with examples, so you can get a good look before the interviews and possibly gain an edge over other candidates. Let's dive into it!

Table of Contents

• JavaScript Fundamentals

• React Essentials

• React Hooks

• Additional Concepts

• React Redux

• Additional Notes

JavaScript Fundamentals

To prepare for any web development interview, you need to get familiar with JavaScript fundamentals no matter what framework is listed in the job description. Framework based questions are always secondary to JavaScript fundamentals, so expect to get tested on JavaScript first.

If you are a beginner, you need to clear JavaScript fundamentals before jumping into React. A lot of people (including me) make the mistake of jumping straight into React after learning a bit of JavaScript.

I have written a detailed post on important JavaScript concepts for interviews. You can include this as part of your React interview preparation. If you are clear on all JavaScript fundamentals, you can skip to the next section.

React Essentials

Let's go through some essential topics you need to get familiar with:

What is Virtual DOM in React?

As we all know, the browser DOM (Document Object Model) is a tree-like structure of different HTML elements. Virtual DOM is an in-memory representation or a lightweight version of the real DOM. It is an abstraction created by React which is similar to the real DOM.

Why does React use the virtual DOM? Updating and re-rendering the real DOM is slow and inefficient, especially if it gets updated frequently. So, instead of updating the real DOM directly, React updates the virtual DOM.

The virtual DOM is then compared to the real DOM and once it identifies the differences, it only updates that part of the DOM, rather than rendering the entire DOM again. This process is known as diffing and reconciliation.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code in the same file as the JavaScript code. This makes it very easy for your HTML to work with JavaScript.

You can write JSX code in a .js or .jsx file. Consider the following MyComponent.jsx file:

const MyComponent = () => {
    const name = "Kunal"
    return (
        <div>
            {name}
        </div>
    )
}

What is State?

State is a React object that contains information about the component and determines how the component behaves. State can change any time based on user behavior. Any change in state causes the entire component to re-render.

State is used to render dynamic information in the component and makes the UI interactive. State determines how a component reacts to events like user input and data manipulation, and controls what it renders on screen.

Some things you need to keep in mind while using state:

• States are immutable. Always update the state using a setState function. For objects/arrays, create new ones and set the state with the new array/object. This ensures proper component behavior.

• Use state only when necessary, avoid storing redundant information as it may cause unnecessary re-renders.

• Use the state locally in the same component, avoid passing state down the DOM tree, unless absolutely necessary. For global state, use context or redux.

Check the legacy docs for state in class components. For functional components, refer to the useState section.

What are props?

Props (short for properties) are a way to pass data from one component to another. They can be considered as arguments passed to components. Props are passed to a child component similar to HTML attributes.

Let's take an example:

function ParentComponent() {
  const name = "John Doe";
  const age = 30;

  const handleClick = () => {
    console.log("Button clicked")
  };

  return (
    <div>
      <ChildComponent name={name} age={age} handleClick={handleClick} />
    </div>
  );
}

function ChildComponent({ name, age, handleClick }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

• Here, the parent component passes down name, age and handleClick method as props to the child component.

• These props form a props object that contains the values passed. Every functional component takes a props object as an argument

• We have accessed the props by destructuring the object in the child component.

Props can only be passed one way down the component tree. That is, from parent to child component. Props are read-only, you cannot change their value directly. State values passed down as props can be updated using state update function.

Difference Between Class and Functional components

React components are of two types: class and functional components. Let's understand the difference between the two:

Class Components:

• Class components are written using ES6 classes. Its properties and functions are accessed using the this keyword. They need a render method to return JSX.

• Class components are stateful components that contain built-in features like State and Context.

• They have methods for different stages of component lifecycle: componentDidMount() componentDidUpdate() componentWillUnmount(), and so on.

• Class components are verbose, hard to read and always need this keyword to access properties.

Functional Components:

• Functional components are simple JavaScript functions that take a props object as an argument. They don't need a render method, they return JSX directly.

• Functional components are stateless and do not have state of their own. Instead, they use Hooks to use class component features like State or Context.

• There are no lifecycle methods, lifecycle is be managed with useEffect hook.

• Functional components require less code than class components, so they are easier to read and write.

Nowadays, developers prefer and recommend functional components, especially with Hooks. Class components are usually found in older codebases.

However, knowing class components is helpful as a lot of companies have old codebases written using class components.

What is the Component Lifecycle?

Every React component has a lifecycle that goes through three phases: Mounting, Updating and Unmounting.

Mounting

In this phase, a component is created and added to the DOM. When a component is mounted, the following methods are called:

• constructor()

• static getDerivedStateFromProps(props, state) (rarely used)

• render()

• componentDidMount()

componentDidMount() is called only once; that is, when the component mounts. It is the preferred method for executing side effects when a component loads for the first time. In functional components, its equivalent is useEffect Hook.

Updating

In updating phase, the component's state or props change, which causes the component to re-render. The following methods are called when component updates:

• shouldComponentUpdate(nextProps, nextState)

• render() (called again)

• getSnapshotBeforeUpdate()

• componentDidUpdate()

The componentDidUpdate method is called following times:

• The first time when component mounts, after the componentDidMount method.

• Any state or props change triggering component re-render.

It is useful to execute side effects when a state updates. In functional component, the equivalent is useEffect with dependencies.

Unmounting

In this phase, the component is removed from the DOM. The componentWillUnmount method is called while unmounting.

It is mostly used for cleanup tasks before the component unmounts. Refer to the useEffect section for its equivalent.

Controlled and Uncontrolled components

In controlled components, the form elements are managed by React state. This means that the values of form fields are set and updated ("controlled" by React state). All form data is stored in state before submitting the form.

Example of controlled component:

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Value: ${value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
        <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
        <button type="submit">Submit</button>
    </form>
  );
}

• The value of the input field is being controlled by React state variable value.

• When you update the input field, the state gets updated and value of the input is set accordingly.

Uncontrolled components, on the other hand, do not depend on state to manage forms. Instead, the values of form fields are managed internally, usually with refs. Refs are used to directly interact with the DOM elements and update values without updating state and causing re-renders.

Example of uncontrolled component:

function UncontrolledComponent() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Input Value: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
        <input type="text" ref={inputRef} />
        <button type="submit">Submit</button>
    </form>
  );
}

Here, we have used a ref to directly access the input element's DOM node and used its value to access form data. This makes form handling much simpler compared to using state.

When to use either:

• Use controlled components if you want more control over data that the user inputs. This is particularly useful when two form fields are dependent on each other.

• If you have multiple state dependent on the form data, using state is a good practice.

• Use uncontrolled components if your form is very simple and there's no need to manipulate the form data.

What are Pure Components?

A pure component is similar to a normal component, except that it only renders if its state or props have changed.

Let's take an example:

const PureExample = React.memo(() => {
  return <h1> Hello {this.props.name} </h1>;
});

function App() {
  const [name, setName] = useState("");
  const [toggle, setToggle] = useState(false);
  return (
    <div className="App">
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => setToggle(!toggle)}> Toggle </button>
      <PureExample name={name} />
    </div>
  );
}

• PureExample is a pure component that is a child of App component. Pure components can be created by surrounding the function with React.memo().

• In the example, we have an input field that updates name, and a button that toggles the state, toggle.

• name is passed down as props to PureExample, so it re-renders if name is updated. If you update toggle or any other state, PureExample does not re-render.

In case of class components, pure components can be created by extending the PureComponent class. However, functional components are recommended.

class PureExample extends React.PureComponent {
  render() {
    return <h1> Hello {this.props.name} </h1>;
  }
}

Usually, when parent component re-renders, React renders all its child components again, even if none of the child components have updated.

Pure components are used for child components that only need to re-render if one of their props change. This skips unnecessary re-renders and improves performance.

React Hooks

React Hooks is a game-changing feature introduced to React in 2016. Hooks provide a way to implement class component features in functional components. Because of hooks, developers nowadays prefer functional to class components.

useState Hook

We have already seen what state is. Let's understand how to implement state in functional components with a simple example:

const [count, setCount] = useState(0);
const increment = () => {
    setCount(count + 1);
};
const decrement = () => {
    setCount(count - 1);
};
return (
    <div>
        <h1>Count: {count}</h1>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
    </div>
);

• useState function takes an initial value as an argument and returns an array containing two elements: the current state, and a state update function.

• In this example, we have two buttons that increment and decrement the count. On click of the button, the increment/decrement operations are performed by updating the count state.

• The component re-renders and displays the updated count.

For more examples of its usages, check out my post below:

useEffect Hook

The useEffect hook is used to implement side effects in a component. Side effects include API calls, subscription to a service and DOM manipulation. useEffect can also be used to conditionally update a state based on another state change.

Let's understand how to use it, with an example:

function App() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data?page=${page}`);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [page]);

  return (
    <div>
      <div> {JSON.stringify(data)} </div>
      <button onClick={() => setPage(page - 1)} disabled={page <= 1}>
        Previous
      </button>
      <button onClick={() => setPage(page + 1)}>Next</button>
    </div>
  );
}

• useEffect takes two arguments: a function that performs side effects and a dependency array.

• In this example, we display paginated data by including the fetching logic inside a useEffect and including the current page in the dependency.

• useEffect makes the API call on the first render, loading the first page of data. After that, it loads additional data every time user changes the page.

How to implement lifecycle methods in useEffect:

• To implement componentDidMount(), pass an empty dependency array

• To implement componentDidUpdate(), pass dependencies to run the useEffect if one of those dependencies changes

• For componentWillUnmount(), return a callback function from useEffect containing the cleanup code

useEffect can be used in a lot of ways. The React docs contain several examples of usages.

useContext Hook

States are used to store information about a component and controls how the component behaves. In some cases, child components need access to the parent component’s state.

To achieve this we pass down the state data as props. However, passing data through props may lead to issues. Let’s understand the biggest issue:

What is Prop Drilling?

To pass data from parent to child component, we use props. But what if a component deep within the component tree needs access to a prop. You would need to pass it through several components that don't even need the prop.

The same issue arises when multiple components in different branches of the tree need access to the same prop.

Passing down props through numerous components leads to a situation known as prop drilling.

How does React context solve the problem?

Context lets parent components pass data to all components in the tree without drilling props through them. This eliminates the need to pass down props through multiple components in the tree.

Context was introduced as a class component feature initially, but now it can be used in functional components with the useContext hook.

Let's see how to use the hook:

import React, {useContext} from "react";

const DataContext = React.createContext(null);

export default function App() {
  return (
    <DataContext.Provider value="Some value">
      <MainComponent />
    </DataContext.Provider>
  );
}

function MainComponent() {
  const data = useContext(DataContext);
  return <div> Data: {data} </div>;
}

• We used React.createContext method to create a context and then created a provider function that wraps around the main component.

• The value prop of DataContext.Provider is used the pass data to the entire component tree under MainComponent.

• The useContext Hook consumes this data inside components. It returns the data that was passed to the value prop of the provider.

useContext can only be used if the component or one of its parents has a context provider wrapped around it. Examples use cases are themes, user info, language preferences and localization, and so on.

Check out additional usages of useContext in the docs.

useRef Hook

Refs (short for references) are a way to interact directly with DOM elements. They give you direct access to the JavaScript DOM object and its methods.

Visit the legacy docs for using refs in class components. In functional components, we have the useRef Hook. Let's take an example:

export function App(props) {
  const myRef = useRef(null);

  useEffect(() => {
    myRef.current.focus();
  }, []);

  return <input type="text" ref={myRef} />;
}

• useRef takes an initial value as an argument and returns a ref object.

• When this ref object is passed to the ref prop of an element, we get a direct reference to the element's DOM node.

• The value of a ref is stored inside its current property.

• Since ref is a JavaScript DOM object, we can call the focus() method to focus on the input element when the component mounts.

Unlike state, refs do not cause component re-renders and unlike local variables, refs retain their values between renders.

Some things to remember about refs:

• Components can expose their DOM nodes to parent components by using forwardRef.

• Only use refs when you absolutely need to access DOM elements. Example use cases could be for tasks like focusing on input elements, selecting tests, triggering animations, determining elements positions, and so on.

• Avoid over-using them, prefer state and props over refs. Avoid modifying DOM elements explicitly to control component behavior, use state instead.

useMemo Hook

If your component needs to perform an intensive calculation while rendering something, it slows down website performance since the component executes the calculation on every render.

This may be acceptable for a state value dependent on it, but it's inefficient if the expensive function executes again on other, unrelated state updates. To tackle this, we memoize the result of the calculation and re-calculate it only when the relevant state changes.

useMemo Hook is used to memoize the result of this calculation, so that it doesn't run on every render. Let's take an example:

const MemoExample = () => {
  const [computedValue, setComputedValue] = useState(value);
  const [otherState, setOtherState] = useState('Initial State');

  const expensiveFunction = () => {
      let result = 0;
      for (let i = 0; i < 10000000; i++) {
          result += i * 2;
      }
      return result;
  }

  const value = useMemo(expensiveFunction, [computedValue]);

  return  (
    <div>
      <button onClick={() => setComputedValue(computedValue + 1)}>
            Re-calculate
      </button>
      <button onClick={() => setOtherState('State Changed')}>
        Change Other State
      </button>
    </div>
  );
};

• useMemo takes in the function and a dependency array as arguments, and returns the result of this function. It memoizes the result for the next render and returns the memoized value unless some dependency changes.

• We have passed computedValue state inside the array, so, after running on the first render, the function will run only when computedValue changes.

• If you update any other state, the component re-renders, but the function does not run again.

When to use:

• If you do not want to run a function on every render, except for the state dependent on it.

• To maintain referential equality of arrays and object across renders. Array/object references change each time they are declared.

• When rendering lists with Array.map that do not need to change except for relevant state updates.

useCallback Hook

useCallback is similar to useMemo, the only difference is that useCallback caches the function definition itself, rather than memoizing its return value.

Similar to arrays or objects, a function reference changes each time it is declared. So, wrapping it around a useCallback maintains referential equality of the function across renders.

Let's understand it with an example:

function ParentComponent() {
  const [toggle, setToggle] = useState(false);

  const handleSubmit = useCallback(() => {
    console.log('Child component form submitted');
  }, []); // Add props or state that this function depends on
  return (
    <div className={toggle ? 'dark' : ''}>
      <button onClick={() => setToggle(!toggle)}> Toggle Theme </button>
      <Child handleSubmit={handleSubmit} />
    </div>
  );
}

const Child = React.memo(({ handleSubmit }) => {

  for (let i = 0; i < 1000000000; i++) {
    // Assume component is slow
  }
  return (
    <div>
      <h2> Child component </h2>
      <button onClick={handleSubmit}> Click Me </button>
    </div>
  );
});

• Here, we deliberately slow down the child component to simulate slow renders. Since it's wrapped inside React.memo(), it only re-renders if its only prop handleSubmit changes.

• But when toggle state changes, it triggers a re-render for the child component as well, even if it's not passed down to the child component.

• This is because, every time the parent component renders, the handleSubmit function is created with a new reference. So, technically handleSubmit has changed and thus, the child component re-renders.

• To avoid this behaviour, we wrap the handleSubmit function declaration inside a useCallback. This ensures that the function reference remains the same between renders.

• In our example, the function is created only once, since there are no dependencies. If you add dependencies, the function is re-created only if one of them changes.

When to use:

• When you have event handlers defined for an element inside your component, wrap them inside a useCallback to avoid unnecessary re-creations of event handlers.

• When you call a function inside a useEffect, you would usually pass the function as a dependency. To avoid running useEffect unnecessarily on every render, wrap the function definition inside a useCallback.

• If your custom Hook is returning a function, it is recommended to wrap it inside a useCallback. So, the users don't have to optimize the Hook – rather, they can focus on their own code.

If you want to learn more about useMemo and useCallback hooks, check out my post below:

https://www.freecodecamp.org/news/difference-between-usememo-and-usecallback-hooks/

useReducer Hook

The useReducer Hook is another way to manage state in React applications. As your application grows, its state gets more and more complex. With time, it becomes difficult to handle complex state logic with useState Hook.

useReducer offers a more structured way to manage complex state by handling all state updates in a reducer function. This makes state management easier since all the state update logic is at one place.

Let's see how to use this hook with an example:

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    case 'RESET':
      return { count: 0 };
    default:
      throw new Error(`Unknown action type: ${action.type}`);
  }
};

export function App(props) {
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div className='App'>
      State: {state.count}
      <div>

        <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
        <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
        <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
      </div>
    </div>
  );
}

• This example contains a simple counter state with three actions: increment, decrement and reset.

• We define a reducer function that accepts the current state and an action object as arguments. The action object contains the action type (a string) and payload (data passed to the action).

• The useReducer Hook accepts the reducer function and an initial state, and returns an array containing the current state and a dispatch method.

• To update state, we call the dispatch method and pass the action type and payload in an object. We call this process, "dispatching an action".

When to use useReducer:

• Use this hook only when your component has complex state update logic. Since it involves writing more code, prefer useState for simpler state updates. The simple example provided is just for demonstration purpose.

• When there are a lot of state update actions with different logic, it makes sense to have them all in a separate function. With this, you just pass the action type and payload to a dispatch function and the reducer handles the state update.

If you want to understand more about the useReducer hook, check out my post:

So far, we have covered the most common hooks that React provides. Besides these, React also offers additional, less commonly uses hooks. So, if you are interested, read about them in the docs. However, learning the above hooks should be enough for your interviews.

Custom Hooks

There are some situations where you may need to create your own hooks on top of the existing ones. Custom hooks provide re-usable functionality across multiple components and contribute to cleaner, maintainable code.

To create a custom Hook, first identify a piece of functionality that you want to re-use. Then, you can export it as a function with its name starting with the prefix 'use'.

Let's say you have multiple components that need to fetch data from APIs. You can export the fetching logic as a Hook to avoid duplicating code.

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

• In the useFetch custom hook, we fetched the data inside a useEffect Hook, just as would inside a component. We also handled loading and error states in the Hook.

• Finally, we return the data, with the loading and error states, allowing the component to use them for handling the rendering logic.

Let's use this in a component:

const UserList = () => {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

The UsersList component displays a list of users fetched from an API, and also renders “Loading” text and an error if any. To use the custom Hook, we called useFetch just like any other hook, and passed an API endpoint. We can further modify the useFetch custom hook to include request headers, request body, etc.

This way, custom Hooks help you abstract the logic from a component and make it re-usable throughout the application. There are several other use cases:

• Event listeners for events like window resizing, mouse movements or keyboard presses.

• Form handling, including form validation and submission.

• Themes, caches, transitions, and so on.

Check out the docs to learn more about custom hooks.

Additional Concepts

Here are some additional concepts that can be helpful:

Why not Use Index as Keys while Rendering Lists?

When you render lists in React using the Array.map method, you are asked to provide a unique key prop to each item being rendered. This key is used to distinguish elements from each other.

Indices are unique, so it's tempting to use them as keys for simplicity. However, indices of elements are not stable.

Elements often get added or deleted in an array. The order of elements could get changed too. In these cases, value of key prop changes and may lead to unpredictable behavior.

Let's consider the following list:

const items = [
  {
    id: 1,
    name: 'Item A'
  },
  {
    id: 2,
    name: 'Item B'
  },
  {
    id: 3,
    name: 'Item C'
  }
]
export const App = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        {item.name}
      </li>
    ))}
  </ul>
);

Each rendered item in the list has its index as the key. If we delete Item B from the list, the references of the other elements get changed.

React uses keys to uniquely identify list elements, so that rendering them becomes easier. React often re-uses these elements for quick renders. However, if an element gets deleted, the keys of all subsequent elements are updated.

React may reuse the deleted key or render the entire list again which could lead to performance issues. Instead of indices, choose something unique, preferably username, email or an ID generated by database.

Higher Order Components

A higher order component (HOC) is a function that takes a component as an argument and returns a new component that wraps the original one. HOCs allow you to provide additional functionality to a component as well as re-use it across multiple components.

Rather than providing a short explanation here, I would recommend the following article that explains HOCs with various examples:

Lazy Loading

Lazy loading is a web development pattern that delays the loading of resources like images, videos, or non-essential components. It helps web pages load faster by first loading the content necessary for interaction, and then loading the rest of the content.

One example of lazy loading is an E-commerce product catalog page. The page first loads the names and prices of products and clickable elements. Then, it loads the images and other UI elements.

In React, lazy loading can be implemented using React.lazy() and Suspense:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

export const App = () => {
  return (
    <div>
      <h1>Showing lazy component below</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

• Once you have identified a component to lazy load, use the React.lazy() function to dynamically import the lazy component.

• Wrap the lazy-loaded component inside Suspense. It renders a fallback (default) component till the lazy component loads.

This way, you can load a React component on demand. This is also known as code splitting. The code is split and some part of the React code is loaded dynamically when needed.

Code splitting optimizes the performance of React applications that have large, complex components. By using Suspense, you can display a temporary UI to the user, so they don't have to stare at a blank screen while a component is loading.

Code splitting breaks your application into several chunks, with each chunk being loaded independently. So, this process is also known as chunking.

Difference Between Client-side and Server-side Rendering

There are two ways to render webpages in React. Let's have a look:

Server Side Rendering (SSR):

• Web Page is generated and rendered on the server before sending to the client. Client receives complete web page from the server and displays it directly to the user.

• Loading the prepared HTML helps with faster loading times, improving the user experience. This is especially beneficial for users with slower internet connections.

• Since the web page is already prepared, it helps search engines better index your website, making it more SEO-friendly.

• SSR can increase server load if the page is updated frequently. Pages with dynamic content can take longer to update because they need to re-render often.

• SSR is used for marketing, blogging and news websites where initial load times and SEO are important.

Client Side Rendering (CSR):

• A basic HTML file is sent to the client, and then it renders dynamic content using JavaScript.

• Initial load times are slower because preparing and rendering the content mostly happens on the client side.

• Since it initially renders basic HTML and adds JavaScript content later, search engines may not be able to index your content, making it less SEO-friendly.

• For web pages with dynamic content, rendering times are faster since all the rendering happens on client side.

• CSR is used for websites with dynamic content and frequent user interactions like social media platforms or dashboards.

React Redux

Redux is a state-management library that helps manage complex application state. It is a powerful library for managing state in large React applications.

In the context of React, let’s look at the Hooks Redux provides:

useSelector

A selector function accepts a Redux state object as an argument and returns a part of that state. The useSelector Hook is used to call the selector function. Let's take the following example:

// example state for e-commerce app
const initialState = {
    users: { 
        ...
    },
    products: {
        ...
    },
    cart: {
        ...
    }
    orders: {
        ordersList: [
            {
                id: 101,
                status: "Shipped"
            },
            {
                id: 102,
                status: "Processing"
            },

            ...
        ]
    }
}

Let's say you want to display list of orders on a page. We can't access this state directly from the component as it’s part of the redux store. So, we use selector functions.

const selectAllOrders = (state) => state.orders.ordersList

To call this selector function, we use the useSelector Hook:

const OrdersList = () => {
  const orders = useSelector(selectAllOrders);
  return (
    // display orders
  );
};

The main advantage of using selectors is that you get access to the Redux state object, allowing you to access any slice of the state.

useDispatch

The useDispatch Hook returns a function that you can use to dispatch actions, such as updating state and calling APIs. This function takes an action object as an argument and performs the corresponding action. This function is known as a dispatch function.

Let's take an example. We’ll work with the same state and update one of the order’s status:

function App() {
  const dispatch = useDispatch();

  const handleUpdateStatus = () => {
    dispatch({type: 'ORDER_UPDATE_STATUS', payload: {
      id: 102,
      status: "Shipped"
    }});
  };

  return (
    <div>
      <h2>Update Order Status</h2>
      <button onClick={handleUpdateStatus}>Mark as Delivered</button>
    </div>
  );
}

Here, the action ORDER_UPDATE_STATUS will be dispatched with the corresponding payload. This action will be mapped to a reducer that will perform the state update.

The advantage of using dispatch is that you can just specify the action type and pass the payload and the state update logic will be handled by the reducer, instead of the component itself.

Others

I have just listed two Hooks that React provides to work with Redux. However, if you are not familiar with Redux, you should check out the docs to get started.

Redux is much more than just these two Hooks. Make sure you are clear on the core concepts: store, slices, reducers, actions, selectors, dispatch. Redux Sagas is another major concept you should learn. They are mainly used for async operations.

Additional Notes

There are a few other areas that I haven't mentioned so far, but can be a good addition:

• React Router

• Unit Testing in React

Additionally, you may be asked to implement a small feature using the concepts I explained in this article. This gives you the opportunity to demonstrate your understanding of React.

Also, it's helpful to have a few React projects on your resume. Check out the Master React by Building 25 Projects.

Keep in mind that React is not limited to just these topics, there are additional resources in the References section. However, this handbook should serve as a useful guide before interviews. Feel free to keep re-visiting it during your interview preparation.

Conclusion

In this handbook, we outlined several important topics to prepare for your next React interview. We started with a few basic concepts in React, then moved to Hooks. Then, we saw a few additional concepts that are good to know before discussing React Redux.

I have written clear and concise explanations for each topic, with examples. That should help you articulate these concepts to interviewers. At places where I couldn't explain, I have pointed to other helpful resources that explain better. This makes the article your go-to place any time during your interview prep.

During the interviews, just stay calm and confidently demonstrate your knowledge. Good communication puts a nice impression on the interview. Lastly, remember that each interview is a learning opportunity - whether you succeed or not. Stay positive and keep refining your skills. All the best in your interviews!

References

• React Interview Questions – Interview Prep with Answers and Examples

• React Interview Questions - InterviewBit

• Learn React – A Guide to the Key Concepts by Ankur Tyagi

Hooks also make your life easier by providing some convenient features. Among these hooks, we have useMemo and useCallback that help improve your website's performance.

In today's tutorial, we are going to discuss both the useMemo and useCallback hooks. You'll learn the difference between them and when to use each hook.

The useMemo Hook

The useMemo hook memoizes the return value of an expensive calculation between renders. Memoizing means storing the value as a cached value so that the value need not be calculated again (unless it's required).

useMemo is a hook used for optimising the performance of your renders. Normally, when you declare a variable inside a component, it gets re-created on every render. If it stores the return value of a function, then the function gets called every time your component renders.

Normally, this wouldn't be a problem. But, what if the function is expensive? What if it takes a longer time to execute? Take the following example:

function calculate() {
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }
  return result;
}

function App1() {
  const [count, setCount] = useState(0);

  const value = calculate();

  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

When you click on 'Increment Count', it takes a few seconds to update the count state. This is because the calculate function runs every time a component re-renders after state change.

Now, imagine if there were multiple state variables in the component, each serving its own purpose. Each state update would cause a re-render and execute this expensive function.

These state variables could be completely unrelated to the expensive calculation performed, which would cause unnecessary delays. This would affect the performance of your website and could lead to a terrible user experience.

useMemo can help you tackle this issue. Let's first understand its syntax:

const value = useMemo(expensiveFunction, [...dependencyArray])

The useMemo hook should be declared at the top level of your component. It takes the following arguments:

• expensiveFunction contains the expensive calculation you want to perform. If you have declared the function outside, pass the function reference only, without the brackets. You can also pass arrow functions directly.

• dependencyArray contains list of dependencies for the hook. The expensive function will be called only when one of these dependencies is updated. You can pass state variables or props that are dependent on this calculation. Any other state updates will not trigger the function.

On the first render, useMemo returns the result of expensiveFunction and caches the result. During the subsequent renders, it will return the cached value if no dependencies have changed. If they change, then it will call the function again.

Let's use this in our case:

const [dependentCount, setDependentCount] = useState(10);

const value = useMemo(calculate, [dependentCount]);

return (
  <div className="App">

    // ...

    <button onClick={() => setDependentCount(dependentCount + 1)}>
      Increment Dependent Count
    </button>
    <p>Dependent Count: {dependentCount}</p>
  </div>
);

We have created another state dependentCount that we assume is dependent on the expensive calculation. When this state updates and renders the component, the calculate function will run.

But if any other state changes, then useMemo will return the cached value instead of running the function again.

Let's test this by adding a console.log inside the function:

Output with useMemo

Now, when you click "Increment Count", the rendering is faster, since the calculate function is not getting called on every render. This is the same during every other state update not listed in the useMemo dependency array.

But when you click on "Increment dependent Count", it takes time to render the updated value. This is because dependentCount is a dependency of useMemo and changing it calls the expensive function, so the component takes time to re-render.

In this way, with useMemo, you can control the execution of an expensive function by calling it only for state updates that actually need the value returned. This can drastically improve your app's performance.

When to use useMemo:

• When you have a state dependent on an expensive calculation, but you don't want to run the calculation on every render.

• When you declare an array or object inside a component, its reference changes on every render, even though the value remains the same. Wrapping the values inside useMemo maintains referential equality and prevents unnecessary re-renders. This is essential when there's a useEffect dependent on the array or object.

• When you are rendering lists using Array.map that do not need to change unless a certain state value changes.

The useCallback Hook

Similar to useMemo, you can also use this hook to optimise performance. The useCallback hook memoizes a callback function and returns it.

Note that the useCallback hook memoizes the function itself, not its return value. useMemo caches the functions return value so that the function need not execute again. useCallback caches the function definition or the function reference.

A function declared inside a component gets re-created on every component render, similar to a variable. The difference is, it gets rendered with a different reference every time. So, a useEffect dependent on this function will execute again on each render. A similar thing happens with child components.

Let's take an example:

const App = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");

  const handleClick = () => {
    setValue("Kunal");
  };
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
      <p>Value: {value}</p>
      <SlowComponent handleClick={handleClick} />
    </div>
  );
};

const SlowComponent = React.memo(({ handleClick, value }) => {

  // Intentially making the component slow
  for (let i = 0; i < 1000000000; i++) {}

  return (
    <div>
      <h1>Slow Component</h1>
      <button onClick={handleClick}>Click Me</button>

    </div>
  );
});

Here, we have a SlowComponent as the child of the App component. When a parent component renders, all of its child components render, regardless of whether anything has changed inside them.

To avoid unnecessary renders of the child components, we generally use the React.memo function. This basically caches the component and only re-renders it if its props have changed.

Now, when you click on 'Increment Count', it still takes a long time to render, because SlowComponent re-renders on state change. But why is that? We're not changing any of its props.

On the surface, we may not appear to change the value of handleClick prop. But, since functions are re-created with a different reference, on every render of the App component, its child (that is SlowComponent) renders.

To maintain referential equality, we wrap this function's definition inside a useCallback.

Let's understand its syntax:

const cachedFn = useCallback(fn, [...dependencyArray])

useCallback takes the following arguments:

• fn is the function you want to cache. It is the function definition that you want to create, and can take any arguments and return any value.

• dependencyArray is a list of dependencies, changes to which trigger re-creation of the function. You can pass state values or props that are dependent on this function.

On the first render, React creates the function (does not call it) and caches it. On the subsequent renders, the cached function is returned to you. Remember, this hook returns and caches the function and not its return value.

Let's use this hook in our example:

import { useCallback } from "react";

const App = () => {

  // ...

  const handleClick = useCallback(() => {
    setValue("Kunal");
  }, [value, setValue]);

  // ...
};

Here, we have wrapped the function inside a useCallback and passed two dependencies that are involved with this function.

Now, when you click on 'Increment Count', the rendering is much faster. This is because the handleClick reference is cached between renders and hence, SlowComponent does not re-render.

But when you click on the button inside SlowComponent it will re-render. This is because when the value state changes, the handleClick method is created again and so the props of the slow component have changed.

Value takes time to render

You can add many more states to the App component and update them without inhibiting performance as long as you don't update value's state.

When to use useCallback

• When you have event handlers defined for an element inside your component, wrap them inside a useCallback to avoid unnecessary re-creations of event handlers.

• When you call a function inside a useEffect, you usually pass the function as a dependency. To avoid using useEffect unnecessarily on every render, wrap the function definition inside a useCallback.

• If you are writing a custom hook, and it returns a function, it is recommended to wrap it inside a useCallback. So, there's no need for the users to worry about optimizing the hook – rather, they can focus on their own code.

Differences Between useMemo and useCallback

Let's summarize the differences between the two hooks:

• useMemo caches the return value of a function. useCallback caches the function definition itself.

• useMemo is used when you have an expensive calculation you want to avoid on every render.

• useCallback is used to cache a function to avoid re-creating it on every re-render.

• useMemo makes sure that an expensive function should only be called for state values dependent on it.

• useCallback creates stable functions that maintain the same reference between renders. This avoids unnecessary rendering of child components.

And here are a few more things to remember. Use these hooks only if you want to memoize expensive calculations or prevent unnecessary re-renders. Do not use useMemo and useCallback everywhere.

For regular functions, these hooks don't make much difference. Overusing them will make your code unreadable. Instead, you can figure out other ways to improve app performance.

Conclusion

useMemo and useCallback are useful hooks in React that can help you optimize performance of your web app. It is important to understand the difference between the two and their usages.

In this article, we have discussed how both hooks work. useMemo caches the result of an expensive calculation, while useCallback caches the function reference. We also listed down scenarios when you should use each hook. Together, both these hooks can make your website faster.

I hope this article helps clear up any confusion. If you have further questions or comments regarding the post, reach out to me on Twitter. I would love to hear suggestions. Till next time, goodbye!

This user experience, designed to load new content on demand, uses a technique called infinite scrolling. This helps keep you hooked to these apps for hours.

Traditionally, these features would have you click "Next Page" to display new content. However, infinite scrolling reduces the load on the server by fetching less data at a time and thus, provides a much more engaging user experience.

In this post, we are going to implement the same feature in JavaScript. We'll use the Intersection Observer API to load data on demand, as the user is scrolling. We'll create a simple React application that displays posts similar to a social media feed.

How to Set Up the React App

Run create-react-app in your terminal or use a modern built tool like Vite to create your React app. Remove the existing boilerplate code. There is no need to install any additional dependencies. Run npm start command to start the project.

You can find the complete code of this tutorial on GitHub. Let's get started.

How to Create the Data Fetching Function

Create a separate file called services.js and write the following data fetching function.

We'll use the /posts API from JSONPlaceholder to get our data.

export const fetchPosts = async (page, limit) => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`
  );
  const data = await response.json();
  return data;
};

Here, we have passed two params to the API:

• page indicates the part of data that is called. This increases each time the user scrolls and loads new data.

• limit indicates the amount of data that is called at a time. For infinite scrolling, we call just enough data that can be displayed on a single page.

How to Build the Infinite Scroll Component

Let's create a component PostsList for displaying a list of posts with infinite scrolling.

Let's create our state variables, fetch the data, and display it:

const PostsList = () => {
  const [posts, setPosts] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  return (
    <div>
      <h1>Your Feed</h1>
      <ul>
        {posts.map((post, index) => (
          <li
            key={post.id}
          >
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
      {loading && <p>Loading...</p>}

    </div>
  );
};

Here, we have defined the state variables for posts, page number and loading state. Note that the page number does not mean that we are adding pagination. It's just a parameter to load the next set of data.

Now, let's call our API with the current page number and set the loading states:

const loadMorePosts = async () => {
    setLoading(true);
    const newPosts = await fetchPosts(page, 10);
    setPosts((prevPosts) => [...prevPosts, ...newPosts]);
    setLoading(false);
  };

  useEffect(() => {
    loadMorePosts();
  }, [page]);

Until now, we have fetched the initial 10 posts on first load of the page. We want to load more data as the user scrolls down the page.

Next, we'll use the Intersection Observer API to detect when additional data should be loaded.

Before using it, let's first understand what this API is.

What is the Intersection Observer API?

The Intersection Observer API is a web API that allows you to asynchronously observe changes in the intersection of a target element with an ancestor element or the viewport.

In simpler terms, it enables you to detect when an element enters or exits in an area of another DOM element or the viewport. Using Intersection Observer provides us with following advantages:

• Reduces the need for attaching event listeners to every scroll event.

• Removes the need for manual calculations of the element's position and their event listeners, thus simplifying your code.

• Efficient for observing multiple events compared to scroll or resize event listeners.

Go through the MDN Docs to understand more about Intersection Observer.

How to Use the Intersection Observer API

To use this API, we'll need to create an observer object.

Here's how you create an observer object:

const observer = new IntersectionObserver(callback, options);

• callback is a function called when the observed element's visibility changes. This function takes two arguments: entries and the observer object itself. Each object in entries array is an IntersectionObserverEntry object that contains information about the observed element's intersection status.

• options is an optional argument to further configure the Observer.

How do we use this in our application? We'll define observer object as a ref:

  const observer = useRef();

Now, to set this observer object on an element and to detect whether that element is intersecting with the viewport, we use the following function, which is a callback ref:

const lastPostElementRef = useCallback(
    (node) => {
      if (loading) return;
      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
          setPage((prevPage) => prevPage + 1); // trigger loading of new posts by chaging page no
        }
      });

      if (node) observer.current.observe(node);
    },
    [loading]
  );

Let's understand how this function works:

• We check if the data is still loading. If it is, then we do not execute the logic.

• To refer to the observer object, we use the ref's current property.

• If an element is already being observed, then disconnect it and create a new Observer that changes the page number, thus triggering the API call if the observed element intersects with the viewport.

• Since we are only observing one element at a time (such as the last element of the page) the size of entries is one.

• This new Observer will now watch the current element to which the ref is attached to, which is the last element on the page.

Since we only want to observe the last element on the page, we add this ref according to following condition:

{posts.map((post, index) => (
          <li
            key={post.id}
            ref={posts.length === index + 1 ? lastPostElementRef : null}
          >
            ...
          </li>
        ))}

Now, why are we using callback refs instead of the observer ref itself?

A ref gives us a direct reference to the element and sets the value of the ref object directly. It works well for elements that do not need to change reference dynamically.

A callback ref offers more control over the ref and can handle dynamic changes to reference more effectively. It is a function called with the element's instance, or its DOM Node when the component mounts and with null if it unmounts.

In our case, our reference changes dynamically since our last element gets updated as more data is loaded. We are also able to write some logic to observe and disconnect from a node, while setting our ref object.

We'll also wrap the lastPostElementRef function inside a useCallback hook to avoid it getting re-created on every re-render. We'll only create this function if the loading state changes when it's time to execute the function.

Run your app with npm start, go to http://localhost:3000, and open the Network Tab. As you scroll down, you'll see new API requests being made as you scroll down the page.

API requests for each new page

You can find the complete code on GitHub and similar tutorials in JavaScript and React.

Conclusion

When you implement infinite scrolling in your application, it provides a seamless and engaging user experience similar to what you see on popular social media apps. Instead of clicking through pages, users can effortlessly scroll through the content that loads dynamically.

In our example, we created a mock social media feed that loaded more content as the user scrolls down. We used the Intersection Observer API to detect the position of the last element according to which we loaded more data. It simplified our code and removed the need for attaching multiple event listeners.

I hope this helps you create similar features in your next web project and enables you to provide an engaging user experience. Please share your thoughts and feedback. Thank you!

There are small releases every now and then. However, this year, the React team has made a significant announcement introducing a new version, React 19. On April 25, 2024, React officially released the beta version of React 19 to the public.

This version comes with a whole host of new features, along with new hooks. In this post, we are going to discuss four new hooks available in the new version:

• useFormStatus

• useActionState

• useOptimistic

• use

Existing Form Handling Implementation

Before going into the first hook, let's see how we currently implement form handling in React:

import { submitAction } from "./actions";

const FormHandling = () => {
  const [name, setName] = useState("");
  const [pending, setPending] = useState(false);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setPending(true);
    await submitAction({ name });
    setPending(false);
    setName("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        placeholder="Enter your name"
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
      {pending && <p>Submitting {name}...</p>}
    </form>
  );
};

Normally, we use state-controlled form to set the form data and use it to submit the same to the server with the onSubmit attribute of the form. Also, we use a pending state variable to handle submission pending states.

The next three hooks I have shown will change the way we handle forms.

useFormStatus

The useFormStatus hook gives information about the form's status while submitting the form. This hook is part of the React DOM, so import it from react-dom:

import {useFormStatus} from 'react-dom'

This hook can be used in the following way:

  const { pending, data } = useFormStatus();

The hook does not take any arguments and returns an object containing information about the form's status. It returns:

• pending, which is a boolean value that indicates whether the form is in pending state.

• data, which is an object of type [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData), and contains the values of the form fields.

This hook can only be used inside a component that has a

element as its parent. It only returns status information of the parent form element and not the <form> element rendered in the same component.

The following will not work:

const {pending, data} = useFormStatus()
return (
    <form action={submit}></form>
  );

Let's use the same previous form and write it in a separate component:

import { submitAction } from "../../actions";
import { useFormStatus } from "react-dom";

const Form = () => {
  const { pending, data } = useFormStatus();

  return (
    <div>
      <input type="text" name="username" placeholder="Enter your name" />
      <button disabled={pending} type="submit">
        Submit
      </button>
      {pending && <p>Submitting {data?.get("username")}...</p>}
    </div>
  );
};

const FormStatusWithHooks = () => {
  return (
    <form
      action={async () => {
        await submitAction();
      }}
    >
      <Form />
    </form>
  );
};

Here, instead of using onSubmit, we are using the action prop of the form element. And we have used the data object to access the form fields and render them.

Rendering form data with pending state

You can use any number of forms inside the parent <form> element and get the form state with useFormStatus hook. So, you do not need to implement the same logic every time. This improves reusability in the code.

useActionState

useActionState can be used in the following way:

const [state, formAction] = useActionState(submitData, initialState);

It takes the following parameters:

• submitData, which is the function that is called when form is submitted. This function should take two parameters: the current state and a FormData object.

• initialState, which is the initial value of the state when the form is not submitted.

It returns an array with following:

• state, which is the current state that is being rendered in the component. This state is equal to the initial state.

• formAction, which is the new action that you can pass to the action prop of your form element. This executes the action that you passed with the current state and returns a new, updated state.

Let's understand how to use the hook with the following form:

<form action={formAction}>
      <div>
        <input type="text" name="username" placeholder="Enter your name" />
        <input type="number" name="age" placeholder="Enter age" />
        <button type="submit">Submit</button>
      </div>
    </form>

This form submits user information, name and age, which is appended to a list of users stored as state. Let's use the useActionState hook to get the state:

import { useActionState, useEffect } from "react";
import { submitActionWithCurrentState } from "../../actions";
const ActionStateComponent = () => {
  const [state, formAction] = useActionState(submitActionWithCurrentState, {
    users: [],
    error: null,
  });

return <form action={formAction}>...</form>

The submitActionWithCurrentState method returns a new state consisting of the modified users list and gives an error if a user with the given name already exists. Let's render the list of users and error (if any):

<div className="error">{state?.error}</div>
      {state?.users?.map((user) => (
        <div key={user.username}>
          Name: {user.username} Age: {user.age}
        </div>
      ))}

After you submit the form, the component re-renders and updates the state in the component.

List of submitted users stored as state

If you try to submit an existing user name you get an error:

Error if user already exists

useOptimistic

As the name suggests, useOptimistic optimistically updates the UI while an async operation is still underway. When a user submits a form that changes a piece of UI, this hook can "optimistically" show the expected result while the form is still submitting.

• If the form submission is successful, the UI remains the same.

• If the form submission fails, the UI reverts back to the previous state.

This allows you to immediately update the UI even if the form submission takes time:

const [optimisticState, setOptimisticState] = useOptimistic(actualState, updateFn);

The useOptimistic hook takes the following parameters:

• actualState, which is the value of the optimistic state when no action is pending.

• updateFn (optional), which is a function that takes the actual state and the value passed to the setOptimisticState method and calculates the optimisticState. If this parameter is not specified, the optimistic state is equal to the new value.

It returns the following:

• optimisticState, which is the optimistic (temporary) value shown while the action is pending.

• setOptimisticState, which is a function that sets the optimistic state to a new value.

Let's have a form that performs an async operation to change the title of the page:

import { useOptimistic, useState } from "react";

const OptimisticComponent = () => {
  const [title, setTitle] = useState("Title");
  const [optimisticTitle, setOptimisticTitle] = useOptimistic(title);
  const [error, setError] = useState(null);
  const pending = title !== optimisticTitle;
  const handleSubmit = async (formData) => {

  };
  return (
    <div>
      <h2>{optimisticTitle}</h2>
      <p> {pending && "Updating..."} </p>
      <form action={handleSubmit}>
        <input type="text" name="title" placeholder="Change Title" />
        <button type="submit" disabled={pending}>
          Submit
        </button>
      </form>
      <div className="error">{error && error}</div>
    </div>
  );
};

In the code above:

• We are displaying the optimistic value of the title, which is set to title state when no action is pending.

• We have defined a pending variable that is set to true if the current and optimistic state do not match. Depending on this, we display a pending text and disable the button.

• We display an error in case the async operation throws an error.

Now, let's call our async function that either resolves or rejects our request:

import { submitTitle } from "../../actions";

const OptimisticComponent = () => {

  ...

  const handleSubmit = async (formData) => {
    setError(null);
    setOptimisticTitle(formData.get("title"));
    try {
      const updatedTitle = await submitTitle(formData);
      setTitle(updatedTitle);
    } catch (e) {
      setError(e);
    }
  };

  ...

};

In the code above:

• We have updated the states as we originally did.

• Before calling the async operation, we set the optimistic state to the updated title we just submitted.

• If the promise rejects, the optimistic state reverts back to the original one, so no need to set it again.

Title Updating optimistically

use

The use method has not been released as a hook, but as part of the React API. Unlike React hooks, use can also be called inside if and for statements. However, use can only be called inside a Component or a Hook.

use lets you read the value of a Promise or a Context inside a component. Let's understand its usage in reading both context and promise.

Reading contexts

In case of contexts, use works similar to the useContext hook. It returns the value provided by the context to be used inside the component:

import { createContext, use } from "react";
import "../../styles.css";

const ThemeContext = createContext(null);
const UseHookWithContext = () => {
  return (
    <ThemeContext.Provider theme="dark">
      <MyComponent />
    </ThemeContext.Provider>
  );
};

const MyComponent = () => {
  const theme = use(ThemeContext);
  return (
    <div className={`myContainer theme-${theme}`}>
      <h2>Hi There!</h2>
    </div>
  );
};

The code above gives the following output:

Dark Theme

Unlike useContext, use provides more flexibility since it can also be used conditionally using if statements:

const CodeSnippet = ({canShow}) => {
    if(canShow) {
        const theme = use(ThemeContext)
        return <h2>Code snippet shown with {theme} theme </h2>
    }
    return null
}

Reading resolved values of promises

use returns the resolved value of the promise to be used inside the component. It integrates with the Suspense API to display a temporary message till a promise is resolved.

Let's have a client component with a promise passed down as a prop from a server component:

"use client";

import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

const DataContainer = ({ dataPromise }) => {
  return (
      <Suspense fallback={<p>Fetching Data...</p>}>
        <DataComponent dataPromise={dataPromise} />
      </Suspense>
  );
};

const DataComponent = ({ dataPromise }) => {
  const data = use(dataPromise);
  return <div>{data && data}</div>;
};

In the code above:

• The promise created in a server component is passed down to client component as a prop. This in turn, can be passed to the use method. This allows the client component to read the resolved value of the promise.

• The Suspense API renders the element passed to the fallback prop while the promise is still pending.

Data shown on button click

In case a promise rejects, there are two ways to display an error to the users:

1. Returning an error message in the catch block of the promise and treating it as a resolved promise:

export function fetchData() {
  return new Promise((resolve, reject) => {
    ...
    // ...

  }).catch((err) => err);
}

2. Wrapping the component with an ErrorBoundary:

Error Boundary rendered when Promise rejected

You can find the complete code in the CodeSandbox here. Feel free to fork it and play around.

This is not the end. React 19 has a lot more to offer. You can check out all the new features in the docs.

Currently, React 19 is still in beta version, so do not use it for production systems yet. However, you can install React 19 canary version by adding the following dependencies in your package.json file and running npm i:

"dependencies": {
    "react": "canary",
    "react-dom": "canary",
  },

Conclusion

The React Team has introduced several useful hooks that will improve convenience for developers.

The first three hooks: useFormStatus, useActionState, and useOptimistic change the way we handle forms. The use hook makes it really convenient to get the resolved value of a promise inside a component.

In this post, I have explained the syntax of each hook and demonstrated their usage examples. This would surely help you to understand these hooks and how to use them. I hope this helps you in your future projects.

If you have any questions or need further clarification, let me know. Your feedback is always valued and appreciated! Connect with me on Twitter for more updates and discussions. Thank you for reading, and I look forward to seeing you next time!

JavaScript remains one of the most in-demand programming languages in 2024. Many companies are looking for proficiency in JavaScript, and one of its frameworks like Angular and React. If you are an aspiring web developer, understanding what these companies look for in interviews is the key to unlocking great opportunities.

In this handbook, I'll delve into several essential JavaScript concepts that you must prepare before going to an interview. Equipped with the fundamentals and the following concepts, you'll position yourself as an impressive candidate in the web development landscape.

Table of Contents

• How to Use var, let, and const Keywords.

• What is Hoisting?

• How Do Closures Work?

• How to Implement Debouncing.

• How to Implement Throttling.

• What is Currying?

• What is the Difference between == and ===?

• How Does the this Keyword Work?

• How to Use the call, apply and bind Methods.

• What are Prototypes and Prototypal Inheritance?

• ‌How to Use the Spread Operator.

• How Does Array and Object Destructuring Work?

• What are Promises?

• How to Use the async and await Keywords.

• What is an Event Loop?

• How Event Propagation Works – Bubbling and Capturing.

• What are Generator Functions?

• How to Implement Polyfills for Array.map(), Array.reduce(), and Array.filter()

• Additional Thoughts

How to Use var, let, and const Keywords

In JavaScript, you can declare a variable in three ways: using var, let and const. It's essential to understand the difference between these three.

A var variable has global and function level scope. If the variable is declared globally, it can be accessed anywhere and if declared inside a function, it can be accessed anywhere within the function.

var a=5
function fun() {
    var b=4
}

console.log(a) // 5
console.log(b) // throws ReferenceError

A let variable has block level scope. This variable, if declared inside a block, cannot be accessed outside it. For example:

var a = 5;
if (a > 1) {
    var b = 6;
    let c = 7;
}
console.log(a); // prints 5
console.log(b); // prints 6
console.log(c); // throws ReferenceError

Here, variables a and b have global scope, so they can be accessed anywhere. Variable c cannot be accessed outside the if block since let only has block level scope.

const is used to declare a constant. Once a variable is declared with const, it cannot be modified.

const x = 5;
x = 6; // Throws an error

However, you can modify properties of an object, or elements of an array.

const obj = { name: 'kunal', age: 21 };
obj.name = 'alex';
console.log(obj); // { name: 'alex', age: 21 }

const arr = [1, 2, 3];
arr[1] = 4;
console.log(arr); // [ 1, 4, 3 ]

What is Hoisting?

Hoisting refers to JavaScript's default behavior that moves all variables and function declarations to the top. This means you can use them before they are declared.

x=5 
console.log(x) // prints 5 
var x

In the code above, JavaScript has moved the variable declaration to the top of the code block. That is: it is similar to declaring x at the first line.

In the case of functions, the declarations are also moved to top:

function foo() {
    console.log("foo called");
}

foo(); // foo called

However, this does not work with let and const.

x = 5; // throws ReferenceError
let x;

fiz(); // throws ReferenceError
const fiz = () => { console.log("fiz called") };

How Do Closures Work?

Closures are an important concept in JavaScript. When you have a function inside another function, the inner function has access to all the variables of the outer function.

But when this inner function is returned by the outer function, the inner function can be called anywhere outside the outer function and it can still access those variables.

function fun() {
    let count = 0;
    return () => {
        count++;
        console.log(count);
    };
}

const innerFun = fun();
innerFun(); // prints 1
innerFun(); // prints 2
innerFun(); // prints 3

Here, fun() declares and initializes a variable count. Then, it returns an inner function that increments count before printing it. Now, when you call innerFun() anywhere outside the fun() method, it can still access count and increment it.

This is the concept of closures. You can understand more about closures in the following post by Matías Hernández.

How to Implement Debouncing

Debouncing is a technique that delays a function call by few seconds and ensures that there is always a delay between function call and execution.

When you call a function, it gets executed after a delay. However, if you call the function again within that delay, the previous call is cancelled and a new timer is started. The same process repeats for each subsequent function call.

Let's see how to implement it:

function debounce(func, delay) {
    let timeout = null;
    return (...args) => {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
            func(...args);
            timeout = null;
        }, delay);
    };
}

Debouncing takes a function and a delay as parameters, and returns a new, debounced function. When you call the debounced function, it will execute after delay milliseconds. If the function is called within that time, it cancels the previous call and waits for delay again.

Let's test this behavior:

function fun(a, b) {
    console.log(`This is a function with arguments ${a} and ${b}`);
}

const debouncedFun = debounce(fun, 500);
debouncedFun(2, 3);
debouncedFun(2, 3);
debouncedFun(2, 3); // This is a function with arguments 2 and 3

The first two calls do not execute, while the third one does, after 500ms. Debouncing uses the concept of closures, so it's important to understand them first.

Debouncing has plenty of applications, with the most popular one being the auto-complete functionality in search bars. I have explained debouncing in detail in the following post:

How to Implement Throttling

Throttling is a technique that limits the rate at which a function is called. A throttled function executes for the first time and can only be called again after a certain delay. If it is called within the delay, nothing happens.

Let's see how to implement it:

function throttle(func, delay) {
    let timeout = null;
    return (...args) => {
        if (!timeout) {
            func(...args);
            timeout = setTimeout(() => {
                timeout = null;
            }, delay);
        }
    };
}

throttle() takes a function and a delay as parameters, and returns a throttled function. When you call the throttled function, it executes the first time and starts a timeout with delay. Within this time, no matter how many times you call the throttled function, it won't execute.

Let's test this behavior:

function fun(a, b) {
    console.log(`This is a function with arguments ${a} and ${b}`);
}

const throttledFun = throttle(fun, 500);

throttledFun(2, 3); // This is a function with arguments 2 and 3
throttledFun(2, 3);

setTimeout(() => {
    throttledFun(2, 3);
}, 300);

setTimeout(() => {
    throttledFun(2, 3); // This is a function with arguments 2 and 3
}, 600);

Here, the first call executes immediately, and for the next 500ms, no function call will execute. The last one executes since it is called after 500ms.

Throttling also uses the concept of closures. I have explained throttling in detail in my post, so check it out:

What is Currying?

Currying is a technique where a function with multiple arguments is transformed into a sequence of functions, with each function taking a single argument and returning another function. For example, consider the function below:

function add(a, b, c) {
    return a + b + c;
}

With currying, the above function can be written as:

function curryAdd(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}

Here, each function inside curryAdd takes one argument and returns another function till all arguments are collected. curryAdd is also known as a higher-order function.

Currying allows you to reuse partial implementations of a function. In case you do not have all the arguments available, you can fix some arguments of the function initially and return a reusable function.

// Reusable function
const addTwo = curryAdd(2);
console.log(addTwo); // prints the function

// Calling final result
const result1 = addTwo(5)(10);
console.log(result1); // 17

const result2 = addTwo(3)(5);
console.log(result2); // 10

addTwo is a reusable function that can be used later, when additional arguments become available.

Thus, currying enhances code modularity and flexibility with partial function application. It also allows you to create functions that are tailored to specific needs as seen in the example above.

Currying simplifies complex functions by breaking them down into simpler, more manageable parts. This leads to cleaner and readable code.

What is the Difference between == and ===?

This is really simple, yet a very commonly asked in interviews.

let a = 1;
let b = "1";

console.log(a == b); // true
console.log(a === b); // false

• == compares only the value of a and b,

• === compares both value and data type of a and b

How Does the this Keyword Work?

The this keyword is the object that you are currently referencing. Its value is set to the context in which you are using it. When referenced globally, this refers to the window object.

console.log(this) // prints window {}

this can be used to access properties of an object.

const obj = {
    name: 'kunal',
    age: 21,
    getInfo() {
        console.log(`Name: ${this.name}, Age: ${this.age}`);
    }
};

obj.getInfo();

Refer to the docs to learn more about the this keyword.

How to Use the call, apply and bind Methods

When you use this inside a function, its value is set to the object on which the function is called. Let's take an example:

function getInfo() {
    console.log(`Name: ${this.name}, Age: ${this.age}`);
}

call, apply and bind are used to set the value of the this keyword inside a method.

call

To call getInfo() function on an object, use the call function. Let's create two objects and call getInfo() on these objects.

const ob1 = { name: 'alex', age: 25 };
const ob2 = { name: 'marcus', age: 23 };

getInfo.call(ob1); // Name: alex, Age: 25
getInfo.call(ob2); // Name: marcus, Age: 23

call sets the value of the this keyword inside a function.

apply

The apply method is similar to call, but it differs in the way you pass arguments. Consider a function with arguments:

function getInfo(a, b) {
    console.log(`Name: ${this.name}, Age: ${this.age}`);
    console.log(`Args: ${a} and ${b}`);
}

const obj = {
    name: 'alex',
    age: 25
};

getInfo.call(obj, 2, 3);
getInfo.apply(obj, [2, 3]);

bind

bind is used to create a new function that has its this keyword set to one object. Let's use the above getInfo function as example.

const obj = {
    name: 'alex',
    age: 25
};

const objGetInfo = getInfo.bind(obj, 2, 3);
objGetInfo();

When bind is called on getInfo() function, it returns a new function that is bound to obj. Now, every time you call the objGetInfo() function, this keyword refers to obj.

All three methods are similar. That is, they set the value of this keyword. However, a key difference in bind is that it returns a new function, whereas call and apply simply just call the function.

What are Prototypes and Prototypal Inheritance?

Inheritance is a concept in object oriented programming that allows an object to inherit properties and methods from another object. However, inheritance works differently in JavaScript.

In JavaScript, every object has a property that links to another object called a prototype. The prototype itself is an object that can have its own prototype, thus forming a prototype chain. This chain ends when we reach a prototype equal to null.

Prototype allows you to inherit methods and properties from another object. When a property does not exist on an object, JavaScript searches its prototype and so on till it reaches the end of the prototype chain.

Let's understand with an example.

let animal = {
    eats: true,
    walk() {
        console.log("Animal is walking");
    }
};

const rabbit = Object.create(animal);
rabbit.jumps = true;
rabbit.walk(); // Animal is walking

Object.create creates a new object rabbit with its prototype set to animal. You can also set additional properties of the new object.

Also, the walk() method does not exist on rabbit, so it searches the object's prototype animal. This means the rabbit object has inherited the properties and methods of the animal object.

You can also use the ES6 Object.setPrototypeOf method on any object.

const dog = {
    bark() {
        console.log("Dog barking");
    }
};

Object.setPrototypeOf(dog, animal);
console.log(dog.eats); // true
dog.walk(); // Animal is walking

You can also use a function as a constructor and set its prototype using the prototype property.

function Animal(name) {
    this.name = name;
}

Animal.prototype.walk = function () {
    console.log(`${this.name} is walking`);
};

const dog = new Animal("Dog");
console.log(dog); // Animal { name: 'Dog' }
dog.walk(); // Dog is walking

You can learn more about prototypes and inheritance in JavaScript in the following post by Germán Cocca.

‌How to Use the Spread Operator

The spread operator is used to spread out contents of an array or object into individual elements or collect a bunch of elements into a single object. It has following use cases:

Spread operator can be used to copy an array into a new one:

const arr1 = [2, 4, 5];
const arr2 = [...arr1];

console.log(arr1); // [2, 4, 5]
console.log(arr2); // [2, 4, 5]
console.log(arr1 == arr2); // false

arr1 and arr2 are completely different objects as shown with the equality operator.

You can also reuse fields from one object while creating a new object:

const obj1 = { name: 'kunal', age: 23 };
const obj2 = { ...obj1, gender: 'male', city: 'Mumbai' };

console.log(obj2); // { name: 'kunal', age: 23, gender: 'male', city: 'Mumbai' }

You can collect multiple arguments passed to a function into an array.

function fun1(...args) {
    console.log(args);
}

fun1(1, 2, 3, 4, 5); // [ 1, 2, 3, 4, 5 ]

Or you can pass elements of an array as individual arguments to a function.

function fun2(a, b) {
    console.log(`${a} and ${b}`);
}

const numbers = [1, 2];
fun2(...numbers);

How Does Array and Object Destructuring Work?

Similar to the spread operator, you can spread out elements of an array or an object into individual variables.

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

This is the same for objects:

const obj = { name: 'kunal', age: 22, gender: 'male' };
const {name, age, gender} = obj;

console.log(name); // kunal
console.log(age); // 22
console.log(gender); // male

What are Promises?

Promises are a very important concept in JavaScript, almost certain to be asked in interviews. Promises are used for asynchronous operations in JavaScript like timeouts or API calls.

Promises use a Promise object that exists in one of three states: pending, fulfilled (resolved), and rejected. When an asynchronous operation ends, a promise can either be resolved (successful) or rejected (failure).

Let's take a simple example:

function asyncOperation() {
    return new Promise((resolve, reject) => {
        const x = 1 + Math.random() * 10;
        if (x < 5) 
            resolve("Successful");
        else 
            reject("Error");
    });
}

The above function returns a promise that performs an asynchronous operation.

• If the operation is successful, the resolve method is called to indicate that the promise has been fulfilled.

• If the operation fails, the reject method is called to indicate that the promise has been rejected.

In this example, these methods are called at random. To handle this promise in your code, use the then and catch methods.

asyncOperation()
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    });

• The then method takes a callback function that executes if the promise was resolved. It takes a response object as an argument that is equal to the object you pass in the resolve method.

• The catch method takes a callback function that executes if the promise was rejected and takes an error object as argument that is passed in the reject method.

The above code prints "Successful" and "Error" at random.

Apart from the basics, the Promise object also contains useful methods that work with multiple promises: Promise.all(), Promise.any(), Promise.race().

Read the following tutorial to learn about promises in detail:

How to Use the async and await Keywords

await keyword pauses execution of a function till a promise has been resolved or rejected. await can only be used inside an async function. Let's take an example:

function dataPromise() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data retrieved"), 500);
    });
}

async function fetchData() {
    try {
        const res = await dataPromise();
        console.log(res); // Data retrieved (after 500ms)
    } catch(err) {
        console.log(err);
    }
}

fetchData();

When dataPromise() is called, the execution of the function pauses for 500ms. The execution continues after the promise has resolved. To handle errors, surround the code with a try-catch block.

The await keyword also makes it easier to work with multiple promises that run one after the other.

function promise1() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Promise 1 resolved"), 500);
    });
}

function promise2() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Promise 2 resolved"), 300);
    });
}

async function fetchData() {
    try {
        const res1 = await promise1();
        console.log(res1); // Promise 1 resolved (after 500ms)
        const res2 = await promise2();
        console.log(res2); // Promise 2 resolved (after 300ms)
    } catch(err) {
        console.log(err);
    }
}

fetchData();

async and await makes it easier to work with promises and also makes your code cleaner and readable by removing nesting in the code.

What is an Event Loop?

Event loop explains the mechanism behind asynchronous operations and event handling. This is a crucial concept in JavaScript that explains its runtime model and thus, one of the most commonly asked question in interviews.

Instead of providing a brief explanation, I think you should learn it in detail and understand it fully. Read the MDN Docs to understand event loop in detail, with the help of diagram.

If you prefer videos, you can also watch the following video by Philip Roberts:

How Event Propagation Works – Bubbling and Capturing

Event propagation takes place when an event is captured and handled by the target element and all its ancestors. Take the following example:

<body>
    <div id="box"> <button id="button">Click Me</button> </div>
    <script src="script.js"></script>
</body>

When you click the button, you have also clicked the div element as well the body. The event is propagated throughout the DOM tree. Let's add handlers to all the above elements:

document.body.addEventListener("click", () => {
    console.log("Body clicked");
});

document.getElementById("box").addEventListener("click", () => {
    console.log("div clicked");
});

document.getElementById("button").addEventListener("click", () => {
    console.log("Button clicked");
});

Event propagation occurs in two ways:

Event Bubbling

When the button is clicked, the event handler of the button is called first. Then, the event bubbles up the DOM tree and the event handlers of parents are called sequentially from the immediate parent to the highest ancestor. That is: the div and body elements respectively.

Event Bubbling

‌Event Capturing

This works similar to event bubbling, but in reverse. The event is first captured by the root element, then travels down the DOM tree to the target element.

The event handlers are called in sequence starting from the root element, down to the target element. This can be achieved by passing true as the third parameter in the addEventListener() function.‌

document.body.addEventListener("click", () => {
    console.log("Body clicked");
}, true);

Event Capturing

However, this looks counter-productive. After all, the user only wants to click the button, they have no idea of the DOM tree structure. So, to prevent this behaviour, we can use the stopPropagation() method.

document.getElementById("button").addEventListener("click", (event) => {
    event.stopPropagation();
    console.log("Button clicked");
});

Stopped propagation

What are Generator Functions?

Generator functions are special type of functions that can pause their execution and resume it later. They also return a value each time they pause execution.

Generator functions can be used to return a sequence of values in an iterative manner as opposed to normal functions that return only once.

Following is a basic example of a generator function:

function* generatorFunction() {
    yield 1;
    yield 2;
}

A generator function is declared with function* and the yield keyword is used to pause execution and return a value. The above syntax creates a GeneratorFunction object.

const gen = generatorFunction()

‌This object uses an iterator to execute a generator function. The iterator provides a next() method that executes the function's body till the next yield statement and returns an object containing the yielded value and a done property (Boolean), which indicates if the generator function has reached its end.

Let's call the generator function:

console.log(gen.next().value); // 1
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: undefined, done: true }

‌Here, the first call to next() yields 1 and the second one yields 2. The last one yields nothing and sets the done flag to true as there are no more yield statements.

You can also loop over a generator function using for loop:

for(value of generatorFunction()) {
  console.log(value)
}

In this way, you can control the execution of a generator function by entering and exiting a function at any time.

How to Implement Polyfills for Array.map(), Array.reduce(), and Array.filter()

JavaScript has evolved a lot since its inception. Several methods and constructs have been added to JavaScript that didn't exist before. Most modern browsers use the latest versions of JavaScript.

However, there are several applications still running on older browsers that use older versions of JavaScript . Array methods like map, reduce and filter may not be available. Therefore, you may have to provide polyfills for these methods.

Polyfills are pieces of code that provide modern functionality to older browsers that don't support it. This ensures that your code runs seemlessly on different browsers and versions.

Most companies have websites that still cater to users and systems running old browsers. So, knowing how to write polyfills for frequently used methods is important.

In our case, we are going to write polyfills for Array.map, Array.reduce and Array.filter methods. This means we are going to write our own implementations instead of using the default ones.

Array.map

This method takes a callback function as a parameter, executes it on each array element and returns a new, modified array.

The callback function takes three arguments: the array element, index and the array itself. The last two arguments are optional.

Array.prototype.map = function(callback) {
  var newArray = [];
  for (var i = 0; i < this.length; i++) {
    newArray.push(callback(this[i], i, this));
  }
  return newArray;
};

‌The logic is simple. Call the function for each element of the array and append each value to the new array. The this keyword is the object on which you are calling the function, in this case, the array.

Array.filter

This method also takes a callback function as a parameter. The callback function runs a condition on each array element and returns a Boolean value. The filter method returns a new, filtered array containing elements that satisfy the condition.

This callback function takes three arguments: the array element, index and the array itself. The last two arguments are optional.

Array.prototype.filter = function(callback) {
  var filteredArr = [];
  for (var i = 0; i < this.length; i++) {
    var condition = callback(this[i], i, this);
    if (condition) {
      filteredArr.push(this[i]);
    }
  }
  return filteredArr;
};

Here, use the Boolean value returned by the callback function to add elements to the new array.

Array.reduce

This method takes a callback function and an initial value as parameters and reduces the array to a single value. This is done by executing the function on the accumulator and current value and storing the result into the accumulator.

The callback function takes four arguments: the accumulator, current element, index and array itself. The last two arguments are optional.

Array.prototype.reduce = function(callback, initialValue) {
    var accumulator = initialValue;
    for (var i = 0; i < this.length; i++) {
        if (accumulator !== undefined) {
            accumulator = callback(accumulator, this[i], i, this);
        } else {
            accumulator = this[i];
        }
    }
    return accumulator;
};

Initially, set the accumulator to the initial value. Execute the callback function for each array element and store the result in accumulator. If the accumulator is undefined, then set it to the element itself.

Let's test these methods:

const arr = [1, 2, 3];
console.log(arr.map(ele => ele * 2)); // [ 2, 4, 6 ]
console.log(arr.filter(ele => ele < 2)); // [ 1 ]
console.log(arr.reduce((total, ele) => total + ele, 0)); // 6

Note: Before adding a polyfill for any property, always check if the property exists on the object's prototype, or you might override the existing behaviour. For example:

if (!Array.prototype.map)

Additional Thoughts

Before we wrap up, I would like to share a few additional thoughts. Cracking a JavaScript interview isn't just about memorizing concepts. Make sure you dive deep into each topic and understand it thoroughly, including its applications.

Additionally, don't underestimate the importance of soft skills like communication. Conveying your thoughts clearly to the interviewer is as important as knowing your stuff.

When you're asked questions about any of the above concepts, start by briefly explaining the concept and then use an example for a more detailed explanation.

Explaining with examples is crucial for answering any interview question. It makes it easier for interviewers to understand your thought process. In this post, I've also followed a similar pattern while explaining each concept.

Lastly, keep revisiting this handbook throughout your interview preparation. Feel free to use it as a cheat sheet. If you are an experienced developer, this handbook will also help you revisit and reinforce these concepts.

Conclusion

Interviews can be quite scary and unpredictable. While there is a high demand for JavaScript skills, the competition is equally intense. Building a strong foundation is crucial for successful interview preparation.

In this handbook, I have outlined several important topics to prepare for your next JavaScript interview and provided detailed explanations for each concept. While this is not an exhaustive list, it covers several critical concepts. If you think I've missed any important topics, please let me know.

If you are unable to understand the content or find the explanation unsatisfactory, comment your thoughts below. New ideas are always appreciated! Feel free to connect with me on Twitter.

Good luck with your interviews !!!

Once you have planned out your APIs, there's one crucial step you need to take care of: securing your APIs. You don't want your APIs exposed to anyone on the internet (unless you are building for open source).

Authentication ensures that your APIs can only be accessed by authenticated users of your application. A user can be authenticated with username and password, or via access token.

In this post, we are going to see how to secure your APIs using OAuth2 and access tokens. I am assuming you have a basic knowledge of Java and Spring Boot. If not, then you can check out this course on freeCodeCamp's YouTube channel.

Table of Contents

1. What is OAuth2?

2. How to Set Up the Spring Boot Application

3. Web Security Configuration

4. Public and Private APIs

5. Testing APIs with and without Access Token

6. How to Get the User's Details From the Access Token

What is OAuth2?

OAuth2 is a framework that lets third-party applications access your service on behalf of an end user. It is widely used for authentication and authorization in modern applications.

There are four components in the OAuth2 framework:

• Resource Owner: The end-user of your application.

• Authorization Server: The third-party application that authenticates the user and issues an access token after successful authentication.

• Client: The user interface through which the user wants to access your resources. The client could be a mobile app, web app, or a desktop app. The client requires an access token to access your APIs.

• Resource Server: The server hosting the protected resources. It validates the access token and grants access to the resources if authentication is successful.

The user, through the client, requests an access token from the authorization server. If authentication is successful, the client uses this token to access the protected APIs exposed by the resource server.

In this post, we are only going to focus on implementing the resource server.

How to Set Up the Spring Boot Application

To set up your application, navigate to Spring Initializr.

Spring Initializr

Choose Gradle or Maven for the project, the Spring Boot version, and the name of the project. Add the following dependencies: spring-boot-starter-web and oauth2-resource-server.

Click on Generate to download the Spring Boot application and once downloaded, extract the zip file. You should now have a running Spring Boot application with the dependencies fully loaded. Open IntelliJ (or any IDE of your choice) and select this project to start working.

You can find the complete code for this tutorial on GitHub.

Web Security Configuration

First, open application.properties and add the following property:

spring.security.oauth2.resourceserver.jwt.issuer-uri: ${JWT_ISSUER_URI}

You can find the issuer-uri in the open-id configuration of the OAuth2 service that you are using. For instance, check out the Google OAuth2 config.

Next, let's configure Spring Security.

To implement the resource server, you need to have Spring Security as one of your dependencies. Here, we don't need to add it separately since the oauth2-resource-server uses Spring Security.

When you add Spring Security in your dependencies, Spring Boot enables authentication for each API you expose. The default one is username and password-based authentication.

This happens because Spring Security has its own SecurityAutoConfiguration class that contains the default security configuration. But, we haven't added Spring Security in our dependencies.

Since we do not want username and password-based authentication, we need to disable the auto configuration. Go to the main class and add the following exclusion:

@SpringBootApplication(exclude = { SecurityAutoConfiguration.class})
public class Oauth2ResourceServerTutorialApplication {
    public static void main(String[] args) {
        SpringApplication.run(Oauth2ResourceServerTutorialApplication.class, args);
    }
}

If you run the application now, it throws an error.

Error without configuration

Let's add our own configuration now. Create a new Java class SecurityConfig with the following annotations:

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    // Beans here
}

@Configuration indicates that this is a configuration class that contains several Bean methods, that are responsible for creating beans. Beans are simply objects that form the building blocks of a Spring Boot application. @EnableWebSecurity tells Spring Boot to enable Web Security with your configurations.

Create a method that returns a bean of type SecurityFilterChain. The security filter chain bean intercepts incoming requests and applies custom filters to them. This is where you can apply different kinds of authorization to different requests.

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
                .authorizeHttpRequests((authz) -> authz
                        .requestMatchers("/public/**").permitAll()
                        .anyRequest().authenticated()
                )
                .oauth2ResourceServer(oauth2 -> oauth2.jwt(Customizer.withDefaults()));
        return http.build();
    }

Let's understand the key parts of this code:

• The filterChain() method takes an HttpSecurity object as an argument. This class from Spring Security allows you to configure requests.

• The method authorizeHttpRequests() takes an object that we have represented as a lambda expression.

• We have used the requestMatchers() method to match a route that will be accessible without authentication. In our case, any route starting from /public will be accessible to anyone. Requests to any other route will need authentication.

• The oauth2ResourceServer() method sets up our application as an OAuth2 resource server. Here, we specify that JWT authentication will be used with default customizers.

• Lastly, http.build() builds the HttpSecurity object and returns it.

In this project, we have configured web security in the above manner. But if you have any other requirements you may need a different configuration. For example, if you have privileged roles like admin in your application, you can specify which routes each role can access, and so on.

Visit the JWT resource server docs to understand different ways you can customize web security.

Write APIs in the Controller Class

Let's write two simple APIs. Create a class MainController that will expose these APIs:

@RestController
public class MainController {

    @GetMapping("/public")
    public String homePage() {
        return "Hello from Spring boot app";
    }

    @GetMapping("/private")
    public String privateRoute() {
        return "Private Route";
    }
}

The @RestController indicates that this class will handle HTTP requests and return the data to the client, typically in JSON format. We have written a public and a private API.

Save the file and run the application.

Testing the APIs

Let's test the above APIs using Postman, without an authorization header.

/public route

/private route

In the above two API calls, the /public route returned a response, while the /private route threw an error with a status of 401 Unauthorized.

This is because, in our configuration, we have made all routes starting with /public accessible without authentication. All the other routes would need some form of authentication. In our case, we need a Bearer Token to access the private route.

Let's include an authorization header in the request to the /private endpoint.

/private route request with access token

When we include an authorization header with the access token, the private route returns a response. For this, and any other routes not starting with /public, we need to pass an access token in the header.

We are not going to see how to obtain an access token, since we are only focussing on the resource server. The OAuth2 Client is responsible for obtaining an access token. I'll cover that in a future post.

How to Get the User's Details From the Access Token

When you make a request to a private route, the security filter intercepts this request and looks for a Bearer Token. If a token exists, it decodes the token and extracts the authentication information from the token. You can understand this whole process in detail from the OAuth2 Resource Server docs.

If the token is valid and authentication is successful, the authentication data is set on the SecurityContextHolder class. The SecurityContextHolder contains the details of the authenticated user. We use this class to extract the user's information such as name, email, and so on.

Let's see how we can get these user details. First, we get an Authentication object from the SecurityContextHolder:

Authentication authentication = SecurityContextHolder.getContext().getAuthentication();

Then, we use the getPrincipal() that returns an object:

Object principal = authentication.getPrincipal();

Since we are using JWT Authentication, the above object can be type-casted into an object of type Jwt. The object contains the following fields:

{
    "tokenValue": token_value,
    "issuedAt": "",
    "expiresAt": "",
    "headers": {...},
    "claims": {        
        "name": full_name,
        "email": user_email,
        "given_name": first_name,
        "family_name": last_name,
        "picture": picture_link,
        ...other fields
    },
    "subject": "",
    "id": null,
    "issuer": issuer_link,
    "audience": [...],
    "notBefore": null
}

Here, we can get the user data from the claims field:

Map<String, Object> claims = ((Jwt) principal).getClaims();

Using the above map, we can get the user's information using the corresponding key value. Let's write this logic in a separate class CurrentAuthContext:

public class CurrentAuthContext {
    private static Map<String, Object> extractClaim() {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        Object principal = authentication.getPrincipal();
        Map<String, Object> claims = ((Jwt) principal).getClaims();
        return claims;
    }

    public static String getUserEmail() {
        return (String) extractClaim().get("email");
    }
}

You can add more methods to get the details you need. To get the user email anywhere in the application, just call CurrentAuthContext.getUserEmail() or any other method returning the value you need.

I haven't implemented custom error handling here. You can reach out to me with different ways to implement custom error handling.

Conclusion

OAuth2 provides a robust framework for securing your APIs while providing access to authorized users. In this post, we started with understanding OAuth2 and its components.

Spring Security is a fundamental part of the Spring OAuth2 Resource Server. We learned how to implement security configurations as per our requirements. Then, we defined public and private APIs and tested them with and without an access token.

A private API can only be accessed with an access token passed through the authorization header. We also implemented some logic to extract the user's information from the access token with the SecurityContextHolder class.

I attached reference links to docs at various places for further understanding of these concepts. That's all for today. I hope this helps in your future projects.

If you are unable to understand the content or find the explanation unsatisfactory, reach out to me. New ideas are always appreciated! Feel free to connect with me on Twitter. Till then, Goodbye!!

As a developer, making your website user-friendly is important. This goes a long way toward the product's success, and a key part of the user experience is the website's performance.

In a previous tutorial, I discussed how to improve the performance of any feature using a technique called debouncing. And you can use a similar technique, called throttling, but in a slightly different scenario. You'll learn how to implement throttling in this article.

For this guide, I am assuming you have a basic knowledge of JavaScript. Don't worry if you are a beginner – I have provided simple and detailed explanations to guide you through. So, let's dive right into it!

Table of Contents

1. What is Throttling?

2. How to Implement Throttling in JavaScript

3. What is a Closure in JavaScript?

4. Use Case of Function Throttling

What is Throttling?

Throttling is a technique used to limit the rate at which a function is called. Throttling transforms a function such that it can only be called once in a specific interval of time.

Let's understand this with an example. Let's take a function fun():

function fun() {
    console.log('This is a function')
}

We want to modify this function so that it can only be called once in 500ms. So, throttling will take fun() as an input, and return a modified (throttled) function throttledFun() that can only be executed 500ms after the previous function was executed.

When you call throttledFun() multiple times within 500ms, fun() will only be executed the first time. You will have to wait 500ms before fun() can be executed again. This happens after every subsequent function call. Thus, fun() can only be called once every 500ms.

How to Implement Throttling in JavaScript

Let's first understand what we want to achieve with throttling:

• Call the function immediately the first time.

• After each call, prevent the function from being called again for a certain time period.

• Once that time period has passed, the function can be called again.

To do all this, let's first create a helper function that will return a throttled function:

function throttle(func, delay) {
      return () => {}   // return throttled function
}

For any use cases, the throttled function will be used instead of the original fun().

Let's start by simply calling the function like this:

function throttle(func, delay) {
  return () => {
        func()
    }
}

Once the function is called, we want to block it from being called again for a certain time period delay. Once the time has passed, we want to unblock the function. We can achieve this behaviour using setTimeout.

For now, let's keep the setTimeout empty. You'll understand how it works in a minute.

setTimeout(() => {}, delay)

Next, we'll declare a variable timeout that will be initialized only once in the outer function (that is the throttle() function). The setTimeout method returns a unique timeout id that we can use to identify a timeout. We'll assign the current timeout id to timeout.

function throttle(func, delay) {
    let timeout=null
    return () => {
        func()
        timeout=setTimeout(() => {
            // do something
        }, delay)
    }
}

Since timeout contains the id of the current timeout, we add a condition at the start of the throttled function to check if a timeout exists before calling the original function func().

function throttle(func, delay) {
    let timeout=null
    return () => {
        if(!timeout) {
            func()
            timeout=setTimeout(() => {
                // do something
            }, delay)
        }
    }
}

Initially, timeout is null, so the function is executed. The throttled function then starts a new timeout and assigns it to the timeout variable. In the next function call, it checks if a timeout exists before calling func(). If a timeout already exists, it does not execute func().

But what happens after the time period of delay has passed? Inside the setTimeout we need to do something that enables func() to be called again. Since we are using timeout to control the function calls, we set it to null after delay milliseconds.

timeout=setTimeout(() => {
    timeout=null
}, delay)

Now, when you call the function, it is executed and the process repeats by starting a new timeout. We have successfully throttled the function.

But there's something fundamental that we are still overlooking. In the current function call, once we assign setTimeout to the timeout variable, for the next one we are assuming that timeout is still valid and holds the value that we want – even if the variable is declared inside the throttle() function.

How is the inner function still able to have access to the variable long after the throttle() function has finished execution? It uses a concept called a closure. Let's take a quick detour to visit this concept.

What's a closure in JavaScript?

In JavaScript, an inner function always has access to the local variables of the outer function. In our case, the inner function has access to timeout that has function level scope in the throttle() method.

But when the outer function returns this inner function, the inner function still holds a reference to the local variables of the outer function long after the outer function has finished execution. This is the concept of a closure.

Let's understand closures with an example.

function outerFunction() {
  const x = 5;

  return () => {
    console.log(x);
  }
}

const inner = outerFunction();

inner(); // prints 5

// console.log(x)   Throws reference error

Here, if we call inner(), the code runs without any errors and prints 5. But, if we try to access x directly, JavaScript throws a reference error.

JavaScript Reference Error: "x is not defined"

Here, inner() closes over x and only this function can use the variable and no one other one can. We cannot access the variable explicitly.

You can check out this beginner-friendly tutorial to learn more about closures.

Back to throttling

Let's continue from where we left off.

function throttle(func, delay) {
    let timeout=null
    return () => {
        if(!timeout) {
            func()
            timeout=setTimeout(() => {
                timeout=null
            }, delay)
        }
    }
}

We have seen that JavaScript uses closures to hold access to timeout every time we call the throttled function.

With this, we have a basic implementation of function throttling.

Let's test it out by using the above fun() method and throttling it with a delay of 500ms. This function should only be able to execute once every 500ms.

const throttledFun = throttle(fun, 500)

Let's call throttledFun() in different ways and see how it executes.

throttledFun(); // This will execute immediately
throttledFun(); // This will be ignored
setTimeout(() => {
  throttledFun(); // This will also be ignored
}, 300);
setTimeout(() => {
  throttledFun(); // This will execute
}, 600);

The first function call will execute immediately. For the next 500ms (throttling delay in this example), no matter how many times you call throttledFun(), nothing will happen.

So, the second function call and the third one won't execute, because they occur within 500ms of the first call. Once 500ms have passed, the next function call – that is, the last one – will execute, since the call is being made after 500ms.

Thus, it will print the following output:

This is a function
This is a function // Printed after 600ms

The solution is not complete yet. Our approach does not take into account function arguments. So, let's modify fun() to have two arguments:

function fun(a,b) {
    console.log(`This is a function with args ${a} and ${b}`)
}

To incorporate arguments, use the spread operator ... and store all arguments in a variable args:

function throttle(func, delay) {
    let timeout=null
    return (...args) => {
        if(!timeout) {
            func(...args)
            timeout=setTimeout(() => {
                timeout=null
            }, delay)
        }
    }
}

Now, call throttledFun() again, with arguments like this:

throttledFun(2,3);

This will print This is a function with args 2 and 3.

Use Case of Function Throttling

Let's see how throttling is used in practical applications. We'll take a button that makes a call to the backend server when a user clicks it. An API call is made every time someone clicks the button.

But an API request can take some time, and if the user clicks the button again, or repeatedly in a short time, more and more API calls are made which could overload the server. To avoid this behaviour, we use function throttling. Let's implement this with React.

Set Up the Project

Run create-react-app in your terminal or use a modern built tool like Vite to create your React app. Remove the existing boilerplate code. There is no need to install any additional dependencies. Run npm start command to start the project. You can find the complete code on GitHub.

I have set up a Node server to fetch data for the app. You can find it in the Git repo. Run the node server command to start it. I am not going to show the Node.js code as it's out of the scope of this tutorial.

Let's start with the implementation.

App Component

In the App component, let's create a button with an onClick handler that makes an API call to the Node server.

function App() {
  const fetchData = async () => {
    const resp = await fetch("http://localhost:8000/data");
    return resp.json();
  };
  const handleClick = () => {
    fetchData().then((data) => {
      console.log(data);
    });
  };

  return (
    <div className="App">
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

export default App;

Now, let's click this button repeatedly.

Multiple API Calls

Here, an API call is made every time the button is clicked. So, if the user clicks on the button repeatedly, a lot of API calls will be made in one second. This may overload the server.

To tackle this, we need to prevent the API from getting called on every click of the button. Let's see how to achieve this with throttling.

Implement Throttling using a Custom Hook

We'll write the throttling logic inside a custom hook. Since you may need throttling in multiple places in your application, it is recommended to put the logic inside a custom hook.

Create a new folder called custom-hooks. Inside it, create a file useThrottle.js. Inside the file, create and export new function useThrottle(). The method should take a function and delay as parameters and return the throttled function.

const useThrottle = (func, delay) => {
  let timeout = null;
  return (...args) => {
    if (timeout) {
      return;
    }
    func(...args);
    timeout = setTimeout(() => {
      timeout = null;
    }, delay);
  };
};

export default useThrottle;

Now, inside the App component, call this method and pass the click handler handleClick() and a delay of 1000ms.

const handleClickThrottled = useThrottle(handleClick, 1000);

We'll use this function as the event handler for our button.

<button onClick={handleClickThrottled}>Click Me</button>

Output

API Calls after Throttling

After clicking the button repeatedly for two seconds, only two API calls are made.

By limiting the number of times your APIs are called, throttling improves the performance of your application.

Conclusion

In this tutorial, you learned what throttling is and how to implement it. Throttling allows you to control the rate at which a function can be executed in a specific period.

Throttling uses an important concept called closures. They allow you to work with local variables even after a function has finished execution. Closures can be quite confusing for beginners, so take your time with them.

After that, I showed you a common use case of throttling, where you can control how many times an API call can be made on multiple button clicks. I utilized custom hooks to implement throttling in React. This serves to improve the performance of web applications. I hope this helps you in your future projects.

If you are unable to understand the content or find the explanation unsatisfactory, let me know. New ideas are always appreciated! Feel free to connect with me on Twitter. Till then, goodbye!

Multithreading is a method of achieving concurrency. It uses the concept of threads – lightweight processes – to execute multiple tasks in parallel. A very popular application of multithreading is the producer-consumer problem.

In this tutorial, we are going to understand what the producer-consumer problem is and touch upon threads and multithreading briefly. Then, we are going to understand how to solve the producer-consumer problem in Java using threads.

Now, I assume you have a basic knowledge of Java. If not, then check out the following resources.

• Free Java Courses for Beginners

• Basics of Java Programming

Table of Contents

• What is the Producer-Consumer Problem?

• Solution using Producer and Consumer Threads and Issue with Synchronization

• Introducing Synchronization in the Message Queue Class

• Producer with Multiple Consumers

• Solution using Java Concurrency's BlockingQueue Class

What is the Producer-Consumer Problem?

The producer-consumer problem is a synchronization problem between different processes. There are three entities in this problem: a producer, a consumer, and a memory buffer. Both the producer and consumer share the same memory buffer.

The producer produces some items and pushes them into the memory buffer. A consumer then consumes these items by popping them out of the buffer. If the buffer is empty, then the consumer waits for the producer to push an item, which it consumes after the producer pushes it.

The memory buffer is of fixed size. If it is full, the producer waits for the consumer to consume an item before pushing a new one. The producer and consumer cannot access the buffer at the same time – that is, it's mutually exclusive. Each process should wait for the other to finish its work on the buffer before it can access the buffer.

Operating systems often encounter this problem where multiple processes access the same memory space to perform their tasks.

We will solve this problem using multithreading, so I assume you have a basic idea about what multithreading is and how it works. If not, then you can read through this tutorial.

We'll start with an attempt to solve it simply using threads and a separate class for message queue. Then, we'll understand its issues and how to overcome them in the next approach. We'll also see other approaches to the problem. Make sure to stick around until the end.

Solution using Producer and Consumer Threads

Let's go over our requirements first.

• Producer and Consumer tasks run in separate threads

• Common data bus, typically a message queue, used by both producer and consumer.

• If not full, producer pushes data into queue, or waits for it to be consumed

• If not empty, consumer takes data out of the queue, or waits for producer to publish.

These are the things we need to implement to solve this problem. Let's create the message queue first.

Message Queue

To set up a message queue, we'll use a class that contains the queue and methods to publish and consume messages.

class Data { 
    Queue<String> q; 
    int capacity; 

    Data(int cap) { 
        q = new LinkedList<>(); 
        capacity=cap; 
    } 
    // other methods 
}

Here, we have used Java's Queue class to store our messages. Each message is of type String. But in bigger applications, the message or payload could be of any object type. We also define the capacity of the message queue.

Next, we'll implement the publish() method. The method accepts a new message to be published.

public void publish(String msg) { // publish message to the queue }

First, we check if the queue is full. We can't publish a new message if the queue has reached capacity.

if(q.size() == capacity){ 
    return; 
}

If the queue is not full, then add the message to the queue.

q.add(msg);

We'll add print statements to understand the workflow better.

public void publish(String msg) { 
    String name=Thread.currentThread().getName(); 
    if(q.size() == capacity){ 
        System.out.println("Queue Full!"+name+" waiting for message to be consumed..."); 
        return; 
    } 
    q.add(msg); 
    System.out.println("Message published:: "+msg); 
    System.out.println("Queue: "+ q); 
    System.out.println(); 
}

Here, we just print the thread that is inside the method, the message published, and the resulting queue.

Let's implement the consume() method now. This method does not take any arguments and works similarly to the publish() method. We first check if the queue is empty, before removing anything from the queue.

if(q.size()==0){ 
    return; 
}

Then, we remove the message.

q.poll();

Again, we'll add print statements to understand the workflow better.

public void consume()  { 
    String name=Thread.currentThread().getName(); 
    if(q.size()==0){ 
        System.out.println(name+" waiting for new message..."); 
        return; 
    } 
    String msg = q.poll(); 
    System.out.println(name+" has consumed msg:: "+msg); 
    System.out.println("Queue: "+ q); 
    System.out.println(); 
}

Producer Thread

Let's write the producer logic now. We'll create a class Producer that will run in a thread. There are several ways to create threads in Java. We'll use the Runnable interface to create our thread since it's the most preferred approach.

class Producer implements Runnable{ 
    Data data; 
    public Producer(Data data) { 
        this.data = data; 
    } 

    @Override public void run() { } 
}

The producer has access to the data bus object which is passed to it via the constructor. The producer logic goes inside the run() method. By overriding the run method, you are writing functionality that runs in a thread.

Now, a producer's ways of producing and publishing data differs in every application. For this post, we are going to simulate a functionality where the producer keeps publishing messages every few seconds.

We'll define a list of messages that the producer can use.

final String[] messages={"Hi!!", "How are you!!", "I love you!", "What's going on?!!", "That's really funny!!"};

Here's the producer logic inside the run() method:

public void run() { 
    int i=0; 
    try { 
        while(true){ 
            Thread.sleep(1000); 
            data.publish(messages[i]); 
            i=(i+1)%messages.length; 
        } 
    } catch (InterruptedException e) {} 
}

In this code, the producer is publishing a message from the messages list every 1000 ms. Thread.sleep(_some_delay_) pauses execution of the thread for a certain period. Since it throws an exception, we surround the code with a try-catch block.

This is just for demonstration purposes – don't worry about the logic. Our implementation works regardless of the producer or consumer logic.

Consumer Thread

Similar to producer thread, let's simulate the consumer logic.

class Consumer implements Runnable{ 
    Data data; 
    public Consumer(Data data) { 
        this.data = data; 
    } 
    @Override public void run() { 
        try { 
            while(true){ 
                Thread.sleep(2000); 
                data.consume(); 
            } 
        } catch (InterruptedException e) {} 
    } 
}

Here, the consumer tries to consume a message every 2000 ms.

Putting it all Together

Now, we have our message queue along with the producer and consumer classes. Let's create one producer and one consumer thread and start them.

We'll create a Data object with capacity of 5 messages and create our producer and consumer threads with the objects of the Producer and Consumer classes.

public class Main { 
    public static void main(String[] args) { 
        Data data = new Data(5); 
        Thread producer=new Thread(new Producer(data), "producer"); 
        Thread consumer=new Thread(new Consumer(data), "consumer");
        producer.start(); 
        consumer.start(); 
    } 
}

The run() method executes in a separate thread when start() is called.

Output:

Inconsistent output

Here, the output is inconsistent with the desired workflow. Even after publishing the first message, the consumer is still waiting. Then, a consumer has consumed a message Hi!! that doesn't exist. The state of the queue is also inconsistent.

You will probably get a different output, since thread execution depends on the core OS. But the issue still persists. Why does this happen?

Synchronization Issue With the Data Class

Both producer and consumer threads run simultaneously, working on the same resource. They are accessing the message queue at the exact same time. Both the threads may start with one version of the resource and by the time they perform an operation, they are working on a different version.

This leads to a race condition. Both threads end up competing for the same resource and give inconsistent results. The producer thread is trying to add a message to the queue, while at the same time a consumer is trying to consume a message. There's no way of controlling which message the consumer could get.

To solve this issue, we need some kind of mechanism to ensure that only one thread can operate on a shared resource at a time. In this case, we'll use the concept of synchronization.

At a glance, a synchronized function or a block can only be executed by one thread at a time. A thread entering such a block acquires a "lock" on the object and any other threads have to wait until the thread releases this lock – that is, until it finishes working on the shared resource.

We'll use a similar method to solve our issue.

Introducing Synchronization in the Message Queue

To ensure the message queue is only accessed by one thread (producer or consumer) at a time, a thread needs to secure a lock on the Data object before performing any operations.

How to Use the synchronized Keyword

An object can be made mutually exclusive by using the synchronized keyword. We'll use the synchronized keyword with the publish() and consume() methods.

public synchronized void publish(String msg)

public synchronized void consume()

Now, a thread needs to acquire a lock on the object before entering these methods.

What are the wait() and notify() Methods?

We have achieved synchronization – only one thread can access a shared resource at a time to ensure consistency. Now, we need to establish communication between the producer and consumer threads.

Let's understand what we need first. If the queue is full, the producer needs to wait for a consumer to consume an item. Similarly, if the queue is empty, the consumer needs to wait until the producer pushes an item.

Also, when a producer pushes an item, it needs to notify all the waiting consumer threads about the action. The is also true when the consumer consumes an item. So, how do we establish this communication?

We can do this using the wait() and notify() methods. When the wait() method is called, the thread releases the lock on the object and enters a waiting state until another thread calls the notify() or notifyAll() method.

notify() wakes up one thread that is in the waiting state, while notifyAll() wakes up all waiting threads. When a thread wakes up again, it has to re-acquire the lock on the object. If another thread has the lock, then this thread needs to wait until the other thread releases the lock.

You can learn more about the wait() and notify() methods here.

How to Communicate Between Threads using wait() and notify()

Let's use the above methods. A producer needs to wait before it pushes an item if the queue is full. So, invoke the wait() method if the queue is at capacity. Similarly, the consumer needs to wait if the queue is empty.

To wake up threads from the waiting state, call notifyAll() after the producer publishes a message and the consumer consumer a message. This will notify all the waiting threads.

Here is the updated publish() method:

public synchronized void publish(String msg) throws InterruptedException { 
    String name=Thread.currentThread().getName(); 
    if(q.size() == capacity){ 
        System.out.println("Queue Full!"+name+" waiting for message to be consumed..."); 
        wait(); 
    } 
    q.add(msg); 
    System.out.println("Message published:: "+msg); 
    System.out.println("Queue: "+ q); 
    System.out.println(); 
    notifyAll(); 
}

And here's the updated consume() method:

public synchronized void consume() throws InterruptedException { 
    String name=Thread.currentThread().getName(); 
    if(q.size()==0){ 
        System.out.println(name+" waiting for new message..."); 
        wait(); 
     } 
    String msg = q.poll(); 
    System.out.println(name+" has consumed msg:: "+msg);
    System.out.println("Queue: "+ q); 
    System.out.println(); 
    notifyAll(); 
}

wait() and notify() can throw InterruptedException, so we add a throws declaration to the methods.

Output:

Output with Synchronization‌

This time, the output is more consistent and we are getting the expected behavior. The producer keeps publishing messages and the consumer consumes those messages.

Producer waiting

Here, the queue is full and the producer waits for the consumer to consume a message. Only after that does the producer publish a new message.

Producer with Multiple Consumers

So far, we have tackled the problem with one producer and one consumer. In a real-world application, there could be multiple producers and consumers, all of them running in separate threads.

Let's add more consumer threads to see how we could handle this scenario:

for(int i=1;i<=5;i++){ 
    new Thread(new Consumer(data), "Consumer "+i).start();
}

Here, we have created 5 consumer threads, labelled them, and started them one by one. But, this is not enough. There is an issue with the existing approach.

Let's reduce the consumer sleep time and run the code:

Thread.sleep(500);

Multiple consumers issue

Here, after consumer 5 has consumed a message, the other consumers are able to consume even if the queue is empty.

The issue lies in the following condition:

if(q.size()==0){
    wait();
}

Let's understand the workflow first. Consider Consumer 5 (C5) and Consumer 1 (C1). C5 secures the lock on the method and enters it. The queue is initially empty, so it releases the lock and waits for the producer. At the same time, C1 secures the lock and enters the method. It also waits for the producer.

So, C5 and C1 are waiting. The producer publishes a message. C5 and C1 are notified and they wake up. C5 reacquires the lock and proceeds to consume the message, while C1 waits for C5 to release the lock. Here, C1 is not waiting because of wait() – it has woken up and now it's waiting at the next line.

After C5 consumes the message and releases the lock, C1 continues and tries to consume the message. But the queue is empty now, so it receives null or throws an exception. This also happens with the other threads.

To prevent this, we need to check if the queue is empty once again. So, instead of using an if condition, we use a while loop like this:

while(q.size()==0){
            wait();
        }

This checks if the queue is empty every time a thread wakes up. So, if multiple threads wake up at the same time, it should check if another thread has emptied the queue.

We do the same for checking if the queue is full.

while(q.size() == capacity){
            wait();
        }

This time, the code runs without any issues.

Multiple consumers correct output

Here is the complete code for Data class:

class Data {
    Queue<String> q;
    int capacity;
    Data(int cap) {
        q = new LinkedList<>();
        capacity=cap;
    }

    public synchronized void publish(String msg) throws InterruptedException {
        String name=Thread.currentThread().getName();
        while(q.size() == capacity){
            System.out.println("Queue Full!"+name+" waiting for message to be consumed...");
            wait();
        }
        q.add(msg);
        System.out.println("Message published:: "+msg);
        System.out.println("Queue: "+ q);
        System.out.println();
        notifyAll(); 
    }

    public synchronized void consume() throws InterruptedException {
        String name=Thread.currentThread().getName();
        while(q.size()==0){
            System.out.println(name+" waiting for new message...");
            wait();
        }
        String msg = q.poll();
        System.out.println(name+" has consumed msg:: "+msg);
        System.out.println("Queue: "+ q);
        System.out.println();
        notifyAll();
    }
}

You can create any number of producers and consumers and test this code in multiple scenarios.

Solution using Java Concurrency's BlockingQueue Class

So far you have learned what the producer-consumer problem is and how it can be solved. But, while working on real-time applications, we probably won't implement synchronization manually.

Instead, we can use the BlockingQueue class from java.util.concurrent package. The difference between Queue and BlockingQueue is that it waits for the queue to become non-empty before a message can be consumed. Similarly, it waits for the queue to have space before publishing a new message.

We can initialize the blocking queue in the following way:

BlockingQueue<String> q = new ArrayBlockingQueue<>(10);

This creates a blocking queue of capacity 10. To publish an item, we use the put() method, and to remove an item, we use the take() method.

Let's first use this in our Producer class:

class Producer implements Runnable{
    BlockingQueue<String> q;
    final String[] messages={"Hi!!", "How are you!!", "I love you!", "What's going on?!!", "That's really funny!!"};
    public Producer(BlockingQueue<String> q) {
        this.q = q;
    }

    @Override
    public void run() {
        int i=0;
        try {
            while(true){
                Thread.sleep(500);

                q.put(messages[i]);

                System.out.println("Message published:: "+messages[i]);
                i=(i+1)%messages.length;
            }
        } catch (InterruptedException e) {}
    }

}

Here, we are not using a separate Data class with synchronized methods, since the put() and take() methods of BlockingQueue are synchronized. Here, if the queue is full, the put() method waits for a consumer to consume a message.

Similarly, let's update our Consumer class:

class Consumer implements Runnable{
    BlockingQueue<String> q;

    public Consumer(BlockingQueue<String> q) {
        this.q = q;
    }

    @Override
    public void run() {
        try {
            while(true){
                Thread.sleep(1500);

                String msg=q.take();

                String name=Thread.currentThread().getName();
                System.out.println(name+" has consumed msg:: "+msg);
            }
        } catch (InterruptedException e) {}
    }    
}

Here, if the queue is empty, the take() method waits for the producer to publish a message.

Let's create our BlockingQueue object and start these threads:

public class Main {
    public static void main(String[] args) {
        BlockingQueue<String> q = new ArrayBlockingQueue<>(10);
        Thread producer = new Thread(new Producer(q));
        producer.start();
        for(int i=1;i<=5;i++){
            new Thread(new Consumer(q), "Consumer "+i).start();
        }
    }

}

Here, we have one producer thread and 5 consumer threads. Let's see the output:

Output for BlockingQueue implementation

In the output, you can see that after consumers 1, 3, and 2 have consumed a message, the other consumers wait for a message to be published before consuming it.

There could be a few inconsistencies while printing these messages since the thread only stops at the put() or take() methods and not the println() statements. But the code runs properly. Again, the output will be different each time you run the code.

So, while working on big projects, you can use the BlockingQueue class. But it's important to understand how to deal with the whole producer-consumer problem from scratch. This is really helpful, especially during interviews, since you typically won't be allowed to use the BlockingQueue class.

Conclusion

In this tutorial, you learned about an important problem in concurrency, the product-consumer problem. And you learned how you can solve it using multithreading in Java.

In total, we implemented four different approaches:

First, I started out with a very basic and straightforward implementation. Running the producer and consumer in separate threads helped achieve concurrency. But since they used the same message queue, there was a synchronization problem.

Therefore, in the next approach, we added synchronization to fix the issue. Then, we added more consumers who would all wait for the producer. There, we learned why it is important to check the full and empty conditions every time a thread wakes up.

After going through the whole implementation from scratch, we saw a simple way to solve the Producer-Consumer problem in Java using BlockingQueue. By understanding different approaches and their issues, you can get a better idea of how to tackle a problem. I hope this guide helps with your future endeavors.

If you are unable to understand the content or find the explanation unsatisfactory, let me know. New ideas are always appreciated! Feel free to connect with me on Twitter. Till then, goodbye!

When you roll out a new app into production, you want to make sure that it's user friendly. A website's performance is a key part of the user experience. Every user wants the website and its contents to load quickly. Each and every second is valuable and could result into a user never visiting your website again.

In this guide, we are going to understand a very important technique in JavaScript known as debouncing. Then, I will show you how to implement the autocomplete functionality in React with debouncing.

Now, in order to get the most out of this tutorial, I am assuming you have a basic knowledge of JavaScript. If you need to get started or review, here are a couple resources for you:

• Learn JavaScript basics – handbook for beginners

• The freeCodeCamp JavaScript Algorithms and Data Structures certification

Table of Contents:

• What is Debouncing?

• How to Implement Debouncing in JavaScript

• Use Case of Debouncing

• Conclusion

What is Debouncing?

Debouncing is a strategy used to improve the performance of a feature by controlling the time at which a function should be executed.

Debouncing accepts a function and transforms it in to an updated (debounced) function so that the code inside the original function is executed after a certain period of time.

If the debounced function is called again within that period, the previous timer is reset and a new timer is started for this function call. The process repeats for each function call.

An example will help you understand better. Let's take a function fun(). We want this function to execute after 500ms.

function fun() {
    console.log('This is a function')
}

After debouncing, a new function debouncedFun() is returned. Now, whenever you call debouncedFun(), it will be called after 500ms.

If you call it again within the next 500ms after first calling it, the previous timer is reset and a new timer is started for the second function call. The process repeats if you keep calling the function within 500ms.

How to Implement Debouncing in JavaScript

Let's understand how to implement debouncing in JavaScript. First, we'll go over our requirements. What behavior do we want from the debounced function?

• Delay the function execution by a certain time, delay.

• Reset the timer if the function is called again.

To debounce a function, we'll have a separate function that accepts the function reference and the delay as parameters, and returns a debounced function.

function debounce(func, delay) {
      return () => {}   // return debounced function
}

This function will only be called once to return a debounced function and that, in turn, will be used in the subsequent code.

To delay a function by some milliseconds, we can simply use the setTimeout function in JavaScript.

function debounce(func, delay) {
    return () => {
        setTimeout(() => {
            func()
        }, delay)
    }
}

This delays the function call by delay milliseconds. But this is incomplete as it only satisfies the first requirement. How do we achieve the second behaviour?

Let's create a variable timeout and assign it to the return value of setTimeout method. The setTimeout method returns a unique identifier to the timeout, which is held by timeout variable.

function debounce(func, delay) {
    let timeout=null
    return () => {
        timeout=setTimeout(() => {
            func()
        }, delay)
    }
}

Each time you invoke setTimeout, the ID is different. We will use this timeout variable to reset the timer.

But how do we get access to timeout from outside the debounce() method? As mentioned before, debounce() is only used once to return a debounced function. This, in turn, performs the debouncing logic.

Then, how does the debounced function have access to timeout even if it is used outside the debounce() function? Well, it uses a concept called closure.

What's a closure in JavaScript?

In JavaScript, an inner function always has access to the local variables of the outer function. In our case, the inner function has access to timeout that has function level scope in the debounce() method.

But when the outer function returns this inner function, the inner function still holds a reference to the local variables of the outer function long after the outer function has finished execution. This is the concept of a closure.

Let's understand closures with an example.

function outerFunction() {
  const x = 5;

  return () => {
    console.log(x);
  }
}

const inner = outerFunction();

inner(); // prints 5

// console.log(x)   Throws reference error

Here, if we call inner(), the code runs without any errors and prints 5. But, if we try to access x directly, JavaScript throws a reference error.

JavaScript Reference Error

Here, inner() closes over x and only this function can use the variable and no one other one can. We cannot access the variable explicitly.

You can check out this beginner-friendly tutorial to learn more about closures.

Back to Debouncing

Let's get back to where we left off:

function debounce(func, delay) {
    let timeout=null
    return () => {
        timeout=setTimeout(() => {
            func()
        }, delay)
    }
}

Here, JavaScript uses a closure to hold access to timeout every time we use the debounced function.

Let's use this to our advantage. Since debouncedFun() has access to the same timeout variable in every function call, we can add a condition to check whether a previous timeout exists. We can simply do this with a null check, if(timeout !== null) or if(timeout).

Then, we use the clearTimeout() method to cancel the previous timeout, thus resetting the timer.

Add the following statement before starting a new timeout:

if(timeout) 
    clearTimeout(timeout)

Once the timeout is reset, a new timeout is started for the current function call, whose ID is then assigned to timeout. The process is repeated for the subsequent function calls who have access to the same timeout due to closures.

function debounce(func, delay) {
    let timeout=null
    return () => {
        if(timeout) clearTimeout(timeout)

        timeout=setTimeout(() => {
            func()
        }, delay)
    }
}

With this, we have satisfied our second requirement – that is, resetting the timer and starting a new one. It's time to use this debounced function.

Let's pass fun() to the debounce() method with a delay of 500ms.

const debouncedFun = debounce(fun, 500)

debouncedFun() is basically fun() with debouncing behaviour. Let's call this function at different time intervals to test our functionality.

debouncedFun()

setTimeout(debouncedFun, 300)

setTimeout(debouncedFun, 900)

The first function call is made instantly. The other two are made after 300ms and 900ms respectively. Can you guess the output?

The code prints This is a function two times. Let's understand why. Here, after the first call is made, fun() is scheduled to execute after 500ms. But the second one is made in 300ms which resets the timer and starts a new one.

500ms have passed and the fun() method executes. Then, at 900ms, another function call is made. This again executes fun() after 500ms.

There is still a small improvement we should make. Our logic does not consider function arguments. Let's replace fun() with fun(a, b).

function fun(a, b) {
    console.log(`This is a function with arguments ${a} and ${b}`)
}

To incorporate arguments while debouncing, return a debounced function that accepts arguments.

function debounce(func, delay) {
    let timeout=null
    return (...args) => {
        if(timeout) clearTimeout(timeout)

        timeout=setTimeout(() => {
            func(...args)
            timeout=null
        }, delay)
    }
}

By using the spread operator, any arguments passed to the debounced function will be stored as an array in the args variable. Then, spread out the same args array to call the actual function with the arguments passed.

const debouncedFun=debounce(fun, 500)
debouncedFun(2,3)

The above code prints This is a function with arguments 2 and 3 after 500ms.

Use Case of Debouncing

Let's see how debouncing is used in practical applications. The most common use case of debouncing is the autocomplete functionality. You must have seen many websites where you type into an input field and it shows a list of results as you type them.

Here's an example from Google Search:

Google Search Autocomplete after typing in "Top 10"

Google search shows the most recent and commonly searched terms. The information is mostly fetched from the browser cache. But, several websites make API calls to backend server to fetch the data from a database.

This can easily be implemented by adding an onchange event to the input element and implementing the fetch logic in the event handler. But there's a slight issue with this.

Consider the following example:

API Request made for each input value

When I type the word absolute, an API request is made every time the value of the input field changes. We are making 8 API requests in very few milliseconds which puts a lot of load on the backend server and could cause performance issues.

Ideally, we want to show the auto-complete results some time after the user has finished typing. Here, the user has typed absolute in one go, so instead of showing results every time the input changes, we could show them once the user has finished typing – that is, we could add some delay between the input change and the results being displayed.

So, we only make the API calls when the user finishes typing their word and not on every input change. This reduces the number of API calls and improves performance. We can achieve this behavior with debouncing.

Let's understand how to implement the autocomplete functionality in React.

Auto-complete example

Use create-react-app (or a modern build tool like Vite) to create the project. Remove the existing boilerplate code. There is no need to install any additional dependencies. Run npm start command to start the project. You can find the complete code on GitHub.

I have set up a Node server to fetch data for the app. You can find it in the Git repo. Run the node server command to start it. I am not going to show the Node.js code as it's out of the scope of this tutorial.

Let's get started with the implementation. We will write a simple autocomplete functionality. The app should show a list of cities that contain an input string typed by the user.

App Component

We'll first need an input element to accept user input and a results container for the search results. Attach an event handler to the input element which is an async function since it will include the fetching logic.

function App() {
    const [data, setData] = useState(null)

    const loadData = async (event) => {

    }
    return (
        <div className="App">
            <input type="text" onChange={(e) => loadData(e)}/>
            {data && data.length !== 0 &&
            <div className="results-container">
                {data.map(item => (
                    <div key={item.id} className="result-item">
                        <p> {item.city} </p>
                    </div>
                ))}
            </div>}
        </div>
    );
}

The data will be stored as state and the results will only be shown if the data is non-empty. I'll skip over the CSS for this tutorial, you can find it in the Git Repo.

Event Handler

The loadData() function fetches our data and stores the response as state.

const loadData = async (event) => {
    const value=event.target.value
    if(value === '') {
        setData(null)
        return
    }
    const response=await fetch(`http://localhost:8000/data/${value}`)
    const res=await response.json()
    setData(res)
}

If no value is entered, simply exit the function. Else, make the request to the node server endpoint. This function is called every time the input changes, so we will debounce this function.

Debounce Implementation using a Custom Hook

We will write the debouncing logic inside a custom hook. The advantage of custom hooks is that you can re-use the same logic throughout your application. It is highly advisable to do so.

Create a new folder custom-hooks and inside it, create a file useDebounce.js. As explained before, the useDebounce() method should take a function and delay as parameters and return the debounced function.

const useDebounce = (func, delay) => {
    let timeout=null

    return (...args) => {
        if(timeout) clearTimeout(timeout)

        timeout=setTimeout(() => {
            func(...args)
        }, delay)
    }
}

export default useDebounce

Now, inside the app component, call this method once to get loadDataDebounced().

const loadDataDebounced = useDebounce(loadData, 400)

We'll use this new method as the event handler for the input element.

<input type="text" onChange={(e) => loadDataDebounced(e)}/>

Output

Enter a search string inside the input element to test our code.

On-screen output

As you can see in the Network tab, only one request is getting sent instead of three. This makes the search performance much better.

Conclusion

In this tutorial, you learned what debouncing is and how it is implemented. Debouncing delays the function execution by a certain time and resets the previous timer if the function is called again.

Debouncing uses the important concept of closures. I took a slight detour from the implementation to explain what closure is. It can be a confusing concept for beginners, so take your time understanding it. Closures allow you to work with local variables even after a function has finished execution.

After that, I showed you a popular use case of debouncing, the auto-complete functionality. The performance of the feature can be improved with debouncing. I also showed you how to implement auto-complete in React and use debouncing with custom hooks. I hope this helps you in future projects.

If you are unable to understand the content or find the explanation unsatisfactory, let me know. New ideas are always appreciated! Feel free to connect with me on Twitter. Till then, Goodbye!

Java is used by developers and enterprises to build powerful applications that serve many different purposes. The object-oriented nature of Java makes writing clean, modular, reusable code very easy.

If you are not comfortable with Java yet, there are many great resources online that can help you get started. You can check out this collection of resources put together by one of our freeCodeCamp staff. Here's a beginner-friendly Java course. And here's another helpful tutorial to help you work on the basics. It's never too late!

In this tutorial, we are going to build a simple command-line application for a parking lot system. I'll start with the requirements first, then list down the classes needed and explain the workflow of the application. After this, I will show you how to implement each functionality.

Here's What We'll Cover:

1. How to Set Up the Project

2. Project Requirements

3. Java Classes

4. Application Workflow

5. How to Build the Application

6. How to Test the Application

7. Future Scope

How to Set Up the Project

You need to have Java 8 installed in your system. If you don't, then download it from here and follow this installation guide. Also, install Visual Studio Code and add the Language Support for Java extension on VS Code.

There's no need to set up a database connection, an external server, or a framework. We'll use an in-memory data structure to store the data. Also, we are not going to create a user interface, as the focus is only on the business logic.

With that out of the way, we are ready to start.

Project Requirements

Our goal is to create an application for a parking lot system. As everyone visualizes projects differently, there may be many features that come into your mind.

But before jumping into the implementation, we first need to lay down specific requirements. It's always important to start with the basic requirements first, so that's what we'll do here.

Here is a list of all the requirements:

• A parking lot should have a parking lot ID, number of floors, and number of slots on each floor.

• Each slot in the parking lot has a type of vehicle that can park there. Valid types are car, bike, and truck. You can include any vehicle type as per your needs. You can also decide which slots should go to each type. Here, I am assigning the first slot on each floor to a truck, the next two for bikes, and rest for cars.

• When a vehicle pulls into the parking lot, the application takes the vehicle's type, registration number, and its color. You can also have additional details like the vehicle's name, the driver's name, and so on.

• After that, a slot is assigned to the vehicle. The selection strategy could be anything you want. Here, we will choose the lowest floor and earliest available slot.

• When a vehicle is assigned a slot, the app should return a ticket. The ticket should be a string of the form . For example, the vehicle parked on floor 2, slot 5 would be PR123_2_5.

• To unpark the vehicle, the user should present the valid ticket. After that, the vehicle is removed from the slot.

• The app should be able to display the number of available slots and a list of available and unavailable slots for a specific vehicle type.

Java Classes

Let's understand how we are going to design the application. Since it is a command line application, we are only going to write the business logic of a parking lot and display outputs on a console.

We will have separate classes representing the entities of our application: Vehicle and Slot. Then, we'll create a ParkingLot class that contains the core business logic of our application. Our main driver class will interact with this class for all the functionalities.

Now, let's define our classes. Each class will have a constructor to initialize their fields.

Vehicle class:

• type, registration, color (All are of string type)

Slot class:

• type (string)

• vehicle (Vehicle): type of vehicle parked in the slot

• ticketId (string): ticket id assigned to the vehicle parked in this slot, initially null.

ParkingLot class:

Fields:

• parkingLotId (string)

• slots (List<List>): This is a list of all the slots in the parking lot. The list of lists represents slots on multiple floors. The floors and slots are numbered according to the list index.

Constructor: ParkingLot(parkingLotId, nfloors, noOfSlotsPerFlr)

Methods:

• parkVehicle(type, regNo, color): takes all the parameters of a vehicle, assigns a slot, and returns the ticket

• unPark(ticketId): takes the ticket id and removes the vehicle from the slot

• getNoOfOpenSlots(type): returns the number of slots for vehicle type

• displayOpenSlots(type): displays all open slots for vehicle type

• displayOccupiedSlots(type): displays all occupied slots for vehicle type

This will contain our core business logic including the methods that will be exposed to the client i.e. the main method in our case. The initialization logic inside the constructor works differently as compared to the Vehicle and Slot class.

You will learn more about these classes in the implementation section.

Application Workflow

Now that we have our classes defined, let's understand the workflow of our application.

When a vehicle pulls into the parking lot, the system takes in the vehicle details and looks for an available slot. If it finds an open slot, it assigns that slot to the vehicle and returns a ticket.

This is handled by the parkVehicle() method. If a slot is not available, then the method prints an error message.

Now, if the vehicle wants to unpark, it has to show the ticket. The system parses the ticket, finds out which slot the vehicle is parked in and frees up the slot. The unPark() method takes in the ticket and frees up the corresponding slot.

Let's dive into the code now.

How to Build the Application

Let's first write our Vehicle and Slot classes with the fields mentioned previously:

public class Vehicle {
    String type;
    String registration;
    String color;
    public Vehicle(String type, String registration, String color) {
        this.type = type;
        this.registration = registration;
        this.color = color;
    }
}

public class Slot {
    String type;
    Vehicle vehicle;
    String ticketId;
    public Slot(String type) {
        this.type = type;
        this.vehicle=null;
        this.ticketId=null;
    }
}

Now, let's implement the ParkingLot class. We have discussed the fields and methods the class will contain. Let's write the fields first.

public class ParkingLot {
    String parkingLotId;
    List<List<Slot>> slots;

    ... constructor and methods ...
 }

I'll show you, step by step, how to implement each functionality.

Initialize the Class

Initialize the ParkingLot class through the constructor. This is where we build our parking lot. As mentioned before, the parking lot will have a given number of floors and number of slots per floor.

ParkingLot(String parkingLotId, int nfloors, int noOfSlotsPerFlr) {
        ... code here ...
    }

Start by setting the parking lot id.

this.parkingLotId=parkingLotId;

Then, initialize all the slots. On each floor, the first slot goes to truck, the next two go to bike, and the rest are for cars.

slots = new ArrayList<>();
for(int i=0;i<nfloors;i++){
    slots.add(new ArrayList<>());
    List<Slot> floorSlots = slots.get(i);
    floorSlots.add(new Slot("truck"));
    floorSlots.add(new Slot("bike"));
    floorSlots. add(new Slot("bike"));

    for(int j=3;j<noOfSlotsPerFlr;j++){
        slots.get(i).add(new Slot("car"));
    }
}

Here, we have done simple initialization for each Slot object in the list.

Park the Vehicle

Let's implement the parkVehicle() method now.

public String parkVehicle(String type, String regNo, String color) {
        ... Implementation here ...
    }

First, create a Vehicle object with the given details.

Vehicle vehicle = new Vehicle(type, regNo, color);

Loop over the entire slots list and find the first empty slot. To determine whether a slot is empty or not, check if the slot can take the given vehicle type and if the slot's vehicle field is null (meaning it is empty).

for(int i=0; i<slots.size();i++){
            for(int j=0;j<slots.get(i).size(); j++){
                Slot slot = slots.get(i).get(j);
                if(slot.type == type && slot.vehicle == null) {
                    ... assign the slot here ...
                }
            }
        }

To assign this slot to the vehicle, just set the vehicle field to the Vehicle object we created above. Then, generate and return a ticket using the floor and slot numbers.

slot.vehicle=vehicle;
slot.ticketId=generateTicketId(i+1, j+1);
return slot.ticketId;

private String generateTicketId(int flr, int slno){
        return parkingLotId + "_" + flr + "_" + slno;
    }

This method does not need to be exposed outside the class, so it's private.

If a slot is not available, return null or throw an exception. Do this after the for loop has ended.

System.out.println("NO slot available for given type");
return null;

Unpark the Vehicle

To unpark the vehicle, parse the ticket id to get the floor and slot number where the car is parked.

public void unPark(String ticketId){
        String[] extract = ticketId.split("_");
        int flr_idx=Integer.parseInt(extract[1])-1;
        int slot_idx=Integer.parseInt(extract[2])-1;

         ...
    }

Surround the parsing logic with a try-catch in case the user passes an invalid ticket id.

With the floor and slot number, find the slot where the vehicle is parked and un-assign the vehicle.

for(int i=0; i<slots.size();i++){
            for(int j=0;j<slots.get(i).size(); j++){
                if(i==flr_idx && j==slot_idx) {
                    Slot slot = slots.get(i).get(j);
                    slot.vehicle=null;
                    slot.ticketId=null;
                    System.out.println("Unparked vehicle");
                }
            }
        }

Display Parking Lot Information

We have defined three methods to display parking lot information in different forms.

Return the number of open slots for a vehicle type.

int getNoOfOpenSlots(String type){
        int count=0;
        for(List<Slot> floor: slots){
            for(Slot slot: floor){
                if(slot.vehicle == null && slot.type.equals(type)) count++;
            }
        }

        return count;
    }

Here, we loop over all the slots and check two conditions. First, we check if the vehicle field is null indicating an empty slot. And then we check if the type of the slot matches with the vehicle type requested by the client.

We then simply return the number of empty slots for the give type.

Display all the open slots for vehicle type:

void displayOpenSlots(String type){
        for(int i=0;i<slots.size();i++){
            for(int j=0;j<slots.get(i).size();j++){
                Slot slot=slots.get(i).get(j);
                if(slot.vehicle == null && slot.type.equals(type)) 
                    System.out.println("Floor " + (i+1) + " slot " + (j+1));
            }
        }   
    }

This is an enhancement over the previous function. Instead of the count, we are returning the actual empty slots with floor and slot no.

Display all occupied slots for vehicle type:

void displayOccupiedSlots(String type){
        for(int i=0;i<slots.size();i++){
            for(int j=0;j<slots.get(i).size();j++){
                Slot slot=slots.get(i).get(j);
                if(slot.vehicle != null && slot.type.equals(type)) 
                    System.out.println("Floor " + (i+1) + " slot " + (j+1));
            }
        }   
    }

Here, we check the opposite condition for the vehicle field. If it is not null, then that slot is occupied by a vehicle. We then check if the vehicle type matches with the requested type and then display the floor and slot no.

With this, we have our basic implementation of a parking lot. It is time to test out each functionality.

How to Test the App

Since we do not have a UI or a testing framework, we are going to test each functionality manually from the driver code. Just like any Java application, ours will also start from the main method.

First, let's create a ParkingLot object. Each functionality of the parking lot will be accessed through this object.

int nFloors=4;
int nSlotsPerFloor=6;
ParkingLot parkingLot = new ParkingLot("PR1234", nFloors, nSlotsPerFloor);

This creates a parking lot with 4 floors and 6 slots per floor, for a total of 24 slots.

parkingLot.getNoOfOpenSlots("car")

String ticket1 = parkingLot.parkVehicle("car", "MH-03", "red");
String ticket2 = parkingLot.parkVehicle("car", "MH-04", "purple");

parkingLot.displayOccupiedSlots("car");

First, we display the number of open slots available for a car. Then, we park two cars and get the tickets. After parking, we display the occupied slots.

To run the program, click the run button in the top right.

VS Code Editor

This gives the following output.

Output for the above test cases

Here, you can see the first available slots were assigned to the car.

Now, unpark the second vehicle and display the occupied slots.

parkingLot.unPark(ticket2);
parkingLot.displayOccupiedSlots("car");

After Unparking

Let's try parking a truck now. Display available slots for a truck, park the truck, and display occupied slots.

parkingLot.displayOpenSlots("truck");
parkingLot.parkVehicle("truck", "MH-01", "black");
parkingLot.displayOccupiedSlots("truck");

Output after parking a truck

I'll park three more trucks and then try parking another one. Since there are no more truck slots available, it shows the following message:

Output if the parking lot is full

Future Scope

In this article, we have created a very basic command-line application for a parking lot. The application only does one thing – assigning and un-assigning a vehicle from a parking slot. But there are many other things you can add to this basic app:

• Use encapsulation wherever possible. Technically, this should not come under future scope. I have not used encapsulation here as I only wanted to focus on the design and logical part. But while working on actual applications, remember to encapsulate all the fields and access them through getters and setters.

• Implement proper exception handling for scenarios where a slot is not available, a vehicle type is not allowed, or the ticket is invalid.

• You can add more types of vehicles to the parking lot and use a different strategy to assign slot types.

• You can use a different strategy to find out the first available slot.

• You can expose all the logic we have discussed here as a backend service and create a UI for your parking lot with a database as well.

You can find the code on GitHub here.

Conclusion

In this post, we created a simple command-line application with Java from the requirements. From the list of requirements, we determined the design of the application and defined the classes needed. Then, we understood the workflow of our application.

After finalizing the design and the workflow, we jumped into the implementation. This simple application was an example of how you outline the requirements and based on those requirements, figure out the design and workflow of your application.

Before writing the code, you should know what classes you are going to use and the purpose of each class. This is true no matter how small or big an application you want to make. I hope this helps in your future projects.

If you are unable to understand the content or find the explanation unsatisfactory, comment your thoughts below. New ideas are always appreciated! Feel free to connect with me on Twitter. Until then, goodbye!

Helpful resources

• workat.tech has abundant resources on cracking interviews at top product-based companies. This post is inspired by one such resource.

• Here's a Java handbook for beginners that'll teach you a lot of foundational concepts.

• And here's a more advanced Java handbook that covers more advanced object-oriented programming concepts.

Container orchestration platforms have made it possible to deploy and manage containerised applications. Kubernetes is one such platform that has been a game-changer for developers who are dealing with the challenges of application deployments.

Kubernetes has made it so much easier to manage and scale deployments according to your needs. In this tutorial, I am going to help you understand the simplicity of Kubernetes, so get ready.

We'll first take a Node application and package it using Docker. Then, I'll show you how to use Kubernetes – from setting up the cluster and creating deployments and services to scaling the application. Make sure you stay till the end to get the maximum value. It's going to be great.

You can find the full code in this GitHub Repo.

I'll start with a note on container orchestration.

Container Orchestration

Containers offer an efficient and isolated environment for your application. But as your application grows, so does the container count.

Juggling containers in production can quickly turn into a headache, especially if you are using microservices. Faster deployments, monitoring, scaling, networking, and load balancing suddenly become daunting tasks.

That's where container orchestration comes in. It automates these challenges and ensures that containers are operating smoothly. It simplifies the deployment and scaling processes, thus streamlining your workflow.

Adding to that, orchestration takes the stage in networking and facilitating communication between containers across multiple hosts. Want to expose your containers to the outside world? Orchestration makes it effortless.

How to Prepare a Packaged Application

Your first task is to set up a Node application and package it into a Docker image. For this, you need to have Node.js installed in your system. If not, then follow this guide on installing Node on Mac and Windows.

You do not need to be familiar with either Node.js or JavaScript to go through this tutorial. Just follow the steps mentioned below. The main focus of this post is Kubernetes.

Set Up the Node Application

To set up your Node app, create a folder called sample-node-application and navigate inside it. Run the command npm init and enter each field value accordingly with the entrypoint as server.js.

npm init command

A package.json file will be created that specifies the necessary dependencies your application needs. Create a file server.js, this will contain your APIs.

const express = require("express");
const data = require("./data.json")

const app = express();

app.get("/", (req, res) => {
    res.send("Hello, Welcome to the Node App")
})

app.get("/data", (req, res) => {
    res.json(data)
})


app.listen(8000, () => {
    console.log("App is running")
});

Create a separate data.json file and add some mock data to it. You can generate mock data from Mockaroo.

Run the node server command to check if the app is running.

Build a Docker Image

Before building the image, check if you have Docker installed in your system. If not, then refer to the installation guides for different operating systems. Run docker --version to confirm that Docker is installed.

This is how our Dockerfile will look:

FROM node:18-alpine

WORKDIR /sample-node-app

COPY server.js /sample-node-app/
COPY package.json /sample-node-app/
COPY data.json /sample-node-app/

RUN npm install

CMD ["node", "server"]

Run the following command to build the Docker image:

docker build -t node-image .

Check if your image was created with the docker images command. Now, push this image to Docker Hub. Go to Docker Hub and sign in. If you do not have an account, then go ahead and register for one.

Once you are in, create a repository named node-image and make it public. Now, back to your terminal, run docker login and enter your username and password. Then, tag the image with your username.

docker image tag react-example-image <username>/node-image

Push this image to Docker Hub with the following command:

docker push <username>/node-image

Your image will be pushed to Docker Hub.

Here, I have explained the image creation steps briefly. If you want a more detailed explanation, then you can read my tutorial on How to Dockerize a React Application.

Before diving into the next steps, let's first understand what Kubernetes is, why it is needed, and few key concepts.

What is Kubernetes and Why Do You Need It?

Kubernetes (abbreviated as K8s) is an open-source container orchestration platform. Orchestration is all about automating deployments, scaling, and managing containers.

Kubernetes uses a declarative approach, where you define the desired state of your applications in a YAML file. Then, Kubernetes will work towards achieving that state and ensure that the state is maintained.

It enables close collaboration between development and operations teams, also helping enable efficient DevOps practices.

Problems that Kubernetes Helps Solve

Traditionally, multiple applications used to be deployed on physical servers. This presented a few problems.

If one application ends up taking more space than anticipated, then the other applications would not get enough resources. Also, scaling was difficult and expensive for organizations.

Then came VMs. They allowed better resource utilization than physical systems and also made scalability easier and cheaper. But containers provide a much more lightweight solution than VMs.

To run and manage these containers, we need Kubernetes to provide the necessary automation with the following features:

• Service Discovery and Load Balancing allow applications to communicate with each other no matter where they are running.

• Automated Scaling enables Kubernetes to auto-scale the number of containers depending on the configurations provided.

• With Self Healing, Kubernetes can restart any containers that stopped running or failed to run.

• Kubernetes allows Mounting a Storage to your deployment automatically.

• Automated Rollouts: Kubernetes follows a declarative mechanism to achieve and maintain the desired state of the application.

• Secret and Config Management: You can add configs and secrets to deployments so your application can use whatever configuration it needs based on the environment it is deployed in (dev or prod).

If you want to know more about Kubernetes and its components, visit the docs.

Key Kubernetes Concepts

Following are the key concepts that you'll need to know to effectively use Kubernetes in your projcts.

What are Pods?

A pod is a single deployment unit in Kubernetes containing one or more containers. Pods are responsible for running your application's containers in the Kubernetes cluster. It is a single instance of a running application.

You can create a pod using simple YAML configuration. Usually, you do not need to create them explicitly. Instead, you can use the Deployment configuration to create a pod. We'll see how to do that shortly.

Even though a pod can run multiple containers, it is common practice to run a single container in a pod. Read more about pods here.

How Do Deployments Work?

Kubernetes aims to maintain the desired state of the application at all times. A Deployment describes the desired state through YAML configuration.

A deployment configuration is used to decide the number of replicas of your pods, modify the pod configuration, rollback to a previous state, scale up/down your application and more.

When you create a deployment, it will create the pods that run the containers you specified. Once you create a deployment configuration, you do not need to create a separate configuration file for pods. You'll understand more in the hands-on part.

Read more about deployments here.

What are Services?

Let's say you have multiple applications deployed as pods. These applications may need to communicate with each other. Each pod has its unique ip address, so they can simply use the same ip address to communicate, right? Actually, this presents a few problems.

Pods have a relatively shorter lifespan. If any issue comes up and the pod is terminated, Kubernetes springs up a new pod as it needs to maintain the desired state of the deployment.

This new pod would have a different IP address. But the other pods are still using the old pod's IP to communicate. So, this new pod would not be discoverable unless all other pods update the IP to which they are communicating.

This is where services come in. Services help expose groups of pods over a network by adding a layer of abstraction. This abstraction provides a stable endpoint for the pods to communicate with each other.

Read more about services here.

Let's look at one last concept, the Kubernetes Cluster. I know it feels like a lot of theory, but don't worry, the hands-on part is coming.

The Kubernetes Cluster

A K8s cluster is a group of machines (or nodes) that run and manage your applications. The cluster consists of worker nodes and a control plane that controls and manages these workers.

The control plane makes several decisions like scheduling, starting up a new pod, etc. It consists of the following components:

• api-server: Exposes the Kubernetes API

• etcd: Key-value store for cluster data

• scheduler: Watches for newly created pods and assigns a worker node to run them.

• controller-manager: Runs a control loop that watches the state of the cluster through the api-server and if necessary, moves the current state to the desired state.

Worker Nodes are responsible for running and maintaining the pods. Each worker node consists of the following components:

• kubelet: Makes sure the containers are healthy and running in the Pod.

• kube-proxy: Network proxy that runs on each node and allows communication with the worker node from inside and outside the cluster.

• container-runtime: Responsible for running containers

That's it for the main concepts – let's dive into the hands-on part.

How to Deploy to a Kubernetes Cluster

So far, we have created a Docker image of the Node application and pushed it to the Docker Hub. The image can be accessed from anywhere.

How let's see how you can take this application and run it in a Kubernetes Cluster.

Installation

Let's install the Kubernetes command line utility, kubectl. You will find the guides for installation on Linux, Mac and Windows here.

After following the steps mentioned, run the following command to check if kubectl was installed:

kubectl version --client

Set Up the Kubernetes Cluster

To deploy your application, you need to set up a Kubernetes Cluster that will run your pods and services. There are lot of clusters provided by multiple cloud providers like Google, Amazon and Microsoft. For this application, we will use Minikube.

Minikube is a tool that lets your run a single-node K8s cluster on your computer. It is a personal playground for trying out Kubernetes in your system.

Refer to this guide for setting up minikube on Mac or Windows. Check if Minikube was installed by running the minikube version command.

Run the minikube start command to start a local Kubernetes cluster.

Write the YAML Configurations

Now, let's write our deployment and service configurations in YAML files.

First, let's see how to create the deployment config, step by step.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: sample-node-app
  namespace: default

• apiVersion: Specifies the API version of the resource,

• kind: Defines the type of resource, which is a Deployment.

• metadata: Contains metadata about the deployment. Here, we have specified the name of the deployment and set the namespace to default.

spec:
  replicas: 2
  selector:
    matchLabels:
      app: sample-node-app
  template:
    metadata:
      labels:
        app: sample-node-app
    spec:
      containers:
      - name: sample-node-app
        image: kunalmac25/node-image
        imagePullPolicy: Always
        ports:
        - containerPort: 8000

• spec: Describes the desired state of the deployment.

• replicas: Specifies the desired number of replicas (instances) of the application to run, which is 1 in this case.

• The selector and matchLabels fields specify labels that the deployment can identify the pods with.

• template: Defines a template for your pod. You can specify some metadata under the field metadata. Mention the label with which the pod should be identified.

• spec field under template describes the desired state of the pod, including the list of containers.

• For each container, you can specify the name, the image it should pull from, and the port to which it is exposed. imagePullPolicy specifies the image pull policy. Here, I have used Always (always pull the latest image from the registry).

These are the contents of the deployment.yaml file. Now, let's write our service.yaml.

apiVersion: v1
kind: Service
metadata:
  name: node-service
  namespace: default

Similar to the deployment, start with the API version and some metadata about the service.

spec:
  type: LoadBalancer
  selector:
    app: sample-node-app
  ports:
    - port: 80 
      targetPort: 8000

• Here, spec field describes the desired state of the Service which is of type LoadBalancer.

• selector: Specifies the label that identifies with the pod the service should direct traffic to.

• ports: Specifies the list of ports that the service should expose.

• port: Specifies the port that the service listens on. External traffic will come to this port, while the targetPort specifies the port on the pods that the service should forward traffic to. In our case, the incoming traffic on the service's port 80 will be sent to the pods on port 8000.