สร้าง RSS Widget แบบง่ายๆ ด้วย JavaScript
RSS มีอายุมากกว่า 20 ปีแล้ว และยังคงเป็นวิธีชั้นนำในการแชร์ข่าวสาร บล็อก และพอดแคสต์
นักพัฒนาหลายคนใช้ framework ขนาดใหญ่เพื่อแสดง RSS feed แต่คุณไม่จำเป็นต้องใช้มัน เพราะ RSS เป็นเพียง XML และเบราว์เซอร์ของคุณสามารถอ่าน XML ได้โดยตรง
คุณสามารถสร้าง RSS widget ที่ดูสะอาดตาและรองรับการแสดงผลทุกหน้าจอ (responsive) โดยใช้เพียง vanilla JavaScript และ CSS เท่านั้น
หลักการทำงาน:
- ใช้ Fetch API เพื่อดึงข้อมูล XML
- ใช้ DOMParser เพื่อแปลง XML นั้นให้เป็นเอกสารที่อ่านได้
- วนลูปผ่านรายการต่างๆ เพื่อดึงหัวข้อ (titles), ลิงก์ (links) และคำอธิบาย (descriptions)
- แสดงผลข้อมูลในรูปแบบ grid ของการ์ด (cards)
ปัญหาที่พบบ่อยคือ CORS หากเซิร์ฟเวอร์บล็อกคำขอของคุณ เบราว์เซอร์จะหยุดการทำงานนั้น คุณสามารถแก้ไขได้โดยใช้ proxy อย่าง allorigins.win สำหรับโปรเจกต์ระดับมืออาชีพ แนะนำให้ใช้ Cloudflare Worker ในการจัดการคำขอ
คุณสมบัติหลักของแนวทางนี้:
- ไม่ต้องติดตั้ง npm หรือใช้ library ภายนอก
- ขนาดไฟล์เล็กและโหลดได้อย่างรวดเร็ว
- ใช้งานได้กับ RSS 2.0 feed มาตรฐานทุกรูปแบบ
- เพิ่มตัวกรองหมวดหมู่ (category filters) ได้ง่าย
คุณสามารถต่อยอด widget นี้ได้โดยการเพิ่ม:
- ระบบรีเฟรชอัตโนมัติเพื่อให้เนื้อหาเป็นปัจจุบันเสมอ
- แถบค้นหาเพื่อหาโพสต์ที่ต้องการ
- Local storage เพื่อทำ cache ข้อมูล
- รองรับ Dark mode โดยใช้ CSS variables
เลิกมองหาเครื่องมือหนักๆ เมื่อ native APIs สามารถทำงานได้อย่างสมบูรณ์แบบ
ที่มา: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803