Xây dựng một RSS Feed Widget đơn giản với Vanilla JS
RSS là một định dạng cũ. Nó vẫn là một trong những cách tốt nhất để chia sẻ nội dung trên web.
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 mà không cần thêm thư viện bổ sung.
Bạn có thể xây dựng một RSS widget gọn nhẹ chỉ bằng vanilla JavaScript và CSS.
Dưới đây là cách thực hiện:
- 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ể tìm kiếm.
- Ánh xạ dữ liệu thành một đối tượng JavaScript.
- Render dữ liệu thành các thẻ HTML.
Hãy lưu ý các lỗi 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ể sử dụng một proxy như allorigins.win để thử nghiệm. Đối với các dự án thực tế, hãy sử dụng Cloudflare Worker để xử lý các yêu cầu.
Widget hoạt động như sau:
• Lấy URL của feed. • Parse tiêu đề và mô tả của channel. • Lặp qua từng mục để lấy tiêu đề, liên kết và ngày tháng. • Tạo một lưới các thẻ (cards) có tính responsive.
Bạn thậm chí có thể thêm các bộ lọc danh mục. Điều này cho phép người dùng chọn các chủ đề như Công nghệ (Tech) hoặc Ẩm thực (Food).
Phương pháp này hoạt động với bất kỳ RSS feed tiêu chuẩn nào. Bạn có thể thêm một tech feed hoặc một podcast feed vào cùng một trang. Mỗi cái sẽ hoạt động độc lập.
Các bước tiếp theo cho dự án của bạn:
- Thêm tính năng tự động làm mới để feed luôn được cập nhật.
- Thêm thanh tìm kiếm để tìm các bài viết cụ thể.
- Sử dụng sessionStorage để cache dữ liệu và tăng tốc độ.
- Sử dụng CSS variables để thêm chế độ dark mode.
Đừng thêm những thứ rườm rà vào dự án của bạn. Hãy sử dụng các công cụ đã được tích hợp sẵn trong trình duyệt.
Nguồn: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803