DEV Community: Anurag Gupta

The Clipboard Problem That Drove Me to Build My Own Solution

Anurag Gupta — Tue, 13 Jan 2026 15:54:46 +0000

How losing the same code snippet 50 times led me down a rabbit hole

I lost my clipboard again. I'd copied a complex SQL query, switched to another tab, copied something else, and the query was gone. I had to rebuild it from memory.

This kept happening. As a remote worker constantly switching between my laptop and desktop, I'd copy something on one device, switch to the other, and it was gone. I tried a few clipboard managers, but they didn't fit my workflow.

So I built my own. Here's what I learned, the challenges I hit, and what I'd do differently.

The Problem (Or: Why I Got Frustrated)

The Daily Frustration

Copy a code snippet on my laptop, switch to desktop, and it's gone
Copy an email template, switch tabs, copy something else, and lose the template
Scroll through 50 clipboard items to find the one I use daily

Why Existing Solutions Didn't Work for Me

I tried several tools:

Built-in OS clipboard managers - Don't sync across devices
Cloud clipboard tools - Too slow, clunky, or required too many steps
Browser extensions - Saved everything but didn't prioritize what I actually used

Most extensions just saved history. I'd have to scroll through dozens of items to find the email signature I paste daily. That defeated the purpose.

What I Built

I built a browser extension that:

Syncs clipboard history across Chrome and Edge browsers
Learns what I paste most and prioritizes those items
Provides a right-click context menu for quick access
Works on complex sites like Google Docs and Reddit

The key difference: it tracks what I actually paste, not what I click. Items I paste frequently automatically move to the top.

The Technical Challenges

Clipboard API Limitations

The Clipboard API has quirks:

// This works in some contexts, not others
navigator.clipboard.readText().then(text => {
  // But what if the page doesn't have focus?
  // What if it's a content script?
});

Issues:

Requires HTTPS or localhost
Content scripts can't always access clipboard directly
Permission handling varies by context

Solution: Message passing between content scripts and background service worker, with fallbacks.

Manifest V3 Gotchas

Service workers can be killed anytime:

// This state gets lost when the service worker dies
let clipboardHistory = [];

// Had to persist everything
chrome.storage.local.set({ clipboardHistory });

Challenges:

Service worker lifecycle is unpredictable
Content script injection timing issues
CSP restrictions block some approaches

Solution: Persist state in chrome.storage.local and handle re-initialization.

Paste Functionality on Complex Sites

Pasting into Google Docs, Reddit, or Notion is tricky:

// Method 1: Modern approach (doesn't always work)
element.dispatchEvent(new ClipboardEvent('paste'));

// Method 2: Deprecated but sometimes the only option
document.execCommand('paste');

// Method 3: Direct DOM manipulation (works on simple sites)
element.textContent = clipboardText;

I ended up trying multiple methods in sequence:

async function pasteText(element, text) {
  // Try modern approach first
  try {
    element.focus();
    await navigator.clipboard.writeText(text);
    element.dispatchEvent(new ClipboardEvent('paste'));
    return true;
  } catch (e) {
    // Fallback to execCommand
    try {
      element.focus();
      document.execCommand('insertText', false, text);
      return true;
    } catch (e2) {
      // Last resort: direct manipulation
      element.textContent = text;
      return true;
    }
  }
}

Real-Time Sync Without Constant Polling

I wanted changes to appear instantly across devices without polling:

// Polling approach (what I wanted to avoid)
setInterval(async () => {
  const latest = await fetchLatestClipboard();
  // Check for changes...
}, 5000); // Too slow, or too resource-intensive

Solution: Real-time subscriptions (using Supabase in my case):

const subscription = supabase
  .channel('clipboard-changes')
  .on('postgres_changes', {
    event: 'INSERT',
    schema: 'public',
    table: 'clipboard_items'
  }, (payload) => {
    // Handle new item instantly
    updateLocalClipboard(payload.new);
  })
  .subscribe();

Challenges:

Handling connection drops
Resolving conflicts when same item updated on multiple devices
Managing subscription lifecycle

Cross-Browser Compatibility

Chrome, Firefox, and Edge have differences:

// Chrome uses chrome.*
chrome.storage.local.get('key', callback);

// Firefox uses browser.*
browser.storage.local.get('key').then(callback);

// Edge uses chrome.* but behaves slightly differently

Solution: Abstraction layer:

const browserAPI = {
  storage: {
    local: {
      get: (key) => {
        if (typeof chrome !== 'undefined' && chrome.storage) {
          return new Promise(resolve => {
            chrome.storage.local.get(key, resolve);
          });
        } else if (typeof browser !== 'undefined') {
          return browser.storage.local.get(key);
        }
      },
      // ... similar for set, remove, etc.
    }
  }
};

Smart Prioritization

I wanted frequently used items to surface automatically. This required:

Tracking usage when items are actually pasted
Syncing usage data across devices
Efficient sorting and filtering

The implementation involves tracking paste events and maintaining usage statistics, but the core concept is prioritizing items based on actual usage patterns rather than just recency.

What I Learned

1. Test on Real Sites Early

Don't assume paste works everywhere. Test on Google Docs, Reddit, Notion, CodePen, etc.

2. Service Worker State is Ephemeral

Persist everything. Assume the service worker can die at any moment.

3. Real-Time Sync is Harder Than It Looks

Connection drops, conflicts, edge cases - it's more complex than it seems. Start simple and iterate.

4. User Behavior is Unpredictable

Track what users actually do, not what you think they do. I track pastes, not clicks.

5. Cross-Browser Testing is Essential

Chrome, Firefox, and Edge behave differently. Test all of them.

What I'd Do Differently

Start with simpler MVP - Local-only first, then add sync
Better conflict resolution - Should have planned this earlier
More error handling - Add retry logic from the start
Better testing - Should have built testing infrastructure earlier
Get user feedback sooner - Built in isolation too long

Open Questions

I'm still figuring out:

How do you handle clipboard permissions in extensions reliably?
Better approaches for paste compatibility across complex sites?
How would you architect real-time sync for this use case?
Manifest V3 service worker lifecycle - best practices?
How do you test extensions across browsers efficiently?

If you've built something similar or have ideas, I'd love to hear them.

The Result

After a few months of using it, it's working well. I rarely lose clipboard content, and frequently used items appear quickly. It's not perfect, but it fits my workflow.

If you want to try it, it's available for Chrome and Edge. More importantly, I'd love to hear:

How you've solved similar problems
What challenges you've faced with browser extensions
What features would make this genuinely useful

This is still a work in progress, and I'm learning as I go.

Author: Anurag G.
LinkedIn: https://www.linkedin.com/in/anu95

From Bugs to Bulletproof: Transforming JavaScript with Error Handling

