लगभग 15 वर्ष पहिले, म एउटा कम्पनीमा काम गरिरहेको थिएँ जहाँ हामीले ट्राभल एजेन्टहरू, एयरपोर्ट कामदारहरू, र एयरलाइन कम्पनीहरूका लागि एपहरू बनाएका थियौं। हामीले UI कम्पोनेन्टहरू र एकल-पृष्ठ एप क्षमताहरूका लागि हाम्रो आफ्नै इन-हाउस फ्रेमवर्क पनि निर्माण गरेका छौं। हामीसँग सबै कुराका लागि कम्पोनेन्टहरू थिए: फिल्डहरू, बटनहरू, ट्याबहरू, दायराहरू, डाटाटेबलहरू, मेनुहरू, मितिपिकरहरू, चयनहरू, र बहुचयनहरू। हामीसँग div कम्पोनेन्ट पनि थियो। हाम्रो div कम्पोनेन्ट वैसे पनि उत्कृष्ट थियो, यसले हामीलाई सबै ब्राउजरहरूमा गोलाकार कुनाहरू गर्न अनुमति दियो, जुन विश्वास गर्नुहोस् वा नगर्नुहोस्, त्यस समयमा गर्न सजिलो कुरा थिएन।

हाम्रो काम हाम्रो इतिहासको एक बिन्दुमा भयो जब JS, Ajax, र गतिशील HTML लाई क्रान्तिको रूपमा हेरिएको थियो जसले हामीलाई भविष्यमा ल्यायो। अचानक, हामीले पृष्ठलाई गतिशील रूपमा अद्यावधिक गर्न, सर्भरबाट डेटा प्राप्त गर्न, र अन्य पृष्ठहरूमा नेभिगेट गर्नबाट बच्न सक्छौं, जुन ढिलो देखिन्थ्यो र दुई पृष्ठहरू बीचको स्क्रिनमा ठूलो सेतो आयत फ्ल्यास भयो। त्यहाँ एउटा वाक्यांश थियो, जेफ एटवुड (स्ट्याकओभरफ्लोको संस्थापक) द्वारा लोकप्रिय बनाइएको थियो, जसले पढ्यो: "जाभास्क्रिप्टमा लेख्न सकिने कुनै पनि अनुप्रयोग अन्ततः जाभास्क्रिप्टमा लेखिनेछ।" - जेफ एटवुड

हामीलाई त्यतिबेला, यो वास्तवमा गएर ती एपहरू सिर्जना गर्ने हिम्मत जस्तो लाग्यो। यो JS संग सबै गर्न को लागी एक कम्बल स्वीकृति जस्तै महसुस भयो। त्यसोभए हामीले जेएससँग सबै कुरा गर्यौं, र हामीले काम गर्ने अन्य तरिकाहरू अनुसन्धान गर्न वास्तवमै समय लियौं। हामीले वास्तवमा HTML र CSS ले के गर्न सक्छ भनेर जान्नको लागि प्रोत्साहन महसुस गरेनौं। हामीले वेबलाई पूर्ण रूपमा विकसित एप प्लेटफर्मको रूपमा बुझेका छैनौं। हामीले प्रायः यसलाई हामीले काम गर्न आवश्यक पर्ने चीजको रूपमा देख्यौं, विशेष गरी जब यो ब्राउजर समर्थनको लागि आयो। हामीले कामहरू गर्नका लागि यसमा थप JS फाल्न सक्छौं। वेबले कसरी काम गर्‍यो र प्लेटफर्ममा के उपलब्ध छ भन्ने बारे थप जान्नको लागि समय लिने हो कि यसले मलाई मद्दत गरेको छ? पक्कै पनि, मैले सायद कोडको गुच्छा खौरन सक्थेँ जुन वास्तवमा आवश्यक थिएन। तर, त्यतिबेला सायद त्यति धेरै थिएन। तपाईंले देख्नुभयो, ब्राउजर भिन्नताहरू त्यतिबेला धेरै महत्त्वपूर्ण थिए। यो समय थियो जब इन्टरनेट एक्सप्लोरर अझै पनि प्रभावशाली ब्राउजर थियो, फायरफक्स नजिकको दोस्रो भएको थियो, तर क्रोमले द्रुत रूपमा लोकप्रियता हासिल गरेको कारण बजार साझेदारी गुमाउन थाल्यो। यद्यपि क्रोम र फायरफक्स वेब मापदण्डहरूमा सहमत हुन धेरै राम्रो थिए, हाम्रा एपहरू चलिरहेको वातावरणको अर्थ हामीले लामो समयसम्म IE6 लाई समर्थन गर्नुपर्थ्यो। हामीले IE8 लाई समर्थन गर्न अनुमति दिँदा पनि, हामीले अझै पनि ब्राउजरहरू बीच धेरै भिन्नताहरूको सामना गर्नुपर्‍यो। त्यो मात्र होइन, तर समयको वेबसँग प्लेटफर्ममा निर्माण गरिएका धेरै क्षमताहरू थिएनन्।

