HTML ബ്യൂട്ടിഫിക്കേഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു
ബ്യൂട്ടിഫയർ മാർക്കപ്പ് ടാഗ് ടാഗ് ആയി വായിക്കുന്നു, ഓരോ element എത്ര ആഴത്തിൽ nested ആണെന്ന് ട്രാക്ക് ചെയ്യുന്നു, ഒത്ത indentation-ഓടെ വീണ്ടും emit ചെയ്യുന്നു. പേജ് എന്ത് റെൻഡർ ചെയ്യുന്നു എന്ന് ഒരിക്കലും മാറില്ല — source എങ്ങനെ laid out ആണ് എന്ന് മാത്രം.
- ടാഗുകൾ പാഴ്സ് ചെയ്യുക. ലൈബ്രറി ഇൻപുട്ടിനെ ടോക്കണുകളുടെ stream ആക്കി scan ചെയ്യുന്നു: opening tags, closing tags, text content, comments, script, style block-ഉകളുടെ ഉള്ളടക്കം. Quoted attribute values, pre, textarea elements-ന്റെ bodies ഒറ്റ units ആയി കണക്കാക്കും, അതിനുള്ളിലെ whitespace തൊടാതെ ഇരിക്കും.
- നെസ്റ്റിംഗ് ട്രാക്ക് ചെയ്യുക. token stream-ൽ നടക്കുമ്പോൾ ബ്യൂട്ടിഫയർ ഒരു running indent level നിലനിർത്തുന്നു. self-closing അല്ലാത്ത ഓരോ opening tag level ഒരടി ആഴമേറ്റുന്നു; ഓരോ matching closing tag അത് pop ചെയ്യുന്നു. ആ ആഴം ഓരോ തിരിച്ചുകിട്ടുന്ന വരിയുടെ മുൻപ് എത്ര indent units ഉണ്ടാകും എന്ന് തീരുമാനിക്കുന്നു.
- ഓപ്ഷനുകൾ പ്രയോഗിക്കുക. ഇൻഡെന്റ് തിരഞ്ഞെടുക്കൽ — 2 സ്പേസ്, 4 സ്പേസ്, അല്ലെങ്കിൽ tab — ഒരു level-ന്റെ വീതി നിർണ്ണയിക്കുന്നു. wrap-at-column മൂല്യം attributes, നീണ്ട text lines-ഇനെ നിങ്ങൾ തിരഞ്ഞെടുക്കുന്ന column-ൽ ഉടച്ചുകളയുന്നു. Blank-line cap ദീർഘ ഒഴിഞ്ഞ ലൈൻ ശ്രേണി തിരഞ്ഞെടുക്കുന്ന പരിധിക്ക് ചുരുക്കുന്നു.
- മാർക്കപ്പ് റീ-എമിറ്റ്. ഒടുവിൽ formatter നിർണ്ണയിച്ച indentation, line breaks-ഓടെ tags തിരിച്ച് print ചെയ്യുന്നു. ഇൻലൈൻ ഫോർമാറ്റിംഗ് ഓൺ ആണെങ്കിൽ ഓരോ style block-ന്റെ ഉള്ളടക്കം CSS formatter-ലൂടെ, ഓരോ script block JS formatter-ലൂടെ കടക്കുന്നു — embedded code ചുറ്റുമുള്ള markup-ഓടൊപ്പം align ആകും.
HTML ബ്യൂട്ടിഫൈ ചെയ്യേണ്ടത് എന്തുകൊണ്ട്
- മിനിഫൈഡ് പേജ് വായിക്കൽ. Production HTML bytes ലാഭിക്കാൻ line breaks ഒഴിവാക്കി ship ചെയ്യുന്നു. ബ്യൂട്ടിഫൈ ചെയ്ത് structure തിരിച്ചുകൊണ്ടുവരുന്നു — കൊതിക്കുന്ന section കണ്ടെത്താം, missing closing tag ശ്രദ്ധിക്കാം, document യഥാർഥ nesting structure മനസ്സിലാക്കാം.
- ക്രമരഹിത ടെംപ്ലേറ്റ് ഒതുക്കൽ. അനേകർ edit ചെയ്ത markup mixed indentation, tag placement-ലേക്ക് drift ആകുന്നു. ബ്യൂട്ടിഫയർ ഒരു pass-ൽ ഫയൽ മുഴുവൻ normalize ചെയ്യുന്നു, അടുത്ത commit reformatted whitespace wall-ന് പകരം ശരിയായ മാറ്റം കാണിക്കും.
- ഈ ടൂൾ പേജ് slow ആക്കില്ല. മിക്ക online formatters-ഉം page load-ൽ മുഴുവൻ library ship ചെയ്യുന്നു. ഈ ടൂൾ js-beautify-ഇനെ Beautify ക്ലിക്ക് ചെയ്ത് അല്ലെങ്കിൽ Live mode ഓൺ ചെയ്ത് ആദ്യ തവണ മാത്രം fetch ചെയ്യുന്നു — ആദ്യ load കൊന്ന kilobytes, ഒരു megabyte-ഉം ഉണ്ടാകില്ല.
- ഒന്നും ബ്രൗസർ വിടുന്നില്ല. മുഴുവൻ ജോലിയും ഡിവൈസിൽ നടക്കുന്നു. markup server-ലേക്ക് upload ഒരിക്കലും ആകില്ല — client-ന്റേതായ markup, ആന്തരിക URLs, confidentiality agreement-ന് കീഴിൽ ഉള്ള content ഒക്കെ സുരക്ഷിതം.
സാധാരണ ഉപയോഗങ്ങൾ
HTML ബ്യൂട്ടിഫൈ ചെയ്യൽ ആവശ്യമാകുന്നത് ആർക്കെങ്കിലും വായനക്ക് ഉദ്ദേശിക്കാത്ത markup വായിക്കേണ്ടിവരുമ്പോൾ.
- Live page inspect: View Source-ൽ നിന്ന് minified source paste ചെയ്ത് locally reproduce ചെയ്യാൻ കഴിയാത്ത layout bug-ന് പിന്നിലെ markup കണ്ടെത്തുക.
- CMS output cleanup: page builder ഒരു ലൈനിൽ export ചെയ്ത template-ഇനെ repository-ൽ commit ചെയ്യുന്നതിന് മുൻപ് reformat ചെയ്യുക.
- Accessibility, SEO reviews: heading order, landmark structure, alt attributes-ഇനെ real DOM-ഉടൻ നേരേ compare ചെയ്യാൻ document expand ചെയ്യുക.
ഒരു ഉദാഹരണം
ഒരു minified snippet: <div><p>hi</p><span>x</span></div>. 2 സ്പേസ് indentation-ഓടെ paste ചെയ്ത് Beautify ക്ലിക്ക് ചെയ്യുക. readable block കിട്ടുന്നു: <div> സ്വന്തം വരിയിൽ, <p>hi</p>, <span>x</span> ഒരോന്നും ഒരു level ഇൻഡെന്റ് ചെയ്ത്, matching </div> കൃത്യം align ആയി. Tabs-ലേക്ക് മാറ്റിയാൽ ഓരോ level രണ്ട് space-ൽ നിന്ന് tab character-ലേക്ക്. ഒരു <style>a{color:red}</style> block ചേർത്ത്, "ഇൻലൈൻ CSS, JS-ഉം ഫോർമാറ്റ് ചെയ്യുക" ഓൺ ചെയ്ത് — rule-ഇന്റെ declaration-ഉകൾ സ്വന്തം indented ലൈനുകളിൽ കാണാം.
FAQ
ഇത് ബ്രൗസറിൽ റൺ ആകുമോ?
ആകും. js-beautify library ആദ്യ Beautify ക്ലിക്ക് അല്ലെങ്കിൽ Live mode ഓൺ ചെയ്ത് fetch ആകുന്നു, പിന്നീട് cache ആകുന്നു. markup page വിടുന്നില്ല — server round-trip ഇല്ല, upload ഇല്ല.
ബ്യൂട്ടിഫൈ ചെയ്ത് പേജ് rendering മാറുമോ?
ഇല്ല. ടാഗുകൾക്കിടയിൽ whitespace, line breaks ചേർക്കും/നീക്കും; browser page ഉണ്ടാക്കുമ്പോൾ ആ whitespace ignore ചെയ്യുന്നു, rendered result ഒന്നുതന്നെ. ഒരേ ഒരു കാര്യം ശ്രദ്ധിക്കേണ്ടത്: pre, textarea, ഇൻലൈൻ elements-ൽ whitespace-sensitive content — formatter അത് ഉദ്ദേശ്യപൂർവ്വം untouched ആക്കി വക്കുന്നു.
ഇൻലൈൻ CSS, JS toggle-ന്റെ പ്രവൃത്തി?
ഓഫ് ആണെങ്കിൽ style, script blocks-ന്റെ ഉള്ളടക്കം paste ചെയ്ത അതേ നിലയിൽ ഇരിക്കും. ഓൺ ചെയ്ത് ഓരോ style block-ൽ CSS formatter, ഓരോ script block-ൽ JS formatter ഓടും — embedded code ചുറ്റുമുള്ള markup-ഓടൊത്ത് align ആകും.
"കോളത്തിൽ വ്രാപ്" ചെയ്യുക — ഇതിന്റെ അർഥം?
ഒരു ദീർഘ tag, text run-ഇനെ ഒന്നിലധികം ലൈനുകളിൽ ഉടക്കുന്ന line length ഇത് നിർണ്ണയിക്കുന്നു. ഓരോ element-ഉം ദൈർഘ്യം എന്തുമാകട്ടെ ഒരൊറ്റ ലൈനിൽ ഇരിക്കാൻ 0 ഉള്ളതുകൊണ്ടിടാം. 80 അല്ലെങ്കിൽ 120 set ചെയ്ത് formatter ആ column-ൽ കടന്ന ഭാഗം wrap ചെയ്യും — narrow editor-ലും wide elements readable.
Browser-side HTML ബ്യൂട്ടിഫിക്കേഷൻ build step, upload ഇല്ലാതെ readable markup നൽകുന്നു. minified അല്ലെങ്കിൽ ക്രമരഹിത page paste ചെയ്ത്, indentation, wrap width തിരഞ്ഞെടുത്ത്, ഇൻലൈൻ CSS, JS reformat ചെയ്യണോ തീരുമാനിച്ച്, copy അല്ലെങ്കിൽ download ചെയ്തോളൂ. ഒന്നും ഡിവൈസ് വിടില്ല, account വേണ്ട, library ആവശ്യപ്പെടുമ്പോൾ മാത്രം load ആകുന്നു — megabyte അല്ല, ഏതാനും kilobytes.