DEV Community: Andrii Ponomarov

Ditch the div Tag: Use These HTML Tags Instead

Andrii Ponomarov — Fri, 14 Mar 2025 07:58:52 +0000

Div tags are a type of HTML element that can be used to divide a webpage into sections and can be styled with CSS. While div tags can be useful for creating page layouts and separating content, they should not be used excessively or unnecessarily. It is generally best to use the most appropriate HTML element for the content you are trying to mark up, rather than relying on div tags all the time.

So here, In this article, I've picked a few alternatives that can replace div tags easily. They are:

section

This tag defines a section in a document, such as a chapter or an appendix. It is typically used to group content that is related semantically.

<section>
  <h1>This is a section</h1>
  <p>This is a paragraph within the section</p>
</section>

article

This tag defines an independent, self-contained piece of content, such as a blog post or a news article.

<article>
  <h1>This is an article</h1>
  <p>This is a paragraph within the article</p>
</article>

header

This tag defines the header of a section or page. It can contain a logo, a navigation menu, or other elements that appear at the top of the page.

<header>
  <h1>This is the page title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

footer

This tag defines the footer of a section or page. It can contain copyright information, a sitemap, or other elements that appear at the bottom of the page.

<footer>
  <p>Copyright 2025 My Company</p>
  <ul>
    <li><a href="#">Terms of Service</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</footer>

aside

This tag defines content that is tangentially related to the main content of the page. It is often used to display a sidebar or a related content section.

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="#">Article 1</a></li>
    <li><a href="#">Article 2</a></li>
    <li><a href="#">Article 3</a></li>
  </ul>
</aside>

nav

This tag defines a section of the page that contains navigation links.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

main

This tag defines the main content of the page. It should be used only once per page, and it should contain the content that is directly related to the purpose of the page.

<main>
  <h1>Welcome to my website</h1>
  <p>This is the main content of the page.</p>
</main>

figure

This tag defines self-contained content, such as an image, a diagram, or a code snippet. It is often used in conjunction with the figcaption tag, which defines a caption for the content.

<figure>
  <img src="image.jpg" alt="A description of the image">
  <figcaption>This is a caption for the image</figcaption>
</figure>

details

This tag defines a summary or a description of a section of content. It can be expanded or collapsed by the user, and it is often used to display additional information or options.

<details>
  <summary>Click here to view more details</summary>
  <p>Additional details go here</p>
</details>

fieldset

This tag defines a group of related form elements, such as checkboxes or radio buttons. It is often used to group form controls that belong to the same logical entity.

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
  </fieldset>
</form>

address

This tag defines the contact information for the author of a section or the entire page. It is often used to display the author's name, email address, and physical address.

<address>
  Contact me at:<br>
  John Doe<br>
  johndoe@example.com
</address>

form

This tag defines a form that users can fill out. It can contain various form elements, such as text inputs, checkboxes, and buttons.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

table

This tag defines a table of data. It can contain rows, columns, and cells, and it can be used to display tabular data in a structured way.

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>johndoe@example.com</td>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>janedoe@example.com</td>
  </tr>
</table>

pre

This tag defines preformatted text. It preserves whitespace and font formatting, and it is often used to display code snippets or other formatted text.

<pre>
  This is some preformatted text.
  It preserves both spaces and line breaks.
</pre>

code

This tag defines a piece of computer code. It is often used in conjunction with the pre tag to display code snippets.

<p>To create a new file in the terminal, use the following command:</p>
<code>touch new_file.txt</code>

blockquote

This tag defines a long quotation that is set off from the main text. It is often used to quote other sources or to present long passages of text in a more distinctive way.

<blockquote>
  "The world is a book, and those who do not travel read only a page." - Saint Augustine
</blockquote>

mark

This tag defines text that is highlighted for reference purposes. It is often used to mark passages of text that are relevant to the current context or that need to be reviewed later.

<p>I love to eat <mark>fruits</mark> and vegetables every day.</p>

time

This tag defines a date or a time. It can be used to mark the publication date of a document, or to indicate the start or end time of an event.

<p>I was born on <time datetime="1785-12-30">December 30, 1985</time>.</p>

abbr

This tag defines an abbreviation or an acronym. It can be used to provide a full explanation for the abbreviation in the title attribute.

