JavaScript ಸ್ಥಿರ ದಾಖಲೆಗಳನ್ನು (static documents) ಸಾಫ್ಟ್‌ವೇರ್‌ಗಳನ್ನಾಗಿ ಮಾಡಿದೆ. ಸಿಂಗಲ್-ಪೇಜ್ ಆಪ್‌ಗಳು ತಕ್ಷಣವೇ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬ ಅನುಭವ ನೀಡುತ್ತವೆ. ಪೂರ್ಣ ಪುಟದ ರೀಲೋಡ್‌ಗಳಿಲ್ಲ, ಬಿಳಿ ಪರದೆಯ ಫ್ಲಿಕ್ಕರಿಂಗ್‌ಗಳಿಲ್ಲ. ಆದರೆ ಆ ವೇಗವು ಅನೇಕ ತಂಡಗಳು ನಿರ್ಲಕ್ಷಿಸುವ ಒಂದು ಬೆಲೆಯನ್ನು ತೆರಬೇಕಾಗುತ್ತದೆ: ವೆಬ್‌ನ ಮೂಲ ಯಂತ್ರೋಪಕರಣಗಳು ಕೊಳೆಯಲು ಪ್ರಾರಂಭಿಸುತ್ತವೆ. ನ್ಯಾವಿಗೇಷನ್ ದುರ್ಬಲವಾಗುತ್ತದೆ. ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳು ಹಾದಿಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಕಷ್ಟಪಡುತ್ತವೆ. ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ದಾರಿ ತಪ್ಪುತ್ತವೆ. ಮತ್ತು ಬಳಕೆದಾರರು ವೆಬ್‌ಸೈಟ್‌ಗಳಂತೆ ಕಾಣುವ ಆದರೆ ಕೆಟ್ಟುಹೋದ ಡೆಸ್ಕ್‌ಟಾಪ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಂತೆ ವರ್ತಿಸುವ ಇಂಟರ್‌ಫೇಸ್‌ಗಳಲ್ಲಿ ಸಿಲುಕಿಕೊಂಡಿರುತ್ತಾರೆ.

ಇದಕ್ಕೆ ಕಾರಣ ಸಾಮಾನ್ಯವಾಗಿ onClick ಹ್ಯಾಂಡ್ಲರ್ ಹೊಂದಿರುವ div ಆಗಿರುತ್ತದೆ.

ಲಿಂಕ್‌ಗಳಾಗಿ Div ಗಳನ್ನು ಬಳಸುವುದು ನಿಲ್ಲಿಸಿ

div ಯಾವುದೇ ಅರ್ಥಪೂರ್ಣ (semantic) ಅರ್ಥವನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ. ಅದು ಕೇವಲ ಒಂದು ಬಾಕ್ಸ್. ನೀವು ಅದರ ಮೇಲೆ ಕ್ಲಿಕ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಅಳವಡಿಸಿ, ಬಳಕೆದಾರರನ್ನು ಹೊಸ ವ್ಯೂಗೆ (view) ಕಳುಹಿಸಲು ಬಳಸಿದಾಗ, ನೀವು ಬ್ರೌಸರ್ ಅನ್ನು ಒಂದು ಕಾರ್ಡ್‌ಬೋರ್ಡ್ ಬಾಕ್ಸ್ ಅನ್ನು ಬಾಗಿಲಿನಂತೆ ಪರಿಗಣಿಸುವಂತೆ ಕೇಳುತ್ತಿದ್ದೀರಿ ಎಂದರ್ಥ. ಬ್ರೌಸರ್ ಅದನ್ನು ನಿರಾಕರಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಸುತ್ತ ನಿರ್ಮಿಸಲಾದ ಪ್ರತಿಯೊಂದು ಪರಿಕರವೂ (tool) ಹಾಗೆಯೇ ಮಾಡುತ್ತದೆ.

ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು div ಅನ್ನು ಲಿಂಕ್ ಅಥವಾ ಬಟನ್ ಎಂದು ಘೋಷಿಸುವುದಿಲ್ಲ. ಅವು ಅದನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತವೆ ಅಥವಾ ಕೇವಲ ಪಠ್ಯವಾಗಿ (plain text) ಓದುತ್ತವೆ. ಧ್ವನಿಯ ಮೂಲಕ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವ ಬಳಕೆದಾರರಿಗೆ ಅದನ್ನು ಗುರಿ ಮಾಡಲಾಗುವುದಿಲ್ಲ. ನಿಮ್ಮ ಪುಟದಲ್ಲಿರುವ URL ಗಳನ್ನು ಹುಡುಕುವ ಸರ್ಚ್ ಇಂಜಿನ್ ಕ್ರಾಲರ್ (crawler), ಅನುಸರಿಸಲು ಏನೂ ಕಾಣದೆ ಇರುತ್ತದೆ. ನಿಮ್ಮ ರೂಟ್ (route) ಅಸ್ತಿತ್ವದಲ್ಲೇ ಇಲ್ಲ ಎಂದೇ ಅರ್ಥವಾಗುತ್ತದೆ.

