फ़्रंटएंड इंजीनियर कैसे बनें

सिर्फ़ div के ढेर से आगे बढ़ें। लैंडमार्क, हेडिंग का क्रम, फ़ॉर्म, टेबल — सिमैंटिक HTML ही एक्सेसिबिलिटी की नींव है।

• डॉक्स मुफ़्त MDN — HTML →
• कोर्स मुफ़्त web.dev — Learn HTML →

Flexbox, Grid, कस्टम प्रॉपर्टी, कंटेनर क्वेरी, कैस्केड लेयर। यही वह हिस्सा है जिस पर PR में सबसे ज़्यादा चर्चा होती है।

• डॉक्स मुफ़्त CSS-Tricks — Flexbox Guide →
• डॉक्स मुफ़्त CSS-Tricks — Grid Guide →
• कोर्स मुफ़्त web.dev — Learn CSS →
• कोर्स पेड CSS for JS Developers (Josh Comeau) →

नेटवर्क टैब आपको सब कुछ कैसे बताता है। Cache-Control, CORS, कुकी, सर्विस वर्कर।

• डॉक्स मुफ़्त MDN — HTTP →
• किताब मुफ़्त High Performance Browser Networking →

क्लोज़र, प्रोटोटाइप, async/await, मॉड्यूल, इटरेटर। सिर्फ़ फ़्रेमवर्क नहीं, भाषा को समझें।

• ट्यूटोरियल मुफ़्त The Modern JavaScript Tutorial →
• किताब मुफ़्त You Don't Know JS (Kyle Simpson) →
• किताब मुफ़्त Exploring JS (Rauschmayer) →

डिज़ाइन के औज़ार के रूप में टाइप, जेनेरिक्स, कंडीशनल टाइप। फ़्रंटएंड टीमों में प्रोफ़ेशनल स्तर पर यही डिफ़ॉल्ट है।

• डॉक्स मुफ़्त TypeScript Handbook →
• कोर्स मिश्रित Type-Level TypeScript →
• कोर्स मिश्रित Total TypeScript (Matt Pocock) →

कंपोनेंट, प्रॉप्स, स्टेट, इफ़ेक्ट, रेफ़, कॉन्टेक्स्ट। समझें कि री-रेंडर असल में कैसे होते हैं।

• डॉक्स मुफ़्त React Docs →
• डॉक्स मुफ़्त Thinking in React →
• ब्लॉग मुफ़्त Kent C. Dodds' Blog →

useState, useReducer, Zustand, Redux Toolkit, Jotai और Recoil। अपने स्टेट की बनावट के हिसाब से टूल चुनें।

• डॉक्स मुफ़्त Redux Toolkit →
• डॉक्स मुफ़्त Zustand →
• डॉक्स मुफ़्त TanStack Query →

Vue, Svelte, Solid, Qwik। भले ही आप रोज़ React लिखते हों, इनकी जानकारी रखना फ़ायदेमंद है।

• डॉक्स मुफ़्त Vue.js Docs →
• ट्यूटोरियल मुफ़्त Svelte Tutorial →

App Router, सर्वर कंपोनेंट, स्ट्रीमिंग। React का इंडस्ट्री-मानक मेटा-फ़्रेमवर्क।

• कोर्स मुफ़्त Next.js Learn →
• डॉक्स मुफ़्त Next.js Docs →

प्रोडक्शन में इस्तेमाल होने वाले दूसरे मेटा-फ़्रेमवर्क। समस्याएँ वही, पर हल करने का नज़रिया अलग।

• डॉक्स मुफ़्त Remix Docs →
• डॉक्स मुफ़्त SvelteKit Docs →
• डॉक्स मुफ़्त Nuxt Docs →

यूटिलिटी-फ़र्स्ट तरीके का डिफ़ॉल्ट। सिर्फ़ क्लास के नाम नहीं, डिज़ाइन टोकन भी सीखें।

• डॉक्स मुफ़्त Tailwind Docs →

styled-components, Emotion, vanilla-extract, PandaCSS। जानें कि डेवलपर अनुभव (DX) के लिए चुकाई गई क़ीमत कब वसूल होती है।

