HTML બ્યૂટિફિકેશન કેવી રીતે કામ કરે છે
બ્યૂટિફાયર તમારા markup ને tag-દર-tag વાંચે છે, દરેક element કેટલા ઊંડે nested છે તે ટ્રૅક કરે છે, અને તેને સુસંગત ઇન્ડેન્ટેશન સાથે ફરી છાપે છે. પેજ શું રેન્ડર કરે છે તે તે ક્યારેય બદલતું નથી — ફક્ત source કેવી રીતે ગોઠવાયેલું છે તે બદલે છે.
- tags ને પાર્સ કરો. લાઇબ્રેરી તમારા ઇનપુટને token ની એક ધારામાં સ્કૅન કરે છે: ખુલતા tags, બંધ થતા tags, ટેક્સ્ટ content, comments, અને script તથા style blocks ની અંદરનું. Quoted attribute values અને pre તથા textarea elements ની અંદરનું એક જ એકમ તરીકે ગણાય છે, તેથી તેમની અંદરની ખાલી જગ્યા જેમની તેમ રહે છે.
- nesting ટ્રૅક કરો. જેમ તે token ધારા પર ચાલે છે, બ્યૂટિફાયર એક ચાલુ indent level જાળવી રાખે છે. self-closing ન હોય તેવો દરેક ખુલતો tag level ને એક પગથિયું ઊંડે ધકેલે છે; દરેક મેળ ખાતો બંધ થતો tag તેને પાછું પૉપ કરે છે. એ ઊંડાઈ નક્કી કરે છે કે તમને પાછી મળતી દરેક લાઇનની આગળ કેટલા indent એકમ બેસે છે.
- તમારા વિકલ્પો લાગુ કરો. તમારી indent પસંદગી — 2 સ્પેસ, 4 સ્પેસ, કે એક ટૅબ — એક level ની પહોળાઈ સેટ કરે છે. wrap-at-column મૂલ્ય attributes કે ટેક્સ્ટની લાંબી લાઇનો તમે પસંદ કરેલા કૉલમ વટાવે ત્યારે તોડે છે. ખાલી-લાઇન મર્યાદા ખાલી લાઇનોની લાંબી હાર તમે સેટ કરેલી મર્યાદા સુધી સંકોચે છે.
- markup ફરી છાપો. છેલ્લે formatter tags ને તેણે ગણેલા ઇન્ડેન્ટેશન અને line breaks સાથે પાછા છાપે છે. જો તમે inline formatting ચાલુ કરી હોય, તો દરેક style block નું content CSS formatter માંથી અને દરેક script block JS formatter માંથી પસાર થાય છે, જેથી embedded code આસપાસના markup સાથે ગોઠવાય.
HTML કેમ બ્યૂટિફાઈ કરવું
- મિનિફાઈડ પેજ વાંચો. ઉત્પાદન HTML bytes બચાવવા line breaks કાઢી નાખીને મોકલાય છે. બ્યૂટિફાઈ કરવાથી રચના પાછી આવે છે જેથી તમે જે section શોધો છો તે મળે, કોઈ ખૂટતો closing tag પકડાય, અને document ખરેખર કેવી રીતે nest થાય છે તે અનુસરી શકો.
- અસંગત templates વ્યવસ્થિત કરો. જે markup ને ઘણા લોકોએ સંપાદિત કર્યું હોય તે મિશ્ર ઇન્ડેન્ટેશન અને tag સ્થાનમાં ભટકી જાય છે. બ્યૂટિફાયરમાંથી એક પાસ આખી ફાઇલને સામાન્ય બનાવે છે, જેથી આગળનો commit તમે કરેલો ફેરફાર બતાવે, ફરી ફોર્મેટ થયેલી ખાલી જગ્યાની દીવાલ નહીં.
- તમારા પેજને ધીમું નથી કરતું. મોટાભાગના ઓનલાઇન formatters પેજ ખૂલતા જ આખી લાઇબ્રેરી ખેંચે છે. આ js-beautify ને ફક્ત ત્યારે જ fetch કરે છે જ્યારે તમે બ્યૂટિફાઈ ક્લિક કરો કે Live mode ચાલુ કરો, જેથી પ્રથમ load થોડા સોને બદલે થોડા કિલોબાઇટ ખર્ચે છે અને પેજ ઝડપી રહે છે.
- કંઈ તમારું બ્રાઉઝર છોડતું નથી. આખી વસ્તુ તમારા device પર ચાલે છે. તમારું markup ક્યારેય server પર upload થતું નથી, જે ત્યારે મહત્ત્વનું છે જ્યારે પેજ કોઈ client નું હોય, આંતરિક URLs ધરાવતું હોય, કે તમે સહી કરેલા ગુપ્તતા કરાર હેઠળ આવતું હોય.
સામાન્ય ઉપયોગો
HTML બ્યૂટિફાઈ કરવાનું ત્યારે આવે છે જ્યારે કોઈને એવું markup વાંચવું પડે જે વાંચવા માટે લખાયું ન હતું.
- જીવંત પેજ તપાસવું: layout bug પાછળનું markup શોધવા View Source માંથી મિનિફાઈડ source પેસ્ટ કરો જે તમે સ્થાનિક રીતે પુનઃઉત્પન્ન કરી શકતા નથી.
- CMS આઉટપુટ સાફ કરવું: page builder એ એક લાઇન પર export કરેલા template ને repository માં પાછું commit કરતા પહેલાં ફરી ફોર્મેટ કરો.
- Accessibility અને SEO રિવ્યૂ: document ને expand કરો જેથી તમે અસલી DOM સામે heading order, landmark રચના, અને alt attributes ચકાસી શકો.
એક ઉદાહરણ ઉકેલીને
એક મિનિફાઈડ snippet લો: <div><p>hi</p><span>x</span></div>. તેને ઉપર ઇન્ડેન્ટેશન 2 સ્પેસ સેટ કરીને પેસ્ટ કરો, પછી બ્યૂટિફાઈ ક્લિક કરો. તમને વાંચી શકાય તેવો block પાછો મળે છે: <div> પોતાની અલગ લાઇન પર, <p>hi</p> અને <span>x</span> દરેક તેની નીચે એક level ઇન્ડેન્ટ થયેલા, અને મેળ ખાતો </div> નીચે ગોઠવાયેલો. ઇન્ડેન્ટેશન ને ટૅબ પર બદલો અને દરેક level બે સ્પેસથી ટૅબ પર ખસે છે. એક <style>a{color:red}</style> block ઉમેરો, "inline CSS અને JS પણ ફોર્મેટ કરો" ચાલુ કરો, અને નિયમ એક લાઇન પર રહેવાને બદલે પોતાની ઇન્ડેન્ટ થયેલી લાઇનો પર વિસ્તરે છે.
FAQ
શું આ મારા બ્રાઉઝરમાં ચાલે છે?
હા. js-beautify લાઇબ્રેરી પ્રથમ વખત તમે બ્યૂટિફાઈ ક્લિક કરો કે Live mode સક્ષમ કરો ત્યારે fetch થાય છે, પછી cache થાય છે. તમારું markup ક્યારેય પેજ છોડતું નથી — કોઈ server round-trip કે upload નથી.
શું બ્યૂટિફાઈ કરવાથી મારું પેજ કેવી રીતે રેન્ડર થાય તે બદલાશે?
ના. બ્યૂટિફાયર ફક્ત tags વચ્ચે ખાલી જગ્યા અને line breaks ઉમેરે અને દૂર કરે છે. બ્રાઉઝર પેજ બનાવતી વખતે એ ખાલી જગ્યાને અવગણે છે, તેથી રેન્ડર થયેલું પરિણામ સરખું જ રહે છે. ધ્યાન રાખવા જેવી એક વસ્તુ pre, textarea, કે inline elements ની અંદરનું whitespace-sensitive content છે, જેને formatter જાણીજોઈને જેમનું તેમ રહેવા દે છે.
inline CSS અને JS ટૉગલ શું કરે છે?
તે બંધ હોય ત્યારે, style અને script blocks નું content બરાબર તમે પેસ્ટ કર્યું તેવું જ રહે છે. તેને ચાલુ કરો અને દરેક style block ની અંદરની CSS CSS formatter માંથી અને દરેક script block ની અંદરની JavaScript JS formatter માંથી પસાર થાય છે, જેથી embedded code આસપાસના markup સાથે મેળ ખાય તેવો ઇન્ડેન્ટ થાય.
"આ કૉલમ પર wrap કરો" શું કરે છે?
તે એ લાઇન લંબાઈ સેટ કરે છે જ્યાં ઘણા attributes વાળો tag, કે ટેક્સ્ટની લાંબી હાર, અનેક લાઇનો પર તૂટે છે. દરેક element ગમે તેટલું લાંબું હોય તોય એક લાઇન પર રાખવા તેને 0 પર રહેવા દો. તેને 80 કે 120 પર સેટ કરો અને formatter એ કૉલમ વટાવતી દરેક વસ્તુ wrap કરે છે, જે પહોળા elements ને સાંકડા editor માં વાંચી શકાય તેવા રાખે છે.
બ્રાઉઝર-બાજુ HTML બ્યૂટિફિકેશન તમને build step કે upload વગર વાંચી શકાય તેવું markup આપે છે. મિનિફાઈડ કે અવ્યવસ્થિત પેજ પેસ્ટ કરો, તમારી ઇન્ડેન્ટેશન અને wrap પહોળાઈ પસંદ કરો, inline CSS અને JS ફરી ફોર્મેટ કરવી કે નહીં તે નક્કી કરો, પછી પરિણામ કૉપી કે ડાઉનલોડ કરો. કંઈ તમારું device છોડતું નથી, કોઈ account નથી, અને લાઇબ્રેરી ફક્ત ત્યારે જ લોડ થાય છે જ્યારે તમે કહો — તેથી આ પેજ ખોલવાનો ખર્ચ તમને એક megabyte નહીં, થોડા કિલોબાઇટ થાય છે.