JavaScript के साथ एक सरल RSS विजेट बनाएँ
RSS 20 साल से भी अधिक पुराना है। यह समाचार, ब्लॉग और पॉडकास्ट साझा करने का एक प्रमुख तरीका बना हुआ है।
कई डेवलपर्स RSS फ़ीड दिखाने के लिए भारी frameworks का उपयोग करते हैं। आपको उनकी आवश्यकता नहीं है। RSS केवल XML है। आपका ब्राउज़र XML को natively पढ़ सकता है।
आप केवल vanilla JavaScript और CSS का उपयोग करके एक साफ, responsive RSS विजेट बना सकते हैं।
यह कैसे काम करता है:
- XML डेटा प्राप्त करने के लिए Fetch API का उपयोग करें।
- उस XML को एक पठनीय दस्तावेज़ (document) में बदलने के लिए DOMParser का उपयोग करें।
- शीर्षक (titles), लिंक और विवरण (descriptions) निकालने के लिए आइटम्स के माध्यम से लूप चलाएं।
- डेटा को कार्ड्स के ग्रिड (grid of cards) में रेंडर करें।
एक सामान्य समस्या CORS है। यदि कोई सर्वर आपके अनुरोध (request) को ब्लॉक करता है, तो ब्राउज़र उसे रोक देता है। आप allorigins.win जैसे proxy का उपयोग करके इसे ठीक कर सकते हैं। पेशेवर प्रोजेक्ट्स के लिए, अनुरोधों को संभालने के लिए Cloudflare Worker का उपयोग करें।
इस दृष्टिकोण की मुख्य विशेषताएं:
- कोई npm install या बाहरी लाइब्रेरी नहीं।
- छोटा फ़ाइल आकार और तेज़ लोडिंग।
- किसी भी मानक RSS 2.0 फ़ीड के साथ काम करता है।
- कैटेगरी फ़िल्टर जोड़ना आसान है।
आप इसमें निम्नलिखित चीज़ें जोड़कर इस विजेट का विस्तार कर सकते हैं:
- कंटेंट को अपडेट रखने के लिए Auto-refresh।
- विशिष्ट पोस्ट खोजने के लिए एक सर्च बार।
- डेटा को कैश (cache) करने के लिए Local storage।
- CSS variables का उपयोग करके Dark mode सपोर्ट।
जब native APIs पूरी तरह से काम करते हैं, तो भारी टूल्स का सहारा लेना बंद करें।
स्रोत: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803