ಅದಕ್ಕಿಂತ ಕೆಟ್ಟದೇನೆ, ಬಳಕೆದಾರರಿಗೆ ಈಗಾಗಲೇ ತಿಳಿದಿರುವ ವರ್ತನೆಗಳನ್ನು (behaviors) ನೀವು ಕಳೆದುಕೊಳ್ಳುತ್ತೀರಿ. ನಿಜವಾದ ಲಿಂಕ್ ಅನ್ನು ಬಳಸುವಾಗ ಯಾರಾದರೂ ರೈಟ್-ಕ್ಲಿಕ್ ಮಾಡಿ ಹೊಸ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ತೆರೆಯಬಹುದು, ಗಮ್ಯಸ್ಥಾನವನ್ನು (destination) ಬುಕ್‌ಮಾರ್ಕ್ ಮಾಡಬಹುದು ಅಥವಾ ಹಂಚಿಕೊಳ್ಳಲು ವಿಳಾಸವನ್ನು ಕಾಪಿ ಮಾಡಬಹುದು. ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರು ಅದನ್ನು ತಲುಪಲು Tab ಮತ್ತು ತೆರೆಯಲು Enter ಒತ್ತುತ್ತಾರೆ ಎಂದು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ. div ಇವುಗಳಲ್ಲಿ ಯಾವುದನ್ನೂ ನೀಡುವುದಿಲ್ಲ. ನೀವು tabIndex ಮತ್ತು role="link" ಹಾಗೂ ಕೀಬೋರ್ಡ್ ಲಿಸನರ್‌ಗಳನ್ನು ಅಳವಡಿಸಿದರೂ ಸಹ, ಬ್ರೌಸರ್ ಉಚಿತವಾಗಿ ನೀಡುವ ವಿಷಯವನ್ನು ನೀವು ಕಳಪೆಯಾಗಿ ಮರುನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಿ ಎಂದರ್ಥ. ಮತ್ತು ನೀವು ಯಾವುದಾದರೂ ಒಂದು ಎಡ್ಜ್ ಕೇಸ್ (edge case) ಅನ್ನು ಮರೆಯುತ್ತೀರಿ. ನೀವು ಯಾವಾಗಲೂ ಮರೆಯುತ್ತೀರಿ.

ಗಮ್ಯಸ್ಥಾನಗಳಿಗಾಗಿ ಆಂಕರ್‌ಗಳನ್ನು, ಕ್ರಿಯೆಗಳಿಗಾಗಿ ಬಟನ್‌ಗಳನ್ನು ಬಳಸಿ

