ಟೈಪ್‌ರೈಟರ್ ಎಫೆಕ್ಟ್ ಎಂಬುದು ಯಾರೋ ಒಬ್ಬರು ಜೋರಾಗಿ ಯೋಚಿಸುವುದನ್ನು ನೋಡುವುದಕ್ಕೆ ಡಿಜಿಟಲ್ ರೂಪದಲ್ಲಿ ಸಮಾನವಾಗಿದೆ. ಪಠ್ಯವು ಒಂದೊಂದೇ ಅಕ್ಷರಗಳಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.

ಟೈಪ್‌ರೈಟರ್ ಎಫೆಕ್ಟ್ ಎಂಬುದು ಯಾರೋ ಜೋರಾಗಿ ಯೋಚಿಸುತ್ತಿರುವುದನ್ನು ನೋಡುವುದಕ್ಕೆ ಡಿಜಿಟಲ್ ರೂಪದ ಸಮಾನವಾಗಿದೆ. ಪಠ್ಯವು ಒಂದೊಂದೇ ಅಕ್ಷರಗಳಂತೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಅದು ನಿಜವಾದ ಕೈಯಿಂದ ನಿಜವಾದ ಕೀಲಿಗಳನ್ನು ಒತ್ತಿದಂತೆ ಭಾಸವಾಗುತ್ತದೆ. ನೀವು ಇದನ್ನು ಪೋರ್ಟ್‌ಫೋಲಿಯೊ ಸೈಟ್‌ಗಳ ಹೀರೋ ಸೆಕ್ಷನ್‌ಗಳಲ್ಲಿ, ಬ್ರೌಸರ್ ಆಧಾರಿತ ಟರ್ಮಿನಲ್ ಎಮ್ಯುಲೇಟರ್‌ಗಳಲ್ಲಿ ಮತ್ತು AI ಅಸಿಸ್ಟೆಂಟ್‌ಗಳ ಚಾಟ್ ವಿಂಡೋಗಳಲ್ಲಿ ನೋಡಬಹುದು. ಇವುಗಳು ಕೇವಲ ಮೊದಲೇ ಸಿದ್ಧಪಡಿಸಿದ ಪಠ್ಯದ ಬ್ಲಾಕ್ ಅನ್ನು ತರಬಾರದು, ಬದಲಾಗಿ ತಾವೇ "ಟೈಪ್" ಮಾಡುತ್ತಿದ್ದೇವೆ ಎಂದು ತೋರಿಸಲು ಇದನ್ನು ಬಳಸುತ್ತವೆ. ಇದನ್ನು ಸರಿಯಾಗಿ ಮಾಡಿದರೆ, ಇದು ಒಂದು ನಿರೀಕ್ಷೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಆದರೆ ಸರಿಯಾಗಿ ಮಾಡದಿದ್ದರೆ, ಇದು 1987ರಲ್ಲಿ ಸಿಕ್ಕಿಹಾಕಿಕೊಂಡ ಪ್ರಿಂಟರ್‌ನಂತೆ ಭಾಸವಾಗುತ್ತದೆ.

ಈ ಮಾದರಿ ಏಕೆ ಇಂದಿಗೂ ಮುಂದುವರಿಯುತ್ತಿದೆ

ಕಂಪ್ಯೂಟರ್‌ಗಳು ಮಾಹಿತಿಯನ್ನು ತಕ್ಷಣವೇ ನೀಡುತ್ತವೆ. ಮನುಷ್ಯರು ಹಾಗೆ ಮಾಡುವುದಿಲ್ಲ. ಆ ಎರಡು ವೇಗಗಳ ನಡುವಿನ ಅಂತರವು ಉಪಯುಕ್ತವಾಗಿದೆ. ಟೈಪ್‌ರೈಟರ್ ಎಫೆಕ್ಟ್ ಮಾನವನ ವೇಗವನ್ನು ಅನುಕರಿಸುವ ಮೂಲಕ ಆ ಅಂತರವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಒಂದು ಲ್ಯಾಂಡಿಂಗ್ ಪೇಜ್‌ನಲ್ಲಿ, ಇದು ಹೆಡ್‌ಲೈನ್ ಅನ್ನು ಪದ ಪದಕ್ಕೇ ತೋರಿಸುವ ಮೂಲಕ ಭೇಟಿ ನೀಡುವವರು ಕೇವಲ ಸ್ಕ್ಯಾನ್ ಮಾಡುವ ಬದಲು ಮೌಲ್ಯದ ಪ್ರಸ್ತಾಪವನ್ನು (value proposition) ವಾಸ್ತವವಾಗಿ ಓದುವಂತೆ ಮಾಡುತ್ತದೆ. ಟರ್ಮಿನಲ್ ಎಮ್ಯುಲೇಟರ್‌ನಲ್ಲಿ, ಕಮಾಂಡ್‌ಗಳು ನೈಜ ಸಮಯದಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತಿವೆ ಎಂಬ ಭ್ರಮೆಯನ್ನು ಇದು ನೀಡುತ್ತದೆ. ಚಾಟ್‌ಬಾಟ್ ಇಂಟರ್ಫೇಸ್‌ನಲ್ಲಿ, ಪ್ರತಿಕ್ರಿಯೆಯು ಡೇಟಾಬೇಸ್‌ನಿಂದ ಪಡೆಯುವ ಬದಲು ನೈಜ ಸಮಯದಲ್ಲಿ ಸೃಷ್ಟಿಸಲ್ಪಡುತ್ತಿದೆ ಎಂಬ ಸಂಕೇತವನ್ನು ಈ ಲಯವು ನೀಡುತ್ತದೆ.

