Code Snippets - Topgamebeat

JavaScript

Debounce Function

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => 
      func.apply(this, args), wait);
  };
}

JavaScript

Deep Clone Object

const deepClone = obj => 
  JSON.parse(JSON.stringify(obj));

// Or with structuredClone (modern)
const clone = structuredClone(obj);

CSS

Glassmorphism Card

.glass-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);
}

API

Fetch with Timeout

async function fetchWithTimeout(url, ms) {
  const ctrl = new AbortController();
  const id = setTimeout(() => 
    ctrl.abort(), ms);
  const res = await fetch(url, 
    { signal: ctrl.signal });
  clearTimeout(id);
  return res;
}

CSS

Smooth Scroll

html {
  scroll-behavior: smooth;
}

/* Or with JS */
element.scrollIntoView({ 
  behavior: 'smooth' 
});

HTML

Responsive Image

<picture>
  <source media="(min-width:800px)" 
    srcset="large.jpg">
  <source media="(min-width:400px)" 
    srcset="medium.jpg">
  <img src="small.jpg" alt="...">
</picture>