Zbuduj prosty widget kanału RSS za pomocą Vanilla JS
RSS to stary format. Nadal pozostaje on jedną z najlepszych metod udostępniania treści w sieci.
Wielu programistów używa ciężkich frameworków, aby wyświetlać kanały RSS. Nie potrzebujesz ich. RSS to po prostu XML. Twoja przeglądarka potrafi natywnie odczytywać XML bez dodatkowych bibliotek.
Możesz zbudować przejrzysty widget RSS, używając wyłącznie vanilla JavaScript i CSS.
Oto jak to zrobić:
- Użyj Fetch API, aby pobrać dane XML.
- Użyj DOMParser, aby przekształcić ten XML w dokument umożliwiający przeszukiwanie.
- Zmapuj dane do obiektu JavaScript.
- Wyrenderuj dane w formie kart HTML.
Uważaj na błędy CORS. Jeśli serwer zablokuje Twoje żądanie, przeglądarka je zatrzyma. Do testów możesz użyć proxy, takiego jak allorigins.win. W prawdziwych projektach użyj Cloudflare Worker do obsługi żądań.
Widget działa w następujący sposób:
• Pobierz URL kanału. • Przeanalizuj tytuł i opis kanału. • Przejdź przez każdy element, aby pobrać tytuł, link i datę. • Stwórz responsywną siatkę kart.
Możesz nawet dodać filtry kategorii. Pozwala to użytkownikom wybierać tematy, takie jak Technologia czy Jedzenie.
Ta metoda działa z każdym standardowym kanałem RSS. Możesz dodać kanał technologiczny lub podcastowy na tej samej stronie. Każdy z nich działa niezależnie.
Kolejne kroki dla Twojego projektu:
- Dodaj automatyczne odświeżanie, aby kanał był zawsze aktualny.
- Dodaj pasek wyszukiwania, aby znaleźć konkretne wpisy.
- Użyj sessionStorage, aby buforować dane i przyspieszyć działanie.
- Użyj zmiennych CSS, aby dodać tryb ciemny.
Przestań dodawać zbędny kod do swoich projektów. Korzystaj z narzędzi, które są już wbudowane w przeglądarkę.
Źródło: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803