मेरी पहली जावास्क्रिप्ट लाइब्रेरी बनाने की यात्रा परिवर्तनकारी रही है, जिससे मुझे आगे बढ़ने में मदद मिली है। मैं यहां कैसे पहुंचा? हमें शुरू से करना चाहिए।

यूनिफाईयूआई ब्लॉक्स और फ्लेक्सीविंड ब्लॉक्स के बीटा संस्करणों को पूरा करने के बाद, मुझे और मेरे दोस्त को एक चुनौती का सामना करना पड़ा: ड्रॉपडाउन, कोलैप्स और टैब जैसे इंटरैक्टिव घटकों को जोड़ना।

चूंकि यूनिफाईयूआई और फ्लेक्सीविंड अलग-अलग हैं: एक यूनोसीएसएस के साथ काम करता है और दूसरा टेलविंडसीएसएस के साथ, हमने शुरू में प्रत्येक के लिए अलग स्क्रिप्ट लिखी थी। लेकिन जल्द ही यह स्पष्ट हो गया कि यह एक कम आदर्श समाधान था।

यह अध्ययन करने के बाद कि प्रीलाइन टेलविंडसीएसएस के लिए तैयार किए गए समर्पित जावास्क्रिप्ट प्लगइन्स के साथ इंटरैक्शन को कैसे संभालती है, हमने सीएसएस फ्रेमवर्क-अज्ञेयवादी समाधान की आवश्यकता देखी।

सीएसएस फ्रेमवर्क-अज्ञेयवादी क्यों?

सीएसएस फ्रेमवर्क-अज्ञेयवादी लाइब्रेरी बनाना हमारे लिए आवश्यक था क्योंकि हम चाहते थे कि फ्लेक्सिला किसी भी सीएसएस फ्रेमवर्क या यहां तक ​​कि शुद्ध सीएसएस के साथ भी निर्बाध रूप से काम करे। UnoCSS, TailwindCSS, या यहां तक ​​​​कि बूटस्ट्रैप का उपयोग करने वाले डेवलपर्स सहित कई डेवलपर्स के पास बिना किसी सीमा के अपने घटकों को बढ़ाने का लचीलापन होना चाहिए।

फ्लेक्सिला को एक विशिष्ट ढांचे से स्वतंत्र बनाकर, हम एक बहुमुखी उपकरण प्रदान कर सकते हैं जो कई अलग-अलग प्रकार की परियोजनाओं के लिए काम करता है। यह उस काम के साथ भी संरेखित है जो हमने यूनिफाईयूआई और फ्लेक्सीविंड ब्लॉक्स पर पहले ही किया है, जहां लचीलापन महत्वपूर्ण है।

समाधान

प्रीलाइन और फ़्लोबाइट प्लगइन से प्रेरित होकर, हमने फ्लेक्सिला बनाने का निर्णय लिया जो पूरी तरह से ओपन-सोर्स है।

फ्लेक्सिला एक स्टैंडअलोन लाइब्रेरी है जिसे किसी विशिष्ट सीएसएस ढांचे पर भरोसा किए बिना, स्वतंत्र रूप से इंटरैक्शन प्रबंधित करने के लिए डिज़ाइन किया गया है। यह TailwindCSS, UnoCSS, या किसी अन्य CSS तकनीक के साथ आसानी से एकीकृत होने की सुविधा प्रदान करता है।

हमारा उद्देश्य घटकों को इस तरह से बढ़ाना था जो किसी विशेष सीएसएस वातावरण तक सीमित न हो।

चुनौतियां

पहले तो मुझे पता नहीं था कि कहां से शुरुआत करूं। क्या मुझे प्रीलाइन का क्लोन बनाकर उसे अनुकूलित करना चाहिए? नहीं, इससे मुझे मदद नहीं मिलेगी, क्योंकि मेरा लक्ष्य इस परियोजना के माध्यम से सीखना था।

कोड संगठन

शुरुआत में, मेरा कोड गड़बड़ था: अपठनीय और अनुसरण करने में कठिन।

मेरे पास एक "पैकेज" फ़ोल्डर था, और यह एक आपदा थी! इससे कुछ पैकेजों को अलग से प्रकाशित करना मुश्किल हो गया, इसलिए मुझे एक समाधान की आवश्यकता थी।

