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

ఈ వారాంతపు ఛాలెంజ్‌లో సరిగ్గా ఇదే జరిగింది. ఒక Liquid సింటాక్స్ ఎర్రర్ (syntax error). ట్యాగ్ సరిగ్గా క్లోజ్ చేయబడలేదు. పార్సర్ (parser) ఫైల్‌ను చదువుతూ, ఒక క్లోజింగ్ సీక్వెన్స్ ఎక్కడ ఉంటుందో అక్కడ ఆగిపోయి, ఏమీ కనిపించక ఖాళీగా ఉంది. అంతే, బిల్డ్ ఫెయిల్ అయింది. ఇది అనుభవజ్ఞులైన డెవలపర్లను కూడా నిరుత్సాహపరిచే, మరియు బిగినర్స్‌ను ఆత్మవిశ్వాసం కోల్పోయేలా చేసే రకమైన బగ్. అయితే, ఒకసారి కనిపెట్టిన తర్వాత దీనిని సరిచేయడానికి కేవలం కొన్ని సెకన్లు మాత్రమే పడుతుంది.

లోపల అసలు ఏం జరిగింది?

Liquid అనేది Shopify సృష్టించిన ఒక టెంప్లేటింగ్ లాంగ్వేజ్. ఇది ఇ-కామర్స్ స్టోర్‌ఫ్రంట్‌ల నుండి GitHub Pagesలోని Jekyll-ఆధారిత బ్లాగుల వరకు అన్నింటికీ శక్తినిస్తుంది. ఇది రెండు ప్రధాన సింటాక్స్ ప్యాటర్న్‌లపై ఆధారపడి ఉంటుంది. {{ page.title }} లాగా డబుల్ కర్లీ బ్రేసెస్ (double curly braces) అవుట్‌పుట్‌ను హ్యాండిల్ చేస్తాయి. {% if user %} లేదా {% for item in list %} లాగా కర్లీ బ్రేస్ పర్సంటేజ్ గుర్తులు (curly brace percent signs) లాజిక్ మరియు ఫ్లో కంట్రోల్‌ను హ్యాండిల్ చేస్తాయి.

ప్రతి ఓపెనింగ్ ట్యాగ్‌కు ఒక పార్ట్నర్ ఉండాలి. {% if %} ఉంటే {% endif %} ఉండాలి. {% for %} లూప్‌కు {% endfor %} ఉండాలి. ఒక క్యాప్చర్ బ్లాక్‌కు {% endcapture %} అవసరం. ఇవి కేవలం సూచనలు మాత్రమే కాదు. Liquid ఇంజిన్ మీ టెంప్లేట్‌ను వరుస క్రమంలో చదువుతుంది. అది ఒక ఓపెనింగ్ కన్‌స్ట్రక్ట్‌ను చూసినప్పుడు, దాని అంతర్గత స్టాక్‌లోకి (internal stack) ఒక ఫ్రేమ్‌ను పంపి వేచి ఉంటుంది. ఫైల్ ముగిసినా, లేదా ఆశించిన ట్యాగ్ కనిపించకముందే మరొక ప్రధాన బ్లాక్ క్లోజ్ అయినా, ఇంజిన్ ఎర్రర్‌ను చూపిస్తుంది. ఆ సందేశం తరచుగా చాలా సూటిగా ఉంటుంది: tag was not closed correctly. The system expected a closing sequence. కొన్నిసార్లు మీకు లైన్ నంబర్ కూడా వస్తుంది. కొన్నిసార్లు ఆ లైన్ నంబర్ తప్పు ప్రదేశాన్ని చూపిస్తుంది, ఎందుకంటే పార్సర్ దాని కింద ఉన్నవన్నీ చదివిన తర్వాతే తన పార్ట్నర్ మిస్ అయిందని గ్రహిస్తుంది.

ఒక ఉదాహరణను పరిశీలిద్దాం. మీరు ఇలా వ్రాయవచ్చు:

{% for product in collections.all.products %}
  <div class="card">
    <h2>{{ product.title }}</h2>
    {% if product.available %}
      <span>In stock</span>
    {% endif %}
  </div>
{% endfor %}

