- नए सीएसएस टाइप वाले मॉडल ऑब्जेक्ट की मदद से, सीएसएस में बदलाव करना आसान हो जाता है.
- क्लिपबोर्ड का ऐक्सेस अब एसिंक्रोनस हो गया है.
- कैनवस एलिमेंट के लिए नया रेंडरिंग कॉन्टेक्स्ट किया गया है.
और यहां और भी बहुत कुछ है!
मैं पीट लेपेज हूं. चलिए, देखते हैं कि 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 का इस्तेमाल करके चिपकाना
लेकिन किसी भी अन्य चीज़ के लिए, आपके सिंक्रोनस होने की
प्रकृति पेज को ब्लॉक कर देगी, जिससे उपयोगकर्ता को खराब अनुभव मिलेगा. और
अलग-अलग ब्राउज़र के बीच अनुमति मॉडल एक जैसा नहीं है.
नया एसिंक्रोनस क्लिपबोर्ड एपीआई एक ऐसा बदलाव है जो एसिंक्रोनस रूप से काम करता है और लोगों को बेहतर अनुभव देने के लिए, अनुमति वाले एपीआई के साथ इंटिग्रेट किया जाता है.
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 ऑब्जेक्ट को दिखाने का तरीका व्यवस्थित किया है. इन विज्ञापनों की मदद से,
इसमें एसिंक्रोनस तरीके से काम करके और मेमोरी से बचते हुए, बेहतर तरीके से और कम जैंक के साथ
डुप्लिकेशन.
इसका इस्तेमाल करने के लिए:
- इमेज बनाने के लिए,
createImageBitmapको कॉल करें और उसे इमेज ब्लॉब दें. canvasसेbitmaprendererसंदर्भ पाएं.- इसके बाद, इमेज को ट्रांसफ़र करें.
const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);
हो गया, मैंने इमेज रेंडर कर दी है!
AudioWorklet
वर्कलेट उपलब्ध हैं! PaintWorklet अब Chrome 65 में शिप किए गए हैं और अब हम इन्हें चालू कर रहे हैं AudioWorklet डिफ़ॉल्ट रूप से Chrome 66 में उपलब्ध है. इस नए टाइप के वर्कलेट का इस्तेमाल, डेटा को प्रोसेस करने के लिए किया जा सकता है खास तौर पर बनाए गए ऑडियो थ्रेड में ऑडियो इस्तेमाल करने की सुविधा, लेगसी Scriptप्रोसेसरनोड की जगह ले रही है जो मुख्य थ्रेड पर चलती थी. हर AudioWorklet अपने ग्लोबल स्कोप में चलता है, इंतज़ार का समय कम करना और थ्रूपुट स्थिरता बढ़ाना.
यहां AudioWorklet के कुछ दिलचस्प उदाहरण दिए गए हैं Google Chrome लैब.
और भी कई सुविधाएं!
ये डेवलपर के लिए Chrome 66 में किए गए कुछ बदलाव हैं. और भी बहुत कुछ है.
TextAreaऔरSelectअबautocompleteएट्रिब्यूट के साथ काम करते हैं.formएलिमेंट परautocapitalizeको सेट करने से, यह हर चाइल्ड फ़ॉर्म पर लागू होगा फ़ील्ड के साथ-साथ,autocapitalize.trimStart()औरtrimEnd()अब स्टैंडर्ड पर आधारित तरीके के तौर पर उपलब्ध हैं ताकि स्ट्रिंग की खाली सफ़ेद जगह को हटा दिया जा सके.
Chrome DevTools में नया टूल ज़रूर देखें, देखें कि Chrome 66 में DevTools में नया क्या है. अगर आपको यह जानना है कि प्रोग्रेसिव वेब ऐप्लिकेशन, PWA रोडशो वीडियो सीरीज़. इसके बाद, सदस्यता लें बटन पर क्लिक करें. YouTube चैनल, और जब भी हम कोई नया वीडियो लॉन्च करेंगे, तब आपको ईमेल से सूचना मिलेगी.
मैं पीट लेपेज हूं और जैसे ही Chrome 67 रिलीज़ होगा, मैं सही हूं -- Chrome में नया क्या है!