<p>The <abbr title="United Nations">UN</abbr> was founded in 1945.</p>

bdo

This tag defines the directionality of text. It can be used to change the direction of text in languages that are written from right to left, such as Arabic or Hebrew.

<p>This text is written left to right. <bdo dir="rtl">This text is written right to left.</bdo></p>

colgroup

This tag defines a group of columns in a table. It can be used to apply styles or attributes to a group of columns rather than to each column individually.

<table>
  <colgroup>
    <col span="2" style="width:50%">
    <col style="width:50%">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

del

This tag defines deleted text. It is often used to mark text that has been removed from a document and to show the reason for the deletion. It is often used in conjunction with the ins element to mark additions and deletions to a document.

<p>I went to the store and bought a <del>car</del> <ins>bike</ins>.</p>

dl

This tag defines a definition list. It can be used to create a list of terms and their definitions, or to group related items in a list.

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 3</dd>
</dl>

ins

This tag defines inserted text. It is often used to mark text that has been added to a document and to show the reason for the insertion.

<p>I went to the store and bought a <del>car</del> <ins>bike</ins>.</p>

kbd

This tag defines keyboard input. It is often used to mark text that should be entered by the user using the keyboard.

<p>To save the document, press <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

output

This tag element in HTML represents the result of a calculation or user action. It is often used in conjunction with form elements, such as input and select, to display the result of a calculation or user action.

<form>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1" name="num1"><br>
  <label for="num2">Number 2:</label>
  <input type="number" id="num2" name="num2"><br>
  <label for="result">Result:</label>
  <output id="result" name="result"></output><br>
  <input type="button" value="Calculate" onclick="calculate()">
</form>

<script>
  function calculate() {
    const num1 = document.getElementById("num1").value;
    const num2 = document.getElementById("num2").value;
    const result = document.getElementById("result");
    result.value = parseInt(num1) + parseInt(num2);
  }
</script>

sub

This tag defines a subscript. It is often used to display a subscripted character or a formula in a smaller font size.

H<sub>2</sub>O

sup

This tag defines a superscript. It is often used to display a superscripted character or a formula in a smaller font size.

E = mc<sup>2</sup>

small

This tag defines small text. It is often used to display fine print or legal disclaimer text in a smaller font size.

<p>Welcome to our website! <small>By using this website, you agree to our terms of service.</small></p>

Conclusion

I hope these tags help. Let me know in the comment section if you have any questions or if I need to add other tags. Thanks for reading.

HTML Template Tag Explained

Andrii Ponomarov — Fri, 07 Mar 2025 22:00:00 +0000

What Is The Template Tag?

In HTML, the template tag is used to define a template for a web page or a portion of a web page. The content of the template tag is not rendered when the page is loaded, but it can be used as a blueprint for generating new DOM elements at runtime.

The template tag is often used in conjunction with JavaScript and the Document Object Model (DOM) to create dynamic, interactive web pages. For example, you might use the template tag to define a form that can be cloned and added to the page multiple times, or to create a list of items that can be filtered and sorted by the user.

Here is an example of the template tag in action:

<template id="item-template">
  <li class="item">
    <span class="item-name"></span>
    <button class="remove-button">Remove</button>
  </li>
</template>

In this example, the template tag defines an li element with a class of item and two child elements: a span with a class of item-name and a button with a class of remove-button. The template tag and its contents are NOT rendered when the page is loaded, but they can be used as a blueprint for creating new li elements at runtime.

How To Use The Template Tag In JavaScript?

To use the template tag in JavaScript, you can use the querySelector method to select the template element and then use the content property to access the contents of the template element. Here is an example of how you might use the template tag in JavaScript:

// Select the template element
let template = document.querySelector('#item-template');

// Access the contents of the template
let templateContent = template.content;

// Create a new DOM element using the template
let newItem = document.importNode(templateContent, true);

// Update the text of the new element
newItem.querySelector('.item-name').textContent = 'Item 1';

// Add the new element to the page
document.querySelector('#items').appendChild(newItem);

In this example, we use the querySelector method to select the template element with an id of item-template. We then use the content property to access the contents of the template element, which is a DocumentFragment object.

Next, we use the importNode method to create a new DOM element based on the template. Finally, we use the querySelector method to select the span element with a class of item-name and use the textContent property to update the text of the element. Finally, we use the appendChild method to add the new element to the page.

