ابْنِ أداة (Widget) بسيطة لخلاصات RSS باستخدام Vanilla JS
تُعد RSS صيغة قديمة، لكنها لا تزال واحدة من أفضل الطرق لمشاركة المحتوى على الويب.
يستخدم العديد من المطورين أطر عمل (frameworks) ثقيلة لعرض خلاصات RSS، لكنك لست بحاجة إليها. فـ RSS ليست سوى XML، ويمكن لمتصفحك قراءة XML بشكل أصلي دون الحاجة إلى مكتبات إضافية.
يمكنك بناء أداة (widget) RSS نظيفة باستخدام Vanilla JavaScript و CSS فقط.
إليك كيفية القيام بذلك:
- استخدم Fetch API للحصول على بيانات XML.
- استخدم DOMParser لتحويل XML إلى مستند قابل للبحث.
- قم بتحويل البيانات إلى كائن JavaScript.
- قم بعرض البيانات في بطاقات HTML.
احذر من أخطاء CORS. إذا قام الخادم بحظر طلبك، فسيقوم المتصفح بإيقافه. يمكنك استخدام بروكسي (proxy) مثل allorigins.win لأغراض الاختبار. أما بالنسبة للمشاريع الحقيقية، فاستخدم Cloudflare Worker للتعامل مع الطلبات.
تعمل الأداة على النحو التالي:
• جلب رابط الخلاصة (feed URL). • تحليل عنوان القناة ووصفها. • المرور عبر كل عنصر للحصول على العنوان والرابط والتاريخ. • إنشاء شبكة بطاقات متجاوبة (responsive grid).
يمكنك حتى إضافة فلاتر للفئات، مما يتيح لمستخدميك اختيار مواضيع مثل التقنية (Tech) أو الطعام (Food).
تعمل هذه الطريقة مع أي خلاصة RSS قياسية. يمكنك إضافة خلاصة تقنية أو خلاصة بودكاست إلى نفس الصفحة، وسيعمل كل منها بشكل مستقل.
الخطوات التالية لمشروعك:
- أضف خاصية التحديث التلقائي (auto-refresh) لتبقى الخلاصة محدثة.
- أضف شريط بحث للعثور على منشورات محددة.
- استخدم sessionStorage لتخزين البيانات مؤقتًا (cache) وتوفير السرعة.
- استخدم متغيرات CSS لإضافة الوضع الداكن (dark mode).
توقف عن إضافة الأعباء البرمجية الزائدة (bloat) إلى مشاريعك. استخدم الأدوات المدمجة بالفعل في المتصفح.
المصدر: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803