Final Revision Guide & Engineering Checkpoints (Hinglish)

Interviews se pehle ya production deployment se pehle critical concepts ko fast revise karne ke liye high-yield revision checklist.

1. HTML5 Foundations & Accessibility Checklist

[ ] Standards Mode: Line 1 par hamesha <!DOCTYPE html> declare karein.
[ ] Language Tag: Screen readers ke liye <html lang="hi"> ya en likhein.
[ ] Mobile Viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0"> zaroor include karein.
[ ] Heading Outline: Poore page par sirf ek <h1> hona chahiye. Sequential <h2> aur <h3> follow karein.
[ ] Form Labels: Har <input> ke sath <label for="id"> laga hona chahiye.
[ ] Image Alt Rule: Informative images par descriptive alt text dein; decorative image par alt="" khali rakhein.
[ ] External Links: target="_blank" lagane par rel="noopener noreferrer" lagana compulsory hai.
[ ] Native Modals: Popup dialogs ke liye native <dialog> aur .showModal() use karein.
[ ] WAI-ARIA Rule: "No ARIA is better than bad ARIA." Native semantic HTML tags ko hamesha pehli priority dein.

[ ] Universal Reset: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[ ] Typography Units: Scalable font size aur paddings ke liye rem aur thin borders ke liye px use karein.
[ ] Unitless Line Height: Text overlap se bachne ke liye unitless line-height: 1.5; use karein.
[ ] Specificity Order: Inline (1-0-0-0) > ID (0-1-0-0) > Class (0-0-1-0) > Element (0-0-0-1).
[ ] Cascade Layers: !important wars se bachne ke liye @layer prioritize karein.
[ ] Flexbox vs Grid: 1D linear alignment ke liye Flexbox aur 2D coordinate layouts ke liye CSS Grid use karein.
[ ] Bina Media Query Ke Responsive Grid: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
[ ] GPU-Accelerated Animations: Sirf transform aur opacity animate karein. Geometry properties (top, margin, width) kabhi animate na karein.
[ ] Motion Sensitivity: @media (prefers-reduced-motion: reduce) zaroor support karein.
[ ] Accessible Focus Ring: :focus-visible par 2px outline zaroor provide karein.

[ ] Variables: Hamesha const use karein; agar value reassign honi ho tabhi let use karein. var kabhi use na karein.
[ ] Non-blocking Scripts: Hamesha <script src="..." defer></script> se load karein.
[ ] Strict Equality: Type coercion bugs se bachne ke liye hamesha === lagayein.
[ ] Falsy Values: 0 ya "" hone par fallback rokne ke liye || ke badle ?? (Nullish Coalescing) use karein.
[ ] Safe Property Access: Deep objects ko safely read karne ke liye user?.profile?.address (Optional Chaining) use karein.
[ ] Event Loop Priority: Call Stack empty hone ke baad pehle saari Microtasks (Promises) run hongi, fir screen repaint hogi aur fir ek Macrotask chalega.
[ ] Form Submit: Page refresh rokne ke liye event.preventDefault() zaroor lagayein.
[ ] DOM Performance: Batch DOM injection ke liye DocumentFragment use karein.
[ ] Event Delegation: Hazaron elements par alag listeners lagane ke badle common parent par ek single listener lagayein.
[ ] Debounce vs Throttle: Search box par Debounce (300ms) aur scroll/resize par Throttle (100ms) lagayein.
[ ] Fetch Error Handling: Fetch 404/500 par reject nahi karta, isliye hamesha if (!response.ok) check karein.
[ ] LocalStorage Security: Sensitive JWT tokens ko localStorage mein kabhi na rakhein, balki server-side HttpOnly, Secure cookies mein rakhein.
[ ] XSS Prevention: User input ko kabhi direct innerHTML mein mat daalein; hamesha .textContent use karein.