Browser Support

The template tag is supported in modern web browsers, including:

Google Chrome
Microsoft Edge
Mozilla Firefox
Apple Safari
Opera

However, it is worth noting that the template tag is not supported in Internet Explorer. If you need to support Internet Explorer, you can use a polyfill or a JavaScript library such as jQuery to provide equivalent functionality.

A polyfill is a piece of code that adds missing functionality to older browsers. You can use a polyfill to add support for the template tag to browsers that do not natively support it. There are several polyfills available for the template tag, such as the HTML5 template polyfill.

Alternatively, you can use a JavaScript library such as jQuery to create and manipulate DOM elements. jQuery provides a variety of methods for creating, inserting, and deleting elements, as well as for manipulating element attributes and styles.

Here is an example of how you might use jQuery to create a new DOM element based on a template:

// Define the template
let template = '<li class="item"><span class="item-name"></span><button class="remove-button">Remove</button></li>';

// Create a new DOM element using the template
let newItem = $(template);

// Update the text of the new element
newItem.find('.item-name').text('Item 1');

// Add the new element to the page
$('#items').append(newItem);

In this example, we use the $ function to create a new DOM element based on the template string. We then use the find method to select the span element with a class of item-name and use the text method to update the text of the element. Finally, we use the append method to add the new element to the page.

It is always a good idea to test your code in a variety of web browsers to ensure that it works as expected across different platforms.

Conclusion

In conclusion, the template tag in HTML allows you to define a template for a web page or a portion of a web page. The content of the template tag is not rendered when the page is loaded, but it can be used at runtime using JavaScript and the DOM. A tool like the template tag to make working with dynamic JavaScript easier is a great addition to your toolbelt and something you will surely need in the future.

If you want to know more about the template tag, then feel free to visit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

20 Unique APIs For Your Next Project

Andrii Ponomarov — Wed, 26 Feb 2025 07:12:54 +0000

APIs (Application Programming Interfaces) are useful because they allow different software systems to communicate with each other and exchange data in a standardized way. APIs can also be used to expose functionality of a system to other developers, who can then use that functionality in their own applications.

Here are 20 APIs that I think your next project might need them:

1. Google Maps API

Allows you to integrate maps and location-based features into your app or website. You can use this API to display maps, get directions, and search for businesses and points of interest.

2. Twitter API

Allows you to access and interact with Twitter data, such as tweets and user information. You can use this API to search for tweets, get user profiles, and post updates.

3. Facebook API

Allows you to access and interact with Facebook data, such as user profiles and social graph information. You can use this API to read and write data to Facebook, including posting updates and reading news feed data.

4. Dropbox API

Allows you to access and manipulate files stored in a Dropbox account. You can use this API to upload and download files, create and delete folders, and manage file metadata.

5. Stripe API

Allows you to process payments and handle subscriptions. You can use this API to accept payments, create and manage subscriptions, and handle other payment-related tasks.

6. PayPal API

Allows you to process payments and handle transactions. You can use this API to accept payments, manage subscriptions, and handle other financial tasks.

7. Google Sheets API

Allows you to read and write data to Google Sheets. You can use this API to retrieve and update data in Google Sheets, as well as to create and delete sheets.

8. Google Drive API

Allows you to access and manipulate files stored in a Google Drive account. You can use this API to upload and download files, create and delete folders, and manage file metadata.

9. Google Calendar API

Allows you to access and manipulate calendar events and scheduling information. You can use this API to create, update, and delete events, as well as to manage calendars and scheduling data.

10. Twilio API

Allows you to send and receive text messages, make and receive phone calls, and handle other communication tasks. You can use this API to build communication features into your app or website.

11. Slack API

Allows you to build integrations for the Slack messaging platform. You can use this API to create custom bots, integrate with third-party apps, and build other types of integrations.

12. Spotify API

Allows you to access and manipulate music data from the Spotify service. You can use this API to search for songs, get playlists, and retrieve other music-related data.

13. GitHub API

Allows you to access and manipulate data from the GitHub repository hosting service. You can use this API to create and manage repositories, track issues, and perform other tasks related to code development.

14. Mailchimp API

