The typewriter effect is the digital equivalent of watching someone think out loud. Text appears one character at a time

ടൈപ്പ്റൈറ്റർ ഇഫക്റ്റ് എന്നത് ഒരാൾ ഉറക്കെ ചിന്തിക്കുന്നത് കാണുന്നതിന്റെ ഡിജിറ്റൽ രൂപമാണ്. യഥാർത്ഥ കൈകൾ കീബോർഡിൽ അടിക്കുന്നത് പോലെ ഓരോ അക്ഷരങ്ങളായി ടെക്സ്റ്റ് പ്രത്യക്ഷപ്പെടുന്നു. പോർട്ട്‌ഫോളിയോ സൈറ്റുകളുടെ ഹീറോ സെക്ഷനുകളിലും, ബ്രൗസർ അധിഷ്ഠിത ടെർമിനൽ എമുലേറ്ററുകളിലും, ഒരു മുൻകൂട്ടി തയ്യാറാക്കിയ ടെക്സ്റ്റ് എടുക്കുന്നതിന് പകരം തങ്ങൾ മറുപടി "ടൈപ്പ്" ചെയ്യുകയാണെന്ന് തെളിയിക്കാൻ ആഗ്രഹിക്കുന്ന AI അസിസ്റ്റന്റുകളുടെ ചാറ്റ് വിൻഡോകളിലും നിങ്ങൾക്ക് ഇത് കാണാം. ഇത് കൃത്യമായി ചെയ്താൽ ആകാംക്ഷ ജനിപ്പിക്കും. എന്നാൽ മോശമായി ചെയ്താൽ, 1987-ൽ തടസ്സപ്പെട്ട ഒരു പ്രിന്റർ പോലെ തോന്നും.

ഈ രീതി നിലനിൽക്കുന്നത് എന്തുകൊണ്ട്?

കമ്പ്യൂട്ടറുകൾ വിവരങ്ങൾ ഉടനടി നൽകുന്നു. മനുഷ്യർ അങ്ങനെയല്ല. ഈ രണ്ട് വേഗതകൾ തമ്മിലുള്ള വ്യത്യാസം പ്രയോജനകരമാണ്. മനുഷ്യന്റെ വേഗത അനുകരിക്കുന്നതിലൂടെ ടൈപ്പ്റൈറ്റർ ഇഫക്റ്റ് ഈ വിടവ് നികത്തുന്നു. ഒരു ലാൻഡിംഗ് പേജിൽ, സന്ദർശകർ വെറുതെ കണ്ണോടിക്കാതെ (skimming) മൂല്യനിർണ്ണയ വാചകങ്ങൾ (value proposition) ശരിക്കും വായിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ ഇത് ഹെഡ്‌ലൈനുകളിലേക്ക് ശ്രദ്ധ ആകർഷിക്കാൻ സഹായിക്കുന്നു. ഒരു ടെർമിനൽ എമുലേറ്ററിൽ, കമാൻഡുകൾ തത്സമയം പ്രവർത്തിക്കുന്നു എന്ന തോന്നൽ ഇത് നൽകുന്നു. ഒരു ചാറ്റ്ബോട്ട് ഇന്റർഫേസിൽ, മറുപടി ഒരു ഡാറ്റാബേസിൽ നിന്ന് എടുക്കുന്നതിന് പകരം അപ്പോൾ തന്നെ തയ്യാറാക്കുകയാണെന്ന് ഈ താളം സൂചിപ്പിക്കുന്നു.

എന്നാൽ ഈ ഇഫക്റ്റ് പ്രവർത്തിക്കുന്നത് അതിന്റെ രീതികൾ ഉപയോക്താവിനെ പരിഗണിക്കുമ്പോൾ മാത്രമാണ്. ഒരേ ഇടവേളകളിലുള്ള മെട്രോണോം പോലെ ഒരു ടിക്കിംഗ് ശബ്ദം റോബോട്ടിക് ആയി തോന്നും. ഇതിലും മോശമായത്, അസിസ്റ്റീവ് ടെക്നോളജികളെ (assistive technology) അവഗണിക്കുന്ന രീതികൾ ഒരു രസകരമായ വിഷ്വൽ ഫ്ലെറിഷിനെ (visual flourish) നിരാശാജനകമായ ഒരു തടസ്സമാക്കി മാറ്റിയേക്കാം. ലക്ഷ്യം ഉപയോക്താവിനെ പതുക്കെയാക്കുക എന്നതല്ല; മറിച്ച് ഇന്റർഫേസ് സജീവമാണെന്ന് തോന്നിപ്പിക്കാൻ ആവശ്യമായ അത്രയും മാത്രം ഘർഷണം (friction) നൽകുക എന്നതാണ്.

