நீங்கள் எப்போதாவது ஒரு பக்கத்தைப் புதுப்பித்து (refresh), உங்கள் CSS மறைந்து போவதைப் பார்த்திருக்கிறீர்கள் என்றால், அல்லது ஒரு கோப்பை பழைய நிலைக்கு மாற்றிய பிறகு, நீங்கள் என்ன மாற்றினீர்கள் என்பது உங்களுக்கு நினைவில் இல்லை என்பதை உணர்ந்திருந்தால், குறியீட்டை எழுதுவதற்கும் அதை முழுமையாகக் கட்டுப்படுத்துவதற்கும் இடையே உள்ள இடைவெளியை நீங்கள் புரிந்து கொள்கிறீர்கள். தொழில்முறை இணைய மேம்பாட்டின் (professional web development) அடித்தளத்தில் இரண்டு கருத்துக்கள் உள்ளன: உங்கள் குறியீடு எவ்வாறு இயங்குகிறது மற்றும் தரவை எவ்வாறு சேமிக்கிறது என்பதைத் தீர்மானிக்கும் பிரவுசர் சூழல் (browser environment), மற்றும் உங்கள் சோதனைகள் நிரந்தரமாகத் தொலைந்து போகாமல் தடுக்கும் Git. இவை இரண்டையும் ஆரம்பத்திலேயே கற்றுக்கொள்வது, பிற்காலத்தில் ஏற்படும் மர்மமான பிழைகள் மற்றும் சிதைந்த பயன்பாடுகளிலிருந்து (broken deployments) உங்களைக் காப்பாற்றும்.

முகவரி அமைப்பாக URL

நீங்கள் நேவிகேஷன் பாரில் (navigation bar) ஒரு முகவரியைத் தட்டச்சு செய்யும் ஒவ்வொரு முறையும், பிரவுசருக்கு ஒரு ஒருங்கிணைப்புத் தொகுதியை (set of coordinates) வழங்குகிறீர்கள். ஒரு Uniform Resource Locator என்பது வெறும் ஒரு சரம் (string) மட்டுமல்ல; அது ஆறு தனித்துவமான பகுதிகளாகப் பிரிக்கப்பட்ட ஒரு கட்டமைக்கப்பட்ட அறிவுறுத்தல் கையேடு ஆகும்.

முதலில் protocol வருகிறது, இது பொதுவாக HTTPS ஆகும். இது சர்வர் உடன் எவ்வாறு பேசுவது மற்றும் உரையாடல் குறியாக்கம் (encrypted) செய்யப்பட வேண்டுமா என்பதை பிரவுசியிடம் தெரிவிக்கிறது. பின்னர் domain என்பது DNS மூலம் ஒரு IP முகவரியாக மாற்றப்படுகிறது, இதன் மூலம் பிரவுசர் எந்த இயற்பியல் அல்லது மெய்நிகர் இயந்திரத்தைத் தொடர்பு கொள்ள வேண்டும் என்பதைத் தெரிந்துகொள்கிறது.

port என்பது அந்த சர்வரில் உள்ள துல்லியமான நுழைவாயிலைக் குறிக்கிறது. உற்பத்தித் தளங்களில் (production sites) நீங்கள் இதை அரிதாகவே பார்ப்பீர்கள், ஏனெனில் இணைய சேவையகங்கள் (web servers) HTTPS-க்கு 443 என்ற எண்ணையே இயல்பாகப் பயன்படுத்துகின்றன. ஆனால் உள்ளூர் மேம்பாட்டின் போது (local development), நீங்கள் தொடர்ந்து போர்ட்களைக் கையாளுவீர்கள். localhost:3000 அல்லது localhost:5173 போன்றவற்றை நினைவில் கொள்ளுங்கள். போர்ட் தவறாக இருந்தால், இணைப்பு காலாவதியாகிவிடும் (timeout).

