- Chrome 62, नेटवर्क की जानकारी देने वाले एपीआई को ज़्यादा काम का बनाता है. ऐसा, सैद्धांतिक नतीजों के बजाय, परफ़ॉर्मेंस की असल मेट्रिक उपलब्ध कराने की वजह से होता है.
- OpenType वैरिएबल फ़ॉन्ट के लिए सहायता उपलब्ध है.
- एचटीएमएल मीडिया एलिमेंट से मीडिया स्ट्रीम कैप्चर की जा सकती हैं.
- मुझे Chrome 62 में होने वाले एक ज़रूरी बदलाव के बारे में एक खास रिमाइंडर मिला है.
इसके अलावा, और भी बहुत कुछ है!
मेरा नाम पीट लेपेज है. आइए, जानें कि 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 वैरिएबल फ़ॉन्ट की मदद से, हमें रिस्पॉन्सिव टाइपोग्राफ़ी बनाने और पेज के साइज़ को कम करने के लिए, एक बेहतरीन नया टूल मिलता है. ज़्यादा जानकारी के लिए, जॉन हडसन का OpenType वैरिएबल फ़ॉन्ट देखें.
डीओएम एलिमेंट से मीडिया कैप्चर करना
अब DOM एलिमेंट एपीआई से मीडिया कैप्चर की मदद से, ऑडियो और वीडियो जैसे कॉन्टेंट को सीधे HTMLMediaElements
से MediaStream
में लाइव-कैप्चर किया जा सकता है.
किसी एचटीएमएल मीडिया एलिमेंट पर captureStream()
का इस्तेमाल करने के बाद, स्ट्रीम किए गए कॉन्टेंट में छेड़छाड़ की जा सकती है, उसे प्रोसेस किया जा सकता है, उसे कहीं से भी भेजा या रिकॉर्ड किया जा सकता है. अपने इक्वलाइज़र या वॉकोडर बनाने के लिए, वेब ऑडियो का इस्तेमाल करने की कल्पना करें. इसके अलावा, WebRTC का इस्तेमाल करके कॉन्टेंट को किसी रिमोट साइट पर स्ट्रीम किया जा सकता है. इसका इस्तेमाल कई तरह से किया जा सकता है.
कुछ एचटीटीपी पेजों के लिए 'सुरक्षित नहीं है' लेबल
हमने पहले ही एलान किया था कि Chrome 62 से, जब कोई उपयोगकर्ता एचटीटीपी पेज पर डेटा डालेगा, तो Chrome उस पेज को पता बार में लेबल के साथ "सुरक्षित नहीं" के तौर पर मार्क करेगा. यह लेबल, गुप्त मोड में सभी एचटीटीपी पेजों के लिए भी दिखेगा.
और भी कई सुविधाएं!
डेवलपर के लिए, Chrome 62 में ये सिर्फ़ कुछ बदलाव हैं. इसमें और भी कई बदलाव हैं.
- पेमेंट रिक्वेस्ट एपीआई अब iOS के लिए Chrome पर उपलब्ध है.
- WebVR के ऑरिजिन ट्रायल की मदद से, प्रयोग के तौर पर बेहतर वीआर अनुभव बनाए जा सकते हैं.
इसके बाद, हमारे YouTube चैनल की सदस्यता लें. ऐसा करने पर, जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से इसकी सूचना मिलेगी.
मेरा नाम पीट लेपेज है. Chrome 63 रिलीज़ होने के बाद, मैं आपको बताऊंगा कि Chrome में नया क्या है!