Recursive setTimeout ഉപയോഗിച്ച് ഇത് നിർമ്മിക്കാം

setTimeout ഉപയോഗിച്ച് തുടങ്ങുക, setInterval തൊടരുത്. ഇതിന്റെ വ്യത്യാസം കാണുന്നതിനേക്കാൾ വലുതാണ്.

setInterval വാശിയുള്ളതാണ്. നിങ്ങളുടെ സ്ക്രിപ്റ്റിലോ ബ്രൗസറിന്റെ മെയിൻ ത്രെഡിലോ എന്താണ് സംഭവിക്കുന്നതെന്നതിനെ പരിഗണിക്കാതെ തന്നെ ഇത് ഓരോ n മില്ലിസെക്കൻഡിലും പ്രവർത്തിക്കുന്നു. സാധാരണ കീസ്ട്രോക്കുകൾക്കിടയിൽ 50 മില്ലിസെക്കൻഡ് ഇടവേളയും ചിഹ്നങ്ങൾക്ക് ശേഷം 150 മില്ലിസെക്കൻഡ് ഇടവേളയും നിങ്ങളുടെ ലോജിക് ആവശ്യപ്പെടുന്നുണ്ടെങ്കിൽ, setInterval-ന് അതിനനുസരിച്ച് മാറാൻ കഴിയില്ല. ഇത് ഒഴിവാക്കാൻ നിങ്ങൾ കൂടുതൽ കണ്ടീഷണൽ ലോജിക്കുകൾ ഉപയോഗിക്കേണ്ടി വരികയും, റേസ് കണ്ടീഷനുകളുമായി (race conditions) പോരാടേണ്ടി വരികയും ചെയ്യും. ഒടുവിൽ ഇന്റർവൽ അമിതമായി ക്ലിയർ ചെയ്യുകയും റീസെറ്റ് ചെയ്യുകയും ചെയ്യുന്നത് കോഡിനെ ഒരു സ്റ്റേറ്റ് മാനേജ്‌മെന്റ് ദുരന്തമാക്കി മാറ്റും. മാറുന്ന വേഗതകൾ ആവശ്യമായി വരുന്ന നിമിഷം ഫിക്സഡ് ഇന്റർവലുകൾ പരാജയപ്പെടുന്നു.

ഓരോ ഘട്ടവും അടുത്ത ഘട്ടത്തിനുള്ള നിയമങ്ങൾ തീരുമാനിക്കാൻ അനുവദിക്കുന്നതിലൂടെ റിക്കേഴ്സീവ് setTimeout ഇത് പരിഹരിക്കുന്നു. ഇതിനെ ഒരു ചെറിയ സ്റ്റേറ്റ് മെഷീനായി കരുതുക. നിങ്ങൾ കുറച്ച് വേരിയബിളുകൾ സൂക്ഷിക്കുന്നു: നിലവിലെ സ്ട്രിംഗ്, നിലവിലെ ക്യാരക്ടർ ഇൻഡക്സ്, നിങ്ങൾ ടൈപ്പ് ചെയ്യുകയാണോ അതോ ഡിലീറ്റ് ചെയ്യുകയാണോ എന്ന് അറിയാനുള്ള ഒരു ബൂളിയൻ ഫ്ലാഗ്, കൂടാതെ ഒന്നിലധികം സ്ട്രിംഗുകളിലൂടെ ലൂപ്പ് ചെയ്യാൻ ഒരു textIndex കൗണ്ടർ. ഫംഗ്ഷൻ ഓരോ അക്ഷരവും ചേർക്കുന്നു, അത് വാചകത്തിൽ എവിടെയാണെന്ന് പരിശോധിക്കുന്നു, തുടർന്ന് സാഹചര്യത്തിന് അനുയോജ്യമായ ഒരു ഇടവേളയോടെ അതിന്റെ അടുത്ത പ്രവർത്തനം ഷെഡ്യൂൾ ചെയ്യുന്നു.

