మీరు ఎప్పుడైనా ఒక పేజీని రిఫ్రెష్ చేసినప్పుడు మీ CSS మాయమవ్వడం చూసినా, లేదా ఒక ఫైల్‌ను రివర్ట్ చేసినప్పుడు మీరు ఏమి మార్చారో గుర్తులేకపోయినా, కోడ్ రాయడానికి మరియు దానిని నియంత్రించడానికి మధ్య ఉన్న తేడా మీకు అర్థమవుతుంది. ప్రొఫెషనల్ వెబ్ డెవలప్‌మెంట్‌కు రెండు ప్రాథమిక అంశాలు ఉన్నాయి: బ్రౌజర్ ఎన్విరాన్మెంట్ (browser environment), ఇది మీ కోడ్ ఎలా రన్ అవుతుంది మరియు డేటాను ఎలా నిల్వ చేస్తుంది అని నిర్ణయిస్తుంది, మరియు Git, ఇది మీ ప్రయోగాలు శాశ్వతంగా కోల్పోయేలా చేయకుండా నిరోధిస్తుంది. ఈ రెండింటినీ ప్రారంభంలోనే నేర్చుకోవడం వల్ల భవిష్యత్తులో వచ్చే వింతైన బగ్స్ మరియు బ్రోకెన్ డిప్లాయ్‌మెంట్‌ల నుండి మీరు తప్పించుకోవచ్చు.

అడ్రస్ సిస్టమ్‌గా URL

మీరు నావిగేషన్ బార్‌లో అడ్రస్‌ను టైప్ చేసిన ప్రతిసారీ, మీరు బ్రౌజర్‌కు కొన్ని కోఆర్డినేట్‌లను అందిస్తున్నారు. Uniform Resource Locator అనేది కేవలం ఒక స్ట్రింగ్ మాత్రమే కాదు; ఇది ఆరు విభిన్న భాగాలుగా విభజించబడిన ఒక నిర్మాణాత్మక ఇన్‌స్ట్రక్షన్ మాన్యువల్.

మొదట protocol వస్తుంది, ఇది సాధారణంగా HTTPS. ఇది సర్వర్‌తో బ్రౌజర్ ఎలా మాట్లాడాలి మరియు సంభాషణ ఎన్‌క్రిప్ట్ చేయబడాలా వద్దా అని తెలియజేస్తుంది. ఆ తర్వాత domain, DNS ద్వారా IP అడ్రస్‌గా మారుతుంది, తద్వారా బ్రౌజర్ ఏ ఫిజికల్ లేదా వర్చువల్ మెషీన్‌కు కనెక్ట్ అవ్వాలో తెలుసుకుంటుంది.

port అనేది ఆ సర్వర్‌లోని ఖచ్చితమైన డోర్‌వేను (doorway) సూచిస్తుంది. ప్రొడక్షన్ సైట్‌లలో మీరు దీనిని అరుదుగా చూస్తారు ఎందుకంటే వెబ్ సర్వర్లు HTTPS కోసం 443ని డిఫాల్ట్‌గా ఉపయోగిస్తాయి, కానీ లోకల్ డెవలప్‌మెంట్‌లో మీరు నిరంతరం పోర్ట్‌లతో వ్యవహరిస్తారు. localhost:3000 లేదా localhost:5173 వంటి వాటిని గుర్తుంచుకోండి. పోర్ట్ తప్పుగా ఉంటే, కనెక్షన్ టైమ్ అవుట్ అవుతుంది.