आजको लागि छिटो अगाडि बढ्नुहोस्। चीजहरू धेरै परिवर्तन भएका छन्। हामीसँग पहिले भन्दा यी क्षमताहरू मात्र होइन, तर ती उपलब्ध हुने दर पनि बढेको छ। मलाई फेरि प्रश्न सोध्न दिनुहोस्, त्यसोभए: वेबले कसरी काम गर्छ र प्लेटफर्ममा के उपलब्ध छ भन्ने बारे थप जान्नको लागि के समय लिने हो? बिल्कुल हो। आज वेब प्लेटफर्म बुझ्न र प्रयोग गर्न सिक्नुले तपाईंलाई अन्य विकासकर्ताहरू भन्दा ठूलो फाइदामा राख्छ। तपाईं कार्यसम्पादन, पहुँच, प्रतिक्रियाशीलता, ती सबै सँगै काम गर्नुहुन्छ, वा केवल ढुवानी UI सुविधाहरू, यदि तपाईं यसलाई जिम्मेवार इन्जिनियरको रूपमा गर्न चाहनुहुन्छ भने, तपाईंका लागि उपलब्ध उपकरणहरू जान्नले तपाईंलाई आफ्नो लक्ष्यहरू छिटो र राम्रोसँग पुग्न मद्दत गर्दछ। केहि चीजहरू तपाईलाई अब पुस्तकालयको आवश्यकता नहुन सक्छ आज कुन ब्राउजरहरूले समर्थन गर्दछ भनेर थाह पाएर, प्रश्न, त्यसोभए, यो हो: हामी के छोड्न सक्छौं? के हामीलाई २०२५ मा गोलाकार कुनाहरू गर्न div कम्पोनेन्ट चाहिन्छ? अवश्य पनि, हामी गर्दैनौं। सीमा-त्रिज्य गुण सबै हाल प्रयोग गरिएका ब्राउजरहरूले यस बिन्दुमा 15 वर्ष भन्दा बढीको लागि समर्थन गरेको छ। र कुना-आकार पनि चाँडै आउँदैछ, फ्यान्सियर कुनाहरूको लागि पनि। अब सबै प्रमुख ब्राउजरहरूमा उपलब्ध रहेका अपेक्षाकृत भर्खरका सुविधाहरूमा एक नजर राखौं, र जुन तपाईं आफ्नो कोडबेसमा अवस्थित निर्भरताहरू बदल्न प्रयोग गर्न सक्नुहुन्छ। बिन्दु तपाईको सबै प्रिय पुस्तकालयहरूलाई तुरुन्तै खाडल गर्नु र तपाईको कोडबेस पुन: लेख्नु होइन। अरू सबै कुराको लागि, तपाईंले पहिले ब्राउजर समर्थनलाई खातामा लिनु आवश्यक छ र तपाईंको परियोजनाको लागि विशिष्ट अन्य कारकहरूमा आधारित निर्णय गर्नुहोस्। निम्न सुविधाहरू तीन मुख्य ब्राउजर इन्जिनहरू (क्रोमियम, वेबकिट, र गेको) मा लागू गरिएका छन्, तर तपाईंसँग फरक ब्राउजर समर्थन आवश्यकताहरू हुन सक्छन् जसले तपाईंलाई तिनीहरूलाई तुरुन्तै प्रयोग गर्नबाट रोक्छ। अहिले पनि यी सुविधाहरूको बारेमा जान्नको लागि राम्रो समय हो, यद्यपि, र सायद तिनीहरूलाई कुनै बिन्दुमा प्रयोग गर्ने योजना बनाउनुहोस्। Popovers र संवादहरू Popover API,