ഉദാഹരണത്തിന്, മിക്ക അക്ഷരങ്ങളും 50 മില്ലിസെക്കൻഡിലും, കോമയ്ക്ക് ശേഷം 150 മില്ലിസെക്കൻഡിലും, ഒരു വാചകം പൂർത്തിയായ ശേഷം ഡിലീറ്റ് മോഡിലേക്ക് മാറുന്നതിന് മുമ്പ് 800 മില്ലിസെക്കൻഡിലും ടൈപ്പ് ചെയ്തേക്കാം. setInterval ഉപയോഗിച്ച് ഇത് വൃത്തിയായി ചെയ്യാൻ കഴിയില്ല. എന്നാൽ റിക്കേഴ്സീവ് 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

ഈ ഘടന ക്ലീനപ്പ് (cleanup) എളുപ്പമാക്കുന്നു. ടൈമൗട്ട് ഐഡി (timeout ID) സൂക്ഷിക്കുക. കോംപോണന്റ് അൺമൗണ്ട് ചെയ്യുമ്പോഴോ ഉപയോക്താവ് മറ്റൊരു പേജിലേക്ക് പോകുമ്പോഴോ clearTimeout ഒരിക്കൽ വിളിക്കുക. പശ്ചാത്തലത്തിൽ അനാവശ്യമായി പ്രവർത്തിക്കുന്ന ഇന്റർവലുകൾ ഉണ്ടാകില്ല.

കർസർ തനിയെ മിന്നിക്കണം

മിന്നുന്ന കർസർ എന്നത് ഒരു വിഷ്വൽ ഡീറ്റെയിൽ മാത്രമാണ്, അത് ഡാറ്റയുമായി ബന്ധപ്പെട്ട കാര്യമല്ല. അതിനാൽ അതിനെ നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് സ്റ്റേറ്റ് എഞ്ചിനിൽ നിന്ന് മാറ്റിനിർത്തുക. ഒരു ::after സൂഡോ എലമെന്റിനോ (pseudo-element) അല്ലെങ്കിൽ ടെക്സ്റ്റ് കണ്ടെയ്നറിന്റെ അവസാനം നൽകിയിരിക്കുന്ന ഒരു പ്രത്യേക <span>-നോ ഘടിപ്പിച്ച പ്രത്യേക CSS ആനിമേഷൻ ഉപയോഗിക്കുക.

step-end ടൈമിംഗോടു കൂടിയ opacity അല്ലെങ്കിൽ border-color മാറ്റുന്ന ലളിതമായ ഒരു @keyframes blink ആനിമേഷൻ, കംപോസിറ്ററിൽ പ്രവർത്തിക്കുന്ന മികച്ച ഒരു പൾസ് നൽകുന്നു. കർസറിന്റെ ദൃശ്യപരത നിയന്ത്രിക്കാൻ ജാവാസ്ക്രിപ്റ്റിന്റെ ആവശ്യമില്ല. നിങ്ങളുടെ setTimeout റിക്കർഷനുള്ളിൽ നിന്ന് ഡിസ്‌പ്ലേ പ്രോപ്പർട്ടികൾ മാറ്റാൻ ശ്രമിച്ചാൽ, ഓരോ അക്ഷരത്തിലും അനാവശ്യമായ സ്റ്റൈൽ റീകാൽക്കുലേഷനുകൾ (style recalculations) സംഭവിക്കും. സൗന്ദര്യശാസ്ത്രം (aesthetics) CSS-നും ക്രമം (sequence) ജാവാസ്ക്രിപ്റ്റും കൈകാര്യം ചെയ്യട്ടെ.

