લગભગ 15 વર્ષ પહેલાં, હું એક કંપનીમાં કામ કરતો હતો જ્યાં અમે ટ્રાવેલ એજન્ટ્સ, એરપોર્ટ કામદારો અને એરલાઇન કંપનીઓ માટે એપ્સ બનાવી હતી. અમે UI ઘટકો અને સિંગલ-પેજ એપ્લિકેશન ક્ષમતાઓ માટે અમારું પોતાનું ઇન-હાઉસ ફ્રેમવર્ક પણ બનાવ્યું છે. અમારી પાસે દરેક વસ્તુ માટે ઘટકો હતા: ફીલ્ડ્સ, બટન્સ, ટૅબ્સ, રેન્જ્સ, ડેટાટેબલ્સ, મેનૂઝ, ડેટપિકર્સ, સિલેક્ટ્સ અને મલ્ટિસિલેક્ટ્સ. અમારી પાસે એક div ઘટક પણ હતો. અમારું div ઘટક માર્ગ દ્વારા મહાન હતું, તે અમને બધા બ્રાઉઝર પર ગોળાકાર ખૂણાઓ કરવાની મંજૂરી આપે છે, જે માને કે ન માને, તે સમયે કરવું સરળ બાબત ન હતી.
અમારું કાર્ય અમારા ઇતિહાસના એક તબક્કે થયું જ્યારે JS, Ajax અને ડાયનેમિક HTML ને એક ક્રાંતિ તરીકે જોવામાં આવ્યા જેણે અમને ભવિષ્યમાં લાવ્યો. અચાનક, અમે પૃષ્ઠને ગતિશીલ રીતે અપડેટ કરી શકીએ છીએ, સર્વરમાંથી ડેટા મેળવી શકીએ છીએ અને અન્ય પૃષ્ઠો પર નેવિગેટ કરવાનું ટાળી શકીએ છીએ, જે ધીમા તરીકે જોવામાં આવ્યું હતું અને બે પૃષ્ઠો વચ્ચે સ્ક્રીન પર એક મોટો સફેદ લંબચોરસ ફ્લૅશ થયો હતો. જેફ એટવુડ (સ્ટેકઓવરફ્લોના સ્થાપક) દ્વારા લોકપ્રિય બનાવવામાં આવેલ એક શબ્દસમૂહ હતો, જે વાંચે છે: "કોઈપણ એપ્લિકેશન જે JavaScript માં લખી શકાય છે તે આખરે JavaScript માં લખવામાં આવશે." - જેફ એટવુડ
તે સમયે અમારા માટે, આ ખરેખર જઈને તે એપ્લિકેશન્સ બનાવવાની હિંમત જેવું લાગ્યું. તે JS સાથે બધું કરવા માટે એક ધાબળો મંજૂરી જેવું લાગ્યું. તેથી અમે JS સાથે બધું કર્યું, અને અમે વસ્તુઓ કરવાની અન્ય રીતો પર સંશોધન કરવા માટે ખરેખર સમય લીધો નથી. HTML અને CSS શું કરી શકે છે તે યોગ્ય રીતે શીખવા માટે અમને ખરેખર પ્રોત્સાહન લાગ્યું નથી. અમે ખરેખર વેબને સંપૂર્ણ રીતે વિકસિત એપ્લિકેશન પ્લેટફોર્મ તરીકે જોતા નથી. અમે મોટે ભાગે તેને એવી વસ્તુ તરીકે જોતા હતા જે અમને કામ કરવા માટે જરૂરી છે, ખાસ કરીને જ્યારે તે બ્રાઉઝર સપોર્ટની વાત આવે છે. વસ્તુઓ પૂર્ણ કરવા માટે અમે તેના પર વધુ જેએસ ફેંકી શકીએ છીએ. વેબ કેવી રીતે કામ કરે છે અને પ્લેટફોર્મ પર શું ઉપલબ્ધ હતું તે વિશે વધુ જાણવા માટે શું સમય કાઢીને મને મદદ કરી છે? ચોક્કસ, હું સંભવતઃ કોડનો સમૂહ હજામત કરી શક્યો હોત જેની ખરેખર જરૂર ન હતી. પરંતુ, તે સમયે, કદાચ એટલું નહીં. તમે જુઓ, બ્રાઉઝર તફાવતો તે સમયે ખૂબ નોંધપાત્ર હતા. આ એવો સમય હતો જ્યારે ઈન્ટરનેટ એક્સ્પ્લોરર હજુ પણ પ્રબળ બ્રાઉઝર હતું, જેમાં ફાયરફોક્સ બીજા સ્થાને હતું, પરંતુ ક્રોમ ઝડપથી લોકપ્રિયતા મેળવીને બજારહિસ્સો ગુમાવવાનું શરૂ કર્યું હતું. જો કે ક્રોમ અને ફાયરફોક્સ વેબ ધોરણો પર સંમત થવામાં ખૂબ સારા હતા, જે વાતાવરણમાં અમારી એપ્લિકેશનો ચાલી રહી હતી તેનો અર્થ એ છે કે અમારે લાંબા સમય સુધી IE6 ને સમર્થન આપવું પડ્યું. જ્યારે અમને IE8 ને સપોર્ટ કરવાની મંજૂરી આપવામાં આવી હતી, ત્યારે પણ અમારે બ્રાઉઝર્સ વચ્ચેના ઘણા તફાવતો સાથે વ્યવહાર કરવો પડ્યો હતો. એટલું જ નહીં, પરંતુ તે સમયના વેબ પાસે પ્લેટફોર્મમાં જ બનેલી એટલી બધી ક્ષમતાઓ નહોતી.
આજ સુધી ફાસ્ટ ફોરવર્ડ. વસ્તુઓ જબરદસ્ત બદલાઈ ગઈ છે. અમારી પાસે આ ક્ષમતાઓ પહેલા કરતાં વધુ છે એટલું જ નહીં, પરંતુ તે જે દરે ઉપલબ્ધ થાય છે તે પણ વધ્યું છે. મને ફરીથી પ્રશ્ન પૂછવા દો, તો: શું વેબ કેવી રીતે કાર્ય કરે છે અને પ્લેટફોર્મ પર શું ઉપલબ્ધ છે તે વિશે વધુ જાણવા માટે સમય કાઢવો તમને આજે મદદ કરશે? ચોક્કસ હા. આજે વેબ પ્લેટફોર્મને સમજવાનું અને તેનો ઉપયોગ કરવાનું શીખવાથી તમને અન્ય ડેવલપર્સ કરતાં ઘણો ફાયદો થાય છે. પછી ભલે તમે કાર્યક્ષમતા, સુલભતા, પ્રતિભાવ, તે બધા પર એકસાથે કામ કરો, અથવા ફક્ત UI સુવિધાઓ શિપિંગ કરો, જો તમે તેને એક જવાબદાર એન્જિનિયર તરીકે કરવા માંગતા હો, તો તમારા માટે ઉપલબ્ધ સાધનોને જાણવું તમને તમારા લક્ષ્યોને વધુ ઝડપથી અને વધુ સારી રીતે પ્રાપ્ત કરવામાં મદદ કરે છે. કેટલીક વસ્તુઓ જે તમને હવે લાઇબ્રેરીની જરૂર નથી આજે કયા બ્રાઉઝર્સ સપોર્ટ કરે છે તે જાણીને, પછી, પ્રશ્ન એ છે: આપણે શું ખાઈ શકીએ? શું આપણને 2025 માં ગોળાકાર ખૂણાઓ કરવા માટે div ઘટકની જરૂર છે? અલબત્ત, અમે નથી. બોર્ડર-રેડિયસ પ્રોપર્ટી આ સમયે 15 વર્ષથી વધુ સમયથી ઉપયોગમાં લેવાતા તમામ બ્રાઉઝર્સ દ્વારા સપોર્ટેડ છે. અને કોર્નર-આકાર પણ ટૂંક સમયમાં આવી રહ્યો છે, ફેન્સી કોર્નર્સ માટે પણ. ચાલો પ્રમાણમાં તાજેતરની સુવિધાઓ પર એક નજર કરીએ જે હવે તમામ મુખ્ય બ્રાઉઝર્સમાં ઉપલબ્ધ છે, અને જેનો ઉપયોગ તમે તમારા કોડબેઝમાં અસ્તિત્વમાં રહેલી નિર્ભરતાને બદલવા માટે કરી શકો છો. મુદ્દો એ નથી કે તમારી બધી પ્રિય લાઇબ્રેરીઓને તરત જ ખોદી નાખો અને તમારા કોડબેઝને ફરીથી લખો. બાકીની બધી બાબતો માટે, તમારે પહેલા બ્રાઉઝર સપોર્ટને ધ્યાનમાં લેવાની જરૂર પડશે અને તમારા પ્રોજેક્ટ માટે વિશિષ્ટ અન્ય પરિબળોના આધારે નિર્ણય લેવો પડશે. નીચેની સુવિધાઓ ત્રણ મુખ્ય બ્રાઉઝર એન્જિન (ક્રોમિયમ, વેબકિટ અને ગેકો) માં લાગુ કરવામાં આવી છે, પરંતુ તમારી પાસે વિવિધ બ્રાઉઝર સપોર્ટ આવશ્યકતાઓ હોઈ શકે છે જે તમને તરત જ તેનો ઉપયોગ કરવાથી અટકાવે છે. આ વિશેષતાઓ વિશે જાણવા માટે હજુ પણ સારો સમય છે, અને કદાચ અમુક સમયે તેનો ઉપયોગ કરવાની યોજના બનાવો. પોપોવર્સ અને ડાયલોગ્સ Popover API,
ચોક્કસ, તમારા ઈન્ટરનેટ કનેક્શનની ઝડપ પણ કદાચ વધી ગઈ છે, પરંતુ દરેક માટે એવું નથી. અને દરેક પાસે સમાન ઉપકરણ ક્ષમતાઓ પણ નથી. તમે પ્લેટફોર્મ સાથે જે વસ્તુઓ કરી શકો છો તેના માટે તૃતીય-પક્ષ કોડ ખેંચવાનો, તેના બદલે, મોટે ભાગે એનો અર્થ થાય છે કે તમે વધુ કોડ મોકલો છો અને તેથી તમે સામાન્ય રીતે કરતા ઓછા ગ્રાહકો સુધી પહોંચો છો. વેબ પર, ખરાબ લોડિંગ પ્રદર્શન મોટા ત્યાગ દર તરફ દોરી જાય છે અને બ્રાન્ડની પ્રતિષ્ઠાને નુકસાન પહોંચાડે છે. ઉપકરણો પર ઓછા કોડ ચાલી રહ્યા છે વધુમાં, તમે તમારા ગ્રાહકોના ઉપકરણો પર જે કોડ મોકલો છો તે કદાચ ઝડપથી ચાલે છે જો તે પ્લેટફોર્મની ટોચ પર ઓછા JavaScript એબ્સ્ટ્રેક્શનનો ઉપયોગ કરે છે. તે કદાચ વધુ રિસ્પોન્સિવ અને ડિફૉલ્ટ રૂપે વધુ ઍક્સેસિબલ પણ છે. આ બધું વધુ અને ખુશ ગ્રાહકો તરફ દોરી જાય છે. મારા સાથીદાર એલેક્સ રસેલનો વાર્ષિક પ્રદર્શન અસમાનતા ગેપ બ્લોગ તપાસો, જે દર્શાવે છે કે સંપત્તિની અસમાનતાને કારણે અબજો વપરાશકર્તાઓ ધરાવતા બજારોમાંથી પ્રીમિયમ ઉપકરણો મોટાભાગે ગેરહાજર છે. અને આ અંતર માત્ર સમય સાથે વધી રહ્યું છે.
બિલ્ટ-ઇન ચણતર લેઆઉટ એક વેબ પ્લેટફોર્મ સુવિધા જે ટૂંક સમયમાં આવી રહી છે અને જેના વિશે હું ખૂબ જ ઉત્સાહિત છું તે છે CSS ચણતર.
ચાલો હું ચણતર શું છે તે સમજાવીને શરૂ કરું. ચણતર શું છે ચણતર એ લેઆઉટનો એક પ્રકાર છે જે વર્ષો પહેલા Pinterest દ્વારા લોકપ્રિય બનાવવામાં આવ્યો હતો. તે સામગ્રીના સ્વતંત્ર ટ્રૅક્સ બનાવે છે જેમાં આઇટમ્સ પોતાની જાતને ટ્રેકની શરૂઆતની નજીકમાં પેક કરી શકે છે.
ઘણા લોકો ચણતરને પોર્ટફોલિયો અને ફોટો ગેલેરીઓ માટે એક શ્રેષ્ઠ વિકલ્પ તરીકે જુએ છે, જે તે ચોક્કસપણે કરી શકે છે. પરંતુ તમે Pinterest પર જે જુઓ છો તેના કરતાં ચણતર વધુ લવચીક છે અને તે માત્ર વોટરફોલ જેવા લેઆઉટ પૂરતું મર્યાદિત નથી. ચણતર લેઆઉટમાં:
ટ્રૅક્સ કૉલમ અથવા પંક્તિઓ હોઈ શકે છે:
સામગ્રીના ટ્રૅક્સનું કદ એકસરખું હોવું જરૂરી નથી:
આઇટમ્સ બહુવિધ ટ્રૅક્સને ફેલાવી શકે છે:
વસ્તુઓ ચોક્કસ ટ્રેક પર મૂકી શકાય છે; તેઓએ હંમેશા સ્વચાલિત પ્લેસમેન્ટ અલ્ગોરિધમનું પાલન કરવાની જરૂર નથી:
ડેમો Chromium માં CSS મેસનરીના આગામી અમલીકરણનો ઉપયોગ કરીને મેં બનાવેલા કેટલાક સરળ ડેમો અહીં આપ્યા છે. એક ફોટો ગેલેરી ડેમો, જે દર્શાવે છે કે કેવી રીતે આઇટમ્સ (આ કિસ્સામાં શીર્ષક) બહુવિધ ટ્રૅકને ફેલાવી શકે છે:
અન્ય ફોટો ગેલેરી વિવિધ કદના ટ્રેક દર્શાવે છે:
એક સમાચાર સાઇટ લેઆઉટ જેમાં કેટલાક ટ્રેક અન્ય કરતા વધુ પહોળા હોય છે, અને લેઆઉટની સમગ્ર પહોળાઈમાં ફેલાયેલી કેટલીક આઇટમ્સ:
કનબન બોર્ડ જે દર્શાવે છે કે વસ્તુઓ ચોક્કસ ટ્રેક પર મૂકી શકાય છે:
નોંધ: ધઅગાઉના ડેમો ક્રોમિયમના એવા સંસ્કરણ સાથે બનાવવામાં આવ્યા હતા જે હજી સુધી મોટાભાગના વેબ વપરાશકર્તાઓ માટે ઉપલબ્ધ નથી, કારણ કે CSS ચણતર માત્ર બ્રાઉઝર્સમાં અમલમાં આવવાનું શરૂ થઈ રહ્યું છે. જોકે, વેબ ડેવલપર્સ વર્ષોથી ચણતર લેઆઉટ બનાવવા માટે લાઇબ્રેરીઓનો આનંદપૂર્વક ઉપયોગ કરી રહ્યાં છે. આજે ચણતરનો ઉપયોગ કરતી સાઇટ્સ ખરેખર, ચણતર આજે વેબ પર ખૂબ સામાન્ય છે. અહીં કેટલાક ઉદાહરણો છે જે મને Pinterest ઉપરાંત મળ્યાં છે:
અને થોડા વધુ, ઓછા સ્પષ્ટ, ઉદાહરણો:
તો, આ લેઆઉટ કેવી રીતે બનાવવામાં આવ્યા હતા? વર્કઅરાઉન્ડ એક યુક્તિ જેનો ઉપયોગ મેં જોયો છે તે તેના બદલે ફ્લેક્સબોક્સ લેઆઉટનો ઉપયોગ કરી રહ્યો છે, તેની દિશાને કૉલમમાં બદલવી અને તેને લપેટી પર સેટ કરવી. આ રીતે, તમે ચણતરના લેઆઉટની છાપ આપીને, વિવિધ ઊંચાઈની વસ્તુઓને બહુવિધ, સ્વતંત્ર કૉલમમાં મૂકી શકો છો:
જો કે, આ ઉપાયમાં બે મર્યાદાઓ છે:
વસ્તુઓનો ક્રમ વાસ્તવિક ચણતર લેઆઉટ સાથે જે હશે તેનાથી અલગ છે. ફ્લેક્સબોક્સ સાથે, આઇટમ્સ પહેલા પ્રથમ કૉલમ ભરે છે અને, જ્યારે તે ભરાઈ જાય છે, પછી આગલી કૉલમ પર જાઓ. ચણતર સાથે, જે પણ ટ્રૅક (અથવા આ કિસ્સામાં કૉલમ) વધુ જગ્યા ઉપલબ્ધ હોય તેમાં વસ્તુઓ સ્ટેક થશે. પણ, અને કદાચ વધુ અગત્યનું, આ ઉપાય માટે જરૂરી છે કે તમે ફ્લેક્સબોક્સ કન્ટેનર માટે નિશ્ચિત ઊંચાઈ સેટ કરો; નહિંતર, કોઈ રેપિંગ થશે નહીં.
તૃતીય-પક્ષ ચણતર પુસ્તકાલયો વધુ અદ્યતન કેસો માટે, વિકાસકર્તાઓ પુસ્તકાલયોનો ઉપયોગ કરી રહ્યાં છે. આ માટે સૌથી જાણીતી અને લોકપ્રિય લાઇબ્રેરીને ફક્ત ચણતર કહેવામાં આવે છે, અને તે NPM મુજબ દર અઠવાડિયે લગભગ 200,000 વખત ડાઉનલોડ થાય છે. સ્ક્વેરસ્પેસ એક લેઆઉટ ઘટક પણ પ્રદાન કરે છે જે નો-કોડ વિકલ્પ માટે, ચણતર લેઆઉટ રેન્ડર કરે છે, અને ઘણી સાઇટ્સ તેનો ઉપયોગ કરે છે. આ બંને વિકલ્પો લેઆઉટમાં વસ્તુઓ મૂકવા માટે JavaScript કોડનો ઉપયોગ કરે છે. બિલ્ટ-ઇન ચણતર હું ખરેખર ઉત્સાહિત છું કે ચણતર હવે બિલ્ટ-ઇન CSS સુવિધા તરીકે બ્રાઉઝર્સમાં દેખાવાનું શરૂ કરી રહ્યું છે. સમય જતાં, તમે ચણતરનો ઉપયોગ કરી શકશો જેમ તમે ગ્રીડ અથવા ફ્લેક્સબોક્સ કરો છો, એટલે કે, કોઈપણ ઉપાય અથવા તૃતીય-પક્ષ કોડની જરૂર વગર. Microsoft ખાતેની મારી ટીમ ક્રોમિયમ ઓપન સોર્સ પ્રોજેક્ટમાં બિલ્ટ-ઇન ચણતર સપોર્ટનો અમલ કરી રહી છે, જેના પર એજ, ક્રોમ અને અન્ય ઘણા બ્રાઉઝર આધારિત છે. Mozilla વાસ્તવમાં 2020 માં મેસનરીના પ્રાયોગિક અમલીકરણની દરખાસ્ત કરનાર પ્રથમ બ્રાઉઝર વિક્રેતા હતી. અને Apple પણ આ નવા વેબ લેઆઉટને આદિમ બનાવવા માટે ખૂબ જ રસ ધરાવે છે. સામાન્ય દિશા અને નવા ડિસ્પ્લે પ્રકાર ડિસ્પ્લે: ગ્રીડ-લેન્સ વિશે સીએસએસ કાર્યકારી જૂથમાં કરાર સાથે, સુવિધાને માનક બનાવવાનું કાર્ય પણ આગળ વધી રહ્યું છે. જો તમે ચણતર વિશે વધુ જાણવા અને પ્રગતિને ટ્રૅક કરવા માંગતા હો, તો મારું CSS ચણતર સંસાધન પૃષ્ઠ તપાસો. સમય જતાં, જ્યારે ગ્રીડ અથવા ફ્લેક્સબોક્સની જેમ ચણતર એ બેઝલાઇન સુવિધા બની જાય છે, ત્યારે અમે તેનો ઉપયોગ કરી શકીશું અને તેનાથી લાભ મેળવી શકીશું:
બહેતર પ્રદર્શન, બહેતર પ્રતિભાવ, ઉપયોગમાં સરળતા અને સરળ કોડ.
ચાલો આ પર નજીકથી નજર કરીએ. બહેતર પ્રદર્શન તમારી પોતાની ચણતર જેવી લેઆઉટ સિસ્ટમ બનાવવી, અથવા તેના બદલે તૃતીય-પક્ષ લાઇબ્રેરીનો ઉપયોગ કરવાનો અર્થ એ છે કે તમારે સ્ક્રીન પર વસ્તુઓ મૂકવા માટે JavaScript કોડ ચલાવવો પડશે. આનો અર્થ એ પણ છે કે આ કોડ રેન્ડર બ્લોકિંગ હશે. ખરેખર, જ્યાં સુધી તે JavaScript કોડ ચાલી ન જાય ત્યાં સુધી કાં તો કંઈ દેખાશે નહીં, અથવા વસ્તુઓ યોગ્ય સ્થાનો પર અથવા યોગ્ય કદની હશે નહીં. ચણતર લેઆઉટનો ઉપયોગ ઘણીવાર વેબ પેજના મુખ્ય ભાગ માટે થાય છે, જેનો અર્થ છે કે કોડ તમારી મુખ્ય સામગ્રીને અન્યથા હોઈ શકે તેના કરતાં પાછળથી પ્રદર્શિત કરશે, જે તમારા LCP અથવા લાર્જેસ્ટ કન્ટેન્ટફુલ પેઇન્ટ મેટ્રિકને ડિગ્રેઝ કરશે, જે કથિત પ્રદર્શન અને સર્ચ એન્જિન ઑપ્ટિમાઇઝેશનમાં મોટી ભૂમિકા ભજવે છે. મેં એક સરળ લેઆઉટ સાથે અને DevTools માં ધીમા 4G કનેક્શનનું અનુકરણ કરીને મેસનરી JS લાઇબ્રેરીનું પરીક્ષણ કર્યું. લાઇબ્રેરી બહુ મોટી નથી (24KB, 7.8KB gzipped), પરંતુ મારી ટેસ્ટ શરતો હેઠળ લોડ થવામાં 600ms લીધો. અહીં એક પ્રદર્શન રેકોર્ડિંગ છે જે દર્શાવે છે કે ચણતર લાઇબ્રેરી માટે 600ms લોડ ટાઈમ લાંબો છે, અને જ્યારે તે થઈ રહ્યું હતું ત્યારે અન્ય કોઈ રેન્ડરિંગ પ્રવૃત્તિ થઈ નથી:
વધુમાં, પ્રારંભિક લોડ સમય પછી, ડાઉનલોડ કરેલ સ્ક્રિપ્ટને પાર્સ કરવાની, કમ્પાઇલ કરવાની અને પછી ચલાવવાની જરૂર હતી. જે તમામ, અગાઉ ઉલ્લેખ કર્યા મુજબ, પૃષ્ઠના રેન્ડરિંગને અવરોધિત કરી રહ્યા હતા. બ્રાઉઝરમાં બિલ્ટ-ઇન ચણતર અમલીકરણ સાથે, અમારી પાસે લોડ કરવા અને ચલાવવા માટે સ્ક્રિપ્ટ હશે નહીં. બ્રાઉઝર એન્જિન ફક્ત પ્રારંભિક પૃષ્ઠ રેન્ડરિંગ પગલા દરમિયાન તેનું કાર્ય કરશે. બહેતર પ્રતિભાવ જ્યારે કોઈ પૃષ્ઠ પ્રથમ લોડ થાય છે, ત્યારે બ્રાઉઝર વિંડોનું કદ બદલવાથી તે પૃષ્ઠમાં ફરીથી લેઆઉટ રેન્ડર થાય છે. આ સમયે, જો કે, જો પેજ મેસનરી જેએસ લાઇબ્રેરીનો ઉપયોગ કરી રહ્યું હોય, તો ફરીથી સ્ક્રિપ્ટ લોડ કરવાની જરૂર નથી, કારણ કે તે પહેલેથી જ છેઅહીં જો કે, કોડ કે જે વસ્તુઓને યોગ્ય સ્થાનો પર ખસેડે છે તે ચલાવવાની જરૂર છે. હવે જ્યારે પેજ લોડ થાય છે ત્યારે આ ચોક્કસ લાઇબ્રેરી આ કરવા માટે ખૂબ જ ઝડપી લાગે છે. જો કે, જ્યારે વિન્ડો રીસાઈઝ પર કોઈ અલગ જગ્યાએ જવાની જરૂર હોય ત્યારે તે વસ્તુઓને એનિમેટ કરે છે અને આનાથી મોટો ફરક પડે છે. અલબત્ત, વપરાશકર્તાઓ તેમના બ્રાઉઝર વિન્ડોઝનું કદ બદલવામાં અમે ડેવલપર્સ જેટલો સમય વિતાવતા નથી. પરંતુ આ એનિમેટેડ માપ બદલવાનો અનુભવ ખૂબ જ અસ્પષ્ટ હોઈ શકે છે અને પૃષ્ઠને તેના નવા કદમાં અનુકૂલન કરવામાં લાગેલા સમયને ઉમેરે છે. ઉપયોગમાં સરળતા અને સરળ કોડ વેબ સુવિધાનો ઉપયોગ કરવો કેટલું સરળ છે અને કોડ કેટલો સરળ દેખાય છે તે મહત્વપૂર્ણ પરિબળો છે જે તમારી ટીમ માટે મોટો તફાવત લાવી શકે છે. તેઓ ક્યારેય અંતિમ વપરાશકર્તા અનુભવ જેટલા મહત્વપૂર્ણ હોઈ શકતા નથી, અલબત્ત, પરંતુ વિકાસકર્તાનો અનુભવ જાળવણીક્ષમતાને અસર કરે છે. બિલ્ટ-ઇન વેબ સુવિધાનો ઉપયોગ કરવાથી તે મોરચે મહત્વપૂર્ણ લાભો આવે છે:
વિકાસકર્તાઓ કે જેઓ પહેલેથી જ HTML, CSS અને JS ને જાણતા હોય છે તેઓ મોટે ભાગે તે સુવિધાનો સરળતાથી ઉપયોગ કરી શકશે કારણ કે તે સારી રીતે સંકલિત કરવા અને બાકીના વેબ પ્લેટફોર્મ સાથે સુસંગત રહેવા માટે ડિઝાઇન કરવામાં આવી છે. સુવિધાનો ઉપયોગ કેવી રીતે કરવામાં આવે છે તેમાં ફેરફારો દાખલ થવાનું કોઈ જોખમ નથી. તે લક્ષણ નાપસંદ અથવા જાળવી ન રાખવાનું લગભગ શૂન્ય જોખમ છે.
બિલ્ટ-ઇન ચણતરના કિસ્સામાં, કારણ કે તે એક લેઆઉટ આદિમ છે, તમે CSS માંથી તેનો ઉપયોગ કરો છો, જેમ કે ગ્રીડ અથવા ફ્લેક્સબોક્સ, તેમાં કોઈ JS સામેલ નથી. ઉપરાંત, અન્ય લેઆઉટ-સંબંધિત CSS પ્રોપર્ટીઝ, જેમ કે ગેપ, તમે તેમની અપેક્ષા મુજબ કાર્ય કરો છો. જાણવા માટે કોઈ યુક્તિઓ અથવા ઉકેલો નથી, અને તમે જે શીખો છો તે MDN પર દસ્તાવેજીકૃત થયેલ છે. મેસનરી જેએસ લિબ માટે, પ્રારંભ થોડું જટિલ છે: તેને કૉલમ અને ગેપ માપો સેટ કરવા માટે છુપાયેલા HTML ઘટકો સાથે ચોક્કસ વાક્યરચના સાથે ડેટા વિશેષતાની જરૂર છે. ઉપરાંત, જો તમે કૉલમનો વિસ્તાર કરવા માંગતા હો, તો તમારે સમસ્યાઓ ટાળવા માટે ગેપનું કદ જાતે સામેલ કરવાની જરૂર છે:
ચાલો બિલ્ટ-ઇન ચણતર અમલીકરણ કેવું દેખાશે તેની સાથે સરખામણી કરીએ:
સરળ, વધુ કોમ્પેક્ટ કોડ કે જે ફક્ત ગ્રીડની જેમ જ ગેપ અને જ્યાં સ્પાનિંગ ટ્રૅક સ્પાન 2 વડે કરવામાં આવે છે, જેવી વસ્તુઓનો ઉપયોગ કરી શકે છે અને તમારે ગેપના કદનો સમાવેશ કરતી યોગ્ય પહોળાઈની ગણતરી કરવાની જરૂર નથી. શું ઉપલબ્ધ છે અને ક્યારે ઉપલબ્ધ છે તે કેવી રીતે જાણવું? એકંદરે, પ્રશ્ન ખરેખર એ નથી કે તમારે JS લાઇબ્રેરી પર બિલ્ટ-ઇન ચણતરનો ઉપયોગ કરવો જોઈએ, પરંતુ ક્યારે. મેસનરી જેએસ લાઇબ્રેરી અદ્ભુત છે અને ઘણા વર્ષોથી અને ઘણા ખુશ ડેવલપર્સ અને વપરાશકર્તાઓ માટે વેબ પ્લેટફોર્મમાં એક ગેપ ભરી રહી છે. જો તમે બિલ્ટ-ઇન ચણતર અમલીકરણ સાથે તેની તુલના કરો તો તેમાં થોડી ખામીઓ છે, અલબત્ત, પરંતુ જો તે અમલીકરણ તૈયાર ન હોય તો તે મહત્વપૂર્ણ નથી. મારા માટે આ સરસ નવી વેબ પ્લેટફોર્મ સુવિધાઓને સૂચિબદ્ધ કરવી સરળ છે કારણ કે હું બ્રાઉઝર વિક્રેતા પર કામ કરું છું, અને તેથી હું શું આવી રહ્યું છે તે જાણવાનું વલણ રાખું છું. પરંતુ વિકાસકર્તાઓ વારંવાર શેર કરે છે, સર્વેક્ષણ પછી સર્વે કરે છે કે નવી વસ્તુઓનો ટ્રેક રાખવો મુશ્કેલ છે. માહિતગાર રહેવું મુશ્કેલ છે, અને કંપનીઓ હંમેશા કોઈપણ રીતે શીખવાની પ્રાથમિકતા આપતી નથી. આમાં મદદ કરવા માટે, અહીં કેટલાક સંસાધનો છે જે સરળ અને કોમ્પેક્ટ રીતે અપડેટ્સ પ્રદાન કરે છે જેથી તમને જરૂરી માહિતી ઝડપથી મળી શકે:
વેબ પ્લેટફોર્મમાં એક્સપ્લોરર સાઇટ છે: તમને તેના પ્રકાશન નોંધો પૃષ્ઠમાં રસ હોઈ શકે છે. અને, જો તમને RSS ગમે છે, તો રીલીઝ નોટ્સ ફીડ, તેમજ બેઝલાઈન નવા ઉપલબ્ધ અને વ્યાપકપણે ઉપલબ્ધ ફીડ્સ તપાસો.
વેબપ્લેટફોર્મ સ્ટેટસ ડેશબોર્ડ: તમને તેના વિવિધ બેઝલાઇન વર્ષના પૃષ્ઠો ગમશે.
ક્રોમ પ્લેટફોર્મ સ્ટેટસનું રોડમેપ પેજ.
જો તમારી પાસે થોડો વધુ સમય હોય, તો તમને બ્રાઉઝર વિક્રેતાઓની રિલીઝ નોટ્સમાં પણ રસ હોઈ શકે છે:
ક્રોમ એજ ફાયરફોક્સ સફારી
હજી વધુ સંસાધનો માટે, મારી નેવિગેટીંગ ધ વેબ પ્લેટફોર્મ ચીટશીટ તપાસો. મારી વાત હજુ અમલમાં નથી આવી તે સમસ્યાની બીજી બાજુ છે. જો તમને સમય, શક્તિ અને ટ્રૅક રાખવાની રીતો મળી જાય, તો પણ તમારો અવાજ સાંભળવામાં અને તમારી મનપસંદ સુવિધાઓ લાગુ કરવામાં નિરાશા છે. કદાચ તમે ચોક્કસ બગના ઉકેલ માટે વર્ષોથી રાહ જોઈ રહ્યા છો, અથવા બ્રાઉઝરમાં મોકલવા માટે કોઈ વિશિષ્ટ સુવિધા જ્યાં તે હજી ખૂટે છે. હું શું કહીશ તે બ્રાઉઝર વિક્રેતાઓ સાંભળે છે. હું ઘણી ક્રોસ-ઓર્ગેનાઈઝેશન ટીમોનો ભાગ છું જ્યાં અમે વિકાસકર્તા સંકેતો અને પ્રતિસાદની ચર્ચા કરીએ છીએ. અમે દરેક બ્રાઉઝર વિક્રેતા પર આંતરિક અને ફોરમ્સ, ઓપન સોર્સ પ્રોજેક્ટ્સ, બ્લોગ્સ અને સર્વેક્ષણો પર બાહ્ય/જાહેર બંને, પ્રતિસાદના ઘણાં વિવિધ સ્ત્રોતો જોઈએ છીએ. અને, અમે હંમેશા વિકાસકર્તાઓ માટે તેમની ચોક્કસ જરૂરિયાતો અને કેસોનો ઉપયોગ કરવા માટે વધુ સારી રીતો બનાવવાનો પ્રયાસ કરીએ છીએ. તેથી, જો તમે કરી શકો, તો કૃપા કરીને બ્રાઉઝર વિક્રેતાઓ પાસેથી વધુ માંગ કરો અને તમને જોઈતી સુવિધાઓ લાગુ કરવા માટે અમને દબાણ કરો. મને સમજાયું કે તે સમય લે છે, અને તે ડરાવનારું પણ હોઈ શકે છે (પ્રવેશમાં ઉચ્ચ અવરોધનો ઉલ્લેખ ન કરવો), પરંતુ તે કાર્ય પણ કરે છે. તમારો (અથવા તમારી કંપનીનો) અવાજ સાંભળવા માટે તમે અહીં કેટલીક રીતો આપી શકો છો: વાર્ષિક સ્ટેટ ઑફ JS, સ્ટેટ ઑફ CSS અને સ્ટેટ ઑફ HTML સર્વેક્ષણો લો. બ્રાઉઝર વિક્રેતાઓ તેમના કાર્યને કેવી રીતે પ્રાથમિકતા આપે છે તેમાં તેઓ મોટી ભૂમિકા ભજવે છે. જો તમને બ્રાઉઝર્સમાં સતત અમલમાં મૂકવા માટે ચોક્કસ માનક-આધારિત APIની જરૂર હોય, તો આગામી ઇન્ટરઓપ પ્રોજેક્ટ પુનરાવર્તન પર દરખાસ્ત સબમિટ કરવાનું વિચારો. તેને વધુ સમયની જરૂર છે, પરંતુ Shopify અને RUMvision એ Interop 2026 માટે તેમની વિશ લિસ્ટ્સ કેવી રીતે શેર કરી તે ધ્યાનમાં લો. આના જેવી વિગતવાર માહિતી બ્રાઉઝર વિક્રેતાઓને પ્રાથમિકતા આપવા માટે ખૂબ જ ઉપયોગી થઈ શકે છે. બ્રાઉઝર વિક્રેતાઓને પ્રભાવિત કરવા માટે વધુ ઉપયોગી લિંક્સ માટે, મારી નેવિગેટીંગ ધ વેબ પ્લેટફોર્મ ચીટશીટ તપાસો. નિષ્કર્ષ બંધ કરવા માટે, હું આશા રાખું છું કે આ લેખ તમને વિચારવા માટે કેટલીક બાબતો સાથે છોડી ગયો છે:
ચણતર અને અન્ય આગામી વેબ સુવિધાઓ માટે ઉત્તેજના. કેટલીક વેબ સુવિધાઓનો તમે ઉપયોગ કરવાનું શરૂ કરી શકો છો. કસ્ટમ અથવા તૃતીય-પક્ષ કોડના થોડા ટુકડાઓ તમે બિલ્ટ-ઇન સુવિધાઓની તરફેણમાં દૂર કરી શકશો. શું આવી રહ્યું છે તેનો ટ્રૅક રાખવા અને બ્રાઉઝર વિક્રેતાઓને પ્રભાવિત કરવાની કેટલીક રીતો.
વધુ મહત્ત્વની વાત એ છે કે, હું આશા રાખું છું કે વેબ પ્લેટફોર્મનો તેની સંપૂર્ણ ક્ષમતા સાથે ઉપયોગ કરવાના ફાયદાઓ વિશે મેં તમને ખાતરી આપી છે.
