אני בונה כלים למחייתי, והדבר הנפוץ ביותר שאני עושה לפני קריאת מישהו ' הקצה הקדמי של ה-HTML שלהם מופעל באמצעות מעצב תבניות שרת יורקות סימון בשורה אחת. Bundlers ממוטטים את זה. קטע שמישהו מדביק לתוך Slack מגיע עם שלוש רמות קינון שטוחות לקיר של סוגריים זווית. אני לא יכול לנפות באגים במה שאני לא יכול לקרוא, אז המהלך הראשון הוא תמיד זהה: הדבק אותו, הכה לייפות ותן למבנה לחשוף את עצמו. המדריך הזה הוא זה שהלוואי שהייתי מוסר לעצמי הצעיר, שנהג להחזיר את הסימון ביד וטעה חצי מהזמן.
TL;DR: מעצב HTML מזין מחדש סימון כך שתוכל לקרוא את המבנה שלו, ומצמצם אותו בחזרה כך שהוא נשלח קטן. השתמש ב-beautify בזמן שאתה בונה ומאתר באגים, מזער לייצור. ה פורמט HTML ב-Toolz.dev עושה את שניהם בדפדפן שלך, שומר על הסקריפט, הסגנון והתוכן המקדים שלך בייט-עבור-בייט, ולעולם לא מעלה דבר.
מהו פורמט HTML?
מעצב HTML הוא כלי שמנתח את הסימון שלך לתוך עץ התגים שלו ומדפיס אותו בחזרה עם הזחה עקבית, רמה אחת לכל עומק קינון. זה כיוון היופי. הפוך, מזער, מפשיט את הרווח הלבן הלא משמעותי בין התגים כך שהקובץ קטן ככל האפשר מבלי לשנות את האופן שבו דפדפן מעבד אותו. רוב המעצבים הטובים, כולל זה ב-Toolz.dev, עושים את שניהם מאותו קלט.
המילה "insignificant" עושה עבודה אמיתית במשפט הזה. ב-HTML, חלק מהרווחים הלבנים חשובים וחלק לא. השורה החדשה ושני הרווחים שאתה שם בין סגירה </li> והבאה <li> אל תשנה דבר בדף המעובד, כך שמעצב חופשי להוסיף, להסיר או לנרמל אותם. אבל הרווחים בתוך א <pre> בלוק, או הרווח היחיד בין שני מוטבעים <a> אלמנטים, הם חלק ממה שהמשתמש רואה מעצב שלא מבין שההבדל ישבור בשמחה את הפריסה שלך זה הגבול בין מעצב שעוזר לכזה שאתה לומד לא לסמוך עליו.
אם השתמשת יפה יותר בעורך שלך, אתה כבר מכיר את התחושה: אתה מפסיק לדאוג להזחה כי כלי מבטיח זאת. מעצב מבוסס דפדפן נותן לך את אותה אחריות לקטעים חד פעמיים, פלט שנוצר וסימון שאינך שולט בו, מבלי להגדיר פרויקט.
למה HTML בסופו של דבר מבולגן מלכתחילה?
זה עוזר לדעת מאיפה הבלגן מגיע, כי זה אומר לך מה יש לפורמט לשרוד.
המקור הראשון הוא עיבוד שרת תבנית PHP, תצוגת Rails או קובץ Blade פולטים HTML עם כל רווח לבן שמנוע התבנית הרגיש כמו לייצר, ולאחר שתוכנת הביניים של המיניפיקציה פועלת, לרוב היא שורה בודדת באורך אלפי תווים כאשר משהו נראה לא בסדר בדפדפן ואתה לוחץ על "View Source," זה מה שאתה מקבל.
המקור השני הוא העתק והדבק אתה תופס רכיב ממערכת עיצוב, קטע מ-CMS או תבנית דואל שמישהו שלח לך, והוא נושא כל מרווח שהמקור השתמש בו: כרטיסיות ורווחים מעורבים, קינון לא עקבי, רווח לבן נגרר. אני מבלה הרבה מהשבוע שלי בתוך וורדפרס ופלט CMS ללא ראש, וסימון שנוצר על ידי CMS הוא מהגרועים ביותר, מכיוון שהוא מורכב מקטעים שכל אחד מהם עוצב בצורה שונה.
המקור השלישי הוא markup שנוצר בניית כלים, עורכי WYSIWYG, ופונקציות ייצוא לייצר HTML שמעולם לא היה אמור להיקרא על ידי אדם זה נכון, אבל זה אטום מעצב הופך אותו בחזרה למשהו שאתה יכול לבקר.
השרשור המשותף הוא שלאף אחד מהמקורות הללו לא אכפת אם אתה יכול לקרוא את התוצאה. זו העבודה שלך, ומעצב הוא הדרך המהירה ביותר לעשות זאת.
כיצד אוכל לעצב HTML באינטרנט?
זרימת העבודה על Toolz.dev לוקח בערך עשר שניות:
- פתח את פורמט HTML והדבק את הסימון שלך בלוח הקלט. זה לא משנה אם הוא ממוזער על שורה אחת, מחורץ בצורה לא עקבית או שבר חשוף.
- בחר Beautify כדי להרחיב אותו או Minify כדי לדחוס אותו.
- לייפות, בחר את ההזחה שלך: 2 רווחים, 4 רווחים או כרטיסיות. שני רווחים הם ברירת המחדל הנפוצה באינטרנט.
- לחלופין סמן "הסר הערות" כדי להסיר הערות HTML מהפלט.
- העתק את התוצאה או הורד אותה בתור
.htmlקובץ.
הכל רץ צד לקוח המנתח הוא JavaScript בדפדפן שלך, כך הסימון אף פעם לא נוגע בשרת זה חשוב יותר ממה שאנשים מניחים, אשר אני אחזור.
מה ההבדל בין לייפות לבין למזער?
אלו הן פעולות הפוכות שחולקות מנתח, ולדעת מתי להגיע לכל אחת מהן היא רוב המיומנות.
מייפה זה לבני אדם זה מוסיף מעברי שורות והזחה כך שהקינון נראה, וזה מה שאתה רוצה בזמן עריכה, ניפוי באגים, הבדל שתי גרסאות או סקירת בקשת משיכה כשאני צד באג פריסה, אני מייפה קודם כדי שאוכל לראות איזה אלמנט לא סגור או מקונן רמה אחת עמוקה מדי.
מזעור הוא עבור מכונות זה מסיר את הרווח הלבן דפדפן מתעלם כך הקובץ הוא קטן יותר ומהיר יותר להעביר אתה מזער HTML מאותה הסיבה שאתה מזער CSS או JavaScript: בתים מעל חוט עלות זמן, ועל דף גדול הרווח הלבן מצטבר אם אתה כבר להישען על ממיר HTML עבור דחיסת ייצור, הפורמט הוא הכלי שבו אתה משתמש כדי לקרוא את הפלט הזה שוב כשמשהו נשבר.
הנה איך שני הכיוונים משתווים להחלטות השונות בפועל:
| אספקט | לְיַפֵּף | למזער |
|---|---|---|
| מטרה | קריאות | הקובץ הקטן ביותר |
| רווח לבן בין תגיות | נוסף ומנורמל | הוסר |
| גודל פלט | גדול יותר | קטן יותר |
| מתי להשתמש | עריכה, איתור באגים, סקירה | הפקה, העברה |
| הזחה | 2 רווחים, 4 רווחים או כרטיסיות | אף אחד |
| תוצאה מעובדת | זהה | זהה |
השורה האחרונה היא החשובה. אף פעולה לא משנה את איך שהדף נראה. רק הרווח הלבן שדפדפן מתייחס אליו כאל שינויים לא משמעותיים. אם מעצב אי פעם משנה את הפלט המעובד שלך, זה באג בפורמט, לא מאפיין של עיצוב.
האם העיצוב ישבור את ה-JavaScript, ה-CSS או הטקסט המעוצב מראש שלי?
זו השאלה שמפרידה בין צעצוע לכלי, וזו הסיבה שאני בררן באיזה פורמט אני משתמש.
אלמנטים מסוימים מחזיקים תוכן שבו הרווח הלבן והתווים משמעותיים ואסור לגעת בהם. ה תקן WHATWG HTML מסווג script ו style כרכיבי טקסט גולמי ו textarea ו title כרכיבי טקסט גולמי הניתנים לברוח. בתוכם, מעצב חייב להתייחס לתוכן כאטום. אם הוא מנסה להזין מחדש את ה-JavaScript ב-a script תג, זה יכול לשנות את התוכן של תבנית מילולית, לשנות ביטוי רגולרי או להזיז שורה בתוך מחרוזת מרובת שורות, ועכשיו הקוד שלך מתנהג אחרת. זה לא שינוי עיצוב, כלומר באג שהפורמט הציג.
ה pre אלמנט הוא מקרה קשור כל מטרתו היא לשמר רווח לבן, כך שתוכן הטקסט שלו מוצג בדיוק כפי שנכתב. a formatter that reindents inside <pre> משנה באופן גלוי את הדף.
פורמט Toolz.dev מטפל בכל אלה על ידי טיפול script, style, pre, textarea, ו title כתוכן גולמי: הוא מזין מחדש את ה-HTML סביבם אך מעתיק את הטקסט הפנימי שלהם מילה במילה הקוד והטקסט המעוצב מראש שלך יוצאים בתים-עבור-בתים זהים כשבדקתי זאת תוך כדי בנייתו, סרגל הקבלה היה פשוט: א <script> המכילים if(a<b){x=1} צריך לשרוד ללא נגיעה, וזה קורה אם אתה עובד עם סימון המכיל סקריפטים או סגנונות מוטבעים, זה המאפיין שיש לבדוק לפני שאתה סומך על מעצב כלשהו.
האם מעצב יכול להתמודד עם HTML שבור או לא שלם?
HTML אמיתי רק לעתים רחוקות מעוצב היטב כמו XML, ומעצב שדורש שלמות הוא חסר תועלת. דפדפנים הם סובלניים מפורסמים: ה אלגוריתם ניתוח HTML מגדיר בדיוק כיצד לטפל בתגי קצה שהושמטו ובאלמנטים מקוננים שגויים, וזו הסיבה שדף עם חסר </li> עדיין הופך בסדר מעצב טוב שואל את אותה סובלנות.
המקרה הנפוץ ביותר הוא תגי קצה אופציונליים. HTML מאפשר לך להשמיט את תג הסגירה על אלמנטים כמו li, p, td, tr, ו option, כי המפרט אומר פתוח li נסגר באופן מרומז כאשר הבא li מתחיל. כך <ul><li>a<li>b</ul> תקף, ואת Toolz.dev formatter מיישם כללים אלה משתמע-סגור לייצר <li>a</li> ו <li>b</li> על הקווים שלהם, בדיוק כמו שדפדפן היה בונה את העץ.A <p> נסגר אוטומטית כאשר אלמנט בלוק נפתח בתוכו, מכיוון שפסקה אינה יכולה להכיל תוכן בלוק.
המקרה השני הוא סימון שבור באמת: תג שנפתח ומעולם לא נסגר, או תג סגירה תועה ללא פתיחה תואמת. המעצב סוגר כל דבר שנותר תלוי בסוף המסמך ומדווח עליו כאזהרה, כך שאתה יודע שהקלט לא היה שלם ולא ניחש בשקט. אזהרות אלו הן לרוב הדרך המהירה ביותר למצוא את הבאג המדויק שבאת לתקן.
השווה התנהגות זו מול מעצב קפדני, ונגד ביצוע ביד:
| גישה | תגי קצה שהושמטו | תגיות unclosed | מהירות |
|---|---|---|---|
| מעצב סובלני (Toolz.dev) | מיישם כללים משתמעים-סגורים | נסגר אוטומטית ומזהיר | מיידי |
| פורמט קפדני בסגנון XML | לעתים קרובות שגיאות החוצה | שגיאות החוצה | מיידי כאשר זה עובד |
| הזחה ידנית | אתה עוקב אחרי זה בעצמך | קל לפספס | איטי ונוטה לשגיאות |
פעם הייתי בשורה התחתונה הזו, נכנסתי לאחור ביד ופספסתי לא סגור div שלוש פעמים מתוך עשר הכלי הסובלני מנצח כי סימון אמיתי מבולגן ואתה רוצה שהבלגן יופיע, לא יידחה.
מתי עלי להשתמש בפורמט מול העורך שלי?
אם הקובץ בבעלותך והוא נמצא בפרויקט שלך, העורך שלך בתוספת Prettier או שווה ערך הוא הבית הנכון לעיצוב, מכיוון שהוא פועל בשמירה ונשאר עקבי בכל הצוות. אני לא מציע לך להחליף את זה.
מעצב מבוסס דפדפן מרוויח את מקומו בפערים שזרימת העבודה משאירה אתה מדביק קטע מדוח באג וצריך לקרוא אותו כבר עכשיו אתה נמצא על מכונה שהיא לא תיבת הפיתוח שלך אתה מסתכל על פלט CMS, תבנית דואל או סימון שנוצר שמעולם לא חי בריפו אתה רוצה למזער קטע בודד מבלי לחבר שלב בנייה בכל המקרים האלה, פתיחת כרטיסייה מהירה יותר מהגדרת פרויקט, והתוצאה זהה.
יש גם את זווית הפרטיות, וזה לא דבר קטן. כי מנתח Toolz.dev פועל כולו בדפדפן שלך, סימון המכיל כתובות URL פנימיות, עותק שלא פורסם, תגובות API מוטבע בתבנית, או לקוח & #39;s נתונים לעולם לא עוזב את המכשיר שלך הרבה מעצבים מקוונים לפרסם את הקלט שלך לשרת לעשות את העבודה לכל דבר מבסיס קוד עבודה, כלומר חשיפה לנתונים אתה לא צריך לקחת אכפת לי מזה מספיק שזה כלל עיצוב לכל כלי באתר, אשר כתבתי עליו יותר ב ערכת כלים למפתחי אינטרנט והמדריך ל פרטיות נתונים בכלים מקוונים.
זרימת עבודה מעשית שחסכה לי שעות
הנה הלולאה שאני למעשה מפעיל כאשר פריסה מתנהגת לא נכון ייפה את הסימון כך שהקינון נראה לעין סרוק את ההזחה עבור הרמה שנראית לא נכונה, כי הזחה נוספת תועה פירושה כמעט תמיד תג שמעולם לא נסגר קרא את אזהרות הפורמט, אשר לעתים קרובות שמות את האלמנט המדויק שלא נסגר תקן אותו במקור אם הפרגמנט מיועד לייצור, צמצם אותו בדרך חזרה החוצה כל המחזור הוא דקה, ורוב הדקה הזו היא שאני קורא, לא נלחם בכלי.
אותה לולאה עובדת עבור ביקורת תוכן. כשאני בודק סימון עבור נגישות או SEO, אני מייפה תחילה כדי שאוכל לראות את מבנה הכותרת ואלמנטים ציוני דרך במבט חטוף, ואז אני מושך חלקים ספציפיים לכלים אחרים: המרת נתח ל-Markdown לתיעוד עם HTML ל-Markdown ממיר, או יצירת טבלת השוואה עם מחולל טבלאות סימון. עיצוב הוא השלב שהופך את המבנה לקריא מספיק כדי לעבוד איתו. אם אתה רוצה שהשגרה הרחבה יותר שהכלים האלה יתאימו אליה, ה כלי פרודוקטיביות למפתחים המדריך פורס את זה.
שאלות נפוצות
כיצד אוכל לעצב HTML באינטרנט?
הדבק את ה-HTML שלך בלוח הקלט, בחר Beautify, בחר רוחב הזחה ולחץ על עיצוב הכלי מנתח את עץ התגים ומכניס אותו מחדש, ואז מאפשר לך להעתיק או להוריד את התוצאה כל העיבוד מתרחש בדפדפן שלך, כך ששום דבר לא מועלה.
מה ההבדל בין לייפות לבין למזער HTML?
ייפוי מוסיף מעברי שורות והזחה כך שהקינון קל לקריאה, וזה אידיאלי לעריכה וניפוי באגים. מזעור מסיר את הרווח הלבן הלא משמעותי בין התגים כדי לייצר קובץ קטן יותר לייצור. שניהם שומרים על אותה תוצאה מעובדת; רק הרווח הלבן משתנה.
האם העיצוב ישנה את איך שהדף שלי נראה?
מס 'הפורמט רק משנה רווח לבן בין תגיות, לא את האלמנטים, תכונות, או טקסט.Content where whitespace is significant, כגון pre, textarea, and inline text, is cerved, so a page renders the same before and after formatting.
האם הפורמט מעצב מחדש את ה-JavaScript וה-CSS שלי?
מס 'תוכן בתוך סקריפט ותגי סגנון מטופל כטקסט גולמי ומועתק מילה במילה הכלי מזין מחדש את ה - HTML סביבם אך לעולם אינו נוגע בקוד עצמו, כך שמילוליות תבנית, ביטויים רגולריים וערכי CSS נשארים זהים בתים-עבור-בתים.
האם זה יכול להתמודד עם HTML שבור או לא שלם?
כן, בתוך סיבה המנתח סובלני: הוא מחיל את אותם כללי סגירה משתמעים שדפדפנים משתמשים בהם עבור תגים כמו li, p ו-td, והוא סוגר אוטומטית תגים שנותרו פתוחים בסוף המסמך. כשזה קורה, זה מציג אזהרה כדי שתדע שהסימון לא היה שלם.
האם זה בטוח לעצב HTML שמכיל נתונים רגישים?
כן המנתח פועל כולו ב-JavaScript בדפדפן שלך אף בקשת רשת לא נושאת את הסימון שלך, שום דבר לא מאוחסן, והכלי עובד במצב לא מקוון לאחר הטעינה. HTML מחזיק קישורים פנימיים, תגובות API או עותק שלא פורסם לעולם לא עוזב את המחשב שלך.
אילו אפשרויות הזחה זמינות?
Beautify פלט תומך 2 רווחים, 4 רווחים, או כרטיסיות. Two רווחים הוא ברירת המחדל הנפוצה עבור פרויקטים באינטרנט, ארבעה רווחים מתאים צוותים המעדיפים הזחה רחבה יותר, וכרטיסיות לאפשר לכל מפתח להגדיר רוחב התצוגה שלהם בעורך.
במה שונה פורמט HTML מ-HTML minifier?
לפורמט יש את שני הכיוונים בכלי אחד: לייפות כדי להרחיב את הסימון לקריאה, ולמזער כדי למוטט אותו למשלוח. minifier ייעודי רק דוחס. אם אתה צריך בעיקר דחיסת ייצור, minifier HTML מתמקד בזה; אם אתה עובר בין קריאה למשלוח, הפורמט מכסה את שניהם.
עצב את הסימון שלך עם החינם פורמט HTML. הוא פועל כולו בדפדפן שלך, שומר על הסקריפטים והתוכן המעוצב מראש ללא פגע, ולעולם לא מעלה בייט.