அடுத்து path, இது /blog/2024/march போன்ற ஒரு குறிப்பிட்ட கோப்பு அல்லது பாதையைக் குறிக்கிறது. query string என்பது கேள்விக்குறியைத் தொடர்ந்து வரும் மற்றும் ?category=javascript&sort=date போல தரவை சர்வருக்குக் கொண்டு செல்லும். இறுதியாக, fragment, இது ஹேஷ் குறியீட்டால் (hash symbol) குறிக்கப்படுகிறது, இது பக்கத்திற்குள் ஒரு குறிப்பிட்ட பகுதியைச் சுட்டிக்காட்டுகிறது. ஆவண இணைப்புகள் (documentation links) மற்றும் அணுகல்தன்மைக்கு (accessibility) Fragments பயனுள்ளதாக இருக்கும், ஏனெனில் அவை ஆவணத்தைப் புதுப்பிக்காமலேயே பயனர்களை நேரடியாக ஒரு தலைப்பிற்கு அழைத்துச் செல்கின்றன.

இந்தக் கட்டமைப்பைப் புரிந்துகொள்வது ரூட்டிங் பிழைகளைத் திருத்தவும் (debug), சுத்தமான API-களை உருவாக்கவும், நெட்வொர்க் பதிவுகளை (network logs) எளிதாகப் படிக்கவும் உதவும்.

DOM என்பது உங்கள் ரன்டைம் (Runtime)

ஒரு கம்பைலர் (compiler) உங்கள் .c கோப்பை முதலில் பகுப்பாய்வு செய்யாமல் இயக்குவது போலல்லாமல், பிரவுசர்கள் வெறும் HTML உரையை மட்டும் திரையில் காட்டாது. பிரவுசர் உங்கள் மார்க்கப்பைப் (markup) பதிவிறக்கம் செய்யும்போது, அது டேக்குகளையும் (tags) உரைகளையும் Document Object Model (DOM)-ஆக மாற்றுகிறது. இது ஒரு இன்-மெமரி ட்ரீ (in-memory tree) ஆகும், இதில் ஒவ்வொரு உறுப்பும் (element) ஜாவாஸ்கிரிப்ட் (JavaScript) கையாளக்கூடிய ஒரு நோடாக (node) மாறுகிறது.

DOM என்பது உங்கள் பக்கத்தின் உயிர்வாழும் வடிவமாகும். நீங்கள் ஒரு ஹம்பர்கர் ஐகானைக் (hamburger icon) கிளிக் செய்து பக்கவாட்டு மெனு (side menu) வெளிவரும்போது, ஜாவாஸ்கிரிப்ட் புதிய HTML-ஐ சர்வரில் இருந்து கேட்பதில்லை. அது DOM மரத்தை (tree) ஆய்வு செய்து, ஒரு கிளாஸை (class) மாற்றி, CSS மூலம் அந்த மாற்றத்தை நிகழ்த்துகிறது. ஃபார்ம் சரிபார்ப்பு (form validation), நேரலை கவுண்டர்கள் மற்றும் இன்ஃபினைட் ஸ்க்ரோல் (infinite scroll) ஆகியவற்றிற்கும் இதுவே பொருந்தும். நீங்கள் ஒரு உறுப்பை ஆய்வு செய்து (inspect) அதன் பின்னணி நிறத்தை மாற்றினால், நீங்கள் நேரடியாக DOM-ஐத் திருத்துகிறீர்கள், வட்டில் உள்ள கோப்பை அல்ல.

இது முக்கியமானது, ஏனெனில் உங்கள் எடிட்டரில் நீங்கள் எழுதும் கட்டமைப்பிற்கும் பிரவுசர் பயன்படுத்தும் கட்டமைப்பிற்கும் இடையே வேறுபாடு இருக்கலாம். ஸ்கிரிப்ட்கள் புதிய நோடுகளைச் சேர்க்கலாம். மூன்றாம் தரப்பு விட்ஜெட்கள் (third-party widgets) மார்க்கப்பைப் புதிதாகச் சேர்க்கலாம். நீங்கள் ஸ்டைலிங் அல்லது ஈவென்ட் லிசனர்ஸை (event listeners) சரிபார்க்கும்போது, உங்கள் அசல் மூலக் குறியீட்டை (source code) மட்டும் பார்க்காமல், திரையில் காட்டப்படும் DOM-ஐப் பார்க்க வேண்டும்.

உலாவியில் தரவு எங்கு சேமிக்கப்படுகிறது

