ഏകദേശം 15 വർഷം മുമ്പ്, ട്രാവൽ ഏജൻ്റുമാർ, എയർപോർട്ട് തൊഴിലാളികൾ, എയർലൈൻ കമ്പനികൾ എന്നിവർക്കായി ഞങ്ങൾ ആപ്പുകൾ നിർമ്മിച്ച ഒരു കമ്പനിയിൽ ഞാൻ ജോലി ചെയ്യുകയായിരുന്നു. UI ഘടകങ്ങൾക്കും സിംഗിൾ-പേജ് ആപ്പ് കഴിവുകൾക്കുമായി ഞങ്ങൾ ഞങ്ങളുടെ സ്വന്തം ഇൻ-ഹൗസ് ചട്ടക്കൂട് നിർമ്മിച്ചു. ഞങ്ങൾക്ക് എല്ലാത്തിനും ഘടകങ്ങൾ ഉണ്ടായിരുന്നു: ഫീൽഡുകൾ, ബട്ടണുകൾ, ടാബുകൾ, ശ്രേണികൾ, ഡാറ്റാടേബിളുകൾ, മെനുകൾ, തീയതിപിക്കറുകൾ, തിരഞ്ഞെടുക്കലുകൾ, മൾട്ടിസെലക്ടുകൾ. ഞങ്ങൾക്ക് ഒരു ഡിവി ഘടകം പോലും ഉണ്ടായിരുന്നു. ഞങ്ങളുടെ div ഘടകം മികച്ചതായിരുന്നു, എല്ലാ ബ്രൗസറുകളിലും വൃത്താകൃതിയിലുള്ള കോണുകൾ ചെയ്യാൻ ഇത് ഞങ്ങളെ അനുവദിച്ചു, അത് വിശ്വസിച്ചാലും ഇല്ലെങ്കിലും, അക്കാലത്ത് ചെയ്യാൻ എളുപ്പമായ കാര്യമായിരുന്നില്ല.
JS, Ajax, ഡൈനാമിക് HTML എന്നിവ നമ്മെ ഭാവിയിലേക്ക് കൊണ്ടുവന്ന ഒരു വിപ്ലവമായി കണ്ടപ്പോൾ ഞങ്ങളുടെ ചരിത്രത്തിലെ ഒരു ഘട്ടത്തിലാണ് ഞങ്ങളുടെ പ്രവർത്തനം നടന്നത്. പെട്ടെന്ന്, ഞങ്ങൾക്ക് ഒരു പേജ് ഡൈനാമിക് ആയി അപ്ഡേറ്റ് ചെയ്യാനും സെർവറിൽ നിന്ന് ഡാറ്റ നേടാനും മറ്റ് പേജുകളിലേക്ക് നാവിഗേറ്റ് ചെയ്യാതിരിക്കാനും കഴിയും, അത് സ്ലോ ആയി കാണപ്പെടുകയും രണ്ട് പേജുകൾക്കിടയിലുള്ള സ്ക്രീനിൽ ഒരു വലിയ വെളുത്ത ദീർഘചതുരം ഫ്ലാഷ് ചെയ്യുകയും ചെയ്തു. ജെഫ് അറ്റ്വുഡ് (സ്റ്റാക്ക്ഓവർഫ്ലോയുടെ സ്ഥാപകൻ) പ്രശസ്തമാക്കിയ ഒരു വാചകം ഉണ്ടായിരുന്നു: "ജാവാസ്ക്രിപ്റ്റിൽ എഴുതാൻ കഴിയുന്ന ഏത് ആപ്ലിക്കേഷനും ഒടുവിൽ ജാവാസ്ക്രിപ്റ്റിൽ എഴുതപ്പെടും." - ജെഫ് അറ്റ്വുഡ്
അക്കാലത്ത് ഞങ്ങൾക്ക്, യഥാർത്ഥത്തിൽ പോയി ആ ആപ്പുകൾ സൃഷ്ടിക്കാനുള്ള ധൈര്യമായി ഇത് തോന്നി. JS ഉപയോഗിച്ച് എല്ലാം ചെയ്യാൻ ഒരു പുതപ്പ് അംഗീകാരം പോലെ തോന്നി. അതിനാൽ ഞങ്ങൾ JS ഉപയോഗിച്ച് എല്ലാം ചെയ്തു, കാര്യങ്ങൾ ചെയ്യുന്നതിനുള്ള മറ്റ് വഴികൾ അന്വേഷിക്കാൻ ഞങ്ങൾ സമയമെടുത്തില്ല. HTML, CSS എന്നിവയ്ക്ക് എന്തുചെയ്യാനാകുമെന്ന് ശരിയായി പഠിക്കാനുള്ള പ്രചോദനം ഞങ്ങൾക്ക് ശരിക്കും തോന്നിയില്ല. പൂർണ്ണമായി വികസിച്ചുകൊണ്ടിരിക്കുന്ന ആപ്പ് പ്ലാറ്റ്ഫോമായി ഞങ്ങൾ വെബിനെ കണ്ടില്ല. ബ്രൗസർ പിന്തുണയുടെ കാര്യത്തിൽ പ്രത്യേകിച്ചും, ഞങ്ങൾ പ്രവർത്തിക്കേണ്ട ഒന്നായാണ് ഞങ്ങൾ ഇത് കൂടുതലും കണ്ടത്. കാര്യങ്ങൾ ചെയ്തുതീർക്കുന്നതിന് ഞങ്ങൾക്ക് കൂടുതൽ JS എറിയാൻ കഴിയും. വെബ് എങ്ങനെ പ്രവർത്തിക്കുന്നു, പ്ലാറ്റ്ഫോമിൽ ലഭ്യമായ കാര്യങ്ങൾ എന്നിവയെക്കുറിച്ച് കൂടുതലറിയാൻ സമയമെടുക്കുമോ? തീർച്ചയായും, ശരിക്കും ആവശ്യമില്ലാത്ത ഒരു കൂട്ടം കോഡ് എനിക്ക് ഷേവ് ചെയ്യാമായിരുന്നു. പക്ഷേ, ആ സമയത്ത്, ഒരുപക്ഷേ അത്രയൊന്നും ഇല്ലായിരിക്കാം. നിങ്ങൾ കാണുന്നു, ബ്രൗസർ വ്യത്യാസങ്ങൾ അക്കാലത്ത് വളരെ പ്രാധാന്യമുള്ളതായിരുന്നു. ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ ഇപ്പോഴും പ്രബലമായ ബ്രൗസറായിരുന്ന സമയമായിരുന്നു ഇത്, ഫയർഫോക്സ് രണ്ടാം സ്ഥാനത്താണ്, പക്ഷേ അതിവേഗം ജനപ്രീതി നേടിയ Chrome കാരണം വിപണി വിഹിതം നഷ്ടപ്പെടാൻ തുടങ്ങി. Chrome-ഉം Firefox-ഉം വെബ് സ്റ്റാൻഡേർഡുകൾ അംഗീകരിക്കുന്നതിൽ വളരെ മികച്ചതാണെങ്കിലും, ഞങ്ങളുടെ ആപ്പുകൾ പ്രവർത്തിക്കുന്ന പരിതസ്ഥിതികൾ അർത്ഥമാക്കുന്നത് ഞങ്ങൾക്ക് വളരെക്കാലം IE6 പിന്തുണയ്ക്കേണ്ടി വന്നു എന്നാണ്. IE8-നെ പിന്തുണയ്ക്കാൻ ഞങ്ങളെ അനുവദിച്ചപ്പോഴും, ബ്രൗസറുകൾക്കിടയിൽ ഞങ്ങൾക്ക് ധാരാളം വ്യത്യാസങ്ങൾ കൈകാര്യം ചെയ്യേണ്ടിവന്നു. അത് മാത്രമല്ല, അക്കാലത്തെ വെബിന് പ്ലാറ്റ്ഫോമിൽ തന്നെ നിർമ്മിച്ച അത്രയും കഴിവുകൾ ഇല്ലായിരുന്നു.
ഇന്നത്തേക്ക് അതിവേഗം മുന്നോട്ട്. കാര്യങ്ങൾ വല്ലാതെ മാറിയിരിക്കുന്നു. മുമ്പത്തേക്കാൾ കൂടുതൽ ഈ കഴിവുകൾ നമുക്കുണ്ട് എന്ന് മാത്രമല്ല, അവ ലഭ്യമാകുന്ന നിരക്കും വർദ്ധിച്ചിട്ടുണ്ട്.
ഞാൻ വീണ്ടും ചോദ്യം ചോദിക്കട്ടെ, അപ്പോൾ: വെബ് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്നും പ്ലാറ്റ്ഫോമിൽ ലഭ്യമായവയെ കുറിച്ചും കൂടുതലറിയാൻ സമയം കണ്ടെത്തുന്നത് ഇന്ന് നിങ്ങളെ സഹായിക്കുമോ? തീർച്ചയായും അതെ. ഇന്ന് വെബ് പ്ലാറ്റ്ഫോം മനസ്സിലാക്കാനും ഉപയോഗിക്കാനും പഠിക്കുന്നത് മറ്റ് ഡെവലപ്പർമാരെ അപേക്ഷിച്ച് നിങ്ങൾക്ക് വലിയ നേട്ടമുണ്ടാക്കുന്നു.
നിങ്ങൾ പ്രകടനം, പ്രവേശനക്ഷമത, പ്രതികരണശേഷി, എല്ലാം ഒരുമിച്ച് പ്രവർത്തിക്കുക, അല്ലെങ്കിൽ യുഐ സവിശേഷതകൾ ഷിപ്പിംഗ് എന്നിവയിൽ പ്രവർത്തിക്കുകയാണെങ്കിലും, ഉത്തരവാദിത്തമുള്ള ഒരു എഞ്ചിനീയർ എന്ന നിലയിൽ നിങ്ങൾക്കത് ചെയ്യാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് ലഭ്യമായ ടൂളുകൾ അറിയുന്നത് നിങ്ങളുടെ ലക്ഷ്യങ്ങളിൽ വേഗത്തിലും മികച്ചതിലും എത്താൻ സഹായിക്കുന്നു.
നിങ്ങൾക്ക് ഇനി ഒരു ലൈബ്രറി ആവശ്യമില്ലാത്ത ചില കാര്യങ്ങൾ
ഇന്ന് ഏത് ബ്രൗസറുകൾ പിന്തുണയ്ക്കുന്നുവെന്ന് അറിയുമ്പോൾ, ചോദ്യം ഇതാണ്: നമുക്ക് എന്ത് ഒഴിവാക്കാനാകും? 2025-ൽ വൃത്താകൃതിയിലുള്ള കോണുകൾ ചെയ്യാൻ ഞങ്ങൾക്ക് ഒരു ഡിവി ഘടകം ആവശ്യമുണ്ടോ? തീർച്ചയായും, ഞങ്ങൾ ചെയ്യുന്നില്ല. നിലവിൽ ഉപയോഗിക്കുന്ന എല്ലാ ബ്രൗസറുകളും ഈ ഘട്ടത്തിൽ 15 വർഷത്തിലേറെയായി ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്നു. കൂടുതൽ ഫാൻസിയർ കോണുകൾക്കായി കോർണർ ആകൃതിയും ഉടൻ വരുന്നു.
ഇപ്പോൾ എല്ലാ പ്രധാന ബ്രൗസറുകളിലും ലഭ്യമായ താരതമ്യേന സമീപകാല സവിശേഷതകൾ നോക്കാം, നിങ്ങളുടെ കോഡ്ബേസിൽ നിലവിലുള്ള ഡിപൻഡൻസികൾ മാറ്റിസ്ഥാപിക്കാൻ നിങ്ങൾക്ക് അവ ഉപയോഗിക്കാം.
നിങ്ങളുടെ പ്രിയപ്പെട്ട എല്ലാ ലൈബ്രറികളും ഉടനടി ഉപേക്ഷിച്ച് നിങ്ങളുടെ കോഡ്ബേസ് മാറ്റിയെഴുതുക എന്നതല്ല കാര്യം. മറ്റെല്ലാ കാര്യങ്ങളിലും, നിങ്ങൾ ആദ്യം ബ്രൗസർ പിന്തുണ കണക്കിലെടുക്കുകയും നിങ്ങളുടെ പ്രോജക്റ്റിന് പ്രത്യേകമായ മറ്റ് ഘടകങ്ങളെ അടിസ്ഥാനമാക്കി തീരുമാനിക്കുകയും വേണം. ഇനിപ്പറയുന്ന സവിശേഷതകൾ മൂന്ന് പ്രധാന ബ്രൗസർ എഞ്ചിനുകളിൽ (Chromium, WebKit, Gecko) നടപ്പിലാക്കിയിട്ടുണ്ട്, എന്നാൽ നിങ്ങൾക്ക് അവ ഉടനടി ഉപയോഗിക്കുന്നതിൽ നിന്ന് തടയുന്ന വ്യത്യസ്ത ബ്രൗസർ പിന്തുണ ആവശ്യകതകൾ ഉണ്ടായിരിക്കാം. ഈ ഫീച്ചറുകളെ കുറിച്ച് പഠിക്കാൻ ഇപ്പോൾ നല്ല സമയമാണ്, എങ്കിലും, ചിലപ്പോൾ അവ ഉപയോഗിക്കാൻ പദ്ധതിയിട്ടേക്കാം.
പോപോവറുകളും ഡയലോഗുകളും
പോപ്പ്ഓവർ എപിഐ, <ഡയലോഗ്> എച്ച്ടിഎംഎൽ എലമെൻ്റ്, :: ബാക്ക്ഡ്രോപ്പ് സ്യൂഡോ എലമെൻ്റ് എന്നിവ പോപ്പ്അപ്പിലെ ഡിപൻഡൻസിയിൽ നിന്ന് രക്ഷപ്പെടാൻ നിങ്ങളെ സഹായിക്കും,ടൂൾടിപ്പ്, ഫ്ലോട്ടിംഗ് യുഐ, ടിപ്പി.ജെഎസ്, ടെതർ അല്ലെങ്കിൽ റിയാക്റ്റ് ടൂൾടിപ്പ് പോലുള്ള ഡയലോഗ് ലൈബ്രറികൾ.
അവ നിങ്ങൾക്ക് പ്രവേശനക്ഷമതയും ഫോക്കസ് മാനേജ്മെൻ്റും കൈകാര്യം ചെയ്യുന്നു, ബോക്സിന് പുറത്ത്, CSS ഉപയോഗിച്ച് വളരെ ഇഷ്ടാനുസൃതമാക്കാനും എളുപ്പത്തിൽ ആനിമേറ്റ് ചെയ്യാനുമാകും.
അക്രോഡിയൻസ്
തീർച്ചയായും, നിങ്ങളുടെ ഇൻ്റർനെറ്റ് കണക്ഷൻ വേഗതയും വർദ്ധിച്ചിട്ടുണ്ടാകും, എന്നാൽ എല്ലാവരുടെയും കാര്യം അങ്ങനെയല്ല. മാത്രമല്ല, എല്ലാവർക്കും ഒരേ ഉപകരണ ശേഷി ഉണ്ടായിരിക്കണമെന്നില്ല. പ്ലാറ്റ്ഫോം ഉപയോഗിച്ച് നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയുന്ന കാര്യങ്ങൾക്കായി മൂന്നാം കക്ഷി കോഡ് വലിക്കുന്നത്, പകരം, നിങ്ങൾ കൂടുതൽ കോഡ് ഷിപ്പുചെയ്യുന്നു എന്നാണ് അർത്ഥമാക്കുന്നത്, അതിനാൽ നിങ്ങൾ സാധാരണ ചെയ്യുന്നതിനേക്കാൾ കുറച്ച് ഉപഭോക്താക്കളിലേക്ക് എത്തുന്നു. വെബിൽ, മോശം ലോഡിംഗ് പ്രകടനം വലിയ തോതിലുള്ള ഉപേക്ഷിക്കൽ നിരക്കിലേക്ക് നയിക്കുകയും ബ്രാൻഡ് പ്രശസ്തിയെ വ്രണപ്പെടുത്തുകയും ചെയ്യുന്നു. ഉപകരണങ്ങളിൽ കുറച്ച് കോഡ് പ്രവർത്തിക്കുന്നു കൂടാതെ, പ്ലാറ്റ്ഫോമിന് മുകളിൽ കുറച്ച് JavaScript അബ്സ്ട്രാക്ഷനുകൾ ഉപയോഗിക്കുകയാണെങ്കിൽ നിങ്ങളുടെ ഉപഭോക്താക്കളുടെ ഉപകരണങ്ങളിൽ നിങ്ങൾ ഷിപ്പുചെയ്യുന്ന കോഡ് വേഗത്തിൽ പ്രവർത്തിക്കാൻ സാധ്യതയുണ്ട്. ഇത് ഒരുപക്ഷേ കൂടുതൽ പ്രതികരിക്കുന്നതും സ്ഥിരസ്ഥിതിയായി കൂടുതൽ ആക്സസ് ചെയ്യാവുന്നതുമാണ്. ഇതെല്ലാം കൂടുതൽ സന്തുഷ്ടരായ ഉപഭോക്താക്കളിലേക്ക് നയിക്കുന്നു. എൻ്റെ സഹപ്രവർത്തകനായ അലക്സ് റസ്സലിൻ്റെ വാർഷിക പ്രകടന അസമത്വ വിടവ് ബ്ലോഗ് പരിശോധിക്കുക, സമ്പത്തിൻ്റെ അസമത്വം കാരണം പ്രീമിയം ഉപകരണങ്ങൾ ശതകോടിക്കണക്കിന് ഉപയോക്താക്കളുള്ള വിപണികളിൽ വലിയ തോതിൽ ഇല്ലെന്ന് കാണിക്കുന്നു. ഈ വിടവ് കാലക്രമേണ വർദ്ധിച്ചുകൊണ്ടിരിക്കുന്നു.
ബിൽറ്റ്-ഇൻ മേസൺ ലേഔട്ട് ഉടൻ വരാനിരിക്കുന്ന ഒരു വെബ് പ്ലാറ്റ്ഫോം ഫീച്ചർ, ഞാൻ വളരെ ആവേശഭരിതനായത് CSS മേസൺ ആണ്.
കൊത്തുപണി എന്താണെന്ന് വിശദീകരിച്ചുകൊണ്ട് ഞാൻ ആരംഭിക്കാം. എന്താണ് കൊത്തുപണി വർഷങ്ങൾക്ക് മുമ്പ് Pinterest ജനപ്രിയമാക്കിയ ഒരു തരം ലേഔട്ടാണ് കൊത്തുപണി. ഇത് ഉള്ളടക്കത്തിൻ്റെ സ്വതന്ത്ര ട്രാക്കുകൾ സൃഷ്ടിക്കുന്നു, അതിനുള്ളിൽ ഇനങ്ങൾ ട്രാക്കിൻ്റെ ആരംഭത്തോട് കഴിയുന്നത്ര അടുത്ത് പാക്ക് ചെയ്യുന്നു.
പോർട്ട്ഫോളിയോകൾക്കും ഫോട്ടോ ഗാലറികൾക്കുമുള്ള മികച്ച ഓപ്ഷനായി പലരും കൊത്തുപണിയെ കാണുന്നു, അത് തീർച്ചയായും ചെയ്യാൻ കഴിയും. എന്നാൽ കൊത്തുപണി നിങ്ങൾ Pinterest-ൽ കാണുന്നതിനേക്കാൾ കൂടുതൽ വഴക്കമുള്ളതാണ്, മാത്രമല്ല ഇത് വെള്ളച്ചാട്ടം പോലുള്ള ലേഔട്ടുകളിൽ മാത്രം പരിമിതപ്പെടുന്നില്ല. ഒരു കൊത്തുപണി ലേഔട്ടിൽ:
ട്രാക്കുകൾ നിരകളോ വരികളോ ആകാം:
ഉള്ളടക്കത്തിൻ്റെ ട്രാക്കുകൾ എല്ലാം ഒരേ വലുപ്പത്തിൽ ആയിരിക്കണമെന്നില്ല:
ഇനങ്ങൾക്ക് ഒന്നിലധികം ട്രാക്കുകളിൽ വ്യാപിക്കാൻ കഴിയും:
ഇനങ്ങൾ പ്രത്യേക ട്രാക്കുകളിൽ സ്ഥാപിക്കാവുന്നതാണ്; അവർ എപ്പോഴും ഓട്ടോമാറ്റിക് പ്ലേസ്മെൻ്റ് അൽഗോരിതം പിന്തുടരേണ്ടതില്ല:
ഡെമോകൾ CSS Masonry-ൻ്റെ വരാനിരിക്കുന്ന നടപ്പിലാക്കൽ Chromium-ൽ ഉപയോഗിച്ച് ഞാൻ നിർമ്മിച്ച കുറച്ച് ലളിതമായ ഡെമോകൾ ഇതാ. ഒരു ഫോട്ടോ ഗാലറി ഡെമോ, ഇനങ്ങൾക്ക് (ഈ കേസിലെ ശീർഷകം) ഒന്നിലധികം ട്രാക്കുകൾ എങ്ങനെ വ്യാപിക്കാമെന്ന് കാണിക്കുന്നു:
വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ട്രാക്കുകൾ കാണിക്കുന്ന മറ്റൊരു ഫോട്ടോ ഗാലറി:
മറ്റുള്ളവയേക്കാൾ വീതിയുള്ള ചില ട്രാക്കുകളുള്ള ഒരു വാർത്താ സൈറ്റ് ലേഔട്ട്, കൂടാതെ ലേഔട്ടിൻ്റെ മുഴുവൻ വീതിയിലും വ്യാപിച്ചുകിടക്കുന്ന ചില ഇനങ്ങൾ:
നിർദ്ദിഷ്ട ട്രാക്കുകളിൽ ഇനങ്ങൾ സ്ഥാപിക്കാമെന്ന് കാണിക്കുന്ന ഒരു kanban ബോർഡ്:
കുറിപ്പ്: ദിമിക്ക വെബ് ഉപയോക്താക്കൾക്കും ഇതുവരെ ലഭ്യമല്ലാത്ത Chromium പതിപ്പ് ഉപയോഗിച്ചാണ് മുമ്പത്തെ ഡെമോകൾ നിർമ്മിച്ചിരിക്കുന്നത്, കാരണം CSS മേസൺ ബ്രൗസറുകളിൽ നടപ്പിലാക്കാൻ തുടങ്ങിയിട്ടേയുള്ളൂ. എന്നിരുന്നാലും, വെബ് ഡെവലപ്പർമാർ വർഷങ്ങളായി മെസൺറി ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ ലൈബ്രറികൾ സന്തോഷത്തോടെ ഉപയോഗിക്കുന്നു. ഇന്ന് കൊത്തുപണി ഉപയോഗിക്കുന്ന സൈറ്റുകൾ തീർച്ചയായും, കൊത്തുപണി ഇന്ന് വെബിൽ വളരെ സാധാരണമാണ്. Pinterest കൂടാതെ ഞാൻ കണ്ടെത്തിയ ചില ഉദാഹരണങ്ങൾ ഇതാ:
കുറച്ച് കൂടി, കുറച്ച് വ്യക്തമാണ്, ഉദാഹരണങ്ങൾ:
അപ്പോൾ, ഈ ലേഔട്ടുകൾ എങ്ങനെയാണ് സൃഷ്ടിക്കപ്പെട്ടത്? പരിഹാരമാർഗ്ഗങ്ങൾ പകരം ഒരു ഫ്ലെക്സ്ബോക്സ് ലേഔട്ട് ഉപയോഗിക്കുന്നത് ഞാൻ കണ്ടിട്ടുള്ള ഒരു തന്ത്രമാണ്, അതിൻ്റെ ദിശ കോളത്തിലേക്ക് മാറ്റുകയും അത് പൊതിയാൻ സജ്ജമാക്കുകയും ചെയ്യുന്നു. ഈ രീതിയിൽ, നിങ്ങൾക്ക് വിവിധ ഉയരങ്ങളിലുള്ള ഇനങ്ങൾ ഒന്നിലധികം സ്വതന്ത്ര നിരകളിൽ സ്ഥാപിക്കാൻ കഴിയും, ഇത് ഒരു കൊത്തുപണി ലേഔട്ടിൻ്റെ പ്രതീതി നൽകുന്നു:
എന്നിരുന്നാലും, ഈ പരിഹാരത്തിന് രണ്ട് പരിമിതികളുണ്ട്:
ഇനങ്ങളുടെ ക്രമം ഒരു യഥാർത്ഥ കൊത്തുപണി ലേഔട്ടിൽ നിന്ന് വ്യത്യസ്തമാണ്. Flexbox ഉപയോഗിച്ച്, ഇനങ്ങൾ ആദ്യം ആദ്യത്തെ കോളം പൂരിപ്പിക്കുക, അത് നിറയുമ്പോൾ, അടുത്ത കോളത്തിലേക്ക് പോകുക. കൊത്തുപണി ഉപയോഗിച്ച്, ഏത് ട്രാക്കിൽ (അല്ലെങ്കിൽ ഈ സാഹചര്യത്തിൽ കോളം) കൂടുതൽ ഇടം ലഭ്യമാണെങ്കിൽ ഇനങ്ങൾ അടുക്കും. മാത്രമല്ല, ഒരുപക്ഷേ അതിലും പ്രധാനമായി, ഈ പരിഹാരത്തിന് നിങ്ങൾ ഫ്ലെക്സ്ബോക്സ് കണ്ടെയ്നറിന് ഒരു നിശ്ചിത ഉയരം സജ്ജമാക്കേണ്ടതുണ്ട്; അല്ലെങ്കിൽ, പൊതിയൽ സംഭവിക്കില്ല.
മൂന്നാം കക്ഷി മേസൺ ലൈബ്രറികൾ കൂടുതൽ വിപുലമായ കേസുകൾക്കായി, ഡെവലപ്പർമാർ ലൈബ്രറികൾ ഉപയോഗിക്കുന്നു. ഇതിനുള്ള ഏറ്റവും അറിയപ്പെടുന്നതും ജനപ്രിയവുമായ ലൈബ്രറിയെ മെസൺറി എന്ന് വിളിക്കുന്നു, കൂടാതെ ഇത് NPM അനുസരിച്ച് ആഴ്ചയിൽ ഏകദേശം 200,000 തവണ ഡൗൺലോഡ് ചെയ്യപ്പെടുന്നു. സ്ക്വയർസ്പേസ് ഒരു കോഡ് ഇല്ലാത്ത ബദലായി ഒരു മേസൺ ലേഔട്ട് റെൻഡർ ചെയ്യുന്ന ഒരു ലേഔട്ട് ഘടകവും നൽകുന്നു, കൂടാതെ പല സൈറ്റുകളും ഇത് ഉപയോഗിക്കുന്നു. ഈ രണ്ട് ഓപ്ഷനുകളും ലേഔട്ടിൽ ഇനങ്ങൾ സ്ഥാപിക്കാൻ JavaScript കോഡ് ഉപയോഗിക്കുന്നു. ബിൽറ്റ്-ഇൻ കൊത്തുപണി ബിൽറ്റ്-ഇൻ CSS ഫീച്ചറായി ബ്രൗസറുകളിൽ മേസൺറി ഇപ്പോൾ പ്രത്യക്ഷപ്പെടാൻ തുടങ്ങിയതിൽ ഞാൻ വളരെ ആവേശത്തിലാണ്. കാലക്രമേണ, നിങ്ങൾ ഗ്രിഡ് അല്ലെങ്കിൽ ഫ്ലെക്സ്ബോക്സ് ചെയ്യുന്നത് പോലെ, അതായത്, പരിഹാരങ്ങളോ മൂന്നാം കക്ഷി കോഡോ ആവശ്യമില്ലാതെ തന്നെ നിങ്ങൾക്ക് കൊത്തുപണി ഉപയോഗിക്കാൻ കഴിയും. മൈക്രോസോഫ്റ്റിലെ എൻ്റെ ടീം Chromium ഓപ്പൺ സോഴ്സ് പ്രോജക്റ്റിൽ ബിൽറ്റ്-ഇൻ മേസൺ പിന്തുണ നടപ്പിലാക്കുന്നു, അത് എഡ്ജ്, ക്രോം എന്നിവയും മറ്റ് നിരവധി ബ്രൗസറുകളും അടിസ്ഥാനമാക്കിയുള്ളതാണ്. 2020-ൽ മേസൺറിയുടെ പരീക്ഷണാത്മക നിർവ്വഹണം നിർദ്ദേശിച്ച ആദ്യത്തെ ബ്രൗസർ വെണ്ടറായിരുന്നു മോസില്ല. കൂടാതെ ഈ പുതിയ വെബ് ലേഔട്ട് പ്രാകൃതമാക്കുന്നതിൽ ആപ്പിളും വളരെയധികം താൽപ്പര്യം പ്രകടിപ്പിച്ചിട്ടുണ്ട്. പൊതുവായ ദിശയെക്കുറിച്ചും ഒരു പുതിയ ഡിസ്പ്ലേ തരം ഡിസ്പ്ലേയെക്കുറിച്ചുമുള്ള സിഎസ്എസ് വർക്കിംഗ് ഗ്രൂപ്പിനുള്ളിലെ ധാരണയോടെയും ഫീച്ചർ സ്റ്റാൻഡേർഡൈസ് ചെയ്യുന്നതിനുള്ള ജോലികൾ പുരോഗമിക്കുകയാണ്: ഗ്രിഡ്-ലേൻസ്. നിങ്ങൾക്ക് കൊത്തുപണിയെക്കുറിച്ച് കൂടുതലറിയാനും പുരോഗതി ട്രാക്കുചെയ്യാനും താൽപ്പര്യമുണ്ടെങ്കിൽ, എൻ്റെ CSS കൊത്തുപണി ഉറവിടങ്ങളുടെ പേജ് പരിശോധിക്കുക. കാലക്രമേണ, ഗ്രിഡ് അല്ലെങ്കിൽ ഫ്ലെക്സ്ബോക്സ് പോലെ, കൊത്തുപണി ഒരു അടിസ്ഥാന സവിശേഷതയായി മാറുമ്പോൾ, ഞങ്ങൾക്ക് ഇത് ലളിതമായി ഉപയോഗിക്കാനും ഇതിൽ നിന്ന് പ്രയോജനം നേടാനും കഴിയും:
മികച്ച പ്രകടനം, മികച്ച പ്രതികരണശേഷി, ഉപയോഗ എളുപ്പവും ലളിതമായ കോഡും.
നമുക്ക് ഇവയെക്കുറിച്ച് കൂടുതൽ വിശദമായി പരിശോധിക്കാം. മെച്ചപ്പെട്ട പ്രകടനം നിങ്ങളുടെ സ്വന്തം കൊത്തുപണി പോലെയുള്ള ലേഔട്ട് സിസ്റ്റം ഉണ്ടാക്കുകയോ പകരം ഒരു മൂന്നാം കക്ഷി ലൈബ്രറി ഉപയോഗിക്കുകയോ ചെയ്യുക എന്നതിനർത്ഥം സ്ക്രീനിൽ ഇനങ്ങൾ സ്ഥാപിക്കാൻ നിങ്ങൾ JavaScript കോഡ് പ്രവർത്തിപ്പിക്കേണ്ടി വരും എന്നാണ്. ഈ കോഡ് റെൻഡർ ബ്ലോക്കിംഗ് ആയിരിക്കുമെന്നും ഇതിനർത്ഥം. തീർച്ചയായും, ഒന്നുകിൽ ഒന്നും ദൃശ്യമാകില്ല, അല്ലെങ്കിൽ ആ JavaScript കോഡ് പ്രവർത്തിക്കുന്നത് വരെ കാര്യങ്ങൾ ശരിയായ സ്ഥലങ്ങളിലോ ശരിയായ വലുപ്പത്തിലോ ആയിരിക്കില്ല. ഒരു വെബ്പേജിൻ്റെ പ്രധാന ഭാഗത്തിനായി കൊത്തുപണി ലേഔട്ട് പലപ്പോഴും ഉപയോഗിക്കാറുണ്ട്, അതിനർത്ഥം കോഡ് നിങ്ങളുടെ പ്രധാന ഉള്ളടക്കത്തെ മറ്റേതെങ്കിലും വിധത്തിൽ ദൃശ്യമാക്കും, നിങ്ങളുടെ LCP അല്ലെങ്കിൽ ഏറ്റവും വലിയ ഉള്ളടക്കമുള്ള പെയിൻ്റ് മെട്രിക് തരംതാഴ്ത്തുന്നു, ഇത് ഗ്രഹിച്ച പ്രകടനത്തിലും സെർച്ച് എഞ്ചിൻ ഒപ്റ്റിമൈസേഷനിലും വലിയ പങ്ക് വഹിക്കുന്നു. ഞാൻ Masonry JS ലൈബ്രറി ഒരു ലളിതമായ ലേഔട്ട് ഉപയോഗിച്ചും DevTools-ൽ വേഗത കുറഞ്ഞ 4G കണക്ഷൻ അനുകരിച്ചും പരീക്ഷിച്ചു. ലൈബ്രറി വളരെ വലുതല്ല (24KB, 7.8KB ജിസിപ്പ് ചെയ്തത്), പക്ഷേ എൻ്റെ ടെസ്റ്റ് സാഹചര്യങ്ങളിൽ ലോഡുചെയ്യാൻ 600മിഎസ് എടുത്തു. മേസൺ ലൈബ്രറിക്കായി 600 എംഎസ് ലോഡിംഗ് സമയം നീണ്ടുവെന്നും അത് നടക്കുമ്പോൾ മറ്റ് റെൻഡറിംഗ് പ്രവർത്തനങ്ങളൊന്നും നടന്നിട്ടില്ലെന്നും കാണിക്കുന്ന ഒരു പ്രകടന റെക്കോർഡിംഗ് ഇതാ:
കൂടാതെ, പ്രാരംഭ ലോഡ് സമയത്തിന് ശേഷം, ഡൗൺലോഡ് ചെയ്ത സ്ക്രിപ്റ്റ് പിന്നീട് പാഴ്സ് ചെയ്യുകയും കംപൈൽ ചെയ്യുകയും തുടർന്ന് പ്രവർത്തിപ്പിക്കുകയും ചെയ്യേണ്ടതുണ്ട്. ഇവയെല്ലാം, മുമ്പ് സൂചിപ്പിച്ചതുപോലെ, പേജിൻ്റെ റെൻഡറിംഗ് തടയുകയായിരുന്നു. ബ്രൗസറിൽ ഒരു ബിൽറ്റ്-ഇൻ മേസൺ ഇംപ്ലിമെൻ്റേഷൻ ഉള്ളതിനാൽ, ലോഡ് ചെയ്യാനും പ്രവർത്തിപ്പിക്കാനും ഞങ്ങൾക്ക് ഒരു സ്ക്രിപ്റ്റ് ഉണ്ടാകില്ല. പ്രാരംഭ പേജ് റെൻഡറിംഗ് ഘട്ടത്തിൽ ബ്രൗസർ എഞ്ചിൻ അതിൻ്റെ കാര്യം ചെയ്യും. മികച്ച പ്രതികരണശേഷി ഒരു പേജ് ആദ്യം ലോഡ് ചെയ്യുമ്പോൾ സമാനമായി, ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുന്നത് ആ പേജിലെ ലേഔട്ട് വീണ്ടും റെൻഡർ ചെയ്യുന്നതിലേക്ക് നയിക്കുന്നു. ഈ ഘട്ടത്തിൽ, എന്നിരുന്നാലും, പേജ് Masonry JS ലൈബ്രറിയാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, സ്ക്രിപ്റ്റ് വീണ്ടും ലോഡുചെയ്യേണ്ട ആവശ്യമില്ല, കാരണം അത് ഇതിനകം തന്നെഇവിടെ. എന്നിരുന്നാലും, ശരിയായ സ്ഥലങ്ങളിൽ ഇനങ്ങൾ നീക്കുന്ന കോഡ് പ്രവർത്തിപ്പിക്കേണ്ടതുണ്ട്. ഇപ്പോൾ ഈ പ്രത്യേക ലൈബ്രറി പേജ് ലോഡ് ചെയ്യുമ്പോൾ ഇത് ചെയ്യുന്നത് വളരെ വേഗത്തിലാണെന്ന് തോന്നുന്നു. എന്നിരുന്നാലും, വിൻഡോ വലുപ്പം മാറ്റുമ്പോൾ ഇനങ്ങൾക്ക് മറ്റൊരു സ്ഥലത്തേക്ക് മാറേണ്ടിവരുമ്പോൾ ഇത് അവയെ ആനിമേറ്റ് ചെയ്യുന്നു, ഇത് വലിയ വ്യത്യാസമുണ്ടാക്കുന്നു. തീർച്ചയായും, ഞങ്ങൾ ഡെവലപ്പർമാർ ചെയ്യുന്നതുപോലെ ഉപയോക്താക്കൾ അവരുടെ ബ്രൗസർ വിൻഡോകളുടെ വലുപ്പം മാറ്റാൻ സമയം ചെലവഴിക്കുന്നില്ല. എന്നാൽ ഈ ആനിമേറ്റുചെയ്ത വലുപ്പം മാറ്റുന്ന അനുഭവം വളരെ അസ്വസ്ഥമാക്കുകയും പേജ് അതിൻ്റെ പുതിയ വലുപ്പവുമായി പൊരുത്തപ്പെടാൻ എടുക്കുന്ന സമയം വർദ്ധിപ്പിക്കുകയും ചെയ്യും. ഉപയോഗ എളുപ്പവും ലളിതമായ കോഡും ഒരു വെബ് ഫീച്ചർ ഉപയോഗിക്കുന്നത് എത്ര എളുപ്പമാണ്, കോഡ് എത്ര ലളിതമായി കാണപ്പെടുന്നു എന്നിവയാണ് നിങ്ങളുടെ ടീമിന് വലിയ മാറ്റമുണ്ടാക്കാൻ കഴിയുന്ന പ്രധാന ഘടകങ്ങൾ. അന്തിമ ഉപയോക്തൃ അനുഭവം പോലെ അവ ഒരിക്കലും പ്രധാനമാകില്ല, പക്ഷേ ഡെവലപ്പർ അനുഭവം പരിപാലനക്ഷമതയെ ബാധിക്കുന്നു. ഒരു ബിൽറ്റ്-ഇൻ വെബ് ഫീച്ചർ ഉപയോഗിക്കുന്നത് ആ മുൻവശത്ത് പ്രധാനപ്പെട്ട നേട്ടങ്ങൾ നൽകുന്നു:
HTML, CSS, JS എന്നിവയെക്കുറിച്ച് ഇതിനകം അറിയാവുന്ന ഡെവലപ്പർമാർക്ക് ആ ഫീച്ചർ എളുപ്പത്തിൽ ഉപയോഗിക്കാനാകും, കാരണം ഇത് നന്നായി സംയോജിപ്പിക്കാനും മറ്റ് വെബ് പ്ലാറ്റ്ഫോമുകളുമായി പൊരുത്തപ്പെടാനും രൂപകൽപ്പന ചെയ്തിരിക്കുന്നു. ഫീച്ചർ ഉപയോഗിക്കുന്ന വിധത്തിൽ മാറ്റങ്ങൾ വരുത്താനുള്ള സാധ്യതയില്ല. ആ ഫീച്ചർ ഒഴിവാക്കപ്പെടുകയോ പരിപാലിക്കപ്പെടാതിരിക്കുകയോ ചെയ്യാനുള്ള സാധ്യത ഏതാണ്ട് പൂജ്യമാണ്.
ബിൽറ്റ്-ഇൻ കൊത്തുപണിയുടെ കാര്യത്തിൽ, ഇത് ഒരു ലേഔട്ട് പ്രാകൃതമായതിനാൽ, ഗ്രിഡ് അല്ലെങ്കിൽ ഫ്ലെക്സ്ബോക്സ് പോലെ, നിങ്ങൾ CSS-ൽ നിന്ന് ഇത് ഉപയോഗിക്കുന്നു, JS ഉൾപ്പെട്ടിട്ടില്ല. കൂടാതെ, ഗ്യാപ്പ് പോലെയുള്ള മറ്റ് ലേഔട്ടുമായി ബന്ധപ്പെട്ട CSS പ്രോപ്പർട്ടികൾ നിങ്ങൾ പ്രതീക്ഷിക്കുന്നത് പോലെ പ്രവർത്തിക്കുന്നു. അറിയാൻ തന്ത്രങ്ങളോ പരിഹാര മാർഗങ്ങളോ ഇല്ല, നിങ്ങൾ പഠിക്കുന്ന കാര്യങ്ങൾ MDN-ൽ രേഖപ്പെടുത്തിയിട്ടുണ്ട്. Masonry JS lib-ന്, ഇനീഷ്യലൈസേഷൻ അൽപ്പം സങ്കീർണ്ണമാണ്: നിരയും വിടവ് വലുപ്പവും സജ്ജീകരിക്കുന്നതിന് ഇതിന് ഒരു നിർദ്ദിഷ്ട വാക്യഘടനയുള്ള ഒരു ഡാറ്റ ആട്രിബ്യൂട്ട്, മറഞ്ഞിരിക്കുന്ന HTML ഘടകങ്ങൾ എന്നിവ ആവശ്യമാണ്. കൂടാതെ, നിങ്ങൾക്ക് കോളങ്ങൾ സ്പാൻ ചെയ്യണമെങ്കിൽ, പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ നിങ്ങൾ സ്വയം വിടവ് വലുപ്പം ഉൾപ്പെടുത്തേണ്ടതുണ്ട്:
<ശൈലി> .ട്രാക്ക്-സൈസർ, .ഇനം { വീതി: 20%; } .ഗട്ടർ-സൈസർ { വീതി: 1rem; } .ഇനം { ഉയരം: 100px; മാർജിൻ-ബ്ലോക്ക്-എൻഡ്: 1rem; } .ഇനം:ഒമ്പത്-കുട്ടി(ഒറ്റത്) { ഉയരം: 200px; } .item--width2 { വീതി: കാൽക് (40% + 1rem); }
ഒരു ബിൽറ്റ്-ഇൻ മേസൺ നടപ്പിലാക്കൽ എങ്ങനെയായിരിക്കുമെന്ന് നമുക്ക് ഇതിനെ താരതമ്യം ചെയ്യാം: <ശൈലി> .കണ്ടെയ്നർ { ഡിസ്പ്ലേ: ഗ്രിഡ്-ലേനുകൾ; ഗ്രിഡ്-പാതകൾ: ആവർത്തിക്കുക(4, 20%); വിടവ്: 1rem; } .ഇനം { ഉയരം: 100px; } .ഇനം:ഒമ്പത്-കുട്ടി(ഒറ്റത്) { ഉയരം: 200px; } .item--width2 { ഗ്രിഡ് കോളം: സ്പാൻ 2; }
ഗ്രിഡിലെന്നപോലെ സ്പാൻ 2 ഉപയോഗിച്ച് സ്പാനിംഗ് ട്രാക്കുകൾ ചെയ്തിരിക്കുന്ന ഗ്യാപ്പ് പോലുള്ള കാര്യങ്ങൾ ഉപയോഗിക്കാൻ കഴിയുന്ന ലളിതവും കൂടുതൽ ഒതുക്കമുള്ളതുമായ കോഡ്, വിടവിൻ്റെ വലുപ്പം ഉൾപ്പെടുന്ന ശരിയായ വീതി നിങ്ങൾ കണക്കാക്കേണ്ടതില്ല. എന്താണ് ലഭ്യമെന്നും അത് എപ്പോൾ ലഭ്യമാകുമെന്നും എങ്ങനെ അറിയും? മൊത്തത്തിൽ, ചോദ്യം നിങ്ങൾ ഒരു JS ലൈബ്രറിയിൽ ബിൽറ്റ്-ഇൻ മേസൺരി ഉപയോഗിക്കണമോ എന്നതല്ല, മറിച്ച് എപ്പോഴാണ്. Masonry JS ലൈബ്രറി അതിശയകരമാണ്, കൂടാതെ നിരവധി വർഷങ്ങളായി വെബ് പ്ലാറ്റ്ഫോമിലെ വിടവ് നികത്തുന്നു, കൂടാതെ നിരവധി സന്തുഷ്ടരായ ഡെവലപ്പർമാർക്കും ഉപയോക്താക്കൾക്കും. നിങ്ങൾ ഒരു ബിൽറ്റ്-ഇൻ മേസൺ ഇംപ്ലിമെൻ്റേഷനുമായി താരതമ്യം ചെയ്താൽ ഇതിന് കുറച്ച് പോരായ്മകളുണ്ട്, പക്ഷേ അത് നടപ്പിലാക്കാൻ തയ്യാറായില്ലെങ്കിൽ അവ പ്രധാനമല്ല. ഞാൻ ഒരു ബ്രൗസർ വെണ്ടറിൽ ജോലി ചെയ്യുന്നതിനാൽ ഈ രസകരമായ പുതിയ വെബ് പ്ലാറ്റ്ഫോം സവിശേഷതകൾ ലിസ്റ്റ് ചെയ്യുന്നത് എനിക്ക് എളുപ്പമാണ്, അതിനാൽ എന്താണ് വരാൻ പോകുന്നതെന്ന് അറിയാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. എന്നാൽ പുതിയ കാര്യങ്ങളുടെ ട്രാക്ക് സൂക്ഷിക്കുന്നത് ബുദ്ധിമുട്ടാണെന്ന് ഡെവലപ്പർമാർ പലപ്പോഴും പങ്കുവെക്കുന്നു, സർവേയ്ക്ക് ശേഷം സർവേ നടത്തുന്നു. അറിവ് നിലനിർത്തുന്നത് ബുദ്ധിമുട്ടാണ്, എന്തായാലും കമ്പനികൾ എപ്പോഴും പഠനത്തിന് മുൻഗണന നൽകുന്നില്ല. ഇത് സഹായിക്കുന്നതിന്, ലളിതവും ഒതുക്കമുള്ളതുമായ രീതിയിൽ അപ്ഡേറ്റുകൾ നൽകുന്ന കുറച്ച് ഉറവിടങ്ങൾ ഇതാ, അതിനാൽ നിങ്ങൾക്ക് ആവശ്യമുള്ള വിവരങ്ങൾ വേഗത്തിൽ ലഭിക്കും:
വെബ് പ്ലാറ്റ്ഫോം എക്സ്പ്ലോറർ സൈറ്റിൻ്റെ സവിശേഷതകൾ: അതിൻ്റെ റിലീസ് കുറിപ്പുകൾ പേജിൽ നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടാകാം. കൂടാതെ, നിങ്ങൾക്ക് ആർഎസ്എസ് ഇഷ്ടമാണെങ്കിൽ, റിലീസ് നോട്ട്സ് ഫീഡും പുതുതായി ലഭ്യമായതും വ്യാപകമായി ലഭ്യമായതുമായ ഫീഡുകളും പരിശോധിക്കുക.
വെബ്പ്ലാറ്റ്ഫോം സ്റ്റാറ്റസ് ഡാഷ്ബോർഡ്: അതിൻ്റെ വിവിധ അടിസ്ഥാന വർഷ പേജുകൾ നിങ്ങൾക്ക് ഇഷ്ടപ്പെട്ടേക്കാം.
Chrome പ്ലാറ്റ്ഫോം സ്റ്റാറ്റസിൻ്റെ റോഡ്മാപ്പ് പേജ്.
നിങ്ങൾക്ക് കുറച്ചുകൂടി സമയമുണ്ടെങ്കിൽ, ബ്രൗസർ വെണ്ടർമാരുടെ റിലീസ് കുറിപ്പുകളിലും നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടാകാം:
Chrome എഡ്ജ് ഫയർഫോക്സ് സഫാരി
കൂടുതൽ വിഭവങ്ങൾക്കായി, എൻ്റെ നാവിഗേറ്റിംഗ് ദി വെബ് പ്ലാറ്റ്ഫോം ചീറ്റ്ഷീറ്റ് പരിശോധിക്കുക. എൻ്റെ കാര്യം ഇപ്പോഴും നടപ്പിലാക്കിയിട്ടില്ല അത് പ്രശ്നത്തിൻ്റെ മറുവശമാണ്. ട്രാക്ക് സൂക്ഷിക്കാനുള്ള സമയവും ഊർജവും വഴികളും നിങ്ങൾ കണ്ടെത്തിയാലും, നിങ്ങളുടെ ശബ്ദം കേൾക്കുന്നതിലും നിങ്ങളുടെ പ്രിയപ്പെട്ട ഫീച്ചറുകൾ നടപ്പിലാക്കുന്നതിലും ഇപ്പോഴും നിരാശയുണ്ട്. ഒരു നിർദ്ദിഷ്ട ബഗ് പരിഹരിക്കപ്പെടുന്നതിന് അല്ലെങ്കിൽ ഒരു പ്രത്യേക സവിശേഷത ഇപ്പോഴും നഷ്ടമായിരിക്കുന്ന ബ്രൗസറിൽ ഷിപ്പുചെയ്യുന്നതിനായി നിങ്ങൾ വർഷങ്ങളായി കാത്തിരിക്കുന്നുണ്ടാകാം. ഞാൻ പറയുന്നത് ബ്രൗസർ വെണ്ടർമാർ ശ്രദ്ധിക്കുക എന്നതാണ്. ഡെവലപ്പർ സിഗ്നലുകളും ഫീഡ്ബാക്കും ചർച്ച ചെയ്യുന്ന നിരവധി ക്രോസ്-ഓർഗനൈസേഷൻ ടീമുകളുടെ ഭാഗമാണ് ഞാൻ. ഫോറങ്ങൾ, ഓപ്പൺ സോഴ്സ് പ്രോജക്റ്റുകൾ, ബ്ലോഗുകൾ, സർവേകൾ എന്നിവയിൽ ഓരോ ബ്രൗസർ വെണ്ടർമാരുടെയും ആന്തരികവും ബാഹ്യ/പൊതുവായതുമായ നിരവധി ഫീഡ്ബാക്ക് ഉറവിടങ്ങൾ ഞങ്ങൾ പരിശോധിക്കുന്നു. കൂടാതെ, ഡെവലപ്പർമാർക്ക് അവരുടെ പ്രത്യേക ആവശ്യങ്ങൾ പങ്കിടുന്നതിനും കേസുകൾ ഉപയോഗിക്കുന്നതിനുമുള്ള മികച്ച മാർഗങ്ങൾ സൃഷ്ടിക്കാൻ ഞങ്ങൾ എപ്പോഴും ശ്രമിക്കുന്നു. അതിനാൽ, നിങ്ങൾക്ക് കഴിയുമെങ്കിൽ, ബ്രൗസർ വെണ്ടർമാരിൽ നിന്ന് കൂടുതൽ ആവശ്യപ്പെടുകയും നിങ്ങൾക്ക് ആവശ്യമുള്ള ഫീച്ചറുകൾ നടപ്പിലാക്കാൻ ഞങ്ങളെ സമ്മർദ്ദത്തിലാക്കുകയും ചെയ്യുക. ഇതിന് സമയമെടുക്കുമെന്നും ഭയപ്പെടുത്താനും കഴിയും (പ്രവേശനത്തിനുള്ള ഉയർന്ന തടസ്സം പരാമർശിക്കേണ്ടതില്ല), പക്ഷേ ഇത് പ്രവർത്തിക്കുന്നു. നിങ്ങളുടെ (അല്ലെങ്കിൽ നിങ്ങളുടെ കമ്പനിയുടെ) ശബ്ദം കേൾക്കാൻ കഴിയുന്ന ചില വഴികൾ ഇതാ: JS-ൻ്റെ വാർഷിക നില, CSS-ൻ്റെ അവസ്ഥ, HTML സർവേകളുടെ അവസ്ഥ എന്നിവ എടുക്കുക. ബ്രൗസർ വെണ്ടർമാർ അവരുടെ ജോലിക്ക് എങ്ങനെ മുൻഗണന നൽകുന്നു എന്നതിൽ അവർ വലിയ പങ്ക് വഹിക്കുന്നു. ബ്രൗസറുകളിലുടനീളം സ്ഥിരമായി നടപ്പിലാക്കാൻ നിങ്ങൾക്ക് ഒരു നിർദ്ദിഷ്ട സ്റ്റാൻഡേർഡ് അധിഷ്ഠിത API ആവശ്യമുണ്ടെങ്കിൽ, അടുത്ത ഇൻ്ററോപ്പ് പ്രോജക്റ്റ് ആവർത്തനത്തിൽ ഒരു നിർദ്ദേശം സമർപ്പിക്കുന്നത് പരിഗണിക്കുക. ഇതിന് കൂടുതൽ സമയം ആവശ്യമാണ്, എന്നാൽ Shopify-യും RUMvision-ഉം Interop 2026-നുള്ള അവരുടെ വിഷ് ലിസ്റ്റുകൾ എങ്ങനെ പങ്കിട്ടുവെന്ന് പരിഗണിക്കുക. ബ്രൗസർ വെണ്ടർമാർക്ക് മുൻഗണന നൽകാൻ ഇതുപോലുള്ള വിശദമായ വിവരങ്ങൾ വളരെ ഉപയോഗപ്രദമാകും. ബ്രൗസർ വെണ്ടർമാരെ സ്വാധീനിക്കാൻ കൂടുതൽ ഉപയോഗപ്രദമായ ലിങ്കുകൾക്കായി, എൻ്റെ നാവിഗേറ്റിംഗ് ദി വെബ് പ്ലാറ്റ്ഫോം ചീറ്റ്ഷീറ്റ് പരിശോധിക്കുക. ഉപസംഹാരം അവസാനിപ്പിക്കാൻ, ഈ ലേഖനം നിങ്ങൾക്ക് ചിന്തിക്കാൻ കുറച്ച് കാര്യങ്ങൾ ബാക്കിവെച്ചിട്ടുണ്ടെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു:
കൊത്തുപണികൾക്കും വരാനിരിക്കുന്ന മറ്റ് വെബ് ഫീച്ചറുകൾക്കുമുള്ള ആവേശം. നിങ്ങൾ ഉപയോഗിക്കാൻ തുടങ്ങിയേക്കാവുന്ന കുറച്ച് വെബ് സവിശേഷതകൾ. ബിൽറ്റ്-ഇൻ ഫീച്ചറുകൾക്ക് അനുകൂലമായി നിങ്ങൾക്ക് നീക്കം ചെയ്യാൻ കഴിഞ്ഞേക്കാവുന്ന ഇഷ്ടാനുസൃത അല്ലെങ്കിൽ മൂന്നാം കക്ഷി കോഡിൻ്റെ കുറച്ച് ഭാഗങ്ങൾ. എന്താണ് വരുന്നതെന്ന് ട്രാക്ക് ചെയ്യാനും ബ്രൗസർ വെണ്ടർമാരെ സ്വാധീനിക്കാനും ചില വഴികൾ.
അതിലും പ്രധാനമായി, വെബ് പ്ലാറ്റ്ഫോം അതിൻ്റെ പൂർണ്ണ ശേഷിയിൽ ഉപയോഗിക്കുന്നതിൻ്റെ പ്രയോജനങ്ങളെക്കുറിച്ച് ഞാൻ നിങ്ങളെ ബോധ്യപ്പെടുത്തി എന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.