మూడు ట్యాగ్‌లు క్లోజ్ చేయబడ్డాయి. ఇప్పుడు మీరు డాక్యుమెంటేషన్ నుండి స్నిప్పెట్‌లను వేగంగా కాపీ మరియు పేస్ట్ చేస్తున్నారని, పొరపాటున చివరి r ను వదిలేశారని ఊహించుకోండి:

{% for product in collections.all.products %}
  <div class="card">
    <h2>{{ product.title }}</h2>
    {% if product.available %}
      <span>In stock</span>
  </div>
{% endfo %}

లేదా బహుశా HTML కోడ్ ఎక్కువగా ఉండటం వల్ల మీరు {% endfor %} ను పూర్తిగా మర్చిపోయి ఉండవచ్చు. ఇంజిన్ {% for % ను చూసి, లూప్‌ను రిజిస్టర్ చేస్తుంది, కానీ దాని జతను ఎప్పటికీ కనుగొనదు. Shopify సందర్భంలో, దీని అర్థం మొత్తం థీమ్ కంపైల్ అవ్వదు. Jekyll లో, GitHub Pages మీకు బిల్డ్ ఫెయిల్యూర్ ఈమెయిల్ పంపిస్తుంది. లోకల్ డెవలప్‌మెంట్‌లో ఒక వింతైన స్టాక్ ట్రేస్ (stack trace) రావచ్చు. ఒక చిన్న ట్యాగ్ మర్చిపోతే మొత్తం పైప్‌లైన్ ఆగిపోతుంది.

చిన్న తప్పుల వల్ల కలిగే ఇబ్బందులు

ఈ ఎర్రర్‌లు ఎంత విసుగు కలిగిస్తాయంటే, అవి తప్పు యొక్క పరిమాణంతో సంబంధం లేకుండా వస్తాయి. మీరు డేటాబేస్‌ను తప్పుగా రూపొందించలేదు. మీరు తప్పు అల్గారిథమ్‌ను ఎంచుకోలేదు. మీరు కేవలం ఒకే ఒక్క క్యారెక్టర్‌ను మర్చిపోయారు. చిన్న తప్పులు పెద్ద బగ్స్‌కు కారణమవుతాయి. ఆ మిస్ అయిన {% endif %} కేవలం ఒక లైన్‌ను మాత్రమే పాడు చేయదు. అది ఒక గొలుసుకట్టు ప్రభావం (cascade) చూపుతుంది. కండిషనల్ ఎక్కడ ముగిసిందో తెలియక పార్సర్ అయోమయానికి గురై, దాని కింద ఉన్న ప్రతి లైన్‌ను తప్పుగా అర్థం చేసుకునే అవకాశం ఉంది. ఇరవై లైన్ల టెంప్లేట్ అకస్మాత్తుగా అరవై లైన్ల ఎర్రర్ అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది, అందులో చాలా వరకు తప్పుదారి పట్టించేవిగా ఉంటాయి.

మీరు ఒకే ఒక్క క్యారెక్టర్‌ను మర్చిపోయినప్పుడు ఈ ఎర్రర్‌లను ఎదుర్కొంటారు, మరియు మీ మెదడు ఆ వాస్తవానికి సిద్ధంగా ఉండదు. మనుషులు కోడ్‌ను ప్యాటర్న్ రికగ్నిషన్ (pattern recognition) ద్వారా చదువుతారు. మనం ఉద్దేశాన్ని (intent) చూస్తాము. if మరియు దానికి సరిపోయే లాజిక్‌ను చూసి, దాని సరిహద్దును మనం ఊహించుకుంటాము. కానీ కంప్యూటర్ అలా ఊహించదు. అది ప్రతి క్యారెక్టర్‌ను పై నుండి కింద వరకు, ఎటువంటి సందేహాలకు తావులేకుండా చదువుతుంది. పార్ట్నర్ ట్యాగ్ కోసం వేచి చూస్తూ ఫైల్ ముగిసినప్పుడు, అది ఆగిపోతుంది. ఆ గ్యాప్‌ను గుర్తించడానికి పార్సర్ లాగా ఆలోచించే డెవలపర్‌గా మారడమే మీ పని.

ఇది కేవలం Liquid కి మాత్రమే పరిమితం కాదు. Python లో ఒక క్లోజ్ చేయని బ్రాకెట్, Markdown లో ఒక మిస్సింగ్ బ్యాక్‌టిక్, JavaScript లో ఒక మర్చిపోయిన బ్రేస్, HTML లో ఒక డాంగ్లింగ్ యాంగిల్ బ్రాకెట్. ఈ వారాంతపు ఛాలెంజ్ Liquid ను ఒక ఉదాహరణగా ఉపయోగించింది, కానీ దీని వెనుక ఉన్న పాఠం మీరు ఉపయోగించే ప్రతి భాషకు వర్తిస్తుంది. సింటాక్స్ అనేది వ్యాకరణం (grammar), మరియు వ్యాకరణం ఎప్పుడూ కఠినంగానే ఉంటుంది.

వాటిని ఎలా గుర్తించాలి

ఇలాంటి సమస్య ఎదురైనప్పుడు, మొదటి స్పందన మొత్తం ఫైల్‌ను కంగారుగా చదవడం. దానికి దూరంగా ఉండండి. కంగారుగా చదవడం వల్ల మీ మెదడు ఆ తప్పును సరిచేసి చూపిస్తుంది (autocorrect), దీనివల్ల మీరు మిస్ అయిన క్యారెక్టర్‌ను సరిగ్గా గమనించలేరు. దానికి బదులుగా, పద్ధతిగా (systematically) పని చేయండి.

మీ ట్యాగ్‌లను ఖచ్చితంగా సరిపోల్చుకోండి. ఫైల్‌ను పరిశీలించి, ప్రతి ఓపెనింగ్ ట్యాగ్‌ను గట్టిగా చెప్పండి లేదా కాగితంపై రాసుకోండి. for కి endfor కావాలి. if కి endif కావాలి. unless కి endunless కావాలి. capture కి endcapture కావాలి. మీరు బ్లాక్‌లను నెస్టెడ్ (nested) గా ఉపయోగిస్తుంటే, మానసికంగా ఒక కౌంటర్‌ను పెంచుకుంటూ వెళ్ళండి. నేను ఒక for లోపల if ని ఓపెన్ చేసినప్పుడు, ఫైల్ ముగిసేలోపు నేను పూర్తి చేయాల్సిన రెండు బాధ్యతలు ఉన్నాయని అర్థం.

మీ ఎడిటర్‌ను ఉపయోగించండి. మీరు క్రమం తప్పకుండా Liquidతో పనిచేస్తుంటే, గ్రామర్‌ను గుర్తించే సింటాక్స్ హైలైటర్‌ను ఇన్‌స్టాల్ చేసుకోండి. Visual Studio Code లో Liquid ట్యాగ్‌లను డిమ్ చేయడానికో లేదా కలర్-కోడ్ చేయడానికో ఎక్స్‌టెన్షన్లు ఉన్నాయి. క్లోజింగ్ ట్యాగ్ తప్పుగా ఉన్నప్పుడు, కలర్ ప్యాటర్న్ మారుతుంది. మీరు కంపైల్ చేసే ముందే కొన్ని లించర్లు (linters) క్లోజ్ చేయని బ్లాక్‌లను గుర్తించగలవు. Vim లేదా Neovim లో, vim-liquid వంటి ప్లగిన్‌ను ఉపయోగించడం లేదా మ్యాచింగ్ ట్యాగ్‌లను హైలైట్ చేయడానికి Tree-sitter ని కాన్ఫిగర్ చేయడం గురించి ఆలోచించండి. ఈ సాధనాలు ఆలోచించాల్సిన అవసరాన్ని తొలగించవు, కానీ పొరపాట్లను స్పష్టంగా చూపిస్తాయి.

మీ టెంప్లేట్‌ను బైనరీ సెర్చ్ చేయండి. ఎర్రర్ మెసేజ్ లైన్ 200ని చూపిస్తున్నా అక్కడ ఏమీ తప్పుగా అనిపించకపోతే, అసలు సమస్య బహుశా దాని పైన ఎక్కడో ఉండవచ్చు. టెంప్లేట్‌లోని దిగువ సగభాగాన్ని కామెంట్ చేయండి. అది బిల్డ్ అవుతుందా? అవును అయితే, ఎర్రర్ కామెంట్ చేసిన భాగంలో ఉంది. అందులో సగం భాగాన్ని అన్‌కామెంట్ చేయండి. తప్పుగా ఉన్న బ్లాక్‌ను గుర్తించే వరకు ఇదే పద్ధతిని పునరావృతం చేయండి. ఇది నెమ్మదిగా అనిపించవచ్చు, కానీ మీ అసహనం పెరుగుతున్న సమయంలో అదే రెండు వందల లైన్లను ఆరు సార్లు చదవడం కంటే ఇది వేగవంతమైన పద్ధతి.

మీ ఇన్‌క్లూడ్స్‌ను (includes) తనిఖీ చేయండి. Liquid, {% include %} లేదా {% render %} ద్వారా మాడ్యులర్ ఫ్రాగ్మెంట్లను సపోర్ట్ చేస్తుంది. క్లోజ్ చేయని ట్యాగ్ మెయిన్ ఫైల్‌లో ఉండకపోవచ్చు. అది పేరెంట్ టెంప్లేట్ నుండి వచ్చే ఏదైనా స్నిప్పెట్ (snippet) లో ఉండవచ్చు. ఇక్కడే వెర్షన్ కంట్రోల్ (version control) మీ సమయాన్ని మరియు మానసిక ప్రశాంతతను కాపాడుతుంది. ఒక 'diff' రన్ చేయండి. చివరిసారి విజయవంతంగా బిల్డ్ అయినప్పటి నుండి ఏము değişిందో చూడండి. తరచుగా సమాధానం ఎరుపు మరియు ఆకుపచ్చ రంగులలో స్పష్టంగా కనిపిస్తుంది.

ఇండెంటేషన్ (Indentation) అనేది డాక్యుమెంటేషన్ వంటిది. మీ {% if %} కాలమ్ సున్నా వద్ద ప్రారంభమై, దానికి సంబంధించిన {% endif %} ఏదైనా నెస్టెడ్ స్ట్రక్చర్‌లో ఇండెంటేషన్ చేయబడి ఉంటే, విజువల్ అలైన్‌మెంట్ ద్వారా ఆ తేడాను మీరు సులభంగా గుర్తించవచ్చు. మీ HTML మరియు Liquid ట్యాగ్‌లు ఒకే ఇండెంటేషన్ విధానాన్ని కలిగి ఉంటే, తప్పుగా ఉన్న ట్యాగ్‌ను మీ కళ్ళు వెంటనే పసిగడతాయి.

నిజమైన పాఠ్యాంశం

వీకెండ్ ఛాలెంజ్‌లు ముఖ్యమైనవి ఎందుకంటే అవి మీరు నిజంగా పనిచేసే పరిస్థితులను ప్రతిబింబిస్తాయి. అక్కడ మిమ్మల్ని ఎవరూ గమనించరు. ఎలాంటి డెడ్‌లైన్ ఒత్తిడి ఉండదు. మీరు నైపుణ్యం కోసం లేదా వినోదం కోసం కోడింగ్ చేస్తున్నారు, అప్పుడే ఒక చిన్న తప్పు మిమ్మల్ని ఆపేస్తుంది. ఆ క్షణమే అసలైన పాఠం. డీబగ్గింగ్ గురించి చదవడం ద్వారా మీరు డీబగ్గింగ్ నేర్చుకోలేరు. మీరు బయట తిరగాలనుకుంటున్న సమయంలో, ఒక విఫలమైన బిల్డ్‌ను నిశితంగా పరిశీలిస్తూ, ఎర్రర్ మెసేజ్‌ను విమర్శగా కాకుండా డేటాగా పరిగణించడం ద్వారా మీరు నేర్చుకుంటారు.

ఈ ఎర్రర్‌లను సరిదిద్దడం నేర్చుకోండి, ఎందుకంటే ఇవి ఎప్పటికీ పూర్తిగా పోవు. కెరీర్‌లో పదేళ్ల తర్వాత కూడా, శుక్రవారం రాత్రి డిప్లాయ్ చేసేటప్పుడు మీరు క్లోజింగ్ ట్యాగ్‌ను మర్చిపోవచ్చు. జూనియర్ మరియు సీనియర్ డెవలపర్ మధ్య తేడా తప్పులు చేయకపోవడం కాదు, తప్పులను ఎంత వేగంగా సరిదిద్దగలరు అనేదే. సీనియర్ సింటాక్స్ ఎర్రర్‌ను చూసి, ఆ ప్యాటర్న్‌ను గుర్తించి, స్పష్టమైన కారణాలను తనిఖీ చేసి ముందుకు వెళ్తారు. జూనియర్ మొత్తం టూల్‌చైన్ (toolchain) పాడైపోయిందేమో అని అనుమానిస్తారు. పునరావృతం చేయడం వల్ల ఆ ప్రతిచర్య (reflex) అలవడుతుంది.

కమ్యూనిటీ అంశం దీనిని వేగవంతం చేస్తుంది. వీకెండ్‌లో చాలా మంది ఒకే విఫలమైన టెంప్లేట్‌ను పరిష్కరించడానికి ప్రయత్నించినప్పుడు, ఏ ఒక్క డెవలపర్ కూడా ఒంటరిగా చూడలేని ప్యాటర్న్‌లు బయటపడతాయి. ఎర్రర్ కేవలం నెస్టెడ్ for లూప్‌లలో మాత్రమే వస్తుందని ఎవరో గమనిస్తారు. సాధారణ Liquid ట్యాగ్ మిస్‌మ్యాచ్‌లను వెతకడానికి ఎవరో ఒకరు షెల్ స్క్రిప్ట్‌ను పంచుకుంటారు. జ్ఞానం దాచుకున్నప్పుడు కాదు, పంచుకున్నప్పుడే పెరుగుతుంది. మీరు ఈ నిర్దిష్ట ఛాలెంజ్ యొక్క పూర్తి వివరాలను మరియు ఇతరులు దానిని ఎలా పరిష్కరించారో Dev.to పోస్ట్‌లో చదవవచ్చు. ఒకవేళ మీరు కూడా అదే సమస్యలతో పోరాడుతున్న వ్యక్తులతో చర్చించాలనుకుంటే, Telegramలో ఒక ఆప్షనల్ లెర్నింగ్ కమ్యూనిటీ ఉంది, అక్కడ ఈ చర్చలు వీకెండ్ తర్వాత కూడా కొనసాగుతాయి.

సారాంశం

సింటాక్స్ ఎర్రర్‌లను మీ అసలు పనికి ఆటంకాలుగా భావించకండి. అవి కూడా మీ పనిలో ఒక ముఖ్యమైన భాగమే. ఈ వీకెండ్ బిల్డ్‌ను విఫలం చేసిన Liquid ట్యాగ్ అనేది కేవలం టెంప్లేట్ ఇంజిన్ గురించి మాత్రమే కాదు. మీ మెదడు ఊహించాలనుకున్నప్పుడు, ఖచ్చితత్వంతో చదవడం కోసం మిమ్మల్ని మీరు శిక్షణ ఇచ్చుకోవడం గురించి. మీరు గత వారం రాసిన ఫైల్‌ను తెరవండి. మీరు ఓపెన్ చేసిన ట్యాగ్‌లను వెతకండి. ప్రతి ట్యాగ్‌కు సరైన క్లోజింగ్ ఉందో లేదో చూసుకోండి. మీ లూప్‌లను క్లోజ్ చేయండి. కండిషనల్స్‌ను పూర్తి చేయండి. ఆపై, ఒక్కో కరెక్ట్ క్యారెక్టర్‌తో మళ్ళీ బిల్డింగ్ మొదలుపెట్టండి.