HTTP வடிவமைப்பிலேயே 'stateless' (நிலைத்தன்மையற்றது) ஆகும், அதாவது ஒவ்வொரு கோரிக்கையும் (request) முந்தைய வருகையைப் பற்றிய நினைவகம் இல்லாத ஒரு அந்நியரைப் போல சர்வரை வந்தடைகிறது. தரவை நிலைநிறுத்த (persistence), பிரவுசர்கள் மூன்று முதன்மைச் சேமிப்பு முறைகளை வழங்குகின்றன, ஒவ்வொன்றும் வெவ்வேறு விதமான விதிகள் மற்றும் கால அளவைக் கொண்டுள்ளன.

LocalStorage பயனர் உலாவியை முழுமையாக மூடிய பின்னரும் கூட, சிறிய அளவிலான தரவை எளிமையான key-value சரங்களாக (strings) வைத்திருக்கும். இது டார்க்-மோட் (dark-mode) மாற்றம் அல்லது பக்கவாட்டு மெனுவின் நிலை போன்ற முக்கியமற்ற விருப்பத்தேர்வைகளுக்குச் சரியான இடமாகும். முக்கியமான கடவுச்சொற்களை (sensitive credentials) இதில் சேமிக்க வேண்டாம்; இது அந்த டொமைனில் இயங்கும் எந்தவொரு ஸ்கிரிப்டாலும் அணுகப்படக்கூடியது மற்றும் இது தானாகவே காலாவதியாகாது.

SessionStorage API-இல் பார்க்க ஒரே மாதிரியாக இருந்தாலும், அது வேறுபட்ட முறையில் செயல்படுகிறது. இது தரவை ஒரு தனி டேப் (tab) அளவுக்கு மட்டும் மட்டுப்படுத்துகிறது. உங்கள் பயனர் ஒரு செக்அவுட் முறையைத் (checkout flow) திறந்து, பாதி ஃபார்மை நிரப்பி, தவறுதலாகப் பக்கத்தைப் புதுப்பித்தால், SessionStorage அந்த வரைவைச் சேமித்து வைக்க முடியும். அந்த டேப் மூடப்பட்டவுடன், தரவு மறைந்துவிடும். இது தற்காலிகமான, டேப் சார்ந்த பணிகளுக்கு LocalStorage-ஐ விடச் சிறந்தது.

Cache என்பது படங்கள், எழுத்துருக்கள் (fonts), ஸ்டைல்ஷீட்கள் (stylesheets) மற்றும் ஸ்கிரிப்ட்கள் போன்ற பெரிய அளவிலான சொத்துக்களைக் (assets) கையாள்கிறது. ஒவ்வொரு முறை பார்வையிடும் போதும் இரண்டு மெகாபைட் அளவுள்ள ஒரு படத்தை பதிவிறக்குவதற்குப் பதிலாக, பிரவுசர் அதன் நகலை உள்ளூரிலேயே சேமித்து வைத்துக்கொண்டு, சர்வரில் புதிய பதிப்பு உள்ளதா என்பதைச் சரிபார்க்கிறது. இது உங்கள் தளம் மீண்டும் மீண்டும் பார்வையிடப்படும்போது எவ்வளவு வேகமாகத் தோன்றும் என்பதை நேரடியாகக் கட்டுப்படுத்துகிறது.

DevTools ஒரு அன்றாடப் பழக்கமாக

பெரும்பாலான டெவலப்பர்கள் ஒரு மாறியை (variable) லாக் செய்ய பிரவுசர் கன்சோலைத் திறந்துவிட்டு அங்கேயே நின்றுவிடுகிறார்கள். இது ஒரு பட்டறையை வைத்திருப்பது போல, ஆனால் ஸ்க்ரூடிரைவரை (screwdriver) மட்டுமே பயன்படுத்துவது போன்றது. பிரவுசர் DevTools என்பது ஒரு ஒருங்கிணைந்த டீபக்கிங் சூழலாகும் (integrated debugging environment), மேலும் அதன் குறைந்தது நான்கு பேனல்களை நீங்கள் திட்டமிட்டுப் பயன்படுத்தக் கற்றுக்கொள்ள வேண்டும்.

