Vanilla JS ব্যবহার করে একটি সহজ RSS Feed Widget তৈরি করুন
RSS একটি পুরনো ফরম্যাট। ওয়েবে কন্টেন্ট শেয়ার করার জন্য এটি এখনও অন্যতম সেরা উপায়।
অনেক ডেভেলপার RSS ফিড দেখানোর জন্য ভারী ফ্রেমওয়ার্ক ব্যবহার করেন। আপনার সেগুলোর প্রয়োজন নেই। RSS হলো কেবল XML। অতিরিক্ত লাইব্রেরি ছাড়াই আপনার ব্রাউজার নেটিভলি XML পড়তে পারে।
আপনি শুধুমাত্র vanilla JavaScript এবং CSS ব্যবহার করে একটি পরিচ্ছন্ন RSS widget তৈরি করতে পারেন।
এটি করার পদ্ধতি নিচে দেওয়া হলো:
- XML ডেটা পেতে Fetch API ব্যবহার করুন।
- সেই XML-কে একটি সার্চযোগ্য ডকুমেন্টে রূপান্তর করতে DOMParser ব্যবহার করুন।
- ডেটাগুলোকে একটি JavaScript object-এ ম্যাপ করুন।
- ডেটাগুলোকে HTML cards-এ রেন্ডার করুন।
CORS error-এর দিকে খেয়াল রাখুন। যদি কোনো সার্ভার আপনার রিকোয়েস্ট ব্লক করে দেয়, তবে ব্রাউজার সেটি থামিয়ে দেবে। টেস্টিংয়ের জন্য আপনি allorigins.win-এর মতো একটি প্রক্সি ব্যবহার করতে পারেন। আসল প্রজেক্টের জন্য, রিকোয়েস্ট হ্যান্ডেল করতে একটি Cloudflare Worker ব্যবহার করুন।
উইজেটটি এভাবে কাজ করে:
• Feed URL ফেচ (Fetch) করুন। • চ্যানেলের টাইটেল এবং ডেসক্রিপশন পার্স (Parse) করুন। • টাইটেল, লিঙ্ক এবং তারিখ পেতে প্রতিটি আইটেমের মধ্য দিয়ে লুপ (Loop) চালান। • কার্ডগুলোর একটি রেসপনসিভ গ্রিড তৈরি করুন।
আপনি এমনকি ক্যাটাগরি ফিল্টারও যোগ করতে পারেন। এটি আপনার ব্যবহারকারীদের Tech বা Food-এর মতো টপিক বেছে নিতে সাহায্য করবে।
এই পদ্ধতিটি যেকোনো স্ট্যান্ডার্ড RSS ফিডের সাথে কাজ করে। আপনি একই পেজে একটি টেক ফিড বা একটি পডকাস্ট ফিড যোগ করতে পারেন। প্রতিটি আলাদাভাবে কাজ করবে।
আপনার প্রজেক্টের পরবর্তী ধাপগুলো:
- ফিডটি আপ-টু-ডেট রাখতে auto-refresh যোগ করুন।
- নির্দিষ্ট পোস্ট খোঁজার জন্য একটি সার্চ বার যোগ করুন।
- ডেটা ক্যাশ করতে এবং গতি বাড়াতে sessionStorage ব্যবহার করুন।
- ডার্ক মোড যোগ করতে CSS variables ব্যবহার করুন।
আপনার প্রজেক্টে অপ্রয়োজনীয় ভার (bloat) যোগ করা বন্ধ করুন। ব্রাউজারে আগে থেকেই বিল্ট-ইন থাকা টুলগুলো ব্যবহার করুন।
উৎস: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803