HTML ಈಗಾಗಲೇ ಇದಕ್ಕೆ ಪರಿಹಾರ ನೀಡಿದೆ. ಎರಡೂ ಎಲಿಮೆಂಟ್‌ಗಳು ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದಂತೆ ಕಾಣುವುದರಿಂದ ಗೊಂದಲ ಉಂಟಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ಡೆವಲಪರ್‌ಗಳು ಅವುಗಳನ್ನು ಒಂದೇ ಎಂದು ಭಾವಿಸುತ್ತಾರೆ. ಆದರೆ ಅವು ಹಾಗಲ್ಲ.

ನೀವು ಬಳಕೆದಾರರನ್ನು ಹೊಸ URL ಗೆ ಕಳುಹಿಸಲು ಬಯಸಿದಾಗ <a ಟ್ಯಾಗ್ ಬಳಸಿ. ಇದು ಕೇವಲ ವ್ಯೂ ಬದಲಾವಣೆ ಅಥವಾ ಸ್ಟೇಟ್ ಚೇಂಜ್ ಆಗಿರಬಾರದು, ಬದಲಾಗಿ ಒಂದು ನಿಜವಾದ ಸ್ಥಳವಾಗಿರಬೇಕು. href ಅಟ್ರಿಬ್ಯೂಟ್‌ನಲ್ಲಿ ನಿಜವಾದ ವಿಳಾಸವಿರಬೇಕು:

<a href="/docs">Documentation</a>

ಅಷ್ಟೇ. ಬಳಕೆದಾರರು ಎಲ್ಲೋ ಹೋಗುತ್ತಿದ್ದರೆ, ಲಿಂಕ್ ಬಳಸಿ.

ಪ್ರಸ್ತುತ ಪುಟದಲ್ಲಿ ಏನಾದರೂ ಘಟಿಸಿದಾಗ <button> ಬಳಸಿ. ಬಟನ್‌ಗಳು ಈ ಕೆಳಗಿನ ಕ್ರಿಯೆಗಳಿಗಾಗಿ ಬಳಕೆಯಾಗುತ್ತವೆ:

  • ಮಾಡಲ್ (modal) ತೆರೆಯುವುದು
  • ಫಾರ್ಮ್ ಸಬ್ಮಿಟ್ ಮಾಡುವುದು
  • ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಉಳಿಸುವುದು
  • ಮೆನುವನ್ನು ಟೋಗಲ್ ಮಾಡುವುದು

ಲಿಂಕ್‌ಗಳು ಗಮ್ಯಸ್ಥಾನಗಳಿಗಾಗಿ. ಬಟನ್‌ಗಳು ಕ್ರಿಯೆಗಳಿಗಾಗಿ. ಇವೆರಡನ್ನೂ ಬೆರೆಸುವುದರಿಂದ ನಿಮ್ಮ ಇಂಟರ್‌ಫೇಸ್ ಗೊಂದಲಮಯವಾಗುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರ ನಿರೀಕ್ಷೆಗಳನ್ನು ಮುರಿಯುತ್ತದೆ.

ಬ್ರೌಸರ್ ತನ್ನ ಕೆಲಸವನ್ನು ಮಾಡಲು ಬಿಡಿ

ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ದಶಕಗಳ ವಿಕಸನ ಮತ್ತು ಪ್ರಮಾಣೀಕರಣದ (standardization) ಫಲವಾಗಿವೆ. ನಿಮ್ಮ ಕೈಯಿಂದ ಬರೆದ JavaScript ಗಿಂತ ಅವು ಭದ್ರತೆ (security), ಇತಿಹಾಸ (history), ಪ್ರಿಫೆಚಿಂಗ್ (prefetching) ಮತ್ತು ಅಕ್ಸೆಸಿಬಿಲಿಟಿ (accessibility) ಅನ್ನು ಉತ್ತಮವಾಗಿ ನಿರ್ವಹಿಸುತ್ತವೆ.