HTML तत्व, र ::backdrop pseudo-element ले तपाईंलाई पपअपमा निर्भरताबाट छुटकारा पाउन मद्दत गर्न सक्छ,टुलटिप, र डायलग लाइब्रेरीहरू, जस्तै फ्लोटिंग UI, Tippy.js, Tether, वा React Tooltip। तिनीहरूले तपाइँको लागि पहुँच र फोकस व्यवस्थापन ह्यान्डल गर्छन्, बक्स बाहिर, CSS प्रयोग गरेर उच्च अनुकूलन योग्य छन्, र सजिलै एनिमेटेड गर्न सकिन्छ। Accordions <विवरण> तत्व, पारस्परिक रूपमा अनन्य तत्वहरूको लागि यसको नाम विशेषता, र ::विवरण-सामग्री स्यूडो-तत्वले बुटस्ट्र्याप एकॉर्डियन वा प्रतिक्रिया एकॉर्डियन कम्पोनेन्ट जस्ता एकॉर्डियन कम्पोनेन्टहरूको आवश्यकता हटाउँछ। यहाँ प्लेटफर्म प्रयोग गर्नुको अर्थ HTML/CSS जान्ने मानिसहरूलाई तपाइँको कोड बुझ्नको लागि पहिले कुनै विशेष पुस्तकालय प्रयोग गर्न सिक्नु बिना नै सजिलो हुन्छ। यसको मतलब यो पनि हो कि तपाईं पुस्तकालयमा भएका परिवर्तनहरू वा त्यो पुस्तकालयको विच्छेदन गर्न प्रतिरक्षा हुनुहुन्छ। र, निस्सन्देह, यसको मतलब डाउनलोड गर्न र चलाउन कम कोड। पारस्परिक रूपमा अनन्य विवरण तत्वहरूलाई खोल्न, बन्द गर्न वा एनिमेट गर्न JS आवश्यक पर्दैन। CSS सिन्ट्याक्स क्यास्केड तहहरू, थप व्यवस्थित CSS कोडबेसको लागि, CSS नेस्टिङ, थप कम्प्याक्ट CSS को लागि, नयाँ रङ प्रकार्यहरू, सापेक्षिक रंगहरू, र रङ-मिश्रण, नयाँ गणित प्रकार्यहरू जस्तै abs(), sign(), pow() र अन्यले CSS प्रि-प्रोसेसरहरूमा निर्भरता कम गर्न मद्दत गर्दछ, उपयोगिता पुस्तकालयहरू जस्तै Bootstrap र Tailwind, वा CSS-J- रन। खेल परिवर्तक :has(), लामो समयको लागि सबैभन्दा अनुरोध गरिएको सुविधाहरू मध्ये एक, थप जटिल JS-आधारित समाधानहरूको आवश्यकता हटाउँछ। JS उपयोगिताहरू FindLast(), or at(), साथै फरक(), intersection(), union() र अन्य जस्ता सेट विधिहरूले Lodash जस्ता पुस्तकालयहरूमा निर्भरता कम गर्न सक्छ। कन्टेनर प्रश्नहरू कन्टेनर क्वेरीहरूले UI कम्पोनेन्टहरूलाई भ्यूपोर्ट साइज बाहेक अन्य चीजहरूमा प्रतिक्रिया दिन्छ, र त्यसैले तिनीहरूलाई विभिन्न सन्दर्भहरूमा थप पुन: प्रयोगयोग्य बनाउँदछ। अब यसका लागि JS-heavy UI लाइब्रेरी प्रयोग गर्न आवश्यक पर्दैन, र पोलीफिल पनि प्रयोग गर्न आवश्यक पर्दैन। लेआउट ग्रिड, सबग्रिड, फ्लेक्सबक्स, वा बहु-स्तम्भहरू लामो समयदेखि वरिपरि छन्, तर CSS सर्वेक्षणहरूको राज्यको नतिजालाई हेर्दा, यो स्पष्ट छ कि विकासकर्ताहरू नयाँ चीजहरू अपनाउनमा धेरै सतर्क हुन्छन्, र तिनीहरूले गर्नु अघि धेरै लामो समय पर्खन्छन्। यी सुविधाहरू लामो समयदेखि आधारभूत छन् र तपाईंले तिनीहरूलाई बुटस्ट्र्यापको ग्रिड प्रणाली, फाउन्डेशन फ्रेमवर्कको फ्लेक्सबक्स उपयोगिताहरू, बुल्मा फिक्स्ड ग्रिड, मटेरियलाइज ग्रिड, वा टेलविन्ड स्तम्भहरू जस्ता चीजहरूमा निर्भरताबाट छुटकारा पाउन प्रयोग गर्न सक्नुहुन्छ। मैले भनेको होइन कि तपाईंले आफ्नो फ्रेमवर्क छोड्नुपर्छ। तपाईंको टोलीले यसलाई कारणको लागि अपनायो, र यसलाई हटाउनु ठूलो परियोजना हुन सक्छ। तर वेब प्लेटफर्मले तेस्रो-पक्ष र्यापर बिना शीर्षमा के प्रस्ताव गर्न सक्छ भनेर हेर्दा धेरै फाइदाहरू आउँछन्। तपाईलाई निकट भविष्यमा अब आवश्यक नहुन सक्ने चीजहरू अब, निकट भविष्यमा तपाईलाई पुस्तकालयको आवश्यकता पर्दैन भन्ने केहि चीजहरूमा द्रुत नजर राखौं। अर्थात्, तलका चीजहरू सामूहिक रूपमा अपनाउनका लागि तयार छैनन्, तर तिनीहरूको बारेमा सचेत हुनु र सम्भावित पछि प्रयोगको लागि योजना बनाउनु उपयोगी हुन सक्छ। एंकर स्थिति CSS एङ्कर पोजिसनिङले अन्य तत्वहरूको सापेक्ष पपओभर र टूलटिपहरूको स्थिति ह्यान्डल गर्छ, र पृष्ठलाई सार्दा, स्क्रोल गर्दा वा रिसाइज गर्दा पनि तिनीहरूलाई हेरेर राख्ने ख्याल राख्छ। यो पहिले उल्लेख गरिएको Popover API को लागि एक उत्कृष्ट पूरक हो, जसले यसलाई अझ धेरै प्रदर्शन-गहन JS समाधानहरूबाट टाढा जान सजिलो बनाउँदछ। नेभिगेसन API नेभिगेसन API लाई एकल-पृष्ठ एपहरूमा नेभिगेसन ह्यान्डल गर्न प्रयोग गर्न सकिन्छ र राउटर, Next.js राउटिङ, वा Angular राउटिङ कार्यहरू गर्नको लागि उत्कृष्ट पूरक, वा प्रतिस्थापन पनि हुन सक्छ। ट्रान्जिसन API हेर्नुहोस् दृश्य ट्रान्जिसन API ले पृष्ठको विभिन्न अवस्थाहरू बीच एनिमेट गर्न सक्छ। एकल-पृष्ठ एप्लिकेसनमा, यसले राज्यहरू बीचको सहज ट्रान्जिसनहरू धेरै सजिलो बनाउँछ, र तपाईंलाई Anime.js, GSAP, वा Motion.dev जस्ता एनिमेसन लाइब्रेरीहरूबाट छुटकारा पाउन मद्दत गर्न सक्छ। अझ राम्रो, API बहु-पृष्ठ अनुप्रयोगहरूसँग पनि प्रयोग गर्न सकिन्छ। याद गर्नुहोस्, जब मैले भनेको थिएँ कि हामीले 15 वर्ष पहिले काम गरेको कम्पनीमा एकल-पृष्ठ अनुप्रयोगहरू निर्माण गर्नुको कारण नेभिगेट गर्दा पृष्ठ पुन: लोडको सेतो फ्ल्यासबाट बच्न थियो? यदि त्यो API समयमा उपलब्ध भएको भए, हामीले एकल-पृष्ठ फ्रेमवर्क बिना र सम्पूर्ण एपको ठूलो प्रारम्भिक डाउनलोड बिना सुन्दर पृष्ठ संक्रमण प्रभावहरू प्राप्त गर्न सक्षम हुने थियौं। स्क्रोल-संचालित एनिमेशनहरू स्क्रोल-संचालित एनिमेसनहरू प्रयोगकर्ताको स्क्रोल स्थितिमा चल्छन्, समयको सट्टा, तिनीहरूलाई कथा कथन र उत्पादन भ्रमणहरूको लागि उत्कृष्ट समाधान बनाउँछ। केही व्यक्तिहरू यसको साथ शीर्षमा अलिकति गएका छन्, तर राम्रोसँग प्रयोग गर्दा, यो एक धेरै प्रभावकारी डिजाइन उपकरण हुन सक्छ, र पुस्तकालयहरू जस्तै: ScrollReveal, GSAP Scroll, वाWOW.js। अनुकूलन योग्य चयनहरू अनुकूलन योग्य चयन भनेको सामान्य

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free