JavaScript ಬಳಸಿ ಒಂದು ಸರಳ RSS Widget ಅನ್ನು ತಯಾರಿಸಿ
RSS 20 ವರ್ಷಗಳಿಗಿಂತಲೂ ಹಳೆಯದು. ಸುದ್ದಿ, ಬ್ಲಾಗ್ಗಳು ಮತ್ತು ಪಾಡ್ಕಾಸ್ಟ್ಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಇದು ಇಂದಿಗೂ ಪ್ರಮುಖ ಮಾರ್ಗವಾಗಿದೆ.
ಅನೇಕ ಡೆವಲಪರ್ಗಳು RSS ಫೀಡ್ಗಳನ್ನು ತೋರಿಸಲು ಭಾರೀ ಫ್ರೇಮ್ವರ್ಕ್ಗಳನ್ನು ಬಳಸುತ್ತಾರೆ. ನಿಮಗೆ ಅವುಗಳ ಅಗತ್ಯವಿಲ್ಲ. RSS ಎಂಬುದು ಕೇವಲ XML ಆಗಿದೆ. ನಿಮ್ಮ ಬ್ರೌಸರ್ XML ಅನ್ನು ನೇರವಾಗಿ (natively) ಓದಬಲ್ಲದು.
ನೀವು ಕೇವಲ vanilla JavaScript ಮತ್ತು CSS ಬಳಸಿ ಒಂದು ಸ್ವಚ್ಛವಾದ, ರೆಸ್ಪಾನ್ಸಿವ್ (responsive) RSS widget ಅನ್ನು ತಯಾರಿಸಬಹುದು.
ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ:
- XML ಡೇಟಾವನ್ನು ಪಡೆಯಲು Fetch API ಬಳಸಿ.
- ಆ XML ಅನ್ನು ಓದಬಹುದಾದ ಡಾಕ್ಯುಮೆಂಟ್ ಆಗಿ ಪರಿವರ್ತಿಸಲು DOMParser ಬಳಸಿ.
- ಶೀರ್ಷಿಕೆಗಳು, ಲಿಂಕ್ಗಳು ಮತ್ತು ವಿವರಣೆಗಳನ್ನು ಹೊರತೆಗೆಯಲು ಐಟಂಗಳ ಮೂಲಕ ಲೂಪ್ (loop) ಮಾಡಿ.
- ಡೇಟಾವನ್ನು ಕಾರ್ಡ್ಗಳ ಗ್ರಿಡ್ (grid) ರೂಪದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿ (render).
ಒಂದು ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆ ಎಂದರೆ CORS. ಒಂದು ಸರ್ವರ್ ನಿಮ್ಮ ವಿನಂತಿಯನ್ನು (request) ತಡೆದರೆ, ಬ್ರೌಸರ್ ಅದನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ. ಇದನ್ನು allorigins.win ನಂತಹ ಪ್ರೊಕ್ಸಿ (proxy) ಬಳಸಿ ಸರಿಪಡಿಸಬಹುದು. ವೃತ್ತಿಪರ ಪ್ರಾಜೆಕ್ಟ್ಗಳಿಗಾಗಿ, ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು Cloudflare Worker ಬಳಸಿ.
ಈ ವಿಧಾನದ ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳು:
- ಯಾವುದೇ npm ಇನ್ಸ್ಟಾಲ್ಗಳು ಅಥವಾ ಬಾಹ್ಯ ಲೈಬ್ರರಿಗಳ ಅಗತ್ಯವಿಲ್ಲ.
- ಸಣ್ಣ ಫೈಲ್ ಗಾತ್ರ ಮತ್ತು ವೇಗದ ಲೋಡಿಂಗ್.
- ಯಾವುದೇ ಸ್ಟ್ಯಾಂಡರ್ಡ್ RSS 2.0 ಫೀಡ್ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
- ವರ್ಗದ ಫಿಲ್ಟರ್ಗಳನ್ನು (category filters) ಸೇರಿಸುವುದು ಸುಲಭ.
ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ಈ widget ಅನ್ನು ವಿಸ್ತರಿಸಬಹುದು:
- ವಿಷಯವನ್ನು ಅಪ್ಡೇಟ್ ಆಗಿಡಲು ಆಟೋ-ರಿಫ್ರೆಶ್ (Auto-refresh).
- ನಿರ್ದಿಷ್ಟ ಪೋಸ್ಟ್ಗಳನ್ನು ಹುಡುಕಲು ಸರ್ಚ್ ಬಾರ್ (search bar).
- ಡೇಟಾವನ್ನು ಕ್ಯಾಶ್ (cache) ಮಾಡಲು ಲೋಕಲ್ ಸ್ಟೋರೇಜ್ (Local storage).
- CSS variables ಬಳಸಿ ಡಾರ್ಕ್ ಮೋಡ್ (Dark mode) ಬೆಂಬಲ.
ನೇಟಿವ್ APIಗಳು (native APIs) ಪರಿಪೂರ್ಣವಾಗಿ ಕೆಲಸ ಮಾಡುವಾಗ ಭಾರೀ ಪರಿಕರಗಳನ್ನು ಬಳಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ.
ಮೂಲ: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803