ಆದರೆ ಈ ಎಫೆಕ್ಟ್ ಕಾರ್ಯವಿಧಾನವು ಬಳಕೆದಾರರನ್ನು ಗೌರವಿಸಿದರೆ ಮಾತ್ರ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಒಂದೇ ರೀತಿಯ ಅಂತರದ ಏಕತಾನತೆಯ ಟಿಕ್-ಟಿಕ್-ಟಿಕ್ ಶಬ್ದವು ರೋಬೋಟಿಕ್ ಆಗಿ ಭಾಸವಾಗುತ್ತದೆ. ಅದಕ್ಕಿಂತ ಕೆಟ್ಟದಾಗಿ, ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನವನ್ನು (assistive technology) ನಿರ್ಲಕ್ಷಿಸುವ ಅನುಷ್ಠಾನವು ಒಂದು ಮೋಜಿನ ದೃಶ್ಯ ವೈಭವವನ್ನು ಕಷ್ಟಕರವಾದ ಅಡೆತಡೆಗೆ ಪರಿವರ್ತಿಸಬಹುದು. ಗುರಿ ಬಳಕೆದಾರರನ್ನು ನಿಧಾನಗೊಳಿಸುವುದಲ್ಲ; ಬದಲಾಗಿ ಇಂಟರ್ಫೇಸ್ ಜೀವಂತವಾಗಿರುವಂತೆ ಮಾಡಲು ಬೇಕಾದಷ್ಟು ಸಣ್ಣ ಮಟ್ಟದ ಘರ್ಷಣೆಯನ್ನು (friction) ಸೇರಿಸುವುದು ಮಾತ್ರ.

Recursive setTimeout ಬಳಸಿ ಇದನ್ನು ನಿರ್ಮಿಸಿ

setTimeout ನಿಂದ ಪ್ರಾರಂಭಿಸಿ, ಮತ್ತು setInterval ಅನ್ನು ಮುಟ್ಟಬೇಡಿ. ಇದರ ವ್ಯತ್ಯಾಸವು ನೋಡಿದಷ್ಟು ದೊಡ್ಡದಾಗಿಲ್ಲದಿದ್ದರೂ ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ.

setInterval ಹಠಮಾರಿ. ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಬ್ರೌಸರ್‌ನ ಮೇನ್ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಏನೇ ನಡೆಯಲಿ, ಅದು ಪ್ರತಿ n ಮಿಲಿಸೆಕೆಂಡುಗಳಿಗೊಮ್ಮೆ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ನಿಮ್ಮ ಲಾಜಿಕ್‌ಗೆ ಸಾಮಾನ್ಯ ಕೀस्ट्रೋಕ್‌ಗಳ ನಡುವೆ 50 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳ ವಿರಾಮ ಮತ್ತು ವಿರಾಮಚಿಹ್ನೆಗಳ ನಂತರ 150 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳ ವಿರಾಮದ ಅಗತ್ಯವಿದ್ದರೆ, setInterval ಅದನ್ನು ಹೊಂದಾಣಿಸಿಕೊಳ್ಳಲು ಸಾಧ್ಯವಿಲ್ಲ. ನೀವು ಅದನ್ನು ಹೆಚ್ಚುವರಿ ಕಂಡೀಷನಲ್ ಲಾಜಿಕ್‌ನಲ್ಲಿ ಸುತ್ತುವರಿಯಬೇಕಾಗುತ್ತದೆ, ರೇಸ್ ಕಂಡೀಷನ್‌ಗಳೊಂದಿಗೆ ಹೋರಾಡಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ಅಂತಿಮವಾಗಿ ಇಂಟರ್ವಲ್ ಅನ್ನು ಎಷ್ಟು ಪದೇ ಪದೇ ಕ್ಲಿಯರ್ ಮತ್ತು ರಿಸೆಟ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಎಂದರೆ ಕೋಡ್ ಒಂದು ಸ್ಟೇಟ್-ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ದುಸ್ತರವಾದ ಕೆಲಸವಾಗಿಬಿಡುತ್ತದೆ. ವೇಗವು ಬದಲಾಗಬೇಕಾದ ಕ್ಷಣದಲ್ಲಿ ಸ್ಥಿರವಾದ ಇಂಟರ್ವಲ್‌ಗಳು ವಿಫಲವಾಗುತ್ತವೆ.

