Graceful Degradation vs Progressive Enhancement: Why Your Solo Project Needs Both

<!-- Base HTML that works everywhere -->
<form action="/api/book" method="POST">
  <input 
    type="datetime-local" 
    name="datetime" 
    required 
  />
  <input type="email" name="email" required />
  <button type="submit">Book Appointment</button>
</form>

<script>
  // Enhancement: client-side validation + instant feedback
  if ('IntersectionObserver' in window) {
    const form = document.querySelector('form');
    
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      // Show loading state
      const button = form.querySelector('button');
      button.disabled = true;
      button.textContent = 'Booking...';
      
      // Submit via fetch with better UX
      const formData = new FormData(form);
      const response = await fetch('/api/book', {
        method: 'POST',
        body: formData
      });
      
      if (response.ok) {
        // Show success without page reload
        showConfetti();
      }
    });
  }
</script>

// Check for modern clipboard API
const canUseModernClipboard = () => {
  return (
    'clipboard' in navigator &&
    'write' in navigator.clipboard
  );
};

// Use modern API with fallback
async function copyToClipboard(text) {
  if (canUseModernClipboard()) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (err) {
      // Permission denied or other error - fall through
    }
  }
  
  // Fallback: old-school text selection
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  
  try {
    document.execCommand('copy');
    return true;
  } finally {
    document.body.removeChild(textarea);
  }
}

// Usage - same interface everywhere
button.onclick = () => {
  copyToClipboard(secretToken);
  showToast('Copied!');
};

// Track feature support on real user devices
const trackFeatureSupport = () => {
  const features = {
    webp: document.createElement('canvas')
      .toDataURL('image/webp')
      .indexOf('data:image/webp') === 0,
    
    grid: CSS.supports('display: grid'),
    
    intersectionObserver: 'IntersectionObserver' in window,
    
    serviceWorker: 'serviceWorker' in navigator,
  };
  
  // Send to your analytics (Plausible, PostHog, etc.)
  analytics.track('browser_capabilities', features);
  
  return features;
};

// On page load, track once per session
if (!sessionStorage.getItem('features_tracked')) {
  trackFeatureSupport();
  sessionStorage.setItem('features_tracked', 'true');
}

// features.js - Your feature detection library
export const features = {
  clipboard: 'clipboard' in navigator,
  webp: null, // Check async
  localStorage: (() => {
    try {
      localStorage.setItem('test', 'test');
      localStorage.removeItem('test');
      return true;
    } catch {
      return false;
    }
  })(),
};

// React example
function CopyButton({ text }) {
  const [supported, setSupported] = useState(features.clipboard);
  
  if (!supported) {
    // Fallback UI: show the text to copy manually
    return (
      <div className="copy-fallback">
        <code>{text}</code>
        <small>Copy this manually</small>
      </div>
    );
  }
  
  return (
    <button onClick={() => copyToClipboard(text)}>
      Copy to Clipboard
    </button>
  );
}

// Vue example
<template>
  <button v-if="features.clipboard" @click="copy">
    Copy
  </button>
  <code v-else>{{ text }}</code>
</template>

// Svelte example
{#if features.clipboard}
  <button on:click={copy}>Copy</button>
{:else}
  <code>{text}</code>
{/if}

// App loads, checks features once
const userCapabilities = {
  canUseOffline: 'serviceWorker' in navigator,
  canCopyRich: 'ClipboardItem' in window,
  canShareNative: 'share' in navigator,
  hasWebP: await checkWebPSupport(),
};

// Now just check flags throughout your app
if (userCapabilities.canShareNative) {
  showShareButton();
} else {
  showCopyLinkButton(); // Works everywhere
}

// Image component uses the capability
function ProjectImage({ src }) {
  const format = userCapabilities.hasWebP ? 'webp' : 'jpg';
  return <img src={`${src}.${format}`} />;
}