Vanilla JS સાથે એક સરળ RSS Feed Widget બનાવો
RSS એક જૂનું ફોર્મેટ છે. વેબ પર કન્ટેન્ટ શેર કરવા માટે તે આજે પણ શ્રેષ્ઠ રીતોમાંની એક છે.
ઘણા ડેવલપર્સ RSS feeds બતાવવા માટે ભારે frameworks નો ઉપયોગ કરે છે. તમારે તેની જરૂર નથી. RSS માત્ર XML છે. તમારું બ્રાઉઝર વધારાની libraries વગર કુદરતી રીતે XML વાંચી શકે છે.
તમે ફક્ત vanilla JavaScript અને CSS નો ઉપયોગ કરીને એક ક્લીન RSS widget બનાવી શકો છો.
તે કેવી રીતે કરવું તે અહીં છે:
- XML ડેટા મેળવવા માટે Fetch API નો ઉપયોગ કરો.
- તે XML ને સર્ચેબલ ડોક્યુમેન્ટમાં બદલવા માટે DOMParser નો ઉપયોગ કરો.
- ડેટાને JavaScript object માં મેપ કરો.
- ડેટાને HTML cards માં રેન્ડર કરો.
CORS errors થી સાવધ રહો. જો સર્વર તમારી રિક્વેસ્ટ બ્લોક કરે છે, તો બ્રાઉઝર તેને અટકાવી દેશે. ટેસ્ટિંગ માટે તમે allorigins.win જેવી proxy નો ઉપયોગ કરી શકો છો. અસલી પ્રોજેક્ટ્સ માટે, રિક્વેસ્ટ હેન્ડલ કરવા માટે Cloudflare Worker નો ઉપયોગ કરો.
આ widget આ રીતે કામ કરે છે:
• Feed URL ફેચ કરો. • Channel title અને description પાર્સ કરો. • Title, link અને date મેળવવા માટે દરેક item માં લૂપ ચલાવો. • Cards નું responsive grid બનાવો.
તમે કેટેગરી ફિલ્ટર્સ પણ ઉમેરી શકો છો. આ તમારા યુઝર્સને Tech અથવા Food જેવા વિષયો પસંદ કરવા દેશે.
આ પદ્ધતિ કોઈપણ સ્ટાન્ડર્ડ RSS feed સાથે કામ કરે છે. તમે એક જ પેજ પર tech feed અથવા podcast feed ઉમેરી શકો છો. દરેક સ્વતંત્ર રીતે કામ કરે છે.
તમારા પ્રોજેક્ટ માટે આગળના પગલાં:
- auto-refresh ઉમેરો જેથી feed અપ-ટુ-ડેટ રહે.
- ચોક્કસ પોસ્ટ શોધવા માટે search bar ઉમેરો.
- ડેટા કેશ કરવા અને સ્પીડ બચાવવા માટે sessionStorage નો ઉપયોગ કરો.
- Dark mode ઉમેરવા માટે CSS variables નો ઉપયોગ કરો.
તમારા પ્રોજેક્ટ્સમાં બિનજરૂરી વસ્તુઓ (bloat) ઉમેરવાનું બંધ કરો. બ્રાઉઝરમાં પહેલેથી જ બિલ્ટ-ઇન હોય તેવા સાધનોનો ઉપયોગ કરો.
Source: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803