Chrome 71 में नया

पीट लीपेज

Twitter GitHub Glitch Mastodon होम पेज

Chrome 71 में, हमने इनके लिए सहायता जोड़ी है:

• रिलेटिव समय दिखाना, अब Intl API का हिस्सा है.
• यह तय करना कि वर्टिकल फ़ॉर्मैट में दिखने वाले टेक्स्ट के लिए, टेक्स्ट के किस साइड पर अंडरलाइन दिखाया जाए.
• स्पीच सिंथेसिस एपीआई का इस्तेमाल करने से पहले, उपयोगकर्ता को चालू करना ज़रूरी है.

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

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

बदलाव लॉग

इसमें सिर्फ़ कुछ मुख्य हाइलाइट शामिल हैं. Chrome 71 में हुए और बदलावों के लिए नीचे दिए गए लिंक देखें.

• Chromium सोर्स का डेटा स्टोर करने की जगह में बदलाव की सूची
• Chrome 71 के लिए ChromeStatus.com से जुड़े अपडेट
• Chrome 71 का इस्तेमाल बंद करना और हटाना

Intl.RelativeTimeFormat() की मदद से समय की जानकारी दिखाएं

Twitter पर नई पोस्ट को पब्लिश करने में लगने वाला समय दिखाया जा रहा है

कई वेब ऐप्लिकेशन, पूरी तारीख और समय दिखाने के बजाय, "बीता कल", "दो दिनों में" या "एक घंटे पहले" जैसे वाक्यांशों का इस्तेमाल करके यह बताते हैं कि कुछ कब हुआ था - या होने वाला है.

तुलनात्मक समय दिखाना इतना आम हो गया है कि ज़्यादातर सामान्य तारीख/समय की लाइब्रेरी, इसे मैनेज करने के लिए स्थानीय जगह के हिसाब से फ़ंक्शन उपलब्ध कराती हैं. असल में, मैंने जो भी वेब ऐप्लिकेशन बनाया है, Moment JS उन पहली लाइब्रेरी में से एक है जिसे मैंने खास तौर पर इस मकसद से जोड़ा है.

Chrome 71, Intl.RelativeTimeFormat() को लॉन्च करता है, जो काम को JavaScript इंजन में ले जाता है. साथ ही, जगह के हिसाब से, मिलते-जुलते समय की फ़ॉर्मैटिंग की सुविधा चालू करता है. इससे हमें परफ़ॉर्मेंस में थोड़ी बढ़ोतरी मिलती है. साथ ही, हमें उन लाइब्रेरी की ज़रूरत पॉलीफ़िल के तौर पर सिर्फ़ तब होती है, जब किसी ब्राउज़र पर नए एपीआई काम नहीं करते.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

इसे इस्तेमाल करना आसान है. एक नया इंस्टेंस बनाएं और स्थान-भाषा तय करें. इसके बाद, मिलते-जुलते समय के हिसाब से फ़ॉर्मैट को कॉल करें. पूरी जानकारी के लिए, मथायस की The Intl.RelativeTimeFormat API पोस्ट देखें.

वर्टिकल टेक्स्ट को अंडरलाइन करने की जगह

अलग-अलग अंडरलाइनों वाला वर्टिकल टेक्स्ट

जब चाइनीज़ या जैपनीज़ टेक्स्ट को वर्टिकल फ़्लो में दिखाया जाता है, तो ब्राउज़र में अंडरलाइन की गई जगह की जानकारी एक जैसी नहीं होती है. टेक्स्ट को बाईं या दाईं तरफ़ दिखाया जा सकता है.

Chrome 71 में, text-underline-position प्रॉपर्टी अब CSS3 टेक्स्ट डेकोरेशन स्पेसिफ़िकेशन के हिस्से के तौर पर, left या right को स्वीकार करती है. CSS3 टेक्स्ट डेकोरेशन की खास जानकारी में कई नई प्रॉपर्टी जोड़ी गई हैं. इनमें, इस्तेमाल की जाने वाली लाइन जैसी चीज़ें, स्टाइल, रंग, और रैंक जैसी चीज़ें तय की जा सकती हैं.

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

बोली को बोली में बदलने की सुविधा का इस्तेमाल करने के लिए, उपयोगकर्ता का डिवाइस चालू करना ज़रूरी है