Recursive setTimeout ಪ್ರತಿ ಹಂತವು ಮುಂದಿನ ಹಂತಕ್ಕಾಗಿ ನಿಯಮಗಳನ್ನು ನಿರ್ಧರಿಸಲು ಅವಕಾಶ ನೀಡುವ ಮೂಲಕ ಇದನ್ನು ಸರಿಪಡಿಸುತ್ತದೆ. ಇದನ್ನು ಒಂದು ಸಣ್ಣ ಸ್ಟೇಟ್ ಮೆಷಿನ್ ಎಂದು ಭಾವಿಸಿ. ನೀವು ಕೆಲವು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತೀರಿ: ಪ್ರಸ್ತುತ ಸ್ಟ್ರಿಂಗ್, ಪ್ರಸ್ತುತ ಅಕ್ಷರದ ಇಂಡೆಕ್ಸ್, ನೀವು ಟೈಪ್ ಮಾಡುತ್ತಿದ್ದೀರಾ ಅಥವಾ ಡಿಲೀಟ್ ಮಾಡುತ್ತಿದ್ದೀರಾ ಎಂಬ ಬೂಲಿಯನ್ ಫ್ಲಾಗ್, ಮತ್ತು ನೀವು ಅನೇಕ ಸ್ಟ್ರಿಂಗ್‌ಗಳ ಮೂಲಕ ಲೂಪ್ ಮಾಡಲು textIndex ಕೌಂಟರ್. ಈ ಫಂಕ್ಷನ್ ಒಂದು ಅಕ್ಷರವನ್ನು ಸೇರಿಸುತ್ತದೆ, ವಾಕ್ಯದಲ್ಲಿ ಅದು ಎಲ್ಲಿಲ್ಲ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ, ನಂತರ ಸಂದರ್ಭಕ್ಕೆ ತಕ್ಕಂತೆ ವಿಳಂಬದೊಂದಿಗೆ ತನ್ನ ಮುಂದಿನ ಕರೆಯನ್ನು (invocation) ನಿಗದಿಪಡಿಸುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ನೀವು ಹೆಚ್ಚಿನ ಅಕ್ಷರಗಳನ್ನು 50 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ ಟೈಪ್ ಮಾಡಬಹುದು, ಕಾಮಾ ನಂತರ 150 ಮಿಲಿಸೆಂಡ್‌ಗಳಿಗೆ ನಿಧಾನಗೊಳಿಸಬಹುದು ಮತ್ತು ಡಿಲೀಟ್ ಮೋಡ್‌ಗೆ ಬದಲಾಯಿಸುವ ಮೊದಲು ಪೂರ್ಣ ವಾಕ್ಯದ ಕೊನೆಯಲ್ಲಿ 800 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳ ಕಾಲ ವಿರಾಮ ನೀಡಬಹುದು. ಇದನ್ನು ನೀವು setInterval ಬಳಸಿ ಸುಲಭವಾಗಿ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. Recursive setTimeout ಬಳಸಿ ಮಾಡಿದರೆ, ಲಾಜಿಕ್ ಸರಳವಾಗಿರುತ್ತದೆ:

if typing:
  append next character
  if at end of string:
    switch to pause mode
    schedule next call after 1000ms
if deleting:
  remove last character
  if string empty:
    increment textIndex
    load next string
    switch to typing mode

ಈ ರಚನೆಯು ಕ್ಲೀನಪ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸಹ ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಟೈಮೌಟ್ ಐಡಿ (timeout ID) ಅನ್ನು ಸಂಗ್ರಹಿಸಿಡಿ. ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅಥವಾ ಬಳಕೆದಾರರು ಬೇರೆ ಪುಟಕ್ಕೆ ಹೋದಾಗ, ಒಮ್ಮೆ clearTimeout ಅನ್ನು ಕರೆಯಿರಿ. ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಅನಾಥವಾಗಿ ಓಡುತ್ತಾಹೋಗುವ ಇಂಟರ್ವಲ್‌ಗಳ ಕಾಟ ಇರುವುದಿಲ್ಲ.

ಕರ್ಸರ್ ತನ್ನಷ್ಟಕ್ಕೆ ತಾನೇ ಮಿಂಚಬೇಕು