समाधान

मुझे लर्ना के बारे में एक लेख मिला, जिसने तुरंत मेरी रुचि पकड़ ली। दस्तावेज़ीकरण पढ़ने और अपने कोड को पुनर्गठित करने के कुछ दिनों के बाद, मेरे पास एक ऐसा संगठन था जिस पर मुझे गर्व था। लर्ना ने मुझे अपने अपडेट को सुव्यवस्थित करने, एक मोनो रिपॉजिटरी में कई पैकेज प्रबंधित करने और उन्हें स्वतंत्र रूप से प्रकाशित करने की अनुमति दी।

पॉपरजेएस?

हां, मुझे इस दुविधा का सामना करना पड़ा: क्या मुझे पॉपरजेएस का उपयोग करना चाहिए या नहीं?

यह एक बड़ी चुनौती थी, लेकिन मैं उस कहानी को भविष्य के लेख के लिए सहेज कर रखूंगा।

संस्करण

यह एक बड़ी बाधा थी। मैंने शुरू में लाइब्रेरी और उसके सभी पैकेजों को संस्करण 1.0.0 के साथ प्रकाशित किया... और प्रकाशन के बाद, मुझे एहसास हुआ कि कुछ पैकेजों में समस्याएं थीं। इसलिए प्रत्येक सुधार के लिए, मैं लाइब्रेरी और उसके पैकेजों का एक नया संस्करण प्रकाशित करूंगा। बुरा विचार! आख़िरकार, एक मित्र ने सुझाव दिया कि मैं SEMVER के बारे में एक लेख पढ़ूं, और अचानक, संस्करण बनाना समझ में आया—हालाँकि मुझे खेल में थोड़ी देर हो गई थी।

इस तरह मुझे 2.x.x संस्करण की लाइब्रेरी मिल गई। उस बिंदु से, मैंने वे गलतियाँ करना बंद कर दिया। लर्न के साथ, मुझे अब उन पैकेज संस्करणों को बदलने के बारे में चिंता करने की ज़रूरत नहीं है जिन्हें अद्यतन नहीं किया गया है; लर्ना मेरा ख्याल रखती है।

विशेषताएँ

1. सीएसएस फ्रेमवर्क अज्ञेयवाद

फ्लेक्सिला किसी विशिष्ट सीएसएस ढांचे पर निर्भर नहीं है, जो इसे टेलविंडसीएसएस, यूनोसीएसएस, या यहां तक ​​​​कि सादे सीएसएस के साथ संगत बनाता है। यह लचीलापन सुनिश्चित करता है कि आप चाहे किसी भी सीएसएस ढांचे का उपयोग कर रहे हों, आप इसे अपने प्रोजेक्ट के साथ एकीकृत कर सकते हैं।

2. मॉड्यूलर घटक

फ्लेक्सिला ड्रॉपडाउन, टैब और कोलैप्स जैसे मॉड्यूलर घटक प्रदान करता है। ये घटक हल्के वजन वाले और आवश्यकतानुसार शामिल करने में आसान होने के लिए बनाए गए हैं, इसलिए आप केवल वही जोड़ें जो आप उपयोग करने जा रहे हैं, जो प्रदर्शन और बंडल आकार में मदद करता है।

3. सरल एपीआई

लाइब्रेरी में एक उपयोग में आसान एपीआई है जिसके लिए न्यूनतम कॉन्फ़िगरेशन की आवश्यकता होती है। ड्रॉपडाउन घटक कैसे सेट करें इसका एक सरल उदाहरण यहां दिया गया है:

   import { Dropdown } from '@flexilla/flexilla';
   Dropdown.init("#myDropdown");

यह उदाहरण दिखाता है कि कैसे आप कोड की कुछ पंक्तियों के साथ एक ड्रॉपडाउन को तुरंत प्रारंभ कर सकते हैं, जिससे यह सभी स्तरों के डेवलपर्स के लिए अत्यधिक सुलभ हो जाता है।

4. नेतृत्वहीन वास्तुकला