Allows you to access and manipulate data from the Mailchimp email marketing platform. You can use this API to create and send emails, manage subscriber lists, and track email performance.

15. Salesforce API

Allows you to access and manipulate data from the Salesforce customer relationship management platform. You can use this API to create and manage customer records, track sales and support requests, and perform other tasks related to customer management.

16. AWS API

Allows you to access and use many of the services provided by Amazon Web Services. This API provides access to a wide range of cloud computing resources and services, including storage, computing, and networking.

17. Microsoft Azure API

Allows you to access and use many of the services provided by Microsoft Azure. This API provides access to a variety of cloud computing resources and services, including storage, computing, and networking.

18. IBM Watson API

Allows you to access and use many of the artificial intelligence and machine learning services provided by IBM.

19. Google Cloud API

Allows you to access and use many of the services provided by Google Cloud. This API provides access to a variety of cloud computing resources and services, including storage, computing, and networking.

20. Yahoo Finance API

Allows you to access financial market data and stock information. You can use this API to retrieve data on stock prices, market trends, and other financial data.

Null vs Undefined - Everything you need to know

Andrii Ponomarov — Thu, 20 Feb 2025 06:54:31 +0000

In JavaScript, null and undefined are special values that represent the absence of a value or a null reference. It can be a bit confusing when it comes to a variable not having a value because it can be null or undefined. So in this article, I will break down the difference between null and undefined.

Null vs Undefined

To start with, let me explain the similarities that they have. Both null and undefined represents that a variable has no value. If a variable has no value, it is either set to null or undefined, and the same goes for a function. If a function returns null or undefined, then this means that function has nothing to return.

In JavaScript, null and undefined are considered loosely equal to each other, which means that the following expression will evaluate to true as it is compared with ==:

null == undefined // true
null === undefined // false

These are all the similarities that null and undefined have. Now lets begin the difference between them.

Null

As I said earlier, null is a way to indicate that a variable has no value. However, null is an intentional assignment value, meaning that it is not a default value and must be explicitly assigned. You can think of it as a placeholder that indicates that a value is not yet known or has not been set. So a varaible can never be null unless a programmer set the value to null.

Here is an example that demonstrates the statement:

let x;
console.log(x); // Output: undefined

let y = null;
console.log(y); // Output: null

This is essential to know because when you see a returned null value, you can be sure that the programmer who wrote the code is trying to tell you that there is no value to show or return. A great example of where null is useful is in something like a read function that queries a database for an entry. If no entry exists, it makes the most sense to return null since you are stating that no value is found.

Undefined

undefined, on the other hand, is a value that is assigned to a variable that has not been initialized, or to an object property that does not exist. It is a default value, and it is assigned to a variable when it is declared but not assigned a value.

Here are a few examples:

let x;
console.log(x); // Output: undefined

let y = null;
console.log(y); // Output: null

let z = {};
console.log(z.prop); // Output: undefined

In the first example, the variable x is declared but not initialized, so it is assigned the value undefined. In the second example, the variable y is explicitly assigned the value null. In the third example, the object z does not have a property called prop, so accessing it returns undefined.

This is where this gets a bit confusing as you can set a variable to undefined also.

let x = null

console.log(x) // null

x = undefined

console.log(x) // undefined

You should do this to reset a variable essentially. By setting a variable to undefined, you convey that the variable no longer contains any helpful information. If the value is null, then you explicitly say the result of some action has no value.

Technically, these both indicate no value, but they express that message in slightly different ways.

Conclusion

It's important to note that null and undefined are not the same thing, and they should not be used interchangeably. null is an intentional assignment value, while undefined is a default value that is assigned when a variable is not initialized or an object property does not exist.

All 4 JavaScript Scopes that you must know

Andrii Ponomarov — Wed, 12 Feb 2025 20:22:15 +0000

JavaScript has four different scopes: global, module, block, and function. Understanding these scopes is essential for any JavaScript developer, as it affects how variables are accessed and declared within your code. In this blog post, we will go over each of these scopes in detail and provide examples to help you better understand how they work.

What is scope?

In JavaScript, scope refers to the visibility and accessibility of variables. The best way to think of scope is as a way to help you separate different parts of your code from one another.

Here is an example of scope works in javascript:

const globalVar = "global"

function myFunction() {
  const localVar = "local"
  console.log(outerVar, innerVar)
  // Prints: "global", "local"
}