ಮಿಂಚುವ ಕರ್ಸರ್ ಎಂಬುದು ಒಂದು ದೃಶ್ಯ ವಿವರವೇ ಹೊರತು, ಡೇಟಾ ಸಂಬಂಧಿತ ವಿಷಯವಲ್ಲ. ಅದನ್ನು ನಿಮ್ಮ JavaScript ಸ್ಟೇಟ್ ಇಂಜಿನ್‌ನಿಂದ ಹೊರಗಿಡಿ. ::after ಪ್ಯುಡೋ-ಎಲಿಮೆಂಟ್ ಅಥವಾ ನಿಮ್ಮ ಪಠ್ಯ ಕಂಟೇನರ್‌ನ ಕೊನೆಯಲ್ಲಿರುವ ಪ್ರತ್ಯೇಕ <span ಬಳಸಿ ಪ್ರತ್ಯೇಕ CSS ಅನಿಮೇಷನ್ ಅನ್ನು ಬಳಸಿ.

opacity ಅಥವಾ border-color ಅನ್ನು step-end ಟೈಮಿಂಗ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸುವ ಸರಳ @keyframes blink ನಿಮಗೆ ಕಂಪೊಸಿಟರ್‌ನಲ್ಲಿ ಚಲಿಸುವ ಸ್ಪಷ್ಟವಾದ ಪಲ್ಸ್ ಅನ್ನು ನೀಡುತ್ತದೆ. ಕರ್ಸರ್ ದೃಶ್ಯತೆಯನ್ನು ಮೈಕ್ರೋಮ್ಯಾನೇಜ್ ಮಾಡಲು JavaScript ಗೆ ಕೆಲಸವಿಲ್ಲ. ನೀವು setTimeout ರಿಸರ್ಶನ್‌ನ ಒಳಗಿನಿಂದ ಡಿಸ್‌ಪ್ಲೇ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಪ್ರತಿ ಅಕ್ಷರಕ್ಕೂ ಅನಗತ್ಯ ಸ್ಟೈಲ್ ಮರುಹಣಿಕೆಗಳನ್ನು (style recalculations) ಬಲವಂತವಾಗಿ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಸೌಂದರ್ಯದ ವಿಷಯವನ್ನು CSS ಗೆ ಬಿಡಿ. ಅನುಕ್ರಮದ (sequence) ವಿಷಯವನ್ನು JavaScript ಗೆ ಬಿಡಿ.

textIndex ಕೌಂಟರ್ ಬಳಸಿ ಅನೇಕ ಸ್ಟ್ರಿಂಗ್‌ಗಳ ಮೂಲಕ ಲೂಪ್ ಮಾಡುವುದು ಸರಳವಾಗಿದೆ. ನಿಮ್ಮ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಒಂದು ಅರೇಯಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ. ಅನಿಮೇಷನ್ ತನ್ನ ಡಿಲೀಟ್ ಹಂತವನ್ನು ಮುಗಿಸಿ ಕಂಟೇನರ್ ಖಾಲಿಯಾದಾಗ, ಅರೇ ಉದ್ದಕ್ಕೆ textIndex ಅನ್ನು ಮಾಡ್ಯುಲೋ ಮಾಡಿ ಹೆಚ್ಚಿಸಿ, ಅಕ್ಷರ ಪಾಯಿಂಟರ್ ಅನ್ನು ಸೊನ್ನೆಗೆ ಮರುಹೊಂದಿಸಿ ಮತ್ತು ಮತ್ತೆ ಟೈಪ್ ಮಾಡುವುದನ್ನು ಪ್ರಾರಂಭಿಸಿ. ಪೋರ್ಟ್‌ಫೋಲಿಯೊ ಸೈಟ್‌ಗಳು ಪುಟವನ್ನು ರিলোಡ್ ಮಾಡದೆ ತಮ್ಮ ಪಾತ್ರಗಳನ್ನು—["Developer", "Designer", "Writer"]—ಹೀಗೆ ಬದಲಾಯಿಸುವುದು ಇದೇ ರೀತಿ.

ಭ್ರಮೆಯನ್ನು ಭಂಗಗೊಳಿಸುವ ತಪ್ಪುಗಳು

ಅಮ್ಯಾಚರ್ (ಅನುಭವಿಗಳಲ್ಲದ) ಅನುಷ್ಠಾನಗಳಲ್ಲಿ ಮೂರು ತಪ್ಪುಗಳು ಪದೇ ಪದೇ ಕಂಡುಬರುತ್ತವೆ.

