Handling Promise Rejections: Best Practices

Promises have greatly improved JavaScript in recent years, allowing us to handle asynchronous operations more efficiently. When working with functions that return promises, it’s important to know how to handle promise rejections. In this blog post, we’ll explore the best practices for handling promise rejections effectively. Let’s start with a simple example using the Fetch API: fetch('/data.json') .then(response => { console.log(response.status) }) But what if an error occurs during the fetch() call?...

How to Upload a File Using Fetch

Learn how to upload files to a server using the Fetch API in a simple and straightforward way. Uploading files to a server can sometimes be a challenging task that requires hours of research. In this tutorial, I will guide you on how to upload files using the Fetch API. To begin, let’s assume you have a form with a file input field: <input type="file" id="fileUpload" /> To handle the file upload, we’ll attach a change event handler to the file input field:...

How to Use Netlify Edge Functions: A Step-by-Step Guide

Netlify Edge Functions are a powerful feature offered by Netlify, the popular hosting platform. While Netlify is known for static hosting, Edge Functions enable you to perform dynamic actions on your website. These functions allow you to implement features like geolocation, localization, A/B testing, redirects, and much more. Similar to Netlify Serverless Functions, Edge Functions run on the Netlify Edge, which means they are closer to the user and run on multiple CDN locations....

Making HTTP Requests with Axios: A Comprehensive Guide

Axios is a highly popular JavaScript library that allows you to perform HTTP requests in both browser and Node.js platforms. It supports all modern browsers, including IE8 and higher. The library is promise-based, which means you can use async/await syntax to make XHR requests effortlessly. In this blog post, we will cover the basics of Axios and how to use it effectively. Installation To use Axios in a Node.js environment, you can simply install it via npm:...

Optimizing Network Data Fetching in Astro

One of the inherent advantages of Astro is its flexible frontmatter feature. Using frontmatter, we can execute JavaScript code, making it exceptionally convenient for fetching data during the build process. Astro leverages the Fetch API which allows us to make network requests with ease. Astro’s frontmatter supports top-level await, eliminating the need for complex solutions such as immediately-invoked function expressions (IIFE) or invoking async functions separately to utilize fetch(), which operates on promises....

Roadmap for Learning the Web Platform: A Comprehensive Guide

The Web Platform is a powerful and diverse ecosystem comprising of APIs, tools, and languages. It offers endless possibilities for developers. If you are looking for a roadmap to learn the Web Platform, you’ve come to the right place. In this blog, I have compiled a collection of tutorials and articles that will help you navigate the Web Platform with ease. Let’s get started! Browser API Guides Begin your journey by diving into the Document Object Model (DOM), which is the fundamental API exposed by browsers....

Same POST API call in different JavaScript libraries

When testing APIs, it’s common to use tools like Insomnia to perform HTTP requests to REST API or GraphQL API services. In this blog, I want to showcase the same API call implemented in different JavaScript libraries. API Call Description Let’s consider an example API call - a POST request to the api.randomservice.com website’s /dog endpoint. The request body includes an object with two properties: name and age, encoded as JSON....

The Fetch API: A Modern Approach to Asynchronous Network Requests

The Fetch API is a modern approach to making asynchronous network requests in the browser. It offers a more streamlined and intuitive way to handle AJAX calls compared to the older XMLHttpRequest (XHR) approach. In this article, we will explore the basics of using the Fetch API and the features it provides. Introduction to the Fetch API Introduced as a standardized replacement for XHR, the Fetch API uses Promises as a building block for asynchronous network requests....

XMLHttpRequest (XHR)

The introduction of XMLHttpRequest (XHR) in browsers in the mid-2000s was a significant milestone for the Web Platform. In this article, we will explore how XHR works, its capabilities, and compare it with other popular alternatives. Introduction Back in the day, technologies like GMail and Google Maps seemed revolutionary. These applications heavily relied on XHR to deliver dynamic content. XMLHttpRequest was initially invented by Microsoft in the 1990s and became a de-facto standard as all major browsers implemented it between 2002 and 2006....