Vanilla JS ile Basit Bir RSS Akış Widget'ı Oluşturun
RSS eski bir formattır. Web üzerinde içerik paylaşmanın en iyi yollarından biri olmaya devam ediyor.
Birçok geliştirici, RSS akışlarını göstermek için ağır framework'ler kullanıyor. Bunlara ihtiyacınız yok. RSS sadece XML'dir. Tarayıcınız, ekstra kütüphanelere ihtiyaç duymadan XML'i yerel olarak okuyabilir.
Sadece vanilla JavaScript ve CSS kullanarak temiz bir RSS widget'ı oluşturabilirsiniz.
İşte nasıl yapacağınız:
- XML verilerini almak için Fetch API kullanın.
- Bu XML'i aranabilir bir belgeye dönüştürmek için DOMParser kullanın.
- Verileri bir JavaScript nesnesine eşleyin.
- Verileri HTML kartları olarak render edin.
CORS hatalarına dikkat edin. Eğer bir sunucu isteğinizi engellerse, tarayıcı bunu durdurur. Test etmek için allorigins.win gibi bir proxy kullanabilirsiniz. Gerçek projeler için istekleri yönetmek üzere bir Cloudflare Worker kullanın.
Widget şu şekilde çalışır:
• Akış URL'sini çekin. • Kanal başlığını ve açıklamasını ayrıştırın. • Başlığı, bağlantıyı ve tarihi almak için her öğe üzerinde döngü kurun. • Duyarlı bir kart ızgarası oluşturun.
Hatta kategori filtreleri bile ekleyebilirsiniz. Bu, kullanıcılarınızın Teknoloji veya Yemek gibi konuları seçmesine olanak tanır.
Bu yöntem, herhangi bir standart RSS akışı ile çalışır. Aynı sayfaya bir teknoloji akışı veya bir podcast akışı ekleyebilirsiniz. Her biri bağımsız olarak çalışır.
Projeniz için sonraki adımlar:
- Akışın güncel kalması için otomatik yenileme ekleyin.
- Belirli gönderileri bulmak için bir arama çubuğu ekleyin.
- Verileri önbelleğe almak ve hız kazanmak için sessionStorage kullanın.
- Karanlık mod eklemek için CSS değişkenlerini kullanın.
Projelerinize gereksiz yükler eklemeyi bırakın. Tarayıcıya halihazırda yerleşik olan araçları kullanın.
Kaynak: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803