Anurag Gupta — Wed, 17 Apr 2024 12:04:14 +0000

Introduction

In the life of any application, errors and exceptions are inevitable—they can arise when least expected and manifest in various forms: quirky, intriguing, or downright troublesome. 🚨 Yet, it's not just the errors or exceptions themselves, but how we handle them that defines the strength and resilience of our software. 🛠️

A robust application is not just about recovering from errors and exceptions; it's about preemptively protecting against future issues and ensuring continuous, reliable performance. This article delves into advanced error and exception management techniques in JavaScript, offering insights to help you build resilient, "unbreakable" applications.🚀

The only real mistake is the one from which we learn nothing
~ Henry Ford 💡

In JavaScript, the terms 'errors' and 'exceptions' are often used interchangeably. The language itself only uses the Error keyword (accessible via window.Error). You can create custom error types by utilizing the Error constructor, which allows you to specify a name and a message for the error. Here's a basic difference between error and exception:

Error 🛑: An error is a significant problem that often stems from issues outside the programmer's control, such as system failures or resource limitations. These are serious issues that are usually not intended to be handled by the program, often requiring a fix in the environment or system configurations.

Exception ⚠️: An exception is a less severe issue that can occur during the normal operations of a program. Examples include accessing a non-existent file or inputting invalid data. Exceptions are foreseeable issues that programmers plan for and manage within their code, allowing the application to continue running or to fail gracefully.

For the purposes of this article, we will refer to both exceptions and errors simply as 'errors', and our discussion will focus on managing these errors effectively.

So, let’s dive in and discover how we can enhance our applications to withstand the test of time and challenges. 🌊

Errors, errors, everywhere — but what on earth is an error, really?

What is an Error?

Freepik

Technical Definition:

In the context of software and programming, an error is an issue in a computer program that prevents it from executing correctly.

More general definition:

An error is like hitting a roadblock when following a recipe that either stops you from finishing the dish or ends up with something unexpected. In the world of computers, it means there's something wrong in a program that stops it from working right, either because something was written wrong, something unexpected was given to it, or it was told to do something that doesn't make sense.

Why do errors occurs? 🤔

Freepik

Errors in programming can feel like those pesky gremlins that pop up at the most inconvenient times. But why do they occur? Here’s a lighter take on the reasons behind these digital hiccups:

Human Nature 👤

Yes, it turns out that we're not perfect! Most errors stem from good ol’ human mistakes. Maybe it's a typo, a forgotten semicolon, or an incorrect function name. Just like accidentally putting salt in your coffee instead of sugar, these little slips can cause big problems in code.

Miscommunication 🗣️

Imagine you're trying to bake a cake, but the recipe is in another language. There's a good chance you might end up with something... unexpected. Similarly, if a developer misunderstands the specifications or requirements of a software project, the code may not do what it's supposed to do, leading to errors.

Complexity Conundrums 🧩

The more complex the code, the easier it is for errors to sneak in. It's like trying to coordinate a flash mob dance with 100 people who have two left feet. The more moving parts there are, the more challenging it is to keep everything in sync.

Environmental Oddities 🌍

Sometimes, the environment in which the code runs can lead to errors. This could be due to different operating systems, unexpected user input, or changes in external systems like databases. It’s like trying to perform that flash mob in a thunderstorm—something external is bound to throw off your groove.

Resource Restrictions 🚫💾

Ever tried to pack a suitcase with way too much stuff? Sometimes, programs run out of memory or don't have the resources they need to perform an operation, leading to errors. This is the digital equivalent of that zipper finally giving way under the pressure.

Types of Errors

When we build JavaScript applications, we often encounter different kinds of errors, each presenting its own set of challenges. Here's a quick overview of the most common types of errors we'll come across in JavaScript,

Syntax Errors 🔤

These are fundamental mistakes in writing code, such as missing brackets, semicolons, or other punctuation necessary for the JavaScript engine to correctly parse and execute scripts. These errors are typically caught by the JavaScript interpreter and are the easiest to spot and correct.

/**
 * There is a missing parenthesis at the end of the
 * console.log statement. JavaScript engines will throw a
 * syntax error because the code violates the syntax rules  
 * (missing a closing parenthesis)
 */

console.log("Hello, world";

Runtime Errors ⏱️

Also known as exceptions, these errors occur while the JavaScript code is running. Examples include attempting to access an undefined variable, operating on null values, or trying to perform impossible operations like division by zero. Runtime errors can cause a script to stop abruptly and are only detected during execution.

/**
 * Here, x is not defined before it is used. This will cause a
 * runtime error because JavaScript will try to log an
 * undefined variable, resulting in a ReferenceError.
 */

console.log(x);

Some other JS Exceptions: TypeError, RangeError, URIError

These occur during the execution of the code when operations fail due to incorrect types, undefined variables, or data that is out of the allowed range.

null.someMethod(); // TypeError: Cannot read properties of null (reading 'someMethod')
new Array(-1); // RangeError: Invalid array length
decodeURIComponent('%'); // URIError: URI malformed

You can find list of JavaScript error reference here.

Logical Errors 🧠

The most deceptive, these errors happen when the code does not perform as intended, despite running without triggering exceptions. This could involve using an incorrect algorithm or logic to process data, leading to erroneous outputs. Logical errors are challenging to debug since the code runs smoothly but does not produce the correct results.

/**
 * This function intends to sum the elements of an array but 
 * starts iterating from index 1 instead of index 0. This
 * logic flaw will result in the first element of the array
 * being excluded from the sum, producing incorrect results.
 */

function sumArray(arr) {
  let sum = 0;
  for (let i = 1; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

Semantic Errors 📖

These occur when the code syntactically makes sense and runs without errors but does not do what the programmer intended. For example, a function designed to calculate the sum of an array might accidentally calculate the product due to a semantic misunderstanding in the coding logic.

/**
 * The function's name suggests it should multiply the input
 * by two, but the operation inside adds two instead. The code
 * runs without errors but does not perform as semantically
 * intended.
 */

function multiplyByTwo(num) {
  return num + 2; // Incorrect operation
}

Interpretation Errors 🏗️

Since JavaScript is an interpreted language, traditional compilation errors as seen in compiled languages do not apply directly. However, interpretation errors can occur when the JavaScript engine interprets the script, such as syntax errors that prevent the script from being executed. These are akin to compilation errors in other programming languages.

/**
 * Although this looks like a condition check, num = 2 is
 * actually an assignment inside the if statement, not a 
 * comparison. This code will run but not as the programmer
 * might have expected, always evaluating as true. This misuse
 * of an assignment instead of a comparison operator (== or
 * ===) is an interpretation error where the JavaScript engine 
 * interprets it as valid but incorrect logic.
 */

let num = 1;

if (num = 2) {
  console.log("Number is two");
}

Each type of error requires a different approach in handling, but the goal remains the same: ensure the application continues to run smoothly and reliably.

Now that we understand what errors are and why they occur, let's explore how to manage them effectively.

Handling Errors

Freepik

Handling errors effectively is crucial to building resilient JavaScript applications. Here are some robust techniques to manage errors efficiently, ensuring our applications perform smoothly and providing a better user experience.

Using Try-Catch for Error Handling 🛠️

The try...catch statement is a fundamental method for catching exceptions that occur in a block of code. Use try to wrap code that might throw an error and catch to handle the error if one occurs.

try {
  // Code that may throw an error
  const data = JSON.parse(response);
} catch (error) {
  console.error('Failed to parse response:', error);
}

Throwing Custom Errors 🎯

Sometimes, it's useful to create and throw custom errors. This allows us to handle specific error types differently and makes debugging easier.

function validateUser(user) {
  if (!user.name) {
    throw new Error('User must have a name.');
  }
}

try {
  validateUser({});
} catch (error) {
  console.error(error.message);
}

Error Propagation 🔗

In complex applications, it's often better to propagate errors to a higher level where they can be handled more appropriately. This can prevent deep nesting of try-catch blocks and keeps the code cleaner and easier to manage.

function fetchData(url) {
  return fetch(url).then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok.');
    }
    return response.json();
  });
}

