ನೀವು ಎಂದಾದರೂ ಒಂದು ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ ನಿಮ್ಮ CSS ಮಾಯವಾಗುವುದನ್ನು ನೋಡಿದ್ದರೆ, ಅಥವಾ ಒಂದು ಫೈಲ್ ಅನ್ನು ಹಿಂದಕ್ಕೆ ತರುವಾಗ (revert) ನೀವು ಏನನ್ನು ಬದಲಾಯಿಸಿದ್ದೀರಿ ಎಂಬುದು ನೆನಪಿಲ್ಲದಿದ್ದರೆ, ಕೋಡ್ ಬರೆಯುವುದು ಮತ್ತು ಅದನ್ನು ನಿಯಂತ್ರಿಸುವುದು ನಡುವಿನ ವ್ಯತ್ಯಾಸ ನಿಮಗೆ ಅರ್ಥವಾಗುತ್ತದೆ. ವೃತ್ತಿಪರ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ (web development) ಅಡಿಪಾಯದಲ್ಲಿ ಎರಡು ಪ್ರಮುಖ ವಿಚಾರಗಳಿವೆ: ಬ್ರೌಸರ್ ಎನ್ವಿರಾನ್ಮೆಂಟ್ (browser environment), ಇದು ನಿಮ್ಮ ಕೋಡ್ ಹೇಗೆ ರನ್ ಆಗಬೇಕು ಮತ್ತು ಡೇಟಾವನ್ನು ಹೇಗೆ ಸಂಗ್ರಹಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ, ಮತ್ತು Git, ಇದು ನಿಮ್ಮ ಪ್ರಯೋಗಗಳು ಶಾಶ್ವತವಾಗಿ ಕಳೆದುಹೋಗದಂತೆ ತಡೆಯುತ್ತದೆ. ಇವೆರಡನ್ನೂ ಮೊದಲೇ ಕಲಿಯುವುದು ಮುಂದೆ ಬರುವ ನಿಗೂಢ ಬಗ್ಗಳು (bugs) ಮತ್ತು ದೋಷಪೂರಿತ ಡಿಪ್ಲಾಯ್ಮೆಂಟ್ಗಳಿಂದ (deployments) ನಿಮ್ಮನ್ನು ರಕ್ಷಿಸುತ್ತದೆ.
ವಿಳಾಸ ವ್ಯವಸ್ಥೆಯಾಗಿ URL
ನೀವು ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ನಲ್ಲಿ ವಿಳಾಸವನ್ನು ಟೈಪ್ ಮಾಡುವ ಪ್ರತಿ ಬಾರಿಯೂ, ನೀವು ಬ್ರೌಸರ್ ಅನ್ನು ಒಂದು ನಿರ್ದಿಷ್ಟ ಸಮನ್ವಯಗಳ (coordinates) ಗುಂಪನ್ನು ನೀಡುತ್ತಿದ್ದೀರಿ ಎಂದರ್ಥ. Uniform Resource Locator ಎಂಬುದು ಕೇವಲ ಒಂದು ಸ್ಟ್ರಿಂಗ್ (string) ಮಾತ್ರವಲ್ಲ; ಇದು ಆರು ವಿಭಿನ್ನ ಭಾಗಗಳಾಗಿ ವಿಂಗಡಿಸಲ್ಪಟ್ಟ ಒಂದು ರಚನಾತ್ಮಕ ಸೂಚನಾ ಕೈಪಿಡಿಯಾಗಿದೆ.
ಮೊದಲು protocol ಬರುತ್ತದೆ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ HTTPS ಆಗಿರುತ್ತದೆ. ಇದು ಬ್ರೌಸರ್ ಸರ್ವರ್ ಜೊತೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸಬೇಕು ಮತ್ತು ಸಂಭಾಷಣೆಯು ಎನ್ಕ್ರಿಪ್ಟ್ (encrypted) ಆಗಿರಬೇಕೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ತಿಳಿಸುತ್ತದೆ. ನಂತರ domain ಎಂಬುದು DNS ಮೂಲಕ IP ವಿಳಾಸವಾಗಿ ಪರಿವರ್ತನೆಯಾಗುತ್ತದೆ, ಇದರಿಂದ ಬ್ರೌಸರ್ ಯಾವ ಭೌತಿಕ ಅಥವಾ ವರ್ಚುವಲ್ ಮೆಷಿನ್ ಅನ್ನು ಸಂಪರ್ಕಿಸಬೇಕು ಎಂಬುದು ತಿಳಿಯುತ್ತದೆ.
port ಎಂಬುದು ಆ ಸರ್ವರ್ನಲ್ಲಿರುವ ನಿಖರವಾದ ದ್ವಾರವನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಪ್ರೊಡಕ್ಷನ್ ಸೈಟ್ಗಳಲ್ಲಿ ನೀವು ಇದನ್ನು ಅಪರೂಪವಾಗಿ ನೋಡುತ್ತೀರಿ ಏಕೆಂದರೆ ವೆಬ್ ಸರ್ವರ್ಗಳು HTTPS ಗಾಗಿ ಡಿಫಾಲ್ಟ್ ಆಗಿ 443 ಅನ್ನು ಬಳಸುತ್ತವೆ, ಆದರೆ ಲೋಕಲ್ ಡೆವಲಪ್ಮೆಂಟ್ನಲ್ಲಿ ನೀವು ನಿರಂತರವಾಗಿ ಪೋರ್ಟ್ಗಳನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. localhost:3000 ಅಥವಾ localhost:5173 ಅನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಿ. ಪೋರ್ಟ್ ತಪ್ಪಾಗಿದ್ದರೆ, ಕನೆಕ್ಷನ್ ಕೇವಲ ಟೈಮ್ ಔಟ್ (time out) ಆಗುತ್ತದೆ.
ನಂತರ ಬರುವುದು path, ಇದು /blog/2024/march ನಂತಹ ನಿರ್ದಿಷ್ಟ ಫೈಲ್ ಅಥವಾ ರೂಟ್ (route) ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಇದರ ನಂತರ query string ಬರುತ್ತದೆ, ಇದು ಪ್ರಶ್ನಾರ್ಥಕ ಚಿಹ್ನೆಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಮತ್ತು ?category=javascript&sort=date ನಂತಹ ಡೇಟಾವನ್ನು ಸರ್ವರ್ಗೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ. ಕೊನೆಯದಾಗಿ, ಹ್ಯಾಶ್ ಚಿಹ್ನೆಯಿಂದ ಗುರುತಿಸಲಾದ fragment, ಪುಟದ ಒಳಗಿನ ನಿರ್ದಿಷ್ಟ ವಿಭಾಗವನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಲಿಂಕ್ಗಳು ಮತ್ತು ಅಕ್ಸೆಸಿಬಿಲಿಟಿಗಾಗಿ (accessibility) ಫ್ರಾಗ್ಮೆಂಟ್ಗಳು ಉಪಯುಕ್ತವಾಗಿವೆ ಏಕೆಂದರೆ ಅವು ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆ ಬಳಕೆದಾರರನ್ನು ನೇರವಾಗಿ ಒಂದು ಹೆಡಿಂಗ್ಗೆ ಕರೆದೊಯ್ಯುತ್ತವೆ.
ಈ ರಚನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ರೂಟಿಂಗ್ ದೋಷಗಳನ್ನು (routing errors) ಡಿಬಗ್ ಮಾಡಲು, ಸ್ವಚ್ಛವಾದ APIಗಳನ್ನು ನಿರ್ಮಿಸಲು ಮತ್ತು ನೆಟ್ವರ್ಕ್ ಲಾಗ್ಗಳನ್ನು ಸುಲಭವಾಗಿ ಓದಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
DOM ನಿಮ್ಮ ರನ್ಟೈಮ್ (Runtime)
ಕಾಂಪೈಲರ್ (compiler) ನಿಮ್ಮ .c ಫೈಲ್ ಅನ್ನು ಪಾರ್ಸ್ (parse) ಮಾಡದೆ ರನ್ ಮಾಡದಂತೆ, ಬ್ರೌಸರ್ಗಳು ಕೇವಲ ರ (raw) HTML ಪಠ್ಯವನ್ನು ರೆಂಡರ್ ಮಾಡುವುದಿಲ್ಲ. ಬ್ರೌಸರ್ ನಿಮ್ಮ ಮಾರ್ಕಪ್ ಅನ್ನು ಡೌನ್ಲೋಡ್ ಮಾಡಿದಾಗ, ಅದು ಟ್ಯಾಗ್ಗಳು ಮತ್ತು ಪಠ್ಯವನ್ನು Document Object Model (DOM) ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ. ಇದು ಇನ್-ಮೆಮರಿ ಟ್ರೀ (in-memory tree) ಆಗಿದ್ದು, ಇಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್ ಒಂದು ನೋಡ್ (node) ಆಗಿರುತ್ತದೆ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (JavaScript) ಅದನ್ನು ಬಳಸಬಹುದು.
DOM ಎಂಬುದು ನಿಮ್ಮ ಪುಟದ ಜೀವಂತ ರೂಪವಾಗಿದೆ. ನೀವು ಹ್ಯಾಂಬರ್ಗರ್ ಐಕಾನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಸೈಡ್ ಮೆನು ಹೊರಬಂದರೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೊಸ HTML ಗಾಗಿ ಸರ್ವರ್ ಅನ್ನು ಕೇಳುತ್ತಿಲ್ಲ. ಅದು DOM ಟ್ರೀ ಅನ್ನು ಪ್ರಶ್ನಿಸುತ್ತದೆ (query), ಒಂದು ಕ್ಲಾಸ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ ಮತ್ತು CSS ಅನ್ನು ಟ್ರಾನ್ಸಿಶನ್ (transition) ನಿರ್ವಹಿಸಲು ಬಿಡುತ್ತದೆ. ಫಾರ್ಮ್ ವ್ಯಾಲಿಡೇಶನ್ (form validation), ಲೈವ್ ಕೌಂಟರ್ಗಳು ಮತ್ತು ಇನ್ಫಿನಿಟ್ ಸ್ಕ್ರೋಲ್ (infinite scroll) ಕೂಡ ಇದೇ ರೀತಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ನೀವು ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಇನ್ಸ್ಪೆಕ್ಟ್ ಮಾಡಿ ಅದರ ಬ್ಯಾಕ್ಗ್ರೌಂಡ್ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ನೀವು ನೇರವಾಗಿ DOM ಅನ್ನು ಎಡಿಟ್ ಮಾಡುತ್ತಿದ್ದೀರಿ ಹೊರತು ಡಿಸ್ಕ್ನಲ್ಲಿರುವ ಫೈಲ್ ಅನ್ನು ಅಲ್ಲ.
ಇದು ಮುಖ್ಯವಾದದ್ದು ಏಕೆಂದರೆ ನೀವು ಎಡಿಟರ್ನಲ್ಲಿ ಬರೆಯುವ ರಚನೆ ಮತ್ತು ಬ್ರೌಸರ್ ಬಳಸುವ ರಚನೆಗಳು ಭಿನ್ನವಾಗಿರಬಹುದು. ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಹೊಸ ನೋಡ್ಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಥರ್ಡ್-ಪಾರ್ಟಿ ವಿಜೆಟ್ಗಳು (third-party widgets) ಮಾರ್ಕಪ್ ಅನ್ನು ಸೇರಿಸಬಹುದು. ನೀವು ಸ್ಟೈಲಿಂಗ್ ಅಥವಾ ಇವೆಂಟ್ ಲಿಸನರ್ಗಳನ್ನು (event listeners) ಡಿಬಗ್ ಮಾಡುವಾಗ, ಕೇವಲ ನಿಮ್ಮ ಮೂಲ ಸೋರ್ಸ್ ಕೋಡ್ ಅನ್ನು ನೋಡುವ ಬದಲು, ರೆಂಡರ್ ಆಗಿರುವ DOM ಅನ್ನು ನೋಡಬೇಕಾಗುತ್ತದೆ.
ಬ್ರೌಸರ್ನಲ್ಲಿ ಡೇಟಾ ಎಲ್ಲಿ ಇರುತ್ತದೆ?
HTTP ವಿನ್ಯಾಸತಃ ಸ್ಟೇಟ್ಲೆಸ್ (stateless), ಅಂದರೆ ಪ್ರತಿ ರಿಕ್ವೆಸ್ಟ್ ಕೂಡ ಹಿಂದಿನ ಭೇಟಿಯ ನೆನಪಿಲ್ಲದ ಅಪರಿಚಿತನಂತೆ ಸರ್ವರ್ಗೆ ತಲುಪುತ್ತದೆ. ಈ ಸ್ಥಿತಿಯನ್ನು ತಪ್ಪಿಸಲು, ಬ್ರೌಸರ್ಗಳು ನಿಮಗೆ ಮೂರು ಪ್ರಮುಖ ಸ್ಟೋರೇಜ್ ವಿಧಾನಗಳನ್ನು ನೀಡುತ್ತವೆ, ಪ್ರತಿಯೊಂದೂ ವಿಭಿನ್ನ ನಿಯಮಗಳು ಮತ್ತು ಜೀವಿತಾವಧಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ.
LocalStorage ಬಳಕೆದಾರರು ಬ್ರೌಸರ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಮುಚ್ಚಿದ ನಂತರವೂ ಸಣ್ಣ ಪ್ರಮಾಣದ ಡೇಟಾವನ್ನು ಸರಳ ಕೀ-ವ್ಯಾಲ್ಯೂ (key-value) ಸ್ಟ್ರಿಂಗ್ಗಳಾಗಿ ಇರಿಸುತ್ತದೆ. ಡಾರ್ಕ್-ಮೋಡ್ ಟೋಗಲ್ (dark-mode toggle) ಅಥವಾ ಸೈಡ್ಬಾರ್ ಸ್ಥಿತಿಯಂತಹ ಕಡಿಮೆ ಪ್ರಾಮುಖ್ಯತೆಯ ಆದ್ಯತೆಗಳಿಗಾಗಿ ಇದು ಸರಿಯಾದ ಸ್ಥಳವಾಗಿದೆ. ಸಂವೇದನಾಶೀಲ ಕ್ರೆಡೆನ್ಶಿಯಲ್ಗಳಿಗಾಗಿ (sensitive credentials) ಇದನ್ನು ಬಳಸಬೇಡಿ; ಇದು ಡೊಮೇನ್ನಲ್ಲಿ ಚಲಿಸುವ ಯಾವುದೇ ಸ್ಕ್ರಿಪ್ಟ್ಗೆ ಲಭ್ಯವಿರುತ್ತದೆ ಮತ್ತು ಇದು ತನ್ನಷ್ಟಕ್ಕೆ ತಾನೇ ಎಂದಿಗೂ ಮುಗಿಯುವುದಿಲ್ಲ (expire).
SessionStorage API ದೃಷ್ಟಿಯಿಂದ ಒಂದೇ ರೀತಿ ಕಾಣುತ್ತದೆ ಆದರೆ ವಿಭಿನ್ನವಾಗಿ ವರ್ತಿಸುತ್ತದೆ. ಇದು ಡೇಟಾವನ್ನು ಒಂದೇ ಟ್ಯಾಬ್ಗೆ ಸೀಮಿತಗೊಳಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬಳಕೆದಾರರು ಚೆಕ್ಔಟ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು (checkout flow) ತೆರೆದು, ಅರ್ಧ ಫಾರ್ಮ್ ತುಂಬಿ, ಅಕಸ್ಮಾತ್ ರಿಫ್ರೆಶ್ ಮಾಡಿದರೆ, SessionStorage ಆ ಡ್ರಾಫ್ಟ್ ಅನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳಬಹುದು. ಟ್ಯಾಬ್ ಮುಚ್ಚಿದ ತಕ್ಷಣ ಡೇಟಾ ಮಾಯವಾಗುತ್ತದೆ. ಇದು ತಾತ್ಕಾಲಿಕ ಮತ್ತು ಟ್ಯಾಬ್-ನಿರ್ದಿಷ್ಟ ವರ್ಕ್ಫ್ಲೋಗಳಿಗೆ LocalStorage ಗಿಂತ ಹೆಚ್ಚು ಸ್ವಚ್ಛವಾಗಿದೆ.
Cache ಚಿತ್ರಗಳು, ಫಾಂಟ್ಗಳು, ಸ್ಟೈಲ್ಶೀಟ್ಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ಗಳಂತಹ ದೊಡ್ಡ ಅಸೆಟ್ಗಳನ್ನು (assets) ನಿರ್ವಹಿಸುತ್ತದೆ. ಪ್ರತಿ ಭೇಟಿಯಲ್ಲೂ ಎರಡು ಮೆಗಾಬೈಟ್ನ ಹೀರೋ ಇಮೇಜ್ ಅನ್ನು ಫೆಚ್ ಮಾಡುವ ಬದಲು, ಬ್ರೌಸರ್ ಅದರ ಪ್ರತಿಯನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ ಮತ್ತು ಸರ್ವರ್ನಲ್ಲಿ ಹೊಸ ಆವೃತ್ತಿ ಇದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಸೈಟ್ ಎಷ್ಟು ವೇಗವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ನೇರವಾಗಿ ನಿಯಂತ್ರಿಸುತ್ತದೆ.
ದೈನಂದಿನ ಅಭ್ಯಾಸವಾಗಿ DevTools
ಹೆಚ್ಚಿನ ಅಭಿವರ್ಧಕರು ಕೇವಲ ಒಂದು variable ಅನ್ನು log ಮಾಡಲು ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ ಅನ್ನು ತೆರೆಯುತ್ತಾರೆ ಮತ್ತು ಅಲ್ಲಿಗೆ ನಿಲ್ಲುತ್ತಾರೆ. ಇದು ಒಂದು ವರ್ಕ್ಶಾಪ್ ಹೊಂದಿದ್ದರೂ ಕೇವಲ ಸ್ಕ್ರೂಡ್ರೈವರ್ ಅನ್ನು ಮಾತ್ರ ಬಳಸಿದಂತೆ. ಬ್ರೌಸರ್ DevTools ಒಂದು ಸಂಯೋಜಿತ ಡಿಬಗ್ಗಿಂಗ್ ಪರಿಸರವಾಗಿದೆ, ಮತ್ತು ನೀವು ಅದರ ಕನಿಷ್ಠ ನಾಲ್ಕು ಪ್ಯಾನೆಲ್ಗಳನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಬಳಸಲು ಕಲಿಯಬೇಕು.
Elements ಪ್ಯಾನೆಲ್ ಲೈವ್ DOM ಮತ್ತು ಅದರ computed styles ಅನ್ನು ತೋರಿಸುತ್ತದೆ. ಲೇಔಟ್ (layout) ಹಾಳಾದಾಗ, ನೋಡ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿ (inspect) ಮತ್ತು cascade ಅನ್ನು ಗಮನಿಸಿ. ನಿಮ್ಮ ಸೋರ್ಸ್ ಕೋಡ್ ಅನ್ನು ಮುಟ್ಟದೆಯೇ ನೀವು ರಿಯಲ್ ಟೈಮ್ನಲ್ಲಿ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಆನ್ ಮತ್ತು ಆಫ್ ಮಾಡಬಹುದು, ಇದು ಎಡಿಟರ್ನಲ್ಲಿ ಊಹಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ specificity wars ಅನ್ನು ಹುಡುಕುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ವೇಗಗೊಳಿಸುತ್ತದೆ.
Console ಸ್ಟ್ಯಾಕ್ ಟ್ರೇಸ್ಗಳೊಂದಿಗೆ (stack traces) ದೋಷಗಳನ್ನು ತೋರಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಒಂದು REPL ಕೂಡ ಆಗಿದೆ. ನೀವು ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು (selectors) ಪ್ರಶ್ನಿಸಬಹುದು (query), API ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಬಹುದು ಅಥವಾ ಪ್ರಸ್ತುತ ಪೇಜ್ ಸ್ಟೇಟ್ ವಿರುದ್ಧ ಎಕ್ಸ್ಪ್ರೆಶನ್ಗಳನ್ನು (expressions) ಮೌಲ್ಯಮಾಪನ ಮಾಡಬಹುದು.
Network ಪ್ಯಾನೆಲ್ ಪ್ರತಿಯೊಂದು ರಿಕ್ವೆಸ್ಟ್ನ (request) ಟೈಮ್ಲೈನ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ನೀವು ವಿಫಲವಾಗುತ್ತಿರುವ ಎಂಡ್ಪಾಯಿಂಟ್ ಅನ್ನು ಪತ್ತೆಹಚ್ಚಬಹುದು, API ವಿಳಂಬವನ್ನು (latency) ಅಳೆಯಬಹುದು ಮತ್ತು ಯಾವ ಅಸೆಟ್ (asset) ನಿಮ್ಮ ಮೊದಲ ಪೇಂಟ್ (first paint) ಅನ್ನು ತಡೆಹಿಡಿಯುತ್ತಿದೆ ಎಂಬುದನ್ನು ಗುರುತಿಸಬಹುದು. ಬಳಕೆದಾರರು ಆಪ್ ನಿಧಾನವಾಗಿದೆ ಎಂದು ಹೇಳಿದರೆ, ಸರ್ವರ್ ಅಥವಾ ಫ್ರಂಟ್ಎಂಡ್ ಯಾವುದು ಅಡಚಣೆಯಾಗಿದೆ (bottleneck) ಎಂಬುದನ್ನು ನೀವು ಇಲ್ಲಿ ಸಾಬೀತುಪಡಿಸಬಹುದು.
Application ಪ್ಯಾನೆಲ್ ಕುಕೀಗಳು (cookies), LocalStorage ಮತ್ತು SessionStorage ಅನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಅಥೆಂಟಿಕೇಶನ್ (authentication) ಪರೀಕ್ಷಿಸುವಾಗ ಅಥವಾ ಸ್ಟೇಟ್ ಬಗ್ ಅನ್ನು ಡಿಬಗ್ ಮಾಡುವಾಗ, ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಬ್ರೌಸಿಂಗ್ ಇತಿಹಾಸವನ್ನು ಅಳಿಸದೆ, ಹೊಸ ಭೇಟಿ ನೀಡುವವರನ್ನು (visitor) ಅನುಕರಿಸಲು ನೀವು ಸ್ಟೋರೇಜ್ ಅನ್ನು ಮ್ಯಾನುಯಲ್ ಆಗಿ ಕ್ಲಿಯರ್ ಮಾಡಬಹುದು.
ಫೈಲ್ಗಳಲ್ಲಲ್ಲ, Git ಹಂತಗಳಲ್ಲಿ ಯೋಚಿಸಿ
ಒಂದು ಫೈಲ್ ಅನ್ನು ಉಳಿಸುವುದು (saving) ಅದನ್ನು ವರ್ಷೀನಿಂಗ್ (versioning) ಮಾಡುವುದಕ್ಕೆ ಸಮಾನವಲ್ಲ. ಯಾವುದನ್ನಾದರೂ ಶಾಶ್ವತವಾಗಿ ದಾಖಲಿಸುವ ಮೊದಲು ಬದಲಾವಣೆಗಳ ಬಗ್ಗೆ ಮೂರು ವಿಭಿನ್ನ ಹಂತಗಳಲ್ಲಿ ಯೋಚಿಸಲು Git ನಿಮ್ಮನ್ನು ಒತ್ತಾಯಿಸುವುದರಿಂದ ಅದು ಕೆಲಸ ಮಾಡುತ್ತದೆ.
ನಿಮ್ಮ working tree ಎನ್ನುವುದು ಅಸ್ತವ್ಯಸ್ತವಾದ ಮೇಜು ಇದ್ದಂತೆ. ನೀವು ಫೈಲ್ಗಳನ್ನು ಎಡಿಟ್ ಮಾಡ್ತೀರಿ, ವಿಷಯಗಳನ್ನು ಹಾಳು ಮಾಡುತ್ತೀರಿ, ಪ್ರಯೋಗಗಳನ್ನು ಕಾಮೆಂಟ್ ಮಾಡುತ್ತೀರಿ ಮತ್ತು ವೇರಿಯೇಬಲ್ಗಳನ್ನು ಮರುನಾಮಕರಣ ಮಾಡುತ್ತೀರಿ. ಇಲ್ಲಿ ಇನ್ನೂ ಯಾವುದನ್ನೂ ಟ್ರ್ಯಾಕ್ ಮಾಡಲಾಗಿಲ್ಲ. ನೀವು ಇಲ್ಲಿ ಒಂದು ಫೈಲ್ ಅನ್ನು ಡಿಲೀಟ್ ಮಾಡಿದರೆ ಮತ್ತು ಅದನ್ನು ಕಮಿಟ್ ಮಾಡದಿದ್ದರೆ, ಅದು ಕೇವಲ ಮಾಯವಾಗುತ್ತದೆ.
staging area, ಇದನ್ನು ಇಂಡೆಕ್ಸ್ (index) ಎಂದೂ ಕರೆಯುತ್ತಾರೆ, ಇಲ್ಲಿ ನೀವು ಯಾವುದು ಮುಖ್ಯ ಎಂದು ನಿರ್ಧರಿಸುತ್ತೀರಿ. git add ಮೂಲಕ, ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಿ-ಕಮಿಟ್ ಹೋಲ್ಡಿಂಗ್ (pre-commit holding) ವಲಯಕ್ಕೆ ಹಾಕುತ್ತೀರಿ. ಸಂಬಂಧವಿಲ್ಲದ ಕೆಲಸಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು staging area ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ. ನೀವು ಲಾಗಿನ್ ಬಗ್ ಅನ್ನು ಸರಿಪಡಿಸಿದರೆ ಮತ್ತು ಯುಟಿಲಿಟಿ ಫಂಕ್ಷನ್ ಅನ್ನು ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಿದರೆ, ನೀವು ಅವುಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಸ್ಟೇಜ್ ಮಾಡಬಹುದು ಮತ್ತು ಒಂದು ಅಸ್ಪಷ್ಟ ಸಂದೇಶದ ಬದಲಿಗೆ ಎರಡು ಸ್ಪಷ್ಟ ಕಮಿಟ್ ಸಂದೇಶಗಳನ್ನು ಬರೆಯಬಹುದು.
ಕೊನೆಯದಾಗಿ, local repository ನಿಜವಾದ ಇತಿಹಾಸವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ. git commit ಅನ್ನು ರನ್ ಮಾಡುವುದು ನಿಮ್ಮ ಸ್ಟೇಜ್ ಮಾಡಿದ ಬದಲಾವಣೆಗಳನ್ನು ವಿಶಿಷ್ಟ ಹ್ಯಾಶ್ (hash), ಸಂದೇಶ ಮತ್ತು ಟೈಮ್ಸ್ಟ್ಯಾಂಪ್ನೊಂದಿಗೆ ಒಂದು ಸ್ನ್ಯಾಪ್ಶಾಟ್ ಆಗಿ ಲಾಕ್ ಮಾಡುತ್ತದೆ. ನೀವು ನಾಳೆ ಫೈಲ್ ಅನ್ನು ಹಾಳು ಮಾಡಿದರೂ ಸಹ ಆ ಸ್ನ್ಯಾಪ್ಶಾಟ್ ಅನ್ನು ಮರುಪಡೆಯಬಹುದು. ಕಮಿಟ್ಗಳು ಸುಲಭವಾಗಿ ಮಾಡಬಹುದಾದವು, ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ಚಿಕ್ಕದಾಗಿ ಮತ್ತು ತಾರ್ಕಿಕವಾಗಿ ಮಾಡಿ. ಶುಕ್ರವಾರ ಮಧ್ಯಾಹ್ನದ ಕೋಡ್ನ ಒಂದೇ ದೊಡ್ಡ ಡಂಪ್ಗಿಂತ ಸಣ್ಣದಾದ, ಓದಬಲ್ಲ ಕಮಿಟ್ಗಳ ಇತಿಹಾಸವು ಹೆಚ್ಚು ಉಪಯುಕ್ತವಾಗಿದೆ.
ನಿಜವಾದ ಸಾರಾಂಶ
ಈ ವಿಷಯಗಳು ಸೈದ್ಧಾಂತಿಕ ಕಂಪ್ಯೂಟರ್ ಸೈನ್ಸ್ ಅಲ್ಲ. ಇವು ಪ್ರಾಯೋಗಿಕ ನಿಯಂತ್ರಣ ವ್ಯವಸ್ಥೆಗಳು (practical control systems). ಒಂದು URL ಹೇಗೆ ವಿಭಜನೆಯಾಗುತ್ತದೆ ಎಂದು ನೀವು ಅರ್ಥಮಾಡಿಕೊಂಡಾಗ, ನೀವು ಲಾಗ್ಗಳನ್ನು ಉತ್ತಮವಾಗಿ ಓದುತ್ತೀರಿ. ನೀವು DOM ಅನ್ನು ಸ್ಟ್ಯಾಟಿಕ್ ಮಾರ್ಕಪ್ ಬದಲಿಗೆ ಜೀವಂತ ರನ್ಟೈಮ್ ಆಗಿ ಪರಿಗಣಿಸಿದಾಗ, ನಿಮ್ಮ JavaScript ಊಹಿಸಬಹುದಾದಂತಾಗುತ್ತದೆ. ನೀವು LocalStorage ಮತ್ತು SessionStorage ಅನ್ನು ಸರಿಯಾಗಿ ಬಳಸಿದಾಗ, ಟ್ಯಾಬ್ಗಳ ನಡುವೆ ಸ್ಟೇಟ್ ಸೋರಿಕೆಯಾಗುವುದನ್ನು ನೀವು ತಡೆಯುತ್ತೀರಿ. ನೀವು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ DevTools ಅನ್ನು ತೆರೆದಾಗ, ಬಟನ್ ನೀಲಿ ಬದಲು ಹಸಿರಾಗಿ ಏಕೆ ಇದೆ ಎಂದು ಊಹಿಸುವುದನ್ನು ನೀವು ನಿಲ್ಲಿಸುತ್ತೀರಿ. ಮತ್ತು ನೀವು Git ನ ಮೂರು ಹಂತದ ವರ್ಕ್ಫ್ಲೋ ಅನ್ನು ಗೌರವಿಸಿದಾಗ, ನೀವು ಅನ್ಡೂ (undo) ಬಟನ್ ಅನ್ನು ಕಂಡು ಭಯಪಡುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತೀರಿ.
ಎಲ್ಲಾ ಎಡ್ಜ್ ಕೇಸ್ಗಳನ್ನು (edge cases) ಒಂದೇ ಬಾರಿಗೆ ನೆನಪಿಟ್ಟುಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸಬೇಡಿ. ಬದಲಾಗಿ, ಒಂದು ಅಭ್ಯಾಸವನ್ನು ಬೆಳೆಸಿಕೊಳ್ಳಿ: ಲೇಔಟ್ ಹಾಳಾದಾಗ ಹತ್ತು ನಿಮಿಷಗಳ ಕಾಲ DOM ಅನ್ನು ಪರೀಕ್ಷಿಸಿ, ಬ್ಯಾಕ್ಎಂಡ್ ಅನ್ನು ದೂಷಿಸುವ ಮೊದಲು ನೆಟ್ವರ್ಕ್ ಟ್ಯಾಬ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಪ್ರತಿ ಬಾರಿ ನೀವು ಒಂದು ಸ್ಪಷ್ಟ ಆಲೋಚನೆಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಕಮಿಟ್ ಮಾಡಿ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ಗಳ ವಿಶ್ವಾಸಾರ್ಹತೆ ತಾನಾಗಿಯೇ ಹೆಚ್ಚಾಗುತ್ತದೆ.