JavaScript ഉപയോഗിച്ച് ഒരു ലളിതമായ RSS വിഡ്ജറ്റ് നിർമ്മിക്കാം
RSS 20 വർഷത്തിലേറെ പഴക്കമുള്ളതാണ്. വാർത്തകൾ, ബ്ലോഗുകൾ, പോഡ്കാസ്റ്റുകൾ എന്നിവ പങ്കിടാനുള്ള മികച്ച മാർഗങ്ങളിൽ ഒന്നായി ഇത് ഇന്നും നിലനിൽക്കുന്നു.
RSS ഫീഡുകൾ കാണിക്കാൻ പല ഡെവലപ്പർമാരും വലിയ ഫ്രെയിംവർക്കുകൾ ഉപയോഗിക്കാറുണ്ട്. എന്നാൽ നിങ്ങൾക്ക് അവ ആവശ്യമില്ല. RSS എന്നത് വെറും XML മാത്രമാണ്. നിങ്ങളുടെ ബ്രൗസറിന് XML നേരിട്ട് വായിക്കാൻ കഴിയും.
വെറും vanilla JavaScript, CSS എന്നിവ മാത്രം ഉപയോഗിച്ച് നിങ്ങൾക്ക് വൃത്തിയുള്ളതും റെസ്പോൺസീവ് ആയതുമായ ഒരു RSS വിഡ്ജറ്റ് നിർമ്മിക്കാം.
ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:
- XML ഡാറ്റ ലഭിക്കാൻ Fetch API ഉപയോഗിക്കുക.
- ആ XML ഒരു വായിക്കാവുന്ന ഡോക്യുമെന്റാക്കി മാറ്റാൻ DOMParser ഉപയോഗിക്കുക.
- ടൈറ്റിലുകൾ, ലിങ്കുകൾ, ഡിസ്ക്രിപ്ഷനുകൾ എന്നിവ വേർതിരിച്ചെടുക്കാൻ ഐറ്റത്തിലൂടെ ലൂപ്പ് ചെയ്യുക.
- ഡാറ്റ കാർഡുകളുടെ ഒരു ഗ്രിഡായി റെൻഡർ ചെയ്യുക.
ഇതിൽ സാധാരണയായി ഉണ്ടാകുന്ന ഒരു പ്രശ്നമാണ് CORS. ഒരു സെർവർ നിങ്ങളുടെ റിക്വസ്റ്റ് ബ്ലോക്ക് ചെയ്താൽ ബ്രൗസർ അത് തടയും. allorigins.win പോലുള്ള ഒരു പ്രോക്സി ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് പരിഹരിക്കാം. പ്രൊഫഷണൽ പ്രോജക്റ്റുകൾക്കായി, റിക്വസ്റ്റുകൾ കൈകാര്യം ചെയ്യാൻ ഒരു Cloudflare Worker ഉപയോഗിക്കുക.
ഈ രീതിയുടെ പ്രധാന സവിശേഷതകൾ:
- npm ഇൻസ്റ്റാളേഷനുകളോ എക്സ്റ്റേണൽ ലൈബ്രറികളോ ആവശ്യമില്ല.
- ചെറിയ ഫയൽ സൈസും വേഗത്തിലുള്ള ലോഡിംഗും.
- ഏത് സ്റ്റാൻഡേർഡ് RSS 2.0 ഫീഡും ഇതിൽ പ്രവർത്തിക്കും.
- കാറ്റഗറി ഫിൽട്ടറുകൾ ചേർക്കുന്നത് എളുപ്പമാണ്.
താഴെ പറയുന്നവ ചേർത്ത് നിങ്ങൾക്ക് ഈ വിഡ്ജറ്റ് വികസിപ്പിക്കാം:
- ഉള്ളടക്കം പുതുക്കി നിർത്താൻ ഓട്ടോ-റീഫ്രഷ്.
- പ്രത്യേക പോസ്റ്റുകൾ കണ്ടെത്താൻ ഒരു സെർച്ച് ബാർ.
- ഡാറ്റ കാഷെ ചെയ്യാൻ ലോക്കൽ സ്റ്റോറേജ്.
- CSS വേരിയബിളുകൾ ഉപയോഗിച്ച് ഡാർക്ക് മോഡ് സപ്പോർട്ട്.
നേറ്റീവ് API-കൾ കൃത്യമായി പ്രവർത്തിക്കുമ്പോൾ വലിയ ടൂളുകൾ തേടി പോകുന്നത് നിർത്തുക.
സ്രോതസ്സ്: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803