Vanilla JS کے ساتھ ایک سادہ RSS Feed Widget بنائیں
RSS ایک پرانا فارمیٹ ہے۔ یہ ویب پر مواد شیئر کرنے کے بہترین طریقوں میں سے ایک ہے۔
بہت سے ڈویلپرز RSS فیڈز دکھانے کے لیے بھاری فریم ورکس کا استعمال کرتے ہیں۔ آپ کو ان کی ضرورت نہیں ہے۔ RSS محض XML ہے۔ آپ کا براؤزر اضافی لائبریریوں کے بغیر XML کو قدرتی طور پر (natively) پڑھ سکتا ہے۔
آپ صرف vanilla JavaScript اور CSS کا استعمال کرتے ہوئے ایک صاف ستھرا RSS widget بنا سکتے ہیں۔
اسے کرنے کا طریقہ یہ ہے:
- XML ڈیٹا حاصل کرنے کے لیے Fetch API کا استعمال کریں۔
- اس XML کو قابلِ تلاش دستاویز میں تبدیل کرنے کے لیے DOMParser کا استعمال کریں۔
- ڈیٹا کو JavaScript object میں میپ (map) کریں۔
- ڈیٹا کو HTML cards میں رینڈر (render) کریں۔
CORS errors سے ہوشیار رہیں۔ اگر کوئی سرور آپ کی درخواست (request) کو بلاک کر دیتا ہے، تو براؤزر اسے روک دیتا ہے۔ ٹیسٹنگ کے لیے آپ allorigins.win جیسا پروکسی استعمال کر سکتے ہیں۔ حقیقی پروجیکٹس کے لیے، درخواستوں کو سنبھالنے کے لیے Cloudflare Worker کا استعمال کریں۔
یہ widget اس طرح کام کرتا ہے:
• Feed URL حاصل کریں۔ • چینل کا عنوان اور تفصیل پارس (parse) کریں۔ • عنوان، لنک اور تاریخ حاصل کرنے کے لیے ہر آئٹم پر لوپ (loop) چلائیں۔ • کارڈز کا ایک رسپانسیو (responsive) گرڈ بنائیں۔
آپ کیٹیگری فلٹرز (category filters) بھی شامل کر سکتے ہیں۔ اس سے آپ کے صارفین Tech یا Food جیسے موضوعات کا انتخاب کر سکتے ہیں۔
یہ طریقہ کسی بھی معیاری RSS feed کے ساتھ کام کرتا ہے۔ آپ ایک ہی صفحے پر ٹیک فیڈ یا پوڈ کاسٹ فیڈ شامل کر سکتے ہیں۔ ہر ایک آزادانہ طور پر کام کرتا ہے۔
آپ کے پروجیکٹ کے لیے اگلے اقدامات:
- Auto-refresh شامل کریں تاکہ فیڈ تازہ ترین رہے۔
- مخصوص پوسٹس تلاش کرنے کے لیے سرچ بار شامل کریں۔
- ڈیٹا کو کیش (cache) کرنے اور رفتار بچانے کے لیے sessionStorage کا استعمال کریں۔
- ڈارک موڈ (dark mode) شامل کرنے کے لیے CSS variables کا استعمال کریں۔
اپنے پروجیکٹس میں غیر ضروری چیزیں (bloat) شامل کرنا بند کریں۔ ان ٹولز کا استعمال کریں جو پہلے سے براؤزر میں موجود ہیں۔
ماخذ: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803