ساخت یک ویجت ساده RSS Feed با Vanilla JS
RSS یک فرمت قدیمی است، اما همچنان یکی از بهترین روشها برای اشتراکگذاری محتوا در وب محسوب میشود.
بسیاری از توسعهدهندگان برای نمایش فیدهای RSS از فریمورکهای سنگین استفاده میکنند. شما نیازی به آنها ندارید. RSS صرفاً یک XML است. مرورگر شما میتواند XML را بهصورت بومی (native) و بدون نیاز به کتابخانههای اضافی بخواند.
شما میتوانید با استفاده از تنها Vanilla JavaScript و CSS، یک ویجت RSS تمیز بسازید.
روش انجام آن به این صورت است:
- استفاده از Fetch API برای دریافت دادههای XML.
- استفاده از DOMParser برای تبدیل آن XML به یک سند قابل جستجو.
- نگاشت (Map) دادهها به یک شیء JavaScript.
- رندر کردن دادهها در قالب کارتهای HTML.
مراقب خطاهای CORS باشید. اگر سروری درخواست شما را مسدود کند، مرورگر آن را متوقف میکند. برای تست میتوانید از یک پروکسی مانند allorigins.win استفاده کنید. برای پروژههای واقعی، از یک Cloudflare Worker برای مدیریت درخواستها استفاده کنید.
این ویجت به این صورت کار میکند:
• دریافت URL فید. • تجزیه (Parse) عنوان و توضیحات کانال. • پیمایش (Loop) روی هر آیتم برای دریافت عنوان، لینک و تاریخ. • ایجاد یک شبکه (grid) واکنشگرا از کارتها.
حتی میتوانید فیلترهای دستهبندی را هم اضافه کنید. این کار به کاربران اجازه میدهد موضوعاتی مانند Tech یا Food را انتخاب کنند.
این روش با هر فید RSS استانداردی کار میکند. شما میتوانید یک فید تکنولوژی یا یک فید پادکست را در یک صفحه اضافه کنید. هر کدام بهصورت مستقل عمل میکنند.
مراحل بعدی برای پروژه شما:
- اضافه کردن قابلیت بهروزرسانی خودکار (auto-refresh) تا فید همیشه تازه بماند.
- اضافه کردن یک نوار جستجو برای یافتن پستهای خاص.
- استفاده از sessionStorage برای کش کردن دادهها و افزایش سرعت.
- استفاده از متغیرهای CSS برای اضافه کردن حالت تاریک (dark mode).
از اضافه کردن موارد اضافی و سنگین به پروژههای خود خودداری کنید. از ابزارهایی که از قبل در مرورگر تعبیه شدهاند استفاده کنید.
منبع: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803