पब्लिश होने की तारीख: 10 नवंबर, 2026
एजेंटिक वेब डेवलपमेंट के इस नए दौर में, डेवलपर को उम्मीद होती है कि उनके कोडिंग एजेंट, वेब के लिए ऐप्लिकेशन बनाने में माहिर हों. हालांकि, नए फ़्रंटियर कोडिंग मॉडल काफ़ी सक्षम हैं और आम तौर पर ऐसा कोड जनरेट कर सकते हैं जो काम करता है. इसके बावजूद, अगर किसी वेब डेवलपमेंट एक्सपर्ट से एआई से जनरेट किए गए कोड की समीक्षा करने के लिए कहा जाए, तो वह कोड को तेज़, ज़्यादा सुलभ या ज़्यादा सुरक्षित बनाने के तरीके ढूंढ सकता है.
Chrome, एजेंटिक वेब डेवलपमेंट के भविष्य में काफ़ी निवेश कर रहा है. इस चुनौती से निपटने के लिए, हमने मई में Google I/O में मॉडर्न वेब गाइडेंस की झलक पेश की थी. मॉडर्न वेब गाइडेंस, कौशल का एक सेट है. इसमें वेब प्लैटफ़ॉर्म की विशेषज्ञता, सबसे सही तरीके, और ब्राउज़र के साथ काम करने वाले डेटा को सीधे आपके कोडिंग एजेंट में शामिल किया जाता है.
आज हमें मॉडर्न वेब गाइडेंस के वर्शन 1.0 की स्टेबल रिलीज़ का एलान करते हुए खुशी हो रही है. इसमें ये शामिल हैं:
- मॉडर्नाइज़ेशन का नया वर्कफ़्लो, जो आपके मौजूदा कोड बेस को स्कैन करता है. इससे आपके एजेंट को सुरक्षित तरीके से मॉडर्नाइज़ करने के अवसर ढूंढने में मदद मिलती है.
- गाइड डेटाबेस को बड़ा किया गया है. इसमें एआई से जुड़ी सैकड़ों कमियों को दूर करने के लिए, विशेषज्ञों की जांच की गई और अलग-अलग ब्राउज़र पर काम करने वाली गाइड शामिल की गई हैं.
- हर गाइड की विशेषज्ञों से बारीकी से समीक्षा कराई जाती है. इसमें कॉन्टेंट एरिया के टेक लीड से मंज़ूरी लेना और उपयोगकर्ताओं के लिए उपलब्ध गाइड की सुलभता की समीक्षा करना शामिल है.
- पूरी तरह से आकलन करने की सुविधा: हमारी सभी गाइड में, सार्वजनिक तौर पर उपलब्ध आकलन डैशबोर्ड की मदद से, पूरी तरह से आकलन करने की सुविधा मिलती है. इससे, मॉडर्न वेब गाइडेंस का इस्तेमाल करने वाले एजेंट और इसका इस्तेमाल न करने वाले एजेंट के बीच के अंतर को साफ़ तौर पर देखा जा सकता है.
वर्शन 1.0 के साथ, हमें यह बताते हुए भी खुशी हो रही है कि मॉडर्न वेब गाइडेंस, अब एक क्रॉस-ब्राउज़र प्रोजेक्ट बन रहा है. इसमें Chrome के साथ-साथ Firefox और Edge भी शामिल हो रहे हैं. इससे क्रॉस-ब्राउज़र के साथ काम करने की सुविधा को बेहतर बनाने और प्रोजेक्ट में योगदान देने में मदद मिलेगी. Baseline के साथ मिलकर, हमारा मकसद यह पक्का करना है कि एजेंट के साथ कोडिंग करने वाला कोई भी व्यक्ति, मॉडर्न वेब प्लैटफ़ॉर्म की सुविधाओं का पूरा फ़ायदा ले सके.
चाहे किसी भी मॉडल या एआई मॉडल के लिए फ़्रेमवर्क का इस्तेमाल किया जा रहा हो, अगर वेब के लिए कुछ बनाया जा रहा है, तो मॉडर्न वेब गाइडेंस आपके एजेंटिक वर्कफ़्लो में शामिल होना चाहिए.
मॉडर्न वेब गाइडेंस को इंस्टॉल करने के लिए, अपनी प्रोजेक्ट डायरेक्ट्री से यह कमांड चलाएं:
npx modern-web-guidance@latest install
अगर आपने पहले से ही कोई पुराना वर्शन इंस्टॉल किया है, तो इसे 1.0 में अपडेट किया जा सकता है. इसके लिए, यह कमांड चलाएं:
npx modern-web-guidance@latest update
इंस्टॉल करने के बारे में ज़्यादा निर्देश पाने या ज़्यादा जानने के लिए, मॉडर्न वेब गाइडेंस से जुड़ा दस्तावेज़ देखें या खास जानकारी पाने के लिए यह वीडियो देखें:
डेवलपर और कारोबारों को मॉडर्न वेब गाइडेंस का इस्तेमाल क्यों करना चाहिए
इसमें कोई शक नहीं है कि कोडिंग एजेंट की मदद से, डेवलपर पहले से कहीं ज़्यादा तेज़ी से कोड लिख पाते हैं. हालांकि, आज के समय में जब हर कोई कोडिंग एजेंट का इस्तेमाल कर रहा है, तब तेज़ी से काम करना कोई खास फ़ायदा नहीं रह गया है.
आज के समय में, इस्तेमाल करने में आसानी और अनुभव की क्वालिटी जैसे बुनियादी पहलुओं पर ध्यान देना पहले से कहीं ज़्यादा ज़रूरी हो गया है. मॉडर्न वेब गाइडेंस से आपको इन तरीकों से मदद मिल सकती है:
उन सबसे सही तरीकों को लागू करना जिन्हें मॉडल अक्सर अनदेखा कर देते हैं
फ़्रंटियर कोडिंग मॉडल, कई सबसे सही तरीकों को अच्छी तरह से समझते हैं. हालांकि, हमारे मूल्यांकन से पता चलता है कि अब भी कई अहम क्षेत्रों में ये मॉडल पीछे रह जाते हैं. जैसे:
- सुलभता: कीबोर्ड फ़ोकस और इनर्ट मैनेजमेंट, कम मोशन वाली सुविधा, और सुलभ फ़ॉर्म की पुष्टि.
- उपयोगकर्ता अनुभव: स्वाइप और टच जेस्चर, डायलॉग और पॉपओवर ट्रांज़िशन, और हल्के/गहरे रंग वाली थीम लागू करना.
- परफ़ॉर्मेंस: मुख्य थ्रेड के टास्क को शेड्यूल करना, ऑफ़स्क्रीन रेंडरिंग को अलग करना, और लेआउट शिफ़्ट को रोकना.
- सुरक्षा: सुरक्षित एचटीएमएल सैनिटाइज़ेशन, कॉन्टेंट की सुरक्षा के लिए सख्त नीतियां, और पासकी क्रेडेंशियल मैनेजमेंट.
सुलभता से जुड़े सबसे सही तरीकों को अपनाना बेहद ज़रूरी है. ऐसा इसलिए, क्योंकि खराब ARIA जैसी गलतियों की वजह से, पेज को ऐक्सेस करना मुश्किल हो सकता है. वर्शन 1.0 के लिए, इस्तेमाल करने वाले लोगों के लिए उपलब्ध गाइड की समीक्षा की गई. साथ ही, सुलभता विशेषज्ञों ने असली सहायक टेक्नोलॉजी के साथ इनकी जांच की. ये विशेषज्ञ, रोज़ाना इन टेक्नोलॉजी का इस्तेमाल करते हैं.
टास्क के लिए सबसे सही वेब सुविधा का इस्तेमाल करना
एआई मॉडल, JavaScript का इस्तेमाल करके किसी चीज़ को काम करने लायक बनाने का तरीका ढूंढने में बहुत अच्छे होते हैं. हालांकि, कई मामलों में एचटीएमएल या सीएसएस की ऐसी सुविधाएं होती हैं जो बहुत कम कोड के साथ वही काम कर सकती हैं. इन्हें ब्राउज़र मैनेज करता है. इसलिए, ये आम तौर पर बेहतर परफ़ॉर्म करते हैं और इनमें सुलभता सुविधाएं भी होती हैं. उदाहरण के लिए:
- पॉपओवर और डायलॉग को ऐनिमेट करने की सुविधाएं
- स्क्रोल और स्वाइप करके इंटरैक्ट करने की सुविधा को बेहतर बनाने वाली सुविधाएं
- पेज ट्रांज़िशन को आसान और बेहतर बनाने के लिए बेहतर एपीआई
नई सुविधाओं से, साइट के अनुभव को उन तरीकों से भी बेहतर बनाया जा सकता है जो उपयोगकर्ताओं के लिए मायने रखते हैं. उदाहरण के लिए:
- पासकी और WebAuthn: तेज़ी से और ज़्यादा सुरक्षित तरीके से लॉगिन करने के लिए
- जानकारी ऑटोमैटिक भरने की सुविधा: चेकआउट प्रोसेस को बेहतर बनाने के लिए, जानकारी ऑटोमैटिक भरने की सुविधा का इस्तेमाल किया जाता है. खास तौर पर, मोबाइल पर चेकआउट प्रोसेस अक्सर तब काम नहीं करती, जब कस्टम JavaScript-आधारित फ़ॉर्म कंट्रोल का इस्तेमाल किया जाता है
मॉडर्न वेब गाइडेंस को इस तरह डिज़ाइन किया गया है कि यह आपके ब्राउज़र की ज़रूरी शर्तों के आधार पर, काम के लिए सबसे सही सुविधा का सुझाव दे. इसकी गाइड में, Baseline और ब्राउज़र के साथ काम करने की सुविधा का डेटा एम्बेड किया गया है. इससे, यह आपके प्रोजेक्ट की ज़रूरतों के हिसाब से सुझाव दे सकता है.
अपने कोड बेस को स्कैन करें और उसे आधुनिक बनाने के अवसर खोजें
ज़्यादातर वेब डेवलपमेंट, बिलकुल नए प्रोजेक्ट में नहीं होता. ऐसा उन मौजूदा कोड बेस में होता है जिनमें सालों से पुराने तरीके, ग़ैर-ज़रूरी डिपेंडेंसी, और ऐसे polyfill इकट्ठा हो गए हैं जिनकी अब ज़रूरत नहीं है.
वर्शन 1.0 में एक नया मॉडर्नाइज़ेशन वर्कफ़्लो जोड़ा गया है. यह आपके मौजूदा एचटीएमएल, सीएसएस, JavaScript, और package.json का विश्लेषण कर सकता है, ताकि सुरक्षित तरीके से अपग्रेड करने के अवसर ढूंढे जा सकें. इसके बाद, यह आपके एजेंट को बदलावों के बारे में जानकारी देता है.
/modern-web-guidance Modernize the code in this directory
इस पहली रिलीज़ में, मॉडर्नाइज़ेशन वर्कफ़्लो, स्टैटिक विश्लेषण का इस्तेमाल करके पैटर्न के सीमित सेट की जांच करता है. हमने शुरुआत में, सीमित दायरे में काम करने का फ़ैसला किया, ताकि हमें अनुमानित नतीजे मिल सकें. इसके बाद, हमने अपने दायरे को बढ़ाया. आने वाले समय में, हम कई और क्षेत्रों को कवर करने वाले हैं. इनमें एजेंटिक ऑडिट भी शामिल हैं. इनमें आपका एजेंट, सिर्फ़ जाने-पहचाने पैटर्न से मैच करने के बजाय, सीधे आपके कोड के बारे में तर्क देता है.
वेब प्लैटफ़ॉर्म में होने वाले बदलावों के बारे में अप-टू-डेट रहें
वेब प्लैटफ़ॉर्म लगातार बदल रहा है. ब्राउज़र के हर नए वर्शन के साथ नई सुविधाएं उपलब्ध कराई जाती हैं. साथ ही, ब्राउज़र के हर नए वर्शन के साथ, ऐसी मौजूदा सुविधाएं Baseline में शामिल हो जाती हैं जिनका इस्तेमाल शायद पहले नहीं किया जा सकता था.
मॉडर्न वेब गाइडेंस, Baseline के साथ काम करने वाले डेटा पर आधारित है. इसके सुझावों को ब्राउज़र इंजीनियर, वेब स्टैंडर्ड के विशेषज्ञ, और सुलभता विशेषज्ञ मैनेज करते हैं. इसलिए, ये सुझाव प्लैटफ़ॉर्म के साथ-साथ बेहतर होते रहते हैं. अब आपका प्रोजेक्ट भी बेहतर हो सकता है.
वेब की नई सुविधाओं और सबसे सही तरीकों के बारे में जानें
मॉडर्न वेब गाइडेंस को मुख्य रूप से एजेंट के लिए एक टूल के तौर पर बनाया गया है. हालांकि, कई डेवलपर ने हमें बताया है कि उन्हें यह गाइडेंस अपने-आप में काफ़ी मददगार लगा है. यह सीखने के लिए एक बेहतरीन संसाधन है.
एजेंटिक कोडिंग के इस दौर में भी, डोमेन की विशेषज्ञता हासिल करना ज़रूरी है. मॉडर्न वेब गाइडेंस की मदद से ऐसा किया जा सकता है: गाइड पढ़कर या सीएलआई का इस्तेमाल करके, इस्तेमाल के उदाहरण खोजें और नई तकनीकें ढूंढें जो आपके प्रोजेक्ट के लिए काम की हो सकती हैं.
एजेंट के लिए Chrome DevTools के साथ मॉडर्न वेब गाइडेंस को जोड़ना
एजेंटिक वेब डेवलपमेंट में, कोड लिखना वर्कफ़्लो का सिर्फ़ एक हिस्सा है. आपको उस कोड को चलाकर भी देखना होगा, ताकि यह पक्का किया जा सके कि वह उम्मीद के मुताबिक काम कर रहा है. इसलिए, हमारा सुझाव है कि डेवलपर, एजेंट के लिए Chrome DevTools के साथ-साथ मॉडर्न वेब गाइडेंस का इस्तेमाल करें.
- मॉडर्न वेब गाइडेंस आपके एजेंट को कोड लिखने के लिए ज़रूरी जानकारी देता है. इससे एजेंट, कोड लिखने के सबसे सही तरीकों का इस्तेमाल कर पाता है.
- एजेंट के लिए Chrome DevTools, आपके एजेंट को रनटाइम विज़िबिलिटी देता है. इससे एजेंट, डिवाइस की अलग-अलग क्षमताओं, उपयोगकर्ता की प्राथमिकताओं, और नेटवर्क की स्थितियों के हिसाब से कोड की पुष्टि कर सकता है, उसे डीबग कर सकता है, और उसे ऑप्टिमाइज़ कर सकता है.
इनकी मदद से, आपका एजेंट कम से कम बातचीत में बेहतर समाधान ढूंढ पाता है. यहां कुछ उदाहरण दिए गए हैं, जिनसे पता चलता है कि इन टूल का एक साथ इस्तेमाल करके, ज़्यादा से ज़्यादा असरदार तरीके से कैसे काम किया जा सकता है:
परफ़ॉर्मेंस टारगेट हासिल होने तक ऑप्टिमाइज़ करना
मॉडर्न वेब गाइडेंस, आपके एजेंट को यह सिखा सकता है कि मुख्य थ्रेड को ब्लॉक करने वाले JavaScript के लंबे टास्क को असरदार तरीके से कैसे बांटा जाए. हालांकि, यह आपके कोड की जांच करके यह नहीं देख सकता कि JavaScript के वे टास्क, मुख्य थ्रेड को असल में कितनी देर तक ब्लॉक करते हैं.
एजेंट के लिए Chrome DevTools की मदद से, सिम्युलेट किए गए लो-एंड सीपीयू पर परफ़ॉर्मेंस ट्रेस चलाया जा सकता है. इससे यह पता चलता है कि आपको कोई समस्या है या नहीं. इसके बाद, मॉडर्न वेब गाइडेंस से परफ़ॉर्मेंस से जुड़ी सलाह का इस्तेमाल करके, कोड को तब तक दोहराएं, जब तक कि वह मुख्य थ्रेड को 50 मिलीसेकंड से ज़्यादा समय तक ब्लॉक न करे. इससे आईएनपी खराब नहीं होता.
अपने ऐनिमेशन की जांच करना और उन्हें बेहतर बनाना
मॉडर्न वेब गाइडेंस, आपके एजेंट को यह दिखा सकता है कि मॉडल डायलॉग, टूलटिप, और पॉपओवर मेन्यू जैसी सुविधाओं को सही तरीके से और बेहतर परफ़ॉर्मेंस के साथ कैसे ऐनिमेट किया जाए. हालांकि, इस गाइडेंस के बावजूद, आपको यह पुष्टि करनी होगी कि ऐनिमेशन असल में काम करते हैं और आपके पूरे ऐप्लिकेशन के संदर्भ में इस्तेमाल किए जाने पर अच्छे दिखते हैं.
एजेंट के लिए Chrome DevTools, आपके कोड को चला सकता है, पेज के साथ इंटरैक्ट कर सकता है, और ऐनिमेशन की स्क्रीन रिकॉर्डिंग कर सकता है. इसके बाद, यह रिकॉर्डिंग की जांच करके यह पक्का कर सकता है कि ऐनिमेशन सही तरीके से चल रहा है और वह साइट की स्टाइल और लुक के मुताबिक है.
एजेंट के लिए Chrome DevTools का इस्तेमाल करके भी यह पुष्टि की जा सकती है कि prefers-reduced-motion सेट होने पर, कॉम्पोनेंट उपयोगकर्ता की प्राथमिकताओं का पालन करता है.
मेमोरी लीक के बिना कैश मेमोरी व्यू
मॉडर्न वेब गाइडेंस, आपके एजेंट को यह सिखा सकता है कि एसपीए ट्रांज़िशन को तुरंत कैसे लागू किया जाए. इसके लिए, मेमोरी में व्यू को रेंडर और कैश किया जाता है. साथ ही, उन्हें सुलभता ट्री से सही तरीके से छिपाया जाता है.
हालांकि, ऐसा करते समय यह पक्का करना ज़रूरी है कि इस्तेमाल न किए गए व्यू को सही तरीके से हटा दिया जाए. इससे, अगर उपयोगकर्ता लंबे समय तक पेज पर रहता है, तो मेमोरी लीक नहीं होगी. एजेंट के लिए Chrome DevTools में, मेमोरी डीबग करने वाले टूल होते हैं. इनकी मदद से, आपका एजेंट यह पक्का कर सकता है कि मेमोरी का इस्तेमाल ज़रूरत से ज़्यादा न बढ़े.
मॉडर्न वेब गाइडेंस और एजेंट के लिए Chrome DevTools को एक साथ इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, यह वीडियो देखें:
सफलता की कहानियां
दुनिया भर की इंजीनियरिंग टीमें, कोड की क्वालिटी को बेहतर बनाने, डिलीवरी को तेज़ करने, और मैन्युअल तरीके से डीबग करने की समस्याओं को खत्म करने के लिए, पहले से ही मॉडर्न वेब गाइडेंस और एजेंट के लिए Chrome DevTools का इस्तेमाल कर रही हैं:
Pensionbazaar और Policybazaar
Pensionbazaar, रिटायरमेंट की प्लानिंग करने वाला एक नया प्लैटफ़ॉर्म है. इसे भारत की फ़िनटेक कंपनी Paisabazaar ने लॉन्च किया है. इसने नए पेजों को बनाने और उनकी पुष्टि करने के लिए, मॉडर्न वेब गाइडेंस को एजेंट के लिए Chrome DevTools के साथ जोड़ा. इससे, पेज बनाने और उनकी पुष्टि करने में लगने वाला समय 90% से ज़्यादा कम हो गया. पहले इसमें करीब चार दिन लगते थे, लेकिन अब कुछ ही घंटों में यह काम हो जाता है. साथ ही, नई स्क्रीन पर यूज़र इंटरफ़ेस (यूआई) से जुड़ी गड़बड़ियां 90% से ज़्यादा कम हो गईं. Policybazaar, Paisabazaar का सिस्टर प्लैटफ़ॉर्म है. यह भारत के सबसे लोकप्रिय बीमा प्लैटफ़ॉर्म में से एक है. इसके 9.7 करोड़ से ज़्यादा रजिस्टर्ड ग्राहक हैं. इसने एजेंट के लिए Chrome DevTools का इस्तेमाल करके, ज़्यादा ट्रैफ़िक वाले करीब 30 लैंडिंग पेजों की परफ़ॉर्मेंस ऑडिट को ऑटोमेट किया. इससे मैन्युअल ऑडिटिंग में लगने वाले समय में 92% की कमी आई:
"Pensionbazaar के लिए, हमारी प्राथमिकता पहले दिन से ही अच्छी क्वालिटी का कोड बनाना था, ताकि बाद में टेक्निकल डेट से बचा जा सके. मॉडर्न वेब गाइडेंस ने हमारे कोडिंग एजेंट को वेब के आधुनिक स्टैंडर्ड और परफ़ॉर्मेंस के सबसे सही तरीकों को अपनाने के लिए प्रेरित किया. साथ ही, ब्राउज़र के साथ काम करने के हमारे खास लक्ष्यों का भी ध्यान रखा. इससे हमारे फ़्रंटएंड कोड रिव्यू काफ़ी आसान और तेज़ हो गए. साथ ही, हमारे डेवलपमेंट में लगने वाला समय भी कम हो गया.
—अमन सोनी, इंजीनियरिंग मैनेजर, Policybazaar
WeTV
Tencent के अंतरराष्ट्रीय वीडियो स्ट्रीमिंग प्लैटफ़ॉर्म WeTV ने अपनी सीआई/सीडी पाइपलाइन में एआई कोडिंग एजेंट को जोड़ा है. यह एजेंट, परफ़ॉर्मेंस में आई गिरावट का पता लगाने के लिए, एजेंट के लिए Chrome DevTools का इस्तेमाल करता है. साथ ही, मॉडर्न वेब प्लैटफ़ॉर्म की सुविधाओं का इस्तेमाल करके, परफ़ॉर्मेंस में आई गिरावट को ठीक करने के लिए, मॉडर्न वेब गाइडेंस का इस्तेमाल करता है. एजेंट अब परफ़ॉर्मेंस की जांच में आने वाली 90% गड़बड़ियों का अपने-आप पता लगाता है और उन्हें ठीक करता है. इससे डीबग करने और गड़बड़ी ठीक करने में लगने वाला समय 87% कम हो जाता है. इसमें मैन्युअल तरीके से की जाने वाली जांच भी शामिल है. पहले इसमें चार घंटे लगते थे, लेकिन अब सिर्फ़ 30 मिनट लगते हैं:
"स्पीड और क्वालिटी, दोनों के मामले में नतीजे बहुत असरदार रहे हैं. एजेंट के लिए Chrome DevTools और मॉडर्न वेब गाइडेंस से मिली डाइग्नोस्टिक इनसाइट की मदद से, हमें लेआउट से जुड़ी जटिल समस्याओं को ठीक करने के लिए भरोसेमंद रेफ़रंस मिले. हम हर समस्या को ठीक करने के बाद, उसकी बारीकी से जांच करते हैं. मौजूदा सक्सेस रेट और स्थिरता की वजह से, हमें रिलीज़ करने का भरोसा मिला है."
—यांगजी झेंग, हेड ऑफ़ इंजीनियरिंग, WeTV (Tencent)
नोट इंक॰
note inc., जापान के सबसे बड़े क्रिएटर और मीडिया प्लैटफ़ॉर्म में से एक है. इसके हर महीने 9 करोड़ से ज़्यादा सक्रिय उपयोगकर्ता हैं. इसने अपने इन-हाउस डिज़ाइन सिस्टम के साथ-साथ मॉडर्न वेब गाइडेंस का इस्तेमाल किया. ऐसा इसने अपने Next.js फ़्रंटएंड को आधुनिक बनाने की कोशिश के तहत किया. मॉडर्न वेब गाइडेंस ने अपने प्रोडक्शन कोड बेस पर 180 बार जांच की. इसमें पाया गया कि मॉडर्न वेब की जांच में पास होने की दर 61% से बढ़कर 94% हो गई. ऐसा इसलिए हुआ, क्योंकि इसने एजेंट को स्क्रोल ऐनिमेशन, टूलटिप, और अकॉर्डियन के लिए कस्टम JavaScript के बजाय, नेटिव एचटीएमएल और सीएसएस की सुविधाओं का इस्तेमाल करने के लिए कहा. इससे, मर्ज किए गए 431 पीआर में, एलसीपी इमेज को सही तरीके से प्राथमिकता देने की दर में 28% की बढ़ोतरी हुई:
"note का मिशन है, 'शुरू करें और कॉन्टेंट बनाते रहें'. इसलिए, हमारे प्लैटफ़ॉर्म को हर क्रिएटर और रीडर के लिए तेज़ और ऐक्सेस करने लायक होना चाहिए. ज़्यादातर कोड, एआई कोडिंग एजेंट की मदद से लिखे जाते हैं. ऐसे में, मॉडर्न वेब गाइडेंस उन्हें पुराने JavaScript पैटर्न पर वापस जाने के बजाय, आधुनिक और स्टैंडर्ड पर आधारित समाधानों तक पहुंचने में मदद करता है. यह ऐसी जानकारी भी दिखाता है जिसे आसानी से अनदेखा किया जा सकता है. जैसे, इमेज लोड होने की प्राथमिकता और फ़ॉर्म की सुलभता. हमारे डिज़ाइन सिस्टम के साथ मिलकर, यह हमें यूज़र इंटरफ़ेस (यूआई) को एक जैसा रखते हुए, नोट को बेहतर बनाने में मदद करता है."
ताकेहिको इताबाशी, वीपी ऑफ़ टेक्नोलॉजी, note inc.
MetaMask
MetaMask, खुद से मैनेज किया जाने वाला वित्तीय प्लैटफ़ॉर्म है. इसे करीब 190 देशों में 10 करोड़ से ज़्यादा बार डाउनलोड किया गया है. यह अपने ओपन सोर्स ब्राउज़र एक्सटेंशन के लिए, हर पुल अनुरोध पर मॉडर्न वेब गाइडेंस को अपने-आप समीक्षा करने वाले बॉट के तौर पर चलाता है. इसे सिर्फ़ तीन लाइनों वाले प्रॉम्प्ट से कॉन्फ़िगर किया गया है. अपने शुरुआती पांच हफ़्तों में, बॉट ने करीब 480 पुल के अनुरोधों की समीक्षा की और उनमें से 64 पर टिप्पणी की. इससे इंजीनियर को 43 समस्याओं को ठीक करने में मदद मिली. इनमें से ज़्यादातर समस्याएं सुलभता, एचटीएमएल सिमैंटिक, और फ़ॉर्म से जुड़ी थीं, जिन्हें लिंटर नहीं पकड़ पाते. टिप्पणी करने से लेकर समस्या को ठीक करने में औसतन 15 मिनट लगे:
"समीक्षाएं वाकई मददगार होती हैं. इनकी मदद से, हमारे इंजीनियर को इंटरेस्ट इन्वोकर और पॉपओवर एपीआई जैसे मॉडर्न एपीआई के बारे में जानने और उन्हें इस्तेमाल करने में मदद मिली. इससे पीआर की समीक्षा में लगने वाला समय नहीं बढ़ा है. अगर कुछ हुआ है, तो शायद समय कम हुआ है. MWG ने जिन समस्याओं का पता लगाया है उन्हें ठीक करने के लिए, समीक्षा करने वाले ऐसे व्यक्ति की ज़रूरत होती जो वेब की इन आधुनिक तकनीकों के बारे में जानता हो."
—फ़्रांसिस नेपोमुसेनो, यूएक्स इंजीनियर, MetaMask
इकोसिस्टम और कम्यूनिटी से जुड़ी सहायता
मॉडर्न वेब गाइडेंस की शुरुआत Chrome के अंदर एक पहल के तौर पर हुई थी. हालांकि, 1.0 के इस माइलस्टोन तक पहुंचने के लिए, वेब कम्यूनिटी के कई विशेषज्ञों ने मिलकर काम किया.
हम हर वेब प्लैटफ़ॉर्म की देखरेख करने वाले कॉन्टेंट एरिया के टेक लीड, Firefox और Edge के हमारे ब्राउज़र पार्टनर, वेब स्टैंडर्ड और सुलभता के स्वतंत्र विशेषज्ञों का धन्यवाद करते हैं. इन विशेषज्ञों ने गाइड लिखीं और उनकी जांच की. साथ ही, हम GitHub पर ओपन सोर्स में योगदान देने वाले उन सभी लोगों का धन्यवाद करते हैं जिन्होंने इस रिलीज़ को तैयार करने में मदद की!
अगर आपको लगता है कि कोडिंग एजेंट को वेब के बारे में कुछ जानकारी नहीं है या आपको किसी मौजूदा गाइड को बेहतर बनाने में मदद करनी है, तो योगदान देने के लिए योगदान देने से जुड़ी गाइड देखें.
मॉडर्न वेब गाइडेंस का इस्तेमाल शुरू करना
अपने प्रोजेक्ट में मॉडर्न वेब गाइडेंस जोड़ने के लिए, अपनी प्रोजेक्ट डायरेक्ट्री से सीएलआई इंस्टॉलर चलाएं:
npx modern-web-guidance@latest install
अगर आपने पहले से ही कोई पुराना वर्शन इंस्टॉल किया है, तो इसे 1.0 में अपडेट किया जा सकता है. इसके लिए, यह कमांड चलाएं:
npx modern-web-guidance@latest update
सीएलआई के अलावा, मॉडर्न वेब गाइडेंस को सीधे तौर पर कोडिंग एजेंट प्लगिन के सबसे लोकप्रिय मार्केटप्लेस से इंस्टॉल और अपडेट किया जा सकता है. इनमें Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code, और Grok Build शामिल हैं.
ज़्यादा जानने के लिए, ये संसाधन देखें: