1. Debounce Function

readme.md

Source

https://javascript.plainenglish.io/i-copy-these-10-code-snippets-into-every-project-480dde89a6c9

debounce.js

// Prevents over-triggering on input changes or scroll events.
// Why: Prevents over-triggering on input changes or scroll events.
// Use case: Live search that waits for users to stop typing before firing an API call.


export function debounce(func, delay = 300) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), delay);
  };
}


const handleChange = debounce((val) => searchUsers(val), 400);

formatdate.js

// Format Date to Readable String
// Why: Always need it. Never want to Google it again.
// Use case:  Showing “Apr 22, 2024” in dashboards, receipts, etc.

export function formatDate(dateStr, locale = "en-US") {
  return new Date(dateStr).toLocaleDateString(locale, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

gistfile1.txt

🎯 3. ClassNames Utility
Why: Conditional classes shouldn’t be ugly.

export function classNames(...args) {
  return args.filter(Boolean).join(" ");
}
Use case:

<button className={classNames("btn", isActive && "btn-primary")} />
📦 4. Safe JSON Parse
Why: Parsing malformed localStorage or API strings? You need this.

export function safeJsonParse(str, fallback = {}) {
  try {
    return JSON.parse(str);
  } catch {
    return fallback;
  }
}
Use case:

const user = safeJsonParse(localStorage.getItem("user"));
🧪 5. IsEmpty Object
Why: Works better than Object.keys(obj).length === 0 in edge cases.

export function isEmpty(obj) {
  return obj && Object.keys(obj).length === 0 && obj.constructor === Object;
}
Use case:

if (isEmpty(formErrors)) submitForm();
Top 7 AI Tools That Transformed My Dev Workflow
Top 7 AI Tools That Transformed My Dev Workflow
🧩 6. Copy to Clipboard
Why: Every product has a “copy link” or “copy code” moment.

export async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err) {
    console.error("Copy failed:", err);
    return false;
  }
}
Use case:

<button onClick={() => copyToClipboard(url)}>Copy</button>
🔒 7. Capitalize First Letter
Why: Small detail. Big polish.

export function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
Use case:

capitalize("pending") // => "Pending"
🧠 8. Sleep (Wait) Helper
Why: Useful in tests, animations, throttled operations.

export function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
Use case:

await sleep(1000);
// Show loader for a minimum time
🧰 9. Remove Duplicates From Array
Why: Keeps your arrays clean without verbose logic.

export function uniqueArray(arr) {
  return [...new Set(arr)];
}
Use case:

const tags = uniqueArray([...userTags, ...defaultTags]);
📁 10. Download Any File from URL
Why: Enables quick, user-friendly downloads.

export function downloadFile(url, filename) {
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
Use case:

downloadFile("/resume.pdf", "MyResume.pdf");
Tailwind vs Material UI — I Used Both. One Almost Killed My Project
Tailwind vs Material UI — I Used Both. One Almost Killed My Project
✨ Bonus: Folder I Keep These In
In most React/Next.js projects, I drop all of these into:

/utils
  ├── debounce.js
  ├── formatDate.js
  ├── classNames.js
  ├── jsonHelpers.js
  ├── clipboard.js
  └── etc...
Then just import them as needed:

import { debounce, formatDate, copyToClipboard } from "@/utils";
💡 Why These Matter (Even More Than You Think)
They prevent bugs
They make your code cleaner
They save you from StackOverflow rabbit holes
They’re portable across every frontend or full-stack project
You don’t need 1,000 helper functions.

You need 10 really useful ones you trust.

🧠 Takeaways
Don’t rewrite helpers every time
Curate your own snippet library
Build a “starter kit” for every project (or use a template repo)
Use small utilities to avoid big bugs