Xây dựng một RSS Widget đơn giản với JavaScript
RSS đã có tuổi đời hơn 20 năm. Nó vẫn là một trong những cách hàng đầu để chia sẻ tin tức, blog và podcast.
Nhiều lập trình viên sử dụng các framework nặng nề để hiển thị RSS feed. Bạn không cần đến chúng. RSS chỉ đơn giản là XML. Trình duyệt của bạn có thể đọc XML một cách tự nhiên.
Bạn có thể xây dựng một RSS widget sạch sẽ, có tính phản hồi (responsive) chỉ bằng vanilla JavaScript và CSS.
Cách thức hoạt động:
- Sử dụng Fetch API để lấy dữ liệu XML.
- Sử dụng DOMParser để chuyển đổi XML đó thành một tài liệu có thể đọc được.
- Lặp qua các mục để trích xuất tiêu đề, liên kết và mô tả.
- Hiển thị dữ liệu dưới dạng một lưới các thẻ (cards).
Một vấn đề phổ biến là CORS. Nếu một máy chủ chặn yêu cầu của bạn, trình duyệt sẽ dừng nó lại. Bạn có thể khắc phục điều này bằng cách sử dụng một proxy như allorigins.win. Đối với các dự án chuyên nghiệp, hãy sử dụng Cloudflare Worker để xử lý các yêu cầu.
Các tính năng chính của phương pháp này:
- Không cần cài đặt npm hay các thư viện bên ngoài.
- Kích thước tệp nhỏ và tải nhanh.
- Hoạt động với bất kỳ RSS 2.0 feed tiêu chuẩn nào.
- Dễ dàng thêm các bộ lọc danh mục.
Bạn có thể mở rộng widget này bằng cách thêm:
- Tự động làm mới để giữ nội dung luôn mới nhất.
- Một thanh tìm kiếm để tìm các bài viết cụ thể.
- Local storage để lưu bộ nhớ đệm (cache) dữ liệu.
- Hỗ trợ chế độ tối (dark mode) bằng cách sử dụng các biến CSS.
Đừng tìm đến các công cụ nặng nề khi các API gốc (native APIs) có thể hoạt động hoàn hảo.
Nguồn: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803