textIndex കൗണ്ടർ ഉപയോഗിച്ച് ഒന്നിലധികം സ്ട്രിംഗുകളിലൂടെ ലൂപ്പ് ചെയ്യുന്നത് എളുപ്പമാണ്. നിങ്ങളുടെ സ്ട്രിംഗുകൾ ഒരു അറേയിൽ (array) സൂക്ഷിക്കുക. ആനിമേഷൻ അതിന്റെ ഡിലീറ്റ് ഘട്ടം പൂർത്തിയാക്കി കണ്ടെയ്നർ ശൂന്യമാകുമ്പോൾ, textIndex അറേയുടെ നീളത്തിന് അനുസരിച്ച് (modulo) വർദ്ധിപ്പിക്കുക, ക്യാരക്ടർ പോയിന്റർ പൂജ്യത്തിലേക്ക് മാറ്റുക, വീണ്ടും ടൈപ്പ് ചെയ്യാൻ തുടങ്ങുക. പേജ് റീലോഡ് ചെയ്യാതെ തന്നെ പോർട്ട്‌ഫോളിയോ സൈറ്റുകൾ എങ്ങനെയാണ് ["Developer", "Designer", "Writer"] എന്നിങ്ങനെയുള്ള റോളുകൾ മാറി മാറി കാണിക്കുന്നത് ഇതാ ഇങ്ങനെയാണ്.

മിഥ്യാധാരണകൾ തകർത്തേക്കാവുന്ന തെറ്റുകൾ

തുടക്കക്കാരുടെ നിർമ്മാണങ്ങളിൽ മൂന്ന് തെറ്റുകൾ വീണ്ടും വീണ്ടും കാണപ്പെടുന്നു.

setInterval ഉപയോഗിക്കുന്നത്. വേഗതയിലെ വ്യത്യാസം മൂലമുള്ള പ്രശ്നം നമ്മൾ ഇതിനകം ചർച്ച ചെയ്തതാണ്, എന്നാൽ അതിനേക്കാൾ സൂക്ഷ്മമായ മറ്റൊരു പ്രശ്നമുണ്ട്. നിങ്ങളുടെ DOM അപ്‌ഡേറ്റ് എപ്പോഴെങ്കിലും വൈകുകയാണെങ്കിൽ—ഉദാഹരണത്തിന്, ബ്രൗസർ ഒരു ലേഔട്ട് ഷിഫ്റ്റ് പെയിന്റ് ചെയ്യുന്നത് കാരണം—setInterval തുടർച്ചയായി പ്രവർത്തിച്ചുകൊണ്ടേയിരിക്കും. ഇത് ഒരേസമയം ഒന്നിലധികം എഴുത്തുകൾ നടക്കാനും (overlapping writes), ഡ്യൂപ്ലിക്കേറ്റ് അക്ഷരങ്ങൾ വരാനും, അല്ലെങ്കിൽ ബ്രൗസറിന് റെൻഡർ ചെയ്യാൻ കഴിയുന്നതിനേക്കാൾ വേഗത്തിൽ എഴുത്തുകൾ നടക്കാനും കാരണമായേക്കാം. എന്നാൽ റിക്കഴ്‌സീവ് setTimeout ഉപയോഗിക്കുമ്പോൾ, അടുത്ത ഘട്ടത്തിലേക്ക് കടക്കുന്നതിന് മുമ്പ് നിലവിലെ ഘട്ടം പൂർത്തിയായെന്ന് അത് ഉറപ്പുവരുത്തുന്നു.

