Chrome 66 में नया

Pete LePage

• नए सीएसएस टाइप किए गए मॉडल ऑब्जेक्ट की मदद से, सीएसएस में बदलाव करना आसान हो गया है.
• क्लिपबोर्ड के लिए ऐक्सेस अब एसिंक्रोनस है.
• कैनवस एलिमेंट के लिए रेंडरिंग का एक नया कॉन्टेक्स्ट दिया गया है.

साथ ही, और भी बहुत कुछ है!

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

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

सीएसएस टाइप किया गया ऑब्जेक्ट मॉडल

अगर आपने कभी भी JavaScript के ज़रिए किसी सीएसएस प्रॉपर्टी को अपडेट किया है, तो इसका मतलब है कि आपने सीएसएस ऑब्जेक्ट मॉडल का इस्तेमाल किया है. लेकिन यह सबकुछ एक स्ट्रिंग के रूप में देता है.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

opacity प्रॉपर्टी को ऐनिमेट करने के लिए, मुझे स्ट्रिंग को किसी संख्या पर कास्ट करना होगा. इसके बाद, वैल्यू को बढ़ाना होगा और अपने बदलावों को लागू करना होगा. बिलकुल सही नहीं है.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

नए सीएसएस टाइप किए गए ऑब्जेक्ट मॉडल की मदद से, सीएसएस वैल्यू को टाइप किए गए JavaScript ऑब्जेक्ट के तौर पर दिखाया जाता है. इससे टाइप में होने वाली कई तरह की छेड़छाड़ खत्म हो जाती है और सीएसएस के साथ बेहतर तरीके से काम किया जा सकता है.

element.style का इस्तेमाल करने के बजाय, आप .attributeStyleMap प्रॉपर्टी या .styleMap से स्टाइल को ऐक्सेस करते हैं. ये मैप जैसा ऑब्जेक्ट दिखाते हैं, जो इन्हें पढ़ना या अपडेट करना आसान बनाता है.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

पुराने सीएसएस ऑब्जेक्ट मॉडल की तुलना में, शुरुआती मानदंड में हर सेकंड के हिसाब से कार्रवाइयों में 30% सुधार हुआ है - यह JavaScript ऐनिमेशन के लिए खास तौर पर ज़रूरी है.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

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

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

एरिक ने पूरी जानकारी में कई डेमो और उदाहरणों के साथ एक शानदार पोस्ट की है.

Async Clipboard API

const successful = document.execCommand('copy');

document.execCommand का इस्तेमाल करके सिंक की गई कॉपी करके चिपकाने का विकल्प, टेक्स्ट के छोटे हिस्सों के लिए सही हो सकता है. हालांकि, किसी भी अन्य चीज़ के लिए, सिंक्रोनस होने की वजह से पेज ब्लॉक हो सकता है. इससे उपयोगकर्ता को खराब अनुभव मिलता है. साथ ही, ब्राउज़र के बीच अनुमति का मॉडल एक जैसा नहीं होता.

नया Async Clipboard API, एक ऐसा रिप्लेसमेंट एपीआई है जो एसिंक्रोनस तरीके से काम करता है. साथ ही, यह अनुमति वाले एपीआई के साथ इंटिग्रेट करता है, ताकि उपयोगकर्ताओं को बेहतर अनुभव दे सके.

writeText() पर कॉल करके, टेक्स्ट को क्लिपबोर्ड पर कॉपी किया जा सकता है.

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

यह एपीआई एसिंक्रोनस है, इसलिए writeText() फ़ंक्शन एक प्रॉमिस दिखाता है. इसे हल या अस्वीकार किया जाएगा. यह इस बात पर निर्भर करता है कि हमने जो टेक्स्ट पास किया है वह कॉपी हुआ है या नहीं.

इसी तरह, क्लिपबोर्ड पर मौजूद टेक्स्ट को पढ़ा जा सकता है. इसके लिए, getText() को कॉल करें और वापस किए गए प्रॉमिस का जवाब टेक्स्ट के साथ मिलने का इंतज़ार करें.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

एक्सप्लेनेशंस में जेसन की पोस्ट और डेमो देखें. उन्हें async फ़ंक्शन का इस्तेमाल करने वाले उदाहरण भी मिले हैं.

कैनवस का नया कॉन्टेक्स्ट BitmapRenderer

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

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

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

Chrome 66 की शुरुआत में, एक नया एसिंक्रोनस रेंडरिंग कॉन्टेक्स्ट उपलब्ध है. इसने ImageBitmap ऑब्जेक्ट के डिसप्ले को स्ट्रीम किया है. वे अब एसिंक्रोनस तरीके से काम करते हैं और मेमोरी के दोहराव से बचते हैं. इससे वे बेहतर तरीके से और कम जैंक के साथ रेंडर हो पाते हैं.

इसका इस्तेमाल करने के लिए:

1. इमेज बनाने के लिए, createImageBitmap को कॉल करें और उसे इमेज का ब्लॉब दें.
2. canvas से bitmaprenderer संदर्भ को लें.
3. इसके बाद, इमेज को उसमें ट्रांसफ़र करें.

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

हो गया, मैंने इमेज रेंडर कर दी है!

AudioWorklet

वर्कलेट मिल गए हैं! PaintWorklet को Chrome 65 में शिप किया गया है और अब हम Chrome 66 में AudioWorklet को डिफ़ॉल्ट रूप से चालू कर रहे हैं. इस नए तरह के वर्कलेट का इस्तेमाल, खास तौर पर बनाए गए ऑडियो थ्रेड में ऑडियो को प्रोसेस करने के लिए किया जा सकता है. यह मुख्य थ्रेड पर चलने वाले लेगसी ScriptProcessorNode की जगह लेगा. हर AudioWorklet अपने ग्लोबल स्कोप में काम करता है. इससे इंतज़ार का समय कम होता है और प्रवाह क्षमता बढ़ती है.

Google Chrome Labs पर AudioWorklet के कुछ दिलचस्प उदाहरण हैं.

और ज़्यादा!

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

• TextArea और Select अब autocomplete एट्रिब्यूट के साथ काम करते हैं.
• autocapitalize को form एलिमेंट पर सेट करना, सभी चाइल्ड फ़ॉर्म फ़ील्ड पर लागू होगा. इससे Safari autocapitalize को लागू करने पर बेहतर तरीके से काम करेगा.
• trimStart() और trimEnd() अब स्ट्रिंग की खाली सफ़ेद जगह को कम करने के मानकों पर आधारित तरीके के तौर पर उपलब्ध हैं.

Chrome 66 में DevTools के लिए नया क्या है, यह जानने के लिए Chrome DevTools में नया देखना न भूलें. अगर आपको प्रोग्रेसिव वेब ऐप्लिकेशन में दिलचस्पी है, तो नई PWA Roadshow वीडियो सीरीज़ देखें. इसके बाद, हमारे YouTube चैनल पर सदस्यता लें बटन पर क्लिक करें. जब भी हम कोई नया वीडियो लॉन्च करेंगे, आपको ईमेल से सूचना मिलेगी.

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