लगभग 15 वर्ष पहिले, म एउटा कम्पनीमा काम गरिरहेको थिएँ जहाँ हामीले ट्राभल एजेन्टहरू, एयरपोर्ट कामदारहरू, र एयरलाइन कम्पनीहरूका लागि एपहरू बनाएका थियौं। हामीले UI कम्पोनेन्टहरू र एकल-पृष्ठ एप क्षमताहरूका लागि हाम्रो आफ्नै इन-हाउस फ्रेमवर्क पनि निर्माण गरेका छौं। हामीसँग सबै कुराका लागि कम्पोनेन्टहरू थिए: फिल्डहरू, बटनहरू, ट्याबहरू, दायराहरू, डाटाटेबलहरू, मेनुहरू, मितिपिकरहरू, चयनहरू, र बहुचयनहरू। हामीसँग div कम्पोनेन्ट पनि थियो। हाम्रो div कम्पोनेन्ट वैसे पनि उत्कृष्ट थियो, यसले हामीलाई सबै ब्राउजरहरूमा गोलाकार कुनाहरू गर्न अनुमति दियो, जुन विश्वास गर्नुहोस् वा नगर्नुहोस्, त्यस समयमा गर्न सजिलो कुरा थिएन।
हाम्रो काम हाम्रो इतिहासको एक बिन्दुमा भयो जब JS, Ajax, र गतिशील HTML लाई क्रान्तिको रूपमा हेरिएको थियो जसले हामीलाई भविष्यमा ल्यायो। अचानक, हामीले पृष्ठलाई गतिशील रूपमा अद्यावधिक गर्न, सर्भरबाट डेटा प्राप्त गर्न, र अन्य पृष्ठहरूमा नेभिगेट गर्नबाट बच्न सक्छौं, जुन ढिलो देखिन्थ्यो र दुई पृष्ठहरू बीचको स्क्रिनमा ठूलो सेतो आयत फ्ल्यास भयो। त्यहाँ एउटा वाक्यांश थियो, जेफ एटवुड (स्ट्याकओभरफ्लोको संस्थापक) द्वारा लोकप्रिय बनाइएको थियो, जसले पढ्यो: "जाभास्क्रिप्टमा लेख्न सकिने कुनै पनि अनुप्रयोग अन्ततः जाभास्क्रिप्टमा लेखिनेछ।" - जेफ एटवुड
हामीलाई त्यतिबेला, यो वास्तवमा गएर ती एपहरू सिर्जना गर्ने हिम्मत जस्तो लाग्यो। यो JS संग सबै गर्न को लागी एक कम्बल स्वीकृति जस्तै महसुस भयो। त्यसोभए हामीले जेएससँग सबै कुरा गर्यौं, र हामीले काम गर्ने अन्य तरिकाहरू अनुसन्धान गर्न वास्तवमै समय लियौं। हामीले वास्तवमा HTML र CSS ले के गर्न सक्छ भनेर जान्नको लागि प्रोत्साहन महसुस गरेनौं। हामीले वेबलाई पूर्ण रूपमा विकसित एप प्लेटफर्मको रूपमा बुझेका छैनौं। हामीले प्रायः यसलाई हामीले काम गर्न आवश्यक पर्ने चीजको रूपमा देख्यौं, विशेष गरी जब यो ब्राउजर समर्थनको लागि आयो। हामीले कामहरू गर्नका लागि यसमा थप JS फाल्न सक्छौं। वेबले कसरी काम गर्यो र प्लेटफर्ममा के उपलब्ध छ भन्ने बारे थप जान्नको लागि समय लिने हो कि यसले मलाई मद्दत गरेको छ? पक्कै पनि, मैले सायद कोडको गुच्छा खौरन सक्थेँ जुन वास्तवमा आवश्यक थिएन। तर, त्यतिबेला सायद त्यति धेरै थिएन। तपाईंले देख्नुभयो, ब्राउजर भिन्नताहरू त्यतिबेला धेरै महत्त्वपूर्ण थिए। यो समय थियो जब इन्टरनेट एक्सप्लोरर अझै पनि प्रभावशाली ब्राउजर थियो, फायरफक्स नजिकको दोस्रो भएको थियो, तर क्रोमले द्रुत रूपमा लोकप्रियता हासिल गरेको कारण बजार साझेदारी गुमाउन थाल्यो। यद्यपि क्रोम र फायरफक्स वेब मापदण्डहरूमा सहमत हुन धेरै राम्रो थिए, हाम्रा एपहरू चलिरहेको वातावरणको अर्थ हामीले लामो समयसम्म IE6 लाई समर्थन गर्नुपर्थ्यो। हामीले IE8 लाई समर्थन गर्न अनुमति दिँदा पनि, हामीले अझै पनि ब्राउजरहरू बीच धेरै भिन्नताहरूको सामना गर्नुपर्यो। त्यो मात्र होइन, तर समयको वेबसँग प्लेटफर्ममा निर्माण गरिएका धेरै क्षमताहरू थिएनन्।
आजको लागि छिटो अगाडि बढ्नुहोस्। चीजहरू धेरै परिवर्तन भएका छन्। हामीसँग पहिले भन्दा यी क्षमताहरू मात्र होइन, तर ती उपलब्ध हुने दर पनि बढेको छ। मलाई फेरि प्रश्न सोध्न दिनुहोस्, त्यसोभए: वेबले कसरी काम गर्छ र प्लेटफर्ममा के उपलब्ध छ भन्ने बारे थप जान्नको लागि के समय लिने हो? बिल्कुल हो। आज वेब प्लेटफर्म बुझ्न र प्रयोग गर्न सिक्नुले तपाईंलाई अन्य विकासकर्ताहरू भन्दा ठूलो फाइदामा राख्छ। तपाईं कार्यसम्पादन, पहुँच, प्रतिक्रियाशीलता, ती सबै सँगै काम गर्नुहुन्छ, वा केवल ढुवानी UI सुविधाहरू, यदि तपाईं यसलाई जिम्मेवार इन्जिनियरको रूपमा गर्न चाहनुहुन्छ भने, तपाईंका लागि उपलब्ध उपकरणहरू जान्नले तपाईंलाई आफ्नो लक्ष्यहरू छिटो र राम्रोसँग पुग्न मद्दत गर्दछ। केहि चीजहरू तपाईलाई अब पुस्तकालयको आवश्यकता नहुन सक्छ आज कुन ब्राउजरहरूले समर्थन गर्दछ भनेर थाह पाएर, प्रश्न, त्यसोभए, यो हो: हामी के छोड्न सक्छौं? के हामीलाई २०२५ मा गोलाकार कुनाहरू गर्न div कम्पोनेन्ट चाहिन्छ? अवश्य पनि, हामी गर्दैनौं। सीमा-त्रिज्य गुण सबै हाल प्रयोग गरिएका ब्राउजरहरूले यस बिन्दुमा 15 वर्ष भन्दा बढीको लागि समर्थन गरेको छ। र कुना-आकार पनि चाँडै आउँदैछ, फ्यान्सियर कुनाहरूको लागि पनि। अब सबै प्रमुख ब्राउजरहरूमा उपलब्ध रहेका अपेक्षाकृत भर्खरका सुविधाहरूमा एक नजर राखौं, र जुन तपाईं आफ्नो कोडबेसमा अवस्थित निर्भरताहरू बदल्न प्रयोग गर्न सक्नुहुन्छ। बिन्दु तपाईको सबै प्रिय पुस्तकालयहरूलाई तुरुन्तै खाडल गर्नु र तपाईको कोडबेस पुन: लेख्नु होइन। अरू सबै कुराको लागि, तपाईंले पहिले ब्राउजर समर्थनलाई खातामा लिनु आवश्यक छ र तपाईंको परियोजनाको लागि विशिष्ट अन्य कारकहरूमा आधारित निर्णय गर्नुहोस्। निम्न सुविधाहरू तीन मुख्य ब्राउजर इन्जिनहरू (क्रोमियम, वेबकिट, र गेको) मा लागू गरिएका छन्, तर तपाईंसँग फरक ब्राउजर समर्थन आवश्यकताहरू हुन सक्छन् जसले तपाईंलाई तिनीहरूलाई तुरुन्तै प्रयोग गर्नबाट रोक्छ। अहिले पनि यी सुविधाहरूको बारेमा जान्नको लागि राम्रो समय हो, यद्यपि, र सायद तिनीहरूलाई कुनै बिन्दुमा प्रयोग गर्ने योजना बनाउनुहोस्। Popovers र संवादहरू Popover API,
पक्कै पनि, तपाइँको इन्टरनेट जडान गति पनि बढेको छ, तर यो सबैको लागि मामला होइन। र सबैसँग समान उपकरण क्षमताहरू पनि हुँदैनन्। तपाईंले प्लेटफर्मको साथ गर्न सक्ने कुराहरूको लागि तेस्रो-पक्ष कोड तान्नुको सट्टा, सायद यसको मतलब तपाईंले बढी कोड पठाउनु हो, र त्यसैले तपाईंले सामान्य रूपमा गर्नुहुने भन्दा कम ग्राहकहरूमा पुग्नु हो। वेबमा, खराब लोडिङ प्रदर्शनले ठूलो परित्याग दरहरू निम्त्याउँछ र ब्रान्ड प्रतिष्ठालाई चोट पुर्याउँछ। यन्त्रहरूमा कम कोड चलिरहेको छ यसबाहेक, तपाईंले आफ्नो ग्राहकहरूको यन्त्रहरूमा पठाउनुहुने कोड सम्भवतः छिटो चल्छ यदि यसले प्लेटफर्मको शीर्षमा कम जाभास्क्रिप्ट एब्स्ट्र्याक्सनहरू प्रयोग गर्दछ। यो पनि पूर्वनिर्धारित रूपमा अधिक उत्तरदायी र अधिक पहुँचयोग्य छ। यी सबैले थप र खुसी ग्राहकहरूलाई नेतृत्व गर्दछ। मेरो सहकर्मी एलेक्स रसेलको वार्षिक कार्यसम्पादन असमानता ग्याप ब्लग जाँच गर्नुहोस्, जसले प्रिमियम यन्त्रहरू धन असमानताका कारण अरबौं प्रयोगकर्ताहरू भएका बजारहरूबाट ठूलो मात्रामा अनुपस्थित रहेको देखाउँछ। र यो खाडल केवल समय संग बढ्दै छ।
बिल्ट-इन चिनाई लेआउट एउटा वेब प्लेटफर्म सुविधा जुन चाँडै आउँदैछ र जसको बारेमा म धेरै उत्साहित छु CSS चिनाई हो।
मलाई चिनाई के हो भनेर व्याख्या गरेर सुरु गरौं। चिनाई के हो चिनाई लेआउटको एक प्रकार हो जुन Pinterest द्वारा वर्षौं पहिले लोकप्रिय बनाइएको थियो। यसले सामग्रीको स्वतन्त्र ट्र्याकहरू सिर्जना गर्दछ जसमा वस्तुहरूले आफूलाई ट्र्याकको सुरुमा सकेसम्म प्याक गर्दछ।
धेरै व्यक्तिहरूले चिनाईलाई पोर्टफोलियो र फोटो ग्यालरीहरूको लागि उत्कृष्ट विकल्पको रूपमा हेर्छन्, जुन यसले निश्चित रूपमा गर्न सक्छ। तर चिनाई तपाईले Pinterest मा देख्नुहुने भन्दा धेरै लचिलो छ, र यो केवल झरना जस्तै लेआउटहरूमा सीमित छैन। चिनाई लेआउटमा:
ट्र्याकहरू स्तम्भ वा पङ्क्तिहरू हुन सक्छन्:
सामग्रीका ट्र्याकहरू सबै एउटै साइज हुनुपर्दैन:
वस्तुहरूले धेरै ट्र्याकहरू फैलाउन सक्छ:
वस्तुहरू विशिष्ट ट्र्याकहरूमा राख्न सकिन्छ; तिनीहरूले सधैं स्वचालित प्लेसमेन्ट एल्गोरिथ्म पछ्याउनुपर्दैन:
डेमो यहाँ केहि सरल डेमोहरू छन् जुन मैले क्रोमियममा CSS मेसनरीको आगामी कार्यान्वयन प्रयोग गरेर बनाएको छु। एउटा फोटो ग्यालेरी डेमो, कसरी वस्तुहरू (यस अवस्थामा शीर्षक) धेरै ट्र्याकहरू फैलाउन सक्छ भनेर देखाउँदै:
अर्को फोटो ग्यालेरीले विभिन्न आकारका ट्र्याकहरू देखाउँदै:
केही ट्र्याकहरू अरू भन्दा फराकिलो भएको समाचार साइट लेआउट, र लेआउटको सम्पूर्ण चौडाइमा फैलिएका केही वस्तुहरू:
वस्तुहरू निर्दिष्ट ट्र्याकहरूमा राख्न सकिन्छ भनेर देखाउने कान्बान बोर्ड:
नोट: दअघिल्लो डेमोहरू क्रोमियमको संस्करणको साथ बनाइएको थियो जुन अझै धेरै वेब प्रयोगकर्ताहरूको लागि उपलब्ध छैन, किनभने CSS मेसनरी केवल ब्राउजरहरूमा लागू हुन थालेको छ। जे होस्, वेब विकासकर्ताहरूले वर्षौंदेखि चिनाई लेआउटहरू सिर्जना गर्न पुस्तकालयहरू खुसीसाथ प्रयोग गर्दै आएका छन्। आज चिनाई प्रयोग गर्ने साइटहरू वास्तवमा, चिनाई आज वेबमा धेरै सामान्य छ। यहाँ केहि उदाहरणहरू छन् जुन मैले Pinterest बाहेक फेला पारेको छु:
र केहि थप, कम स्पष्ट, उदाहरणहरू:
त्यसोभए, यी लेआउटहरू कसरी सिर्जना गरियो? समाधान एउटा चाल जुन मैले प्रयोग गरेको देखेको छु यसको सट्टामा फ्लेक्सबक्स लेआउट प्रयोग गर्दै, यसको दिशा स्तम्भमा परिवर्तन गर्दै, र यसलाई र्याप गर्न सेट गर्दै। यस तरिकाले, तपाईं विभिन्न उचाइका वस्तुहरू बहु, स्वतन्त्र स्तम्भहरूमा राख्न सक्नुहुन्छ, चिनाई लेआउटको छाप दिँदै:
तथापि, यस समाधानका साथ दुई सीमाहरू छन्:
वस्तुहरूको क्रम वास्तविक चिनाई लेआउटको साथ के हुनेछ भन्दा फरक छ। फ्लेक्सबक्सको साथ, वस्तुहरूले पहिलो स्तम्भ भर्छन् र, जब यो भरिन्छ, त्यसपछि अर्को स्तम्भमा जानुहोस्। चिनाईको साथ, वस्तुहरू जुन पनि ट्र्याकमा स्ट्याक हुनेछ (वा यस अवस्थामा स्तम्भ) थप ठाउँ उपलब्ध छ। तर पनि, र सायद अझ महत्त्वपूर्ण कुरा, यो समाधानको लागि तपाईंले Flexbox कन्टेनरमा निश्चित उचाइ सेट गर्न आवश्यक छ; अन्यथा, कुनै र्यापिङ हुने थिएन।
तेस्रो-पक्ष चिनाई पुस्तकालयहरू थप उन्नत केसहरूको लागि, विकासकर्ताहरूले पुस्तकालयहरू प्रयोग गर्दै आएका छन्। यसको लागि सबैभन्दा प्रसिद्ध र लोकप्रिय पुस्तकालयलाई केवल मेसनरी भनिन्छ, र यो NPM अनुसार प्रति हप्ता लगभग 200,000 पटक डाउनलोड हुन्छ। स्क्वायरस्पेसले लेआउट कम्पोनेन्ट पनि प्रदान गर्दछ जसले मेसनरी लेआउट प्रदान गर्दछ, नो-कोड विकल्पको लागि, र धेरै साइटहरूले यसलाई प्रयोग गर्छन्। यी दुबै विकल्पहरूले लेआउटमा वस्तुहरू राख्नको लागि JavaScript कोड प्रयोग गर्दछ। बिल्ट-इन चिनाई म साँच्चै उत्साहित छु कि मेसनरी अब ब्राउजरहरूमा निर्मित CSS सुविधाको रूपमा देखा पर्न थाल्छ। समय बित्दै जाँदा, तपाईले ग्रिड वा फ्लेक्सबक्स जस्तै, कुनै पनि समाधान वा तेस्रो-पक्ष कोडको आवश्यकता बिना नै चिनाई प्रयोग गर्न सक्षम हुनुहुनेछ। माइक्रोसफ्टमा मेरो टोलीले क्रोमियम ओपन सोर्स प्रोजेक्टमा बिल्ट-इन मेसनरी समर्थन लागू गरिरहेको छ, जुन एज, क्रोम, र अन्य धेरै ब्राउजरहरूमा आधारित छन्। Mozilla वास्तवमा 2020 मा मेसनरीको प्रयोगात्मक कार्यान्वयनको प्रस्ताव गर्ने पहिलो ब्राउजर विक्रेता थियो। र Apple ले पनि यो नयाँ वेब लेआउट आदिम बनाउनमा धेरै चासो राखेको छ। सामान्य दिशा र नयाँ डिस्प्ले प्रकारको डिस्प्ले: ग्रिड-लेनहरू बारे CSS कार्य समूह भित्रको सहमतिको साथ, सुविधालाई मानकीकरण गर्ने काम पनि अगाडि बढिरहेको छ। यदि तपाइँ चिनाईको बारेमा थप जान्न र प्रगति ट्र्याक गर्न चाहनुहुन्छ भने, मेरो CSS चिनाई स्रोतहरू पृष्ठ हेर्नुहोस्। समयमा, जब चिनाई आधारभूत सुविधा बन्छ, जस्तै ग्रिड वा फ्लेक्सबक्स, हामी यसलाई प्रयोग गर्न र फाइदा लिन सक्षम हुनेछौं:
राम्रो प्रदर्शन, राम्रो प्रतिक्रियाशीलता, प्रयोगको सजिलो र सरल कोड।
यिनीहरूलाई नजिकबाट हेरौं। राम्रो प्रदर्शन तपाईंको आफ्नै चिनाई-जस्तो लेआउट प्रणाली बनाउनु, वा यसको सट्टा तेस्रो-पक्ष पुस्तकालय प्रयोग गर्नुको मतलब तपाईंले स्क्रिनमा वस्तुहरू राख्नको लागि जाभास्क्रिप्ट कोड चलाउनु पर्छ। यसको मतलब यो कोड रेन्डर अवरुद्ध हुनेछ। वास्तवमा, या त केहि देखिनेछैन, वा चीजहरू सही ठाउँहरूमा वा सही आकारको हुनेछैन, जबसम्म त्यो JavaScript कोड चल्दैन। मेसनरी लेआउट प्रायः वेब पृष्ठको मुख्य भागको लागि प्रयोग गरिन्छ, जसको अर्थ कोडले तपाइँको मुख्य सामग्रीलाई अन्यथा हुन सक्ने भन्दा पछि देखा पर्नेछ, तपाइँको LCP, वा सबैभन्दा ठूलो सामग्री पेन्ट मेट्रिक, जसले कथित प्रदर्शन र खोज इन्जिन अप्टिमाइजेसनमा ठूलो भूमिका खेल्छ। मैले एक साधारण लेआउटको साथ र DevTools मा एक ढिलो 4G जडान सिमुलेट गरेर मेसनरी JS पुस्तकालयको परीक्षण गरें। पुस्तकालय धेरै ठूलो छैन (24KB, 7.8KB gzipped), तर यसले मेरो परीक्षण अवस्थाहरूमा लोड गर्न 600ms लियो। यहाँ मेसनरी लाइब्रेरीको लागि लामो 600ms लोड समय देखाउने प्रदर्शन रेकर्डिङ छ, र त्यो भइरहेको बेला कुनै अन्य रेन्डरिङ गतिविधि भएन:
थप रूपमा, प्रारम्भिक लोड समय पछि, डाउनलोड गरिएको स्क्रिप्टलाई पार्स, कम्पाइल र त्यसपछि चलाउन आवश्यक छ। जुन सबै, पहिले उल्लेख गरिएझैं, पृष्ठको रेन्डरिङ रोकिरहेको थियो। ब्राउजरमा बिल्ट-इन मेसनरी कार्यान्वयनको साथ, हामीसँग लोड गर्न र चलाउनको लागि स्क्रिप्ट हुनेछैन। ब्राउजर इन्जिनले प्रारम्भिक पृष्ठ रेन्डरिङ चरणको समयमा मात्र यसको काम गर्नेछ। राम्रो प्रतिक्रियाशीलता पृष्ठ पहिलो पटक लोड हुँदा जस्तै, ब्राउजर विन्डोको रिसाइज गर्दा त्यो पृष्ठमा लेआउटलाई पुन: रेन्डर गर्न जान्छ। यस बिन्दुमा, यद्यपि, यदि पृष्ठले मेसनरी JS पुस्तकालय प्रयोग गरिरहेको छ भने, त्यहाँ स्क्रिप्ट फेरि लोड गर्न आवश्यक छैन, किनकि यो पहिले नै छ।यहाँ। यद्यपि, सही ठाउँहरूमा वस्तुहरू सार्ने कोड चल्न आवश्यक छ। अब यो विशेष पुस्तकालय पृष्ठ लोड हुँदा यो गर्न धेरै छिटो देखिन्छ। जे होस्, यसले वस्तुहरूलाई एनिमेसन गर्छ जब उनीहरूलाई विन्डो रिसाइजमा फरक ठाउँमा सार्न आवश्यक हुन्छ, र यसले ठूलो फरक पार्छ। निस्सन्देह, प्रयोगकर्ताहरूले उनीहरूको ब्राउजर विन्डोज रिसाइज गर्न समय खर्च गर्दैनन् जति हामी विकासकर्ताहरूले गर्छौं। तर यो एनिमेटेड रिसाइजिङ अनुभव धेरै झन्झट हुन सक्छ र पृष्ठलाई यसको नयाँ आकारमा अनुकूलन गर्न लाग्ने समयलाई थप्छ। प्रयोगको सजिलो र सरल कोड वेब सुविधा प्रयोग गर्न कत्तिको सजिलो छ र कोड कत्तिको सरल देखिन्छ महत्त्वपूर्ण कारकहरू हुन् जसले तपाईंको टोलीको लागि ठूलो फरक पार्न सक्छ। तिनीहरू कहिले पनि अन्तिम प्रयोगकर्ता अनुभव जत्तिकै महत्त्वपूर्ण हुन सक्दैनन्, अवश्य पनि, तर विकासकर्ता अनुभवले मर्मतयोग्यतालाई असर गर्छ। बिल्ट-इन वेब सुविधा प्रयोग गर्दा त्यो अगाडि महत्त्वपूर्ण फाइदाहरू आउँछन्:
HTML, CSS, र JS लाई पहिले नै थाहा भएका विकासकर्ताहरूले सम्भवतः त्यो सुविधा सजिलैसँग प्रयोग गर्न सक्षम हुनेछन् किनभने यो राम्रोसँग एकीकृत गर्न र बाँकी वेब प्लेटफर्मसँग सुसंगत हुन डिजाइन गरिएको हो। सुविधा प्रयोग गर्ने तरिकामा परिवर्तनहरू तोड्ने जोखिम छैन। त्यहाँ त्यो सुविधा अप्रत्याशित वा अपरिवर्तित हुने लगभग शून्य जोखिम छ।
बिल्ट-इन मेसनरीको मामलामा, किनकि यो लेआउट आदिम हो, तपाइँ यसलाई CSS बाट प्रयोग गर्नुहुन्छ, जस्तै ग्रिड वा फ्लेक्सबक्स, कुनै JS समावेश छैन। साथै, अन्य लेआउट-सम्बन्धित CSS गुणहरू, जस्तै ग्याप, तपाईंले उनीहरूलाई अपेक्षा गरेअनुसार काम गर्नुहोस्। त्यहाँ जान्नको लागि कुनै चाल वा उपायहरू छैनन्, र तपाईंले सिक्नुहुने कुराहरू MDN मा कागजात गरिएका छन्। Masonry JS lib को लागि, प्रारम्भिकता अलि जटिल छ: यसलाई स्तम्भ र ग्याप आकारहरू सेट गर्न लुकेका HTML तत्वहरूको साथमा एक विशिष्ट वाक्य रचनाको साथ डेटा विशेषता चाहिन्छ। साथै, यदि तपाईं स्तम्भहरू फैलाउन चाहनुहुन्छ भने, तपाईंले समस्याहरूबाट बच्नको लागि आफैंले ग्याप साइज समावेश गर्न आवश्यक छ:
बिल्ट-इन चिनाई कार्यान्वयन कस्तो देखिनेछ भनेर यसलाई तुलना गरौं:
ग्रिडमा जस्तै, ग्याप र जहाँ स्प्यानिङ ट्र्याकहरू स्प्यान २ मार्फत गरिन्छ, जस्ता कुराहरू मात्र प्रयोग गर्न सक्ने सरल, थप कम्प्याक्ट कोड, र तपाईंले ग्याप साइज समावेश गर्ने सही चौडाइ गणना गर्न आवश्यक पर्दैन। के उपलब्ध छ र कहिले उपलब्ध छ भनेर कसरी थाहा पाउने? समग्रमा, प्रश्न वास्तवमा होइन यदि तपाईले JS पुस्तकालयमा बिल्ट-इन चिनाई प्रयोग गर्नुपर्छ, बरु कहिले। मेसनरी JS पुस्तकालय अचम्मको छ र धेरै वर्षदेखि वेब प्लेटफर्ममा र धेरै खुसी विकासकर्ताहरू र प्रयोगकर्ताहरूको लागि खाली ठाउँ भर्दै आएको छ। यदि तपाइँ यसलाई निर्मित चिनाई कार्यान्वयनसँग तुलना गर्नुहुन्छ भने यसमा केही कमजोरीहरू छन्, अवश्य पनि, तर त्यो कार्यान्वयन तयार छैन भने ती महत्त्वपूर्ण छैनन्। मेरो लागि यी नयाँ नयाँ वेब प्लेटफर्म सुविधाहरू सूचीबद्ध गर्न सजिलो छ किनकि म ब्राउजर विक्रेतामा काम गर्छु, र म के आउँदैछ भनेर जान्न चाहन्छु। तर विकासकर्ताहरूले प्रायः साझा गर्छन्, सर्वेक्षण पछि सर्वेक्षण, नयाँ चीजहरूको ट्रयाक राख्न गाह्रो छ। सूचित रहन गाह्रो छ, र कम्पनीहरूले सधैं जसरी पनि सिक्न प्राथमिकता दिँदैनन्। यसमा मद्दतको लागि, यहाँ केहि स्रोतहरू छन् जसले सरल र कम्प्याक्ट तरिकामा अद्यावधिकहरू प्रदान गर्दछ ताकि तपाइँ तपाइँलाई आवश्यक जानकारी छिटो प्राप्त गर्न सक्नुहुन्छ:
वेब प्लेटफर्मले एक्सप्लोरर साइटको सुविधा दिन्छ: तपाइँ यसको रिलीज नोट पृष्ठ मा रुचि हुन सक्छ। र, यदि तपाईंलाई RSS मनपर्छ भने, रिलीज नोट फिड, साथै आधारभूत नयाँ उपलब्ध र व्यापक रूपमा उपलब्ध फिडहरू जाँच गर्नुहोस्।
वेबप्लेटफर्म स्थिति ड्यासबोर्ड: तपाईंले यसको विभिन्न आधारभूत वर्ष पृष्ठहरू मन पराउन सक्नुहुन्छ।
क्रोम प्लेटफर्म स्थितिको रोडम्याप पृष्ठ।
यदि तपाइँसँग अलि बढी समय छ भने, तपाइँ ब्राउजर विक्रेताहरूको रिलीज नोटहरूमा पनि रुचि राख्न सक्नुहुन्छ:
क्रोम किनारा फायरफक्स सफारी
थप स्रोतहरूको लागि, मेरो नेभिगेटिङ वेब प्लेटफर्म चीटसिट जाँच गर्नुहोस्। मेरो कुरा अझै कार्यान्वयन भएको छैन त्यो समस्याको अर्को पक्ष हो । तपाईंले ट्र्याक राख्नको लागि समय, ऊर्जा, र तरिकाहरू फेला पार्नुभए तापनि, तपाईंको आवाज सुन्न र तपाईंका मनपर्ने सुविधाहरू लागू गर्न अझै पनि निराशा छ। हुनसक्छ तपाइँ एक विशेष बग समाधान गर्न को लागी वर्षौं को लागी पर्खिरहनु भएको छ, वा ब्राउजर मा पठाउन को लागी एक विशेष सुविधा को लागी यो अझै हराइरहेको छ। म के भन्छु ब्राउजर विक्रेताहरू सुन्छन्। म धेरै क्रस-संगठन टोलीहरूको भाग हुँ जहाँ हामी सबै समय विकासकर्ता संकेतहरू र प्रतिक्रियाहरू छलफल गर्छौं। हामी प्रतिक्रियाका विभिन्न स्रोतहरू हेर्छौं, प्रत्येक ब्राउजर विक्रेतामा आन्तरिक र फोरमहरूमा बाह्य/सार्वजनिक, खुला स्रोत परियोजनाहरू, ब्लगहरू, र सर्वेक्षणहरू। र, हामी सँधै विकासकर्ताहरूका लागि तिनीहरूको विशिष्ट आवश्यकताहरू साझा गर्न र केसहरू प्रयोग गर्ने राम्रो तरिकाहरू सिर्जना गर्ने प्रयास गरिरहेका छौं। त्यसोभए, यदि तपाईं सक्नुहुन्छ भने, कृपया ब्राउजर विक्रेताहरूबाट थप माग गर्नुहोस् र हामीलाई आवश्यक सुविधाहरू लागू गर्न दबाब दिनुहोस्। मैले बुझें कि यसले समय लिन्छ, र डरलाग्दो पनि हुन सक्छ (प्रवेश गर्नको लागि उच्च बाधा उल्लेख नगर्नुहोस्), तर यसले पनि काम गर्दछ। यहाँ केहि तरिकाहरू छन् जुन तपाईंले आफ्नो (वा तपाईंको कम्पनीको) आवाज सुन्न सक्नुहुन्छ: वार्षिक स्टेट अफ जेएस, स्टेट अफ सीएसएस, र स्टेट अफ HTML सर्वेक्षणहरू लिनुहोस्। तिनीहरूले कसरी ब्राउजर विक्रेताहरूले आफ्नो कामलाई प्राथमिकता दिन्छन् भन्नेमा ठूलो भूमिका खेल्छन्। यदि तपाईंलाई ब्राउजरहरूमा निरन्तर रूपमा लागू गर्नको लागि एक विशिष्ट मानक-आधारित API चाहिन्छ भने, अर्को Interop परियोजना पुनरावृत्तिमा प्रस्ताव पेश गर्ने विचार गर्नुहोस्। यसलाई थप समय चाहिन्छ, तर विचार गर्नुहोस् कि कसरी Shopify र RUMvision ले Interop 2026 को लागि आफ्नो इच्छा सूचीहरू साझा गर्नुभयो। यस प्रकारको विस्तृत जानकारी ब्राउजर विक्रेताहरूलाई प्राथमिकता दिन धेरै उपयोगी हुन सक्छ। ब्राउजर विक्रेताहरूलाई प्रभाव पार्न थप उपयोगी लिङ्कहरूको लागि, मेरो नेभिगेटिङ वेब प्लेटफर्म चीटसिट जाँच गर्नुहोस्। निष्कर्ष बन्द गर्न, म आशा गर्दछु कि यो लेखले तपाईलाई केहि चीजहरूको बारेमा सोच्न छोडेको छ:
चिनाई र अन्य आगामी वेब सुविधाहरूको लागि उत्साह। तपाईंले प्रयोग गर्न सुरु गर्न चाहनुहुने केही वेब सुविधाहरू। अनुकूलन वा तेस्रो-पक्ष कोडका केही टुक्राहरू तपाईंले निर्मित सुविधाहरूको पक्षमा हटाउन सक्षम हुन सक्नुहुन्छ। के आउँदैछ भनेर ट्र्याक राख्न र ब्राउजर विक्रेताहरूलाई प्रभाव पार्ने केही तरिकाहरू।
अझ महत्त्वपूर्ण कुरा, म आशा गर्दछु कि मैले तपाईंलाई वेब प्लेटफर्मको पूर्ण क्षमतामा प्रयोग गर्ने फाइदाहरूको बारेमा विश्वस्त गरेको छु।