myFunction()
console.log(globalVar, localVar)
//console.log will throw a ReferenceError as localVar is not defined

In the example above, the globalVar variable has global scope, so it is accessible from both inside and outside the myFunction function. On the other hand, the localVar variable has local scope and is only accessible inside the myFunction function. If you try to access it outside the function, you will get a ReferenceError because localVar is not defined in the global scope.

It's important to understand the concept of scope in JavaScript because it affects how you can use and modify variables in your code.

Four Scopes

JavaScript has mainly four scopes in total, they are:

This seems like a lot to keep track of, but in reality, you will probably use module and block scope for 99% of all the code you write, so it is easier to keep track of. However, you should still pay attention to the other scopes, as it is essential to understand how they work.

Global Scope

The global scope is the outermost scope in JavaScript. All variables and functions that are not inside any other function or block are in the global scope. When you declare a variable or function in the global scope, it is available to be accessed from anywhere in your code.

let globalVar = 'I am a global variable';

function globalFunc() {
  console.log('I am a global function');
}

globalFunc(); // logs 'I am a global function'
console.log(globalVar); // logs 'I am a global variable'

One thing to keep in mind is that variables and functions declared in the global scope are also attached to the global object (window in the browser). This means that you can also access them as properties of the global object.

console.log(window.globalVar); // logs 'I am a global variable'
window.globalFunc(); // logs 'I am a global function'

It is generally considered best practice to avoid using the global scope as much as possible, as it can lead to naming conflicts and can make it harder to understand the code.

Module Scope

Module scope is very similar to global scope, but with one minor difference. This means that variables, functions, and other declarations defined in the one file are not accessible outside of the file unless they are explicitly exported. Which is ideal when trying to mentally keep track of everything. To enter module scope, you need to type="module" on your script tags.

Here is an example:

<script src="app-1.js" type="module"></script>
<script src="app-2.js" type="module"></script>

// app-1.js
const pi = 3.14
console.log(pi)
// Prints: 3.14

// app-2.js
console.log(pi)
// Throws ReferenceError as pi is not defined

Modules are a powerful way to organize and share code in JavaScript, and they are a key feature of the modern JavaScript ecosystem. They allow you to create reusable, self-contained pieces of code that can be imported and used in multiple places, making it easier to write and maintain large and complex applications.

Block Scope

In JavaScript, block scope refers to the visibility and accessibility of variables within a block of code. A block of code is defined as a set of statements surrounded by curly braces, such as those found in an if statement, for loop, or function.

Variables declared with the let and const keywords are block-scoped, meaning that they are only accessible and can only be modified within the block in which they are declared. This can make it easier to manage and track the variables in your code, as you can be sure that a block-scoped variable will not be modified or accessed outside of its block.

For example:

if (true) {
  let x = 10;
}
console.log(x); // Uncaught ReferenceError: x is not defined

In this example, the let keyword is used to declare a variable x within the block of the if statement. Because x is block-scoped, it is not accessible outside of the block. Trying to access x outside of the block results in a ReferenceError.

On the other hand, if x were declared with the var keyword, it would be function-scoped and would be accessible outside of the block. In this case, the value 10 would be logged to the console.

It is important to note that block-scoped variables are not accessible outside of the block in which they are declared, even if that block is inside a function or another block. This can be contrasted with function-scoped variables (var keyword), which are accessible throughout the entire function in which they are declared, regardless of any blocks within that function.

For example:

function foo() {
  if (true) {
    let x = 10;
  }
  console.log(x); // Uncaught ReferenceError: x is not defined
}

foo();

In this example, the let keyword is used to declare a variable x within the block of the if statement. Because x is block-scoped, it is not accessible outside of the block, even though it is inside a function. Trying to access x outside of the block results in a ReferenceError.

Using block-scoped variables can help prevent unintended modifications and make your code easier to understand and maintain. It is generally recommended to use let or const instead of var when declaring variables in JavaScript.

Function Scope

Variables declared with the var keyword are function-scoped, meaning that they are accessible and can be modified throughout the entire function in which they are declared. This can lead to potential problems, as it can be difficult to keep track of where a variable is being modified and what its current value is.

For example:

function foo() {
  var x = 10;
}
console.log(x); // Uncaught ReferenceError: x is not defined

