JavaScript in the browser: DOM, events, async

How it works: clsx collapses an array of strings/objects/falsy values into one class string; twMerge then resolves Tailwind-specific conflicts (e.g. px-2 vs px-4) by keeping only the last one that wins, instead of leaving both in the DOM. Requires npm install clsx tailwind-merge.

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

// Example usage — later classes win over earlier conflicting ones
cn('px-2 py-1', condition && 'px-4', 'text-sm')
// condition = true  -> "py-1 px-4 text-sm"
// condition = false -> "px-2 py-1 text-sm"

How it works:

1. Each call to the debounced function clears the previous pending timer.
2. A new timer is scheduled for delay ms.
3. The wrapped function only actually runs once calls stop arriving for delay ms.

function debounce(fn, delay = 300) {
  let timeoutId

  return function debounced(...args) {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => fn.apply(this, args), delay)
  }
}

// Example usage
const onResize = debounce(() => console.log('window resized'), 250)
window.addEventListener('resize', onResize)

How it works: unlike debounce (which waits for calls to stop before running), throttle guarantees the function still runs periodically DURING a continuous stream of calls — the first call fires immediately, then further calls are ignored until limit ms have passed.

function throttle(fn, limit = 200) {
  let waiting = false

  return function throttled(...args) {
    if (waiting) return
    fn.apply(this, args)
    waiting = true
    setTimeout(() => { waiting = false }, limit)
  }
}

// Example usage
const onScroll = throttle(() => console.log('scroll position:', window.scrollY), 200)
window.addEventListener('scroll', onScroll)

How it works: it converts the hex color to RGB and applies the standard luminance-weighted brightness formula (299r + 587g + 114b) — values above 155 are treated as "light" backgrounds.

function isColorLight(hex) {
  hex = hex.replace(/^#/, '')
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
  }
  const r = parseInt(hex.substring(0, 2), 16)
  const g = parseInt(hex.substring(2, 4), 16)
  const b = parseInt(hex.substring(4, 6), 16)
  const brightness = (r * 299 + g * 587 + b * 114) / 1000
  return brightness > 155
}

// Example usage — pick readable text color for any background
const textColor = isColorLight('#F5D90A') ? 'black' : 'white'

How it works: it checks the element's isContentEditable flag and its tag name against the usual text-entry elements, so you can skip handling a shortcut key while the user is actively typing.

function isEditable(target) {
  if (!target) return false
  const tag = (target.tagName || '').toLowerCase()
  return target.isContentEditable || tag === 'input' || tag === 'textarea' || tag === 'select'
}

// Example usage — only trigger a shortcut when not typing
window.addEventListener('keydown', (e) => {
  if (e.key === '/' && !isEditable(document.activeElement)) {
    e.preventDefault()
    // focus a search input, open a command palette, etc.
  }
})

How it works: preload="none" asks the browser not to fetch the video eagerly, while omitting autoplay lets the observer control the first playback. Keeping muted and playsinline is important for autoplay policies and inline playback on mobile.

<video
  class="lazy"
  width="720"
  height="404"
  loop
  muted
  playsinline
  preload="none"
  poster="/images/ocean.png"
  src="/videos/demo/ocean.mp4"
></video>

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return

    const video = entry.target
    video.play().catch(() => {
      // Autoplay can still be blocked by browser policy.
    })
    observer.unobserve(video)
  })
})

document.querySelectorAll('.lazy').forEach((video) => {
  observer.observe(video)
})

How it works: getBoundingClientRect().top returns the element's position relative to the viewport. Adding window.scrollY converts that to an absolute position, then we subtract the offset for the header. scrollTo({ behavior: 'smooth' }) animates natively.

function scrollToAnchor(id, offsetPx = 0) {
  const el = document.getElementById(id)
  if (!el) return

  const top = el.getBoundingClientRect().top + window.scrollY - offsetPx
  window.scrollTo({ top, behavior: 'smooth' })
}

// Version with prefers-reduced-motion support
function scrollToAnchorAccessible(id, offsetPx = 0) {
  const el = document.getElementById(id)
  if (!el) return

  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
  const top = el.getBoundingClientRect().top + window.scrollY - offsetPx

  window.scrollTo({ top, behavior: prefersReduced ? 'instant' : 'smooth' })
}

// Example usage
// Navigation links with a 64px fixed header
document.querySelectorAll('a[href^="#"]').forEach((link) => {
  link.addEventListener('click', (e) => {
    e.preventDefault()
    const id = link.getAttribute('href').slice(1)
    scrollToAnchorAccessible(id, 64)
  })
})

How it works: returns a Promise that resolves after setTimeout. Awaiting it pauses only the current async function without blocking the event loop.

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

// Example usage — delay between retry attempts
async function pollUntilReady(checkFn, intervalMs = 500, maxAttempts = 10) {
  for (let i = 0; i < maxAttempts; i++) {
    if (await checkFn()) return true
    await sleep(intervalMs)
  }
  return false
}

// Client-side rate limiting between batch requests
for (const batch of batches) {
  await processBatch(batch)
  await sleep(200)
}

How it works: a GET request to ipapi.co/{ip}/json/ returns the geolocation data as JSON — including country_name and city. Leaving ip empty makes the API auto-detect the caller's own IP, so it works great for greeting the current visitor.

async function getIpInfo(ip = '') {
  const response = await fetch(`https://ipapi.co/${ip}/json/`)
  return response.json()
}

// Example usage
const info = await getIpInfo() // empty ip -> detects the visitor's own IP
console.log(`${info.city}, ${info.country_name}`)

const other = await getIpInfo('8.8.8.8') // or look up a specific IP
console.log(other.country_name)

How it works: a JWT has three dot-separated parts. The second part is a Base64URL-encoded JSON payload. This function decodes it and parses the JSON. The signature is not verified — this is for client-side data reading only.

function decodeJwtPayload(token) {
  try {
    const base64 = token.split('.')[1]
    if (!base64) return null
    // Base64URL → Base64
    const normalized = base64.replace(/-/g, '+').replace(/_/g, '/')
    return JSON.parse(atob(normalized))
  } catch {
    return null
  }
}

function isTokenExpired(token) {
  const payload = decodeJwtPayload(token)
  if (!payload?.exp) return true
  return Date.now() >= payload.exp * 1000
}

// Example usage
const payload = decodeJwtPayload(localStorage.getItem('token'))
// { sub: '42', role: 'admin', exp: 1720000000 }

if (isTokenExpired(token)) {
  // refresh or log out
}