तीन दिनों तक चलने वाले ऑनलाइन कम्यूनिटी इवेंट के दौरान, मुख्य खबरों और अपडेट की खास जानकारी और आने वाले समय में होने वाले क्षेत्रीय इवेंट के बारे में रिमाइंडर.
हमने तीन दिनों का अपना इवेंट, web.dev LIVE अभी खत्म किया है. इसमें कुछ लोग, वेब डेवलपमेंट की स्थिति के बारे में बात करने के लिए ऑनलाइन इकट्ठा हुए हैं. हमने हर दिन की शुरुआत अलग-अलग क्षेत्रीय टाइमज़ोन से की है. इस दौरान, Googler ने अपडेट, खबरें, और सलाह शेयर की, ताकि डेवलपर को टूल और दिशा-निर्देश देकर मदद की जा सके. इससे उन्हें वेब को स्थिर, बेहतर, और ऐक्सेस करने लायक बनाए रखने में मदद मिलेगी.
अगर आपसे लाइव स्ट्रीम का कुछ हिस्सा छूट गया है, तो उसके सभी सेशन रिकॉर्ड कर लिए जाते हैं और इन्हें YouTube पर देखा जा सकता है. आने वाले समय में, हमें दुनिया भर में रीजनल इवेंट भी मिलेंगे. इन इवेंट को Google Developer Groups आयोजित करता है. इनमें, web.dev LIVE के दौरान हमने जो बातें कवर की हैं उनसे जुड़े विषयों के बारे में गहराई से जानकारी देने वाले सेशन होंगे.
चलिए, पिछले तीन दिनों में शेयर की गई कुछ खबरों और अपडेट के बारे में जानें.
वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी
Chrome की टीम ने वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली पहल का एलान किया है. इसमें, सभी ज़रूरी दिशा-निर्देश, मेट्रिक, और टूल उपलब्ध कराए गए हैं, ताकि डेवलपर को वेब पर बेहतरीन अनुभव देने में मदद मिल सके. Google Search की टीम ने हाल ही में एलान किया था कि वह रैंकिंग की शर्तों के तौर पर, पेज की परफ़ॉर्मेंस का आकलन करेगी. साथ ही, इसमें वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी मेट्रिक को आधार के तौर पर शामिल किया जाएगा.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली, 2020 के तीन मुख्य अहम बातें हैं: पेज का कॉन्टेंट लोड होना, उसके इंटरैक्टिव होने, और विज़ुअल स्टैबिलिटी का इस्तेमाल करने की, ये मेट्रिक इन मेट्रिक की मदद से कैप्चर की जाती हैं:
- सबसे बड़ा कॉन्टेंटफ़ुल पेंट, लोड होने की अनुमानित स्पीड को मापता है. साथ ही, यह पेज के मुख्य कॉन्टेंट के लोड होने पर, पेज लोड होने की टाइमलाइन में उस पॉइंट को मार्क करता है.
- फ़र्स्ट इनपुट डिले, पेज के रिस्पॉन्स में लोगों की दिलचस्पी को मापता है. साथ ही, इससे यह पता चलता है कि पेज से पहली बार इंटरैक्ट करते समय उपयोगकर्ताओं को कैसा महसूस होता है.
- कुल लेआउट शिफ़्ट से, पेज के लेआउट में होने वाली रुकावट का पता चलता है. इससे यह पता चलता है कि पेज के कॉन्टेंट में कितनी बार बदलाव हुआ है.
web.dev LIVE पर, हमने वेबसाइट की अहम जानकारी को ऑप्टिमाइज़ करने के सबसे सही तरीके बताए हैं. साथ ही, अपनी साइट की अहम वैल्यू को एक्सप्लोर करने के लिए Chrome DevTools का इस्तेमाल करने के बारे में भी बताया है. हमने परफ़ॉर्मेंस से जुड़ी और भी कई बातें शेयर की हैं, जो आपको पहले दिन के शेड्यूल web.dev/live पर मिल सकती हैं.
tooling.report
वेब में इतना बड़ा प्लैटफ़ॉर्म डेवलप करना चुनौती भरा हो सकता है. बिल्ड टूल अक्सर आपके वेब डेवलपमेंट प्रोजेक्ट के लिए अहम होता है. यह आपके डेवलपर और प्रॉडक्ट लाइफ़साइकल को मैनेज करने में अहम भूमिका निभाता है.
हमने सभी को मुश्किल बिल्ड कॉन्फ़िगरेशन फ़ाइलें देखी हैं. इसलिए, हमने tooling.report बनाया है. इस टूल की मदद से, वेब डेवलपर और टूलिंग लेखक, वेब की जटिलता को कम कर सकें. यह एक ऐसी वेबसाइट है जिसकी मदद से अपने अगले प्रोजेक्ट के लिए सही बिल्ड टूल चुना जा सकता है, यह तय किया जा सकता है कि एक से दूसरे टूल में माइग्रेट करना सही है या नहीं. इसके अलावा, यह पता किया जा सकता है कि अपने टूलिंग कॉन्फ़िगरेशन और कोड बेस में सबसे सही तरीके कैसे शामिल किए जा सकते हैं.
हमने परीक्षणों का एक सुइट बनाया है, जिससे यह तय किया जा सकता है कि कौनसे बिल्ड टूल आपको वेब डेवलपमेंट के सबसे सही तरीकों का पालन करने में मदद करेंगे. हमने बिल्ड टूल के लेखकों के साथ मिलकर काम किया, ताकि यह पक्का किया जा सके कि उनके टूल सही तरीके से इस्तेमाल किए गए हैं और उन्हें सही तरीके से दिखाया गया है.
टूलटिप की शुरुआती रिलीज़ में वेबपैक v4, रोलअप v2, पार्सल v2, और Gulp के साथ ब्राउज़र के रूप में जानकारी देने की सुविधा शामिल है.ये मौजूदा बिल्ड टूल के तौर पर शायद सबसे लोकप्रिय हैं. हमने टूलिंग.रिपोर्ट बनाई है. इसमें समुदाय की मदद से, ज़्यादा बिल्ड टूल और अतिरिक्त टेस्ट जोड़े जा सकते हैं.
अगर हमसे जांच करने के लिए, सबसे सही तरीका नहीं मिलता है, तो कृपया GitHub से जुड़ी समस्या के बारे में बताएं. अगर आप कोई टेस्ट लिखने या कोई ऐसा नया टूल जोड़ने के लिए तैयार हैं, जिसे हमने शुरुआती सेट में शामिल नहीं किया था, तो हम आपका योगदान करने के लिए स्वागत करते हैं!
इस दौरान, tooling.report बनाने के हमारे तरीके के बारे में ज़्यादा पढ़ा जा सकता है. साथ ही, web.dev पर हमारा सेशन लाइव देखा जा सकता है.
वेब पर निजता और सुरक्षा
Chrome ऐसे ओपन वेब पर भरोसा करता है जो उपयोगकर्ताओं की निजता का सम्मान करता हो. साथ ही, Chrome के इस्तेमाल के कुछ खास मामलों को बनाए रखता हो, ताकि वेब सभी के लिए काम करता रहे.
2019 में, Chrome ने कुकी स्टैंडर्ड में एक अपडेट का सुझाव दिया, ताकि कुकी को डिफ़ॉल्ट रूप से पहले-पक्ष के कॉन्टेक्स्ट तक सीमित किया जा सके. साथ ही, तीसरे पक्ष के कॉन्टेक्स्ट के लिए कुकी को साफ़ तौर पर उसके तौर पर मार्क करने की ज़रूरत होगी. खास तौर पर, इससे क्रॉस-साइट के लिए किए गए अनुरोध पर जालसाज़ी होने के मामलों से सुरक्षा मिलती है. यह प्रस्ताव अब Chrome, Firefox, Edge, और दूसरे ब्राउज़र में स्वीकार किया जा रहा है.
हालांकि, Chrome ने COVID-19 को ध्यान में रखते हुए इन बदलावों को कुछ समय के लिए कुछ समय के लिए वापस लेने का फ़ैसला किया है. अफ़सोस, इस मुश्किल समय में जब लोग सबसे ज़्यादा जोखिम में होते हैं, तो आपको इस तरह के हमलों की संख्या में भी बढ़ोतरी दिखती है. इसलिए, Chrome 84 के स्टेबल वर्शन (जुलाई 2020 के मध्य में) के साथ, ये बदलाव Chrome के 80 वर्शन और उसके बाद के सभी वर्शन पर फिर से रोल आउट होने लगेंगे. ज़्यादा जानने के लिए, SameSite कुकी से जुड़े दिशा-निर्देश के साथ-साथ web.dev लाइव सेशन देखें.
इसके अलावा, प्राइवसी सैंडबॉक्स के बैनर में Chrome कई स्टैंडर्ड के प्रस्ताव पेश कर रहा है. इनका मकसद, इस्तेमाल के उदाहरणों को बढ़ावा देना है, ताकि लोग वेब प्लैटफ़ॉर्म का इस्तेमाल करके अपना जीवन जी सकें. हालांकि, Chrome को इस तरह से पेश किया जा रहा है कि उपयोगकर्ता की निजता का बेहतर तरीके से ध्यान रखा जा सके. Chrome इन प्रस्तावों पर सक्रिय रूप से फ़ीडबैक मांग रहा है और उन प्रस्तावों के साथ ही अन्य पक्षों द्वारा सबमिट किए गए प्रस्तावों पर चर्चा करने के लिए W3C के खुले फ़ोरम में भाग ले रहा है. ओपन वेब के लिए सुरक्षा और निजता सेशन में, इस पहल के बारे में ज़्यादा जानें.
आखिर में, उपयोगकर्ता की सुरक्षा को देखते हुए, Spectre एक जोखिम की आशंका है, जिसका मतलब है कि एक ब्राउज़र प्रोसेस में चल रहा नुकसान पहुंचाने वाला कोड, उस प्रोसेस से जुड़े किसी भी डेटा को पढ़ सकता है, भले ही वह किसी दूसरे ऑरिजिन से क्यों न हो. ब्राउज़र के लिए खतरों में से एक है साइट को आइसोलेट करना यानी हर साइट को अलग प्रोसेस में रखना. ज़्यादा जानने के लिए, web.dev का लाइव सेशन क्रॉस-ऑरिजिन ओपनर और एम्बेडर से जुड़ी नई नीतियों (COOP और COEP) पर देखें.
बेहतरीन सुविधाओं वाला वेब बनाना
Chrome चाहता है कि आप सबसे अच्छी क्वालिटी वाले वेब ऐप्लिकेशन बनाने के लिए स्वतंत्र रहें, जो आपको सभी डिवाइसों पर उपयोगकर्ताओं तक सबसे बड़ी पहुंच दे. क्षमताओं वाले प्रोजेक्ट (Project Fugu) के साथ, PWA की इंस्टॉल करने की क्षमता और विश्वसनीयता को जोड़कर, Chrome तीन चीज़ों पर ध्यान दे रहा है, ताकि प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन और वेब के बीच के फ़र्क़ को कम किया जा सके. इससे, आपको बेहतर अनुभव देने और बनाने में मदद मिलेगी.
पहली, Chrome की टीमें, वेब डेवलपर और उपयोगकर्ताओं को इंस्टॉल करने के अनुभव पर ज़्यादा कंट्रोल देने के लिए कड़ी मेहनत कर रही हैं. वे इंस्टॉल करने के प्रमोशन को खोज बार में जोड़ने और अन्य को भी बेहतर बनाने के लिए लगातार काम कर रही हैं. वेब पर सभी को दिखाने के बावजूद, कुछ कारोबारों के लिए स्टोर में ऐप्लिकेशन होना अब भी ज़रूरी है. आपकी मदद करने के लिए, Chrome ने Bubblewrap लॉन्च किया. यह एक लाइब्रेरी और सीएलआई है. इसकी मदद से, Play Store पर PWA को इस्तेमाल करना ज़्यादा आसान हो गया है. असल में, PWABuilder.com पर अब बड़े पैमाने पर Bubblewrap का इस्तेमाल किया जाता है. कुछ ही क्लिक में, APK जनरेट किया जा सकता है और PWA को Play Store पर अपलोड किया जा सकता है. हालांकि, इसके लिए ज़रूरी शर्तों को पूरा करना ज़रूरी है.
दूसरा, Chrome ऑपरेटिंग सिस्टम के साथ बेहतर इंटिग्रेशन की सुविधा दे रहा है. जैसे, Web Share API की मदद से, सिस्टम-लेवल शेयर करने की सेवा का इस्तेमाल करके फ़ोटो, गाना या कोई भी दूसरी चीज़ शेयर करने की सुविधा या इंस्टॉल किए गए किसी अन्य ऐप्लिकेशन से कॉन्टेंट पाने की सुविधा. आपके पास उपयोगकर्ताओं को अप-टू-डेट रखने या उन्हें ऐप्लिकेशन बैज की मदद से, नई गतिविधि के बारे में सूचना देने की सुविधा मिलती है. साथ ही, अब उपयोगकर्ताओं के लिए ऐप्लिकेशन शॉर्टकट का इस्तेमाल करके तुरंत कोई कार्रवाई शुरू करना आसान हो गया है, जो Chrome 84 (जुलाई 2020 के मध्य में) में उपलब्ध होगा.
आखिर में, Chrome ऐसी नई सुविधाओं पर काम कर रहा है जो ऐसी नई स्थितियों को चालू करती हैं जो पहले संभव नहीं थीं. जैसे, ऐसे एडिटर जो उपयोगकर्ता के लोकल फ़ाइल सिस्टम पर मौजूद फ़ाइलों को पढ़ते और उनमें बदलाव करते हैं या जिन्हें स्थानीय तौर पर इंस्टॉल किए गए फ़ॉन्ट की सूची मिलती है, ताकि उपयोगकर्ता उन्हें अपने डिज़ाइन में इस्तेमाल कर सकें.
web.dev LIVE के दौरान, हमने कई अन्य सुविधाओं और सुविधाओं के बारे में बात की. इनसे, हमने प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन जैसी सुविधाओं के साथ, वैसा ही अनुभव दिया. दूसरे दिन के शेड्यूल में web.dev/live पर सभी सेशन देखें.
Chrome DevTools और Lighthouse 6.0 में नया क्या है
Chrome DevTools: नया 'समस्याएं' टैब, रंग की कमी को एम्युलेट करने वाला एम्युलेटर, और वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली सहायता
Chrome DevTools की सबसे खास सुविधाओं में से एक है, वेब पेज पर आने वाली समस्याओं का पता लगाना और उन्हें डेवलपर के ध्यान में लाना. यह हमारे लिए सबसे ज़्यादा मायने रखता है, क्योंकि हम निजता को प्राथमिकता देने वाले वेब के अगले चरण की ओर बढ़ रहे हैं. कंसोल में सूचनाओं की संख्या और गड़बड़ी को कम करने के लिए, Chrome DevTools ने समस्याएं टैब लॉन्च किया. इसमें, तीन तरह की गंभीर समस्याओं पर फ़ोकस किया गया है: कुकी से जुड़ी समस्याएं, मिले-जुले कॉन्टेंट, और सीओईपी से जुड़ी समस्याएं. शुरू करने के लिए, web.dev का लाइव सेशन देखें. इसमें, 'समस्याएं' टैब से समस्याएं ढूंढने और उन्हें ठीक करने के बारे में बताया गया है.
इसके अलावा, वेबसाइट की परफ़ॉर्मेंस की जानकारी, वेब डेवलपर के लिए मेट्रिक के सबसे अहम सेट में से एक बन गई है. इसकी मदद से, DevTools ट्रैक करना और मेज़र करना है. साथ ही, DevTools यह पक्का करना चाहता है कि डेवलपर इन थ्रेशोल्ड के हिसाब से, परफ़ॉर्मेंस को आसानी से ट्रैक कर सकें. इसलिए, ये तीन मेट्रिक अब Chrome DevTools के परफ़ॉर्मेंस पैनल में हैं.
आखिर में, सुलभता पर फ़ोकस करने वाले डेवलपर की संख्या बढ़ती जा रही है. इस वजह से, DevTools में कलर विज़न से जुड़ी समस्याओं को कम करने वाला एम्युलेटर भी शामिल हुआ है. इसकी मदद से, डेवलपर धुंधली नज़र और देखने से जुड़ी दूसरी तरह की समस्याओं को एम्युलेट कर सकते हैं. DevTool में नया क्या है सेशन में, इसके बारे में और कई दूसरी सुविधाओं के बारे में ज़्यादा जानकारी मिल सकती है.
लाइटहाउस 6.0: नई मेट्रिक, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले लैब मेज़रमेंट, अपडेट किया गया परफ़ॉर्मेंस स्कोर, और नए ऑडिट
Lighthouse अपने-आप काम करने वाला एक ओपन सोर्स टूल है जो डेवलपर को अपनी साइट की परफ़ॉर्मेंस बेहतर बनाने में मदद करता है. अपने नए वर्शन में, Lighthouse टीम मेट्रिक के आधार पर अहम जानकारी देने पर फ़ोकस करती है. यह अहम डाइमेंशन के हिसाब से, आपको अपने उपयोगकर्ता अनुभव की क्वालिटी को संतुलित तरीके से दिखाती है.
लाइटहाउस एक लैब टूल है और एफ़आईडी को सिर्फ़ फ़ील्ड में मेज़र किया जा सकता है. इसलिए, लाइटहाउस की वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक के लिए, एलसीपी, TBT (एक प्रॉक्सी) और सीएलएस को जोड़ा गया है. लाइटहाउस ने तीन पुरानी मेट्रिक भी हटा दी हैं: फ़र्स्ट मीनिंगफ़ुल पेंट, पहला सीपीयू इस्तेमाल में नहीं है, और मैक्स संभावित एफ़आईडी. मेट्रिक में बदलाव और नई मेट्रिक जैसी चीज़ों को ध्यान में रखते हुए हटाया गया है. इससे उपयोगकर्ता अनुभव के उस हिस्से को बेहतर तरीके से दिखाया जा सकता है जिसे लाइटहाउस मापने की कोशिश कर रहा है. इसके अलावा, लाइटहाउस ने उपयोगकर्ता के सुझाव के आधार पर कुछ बदलाव भी किए हैं कि परफ़ॉर्मेंस के कुल स्कोर में हर मेट्रिक की क्या भूमिका है.
Lighthouse ने एक स्कोरिंग कैलकुलेटर भी जोड़ा है, ताकि आप वर्शन 5 और 6 के स्कोर के बीच तुलना करके, परफ़ॉर्मेंस स्कोरिंग के बारे में जान सकें. जब Lighthouse 6.0 की मदद से कोई ऑडिट चलाया जाता है, तो रिपोर्ट में कैलकुलेटर का एक लिंक होता है. इस लिंक में, आपको डेटा अपने-आप भर जाता है.
आखिर में, Lighthouse ने कुछ नए ऑडिट जोड़े हैं, जिनमें खास तौर पर JavaScript के विश्लेषण और सुलभता पर ध्यान दिया गया है.
स्पीड टूल में नया क्या है सेशन देखकर ज़्यादा जानकारी पाएं.
ज़्यादा जानें
वेब प्लैटफ़ॉर्म के अवसरों और चुनौतियों पर चर्चा करने के लिए, हमसे जुड़ने वाले सभी लोगों का धन्यवाद.
इस पोस्ट में इवेंट की कुछ खास बातों के बारे में खास जानकारी दी गई थी. हालांकि, इसमें और भी बहुत कुछ शामिल था. अगर आपको ज़्यादा कॉन्टेंट सीधे इनबॉक्स में चाहिए, तो सभी सेशन देखना न भूलें और web.dev न्यूज़लेटर की सदस्यता लें. साथ ही, अपने टाइमज़ोन में आने वाले कम्यूनिटी इवेंट को खोजने के लिए, web.dev/live पर रीजनल इवेंट सेक्शन पर जाएं!