Elements பேனல் நேரடி DOM மற்றும் அதன் கணக்கிடப்பட்ட ஸ்டைல்களைக் (computed styles) காட்டுகிறது. ஒரு லேஅவுட் (layout) சிதறும்போது, அந்த நோடை (node) ஆய்வு செய்து கேஸ்கேடை (cascade) கவனியுங்கள். உங்கள் மூலக் குறியீட்டை (source code) தொடாமலேயே நிகழ்நேரத்தில் பண்புகளை (properties) ஆன் மற்றும் ஆஃப் செய்ய முடியும், இது எடிட்டரில் ஊகிப்பதை விட 'specificity wars'-ஐக் கண்டறிவதை மிக வேகமாக்குகிறது.

Console பிழைகளை ஸ்டாக் ட்ரேஸ்களுடன் (stack traces) காட்டுகிறது, ஆனால் இது ஒரு REPL ஆகும். நீங்கள் செலெக்டர்களை (selectors) வினவலாம், API பதில்களைச் சோதிக்கலாம் அல்லது தற்போதைய பக்க நிலைக்கு எதிராகக் கோவைகளை (expressions) மதிப்பீடு செய்யலாம்.

Network பேனல் ஒவ்வொரு கோரிக்கையின் (request) காலவரிசையையும் வெளிப்படுத்துகிறது. தோல்வியடையும் ஒரு எண்ட்பாயிண்ட்டை (endpoint) நீங்கள் கண்டறியலாம், API தாமதத்தை (latency) அளவிடலாம் மற்றும் எந்த அசெட் (asset) உங்கள் முதல் பெயிண்ட்டைத் (first paint) தடுக்கிறது என்பதைக் கண்டறியலாம். ஆப் மெதுவாக இருப்பதாக ஒரு பயனர் கூறினால், சர்வர் அல்லது பிரண்ட்எண்ட் ஆகியவற்றில் எது தடையை (bottleneck) ஏற்படுத்துகிறது என்பதை இங்கே நீங்கள் நிரூபிக்கலாம்.

Application பேனல் குக்கீகள் (cookies), LocalStorage மற்றும் SessionStorage ஆகியவற்றை ஒரே இடத்தில் ஆய்வு செய்ய அனுமதிக்கிறது. அங்கீகாரம் (authentication) சோதிக்கும்போதோ அல்லது ஒரு ஸ்டேட் பிழை (state bug) டீபக் செய்யும்போதோ, உங்கள் முழு பிரவுசிங் வரலாற்றையும் அழிக்காமல், ஒரு புதிய பார்வையாளரைப் போலச் செயல்பட ஸ்டோரேஜை (storage) நீங்கள் கைமுறையாகத் துடைக்கலாம்.

கோப்புகளைப் பற்றியல்ல, Git நிலைகளைப் (stages) பற்றிச் சிந்தியுங்கள்

ஒரு கோப்பைச் சேமிப்பது என்பது அதை வெர்ஷனிங் (versioning) செய்வது போன்றது அல்ல. Git செயல்படுவதற்குக் காரணம், எதையும் நிரந்தரமாகப் பதிவு செய்வதற்கு முன், மாற்றங்களைப் பற்றிய மூன்று தனித்துவமான நிலைகளில் நீங்கள் சிந்திக்கத் தூண்டுவதே ஆகும்.

உங்கள் working tree என்பது ஒரு கலைந்து கிடக்கும் மேசை போன்றது. நீங்கள் கோப்புகளைத் திருத்துவீர்கள், விஷயங்களைச் சிதைப்பீர்கள், சோதனைகளை கமெண்ட் (comment out) செய்வீர்கள் மற்றும் மாறிகளின் பெயர்களை மாற்றுவீர்கள். இன்னும் எதுவும் கண்காணிக்கப்படவில்லை (tracked). இங்கே நீங்கள் ஒரு கோப்பை நீக்கிவிட்டு, அதை கமிட் (commit) செய்யவில்லை என்றால், அது அப்படியே காணாமல் போய்விடும்.

