In this blog post, we will explore how to use the prompt() API provided by web browsers. This API allows us to prompt the user for input, making it useful for various scenarios. The prompt() API has been around since the early days of the web and is supported by all browsers. It provides a simple way to gather user input without the need to set up a form. This can be particularly handy when prototyping an application....
Learn how to utilize the Drag and Drop API to create interactive experiences for your users. With the Drag and Drop API, you can define which elements on a page are draggable and intercept the user’s drag actions. The API is well-supported on modern browsers: Browser support Before we dive into studying the API, it’s important to understand how to define which elements are draggable on a page. This can be done by adding the draggable attribute to the HTML of the element, with a value of true:...
Discover the functionality of the FormData object and learn how to effectively utilize it. The FormData object serves as a storage mechanism for preserving input field values within a form. It is particularly beneficial when you need to transmit files to a server. This object is typically only utilized in such circumstances. To demonstrate the utilization of FormData in sending file content via fetch, consider the following example: <input type="file" id="fileUpload" /> Here, an input field of type “file” is presented....
The Geolocation API is a powerful tool for retrieving a user’s position coordinates in a browser. In this guide, we’ll explore how to use this API effectively. Introduction to the Geolocation API To access the Geolocation API, we can utilize the navigator.geolocation object exposed by the browser. It’s important to note that this API is only available on pages served over HTTPS for security reasons, and it’s supported on all modern browsers....
Learn how to securely hash and check passwords in JavaScript using the bcrypt library. The bcrypt npm package is widely used for working with passwords in JavaScript, providing a secure way to store and compare hashed passwords. As a basic rule of security, passwords should never be stored in plain text format in databases or any other storage. Instead, a hash of the password should be generated and stored. Here is an example of generating a hash using bcrypt:...
The terminal is an essential tool for programmers, allowing you to perform tasks that would otherwise be impossible. Here’s a guide on how to use the terminal in macOS: Opening the Terminal: You can easily find the Terminal app by searching for “Terminal” in Spotlight or navigating to the Applications folder, opening the Utilities subfolder, and locating the Terminal app. Understanding the Shell: When you open the Terminal, you’ll see a screen similar to this: The “bash-3....
In this blog post, we’ll explore how to use the next/router package to control routes in Next.js. We’ll focus on programmatic routing changes, using the Next.js Router directly. Linking pages in Next.js using the Link component is a convenient way to handle routing declaratively. However, there are cases where you need to trigger a routing change programmatically. To do this, we can access the Next.js Router provided by the next/router package and call its push() method....
Node.js built-in modules are well-known for not being promise-based. This was because these modules were created before promises became popular. Although the promisify function has been available for some time, Node.js introduced a new promise-based API starting from version 10. Currently, this new API is only available for the fs built-in module, and it remains uncertain whether it will be implemented for other native modules in the future. To utilize this new API, follow these steps:...
The Node.js REPL (Read-Evaluate-Print-Loop) is a powerful tool for quickly exploring and testing Node.js features. This guide will show you how to use the Node.js REPL effectively. Running the Node.js REPL To start the Node.js REPL, open your terminal and execute the node command without specifying a file: node This will start the REPL, and you’ll see a prompt (>). The REPL is now ready to accept and evaluate JavaScript code....
The React Developer Tools is an indispensable tool that every React developer should have installed when building React applications, such as a Next.js application. This tool is available for both Chrome and Firefox and provides a powerful inspector to inspect and analyze React applications. With the React Developer Tools, you can explore the React components tree that composes your page. By hovering over the components, you can visualize the corresponding parts rendered on the page....