In this example, the var keyword is used to declare a variable x within the function foo. Because x is function-scoped, it is not accessible outside of the function. Trying to access x outside of the function results in a ReferenceError.

On the other hand, if x were declared within a block within the function, such as an if statement or for loop, it would be block-scoped and would not be accessible outside of that block.

It is important to note that function-scoped variables are accessible throughout the entire function in which they are declared, regardless of any blocks within that function. This can be contrasted with block-scoped variables, which are only accessible and can only be modified within the block in which they are declared.

For example:

function foo() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10
}

foo();

In this example, the var keyword is used to declare a variable x within the block of the if statement. Because x is function-scoped, it is accessible throughout the entire function, even though it is declared within a block. As a result, the value 10 is logged to the console.

As I said earlier, It is generally recommended to use the let or const keywords instead of var when declaring variables in JavaScript, as block-scoped variables can help prevent unintended modifications and make your code easier to understand and maintain. However, it is important to understand the difference between function and block scope in order to effectively use variables in your code.

Multiple Variables With The Same Name

If you have multiple variables with the same name in different scopes, the one that is in the innermost scope takes precedence.

For example:

let name = 'John';  // global scope

function greet() {
  let name = 'Jane';  // local scope
  console.log(`Hello, ${name}!`);  // Output: "Hello, Jane!"
}

greet();
console.log(name);  // Output: "John"

In the example above, the name variable in the global scope is declared with the value 'John'. Inside the greet function, a new name variable is declared with the value 'Jane'. This local variable takes precedence over the global variable when it is accessed within the function, so 'Jane' is printed to the console. However, when the global name variable is accessed outside of the function, it retains its original value of 'John'.

You can also use the var keyword to declare variables, but it behaves differently than let and const in terms of scope. Variables declared with var have function scope, which means they are accessible within the function in which they are declared, as well as any inner functions. If a var variable is declared outside of a function, it becomes a global variable.

Conclusion

While it may sound confusing to have four different scopes in JavaScript, it is a bit simpler since we really only care about two of the four scopes. Understanding how these scopes work is also crucial in writing good clean code and might help in the interview.

Every Important HTTP Status Code

Andrii Ponomarov — Wed, 12 Feb 2025 20:22:15 +0000

HTTP status codes are three-digit codes that are used to communicate the status of a request made to a server. They indicate whether the request was successful, whether the server needs additional information to complete the request, or whether there was an error. Here is a list of some important HTTP status codes:

1xx (Informational)

The first level of status codes is the 100 level. Luckily, these codes are only somewhat common and essential to understanding. These codes indicate that the server has received the request, but has not yet begun to process it. Only some of them apply to normal web development/API development, so we can skip this entire section.

2xx (Successful)

200-level of status codes are the most widely used by the web. Luckily there are not many that you need to know. These codes indicate that the request was successful.

200 - OK

This code indicates that the request was successful and that the requested resource was returned. It is the most common status code and is used when a request is successful and the requested resource is returned in the response.

201 - Created

This code indicates that a new resource has been created as a result of the request. This might happen when a client submits a POST request to create a new resource on the server.

202 - Accepted

This code indicates that the request has been accepted for processing, but the processing has NOT yet been completed. This might happen when a client submits a request that takes a long time to process, such as a request to generate a large report.

204 - No Content

This code indicates that the request was successful, but the server has NOT returned any content in the response. This might happen when a client submits a request to delete a resource, and the server responds with a 204 status code to indicate that the resource was successfully deleted.

206 - Partial Content

This code indicates that the server has fulfilled the partial GET request for the resource. This might happen when a client requests a range of bytes from a large resource, and the server returns only the requested range of bytes in the response.

3xx (Redirection)

300-level of status codes indicates that the client must take additional action to complete the request. These codes are used when the requested resource has been moved to a new location and the client needs to use the new location to access the resource.

301 - Moved Permanently

This code indicates that the requested resource has been permanently moved to a new location. The client should use the new location to access the resource. The client should also update any references to the resource to use the new location.

302 - Found

This code indicates that the requested resource has temporarily moved to a new location. The client should use the new location to access the resource. This status code is often used in conjunction with the Location header, which specifies the new location of the resource.

303 - See Other