staging area, இதையே index என்றும் அழைப்பார்கள், என்பது எது முக்கியமானது என்பதை நீங்கள் தீர்மானிக்கும் இடமாகும். git add மூலம், தேர்ந்தெடுக்கப்பட்ட மாற்றங்களை ஒரு pre-commit காத்திருப்பு மண்டலத்திற்குள் வைக்கிறீர்கள். தொடர்பில்லாத வேலைகளைப் பிரிக்க staging area உதவுகிறது. நீங்கள் ஒரு லாகின் பிழையைச் சரிசெய்துவிட்டு, அதே சமயம் ஒரு utility function-ஐயும் மாற்றியிருந்தால் (refactor), அவற்றை நீங்கள் தனித்தனியாக ஸ்டேஜ் (stage) செய்து, ஒரு தெளிவற்ற செய்திகளுக்குப் பதிலாக இரண்டு தெளிவான commit செய்திகளை எழுதலாம்.

இறுதியாக, local repository உண்மையான வரலாற்றைச் சேமிக்கிறது. git commit இயக்குவதன் மூலம், உங்கள் ஸ்டேஜ் செய்யப்பட்ட மாற்றங்களை ஒரு தனித்துவமான ஹேஷ் (hash), ஒரு செய்தி மற்றும் ஒரு நேர முத்திரையுடன் (timestamp) ஒரு ஸ்னாப்ஷாட்டாக (snapshot) லாக் செய்கிறீர்கள். நாளை நீங்கள் அந்த கோப்பைச் சிதைத்தாலும், அந்த ஸ்னாப்ஷாட்டை மீட்டெடுக்க முடியும். கமிட்கள் (commits) எளிதானவை, எனவே அவற்றைச் சிறியதாகவும் தர்க்கரீதியாகவும் (logical) வைத்திருங்கள். வெள்ளிக்கிழமை மதிய நேரக் குறியீட்டின் ஒரு பெரிய தொகுப்பை விட, சிறிய மற்றும் வாசிக்கக்கூடிய கமிட்களின் வரலாறு மிகவும் பயனுள்ளது.

உண்மையான பயன்

இந்தத் தலைப்புகள் வெறும் தத்துவார்த்த கணினி அறிவியல் (theoretical computer science) சார்ந்தவை அல்ல. இவை நடைமுறை கட்டுப்பாட்டு அமைப்புகள் (practical control systems). ஒரு URL எவ்வாறு பிரிக்கப்படுகிறது என்பதை நீங்கள் புரிந்துகொள்ளும்போது, லாகுகளை (logs) சிறப்பாகப் படிக்கலாம். DOM-ஐ ஒரு நிலையான மார்க்கப் (static markup) பதிலாக, ஒரு வாழும் ரன்டைமாக (living runtime) நீங்கள் கருதும்போது, உங்கள் JavaScript கணிக்கக்கூடியதாக (predictable) மாறும். LocalStorage மற்றும் SessionStorage ஆகியவற்றைச் சரியாகப் பயன்படுத்தும்போது, டேப்களுக்கு (tabs) இடையே ஸ்டேட் (state) கசிவதைத் தவிர்க்கலாம். ஒரு நோக்கத்துடன் DevTools-ஐத் திறக்கும்போது, ஒரு பட்டன் ஏன் நீலத்திற்குப் பதிலாகப் பச்சை நிறத்தில் இருக்கிறது என்று ஊகிப்பதை நிறுத்துவீர்கள். மேலும், Git-இன் மூன்று நிலைகளைக் கொண்ட பணிப்பாய்வை (workflow) நீங்கள் மதிக்கத் தொடங்கும்போது, 'undo' பட்டனைப் பார்த்து பயப்படுவதை நிறுத்திவிடுவீர்கள்.

ஒவ்வொரு விளிம்பு நிலைச் சூழலையும் (edge case) ஒரே நேரத்தில் மனப்பாடம் செய்ய முயற்சிக்காதீர்கள். அதற்குப் பதிலாக, ஒரு பழக்கத்தை உருவாக்குங்கள்: லேஅவுட் சிதறும்போது பத்து நிமிடங்கள் DOM-ஐ ஆய்வு செய்யுங்கள், பேக்எண்டை (backend) குறைப்பதற்கு முன் Network டேப்பைச் சரிபார்க்கவும், மேலும் ஒரு தெளிவான சிந்தனையை முடிக்கும்போதெல்லாம் கமிட் செய்யவும். உங்கள் பயன்பாடுகளின் நம்பகத்தன்மை தானாகவே வரும்.