ಒಂದು ನೈಜ ಆಂಕರ್ ಟ್ಯಾಗ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬ್ರೌಸರ್ ಇತಿಹಾಸದ ಸ್ಟ್ಯಾಕ್ ಅನ್ನು (history stack) ಅಪ್‌ಡೇಟ್ ಮಾಡುತ್ತದೆ. ಇದು ನೇтив ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೆನುವಿನೊಂದಿಗೆ (native context menu) ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರು ಅದರ ಮೇಲೆ ಹವರ್ (hover) ಮಾಡಿದಾಗ ಅಥವಾ ಫೋಕಸ್ ಮಾಡಿದಾಗ, ಇದು ಬ್ರೌಸರ್‌ನ ಬಿಲ್ಟ್-ಇನ್ ಪ್ರಿಫೆಚಿಂಗ್ ಅಲ್ಗಾರಿದಮ್‌ಗಳಲ್ಲಿ ಭಾಗವಹಿಸುತ್ತದೆ, ಇದರಿಂದ ನೀವು ಒಂದು ಸಾಲು ಕೋಡ್ ಬರೆಯದೆಯೇ ನಿಮ್ಮ ಆಪ್ ವೇಗವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬ ಅನುಭವ ನೀಡುತ್ತದೆ. ಇದು ಲಿಂಕ್‌ಗಳನ್ನು ತೆರೆಯಲು ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳನ್ನು ಗೌರವಿಸುತ್ತದೆ. ಇದು ಪಾಸ್‌ವರ್ಡ್ ಮ್ಯಾನೇಜರ್‌ಗಳು, ಅನುವಾದ ಪರಿಕರಗಳು ಮತ್ತು ರೀಡರ್ ಮೋಡ್‌ಗಳೊಂದಿಗೆ ಸಹಕರಿಸುತ್ತದೆ.

ನೀವು ಅದನ್ನು JavaScript ನ್ಯಾವಿಗೇಷನ್ ಫಂಕ್ಷನ್‌ನಿಂದ ಬದಲಾಯಿಸಿದಾಗ, ನೀವು ಇವೆಲ್ಲವನ್ನೂ ಕಳೆದುಕೊಳ್ಳುತ್ತೀರಿ. ನೀವು ಕೇವಲ ಫೀಚರ್‌ಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳುತ್ತಿಲ್ಲ; ಬದಲಾಗಿ ಇಂಟರ್ನೆಟ್‌ನಲ್ಲಿನ ಇತರ ಎಲ್ಲಾ ಸೈಟ್‌ಗಳಲ್ಲಿ ಬಳಕೆದಾರರು ಬೆಳೆಸಿಕೊಂಡಿರುವ ಅಭ್ಯಾಸಗಳನ್ನು ಕೈಬಿಡಲು ಅವರನ್ನು ಒತ್ತಾಯಿಸುತ್ತಿದ್ದೀರಿ. ಇದು ಕೇವಲ ತಾಂತ್ರಿಕ ನಿರ್ಧಾರವಲ್ಲ. ಇದು ಬಳಕೆದಾರರಿಗೆ ನೀಡುವ ಪ್ರತಿಕೂಲ ಅನುಭವ (hostile user experience).

ನಿಮ್ಮ ಫ್ರೇಮ್‌ವರ್ಕ್ ವಾಸ್ತವವಾಗಿ ಏನನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಿ

React Router, Vue Router, Next.js Link components, SvelteKit. ಈ ಪರಿಕರಗಳು ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟಿಂಗ್ ಅನ್ನು ಸುಲಭವಾಗಿಸುತ್ತವೆ. ಆದರೆ ಅಬ್‌ಸ್ಟ್ರಾಕ್ಷನ್ (abstraction) ತಪ್ಪುಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ನಿಮ್ಮ DOM ಅನ್ನು ಪರೀಕ್ಷಿಸಿ. ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ತೆರೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಫ್ರೇಮ್‌ವರ್ಕ್ ಹೊರಹಾಕುವ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನೋಡಿ. ಅಂತಿಮ HTML ನಲ್ಲಿ <Link> ಕಾಂಪೊನೆಂಟ್ ಒಂದು ನೈಜ <a ಟ್ಯಾಗ್ ಆಗಿ ಮತ್ತು ಸರಿಯಾದ href ಅಟ್ರಿಬ್ಯೂಟ್ ಹೊಂದಿರಬೇಕು. ಅದು span, div ಅಥವಾ ಸರಿಯಾದ href ಇಲ್ಲದ ಬೇರೆ ಯಾವುದಾದರೂ ಆಗಿ ರೆಂಡರ್ ಆಗುತ್ತಿದ್ದರೆ, ನಿಮ್ಮ ಅಬ್‌ಸ್ಟ್ರಾಕ್ಷನ್ ವಿಫಲವಾಗಿದೆ ಎಂದರ್ಥ. ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸರಿಪಡಿಸಿ. ಡಿಫಾಲ್ಟ್ ಅನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡಿ. passHref ಪ್ರಾಪರ್ಟಿ ಅಥವಾ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ ಸಮಾನವಾದದ್ದನ್ನು ಬಳಸಿ. ಪರಿಶೀಲನೆ ಇಲ್ಲದೆ ಫ್ರೇಮ್‌ವರ್ಕ್ ಸರಿಯಾಗಿ ಮಾಡುತ್ತದೆ ಎಂದು ನಂಬಬೇಡಿ.

ಇದು ಹೈಡ್ರೇಶನ್ ಮಿಸ್‌ಮ್ಯಾಚ್‌ಗಳಿಗೂ (hydration mismatches) ಮುಖ್ಯವಾಗಿದೆ. ಸರ್ವರ್ ಒಂದು ಲಿಂಕ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಿ ಮತ್ತು ಕ್ಲೈಂಟ್ ಅದನ್ನು ಲಿಂಕ್ ಅಲ್ಲದ ವಸ್ತುವಾಗಿ ಹೈಡ್ರೇಟ್ ಮಾಡಿದರೆ, ನೀವು ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಬಗ್‌ಗಳನ್ನು ಸೃಷ್ಟಿಸುತ್ತೀರಿ. ಇವುಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುವುದು ಕಷ್ಟ, ಏಕೆಂದರೆ ನಿಮ್ಮ ಸೋರ್ಸ್ ಕೋಡ್‌ನಲ್ಲಿ HTML ಸರಿಯಾಗಿ ಕಾಣಿಸುತ್ತದೆ ಆದರೆ ಲೈವ್ DOM ನಲ್ಲಿ ತಪ್ಪಾಗಿರುತ್ತದೆ.

ನಕಲಿ ಗಮ್ಯಸ್ಥಾನಗಳನ್ನು ನಿಷೇಧಿಸಿ

ಸಾಯದ ಒಂದು ಮಾದರಿ (pattern) ಇದೆ: href="javascript:void(0)". ಲಿಂಕ್‌ನಂತೆ ಕಾಣುವ ಆದರೆ ಬಟನ್‌ನಂತೆ ವರ್ತಿಸುವ ವಸ್ತುವನ್ನು ಬಯಸಿದಾಗ ಡೆವಲಪರ್‌ಗಳು ಇದನ್ನು ಬಳಸುತ್ತಾರೆ, ಸಾಮಾನ್ಯವಾಗಿ ಅವರು ಬಟನ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಇಷ್ಟಪಡದಿದ್ದಾಗ ಅಥವಾ ಹಳೆಯ ಕೋಡ್‌ಬೇಸ್ ಇದನ್ನು ಬಯಸಿದಾಗ.