setInterval ಬಳಸುವುದು. ನಾವು ಈಗಾಗಲೇ ವೇಗದಲ್ಲಿನ ವ್ಯತ್ಯಾಸದ ಸಮಸ್ಯೆಯನ್ನು (variable-speed problem) ಚರ್ಚಿಸಿದ್ದೇವೆ, ಆದರೆ ಇದರಲ್ಲಿ ಒಂದು ಸೂಕ್ಷ್ಮವಾದ ಸಮಸ್ಯೆ ಇದೆ. ನಿಮ್ಮ DOM ಅಪ್‌ಡೇಟ್ ಎಂದಾದರೂ ವಿಳಂಬವಾದರೆ—ಉದಾಹರಣೆಗೆ, ಬ್ರೌಸರ್ ಲೇಔಟ್ ಶಿಫ್ಟ್ ಅನ್ನು ಪೇಂಟ್ ಮಾಡುತ್ತಿರುವುದರಿಂದ—setInterval ನಿರಂತರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಲೇ ಇರುತ್ತದೆ. ಇದರಿಂದಾಗಿ ಒಂದರ ಮೇಲೊಂದು ಬರೆಯುವಿಕೆ (overlapping writes), ಪುನರಾವರ್ತಿತ ಅಕ್ಷರಗಳು ಅಥವಾ ಬ್ರೌಸರ್ ರೆಂಡರ್ ಮಾಡುವ ವೇಗಕ್ಕಿಂತ ವೇಗವಾಗಿ ಬರೆಯುವಿಕೆಯಂತಹ ಸಮಸ್ಯೆಗಳು ಉಂಟಾಗಬಹುದು. Recursive setTimeout ಮುಂದಿನ ಹಂತದ ಬಗ್ಗೆ ಯೋಚಿಸುವ ಮೊದಲು ಪ್ರಸ್ತುತ ಹಂತವು ಪೂರ್ಣಗೊಳ್ಳುವವರೆಗೆ ಕಾಯುತ್ತದೆ.

HTML ಅನ್ನು ಎಸ್ಕೇಪ್ ಮಾಡುವುದನ್ನು ಮರೆಯುವುದು. ನಿಮ್ಮ ಮೂಲ ಸ್ಟ್ರಿಂಗ್‌ಗಳಲ್ಲಿ ಆಂಗಲ್ ಬ್ರ್ಯಾಕೆಟ್‌ಗಳು ಇದ್ದು, ನೀವು ಒಂದೊಂದೇ ಅಕ್ಷರವನ್ನು innerHTML ಮೂಲಕ ಇಂಜೆಕ್ಟ್ ಮಾಡುತ್ತಿದ್ದರೆ, ನೀವು ಟ್ಯಾಗ್‌ಗಳನ್ನು ಅರ್ಧಕ್ಕೆ ವಿಭಜಿಸುತ್ತೀರಿ. ಬ್ರೌಸರ್ ಮೊದಲು <, ನಂತರ <s, ನಂತರ <st ಅನ್ನು ನೋಡುತ್ತದೆ. ಇದು ಸರಿಯಾದ ಟ್ಯಾಗ್ ಪಾರ್ಸಿಂಗ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಹಾನಿಗೊಳಗಾದ DOM ನೋಡ್‌ಗಳು ಅಥವಾ ಅನಿರೀಕ್ಷಿತ ಸ್ಟೈಲಿಂಗ್ ಕ್ಯಾಸ್ಕೇಡ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ನಿಮಗೆ ಅಕ್ಷರಶಃ ಅಕ್ಷರಗಳು ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕೆಂದಿದ್ದರೆ, ಅವುಗಳನ್ನು ಮೊದಲು ಎಸ್ಕೇಪ್ ಮಾಡಿ ಅಥವಾ ಅದಕ್ಕಿಂತ ಉತ್ತಮವಾಗಿ, innerHTML ಬದಲಿಗೆ textContent ಬಳಸಿ ಬರೆಯಿರಿ. ನೀವು ಟೈಪ್‌ರೈಟರ್ ಔಟ್‌ಪುಟ್‌ನಲ್ಲಿ ಸ್ಟೈಲ್ ಮಾಡಿದ <span> ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸಬೇಕೆಂದಿದ್ದರೆ, ಅಕ್ಷರಗಳ ಲೂಪ್ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಟ್ಯಾಗ್‌ಗಳು ಎಲ್ಲಿ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ ಮತ್ತು ಕೊನೆಗೊಳ್ಳುತ್ತವೆ ಎಂಬುದು ನಿಮಗೆ ನಿಖರವಾಗಿ ತಿಳಿಯುವಂತೆ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಪ್ರಿ-ಪ್ರೊಸೆಸ್ ಮಾಡಿ.

