𝗕𝘂𝗶𝗹𝗱 𝗮 𝗦𝗶𝗺𝗽𝗹𝗲 𝗥𝗦𝗦 𝗙𝗲𝗲𝗱 𝗪𝗶𝗱𝗴𝗲𝘁 𝘄𝗶𝘁𝗵 𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗦
RSS என்பது ஒரு பழைய வடிவம். இணையத்தில் உள்ளடக்கத்தைப் பகிர்ந்து கொள்ள இது இன்னும் சிறந்த வழிகளில் ஒன்றாக உள்ளது.
பல டெவலப்பர்கள் RSS feeds-ஐக் காட்ட கனமான frameworks-களைப் பயன்படுத்துகின்றனர். உங்களுக்கு அவை தேவையில்லை. RSS என்பது வெறும் XML மட்டுமே. கூடுதல் libraries இல்லாமலேயே உங்கள் பிரவுசரால் XML-ஐ நேரடியாகப் படிக்க முடியும்.
vanilla JavaScript மற்றும் CSS ஆகியவற்றைப் பயன்படுத்தி மட்டுமே ஒரு நேர்த்தியான RSS widget-ஐ உங்களால் உருவாக்க முடியும்.
அதைச் செய்வது எப்படி இதோ:
- XML தரவைப் பெற Fetch API-ஐப் பயன்படுத்தவும்.
- அந்த XML-ஐத் தேடக்கூடிய ஆவணமாக மாற்ற DOMParser-ஐப் பயன்படுத்தவும்.
- தரவை ஒரு JavaScript object-ஆக மாற்றவும்.
- தரவை HTML cards-ஆகக் காட்டவும் (Render).
CORS பிழைகளைக் (errors) கவனத்தில் கொள்ளுங்கள். ஒரு சர்வர் உங்கள் கோரிக்கையைத் (request) தடுத்தால், பிரவுசர் அதை நிறுத்திவிடும். சோதனை செய்வதற்கு allorigins.win போன்ற ஒரு proxy-ஐப் பயன்படுத்தலாம். உண்மையான திட்டங்களுக்கு, கோரிக்கைகளைக் கையாள ஒரு Cloudflare Worker-ஐப் பயன்படுத்தவும்.
இந்த widget இவ்வாறு செயல்படுகிறது:
• Feed URL-ஐப் பெறவும். • Channel title மற்றும் description-ஐப் பகுப்பாய்வு (Parse) செய்யவும். • தலைப்பு, இணைப்பு மற்றும் தேதியைப் பெற ஒவ்வொரு item வழியாகவும் லூப் (Loop) செய்யவும். • Responsive grid of cards-ஐ உருவாக்கவும்.
நீங்கள் category filters-களையும் சேர்க்கலாம். இது உங்கள் பயனர்கள் Tech அல்லது Food போன்ற தலைப்புகளைத் தேர்ந்தெடுக்க உதவும்.
இந்த முறை எந்தவொரு நிலையான (standard) RSS feed-உடனும் வேலை செய்யும். ஒரே பக்கத்தில் நீங்கள் ஒரு tech feed அல்லது podcast feed-ஐச் சேர்க்கலாம். ஒவ்வொன்றும் தனித்தனியாகச் செயல்படும்.
உங்கள் திட்டத்திற்கான அடுத்த கட்டங்கள்:
- Feed தற்போதைய நிலையில் இருக்க auto-refresh சேர்க்கவும்.
- குறிப்பிட்ட பதிவுகளைக் கண்டறிய ஒரு search bar சேர்க்கவும்.
- தரவைச் சேமிக்கவும் (cache) வேகத்தை அதிகரிக்கவும் sessionStorage-ஐப் பயன்படுத்தவும்.
- Dark mode சேர்க்க CSS variables-ஐப் பயன்படுத்தவும்.
உங்கள் திட்டங்களில் தேவையற்ற சுமையைச் (bloat) சேர்ப்பதை நிறுத்துங்கள். பிரவுசரில் ஏற்கனவே உள்ள கருவிகளையே பயன்படுத்துங்கள்.
Source: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803