Chrome 95 में नया

Pete LePage

यहां आवश्यक जानकारी दी गई है:

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

मेरा नाम पीट लीपेज है, मैं घर से काम कर रहा/रही हूं और शूट कर रहा हूं. चलिए, देखते हैं कि Chrome 95 में डेवलपर के लिए नया क्या है.

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

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

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

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

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

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

उदाहरण के लिए, आइए URLPattern पर नज़र डालते हैं, जिसका इस्तेमाल Google Docs में किया जा सकता है. हम फ़ाइल का 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 समिट

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

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

उपयोगकर्ता-एजेंट को कम करने का ऑरिजिन ट्रायल

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

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

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

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

और ज़्यादा!

बेशक, यहां बहुत कुछ है.

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

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

सदस्यता लें

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

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