మీరు రోజంతా కోడ్ రాస్తూ గడుపుతుంటే, మీరు రెండు వాతావరణాలలో (environments) సమయాన్ని గడుపుతారు: మీ పని నిజంగా నడిచే బ్రౌజర్ విండో, మరియు అక్కడికి చేరుకోవడానికి మీరు తీసుకున్న ప్రతి నిర్ణయాన్ని గుర్తుంచుకునే Git రిపోజిటరీ. ఒకటి బహిరంగంగా మరియు అనిశ్చితంగా ఉంటుంది, మరొకటి ప్రైవేట్గా మరియు ఖచ్చితత్వంతో కూడి ఉంటుంది. ఈ రెండింటినీ అర్థం చేసుకోవడం అనేది ఐచ్ఛికం కాదు. బ్రౌజర్ యొక్క అంతర్గత యంత్రాంగం మరియు Git యొక్క స్టేజింగ్ లాజిక్పై పట్టు సాధించడం వల్ల, ఊహలతో పనిచేసే డెవలపర్లకు మరియు ఏదైనా ఎందుకు విఫలమైంది, ఎప్పుడు మారింది అనే విషయంపై ఖచ్చితమైన అవగాహన ఉన్న డెవలపర్లకు మధ్య తేడా తెలుస్తుంది.
URL నిర్మాణం (Anatomy)
ప్రతి వెబ్సైట్ సందర్శన సరళంగా కనిపించే అక్షరాల సమూహంతో మొదలవుతుంది, కానీ అందులో ఖచ్చితమైన సూచనలు ఉంటాయి. https://shop.example.com:443/products/id/42?sort=price#reviews వంటి URL నిజానికి విడివిడి దిశల (directions) సమూహం.
protocol ముందు భాగంలో ఉండి సంభాషణ యొక్క నియమాలను నిర్ణయిస్తుంది. మీరు https:// అని చూసినప్పుడు, ఏదైనా పంపే ముందు కనెక్షన్ను ఎన్క్రిప్ట్ చేయాలని బ్రౌజర్కు తెలుస్తుంది. domain (shop.example.com) అనేది సర్వర్ యొక్క అసలు నెట్వర్క్ అడ్రస్కు మనుషులు చదవగలిగే పేరు. మీ కంప్యూటర్ ఎక్కడికి కనెక్ట్ అవ్వాలో తెలుసుకోవడానికి ఇది DNS ద్వారా పరిష్కరించబడుతుంది (resolved). port (:443) అనేది ఆ సర్వర్లోని నిర్దిష్ట ద్వారం. బ్రౌజర్లు HTTPS కోసం 443 మరియు HTTP కోసం 80 అని ఊహిస్తాయి కాబట్టి ఇది తరచుగా కనిపించదు, కానీ మెకానిక్స్లో ఇది ఎప్పుడూ ఉంటుంది. path (/products/id/42) అనేది ఫోల్డర్ల వలె అమర్చబడిన, మీకు ఏ రిసోర్స్ కావాలో సర్వర్కు చెబుతుంది. query string (?sort=price) డైనమిక్ డేటాను కీ-వాల్యూ (key-value) జంటలుగా అందిస్తుంది, ఇది ఫిల్టర్లు, సెర్చ్ టర్మ్స్ లేదా పేజినేషన్ కోసం సరైనది. చివరగా, fragment (#reviews) పేజీలోని ఒక నిర్దిష్ట ఎలిమెంట్ IDని సూచిస్తుంది. ఇది ఎప్పుడూ సర్వర్కు చేరుకోదు; పేజీ వచ్చిన తర్వాత బ్రౌజర్ దీనిని పూర్తిగా క్లయింట్ సైడ్ (client side) లోనే హ్యాండిల్ చేస్తుంది.
ఫ్రాగ్మెంట్ను చివరనే ఉంచండి. మీరు దానిని క్వెరీ స్ట్రింగ్ కంటే ముందుకి మారిస్తే, లింక్ పనిచేయదు, ఎందుకంటే హ్యాష్ (#) తర్వాత ఉన్నవన్నీ సర్వర్ సూచనలుగా కాకుండా క్లయింట్-సైడ్ కాంటెక్స్ట్గా పరిగణించబడతాయి.
DOM: మీ పేజీ యొక్క లైవ్ నరాల వ్యవస్థ (Nervous System)
నెట్వర్క్ ద్వారా వచ్చే HTML కేవలం టెక్స్ట్ మాత్రమే. బ్రౌజర్ ఆ టెక్స్ట్ను చదివి Document Object Model (DOM)ను నిర్మిస్తుంది, ఇది nodes అని పిలువబడే ఆబ్జెక్ట్ల యొక్క లైవ్, చెట్టు ఆకారపు (tree-shaped) మ్యాప్. ఎలిమెంట్ ట్యాగ్లు ఎలిమెంట్ నోడ్లుగా మారుతాయి. ట్యాగ్ల మధ్య ఉన్న టెక్స్ట్ టెక్స్ట్ నోడ్లుగా మారుతుంది. ఆట్రిబ్యూట్లు మరియు కామెంట్లు కూడా వాటి స్వంత నోడ్ రకాలను కలిగి ఉంటాయి. ఈ ట్రీ అనేది ఒక స్టాటిక్ డయాగ్రామ్ కాదు. ఇది జావాస్క్రిప్ట్ (JavaScript) వెంటనే చదవగలిగే మరియు తిరిగి వ్రాయగలిగే ఒక లైవ్ డేటా స్ట్రక్చర్.
మీ స్క్రిప్ట్ document.getElementByIdని రన్ చేసినప్పుడు లేదా classNameని మార్చినప్పుడు, మీరు ఈ ట్రీలోకి ప్రవేశించి దానిని మారుస్తున్నారు (mutating). బ్రౌజర్ దానిని గమనిస్తుంది మరియు కొత్త పేజీ కోసం సర్వర్ను అడగకుండానే స్క్రీన్ను రీపెయింట్ (repaint) చేస్తుంది. ఆధునిక వెబ్ యాప్లను సాధ్యం చేసే శక్తి ఇదే, కానీ దీనికి ఒక ధర ఉంది. మీరు ప్రతిసారీ DOMని తాకినప్పుడు, బ్రౌజర్ లేఅవుట్ మరియు స్టైల్స్ను తిరిగి లెక్కించవచ్చు (recalculate). వందలాది ఐటమ్స్తో ఒక టైట్ లూప్లో అలా చేస్తే, మీ ఫ్రేమ్ రేట్ పడిపోతుంది. మీరు ఒక పెద్ద లిస్ట్ను ఇన్సర్ట్ చేయాలనుకుంటే, ముందుగా మెమరీలో ఒక DocumentFragmentని నిర్మించి, ఆపై దానిని ఒకేసారి యాపెండ్ (append) చేయండి. మీ రీడ్స్ మరియు రైట్స్ను (reads and writes) బ్యాచ్గా చేయండి. DOM శక్తివంతమైనది, కానీ అది ఉచితం కాదు.
బ్రౌజర్ స్టోరేజ్: మూడు సాధనాలు, మూడు పనులు
ఆధునిక బ్రౌజర్లు వినియోగదారుని మెషీన్పై నేరుగా డేటాను నిల్వ చేయడానికి అనుమతిస్తాయి, మరియు సరైన పద్ధతిని ఎంచుకోవడం ముఖ్యం, ఎందుకంటే ప్రతిదీ వేర్వేరు కాలపరిమితి (lifespan) మరియు సామర్థ్యం (capacity) కోసం రూపొందించబడింది.
LocalStorage అత్యంత సరళమైనది. మీ కోడ్ లేదా వినియోగదారు దానిని తొలగించే వరకు ఇది తక్కువ మొత్తంలో స్ట్రింగ్ డేటాను శాశ్వతంగా సేవ్ చేస్తుంది. డార్క్-మోడ్ ప్రిఫరెన్స్ (dark-mode preference) దీనికి ఒక క్లాసిక్ ఉదాహరణ. ఎవరైనా స్విచ్ మార్చినప్పుడు, LocalStorageకి "theme": "dark" అని వ్రాయండి. తదుపరి సందర్శనలో, మొదటి పెయింట్ (first paint) కంటే ముందే దానిని తిరిగి చదివి క్లాస్ను వర్తింపజేయండి. ఇది సింక్రోనస్ (synchronous) మరియు ఒరిజిన్కు పరిమితం (scoped to the origin), ఇది దీనిని సులభతరం చేస్తుంది కానీ మీరు అందులో సెన్సిటివ్ టోకెన్లను ఎప్పుడూ ఉంచకూడదు అని కూడా అర్థం. మీ పేజీలో నడుస్తున్న ఏ స్క్రిప్ట్ అయినా దీనిని చదవగలదు.
SessionStorage అదే కీ-వాల్యూ (key-value) APIని ఉపయోగిస్తుంది, కానీ దాని కాలపరిమితి బ్రౌజర్ ట్యాబ్కు అనుసంధానించబడి ఉంటుంది. ఇది పేజీ రిఫ్రెష్లను తట్టుకుంటుంది, ఇది తాత్కాలిక ఫారమ్ ప్రోగ్రెస్ కోసం సరైనది. ఒక వినియోగదారు సుదీర్ఘమైన సర్వేను నింపుతున్నప్పుడు, పొరపాటున రీలోడ్ నొక్కినప్పటికీ, మీరు వాటిని SessionStorageలో దాచడం వల్ల వారు తమ సమాధానాలను ఇంకా చూడగలుగుతున్నారని ఊహించుకోండి. వారు ట్యాబ్ను మూసివేసినప్పుడు, డేటా ఆటోమేటిక్గా క్లీన్ అయిపోతుంది.
Cache API వేరే స్థాయి పని చేస్తుంది. ఇది రిక్వెస్ట్ మరియు రెస్పాన్స్ జంటలను (pairs) నిల్వ చేస్తుంది, సాధారణంగా ఇమేజ్లు, ఫాంట్లు మరియు స్క్రిప్ట్ బండిల్స్ వంటి పెద్ద స్టాటిక్ అసెట్స్ను హోల్డ్ చేయడానికి సర్వీస్ వర్కర్ల ద్వారా దీనిని ఉపయోగిస్తారు. ప్రతిసారీ నెట్వర్క్ ద్వారా అదే హీరో ఇమేజ్ లేదా React బండిల్ను ఫెచ్ చేసే బదులు, మీ యాప్ నేరుగా డిస్క్ క్యాచీ నుండి దానిని అందించగలదు. ఆఫ్లైన్ సామర్థ్యం ఉన్న సైట్లు మళ్ళీ సందర్శించినప్పుడు తక్షణమే లోడ్ అవ్వడానికి ఇదే కారణం. ఇది మిగిలిన రెండింటిలా సాధారణ కీ-వాల్యూ స్టోర్ కాదు; ఇది HTTP రెస్పాన్స్ల కోసం ప్రత్యేకంగా రూపొందించబడింది.
ఒక ముఖ్యమైన నియమం: LocalStorageలో ఎప్పుడూ అథెంటికేషన్ టోకెన్లను లేదా వ్యక్తిగత గుర్తింపు వివరాలను (personal identifiers) నిల్వ చేయకండి. XSS దాడులు వాటిని మిల్లీసెకన్లలో దొంగిలించగలవు. సెన్సిటివ్ డేటా కోసం HttpOnly, Secure, SameSite కుకీలను ఉపయోగించండి, మరియు అవి నిజంగా సెట్ చేయబడ్డాయో లేదో తనిఖీ చేయడానికి Application ట్యాబ్లో వాటిని పరిశీలించండి.
Browser DevTools: ఊహించడం మానేయండి, చదవడం ప్రారంభించండి
DevTools ప్యానెల్ కేవలం ఎరుపు రంగులో కనిపించే కన్సోల్ ఎర్రర్లను సరిచేయడానికి మాత్రమే కాదు. బ్రౌజర్లో జరుగుతున్న ప్రతిదానిని విశ్లేషించడానికి ఇది మీ డయాగ్నోస్టిక్ ల్యాబ్.
Elements ప్యానెల్లో, మీరు DOM ట్రీపై హోవర్ చేస్తే, పేజీలో నోడ్స్ రియల్ టైమ్లో హైలైట్ అవ్వడాన్ని చూడవచ్చు. మీ సోర్స్ కోడ్ను తాకకముందే మార్జిన్ లేదా రంగును పరీక్షించడానికి Styles ప్యాన్లో నేరుగా CSS విలువలను ఎడిట్ చేయవచ్చు. Console అనేది మీ స్క్రాచ్ప్యాడ్. ఆబ్జెక్ట్లను లాగ్ చేయండి, regexని పరీక్షించండి లేదా ప్రస్తుత పేజీ స్టేట్పై లైవ్గా ఫంక్షన్లను కాల్ చేయండి. ఒక వేరియబుల్ సరిగ్గా పనిచేయకపోతే, దాని పేరు టైప్ చేసి నేరుగా పరిశీలించండి.
Network ట్యాబ్ పెర్ఫార్మెన్స్ గురించి నిజమైన విషయాన్ని తెలియజేస్తుంది. ఆ నెమ్మదైన పేజీకి కారణం మీ JavaScript కాకపోవచ్చు. అది స్పందించడానికి నాలుగు సెకన్ల సమయం తీసుకుంటున్న థర్డ్-పార్టీ ఫాంట్ కావచ్చు, లేదా మీరు కంప్రెస్ చేయని రెండు మెగాబైట్ల JSON పేలోడ్ను తిరిగి ఇచ్చే API ఎండ్పాయింట్ కావచ్చు. మీరు ప్రతి రిక్వెస్ట్ యొక్క పూర్తి లైఫ్సైకిల్ను ట్రాస్ చేయవచ్చు, మీ స్వంత API కాల్స్ చూడటానికి Fetch/XHR ద్వారా ఫిల్టర్ చేయవచ్చు మరియు క్యాషింగ్ డైరెక్టివ్లు పాటించబడుతున్నాయో లేదో చూడటానికి హెడర్లను పరిశీలించవచ్చు. అదే సమయంలో, Application ట్యాబ్ మీ స్టోరేజీని ఆడిట్ చేయడానికి అనుమతిస్తుంది. LocalStorage కీ-వాల్యూ జంటలను చూడండి, వ్యక్తిగత కుకీలు మరియు వాటి ఫ్లాగ్లను పరిశీలించండి, మరియు మీ సర్వీస్ వర్కర్ నిజంగా రిజిస్టర్ అయి ఉందో లేదో మరియు మీరు ఆశించిన విధంగా క్యాషింగ్ చేస్తుందో లేదో ధృవీకరించండి.
Git Workflow: మూడు బకెట్లు
Git అనేది బ్యాకప్ సాఫ్ట్వేర్ కాదు. ఇది చరిత్రను క్రమబద్ధీకరించడానికి (curating history) ఉపయోగించే ఒక సాధనం. దానిని ఆ విధంగా ఆలోచించడం మీరు దానిని ఉపయోగించే విధానాన్ని మారుస్తుంది. Git మీ ప్రాజెక్ట్ను మూడు విభిన్న ప్రాంతాల ద్వారా నిర్వహిస్తుంది.
working tree అనేది మీ గందరగోళంగా ఉన్న డెస్క్ వంటిది. మీరు ఇక్కడ ఫైల్లను ఎడిట్ చేస్తారు, ఫోల్డర్లను తొలగిస్తారు మరియు ప్రయోగాలు చేస్తారు. ఇక్కడ ఏదీ ఇంకా సురక్షితం కాదు. staging area, లేదా index, అనేది తదుపరి స్నాప్షాట్లో ఏది వెళ్లాలో మీరు ఎంపిక చేసుకునే చోటు. ఒక ఫైల్పై git add రన్ చేయడం వల్ల అది working tree నుండి staging లోకి మారుతుంది. ఇది మీకు ఖచ్చితత్వాన్ని (precision) ఇస్తుంది. మీరు పది ఫైల్లను సవరించవచ్చు, వాటిలో కేవలం మూడు మాత్రమే స్టేజ్ చేయవచ్చు మరియు ఒక మార్పును మాత్రమే వివరించే క్లీన్, లాజికల్ స్నాప్షాట్ను కమిట్ చేయవచ్చు. మీరు git commit రన్ చేసినప్పుడు local repository స్నాప్షాట్ను అందుకుంటుంది. ఆ సమయంలో, Git స్టేజ్ చేయబడిన ఫైల్ల పూర్తి స్థితిని మీ మెసేజ్తో పాటు రికార్డ్ చేస్తుంది, తద్వారా మీరు తర్వాత తిరిగి వెళ్లగలిగే శాశ్వత చెక్పాయింట్ను సృష్టిస్తుంది.
మీరు దేనినైనా స్టేజ్ చేయడానికి ముందు, git status రన్ చేయండి. ఇది మీరు మర్చిపోయి ఉండవచ్చు అని అనుకునే అన్ట్రాక్డ్ ఫైల్లు మరియు సవరించిన ఫైల్లను మీకు చూపిస్తుంది. ఈ తనిఖీని మీరు వదిలేస్తే, తాత్కాలిక బిల్డ్ ఆర్టిఫాక్ట్లు, లాగ్ ఫైల్లు లేదా ఎన్విరాన్మెంట్ ఫైల్లు కమిట్లలోకి లీక్ అయ్యే అవకాశం ఉంది. ఒక మంచి .gitignore ఫైల్ సహాయపడుతుంది, కానీ git status అనేది మీ చివరి ప్రీ-ఫ్లైట్ ఇన్స్పెక్షన్.
తప్పులు చరిత్రగా మారకముందే వాటిని సరిదిద్దుకోవడానికి స్టేజింగ్ కూడా మీకు అనుమతిస్తుంది. మీరు ఒక ఫైల్ను తప్పుగా జోడించినట్లయితే git restore --staged తో దానిని అన్స్టేజ్ చేయండి. మీ కమిట్ మెసేజ్ చాలా అస్పష్టంగా ఉంటే దానిని తిరిగి రాయండి. మీ కమిట్లు కేవలం మీరు చేసిన ప్రతి కీస్ట్రోక్ యొక్క ముడిపడని డేటా లాగా కాకుండా, ఒక స్పష్టమైన కథను చెప్పేలా ఉండటానికి స్టేజింగ్ ఏరియా ఉనికిలో ఉంది.
అంతా కలిపి చూస్తే
ఈ రెండు డొమైన్లు, బ్రౌజర్ మరియు Git, మీ వర్క్ఫ్లోలోని దాదాపు ప్రతి గంటను ప్రభావితం చేస్తాయి. బ్రౌజర్లో, రిక్వెస్ట్లు ఎలా పరిష్కరించబడతాయి (resolve), మీ స్క్రిప్ట్లకు DOM ఎలా స్పందిస్తుంది మరియు క్లయింట్లో డేటా ఎక్కడ ఉంటుంది అనేది మీరు అర్థం చేసుకోవాలి. సీక్రెట్ల కోసం LocalStorageని దుర్వినియోగం చేయడం లేదా అన్బ్యాచ్డ్ అప్డేట్లతో DOMని ఎక్కువగా వాడటం వల్ల అప్లికేషన్లు బలహీనంగా మరియు నెమ్మదిగా మారుతాయి. మీ టెర్మినల్లో, Gitని కేవలం ఒక సేవ్ బటన్లా పరిగణించడం వల్ల మీ భవిష్యత్తు స్వయంగా చదవలేనంత గందరగోళమైన చరిత్ర ఏర్పడుతుంది. స్టేజింగ్ ఏరియాను ఉద్దేశపూర్వకంగా ఉపయోగించండి. మీ స్టేటస్ను తనిఖీ చేయండి. 'ఏమిటి' అని మాత్రమే కాకుండా 'ఎందుకు' అని వివరించే కమిట్లను రాయండి.
ఈ రెండు ప్రపంచాలను కలిపే అలవాటు తనిఖీ చేయడం (inspection). APIని నిందించే ముందు URLలను పరిశీలించండి. ఫ్రేమ్వర్క్ను జోడించే ముందు DOMని ప్రొఫైల్ చేయండి. పెద్ద సర్వర్ను కొనే ముందు Network ట్యాబ్ను చదవండి. తప్పును ఖాయం చేసే ముందు git statusను రివ్యూ చేయండి. సాధనాలు ఇప్పటికే మీ స్క్రీన్పై ఉన్నాయి. వాటిని నిజాయితీగా చదవడం నేర్చుకోవడమే మీ పని.