fetchData('https://api.example.com/data')
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

Using Finally for Cleanup 🧹

Use the finally block to perform cleanup actions that need to occur whether or not an error was thrown in the try block. This is particularly useful for releasing resources, such as file handles or network connections.

try {
  const data = JSON.parse(response);
} catch (error) {
  console.error('Failed to parse response:', error);
} finally {
  console.log('Cleanup can go here.');
}

Async/Await for Asynchronous Error Handling ⏱️

Handling errors in asynchronous code can be tricky. Using async/await makes it easier to work with asynchronous code and handle errors with traditional try-catch logic.

async function getUserData(userId) {
  try {
    const response = await fetch(`/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch user data:', error);
  }
}

By implementing these techniques, we can significantly reduce the impact of errors in our JavaScript applications and ensure they remain robust and user-friendly.

Some Advance Techniques ⚙️

To elevate your JavaScript error handling to the next level, you can adopt some more advanced techniques. These strategies help in better error detection, management, and recovery, particularly in large-scale and complex applications. Here’s a brief overview:

Centralized Error Handling 🌐

Creating a centralized error handling mechanism allows you to manage errors systematically across your entire application. This can be particularly useful in large applications where you want to maintain consistency in how errors are logged, reported, and reacted to.

class ErrorHandler {
  static logError(error) {
    // Log error to an external monitoring service
    console.error(error);
  }

  static handleError(error) {
    // Generic error handling logic
    this.logError(error);
    alert('Something went wrong. Please try again.');
  }
}

try {
  // Some code that might fail
  throw new Error('Something bad happened!');
} catch (error) {
  ErrorHandler.handleError(error);
}

Promise Rejection Handling 🔄

Uncaught promise rejections can lead to unexpected behavior in your application. Handling these correctly is essential, especially when using modern JavaScript features like Promises and async/await.

window.addEventListener('unhandledrejection', event => {
  console.error(`Unhandled rejection: ${event.reason}`);
  event.preventDefault();
});

Typescript Decorators for Asynchronous Error Handling 🎨

If you're using TypeScript or Babel, decorators can be an elegant way to handle errors in asynchronous functions. This technique allows you to abstract the error handling logic and keep your asynchronous functions clean. BTW, this is my personal favourite.

function catchErrors(target, key, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = async function(...args) {
    try {
      return await originalMethod.apply(this, args);
    } catch (error) {
      console.error('Error caught by decorator:', error);
    }
  };
  return descriptor;
}

class DataService {
  @catchErrors
  async fetchData() {
    // Fetch data from an API
    const response = await fetch('/data');
    if (!response.ok) {
      throw new Error('Failed to fetch data.');
    }
    return response.json();
  }
}

Monitoring and Observability 📊

Implementing robust monitoring and observability in your application can significantly enhance your ability to detect and respond to errors. Tools like Sentry, New Relic, or Datadog can provide real-time insights into your application’s health and error rates.

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN'
});

function problematicFunction() {
  try {
    // Some code that might throw
    throw new Error('Intentional Error');
  } catch (error) {
    Sentry.captureException(error);
    throw error; // Re-throwing the error if you still want to handle it elsewhere
  }
}

npm Packages

Some notable npm packages specifically tailored for error handling in both front-end and back-end JavaScript environments:

Sentry

Sentry provides real-time error tracking and monitoring. It helps in capturing and logging errors and exceptions effectively across applications.

Backend:

npm install @sentry/node

Backend usage with Node.js

const Sentry = require("@sentry/node");

// Initialize Sentry with your DSN (Data Source Name)
Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

// To capture an exception
try {
  // Some risky operation that might throw
  throw new Error('Something went wrong!');
} catch (error) {
  Sentry.captureException(error);
}

Frontend:

npm install @sentry/browser

Frontend Usage with JavaScript:

import * as Sentry from "@sentry/browser";

// Initialize Sentry with your DSN
Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

// To capture an exception
try {
  // Some risky operation that might throw
  throw new Error('Something went wrong!');
} catch (error) {
  Sentry.captureException(error);
}

New Relic

New Relic is a powerful tool for application performance monitoring (APM) that also includes features for tracking errors and handling them in real-time.

Universal (mostly used on the backend):

npm install newrelic

Backend usage in Node.js

require('newrelic');

// New Relic automatically starts monitoring your application once required
// It captures all unhandled exceptions and provides performance monitoring

Bugsnag

Bugsnag provides error monitoring and crash reporting for web and server applications. It also helps developers to understand the stability of their applications.

Backend:

npm install @bugsnag/node

Backend Usage with Node.js:

const Bugsnag = require('@bugsnag/node');

Bugsnag.start({ apiKey: 'YOUR_API_KEY' });

// To capture an exception
try {
  throw new Error('Oops!');
} catch (error) {
  Bugsnag.notify(error);
}

Frontend:

npm install @bugsnag/js

Frontend Usage with JavaScript:

import Bugsnag from '@bugsnag/js';

Bugsnag.start({ apiKey: 'YOUR_API_KEY' });

// To capture an exception
try {
  throw new Error('Oops!');
} catch (error) {
  Bugsnag.notify(error);
}

Raygun

Raygun offers crash reporting, real-time error tracking, and performance monitoring for web and mobile apps. It helps teams to diagnose and resolve issues faster.

Universal:

npm install raygun

Universal usage:

const raygun = require('raygun');
const raygunClient = new raygun.Client().init({ apiKey: 'YOUR_API_KEY' });

// To send an error
raygunClient.send(new Error('Something went wrong'));

Rollbar

Rollbar is an error tracking software that helps teams identify, prioritize, and fix errors in real-time. It supports both frontend and backend environments.

Universal:

npm install rollbar

Universal usage:

const Rollbar = require('rollbar');
const rollbar = new Rollbar({
  accessToken: 'YOUR_ACCESS_TOKEN',
  captureUncaught: true,
  captureUnhandledRejections: true
});

// To log an error
rollbar.error('Error message');

// To capture an exception
try {
  throw new Error('Something bad happened!');
} catch (error) {
  rollbar.error(error);
}

These packages provide robust solutions for managing errors and exceptions, improving the reliability and quality of applications across different platforms and environments.

Best Practices & Tips

Here are some essential tips to enhance your error handling strategies:

Be Proactive: Anticipate possible error conditions and handle them upfront.

Keep It User-Friendly: Always consider the user experience when handling errors. Provide helpful error messages and recovery options to ensure that users are not left stranded by technical problems.

Log Wisely: Implement comprehensive logging for errors and exceptions. This helps in diagnosing issues after they occur and is invaluable for ongoing maintenance and debugging.

Use Tools: Leverage monitoring tools and services to keep an eye on your application's health in real-time. Tools like Sentry, Bugsnag, and New Relic can provide insights that are crucial for rapid response and resolution.

Continuously Improve: Use errors as learning opportunities. Analyzing them can provide insights into potential improvements in both code quality and user experience.

Conclusion

Error handling is more than just a technical necessity; it's a core component of software craftsmanship. By effectively managing errors and exceptions, you enhance not only the stability and reliability of your applications but also the overall user satisfaction. Remember, an error-free application is not one that never fails, but one that handles failures gracefully, learns from them, and adapts. Implement the advanced techniques discussed in this article to build more robust and "unbreakable" JavaScript applications, and stay ahead in the game of digital excellence.

Connect with me on LinkedIn: linkedIn/anu95

Happy coding! 💻 ❤️

Anurag Gupta
SDE-II, Microsoft

JavaScript Secrets: How to Implement Retry Logic Like a Pro

Anurag Gupta — Thu, 11 Apr 2024 08:13:06 +0000

Introduction

As enthusiastic JavaScript users, we often rely on REST APIs and microservices to fetch data for our applications, or to create and update information. Sometimes, we encounter issues like temporary errors, unstable connections, or service downtimes. These can disrupt our applications because we might not have effective strategies in place to try the operation again, leading to a disappointing user experience. 🌐💡

To improve this situation and ensure our applications run smoothly, it’s essential to implement solid retry strategies. This approach allows our applications to handle disruptions gracefully, maintaining stability and keeping users happy. By preparing our applications to retry failed operations intelligently, we enhance their resilience against common network issues. Let’s make our applications more reliable and user-friendly by mastering retry strategies. 🚀🛡️

Click here for GitHub Repo for code samples

Let’s jump straight into exploring different methods to implement retry logic! 🤿

So, what are retry strategies?

Imagine your application as a determined traveler navigating through a landscape riddled with obstacles. Just as a traveler might encounter closed roads or bad weather, our applications often face similar hurdles in the digital realm — like a sudden service outage or a glitch in the network. Retry strategies are our map and compass in these scenarios, guiding our application on when and how to make another attempt to reach its destination successfully. 🗺️⏳

They help our applications understand whether a problem is just a temporary glitch or something more serious. Based on this understanding, our applications can decide to wait a bit and try again, perhaps taking a slightly different path by adjusting the timing or method of the request.

Below are some strategies (in short):

Let’s explore different retry strategies through code examples having simulation of request failure as well, each offering a distinct method for overcoming digital challenges and keeping our applications on track. 🛤️

📈 Exponential Backoff
Think of this as gradually increasing your steps as you try to leap over a puddle. Initially, you start with small jumps, but with each attempt, you increase your leap exponentially. This strategy helps lessen the burden on our digital pathways, making it less likely for our efforts to splash down into the water again.

Doubles the wait time after each retry to reduce system load and failure likelihood.

const axios = require('axios');

let attemptCounter = 0; // Keep track of attempts

/**
 * Attempts to fetch data from a given URL using axios with simulated failures.
 * The function simulates network failures for the first 2 attempts by throwing an error,
 * demonstrating how retry mechanisms can handle transient errors.
 * After the simulated failures, actual axios requests are made.
 * 
 * Parameters:
 * - url: The URL to fetch data from.
 * - retries: The number of retries allowed.
 * - delay: The initial delay before retrying, which doubles with each retry.
 * 
 * The function uses exponential backoff for the delay between retries,
 * effectively handling temporary network issues by giving time for recovery.
 */
const fetchData = async (url, retries, delay) => {
  try {
    attemptCounter++;
    if (attemptCounter <= 2) {
      throw new Error('Simulated network failure');
    }

    const response = await axios.get(url);
    console.log(`Success: ${response.status}`);
    return response.data;
  } catch (error) {
    console.log(`Attempt ${attemptCounter} failed with error: ${error.message}. Waiting ${delay} ms before retrying.`);
    if (retries > 0) {
      await new Promise(resolve => setTimeout(resolve, delay));
      return fetchData(url, retries - 1, delay * 2);
    } else {
      throw new Error('All retries failed');
    }
  }
};

const url = 'https://jsonplaceholder.typicode.com/posts/1';
fetchData(url, 3, 1000).catch(console.error);

/**
 * Output:
 * Attempt 1 failed with error: Simulated network failure. Waiting 1000 ms before retrying.
 * Attempt 2 failed with error: Simulated network failure. Waiting 2000 ms before retrying.
 * Success: 200
 */

➡️ ️Linear Backoff
This is like walking on a straight path, where you take a step forward at regular intervals. After each retry, you wait a bit longer, but the wait time increases by the same amount each time. It’s steady and predictable, making sure we don’t rush and stumble.

Increases wait time by a constant amount after each retry for predictable delays.

const axios = require('axios');

let attemptCounter = 0; // Tracks the number of attempts for simulating failures

/**
 * This function demonstrates a linear backoff retry strategy using axios for HTTP requests.
 * It simulates network failures for the initial attempts and then succeeds, showcasing
 * how applications can recover from transient issues with appropriate retry logic.
 *
 * The linear backoff strategy increases the delay between retries by a fixed increment,
 * providing a balanced approach to managing retry intervals and allowing the system
 * some time to recover before the next attempt.
 *
 * Parameters:
 * - url: The URL to fetch data from.
 * - retries: The total number of retries allowed.
 * - delay: The initial delay before the first retry.
 * - increment: The amount by which the delay increases after each retry.
 *
 * On failure, the function waits for the specified delay, then retries the request
 * with an increased delay, based on the linear backoff calculation.
 */
const fetchDataWithLinearBackoff = async (url, retries, delay, increment) => {
  try {
    attemptCounter++;
    if (attemptCounter <= 3) {
      throw new Error('Simulated network failure');
    }

    const response = await axios.get(url);
    console.log(`Success: ${response.status}`);
    return response.data;
  } catch (error) {
    console.log(`Attempt ${attemptCounter} failed with error: ${error.message}. Waiting ${delay} ms before retrying.`);
    if (retries > 0) {
      await new Promise(resolve => setTimeout(resolve, delay));
      return fetchDataWithLinearBackoff(url, retries - 1, delay + increment, increment);
    } else {
      throw new Error('All retries failed');
    }
  }
};

const url = 'https://jsonplaceholder.typicode.com/posts/1';
fetchDataWithLinearBackoff(url, 5, 1000, 2000).catch(console.error);

/**
 * Output:
 * Attempt 1 failed with error: Simulated network failure. Waiting 1000 ms before retrying.
 * Attempt 2 failed with error: Simulated network failure. Waiting 3000 ms before retrying.
 * Attempt 3 failed with error: Simulated network failure. Waiting 5000 ms before retrying.
 * Success: 200
 */

🕛 Fixed Delay
Imagine pausing to breathe at regular intervals, no matter how far you’ve run. This strategy keeps the waiting time the same between each retry, providing our applications with a consistent rhythm to follow, ensuring they don’t wear themselves out too quickly.

Maintains a constant wait time between retries, regardless of attempt count.

const axios = require('axios');

let attemptCounter = 0; // To track the attempt number for simulating a scenario

/**
 * Demonstrates implementing a fixed delay retry strategy for HTTP requests using axios.
 * It simulates failures for the initial attempts to illustrate how fixed delay retries
 * can effectively manage transient errors by waiting a predetermined amount of time
 * before each retry attempt, regardless of the number of attempts made.
 *
 * The fixed delay approach ensures that retries are spaced out by a consistent interval,
 * offering a straightforward and predictable method to allow for system recovery or error
 * resolution before the next attempt. This strategy is particularly useful in scenarios
 * where the expected recovery time is consistent.
 *
 * Parameters:
 * - url: The endpoint URL to make the HTTP GET request to.
 * - retries: The number of retry attempts before giving up.
 * - delay: The fixed time in milliseconds to wait before each retry attempt.
 */
const fetchData = async (url, retries, delay) => {
  try {
    attemptCounter++;

    if (attemptCounter <= 3) {
      throw new Error('Simulated network failure');
    }

    const response = await axios.get(url);
    console.log(`Success: ${response.status}`);
    return response.data;
  } catch (error) {
    console.log(`Attempt ${attemptCounter} failed with error: ${error.message}. Waiting ${delay} ms before retrying.`);
    if (retries > 0) {
      await new Promise(resolve => setTimeout(resolve, delay));
      return fetchData(url, retries - 1, delay);
    } else {
      throw new Error('All retries failed');
    }
  }
};

const url = 'https://jsonplaceholder.typicode.com/posts/1';
fetchData(url, 4, 1000).catch(console.error);

/**
 * Output:
 * Attempt 1 failed with error: Simulated network failure. Waiting 1000 ms before retrying.
 * Attempt 2 failed with error: Simulated network failure. Waiting 1000 ms before retrying.
 * Attempt 3 failed with error: Simulated network failure. Waiting 1000 ms before retrying.
 * Success: 200
 */

🌀 Fibonacci Backoff
Inspired by nature’s spiral, this approach increases the wait time following the elegant Fibonacci sequence. Each step forward combines the wisdom of the last two, finding a harmonious balance between rushing and waiting too long, guiding us through challenges with natural grace.

Uses the Fibonacci sequence to determine the wait time, balancing between aggressive and moderate delays.

const axios = require('axios');

let attemptCounter = 0; // Tracks the current attempt for simulation

/**
 * Calculates the Fibonacci number for a given index.
 * The Fibonacci sequence is a series of numbers where each number is the sum
 * of the two preceding ones, usually starting with 0 and 1.
 *
 * - index: The position in the Fibonacci sequence.
 */
const calculateFibonacciNumber = (index) => {
    if (index <= 1) return index;
    let previous = 0, current = 1, temp;
    for (let i = 2; i <= index; i++) {
        temp = previous + current;
        previous = current;
        current = temp;
    }
    return current;
};

/**
 * Performs an HTTP GET request using axios with retries based on the Fibonacci backoff strategy.
 * Initially simulates network failures for the first few attempts to illustrate how the application
 * recovers using retry strategies with increasing delays based on the Fibonacci sequence.
 *
 * - url: The URL to send the request to.
 * - retries: The number of retries allowed before failing.
 * - baseDelay: The base delay in milliseconds for the Fibonacci backoff calculation.
 */
const fetchData = async (url, retries, baseDelay) => {
  try {
    attemptCounter++;

    if (attemptCounter <= 2) {
      throw new Error('Simulated network failure');
    }

    const response = await axios.get(url);
    console.log(`Success: ${response.status}`);
    return response.data;
  } catch (error) {
    console.log(`Attempt ${attemptCounter} failed with error: ${error.message}. Waiting for the next attempt.`);
    if (retries > 0) {
      const delay = calculateFibonacciNumber(5 - retries + 1) * baseDelay;
      console.log(`Waiting ${delay} ms before retrying.`);
      await new Promise(resolve => setTimeout(resolve, delay));
      return fetchData(url, retries - 1, baseDelay);
    } else {
      throw new Error('All retries failed after ' + attemptCounter + ' attempts');
    }
  }
};

const url = 'https://jsonplaceholder.typicode.com/posts/1';
fetchData(url, 5, 100).catch(console.error);

/** 
 * Output:
 * Attempt 1 failed with error: Simulated network failure. Waiting for the next attempt.
 * Waiting 100 ms before retrying.
 * Attempt 2 failed with error: Simulated network failure. Waiting for the next attempt.
 * Waiting 100 ms before retrying.
 * Success: 200
 */

🎲 Randomised Retry
As if rolling dice to decide how long to wait, this strategy introduces an element of chance in our retry timing. This randomness helps distribute our attempts more evenly, ensuring that not everyone rushes through the door at once, reducing the pressure on our systems.

Selects a random wait time before retrying to distribute attempts and reduce system load.

const axios = require('axios');

let attemptCounter = 0; // To track the number of attempts and simulate network failures

/**
 * Performs an HTTP GET request using axios with retries that incorporate randomized delays.
 * This strategy simulates network failures for the initial attempts to demonstrate how the application
 * can recover by retrying with random delays between a specified minimum and maximum range.
 * The randomization of retry intervals helps distribute the load and reduce peak pressure on the system.
 *
 * - url: The endpoint URL for the HTTP GET request.
 * - retries: The number of retries before giving up.
 * - minDelay: The minimum delay in milliseconds before retrying.
 * - maxDelay: The maximum delay in milliseconds before retrying.
 */
const fetchData = async (url, retries, minDelay, maxDelay) => {
  try {
    attemptCounter++;

    if (attemptCounter <= 2) {
      throw new Error('Simulated network failure');
    }

    const response = await axios.get(url);
    console.log(`Success: ${response.status}`);
    return response.data;
  } catch (error) {
    console.log(`Attempt ${attemptCounter} failed with error: ${error.message}.`);
    if (retries > 0) {
      const randomDelay = Math.random() * (maxDelay - minDelay) + minDelay; // Calculate a random delay
      console.log(`Waiting ${Math.round(randomDelay)} ms before retrying.`);
      await new Promise(resolve => setTimeout(resolve, Math.round(randomDelay)));
      return fetchData(url, retries - 1, minDelay, maxDelay);
    } else {
      throw new Error(`All retries failed after ${attemptCounter} attempts`);
    }
  }
};

const url = 'https://jsonplaceholder.typicode.com/posts/1';
fetchData(url, 3, 500, 1500).catch(console.error);

/**
 * Output:
 * Attempt 1 failed with error: Simulated network failure.
 * Waiting 1487 ms before retrying.
 * Attempt 2 failed with error: Simulated network failure.
 * Waiting 777 ms before retrying.
 * Success: 200
 */

⚡ Immediate Retry
Sometimes, the best approach is to try again right away, especially when we sense a quick solution might be just around the corner. This strategy is all about seizing the moment, ready to spring back into action at the first sign of a hiccup.

Retries immediately without delay, ideal for quickly resolvable issues.

const axios = require('axios');

let attemptCounter = 0; // Tracks the current attempt number to simulate network failures

/**
 * Executes an HTTP GET request using axios, employing an immediate retry strategy upon failure.
 * This approach simulates network failures for the first few attempts, illustrating how the application
 * adapts by retrying the operation immediately without any delay, making it suitable for quickly resolvable
 * transient issues.
 *
 * Immediate retries are used in scenarios where there is a high probability that errors are temporary
 * and can be resolved without introducing a delay, effectively improving the chances of a successful request
 * in environments with fluctuating network stability.
 *
 * - url: The endpoint URL for the HTTP GET request.
 * - retries: The number of allowed retries before giving up.
 */
const fetchData = async (url, retries) => {
  try {
    attemptCounter++;

    if (attemptCounter <= 3) {
      throw new Error('Simulated network failure');
    }

    const response = await axios.get(url);
    console.log(`Success: ${response.status}`);
    return response.data;
  } catch (error) {
    console.log(`Attempt ${attemptCounter} failed with error: ${error.message}.`);
    if (retries > 0) {
      console.log('Retrying immediately.');
      return fetchData(url, retries - 1);
    } else {
      throw new Error(`All retries failed after ${attemptCounter} attempts`);
    }
  }
};

const url = 'https://jsonplaceholder.typicode.com/posts/1';
fetchData(url, 5).catch(console.error);

/**
 * Output:
 * Attempt 1 failed with error: Simulated network failure.
 * Retrying immediately.
 * Attempt 2 failed with error: Simulated network failure.
 * Retrying immediately.
 * Attempt 3 failed with error: Simulated network failure.
 * Retrying immediately.
 * Success: 200
 */

Utilizing `npm` Packages for Retry Logic**

axios-retry
axios-retry offers a straightforward way to add retry functionality to your axios requests. This library can automatically retry failed requests under certain conditions, such as network errors or receiving specific HTTP response codes, and it supports configurable retry strategies, including exponential backoff.

To use axios-retry in a your application, first, ensure you have axios and axios-retry installed.

npm install axios axios-retry

yarn add axios axios-retry

Then, you can configure axios-retry in your application like so:

import axios from 'axios';
import axiosRetry from 'axios-retry';

// Configure axios-retry to automatically retry requests
axiosRetry(axios, {
  retries: 3, // Number of retry attempts
  retryDelay: axiosRetry.exponentialDelay, // Use exponential backoff delay between retry attempts
});

// Example of making a request with axios that will be retried upon failure
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Using axios-retry in frontend can significantly simplify handling retries for HTTP requests in your applications, allowing you to make your web apps more robust and reliable with minimal additional code.
npm package -> axios-retry

retry
The retry package provides a flexible way to add retry functionality to your code, suitable for any asynchronous operation or logic you want to attempt multiple times upon failure. Here's a basic guide on how to use it:

First, you need to install the package using npm or yarn:

npm install retry

yarn add retry

Here’s a simple example of how to use retry to perform a task that might fail:

const retry = require('retry');
const axios = require('axios'); // Assuming axios is used for HTTP requests

async function fetchData(url) {
  const operation = retry.operation({
    retries: 3, // Maximum amount of retries
    factor: 2, // The exponential factor for delay
    minTimeout: 1000, // The number of milliseconds before starting the first retry
    maxTimeout: 2000, // The maximum number of milliseconds between two retries
  });

  operation.attempt(async currentAttempt => {
    try {
      const response = await axios.get(url);
      console.log('Data:', response.data);
    } catch (error) {
      console.log(`Attempt ${currentAttempt} failed: ${error.message}`);
      if (operation.retry(error)) {
        console.log(`Retrying...`);
        return;
      }
      console.error('Request failed after retries:', error.message);
    }
  });
}

fetchData('https://jsonplaceholder.typicode.com/posts/1');

The retry package is powerful and flexible, making it suitable for a wide range of retry scenarios beyond just HTTP requests. You can adapt the retry logic to fit various asynchronous tasks, such as database operations, filesystem access, or any other operations that might require retries upon failure.

npm package -> retry

Best Practices for Implementing Retry Logic

Determine When to Retry: Not all errors should trigger a retry. Evaluate whether the error is transient and likely to be resolved with subsequent attempts.
Limit Retries: Set a maximum number of retries to prevent infinite loops.
Consider the User Experience: Ensure that retry logic does not degrade the user experience, especially in client-facing applications.

Conclusion 🚀
Incorporating retry logic into your JavaScript applications is a critical step toward ensuring reliability and resilience. Whether you choose to implement these strategies directly or leverage existing npm packages, the ability to gracefully handle transient errors will significantly enhance your application’s robustness and user satisfaction.

Connect with me on LinkedIn: https://www.linkedin.com/in/anu95/

Follow me on Instagram:
https://www.instagram.com/code_with_onu/

Happy coding! 💻 ❤️

Anurag Gupta
SDE-II, Microsoft

Craft Your Own Unique Modal (Popups) with HTML, CSS, and JavaScript!

Anurag Gupta — Sun, 16 Jul 2023 16:18:34 +0000

Welcome to the world of web applications, where popups play a crucial role in enhancing user experiences and enabling dynamic interactions. You've probably encountered popups while navigating through websites, whether it's a handy confirmation prompt before committing to action or seamlessly gathering user input on the go. Have you ever wondered how these versatile popups come to life, effortlessly appearing on the screen to fulfil diverse requirements?

In this captivating article, we'll unravel the secrets behind creating custom popups and empower you to tailor them to your heart's content. Brace yourself to embark on an exciting journey through the realms of HTML, CSS, and JavaScript, as we guide you step-by-step in constructing your very own personalized popups. Say goodbye to generic and limited solutions – with our expert guidance, you'll gain the freedom to craft unique popups that seamlessly integrate into any corner of the web. So, let's dive in and unlock the limitless potential of HTML, CSS, and JavaScript for your popup creations!

Prerequisites

💡 Basic understanding of HTML, CSS and JavaScript.
📝 Editor or IDE for your code.

How to create a custom modal?

Let's jump right in and explore the exciting realm of custom popups without any delay!

Note: For the purpose of this tutorial, I'll demonstrate keeping everything in a single file. However, feel free to separate your CSS and JavaScript code into individual files as per your preference.

Step 1:

To begin, we'll craft an HTML file called custom-popup.html and include the essential structure needed for our custom modal.

<!DOCTYPE html>
<html>
    <head>
        <title>Custom Modal using HTML, CSS and JavaScript</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    </head>
    <body>
        <h1>Custom Modal using HTML, CSS and JavaScript</h1>
    </body>
</html>

The above HTML code will generate an output that resembles the following screen:

Step 2:

Now, let's proceed to write the HTML code for our modal window.

Structure of Modal
To create our modal, we'll encapsulate the code within a wrapper that overlays the entire screen, accompanied by a semi-transparent background. This design not only ensures that the modal becomes the focal point but also prevents interaction with buttons or elements behind it. To achieve this, we'll follow the HTML structure outlined below for our modal design.

   body
   |- modal-wrapper 
      |- modal
         |- header
         |- body
         |- footer

Once we've implemented the corresponding HTML structure, it will transform into the following appearance:

<!DOCTYPE html>
<html>
    <head>
        <title>Custom Modal using HTML, CSS and JavaScript</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    </head>
    <body>
        <h1>Custom Modal using HTML, CSS and JavaScript</h1>

        <!-- Modal HTML Code Start -->
        <div class="modal-wrapper">
            <div class="modal">
                <div class="modal-header">
                    Custom Modal
                    <span class="close-modal">x</span>
                </div>
                <div class="modal-body">
                    Do you want to save changes?
                </div>
                <div class="modal-footer">
                    <button class="action-btn">Yes</button>
                    <button class="cancel-btn">Cancel</button>
                </div>
            </div>
        </div>
        <!-- Modal HTML Code End -->

    </body>
</html>

Step 3:

As you can observe, I have already included the class attribute in the HTML tag above to facilitate applying CSS styles later on. Now, let's proceed to apply CSS to our modal code and witness the delightful transformation it undergoes. Add below CSS code in <head> of html document within <style></style> tag to apply CSS.

body {
    font-family: Arial, Helvetica, sans-serif;
}
.modal-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(15 15 15 / 30%);
}
.modal {
    border: 1px solid #ffffff;
    width: 40%;
    border-radius: 8px;
    margin: 12% auto;
    background: white;
    box-shadow: 3px 3px 3px #0000002e;
}
.modal-header {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #cfcfcf;
    padding: 15px 15px;
}
.modal-body {
    padding: 20px 15px;
    height: 80px;
}
.modal-footer {
    border-top: 1px solid #cfcfcf;
    padding: 15px 15px;
    text-align: right;
}
.modal-footer > button {
    width: 75px;
    height: 30px;
    border-radius: 3px;
    color: white;
    letter-spacing: 0.5px;
    font-weight: bold;
    cursor: pointer;
}
.action-btn {
    background: #2a9577;
    border: 1px solid #2a9577;
}
.cancel-btn {
    background: #d73c33;
    border: 1px solid #d73c33;
}
.close-modal {
    float: right;
    margin-right: 5px;
    font-weight: 300;
    cursor: pointer;
}

Once the CSS is applied, your custom modal will undergo a remarkable transformation and take on a stunning appearance, resembling the following design:

Step 4:

With our design now in place, it's time to bring it to life. Modal windows, typically triggered by button clicks or other user actions, are initially hidden to ensure interactivity. To achieve this behavior, we'll add the CSS property display:none to the modal-wrapper class. Additionally, we'll create a button labeled "Open Modal" and position it after the <h1> heading. This button will serve as the catalyst for unveiling the captivating modal experience.

Now modal-wrapper class will look like below:

.modal-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(15 15 15 / 30%);
    display: none;
}

and after incorporating the new "Open Modal" button, our HTML code with its CSS will be enhanced and take on the following form:

<body>
    <h1>Custom Modal using HTML, CSS and JavaScript</h1>
    <p>Click below "Open Modal" button to open the Modal.</p>
    <button class="open-modal-btn">Open Modal</button>

    <!-- Modal HTML Code Start -->
    .....
</body>

Make sure to add CSS for the button as well and add it in style tag. CSS for open-modal-btn class is below:

.open-modal-btn {
    border: none;
    width: 150px;
    height: 40px;
    background: #5783db;
    color: white;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}

After implementing all these modifications, the resulting screen will exhibit the following appearance:

Step 5:

Now, it's time to breathe life into our creation and make it fully functional.

To enable the dynamic behavior of our modal, we'll write a JavaScript function responsible for launching and closing it. By manipulating the CSS property of the modal-wrapper class, we can control its visibility. Setting display:block will reveal the modal, while display:none will hide it.

Let's implement this function and place it within the <script> tag in the body section, ensuring it appears after the closing tag of the modal HTML. This arrangement will enable the seamless integration of JavaScript functionality.

To accomplish this, we'll need to assign an id attribute to the modal-wrapper element. By doing so, we can dynamically access the style property of the element within our function. After adding this, it will look like below:

 <div class="modal-wrapper" id="#customModal">
 .....

and JavaScript function to hide and show the modal within <script> tag:

const modalElement = document.getElementById('#customModal');
function handleModal(action) {
    modalElement.style.display = action ? 'block' : 'none';
}

Let's break it down:

const modalElement = document.getElementById('#customModal');

This line retrieves the DOM element with the id attribute set to "customModal" using the getElementById method. The reference to this element is stored in the modalElement variable.

function handleModal(action) { ... }

This declares a function named handleModal that takes an action parameter.

modalElement.style.display = action ? 'block' : 'none';

Within the handleModal function, this line dynamically modifies the display CSS property of the modalElement. If the action parameter is truthy, the display property is set to 'block', making the modal visible. Otherwise, if the action parameter is falsy, the display property is set to 'none', hiding the modal.

In summary, this code allows you to control the visibility of the modal element (modalElement) by calling the handleModal function and passing a boolean value. When the action parameter is true, the modal becomes visible, and when it is false, the modal is hidden.

Step 6:

In this final step, we will attach onclick event listeners to the respective buttons and call handleModal function with respective parameter, completing our implementation.

After implementing this step, the HTML code for our buttons will resemble the following:

.....

<button class="open-modal-btn" onclick="handleModal(1)">Open Modal</button>

.....

<div class="modal-header">
    Custom Modal
    <span class="close-modal" onclick="handleModal(0)">x</span>
</div>

.....

<button class="action-btn" onclick="alert('You clicked Yes.')">Yes</button>
<button class="cancel-btn" onclick="handleModal(0)">Cancel</button>

.....

Congratulations! We have successfully completed all the necessary steps. Now, it's time to put our creation to the test. But before we do that, let's take a moment to review the overall code we have developed thus far:

<!DOCTYPE html>
<html>

<head>
    <title>Custom Modal using HTML, CSS and JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        .modal-wrapper {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgb(15 15 15 / 30%);
            display: none;
        }
        .modal {
            border: 1px solid #ffffff;
            width: 40%;
            border-radius: 8px;
            margin: 12% auto;
            background: white;
            box-shadow: 3px 3px 3px #0000002e;
        }
        .modal-header {
            font-size: 18px;
            font-weight: bold;
            border-bottom: 1px solid #cfcfcf;
            padding: 15px 15px;
        }
        .modal-body {
            padding: 20px 15px;
            height: 80px;
        }
        .modal-footer {
            border-top: 1px solid #cfcfcf;
            padding: 15px 15px;
            text-align: right;
        }
        .modal-footer>button {
            width: 75px;
            height: 30px;
            border-radius: 3px;
            color: white;
            letter-spacing: 0.5px;
            font-weight: bold;
            cursor: pointer;
        }
        .action-btn {
            background: #2a9577;
            border: 1px solid #2a9577;
        }
        .cancel-btn {
            background: #d73c33;
            border: 1px solid #d73c33;
        }
        .open-modal-btn {
            border: none;
            width: 150px;
            height: 40px;
            background: #5783db;
            color: white;
            font-size: 16px;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
        }
        .close-modal {
            float: right;
            margin-right: 5px;
            font-weight: 300;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>Custom Modal using HTML, CSS and JavaScript</h1>
    <p>Click below "Open Modal" button to open the Modal.</p>
    <button class="open-modal-btn" onclick="handleModal(1)">Open Modal</button>

    <!-- Modal HTML Code Start -->
    <div class="modal-wrapper" id="#customModal">
        <div class="modal">
            <div class="modal-header">
                Custom Modal
                <span class="close-modal" onclick="handleModal(0)">x</span>
            </div>
            <div class="modal-body">
                Do you want to save changes?
            </div>
            <div class="modal-footer">
                <button class="action-btn" onclick="alert('You clicked Yes.')">Yes</button>
                <button class="cancel-btn" onclick="handleModal(0)">Cancel</button>
            </div>
        </div>
    </div>
    <!-- Modal HTML Code End -->

    <script type="text/javascript">
        const modalElement = document.getElementById('#customModal');
        function handleModal(action) {
            modalElement.style.display = action ? 'block' : 'none';
        }
    </script>
</body>

</html>

Take a look at this animated GIF that demonstrates how our Custom Modal works in action:

Conclusion

In conclusion, we have explored the process of creating a custom modal(popup) window using HTML, CSS, and JavaScript. From structuring the HTML and styling the modal to implementing dynamic functionality, we have gained insights into crafting engaging and interactive user experiences. With this knowledge, you can now unleash your creativity and seamlessly integrate custom modals into your web applications.

Thanks for reading this article. If you found this article helpful, I would greatly appreciate your support! Feel free to show your appreciation by liking, subscribing, and sharing your thoughts in the comments section below 😊

Happy coding!

DEV Community: Anurag Gupta

The Clipboard Problem That Drove Me to Build My Own Solution

How losing the same code snippet 50 times led me down a rabbit hole

The Problem (Or: Why I Got Frustrated)

The Daily Frustration

Why Existing Solutions Didn't Work for Me

What I Built

The Technical Challenges

Clipboard API Limitations

Manifest V3 Gotchas

Paste Functionality on Complex Sites

Real-Time Sync Without Constant Polling

Cross-Browser Compatibility

Smart Prioritization

What I Learned

1. Test on Real Sites Early

2. Service Worker State is Ephemeral

3. Real-Time Sync is Harder Than It Looks

4. User Behavior is Unpredictable

5. Cross-Browser Testing is Essential

What I'd Do Differently

Open Questions

The Result

From Bugs to Bulletproof: Transforming JavaScript with Error Handling

Introduction

What is an Error?

Why do errors occurs? 🤔

Human Nature 👤

Miscommunication 🗣️

Complexity Conundrums 🧩

Environmental Oddities 🌍

Resource Restrictions 🚫💾

Types of Errors

Syntax Errors 🔤

Runtime Errors ⏱️

Logical Errors 🧠

Semantic Errors 📖

Interpretation Errors 🏗️

Handling Errors

Using Try-Catch for Error Handling 🛠️

Throwing Custom Errors 🎯

Error Propagation 🔗

Using Finally for Cleanup 🧹

Async/Await for Asynchronous Error Handling ⏱️

Some Advance Techniques ⚙️

Centralized Error Handling 🌐

Promise Rejection Handling 🔄

Typescript Decorators for Asynchronous Error Handling 🎨

Monitoring and Observability 📊

npm Packages

Sentry

New Relic

Bugsnag

Raygun

Rollbar

Best Practices & Tips

Conclusion

JavaScript Secrets: How to Implement Retry Logic Like a Pro

Introduction

Below are some strategies (in short):

Utilizing npm Packages for Retry Logic**

Craft Your Own Unique Modal (Popups) with HTML, CSS, and JavaScript!

Prerequisites

How to create a custom modal?

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:

Conclusion

Utilizing `npm` Packages for Retry Logic**