This code indicates that the requested resource can be found at a different URI, which is specified in the Location header. The client should use the new URI to access the resource.

304 - Not Modified

This code indicate that a client's cached copy of a resource is still up to date. It is commonly used with the HTTP caching mechanism, which allows a client to store a copy of a resource on the client's computer and use the cached copy to satisfy future requests for the same resource.

4xx (Client Error):

400-level of status code indicates that there was an error in the request made by the client. These codes are used when the client has made a request that the server cannot fulfill, either because the request is invalid or because the client lacks the necessary permissions to access the requested resource.

400 - Bad Request

This code indicates that the request was invalid or could not be understood by the server. This might happen if the request is missing required parameters, if the request is improperly formatted, or if the server does not support the request method (such as POST or DELETE).

401 - Unauthorized

This code indicates that the client is not authorized to access the requested resource. The client must authenticate itself to get the requested response. This status code is often used in conjunction with the WWW-Authenticate header, which specifies the authentication method that the client should use.

403 - Forbidden

This code indicates that the client is not allowed to access the requested resource. This might happen if the client lacks the necessary permissions to access the resource, or if the server has implemented access control measures that prevent the client from accessing the resource.

404 - Not Found

This code indicates that the requested resource could not be found on the server. This might happen if the client has requested a resource that does not exist, or if the server is unable to locate the requested resource.

5xx - (Server Error)

500-level of status code indicates that there was an error on the server while processing the request. These codes are used when the server is unable to fulfill the request due to an unexpected condition or because of a problem with the server itself.

500 - Internal Server Error

This code indicates that an unexpected condition was encountered by the server while processing the request. This is a general-purpose error code that can be used when no more specific message is suitable.

503 Service Unavailable

This code indicates that the server is currently unable to handle the request due to maintenance or overload. The server might return this code temporarily while it is working to improve the performance of the server.

Conclusion

There may be over 50 HTTP status codes, but only a handful you genuinely need to understand. If you know these status codes, you can create a robust API that will be easy to consume.

The importance of React-Query and Why you should use it

Andrii Ponomarov — Mon, 10 Feb 2025 04:53:34 +0000

React-query is a powerful tool for managing and fetching data in your React applications. It allows you to quickly bring, cache, and update data from APIs. It also helps you avoid the common pitfalls of working with async data in a declarative framework like React.

One of the main benefits of react-query is its ability to automatically manage the loading state of your data. When a query is in flight, react-query automatically sets the isLoading flag to true. When the data arrives, it will put it to false. This can be extremely useful when you have multiple queries that need to be displayed in a single component, as you can avoid the complexity of manually tracking the loading state of each individual query.

Caching

Another benefit of react-query is its ability to cache and deduplicate data. When using react-query, you can specify a cache policy for each query, determining how long the data should be stored before being refetched. This can be especially useful when working with APIs with a rate limit, as you can avoid unnecessary requests and ensure that your data is always fresh without overloading the API.

Here's an example of how you might use react-query in a simple React component:

import { useQuery } from 'react-query'

function MyComponent() {
  const { data, isLoading } = useQuery('todos', () =>
    fetch('https://my-api.com/todos').then(res => res.json())
  )

  if (isLoading) {
    return <p>Loading...</p>
  }

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  )
}

In this example, we use the useQuery hook to fetch a list of todos from an API. While the data is being fetched, the isLoading flag is true, and the component will display a loading message. Once the data arrives, it will be rendered in a list.

Query dependencies

React-query also provides a way to optimize the data fetching process using a concept called "query dependencies." Query dependencies are variables that, when changed, will trigger a refetch of the data. This can be especially useful when you have multiple related queries, as it allows you to avoid unnecessary refetches when only one query has changed.

For example, consider a scenario where you have a search form that allows the user to filter a list of products by category and price range. Without query dependencies, you might be tempted to create two separate queries for the category and price range filters like this:

const { data: categoryData } = useQuery(['categories', categoryId], () =>
  fetch(`https://my-api.com/categories/${categoryId}`).then(res => res.json())
)

const { data: priceRangeData } = useQuery(['priceRanges', priceRangeId], () =>
  fetch(`https://my-api.com/priceRanges/${priceRangeId}`).then(res => res.json())
)