ಅಕ್ಸೆಸಿಬಿಲಿಟಿಯನ್ನು (accessibility) ನಿರ್ಲಕ್ಷಿಸುವುದು. ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಒಂದೊಂದೇ ಅಕ್ಷರವನ್ನು ಓದುವುದನ್ನು ಇಷ್ಟಪಡುವುದಿಲ್ಲ. ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರತಿ ಹೊಸ ಅಕ್ಷರವನ್ನು DOM ಗೆ ಸೇರಿಸಿದಾಗ, ಕೆಲವು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು (assistive technologies) ಇಡೀ ನೋಡ್ ಅನ್ನು ಮತ್ತೆ ಘೋಷಿಸುತ್ತವೆ, ಇದು ಪದಗಳ ತುಂಡು ತುಂಡಾದ ಶಬ್ದಗಳ ಸರಣಿಯನ್ನು (staccato barrage) ಉಂಟುಮಾಡುತ್ತದೆ. ಶ್ರವಣಾಧಾರಿತ ನ್ಯಾವಿಗೇಷನ್ (auditory navigation) ಮೇಲೆ ಅವಲಂಬಿತರಾದವರಿಗೆ ಇದು ಒಂದು ದುಸ್ತರ ಅನುಭವ. ಇದಕ್ಕೆ ಪರಿಹಾರವು ಸಂಕೀರ್ಣವಾಗಿಲ್ಲ: ಪೂರ್ಣ ಮತ್ತು ಅಂತಿಮ ಪಠ್ಯವನ್ನು ಹೊಂದಿರುವ ಕಂಟೇನರ್‌ಗೆ aria-label ಅನ್ನು ಸೇರಿಸಿ. ನೀವು aria-hidden="true" ಬಳಸಿ ಅನಿಮೇಟೆಡ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಮರೆಮಾಚಬಹುದು ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗಾಗಿ ದೃಶ್ಯದ ಮೂಲಕ ಕಾಣಿಸದ ಸ್ಥಿರ ಪ್ರತಿಯನ್ನು (visually hidden static copy) ನೀಡಬಹುದು. ಯಾವುದೇ ರೀತಿಯಲ್ಲಿರಲಿ, ಬಳಕೆದಾರರನ್ನು ನಿಮ್ಮ ಅನಿಮೇಷನ್ ನೋಡುವಂತೆ ಒತ್ತಾಯಿಸುವ ಬದಲು ಅವರಿಗೆ ಪೂರ್ಣ ವಾಕ್ಯವನ್ನು ಮೊದಲೇ ನೀಡಿ.

ನಿಮ್ಮ ವರ್ಷನ್ ಅನ್ನು ಇನ್ನಷ್ಟು ಉತ್ತಮಗೊಳಿಸುವ ವಿಧಾನಗಳು

ಒಮ್ಮೆ ಕೋರ್ ಲೂಪ್ ಸರಿಯಾಗಿ ಕೆಲಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದ ನಂತರ, ನೀವು ಹೆಚ್ಚುವರಿ ಫೀಚರ್‌ಗಳನ್ನು ಸೇರಿಸಬಹುದು. ಆದರೆ ಮೂಲಭೂತ ಅಂಶಗಳು ಗಟ್ಟಿಯಾಗುವವರೆಗೆ ಅವುಗಳನ್ನು ಸೇರಿಸುವ ಆಸೆಯನ್ನು ತಡೆಯಿರಿ.

ಕೀಸ್ಟ್ರೋಕ್ ಸೌಂಡ್ ಎಫೆಕ್ಟ್‌ಗಳು. ಪ್ರತಿ ಅಕ್ಷರಕ್ಕೆ ಒಂದು ಸಣ್ಣ ಕ್ಲಿಕ್ ಶಬ್ದವು ತೃಪ್ತಿಕರವಾಗಿರುತ್ತದೆ, ಆದರೆ ವೆಬ್‌ಪೇಜ್‌ಗಳಲ್ಲಿ ಆಡಿಯೋ ಬಳಸುವುದು ಒಂದು ಸವಾಲಿನ ಕೆಲಸ. Web Audio API ಅಥವಾ ಸಣ್ಣ ಬಫರ್ ಹೊಂದಿರುವ ಲೈಟ್‌ವೇಟ್ Audio ಎಲಿಮೆಂಟ್ ಬಳಸಿ. ಪ್ಲೇಬ್ಯಾಕ್ ರೇಟ್ ಅನ್ನು ಸ್ವಲ್ಪ ಬದಲಾಯಿಸಿ—0.95 ಮತ್ತು 1.05 ನಡುವೆ—ಹಾಗಾಗಿ ಒಂದೇ ರೀತಿಯ ಕ್ಲಿಕ್‌ಗಳು ಕೃತಕವಾಗಿ ಕೇಳಿಸುವುದಿಲ್ಲ. ಯಾವಾಗಲೂ ಬ್ರೌಸರ್‌ನ ಆಟೋಪ್ಲೇ ಪಾಲಿಸಿಗಳನ್ನು ಗೌರವಿಸಿ ಮತ್ತು ಮ್ಯೂಟ್ ಟಾಗಲ್ ಅನ್ನು ಒದಗಿಸಿ. ಬೆಳಿಗ್ಗೆ 9 ಗಂಟೆಗೆ ಟೈಪಿಂಗ್ ಶಬ್ದಗಳನ್ನು ಆಟೋಪ್ಲೇ ಮಾಡುವ ಅನ್‌ಮ್ಯೂಟ್ ಮಾಡದ ಪೋರ್ಟ್‌ಫೋಲಿಯೊ ಪೇಜ್ ಬಳಕೆದಾರರನ್ನು ಬೇಗನೆ ದೂರ ಮಾಡುತ್ತದೆ.

