Створіть простий віджет RSS-стрічки за допомогою Vanilla JS
RSS — це старий формат. Він залишається одним із найкращих способів поширення контенту в мережі.
Багато розробників використовують важкі фреймворки для відображення RSS-стрічок. Вони вам не потрібні. RSS — це просто XML. Ваш браузер може читати XML нативно, без додаткових бібліотек.
Ви можете створити чистий RSS-віджет, використовуючи лише vanilla JavaScript та CSS.
Ось як це зробити:
- Використовуйте Fetch API для отримання XML-даних.
- Використовуйте DOMParser, щоб перетворити цей XML на документ, за яким можна здійснювати пошук.
- Змапуйте дані в об'єкт JavaScript.
- Відрендеріть дані у вигляді HTML-карток.
Звертайте увагу на помилки CORS. Якщо сервер блокує ваш запит, браузер зупинить його. Для тестування можна використовувати проксі, наприклад allorigins.win. Для реальних проєктів використовуйте Cloudflare Worker для обробки запитів.
Віджет працює так:
• Отримує URL-адресу стрічки. • Парсить назву та опис каналу. • Проходить циклом через кожен елемент, щоб отримати заголовок, посилання та дату. • Створює адаптивну сітку карток.
Ви навіть можете додати фільтри категорій. Це дозволить вашим користувачам обирати такі теми, як Tech або Food.
Цей метод працює з будь-якою стандартною RSS-стрічкою. Ви можете додати стрічку технологічних новин або подкастів на одну й ту саму сторінку. Кожна з них працюватиме незалежно.
Наступні кроки для вашого проєкту:
- Додайте автооновлення, щоб стрічка залишалася актуальною.
- Додайте рядок пошуку для пошуку конкретних дописів.
- Використовуйте sessionStorage для кешування даних і підвищення швидкості.
- Використовуйте CSS-змінні для додавання темної теми.
Припиніть перевантажувати свої проєкти зайвим кодом. Використовуйте інструменти, які вже вбудовані в браузер.
Джерело: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803