HTML എസ്കേപ്പ് ചെയ്യാൻ മറന്നുപോകുന്നത്. നിങ്ങളുടെ സ്രോതസ്സ് സ്ട്രിംഗുകളിൽ (source strings) ആംഗിൾ ബ്രാക്കറ്റുകൾ ഉണ്ടാവുകയും, നിങ്ങൾ ഓരോ അക്ഷരമായി innerHTML വഴി ഉള്ളടക്കം ചേർക്കുകയും ചെയ്യുന്നുണ്ടെങ്കിൽ, ടാഗുകൾ പകുതിയായി മുറിഞ്ഞുപോകാൻ സാധ്യതയുണ്ട്. ബ്രൗസർ ആദ്യം <, പിന്നെ <s, തുടർന്ന് <st എന്നിങ്ങനെ കാണുന്നു. ഇത് ശരിയായ രീതിയിൽ ടാഗുകൾ പാഴ്സ് ചെയ്യുന്നത് തടയുകയും, തകരാറിലായ DOM നോഡുകൾ അല്ലെങ്കിൽ അപ്രതീക്ഷിതമായ സ്റ്റൈലിംഗ് മാറ്റങ്ങൾ ഉണ്ടാക്കുകയും ചെയ്യും. നിങ്ങൾക്ക് ആ അക്ഷരങ്ങൾ അതേപടി കാണിക്കണമെന്നുണ്ടെങ്കിൽ, അവ ആദ്യം എസ്കേപ്പ് ചെയ്യുകയോ അല്ലെങ്കിൽ innerHTML-ന് പകരം textContent ഉപയോഗിക്കുകയോ ചെയ്യുക. ടൈപ്പ്റൈറ്റർ ഔട്ട്പുട്ടിനുള്ളിൽ സ്റ്റൈൽ ചെയ്ത <span> ടാഗുകൾ ആവശ്യമാണെങ്കിൽ, അക്ഷരങ്ങൾ ടൈപ്പ് ചെയ്യാൻ തുടങ്ങുന്നതിന് മുമ്പ് ടാഗുകൾ എവിടെ തുടങ്ങുന്നു എന്നും എവിടെ അവസാനിക്കുന്നു എന്നും കൃത്യമായി മനസ്സിലാക്കാൻ സ്ട്രിംഗിനെ പ്രീ-പ്രോസസ്സ് ചെയ്യുക.

ആക്സസിബിലിറ്റി (Accessibility) അവഗണിക്കുന്നത്. ഓരോ അക്ഷരമായി വായിക്കുന്നത് സ്ക്രീൻ റീഡറുകൾക്ക് ഇഷ്ടപ്പെടില്ല. നിങ്ങളുടെ സ്ക്രിപ്റ്റ് ഓരോ പുതിയ അക്ഷരവും DOM-ലേക്ക് ചേർക്കുമ്പോൾ, ചില അസിസ്റ്റീവ് ടെക്നോളജികൾ മുഴുവൻ നോഡും വീണ്ടും വായിക്കുന്നു, ഇത് വാക്കുകൾ മുറിഞ്ഞു മുറിഞ്ഞു വരാൻ കാരണമാകുന്നു. ശബ്ദത്തിലൂടെയുള്ള നാവിഗേഷനെ ആശ്രയിക്കുന്നവർക്ക് ഇത് വലിയൊരു ബുദ്ധിമുട്ടാണ്. ഇതിനുള്ള പരിഹാരം സങ്കീർണ്ണമല്ല: മുഴുവൻ ടെക്സ്റ്റും അടങ്ങിയിരിക്കുന്ന കണ്ടെയ്‌നറിൽ ഒരു aria-label ചേർക്കുക. കൂടാതെ, aria-hidden="true" ഉപയോഗിച്ച് ആനിമേറ്റഡ് എലമെന്റിനെ അസിസ്റ്റീവ് ടെക്നോളജിയിൽ നിന്ന് പൂർണ്ണമായും മറച്ചുവെക്കുകയും, സ്ക്രീൻ റീഡറുകൾക്കായി വിഷ്വലായി കാണാത്ത ഒരു സ്റ്റാറ്റിക് കോപ്പി നൽകുകയും ചെയ്യാം. ഏതായാലും, ഉപയോക്താക്കളെ ആനിമേഷൻ കാണിച്ചു സമയം കളയിപ്പിക്കുന്നതിന് പകരം മുഴുവൻ വാചകവും നേരിട്ട് നൽകുക.

നിങ്ങളുടെ വേർഷൻ കൂടുതൽ മെച്ചപ്പെടുത്താനുള്ള വഴികൾ

കോർ ലൂപ്പ് (core loop) ശരിയായി പ്രവർത്തിച്ചു കഴിഞ്ഞാൽ, നിങ്ങൾക്ക് കൂടുതൽ ഫീച്ചറുകൾ ചേർക്കാം. എന്നാൽ അടിസ്ഥാന കാര്യങ്ങൾ ഉറപ്പുവരുത്തുന്നത് വരെ അവ ചേർക്കാനുള്ള തിടുക്കം കാണിക്കരുത്.