However, this approach has several drawbacks. For one, it requires you to make two separate requests to the API, which can be inefficient if the data is largely overlapping. It can also be challenging to track which data belongs to which query, especially if you have multiple queries in a single component.

To solve these problems, you can use query dependencies to create a single query responsible for fetching the category and price range data. To do this, you can pass an array of query dependencies as the second argument to the useQuery hook:

const { data } = useQuery(
  ['products', categoryId, priceRangeId],
  () =>
    fetch(
      `https://my-api.com/products?categoryId=${categoryId}&priceRangeId=${priceRangeId}`
    ).then(res => res.json()),
  {
    queryFn: (key, queryFn) =>
      queryFn().then(data => {
        return {
          data,
          // We can use the query dependencies to store the category and price range data
          // separately from the products data
          category: categoryData,
          priceRange: priceRangeData
        }
      }),
    enabled: categoryId && priceRangeId // Only fetch if both categoryId and priceRangeId are present
  }
)

With this approach, the useQuery hook will only refetch the data when either the categoryId or priceRangeId variables change. This allows you to avoid unnecessary refetches, and keep your data organized in a single, easy-to-manage object.

Refetch

One of the most powerful features of react-query is the ability to manually trigger a refetch of data using the refetch function. This can be especially useful when you need to provide your users with the ability to refresh the data on demand or when you need to update the data in response to a user action.

To use the refetch function, you can pass it as a prop to your component using the useQuery hook:

const { data, isLoading, refetch } = useQuery('todos', () =>
  fetch('https://my-api.com/todos').then(res => res.json())
)

function handleRefreshClick() {
  refetch()
}

return (
  <>
    {isLoading ? (
      <p>Loading...</p>
    ) : (
      <ul>
        {data.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    )}
    <button onClick={handleRefreshClick}>Refresh</button>
  </>
)

In this example, we use the refetch function in the handleRefreshClick event handler, which is triggered when the user clicks the "Refresh" button. When the button is clicked, the refetch function is called, starting a new fetch of the data and updating the component with the latest data.

You can also pass options to the refetch function to customize how the data is fetched. For example, you can give an object with a throwOnError property to specify whether the function should throw an error if the fetch fails:

function handleRefreshClick() {
  refetch({ throwOnError: true }).catch(error => {
    console.error(error)
  })
}

In this example, the refetch function will throw an error if the fetch fails, which allows you to handle the error in a catch block. This can be especially useful when you need to display an error message to the user or when you need to perform some other action in response to the error.

Invalidate

In addition to the refetch function, react-query also provides several other functions that can help you manage the data in your React components. One such function is the invalidate function, which allows you to invalidate the data in the cache and trigger a refetch of the data.

The invalidate function can be beneficial when you need to force a refetch of the data, regardless of whether the data is stale or not. For example, consider a scenario where you have a "log out" button in your application that needs to clear the cache and refetch the data when the user logs out. To do this, you can use the invalidate function like this:

const { data, isLoading, invalidate } = useQuery('todos', () =>
  fetch('https://my-api.com/todos').then(res => res.json())
)

function handleLogout() {
  invalidate()
}

return (
  <>
    {isLoading ? (
      <p>Loading...</p>
    ) : (
      <ul>
        {data.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    )}
    <button onClick={handleLogout}>Log Out</button>
  </>
)

In this example, we use the invalidate function in the handleLogout event handler, which is triggered when the user clicks the "Log Out" button. When the button is clicked, the invalidate function is called, which will clear the cache and trigger a new fetch of the data.

You can also pass options to the invalidate function to customize how the data is invalidated. For example, you can give an object with a hard property to specify whether the data should be invalidated from the cache immediately or whether it should be allowed to expire naturally before being removed:

function handleLogout() {
  invalidate({ hard: true })
}

In this example, the invalidate function will immediately remove the data from the cache and trigger a refetch, regardless of whether the data is stale or not. This can be especially useful when you need to ensure that the data is refreshed as soon as possible.

Conclusion

In summary, react-query is a powerful tool that can greatly simplify the process of working with async data in your React applications. Whether you're building a simple to-do list or a complex real-time dashboard, react-query can help you easily fetch, cache, and update data from APIs, and manage the loading state of your data in a declarative way.

if you're interested to know more about the react-query, you can check it out at
https://tanstack.com/query/v4/docs/react/overview