javascript 40 lines · 8 steps

Copying to the clipboard with a fallback

A clipboard helper that tries the modern async API first, then quietly degrades to the legacy execCommand path.

Explained by highlit

Intermediate clipboard progressive-enhancement dom error-handling fallback

1async function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err) {
    console.warn('Clipboard API failed, falling back:', err);
  }
}
10 
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', '');
textarea.style.position = 'fixed';
textarea.style.top = '-9999px';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
18 
const selection = document.getSelection();
const savedRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
21 
textarea.select();
textarea.setSelectionRange(0, textarea.value.length);
24 
let succeeded = false;
try {
  succeeded = document.execCommand('copy');
} catch (err) {
  console.error('Fallback copy failed:', err);
}
31 
document.body.removeChild(textarea);
33 
if (savedRange) {
  selection.removeAllRanges();
  selection.addRange(savedRange);
}
38 
return succeeded;
40}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Feature-detect the modern API but always keep a working fallback for older or insecure contexts.
2The legacy copy path requires a real, selected DOM element, so build and clean up a hidden textarea.
3Restoring the user's prior selection keeps the copy operation invisible and non-disruptive.

Related explainers

rust

use serde::Deserialize;
 
#[derive(Debug, Deserialize)]
#[serde(untagged)]

Parsing flexible JSON shapes with serde

deserialization enums json

Intermediate 6 steps

ruby

require "shellwords"
require "open3"
 
module Backup

Building safe shell commands in Ruby

shell-out subprocess command-injection

Intermediate 7 steps

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

rust

use chrono::{Duration, NaiveDate};
 
#[derive(Debug)]
pub struct DateRange {

Parsing and iterating date ranges in Rust

error-handling iterators parsing

Intermediate 7 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);