लेख
लंबे टास्क ऑप्टिमाइज़ करें
आपसे कहा गया है कि "मुख्य थ्रेड को ब्लॉक न करें" और "अपने लंबे टास्क को ब्रेक करें", लेकिन इन कामों को करने का क्या मतलब है?
पैसे चुकाने का तरीका सेट अप करना
वेब पेमेंट्स का इस्तेमाल करके पैसे चुकाने के लिए लेन-देन, आपके पैसे चुकाने का तरीका खोजने के साथ शुरू होता है. पैसे चुकाने का तरीका सेट अप करने के बारे में जानें. साथ ही, व्यापारियों/कंपनियों और ग्राहकों के लिए, पैसे चुकाने के लिए अपने ऐप्लिकेशन को तैयार करें.
मॉड्यूल पहले से लोड करें
मॉड्यूल पहले से लोड करने की सुविधा के साथ, JavaScript मॉड्यूल को डिक्लेरेटिव तौर पर पहले से लोड किया जा सकता है.
अपने फ़ॉर्म पर ब्राउज़र की ऑटोमैटिक भरने की सुविधा को मेज़र करना
उपयोगकर्ता अनुभव को ऑप्टिमाइज़ करने के लिए, यह समझना ज़रूरी है कि उपयोगकर्ता आपके फ़ॉर्म के साथ कैसे इंटरैक्ट करते हैं. इस प्रोसेस में, ब्राउज़र की ऑटोमैटिक भरने की सुविधा अहम भूमिका निभाती है. जानें कि उपयोगकर्ता आपके फ़ॉर्म में ऑटोमैटिक भरने की सुविधा का इस्तेमाल कैसे करते हैं. साथ ही, इस डेटा को इकट्ठा और विश्लेषण करने का तरीका भी जानें.
दूसरा हिस्सा: क्लाइंट-साइड एआई की मदद से, आपत्तिजनक कॉन्टेंट का पता लगाना
आपत्तिजनक कॉन्टेंट का पता लगाने की सुविधा, आपके उपयोगकर्ताओं को सुरक्षित रखती है और ऑनलाइन प्लैटफ़ॉर्म पर सुरक्षित माहौल बनाती है. दूसरे भाग में, हम क्लाइंट-साइड एआई टूल बनाने का तरीका जानेंगे. इससे, बुरे बर्ताव का पता लगाने और उसे कम करने में मदद मिलेगी.
पहला हिस्सा: ऑनलाइन प्लैटफ़ॉर्म पर बुरे बर्ताव को रोकने के लिए क्लाइंट-साइड एआई
"अपने उपयोगकर्ताओं को सुरक्षित रखें और नुकसान पहुंचाने वाले कॉन्टेंट का पता लगाकर, ऑनलाइन प्लैटफ़ॉर्म को ज़्यादा सुरक्षित बनाएं. पहले भाग में, हमने उस कॉन्टेक्स्ट के बारे में बताया है जो आपको एआई को डिप्लॉय करने के लिए चाहिए, ताकि बुरे बर्ताव को उसके सोर्स से कम किया जा सके: उपयोगकर्ताओं के कीबोर्ड."
ब्लॉक करने का कुल समय (टीबीटी)
इस पोस्ट में टोटल ब्लॉकिंग टाइम (टीबीटी) मेट्रिक के बारे में बताया गया है. साथ ही, इसे मेज़र करने का तरीका भी बताया गया है
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मापना शुरू करना
असल दुनिया और लैब, दोनों ही तरह के माहौल में अपनी साइट की वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी को मापने का तरीका जानें.
सबसे बड़े कॉन्टेंटफ़ुल पेंट को ऑप्टिमाइज़ करें
एलसीपी को छोटे-छोटे हिस्सों में बांटने और सुधार करने की ज़रूरी चीज़ों की पहचान करने के बारे में सिलसिलेवार निर्देश.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने के सबसे असरदार तरीके
सबसे सही तरीकों का कलेक्शन, जिन्हें Chrome ने वेब की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को बेहतर बनाने के सबसे बड़े अवसरों के तौर पर पहचाना है
Web Vitals
बेहतर साइट के लिए ज़रूरी मेट्रिक
सीएसएस content-visibility प्रॉपर्टी अब बेसलाइन के तौर पर उपलब्ध है
सीएसएस content-visibility प्रॉपर्टी, अब बेसलाइन के तौर पर उपलब्ध है.
खास जानकारी देने की सुविधा के साथ एलएलएम की तुलना करना
अलग-अलग मॉडल और प्रॉम्प्ट के नतीजों का आकलन करें. इसके लिए, एलएलएम को जज के तौर पर इस्तेमाल करें. मॉडल की पुष्टि करने के लिए, किसी दूसरे एलएलएम को काम सौंपा जाता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के थ्रेशोल्ड कैसे तय किए गए थे
वेबसाइट की परफ़ॉर्मेंस की जानकारी देने के थ्रेशोल्ड के हिसाब से रिसर्च और तरीका
Google के टूल का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले वर्कफ़्लो
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक की अहमियत लगातार बढ़ रही है. इस वजह से, साइट के मालिक और डेवलपर, वेबसाइट की परफ़ॉर्मेंस और उपयोगकर्ता के मुख्य अनुभवों पर लगातार ध्यान दे रहे हैं. पेजों का मूल्यांकन, उन्हें ऑप्टिमाइज़ करने, और उनकी निगरानी करने के लिए Google कई टूल उपलब्ध कराता है. हालांकि, उपयोगकर्ता अक्सर डेटा के अलग-अलग सोर्स और उन्हें असरदार तरीके से इस्तेमाल करने के बारे में उलझन में रहते हैं. इस गाइड में कई टूल को मिलाकर एक वर्कफ़्लो बताया गया है. साथ ही, यह भी बताया गया है कि डेवलपमेंट प्रोसेस में इन टूल का क्या मतलब है.
लैब में धीमे इंटरैक्शन का मैन्युअल रूप से विश्लेषण करें
आपने अपना फ़ील्ड डेटा देखा है और हमें पता चला है कि कुछ धीमे इंटरैक्शन हुए हैं. अगले कदम में, मैन्युअल तौर पर उन इंटरैक्शन की जांच करने और उनके पीछे की वजहों को पहचानने के तरीके के बारे में ज़्यादा जानना है.
बेसलाइन
इस लेख में, Baseline की शुरुआत के बारे में बताया गया है. साथ ही, Google की इसमें भूमिका और WebDX कम्यूनिटी ग्रुप के मालिकाना हक के बारे में भी बताया गया है.
बैक-फ़ॉरवर्ड कैश मेमोरी
ब्राउज़र के 'वापस जाएं' और 'आगे बढ़ें' बटन का इस्तेमाल करते समय, अपने पेजों को तुरंत लोड होने के हिसाब से ऑप्टिमाइज़ करना सीखें.
CSSNestedDeclarations की मदद से, सीएसएस नेस्टिंग बेहतर होती है
सीएसएस नेस्टिंग की सुविधा को और बेहतर बनाया जा रहा है!
First Input Delay (FID)
इस पोस्ट में, फ़र्स्ट इनपुट डिले (एफ़आईडी) मेट्रिक के बारे में जानकारी दी गई है और इसे मेज़र करने का तरीका बताया गया है
फ़ील्ड में परफ़ॉर्मेंस को डीबग करना
डीबग करने की जानकारी के साथ परफ़ॉर्मेंस डेटा को एट्रिब्यूट करने का तरीका जानें. इससे आपको आंकड़ों से जुड़ी असल उपयोगकर्ताओं की समस्याओं की पहचान करने और उन्हें ठीक करने में मदद मिलेगी
Google टूल की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और विज्ञापन से मिलने वाले रेवेन्यू को जोड़ना
जानें कि Google के टूल का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को विज्ञापन से होने वाली आय से कैसे जोड़ा जा सकता है.
क्लाइंट-साइड एआई के लिए, परफ़ॉर्मेंस और उपयोगकर्ता अनुभव को बेहतर बनाएं
क्लाइंट-साइड एआई के फ़ायदों के बारे में जानें. इनमें कम इंतज़ार का समय, सर्वर साइड की लागत में कमी, एपीआई कुंजी की ज़रूरत नहीं पड़ना, उपयोगकर्ता की निजता को बेहतर बनाना, और ऑफ़लाइन ऐक्सेस शामिल है.
सीएसएस @property की परफ़ॉर्मेंस का मानदंड
@प्रॉपर्टी का आपकी सीएसएस की परफ़ॉर्मेंस पर क्या असर पड़ता है?
ऑफ़स्क्रीन iframe को लेज़ी-लोड करने का समय आ गया है!
इस पोस्ट में, लोड होने वाले एट्रिब्यूट के बारे में जानकारी दी गई है. साथ ही, यह भी बताया गया है कि iframe की लोडिंग को कंट्रोल करने के लिए, उसका इस्तेमाल कैसे किया जा सकता है.
वेब के लिए स्टोरेज
ब्राउज़र में डेटा स्टोर करने के कई विकल्प हैं. आपकी ज़रूरतों के हिसाब से कौनसा विकल्प सबसे अच्छा है?
एक ही डोमेन पर, कई प्रोग्रेसिव वेब ऐप्लिकेशन बनाना
एक ही डोमेन का फिर से इस्तेमाल करने के लिए, सुझाए गए ऐसे तरीके जानें जो उनके फ़ायदे और नुकसान के साथ, एक से ज़्यादा PWA बनाने का सुझाव नहीं देते.
वेब पुश प्रोटोकॉल
सिलसिलेवार इंटरैक्टिव ट्यूटोरियल में ऐसा सर्वर बनाने का तरीका बताया गया है जो पुश नोटिफ़िकेशन सदस्यताओं को मैनेज करता हो और किसी पुश सेवा को वेब पुश प्रोटोकॉल के अनुरोध भेजता हो.
Chrome, वेब ऐप्लिकेशन मेनिफ़ेस्ट के अपडेट कैसे मैनेज करता है
आपके PWA के वेब ऐप्लिकेशन मेनिफ़ेस्ट में आइकॉन, शॉर्टकट, रंग, और दूसरे मेटाडेटा को बदलने के लिए क्या करना होता है.
एक अच्छा प्रोग्रेसिव वेब ऐप्लिकेशन क्या होता है?
एक अच्छा या बेहतरीन प्रोग्रेसिव वेब ऐप्लिकेशन क्या है?
इसे इंस्टॉल करने के लिए क्या ज़रूरी है?
प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने की ज़रूरी शर्तें.
वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ें
वेब ऐप्लिकेशन मेनिफ़ेस्ट एक सामान्य JSON फ़ाइल है, जो ब्राउज़र को यह बताती है कि आपके वेब ऐप्लिकेशन को कैसा काम करना चाहिए.
कॉन्टेंट की सुरक्षा के बारे में सख्त नीति (सीएसपी) का इस्तेमाल करके, क्रॉस-साइट स्क्रिप्टिंग (XSS) को कम करें
क्रॉस-साइट स्क्रिप्टिंग के ख़िलाफ़ ज़्यादा मज़बूत सुरक्षा के तौर पर, स्क्रिप्ट नॉन्स या हैश पर आधारित सीएसपी को डिप्लॉय करने का तरीका जानें.
वेब पर हार्डवेयर डिवाइसों को ऐक्सेस करना
इस लेख से, वेब डेवलपर को किसी डिवाइस के आधार पर, सही हार्डवेयर एपीआई चुनने में मदद मिलती है.
मिलती-जुलती ऑरिजिन अनुरोधों की मदद से, अपनी सभी साइटों पर पासकी का फिर से इस्तेमाल करने की अनुमति दें
अपनी सभी साइटों पर पासकी का दोबारा इस्तेमाल करने की अनुमति देने के लिए, मिलते-जुलते ऑरिजिन अनुरोधों को इस्तेमाल करने का तरीका जानें.
सही इमेज फ़ॉर्मैट चुनना
सही इमेज फ़ॉर्मैट चुनना, अपनी वेबसाइट पर ऑप्टिमाइज़ की गई इमेज डिलीवर करने का पहला चरण है. इस पोस्ट से आपको सही विकल्प चुनने में मदद मिलेगी.
वेब के लिए ब्राउज़र-लेवल की इमेज लेज़ी लोडिंग
इस पोस्ट में लोडिंग एट्रिब्यूट के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि इमेज लोड होने की प्रोसेस को कंट्रोल करने के लिए, इसका इस्तेमाल कैसे किया जा सकता है.
कस्टम मेट्रिक
कस्टम मेट्रिक की मदद से, अपनी साइट के अनुभव के उन पहलुओं को मेज़र और ऑप्टिमाइज़ किया जा सकता है जो आपकी साइट के लिए खास हैं.
Google Analytics 4 और BigQuery की मदद से, परफ़ॉर्मेंस को मेज़र और डीबग करना
Google Analytics 4 प्रॉपर्टी को वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाला डेटा भेजने का तरीका जानें. साथ ही, BigQuery और Looker Studio में विश्लेषण के लिए डेटा एक्सपोर्ट करने का तरीका भी जानें.
वेब अनुमतियों से जुड़े सबसे सही तरीके
इस गाइड में, उन सबसे सही तरीकों के बारे में बताया गया है जिन्हें इस्तेमाल करके, उपयोगकर्ताओं से कैमरे, माइक्रोफ़ोन, और जगह की जानकारी जैसी संवेदनशील सुविधाओं को ऐक्सेस करने की अनुमति मांगी जा सकती है. ऐसा इसलिए किया जाता है, ताकि ग़ैर-ज़रूरी प्रॉम्प्ट और ब्लॉक किए गए ऐक्सेस को कम किया जा सके.
कुकी की सूचनाओं के लिए सबसे सही तरीके
इस बारे में जानें कि कुकी सूचनाएं परफ़ॉर्मेंस, परफ़ॉर्मेंस मेज़रमेंट, और उपयोगकर्ता अनुभव पर कैसे असर डालती हैं.
Media Session API की मदद से, मीडिया सूचनाओं और प्लेबैक कंट्रोल को पसंद के मुताबिक बनाएं
वेब डेवलपर, मीडिया सूचनाओं को पसंद के मुताबिक बना सकते हैं. साथ ही, Media Session API की मदद से, मीडिया से जुड़े इवेंट के जवाब दे सकते हैं. जैसे, बदलावों को आगे बढ़ाना या ट्रैक करना.
Tabindex का इस्तेमाल करना
किसी एलिमेंट की टैब पोज़िशन को साफ़ तौर पर सेट करने के लिए, tabindex एट्रिब्यूट का इस्तेमाल करें.
फ़ील्ड में धीमे इंटरैक्शन का पता लगाना
अपनी वेबसाइट के इंटरैक्शन टू नेक्स्ट पेंट को ऑप्टिमाइज़ करने के लिए, लैब में धीमे इंटरैक्शन का फिर से सामना करने से पहले, आपको उन्हें ढूंढने के लिए फ़ील्ड डेटा का इस्तेमाल करना होगा. इसका तरीका जानने के लिए, इस गाइड को पढ़ें.
पहली बाइट का समय (TTFB)
इस पोस्ट में, टाइम टू फ़र्स्ट बाइट (टीटीएफ़बी) मेट्रिक के बारे में बताया गया है. साथ ही, मेट्रिक को मेज़र करने का तरीका भी बताया गया है.
छोटे एलएलएम के लिए प्रैक्टिकल प्रॉम्प्ट इंजीनियरिंग
अलग-अलग एलएलएम, मॉडल, और मॉडल साइज़ में अपने पसंदीदा नतीजे पाने के लिए, अपने प्रॉम्प्ट में बदलाव करने का तरीका जानें.
पहली बाइट के लिए समय ऑप्टिमाइज़ करें
टाइम टू फ़र्स्ट बाइट मेट्रिक को ऑप्टिमाइज़ करने का तरीका जानें.
इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी)
इस पोस्ट में, इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) की मेट्रिक के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि यह कैसे काम करता है, इसे कैसे मेज़र किया जाता है, और इसे बेहतर बनाने के लिए सुझाव कैसे दिए जाते हैं.
लाइट-डार्क() के साथ सीएसएस कलर-स्कीम पर निर्भर रंग
ब्यौरा: Light-dark() फ़ंक्शन की मदद से, उन कलर को तय करें जो इस्तेमाल की गई कलर स्कीम के हिसाब से काम करते हैं.
वेब ऐप्लिकेशन के लिए WebAssembly परफ़ॉर्मेंस के पैटर्न
इस गाइड में, उन वेब डेवलपर के लिए जानकारी दी गई है जिन्हें WebAssembly से फ़ायदा लेना है. आप एक मौजूदा उदाहरण की मदद से, Wasm के इस्तेमाल का तरीका जानेंगे, ताकि सीपीयू से जुड़े ज़्यादा काम पूरे किए जा सकें.
सीएसएस का ऐनिमेशन वाला ग्रिड लेआउट
सीएसएस ग्रिड में, `ग्रिड-टेंप्लेट-कॉलम` और `ग्रिड-टेंप्लेट-पंक्तियां` प्रॉपर्टी आपको क्रम से लाइन के नाम तय करने और ग्रिड कॉलम और पंक्तियों के साइज़ को ट्रैक करने की सुविधा देती हैं. इन प्रॉपर्टी के लिए इंटरपोलेशन का इस्तेमाल करने से, ग्रिड लेआउट को ऐनिमेशन या ट्रांज़िशन के बीच में स्नैप करने के बजाय, एक स्थिति से दूसरे पर आसानी से ले जाया जा सकता है.
अपने गेमपैड से Chrome Dino गेम खेलें
Gamepad API से वेब गेम को कंट्रोल करने का तरीका जानें.
इनर्ट एट्रिब्यूट
इनर्ट प्रॉपर्टी, एक ग्लोबल एचटीएमएल एट्रिब्यूट है. इससे किसी एलिमेंट के लिए, उपयोगकर्ता के इनपुट इवेंट को हटाने और वापस लाने में मदद मिलती है. इनमें सहायक टेक्नोलॉजी के इवेंट और फ़ोकस इवेंट शामिल हैं.
नैतिकता और एआई (AI)
एआई टूल का इस्तेमाल करने और नया कॉन्टेंट बनाने के दौरान, कई नैतिक बातों को ध्यान में रखना ज़रूरी है.
Web.dev की एआई टीम से मिलें
टेक राइटर और डेवलपर रिलेशन टीम से मिलें.
आर्टिफ़िशियल इंटेलिजेंस क्या है?
एआई फ़ील्ड को बनाने वाली अलग-अलग तरह की टेक्नोलॉजी को दिखाने के लिए, शॉर्ट फ़ॉर्म एआई का इस्तेमाल अक्सर एक-दूसरे की जगह पर किया जाता है.
अपनी साइट खोज को अपग्रेड करें: जनरेटिव एआई की मदद से, काम के जवाब पाएं
एआई टूल का इस्तेमाल करने और नया कॉन्टेंट बनाने के दौरान, कई नैतिक बातों को ध्यान में रखना ज़रूरी है.
AAGUID की मदद से, पासकी की सेवा देने वाली कंपनी का पता लगाना
भरोसेमंद पक्ष, AAGUID की जांच करके, यह पता लगा सकते हैं कि पासकी कहां से आई. जानें कि यह सुविधा कैसे काम करती है.
बाइनरी के साथ Wasm को कंपाइल और ऑप्टिमाइज़ करना
उदाहरण के लिए, सिंथेटिक टॉय लैंग्वेज का उदाहरण इस्तेमाल करके, बाइनरी.js API का इस्तेमाल करके, JavaScript में WebAssembly मॉड्यूल लिखने और ऑप्टिमाइज़ करने का तरीका जानें.
<मॉडल-व्यूअर> वेब कॉम्पोनेंट
<मॉडल-व्यूअर> वेब कॉम्पोनेंट' आपको किसी वेब पेज पर 3D मॉडल का इस्तेमाल एलान के तौर पर करने देता है.
HTML5 में ऑडियो और वीडियो कैप्चर करें
ऑडियो/वीडियो कैप्चर, वेब डेवलपमेंट के लिए लंबे समय से "सबसे ज़रूरी चीज़" रहा है. कई सालों तक, हमें काम पूरा करने के लिए ब्राउज़र प्लग इन ( Flash या Silverlight ) पर निर्भर रहना पड़ा. चलो! HTML5 की मदद से. ऐसा हो सकता है कि आपको यह न पता हो, लेकिन
उपयोगकर्ता की पुष्टि से जुड़ी पूरी जानकारी
WebAuthn में `userverification` को इस्तेमाल करने का तरीका जानें
CrUX डेटा, मेरे RUM डेटा से अलग क्यों है?
उन वजहों के बारे में जानें जिनकी वजह से, RUM के डेटा में CrUX और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के अलग-अलग आंकड़े दिख सकते हैं.
वेब डेवलपर के लिए सुलभता
ऐसी साइटें बनाना ज़रूरी है जो बिना किसी भेदभाव के सभी को शामिल कर सकें और सभी के लिए उपलब्ध हों. दिव्यांगता के कम से कम छह पहलू ऐसे हैं जिन्हें ऑप्टिमाइज़ किया जा सकता है: देखने, सुनने, हिलने-डुलने में परेशानियों का सामना करने वाले, सीखने-समझने की क्षमता, बोली, और न्यूरल.
Largest Contentful Paint (LCP)
इस पोस्ट में, सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) की मेट्रिक के बारे में बताया गया है. साथ ही, मेट्रिक को मेज़र करने का तरीका भी बताया गया है
तीसरे पक्ष की JavaScript लोड करें
तीसरे पक्ष की स्क्रिप्ट, वेब को ज़्यादा डाइनैमिक बनाने के लिए कई तरह की उपयोगी सुविधाएं उपलब्ध कराती हैं. परफ़ॉर्मेंस पर पड़ने वाले असर को कम करने के लिए, तीसरे पक्ष की स्क्रिप्ट की लोडिंग को ऑप्टिमाइज़ करने का तरीका जानें.
अगर कोई पासकी पहले से मौजूद है, तो नई पासकी बनाने से रोकें
अगर उपयोगकर्ता के पासवर्ड मैनेजर में पहले से कोई पासकी मौजूद है, तो उसे बनाने से रोकने का तरीका जानें.
IndexedDB के साथ काम करना
IndexedDB की बुनियादी बातों के लिए गाइड.
5 सीएसएस स्निपेट, जिनके बारे में हर फ़्रंट-एंड डेवलपर को साल 2024 में पता होना चाहिए
टूलबेल्ट लायक, दमदार, और स्थिर सीएसएस का इस्तेमाल करें, जिनका इस्तेमाल आज किया जा सकता है.
यूआरएल के कौनसे हिस्से होते हैं?
होस्ट, साइट, और ऑरिजिन में क्या अंतर है? eTLD क्या है+1? इस लेख में, इनके बारे में बताया गया है.
खोजे जा सकने वाले क्रेडेंशियल के बारे में पूरी जानकारी
जानें कि खोजे जा सकने वाले क्रेडेंशियल क्या होते हैं. साथ ही, अपने इस्तेमाल के हिसाब से उपयोगकर्ता अनुभव देने का तरीका जानें.
परफ़ॉर्मेंस रेंडरिंग
साइटें और ऐप्लिकेशन ठीक से काम नहीं कर रहे हैं या नहीं, इसका पता उपयोगकर्ता देखते हैं. इसलिए, रेंडरिंग की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना बहुत ज़रूरी है!
Resize ऑब्ज़र्वर: यह एलिमेंट के लिए, document.onresize की तरह काम करता है
जब किसी एलिमेंट का कॉन्टेंट रेक्टैंगल साइज़ में बदलाव करता है, तो `Resize ब्लॉकर` आपको सूचना देता है, ताकि उस हिसाब से प्रतिक्रिया दी जा सके.
टेक्स्ट-आधारित एसेट की एन्कोडिंग और ट्रांसफ़र आकार को ऑप्टिमाइज़ करें
गैर-ज़रूरी संसाधन डाउनलोड को हटाने के बाद, पेज लोड होने की स्पीड को बेहतर बनाने का सबसे अच्छा तरीका यह है कि बाकी संसाधनों को ऑप्टिमाइज़ और कंप्रेस करके, डाउनलोड के पूरे साइज़ को कम किया जाए.
ऑफ़स्क्रीन कैनवस—वेब वर्कर के साथ अपनी कैनवस प्रोसेस में तेज़ी लाएं
इस दस्तावेज़ में बताया गया है कि अपने वेब ऐप्लिकेशन में ग्राफ़िक को रेंडर करते समय, परफ़ॉर्मेंस को बेहतर बनाने के लिए, OffscreenCanvas API का इस्तेमाल कैसे किया जा सकता है.
First Contentful Paint (FCP)
इस पोस्ट में, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) की मेट्रिक के बारे में बताया गया है. साथ ही, मेट्रिक को मेज़र करने का तरीका भी बताया गया है
कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन)
इस लेख में कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) के बारे में खास जानकारी दी गई है. साथ ही, यह बताता है कि सीडीएन सेटअप को कैसे चुना जाता है, उसे कैसे कॉन्फ़िगर और ऑप्टिमाइज़ किया जाता है.
एक अच्छा साइन-आउट अनुभव देने के लिए क्या ज़रूरी है?
जब कोई उपयोगकर्ता वेबसाइट से लॉग आउट हो जाए, तब क्या करना चाहिए, इस बारे में डेवलपर के लिए काम के दिशा-निर्देश.
इंटरैक्टिव में लगने वाला समय (TTI)
इस पोस्ट में, इंटरैक्टिव में लगने वाले समय (टीटीआई) वाली मेट्रिक के बारे में बताया गया है. साथ ही, मेट्रिक को मेज़र करने का तरीका भी बताया गया है
Fetch Priority API की मदद से, संसाधन लोड होने की प्रोसेस को ऑप्टिमाइज़ करें
फ़ेच प्राथमिकता एपीआई, ब्राउज़र पर रिसॉर्स की प्राथमिकता बताता है. इससे वेबसाइट की परफ़ॉर्मेंस की जानकारी को बेहतर तरीके से लोड किया जा सकता है.
:user-मान्य और :user-अमान्य सूडो-क्लास
इनपुट की पुष्टि के उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, :user-valid और :user-invalid pseudo-classes के बारे में जानकारी. साथ ही, यह भी जानें कि इनका इस्तेमाल कैसे करें.
कारोबार के बारे में ज़रूरी फ़ैसले लेने वालों के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ करना
जानें कि कारोबार के बारे में ज़रूरी फ़ैसले लेने वाले और डेवलपर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को कैसे बेहतर बना सकते हैं.
JavaScript में base64 एन्कोडिंग स्ट्रिंग की बारीकियां
स्ट्रिंग में Base64 एन्कोडिंग और डिकोडिंग लागू करते समय, आम समस्याओं को समझें और उनसे बचें.
सीएसएस का सबग्रिड
सबग्रिड, ग्रिड शेयर करने की सुविधा को चालू करता है. इससे नेस्ट किए गए ग्रिड, पूर्वजों और भाई-बहनों के साथ अलाइन होने की अनुमति देते हैं.
पेज स्पीड पर असर डाले बिना, असरदार तरीके से विज्ञापन लोड करना
आज की डिजिटल दुनिया में, ऑनलाइन विज्ञापन उस मुफ़्त वेब का एक अहम हिस्सा है जिसका हम सभी आनंद लेते हैं. हालांकि, विज्ञापनों को खराब तरीके से लागू करने से, ब्राउज़ करने का अनुभव धीमा हो सकता है. साथ ही, उपयोगकर्ताओं को परेशानी हो सकती है और उनका जुड़ाव कम हो सकता है. पेज स्पीड पर असर डाले बिना, विज्ञापनों को असरदार तरीके से लोड करने का तरीका जानें. साथ ही, उपयोगकर्ताओं को बेहतरीन अनुभव देने और वेबसाइट के मालिकों के लिए आय के अवसरों को बढ़ाने के बारे में जानें.
कोड कवरेज के चार सामान्य टाइप
जानें कि कोड कवरेज क्या होता है और इसे मेज़र करने के चार आम तरीके जानें.
जांच करने या न करने के बारे में, तकनीकी जानकारी
तय करें कि आपको किन चीज़ों की जांच करनी है और किन चीज़ों को अस्वीकार किया जा सकता है.
टेस्ट केस और प्राथमिकताएं तय करना
तय करें कि किसकी जांच करनी है, अपने टेस्ट केस तय करें, और प्राथमिकता दें.
उपयोगकर्ता के हिसाब से बनाई गई परफ़ॉर्मेंस मेट्रिक
उपयोगकर्ता पर आधारित परफ़ॉर्मेंस मेट्रिक, आपकी साइट के अनुभव को समझने और उसे बेहतर बनाने में मदद करते हैं. इससे असल उपयोगकर्ताओं को फ़ायदा मिलता है.
रिस्पॉन्सिव इमेज को पहले से लोड करें
उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, रिस्पॉन्सिव इमेज को पहले से लोड करने की नई और दिलचस्प संभावनाओं के बारे में जानें.
सीएसएस की मदद से, टाइपोग्राफ़ी को उपयोगकर्ता की पसंद के मुताबिक बनाना
फ़ॉन्ट को आपके उपयोगकर्ताओं की पसंद के मुताबिक बनाने का तरीका. इससे उन्हें आपके कॉन्टेंट को पढ़ने में आसानी होगी.
पिरामिड या केकड़ा? टेस्टिंग की ऐसी रणनीति ढूंढें जो
अपने प्रोजेक्ट से मेल खाने वाली सही रणनीति में, टेस्ट के अलग-अलग टाइप को जोड़ने का तरीका जानें.
टेस्ट ऑटोमेशन के तीन सामान्य टाइप
आइए बुनियादी चीज़ों से शुरू करते हैं! दो सामान्य टेस्टिंग मोड और तीन सामान्य तरह के टेस्ट ऑटोमेशन के बारे में जानना.
ग़ैर-ज़रूरी डाउनलोड को हटाना
आपको समय-समय पर अपने संसाधनों का ऑडिट करना चाहिए, ताकि यह पक्का किया जा सके कि हर संसाधन बेहतर उपयोगकर्ता अनुभव देने में मदद कर रहा है.
WebAssembly क्या है और यह कहां से आया?
WebAssembly (इसे कभी-कभी Wasm के नाम से भी जाना जाता है) के बारे में जानकारी. यह पोर्टेबल बाइनरी-कोड फ़ॉर्मैट और एक्ज़ीक्यूटेबल प्रोग्राम के लिए इस्तेमाल किए जाने वाले टेक्स्ट फ़ॉर्मैट के साथ-साथ, ऐसे प्रोग्राम और उनके होस्ट एनवायरमेंट के बीच इंटरैक्शन की सुविधा देने वाले सॉफ़्टवेयर इंटरफ़ेस के बारे में जानकारी.
mkbitmap को WebAssembly में कंपाइल करना
mkbitmap C प्रोग्राम, किसी इमेज को पढ़ता है और उस पर इनमें से एक या उससे ज़्यादा कार्रवाइयों को इस क्रम में लागू करता है: इन्वर्ज़न, हाईपास फ़िल्टर, स्केलिंग, और थ्रेशोल्डिंग. हर कार्रवाई को अलग-अलग कंट्रोल किया जा सकता है. साथ ही, उसे चालू या बंद किया जा सकता है. इस लेख में, WebAssembly में mkbitmap को कंपाइल करने का तरीका बताया गया है.
ऑरिजिन निजी फ़ाइल सिस्टम
फ़ाइल सिस्टम स्टैंडर्ड में, ऑरिजिन प्राइवेट फ़ाइल सिस्टम (ओपीएफ़एस) को स्टोरेज एंडपॉइंट के तौर पर शामिल किया गया है. यह ऑरिजिन के लिए निजी है और उपयोगकर्ता को नहीं दिखता. यह एक खास तरह की फ़ाइल का ऐक्सेस देता है, जो परफ़ॉर्मेंस के लिए काफ़ी
नए वेब ऐप्लिकेशन में उपयोगकर्ता के डेटा को सुरक्षित तरीके से होस्ट करना
वेब ऐप्लिकेशन पर, उपयोगकर्ता के कंट्रोल वाले कॉन्टेंट को सुरक्षित तरीके से दिखाने का तरीका.
ज़्यादा रिस्पॉन्सिव वेबसाइटों के लिए AVIF को डिप्लॉय करना
इस बारे में खास जानकारी कि नेटवर्क में AVIF को कैसे अपनाया जाता है. साथ ही, स्टिल इमेज और ऐनिमेशन के लिए, डेवलपर को AVIF की परफ़ॉर्मेंस और क्वालिटी से जुड़े किस तरह के फ़ायदे मिल सकते हैं.
इंटरैक्शन को नेक्स्ट पेंट के लिए ऑप्टिमाइज़ करना
अपनी वेबसाइट के इंटरैक्शन टू नेक्स्ट पेंट को ऑप्टिमाइज़ करने का तरीका जानें.
बुनियादी सुविधाएं, जिनका इस्तेमाल आज किया जा सकता है
Baseline की कुछ सुविधाओं के बारे में जानें.
इनपुट में देरी को ऑप्टिमाइज़ करें
इनपुट में देरी से, इंटरैक्शन के इंतज़ार का कुल समय बढ़ सकता है. इससे आपके पेज की आईएनपी मेट्रिक (आईएनपी) पर बुरा असर पड़ सकता है. इस गाइड में, जानें कि इनपुट देर से क्या होता है और तेज़ी से इंटरैक्ट करने के लिए इसे कैसे कम किया जा सकता है.
एचटीएमएल और इंटरैक्टिविटी की क्लाइंट-साइड रेंडरिंग
JavaScript के साथ एचटीएमएल को रेंडर करना, सर्वर से भेजे गए एचटीएमएल को रेंडर करने से अलग होता है—और इससे परफ़ॉर्मेंस पर असर पड़ सकता है. इस गाइड में अंतर के बारे में जानें. साथ ही, यह भी जानें कि अपनी वेबसाइट की रेंडरिंग परफ़ॉर्मेंस को बेहतर बनाए रखने के लिए क्या किया जा सकता है. खास तौर पर, जब इंटरैक्शन से जुड़ी समस्याएं होती हैं.
बड़े DOM साइज़, इंटरैक्टिविटी पर कैसे असर डालते हैं और इस बारे में क्या किया जा सकता है
बड़े DOM साइज़ से यह पता चलता है कि इंटरैक्शन तेज़ हैं या नहीं. DOM साइज़ और INP के बीच के संबंध के बारे में ज़्यादा जानें. साथ ही, यह भी जानें कि पेज में बहुत ज़्यादा DOM एलिमेंट होने पर, DOM साइज़ को कम करने के लिए क्या किया जा सकता है. साथ ही, रेंडरिंग के काम को सीमित करने के अन्य तरीकों के बारे में भी जानें.
स्क्रिप्ट इवैलुएशन और लंबे टास्क
स्क्रिप्ट लोड करते समय, ब्राउज़र को स्क्रिप्ट चलाने से पहले उनका आकलन करने में समय लगता है. इससे, स्क्रिप्ट को लोड होने में ज़्यादा समय लग सकता है. जानें कि स्क्रिप्ट की जांच कैसे की जाती है. साथ ही, यह भी जानें कि पेज लोड होने के दौरान, टास्क की अवधि ज़्यादा होने से रोकने के लिए क्या किया जा सकता है.
वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले एक्सटेंशन का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की जानकारी की समस्याओं को डीबग करना
वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले एक्सटेंशन में, अब आपको डीबग करने से जुड़ी ज़्यादा जानकारी दिखेगी. इससे, आपको वेबसाइट की परफ़ॉर्मेंस की जानकारी से जुड़ी समस्याओं की असल वजहों का पता लगाने में मदद मिलेगी.
कुल लेआउट शिफ़्ट ऑप्टिमाइज़ करें
कुल लेआउट शिफ़्ट (सीएलएस) एक मेट्रिक है, जिससे यह पता चलता है कि उपयोगकर्ता, पेज के कॉन्टेंट में अचानक कितनी बार बदलाव करते हैं. इस गाइड में, हम बिना डाइमेंशन या डाइनैमिक कॉन्टेंट वाली इमेज और iframe जैसे सीएलएस की सामान्य वजहों को ऑप्टिमाइज़ करने के बारे में बताएंगे.
Cumulative Layout Shift (CLS)
इस पोस्ट में, कुल लेआउट शिफ़्ट (सीएलएस) मेट्रिक के बारे में बताया गया है और उसे मेज़र करने का तरीका बताया गया है.
WordPress Playground और WebAssembly की मदद से, ब्राउज़र में मौजूद WordPress की सुविधाओं को इस्तेमाल करने का अनुभव पाएं
PHP की मदद से काम करने वाला पूरा WordPress. यह पूरी तरह से WebAssembly के साथ काम करने वाले ब्राउज़र में चलता है
डेवलपर के लिए नई सुविधा—जिसे WebAssembly ने आपके लिए उपलब्ध कराया है
WebAssembly की मदद से, अब वेब पर उपलब्ध टूल का शोकेस.
ऐप स्टोर में PWA
प्रोग्रेसिव वेब ऐप्लिकेशन को, Android Play Store या Microsoft Store जैसे ऐप स्टोर पर सबमिट किया जा सकता है.
सोर्स मैप क्या होते हैं?
सोर्स मैप की मदद से, वेब डीबग करने के अनुभव को बेहतर बनाएं.
6 सीएसएस स्निपेट, जिनके बारे में हर फ़्रंट-एंड डेवलपर को साल 2023 में पता होना चाहिए
टूलबेल्ट लायक, दमदार, और स्थिर सीएसएस का इस्तेमाल करें, जिनका इस्तेमाल आज किया जा सकता है.
CSS में त्रिकोणमितीय फ़ंक्शन
सीएसएस में साइन, कोसाइन, टैंजेंट वगैरह का हिसाब लगाएं.
requestVideoFrameCallback() की मदद से, हर वीडियो फ़्रेम के हिसाब से बेहतर कार्रवाइयां करें
requestVideoFrameCallback() मेथड की मदद से, वेब लेखक एक ऐसा कॉलबैक रजिस्टर कर सकते हैं जो कंपोज़िटर को कोई नया वीडियो फ़्रेम भेजे जाने पर, रेंडरिंग के चरणों में चलता है.
GDE समुदाय का हाइलाइट: लार्स नुडसन
यह Google Developers Experts (GDE) प्रोग्राम के सदस्यों के साथ किए गए इंटरव्यू की सीरीज़ में से एक है.
मीडिया ऐप्लिकेशन के लिए नए पैटर्न
इस ब्लॉग पोस्ट में, मीडिया ऐप्लिकेशन के लिए पैटर्न के एक नए कलेक्शन के बारे में बताया गया है.
तेज़ सीएसएस सलाह! ऐनिमेटेड ग्रेडिएंट टेक्स्ट
आइए, स्कोप वाली कस्टम प्रॉपर्टी और बैकग्राउंड-क्लिप का इस्तेमाल करके, ऐनिमेशन वाला ग्रेडिएंट टेक्स्ट इफ़ेक्ट बनाते हैं CodePen पर जाएं और नया पेन बनाएं. अपने टेक्स्ट के लिए मार्कअप बनाएं. चलिए, "तेज़" शब्द वाले हेडर का इस्तेमाल करते हैं: इसके बाद,
Chrometober बनाया जा रहा है!
इस Chrometober को जानें कि कैसे स्क्रोलिंग बुक ने मज़ेदार और डरावनी सलाह और तरकीबें शेयर की हैं.
टूलटिप कॉम्पोनेंट बनाना
रंगों के हिसाब से और ऐक्सेस करने लायक टूलटिप कस्टम एलिमेंट बनाने के बारे में बुनियादी खास जानकारी.
फ़ॉर्म को ऑटोमैटिक भरने की सुविधा की मदद से, पासकी से साइन इन करना
पासकी, वेबसाइट के उपयोगकर्ता खातों को ज़्यादा सुरक्षित, आसान, इस्तेमाल करने में आसान, और बिना पासवर्ड के इस्तेमाल करती हैं. इस लेख में बताया गया है कि बिना पासवर्ड के पासकी से साइन इन करने की सुविधा को, मौजूदा उपयोगकर्ताओं के हिसाब से कैसे बनाया जाना चाहिए.
बिना पासवर्ड के लॉगिन करने के लिए पासकी बनाएं
पासकी, वेबसाइट के उपयोगकर्ता खातों को ज़्यादा सुरक्षित, आसान, इस्तेमाल करने में आसान, और बिना पासवर्ड के इस्तेमाल करती हैं. इस लेख में, उपयोगकर्ताओं को आपकी वेबसाइट के लिए पासकी बनाने की अनुमति देने का तरीका बताया गया है.
फ़्लोटिंग ऐक्शन बटन (एफ़एबी) कॉम्पोनेंट बनाना
कलर के हिसाब से ढलने वाले, रिस्पॉन्सिव, और ऐक्सेस किए जा सकने वाले एफ़एबी कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी खास जानकारी.
फ़ॉन्ट इस्तेमाल करने के सबसे सही तरीके
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के लिए, वेब फ़ॉन्ट ऑप्टिमाइज़ करने का तरीका जानें.
जीडीई समुदाय का हाइलाइट: अल्बा सिल्वेंटे फ़ुएंतेस
यह Google Developers Experts (GDE) प्रोग्राम के सदस्यों के साथ किए गए इंटरव्यू की सीरीज़ में से एक है.
वेब डिज़ाइन के रंग कंट्रास्ट की जांच करना
आपके डिज़ाइन के ऐक्सेस किए जा सकने वाले कलर कंट्रास्ट की जांच करने और उसकी पुष्टि करने के लिए, तीन टूल और तकनीकों की खास जानकारी.
तेज़ सीएसएस सलाह! एनिमेटेड लोडर
आइए, स्कोप वाली कस्टम प्रॉपर्टी और animation-timing-function की मदद से ऐनिमेशन वाला सीएसएस लोडर बनाते हैं CodePen पर जाएं और नया पेन बनाएं. हमारे लोडर के लिए मार्कअप बनाएं. इनलाइन कस्टम प्रॉपर्टी के इस्तेमाल पर ध्यान दें: लाइनों की संख्या कॉन्फ़िगर
किसी वेबसाइट के लिए मुख्य नेविगेशन बनाना
इस ट्यूटोरियल में, किसी वेबसाइट का ऐक्सेस किया जा सकने वाला मुख्य नेविगेशन बनाने का तरीका बताया गया है. आपको सिमेंटिक एचटीएमएल और सुलभता के बारे में पता चलता है. साथ ही, यह भी पता चलता है कि ARIA एट्रिब्यूट का इस्तेमाल करने से, कभी-कभी अच्छे से ज़्यादा नुकसान कैसे पहुंच सकता है.
क्या यह :मॉडल है?
इस आसान सीएसएस pseudo-selector में, मॉडल एलिमेंट चुनने का तरीका बताया गया है.
टेढ़ा-मेढ़ा ग्रिड इल्यूज़न बनाना
सीएसएस की मदद से, ऑप्टिकल भ्रम को फिर से पैदा करने के तरीकों के बारे में मज़ेदार जानकारी.
क्रिएटिव सूची की स्टाइलिंग
किसी लिस्ट को एक स्टाइल देने के लिए, कुछ क्रिएटिव और काम के तरीकों के बारे में जानें.
टैग और टैग मैनेजर के लिए सबसे सही तरीके
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने के लिए, टैग और टैग मैनेजर को ऑप्टिमाइज़ करें.
Nordhealth, वेब कॉम्पोनेंट में कस्टम प्रॉपर्टी का इस्तेमाल कैसे करती है
डिज़ाइन सिस्टम और कॉम्पोनेंट लाइब्रेरी में कस्टम प्रॉपर्टी का इस्तेमाल करने के फ़ायदे.
सीएसएस पर बेहतर कंट्रोल, अलग-अलग ट्रांसफ़ॉर्म प्रॉपर्टी के साथ बदल जाता है
जानें कि अलग-अलग ट्रांसलेट करने, बदलने, और स्केल करने वाली सीएसएस प्रॉपर्टी को आसानी से कैसे बदला जा सकता है.
सीएसएस बॉर्डर ऐनिमेशन
सीएसएस में बॉर्डर को ऐनिमेट करने के कई तरीके ढूंढे जा रहे हैं
बेहतर सुरक्षा और परफ़ॉर्मेंस के लिए, BBC किस तरह एचएसटीएस को रोल आउट कर रहा है.
BBC ने अपनी वेबसाइट की सुरक्षा और परफ़ॉर्मेंस को बेहतर बनाने के लिए, एचएसटीएस को रोल आउट किया है. जानें कि इसका क्या मतलब है और एचएसटीएस आपकी मदद कैसे कर सकता है.
लैब और फ़ील्ड डेटा अलग-अलग क्यों हो सकते हैं और इसके बारे में क्या करना चाहिए
जानें कि वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक पर नज़र रखने वाले टूल, अलग-अलग आंकड़े क्यों रिपोर्ट कर सकते हैं और इन अंतर को कैसे समझा जा सकता है.
सबके लिए एक फ़ायदा
अपने एनजीओ के हेल्पडेव के ओपन सोर्स के बारे में जीडीई एनरीक फ़र्नांडेज़ गुएरा.
Internet Explorer के आखिर में
Maersk.com के ग्राहकों और डेवलपर के लिए Internet Explorer के आखिर में मिलने वाली सहायता का क्या मतलब है.
HTML5Rocks से विदाई
बहुत लंबे HTML5Rocks, आपको जानकर अच्छा लगा.
पहले-पक्ष की कुकी बनाने की रेसिपी
सुरक्षा, क्रॉस-ब्राउज़र के साथ काम करने की सुविधा को पक्का करने के लिए, पहले-पक्ष की कुकी सेट करने का तरीका जानें. साथ ही, यह भी जानें कि तीसरे पक्ष की कुकी के बंद होने पर उनके काम करने के तरीके के बंद होने की संभावना को कम से कम कैसे किया जाए.
वेब पर ऑडियो और वीडियो प्लेबैक सिंक करें
Web Audio API का इस्तेमाल करके, AV सिंक्रनाइज़ेशन सही तरीके से हासिल किया जा सकता है.
कूल बॉर्डर बनाने के लिए कोनिक ग्रेडिएंट का इस्तेमाल करें
कुछ दिलचस्प इफ़ेक्ट बनाने के लिए, कॉनिक ग्रेडिएंट का इस्तेमाल किया जा सकता है. जैसे, यह अच्छा बॉर्डर. ऐडम अर्गेल ने यह CodePen बनाया है. इसे मूल रूप से, Twitter पर इस ट्वीट के ज़रिए शेयर किया गया था. इसमें, बॉर्डर बनाने के लिए कोनिक ग्रेडिएंट का
JavaScript लाइब्रेरी और फ़्रेमवर्क के बीच अंतर
क्लाइंट-साइड JavaScript एनवायरमेंट के संदर्भ में फ़्रेमवर्क और लाइब्रेरी के बीच के अंतर को समझें.
फ़ेच एपीआई का इस्तेमाल करते समय गड़बड़ी ठीक करने के तरीके को लागू करें
फ़ेच एपीआई के साथ काम करते समय गड़बड़ियों का पता लगाना.
JavaScript लाइब्रेरी या फ़्रेमवर्क चुनना
JavaScript लाइब्रेरी या फ़्रेमवर्क का इस्तेमाल करने से जुड़े फ़ैसलों को समझें.
तेज़ और खूबसूरत वेब फ़ॉन्ट के लिए एपीआई
Google Fonts CSS API से जुड़ा एक अपडेट. यह कैसे काम करता है, इसे कैसे इस्तेमाल किया जा सकता है, और आपके वेब फ़ॉन्ट को बेहतर तरीके से डिलीवर करने का तरीका क्या है.
टर्मिनल के लिए फ़्रंट-एंड डेवलपर की गाइड
यह संसाधन आपको टर्मिनल के आस-पास तेज़ी से रास्ता ढूंढने में मदद कर सकता है.
GOV.UK अपने फ़्रंट एंड से jQuery को ड्रॉप करता है.
GOV.UK ने अपनी jQuery डिपेंडेंसी को अपने फ़्रंट एंड से हटा दिया है. आप सोच भी नहीं पाएंगे कि क्या हुआ. (हां, ऐसा किया जा सकता है.)
बटन कॉम्पोनेंट बनाना
रंग के हिसाब से ढल जाने वाले, रिस्पॉन्सिव, और ऐक्सेस किए जा सकने वाले कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.
ब्राउज़र प्रीलोड स्कैनर से मुकाबला न करें
जानें कि ब्राउज़र को पहले से लोड करने वाला स्कैनर क्या है, यह परफ़ॉर्मेंस को बेहतर बनाने में कैसे मदद करता है, और इसे बिना किसी रुकावट के कैसे हटाया जा सकता है.
फ़ील्ड में, वेबसाइट की परफ़ॉर्मेंस की जानकारी को मेज़र करने के सबसे सही तरीके
अपने मौजूदा ऐनलिटिक्स टूल की मदद से, वेबसाइट की परफ़ॉर्मेंस की जानकारी को मापने का तरीका
कमियों को दूर करना
वेब के लिए निर्माण को आसान बनाना.
डेवलपर कम्यूनिटी में हिम्मत और प्रेरणा मिलना
मेंटॉरशिप प्रोग्राम से जुड़े Google Developers के विशेषज्ञ, इस बारे में जानकारी दे रहे हैं कि कैसे उन्हें लीडर बनने में मदद मिली.
असल ज़िंदगी में बदलाव करने वाले फ़ॉन्ट
वैरिएबल फ़ॉन्ट के लिए एक व्यावहारिक गाइड शेयर करना, जिसमें कई उदाहरणों के बारे में बताया गया है.
सीएसएस ग्रेडिएंट क्रिएटर की मदद से, तेज़ी से अच्छे सीएसएस ग्रेडिएंट बनाएं
जोश डब्ल्यू कोमाओ के इस टूल की मदद से, अच्छे दिखने वाले ग्रेडिएंट बनाना बहुत आसान हो जाता है.
टॉप वेब डेवलपर से जुड़ी समस्याओं के बारे में ज़्यादा जानें
वेब डेवलपर के साथ हुई कई बातचीत के आधार पर, आपको सबसे ज़्यादा ज़रूरी समस्याओं के बारे में अहम जानकारी मिलेगी.
images.tooling.report की मदद से अपनी साइट को बेहतर बनाएं
इमेज टूल की स्थिति देखें.
ग्लोबल और लोकल वैरिएबल स्कोप
दायरे और JavaScript में उसके काम करने के तरीके के बारे में जानें.
डायलॉग कॉम्पोनेंट बनाना
`` एलिमेंट की मदद से, रंगों के हिसाब से ढलने वाले, रिस्पॉन्सिव, और आसानी से ऐक्सेस किए जा सकने वाले मिनी और मेगा मोडल बनाने के बारे में बुनियादी जानकारी.
वेब पर मीडिया चलाने से जुड़ी गड़बड़ियां डीबग करना
वेब पर मीडिया चलाने में होने वाली गड़बड़ियों को डीबग करने का तरीका जानें.
GDE कम्यूनिटी हाइलाइट: निशु गोयल
यह Google Developers Experts (GDE) प्रोग्राम के सदस्यों के साथ किए गए इंटरव्यू की सीरीज़ में से एक है.
बहुत ज़्यादा लेज़ी लोडिंग के परफ़ॉर्मेंस असर
शुरुआत में व्यूपोर्ट में इमेज को बहुत ज़्यादा लोड करना, जबकि बाकी इमेज को लेज़ी लोडिंग के साथ लोड करना, वेब की परफ़ॉर्मेंस से जुड़ी जानकारी को बेहतर बनाने में मदद करता है, जबकि बाइट की संख्या भी कम होती है.
लोडिंग बार कॉम्पोनेंट बनाना
`` एलिमेंट की मदद से, रंगों के हिसाब से साइज़ बदलने वाला और ऐक्सेस किया जा सकने वाला लोडिंग बार बनाने के बारे में बुनियादी जानकारी.
Forms से क्रेडेंशियल सेव करें
रजिस्टर करने और साइन इन करने के फ़ॉर्म को जितना हो सके उतना आसान बनाएं. साइन इन फ़ॉर्म से क्रेडेंशियल सेव करें, ताकि उपयोगकर्ताओं को वापस आने पर फिर से साइन इन न करना पड़े. फ़ॉर्म से उपयोगकर्ता के क्रेडेंशियल सेव करने के लिए: आगे बढ़ने से पहले, देख
Chrome और Firefox जल्द ही मेजर वर्शन 100 पर पहुंचने वाले हैं
उपयोगकर्ता-एजेंट स्ट्रिंग में बदलाव, वे रणनीतियां जिन्हें Chrome और Firefox ने असर को कम करने के लिए अपनाया है. साथ ही, यह भी पता चलता है कि आपकी मदद कैसे की जा सकती है.
उपयोगकर्ताओं के हिसाब से फ़ेविकॉन बनाना
अडैप्टिव फ़ेविकॉन बनाने के बारे में खास जानकारी.
Emscripten में कैनवस की तरफ़ ड्रॉइंग
Emscripten के साथ WebAssembly की मदद से, 2D ग्राफ़िक को कैनवस पर रेंडर करने का तरीका जानें.
एचटीटीपी कैश मेमोरी को अपडेट करके, सुरक्षा और निजता को बेहतर बनाएं
कैश कंट्रोल हेडर को भूलने या उसका गलत इस्तेमाल करने से, आपकी वेबसाइट और उपयोगकर्ताओं की निजता पर बुरा असर पड़ सकता है. ज़्यादा अहम वेबसाइटों के बारे में सुझाव पाएं.
अतिरिक्त एचटीएमएल एलिमेंट
बेहतर साइट के लिए ज़रूरी मेट्रिक
USB ऐप्लिकेशन को वेब पर पोर्ट किया जा रहा है. भाग 2: gPhoto2
जानें कि किसी वेब ऐप्लिकेशन से यूएसबी पर बाहरी कैमरे कंट्रोल करने के लिए, gPhoto2 को WebAssembly पर कैसे पोर्ट किया गया है.
नेटवर्क की गड़बड़ी का डेटा लॉग करने की सुविधा (NEL)
क्लाइंट-साइड नेटवर्क की गड़बड़ियों की जानकारी इकट्ठा करने के लिए, नेटवर्क एरर लॉगिंग (NEL) का इस्तेमाल करें.
WebAssembly सुविधा का पता लगाने की सुविधा
सभी ब्राउज़र के उपयोगकर्ताओं की मदद करते समय, WebAssembly की नई सुविधाओं को इस्तेमाल करने का तरीका जानें.
USB ऐप्लिकेशन को वेब पर पोर्ट किया जा रहा है. भाग 1: li एक्सटेंशन
जानें कि बाहरी डिवाइसों से इंटरैक्ट करने वाले कोड को WebAssembly और Fugu API की मदद से, वेब पर कैसे पोर्ट किया जा सकता है.
थीम स्विच करने वाला कॉम्पोनेंट बनाना
अडैप्टिव और ऐक्सेस करने लायक थीम स्विच करने वाला कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.
Emscripten के साथ C++ में JavaScript स्निपेट एम्बेड करना
बाहर की दुनिया से संपर्क करने के लिए, अपनी WebAssembly लाइब्रेरी में JavaScript कोड को एम्बेड करने का तरीका जानें.
Oculus Quest 2 पर PWA
The Oculus Quest 2 एक वर्चुअल रिएलिटी (वीआर) हेडसेट है. इसे Meta के विभाग, Oculus ने बनाया है. डेवलपर अब 2D और 3D प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) बना सकते हैं और उन्हें उपलब्ध करा सकते हैं, जो Oculus Quest 2' की मल्टीटास्किंग सुविधा का फ़ायदा लेते हैं. इस लेख में, Oculus Quest 2 पर PWA को बनाने, अलग से लोड करने, और उसकी जांच करने का तरीका बताया गया है. साथ ही, यह भी बताया गया है कि ऐसा कैसे किया जाता है.
बिल्डिंग डिज़ाइनसींबर
Designcember के हॉलिडे कैलेंडर-स्टाइल का अनुभव देने के लिए इस्तेमाल की गई प्रोसेस और टूल की एक झलक.
Designcember कैलकुलेटर
वेब पर सोलर कैलकुलेटर को फिर से बनाने की कोशिश की गई है. इसमें, आस-पास की लाइट के सेंसर और विंडो कंट्रोल ओवरले सुविधा का इस्तेमाल किया गया है.
स्ट्रक्चर्डClone का इस्तेमाल करके, JavaScript में डीप-कॉपी करना
लंबे समय तक, आपको JavaScript वैल्यू की डीप कॉपी बनाने के लिए समस्याओं और लाइब्रेरी का इस्तेमाल करना पड़ा. प्लैटफ़ॉर्म अब `स्ट्रक्चर्डClone()` के साथ शिप किया जाता है, जो डीप-कॉपी करने के लिए एक बिल्ट-इन फ़ंक्शन है.
टोस्ट कॉम्पोनेंट बनाना
ज़रूरत के हिसाब से और आसानी से ऐक्सेस किया जा सकने वाला टोस्ट कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.
यूज़र इंटरफ़ेस (यूआई) फ़ंड
Chrome की तरफ़ से यूज़र इंटरफ़ेस (यूआई) फ़ंड की घोषणा की गई है. इसे डिज़ाइन टूल, सीएसएस, और एचटीएमएल पर काम करने वाले लोगों को अनुदान देने के लिए डिज़ाइन किया गया है.
3D गेम मेन्यू कॉम्पोनेंट बनाना
रिस्पॉन्सिव, आसानी से इस्तेमाल होने वाला, और ऐक्सेस किया जा सकने वाला 3D गेम मेन्यू बनाने के बारे में बुनियादी खास जानकारी.
PageSpeed Insights में नया क्या है
अपने पेज और साइट की क्वालिटी को बेहतर तरीके से मेज़र और ऑप्टिमाइज़ करने के लिए, PageSpeed Insights की नई जानकारी के बारे में जानें.
Chrome Dev Summit 2021 में लॉन्च की गई सभी सुविधाओं के बारे में जानकारी
साल 2021 के Chrome Dev Summit की सभी मुख्य सूचनाओं का राउंडअप. इसमें, ऐसे लिंक भी शामिल हैं जिनकी ज़रूरत आपको ज़्यादा है.
ऐनिमेशन के स्मूदनेस मेट्रिक की ओर
ऐनिमेशन को मापने, ऐनिमेशन फ़्रेम के बारे में सोचने, और पेज के पूरी तरह इस्तेमाल होने के बारे में जानें.
लाइटहाउस यूज़र फ़्लो
नए लाइटहाउस एपीआई को आज़माएं, ताकि यूज़र फ़्लो के दौरान परफ़ॉर्मेंस और सबसे सही तरीकों को मेज़र किया जा सके.
Photoshop की वेब की यात्रा
पिछले तीन सालों से, Chrome उन वेब ऐप्लिकेशन को बेहतर बनाने के लिए काम कर रहा है जो ब्राउज़र में उपलब्ध सुविधाओं से ज़्यादा का इस्तेमाल करना चाहते हैं. ऐसा ही एक वेब ऐप्लिकेशन Photoshop है. Photoshop की तरह जटिल सॉफ़्टवेयर को सीधे ब्राउज़र में चलाने की कल्पना भी कुछ साल पहले ही करना मुश्किल था. हालांकि, कई नई वेब तकनीकों का इस्तेमाल करके, Adobe ने अब Photoshop का सार्वजनिक बीटा वर्शन वेब पर लाया है.
एक से ज़्यादा कॉम्पोनेंट चुनने की सुविधा का इस्तेमाल करना
उपयोगकर्ताओं के अनुभवों को क्रम से लगाने और फ़िल्टर करने के लिए, रिस्पॉन्सिव, ज़रूरत के हिसाब से, और ऐक्सेस किए जा सकने वाले एक से ज़्यादा कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी खास जानकारी.
नेविगेशन टाइमिंग और रिसॉर्स टाइमिंग की मदद से, फ़ील्ड में लोड होने की परफ़ॉर्मेंस का आकलन करने का तरीका
फ़ील्ड में कॉन्टेंट लोड होने की परफ़ॉर्मेंस का आकलन करने के लिए, नेविगेशन और रिसॉर्स टाइमिंग एपीआई को इस्तेमाल करने से जुड़ी बुनियादी बातें जानें.
Sanitizer एपीआई की मदद से, DOM में सुरक्षित बदलाव करना
नए Sanitizer API का मकसद, एक मज़बूत प्रोसेसर बनाना है. इससे, आर्बिट्ररी स्ट्रिंग को सुरक्षित तरीके से पेज में डाला जा सकेगा. इस लेख में, एपीआई के बारे में जानकारी और इसके इस्तेमाल के बारे में बताया गया है.
तीसरे पक्ष के एम्बेड इस्तेमाल करने के सबसे सही तरीके
इस दस्तावेज़ में परफ़ॉर्मेंस से जुड़े सबसे सही तरीकों के बारे में बताया गया है. तीसरे पक्ष के एम्बेड को लोड करते समय इन तरीकों का इस्तेमाल किया जा सकता है. साथ ही, लोड करने की बेहतर तकनीकों और लेआउट शिफ़्ट टर्मिनेटर टूल के बारे में भी बताया गया है. ये तरीके, लोकप्रिय एम्बेड के लिए लेआउट शिफ़्ट कम करने में मदद करते हैं.
एसपीए आर्किटेक्चर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर कैसे असर डालते हैं
मेज़रमेंट की मौजूदा सीमाओं को ठीक करने के लिए, एसपीए, वेबसाइट की परफ़ॉर्मेंस की जानकारी, और Google के प्लान से जुड़े सामान्य सवालों के जवाब.
JavaScript इवेंट के बारे में ज़्यादा जानकारी
preventDefault और stopPropagation: किस तरीके का इस्तेमाल कब करना है और हर तरीका क्या करता है. JavaScript इवेंट को हैंडल करना अक्सर आसान होता है. यह बात खास तौर पर तब ज़्यादा सही होती है, जब किसी आसान (अपेक्षाकृत फ़्लैट) एचटीएमएल स्ट्रक्चर का इस्तेमाल
JavaScript के अलावा, दूसरे संसाधनों को इकट्ठा करना
JavaScript से अलग-अलग तरह की एसेट को इस तरह से इंपोर्ट और बंडल करने का तरीका जानें, जो ब्राउज़र और बंडलर, दोनों में काम करें.
स्प्लिट बटन वाला कॉम्पोनेंट बनाना
ऐक्सेस किए जा सकने वाले स्प्लिट बटन कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी खास जानकारी.
स्टाइलशीट इंपोर्ट करने के लिए, सीएसएस मॉड्यूल स्क्रिप्ट का इस्तेमाल करना
JavaScript मॉड्यूल जैसे सिंटैक्स का इस्तेमाल करके, सीएसएस स्टाइलशीट इंपोर्ट करने के लिए, सीएसएस मॉड्यूल स्क्रिप्ट को इस्तेमाल करने का तरीका जानें.
सीएसएस एक्सेंट-रंग
अपने ब्रैंड के रंग को कोड की एक लाइन से, पहले से मौजूद एचटीएमएल फ़ॉर्म इनपुट में शामिल करें.
स्विच कॉम्पोनेंट बनाना
रिस्पॉन्सिव और ऐक्सेस किए जा सकने वाले स्विच कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी खास जानकारी.
उपयोगकर्ता की पसंद के मीडिया की सुविधाएं, क्लाइंट हिंट के हेडर
क्लाइंट हिंट हेडर के सेट की मदद से, साइटें अनुरोध के समय उपयोगकर्ता की मीडिया प्राथमिकताएं हासिल कर सकती हैं. इससे सर्वर, परफ़ॉर्मेंस के लिए सही सीएसएस को इनलाइन कर सकते हैं. सीएसएस मीडिया क्वेरी और खास तौर पर, prefers-color-scheme या
ब्रेडक्रंब कॉम्पोनेंट बनाना
आपकी साइट पर नेविगेट करने के लिए, रिस्पॉन्सिव और आसानी से ऐक्सेस किए जा सकने वाले ब्रेडक्रंब कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.
C, C++, और Rust से मिले WebAssembly थ्रेड का इस्तेमाल करना
दूसरी भाषाओं में लिखे गए मल्टीथ्रेड ऐप्लिकेशन को WebAssembly में लाने का तरीका जानें.
मीडिया फ़्रेमवर्क
मीडिया फ़्रेमवर्क, मालिकाना हक और ओपन-सोर्स, दोनों तरह के होते हैं. मुख्य तौर पर, ये ऐसे एपीआई का सेट होते हैं जो अलग-अलग कंटेनर फ़ॉर्मैट और ट्रांसमिशन प्रोटोकॉल के लिए, ऑडियो और/या वीडियो चलाने की सुविधा देते हैं.
मीडिया स्ट्रीमिंग के बारे में बुनियादी बातें
मीडिया स्ट्रीमिंग, किसी सर्वर से लगातार मल्टीमीडिया कॉन्टेंट डिलीवर करने का तरीका है. इसके लिए, कॉन्टेंट को डेटा के अलग-अलग हिस्सों में बांट दिया जाता है. इसे डीएएसएच और HLS जैसे प्रोटोकॉल का इस्तेमाल करके, एक खास क्रम में वीडियो चलाने के दौरान एक साथ जोड़ा जा सकता है.
ऑफ़लाइन स्ट्रीमिंग की सुविधा वाला PWA
ऑफ़लाइन स्ट्रीमिंग की सुविधा के साथ PWA बनाने में चुनौतियां आती हैं. इस लेख में, आपको उन एपीआई और तकनीकों के बारे में बताया गया है जो उपयोगकर्ताओं को अच्छी क्वालिटी में ऑफ़लाइन मीडिया का अनुभव देती हैं.
मीडिया एन्क्रिप्ट (सुरक्षित) करने का तरीका
डिजिटल राइट मैनेजमेंट के सिद्धांतों को जानें. साथ ही, रॉ फ़ाइल से एन्क्रिप्ट (सुरक्षित) किए गए मीडिया तक, MPEG-DASH या HLS के लिए पैकेज किए गए मीडिया को सुरक्षित करने के लिए, 'क्लियर कुंजी' या 'वाइडवाइन' एन्क्रिप्शन, दोनों का इस्तेमाल करने के लिए ज़रूरी निर्देश.
वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले एक्सटेंशन के अपडेट में फ़ील्ड डेटा की मदद से रास्ता जानें
'वेबसाइट की परफ़ॉर्मेंस की जानकारी' एक्सटेंशन से, अब आपको पता चलता है कि फ़ील्ड में आपके स्थानीय अनुभव और उपयोगकर्ता अनुभव कहां पर हैं.
कलर स्कीम बनाना
डाइनैमिक और कॉन्फ़िगर करने लायक कलर स्कीम बनाने के बारे में बुनियादी जानकारी
@font-face के लिए सीएसएस का साइज़ घटाना या बढ़ाना
वेब फ़ॉन्ट लोड होने पर, अब दस्तावेज़ के फ़ॉन्ट साइज़ को सामान्य करने के लिए, इसके स्केल को अडजस्ट किया जा सकता है. साथ ही, फ़ॉन्ट के बीच स्विच करते समय लेआउट शिफ़्ट को रोका जा सकता है
AVIF का इस्तेमाल करके अपनी साइट पर इमेज कंप्रेस करना
मोबाइल डिवाइसों पर डेस्कटॉप के साइज़ की इमेज दिखाने से, ज़रूरत से दो से चार गुना ज़्यादा डेटा खर्च हो सकता है. इमेज के लिए "एक ही साइज़-सभी के लिए फ़िट होने वाले" तरीके के बजाय, अलग-अलग डिवाइसों पर अलग-अलग साइज़ की इमेज इस्तेमाल करें.
वेब टूलिंग में कुल लेआउट शिफ़्ट में बदलाव
आज से, सीएलएस में बदलाव किया गया है. यह बदलाव Chrome के वेब टूल के कई प्लैटफ़ॉर्म पर लागू कर दिया गया है. इनमें Lighthouse, PageSpeed Insights, और Chrome UX रिपोर्ट शामिल हैं.
वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली सीएसएस
इस लेख में, वेबसाइट की परफ़ॉर्मेंस की जानकारी को ऑप्टिमाइज़ करने के लिए, सीएसएस से जुड़ी तकनीकों के बारे में बताया गया है.
सीएसएस के नए फ़ंक्शनल सूडो-क्लास सिलेक्टर :is() और :where()
सीएसएस सिलेक्टर सिंटैक्स में नज़र आने वाले इन छोटे बदलावों का बड़ा असर होगा.
प्रोग्रेसिव वेब ऐप्लिकेशन की नई ट्रेनिंग अब उपलब्ध है
प्रोग्रेसिव वेब ऐप्लिकेशन की एक नई और छह हिस्सों की ट्रेनिंग अब उपलब्ध है. इसमें कोडलैब की एक नई सीरीज़ दी गई है, जो आपको भरोसेमंद, इंस्टॉल करने लायक, और बेहतर PWA बनाने का तरीका सिखाती है.
नया रिस्पॉन्सिव: कॉम्पोनेंट-आधारित दुनिया में वेब डिज़ाइन
फ़ोल्ड किए जा सकने वाली स्क्रीन जैसी नई स्क्रीन के लिए, उपयोगकर्ता की प्राथमिकता पर आधारित मीडिया सुविधाएं, कंटेनर क्वेरी, और मीडिया क्वेरी की मदद से हम रिस्पॉन्सिव वेब डिज़ाइन के नए दौर में काम कर पाएंगे.
उपयोगकर्ता-एजेंट क्लाइंट हिंट पर माइग्रेट करना
आपकी साइट को उपयोगकर्ता-एजेंट स्ट्रिंग पर भरोसा करने के बजाय, नए उपयोगकर्ता-एजेंट क्लाइंट हिंट पर माइग्रेट करने की रणनीतियां.
सुरक्षा हेडर के बारे में फटाफट जानकारी
इस लेख में सबसे ज़रूरी सुरक्षा हेडर की सूची दी गई है. इन हेडर का इस्तेमाल करके अपनी वेबसाइट को सुरक्षित रखा जा सकता है. इसका इस्तेमाल वेब पर आधारित सुरक्षा सुविधाओं को समझने और अपनी वेबसाइट पर इन्हें लागू करने का तरीका जानने के लिए करें. साथ ही, इसकी मदद से यह जानें कि आपको कब रिमाइंडर की ज़रूरत है.
एक्सकैलिड्रॉ और फुगु: उपयोगकर्ताओं के मुख्य अनुभवों को बेहतर बनाना
थॉमस स्टाइनर के Google I/O 2021 पर आधारित टॉक-अप का लेख, जिसका टाइटल है, एक्सकैलिड्रॉ और फ़ुगु: Core User Journeys को बेहतर बनाना
सर्विस वर्कर में ES मॉड्यूल
सर्विस वर्कर, ExportScripts() के विकल्प के तौर पर, अतिरिक्त कोड लाने के लिए, ES मॉड्यूल के स्टैटिक इंपोर्ट का इस्तेमाल कर सकते हैं.
मीडिया स्क्रोलर कॉम्पोनेंट बनाना
टीवी, फ़ोन, डेस्कटॉप वगैरह के लिए, रिस्पॉन्सिव हॉरिज़ॉन्टल स्क्रोलव्यू बनाने के तरीके के बारे में बुनियादी खास जानकारी.
Lighthouse का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की जानकारी को ऑप्टिमाइज़ करना
अब हम लाइटहाउस, PageSpeed, और DevTools में टूल की नई सुविधाओं के बारे में बताएंगे. इनकी मदद से, यह पता लगाया जा सकेगा कि आपकी साइट, वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी में किस तरह सुधार कर सकती है.
WebAssembly से एसिंक्रोनस वेब एपीआई इस्तेमाल करना
WebAssembly में पारंपरिक सिंक्रोनस भाषाओं को कंपाइल करते समय, एसिंक्रोनस वेब एपीआई शुरू करने का तरीका जानें.
तीसरे पक्ष की स्क्रिप्ट को कंट्रोल में रखना
तृतीय-पक्ष स्क्रिप्ट या "टैग" आपकी साइट पर प्रदर्शन समस्याओं का एक स्रोत हो सकते हैं, और इसलिए उन्हें अनुकूलन का लक्ष्य माना जा सकता है. हालांकि, अपने जोड़े गए टैग को ऑप्टिमाइज़ करना शुरू करने से पहले, पक्का करें कि आप उन टैग को ऑप्टिमाइज़ नहीं कर रहे हैं जिनकी आपको ज़रूरत नहीं है. इस लेख में, नए टैग के लिए अनुरोधों का आकलन करने और मौजूदा टैग को मैनेज करने और उनकी समीक्षा करने का तरीका बताया गया है.
अपने PWA के टाइटल बार की विंडो कंट्रोल ओवरले को पसंद के मुताबिक बनाएं
विंडो कंट्रोल ओवरले सुविधा की मदद से, डेवलपर इंस्टॉल किए गए PWA के टाइटल बार को अपनी पसंद के मुताबिक बना सकते हैं, ताकि उनके PWA, ऐप्लिकेशन की तरह दिखें.
WebOTP एपीआई की मदद से, क्रॉस-ऑरिजिन iframe में ओटीपी फ़ॉर्म भरें
WebOTP API अब iframe के अंदर ओटीपी पा सकता है.
DataTransfer API का इस्तेमाल करके समस्याएं हल करना
DataTransfer ऑब्जेक्ट में, 'खींचें और छोड़ें' कार्रवाई के दौरान ड्रैग किया जाने वाला डेटा होता है. इसमें एक या उससे ज़्यादा डेटा आइटम हो सकते हैं. हर तरह के डेटा में एक या उससे ज़्यादा तरह के डेटा हो सकते हैं. इस लेख में बताया गया है कि DataTransfer API की मदद से क्या किया जा सकता है.
स्प्लिट टेक्स्ट ऐनिमेशन बनाना
अक्षर और शब्द वाले ऐनिमेशन बनाने के तरीके के बारे में बुनियादी खास जानकारी.
सीएलएस मेट्रिक को बेहतर बनाना
सीएलएस मेट्रिक को बेहतर बनाने की योजनाएं, ताकि उन पेजों के लिए सीएलएस मेट्रिक बेहतर बनाई जा सके जो किसी पेज पर लंबे समय तक रहते हैं.
वेब डेवलपर से जुड़ी संतुष्टि
वेब डेवलपर सैटिस्फ़ैक्शन, वेब डेवलपर की ज़रूरतों के बारे में जानकारी इकट्ठा करने का एक Google प्रोजेक्ट है. इसका लक्ष्य एक ज़्यादा भरोसेमंद, अनुमान लगाने वाला, और इंटरऑपरेबल वेब प्लैटफ़ॉर्म है, जो डेवलपर को इस पर निवेश करने और उस पर भरोसा करने के साथ-साथ प्लैटफ़ॉर्म और उनके कारोबार को बढ़ाने के लिए नई सुविधाओं को अपनाने और इस्तेमाल करने की सुविधा देता है.
सेटिंग कॉम्पोनेंट बनाना
स्लाइडर और चेकबॉक्स के सेटिंग कॉम्पोनेंट को बनाने के बारे में बुनियादी जानकारी.
लेआउट शिफ़्ट को डीबग करें
लेआउट शिफ़्ट पहचानने और उन्हें ठीक करने का तरीका जानें.
JavaScript: इसका क्या मतलब है?
JavaScript में `इस` के मान का पता लगाना मुश्किल हो सकता है, यहां इसे करने का तरीका बताया गया है...
मिनी ऐप्लिकेशन ओपन सोर्स प्रोजेक्ट
इस चैप्टर में कुछ दिलचस्प मिनी ऐप्लिकेशन ओपन सोर्स प्रोजेक्ट के बारे में बताया गया है.
मिनी ऐप्लिकेशन के हिसाब से प्रोग्रामिंग करना
इस चैप्टर में, मिनी ऐप्लिकेशन की प्रोग्रामिंग के तरीके के बारे में बताया गया है.
उदाहरण प्रोजेक्ट में मिनी ऐप्लिकेशन की प्रोग्रामिंग के सिद्धांतों को लागू करना
इस चैप्टर में उदाहरण के तौर पर एक प्रोजेक्ट दिखाया गया है, जिसमें "मिनी ऐप्लिकेशन के लिए प्रोग्रामिंग करने के तरीके" तरीके को अपनाया गया है.
प्रोजेक्ट स्ट्रक्चर, लाइफ़साइकल, और बंडलिंग
इस चैप्टर में प्रोजेक्ट स्ट्रक्चर, लाइफ़साइकल, और मिनी ऐप्लिकेशन का बंडल बनाने के बारे में बताया गया है.
वेब डेवलपर के मिनी ऐप्लिकेशन के बारे में विचार खत्म करते समय
यह चैप्टर, मिनी ऐप्लिकेशन कलेक्शन की इस आखिरी बात को पूरा करता है कि कुछ अलग तरीके से सोचने और अपने बबल के बाहर से इनपुट और प्रेरणा लेने से, वेब पर एक बेहतर भविष्य बनाने में मदद मिल सकती है..
मिनी ऐप्लिकेशन मार्कअप, स्टाइल, स्क्रिप्टिंग, और अपडेट करना
इस चैप्टर में अलग-अलग मिनी ऐप्लिकेशन प्लैटफ़ॉर्म के मार्कअप, स्टाइल, स्क्रिप्टिंग, और अपडेट करने के विकल्पों के बारे में बताया गया है.
मिनी ऐप्लिकेशन कॉम्पोनेंट
इस चैप्टर में उन कॉम्पोनेंट की जानकारी दी गई है जिन्हें सभी मिनी ऐप्लिकेशन प्लैटफ़ॉर्म उपलब्ध कराते हैं.
H5 और QuickApp क्या हैं?
यह चैप्टर H5 ऐप्लिकेशन और QuickApp के बैकग्राउंड के बारे में बताता है, जो दोनों मिनी ऐप्लिकेशन से अलग हैं.
स्ट्रीम—खास गाइड
Streams API, JavaScript को नेटवर्क से मिले डेटा की स्ट्रीम को प्रोग्राम के हिसाब से ऐक्सेस करने और उन्हें मनमुताबिक प्रोसेस करने की अनुमति देता है.
टैब कॉम्पोनेंट बनाना
iOS और Android ऐप्लिकेशन में मिलने वाले टैब कॉम्पोनेंट से मिलते-जुलते टैब बनाने के तरीके की बुनियादी जानकारी.
क्रॉस-ऑरिजिन आइसोलेशन चालू करने के लिए गाइड
क्रॉस-ऑरिजिन आइसोलेशन की सुविधा की मदद से, वेब पेज में SharedarrayBuffer जैसी सुविधाएं इस्तेमाल की जा सकती हैं. इस लेख में, आपकी वेबसाइट पर क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करने का तरीका बताया गया है.
ऑरिजिन-एजेंट-क्लस्टर हेडर की मदद से, परफ़ॉर्मेंस आइसोलेशन का अनुरोध करना
ऑरिजिन-एजेंट-क्लस्टर हेडर, एक ही डोमेन पर अन्य ऑरिजिन के सिंक्रोनस ऐक्सेस को बंद कर देता है. साथ ही, आपके ऑरिजिन के लिए खास संसाधनों की जानकारी देने के लिए ब्राउज़र को संकेत देता है.
सीएसएस का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) प्रॉपर्टी
नई आसपेक्ट रेशियो सीएसएस प्रॉपर्टी की मदद से, इमेज और एलिमेंट में आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखना अब आसान हो गया है.
WebRTC अब W3C और IETF का स्टैंडर्ड वर्शन है
WebRTC के इतिहास, आर्किटेक्चर, इस्तेमाल के उदाहरण, और आने वाले समय के बारे में खास जानकारी.
कैरसेल के लिए सबसे सही तरीके
परफ़ॉर्मेंस और इस्तेमाल के लिए, कैरसेल को ऑप्टिमाइज़ करने का तरीका जानें.
लोकल डेवलपमेंट के लिए एचटीटीपीएस का इस्तेमाल कब करना चाहिए
कुछ खास मामलों को छोड़कर, ज़्यादातर मामलों में लोकल डेवलपमेंट के लिए http://localhost का इस्तेमाल करना ठीक होता है. इस पोस्ट में बताया गया है कि आपको अपनी लोकल डेवलपमेंट साइट को एचटीटीपीएस के साथ कब चलाना चाहिए. यह भी देखें: लोकल डेवलपमेंट के लिए
लोकल डेवलपमेंट के लिए एचटीटीपीएस का इस्तेमाल करना
ज़्यादातर समय, http://localhost डेवलपमेंट के लिए एचटीटीपीएस की तरह काम करता है. हालांकि, कुछ खास मामलों में, आपको अपनी डेवलपमेंट साइट को एचटीटीपीएस की तरह सेट अप करना होगा. जैसे, कस्टम होस्टनेम या सभी ब्राउज़र पर सुरक्षित कुकी का इस्तेमाल करना. इससे
सुझाव, शिकायत या राय: लंबे समय तक पेजों पर रहने वाले पेजों के लिए, लेआउट शिफ़्ट की बेहतर मेट्रिक उपलब्ध कराना
कुल लेआउट शिफ़्ट से जुड़ी मेट्रिक को बेहतर बनाने के हमारे प्लान के बारे में जानें और हमें सुझाव, शिकायत या राय दें.
साइडनेव कॉम्पोनेंट बनाना
साइड नेविगेशन के लिए रिस्पॉन्सिव स्लाइड बनाने के तरीके के बारे में बुनियादी खास जानकारी
कोडलैब: साइडनेव कॉम्पोनेंट बनाना
बाईं ओर मौजूद नेविगेशन लेआउट कॉम्पोनेंट के लिए, रिस्पॉन्सिव स्लाइड बनाने का तरीका जानें.
सीएसएस में फ़ोकस करना
टेस्ट की सीरीज़ से गुज़रने के दौरान, सेंटरिंग की 5 तकनीकों को अपनाएं, ताकि आप यह देख सकें कि किस मॉडल में बदलाव करने के लिए सबसे जल्दी तैयार किया जा सकता है.
कोडलैब (कोड बनाना सीखना): सीएसएस में सेंटर देना
सीएसएस की मदद से, ऑडियंस को सेंटर करने की पांच अलग-अलग तकनीकों के बारे में जानें.
कैश मेमोरी में सेव करें ❤️
पहली बार लोड करने की परफ़ॉर्मेंस बहुत ज़रूरी है, लेकिन यह सभी चीज़ों के लिए ज़रूरी नहीं है. जो उपयोगकर्ता आपकी साइट को दूसरी बार लोड करते हैं वे अपने कॉन्टेंट को ऐक्सेस करने के लिए, अपनी कैश मेमोरी का इस्तेमाल करते हैं. इसलिए, यह पक्का करना ज़रूरी है कि यह भी पक्का किया जा सके कि वह भी अच्छी तरह काम करे और उसकी स्पीड भी ठीक रहे.
क्रॉस-ब्राउज़र पेंट वर्कलेट और Houdini.how
Houdini Paint API' क्रॉस-ब्राउज़र को लागू करने का तरीका जानें. साथ ही, Houdini.how के साथ हौडीनी वर्कलेट की दुनिया के बारे में जानें.
एसएमएस से ओटीपी फ़ॉर्म इस्तेमाल करने के सबसे सही तरीके
उपयोगकर्ता से एसएमएस के ज़रिए डिलीवर किया गया ओटीपी (वन-टाइम पासवर्ड) देने के लिए कहना, उपयोगकर्ता के फ़ोन नंबर की पुष्टि करने का एक आम तरीका है. इस पोस्ट में, बेहतरीन उपयोगकर्ता अनुभव वाला एसएमएस ओटीपी फ़ॉर्म बनाने के सबसे सही तरीके बताए गए हैं.
पते वाले फ़ॉर्म के लिए सबसे सही तरीकों के लिए कोडलैब
पते के फ़ॉर्म बनाने के सबसे सही तरीके जानें.
पेमेंट और पते का फ़ॉर्म इस्तेमाल करने के सबसे सही तरीके
पता और पेमेंट फ़ॉर्म ज़्यादा से ज़्यादा जल्दी और आसानी से भरने में उपयोगकर्ताओं की मदद करके, ज़्यादा से ज़्यादा कन्वर्ज़न पाएं.
AutoWebPerf की मदद से ऑटोमेशन ऑडिट करना
एक नया मॉड्यूलर टूल, जो कई सोर्स से परफ़ॉर्मेंस डेटा को अपने-आप इकट्ठा करने की सुविधा देता है.
पेमेंट फ़ॉर्म के लिए सबसे सही तरीकों के लिए कोडलैब
पैसे चुकाने के तरीकों को इस्तेमाल करने के सबसे सही तरीकों के बारे में जानें.
साइन-अप फ़ॉर्म के लिए सबसे सही तरीकों के लिए कोडलैब
एक आसान साइन-अप फ़ॉर्म बनाने के लिए क्रॉस-प्लैटफ़ॉर्म ब्राउज़र सुविधाओं का इस्तेमाल करें. यह फ़ॉर्म सुरक्षित, ऐक्सेस करने लायक, और इस्तेमाल में आसान होता है.
साइन-अप फ़ॉर्म के सबसे सही तरीके
कम से कम गड़बड़ी होने पर, अपने उपयोगकर्ताओं को साइन अप करने, लॉग इन करने, और उनके खाते की जानकारी मैनेज करने में मदद करें.
इंपेरेटिव कैशिंग गाइड
परफ़ॉर्मेंस, कैश मेमोरी में सेव करने, और ऑफ़लाइन होने से जुड़े टास्क करने के लिए, विंडो और सर्विस वर्कर से कैसे संपर्क करें.
कर्मचारियों की खास जानकारी
वेब वर्कर और सर्विस वर्कर आपकी वेबसाइट की परफ़ॉर्मेंस को कैसे बेहतर बना सकते हैं. साथ ही, वेब वर्कर और सर्विस वर्कर का इस्तेमाल कब किया जाना चाहिए.
सर्विस वर्कर के साथ दोतरफ़ा बातचीत
पेज और सर्विस वर्कर के बीच, दो-तरफ़ा कम्यूनिकेशन चैनल बनाने का तरीका.
सर्विस वर्कर वाले पेजों पर अपडेट ब्रॉडकास्ट करें
सर्विस वर्कर, किसी खास इवेंट के बारे में जानकारी देने के लिए पेज पर कैसे संपर्क कर सकते हैं.
गेम खेलने का बेहतर अनुभव पाने के लिए, माउस से रफ़्तार बढ़ाने की सुविधा बंद करें
वेब ऐप्लिकेशन, अब पॉइंटर इवेंट कैप्चर करते समय, माउस से तेज़ी लाने की सुविधा को बंद कर सकते हैं.
स्टोरीज़ वाला कॉम्पोनेंट बनाना
वेब पर Instagram Stories जैसा अनुभव देने के लिए बुनियादी जानकारी.
कोडलैब: स्टोरीज़ से जुड़ा कॉम्पोनेंट बनाना
वेब पर Instagram Stories जैसा अनुभव देने का तरीका जानें.
स्कीमफ़ुल सेम-साइट
"same-site" की परिभाषा में, यूआरएल स्कीम को शामिल किया जा रहा है. इसलिए, किसी साइट के एचटीटीपी और एचटीटीपीएस वर्शन के बीच के लिंक, अब क्रॉस-साइट अनुरोधों के तौर पर गिने जाएंगे. जहां भी हो सके, होने वाली समस्याओं से बचने के लिए, डिफ़ॉल्ट रूप से एचटीटीपीएस पर अपग्रेड करें. इसके अलावा, SameSite एट्रिब्यूट की वैल्यू के बारे में जानने के लिए, आगे पढ़ें.
कॉन्टेंट मैनेजमेंट सिस्टम के लिए, ब्राउज़र-लेवल पर लेज़ी लोडिंग
इस पोस्ट में, कॉन्टेंट मैनेजमेंट सिस्टम में लोडिंग एट्रिब्यूट इस्तेमाल करने का तरीका बताया गया है.
कोडलैब (कोड बनाना सीखना): पुश नोटिफ़िकेशन क्लाइंट बनाना
सिलसिलेवार इंटरैक्टिव ट्यूटोरियल में, क्लाइंट बनाने का तरीका बताया गया है. इससे, आपको ऐसा क्लाइंट बनाने का तरीका पता चलता है जो उपयोगकर्ता को पुश नोटिफ़िकेशन की सदस्यता देता है, पुश मैसेज को सूचनाएं के तौर पर दिखाता है, और उपयोगकर्ता की पुश नोटिफ़िकेशन की सदस्यता छोड़ता है.
कोडलैब (कोड बनाना सीखना): पुश नोटिफ़िकेशन सर्वर बनाना
सिलसिलेवार इंटरैक्टिव ट्यूटोरियल में ऐसा सर्वर बनाने का तरीका बताया गया है जो पुश नोटिफ़िकेशन सदस्यताओं को मैनेज करता हो और किसी पुश सेवा को वेब पुश प्रोटोकॉल के अनुरोध भेजता हो.
पुश नोटिफ़िकेशन की खास जानकारी
पुश नोटिफ़िकेशन क्या हैं, इनका इस्तेमाल क्यों किया जा सकता है, और ये कैसे काम करते हैं, इसकी खास जानकारी.
ऑफ़लाइन इस्तेमाल को मापा जा रहा है
अपनी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका, ताकि आप यह जान सकें कि आपकी साइट को बेहतर ऑफ़लाइन अनुभव क्यों चाहिए.
अच्छी परफ़ॉर्मेंस वाले सीएसएस ऐनिमेशन के उदाहरण
यह दिखाना कि अच्छी परफ़ॉर्मेंस तकनीक से कैसे जटिल और खूबसूरत ऐनिमेशन बनाए जा सकते हैं.
साइन किए हुए एक्सचेंज (एसएक्सजी)
एसएक्सजी एक ऐसी डिलीवरी का तरीका है जिसकी मदद से, किसी संसाधन के ऑरिजिन की पुष्टि की जा सकती है. इसके लिए, यह जानकारी इस्तेमाल नहीं की जाती कि उसे कैसे डिलीवर किया गया था.
सीएसएस min(), max(), और clamp()
कम से कम, ज़्यादा से ज़्यादा, और क्लैंप, सीएसएस की बेहतरीन सुविधाएं देते हैं. इनकी मदद से, बहुत कम कोड के साथ ज़्यादा रिस्पॉन्सिव स्टाइल चालू की जा सकती है. इस पोस्ट में एलिमेंट के साइज़ को कंट्रोल करने, सही स्पेस बनाए रखने, और अच्छी तरह से काम करने वाले सीएसएस मैथ फ़ंक्शन का इस्तेमाल करके फ़्लूइड टाइपोग्राफ़ी लागू करने के बारे में जानकारी दी गई है.
फ़्लो-रिलेटिव शॉर्टहैंड की मदद से, लॉजिकल लेआउट को बेहतर बनाना
Chromium के लिए नई लॉजिकल प्रॉपर्टी शॉर्टहैंड और नई इनसेट प्रॉपर्टी.
सर्विस वर्कर में रेंज के अनुरोधों को मैनेज करना
पक्का करें कि आपके सर्विस वर्कर को पता है कि आंशिक जवाब का अनुरोध किए जाने पर क्या करना है.
बेहतर परफ़ॉर्मेंस वाले सीएसएस ऐनिमेशन बनाने का तरीका
अपने सीएसएस ऐनिमेशन की परफ़ॉर्मेंस को बेहतर बनाने के लिए, ज़्यादा से ज़्यादा बदलाव और ओपैसिटी वाली सीएसएस प्रॉपर्टी का इस्तेमाल करें. साथ ही, लेआउट या पेंटिंग को ट्रिगर करने वाली किसी भी चीज़ से बचें.
कुछ ऐनिमेशन धीमे क्यों होते हैं?
अच्छी तरह से ऐनिमेशन करना, शानदार वेब अनुभव के लिए बहुत ज़रूरी है. इस पोस्ट में बताया गया है कि कुछ खास तरह के ऐनिमेशन, दूसरे ऐनिमेशन से बेहतर क्यों परफ़ॉर्म करते हैं.
कैमरा पैन, टिल्ट, और ज़ूम को कंट्रोल करें
कैमरों को पैन करने, झुकाने, और ज़ूम करने की सुविधाओं को अब वेब पर कंट्रोल किया जा सकता है.
तीसरे पक्ष के ऑरिजिन ट्रायल क्या हैं?
ऑरिजिन ट्रायल, किसी नई या एक्सपेरिमेंटल वेब प्लैटफ़ॉर्म सुविधा को टेस्ट करने का तरीका है. तीसरे पक्ष के ऑरिजिन ट्रायल की मदद से, एम्बेड किया गया कॉन्टेंट देने वाली कंपनियों के लिए, कई साइटों पर नई सुविधा को आज़माना संभव हो जाता है. ऑरिजिन ट्रायल, नई
अलग विंडो मेमोरी लीक
अलग विंडो, एक सामान्य तरह की मेमोरी लीक होती है, जिसे ढूंढना और ठीक करना खास तौर पर मुश्किल होता है.
ऑफ़लाइन फ़ॉलबैक पेज बनाना
अपने ऐप्लिकेशन को आसानी से ऑफ़लाइन इस्तेमाल करने का तरीका जानें.
CSS'की क्लिप-पाथ प्रॉपर्टी की मदद से दिलचस्प इमेज आकार बनाएं
सीएसएस में क्लिपिंग का इस्तेमाल करके, हम अपने डिज़ाइन में बॉक्स की तरह दिखने वाले प्रॉडक्ट को छोड़कर बाकी सभी काम कर सकते हैं. अलग-अलग तरह के बुनियादी आकार या SVG का इस्तेमाल करके, क्लिप पाथ बनाया जा सकता है. इसके बाद, एलिमेंट के उन हिस्सों को हटा दें जिन्हें आपको नहीं दिखाना है.
सीएसएस की मास्क-इमेज प्रॉपर्टी वाली इमेज पर इफ़ेक्ट लागू करें
सीएसएस मास्किंग आपको मास्क लेयर के तौर पर किसी इमेज का इस्तेमाल करने का विकल्प देती है. इसका मतलब है कि इमेज एडिटर के बिना, दिलचस्प इफ़ेक्ट बनाने के लिए, मास्क के तौर पर किसी इमेज, SVG या ग्रेडिएंट का इस्तेमाल किया जा सकता है.
सीएसएस ::मार्कर के साथ कस्टम बुलेट
`` या `` एलिमेंट में रंग, साइज़ या संख्या या बुलेट को पसंद के मुताबिक बनाने के लिए सीएसएस का इस्तेमाल करें.
पासवर्ड बदलने के लिए एक लोकप्रिय यूआरएल जोड़कर, लोगों को आसानी से पासवर्ड बदलने में मदद करें
अनुरोधों को /.well-known/change-password पर जाकर पासवर्ड बदलने के यूआरएल पर रीडायरेक्ट किया जा सकता है. ऐसा करके, उपयोगकर्ताओं को पहले से ज़्यादा आसानी से अपने पासवर्ड अपडेट करने की सुविधा दी जा सकती है.
सर्विस वर्कर के साथ, पेमेंट की वैकल्पिक जानकारी मैनेज करना
वेब-आधारित पेमेंट ऐप्लिकेशन के रजिस्टर हो जाने के बाद, यह व्यापारियों से पेमेंट के अनुरोध स्वीकार करने के लिए तैयार होता है. इस लेख में आपको रनटाइम के दौरान सर्विस वर्कर से किए गए पेमेंट के लेन-देन को पूरा करने का तरीका बताया गया है.
सर्विस वर्कर के साथ पेमेंट से जुड़े लेन-देन को पूरा करना
वेब-आधारित पेमेंट ऐप्लिकेशन के रजिस्टर हो जाने के बाद, यह व्यापारियों से पेमेंट के अनुरोध स्वीकार करने के लिए तैयार होता है. इस लेख में आपको रनटाइम के दौरान सर्विस वर्कर से किए गए पेमेंट के लेन-देन को पूरा करने का तरीका बताया गया है.
ARIA: ज़हर या ऐंटीडोट?
स्क्रीन रीडर से झूठ बोलने से सुलभता तब कितनी ठीक हो जाती है, जब वह उसमें नमक खोता नहीं है!
Emscripten का इस्तेमाल करके, WebAssembly में मेमोरी लीक होने की जानकारी को डीबग करना
दूसरी भाषाओं में लिखी गई लाइब्रेरी को वेब पर सुरक्षित और मुहावरे से लाने के लिए, WebAssembly का इस्तेमाल करने का तरीका जानें.
content-vision: वह नई सीएसएस प्रॉपर्टी, जो आपकी रेंडरिंग की परफ़ॉर्मेंस को बेहतर बनाती है
सीएसएस content-visibility प्रॉपर्टी, वेब कॉन्टेंट को रेंडर करने की परफ़ॉर्मेंस को बेहतर बनाती है. ऐसा, ऑफ़-स्क्रीन कॉन्टेंट को रेंडर न करके किया जाता है. इस लेख में, ऑटो कीवर्ड का इस्तेमाल करके, शुरुआती लोड समय को कम करने के लिए, इस नई सीएसएस प्रॉपर्टी का इस्तेमाल करने का तरीका बताया गया है. आपको कॉन्टेंट दिखने की सुविधा के लिए, सीएसएस कंटेनमेंट स्पेसिफ़िकेशन और अन्य वैल्यू के बारे में भी जानकारी मिलेगी. इनसे आपको यह कंट्रोल करने में मदद मिलेगी कि आपका कॉन्टेंट ब्राउज़र में कैसे रेंडर हो.
क्लिपबोर्ड का ऐक्सेस अनब्लॉक किया जा रहा है
Async Clipboard API, अनुमतियों के हिसाब से कॉपी करने और चिपकाने को आसान बनाता है.
रेफ़रर और रेफ़रल देने वाली नीति के सबसे सही तरीके
`strict-origin-when-cross-origin` की रेफ़रल नीति सेट करें. यह डेटा के क्रॉस-ऑरिजिन लीक होने के जोखिम को कम करते हुए, रेफ़रल देने वाले की ज़्यादातर अहमियत बनाए रखती है.
Android पर वेब
जानें कि Android ऐप्लिकेशन में वेब कॉन्टेंट को रेंडर करने के लिए, अलग-अलग कॉम्पोनेंट का इस्तेमाल कैसे किया जा सकता है.
Google में PWA बनाना, भाग 1
PWA बनाते समय, बुलेटिन टीम ने सर्विस वर्कर के बारे में क्या सीखा.
Lighthouse CI की मदद से, परफ़ॉर्मेंस पर नज़र रखना
Lighthouse सीआई सेटअप करने और इसे डेवलपर वर्कफ़्लो में इंटिग्रेट करने का तरीका जानें.
Google खातों पर पासकी का उपयोगकर्ता अनुभव डिज़ाइन करना
Google खातों में बेहतर सुरक्षा और बेहतर उपयोगकर्ता अनुभव देना.
@property: सीएसएस वैरिएबल को सुपरपावर देना
सीधे अपनी सीएसएस फ़ाइल में सिमैंटिक टाइपिंग, फ़ॉलबैक वैल्यू वगैरह वाली सीएसएस कस्टम प्रॉपर्टी लागू करने का तरीका जानें.
वेब आधारित पेमेंट ऐप्लिकेशन रजिस्टर करना
किसी ग्राहक के ब्राउज़र पर, वेब पर आधारित पेमेंट ऐप्लिकेशन को रजिस्टर करने का तरीका जानें. आपको इन्हें डीबग करने का तरीका भी पता चलेगा.
सर्विस वर्कर कैशिंग और एचटीटीपी कैशिंग
सर्विस वर्कर कैश मेमोरी और एचटीटीपी कैश लेयर में, एक जैसे या अलग-अलग एक्सपायर होने के लॉजिक का इस्तेमाल करने के फ़ायदे और नुकसान.
साइट स्पीड और कारोबार मेट्रिक से जुड़ा हुआ
A/B टेस्टिंग का इस्तेमाल करके, अपने कारोबार की मेट्रिक पर साइट स्पीड के असर का आकलन करें.
वेब पर आधारित पेमेंट ऐप्लिकेशन की खास जानकारी
वेब पेमेंट के साथ काम करने के लिए अपने वेब आधारित पेमेंट ऐप्लिकेशन में बदलाव करने का तरीका जानें और ग्राहकों को बेहतर उपयोगकर्ता अनुभव दें.
Android पेमेंट ऐप्लिकेशन से शिपिंग और संपर्क जानकारी देना
अपने Android पेमेंट ऐप्लिकेशन में बदलाव करने का तरीका जानें, ताकि जब भी व्यापारी/कंपनी से पेमेंट अनुरोध एपीआई के ज़रिए अनुरोध किया गया हो, तो उपयोगकर्ता के चुने गए शिपिंग पते के साथ-साथ संपर्क जानकारी भी दी जा सके.
नेविगेशन के अनुरोधों को मैनेज करना
नेविगेशन अनुरोध, एचटीएमएल के लिए किए गए अनुरोध होते हैं. ये तब किए जाते हैं, जब नेविगेशन बार में एक नया यूआरएल डाला जाता है या किसी पेज पर दिए गए लिंक पर क्लिक किया जाता है. यह वह जगह है जहां सर्विस वर्कर, परफ़ॉर्मेंस पर सबसे ज़्यादा असर डालते हैं. नेटवर्क का इंतज़ार किए बिना सर्विस वर्कर का इस्तेमाल करके, यह पक्का किया जा सकता है कि नेविगेशन आसानी से तेज़ और आसान है.
फ़ील्ड में परफ़ॉर्मेंस का पता लगाने के लिए, Chrome UX रिपोर्ट का इस्तेमाल करना
Chrome UX रिपोर्ट (जिसे आम तौर पर CrUX कहा जाता है), लाखों वेबसाइटों पर उपयोगकर्ता अनुभव से जुड़े असली डेटा का सार्वजनिक डेटासेट है. लैब डेटा के उलट, CrUX डेटा असल में फ़ील्ड में ऑप्ट-इन किए हुए उपयोगकर्ताओं से आता है.
devicePixelContentBox के साथ Pixel-परफ़ेक्ट रेंडरिंग
Chrome 84 के बाद से, Resize ऐब्ज़र्वर एक नए बॉक्स मेज़रमेंट के साथ काम करता है, जिसे device-pixel-content-box कहा जाता है, जो एलिमेंट के डाइमेंशन को फ़िज़िकल पिक्सल में मापता है. पिक्सल-परफ़ेक्ट ग्राफ़िक बनाने के लिए यह ज़रूरी है, खास तौर पर हाई-डेंसिटी स्क्रीन के मामले में.
सीएसएस की एक लाइन में 10 नए लेआउट
इस पोस्ट में सीएसएस की कुछ बेहतरीन लाइनों को हाइलाइट किया गया है. इनसे, आपको बेहतर और आधुनिक लेआउट बनाने में मदद मिलेगी.
web.dev लाइव रैप-अप
तीन दिन के ऑनलाइन कम्यूनिटी इवेंट के दौरान, मुख्य खबरों और अपडेट के बारे में खास जानकारी और आने वाले इलाकों में होने वाले इवेंट के बारे में रिमाइंडर.
साइन-इन फ़ॉर्म बनाने के लिए, क्रॉस-प्लैटफ़ॉर्म ब्राउज़र सुविधाओं का इस्तेमाल करें
एक आसान साइन-इन फ़ॉर्म बनाने के लिए क्रॉस-प्लैटफ़ॉर्म ब्राउज़र सुविधाओं का इस्तेमाल करें जो सुरक्षित, ऐक्सेस करने लायक, और इस्तेमाल में आसान हो.
अपने प्रोग्रेसिव वेब ऐप्लिकेशन को धीरे-धीरे और बेहतर बनाएं
अपने प्रोग्रेसिव वेब ऐप्लिकेशन को धीरे-धीरे बेहतर बनाने का तरीका जानें, ताकि यह सभी मॉडर्न ब्राउज़र के लिए काम का बना रहे. हालांकि, यह उन ब्राउज़र के लिए बेहतर अनुभव देता है जिनमें फ़ाइल सिस्टम ऐक्सेस, सिस्टम क्लिपबोर्ड ऐक्सेस, संपर्क वापस पाने, बार-बार बैकग्राउंड सिंक, स्क्रीन वेक लॉक, वेब शेयर करने की सुविधाएं वगैरह जैसी नई वेब सुविधाएं काम करती हैं.
साइन-इन फ़ॉर्म के सबसे सही तरीके
साइन-इन फ़ॉर्म बनाने के लिए, क्रॉस-प्लैटफ़ॉर्म ब्राउज़र सुविधाओं का इस्तेमाल करें. ये फ़ॉर्म सुरक्षित, ऐक्सेस करने लायक, और इस्तेमाल में आसान होते हैं.
Google Search में JavaScript की समस्याओं को डीबग करने के लिए, वेब डेवलपर टूल
अलग-अलग पेजों या पूरी साइट पर, एसईओ से जुड़ी समस्याओं को डीबग करने का तरीका.
Workbox की मदद से खोज के बेहतर अनुभव देना
बैकग्राउंड सिंक और Push API का इस्तेमाल करके, वर्कबॉक्स की मदद से खोज के बेहतर नतीजे पाने का तरीका क्या है.
किसी वेब पेज पर मीडिया जोड़ना
और टैग का इस्तेमाल करके, किसी वेब पेज में मीडिया फ़ाइल एम्बेड करें.
बोल्डली से वहां लिंक करें जहां पहले किसी ने लिंक नहीं किया है: टेक्स्ट फ़्रैगमेंट
टेक्स्ट फ़्रैगमेंट की मदद से, यूआरएल फ़्रैगमेंट में टेक्स्ट स्निपेट तय किया जा सकता है. ऐसे टेक्स्ट फ़्रैगमेंट वाले किसी यूआरएल पर नेविगेट करते समय, ब्राउज़र इस पर ज़ोर दे सकता है और/या उसे उपयोगकर्ता के ध्यान में ला सकता है.
अपने PWA को एक ऐप्लिकेशन की तरह बनाएं
वेब टेक्नोलॉजी की मदद से, प्लैटफ़ॉर्म के हिसाब से खास ऐप्लिकेशन पैटर्न लागू करने के तरीके के बारे में जानें और जानें कि अपने प्रोग्रेसिव वेब ऐप्लिकेशन को एक "असल" ऐप्लिकेशन जैसा बनाने का तरीका क्या है.
ब्राउज़र की गड़बड़ी को ठीक करने का तरीका
वेब प्लैटफ़ॉर्म को बेहतर बनाने के लिए, ज़रूरी है कि आप ब्राउज़र वेंडर को किसी खास डिवाइस या प्लैटफ़ॉर्म पर, उनके ब्राउज़र में आने वाली समस्याओं के बारे में बताएं!
आरएआईएल मॉडल की मदद से परफ़ॉर्मेंस मापना
आरएआईएल मॉडल, डिज़ाइनर और डेवलपर को यह सुविधा देता है कि वे परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के ऐसे काम को भरोसेमंद तरीके से टारगेट कर सकें जिसका उपयोगकर्ता अनुभव पर सबसे ज़्यादा असर पड़ता है. जानें कि आरएआईएल मॉडल किन लक्ष्यों और दिशा-निर्देशों को तय करता है और उन्हें पाने के लिए किन टूल का इस्तेमाल किया जा सकता है.
Quicklink की मदद से प्रतिक्रिया दें में नेविगेशन की रफ़्तार बढ़ाना
Quicklink एक लाइब्रेरी है, जो इस्तेमाल में न होने के दौरान इन-व्यूपोर्ट लिंक को प्रीफ़ेच करके, बाद में पेज लोड को तेज़ी से लोड करती है.
फ़ेच मेटाडेटा की मदद से, अपने संसाधनों को वेब हमलों से बचाएं
फ़ेच मेटाडेटा, वेब प्लैटफ़ॉर्म की नई सुविधा है. इसे सर्वर को क्रॉस-ऑरिजिन हमलों से सुरक्षित रखने के लिए डिज़ाइन किया गया है.
कॉन्टेंट को फिर से क्रम में लगाना
सीएसएस का इस्तेमाल करके लेआउट बनाते समय, आपको इस बात का ध्यान रखना होगा कि कीबोर्ड से नेविगेशन करने वाले उपयोगकर्ताओं को डिसकनेक्ट न हो.
Chromium 84 में Web Animations API के सुधार
आपके वेब ऐनिमेशन को रैप करना बहुत आसान होने वाला है.
वेब पेमेंट की सुविधा का इस्तेमाल करके, पेमेंट करने वाले ऐप्लिकेशन को सशक्त बनाना
वेब पेमेंट का मकसद, वेब पर बिना किसी रुकावट के पेमेंट की सुविधा देना है. जानें कि यह कैसे काम करता है और इसके फ़ायदे क्या हैं. साथ ही, अपने पेमेंट ऐप्लिकेशन को वेब पेमेंट के साथ जोड़ने के लिए तैयार हो जाएं.
Android पेमेंट ऐप्लिकेशन डेवलपर गाइड
वेब Payments के साथ काम करने के लिए अपने Android पेमेंट ऐप्लिकेशन में बदलाव करने और ग्राहकों को बेहतर उपयोगकर्ता अनुभव देने का तरीका जानें.
किसी लेन-देन की अवधि
जानें कि व्यापारी/कंपनी/कारोबारी, पेमेंट ऐप्लिकेशन को कैसे इंटिग्रेट करते हैं, पेमेंट रिक्वेस्ट एपीआई के साथ पेमेंट का लेन-देन कैसे काम करता है, और वेब पेमेंट में क्या-क्या किया जा सकता है.
Chromium 83 में, macOS सिस्टम-यूआई वाले फ़ॉन्ट के लिए, अलग-अलग फ़ॉन्ट के ज़्यादा विकल्प
macOS पर, Chromium 80 का फ़ॉन्ट वेट रिग्रेशन के लिए, सिस्टम-यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल किया गया था. इसके टूटने की वजह और रिज़ॉल्यूशन के बाद आने वाले नए सुपर पावर के लिए, Chromium 83 में इंतज़ार करना पड़ सकता है.
ऐप शॉर्टकट की मदद से तेज़ी से काम करें
ऐप्लिकेशन शॉर्टकट कुछ सामान्य कार्रवाइयों का तुरंत ऐक्सेस देते हैं, जिनकी उपयोगकर्ताओं को अक्सर ज़रूरत होती है.
प्रोग्रेसिव वेब ऐप्लिकेशन, कारोबार को सफल कैसे बना सकते हैं
अपने PWA के लिए, कारोबार का एक मज़बूत केस बनाएं. जानें कि आपको कब निवेश करना चाहिए और इसकी सफलता का आकलन कैसे किया जा सकता है.
Appकैश मेमोरी को हटाने की तैयारी करना
Chrome और अन्य ब्राउज़र के विवरण, Appकैश को हटाने की योजना है.
स्थायी जगह
स्थायी स्टोरेज से, अहम डेटा को हटाए जाने से बचाया जा सकता है. साथ ही, डेटा खोने की संभावना को कम किया जा सकता है.
इंस्टॉल करने की रणनीति तय करने का तरीका
इंस्टॉलेशन की दर बढ़ाने के साथ-साथ, प्लैटफ़ॉर्म के मुकाबले होने वाली प्रतिस्पर्धा और किसी भी तरह के नुकसान से बचने के लिए, इंस्टॉलेशन के अलग-अलग ऑफ़र को एक साथ मिलाने के सबसे सही तरीके.
CommonJS आपके बंडल को कैसे बड़ा कर रहा है
CommonJS मॉड्यूल बहुत डायनेमिक होते हैं, जो JavaScript ऑप्टिमाइज़र को और बंडल को उन पर उन्नत ऑप्टिमाइज़ेशन करने से रोकता है.
Chrome में वेब ऑडियो ऐप्लिकेशन की प्रोफ़ाइल बनाना
Chrome DevTools में `about://tracing` और **WebAudio** एक्सटेंशन का इस्तेमाल करके, Chrome में वेब ऑडियो ऐप्लिकेशन की परफ़ॉर्मेंस को प्रोफ़ाइल कैसे बनाया जा सकता है.
बेहतरीन सुविधाओं के लिए, आपको "क्रॉस-ऑरिजिन आइसोलेटेड" की ज़रूरत क्यों है
कुछ वेब एपीआई से, स्पेक्टर जैसे साइड-चैनल हमलों का खतरा बढ़ जाता है. उस जोखिम को कम करने के लिए, ब्राउज़र एक ऑप्ट-इन-आधारित आइसोलेटेड एनवायरमेंट को ऑफ़र करते हैं जिसे क्रॉस-ऑरिजिन आइसोलेटेड कहा जाता है. जानें कि बेहतर सटीक तरीके से काम करने वाली बेहतरीन सुविधाओं, जैसे कि `SharedarrayBuffer`, `performance.measureUserAgentspecificMemory()`, और हाई रिज़ॉल्यूशन टाइमर का इस्तेमाल करने के लिए, क्रॉस-ऑरिजिन आइसोलेशन की ज़रूरत क्यों होती है.
बारीकी से अलग-अलग सेक्शन में बांटने के साथ-साथ Next.js और Gatsby पेज लोड होने की प्रोसेस को बेहतर बनाया गया
जानें कि कैसे Next.js और Gatsby, दोनों ने अपने बिल्ड आउटपुट में सुधार किया है, ताकि डुप्लीकेट कोड को कम किया जा सके और पेज लोड करने की परफ़ॉर्मेंस को बेहतर बनाया जा सके
"सेम-साइट" और "समान-ऑरिजिन"
"same-site" और "same-origin" का अक्सर उद्धरण दिया जाता है, लेकिन अक्सर शब्दों का गलत मतलब निकाला जाता है. इस पेज पर बताया गया है कि कन्वर्ज़न ऐक्शन क्या हैं और उनमें अंतर कैसे है.
COOP और COEP का इस्तेमाल करके, अपनी वेबसाइट को "क्रॉस-ऑरिजिन आइसोलेटेड" बनाना
कुछ वेब एपीआई से, स्पेक्टर जैसे साइड-चैनल हमलों का खतरा बढ़ जाता है. उस जोखिम को कम करने के लिए, ब्राउज़र एक ऑप्ट-इन-आधारित आइसोलेटेड एनवायरमेंट को ऑफ़र करते हैं जिसे क्रॉस-ऑरिजिन आइसोलेटेड कहा जाता है. इस तरह के एनवायरमेंट को सेट अप करने के लिए, COOP और COEP का इस्तेमाल करें. साथ ही, `SharedarrayBuffer`, `performance.measureUserAgentspecificMemory()` जैसी बेहतरीन सुविधाएं या सटीक तरीके से हाई रिज़ॉल्यूशन टाइमर चालू करें.
measureUserAgentspecificMemory() की मदद से, अपने वेब पेज के कुल मेमोरी इस्तेमाल पर नज़र रखें
रिग्रेशन का पता लगाने के लिए, प्रोडक्शन में अपने वेब पेज की मेमोरी में हुए इस्तेमाल को मापने का तरीका जानें.
web.dev इंजीनियरिंग ब्लॉग #1: हम साइट कैसे बनाते हैं और वेब कॉम्पोनेंट का इस्तेमाल कैसे करते हैं
web.dev की इंजीनियरिंग टीम की इस पहली पोस्ट में, जानें कि हम साइट को कैसे बनाते हैं—इसमें Eleventy और Web components का इस्तेमाल भी शामिल है.
कलर-स्कीम सीएसएस प्रॉपर्टी और उससे जुड़े मेटा टैग के साथ बेहतर गहरे रंग वाले मोड की डिफ़ॉल्ट स्टाइल
कलर-स्कीम वाली सीएसएस प्रॉपर्टी और उससे जुड़े मेटा टैग की मदद से, डेवलपर अपने पेजों को उपयोगकर्ता एजेंट स्टाइलशीट के थीम के हिसाब से डिफ़ॉल्ट रूप से सेट करने के लिए चुन सकते हैं. उदाहरण के लिए, फ़ॉर्म कंट्रोल, स्क्रोल बार, और सीएसएस सिस्टम के रंग. साथ ही, यह सुविधा ब्राउज़र को खुद कोई ट्रांसफ़ॉर्मेशन लागू करने से रोकती है.
पक्का करें कि COVID-19 के दौरान आपकी वेबसाइट सभी के लिए उपलब्ध और इस्तेमाल करने लायक है
यह कैसे पक्का करें कि आपकी वेबसाइट का मुख्य फ़ंक्शन हमेशा उपलब्ध हो, ऐक्सेस किया जा सके, सुरक्षित हो, इस्तेमाल किया जा सके, खोजा जा सके, और तेज़ी से ऐक्सेस किया जा सके.
कलर और कंट्रास्ट की सुलभता
अपने रंग और कंट्रास्ट के इस्तेमाल को बेहतर बनाकर, अपने पेजों को ज़्यादा सुलभ बनाने का तरीका जानें.
सर्वर से ज़्यादा लोड होने की समस्या को ठीक करना
सर्वर की बॉटलनेक का पता लगाने, बॉटलनेक को तुरंत ठीक करने, सर्वर की परफ़ॉर्मेंस सुधारने, और रिग्रेशन को रोकने का तरीका.
ऐक्सेस किया जा सकने वाला रिस्पॉन्सिव डिज़ाइन
हम जानते हैं कि बेहतरीन मल्टी-डिवाइस अनुभव देने के लिए रिस्पॉन्सिव डिज़ाइन बनाना एक अच्छा आइडिया है, लेकिन रिस्पॉन्सिव डिज़ाइन सुलभता के लिए भी फ़ायदेमंद है.
वे टैप टारगेट जिन्हें ऐक्सेस किया जा सकता है
यह महत्वपूर्ण है कि मोबाइल या टचस्क्रीन डिवाइस पर इंटरैक्टिव एलिमेंट के आस-पास काफ़ी जगह हो. इससे सभी लोगों को मदद मिलेगी, खास तौर पर उन लोगों को जिन्हें शरीर का कोई अंग पूरी तरह से या ठीक से काम नहीं करता.
'भरोसेमंद टाइप' की मदद से, DOM-आधारित क्रॉस-साइट स्क्रिप्टिंग के जोखिमों को रोकें
पेश है भरोसेमंद टाइप: आधुनिक वेब ऐप्लिकेशन में DOM-आधारित क्रॉस-साइट स्क्रिप्टिंग को रोकने के लिए एक ब्राउज़र API.
अपने Android ऐप्लिकेशन में PWA का इस्तेमाल करना
Android ऐप्लिकेशन में प्रोग्रेसिव वेब ऐप्लिकेशन खोलने का तरीका.
वैकल्पिक फ़ॉन्ट पहले से लोड करके, लेआउट शिफ़्ट होने और न दिखने वाले टेक्स्ट (एफ़ओआईटी) के फ़्लैश से बचें
रेंडरिंग साइकल को ऑप्टिमाइज़ करके, Chrome 83 वैकल्पिक फ़ॉन्ट पहले से लोड करते समय लेआउट शिफ़्टिंग को हटा देता है. फ़ॉन्ट-डिसप्ले के साथ जोड़ना: कस्टम फ़ॉन्ट को जैंक-फ़्री रेंडरिंग की गारंटी देने का सबसे असरदार तरीका, वैकल्पिक है.
nginx का इस्तेमाल करके, साइन किए हुए एचटीटीपी एक्सचेंज (एसएक्सजी) को उपलब्ध कराने का तरीका
nginx का इस्तेमाल करके एसएक्सजी फ़ाइलें पाने और उन्हें उपलब्ध कराने का तरीका. साथ ही, सबरिसॉर्स को प्रीफ़ेच करने से जुड़ी चुनौतियां.
nginx का इस्तेमाल करके, साइन किए हुए एचटीटीपी एक्सचेंज (एसएक्सजी) सेट अप करने का तरीका
एसएक्सजी एक्सटेंशन की मदद से TLS सर्टिफ़िकेट जनरेट करने का तरीका जानें. साथ ही, एसएक्सजी फ़ाइलें जनरेट करने के लिए टूल इंस्टॉल करने और एसएक्सजी फ़ाइलें दिखाने के लिए nginx को कॉन्फ़िगर करने का तरीका जानें.
मीडिया क्वेरी के साथ सीएसएस की बैकग्राउंड इमेज को ऑप्टिमाइज़ करना
मीडिया क्वेरी का इस्तेमाल करके, ज़रूरत के हिसाब से बड़ी इमेज भेजें. इस तकनीक को रिस्पॉन्सिव इमेज कहा जाता है.
क्रॉस-फ़ंक्शनल तरीके से वेबसाइट की स्पीड को ठीक करना
अन्य डिपार्टमेंट आपकी वेबसाइट की स्पीड ऑप्टिमाइज़ेशन के प्रोजेक्ट को ज़्यादा कामयाब बनाने में कैसे मदद कर सकते हैं.
लेआउट में बदलाव करने के बाद स्नैप करना स्क्रोल करें
Chrome 81 में, पेज के लेआउट में बदलाव होने पर भी स्क्रोल करने वाले लोगों की संख्या तेज़ी से बढ़ती रहती है. दूसरे शब्दों में, ज़बरदस्ती फिर से लेने के लिए, अब आपको इवेंट लिसनर को जोड़ने की ज़रूरत नहीं है.
वेब पैकेजर का इस्तेमाल करके साइन किए गए एक्सचेंज को सेट अप करने का तरीका
वेब पैकेजर का इस्तेमाल करके, साइन किए गए एक्सचेंज (एसएक्सजी) सेवा देने का तरीका जानें.
ऐप्लिकेशन के अंदर इंस्टॉल करने का अनुभव देने का तरीका
अपने उपयोगकर्ताओं को ऐप्लिकेशन इंस्टॉल करने का मनमुताबिक, आसान, और इन-ऐप्लिकेशन अनुभव देने के लिए, before installprompt इवेंट का इस्तेमाल करें.
वर्चुअल ऑब्जेक्ट को असल दुनिया के व्यू में दिखाना
WebXR हिट टेस्ट एपीआई, वेब की ऑगमेंटेड रिएलिटी (एआर) को बेहतर बनाने का एक बेहतर विकल्प है. इसकी मदद से, आप वर्चुअल ऑब्जेक्ट को असल दुनिया के सामने रख सकते हैं.
ऑगमेंटेड रिएलिटी (एआर): आपको शायद इसके बारे में पहले से पता है
अगर आपने पहले ही WebXR Device API का इस्तेमाल किया है, तो आपको यह जानकर खुशी होगी कि इसके बारे में बहुत कम जानकारी है. WebXR सेशन में जाना, काफ़ी हद तक एक जैसा ही होता है. फ़्रेम लूप चलाने का तरीका काफ़ी हद तक एक जैसा ही होता है. ये अंतर उन कॉन्फ़िगरेशन में होते हैं जो ऑगमेंटेड रिएलिटी (एआर) के लिए, कॉन्टेंट को सही तरीके से दिखाने में मदद करते हैं.
वर्चुअल रिएलिटी अब वेब पर उपलब्ध, दूसरा पार्ट
Chrome 79 में वर्चुअल रिएलिटी की सुविधा वेब पर उपलब्ध हुई. WebXR Device API के आधार पर, यह लॉन्च ऑगमेंटेड और वर्चुअल रिएलिटी, दोनों के लिए आधार तैयार किया गया है. यह सीरीज़ का दूसरा लेख है. इसमें फ़्रेम लूप के बारे में जानकारी दी गई है. यह XR सेशन का हिस्सा है, जिसमें दर्शक को इमेज दिखाई जाती हैं. जल्द ही, अन्य ब्राउज़र WebXR Device API के साथ काम करेंगे. इनमें Firefox रिएलिटी, Oculus Browser, Edge, और Magic Leap's Heio ब्राउज़र वगैरह शामिल हैं.
वेब फ़्रेमवर्क नेटवर्क को बेहतर बनाना
इस बारे में जानें कि Chrome, JavaScript नेटवर्क को बेहतर बनाने के लिए कई ओपन-सोर्स टूल में किस तरह निवेश कर रहा है
प्रोग्रेसिव वेब ऐप्लिकेशन क्या हैं?
प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) और तीन अहम जानकारी के बारे में जानकारी, जो उन्हें दूसरे वेब ऐप्लिकेशन से अलग करती हैं.
मास्केबल आइकॉन के साथ, PWA में अडैप्टिव आइकॉन की सुविधा
मास्केबल आइकॉन का फ़ॉर्मैट, आपको ज़्यादा कंट्रोल देता है. साथ ही, यह आपके प्रोग्रेसिव वेब ऐप्लिकेशन को अडैप्टिव आइकॉन इस्तेमाल करने देता है. मास्केबल आइकॉन, सभी Android डिवाइसों पर अच्छा लग सकता है.
Workbox की मदद से, PWA को पहले से मौजूद शेयर किए जाने वाले यूज़र इंटरफ़ेस (यूआई) के साथ इंटिग्रेट करना
वर्कबॉक्स में रूट कैसे रजिस्टर करें, ताकि आपका प्रोग्रेसिव वेब ऐप्लिकेशन, प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन के साथ-साथ सिस्टम लेवल पर शेयर किए जाने वाले यूज़र इंटरफ़ेस (यूआई) में दिखे.
सिंक्रोनस XMLHttpRequest() में, पेज खारिज होने की स्थिति को बेहतर बनाना
आम तौर पर, जब कोई उपयोगकर्ता पेज या ऐप्लिकेशन को बंद करता है, तब उस पर आंकड़े या अन्य डेटा, सबमिट नहीं किया गया होता है. साइटें, पेज या ऐप्लिकेशन को तब तक खुला रखने के लिए XMLHttpRequest() के सिंक्रोनस कॉल का इस्तेमाल करती हैं, जब तक कि उसका डेटा सर्वर पर नहीं भेजा जाता. इससे उपयोगकर्ता अनुभव को नुकसान पहुंचता है और डेटा सेव करने के बेहतर तरीकों पर ध्यान नहीं दिया जाता. इस समस्या को ठीक करने के लिए, Chrome 80 ने हाल ही में एक खास बदलाव किया है.
मॉड्यूल वर्कर से वेब पर थ्रेड की सुविधा
मॉड्यूल वर्कर, महंगे कोड को बैकग्राउंड थ्रेड में ले जाकर मुख्य थ्रेड को अनब्लॉक करना आसान बनाते हैं. साथ ही, इससे स्टैंडर्ड JavaScript मॉड्यूल की परफ़ॉर्मेंस और बेहतर सुविधाएं मिलती हैं.
अडैप्टिव लोडिंग: धीमे डिवाइसों पर वेब की परफ़ॉर्मेंस को बेहतर बनाना
अडैप्टिव लोडिंग के पैटर्न और उसे लागू करने के तरीके के बारे में जानें. साथ ही, यह भी जानें कि Facebook, Tinder, eBay, और अन्य कंपनियां प्रोडक्शन में अडैप्टिव लोडिंग का इस्तेमाल कैसे करती हैं.
स्पीड टूल के विकास: Chrome डेवलपर सम्मेलन 2019 की हाइलाइट
स्पीड टूल से जुड़ी नई सुविधाओं के बारे में पढ़ें. इनमें नई परफ़ॉर्मेंस मेट्रिक, PageSpeed Insights और Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) के अपडेट, और वेब नेटवर्क के Web Almanac विश्लेषण से मिली अहम जानकारी शामिल है.
ब्राउज़र के मुख्य थ्रेड से JavaScript चलाने के लिए वेब वर्कर का इस्तेमाल करें
इस ब्राउज़र का मुख्य थ्रेड बहुत ज़्यादा काम कर रहा है. मुख्य थ्रेड से कोड को शिफ़्ट करने के लिए वेब वर्कर का इस्तेमाल करके, आप अपने ऐप्लिकेशन की विश्वसनीयता और उपयोगकर्ता अनुभव को काफ़ी बेहतर बना सकते हैं.
इमेज ऑप्टिमाइज़ेशन सर्वे 2019 की गर्मियों के आधार पर मिले सुझाव
इमेज ऑप्टिमाइज़ेशन की अलग-अलग तकनीकों के बारे में सर्वे के जवाब देने वालों की टिप्पणियां.
पुश नोटिफ़िकेशन सर्वर बनाना
इस कोडलैब में, पुश नोटिफ़िकेशन सर्वर बनाने का तरीका जानें.
Next.js में रूट प्रीफ़ेच करना
Next.js, रूट को पहले से लोड करके नेविगेशन की स्पीड कैसे बढ़ाता है और इसे पसंद के मुताबिक कैसे बनाया जा सकता है. इस पोस्ट में, आपको Next.js में रूटिंग के काम करने के तरीके के बारे में पता चलेगा. साथ ही, यह भी पता चलेगा कि इसे स्पीड के लिए कैसे
Next.js के साथ डिफ़ॉल्ट रूप से परफ़ॉर्मेंस
Next.js आपके React ऐप्लिकेशन में कई ऑप्टिमाइज़ेशन करता है, ताकि आपको Next.js, React के हिसाब से बनाया गया फ़्रेमवर्क है. इसमें परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के कई तरीके पहले से मौजूद होते हैं. फ़्रेमवर्क का मुख्य मकसद, डिफ़ॉल्ट रूप से इन सुविधाओं को
Next.js में डाइनैमिक इंपोर्ट के साथ कोड बांटना
कोड को अलग-अलग हिस्सों में बांटने और स्मार्ट लोडिंग की रणनीतियों की मदद से, अपने Next.js ऐप्लिकेशन को तेज़ करने का तरीका. इस पोस्ट में, कोड को अलग-अलग हिस्सों में बांटने के अलग-अलग तरीकों के बारे में बताया गया है. साथ ही, Next.js ऐप्लिकेशन की स्पीड
Web Share API की मदद से, ओएस शेयरिंग यूज़र इंटरफ़ेस (यूआई) के साथ इंटिग्रेट करें
Web Share API की मदद से, वेब ऐप्लिकेशन भी सिस्टम से मिलने वाली उन ही सुविधाओं का इस्तेमाल कर सकते हैं जो प्लैटफ़ॉर्म के हिसाब से शेयर करने वाले ऐप्लिकेशन में शेयर की जा सकती हैं. Web Share API की मदद से, डिवाइस पर इंस्टॉल किए गए अन्य ऐप्लिकेशन के साथ लिंक, टेक्स्ट, और फ़ाइलें, प्लैटफ़ॉर्म के लिए इस्तेमाल होने वाले ऐप्लिकेशन की तरह ही शेयर की जा सकती हैं.
एएमपी किस तरह आपके Next.js ऐप्लिकेशन में स्पीड की गारंटी दे सकता है
अपने Next.js ऐप्लिकेशन में एएमपी के साथ काम करने के फ़ायदों और फ़ायदों के बारे में जानें एएमपी एक वेब कॉम्पोनेंट फ़्रेमवर्क है जो पेज को तेज़ी से लोड करने की गारंटी देता है. Next.js में एएमपी की सुविधा पहले से मौजूद होती है. इस गाइड में सबसे पहले कम
वर्चुअल रिएलिटी अब वेब पर उपलब्ध
Chrome 79 में वर्चुअल रिएलिटी की सुविधा वेब पर उपलब्ध हुई. WebXR Devicer API पर आधारित, यह लॉन्च, ऑगमेंटेड और वर्चुअल रिएलिटी, दोनों के लिए आधार तैयार किया गया है. यह लेख इस सीरीज़ का पहला लेख है. इसमें बुनियादी सिद्धांतों के बारे में जानकारी दी गई है और XR सेशन में शामिल होने का तरीका बताया गया है. जल्द ही, अन्य ब्राउज़र WebXR Device API के साथ काम करेंगे. इनमें Firefox रिएलिटी, Oculus Browser, Edge, और Magic Leap's Heio ब्राउज़र वगैरह शामिल हैं.
कुकी को समझना
जानें कि कुकी कैसे काम करती हैं. साथ ही, पहले और तीसरे पक्ष की कुकी क्या होती हैं.
SameSite कुकी रेसिपी
साइटें अब अलग-अलग साइटों पर इस्तेमाल के लिए, अपनी कुकी को साफ़ तौर पर मार्क कर सकती हैं. अपनी कुकी को मार्कअप करने का तरीका जानें, ताकि यह पक्का किया जा सके कि इस बदलाव के लागू होने के बाद, आपके पहले और तीसरे पक्ष की कुकी काम करती रहेंगी.
तेज़ विज्ञापन दिखाना ज़रूरी है
तेज़ी से चलने वाले विज्ञापनों की अहमियत समझें और विज्ञापन स्पीड का इस्तेमाल करने का तरीका जानें.
उपयोगकर्ताओं को अपने साथ जोड़ने और उन्हें फिर से जोड़ने के लिए पुश नोटिफ़िकेशन का इस्तेमाल करें
टारगेट किए गए और समय पर अपडेट पाने के लिए, पुश नोटिफ़िकेशन का इस्तेमाल करें.
Notifications API का इस्तेमाल शुरू करना
इस कोडलैब में, उपयोगकर्ता की अनुमति के लिए अनुरोध करने और सूचनाएं भेजने का तरीका जानें.
सूचनाओं को मैनेज करने के लिए सर्विस वर्कर का इस्तेमाल करना
इस कोडलैब में, सर्विस वर्कर से सूचनाएं मैनेज करने का तरीका जानें.
लेआउट के अस्थिरता को ठीक करना
लेआउट के अस्थिरता से जुड़ी समस्याओं की पहचान करने और उन्हें ठीक करने के लिए, WebPageTest का इस्तेमाल करने के बारे में कदम-दर-कदम निर्देश.
वेब ऐप्लिकेशन को तेज़ी से लोड करने की तकनीक, यहां तक कि फ़ीचर फ़ोन पर भी लोड होती है
फ़ीचर फ़ोन फिर से उभर रहे हैं और ये तेज़ी से लोकप्रिय हो रहे हैं. खास तौर पर, उभरते हुए उन बाज़ारों में जहां 2G का इस्तेमाल सबसे ज़्यादा होता है. 2G पर काम करने वाले फ़ीचर फ़ोन में तेज़ी से लोड होने वाले, मोबाइल Minesweeper का क्लोन PROXX बनाने से मिली जानकारी यहां दी गई है.
थंबर की मदद से इमेज ऑप्टिमाइज़ करें
थंबर की मदद से इमेज को ऑप्टिमाइज़ करने से जुड़े निर्देश. थंबर एक ओपन सोर्स इमेज सीडीएन है और इसका इस्तेमाल इमेज का साइज़ बदलने, कंप्रेस करने, और उन्हें बदलने के लिए मुफ़्त में किया जा सकता है.
Houdini के नए एपीआई की मदद से बेहतर कस्टम प्रॉपर्टी
हालांकि, सीएसएस वैरिएबल काम के हैं, लेकिन इनके साथ काम करना मुश्किल है. ऐसा इसलिए, क्योंकि वे कोई भी वैल्यू ले सकते हैं और उन्हें ओवरराइड किया जा सकता है. साथ ही, उनके साथ ट्रांज़िशन का इस्तेमाल नहीं किया जा सकता. इन समस्याओं को ठीक किया गया है: सीएसएस प्रॉपर्टी और वैल्यू एपीआई लेवल 1.
प्रीफ़ेच करने के दो तरीके: <link> टैग और एचटीटीपी हेडर
संसाधनों को प्रीफ़ेच करके, आने वाले समय में नेविगेट करने की रफ़्तार बढ़ाने का तरीका जानें.
आने वाले समय में नेविगेशन की रफ़्तार बढ़ाने के लिए, संसाधनों को प्रीफ़ेच करें
rel=फ़ेच से जुड़े संसाधन के संकेत और इसे इस्तेमाल करने के तरीके के बारे में जानें.
मिले-जुले कॉन्टेंट की समस्या ठीक करना
अपनी वेबसाइट पर, मिले-जुले कॉन्टेंट की गड़बड़ियों को ठीक करने का तरीका जानें. इससे उपयोगकर्ताओं को सुरक्षित रखने में मदद मिलेगी. साथ ही, यह भी पक्का किया जा सकेगा कि आपका पूरा कॉन्टेंट लोड हो.
मिला-जुला कॉन्टेंट क्या होता है?
मिला-जुला कॉन्टेंट तब होता है, जब शुरुआती एचटीएमएल को किसी सुरक्षित एचटीटीपीएस कनेक्शन पर लोड किया जाता है, लेकिन अन्य रिसॉर्स असुरक्षित एचटीटीपी कनेक्शन पर लोड होते हैं.
वेब के लिए बेसिक वीडियो की सुविधा के साथ इमेज से आगे बढ़ना
रिसर्च से पता चलता है कि वेब वीडियो से दर्शकों की दिलचस्पी और बिक्री में बढ़ोतरी होती है. भले ही आपने अभी तक अपनी साइटों पर वीडियो नहीं जोड़ा है, फिर भी इसे जोड़ने में थोड़ा समय लगेगा.
अपने प्रोग्रेसिव वेब ऐप्लिकेशन में Apple टच आइकॉन जोड़ना
इस सुविधा की मदद से, यह जानकारी दी जा सकती है कि iOS की होम स्क्रीन पर कौनसा आइकॉन दिखेगा.
रेडी प्लेयर वेब
आज के समय में, गेम के डेवलपमेंट के लिए वेब प्लैटफ़ॉर्म बहुत विकसित हो गया है. आधुनिक वेब गेम बनाने के लिए, गेम डिज़ाइन करने और उससे कमाई करने के सबसे सही तरीके अपनाना ज़रूरी है. इस पोस्ट में इस लक्ष्य को पूरा करने का तरीका बताया गया है.
एक से ज़्यादा मूल साइटों में प्रोग्रेसिव वेब ऐप्लिकेशन
एक से ज़्यादा ऑरिजिन वाले आर्किटेक्चर, PWA बनाते समय कई चुनौतियों का सामना करते हैं. एक से ज़्यादा ऑरिजिन के अच्छे और खराब इस्तेमाल के बारे में जानें. साथ ही, कई ऑरिजिन वाली साइटों में PWA बनाने के कुछ तरीके जानें.
वेब फ़ॉन्ट का साइज़ कम करें
यह पोस्ट बताती है कि अपनी साइट पर इस्तेमाल किए जाने वाले WebFonts के साइज़ को कैसे कम किया जा सकता है, ताकि अच्छी टाइपोग्राफ़ी का मतलब यह न हो कि आपकी साइट धीमी है.
WebFont की लोडिंग और रेंडरिंग को ऑप्टिमाइज़ करें
इस पोस्ट में बताया गया है कि पेज लोड होने पर WebFonts उपलब्ध न होने पर, लेआउट शिफ़्ट और खाली पेजों को रोकने के लिए WebFonts कैसे लोड किए जाते हैं.
Angular सीएलआई की मदद से, प्रोग्रेसिव वेब ऐप्लिकेशन बनाएं
इंस्टॉल किए जा सकने वाले प्रोग्रेसिव Angular ऐप्लिकेशन बनाने का तरीका जानें.
इमेज को ऑप्टिमाइज़ करने के लिए, इमेज सीडीएन का इस्तेमाल करें
अपनी साइट की इमेज को ऑप्टिमाइज़ करने और उपयोगकर्ताओं के लिए इसकी डेटा लागत कम करने के लिए, इमेज सीडीएन का इस्तेमाल करें.
तीसरे पक्ष की धीमी JavaScript की पहचान करना
धीमे तीसरे पक्ष के रिसॉर्स की पहचान करने के लिए, Lighthouse और Chrome DevTools इस्तेमाल करने का तरीका जानें.
तीसरे पक्ष की JavaScript को बेहतर तरीके से लोड करना
तीसरे पक्ष की स्क्रिप्ट का इस्तेमाल करने में होने वाली आम दिक्कतों से बचने के लिए, लोड होने में लगने वाले समय और उपयोगकर्ता अनुभव को बेहतर बनाने का तरीका जानें.
तीसरे पक्ष की JavaScript की परफ़ॉर्मेंस
इस पोस्ट में तीसरे पक्ष की JavaScript के सामान्य टाइप और उनकी परफ़ॉर्मेंस से जुड़ी समस्याओं के बारे में बताया गया है. इसमें तीसरे पक्ष की स्क्रिप्ट को ऑप्टिमाइज़ करने के बारे में सामान्य दिशा-निर्देश भी दिए गए हैं.
फ़ॉर्म के और बेहतर कंट्रोल
वेब प्लैटफ़ॉर्म की नई सुविधाएं, कस्टम एलिमेंट बनाना आसान बनाती हैं, जो बिल्ट-इन फ़ॉर्म कंट्रोल की तरह काम करते हैं.
तीसरे पक्ष का JavaScript ऑप्टिमाइज़ करना
Lighthouse की मदद से, तीसरे पक्ष के धीमे संसाधनों को ऑप्टिमाइज़ करने की तकनीकों के बारे में जानें.
पेज स्पीड का अनुमान लगाने के लिए, पहले से इंटरनेट कनेक्शन का इस्तेमाल करें
rel=preconnect और rel=dns-prefetch संसाधन संकेतों और उन्हें इस्तेमाल करने के तरीके के बारे में जानें.
बैकड्रॉप फ़िल्टर का इस्तेमाल करके, ओएस-स्टाइल वाले बैकग्राउंड बनाएं
सीएसएस बैकग्राउंड-फ़िल्टर प्रॉपर्टी का इस्तेमाल करके, वेब पर यूज़र इंटरफ़ेस (यूआई) एलिमेंट में बैकग्राउंड को धुंधला करने और पारदर्शिता जैसे बैकग्राउंड इफ़ेक्ट जोड़ने का तरीका जानें.
फिर से पुष्टि करने के दौरान पुरानी जानकारी को अपडेट करना
पुरानी-पुष्टि की प्रक्रिया के दौरान, डेवलपर को तुरंत कैश मेमोरी में सेव किए गए कॉन्टेंट को तुरंत लोड करने और अपडेट किए जाने के बीच संतुलन बनाने में मदद मिलती है. इससे यह पक्का किया जाता है कि कैश मेमोरी में सेव किए गए कॉन्टेंट के अपडेट, आने वाले समय में इस्तेमाल किए जाएं.
Angular सीडीके की मदद से, बड़ी सूचियों को वर्चुअल तरीके से इस्तेमाल करें
ऐंगुलर कॉम्पोनेंट डेवलपर किट की मदद से वर्चुअल स्क्रोलिंग लागू करके, बड़ी सूचियों को ज़्यादा रिस्पॉन्सिव बनाने का तरीका जानें.
Angular के बदलाव का पता लगाने की सुविधा ऑप्टिमाइज़ करें
अपने Angular ऐप्लिकेशन को और बेहतर बनाने के लिए, बदलाव की पहचान करने की सुविधा को ऑप्टिमाइज़ करने का तरीका जानें.
Angular में रूट को पहले से लोड करने की रणनीतियां
ज़्यादा तेज़ ऐप्लिकेशन के लिए, Angular' पेजों को पहले से लोड करने की रणनीतियों का इस्तेमाल करने का तरीका जानें.
अनुमानित प्रीफ़ेचिंग की मदद से तेज़ वेब नेविगेशन
कोड को अलग-अलग हिस्सों में बांटने की सुविधा की मदद से, ऐप्लिकेशन के काम करने की रफ़्तार बढ़ाई जा सकती है. हालांकि, ऐसा करने की वजह से, अगले नेविगेशन की रफ़्तार धीमी हो सकती है. अनुमानित प्रीफ़ेच करना, डेटा ऐनलिटिक्स का इस्तेमाल करने का एक असरदार तरीका है. इसकी मदद से, उपयोगकर्ता उस चीज़ को स्मार्ट तरीके से प्रीफ़ेच कर सकते हैं जिसे वे आने वाले समय में इस्तेमाल कर सकते हैं. इससे, नेटवर्क के इस्तेमाल को ऑप्टिमाइज़ किया जा सकता है.
नेटवर्क की क्वालिटी के आधार पर, वीडियो को इमेज के हिसाब से बनाएं
नेटवर्क की क्वालिटी के हिसाब से अपने कॉन्टेंट में बदलाव करने के लिए, Network Information API इस्तेमाल करने का तरीका जानें.
कोडलाइज़र की मदद से, अपने Angular ऐप्लिकेशन की सुलभता ऑडिट करें
कोडलाइज़र का इस्तेमाल करके, अपने Angular ऐप्लिकेशन को ऐक्सेस करने का तरीका जानें.
Angular CLI के साथ परफ़ॉर्मेंस बजट
सीधे Angular CLI में परफ़ॉर्मेंस बजट को इस्तेमाल करने का तरीका जानें!
Angular सर्विस वर्कर के साथ प्रीकैशिंग
अपने ऐप्लिकेशन में स्टैटिक ऐसेट को पहले से कैश मेमोरी में सेव करने के लिए, Angular सर्विस वर्कर का इस्तेमाल करने का तरीका जानें.
prefers-color-scheme: नमस्ते, मेरे पुराने दोस्त
कई डिवाइसों पर, अब वाइड गहरे रंग वाला मोड या गहरे रंग वाली थीम का इस्तेमाल किया जा सकता है. इस पोस्ट में बताया गया है कि वेब पेजों पर गहरे रंग वाले मोड का इस्तेमाल कैसे किया जा सकता है. इसमें डार्क मोड-टॉगल नाम के एक कस्टम एलिमेंट के बारे में भी बताया गया है. इसकी मदद से वेब डेवलपर, लोगों को किसी खास वेब पेज पर अपने ऑपरेटिंग सिस्टम के लेवल की प्राथमिकता बदलने का तरीका बता सकते हैं.
ऐंगुलर में रूट-लेवल कोड का बंटवारा
रूट-लेवल पर कोड को बांटने की सुविधा का इस्तेमाल करके, अपने शुरुआती ऐप्लिकेशन बंडल को छोटा करने का तरीका जानें.
वेब की परफ़ॉर्मेंस के लिए सबसे सही सलाह
इमेज का सही साइज़ अपने-आप चुनने के लिए, srcset का इस्तेमाल करें.
शुरू करें: Angular ऐप्लिकेशन को ऑप्टिमाइज़ करें
अपने Angular ऐप्लिकेशन को ज़्यादा तेज़, ज़्यादा भरोसेमंद, खोजे जाने लायक, इंस्टॉल करने लायक, और ऐक्सेस करने लायक बनाने का तरीका जानें!
वेब कॉम्पोनेंट: वेब को बेहतर बनाने में मदद करने वाली सीक्रेट एलिमेंट
इस पोस्ट में, साल 2019 में वेब कॉम्पोनेंट की स्थिति के बारे में एक बातचीत दी गई है. यह जानकारी Polymer Project के केविन शाफ़ और Salesforce के कैरिडी पैटीनो ने दी है.
परफ़ॉर्मेंस बजट के लिए लाइटहाउस का इस्तेमाल करें
लाइटहाउस अब परफ़ॉर्मेंस बजट के साथ काम करता है. LightWallet नाम की इस सुविधा को पांच मिनट से भी कम समय में सेट अप किया जा सकता है. इससे पेज रिसॉर्स के साइज़ और संख्या के बारे में फ़ीडवैक मिलता है.
Web Payments API से जुड़े अपडेट
Chrome 53 में पेमेंट अनुरोध एपीआई और Chrome 68 में पेमेंट हैंडलर एपीआई लॉन्च किए जाने के बाद से, इनसे जुड़ी खास जानकारी में कुछ बदलाव किए गए हैं. इस पोस्ट में, उन अपडेट की खास जानकारी दी गई है. साथ ही, एपीआई में हुए बदलावों को लागू करना जारी रहेगा.
स्पीड की वैल्यू
मार्केटिंग कैंपेन जैसे बाहरी फ़ैक्टर को शामिल न करते हुए, साइट में सुधारों की वजह से जनरेट हुई आय दिखाएं.
डेस्कटॉप पर, प्रोग्रेसिव वेब ऐप्लिकेशन के लिए पता बार इंस्टॉल करना
Chrome के पता बार (खोज वाली पट्टी) में दिए गए नए 'इंस्टॉल करें' बटन से, प्रोग्रेसिव वेब ऐप्लिकेशन आसानी से इंस्टॉल किए जा सकते हैं.
परफ़ॉर्मेंस से कन्वर्ज़न में कैसे सुधार हो सकता है?
ई-कॉमर्स फ़नल के अलग-अलग हिस्सों पर, वेबसाइट की परफ़ॉर्मेंस के असर के बारे में जानें
सर्विस वर्कर की मानसिकता
सर्विस वर्कर के साथ काम करना कई वेब डेवलपर के लिए नया और अनजाना काम है. यह पोस्ट आपके दिमाग को व्यवस्थित करने के लिए कुछ सुझाव देती है.
PWA इंस्टॉलेशन के प्रमोशन के पैटर्न
प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने और सबसे सही तरीकों का प्रमोशन करने के बारे में जानकारी.
मैं उपयोगकर्ताओं को कैसे सूचना दूं कि मेरा PWA इंस्टॉल किया जा सकता है?
प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने और सबसे सही तरीकों का प्रमोशन करने के बारे में जानकारी.
तेज़ी से लोड होने में लगने वाले समय और अन्य चीज़ों के लिए इमेज नीतियां
इमेज में ज़्यादा विज़ुअल स्पेस लगता है और ये किसी वेबसाइट पर डाउनलोड की गई ज़्यादातर बाइट का हिस्सा होती हैं. तय साइज़ से बड़ी इमेज की पहचान करने के लिए, सुविधा से जुड़ी नई नीतियों का इस्तेमाल करें.
क्रिटिकल के साथ क्रिटिकल सीएसएस एक्सट्रैक्ट करें और इनलाइन करें
जानें कि क्रिटिकल सीएसएस को एक्सट्रैक्ट करने और इनलाइन करने के लिए, ज़रूरी टूल का इस्तेमाल कैसे करें. साथ ही, रेंडर होने में लगने वाले समय को बेहतर बनाने का तरीका जानें.
ज़रूरी सीएसएस एक्सट्रैक्ट करें
ज़रूरी सीएसएस तकनीक की मदद से, रेंडर होने में लगने वाले समय को बेहतर बनाने का तरीका और अपने प्रोजेक्ट के लिए सबसे अच्छा टूल चुनने का तरीका जानें.
क्या लंबे JavaScript टास्क की वजह से इंटरैक्टिव में लगने वाला समय बढ़ रहा है?
महंगे और काम में रुकावट डालने वाले उपयोगकर्ता इंटरैक्शन का पता लगाने का तरीका जानें.
बड़े पैमाने पर स्पीड: वेब की परफ़ॉर्मेंस में नया क्या है?
Google I/O 2019 के लिए, हमने वेब परफ़ॉर्मेंस की तीन नई पहल शुरू की हैं. हमें उम्मीद है कि इनसे सभी को बेहतर उपयोगकर्ता अनुभव मिलेगा.
पेश है PROXX
PROXX एक माइनस्वीपर-जैसा गेम है, जिसे PWA के तौर पर बनाया गया है. यह कई तरह के डिवाइसों पर काम करता है और डिवाइस के विज़ुअल को धीरे-धीरे बेहतर बनाता है.
SameSite कुकी के बारे में बताया गया
अपनी कुकी को पहले पक्ष और तीसरे पक्ष के इस्तेमाल के लिए, SameSite एट्रिब्यूट का इस्तेमाल करके मार्क करना जानें. CSRF हमलों से सुरक्षा को बेहतर बनाने के लिए, SameSite' के Lax और Strict मानों का इस्तेमाल करके, अपनी साइट की सुरक्षा को बेहतर बनाया जा सकता है. 'कोई नहीं' एट्रिब्यूट का नया एट्रिब्यूट तय करने से, आपको क्रॉस-साइट इस्तेमाल के लिए अपनी कुकी को साफ़ तौर पर मार्क करने में मदद मिलती है.
वेब पर्सेप्शन टूलकिट की मदद से विज़ुअल तरीके से खोज करना
क्या यह बढ़िया नहीं होगा कि उपयोगकर्ता अपने कैमरे का इस्तेमाल करके आपकी साइट खोजें?
नेटवर्क की क्वालिटी के आधार पर, अडैप्टिव सर्विंग
Network Information API का इस्तेमाल करके, उपयोगकर्ताओं को उनके कनेक्शन की क्वालिटी के हिसाब से विज्ञापन दिखाए जा सकते हैं.
पोर्टल के साथ बेहतर तरीके से काम करें: वेब पर आसानी से नेविगेट करें
नए सुझाए गए पोर्टल एपीआई आपके फ़्रंट-एंड को आसान बनाने में मदद करते हैं. साथ ही, आपकी ज़रूरत के हिसाब से ट्रांज़िशन के साथ आसान नेविगेशन की सुविधा देते हैं. इस लेख में, अपनी पूरी साइट पर उपयोगकर्ता अनुभव को बेहतर बनाने के लिए पोर्टल का इस्तेमाल करके इस्तेमाल करने का अनुभव पाएं.
Brotli की मदद से, नेटवर्क पेलोड को छोटा और कंप्रेस करें
इस कोडलैब में, जानें कि Brotli का कंप्रेस करने से, कंप्रेस करने का अनुपात और आपके ऐप्लिकेशन का कुल साइज़ कैसे कम हो सकता है.
I/O 2019 में web.dev
Google I/O 2019 के लिए, web.dev टीम के लोगों ने कई अपडेट भेजे हैं. इनमें, रीफ़्रेश किया गया डिज़ाइन, ज़्यादा लाइटहाउस दस्तावेज़, और एक बिलकुल नया ब्लॉग शामिल है.
स्पीड को मापने का तरीका क्या है?
उपयोगकर्ताओं के डिवाइस, नेटवर्क कनेक्शन, और दूसरी चीज़ों में अंतर की वजह से, असल दुनिया में गेम की परफ़ॉर्मेंस में बहुत ज़्यादा अंतर होता है. इस पोस्ट में, हमने ऐसे टूल के बारे में बताया है जो पेज की परफ़ॉर्मेंस का आकलन करने के लिए, लैब या फ़ील्ड डेटा इकट्ठा करने में आपकी मदद कर सकते हैं.
तेज़ कैसे बने रहें?
जो ब्रैंड विज्ञापन की स्पीड को ऑप्टिमाइज़ करते हैं, वे अक्सर तेज़ी से रिग्रेशन करते हैं. इस पोस्ट में, हमने यह तय करने का तरीका बताया है कि तेज़ी से काम करने के लिए आपको बेहतर अनुभव कैसे मिलेगा.
स्पीड क्या है?
गति मायने रखती है, लेकिन असल में इसका क्या मतलब है? साइट तेज़ी से लोड होने का क्या मतलब है?
react-axe और eslint-plugin-jsx-a11y की मदद से सुलभता ऑडिट करना
exact-ऐक्सिस ऐसी लाइब्रेरी है जो React ऐप्लिकेशन को ऑडिट करती है और Chrome DevTools कंसोल में सुलभता से जुड़ी किसी भी समस्या को लॉग करती है. eslint-plugin-jsx-a11y एक ESLint प्लग इन है, जो सीधे आपके JSX में सुलभता के कई नियमों की पहचान करके उन्हें लागू करता है. इन दोनों का एक साथ इस्तेमाल करने से आपको अपने ऐप्लिकेशन में सुलभता से जुड़ी किसी भी समस्या का पता लगाने और उसे ठीक करने के लिए, एक बेहतर ऑडिटिंग तरीका मिल सकता है.
React.lazy और Suspense के साथ कोड बांटना
React.lazy तरीके से, डाइनैमिक इंपोर्ट का इस्तेमाल करके कॉम्पोनेंट लेवल पर, React ऐप्लिकेशन को आसानी से कोड के तौर पर स्प्लिट किया जा सकता है. अपने उपयोगकर्ताओं को कॉन्टेंट लोड होने की सही स्थिति दिखाने के लिए, सस्पेंस के साथ इसका इस्तेमाल करें.
शुरू करें: अपने React ऐप्लिकेशन को ऑप्टिमाइज़ करना
React एक ओपन सोर्स लाइब्रेरी है, जिसकी मदद से यूज़र इंटरफ़ेस (यूआई) बनाना आसान हो जाता है. इस लर्निंग पाथ में, नेटवर्क में मौजूद अलग-अलग एपीआई और टूल शामिल होंगे. आपको अपने ऐप्लिकेशन की परफ़ॉर्मेंस और उसे इस्तेमाल करने के तरीके को बेहतर बनाने के लिए, इन एपीआई और टूल का इस्तेमाल करना चाहिए.
रिएक्शन-स्नैप के साथ प्री-रेंडरिंग रूट
प्रतिक्रिया-स्नैप तीसरे पक्ष की ऐसी लाइब्रेरी है जो आपकी साइट के पेजों को स्टैटिक एचटीएमएल फ़ाइलों में पहले से रेंडर करती है. इससे आपके ऐप्लिकेशन में फ़र्स्ट पेंट के समय में सुधार हो सकता है.
Workbox की मदद से, React ऐप्लिकेशन बनाएं में प्रीकैशिंग
Workbox को डिफ़ॉल्ट कॉन्फ़िगरेशन के साथ Create React ऐप्लिकेशन में बनाया गया है, जो हर बिल्ड के साथ आपके ऐप्लिकेशन में मौजूद सभी स्टैटिक एसेट को पहले से कैश मेमोरी में सेव करता है.
Create React ऐप्लिकेशन की मदद से, वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़ना
Create React ऐप्लिकेशन में, डिफ़ॉल्ट रूप से वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल होता है. इस फ़ाइल में बदलाव करने से आपको यह बदलाव करने की अनुमति मिलेगी कि उपयोगकर्ता के डिवाइस पर इंस्टॉल होने पर आपका ऐप्लिकेशन कैसा दिखेगा.
रिएक्शन विंडो की मदद से, बड़ी सूचियों को वर्चुअल तरीके से सेट करना
response-विंडो एक ऐसी लाइब्रेरी है जिसकी मदद से, बड़ी सूचियों को बेहतर तरीके से रेंडर किया जा सकता है.
कोडलैब (कोड बनाना सीखना): कॉन्टेंट लोड होने की स्पीड बढ़ाने के लिए, अहम एसेट को पहले से लोड करना
इस कोडलैब में, संसाधनों को पहले से लोड करके और प्रीफ़ेच करके, किसी पेज की परफ़ॉर्मेंस को बेहतर बनाने का तरीका जानें.
befores-reduced-motion: कभी-कभी कम मूवमेंट ज़्यादा होता है
Pres-reduced-motion मीडिया क्वेरी से यह पता चलता है कि उपयोगकर्ता ने सिस्टम से इस्तेमाल किए जाने वाले ऐनिमेशन या मोशन को कम से कम करने का अनुरोध किया है या नहीं. यह उन उपयोगकर्ताओं के लिए है जिन्हें छोटे ऐनिमेशन की ज़रूरत होती है या जिन्हें छोटे ऐनिमेशन इस्तेमाल करने होते हैं; उदाहरण के लिए, ऐसा हो सकता है कि वेस्टिबुलर डिसऑर्डर से जूझ रहे लोग, ऐनिमेशन का कम से कम इस्तेमाल करना पसंद करें.
गै़र-ज़रूरी सीएसएस को कुछ समय के लिए रोकें
क्रिटिकल रेंडरिंग पाथ को ऑप्टिमाइज़ करने और पहली बार कॉन्टेंटफ़ुल पेंट (एफ़सीपी) को बेहतर बनाने के मकसद से, गैर-ज़रूरी सीएसएस को रोकने का तरीका जानें.
भरोसा अच्छा है और निगरानी करना बेहतर है: इंटरसेक्शन ऑब्ज़र्वर v2
इंटरसेक्शन ऑब्ज़र्वर v2, न सिर्फ़ हर चौराहे के हिसाब से चौराहों का पता लगाने की सुविधा देता है, बल्कि यह भी पता लगाने में मदद करता है कि इंटरसेक्शन के समय कोई एलिमेंट दिख रहा था या नहीं.
रिस्पॉन्सिव वेब डिज़ाइन से जुड़ी बुनियादी बातें
ऐसी साइटें बनाएं जो उस डिवाइस की ज़रूरतों और क्षमताओं को पूरा करती हों जिस पर उन्हें देखा जाता है.
बनाने लायक स्टाइलशीट
बनाने में इस्तेमाल होने वाली स्टाइलशीट, FOUC की चिंता किए बिना, दस्तावेज़ों या शैडो रूट के लिए स्टाइल बनाने और उन्हें डिस्ट्रिब्यूट करने का आसान तरीका देती हैं.
वेब पर रेंडरिंग
ऐप्लिकेशन में लॉजिक और रेंडरिंग को लागू करने के सुझाव.
Trawis CI के साथ बंडलसाइज़ का इस्तेमाल करना
कम से कम सेटअप के साथ परफ़ॉर्मेंस बजट तय करें और Travi CI के साथ बंडलसाइज़ का इस्तेमाल करके, उन्हें अपने डेवलपमेंट वर्कफ़्लो के हिस्से के तौर पर लागू करें.
अपनी बिल्ड प्रोसेस में परफ़ॉर्मेंस बजट शामिल करना
अपने परफ़ॉर्मेंस बजट पर नज़र रखने का सबसे अच्छा तरीका है, उसे ऑटोमेट करना. अपनी ज़रूरतों और मौजूदा सेटअप के हिसाब से, टूल चुनने का तरीका जानें.
Webpack की मदद से परफ़ॉर्मेंस बजट सेट करना
वेबपैक की मदद से, परफ़ॉर्मेंस बजट सेट करने और बंडल साइज़ की जांच करने का तरीका जानें.
परफ़ॉर्मेंस बजट सेट करने के लिए, Lighthouse बॉट का इस्तेमाल करना
आपने तेज़ी से विज्ञापन दिखाने के लिए कड़ी मेहनत की है. अब लाइटहाउस बॉट की मदद से Trawis CI में परफ़ॉर्मेंस टेस्टिंग को ऑटोमेट करें. इससे, आपको अपनी परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलेगी.
Emscripten और npm
इस सेटअप में WebAssembly को कैसे इंटिग्रेट किया जाता है? इस लेख में, हम C/C++ और Emscripten के उदाहरण लेकर इस पर काम करेंगे.
क्या आपका ऐप्लिकेशन इंस्टॉल किया गया है? getInstalledRelatedApps() आपको इसकी जानकारी देगा!
getInstalledRelatedApps() एपीआई एक वेब प्लैटफ़ॉर्म एपीआई है. इसकी मदद से, यह देखा जा सकता है कि उपयोगकर्ता के डिवाइस पर, आपका iOS/Android/डेस्कटॉप ऐप्लिकेशन या PWA इंस्टॉल है या नहीं.
तेज़ी से पेज लोड करने के लिए, मॉडर्न ब्राउज़र पर मॉडर्न कोड इस्तेमाल करें
इस कोडलैब में, जानें कि किसी ऐप्लिकेशन की परफ़ॉर्मेंस को कैसे बेहतर बनाया जाए. इसके लिए, यह तय करें कि कितने कोड को ट्रांसपाइल किया जा सकता है.
उपयोगकर्ताओं के हिसाब से क्लाइंट संकेतों के हिसाब से बदलाव करना
क्लाइंट हिंट, एचटीटीपी अनुरोध के हेडर का सेट होता है. इसका इस्तेमाल हम उपयोगकर्ता के डिवाइस और इंटरनेट कनेक्शन की विशेषताओं के आधार पर, पेज रिसॉर्स को डिलीवर करने के तरीके को बदलने के लिए कर सकते हैं. इस लेख में, आपको क्लाइंट के संकेतों के बारे में पूरी जानकारी मिलेगी. साथ ही, आपको यह भी पता चलेगा कि वे कैसे काम करते हैं. साथ ही, आपको यह भी पता चलेगा कि उनका इस्तेमाल करके अपनी साइट को उपयोगकर्ताओं के लिए और तेज़ कैसे बनाया जा सकता है.
स्टाइल फ़ोकस
फ़ोकस इंंडिकेटर (जिसे अक्सर "फ़ोकस रिंग" से दिखाया जाता है) वर्तमान में फ़ोकस किए गए एलिमेंट की पहचान करता है. माउस का इस्तेमाल नहीं कर पाने वाले उपयोगकर्ताओं के लिए, यह इंडिकेटर बहुत अहम होता है, क्योंकि यह उनके माउस-पॉइंटर के लिए स्टैंड-इन की तरह काम करता है.
लेबल और टेक्स्ट के विकल्प
स्क्रीन रीडर को उपयोगकर्ता के लिए बोला गया यूज़र इंटरफ़ेस (यूआई) दिखाने के लिए, काम के एलिमेंट में सही लेबल या टेक्स्ट के विकल्प होने चाहिए. लेबल या टेक्स्ट का विकल्प किसी एलिमेंट को उसका ऐक्सेस करने लायक नाम देता है. यह सुलभता ट्री में एलिमेंट के सिमेंटिक को दिखाने के लिए अहम प्रॉपर्टी में से एक है.
टाइटल और लैंडमार्क
हेडिंग और लैंडमार्क के लिए सही एलिमेंट का इस्तेमाल करके, सहायक टेक्नोलॉजी के उपयोगकर्ताओं के नेविगेशन अनुभव को काफ़ी बेहतर बनाया जा सकता है.
Tabindex की मदद से फ़ोकस कंट्रोल करना
स्टैंडर्ड एचटीएमएल एलिमेंट में कीबोर्ड की सुलभता सुविधा पहले से मौजूद होती है. कस्टम इंटरैक्टिव कॉम्पोनेंट बनाते समय, tabindex का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि कीबोर्ड को ऐक्सेस किया जा सकता है.
सीमेंटिक और स्क्रीन रीडर
क्या आपने कभी सोचा है कि स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी को कैसे पता है कि उपयोगकर्ताओं को क्या सूचना देनी है? इसका जवाब है कि ये टेक्नोलॉजी, अपने पेजों को सिमैंटिक एचटीएमएल से मार्कअप करने के लिए, डेवलपर पर निर्भर करती हैं. सिमेंटिक्स क्या हैं और स्क्रीन रीडर इनका इस्तेमाल कैसे करते हैं?
सुलभता क्या है?
ऐक्सेस की जा सकने वाली साइट वह होती है जिसका कॉन्टेंट ऐक्सेस किया जा सकता है, भले ही उसका इस्तेमाल करने वाला कोई भी व्यक्ति
कीबोर्ड को आसान बनाने के लिए सिमैंटिक एचटीएमएल इस्तेमाल करें
सही सिमैंटिक एचटीएमएल एलिमेंट का इस्तेमाल करके, कीबोर्ड ऐक्सेस से जुड़ी ज़्यादातर या सभी ज़रूरतें पूरी की जा सकती हैं. इसका मतलब है कि Tabindex के साथ काम करने में कम समय लगता है और उपयोगकर्ता ज़्यादा खुश!
कीबोर्ड ऐक्सेस करने से जुड़ी बुनियादी बातें
कई अलग-अलग उपयोगकर्ता ऐप्लिकेशन नेविगेट करने के लिए कीबोर्ड का इस्तेमाल करते हैं. इनमें कुछ समय के लिए या हमेशा के लिए मोटर इंपेयरमेंट से जुड़ी परेशानियां होती हैं. साथ ही, ये उपयोगकर्ता ज़्यादा बेहतर और ज़्यादा काम करने के लिए कीबोर्ड शॉर्टकट का इस्तेमाल करते हैं. आपके ऐप्लिकेशन के लिए एक अच्छी कीबोर्ड नेविगेशन रणनीति होने से सभी के लिए बेहतर अनुभव मिलता है.
Webpack के साथ Imagemin का इस्तेमाल करना
इस कोडलैब में, JPEG और PNG इमेज को ऑप्टिमाइज़ करने और तेज़ी से डाउनलोड करने के लिए, Webpack के साथ imagemin इस्तेमाल करने का तरीका जानें.
वर्कबॉक्स: आपका हाई-लेवल सर्विस वर्कर टूलकिट
Workbox एक हाई-लेवल सर्विस वर्कर टूलकिट है, जो सर्विस वर्कर और कैश स्टोरेज एपीआई पर आधारित है. यह वेब ऐप्लिकेशन में ऑफ़लाइन इस्तेमाल करने की सुविधा देने के लिए, प्रोडक्शन के लिए तैयार लाइब्रेरी का सेट उपलब्ध कराता है.
एक जैसी ऑरिजिन नीति & फ़ेच करने के अनुरोध
इस कोडलैब में, जानें कि संसाधनों को फ़ेच करने के दौरान, एक ही ऑरिजिन की नीति कैसे काम करती है.
सुरक्षा इतनी डरावनी नहीं होनी चाहिए!
जब दिमाग में "सुरक्षा" शब्द आता है, तो आम तौर पर इसका इस्तेमाल बुरी खबर के लिए किया जाता है. हालांकि, वेब डेवलपमेंट के लिए सुरक्षा को एक अच्छा और ज़रूरी हिस्सा माना जाना चाहिए. ठीक उसी तरह, जैसे कि "उपयोगकर्ता अनुभव" या "सुलभता".
कमांड लाइन के साथ WebP इमेज बनाना
इस कोडलैब में, WebP का इस्तेमाल करके ऑप्टिमाइज़ की गई इमेज दिखाने का तरीका जानें.
सर्विस वर्कर और कैश मेमोरी एपीआई
ब्राउज़र का एचटीटीपी कैश, सुरक्षा के लिए आपका पहला कदम है. ज़रूरी नहीं है कि यह सबसे असरदार या सुविधाजनक तरीका हो. साथ ही, कैश मेमोरी में सेव किए गए जवाबों के लाइफ़टाइम पर आपका सीमित कंट्रोल होता है. हालांकि, ऐसे कई नियम हैं जो बिना किसी ज़्यादा काम के, सही तरीके से कैश मेमोरी में जगह बनाने में आपकी मदद करते हैं. इसलिए, आपको हमेशा उनका पालन करने की कोशिश करनी चाहिए.
कोड को बांटने की सुविधा की मदद से, JavaScript के पेलोड कम करें
इस कोडलैब में, कोड को अलग-अलग करके बांटना, किसी आसान ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने का तरीका जानें.
कला निर्देशन
इस कोडलैब में, डिवाइस के डिसप्ले साइज़ के आधार पर पूरी तरह से अलग-अलग इमेज लोड करने का तरीका जानें.
तेज़ी से पेज लोड करने के लिए, मॉडर्न ब्राउज़र पर मॉडर्न कोड इस्तेमाल करें
सभी प्रमुख ब्राउज़र पर अच्छी तरह से काम करने वाली वेबसाइटें बनाना, ओपन वेब नेटवर्क का मुख्य सिद्धांत है. हालांकि, इसका मतलब यह पक्का करने के लिए अतिरिक्त काम है कि आप जो भी कोड लिखते हैं वह हर उस ब्राउज़र पर काम करता है जिसे आपको टारगेट करना है. अगर आपको JavaScript की भाषा की नई सुविधाओं का इस्तेमाल करना है, तो आपको इन सुविधाओं को पुराने सिस्टम के साथ काम करने वाले फ़ॉर्मैट में ट्रांसपाइल करना होगा.
पीआरपीएल पैटर्न के साथ झटपट लोड होने की सुविधा लागू करें
PRPL एक शॉर्ट फ़ॉर्म है, जो वेब पेजों को लोड करने और इंटरैक्टिव और तेज़ बनाने में इस्तेमाल होने वाले पैटर्न के बारे में बताता है. इस गाइड में जानें कि ये सभी तकनीकें एक साथ कैसे काम करती हैं, लेकिन फिर भी इन्हें अलग-अलग तरीके से इस्तेमाल करके, परफ़ॉर्मेंस के नतीजे पाए जा सकते हैं.
कोड को बांटने की सुविधा की मदद से, JavaScript के पेलोड कम करें
ज़्यादा JavaScript पेलोड भेजने से, आपकी साइट की स्पीड पर बहुत ज़्यादा असर पड़ता है. आपके ऐप्लिकेशन का पहला पेज लोड होते ही अपने उपयोगकर्ता को पूरा JavaScript भेजने के बजाय, अपने बंडल को कई हिस्सों में बांट दें और सिर्फ़ शुरुआत में ही ज़रूरी चीज़ें भेजें.
स्नीकी 404 कोड वाली गड़बड़ी ठीक करना
इस कोडलैब में, स्नीकी 404 की पहचान करने का तरीका जानें, जो आपके पेज को सही तरीके से इंडेक्स होने से रोक सकता है.
क्रॉस-ऑरिजिन रिसॉर्स शेयरिंग (सीओआरएस)
ब्राउज़र की एक ही ऑरिजिन से जुड़ी नीति, सुरक्षा के मकसद से किसी संसाधन को किसी दूसरे ऑरिजिन से पढ़ने पर रोक लगाती है. सीओआरएस को चालू करने से सर्वर, ब्राउज़र को यह बता पाता है कि वह किसी दूसरे ऑरिजिन का इस्तेमाल कर सकता है.
तेज़ी से पेज लोड करने के लिए, ऐनिमेशन वाले GIF की जगह वीडियो का इस्तेमाल करें
क्या आपने कभी Imgu or Gfycat जैसी किसी सेवा पर कोई ऐनिमेट किया गया GIF देखा है, जिसकी जांच अपने डेवलपर टूल में की है ताकि वह सिर्फ़ यह पता कर पाए कि GIF वाकई एक वीडियो है? इसकी एक अच्छी वजह है. ऐनिमेशन वाले GIF, एकदम बड़े पैमाने पर हो सकते हैं! बड़े GIF को वीडियो में बदलकर, उपयोगकर्ताओं के बैंडविथ पर भारी बचत की जा सकती है.
सुरक्षा हमले क्या हैं?
असुरक्षित ऐप्लिकेशन, लोगों और सिस्टम को कई तरह के नुकसान पहुंचा सकता है. जब नुकसान पहुंचाने वाला कोई पक्ष नुकसान पहुंचाने के लिए, जोखिम की आशंकाओं का इस्तेमाल करता है या सुरक्षा से जुड़ी सुविधाओं की कमी का इस्तेमाल करता है, तो उसे हमला कहा जाता है. हम इस गाइड में दिए गए अलग-अलग तरह के हमलों पर एक नज़र डालेंगे, ताकि आप जान सकें कि अपने ऐप्लिकेशन को सुरक्षित करते समय किन बातों का ध्यान रखना चाहिए.
खोज की सुविधा कैसे काम करती है
सर्च इंजन, लाइब्रेरियन के डिजिटल वर्शन होते हैं. वे किसी क्वेरी के लिए सही जानकारी ढूंढने में मदद करने के लिए, एक व्यापक इंडेक्स का इस्तेमाल करते हैं. खोज करने से जुड़ी बुनियादी बातों को समझने से, आपको अपना कॉन्टेंट उपयोगकर्ताओं के लिए आसानी से खोजे जाने लायक बनाने में मदद मिलती है.
डेंसिटी डिस्क्रिप्टर का इस्तेमाल करें
इस कोडलैब में, जानें कि उपयोगकर्ता के डिवाइस के लिए, सही पिक्सल डेंसिटी वाली इमेज लोड करने के लिए, डेंसिटी डिस्क्रिप्टर और srcset का इस्तेमाल कैसे करें.
परफ़ॉर्मेंस बजट 101
अच्छा परफ़ॉर्मेंस बहुत कम ही बुरा असर होता है. परफ़ॉर्मेंस बजट के बारे में जानें. साथ ही, यह भी जानें कि इनकी मदद से, कारोबार को सफल कैसे बनाया जा सकता है.
एक ही ऑरिजिन से जुड़ी नीति
ब्राउज़र एक से ज़्यादा साइटों से रिसॉर्स लोड कर सकता है और दिखा सकता है. अगर उन संसाधनों के बीच इंटरैक्शन पर कोई प्रतिबंध नहीं है और अगर किसी हमलावर ने स्क्रिप्ट से छेड़छाड़ की है, तो स्क्रिप्ट उस उपयोगकर्ता के ब्राउज़र पर मौजूद हर चीज़ को सार्वजनिक कर सकती है.
एचटीटीपी कैश मेमोरी में डेटा को कैश मेमोरी में सेव करने के तरीके को कॉन्फ़िगर करना
इस कोडलैब में, एचटीटीपी हेडर का इस्तेमाल करके रिसॉर्स कैश मेमोरी के व्यवहार को कंट्रोल करने का तरीका जानें.
स्लॉट की एक से ज़्यादा चौड़ाई तय करना
इस कोडलैब में, उपयोगकर्ता के व्यूपोर्ट के आधार पर इमेज को सही तरीके से साइज़ देने के लिए, साइज़ एट्रिब्यूट का इस्तेमाल करने का तरीका जानें.
सही डाइमेंशन वाली इमेज दिखाएं
इस कोडलैब में, नेटवर्क की परफ़ॉर्मेंस को बेहतर बनाने के लिए, सही डाइमेंशन वाली इमेज दिखाने का तरीका जानें.
आपका पहला परफ़ॉर्मेंस बजट
पक्का करें कि आपकी साइट तेज़ी से लोड होती हो. साथ ही, इन सिलसिलेवार निर्देशों में, ऐसी परफ़ॉर्मेंस मेट्रिक के लिए थ्रेशोल्ड तय करें जो आपकी साइट के लिए काम के हों.