ಮಲ್ಟಿ-ಲೈನ್ ಟೈಪಿಂಗ್. ನೈಜ ಟರ್ಮಿನಲ್ ವಿಂಡೋಗಳು ಲೈನ್ ವ್ರಾಪ್ ಆಗುತ್ತವೆ. ನಿಮ್ಮ ಪಠ್ಯವು ಲೈನ್ ಬ್ರೇಕ್ ಅನ್ನು ದಾಟಿದರೆ, ನಿಮ್ಮ ಲೇಔಟ್ ನಿಖರವಾಗಿಲ್ಲದಿದ್ದರೆ, ಸರಳ border-right ಕರ್ಸರ್ ಅಸಹಜವಾಗಿ ಜಿಗಿಯುತ್ತದೆ. ನ್ಯೂಲೈನ್ ಕ್ಯಾರೆಕ್ಟರ್‌ಗಳಿಂದ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ವಿಭಜಿಸಿ ಮತ್ತು ಪ್ರತಿ ಲೈನ್ ಅನ್ನು ಅದರದೇ ಆದ <span> ನಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಿ, ಅಥವಾ ಕಂಟೆಂಟ್‌ನ ಅಂತ್ಯವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಪೋಸಿಶನ್ಡ್ ಸ್ಯೂಡೋ-ಎಲಿಮೆಂಟ್ (positioned pseudo-element) ಬಳಸಿ. ಪಠ್ಯದ ವ್ರಾಪಿಂಗ್ ಬಗ್ಗೆ ಎಚ್ಚರವಿರಲಿ; ಇನ್‌ಲೈನ್ ಬಾರ್ಡರ್ ಆಗಿ ಅಳವಡಿಸಲಾದ ಕರ್ಸರ್, ಕಂಟೇನರ್ ಅಗಲವು ಬದಲಾದಲ್ಲಿ ಪಠ್ಯದಿಂದ ಬೇರ್ಪಟ್ಟು ಹೋಗಬಹುದು. ಟರ್ಮಿನಲ್ ಸ್ಟೈಲ್‌ಗಳಿಗಾಗಿ white-space: pre-wrap ಮತ್ತು ಮೊನೊಸ್ಪೇಸ್ಡ್ ಫಾಂಟ್ (monospaced font) ಬಳಸುವುದು ಉತ್ತಮ, ಏಕೆಂದರೆ ಸ್ಥಿರ-ಅಗಲದ ಅಕ್ಷರಗಳು ಕರ್ಸರ್ ಲೆಕ್ಕಾಚಾರವನ್ನು ಹೆಚ್ಚು ನಿಖರವಾಗಿಸುತ್ತವೆ.

