Vanilla JS के साथ एक सरल RSS फ़ीड विजेट बनाएँ
RSS एक पुराना फॉर्मेट है। वेब पर कंटेंट शेयर करने के लिए यह आज भी सबसे बेहतरीन तरीकों में से एक है।
कई डेवलपर्स RSS फ़ीड दिखाने के लिए भारी frameworks का उपयोग करते हैं। आपको उनकी ज़रूरत नहीं है। RSS सिर्फ XML है। आपका ब्राउज़र बिना किसी अतिरिक्त library के XML को natively पढ़ सकता है।
आप केवल vanilla JavaScript और CSS का उपयोग करके एक साफ़-सुथरा RSS विजेट बना सकते हैं।
इसे करने का तरीका यहाँ दिया गया है:
- XML डेटा प्राप्त करने के लिए Fetch API का उपयोग करें।
- उस XML को एक searchable document में बदलने के लिए DOMParser का उपयोग करें।
- डेटा को JavaScript object में मैप करें।
- डेटा को HTML cards में रेंडर करें।
CORS errors का ध्यान रखें। यदि कोई सर्वर आपके request को ब्लॉक करता है, तो ब्राउज़र उसे रोक देता है। टेस्टिंग के लिए आप allorigins.win जैसे proxy का उपयोग कर सकते हैं। असली प्रोजेक्ट्स के लिए, requests को संभालने के लिए Cloudflare Worker का उपयोग करें।
विजेट इस तरह काम करता है:
• फ़ीड URL को fetch करें। • चैनल टाइटल और डिस्क्रिप्शन को parse करें। • टाइटल, लिंक और डेट प्राप्त करने के लिए प्रत्येक item पर लूप चलाएं। • कार्ड्स का एक responsive grid बनाएं।
आप कैटेगरी फ़िल्टर भी जोड़ सकते हैं। इससे आपके उपयोगकर्ता Tech या Food जैसे विषय चुन सकते हैं।
यह तरीका किसी भी standard RSS फ़ीड के साथ काम करता है। आप एक ही पेज पर tech फ़ीड या podcast फ़ीड जोड़ सकते हैं। प्रत्येक स्वतंत्र रूप से काम करता है।
आपके प्रोजेक्ट के लिए अगले कदम:
- auto-refresh जोड़ें ताकि फ़ीड अपडेटेड रहे।
- विशिष्ट पोस्ट खोजने के लिए एक search bar जोड़ें।
- डेटा को cache करने और स्पीड बचाने के लिए sessionStorage का उपयोग करें।
- dark mode जोड़ने के लिए CSS variables का उपयोग करें।
अपने प्रोजेक्ट्स में अनावश्यक चीज़ें (bloat) जोड़ना बंद करें। ब्राउज़र में पहले से मौजूद टूल्स का उपयोग करें।
स्रोत: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803