കീസ്ട്രോക്ക് സൗണ്ട് ഇഫക്റ്റുകൾ. ഓരോ അക്ഷരത്തിലും കേൾക്കുന്ന നേരിയ ഒരു ക്ലിക്ക് ശബ്ദം സംതൃപ്തി നൽകുന്നതായിരിക്കും, എന്നാൽ വെബ് പേജുകളിലെ ഓഡിയോ ഉപയോഗിക്കുന്നത് ശ്രദ്ധയോടെ വേണം. Web Audio API അല്ലെങ്കിൽ ചെറിയൊരു ബഫറുള്ള ലഘുവായ Audio എലമെന്റ് ഉപയോഗിക്കുക. ഒരേപോലെയുള്ള ക്ലിക്കുകൾ കൃത്രിമമായി തോന്നാതിരിക്കാൻ പ്ലേബാക്ക് റേറ്റ് 0.95 നും 1.05 നും ഇടയിൽ ചെറിയ രീതിയിൽ മാറ്റം വരുത്തുക. ബ്രൗസറുകളുടെ ഓട്ടോപ്ലേ പോളിസികൾ എപ്പോഴും മാനിക്കുകയും ഒരു മ്യൂട്ട് ടോഗിൾ (mute toggle) നൽകുകയും ചെയ്യുക. രാവിലെ 9 മണിക്ക് ഒരു പോർട്ട്ഫോളിയോ പേജ് ഓട്ടോപ്ലായി ടൈപ്പിംഗ് ശബ്ദങ്ങൾ പുറപ്പെടുവിക്കുന്നത് ഉപയോക്താക്കളെ അകറ്റാൻ കാരണമാകും.

മൾട്ടി-ലൈൻ ടൈപ്പിംഗ്. യഥാർത്ഥ ടെർമിനൽ വിൻഡോകളിൽ വരികൾ ഓട്ടോമാറ്റിക്കായി ചുറ്റും (wrap). നിങ്ങളുടെ ടെക്സ്റ്റ് ഒരു വരിയിൽ നിന്ന് അടുത്തതിലേക്ക് മാറുന്നുണ്ടെങ്കിൽ, ലേഔട്ട് കൃത്യമല്ലെങ്കിൽ ഒരു ലളിതമായ border-right കർസർ അസ്വാഭാവികമായി ചാടാൻ സാധ്യതയുണ്ട്. ന്യൂലൈൻ ക്യാരക്ടറുകൾ ഉപയോഗിച്ച് സ്ട്രിംഗുകളെ വിഭജിക്കുകയും ഓരോ വരിയും സ്വന്തം <span ലിൽ റെൻഡർ ചെയ്യുകയോ, അല്ലെങ്കിൽ കണ്ടന്റിന്റെ അവസാനം ട്രാക്ക് ചെയ്യുന്ന ഒരു പൊസിഷൻ ചെയ്ത സൂഡോ-എലമെന്റ് (pseudo-element) ഉപയോഗിക്കുകയോ ചെയ്യുക. ടെക്സ്റ്റ് റാപ്പിംഗിൽ ശ്രദ്ധിക്കുക; കണ്ടെയ്‌നർ വീതി മാറുന്നതിനനുസരിച്ച് ഇൻലൈൻ ബോർഡർ ആയി ഉപയോഗിക്കുന്ന കർസർ ടെക്സ്റ്റിൽ നിന്ന് വേർപെട്ടുപോയേക്കാം. ടെർമിനൽ സ്റ്റൈലുകൾക്കായി white-space: pre-wrap ഉം മോണോസ്പേസ്ഡ് ഫോണ്ടും ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക, കാരണം ഫിക്സഡ്-വിഡ്ത്ത് ക്യാരക്ടറുകൾ കർസർ കണക്കുകൂട്ടലുകൾ കൂടുതൽ എളുപ്പമാക്കുന്നു.

