Chrome 62 में नया

Pete LePage

इसके अलावा, और भी बहुत कुछ है!

मेरा नाम पीट लेपेज है. आइए, जानें कि Chrome 62 में डेवलपर के लिए क्या नया है!

क्या आपको बदलावों की पूरी सूची चाहिए? Chromium सोर्स रिपॉज़िटरी में हुए बदलावों की सूची देखें.

नेटवर्क क्वालिटी इंडिकेटर

नेटवर्क इन्फ़ॉर्मेशन एपीआई, Chrome में कुछ समय से उपलब्ध है. हालांकि, यह उपयोगकर्ता के कनेक्शन के हिसाब से, नेटवर्क की सिर्फ़ अनुमानित स्पीड दिखाता है. मान लें कि आप वाई-फ़ाई से कनेक्ट हैं, लेकिन किसी ऐसे मोबाइल हॉटस्पॉट से कनेक्ट हैं जिसकी स्पीड सिर्फ़ 2G है. एपीआई, वाई-फ़ाई की जानकारी देगा!

console.log(navigator.connection.type);
> wifi

Chrome 62 में, एपीआई को बड़ा किया गया है, ताकि क्लाइंट से नेटवर्क की असल परफ़ॉर्मेंस मेट्रिक मिल सकें. नेटवर्क क्वालिटी के इन सिग्नल का इस्तेमाल करके, नेटवर्क के हिसाब से कॉन्टेंट को बेहतर बनाया जा सकता है. उदाहरण के लिए, बहुत धीमे कनेक्शन पर, पेज को कम वर्शन में दिखाकर, पेज लोड होने की परफ़ॉर्मेंस को बेहतर बनाया जा सकता है.

आपके ऐप्लिकेशन लॉजिक को आसान बनाने के लिए, एपीआई नेटवर्क की परफ़ॉर्मेंस की जानकारी देता है. यह जानकारी, मोबाइल इंटरनेट कनेक्शन की तुलना में दी जाती है. उदाहरण के लिए, सुपर फ़ास्ट फ़ाइबर कनेक्शन से कनेक्ट होने पर, एपीआई 4G की रिपोर्ट देगा.

console.log(navigator.connection.effectiveType);
> 4G

ये सिग्नल, एचटीटीपी अनुरोध हेडर के तौर पर भी उपलब्ध होंगे. साथ ही, इन्हें क्लाइंट हिंट की मदद से चालू किया जा सकेगा. ज़्यादा जानकारी के लिए, सैंपल देखें और स्पेसिफ़िकेशन देखें.

OpenType वैरिएबल फ़ॉन्ट

आम तौर पर, किसी फ़ॉन्ट में फ़ॉन्ट फ़ैमिली का सिर्फ़ एक इंस्टेंस होता है. उदाहरण के लिए, एक वेट या एक स्ट्रेच. अगर आपको रेगुलर, बोल्ड, और इटैलिक फ़ॉन्ट चाहिए, तो आपको तीन अलग-अलग फ़ॉन्ट शामिल करने होंगे. इससे आपके पेज का साइज़ बढ़ जाएगा.

OpenType वैरिएबल फ़ॉन्ट, एक से ज़्यादा फ़ॉन्ट के बराबर होता है. इन्हें एक फ़ॉन्ट फ़ाइल में कम जगह में पैक किया जा सकता है. font-variation-settings सीएसएस प्रॉपर्टी में बदलाव करके, स्ट्रेच, स्टाइल, वेट वगैरह को आसानी से अडजस्ट किया जा सकता है. इससे, स्टाइल में अनगिनत बदलाव किए जा सकते हैं. अब उन तीन फ़ॉन्ट को एक छोटी फ़ाइल में जोड़ा जा सकता है.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

OpenType वैरिएबल फ़ॉन्ट की मदद से, हम रिस्पॉन्सिव टाइपोग्राफ़ी बना सकते हैं और अपने पेज का साइज़ कम कर सकते हैं. ज़्यादा जानकारी के लिए, जॉन हडसन का Introducing OpenType Variable Fonts लेख पढ़ें.

डीओएम एलिमेंट से मीडिया कैप्चर करना

अब DOM एलिमेंट एपीआई से मीडिया कैप्चर का इस्तेमाल करके, ऑडियो और वीडियो जैसे कॉन्टेंट को सीधे HTMLMediaElements से MediaStream में लाइव-कैप्चर किया जा सकता है.

किसी एचटीएमएल मीडिया एलिमेंट पर captureStream() को चालू करने के बाद, स्ट्रीम किए गए कॉन्टेंट में बदलाव किया जा सकता है, उसे प्रोसेस किया जा सकता है, रिमोट से भेजा जा सकता है या रिकॉर्ड किया जा सकता है. अपने इक्वलाइज़र या वॉकोडर बनाने के लिए, वेब ऑडियो का इस्तेमाल करने की कल्पना करें. इसके अलावा, WebRTC का इस्तेमाल करके कॉन्टेंट को किसी रिमोट साइट पर स्ट्रीम किया जा सकता है. इसका इस्तेमाल कई तरह से किया जा सकता है.

कुछ एचटीटीपी पेजों के लिए, 'सुरक्षित नहीं है' लेबल

हमने पहले ही एलान किया था कि Chrome 62 से, जब कोई उपयोगकर्ता एचटीटीपी पेज पर डेटा डालेगा, तो Chrome उस पेज को पता बार में लेबल के साथ "सुरक्षित नहीं" के तौर पर मार्क करेगा. यह लेबल, गुप्त मोड में सभी एचटीटीपी पेजों के लिए भी दिखेगा.

और भी कई सुविधाएं!

डेवलपर के लिए, Chrome 62 में ये सिर्फ़ कुछ बदलाव हैं. इसमें और भी कई बदलाव हैं.

इसके बाद, हमारे YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से इसकी सूचना मिलेगी.

मेरा नाम पीट लेपेज है. Chrome 63 रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!