Chrome 95 में नया

Pete LePage

यहां आपके जानने योग्य तथ्य दिए गए हैं:

  • ब्राउज़र में पहले से मौजूद URLPattern की मदद से, रूटिंग करना आसान हो जाता है.
  • Eye ड्रॉपडाउन API में, रंग चुनने के लिए एक टूल पहले से मौजूद होता है.
  • ऑरिजिन ट्रायल का एक नया वर्शन उपलब्ध है. इसकी मदद से, अब छोटी UA स्ट्रिंग पाने के लिए ऑप्ट इन किया जा सकता है.
  • PWA Summit के सभी वीडियो ऑनलाइन उपलब्ध हैं.
  • इसके अलावा, और भी बहुत कुछ है.

नमस्ते, पीट लेपेज बोल रहा हूं. मैं घर से काम कर रहा हूं और वीडियो रिकॉर्ड कर रहा हूं. आइए, Chrome 95 में डेवलपर के लिए क्या नया है, इस बारे में जानते हैं.

URLPattern के साथ रूटिंग

ज़्यादातर वेब ऐप्लिकेशन, किसी न किसी तरह से रूटिंग पर निर्भर होते हैं. भले ही, यह किसी सर्वर पर चलने वाला कोड हो, जो डिस्क पर फ़ाइलों के पाथ को मैप करता हो या सिंगल-पेज ऐप्लिकेशन में मौजूद लॉजिक हो, जो यूआरएल बदलने पर डीओएम को अपडेट करता हो. URLPattern एक नया वेब प्लैटफ़ॉर्म एपीआई है, जो रूटिंग पैटर्न के सिंटैक्स के लिए स्टैंडर्ड तय करता है.

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

अगर आपको Express, Ruby on Rails या path-to-regexp में इस्तेमाल किए गए रूटिंग सिंटैक्स के बारे में पहले से पता है, तो आपको यह सिंटैक्स जाना-पहचाना लगेगा.

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

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

उदाहरण के लिए, Google Docs के इस्तेमाल किए जा सकने वाले URLPattern को देखें. हम फ़ाइल का kind, फ़ाइल ID, और उसे किस mode में खोलना है, यह बताएंगे. इसके बाद, पैटर्न का इस्तेमाल करने के लिए, हम test() या exec() को कॉल कर सकते हैं.

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

Chrome और Edge के 95 और इसके बाद के वर्शन में URLPattern डिफ़ॉल्ट रूप से चालू होता है. साथ ही, Node जैसे ऐसे ब्राउज़र या एनवायरमेंट के लिए, जिन पर यह सुविधा अभी काम नहीं करती, urlpattern-polyfill लाइब्रेरी का इस्तेमाल किया जा सकता है.

पूरी जानकारी के लिए, जेफ़ का लेख URLPattern, वेब प्लैटफ़ॉर्म पर रूटिंग की सुविधा देता है देखें!

आई ड्रॉपर एपीआई की मदद से रंग चुनना

मैंने अब तक जितने भी डिज़ाइन ऐप्लिकेशन इस्तेमाल किए हैं, उनमें एक आई ड्रॉपर टूल मौजूद है. इससे किसी चीज़ के रंग का पता लगाने में आसानी होती है. कुछ ब्राउज़र में <input type=color> में आईड्रॉपर क्षमता मौजूद होती है, लेकिन यह बिलकुल सही नहीं है.

Microsoft के कुछ लोगों के ज़रिए लागू किया गया आई ड्रॉपपर एपीआई इस सुविधा को वेब पर उपलब्ध कराता है. इसका इस्तेमाल करने के लिए, नया EyeDropper() इंस्टेंस बनाएं. इसके बाद, उस पर open() को कॉल करें.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

कई अन्य आधुनिक वेब एपीआई की तरह, यह असिंक्रोनस तरीके से काम करता है, ताकि यह मुख्य थ्रेड को ब्लॉक न करे. जब उपयोगकर्ता अपने पसंदीदा रंग पर क्लिक करता है, तो वह रंग लागू हो जाता है.

Glitch पर डेमो आज़माया जा सकता है और कोड देखा जा सकता है.

पीडब्ल्यूए सम्मेलन

क्या आपने इस महीने की शुरुआत में PWA Summit में हिस्सा लिया था?

हमें यह देखकर खुशी हुई कि इतने सारे लोग PWA के बारे में बात कर रहे थे और अपने अनुभव शेयर कर रहे थे. अगर आपने यह सम्मेलन नहीं देखा है, तो सभी वीडियो अपलोड कर दिए गए हैं. इसलिए, PWASummit.org या PWA Summit के YouTube चैनल पर जाकर, इन्हें ज़रूर देखें.

यूज़र-एजेंट रिडक्शन ऑरिजिन ट्रायल

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

Chrome 95 की शुरुआत में, एक नया ऑरिजिन ट्रायल उपलब्ध है. इसकी मदद से, कम की गई UA स्ट्रिंग की वैल्यू अभी पाने के लिए ऑप्ट इन किया जा सकता है. इससे, Chrome में कम किए गए UA के डिफ़ॉल्ट तौर पर लागू होने से पहले, आपको समस्याओं का पता लगाने और उन्हें ठीक करने में मदद मिलेगी.

ये बदलाव, कई रिलीज़ में धीरे-धीरे लागू किए जाएंगे. हालांकि, तैयारी करने और टेस्ट करने के लिए, आपके पास अभी से ही सभी चीज़ें मौजूद हैं.

पूरी जानकारी और टाइमलाइन, developer.chrome.com पर उपयोगकर्ता एजेंट हेडर में दी गई जानकारी को कम करने की प्रोसेस के ऑरिजिन ट्रायल की पोस्ट में दी गई है.

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

बेशक वहां और भी बहुत कुछ है.

इसके बारे में और पढ़ें

इसमें सिर्फ़ कुछ अहम हाइलाइट के बारे में बताया गया है. Chrome 95 में किए गए अन्य बदलावों के बारे में जानने के लिए, यहां दिए गए लिंक देखें.

सदस्यता लें

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

मेरा नाम पीट लेपेज है और Chrome 96 के रिलीज़ होते ही, मैं आपको Chrome की नई सुविधाओं के बारे में बताऊंगी!