𝗘𝗿𝘀𝘁𝗲𝗹𝗹𝗲 𝗲𝗶𝗻 𝗲𝗶𝗻𝗳𝗮𝗰𝗵𝗲𝘀 𝗥𝗦𝗦-𝗙𝗲𝗲𝗱-𝗪𝗶𝗱𝗴𝗲𝘁 𝗺𝗶𝘁 𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗦
RSS ist ein altes Format. Es bleibt eine der besten Möglichkeiten, Inhalte im Web zu teilen.
Viele Entwickler nutzen schwere Frameworks, um RSS-Feeds anzuzeigen. Das ist nicht nötig. RSS ist einfach nur XML. Dein Browser kann XML nativ lesen, ohne zusätzliche Bibliotheken zu benötigen.
Du kannst ein sauberes RSS-Widget allein mit Vanilla JavaScript und CSS erstellen.
So geht's:
- Nutze die Fetch API, um die XML-Daten abzurufen.
- Nutze den DOMParser, um dieses XML in ein durchsuchbares Dokument umzuwandeln.
- Mappe die Daten in ein JavaScript-Objekt.
- Rendere die Daten in HTML-Cards.
Achte auf CORS-Fehler. Wenn ein Server deine Anfrage blockiert, stoppt der Browser sie. Für Tests kannst du einen Proxy wie allorigins.win verwenden. Für echte Projekte solltest du einen Cloudflare Worker nutzen, um die Anfragen zu verarbeiten.
Das Widget funktioniert so:
• Rufe die Feed-URL ab. • Parse den Kanalnamen und die Beschreibung. • Iteriere durch jedes Element, um Titel, Link und Datum zu erhalten. • Erstelle ein responsives Grid aus Cards.
Du kannst sogar Kategorie-Filter hinzufügen. So können deine Nutzer Themen wie Tech oder Food auswählen.
Diese Methode funktioniert mit jedem Standard-RSS-Feed. Du kannst einen Tech-Feed oder einen Podcast-Feed auf derselben Seite hinzufügen. Jeder arbeitet unabhängig.
Nächste Schritte für dein Projekt:
- Füge ein Auto-Refresh hinzu, damit der Feed aktuell bleibt.
- Füge eine Suchleiste hinzu, um bestimmte Beiträge zu finden.
- Nutze sessionStorage, um Daten zu cachen und die Geschwindigkeit zu erhöhen.
- Nutze CSS-Variablen, um einen Dark Mode hinzuzufügen.
Hör auf, deine Projekte mit unnötigem Ballast aufzublähen. Nutze die Werkzeuge, die bereits im Browser integriert sind.
Quelle: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803