JavaScript ile Basit Bir RSS Widget'ı Oluşturun
RSS 20 yaşın üzerinde. Haberleri, blogları ve podcast'leri paylaşmak için hala en önemli yöntemlerden biri.
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 XML'i yerel olarak okuyabilir.
Sadece vanilla JavaScript ve CSS kullanarak temiz, duyarlı (responsive) bir RSS widget'ı oluşturabilirsiniz.
Nasıl çalışır:
- XML verilerini almak için Fetch API kullanın.
- Bu XML'i okunabilir bir belgeye dönüştürmek için DOMParser kullanın.
- Başlıkları, bağlantıları ve açıklamaları çıkarmak için öğeler üzerinde döngü kurun.
- Verileri bir kart ızgarası (grid) şeklinde render edin.
Yaygın bir sorun CORS'tur. Eğer bir sunucu isteğinizi engellerse, tarayıcı bunu durdurur. Bunu allorigins.win gibi bir proxy kullanarak çözebilirsiniz. Profesyonel projeler için istekleri yönetmek üzere bir Cloudflare Worker kullanın.
Bu yaklaşımın temel özellikleri:
- npm kurulumu veya harici kütüphane gerektirmez.
- Küçük dosya boyutu ve hızlı yükleme.
- Herhangi bir standart RSS 2.0 akışı ile çalışır.
- Kategori filtreleri eklemek kolaydır.
Bu widget'ı şunları ekleyerek genişletebilirsiniz:
- İçeriği güncel tutmak için otomatik yenileme.
- Belirli gönderileri bulmak için bir arama çubuğu.
- Verileri önbelleğe almak için local storage.
- CSS değişkenlerini kullanarak karanlık mod desteği.
Yerel API'ler mükemmel çalışırken ağır araçlara başvurmayı bırakın.
Kaynak: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803