తరువాత path వస్తుంది, ఇది /blog/2024/march వంటి నిర్దిష్ట ఫైల్ లేదా రూట్‌ను సూచిస్తుంది. దాని తర్వాత query string ప్రశ్న గుర్తు (?) తర్వాత వస్తుంది మరియు ?category=javascript&sort=date లాగా డేటాను సర్వర్‌కు పంపుతుంది. చివరగా, హ్యాష్ (#) గుర్తుతో సూచించబడే fragment, పేజీలోని ఒక నిర్దిష్ట విభాగాన్ని సూచిస్తుంది. డాక్యుమెంటేషన్ లింక్‌లు మరియు యాక్సెసిబిలిటీ కోసం ఫ్రాగ్మెంట్లు ఉపయోగపడతాయి, ఎందుకంటే అవి డాక్యుమెంట్‌ను రీలోడ్ చేయకుండానే వినియోగదారులను నేరుగా ఒక హెడ్డింగ్‌కు తీసుకువెళ్తాయి.

ఈ నిర్మాణాన్ని అర్థం చేసుకోవడం వల్ల మీరు రూటింగ్ ఎర్రర్‌లను డీబగ్ చేయడానికి, క్లీనర్ APIలను నిర్మించడానికి మరియు నెట్‌వర్క్ లాగ్‌లను సులభంగా చదవడానికి సహాయపడుతుంది.

DOM అనేది మీ రన్‌టైమ్

ఒక కంపైలర్ మీ .c ఫైల్‌ను ముందుగా పార్స్ (parse) చేయకుండా రన్ చేయనట్లే, బ్రౌజర్‌లు కూడా ముడి HTML టెక్స్ట్‌ను నేరుగా రెండర్ చేయవు. బ్రౌజర్ మీ మార్కప్‌ను డౌన్‌లోడ్ చేసినప్పుడు, అది ట్యాగ్‌లు మరియు టెక్స్ట్‌ను Document Object Model (DOM) గా మారుస్తుంది. ఇది ఒక ఇన్-మెమరీ ట్రీ (in-memory tree), ఇక్కడ ప్రతి ఎలిమెంట్ ఒక నోడ్‌గా మారుతుంది, దానిని JavaScript ద్వారా మార్చవచ్చు.

DOM అనేది మీ పేజీ యొక్క సజీవ రూపం. మీరు ఒక హంబర్గర్ ఐకాన్‌ను క్లిక్ చేసినప్పుడు సైడ్ మెనూ స్లైడ్ అవుతుంటే, JavaScript సర్వర్‌ను కొత్త HTML కోసం అడగడం లేదు. అది DOM ట్రీని క్వరీ చేస్తూ, ఒక క్లాస్‌ను మారుస్తూ, CSS ద్వారా ట్రాన్సిషన్‌ను జరిగేలా చేస్తోంది. ఫారమ్ వాలిడేషన్, లైవ్ కౌంటర్లు మరియు ఇన్ఫినిట్ స్క్రోల్‌కు కూడా ఇదే వర్తిస్తుంది. మీరు ఒక ఎలిమెంట్‌ను ఇన్‌స్పెక్ట్ చేసి దాని బ్యాక్‌గ్రౌండ్ కలర్‌ను మారిస్తే, మీరు నేరుగా DOMని ఎడిట్ చేస్తున్నారు తప్ప, డిస్క్‌లో ఉన్న ఫైల్‌ను కాదు.

ఇది చాలా ముఖ్యం, ఎందుకంటే మీరు ఎడిటర్‌లో రాసే నిర్మాణం మరియు బ్రౌజర్ ఉపయోగించే నిర్మాణం వేరుగా ఉండవచ్చు. స్క్రిప్ట్‌లు కొత్త నోడ్‌లను ఇంజెక్ట్ చేయగలవు. థర్డ్-పార్టీ విడ్జెట్‌లు మార్కప్‌ను యాడ్ చేయగలవు. మీరు స్టైలింగ్ లేదా ఈవెంట్ లిజనర్లను డీబగ్ చేస్తున్నప్పుడు, మీరు కేవలం మీ ఒరిజినల్ సోర్స్ కోడ్‌ను మాత్రమే కాకుండా, రెండర్ అయిన DOMని కూడా చూడాలి.

బ్రౌజర్‌లో డేటా ఎక్కడ నిల్వ చేయబడుతుంది

HTTP డిజైన్ పరంగా స్టేట్‌లెస్ (stateless), అంటే ప్రతి రిక్వెస్ట్ మునుపటి సందర్శన గురించి ఎటువంటి జ్ఞాపకం లేకుండా ఒక అపరిచితుడిలా సర్వర్‌కు చేరుతుంది. డేటా నిల్వను (persistence) సృష్టించడానికి, బ్రౌజర్‌లు మీకు మూడు ప్రాథమిక స్టోరేజ్ మెకానిజమ్‌లను అందిస్తాయి, ఒక్కొక్కదానికి వేర్వేరు నియమాలు మరియు కాలపరిమితులు ఉంటాయి.

LocalStorage వినియోగదారు బ్రౌజర్‌ను పూర్తిగా మూసివేసిన తర్వాత కూడా చిన్న మొత్తంలో డేటాను సింపుల్ కీ-వాల్యూ స్ట్రింగ్స్‌గా ఉంచుతుంది. డార్క్-మోడ్ టోగుల్ లేదా కాలైప్స్డ్ సైడ్‌బార్ స్టేట్ వంటి తక్కువ ప్రాధాన్యత కలిగిన ప్రిఫరెన్స్‌ల కోసం ఇది సరైన ప్రదేశం. సెన్సిటివ్ క్రెడెన్షియల్స్ కోసం దీనిని ఉపయోగించవద్దు; ఇది ఆ డొమైన్‌లో నడుస్తున్న ఏ స్క్రిప్ట్‌కైనా అందుబాటులో ఉంటుంది మరియు ఇది తనంతట తానుగా ఎప్పటికీ ముగిసిపోదు (expire అవ్వదు).

SessionStorage API పరంగా చూడటానికి LocalStorage లాగే ఉంటుంది కానీ పనితీరు వేరుగా ఉంటుంది. ఇది డేటాను ఒకే ట్యాబ్‌కు పరిమితం చేస్తుంది. మీ యూజర్ చెకౌట్ ఫ్లోను ఓపెన్ చేసి, ఫారమ్‌లో సగం వివరాలు నింపి, పొరపాటున రిఫ్రెష్ నొక్కితే, SessionStorage ఆ డ్రాఫ్ట్‌ను భద్రపరచగలదు. ట్యాబ్ మూసివేసిన వెంటనే డేటా మాయమవుతుంది. తాత్కాలికమైన, ట్యాబ్-స్పెసిఫిక్ వర్క్‌ఫ్లోల కోసం ఇది LocalStorage కంటే మెరుగైనది.

Cache అనేది ఇమేజెస్, ఫాంట్లు, స్టైల్‌షీట్లు మరియు స్క్రిప్ట్‌ల వంటి పెద్ద అసెట్స్‌ను హ్యాండిల్ చేస్తుంది. ప్రతి సందర్శనలో రెండు మెగాబైట్ల హీరో ఇమేజ్‌ను మళ్ళీ మళ్ళీ ఫెచ్ (fetch) చేసే బదులు, బ్రౌజర్ దాని కాపీని లోకల్‌గా స్టోర్ చేస్తుంది మరియు సర్వర్‌లో కొత్త వెర్షన్ ఉందో లేదో హెడర్‌లను తనిఖీ చేస్తుంది. ఇది మీ సైట్ మళ్ళీ మళ్ళీ సందర్శించినప్పుడు ఎంత వేగంగా లోడ్ అవుతుందో నేరుగా నియంత్రిస్తుంది.

DevTools ఒక రోజువారీ అలవాటుగా

చాలా మంది డెవలపర్లు ఒక వేరియబుల్‌ను లాగ్ చేయడానికి బ్రౌజర్ కన్సోల్‌ను ఓపెన్ చేసి అక్కడితో ఆగిపోతారు. అది ఒక వర్క్‌షాప్‌ను కలిగి ఉండి కేవలం స్క్రూడ్రైవర్‌ను మాత్రమే ఉపయోగించినట్లు అవుతుంది. బ్రౌజర్ DevTools అనేది ఒక ఇంటిగ్రేటెడ్ డీబగ్గింగ్ ఎన్విరాన్మెంట్, మరియు మీరు దానిలోని కనీసం నాలుగు ప్యానెల్‌లను ఉద్దేశపూర్వకంగా ఉపయోగించడం నేర్చుకోవాలి.

Elements ప్యానెల్ లైవ్ DOM మరియు దాని కంప్యూటెడ్ స్టైల్స్‌ను చూపుతుంది. లేఅవుట్ పాడైనప్పుడు, నోడ్‌ను ఇన్‌స్పెక్ట్ చేసి కాస్కేడ్‌ను చూడండి. మీ సోర్స్ కోడ్‌ను తాకకుండానే రియల్ టైమ్‌లో ప్రాపర్టీలను ఆన్ మరియు ఆఫ్ చేయవచ్చు, ఇది ఎడిటర్‌లో ఊహించడం కంటే స్పیسیఫిసిటీ వార్స్‌ను (specificity wars) కనుగొనడాన్ని చాలా వేగవంతం చేస్తుంది.

Console స్టాక్ ట్రేస్‌లతో పాటు ఎర్రర్‌లను చూపుతుంది, కానీ ఇది ఒక REPL కూడా. మీరు సెలెక్టర్లను క్వెరీ చేయవచ్చు, API రెస్పాన్స్‌లను పరీక్షించవచ్చు లేదా ప్రస్తుత పేజీ స్టేట్‌కు అనుగుణంగా ఎక్స్‌ప్రెషన్స్‌ను ఎవాల్యుయేట్ చేయవచ్చు.

Network ప్యానెల్ ప్రతి రిక్వెస్ట్ యొక్క టైమ్‌లైన్‌ను వెల్లడిస్తుంది. మీరు ఫెయిల్ అవుతున్న ఎండ్‌పాయింట్‌ను గుర్తించవచ్చు, API లాటెన్సీని కొలవవచ్చు మరియు ఏ అసెట్ మీ ఫస్ట్ పెయింట్‌ను బ్లాక్ చేస్తోందో తెలుసుకోవచ్చు. యాప్ నెమ్మదిగా ఉందని వినియోగదారుడు చెబితే, సర్వర్ లేదా ఫ్రంటెండ్ వల్ల సమస్య వస్తుందో లేదో నిరూపించడానికి ఇది సరైన చోటు.

Application ప్యానెల్ కుక్కీలు, LocalStorage మరియు SessionStorageలను ఒకే చోట ఇన్‌స్పెక్ట్ చేయడానికి అనుమతిస్తుంది. అథెంటికేషన్‌ను పరీక్షించేటప్పుడు లేదా స్టేట్ బగ్‌ను డీబగ్ చేసేటప్పుడు, మీ మొత్తం బ్రౌజింగ్ హిస్టరీని తొలగించకుండానే, ఒక కొత్త విజిటర్‌ను అనుకరించడానికి మీరు స్టోరేజ్‌ను మాన్యువల్‌గా క్లియర్ చేయవచ్చు.

ఫైల్‌ల గురించి కాకుండా, Git స్టేజ్‌ల గురించి ఆలోచించండి

ఒక ఫైల్‌ను సేవ్ చేయడం అనేది దానికి వెర్షనింగ్ చేయడం వంటిది కాదు. ఏదైనా శాశ్వతంగా రికార్డ్ చేయబడకముందే, మార్పుల గురించి మూడు విభిన్న దశలలో ఆలోచించేలా Git మిమ్మల్ని ప్రేరేపిస్తుంది, అందుకే ఇది సమర్థవంతంగా పనిచేస్తుంది.

మీ working tree అనేది ఒక గందరగోళంగా ఉన్న డెస్క్ వంటిది. మీరు ఫైల్‌లను ఎడిట్ చేస్తారు, چیزలను పాడు చేస్తారు, ప్రయోగాలు చేయడానికి కామెంట్ చేస్తారు మరియు వేరియబుల్స్‌ను రీనేమ్ చేస్తారు. ఇక్కడ ఇంకా ఏదీ ట్రాక్ చేయబడదు. మీరు ఇక్కడ ఒక ఫైల్‌ను డిలీట్ చేసి, దానిని కమిట్ చేయకపోతే, అది పూర్తిగా పోతుంది.

staging area, దీనిని ఇండెక్స్ అని కూడా పిలుస్తారు, ఇక్కడ మీరు దేనిని సేవ్ చేయాలో నిర్ణయిస్తారు. git add ద్వారా, మీరు ఎంచుకున్న మార్పులను ప్రీ-కమిట్ హోల్డింగ్ జోన్‌లోకి పంపిస్తారు. సంబంధం లేని పనులను వేరు చేయడానికి స్టేజింగ్ ఏరియా ఉపయోగపడుతుంది. మీరు ఒక లాగిన్ బగ్‌ను ఫిక్స్ చేసి, అదే సమయంలో ఒక యుటిలిటీ ఫంక్షన్‌ను రీఫ్యాక్టర్ చేస్తే, మీరు వాటిని స్వతంత్రంగా స్టేజ్ చేసి, ఒక అస్పష్టమైన మెసేజ్‌కు బదులుగా రెండు స్పష్టమైన కమిట్ మెసేజ్‌లను వ్రాయవచ్చు.

చివరగా, local repository అసలు చరిత్రను నిల్వ చేస్తుంది. git commit రన్ చేయడం ద్వారా మీ స్టేజ్ చేసిన మార్పులను ఒక యూనిక్ హ్యాష్, మెసేజ్ మరియు టైమ్‌స్టాంప్‌తో ఒక స్నాప్‌షాట్‌గా లాక్ చేస్తారు. రేపు మీరు ఫైల్‌ను ఎంతగా పాడు చేసినా, ఆ స్నాప్‌షాట్‌ను తిరిగి పొందవచ్చు. కమిట్లు చేయడం సులభం, కాబట్టి వాటిని చిన్నవిగా మరియు లాజికల్‌గా ఉంచండి. శుక్రవారం మధ్యాహ్నం రాసిన భారీ కోడ్ డంప్‌ కంటే, చిన్నవిగా మరియు చదవగలిగేలా ఉండే కమిట్ల చరిత్ర చాలా ఉపయోగకరంగా ఉంటుంది.

అసలైన సారాంశం

ఈ అంశాలు కేవలం థియరిటికల్ కంప్యూటర్ సైన్స్ మాత్రమే కాదు. ఇవి ప్రాక్టికల్ కంట్రోల్ సిస్టమ్స్. ఒక URL ఎలా విడిపోతుందో మీకు అర్థమైనప్పుడు, మీరు లాగ్‌లను మెరుగ్గా చదవగలరు. DOMను స్టాటిక్ మార్కప్‌గా కాకుండా ఒక లైవింగ్ రన్‌టైమ్‌గా పరిగణించినప్పుడు, మీ JavaScript మరింత ప్రిడిక్టబుల్‌గా మారుతుంది. మీరు LocalStorage మరియు SessionStorageలను సరిగ్గా ఉపయోగించినప్పుడు, ట్యాబ్‌ల మధ్య స్టేట్ లీక్ అవ్వడం ఆగిపోతుంది. మీరు ఒక ఉద్దేశంతో DevToolsని ఓపెన్ చేసినప్పుడు, బటన్ ఎందుకు నీలం బదులు ఆకుపచ్చగా ఉందో ఊహించడం మానేస్తారు. మరియు మీరు Git యొక్క మూడు-దశల వర్క్‌ఫ్లోను గౌరవించినప్పుడు, అన్‌డూ (undo) బటన్‌కు భయపడటం మానేస్తారు.

ప్రతి ఎడ్జ్ కేస్‌ను ఒకేసారి గుర్తుంచుకోవడానికి ప్రయత్నించకండి. దానికి బదులుగా, ఒక అలవాటును ఏర్పరుచుకోండి: లేఅవుట్ పాడైనప్పుడు పది నిమిషాల పాటు DOMని ఇన్‌స్పెక్ట్ చేయండి, బ్యాకెండ్‌ను నిందించే ముందు నెట్‌వర్క్ ట్యాబ్‌ను తనిఖీ చేయండి మరియు మీరు ఒక స్పష్టమైన ఆలోచనను పూర్తి చేసిన ప్రతిసారీ కమిట్ చేయండి. అప్పుడు మీ అప్లికేషన్‌ల విశ్వసనీయత దానంతట అదే పెరుగుతుంది.