Part 26 — Best Practices

Naming: intention-revealing (activeUsers not au); booleans is/has/can; functions are verbs, variables are nouns; avoid abbreviations.

Structure: group by feature, not by type, in larger apps; keep files small and single-purpose; colocate tests.

Clean code: small functions doing one thing; avoid deep nesting (early returns/guard clauses); prefer pure functions; avoid magic numbers (name constants); DRY, but don't over-abstract prematurely.

Immutability: default to const; avoid mutating inputs; use immutable array methods (toSorted, spread) in state code.

Documentation: JSDoc for public functions; write why, not what; keep a README with run/build/test steps.

Tooling: ESLint (catch bugs) + Prettier (formatting) + TypeScript or JSDoc types; CI to run them.

Testing: unit (Vitest/Jest), integration, e2e (Playwright); test behaviour not implementation; aim for meaningful coverage, not 100%.

Accessibility: semantic HTML, keyboard support, ARIA only when needed, sufficient contrast, focus management, respect prefers-reduced-motion.

Maintainability: small PRs, meaningful commits, consistent style, avoid clever one-liners that hurt readability.

// ❌ deep nesting
function f(u){ if(u){ if(u.active){ if(u.paid){ return "ok"; } } } }
// ✅ guard clauses
function f(u){
  if (!u) return;
  if (!u.active) return;
  if (!u.paid) return;
  return "ok";
}