Code library

Snippets

The lines I copy-paste between projects often enough to give them a permalink instead — CSS first, a little JS.

6snippets
2languages

All snippets

Fluid type with one clamp() css 1
2 
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
line-height: 1.5;
 A grid that wraps itself css 1
2
3
4 
display: grid;
grid-template-columns:
  repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-4);
 A debounce in six lines js 1
2
3
4
5
6
7 
function debounce(fn, ms) {
  let t;
  return (...a) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...a), ms);
  };
}
 Morph one element across a navigation css 1
2
3 
.hero { view-transition-name: hero; }

@view-transition { navigation: auto; }
 A focus ring that only shows for keyboards css 1
2
3
4 
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
 Copy to clipboard, with a fallback js 1
2
3
4
5
6
7 
async function copy(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch {
    document.execCommand('copy');
  }
}