సుమారు 15 సంవత్సరాల క్రితం, నేను ట్రావెల్ ఏజెంట్లు, విమానాశ్రయ కార్మికులు మరియు విమానయాన సంస్థల కోసం యాప్లను రూపొందించిన కంపెనీలో పని చేస్తున్నాను. మేము UI భాగాలు మరియు సింగిల్-పేజీ యాప్ సామర్థ్యాల కోసం మా స్వంత అంతర్గత ఫ్రేమ్వర్క్ను కూడా రూపొందించాము. మేము ప్రతిదానికీ భాగాలను కలిగి ఉన్నాము: ఫీల్డ్లు, బటన్లు, ట్యాబ్లు, పరిధులు, డేటాటేబుల్లు, మెనూలు, డేట్పికర్లు, ఎంపికలు మరియు బహుళ ఎంపికలు. మేము కూడా ఒక DIV భాగం కలిగి. మా div కాంపోనెంట్ గొప్పగా ఉంది, ఇది అన్ని బ్రౌజర్లలో గుండ్రని మూలలను చేయడానికి మాకు అనుమతినిచ్చింది, ఇది నమ్మినా నమ్మకపోయినా, ఆ సమయంలో చేయడం అంత తేలికైన విషయం కాదు.
JS, Ajax మరియు డైనమిక్ HTML మనలను భవిష్యత్తులోకి తీసుకువచ్చిన విప్లవంగా గుర్తించబడినప్పుడు మా చరిత్రలో మా పని జరిగింది. అకస్మాత్తుగా, మేము ఒక పేజీని డైనమిక్గా అప్డేట్ చేయగలము, సర్వర్ నుండి డేటాను పొందుతాము మరియు ఇతర పేజీలకు నావిగేట్ చేయకుండా నివారించవచ్చు, ఇది నెమ్మదిగా కనిపించింది మరియు రెండు పేజీల మధ్య స్క్రీన్పై పెద్ద తెల్లని దీర్ఘచతురస్రాన్ని చూపుతుంది. జెఫ్ అట్వుడ్ (స్టాక్ఓవర్ఫ్లో వ్యవస్థాపకుడు)చే ప్రసిద్ధి చెందిన ఒక పదబంధం ఉంది: "జావాస్క్రిప్ట్లో వ్రాయగలిగే ఏదైనా అప్లికేషన్ చివరికి జావాస్క్రిప్ట్లో వ్రాయబడుతుంది." - జెఫ్ అట్వుడ్
ఆ సమయంలో మాకు, వాస్తవానికి వెళ్లి ఆ యాప్లను సృష్టించడానికి ఇది ధైర్యంగా అనిపించింది. JSతో ప్రతిదీ చేయడానికి ఇది బ్లాంకెట్ ఆమోదం వలె భావించబడింది. కాబట్టి మేము JSతో ప్రతిదీ చేసాము మరియు ఇతర మార్గాలను పరిశోధించడానికి మేము నిజంగా సమయం తీసుకోలేదు. HTML మరియు CSS ఏమి చేయగలదో సరిగ్గా తెలుసుకోవడానికి మేము నిజంగా ప్రోత్సాహాన్ని అనుభవించలేదు. మేము నిజంగా వెబ్ని పూర్తిగా అభివృద్ధి చెందుతున్న యాప్ ప్లాట్ఫారమ్గా గుర్తించలేదు. ముఖ్యంగా బ్రౌజర్ సపోర్ట్ విషయానికి వస్తే, మేము దీన్ని ఎక్కువగా పని చేయాల్సిన అవసరం ఉందని మేము ఎక్కువగా చూశాము. పనులను పూర్తి చేయడానికి మేము దాని వద్ద మరింత JSని విసిరివేయవచ్చు. వెబ్ ఎలా పని చేస్తుంది మరియు ప్లాట్ఫారమ్లో అందుబాటులో ఉన్న వాటి గురించి మరింత తెలుసుకోవడానికి సమయం తీసుకుంటే నాకు సహాయపడుతుందా? ఖచ్చితంగా, నేను బహుశా నిజంగా అవసరం లేని కోడ్ సమూహాన్ని షేవ్ చేసి ఉండవచ్చు. కానీ, ఆ సమయంలో, బహుశా చాలా కాదు. మీరు చూడండి, బ్రౌజర్ తేడాలు అప్పట్లో చాలా ముఖ్యమైనవి. ఇది ఇంటర్నెట్ ఎక్స్ప్లోరర్ ఇప్పటికీ ప్రధాన బ్రౌజర్గా ఉన్న సమయం, ఫైర్ఫాక్స్ రెండవ స్థానంలో ఉంది, అయితే క్రోమ్ వేగంగా జనాదరణ పొందడం వల్ల మార్కెట్ వాటాను కోల్పోవడం ప్రారంభించింది. క్రోమ్ మరియు ఫైర్ఫాక్స్ వెబ్ ప్రమాణాలను అంగీకరించడంలో చాలా మంచివి అయినప్పటికీ, మా యాప్లు రన్ అవుతున్న పరిసరాలను బట్టి మనం చాలా కాలం పాటు IE6కి మద్దతు ఇవ్వవలసి ఉంటుంది. మేము IE8కి మద్దతు ఇవ్వడానికి అనుమతించబడినప్పటికీ, మేము ఇప్పటికీ బ్రౌజర్ల మధ్య చాలా తేడాలను ఎదుర్కోవలసి వచ్చింది. అంతే కాదు, ఆ సమయంలోని వెబ్లో ప్లాట్ఫారమ్లో నిర్మించబడిన అనేక సామర్థ్యాలు లేవు.
నేటికి వేగంగా ముందుకు సాగండి. విషయాలు విపరీతంగా మారాయి. ఇంతకుముందు కంటే ఈ సామర్థ్యాలు మనకు ఎక్కువగా ఉండటమే కాకుండా, అవి అందుబాటులోకి వచ్చే రేటు కూడా పెరిగింది. నేను మళ్లీ ప్రశ్న అడుగుతాను, అప్పుడు: వెబ్ ఎలా పని చేస్తుందో మరియు ప్లాట్ఫారమ్లో అందుబాటులో ఉన్న వాటి గురించి మరింత తెలుసుకోవడానికి సమయాన్ని వెచ్చించాలా? ఖచ్చితంగా అవును. ఈ రోజు వెబ్ ప్లాట్ఫారమ్ను అర్థం చేసుకోవడం మరియు ఉపయోగించడం నేర్చుకోవడం వలన ఇతర డెవలపర్ల కంటే మీకు భారీ ప్రయోజనం లభిస్తుంది. మీరు పనితీరు, యాక్సెసిబిలిటీ, రెస్పాన్సిబిలిటీ, ఇవన్నీ కలిసి పనిచేసినా లేదా UI ఫీచర్లను షిప్పింగ్ చేసినా, మీరు బాధ్యతాయుతమైన ఇంజనీర్గా దీన్ని చేయాలనుకుంటే, మీకు అందుబాటులో ఉన్న సాధనాలను తెలుసుకోవడం మీ లక్ష్యాలను వేగంగా మరియు మెరుగ్గా చేరుకోవడంలో మీకు సహాయపడుతుంది. కొన్ని విషయాలు మీకు ఇకపై లైబ్రరీ అవసరం లేదు ఈ రోజు ఏ బ్రౌజర్లు మద్దతు ఇస్తాయో తెలుసుకోవడం, ప్రశ్న ఏమిటంటే: మనం దేనిని వదులుకోవచ్చు? 2025లో గుండ్రని మూలలను చేయడానికి మనకు div భాగం అవసరమా? వాస్తవానికి, మేము చేయము. ఈ సమయంలో 15 సంవత్సరాలకు పైగా ప్రస్తుతం ఉపయోగిస్తున్న అన్ని బ్రౌజర్ల ద్వారా సరిహద్దు-వ్యాస ప్రాపర్టీకి మద్దతు ఉంది. ఇంకా ఫ్యాన్సీయర్ కార్నర్ల కోసం కార్నర్-షేప్ కూడా త్వరలో రాబోతోంది. ఇప్పుడు అన్ని ప్రధాన బ్రౌజర్లలో అందుబాటులో ఉన్న సాపేక్షంగా ఇటీవలి ఫీచర్లను పరిశీలిద్దాం మరియు మీ కోడ్బేస్లో ఇప్పటికే ఉన్న డిపెండెన్సీలను భర్తీ చేయడానికి మీరు వీటిని ఉపయోగించవచ్చు. మీ ప్రియమైన లైబ్రరీలన్నింటినీ వెంటనే తొలగించి, మీ కోడ్బేస్ని తిరిగి వ్రాయడం కాదు. మిగతా వాటి కోసం, మీరు ముందుగా బ్రౌజర్ మద్దతును పరిగణనలోకి తీసుకోవాలి మరియు మీ ప్రాజెక్ట్కు సంబంధించిన ఇతర అంశాల ఆధారంగా నిర్ణయించుకోవాలి. కింది ఫీచర్లు మూడు ప్రధాన బ్రౌజర్ ఇంజిన్లలో (Chromium, WebKit మరియు Gecko) అమలు చేయబడ్డాయి, కానీ మీరు వాటిని వెంటనే ఉపయోగించకుండా నిరోధించే వివిధ బ్రౌజర్ మద్దతు అవసరాలు ఉండవచ్చు. ఈ ఫీచర్ల గురించి తెలుసుకోవడానికి ఇప్పుడు మంచి సమయం, అయితే, బహుశా వాటిని ఏదో ఒక సమయంలో ఉపయోగించాలని ప్లాన్ చేయవచ్చు. పాపవర్లు మరియు డైలాగ్లు Popover API,
ఖచ్చితంగా, మీ ఇంటర్నెట్ కనెక్షన్ వేగం కూడా బహుశా పెరిగింది, కానీ అది అందరి విషయంలో కాదు. మరియు ప్రతి ఒక్కరూ ఒకే విధమైన పరికర సామర్థ్యాలను కలిగి ఉండరు. మీరు ప్లాట్ఫారమ్తో చేయగలిగే పనుల కోసం మూడవ పక్షం కోడ్ని లాగడం అంటే, మీరు ఎక్కువ కోడ్ను రవాణా చేస్తారని మరియు అందువల్ల మీరు సాధారణంగా చేసే దానికంటే తక్కువ మంది కస్టమర్లను చేరుకుంటారని అర్థం. వెబ్లో, చెడు లోడింగ్ పనితీరు పెద్ద మొత్తంలో వదిలివేయడానికి దారితీస్తుంది మరియు బ్రాండ్ కీర్తిని దెబ్బతీస్తుంది. పరికరాలపై తక్కువ కోడ్ని అమలు చేస్తోంది ఇంకా, ప్లాట్ఫారమ్ పైన తక్కువ JavaScript సంగ్రహాలను ఉపయోగిస్తే మీరు మీ కస్టమర్ల పరికరాలలో షిప్ చేసే కోడ్ వేగంగా పని చేస్తుంది. ఇది బహుశా మరింత ప్రతిస్పందించేది మరియు డిఫాల్ట్గా మరింత ప్రాప్యత చేయగలదు. ఇవన్నీ ఎక్కువ మరియు సంతోషకరమైన కస్టమర్లకు దారితీస్తాయి. నా సహోద్యోగి అలెక్స్ రస్సెల్ యొక్క వార్షిక పనితీరు అసమానత గ్యాప్ బ్లాగ్ను తనిఖీ చేయండి, ఇది సంపద అసమానత కారణంగా బిలియన్ల కొద్దీ వినియోగదారులతో మార్కెట్లలో ప్రీమియం పరికరాలు ఎక్కువగా లేవని చూపిస్తుంది. మరియు ఈ అంతరం కాలక్రమేణా మాత్రమే పెరుగుతోంది.
అంతర్నిర్మిత తాపీపని లేఅవుట్ త్వరలో రాబోతున్న ఒక వెబ్ ప్లాట్ఫారమ్ ఫీచర్ మరియు దాని గురించి నేను చాలా సంతోషిస్తున్నాను CSS తాపీపని.
తాపీపని అంటే ఏమిటో వివరించడం ద్వారా నేను ప్రారంభిస్తాను. తాపీపని అంటే ఏమిటి తాపీపని అనేది ఒక రకమైన లేఅవుట్, ఇది సంవత్సరాల క్రితం Pinterest ద్వారా ప్రజాదరణ పొందింది. ఇది కంటెంట్ యొక్క స్వతంత్ర ట్రాక్లను సృష్టిస్తుంది, అందులో ఐటెమ్లు తమకు వీలైనంత దగ్గరగా ట్రాక్ ప్రారంభానికి దగ్గరగా ఉంటాయి.
చాలా మంది వ్యక్తులు పోర్ట్ఫోలియోలు మరియు ఫోటో గ్యాలరీల కోసం తాపీపనిని గొప్ప ఎంపికగా చూస్తారు, ఇది ఖచ్చితంగా చేయగలదు. కానీ తాపీపని మీరు Pinterestలో చూసే దానికంటే చాలా సరళంగా ఉంటుంది మరియు ఇది కేవలం జలపాతం లాంటి లేఅవుట్లకు మాత్రమే పరిమితం కాదు. తాపీపని లేఅవుట్లో:
ట్రాక్లు నిలువు వరుసలు లేదా అడ్డు వరుసలు కావచ్చు:
కంటెంట్ ట్రాక్లు అన్నీ ఒకే పరిమాణంలో ఉండవలసిన అవసరం లేదు:
అంశాలు బహుళ ట్రాక్లను విస్తరించగలవు:
అంశాలను నిర్దిష్ట ట్రాక్లలో ఉంచవచ్చు; వారు ఎల్లప్పుడూ ఆటోమేటిక్ ప్లేస్మెంట్ అల్గారిథమ్ని అనుసరించాల్సిన అవసరం లేదు:
డెమోలు క్రోమియంలో CSS తాపీపని యొక్క రాబోయే అమలును ఉపయోగించడం ద్వారా నేను చేసిన కొన్ని సాధారణ డెమోలు ఇక్కడ ఉన్నాయి. ఒక ఫోటో గ్యాలరీ డెమో, ఐటెమ్లు (ఈ సందర్భంలో టైటిల్) బహుళ ట్రాక్లను ఎలా విస్తరించవచ్చో చూపిస్తుంది:
వివిధ పరిమాణాల ట్రాక్లను చూపుతున్న మరొక ఫోటో గ్యాలరీ:
కొన్ని ట్రాక్లతో వార్తల సైట్ లేఅవుట్ ఇతర వాటి కంటే విస్తృతమైనది మరియు కొన్ని అంశాలు లేఅవుట్ యొక్క మొత్తం వెడల్పులో ఉన్నాయి:
అంశాలను నిర్దిష్ట ట్రాక్లలో ఉంచవచ్చని చూపించే కాన్బన్ బోర్డు:
గమనిక: దిమునుపటి డెమోలు చాలా మంది వెబ్ వినియోగదారులకు ఇంకా అందుబాటులో లేని క్రోమియం వెర్షన్తో రూపొందించబడ్డాయి, ఎందుకంటే CSS తాపీపని బ్రౌజర్లలో ఇప్పుడే అమలు చేయబడుతోంది. అయినప్పటికీ, వెబ్ డెవలపర్లు ఇప్పటికే సంవత్సరాలుగా తాపీపని లేఅవుట్లను రూపొందించడానికి లైబ్రరీలను సంతోషంగా ఉపయోగిస్తున్నారు. నేడు తాపీపనిని ఉపయోగించే సైట్లు నిజానికి, తాపీపని నేడు వెబ్లో చాలా సాధారణం. Pinterestతో పాటు నేను కనుగొన్న కొన్ని ఉదాహరణలు ఇక్కడ ఉన్నాయి:
మరియు మరికొన్ని, తక్కువ స్పష్టమైన, ఉదాహరణలు:
కాబట్టి, ఈ లేఅవుట్లు ఎలా సృష్టించబడ్డాయి? పరిష్కార మార్గాలు నేను ఉపయోగించిన ఒక ఉపాయం ఏమిటంటే బదులుగా ఫ్లెక్స్బాక్స్ లేఅవుట్ని ఉపయోగించడం, దాని దిశను కాలమ్కి మార్చడం మరియు దానిని చుట్టడానికి సెట్ చేయడం. ఈ విధంగా, మీరు తాపీపని లేఅవుట్ యొక్క ముద్రను ఇస్తూ బహుళ, స్వతంత్ర నిలువు వరుసలలో వివిధ ఎత్తుల అంశాలను ఉంచవచ్చు:
అయితే, ఈ పరిష్కారానికి రెండు పరిమితులు ఉన్నాయి:
వస్తువుల క్రమం నిజమైన తాపీపని లేఅవుట్తో ఉండే దానికి భిన్నంగా ఉంటుంది. Flexboxతో, అంశాలు ముందుగా మొదటి నిలువు వరుసను పూరించండి మరియు అది నిండినప్పుడు, తదుపరి నిలువు వరుసకు వెళ్లండి. తాపీపనితో, ఐటెమ్లు ఏ ట్రాక్లో (లేదా ఈ సందర్భంలో కాలమ్) ఎక్కువ స్థలం అందుబాటులో ఉంటే అందులో పేర్చబడి ఉంటాయి. కానీ, మరియు బహుశా మరింత ముఖ్యంగా, ఈ పరిష్కారానికి మీరు ఫ్లెక్స్బాక్స్ కంటైనర్కు స్థిరమైన ఎత్తును సెట్ చేయడం అవసరం; లేకపోతే, చుట్టడం జరగదు.
మూడవ పార్టీ తాపీపని లైబ్రరీలు మరింత అధునాతన కేసుల కోసం, డెవలపర్లు లైబ్రరీలను ఉపయోగిస్తున్నారు. దీని కోసం అత్యంత ప్రసిద్ధ మరియు ప్రసిద్ధ లైబ్రరీని తాపీపని అని పిలుస్తారు మరియు ఇది NPM ప్రకారం వారానికి 200,000 సార్లు డౌన్లోడ్ చేయబడుతుంది. స్క్వేర్స్పేస్ నో-కోడ్ ప్రత్యామ్నాయం కోసం తాపీపని లేఅవుట్ను అందించే లేఅవుట్ భాగాన్ని కూడా అందిస్తుంది మరియు అనేక సైట్లు దీనిని ఉపయోగిస్తాయి. ఈ రెండు ఎంపికలు లేఅవుట్లో అంశాలను ఉంచడానికి జావాస్క్రిప్ట్ కోడ్ని ఉపయోగిస్తాయి. అంతర్నిర్మిత తాపీపని తాపీపని ఇప్పుడు అంతర్నిర్మిత CSS ఫీచర్గా బ్రౌజర్లలో కనిపించడం ప్రారంభించినందుకు నేను నిజంగా సంతోషిస్తున్నాను. కాలక్రమేణా, మీరు గ్రిడ్ లేదా ఫ్లెక్స్బాక్స్ మాదిరిగానే తాపీపనిని ఉపయోగించగలరు, అంటే ఎటువంటి పరిష్కారాలు లేదా మూడవ పక్షం కోడ్ అవసరం లేకుండా. మైక్రోసాఫ్ట్లోని నా బృందం Chromium ఓపెన్ సోర్స్ ప్రాజెక్ట్లో అంతర్నిర్మిత తాపీపని మద్దతును అమలు చేస్తోంది, దీని ఆధారంగా Edge, Chrome మరియు అనేక ఇతర బ్రౌజర్లు ఉన్నాయి. మొజిల్లా నిజానికి 2020లో తాపీపని యొక్క ప్రయోగాత్మక అమలును ప్రతిపాదించిన మొదటి బ్రౌజర్ విక్రేత. మరియు Apple కూడా ఈ కొత్త వెబ్ లేఅవుట్ను ప్రాచీనమైనదిగా చేయడంలో చాలా ఆసక్తిని కలిగి ఉంది. సాధారణ దిశ మరియు కొత్త డిస్ప్లే రకం డిస్ప్లే: గ్రిడ్-లేన్ల గురించి CSS వర్కింగ్ గ్రూప్లో ఒప్పందంతో ఫీచర్ని ప్రామాణీకరించే పని కూడా ముందుకు సాగుతోంది. మీరు తాపీపని గురించి మరింత తెలుసుకోవాలనుకుంటే మరియు పురోగతిని ట్రాక్ చేయాలనుకుంటే, నా CSS తాపీపని వనరుల పేజీని చూడండి. కాలక్రమేణా, గ్రిడ్ లేదా ఫ్లెక్స్బాక్స్ లాగా తాపీపని ఒక బేస్లైన్ ఫీచర్గా మారినప్పుడు, మేము దానిని ఉపయోగించగలుగుతాము మరియు దీని నుండి ప్రయోజనం పొందగలుగుతాము:
మెరుగైన పనితీరు, మెరుగైన ప్రతిస్పందన, వాడుకలో సౌలభ్యం మరియు సరళమైన కోడ్.
వీటిని నిశితంగా పరిశీలిద్దాం. మెరుగైన పనితీరు మీ స్వంత తాపీపని లాంటి లేఅవుట్ సిస్టమ్ను తయారు చేయడం లేదా బదులుగా మూడవ పక్షం లైబ్రరీని ఉపయోగించడం అంటే మీరు స్క్రీన్పై అంశాలను ఉంచడానికి జావాస్క్రిప్ట్ కోడ్ని అమలు చేయాల్సి ఉంటుంది. ఈ కోడ్ రెండర్ బ్లాకింగ్ అవుతుందని కూడా దీని అర్థం. నిజానికి, ఆ జావాస్క్రిప్ట్ కోడ్ అమలు అయ్యే వరకు ఏమీ కనిపించదు లేదా విషయాలు సరైన ప్రదేశాల్లో లేదా సరైన పరిమాణాల్లో ఉండవు. తాపీపని లేఅవుట్ తరచుగా వెబ్ పేజీ యొక్క ప్రధాన భాగానికి ఉపయోగించబడుతుంది, అంటే కోడ్ మీ ప్రధాన కంటెంట్ను కలిగి ఉండగలిగే దానికంటే ఆలస్యంగా కనిపించేలా చేస్తుంది, మీ LCP లేదా అతిపెద్ద కంటెంట్ఫుల్ పెయింట్ మెట్రిక్ను దిగజార్చుతుంది, ఇది గ్రహించిన పనితీరు మరియు శోధన ఇంజిన్ ఆప్టిమైజేషన్లో పెద్ద పాత్ర పోషిస్తుంది. నేను Masonry JS లైబ్రరీని సాధారణ లేఅవుట్తో మరియు DevToolsలో నెమ్మదిగా 4G కనెక్షన్ని అనుకరించడం ద్వారా పరీక్షించాను. లైబ్రరీ చాలా పెద్దది కాదు (24KB, 7.8KB gzipped), కానీ నా పరీక్ష పరిస్థితుల్లో లోడ్ చేయడానికి 600ms పట్టింది. తాపీపని లైబ్రరీ కోసం సుదీర్ఘ 600ms లోడ్ సమయం ఉందని మరియు అది జరుగుతున్నప్పుడు ఇతర రెండరింగ్ కార్యకలాపాలు ఏవీ జరగలేదని చూపించే పనితీరు రికార్డింగ్ ఇక్కడ ఉంది:
అదనంగా, ప్రారంభ లోడ్ సమయం తర్వాత, డౌన్లోడ్ చేసిన స్క్రిప్ట్ని అన్వయించి, కంపైల్ చేసి, ఆపై అమలు చేయాలి. ఇవన్నీ, ముందు పేర్కొన్న విధంగా, పేజీ యొక్క రెండరింగ్ను నిరోధించాయి. బ్రౌజర్లో అంతర్నిర్మిత తాపీపని అమలుతో, లోడ్ చేయడానికి మరియు అమలు చేయడానికి మా వద్ద స్క్రిప్ట్ ఉండదు. ప్రారంభ పేజీ రెండరింగ్ దశలో బ్రౌజర్ ఇంజిన్ దాని పనిని చేస్తుంది. మెరుగైన ప్రతిస్పందన ఒక పేజీ మొదట లోడ్ అయినప్పుడు లాగానే, బ్రౌజర్ విండో పరిమాణాన్ని మార్చడం వలన ఆ పేజీలోని లేఅవుట్ మళ్లీ రెండరింగ్ అవుతుంది. ఈ సమయంలో, అయితే, పేజీ తాపీపని JS లైబ్రరీని ఉపయోగిస్తుంటే, స్క్రిప్ట్ను మళ్లీ లోడ్ చేయవలసిన అవసరం లేదు, ఎందుకంటే ఇది ఇప్పటికే ఉందిఇక్కడ. అయితే, అంశాలను సరైన ప్రదేశాల్లోకి తరలించే కోడ్ అమలు కావాలి. ఇప్పుడు ఈ ప్రత్యేక లైబ్రరీ పేజీ లోడ్ అయినప్పుడు దీన్ని చేయడంలో చాలా వేగంగా ఉన్నట్లు అనిపిస్తుంది. అయినప్పటికీ, విండో పరిమాణంలో వేరే ప్రదేశానికి తరలించాల్సిన అవసరం వచ్చినప్పుడు ఇది అంశాలను యానిమేట్ చేస్తుంది మరియు ఇది పెద్ద వ్యత్యాసాన్ని కలిగిస్తుంది. వాస్తవానికి, మేము డెవలపర్లు చేసినంతగా వినియోగదారులు తమ బ్రౌజర్ విండోల పరిమాణాన్ని మార్చడానికి సమయాన్ని వెచ్చించరు. కానీ ఈ యానిమేటెడ్ రీసైజింగ్ అనుభవం చాలా ఇబ్బందికరంగా ఉంటుంది మరియు పేజీ దాని కొత్త పరిమాణానికి అనుగుణంగా మారడానికి పట్టే సమయాన్ని జోడిస్తుంది. వాడుకలో సౌలభ్యం మరియు సరళమైన కోడ్ వెబ్ ఫీచర్ను ఉపయోగించడం ఎంత సులభం మరియు కోడ్ ఎంత సరళంగా కనిపిస్తుంది అనేవి మీ బృందానికి పెద్ద మార్పును కలిగించే ముఖ్యమైన అంశాలు. అవి అంతిమ వినియోగదారు అనుభవం వలె ముఖ్యమైనవి కావు, అయితే డెవలపర్ అనుభవం నిర్వహణ సామర్థ్యాన్ని ప్రభావితం చేస్తుంది. అంతర్నిర్మిత వెబ్ ఫీచర్ని ఉపయోగించడం ఆ ముందు ముఖ్యమైన ప్రయోజనాలతో వస్తుంది:
HTML, CSS మరియు JS గురించి ఇప్పటికే తెలిసిన డెవలపర్లు ఆ ఫీచర్ను సులభంగా ఉపయోగించగలుగుతారు ఎందుకంటే ఇది బాగా ఇంటిగ్రేట్ అయ్యేలా మరియు మిగిలిన వెబ్ ప్లాట్ఫారమ్తో స్థిరంగా ఉండేలా రూపొందించబడింది. ఫీచర్ని ఉపయోగించే విధానంలో మార్పులు ప్రవేశపెట్టే ప్రమాదం లేదు. ఆ ఫీచర్ నిలిపివేయబడిన లేదా నిర్వహించబడని ప్రమాదం దాదాపు సున్నా.
అంతర్నిర్మిత తాపీపని విషయంలో, ఇది లేఅవుట్ ఆదిమమైనది కాబట్టి, మీరు దీన్ని CSS నుండి గ్రిడ్ లేదా ఫ్లెక్స్బాక్స్ లాగా ఉపయోగిస్తున్నారు, JS ప్రమేయం లేదు. అలాగే, గ్యాప్ వంటి ఇతర లేఅవుట్-సంబంధిత CSS లక్షణాలు మీరు ఆశించిన విధంగా పని చేస్తాయి. తెలుసుకోవలసిన ఉపాయాలు లేదా పరిష్కారాలు లేవు మరియు మీరు నేర్చుకునే విషయాలు MDNలో డాక్యుమెంట్ చేయబడతాయి. తాపీపని JS లిబ్ కోసం, ప్రారంభించడం కొంచెం క్లిష్టంగా ఉంటుంది: నిలువు వరుస మరియు గ్యాప్ పరిమాణాలను సెట్ చేయడానికి దాచిన HTML మూలకాలతో పాటు నిర్దిష్ట సింటాక్స్తో కూడిన డేటా లక్షణం అవసరం. అదనంగా, మీరు నిలువు వరుసలను విస్తరించాలనుకుంటే, సమస్యలను నివారించడానికి గ్యాప్ పరిమాణాన్ని మీరే చేర్చుకోవాలి:
<స్క్రిప్ట్ src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"> <శైలి> .ట్రాక్-సైజర్, .అంశం { వెడల్పు: 20%; } .గట్టర్-సైజర్ { వెడల్పు: 1rem; } .అంశం { ఎత్తు: 100px; మార్జిన్-బ్లాక్-ఎండ్: 1rem; } .అంశం:వ-బిడ్డ(బేసి) { ఎత్తు: 200px; } .item--width2 { వెడల్పు: calc(40% + 1rem); }
అంతర్నిర్మిత తాపీపని అమలు ఎలా ఉంటుందో దానితో పోల్చి చూద్దాం: <శైలి> .కంటైనర్ { ప్రదర్శన: గ్రిడ్-లేన్స్; గ్రిడ్-లేన్లు: పునరావృతం(4, 20%); గ్యాప్: 1 రెమ్; } .అంశం { ఎత్తు: 100px; } .అంశం:వ-బిడ్డ(బేసి) { ఎత్తు: 200px; } .item--width2 { గ్రిడ్-కాలమ్: span 2; }
గ్రిడ్లో లాగా గ్యాప్ మరియు స్పానింగ్ ట్రాక్లు స్పాన్ 2తో చేసే చోట వంటి వాటిని ఉపయోగించగల సరళమైన, మరింత కాంపాక్ట్ కోడ్ మరియు మీరు గ్యాప్ పరిమాణాన్ని కలిగి ఉన్న సరైన వెడల్పును లెక్కించాల్సిన అవసరం లేదు. ఏది అందుబాటులో ఉంది మరియు ఎప్పుడు అందుబాటులో ఉందో తెలుసుకోవడం ఎలా? మొత్తంమీద, మీరు JS లైబ్రరీలో అంతర్నిర్మిత తాపీపనిని ఉపయోగించాలా అనేది నిజంగా ప్రశ్న కాదు, కానీ ఎప్పుడు. తాపీపని JS లైబ్రరీ అద్భుతంగా ఉంది మరియు అనేక సంవత్సరాలుగా వెబ్ ప్లాట్ఫారమ్లో ఖాళీని పూరిస్తోంది మరియు చాలా మంది సంతోషకరమైన డెవలపర్లు మరియు వినియోగదారుల కోసం. మీరు దీన్ని అంతర్నిర్మిత తాపీపని అమలుతో పోల్చినట్లయితే దీనికి కొన్ని లోపాలు ఉన్నాయి, అయితే ఆ అమలు సిద్ధంగా లేకుంటే అవి ముఖ్యమైనవి కావు. నేను బ్రౌజర్ వెండర్లో పని చేస్తున్నందున ఈ అద్భుతమైన వెబ్ ప్లాట్ఫారమ్ ఫీచర్లను జాబితా చేయడం నాకు చాలా సులభం, కాబట్టి నేను ఏమి జరుగుతుందో తెలుసుకోవాలనుకుంటున్నాను. కానీ డెవలపర్లు తరచుగా పంచుకుంటారు, సర్వే తర్వాత సర్వే, కొత్త విషయాలను ట్రాక్ చేయడం కష్టం. సమాచారం ఇవ్వడం కష్టం, మరియు కంపెనీలు ఎల్లప్పుడూ నేర్చుకోవడానికి ప్రాధాన్యత ఇవ్వవు. దీనికి సహాయం చేయడానికి, ఇక్కడ కొన్ని వనరులు ఉన్నాయి, ఇవి సరళమైన మరియు కాంపాక్ట్ మార్గాల్లో నవీకరణలను అందిస్తాయి, తద్వారా మీకు అవసరమైన సమాచారాన్ని త్వరగా పొందవచ్చు:
వెబ్ ప్లాట్ఫారమ్ ఎక్స్ప్లోరర్ సైట్ను కలిగి ఉంది: మీరు దాని విడుదల గమనికల పేజీపై ఆసక్తి కలిగి ఉండవచ్చు. మరియు, మీరు RSSని ఇష్టపడితే, విడుదల నోట్స్ ఫీడ్తో పాటు బేస్లైన్ కొత్తగా అందుబాటులో ఉన్న మరియు విస్తృతంగా అందుబాటులో ఉన్న ఫీడ్లను చూడండి.
వెబ్ప్లాట్ఫారమ్ స్థితి డాష్బోర్డ్: మీరు దాని వివిధ బేస్లైన్ ఇయర్ పేజీలను ఇష్టపడవచ్చు.
Chrome ప్లాట్ఫారమ్ స్థితి యొక్క రోడ్మ్యాప్ పేజీ.
మీకు కొంచెం ఎక్కువ సమయం ఉంటే, మీరు బ్రౌజర్ విక్రేతల విడుదల గమనికలపై కూడా ఆసక్తి కలిగి ఉండవచ్చు:
Chrome అంచు ఫైర్ఫాక్స్ సఫారి
మరిన్ని వనరుల కోసం, నా నావిగేటింగ్ ది వెబ్ ప్లాట్ఫారమ్ చీట్షీట్ని చూడండి. నా విషయం ఇప్పటికీ అమలు కాలేదు అది సమస్యకు మరో వైపు. మీరు ట్రాక్ చేయడానికి సమయం, శక్తి మరియు మార్గాలను కనుగొన్నప్పటికీ, మీ వాయిస్ని వినడం మరియు మీకు ఇష్టమైన ఫీచర్లను అమలు చేయడంలో నిరాశ ఇప్పటికీ ఉంది. నిర్దిష్ట బగ్ని పరిష్కరించడం కోసం మీరు ఏళ్ల తరబడి ఎదురు చూస్తూ ఉండవచ్చు లేదా అది ఇప్పటికీ తప్పిపోయిన బ్రౌజర్లో షిప్పింగ్ కోసం నిర్దిష్ట ఫీచర్ను అందించవచ్చు. నేను చెప్పేది బ్రౌజర్ విక్రేతలు వినండి. నేను డెవలపర్ సిగ్నల్స్ మరియు ఫీడ్బ్యాక్ గురించి ఎప్పటికప్పుడు చర్చించుకునే అనేక క్రాస్-ఆర్గనైజేషన్ టీమ్లలో భాగుడిని. మేము ప్రతి బ్రౌజర్ విక్రేత వద్ద అంతర్గతంగా మరియు ఫోరమ్లు, ఓపెన్ సోర్స్ ప్రాజెక్ట్లు, బ్లాగ్లు మరియు సర్వేలలో బాహ్య/పబ్లిక్ ఫీడ్బ్యాక్ యొక్క అనేక విభిన్న మూలాధారాలను పరిశీలిస్తాము. మరియు, డెవలపర్లు వారి నిర్దిష్ట అవసరాలను పంచుకోవడానికి మరియు కేసులను ఉపయోగించుకోవడానికి మేము ఎల్లప్పుడూ మెరుగైన మార్గాలను రూపొందించడానికి ప్రయత్నిస్తున్నాము. కాబట్టి, మీకు వీలైతే, దయచేసి బ్రౌజర్ విక్రేతల నుండి మరింత డిమాండ్ చేయండి మరియు మీకు అవసరమైన ఫీచర్లను అమలు చేయడానికి మమ్మల్ని ఒత్తిడి చేయండి. నాకు సమయం పడుతుందని మరియు భయపెట్టవచ్చు (ప్రవేశానికి అధిక అవరోధం గురించి చెప్పనవసరం లేదు), కానీ ఇది కూడా పని చేస్తుంది. మీరు మీ (లేదా మీ కంపెనీ) వాయిస్ని వినడానికి ఇక్కడ కొన్ని మార్గాలు ఉన్నాయి: JS యొక్క వార్షిక స్థితి, CSS స్థితి మరియు HTML సర్వేల స్థితిని తీసుకోండి. బ్రౌజర్ విక్రేతలు తమ పనికి ఎలా ప్రాధాన్యత ఇస్తారు అనే విషయంలో వారు పెద్ద పాత్ర పోషిస్తారు. బ్రౌజర్లలో స్థిరంగా అమలు చేయడానికి మీకు నిర్దిష్ట ప్రామాణిక-ఆధారిత API అవసరమైతే, తదుపరి ఇంటరాప్ ప్రాజెక్ట్ పునరావృతంలో ప్రతిపాదనను సమర్పించడాన్ని పరిగణించండి. దీనికి మరింత సమయం కావాలి, అయితే Shopify మరియు RUMvision Interop 2026 కోసం తమ కోరికల జాబితాలను ఎలా పంచుకున్నాయో పరిశీలించండి. బ్రౌజర్ విక్రేతలకు ప్రాధాన్యత ఇవ్వడానికి ఇలాంటి వివరణాత్మక సమాచారం చాలా ఉపయోగకరంగా ఉంటుంది. బ్రౌజర్ విక్రేతలను ప్రభావితం చేయడానికి మరింత ఉపయోగకరమైన లింక్ల కోసం, నా నావిగేటింగ్ ది వెబ్ ప్లాట్ఫారమ్ చీట్షీట్ని చూడండి. తీర్మానం మూసివేయడానికి, ఈ కథనం మీరు ఆలోచించడానికి కొన్ని విషయాలను మిగిల్చిందని నేను ఆశిస్తున్నాను:
తాపీపని మరియు ఇతర రాబోయే వెబ్ ఫీచర్ల కోసం ఉత్సాహం. మీరు ఉపయోగించడం ప్రారంభించాలనుకునే కొన్ని వెబ్ ఫీచర్లు. మీరు అంతర్నిర్మిత ఫీచర్లకు అనుకూలంగా కొన్ని అనుకూల లేదా 3వ పక్షం కోడ్లను తీసివేయవచ్చు. రాబోయే వాటిని ట్రాక్ చేయడానికి మరియు బ్రౌజర్ విక్రేతలను ప్రభావితం చేయడానికి కొన్ని మార్గాలు.
మరీ ముఖ్యంగా, వెబ్ ప్లాట్ఫారమ్ను దాని పూర్తి సామర్థ్యానికి ఉపయోగించడం వల్ల కలిగే ప్రయోజనాల గురించి నేను మిమ్మల్ని ఒప్పించానని ఆశిస్తున్నాను.