हम सभी को हैरानी होती है जब हम किसी साइट पर जाते हैं और वह अचानक हमसे बात करना शुरू कर देती है. वीडियो अपने-आप चलने की नीतियां, साइटों को ऑडियो या वीडियो फ़ाइलों को अपने-आप चलाने से रोकती हैं. कुछ साइटों ने इसके बजाय, स्पीच सिंथेसिस एपीआई का इस्तेमाल करके, इस समस्या को हल करने की कोशिश की है.

Chrome 71 से, बोली संश्लेषण API को काम करने से पहले पेज पर किसी प्रकार के उपयोगकर्ता एक्टिवेशन की ज़रूरत होती है. इससे, यह अन्य ऑटोप्ले नीतियों के मुताबिक हो जाता है. अगर उपयोगकर्ता के पेज से इंटरैक्ट करने से पहले इसका इस्तेमाल करने की कोशिश की जाती है, तो गड़बड़ी होगी.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

ध्यान दें: यह पक्का करने के लिए कि आपका कोड काम कर रहा है, मेरा सुझाव है कि आप स्पीच सिंथेसिस कॉल को try/catch ब्लॉक में रैप करें. ऐसा इसलिए, ताकि पेज के चालू न होने पर भी, बाकी ऐप्लिकेशन काम न करे.

साइट पर जाकर आपको और आपके आस-पास बैठे सहकर्मियों को चौंका देने से बदतर कुछ नहीं है.

और ज़्यादा!

डेवलपर के लिए Chrome 71 में हुए ये कुछ बदलाव हैं, बेशक, और भी बहुत से बदलाव हैं.

• Element.requestFullscreen() तरीके को अब Android डिवाइस पर पसंद के मुताबिक बनाया जा सकता है. इससे यह चुना जा सकता है कि नेविगेशन बार को दिखने वाला मोड कैसा दिखेगा या पूरी तरह इमर्सिव मोड में. इसमें उपयोगकर्ता एजेंट के कंट्रोल तब तक नहीं दिखाए जाएंगे, जब तक उपयोगकर्ता के जेस्चर (हाव-भाव) को लागू नहीं किया जाता.
• मॉड्यूल स्क्रिप्ट अनुरोधों के लिए डिफ़ॉल्ट क्रेडेंशियल मोड, omit से बदलकर same-origin हो गया है.
• साथ ही, Shadow DOM v1 स्पेसिफ़िकेशन में Chrome को इनलाइन तरीके से सेट किया जा रहा है. Chrome 71, अब :host() और :host-context() स्यूडो क्लास के साथ-साथ ::slotted() के आर्ग्युमेंट के लिए, खास जानकारी का हिसाब लगाता है.

Chrome DevSummit वीडियो

अगर आप Chrome डेवलपर सम्मेलन में शामिल नहीं हुए हैं या शायद आप शामिल नहीं हुए हैं, लेकिन सभी बातें नहीं देखी हैं, तो हमारे YouTube चैनल पर Chrome Dev Summit 2018 प्लेलिस्ट देखें.

ईवा और फ़िल ने सर्विस वर्कर के साथ तेज़ी से और बेहतर तरीके से काम करने वाले ऐप्लिकेशन बनाने में सर्विस वर्कर का इस्तेमाल करने के लिए कुछ सही तकनीकों का इस्तेमाल किया.

मरिको और जेक ने बताया कि उन्होंने जटिल JS-हैवी वेब ऐप्लिकेशन, अविज़िंग द स्लो में Squoosh कैसे बनाया.

केटी और ह्यूस्टन में आपकी साइट की परफ़ॉर्मेंस को बेहतर बनाने के लिए, कुछ बेहतरीन तकनीकें बताई गई हैं. इनके बारे में, Speed Essentials: फ़ास्ट वेबसाइट के लिए मुख्य तकनीकें में बताया गया है.

जेक ने केक छोड़ा. Chrome DevSummit 2018 प्लेलिस्ट में दूसरे कई बेहतरीन वीडियो हैं, इसलिए, उन्हें देखें.

सदस्यता लें

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

मैं हूं पीट लेपेज और Chrome 72 के रिलीज़ होते ही, मैं आपको बताऊंगी -- Chrome में नया क्या है!