𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗦 𝘃𝗮𝗽𝗮𝗿𝘂𝗻 𝗲𝗸 𝘀𝗮𝗱𝗵𝗮 𝗥𝗦𝗦 𝗙𝗲𝗲𝗱 𝗪𝗶𝗱𝗴𝗲𝘁 𝘁𝗮𝗶𝘆𝗮𝗿 𝗸𝗮𝗿𝗮
RSS हा एक जुना फॉरमॅट आहे. वेबवर कंटेंट शेअर करण्यासाठी तो आजही सर्वोत्तम मार्गांपैकी एक आहे.
अनेक डेव्हलपर्स RSS feeds दाखवण्यासाठी जड (heavy) frameworks वापरतात. तुम्हाला त्यांची गरज नाही. RSS म्हणजे केवळ XML आहे. तुमचे ब्राउझर कोणत्याही अतिरिक्त लायब्ररीशिवाय XML नेटिव्हली वाचू शकते.
तुम्ही केवळ vanilla JavaScript आणि CSS वापरून एक स्वच्छ RSS widget तयार करू शकता.
ते कसे करायचे ते खाली दिले आहे:
- XML डेटा मिळवण्यासाठी Fetch API वापरा.
- त्या XML ला शोधण्यायोग्य (searchable) डॉक्युमेंटमध्ये रूपांतरित करण्यासाठी DOMParser वापरा.
- डेटाला JavaScript object मध्ये मॅप करा.
- डेटा HTML cards मध्ये रेंडर करा.
CORS errors कडे लक्ष द्या. जर एखाद्या सर्व्हरने तुमची रिक्वेस्ट ब्लॉक केली, तर ब्राउझर ती थांबवतो. टेस्टिंगसाठी तुम्ही allorigins.win सारखा proxy वापरू शकता. प्रत्यक्ष प्रोजेक्ट्ससाठी, रिक्वेस्ट हाताळण्यासाठी Cloudflare Worker वापरा.
हे widget खालीलप्रमाणे काम करते:
• Feed URL फेच करा. • चॅनेलचे शीर्षक (title) आणि वर्णन (description) पार्स करा. • शीर्षक, लिंक आणि तारीख मिळवण्यासाठी प्रत्येक आयटममधून लूप करा. • कार्ड्सचे रिस्पॉन्सिव्ह ग्रिड तयार करा.
तुम्ही कॅटेगरी फिल्टर्स देखील जोडू शकता. यामुळे तुमचे युजर्स Tech किंवा Food सारखे विषय निवडू शकतात.
ही पद्धत कोणत्याही स्टँडर्ड RSS feed सोबत काम करते. तुम्ही एकाच पेजवर टेक फीड किंवा पॉडकास्ट फीड जोडू शकता. प्रत्येक फीड स्वतंत्रपणे काम करते.
तुमच्या प्रोजेक्टसाठी पुढील पावले:
- ऑटो-रिफ्रेश जोडा जेणेकरून फीड अपडेटेड राहील.
- विशिष्ट पोस्ट शोधण्यासाठी सर्च बार जोडा.
- डेटा कॅश करण्यासाठी आणि वेग वाढवण्यासाठी sessionStorage वापरा.
- डार्क मोड जोडण्यासाठी CSS variables वापरा.
तुमच्या प्रोजेक्ट्समध्ये अनावश्यक गोष्टी (bloat) वाढवणे थांबवा. ब्राउझरमध्ये आधीच उपलब्ध असलेल्या टूल्सचा वापर करा.
स्रोत: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803