Створіть простий RSS-віджет за допомогою JavaScript
RSS існує вже понад 20 років. Він залишається одним із найкращих способів поширення новин, блогів та подкастів.
Багато розробників використовують важкі фреймворки для відображення RSS-стрічок. Вони вам не потрібні. RSS — це просто XML. Ваш браузер може читати XML нативно.
Ви можете створити чистий, адаптивний RSS-віджет, використовуючи лише vanilla JavaScript та CSS.
Як це працює:
- Використовуйте Fetch API для отримання XML-даних.
- Використовуйте DOMParser, щоб перетворити цей XML на читабельний документ.
- Пройдіться циклом по елементах, щоб витягнути заголовки, посилання та описи.
- Відобразіть дані у вигляді сітки карток.
Поширена проблема — це CORS. Якщо сервер блокує ваш запит, браузер його зупиняє. Ви можете вирішити це за допомогою проксі, наприклад allorigins.win. Для професійних проєктів використовуйте Cloudflare Worker для обробки запитів.
Ключові переваги цього підходу:
- Жодних інсталяцій npm або зовнішніх бібліотек.
- Малий розмір файлів та швидке завантаження.
- Працює з будь-якою стандартною стрічкою RSS 2.0.
- Легко додати фільтри за категоріями.
Ви можете розширити цей віджет, додавши:
- Автоматичне оновлення, щоб контент завжди був актуальним.
- Рядок пошуку для пошуку конкретних дописів.
- Local storage для кешування даних.
- Підтримку темної теми за допомогою CSS-змінних.
Припиніть використовувати важкі інструменти, коли нативні API працюють ідеально.
Джерело: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803