• डॉक्स मुफ़्त vanilla-extract →
• डॉक्स मुफ़्त Panda CSS Docs →

टोकन, प्रिमिटिव, पैटर्न। Radix, shadcn/ui, MUI और Chakra को उदाहरण के तौर पर देखें।

• डॉक्स मुफ़्त shadcn/ui →
• डॉक्स मुफ़्त Radix UI →

वेब सबके लिए है, वरना वह अधूरा है। WCAG 2.2 AA मानक स्तर है; सिमैंटिक कमियों को ARIA पूरा करता है।

• डॉक्स मुफ़्त WCAG 2.2 Quick Reference →
• डॉक्स मुफ़्त WebAIM →
• ब्लॉग मुफ़्त Smashing — Accessible Components Guide →

axe-core, Lighthouse, jest-axe। गड़बड़ियाँ यूज़र की शिकायत से पहले CI में ही पकड़ें।

• डॉक्स मुफ़्त Deque axe-core →

LCP, INP, CLS। Google के मानक परफ़ॉर्मेंस मेट्रिक्स — मापे जा सकते हैं, इन पर नज़र रखी जाती है, और अब ये SEO के संकेत भी हैं।

• डॉक्स मुफ़्त web.dev — Core Web Vitals →
• कोर्स मुफ़्त web.dev — Learn Performance →

कोड स्प्लिटिंग, ट्री शेकिंग, डायनेमिक इंपोर्ट, बंडल विश्लेषण। कम से कम JavaScript भेजें।

• ब्लॉग मुफ़्त web.dev — Code Splitting →
• डॉक्स मुफ़्त Bundlephobia →

Vitest, Jest, Testing Library। अंदरूनी बनावट नहीं, व्यवहार को टेस्ट करें।

• डॉक्स मुफ़्त Vitest Docs →
• डॉक्स मुफ़्त Testing Library Docs →

Playwright, Cypress। सब कुछ नहीं, यूज़र के सबसे अहम सफ़र को कवर करें।

• डॉक्स मुफ़्त Playwright →
• डॉक्स मुफ़्त Cypress Docs →

आधुनिक बिल्ड टूल की तिकड़ी। तेज़ डेव सर्वर, तेज़ प्रोडक्शन बिल्ड और समझ में आने वाले कॉन्फ़िगरेशन।

• डॉक्स मुफ़्त Vite Docs →
• डॉक्स मुफ़्त esbuild →

pnpm वर्कस्पेस, Turborepo, Nx। तब काम आते हैं जब आपके पास 1 से ज़्यादा ऐप या साझा UI पैकेज हों।

• डॉक्स मुफ़्त Turborepo Docs →
• डॉक्स मुफ़्त pnpm Workspaces →

IntersectionObserver, ResizeObserver और requestIdleCallback; Web Workers, Service Workers और IndexedDB। थर्ड-पार्टी लाइब्रेरी से पहले इन्हें आज़माएँ।

• डॉक्स मुफ़्त MDN — Web APIs →

सर्विस वर्कर, Web App Manifest, ऑफ़लाइन-फ़र्स्ट। ब्राउज़र को ही ऐप चलाने का प्लेटफ़ॉर्म बना दें।

• कोर्स मुफ़्त web.dev — Learn PWA →

फ़्रंटएंड इंजीनियर रोज़ डिज़ाइन की बारीकियाँ पढ़ते हैं। ऑटो-लेआउट, कंस्ट्रेंट, डिज़ाइन टोकन, कंपोनेंट वैरिएंट।

• डॉक्स मुफ़्त Figma Help — Design Basics →

तेज़, सबके लिए सुलभ और सलीके से डिज़ाइन की गई पर्सनल साइट, जिस पर असली कंटेंट हो — फ़्रंटएंड में आपके अनुभव का इससे बेहतर सबूत कुछ नहीं।

• डॉक्स मुफ़्त Astro (great for personal sites) →
• ब्लॉग मुफ़्त Josh W. Comeau (reference) →