पब्लिश किया गया: 31 मार्च, 2025
एक और महीना बीत गया है. पिछले महीने के बेसलाइन डाइजेस्ट के बाद, काफ़ी कुछ हुआ है! इस एडिशन में, हम web.dev पर पब्लिश की गई कुछ पोस्ट के बारे में बताएंगे. साथ ही, बेसलाइन की कुछ नई सुविधाओं और कम्यूनिटी में टूल से जुड़े कुछ अपडेट के बारे में भी बताएंगे.
ESLint 0.6.0 रिलीज़ किया गया
हमने हाल ही में ESLint के बारे में पोस्ट की थी, जिसमें बताया गया था कि यह सीएसएस को लिंट करने की सुविधा लॉन्च कर रहा है. इस लॉन्च में, एक नया ESLint नियम—require-baseline—शामिल किया गया था. इसका इस्तेमाल, प्रोजेक्ट में इस्तेमाल की जाने वाली सीएसएस सुविधाओं को लिंट करने के लिए किया जाता है. साथ ही, यह भी पता लगाया जाता है कि वे किसी खास बेसलाइन थ्रेशोल्ड तक पहुंचती हैं या नहीं.
हाल ही में, ESLint ने @eslint/css पैकेज का 0.6.0 वर्शन लॉन्च किया है. इसमें एक अहम नया अपडेट शामिल है, जो require-baseline नियम का नाम बदलकर use-baseline कर देता है. भले ही, यह अपडेट छोटा है, लेकिन इससे नियम को पढ़ने में आसानी होती है. इस रिलीज़ में कुछ और ज़रूरी सुविधाएं और गड़बड़ियों को ठीक किया गया है. जैसे, नेस्ट किए गए CSS ब्लॉक को लिंट करने के लिए use-baseline नियम की जोड़ी गई सुविधा. अगर @eslint/css का पुराना वर्शन इस्तेमाल किया जा रहा है, तो यह अपडेट देखें!
वेब प्लैटफ़ॉर्म डैशबोर्ड से क्वेरी करने का तरीका
इस महीने की शुरुआत में, हमने वेब प्लैटफ़ॉर्म डैशबोर्ड से क्वेरी करने के बारे में एक पोस्ट पब्लिश की थी. इस डैशबोर्ड के फ़्रंटएंड के साथ-साथ, एचटीटीपी एपीआई के ज़रिए भी क्वेरी की जा सकती है. यह बेसलाइन टूल के लिए मददगार हो सकता है. इसकी मदद से, एपीआई से क्वेरी करके, ऐसी सुविधाओं को ढूंढा जा सकता है जो किसी खास बेसलाइन थ्रेशोल्ड तक पहुंच गई हैं.
यह एपीआई, टूल के लिए फ़ायदेमंद हो सकता है, जहां आपको खास सुविधाओं के बारे में तुरंत जानकारी चाहिए. उदाहरण के लिए, इस तरह के टूल का इस्तेमाल करके ऐसी स्क्रिप्ट लिखी जा सकती है जो आपको बताती है कि हाल ही में कौनसी सुविधाएं, बेसलाइन के तौर पर नई सुविधाएं या सभी के लिए उपलब्ध सुविधाएं बन गई हैं. अगर आपको यह जानकारी काम की लगती है, तो पोस्ट को पढ़ें!
बेसलाइन और पॉलीफ़िल के बारे में सोचने का तरीका
बेसलाइन का मकसद यह बताना है कि किन सुविधाओं का इस्तेमाल सुरक्षित तरीके से किया जा सकता है. हालांकि, इस जानकारी के बावजूद, आपको यह सोचना होगा कि सुविधाओं को अपने वेब ऐप्लिकेशन के हिसाब से कैसे अपनाया जाए. पॉलीफ़िल, इस प्रोसेस का एक अहम हिस्सा हैं. बेसलाइन, नई या व्यापक तौर पर उपलब्ध सुविधाओं में पॉलीफ़िल को शामिल नहीं करता. साथ ही, यह आपको यह बताने की कोशिश नहीं करता कि इनका इस्तेमाल करना है या नहीं. यह फ़ैसला आपके ऐप्लिकेशन के हिसाब से लिया जाता है, लेकिन यह एक अहम बात है!
हाल ही में, हमने बेसलाइन और पॉलीफ़िल के बारे में सोचने के तरीके के बारे में एक पोस्ट पब्लिश की थी. हमें लगता है कि इससे, इनका इस्तेमाल करने के बारे में सोचने के लिए मददगार फ़्रेमवर्क मिलता है. हमें उम्मीद है कि नई या ज़्यादातर ब्राउज़र पर उपलब्ध सुविधाओं के बेसलाइन बनने से, पॉलीफ़िल की ज़रूरत कम हो जाएगी. इसमें कोई शक नहीं है कि डेवलपमेंट टूलबॉक्स में पॉलीफ़िल काम के टूल हैं. हालांकि, इनमें कुछ नुकसान भी हैं. इनसे आपकी वेबसाइट की परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. साथ ही, कुछ मामलों में ऐक्सेस करने से जुड़ी समस्याएं भी आ सकती हैं. उम्मीद है कि इस गाइड से आपको इस मुश्किल सवाल का जवाब पाने में मदद मिलेगी!
contenteditable="plaintext-only" अब बेसलाइन के तौर पर उपलब्ध है
एचटीएमएल एलिमेंट पर मौजूद contenteditable एट्रिब्यूट की मदद से, उपयोगकर्ता उस एलिमेंट के कॉन्टेंट में वैसे ही बदलाव कर सकता है जैसे वह टेक्स्ट फ़ील्ड हो. उदाहरण के लिए, इसका मतलब है कि एट्रिब्यूट को <p> एलिमेंट पर रखा जा सकता है और उपयोगकर्ता उससे <textarea> की तरह इंटरैक्ट कर सकता है. कुछ इस्तेमाल के उदाहरणों में, contenteditable का इस्तेमाल करने से सामान्य फ़ॉर्म एलिमेंट की तुलना में फ़ायदे मिलते हैं.
हालांकि, उपयोगकर्ता बदलाव किए जा सकने वाले एलिमेंट में कॉन्टेंट चिपकाते हैं. चिपकाए गए कॉन्टेंट में रिच टेक्स्ट फ़ॉर्मैटिंग हो सकती है. इससे उन उपयोगकर्ताओं को परेशानी हो सकती है जो किसी फ़ील्ड में बिना फ़ॉर्मैट वाला टेक्स्ट चिपकाना चाहते हैं. contenteditable="plaintext-only" एट्रिब्यूट/वैल्यू कॉम्बिनेशन की मदद से, ऐसा होने से रोका जा सकता है. हाल ही में, यह बेसलाइन के तौर पर उपलब्ध हुआ है. ज़्यादा जानने के लिए, एलान वाली पोस्ट पढ़ें. साथ ही, उन उपयोगकर्ताओं के लिए, टेक्स्ट में बदलाव करने का बेहतर अनुभव देने का तरीका जानें जो सिर्फ़ टेक्स्ट चिपकाना चाहते हैं.
Intl.DurationFormat अब बेसलाइन के तौर पर उपलब्ध है
आपने शायद अपने जीवन में किसी समय किसी वेबसाइट पर जाकर, कुछ टेक्स्ट देखा हो. यह टेक्स्ट, किसी इवेंट के होने तक या उसके बाद की समयावधि के बारे में बताता है. आम तौर पर, यह टेक्स्ट "2 दिन, 6 घंटे, 3 मिनट" जैसी स्ट्रिंग में होता है. यह डेटा, समय पर कई चीज़ों के बारे में बताने के लिए काम का होता है. हालांकि, इसे अक्सर लाइब्रेरी से मिलता है. इसके अलावा, हो सकता है कि आपको इस जानकारी को कई भाषाओं में दिखाना हो.
Intl.DurationFormat डालें. यह अंतरराष्ट्रीय स्तर पर उपलब्ध कराने की सुविधा है, जो हाल ही में बेसलाइन के तौर पर उपलब्ध हुई है. Intl.DurationFormat क्लास की मदद से, उसके कंस्ट्रक्टर में एक ऑब्जेक्ट पास किया जा सकता है. इसमें समय की उन इकाइयों को शामिल किया जा सकता है जिन्हें आपको स्ट्रिंग में फ़ॉर्मैट करना है. साथ ही, इसे किसी भी भाषा में फ़ॉर्मैट किया जा सकता है:
const duration = {
years: 1,
hours: 20,
minutes: 15,
seconds: 35
};
// English output: '1 year, 20 hours, 15 minutes, 35 seconds'
new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// German output: '1 Jahr, 20 Stunden, 15 Minuten und 35 Sekunden'
new Intl.DurationFormat('de', { style: 'long' }).format(duration);
// Spanish output: '1 año, 20 horas, 15 minutos y 35 segundos'
new Intl.DurationFormat('es', { style: 'long' }).format(duration);
इस सुविधा की सबसे दिलचस्प बात यह है कि अगर आपका ऐप्लिकेशन इस तरह की स्ट्रिंग को फ़ॉर्मैट करने के लिए किसी लाइब्रेरी का इस्तेमाल करता है, तो जल्द ही आपके पास लाइब्रेरी के बिना ऐसा करने का विकल्प होगा. इससे, आपके उपयोगकर्ताओं के लिए किलोबाइट की बचत होगी. ज़्यादा जानकारी के लिए, Intl.DurationFormat के बारे में की गई घोषणा की पोस्ट पढ़ें. साथ ही, जानें कि इस नई सुविधा का फ़ायदा कैसे लिया जा सकता है!
W3C Breakouts Day 2025 में बेसलाइन
हाल ही में, W3C ने Breakouts Day का 2025 का एडिशन आयोजित किया था. इसमें सदस्यों ने अलग-अलग विषयों पर प्रज़ेंटेशन दिया. साथ ही, 26 मार्च को बेसलाइन के बारे में एक काम का सेशन दिया गया.
अगर आपने Baseline का इस्तेमाल पहले कभी नहीं किया है, तो इस सेशन में आपको इसकी खास जानकारी मिलेगी. इसमें Baseline की बुनियादी बातों के बारे में बताया गया है. जैसे, हाल ही में और बड़े पैमाने पर उपलब्ध कॉन्सेप्ट. साथ ही, यह भी बताया गया है कि डेटा से इन परिभाषाओं का पता कैसे लगाया जाता है. यह जानकारी browser-compat-data से लेकर web-features डेटा तक के बारे में है. इससे हमें यह पता लगाने में मदद मिलती है कि कौनसी सुविधाएं Baseline के किस थ्रेशोल्ड पर हैं.
अगर आपने यह सेशन नहीं देखा है, तो चिंता न करें! सेशन की स्लाइड पहले से ही उपलब्ध हैं. इसलिए, अगर आपको जानना है कि सेशन में क्या हुआ था, तो उन्हें देखें.
फ़िलहाल इतना ही!
महीने के इस डाइजेस्ट में, महीने के आखिर के साथ-साथ तिमाही के आखिर की जानकारी भी दी जाती है. अगर आपने डाइजेस्ट के पिछले वर्शन नहीं देखे हैं, तो इस साल की पहली तिमाही में Baseline के साथ हुई सभी गतिविधियों के बारे में जानने के लिए, जनवरी और फ़रवरी के एडिशन देखें. अगर हमें बेसलाइन से जुड़ी कोई जानकारी छूट गई है, तो हमें बताएं. हम पक्का करेंगे कि उसे अगले एडिशन में शामिल कर लिया जाए. एक महीने में मिलते हैं!