ನಿಲ್ಲಿಸಿ. ಇದು URL ಅಲ್ಲ. ಇದು ಬ್ರೌಸರ್‌ನಿಗೆ ಯಾವುದೇ ಗುರಿಯನ್ನು ನೀಡುವುದಿಲ್ಲ. ಇದು ಬಳಕೆಗೆ ಬಾರದ ಸ್ಥಿತಿಗಳೊಂದಿಗೆ ಇತಿಹಾಸದ ಸ್ಟ್ಯಾಕ್ ಅನ್ನು ಕಲುಷಿತಗೊಳಿಸುತ್ತದೆ. ಇದು ಬ್ರೌಸರ್ ಇತಿಹಾಸ ಮತ್ತು ಸುಲಭ ಲಭ್ಯತೆಯನ್ನು (accessibility) ಹಾಳುಮಾಡುತ್ತದೆ. ಇದು ಒಂದು ಬಲೆ. ನಿಮಗೆ ನ್ಯಾವಿಗೇಷನ್ ಇಲ್ಲದೆ ಕ್ಲಿಕ್ ಮಾಡುವ ವರ್ತನೆಯ ಅಗತ್ಯವಿದ್ದರೆ, ನಿಮಗೆ <button> ಬೇಕು. ಅದನ್ನು ನೀವು ಹೇಗೆ ಬೇಕಾದರೂ ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು. ಎಲಿಮೆಂಟ್ ಬಟನ್ ಆಗಿದೆಯೇ ಅಥವಾ ಲಿಂಕ್ ಆಗಿದೆಯೇ ಎಂಬುದು CSS ಗೆ ಮುಖ್ಯವಲ್ಲ. ಆದರೆ ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಮುಖ್ಯವಾಗುತ್ತದೆ.

ಬಳಕೆದಾರರು ಎಲ್ಲಿಗೆ ಹೋಗುತ್ತಿದ್ದಾರೆ ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಪಠ್ಯವನ್ನು ಬರೆಯಿರಿ

ನಿಮ್ಮ ಲಿಂಕ್‌ನ ಒಳಗಿರುವ ಪದಗಳು ಮುಖ್ಯವಾಗಿವೆ. ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರು ಪುಟದಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಲಿಂಕ್‌ನ ಪಟ್ಟಿಯನ್ನು ವೇಗವಾಗಿ ಸ್ಕ್ಯಾನ್ ಮಾಡಲು ಹೆಚ್ಚಾಗಿ ಬಳಸುತ್ತಾರೆ. ನಿಮ್ಮ ಎಲ್ಲಾ ಲಿಂಕ್‌ಗಳು "Read more" ಅಥವಾ "Click here" ಎಂದಿದ್ದರೆ, ಆ ಪಟ್ಟಿಯು ಪ್ರಯೋಜನವಿಲ್ಲದ ಗದ್ದಲವಾಗಿ ಪರಿಣಮಿಸುತ್ತದೆ.

ನಿರ್ದಿಷ್ಟವಾಗಿರಿ. ಇವುಗಳನ್ನು ಹೋಲಿಸಿ ನೋಡಿ:

  • ಕೆಟ್ಟದ್ದು: <a href="/security/api-guide">Read more</a>
  • ಒಳ್ಳೆಯದು: <a href="/security/api-guide">Read the API security guide</a>

ಎರಡನೆಯದು ಬಳಕೆದಾರರಿಗೆ ಅವರು ಏನನ್ನು ಕಂಡುಕೊಳ್ಳಲಿದ್ದಾರೆ ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ತಿಳಿಸುತ್ತದೆ. ಇದು ಗಮ್ಯದ ಪುಟದ ಬಗ್ಗೆ ಸರ್ಚ್ ಇಂಜಿನ್‌ಗಳಿಗೆ ಸಂದರ್ಭವನ್ನು (context) ನೀಡುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಲಿಂಕ್ ಪಟ್ಟಿಯನ್ನು ಸುಲಭವಾಗಿ ಸಂಚರಿಸಲು (navigable) ಮಾಡುತ್ತದೆ. ವಿವರಣಾತ್ಮಕ ಲಿಂಕ್ ಪಠ್ಯವು ನೀವು ಪಡೆಯಬಹುದಾದ ಅತ್ಯಂತ ಸುಲಭವಾದ ಮತ್ತು ಕಡಿಮೆ ವೆಚ್ಚದ ಸುಲಭ ಲಭ್ಯತೆಯ ಲಾಭಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.

