ساخت یک ویجت ساده RSS با JavaScript
RSS بیش از ۲۰ سال قدمت دارد. این فناوری همچنان یکی از بهترین روشها برای اشتراکگذاری اخبار، وبلاگها و پادکستها است.
بسیاری از توسعهدهندگان برای نمایش فیدهای RSS از فریمورکهای سنگین استفاده میکنند. شما نیازی به آنها ندارید. RSS صرفاً یک XML است. مرورگر شما میتواند XML را به صورت بومی بخواند.
شما میتوانید تنها با استفاده از vanilla JavaScript و CSS، یک ویجت RSS تمیز و واکنشگرا بسازید.
نحوه عملکرد:
- استفاده از Fetch API برای دریافت دادههای XML.
- استفاده از DOMParser برای تبدیل آن XML به یک سند قابل خواندن.
- پیمایش روی آیتمها برای استخراج عناوین، لینکها و توضیحات.
- رندر کردن دادهها در قالب یک شبکه از کارتها.
یک مشکل رایج، CORS است. اگر سروری درخواست شما را مسدود کند، مرورگر آن را متوقف میکند. میتوانید این مشکل را با استفاده از یک پروکسی مانند allorigins.win حل کنید. برای پروژههای حرفهای، از یک Cloudflare Worker برای مدیریت درخواستها استفاده کنید.
ویژگیهای کلیدی این روش:
- بدون نیاز به نصب npm یا کتابخانههای خارجی.
- حجم فایل کم و سرعت بارگذاری بالا.
- سازگار با هر فید استاندارد RSS 2.0.
- قابلیت اضافه کردن آسان فیلترهای دستهبندی.
شما میتوانید این ویجت را با افزودن موارد زیر گسترش دهید:
- بهروزرسانی خودکار برای تازه نگه داشتن محتوا.
- یک نوار جستجو برای یافتن پستهای خاص.
- استفاده از Local storage برای ذخیره موقت دادهها.
- پشتیبانی از حالت تاریک (Dark mode) با استفاده از متغیرهای CSS.
وقتی APIهای بومی به خوبی کار میکنند، از ابزارهای سنگین استفاده نکنید.
منبع: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803