𝗕𝘂𝗶𝗹𝗱 𝗮 𝗦𝗶𝗺𝗽𝗹𝗲 𝗥𝗦𝗦 𝗙𝗲𝗲𝗱 𝗪𝗶𝗱𝗴𝗲𝘁 𝘄𝗶𝘁𝗵 𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗦
RSS ಒಂದು ಹಳೆಯ ಫಾರ್ಮ್ಯಾಟ್. ವೆಬ್ನಲ್ಲಿ ವಿಷಯವನ್ನು (content) ಹಂಚಿಕೊಳ್ಳಲು ಇದು ಇಂದಿಗೂ ಅತ್ಯುತ್ತಮ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.
ಅನೇಕ ಡೆವಲಪರ್ಗಳು RSS ಫೀಡ್ಗಳನ್ನು ತೋರಿಸಲು ಭಾರೀ ಫ್ರೇಮ್ವರ್ಕ್ಗಳನ್ನು ಬಳಸುತ್ತಾರೆ. ನಿಮಗೆ ಅವುಗಳ ಅಗತ್ಯವಿಲ್ಲ. RSS ಎಂಬುದು ಕೇವಲ XML ಆಗಿದೆ. ಯಾವುದೇ ಹೆಚ್ಚುವರಿ ಲೈಬ್ರರಿಗಳಿಲ್ಲದೆ ನಿಮ್ಮ ಬ್ರೌಸರ್ ನೇರವಾಗಿ XML ಅನ್ನು ಓದಬಲ್ಲದು.
ನೀವು ಕೇವಲ vanilla JavaScript ಮತ್ತು CSS ಬಳಸಿ ಒಂದು ಕ್ಲೀನ್ RSS widget ಅನ್ನು ತಯಾರಿಸಬಹುದು.
ಅದನ್ನು ಮಾಡುವ ವಿಧಾನ ಇಲ್ಲಿದೆ:
- XML ಡೇಟಾವನ್ನು ಪಡೆಯಲು Fetch API ಬಳಸಿ.
- ಆ XML ಅನ್ನು ಹುಡುಕಬಹುದಾದ ಡಾಕ್ಯುಮೆಂಟ್ ಆಗಿ ಪರಿವರ್ತಿಸಲು DOMParser ಬಳಸಿ.
- ಡೇಟಾವನ್ನು JavaScript object ಆಗಿ ಮ್ಯಾಪ್ ಮಾಡಿ.
- ಡೇಟಾವನ್ನು HTML cards ರೂಪದಲ್ಲಿ ರেন্ডರ್ ಮಾಡಿ.
CORS ಎರರ್ಗಳ ಬಗ್ಗೆ ಎಚ್ಚರವಿರಲಿ. ಒಂದು ವೇಳೆ ಸರ್ವರ್ ನಿಮ್ಮ ರಿಕ್ವೆಸ್ಟ್ ಅನ್ನು ಬ್ಲಾಕ್ ಮಾಡಿದರೆ, ಬ್ರೌಸರ್ ಅದನ್ನು ತಡೆಯುತ್ತದೆ. ಟೆಸ್ಟಿಂಗ್ ಮಾಡಲು ನೀವು allorigins.win ನಂತಹ ಪ್ರೊಕ್ಸಿಯನ್ನು ಬಳಸಬಹುದು. ನೈಜ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗಾಗಿ, ರಿಕ್ವೆಸ್ಟ್ಗಳನ್ನು ನಿರ್ವಹಿಸಲು Cloudflare Worker ಬಳಸಿ.
ಈ ವಿಜೆಟ್ ಈ ರೀತಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ:
• Feed URL ಅನ್ನು Fetch ಮಾಡಿ. • Channel title ಮತ್ತು description ಅನ್ನು Parse ಮಾಡಿ. • title, link ಮತ್ತು date ಅನ್ನು ಪಡೆಯಲು ಪ್ರತಿಯೊಂದು ಐಟಂ ಅನ್ನು ಲೂಪ್ ಮಾಡಿ. • ಕಾರ್ಡ್ಗಳ ಒಂದು responsive grid ಅನ್ನು ರಚಿಸಿ.
ನೀವು ಕ್ಯಾಟಗರಿ ಫಿಲ್ಟರ್ಗಳನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು. ಇದು ನಿಮ್ಮ ಬಳಕೆದಾರರು Tech ಅಥವಾ Food ನಂತಹ ವಿಷಯಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಈ ವಿಧಾನವು ಯಾವುದೇ ಸ್ಟ್ಯಾಂಡರ್ಡ್ RSS ಫೀಡ್ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ನೀವು ಒಂದೇ ಪುಟದಲ್ಲಿ tech feed ಅಥವಾ podcast feed ಅನ್ನು ಸೇರಿಸಬಹುದು. ಪ್ರತಿಯೊಂದೂ ಸ್ವತಂತ್ರವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಾಗಿ ಮುಂದಿನ ಹಂತಗಳು:
- ಫೀಡ್ ಯಾವಾಗಲೂ ಅಪ್ಡೇಟ್ ಆಗಿರಲು auto-refresh ಸೇರಿಸಿ.
- ನಿರ್ದಿಷ್ಟ ಪೋಸ್ಟ್ಗಳನ್ನು ಹುಡುಕಲು search bar ಸೇರಿಸಿ.
- ಡೇಟಾವನ್ನು ಕ್ಯಾಶ್ ಮಾಡಲು ಮತ್ತು ವೇಗವನ್ನು ಉಳಿಸಲು sessionStorage ಬಳಸಿ.
- ಡಾರ್ಕ್ ಮೋಡ್ ಸೇರಿಸಲು CSS variables ಬಳಸಿ.
ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗೆ ಅನಗತ್ಯ ಹೊರೆ (bloat) ಸೇರಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಬ್ರೌಸರ್ನಲ್ಲಿ ಈಗಾಗಲೇ ಅಳವಡಿಸಲಾಗಿರುವ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
ಮೂಲ (Source): https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803