റിയൽ-ടൈം മാർക്ക്ഡൗൺ റെൻഡറിംഗ്. ഇതാണ് ഏറ്റവും സങ്കീർണ്ണമായ ഭാഗം. നിങ്ങൾ **bold** എന്ന് ടൈപ്പ് ചെയ്താൽ, നിങ്ങൾക്ക് രണ്ട് വഴികളുണ്ട്: ആസ്റ്ററിസ്ക്കുകൾ അതേപടി കാണിക്കുക, അല്ലെങ്കിൽ അവയെ ഉടൻ തന്നെ ബോൾഡ് സ്റ്റൈലിലേക്ക് മാറ്റുക. രണ്ടാമത്തെ രീതിയാണ് നിങ്ങൾ തിരഞ്ഞെടുക്കുന്നതെങ്കിൽ, ടൈപ്പിംഗിനിടെ textContent-ൽ നിന്ന് innerHTML-ലേക്ക് മാറുന്നത് നിങ്ങളുടെ ടെക്സ്റ്റ് നോഡ് അതിരുകൾ മാറാൻ കാരണമാകും. HTML ടാഗുകൾ താഴെയുള്ള DOM ട്രീ മാറ്റം വരുത്തുന്നതിനാൽ കർസർ പൊസിഷൻ കണ്ടെത്തുന്നത് ഒരു തലവേദനയായി മാറും. ഇതിനൊരു സുരക്ഷിതമായ മാർഗ്ഗം, റ〉 (raw) മാർക്ക്ഡൗൺ സ്ട്രിംഗ് സാധാരണ രീതിയിൽ ടൈപ്പ് ചെയ്യുക, തുടർന്ന് മുഴുവൻ സ്ട്രിംഗും സ്ക്രീനിൽ വന്നുകഴിഞ്ഞാൽ ഒരു റെൻഡർ പാസ് (render pass) നൽകുക എന്നതാണ്. നിങ്ങൾക്ക് ലൈവ് ഫോർമാറ്റിംഗ് തീർച്ചയായും ആവശ്യമാണെങ്കിൽ, രണ്ട് ലെയറുകൾ നിലനിർത്തുക: ഒരു ഹിഡൻ ടൈപ്പ്ഡ് ബഫറും (hidden typed buffer) പാഴ്സ് ചെയ്ത ഒരു വിഷ്വൽ ഓവർലേയും (parsed visual overlay).

റിവേഴ്സ് ഇഫക്റ്റുകൾ. ടെക്സ്റ്റ് ഡിലീറ്റ് ചെയ്യുക എന്നാൽ ഓരോ അക്ഷരമായി ബാക്സ്‌പേസ് ചെയ്യുക എന്നല്ല അർത്ഥം. അടുത്ത സ്ട്രിംഗ് ടൈപ്പ് ചെയ്യുന്നതിന് മുമ്പ് ഫീൽഡ് പെട്ടെന്ന് ക്ലിയർ ചെയ്യുന്ന രീതിയിലുള്ള "select all, then delete" റീസെറ്റ് നിങ്ങൾക്ക് അനുകരിക്കാം. ഇത് യന്ത്രം പോലെ തോന്നും. പകരമായി, ഓരോ അക്ഷരത്തിനും 30 മില്ലിസെക്കൻഡ് വേഗതയിൽ പതുക്കെ ബാക്സ്‌പേസ് ചെയ്യുന്നത് ആകാംക്ഷ വർദ്ധിപ്പിക്കും. ഇവ രണ്ടും മിക്സ് ചെയ്യുക: ഒരു തെറ്റായ അക്ഷരം വേഗത്തിൽ ബാക്സ്‌പേസ് ചെയ്യുക, അല്പം നിർത്തി, തുടർന്ന് സാധാരണ വേഗതയിൽ ഡിലീറ്റ് ചെയ്യുക. ഈ വ്യത്യാസം ആ ഇഫക്റ്റിന് കൂടുതൽ സ്വാഭാവികത നൽകുന്നു.

യഥാർത്ഥ പാഠം

ഒരു ടൈപ്പ്റൈറ്റർ ഇഫക്റ്റ് എന്നത് ഉപരിതലത്തിൽ ലളിതമെന്ന് തോന്നിക്കുന്നതും എന്നാൽ നിർമ്മിച്ചു കഴിഞ്ഞാൽ മാത്രം അതിന്റെ സങ്കീർണ്ണത മനസ്സിലാകുന്നതുമായ ഒരു UI ഫ്ലെറിഷ് ആണ്. തുടങ്ങുക...