FullStack Path

We'll need a button to launch our custom modal, so when we click the "Open Modal" button, our custom modal should appear. <button className="rounded-md border h-10 px-4 text-white bg-blue-600 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  focus-visible:outline-blue-600" type="button" onClick={() => setModalClose(!modalClose)} >Open Modal</button> We will create a state to manage the opening and closing of modal. By default the modal is closed. 'use client' import { useState } from 'react' ... const [modalClose, setModalClose] = useState(true); Ok, now let's create our custom modal Install a package clsx, it will help us dynamically add or remove className at run time based on state change. npm i clsx Following is modal <div></div>: {/* Modal */}       <div id="custom-modal" tab-index="-1" aria-hidden="true"         className=

Vercel is a cutting-edge cloud platform renowned for its seamless deployment and hosting solutions, designed to simplify the process of deploying web applications. With its emphasis on serverless computing, global content delivery, and continuous deployment, Vercel empowers developers to focus on building exceptional user experiences. Hosting Postgres on Vercel enhances your application's performance and scalability.  Leveraging Vercel's serverless architecture and global CDN ensures rapid access to your database, while its straightforward integration and automatic scaling capabilities make managing Postgres hassle-free, allowing you to concentrate on crafting robust and efficient applications. Steps 1. Create a project 2. Go to Storage 3. Create Postgres database Connect Store → Create New → Postgres → Continue 4. Copy the secret to .env file 5. Install Postgres sdk npm i @vercel/postgres

  Contents       1.      Introduction 2.      Syntax 3.      Iterating arrays 4.      Iterating strings 5.      Iterating map and sets 6.      Custom iterables 7.      Conclusion 1. Introduction The for...of loop in JavaScript is a powerful tool for iterating over elements in iterable data structures such as arrays, strings, maps, sets, and more. It provides a cleaner and more concise syntax compared to traditional for loops. Here's how it works: 2. Syntax for (const element of iterable) { // Code to be executed for each element } element: This variable represents the current element in the iteration. You can name it whatever you like. iterable: This is the data structure you want to iterate over. 3. Iterating arrays const numbers = [1, 2, 3, 4, 5]; for (const num of numbers) { console.log(num); } 4. Iterating strings const text = "Hello"; for (const char of text) { console.log(char); } 5. Iterating map and sets const myMap = new Map([ ["key1", &qu

  First question anyone should ask is what is Asynchronous function and how it is different from synchronous function and what it look like. We will discuss this topic in terms of JavaScript. What is Synchronous functions? As the name suggests synchronous means to be in a sequence, i.e. every statement of the code gets executed one by one. So, basically a statement has to wait for the earlier statement to get executed. What is Asynchronous functions? Javascript is a single-threaded language , which means that function that deals with things like input-Ouput, Sockets and the network, in general, would block the main thread when executed. To have the ability to write concurrent code that does not block the main thread with tasks that can be slow(needs some time to finish), JS uses what is called the Event Loop. So, an asynchronous function is just a function that can be put in a queue and have the results of the function checked in later, without blocking the main thread.