🚀 FRONTEND DEVELOPER
CHEATSHEET
1. HTML
Gunakan struktur semantik: header, nav, main, section, article, footer.
Optimasi elemen:
o
<img loading="lazy">
o
o
<meta viewport> untuk responsif.
o
A11y:
alt wajib pada gambar.
o
o
Gunakan heading berurutan.
o
o
aria-label untuk elemen interaktif.
2. CSS
Layout
display: flex; gap: 1rem;display: grid; grid-template-columns:
repeat(auto-fit,minmax(200px,1fr));
Responsif
@media (max-width:768px){...}
Praktik Baik
Gunakan CSS Variables (:root { --primary:#4f46e5; }).
Gunakan utility-first (Tailwind) untuk development cepat.
Pisahkan component styling agar mudah dirawat.
3. JavaScript ES6+
Arrow function:
const sum=(a,b)=>a+b;
Destructuring:
const {name,age}=user;
Spread:
const arr2=[...arr1,100];
Async/Await:
try{const r=await fetch(url);}catch(e){}
4. DOM & Events
[Link]("#btn")
.addEventListener("click",()=>[Link]("ok"));
Gunakan [Link]/remove/toggle untuk manipulasi UI.
5. HTTP & API
const data=await fetch("/api/users").then(r=>[Link]());
Prinsip:
Gunakan base URL terpusat.
Standard response: { success, data, message }.
Implementasikan error boundary.
6. Frontend Architecture
Struktur umum proyek React/[Link]
src/
├─ components/
├─ pages/ atau app/
├─ hooks/
├─ lib/
├─ styles/
└─ utils/
Prinsip:
Pisahkan business logic ke hooks.
UI harus stateless jika memungkinkan.
State global hanya untuk data lintas halaman.
7. State Management
Server state → TanStack Query / SWR.
UI state → Zustand / Redux Toolkit / Context.
Hindari penumpukan state di satu file.
8. Performance
Lazy load komponen/page.
Optimasi gambar (webp, next/image).
Gunakan memoization:
useMemo,useCallback,[Link]
Cache API saat memungkinkan.
9. Testing
Unit test: Jest + Testing Library.
E2E: Playwright / Cypress.
10. Tools Wajib
VSCode (+ Prettier, ESLint).
Postman/Thunder Client.
Browser DevTools (Network, Performance).
Git + branching flow.
[Link], npm/pnpm.
11. UX & Best Practices
Loading state yang jelas (skeleton, spinner).
Error state informatif.
Gunakan spacing konsisten.
Hindari over-engineering: mulai simple → scale.
12. Soft Skills
Pahami desain Figma.
Komunikasi dengan backend & PM.
Menulis kode yang bersih & mudah dibaca.
Dokumentasikan komponen & flow.