लगभग 15 साल पहले, मैं एक कंपनी में काम कर रहा था जहाँ हम ट्रैवल एजेंटों, हवाई अड्डे के कर्मचारियों और एयरलाइन कंपनियों के लिए ऐप बनाते थे। हमने यूआई घटकों और सिंगल-पेज ऐप क्षमताओं के लिए अपना स्वयं का इन-हाउस ढांचा भी बनाया है। हमारे पास हर चीज़ के लिए घटक थे: फ़ील्ड, बटन, टैब, रेंज, डेटाटेबल्स, मेनू, डेटपिकर, चयन और मल्टीसेलेक्ट। हमारे पास एक div घटक भी था। वैसे, हमारा div घटक बहुत अच्छा था, इसने हमें सभी ब्राउज़रों पर गोल कोनों को करने की अनुमति दी, जो कि विश्वास करें या न करें, उस समय ऐसा करना आसान बात नहीं थी।
हमारा काम हमारे इतिहास में एक ऐसे बिंदु पर हुआ जब जेएस, अजाक्स और गतिशील HTML को एक क्रांति के रूप में देखा गया जो हमें भविष्य में ले आई। अचानक, हम एक पेज को गतिशील रूप से अपडेट कर सकते थे, एक सर्वर से डेटा प्राप्त कर सकते थे, और अन्य पेजों पर नेविगेट करने से बच सकते थे, जिसे धीमा देखा गया और दो पेजों के बीच स्क्रीन पर एक बड़ा सफेद आयत दिखाई दिया। जेफ एटवुड (स्टैक ओवरफ़्लो के संस्थापक) द्वारा लोकप्रिय बनाया गया एक वाक्यांश था, जिसमें लिखा था: "कोई भी एप्लिकेशन जो जावास्क्रिप्ट में लिखा जा सकता है, अंततः जावास्क्रिप्ट में ही लिखा जाएगा।" - जेफ एटवुड
उस समय हमारे लिए, यह वास्तव में जाकर उन ऐप्स को बनाने का साहस जैसा लगा। ऐसा लगा जैसे जेएस के साथ सब कुछ करने की पूरी मंजूरी मिल गई हो। इसलिए हमने जेएस के साथ सब कुछ किया, और हमने वास्तव में चीजों को करने के अन्य तरीकों पर शोध करने के लिए समय नहीं लिया। HTML और CSS क्या कर सकते हैं, यह ठीक से सीखने के लिए हमें वास्तव में प्रोत्साहन महसूस नहीं हुआ। हमने वास्तव में वेब को संपूर्ण रूप से एक विकसित हो रहे ऐप प्लेटफ़ॉर्म के रूप में नहीं देखा। हमने ज्यादातर इसे ऐसी चीज़ के रूप में देखा, जिस पर हमें काम करने की ज़रूरत थी, खासकर जब ब्राउज़र समर्थन की बात आती है। काम पूरा करने के लिए हम इसमें और अधिक जेएस डाल सकते हैं। क्या वेब कैसे काम करता है और प्लेटफ़ॉर्म पर क्या उपलब्ध है, इसके बारे में अधिक जानने में समय लगाने से मुझे मदद मिलेगी? निश्चित रूप से, मैं शायद बहुत सारे कोड हटा सकता था जिसकी वास्तव में आवश्यकता नहीं थी। लेकिन, उस समय, शायद उतना नहीं। आप देखिए, उस समय ब्राउज़र में अंतर काफी महत्वपूर्ण थे। यह वह समय था जब इंटरनेट एक्सप्लोरर अभी भी प्रमुख ब्राउज़र था, फ़ायरफ़ॉक्स दूसरे स्थान पर था, लेकिन क्रोम के तेजी से लोकप्रियता हासिल करने के कारण बाजार हिस्सेदारी कम होने लगी। हालाँकि क्रोम और फ़ायरफ़ॉक्स वेब मानकों पर सहमत होने में काफी अच्छे थे, लेकिन जिस वातावरण में हमारे ऐप्स चल रहे थे उसका मतलब था कि हमें लंबे समय तक IE6 का समर्थन करना होगा। यहां तक कि जब हमें IE8 का समर्थन करने की अनुमति दी गई थी, तब भी हमें ब्राउज़रों के बीच बहुत सारे अंतरों से निपटना पड़ा। इतना ही नहीं, बल्कि उस समय के वेब में प्लेटफ़ॉर्म में इतनी अधिक क्षमताएँ निर्मित नहीं थीं।
आज तक तेजी से आगे बढ़ें. चीजें काफी बदल गई हैं. न केवल हमारे पास ये क्षमताएं पहले से कहीं अधिक हैं, बल्कि उनके उपलब्ध होने की दर भी बढ़ी है। तो फिर मैं फिर से प्रश्न पूछना चाहता हूँ: क्या वेब कैसे काम करता है और प्लेटफ़ॉर्म पर क्या उपलब्ध है, इसके बारे में अधिक जानने के लिए समय निकालने से आज आपको मदद मिलेगी? बिल्कुल हाँ। आज वेब प्लेटफ़ॉर्म को समझना और उसका उपयोग करना सीखना आपको अन्य डेवलपर्स की तुलना में बड़े लाभ की स्थिति में रखता है। चाहे आप प्रदर्शन, पहुंच, जवाबदेही, इन सभी पर एक साथ काम करते हैं, या सिर्फ यूआई सुविधाओं को शिपिंग करते हैं, यदि आप इसे एक जिम्मेदार इंजीनियर के रूप में करना चाहते हैं, तो आपके लिए उपलब्ध टूल को जानने से आपको अपने लक्ष्यों तक तेजी से और बेहतर तरीके से पहुंचने में मदद मिलती है। कुछ चीज़ें जिनके लिए अब आपको लाइब्रेरी की आवश्यकता नहीं होगी यह जानने के बाद कि आज ब्राउज़र किसका समर्थन करते हैं, सवाल यह है: हम क्या छोड़ सकते हैं? क्या हमें 2025 में गोलाकार कोनों को करने के लिए एक div घटक की आवश्यकता है? निःसंदेह, हम ऐसा नहीं करते। बॉर्डर-रेडियस प्रॉपर्टी को इस समय 15 वर्षों से अधिक समय से वर्तमान में उपयोग किए जाने वाले सभी ब्राउज़रों द्वारा समर्थित किया गया है। और अधिक आकर्षक कोनों के लिए कोने का आकार भी जल्द ही आ रहा है। आइए अपेक्षाकृत हाल की सुविधाओं पर एक नज़र डालें जो अब सभी प्रमुख ब्राउज़रों में उपलब्ध हैं, और जिनका उपयोग आप अपने कोडबेस में मौजूदा निर्भरता को बदलने के लिए कर सकते हैं। मुद्दा यह नहीं है कि आप अपनी सभी प्रिय लाइब्रेरीज़ को तुरंत हटा दें और अपने कोडबेस को फिर से लिखें। बाकी सभी चीज़ों के लिए, आपको पहले ब्राउज़र समर्थन को ध्यान में रखना होगा और अपने प्रोजेक्ट के लिए विशिष्ट अन्य कारकों के आधार पर निर्णय लेना होगा। निम्नलिखित सुविधाएँ तीन मुख्य ब्राउज़र इंजनों (क्रोमियम, वेबकिट और गेको) में लागू की गई हैं, लेकिन आपके पास अलग-अलग ब्राउज़र समर्थन आवश्यकताएँ हो सकती हैं जो आपको तुरंत उनका उपयोग करने से रोकती हैं। हालाँकि, अभी भी इन सुविधाओं के बारे में जानने का एक अच्छा समय है, और शायद किसी बिंदु पर उनका उपयोग करने की योजना है। पॉपओवर और डायलॉग पॉपओवर एपीआई, <डायलॉग> HTML तत्व और ::बैकड्रॉप छद्म तत्व आपको पॉपअप पर निर्भरता से छुटकारा पाने में मदद कर सकते हैं,टूलटिप, और डायलॉग लाइब्रेरी, जैसे फ़्लोटिंग यूआई, टिप्पी.जेएस, टीथर, या रिएक्ट टूलटिप। वे आपके लिए एक्सेसिबिलिटी और फोकस प्रबंधन को लीक से हटकर संभालते हैं, सीएसएस का उपयोग करके अत्यधिक अनुकूलन योग्य हैं, और आसानी से एनिमेटेड हो सकते हैं। अकॉर्डियन <विवरण> तत्व, परस्पर अनन्य तत्वों के लिए इसका नाम विशेषता, और :: विवरण-सामग्री छद्म-तत्व बूटस्ट्रैप अकॉर्डियन या रिएक्ट अकॉर्डियन घटक जैसे अकॉर्डियन घटकों की आवश्यकता को हटा देता है। यहां प्लेटफ़ॉर्म का उपयोग करने का मतलब है कि HTML/CSS जानने वाले लोगों के लिए किसी विशिष्ट लाइब्रेरी का उपयोग करना सीखे बिना आपके कोड को समझना आसान है। इसका मतलब यह भी है कि आप लाइब्रेरी में बदलावों को तोड़ने या उस लाइब्रेरी को बंद करने से प्रतिरक्षित हैं। और, निःसंदेह, इसका अर्थ है डाउनलोड करने और चलाने के लिए कम कोड। परस्पर अनन्य विवरण तत्वों को खोलने, बंद करने या चेतन करने के लिए JS की आवश्यकता नहीं होती है। सीएसएस सिंटैक्स कैस्केड परतें, अधिक व्यवस्थित सीएसएस कोडबेस के लिए, सीएसएस नेस्टिंग, अधिक कॉम्पैक्ट सीएसएस के लिए, नए रंग फ़ंक्शन, सापेक्ष रंग और रंग-मिश्रण, नए गणित फ़ंक्शन जैसे एब्स(), साइन(), पाउ() और अन्य सीएसएस प्री-प्रोसेसर, बूटस्ट्रैप और टेलविंड जैसे उपयोगिता लाइब्रेरी, या यहां तक कि रनटाइम सीएसएस-इन-जेएस लाइब्रेरी पर निर्भरता को कम करने में मदद करते हैं। गेम चेंजर :has(), लंबे समय से सबसे अधिक अनुरोधित सुविधाओं में से एक, अधिक जटिल जेएस-आधारित समाधानों की आवश्यकता को हटा देता है। जेएस उपयोगिताएँ आधुनिक ऐरे विधियां जैसे फाइंडलास्ट (), या एट (), साथ ही अंतर (), इंटरसेक्शन (), यूनियन () और अन्य जैसी सेट विधियां लॉडैश जैसे पुस्तकालयों पर निर्भरता को कम कर सकती हैं। कंटेनर क्वेरीज़ कंटेनर क्वेरीज़ यूआई घटकों को व्यूपोर्ट आकार के अलावा अन्य चीजों पर प्रतिक्रिया देती हैं, और इसलिए उन्हें विभिन्न संदर्भों में अधिक पुन: प्रयोज्य बनाती हैं। इसके लिए अब जेएस-हेवी यूआई लाइब्रेरी का उपयोग करने की आवश्यकता नहीं है, और पॉलीफ़िल का उपयोग करने की भी आवश्यकता नहीं है। लेआउट ग्रिड, सबग्रिड, फ्लेक्सबॉक्स, या मल्टी-कॉलम काफी समय से मौजूद हैं, लेकिन स्टेट ऑफ सीएसएस सर्वेक्षणों के परिणामों को देखते हुए, यह स्पष्ट है कि डेवलपर्स नई चीजों को अपनाने में बहुत सतर्क रहते हैं, और ऐसा करने से पहले बहुत लंबे समय तक इंतजार करते हैं। ये सुविधाएँ लंबे समय से बेसलाइन हैं और आप इनका उपयोग बूटस्ट्रैप के ग्रिड सिस्टम, फाउंडेशन फ्रेमवर्क के फ्लेक्सबॉक्स यूटिलिटीज, बुलमा फिक्स्ड ग्रिड, मटेरियलाइज ग्रिड या टेलविंड कॉलम जैसी चीजों पर निर्भरता से छुटकारा पाने के लिए कर सकते हैं। मैं यह नहीं कह रहा हूं कि आपको अपना ढांचा छोड़ देना चाहिए। आपकी टीम ने इसे किसी कारण से अपनाया है, और इसे हटाना एक बड़ी परियोजना हो सकती है। लेकिन यह देखने पर कि शीर्ष पर किसी तृतीय-पक्ष आवरण के बिना वेब प्लेटफ़ॉर्म क्या पेशकश कर सकता है, बहुत सारे लाभ लाता है। ऐसी चीज़ें जिनकी आपको निकट भविष्य में आवश्यकता नहीं होगी अब, आइए कुछ ऐसी चीज़ों पर एक नज़र डालें जिनके लिए निकट भविष्य में आपको लाइब्रेरी की आवश्यकता नहीं होगी। कहने का तात्पर्य यह है कि नीचे दी गई चीजें बड़े पैमाने पर अपनाने के लिए बिल्कुल तैयार नहीं हैं, लेकिन उनके बारे में जागरूक होना और बाद में संभावित उपयोग की योजना बनाना मददगार हो सकता है। एंकर पोजिशनिंग सीएसएस एंकर पोजिशनिंग अन्य तत्वों के सापेक्ष पॉपओवर और टूलटिप्स की स्थिति को संभालती है, और पृष्ठ को स्थानांतरित करने, स्क्रॉल करने या आकार बदलने पर भी उन्हें ध्यान में रखने का ख्याल रखती है। यह पहले बताए गए पॉपओवर एपीआई का एक बेहतरीन पूरक है, जो अधिक प्रदर्शन-गहन जेएस समाधानों से दूर जाना और भी आसान बना देगा। नेविगेशन एपीआई नेविगेशन एपीआई का उपयोग सिंगल-पेज ऐप्स में नेविगेशन को संभालने के लिए किया जा सकता है और यह रिएक्ट राउटर, नेक्स्ट.जेएस रूटिंग या एंगुलर रूटिंग कार्यों के लिए एक बेहतरीन पूरक या प्रतिस्थापन भी हो सकता है। ट्रांज़िशन एपीआई देखें व्यू ट्रांज़िशन एपीआई किसी पृष्ठ की विभिन्न स्थितियों के बीच एनिमेट कर सकता है। एकल-पृष्ठ एप्लिकेशन पर, यह राज्यों के बीच सहज बदलाव को बहुत आसान बनाता है, और आपको Anime.js, GSAP, या Motion.dev जैसी एनीमेशन लाइब्रेरी से छुटकारा पाने में मदद कर सकता है। इससे भी बेहतर, एपीआई का उपयोग एकाधिक-पृष्ठ अनुप्रयोगों के साथ भी किया जा सकता है। पहले याद करें, जब मैंने कहा था कि जिस कंपनी में मैंने 15 साल पहले काम किया था, वहां हमने सिंगल-पेज ऐप्स का निर्माण नेविगेशन करते समय पेज रीलोड के सफेद फ्लैश से बचने के लिए किया था? यदि वह एपीआई उस समय उपलब्ध होती, तो हम एकल-पृष्ठ ढांचे के बिना और संपूर्ण ऐप के विशाल प्रारंभिक डाउनलोड के बिना सुंदर पृष्ठ संक्रमण प्रभाव प्राप्त करने में सक्षम होते। स्क्रॉल-संचालित एनिमेशन स्क्रॉल-संचालित एनिमेशन समय के बजाय उपयोगकर्ता की स्क्रॉल स्थिति पर चलते हैं, जिससे वे कहानी कहने और उत्पाद भ्रमण के लिए एक बेहतरीन समाधान बन जाते हैं। कुछ लोग इसके साथ कुछ हद तक आगे बढ़ गए हैं, लेकिन जब अच्छी तरह से उपयोग किया जाता है, तो यह एक बहुत प्रभावी डिज़ाइन टूल हो सकता है, और लाइब्रेरीज़ से छुटकारा पाने में मदद कर सकता है जैसे: स्क्रॉलरिवील, जीएसएपी स्क्रॉल, यावाह.जे.एस. अनुकूलन योग्य चयन एक अनुकूलन योग्य चयन एक सामान्य
ज़रूर, आपके इंटरनेट कनेक्शन की गति भी शायद बढ़ गई है, लेकिन यह हर किसी के लिए मामला नहीं है। और हर किसी के पास समान उपकरण क्षमताएं भी नहीं होती हैं। इसके बजाय, आप प्लेटफ़ॉर्म के साथ जो काम कर सकते हैं, उनके लिए तृतीय-पक्ष कोड खींचने का संभवतः यह मतलब है कि आप अधिक कोड शिप करते हैं, और इसलिए आप सामान्य से कम ग्राहकों तक पहुंचते हैं। वेब पर, खराब लोडिंग प्रदर्शन के कारण बड़े पैमाने पर परित्याग दर होती है और ब्रांड प्रतिष्ठा को नुकसान पहुंचता है। उपकरणों पर कम कोड चलाना इसके अलावा, जो कोड आप अपने ग्राहकों के डिवाइस पर भेजते हैं, वह संभवतः तेजी से चलता है यदि वह प्लेटफ़ॉर्म के शीर्ष पर कम जावास्क्रिप्ट एब्स्ट्रैक्शन का उपयोग करता है। यह संभवतः डिफ़ॉल्ट रूप से अधिक प्रतिक्रियाशील और अधिक पहुंच योग्य भी है। यह सब अधिक और खुश ग्राहकों की ओर ले जाता है। मेरे सहयोगी एलेक्स रसेल का वार्षिक प्रदर्शन असमानता अंतर ब्लॉग देखें, जो दर्शाता है कि धन असमानता के कारण प्रीमियम डिवाइस अरबों उपयोगकर्ताओं वाले बाजारों से काफी हद तक अनुपस्थित हैं। और यह अंतर समय के साथ बढ़ता ही जा रहा है।
अंतर्निर्मित चिनाई लेआउट एक वेब प्लेटफ़ॉर्म सुविधा जो जल्द ही आने वाली है और जिसके बारे में मैं बहुत उत्साहित हूं वह है सीएसएस मेसनरी।
सबसे पहले मैं यह समझाना शुरू करूँगा कि चिनाई क्या है। चिनाई क्या है चिनाई एक प्रकार का लेआउट है जिसे वर्षों पहले Pinterest द्वारा लोकप्रिय बनाया गया था। यह सामग्री के स्वतंत्र ट्रैक बनाता है जिसके भीतर आइटम ट्रैक की शुरुआत के जितना करीब हो सके खुद को पैक कर लेते हैं।
बहुत से लोग चिनाई को पोर्टफोलियो और फोटो गैलरी के लिए एक बेहतरीन विकल्प के रूप में देखते हैं, जो यह निश्चित रूप से कर सकता है। लेकिन चिनाई Pinterest पर आप जो देखते हैं उससे अधिक लचीली है, और यह केवल झरने जैसे लेआउट तक सीमित नहीं है। चिनाई वाले लेआउट में:
ट्रैक कॉलम या पंक्तियाँ हो सकते हैं:
सभी सामग्री ट्रैक का आकार एक जैसा नहीं होना चाहिए:
आइटम एकाधिक ट्रैक में फैले हो सकते हैं:
वस्तुओं को विशिष्ट ट्रैक पर रखा जा सकता है; उन्हें हमेशा स्वचालित प्लेसमेंट एल्गोरिदम का पालन करने की आवश्यकता नहीं है:
प्रदर्शन यहां कुछ सरल डेमो दिए गए हैं जो मैंने क्रोमियम में सीएसएस मेसनरी के आगामी कार्यान्वयन का उपयोग करके बनाए हैं। एक फोटो गैलरी डेमो, जिसमें दिखाया गया है कि कैसे आइटम (इस मामले में शीर्षक) कई ट्रैक तक फैल सकते हैं:
विभिन्न आकारों के ट्रैक दिखाने वाली एक अन्य फोटो गैलरी:
एक समाचार साइट लेआउट जिसमें कुछ ट्रैक दूसरों की तुलना में व्यापक हैं, और कुछ आइटम लेआउट की पूरी चौड़ाई में फैले हुए हैं:
एक कंबन बोर्ड जो दर्शाता है कि वस्तुओं को विशिष्ट ट्रैक पर रखा जा सकता है:
ध्यान दें: दपिछले डेमो क्रोमियम के एक संस्करण के साथ बनाए गए थे जो अभी तक अधिकांश वेब उपयोगकर्ताओं के लिए उपलब्ध नहीं है, क्योंकि सीएसएस मेसनरी केवल ब्राउज़रों में लागू होना शुरू हो रहा है। हालाँकि, वेब डेवलपर पहले से ही वर्षों से चिनाई लेआउट बनाने के लिए पुस्तकालयों का उपयोग खुशी-खुशी कर रहे हैं। आज चिनाई का उपयोग करने वाली साइटें दरअसल, चिनाई आज वेब पर काफी आम है। यहां कुछ उदाहरण दिए गए हैं जो मुझे Pinterest के अलावा मिले:
और कुछ और, कम स्पष्ट, उदाहरण:
तो, ये लेआउट कैसे बनाए गए? समाधान एक तरकीब जो मैंने देखी है वह है फ्लेक्सबॉक्स लेआउट का उपयोग करना, इसकी दिशा को कॉलम में बदलना और इसे रैप करने के लिए सेट करना। इस तरह, आप चिनाई लेआउट का आभास देते हुए, विभिन्न ऊंचाइयों की वस्तुओं को कई, स्वतंत्र स्तंभों में रख सकते हैं:
हालाँकि, इस समाधान की दो सीमाएँ हैं:
वस्तुओं का क्रम वास्तविक चिनाई वाले लेआउट से भिन्न होता है। फ्लेक्सबॉक्स के साथ, आइटम पहले कॉलम को पहले भरते हैं और जब यह भर जाता है, तो अगले कॉलम पर जाते हैं। चिनाई के साथ, आइटम उस ट्रैक (या इस मामले में कॉलम) में ढेर हो जाएंगे, जहां अधिक जगह उपलब्ध होगी। लेकिन साथ ही, और शायद अधिक महत्वपूर्ण बात यह है कि इस समाधान के लिए आवश्यक है कि आप फ्लेक्सबॉक्स कंटेनर के लिए एक निश्चित ऊंचाई निर्धारित करें; अन्यथा, कोई रैपिंग नहीं होगी.
तृतीय-पक्ष चिनाई पुस्तकालय अधिक उन्नत मामलों के लिए, डेवलपर्स पुस्तकालयों का उपयोग कर रहे हैं। इसके लिए सबसे प्रसिद्ध और लोकप्रिय लाइब्रेरी को मेसनरी कहा जाता है, और एनपीएम के अनुसार इसे प्रति सप्ताह लगभग 200,000 बार डाउनलोड किया जाता है। स्क्वैरस्पेस एक लेआउट घटक भी प्रदान करता है जो बिना कोड वाले विकल्प के लिए मेसनरी लेआउट प्रस्तुत करता है, और कई साइटें इसका उपयोग करती हैं। ये दोनों विकल्प लेआउट में आइटम रखने के लिए जावास्क्रिप्ट कोड का उपयोग करते हैं। अंतर्निर्मित चिनाई मैं वास्तव में उत्साहित हूं कि मेसनरी अब ब्राउज़रों में एक अंतर्निहित सीएसएस सुविधा के रूप में दिखाई देने लगी है। समय के साथ, आप मेसनरी का उपयोग वैसे ही कर पाएंगे जैसे आप ग्रिड या फ्लेक्सबॉक्स करते हैं, यानी बिना किसी वर्कअराउंड या थर्ड-पार्टी कोड की आवश्यकता के। माइक्रोसॉफ्ट में मेरी टीम क्रोमियम ओपन सोर्स प्रोजेक्ट में बिल्ट-इन मेसनरी सपोर्ट लागू कर रही है, जिस पर एज, क्रोम और कई अन्य ब्राउज़र आधारित हैं। मोज़िला वास्तव में 2020 में मेसनरी के प्रायोगिक कार्यान्वयन का प्रस्ताव देने वाला पहला ब्राउज़र विक्रेता था। और Apple भी इस नए वेब लेआउट को आदिम बनाने में बहुत रुचि रखता है। सामान्य दिशा और यहां तक कि एक नए डिस्प्ले प्रकार के डिस्प्ले: ग्रिड-लेन के बारे में सीएसएस कार्य समूह के भीतर समझौते के साथ, सुविधा को मानकीकृत करने का काम भी आगे बढ़ रहा है। यदि आप चिनाई के बारे में अधिक जानना चाहते हैं और प्रगति को ट्रैक करना चाहते हैं, तो मेरा सीएसएस चिनाई संसाधन पृष्ठ देखें। समय के साथ, जब चिनाई एक बेसलाइन सुविधा बन जाएगी, ग्रिड या फ्लेक्सबॉक्स की तरह, हम आसानी से इसका उपयोग कर पाएंगे और इससे लाभ उठा पाएंगे:
बेहतर प्रदर्शन, बेहतर प्रतिक्रिया, उपयोग में आसानी और सरल कोड।
आइए इन पर करीब से नज़र डालें। बेहतर प्रदर्शन अपना स्वयं का चिनाई जैसा लेआउट सिस्टम बनाना, या इसके बजाय किसी तृतीय-पक्ष लाइब्रेरी का उपयोग करने का मतलब है कि आपको स्क्रीन पर आइटम रखने के लिए जावास्क्रिप्ट कोड चलाना होगा। इसका मतलब यह भी है कि यह कोड रेंडर ब्लॉकिंग होगा। वास्तव में, या तो कुछ भी दिखाई नहीं देगा, या चीजें सही जगह पर या सही आकार में नहीं होंगी, जब तक कि जावास्क्रिप्ट कोड नहीं चलता। चिनाई लेआउट का उपयोग अक्सर वेब पेज के मुख्य भाग के लिए किया जाता है, जिसका अर्थ है कि कोड आपकी मुख्य सामग्री को बाद में प्रदर्शित करेगा, अन्यथा यह आपके एलसीपी, या सबसे बड़े कंटेंटफुल पेंट मीट्रिक को ख़राब कर देगा, जो कथित प्रदर्शन और खोज इंजन अनुकूलन में एक बड़ी भूमिका निभाता है। मैंने एक साधारण लेआउट के साथ और DevTools में धीमे 4G कनेक्शन का अनुकरण करके मेसनरी JS लाइब्रेरी का परीक्षण किया। लाइब्रेरी बहुत बड़ी नहीं है (24KB, 7.8KB gzipped), लेकिन मेरी परीक्षण स्थितियों के तहत इसे लोड होने में 600ms लगे। यहां एक प्रदर्शन रिकॉर्डिंग है जो मेसनरी लाइब्रेरी के लिए 600ms लंबे लोड समय को दिखाती है, और जब ऐसा हो रहा था तो कोई अन्य रेंडरिंग गतिविधि नहीं हुई थी:
इसके अलावा, प्रारंभिक लोड समय के बाद, डाउनलोड की गई स्क्रिप्ट को पार्स करने, संकलित करने और फिर चलाने की आवश्यकता होती है। ये सभी, जैसा कि पहले उल्लेख किया गया है, पृष्ठ के प्रतिपादन को अवरुद्ध कर रहे थे। ब्राउज़र में अंतर्निहित मेसनरी कार्यान्वयन के साथ, हमारे पास लोड करने और चलाने के लिए कोई स्क्रिप्ट नहीं होगी। ब्राउज़र इंजन आरंभिक पेज रेंडरिंग चरण के दौरान ही अपना काम करेगा। बेहतर जवाबदेही जब कोई पेज पहली बार लोड होता है, उसी तरह, ब्राउज़र विंडो का आकार बदलने से उस पेज में लेआउट फिर से प्रस्तुत हो जाता है। हालाँकि, इस बिंदु पर, यदि पृष्ठ मेसनरी जेएस लाइब्रेरी का उपयोग कर रहा है, तो स्क्रिप्ट को दोबारा लोड करने की कोई आवश्यकता नहीं है, क्योंकि यह पहले से ही हैयहाँ। हालाँकि, आइटम को सही स्थानों पर ले जाने वाले कोड को चलाने की आवश्यकता है। अब पेज लोड होने पर यह विशेष लाइब्रेरी ऐसा करने में काफी तेज लगती है। हालाँकि, यह वस्तुओं को तब एनिमेट करता है जब उन्हें विंडो आकार बदलने पर किसी भिन्न स्थान पर ले जाने की आवश्यकता होती है, और इससे एक बड़ा अंतर आता है। निःसंदेह, उपयोगकर्ता अपनी ब्राउज़र विंडो का आकार बदलने में उतना समय नहीं लगाते जितना हम डेवलपर्स लगाते हैं। लेकिन यह एनिमेटेड आकार बदलने का अनुभव काफी परेशान करने वाला हो सकता है और पेज को अपने नए आकार के अनुकूल होने में लगने वाले अनुमानित समय को बढ़ा देता है। उपयोग में आसानी और सरल कोड किसी वेब सुविधा का उपयोग करना कितना आसान है और कोड कितना सरल दिखता है, ये महत्वपूर्ण कारक हैं जो आपकी टीम के लिए बड़ा बदलाव ला सकते हैं। बेशक, वे कभी भी अंतिम उपयोगकर्ता अनुभव जितने महत्वपूर्ण नहीं हो सकते, लेकिन डेवलपर अनुभव रखरखाव को प्रभावित करता है। अंतर्निहित वेब सुविधा का उपयोग करने से उस मोर्चे पर महत्वपूर्ण लाभ मिलते हैं:
जो डेवलपर्स पहले से ही HTML, CSS और JS जानते हैं, वे संभवतः उस सुविधा का आसानी से उपयोग कर पाएंगे क्योंकि इसे अच्छी तरह से एकीकृत करने और बाकी वेब प्लेटफ़ॉर्म के अनुरूप होने के लिए डिज़ाइन किया गया है। सुविधा का उपयोग करने के तरीके में किए गए परिवर्तनों को तोड़ने का कोई जोखिम नहीं है। उस सुविधा के अप्रचलित या रखरखावहीन हो जाने का जोखिम लगभग शून्य है।
अंतर्निर्मित चिनाई के मामले में, क्योंकि यह एक लेआउट आदिम है, आप इसे सीएसएस से उपयोग करते हैं, ग्रिड या फ्लेक्सबॉक्स की तरह, इसमें कोई जेएस शामिल नहीं है। साथ ही, अन्य लेआउट-संबंधित सीएसएस गुण, जैसे गैप, आपकी अपेक्षा के अनुरूप काम करते हैं। इसके बारे में जानने के लिए कोई तरकीबें या उपाय नहीं हैं, और जो चीजें आप सीखते हैं वे एमडीएन पर प्रलेखित हैं। मेसनरी जेएस लिब के लिए, आरंभीकरण थोड़ा जटिल है: इसमें कॉलम और गैप आकार सेट करने के लिए छिपे हुए HTML तत्वों के साथ-साथ एक विशिष्ट सिंटैक्स के साथ एक डेटा विशेषता की आवश्यकता होती है। साथ ही, यदि आप स्तंभों को फैलाना चाहते हैं, तो आपको समस्याओं से बचने के लिए अंतराल आकार को स्वयं शामिल करना होगा:
<शैली> .ट्रैक-आकार, .आइटम { चौड़ाई: 20%; } .गटर आकार { चौड़ाई: 1रेम; } .आइटम { ऊंचाई: 100px; मार्जिन-ब्लॉक-एंड: 1रेम; } .आइटम:एनवां-बाल(विषम) { ऊंचाई: 200px; } .आइटम--चौड़ाई2 { चौड़ाई: कैल्क(40% + 1रेम); }
आइए इसकी तुलना इस बात से करें कि अंतर्निहित चिनाई कार्यान्वयन कैसा दिखेगा: <शैली> .कंटेनर { प्रदर्शन: ग्रिड-लेन; ग्रिड-लेन: दोहराएँ(4,20%); गैप: 1रेम; } .आइटम { ऊंचाई: 100px; } .आइटम:एनवां-बाल(विषम) { ऊंचाई: 200px; } .आइटम--चौड़ाई2 { ग्रिड-कॉलम: स्पैन 2; }
सरल, अधिक कॉम्पैक्ट कोड जो केवल गैप जैसी चीजों का उपयोग कर सकता है और जहां स्पैनिंग ट्रैक को ग्रिड की तरह स्पैन 2 के साथ किया जाता है, और आपको सही चौड़ाई की गणना करने की आवश्यकता नहीं होती है जिसमें गैप आकार शामिल होता है। कैसे जानें कि क्या उपलब्ध है और कब उपलब्ध है? कुल मिलाकर, सवाल वास्तव में यह नहीं है कि आपको जेएस लाइब्रेरी में बिल्ट-इन मेसनरी का उपयोग करना चाहिए या नहीं, बल्कि सवाल यह है कि कब। मेसनरी जेएस लाइब्रेरी अद्भुत है और कई वर्षों से वेब प्लेटफ़ॉर्म में और कई खुश डेवलपर्स और उपयोगकर्ताओं के लिए एक अंतर भर रही है। बेशक, यदि आप इसकी तुलना अंतर्निहित चिनाई कार्यान्वयन से करते हैं तो इसमें कुछ कमियां हैं, लेकिन यदि कार्यान्वयन तैयार नहीं है तो वे महत्वपूर्ण नहीं हैं। मेरे लिए इन बेहतरीन नए वेब प्लेटफ़ॉर्म सुविधाओं को सूचीबद्ध करना आसान है क्योंकि मैं एक ब्राउज़र विक्रेता के यहाँ काम करता हूँ, और इसलिए मुझे पता रहता है कि क्या होने वाला है। लेकिन डेवलपर अक्सर सर्वेक्षण दर सर्वेक्षण साझा करते हैं कि नई चीज़ों पर नज़र रखना कठिन है। सूचित रहना कठिन है, और कंपनियाँ हमेशा सीखने को प्राथमिकता नहीं देती हैं। इसमें सहायता के लिए, यहां कुछ संसाधन दिए गए हैं जो सरल और संक्षिप्त तरीकों से अपडेट प्रदान करते हैं ताकि आप अपनी आवश्यक जानकारी तुरंत प्राप्त कर सकें:
वेब प्लेटफ़ॉर्म में एक्सप्लोरर साइट की सुविधा है: आपको इसके रिलीज़ नोट्स पृष्ठ में रुचि हो सकती है। और, यदि आपको आरएसएस पसंद है, तो रिलीज़ नोट्स फ़ीड, साथ ही बेसलाइन नई उपलब्ध और व्यापक रूप से उपलब्ध फ़ीड देखें।
जालप्लेटफ़ॉर्म स्थिति डैशबोर्ड: आपको इसके विभिन्न बेसलाइन वर्ष पृष्ठ पसंद आ सकते हैं।
Chrome प्लेटफ़ॉर्म स्थिति का रोडमैप पृष्ठ।
यदि आपके पास थोड़ा अधिक समय है, तो आपको ब्राउज़र विक्रेताओं के रिलीज़ नोट्स में भी रुचि हो सकती है:
क्रोम धार फ़ायरफ़ॉक्स सफ़ारी
और भी अधिक संसाधनों के लिए, मेरी नेविगेटिंग द वेब प्लेटफ़ॉर्म चीटशीट देखें। मेरी बात अभी भी लागू नहीं हुई है यह समस्या का दूसरा पक्ष है। भले ही आपको समय, ऊर्जा और नज़र रखने के तरीके मिल भी जाएं, फिर भी आपकी आवाज़ सुनने और आपकी पसंदीदा सुविधाओं को लागू करने में निराशा होती है। हो सकता है कि आप वर्षों से किसी विशिष्ट बग के समाधान होने, या ब्राउज़र में किसी विशिष्ट सुविधा के आने का इंतजार कर रहे हों, जहां वह अभी भी गायब है। मैं जो कहूंगा वह यह है कि ब्राउज़र विक्रेता सुनते हैं। मैं कई क्रॉस-संगठन टीमों का हिस्सा हूं जहां हम हर समय डेवलपर सिग्नल और फीडबैक पर चर्चा करते हैं। हम फीडबैक के कई अलग-अलग स्रोतों को देखते हैं, प्रत्येक ब्राउज़र विक्रेता के आंतरिक और फ़ोरम, ओपन सोर्स प्रोजेक्ट, ब्लॉग और सर्वेक्षण पर बाहरी/सार्वजनिक दोनों। और, हम हमेशा डेवलपर्स के लिए उनकी विशिष्ट आवश्यकताओं और उपयोग के मामलों को साझा करने के लिए बेहतर तरीके बनाने का प्रयास कर रहे हैं। इसलिए, यदि आप कर सकते हैं, तो कृपया ब्राउज़र विक्रेताओं से अधिक की मांग करें और हम पर उन सुविधाओं को लागू करने के लिए दबाव डालें जिनकी आपको आवश्यकता है। मुझे लगता है कि इसमें समय लगता है, और यह डराने वाला भी हो सकता है (प्रवेश के लिए उच्च बाधा का उल्लेख नहीं है), लेकिन यह काम भी करता है। यहां कुछ तरीके दिए गए हैं जिनसे आप अपनी (या अपनी कंपनी की) आवाज सुन सकते हैं: जेएस की वार्षिक स्थिति, सीएसएस की स्थिति और एचटीएमएल सर्वेक्षणों की स्थिति लें। ब्राउज़र विक्रेता अपने काम को कैसे प्राथमिकता देते हैं, इसमें वे एक बड़ी भूमिका निभाते हैं। यदि आपको सभी ब्राउज़रों में लगातार लागू होने के लिए एक विशिष्ट मानक-आधारित एपीआई की आवश्यकता है, तो अगले इंटरऑप प्रोजेक्ट पुनरावृत्ति पर एक प्रस्ताव सबमिट करने पर विचार करें। इसके लिए अधिक समय की आवश्यकता है, लेकिन विचार करें कि Shopify और RUMvision ने Interop 2026 के लिए अपनी इच्छा सूची कैसे साझा की। इस तरह की विस्तृत जानकारी ब्राउज़र विक्रेताओं को प्राथमिकता देने के लिए बहुत उपयोगी हो सकती है। ब्राउज़र विक्रेताओं को प्रभावित करने के लिए अधिक उपयोगी लिंक के लिए, मेरी नेविगेटिंग द वेब प्लेटफ़ॉर्म चीटशीट देखें। निष्कर्ष समाप्त करने के लिए, मुझे आशा है कि इस लेख ने आपको सोचने के लिए कुछ चीजें छोड़ दी हैं:
चिनाई और अन्य आगामी वेब सुविधाओं के लिए उत्साह। कुछ वेब सुविधाएँ जिनका आप उपयोग शुरू करना चाहेंगे। कस्टम या तृतीय-पक्ष कोड के कुछ टुकड़े आप अंतर्निहित सुविधाओं के पक्ष में हटाने में सक्षम हो सकते हैं। क्या हो रहा है उस पर नज़र रखने और ब्राउज़र विक्रेताओं को प्रभावित करने के कुछ तरीके।
इससे भी महत्वपूर्ण बात यह है कि मुझे आशा है कि मैंने आपको वेब प्लेटफ़ॉर्म को उसकी पूरी क्षमता से उपयोग करने के लाभों के बारे में आश्वस्त कर दिया है।
