हर किसी को अभिवादन! इस वर्ष हैकटेबरफेस्ट आपके लिए कैसा रहेगा? निजी तौर पर, मैं अब तक वास्तव में इसका आनंद ले रहा हूं। अब हम अक्टूबर के दूसरे सप्ताह में प्रवेश कर चुके हैं, जिसका मतलब है कि चुनौती को पूरा करने के लिए आवश्यक चार में से मेरे दूसरे पुल अनुरोध (पीआर) का समय आ गया है। इस सप्ताह, मैंने केवल दस्तावेज़ीकरण पर ध्यान केंद्रित करने के बजाय प्रोजेक्ट के कोडबेस में योगदान करके खुद को थोड़ा और आगे बढ़ाने का निर्णय लिया, जैसा कि मैंने सप्ताह 1 में किया था।

सप्ताह 1 का पुनर्कथन

हैकटोबरफेस्ट के अपने पहले पीआर में, मैंने प्रोजेक्ट दस्तावेज़ीकरण में सुधार पर काम किया। एक शुरुआत के रूप में, मैं छोटे, प्रबंधनीय कार्यों के साथ प्रक्रिया को आसान बनाना चाहता था। हालाँकि, इस दूसरे सप्ताह के लिए, मैंने कुछ और तकनीकी कार्य करने का निर्णय लिया: GitExplorer प्रोजेक्ट में योगदान देना।

प्रोजेक्ट अवलोकन: GitExplorer

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

अपने योगदान के लिए, मैंने एक नेविगेशन सुविधा को लागू करना चुना जो रिपॉजिटरी ब्राउज़ करते समय उपयोगकर्ता अनुभव को बढ़ाता है।

समस्या की पहचान करना

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

परियोजना पर काम करने के दौरान, एक पहलू जो सामने आया (और अच्छे तरीके से नहीं) वह था कोडबेस को संरचित करने का तरीका। प्रोजेक्ट में सभी तर्क एक ही स्क्रिप्ट.जेएस फ़ाइल में लिखे गए थे, जिसे प्रोजेक्ट के बढ़ने के साथ बनाए रखना मुश्किल हो सकता था। हालाँकि मैं इस पीआर में बड़े बदलाव नहीं करना चाहता था - क्योंकि यह केवल पृष्ठांकन बटनों पर केंद्रित था - मैं भविष्य के अंक में कोड संरचना को फिर से तैयार करने का सुझाव देने की योजना बना रहा हूँ।

दरअसल, इससे पहले एक और डेवलपर है जिसने एक बटन बनाया था जो अगले पेज पर नेविगेट करता है, लेकिन यह उपयोगकर्ता के अनुभव के लिए अच्छा नहीं है जब वे आगे और पीछे, साथ ही विशिष्ट पेज पर नेविगेट करना चाहते हैं। इस कारण से, मैंने अनुरक्षक से मेरे लिए यह मुद्दा निर्दिष्ट करने के लिए टिप्पणी की।
जिस समय मैं इस प्रोजेक्ट पर काम कर रहा था, उस समय एक बात थी जो मुझे इसमें पसंद नहीं थी। यह वह तरीका है जिससे अनुरक्षक अपने कोड आधार की संरचना करता है क्योंकि वह प्रत्येक तर्क को केवल 1 स्क्रिप्ट.जेएस फ़ाइल में लिख रहा था। हालाँकि, मैं इस मुद्दे में बहुत कुछ सुधार नहीं करना चाहता क्योंकि यह केवल पेजिनेशन बटन के लिए कहता है। मैं बाद में कोड आधार को फिर से संरचित करने का अनुरोध करते हुए एक नया मुद्दा बनाऊंगा।

नई सुविधा: उन्नत पेजिनेशन

मौजूदा कार्यक्षमता में पृष्ठों के बीच नेविगेट करने के लिए केवल एक बटन था, जिसमें प्रति पृष्ठ 10 रिपॉजिटरी प्रदर्शित होती थीं। मेरा लक्ष्य "पिछला," "अगला," और क्रमांकित पृष्ठ बटनों के साथ अधिक उपयोगकर्ता-अनुकूल पृष्ठांकन प्रणाली लागू करना था। यह उपयोगकर्ताओं को सीधे उस पृष्ठ पर जाने की अनुमति देगा जिसमें वे रुचि रखते हैं, जिससे नेविगेशन अनुभव आसान हो जाएगा।

कार्यान्वयन

गिटहब एपीआई बाधाएं:

पेजिनेशन लागू करते समय, मुझे GitHub के एपीआई के साथ एक सीमा का सामना करना पड़ा, जो परिणामों को 1,000 आइटम तक सीमित कर देता है। यदि किसी खोज से 1,000 से अधिक रिपॉजिटरी प्राप्त होती हैं, तो इस सीमा से आगे नेविगेट करने का प्रयास करने पर एक त्रुटि उत्पन्न होती है, जिससे अपरिभाषित डेटा वापस आ जाता है। यह देखते हुए कि डिज़ाइन प्रति पृष्ठ 10 रिपॉजिटरी प्रदर्शित करता है, मैंने इस समस्या से बचने के लिए पृष्ठों की संख्या 100 तक सीमित कर दी है।

कोड परिवर्तन:

• मैंने पेजिनेशन के लिए स्क्रिप्ट.जेएस में एक नया

  अनुभाग पेश किया। इससे मुझे बटन सौंदर्यशास्त्र और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए कुछ सीएसएस शैलियाँ जोड़ने की अनुमति मिली।

• पृष्ठांकन के लिए मुख्य तर्क को दो नए कार्यों में समाहित किया गया था:

  • createButton()
  • renderPagination() ये फ़ंक्शन वर्तमान पृष्ठ बटन को अक्षम करने के लिए उपलब्ध पृष्ठों और लागू शैलियों के आधार पर पेजिनेशन बटन को गतिशील रूप से उत्पन्न करते हैं, जिससे उपयोगकर्ताओं को गलती से इसे दोबारा क्लिक करने से रोका जा सकता है। मैंने अधिक बेहतर लुक के लिए बटनों में होवर प्रभाव भी जोड़ा।

सीएसएस सुधार:

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

निष्कर्ष

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

पढ़ने के लिए धन्यवाद, और मैं अपनी हैकटोबरफेस्ट यात्रा के बारे में और अधिक साझा करने के लिए उत्सुक हूं!