ರಿಯಲ್-ಟೈಮ್ ಮಾರ್ಕ್‌ಡೌನ್ ರೆಂಡರಿಂಗ್. ಇದು ಸ್ವಲ್ಪ ಕಷ್ಟಕರವಾದ ಭಾಗ. ನೀವು **bold** ಎಂದು ಟೈಪ್ ಮಾಡಿದರೆ, ನಿಮ್ಮ ಮುಂದೆ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ: ಆಸ್ಟೆರಿಸ್ಕ್‌ಗಳನ್ನು ಅವುಗಳಂತೆ ಅಕ್ಷರಶಃ ರೆಂಡರ್ ಮಾಡುವುದು ಅಥವಾ ಅವುಗಳನ್ನು ತಕ್ಷಣವೇ ಬೋಲ್ಡ್ ಸ್ಟೈಲ್‌ಗೆ ಪರಿವರ್ತಿಸುವುದು. ನೀವು ಎರಡನೆಯದನ್ನು ಆರಿಸಿಕೊಂಡರೆ, ಮಧ್ಯದಲ್ಲಿ textContent ನಿಂದ innerHTML ಗೆ ಬದಲಾಯಿಸುವುದು ಎಂದರೆ ನಿಮ್ಮ ಪಠ್ಯ ನೋಡ್‌ನ ಗಡಿಗಳು ಬದಲಾಗುತ್ತವೆ ಎಂದರ್ಥ. HTML ಟ್ಯಾಗ್‌ಗಳು ನಿಮ್ಮ ಅಡಿಯಲ್ಲಿರುವ DOM ಟ್ರೀ ಅನ್ನು ಬದಲಾಯಿಸುವುದರಿಂದ ಕರ್ಸರ್ ಸ್ಥಾನವನ್ನು ನಿರ್ವಹಿಸುವುದು ಒಂದು ತಲೆನೋವು (bookkeeping headache) ಆಗುತ್ತದೆ. ಒಂದು ಸುರಕ್ಷಿತ ವಿಧಾನವೆಂದರೆ ರೊ (raw) ಮಾರ್ಕ್‌ಡೌನ್ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಸಾಮಾನ್ಯ ರೀತಿಯಲ್ಲಿ ಟೈಪ್ ಮಾಡುವುದು, ನಂತರ ಪೂರ್ಣ ಸ್ಟ್ರಿಂಗ್ ಪರದೆಯ ಮೇಲೆ ಬಂದ ನಂತರ ರೆಂಡರ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸುವುದು. ನಿಮಗೆ ನಿಜವಾಗಿಯೂ ಲೈವ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಬೇಕಿದ್ದರೆ, ಎರಡು ಪದರಗಳನ್ನು ನಿರ್ವಹಿಸಿ: ಒಂದು ಹೈಡನ್ ಟೈಪ್ಡ್ ಬಫರ್ ಮತ್ತು ಇನ್ನೊಂದು ಪಾರ್ಸ್ ಮಾಡಿದ ವಿಶುವಲ್ ಓವರ್‌ಲೇ.

ರಿವರ್ಸ್ ಎಫೆಕ್ಟ್‌ಗಳು. ಪಠ್ಯವನ್ನು ಅಳಿಸುವುದು ಎಂದರೆ ಪ್ರತಿ ಬಾರಿ ಒಂದೊಂದೇ ಅಕ್ಷರವನ್ನು ಬ್ಯಾಕ್‌ಸ್ಪೇಸ್ ಮಾಡುವುದು ಎಂದರ್ಥವಲ್ಲ. ಮುಂದಿನ ಸ್ಟ್ರಿಂಗ್ ಟೈಪ್ ಆಗುವ ಮೊದಲು ಫೀಲ್ಡ್ ಅನ್ನು ತಕ್ಷಣವೇ ಕ್ಲಿಯರ್ ಮಾಡುವ "ಎಲ್ಲವನ್ನೂ ಆಯ್ಕೆ ಮಾಡಿ, ನಂತರ ಅಳಿಸಿ" (select all, then delete) ಎಂಬ ರೀಸೆಟ್ ಅನ್ನು ನೀವು ಅನುಕರಿಸಬಹುದು. ಇದು ತುಂಬಾ ಯಾಂತ್ರಿಕವಾಗಿ (clinical) ಕಾಣಿಸಬಹುದು. ಬದಲಾಗಿ, ಪ್ರತಿ ಅಕ್ಷರಕ್ಕೆ 30 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳ ವೇಗದಲ್ಲಿ ನಿಧಾನವಾಗಿ ಬ್ಯಾಕ್‌ಸ್ಪೇಸ್ ಮಾಡುವುದು ಕುತೂಹಲವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಎರಡನ್ನೂ ಬೆರೆಸಿ: ಒಂದು ತಪ್ಪಾದ ಅಕ್ಷರವನ್ನು (typo) ವೇಗವಾಗಿ ಬ್ಯಾಕ್‌ಸ್ಪೇಸ್ ಮಾಡಿ, ಸ್ವಲ್ಪ ವಿರಾಮ ನೀಡಿ, ನಂತರ ಸಾಮಾನ್ಯ ವೇಗದಲ್ಲಿ ಅಳಿಸುವುದನ್ನು ಮುಂದುವರಿಸಿ. ಈ ವೈವಿಧ್ಯತೆಯು ಎಫೆಕ್ಟ್‌ಗೆ ಹೆಚ್ಚು ನೈಜತೆಯನ್ನು ನೀಡುತ್ತದೆ.

ನಿಜವಾದ ಸಾರಾಂಶ

ಟೈಪ್‌ರೈಟರ್ ಎಫೆಕ್ಟ್ ಎಂಬುದು ಮೇಲ್ನೋಟಕ್ಕೆ ಸರಳವಾಗಿ ಕಾಣುವ ಮತ್ತು ನೀವು ಅದನ್ನು ನಿರ್ಮಿಸಿದ ನಂತರವಷ್ಟೇ ಅದರ ಸಂಕೀರ್ಣತೆಯನ್ನು ತೋರಿಸುವ UI ಅಲಂಕಾರಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಪ್ರಾರಂಭಿಸಿ