ಗಂಭೀರವಾಗಿ ಪರೀಕ್ಷಿಸಿ

ನೀವು ಅದನ್ನು ಪರಿಶೀಲಿಸದಿದ್ದರೆ ಆರ್ಕಿಟೆಕ್ಚರ್ ಯಾವುದಕ್ಕೂ ಅರ್ಥವಿಲ್ಲ.

ಮೊದಲನೆಯದಾಗಿ, ನಿಮ್ಮ ಕೀಬೋರ್ಡ್ ಫ್ಲೋವನ್ನು ಪರೀಕ್ಷಿಸಿ. ನಿಮ್ಮ ಮೌಸ್ ಅನ್ನು ಅನ್‌ಪ್ಲಗ್ ಮಾಡಿ. ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಇಂಟರಾಕ್ಟಿವ್ ಎಲಿಮೆಂಟ್ ಮೂಲಕ Tab ಕೀ ಬಳಸಿ ಸಂಚರಿಸಿ. ಪ್ರತಿಯೊಂದು ನೈಜ ಲಿಂಕ್ ಕೂಡ ದೃಶ್ಯಮಾನವಾದ ಫೋಕಸ್ ಔಟ್‌ಲೈನ್ ಅನ್ನು ತೋರಿಸಬೇಕು; ಅದು ಹಿನ್ನೆಲೆಯೊಂದಿಗೆ ಮರೆಯಾಗುವ ಮಸುಕಾದ ಹೊಳಪಾಗಿರಬಾರದು, ಬದಲಾಗಿ ದಣಿದ ಕಣ್ಣು ಕೂಡ ಗುರುತಿಸಬಲ್ಲ ಸ್ಪಷ್ಟವಾದ ರಿಂಗ್ ಆಗಿರಬೇಕು. Enter ಒತ್ತಿರಿ. ಅದು ಲಿಂಕ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬೇಕು. Tab ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಬಿಟ್ಟು ಹೋದರೆ ಅಥವಾ Enter ಏನನ್ನೂ ಮಾಡದಿದ್ದರೆ, ಅಲ್ಲಿ ಬಗ್ ಇದೆ ಎಂದರ್ಥ.

ಎರಡನೆಯದಾಗಿ, ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು (routes) ಸರ್ವರ್ ಮಟ್ಟದಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟಿಂಗ್ ಕೇವಲ ಮೇಲ್ಪದರವಾಗಿದೆ. ಬಳಕೆದಾರರು /dashboard/reports ಅನ್ನು ಬೂಕ್‌ಮಾರ್ಕ್ ಮಾಡಿ ನಾಳೆ ಮರಳಿ ಬಂದಾಗ ಅಥವಾ ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ, ನಿಮ್ಮ ಸರ್ವರ್ ಆ ಪುಟವನ್ನು ಹೇಗೆ ನೀಡಬೇಕೆಂದು ತಿಳಿದಿರಬೇಕು. ಅಜ್ಞಾತ ಪಥಗಳಿಗಾಗಿ (unknown paths) ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಶೆಲ್ ಅನ್ನು ಬಳಸಲು ಅಥವಾ ನೇರವಾಗಿ ಸರಿಯಾದ HTML ಅನ್ನು ನೀಡಲು ನಿಮ್ಮ ರಿವರ್ಸ್ ಪ್ರೊಕ್ಸಿ ಅಥವಾ ಸರ್ವರ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ. ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ ಬರುವ 404 ಎರರ್ ಕೇವಲ ಸಣ್ಣ ಬಗ್ ಅಲ್ಲ. ಅದು ನೀಡಿದ ಭರವಸೆಯ ಉಲ್ಲಂಘನೆ.

JavaScript ಒಂದು ಶಕ್ತಿಯುತವಾದ ಪದರ (layer)