JavaScript ਨਾਲ ਇੱਕ ਸਧਾਰਨ RSS Widget ਬਣਾਓ
RSS 20 ਸਾਲਾਂ ਤੋਂ ਵੀ ਵੱਧ ਪੁਰਾਣਾ ਹੈ। ਇਹ ਖ਼ਬਰਾਂ, ਬਲੌਗਾਂ ਅਤੇ ਪੋਡਕਾਸਟਾਂ ਨੂੰ ਸਾਂਝਾ ਕਰਨ ਦਾ ਇੱਕ ਪ੍ਰਮੁੱਖ ਤਰੀਕਾ ਬਣਿਆ ਹੋਇਆ ਹੈ।
ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ RSS ਫੀਡ ਦਿਖਾਉਣ ਲਈ ਭਾਰੀ ਫਰੇਮਵਰਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। RSS ਸਿਰਫ਼ XML ਹੈ। ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ XML ਨੂੰ natively ਪੜ੍ਹ ਸਕਦਾ ਹੈ।
ਤੁਸੀਂ ਸਿਰਫ਼ vanilla JavaScript ਅਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਾਫ਼ ਅਤੇ responsive RSS widget ਬਣਾ ਸਕਦੇ ਹੋ।
ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ:
- XML ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ Fetch API ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਉਸ XML ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਬਦਲਣ ਲਈ DOMParser ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਟਾਈਟਲ, ਲਿੰਕ ਅਤੇ ਵੇਰਵੇ ਕੱਢਣ ਲਈ ਆਈਟਮਾਂ ਰਾਹੀਂ ਲੂਪ ਚਲਾਓ।
- ਡੇਟਾ ਨੂੰ ਕਾਰਡਾਂ ਦੇ ਗਰਿੱਡ ਵਿੱਚ ਰੈਂਡਰ ਕਰੋ।
ਇੱਕ ਆਮ ਸਮੱਸਿਆ CORS ਹੈ। ਜੇਕਰ ਕੋਈ ਸਰਵਰ ਤੁਹਾਡੀ ਬੇਨਤੀ ਨੂੰ ਰੋਕਦਾ ਹੈ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਰੋਕ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ allorigins.win ਵਰਗੇ proxy ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਨੂੰ ਠੀਕ ਕਰ ਸਕਦੇ ਹੋ। ਪੇਸ਼ੇਵਰ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ, ਬੇਨਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ Cloudflare Worker ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇਸ ਪਹੁੰਚ ਦੀਆਂ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:
- ਕੋਈ npm ਇੰਸਟਾਲੇਸ਼ਨ ਜਾਂ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਨਹੀਂ।
- ਛੋਟੀ ਫਾਈਲ ਸਾਈਜ਼ ਅਤੇ ਤੇਜ਼ ਲੋਡਿੰਗ।
- ਕਿਸੇ ਵੀ ਸਟੈਂਡਰਡ RSS 2.0 ਫੀਡ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ।
- ਕੈਟੇਗਰੀ ਫਿਲਟਰ ਜੋੜਨਾ ਆਸਾਨ ਹੈ।
ਤੁਸੀਂ ਇਹਨਾਂ ਚੀਜ਼ਾਂ ਨੂੰ ਜੋੜ ਕੇ ਇਸ widget ਦਾ ਵਿਸਤਾਰ ਕਰ ਸਕਦੇ ਹੋ:
- ਸਮੱਗਰੀ ਨੂੰ ਤਾਜ਼ਾ ਰੱਖਣ ਲਈ auto-refresh।
- ਖਾਸ ਪੋਸਟਾਂ ਲੱਭਣ ਲਈ ਇੱਕ ਸਰਚ ਬਾਰ।
- ਡੇਟਾ ਕੈਸ਼ ਕਰਨ ਲਈ local storage।
- CSS variables ਦੀ ਵਰਤੋਂ ਕਰਕੇ dark mode support।
ਜਦੋਂ native APIs ਬਿਲਕੁਲ ਸਹੀ ਕੰਮ ਕਰਦੇ ਹਨ, ਤਾਂ ਭਾਰੀ ਟੂਲਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬੰਦ ਕਰੋ।
ਸਰੋਤ: https://dev.to/debate_me_af4b65ae011518f/build-a-simple-rss-feed-widget-in-vanilla-javascript-1803