हेडलेस यूआई लाइब्रेरीज़ से प्रेरित, फ्लेक्सिला आपको शैलियों को पूरी तरह से नियंत्रित करने की अनुमति देता है, ताकि आप पूर्वनिर्धारित डिज़ाइन या थीम तक सीमित न हों। इससे कस्टम-स्टाइल प्रोजेक्ट्स में एकीकृत करना आसान हो जाता है और यह सुनिश्चित होता है कि यह मौजूदा शैलियों के साथ टकराव नहीं करेगा।

5. अनुकूलन योग्य घटनाएँ

फ्लेक्सिला घटक अनुकूलन योग्य घटनाओं के साथ आते हैं। उदाहरण के लिए, आप उपयोगकर्ता की कार्रवाइयों का जवाब देने के लिए कार्रवाइयां जोड़ सकते हैं या विशिष्ट इंटरैक्शन के लिए व्यवहार को अनुकूलित कर सकते हैं, जैसे ड्रॉपडाउन ओपन या टैब परिवर्तन।

const myDropdown = new Dropdown('#myDropdown', {
  onShow: () => console.log('Dropdown is shown!'),
  onHide: () => console.log('Dropdown is hidden!'),
});

const myAccordionEl = document.querySelector("#myAccordion")
const myAccordion = Accordion.init(myAccordionEl)
myAccordionEl.addEventListener("change-item",()=>{
   console.log("Accordion item changed")
})

लाइब्रेरी का उपयोग कब और कहाँ करें?

जब आप किसी प्रोजेक्ट पर काम कर रहे हों तो फ्लेक्सिला का उपयोग करें जहां आप जावास्क्रिप्ट फ्रेमवर्क का उपयोग नहीं करना चाहते हैं लेकिन पहुंच को ध्यान में रखते हुए इंटरैक्टिव घटकों की आवश्यकता है। (अनुशंसित: एस्ट्रोजेएस, पीएचपी और पीएचपी फ्रेमवर्क, स्टेटिक वेबसाइटें)
यह VueJS के साथ अच्छा काम कर सकता है, लेकिन इसकी अनुशंसा नहीं की जाती है। ReactJS के साथ, प्रयास भी न करें!

फ्लेक्सिला के लिए आगे क्या है?

फ्लेक्सिला का विकास जारी रहेगा। मेरी योजना और अधिक घटक जोड़ने, मौजूदा घटकों में सुधार करने और दस्तावेज़ीकरण को परिष्कृत करने की है। मौजूदा घटकों के अलावा, मेरी योजना नोटिफिकेशन और टोस्ट जैसे अन्य सामान्य घटकों को पेश करने की है। यह फ्लेक्सिला को इंटरैक्टिव आवश्यकताओं की एक विस्तृत श्रृंखला का समर्थन करने की अनुमति देगा।

निष्कर्ष

मेरी आवश्यकताओं के अनुसार, फ्लेक्सिला मेरी परियोजनाओं में इंटरैक्टिव घटक बनाने के लिए एक मूल्यवान उपकरण साबित हुआ है।
शुरुआत करना डरावना हो सकता है। मुझे डर था कि कोई मेरे काम की सराहना नहीं करेगा, डर था कि इससे कोई उद्देश्य पूरा नहीं होगा। लेकिन मैं आपको विश्वास दिलाता हूं, प्रयास न करना सबसे बड़ी गलती है। आज मुझे इस लाइब्रेरी को बनाने का कोई अफसोस नहीं है। इसने मुझे बहुत कुछ सीखने का मौका दिया है: कोड संगठन, वर्जनिंग, एनपीएम पैकेजों का प्रबंधन... अपने समाधान को दुनिया के साथ साझा करने में संकोच न करें और प्रतिक्रिया के लिए खुले रहें, चाहे वह सकारात्मक हो या नकारात्मक। यह आपको बढ़ने में मदद करेगा!

यदि आपके पास विचार, सुझाव या कोड सुधार हैं, तो रिपॉजिटरी को फोर्क करने, पुल अनुरोध सबमिट करने या कोई समस्या खोलने में संकोच न करें। साथ मिलकर, हम लाइब्रेरी को बढ़ा सकते हैं और हर जगह डेवलपर्स के लिए एक मूल्यवान संसाधन बना सकते हैं।

उस नोट पर, ध्यान रखें, और फ्लेक्सिला की जांच करना न भूलें और मुझे बताएं कि आप क्या सोचते हैं!