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 ನೀವು ಮಾಡಿದ ಬದಲಾವಣೆಯನ್ನು ತೋರಿಸುತ್ತದೆ, ಮರು ಫಾರ್ಮ್ಯಾಟ್ ಆದ ವ್ಹೈಟ್ಸ್ಪೇಸ್ನ ಗೋಡೆಯಲ್ಲ.
- ನಿಮ್ಮ ಪೇಜ್ ಅನ್ನು ನಿಧಾನ ಮಾಡುವುದಿಲ್ಲ. ಹೆಚ್ಚಿನ ಆನ್ಲೈನ್ formatter ಗಳು ಪೇಜ್ ತೆರೆದ ಕ್ಷಣವೇ ತಮ್ಮ ಇಡೀ ಲೈಬ್ರರಿ ಎಳೆಯುತ್ತವೆ. ಇದು js-beautify ಅನ್ನು ನೀವು ಬ್ಯೂಟಿಫೈ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ Live mode ಚಾಲು ಮಾಡಿದಾಗ ಮಾತ್ರ fetch ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಮೊದಲ load ಕೆಲವು ನೂರರ ಬದಲು ಕೆಲವು ಕಿಲೋಬೈಟ್ಗಳ ವೆಚ್ಚವಾಗುತ್ತದೆ ಮತ್ತು ಪೇಜ್ ವೇಗವಾಗಿ ಉಳಿಯುತ್ತದೆ.
- ಏನೂ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಬಿಡುವುದಿಲ್ಲ. ಇಡೀ ವಿಷಯ ನಿಮ್ಮ ಸಾಧನದಲ್ಲಿ ಚಲಾಯಿಸಲ್ಪಡುತ್ತದೆ. ನಿಮ್ಮ markup ಎಂದಿಗೂ server ಗೆ upload ಆಗುವುದಿಲ್ಲ, ಇದು ಪೇಜ್ ಯಾವುದೋ client ಗೆ ಸೇರಿದ್ದಾಗ, ಆಂತರಿಕ URLs ಹೊಂದಿದ್ದಾಗ ಅಥವಾ ನೀವು ಸಹಿ ಮಾಡಿದ ಗೌಪ್ಯತಾ ಒಪ್ಪಂದದ ಅಡಿಯಲ್ಲಿ ಬಂದಾಗ ಮುಖ್ಯವಾಗುತ್ತದೆ.
ಸಾಮಾನ್ಯ ಅನ್ವಯಗಳು
ಓದಲು ಬರೆಯದ markup ಅನ್ನು ಯಾರಾದರೂ ಓದಬೇಕಾದಾಗ HTML ಬ್ಯೂಟಿಫೈ ಮಾಡುವುದು ಎದುರಾಗುತ್ತದೆ.
- ಜೀವಂತ ಪೇಜ್ ಪರಿಶೀಲಿಸುವುದು: ನೀವು ಸ್ಥಳೀಯವಾಗಿ ಪುನರುತ್ಪಾದಿಸಲಾಗದ 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 ಅನ್ನು ಮರು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಬೇಕೇ ಎಂದು ನಿರ್ಧರಿಸಿ, ನಂತರ ಫಲಿತಾಂಶವನ್ನು copy ಅಥವಾ download ಮಾಡಿ. ಏನೂ ನಿಮ್ಮ ಸಾಧನ ಬಿಡುವುದಿಲ್ಲ, ಯಾವುದೇ account ಇಲ್ಲ, ಮತ್ತು ಲೈಬ್ರರಿ ನೀವು ಕೇಳಿದಾಗ ಮಾತ್ರ load ಆಗುತ್ತದೆ — ಆದ್ದರಿಂದ ಈ ಪೇಜ್ ತೆರೆಯುವುದು ನಿಮಗೆ ಒಂದು megabyte ಅಲ್ಲ, ಕೆಲವು ಕಿಲೋಬೈಟ್ಗಳ ವೆಚ್ಚವಾಗುತ್ತದೆ.