Costruisci un semplice widget RSS feed con Vanilla JS
L'RSS è un formato datato. Rimane uno dei modi migliori per condividere contenuti sul web.
Molti sviluppatori utilizzano framework pesanti per mostrare i feed RSS. Non ne hai bisogno. L'RSS è solo XML. Il tuo browser può leggere l'XML nativamente senza librerie aggiuntive.
Puoi costruire un widget RSS pulito usando solo vanilla JavaScript e CSS.
Ecco come fare:
- Usa la Fetch API per ottenere i dati XML.
- Usa DOMParser per trasformare quell'XML in un documento ricercabile.
- Mappa i dati in un oggetto JavaScript.
- Renderizza i dati in card HTML.
Fai attenzione agli errori CORS. Se un server blocca la tua richiesta, il browser la interromperà. Puoi usare un proxy come allorigins.win per i test. Per i progetti reali, usa un Cloudflare Worker per gestire le richieste.
Il widget funziona così:
• Recupera l'URL del feed. • Analizza il titolo e la descrizione del canale. • Cicla attraverso ogni elemento per ottenere titolo, link e data. • Crea una griglia di card responsive.
Puoi persino aggiungere filtri per categoria. Questo permette agli utenti di scegliere argomenti come Tech o Food.
Questo metodo funziona con qualsiasi feed RSS standard. Puoi aggiungere un feed tecnologico o un feed podcast alla stessa pagina. Ognuno funziona indipendentemente.
Prossimi passi per il tuo progetto:
- Aggiungi l'auto-refresh in modo che il feed rimanga aggiornato.
- Aggiungi una barra di ricerca per trovare post specifici.
- Usa sessionStorage per mettere in cache i dati e migliorare la velocità.
- Usa le variabili CSS per aggiungere la dark mode.
Smetti di aggiungere codice superfluo ai tuoi progetti. Usa gli strumenti già integrati nel browser.
Fonte: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803