أقوم ببناء أدوات لكسب لقمة العيش، والشيء الوحيد الأكثر شيوعًا الذي أفعله قبل قراءة أي شخص '؛ يتم تشغيل الواجهة الأمامية لـ HTML من خلال المنسق. تبصق قوالب الخادم العلامات على سطر واحد. يقوم المجمعون بطيها. يصل المقتطف الذي يلصقه شخص ما في Slack بثلاثة مستويات من التداخل مسطحة في جدار من الأقواس الزاوية. لا أستطيع تصحيح ما لا أستطيع قراءته، لذا فإن الخطوة الأولى هي نفسها دائمًا: لصقه، ثم ضربه، ودع الهيكل يكشف عن نفسه. هذا الدليل هو الدليل الذي كنت أتمنى لو سلمته لنفسي الأصغر سنًا، والذي اعتاد إعادة وضع العلامات يدويًا وأخطأ في نصف الوقت.
ليرة تركية؛DR: يقوم منسق HTML بإعادة تحديد المسافة البادئة حتى تتمكن من قراءة بنيته، ثم يقوم بتصغيرها مرة أخرى حتى يتم شحنها صغيرة. استخدم التجميل أثناء البناء وتصحيح الأخطاء، وتصغير الإنتاج. ال منسق HTML يقوم Toolz.dev بالأمرين معًا في متصفحك، ويحتفظ بالبرنامج النصي والأسلوب والمحتوى المسبق بايت مقابل بايت، ولا يقوم بتحميل أي شيء أبدًا.
ما هو منسق HTML؟
منسق HTML هو أداة تقوم بتوزيع العلامات الخاصة بك في شجرة العلامات الخاصة بها وطباعتها مرة أخرى بمسافة بادئة متسقة، مستوى واحد لكل عمق تداخل. هذا هو اتجاه التجميل. يقوم العكس، وتصغيره، بتجريد المسافة البيضاء غير المهمة بين العلامات بحيث يكون الملف صغيرًا قدر الإمكان دون تغيير كيفية عرضه للمتصفح. معظم أدوات التنسيق الجيدة، بما في ذلك تلك الموجودة على Toolz.dev، تقوم بالأمرين معًا من نفس الإدخال.
الكلمة "؛ غير مهم "؛ يقوم بعمل حقيقي في تلك الجملة. في HTML، بعض المسافات البيضاء مهمة والبعض الآخر لا يهم. السطر الجديد والمسافتين اللتين تضعهما بين الإغلاق </li> والتالي <li> لا تغير شيئًا عن الصفحة المعروضة، لذا فإن المنسق حر في إضافتها أو إزالتها أو تطبيعها. لكن المسافات داخل أ <pre> كتلة، أو مسافة واحدة بين اثنين مضمنين <a> العناصر، هي جزء مما يراه المستخدم. المنسق الذي لا يفهم هذا الاختلاف سوف يكسر التخطيط الخاص بك بسعادة. هذا هو الخط الفاصل بين المنسق الذي يساعد والذي تتعلم عدم الثقة به.
إذا كنت قد استخدمت أجمل في المحرر الخاص بك، أنت تعرف بالفعل الشعور: تتوقف عن الاهتمام بالمسافة البادئة لأن الأداة تضمن ذلك. يمنحك المنسق المستند إلى المتصفح نفس الضمان للمقتطفات لمرة واحدة، والمخرجات التي تم إنشاؤها، والعلامات التي لا تتحكم فيها، دون إعداد مشروع.
لماذا ينتهي الأمر بـ HTML إلى الفوضى في المقام الأول؟
من المفيد معرفة مصدر الفوضى، لأنها تخبرك بما يجب أن يبقى عليه المنسق.
المصدر الأول هو عرض الخادم. يقوم قالب PHP أو عرض Rails أو ملف Blade بإصدار HTML بأي مسافة بيضاء يشعر محرك القالب برغبة في إنتاجها، وبعد تشغيل البرامج الوسيطة للتصغير، غالبًا ما يكون طوله سطرًا واحدًا من آلاف الأحرف. عندما يبدو شيء ما خاطئًا في المتصفح وتضرب "؛ عرض المصدر، "؛ هذا ما تحصل عليه.
المصدر الثاني هو النسخ واللصق. يمكنك الحصول على مكون من نظام التصميم، أو جزء من نظام إدارة المحتوى، أو قالب بريد إلكتروني أرسله إليك شخص ما، ويحمل أي مسافة يستخدمها المصدر: علامات تبويب ومسافات مختلطة، وتداخل غير متناسق، ومسافات بيضاء زائدة. أقضي الكثير من أسبوعي داخل WordPress ومخرجات CMS مقطوعة الرأس، وتعد العلامات التي تم إنشاؤها بواسطة CMS من أسوأ العلامات، لأنها مجمعة من أجزاء تم تنسيق كل منها بشكل مختلف.
المصدر الثالث يتم إنشاؤه الترميز. تنتج أدوات البناء ومحررات WYSIWYG ووظائف التصدير HTML لم يكن من المفترض أبدًا أن يقرأه الإنسان. هذا صحيح، لكنه معتم. يقوم المنسق بتحويله مرة أخرى إلى شيء يمكنك تدقيقه.
القاسم المشترك هو أن أياً من هذه المصادر لا يهتم بما إذا كان بإمكانك قراءة النتيجة. هذه هي مهمتك، والمنسق هو أسرع طريقة للقيام بذلك.
كيف أقوم بتنسيق HTML عبر الإنترنت؟
يستغرق سير العمل على Toolz.dev حوالي عشر ثوانٍ
- افتح ال منسق HTML والصق العلامات الخاصة بك في لوحة الإدخال. لا يهم إذا تم تصغيره إلى سطر واحد، أو وضع مسافة بادئة بشكل غير متسق، أو جزء مجرد.
- اختر Beautify لتوسيعه أو Minify لضغطه.
- للتجميل، اختر المسافة البادئة الخاصة بك: مسافتان، أو 4 مسافات، أو علامات تبويب. مسافتان هي المسافة الافتراضية الشائعة على الويب.
- اختياريا ضع علامة & اقتباس؛ إزالة التعليقات والاقتباس؛ لتجريد تعليقات HTML من الإخراج.
- انسخ النتيجة أو قم بتنزيلها كـ
.htmlملف.
كل شيء يسير على جانب العميل. المحلل اللغوي هو JavaScript في متصفحك، وبالتالي فإن العلامات لا تلمس الخادم أبدًا. وهذا يهم أكثر مما يفترضه الناس، وهو ما سأعود إليه.
ما الفرق بين التجميل والتصغير؟
هذه عمليات متعارضة تشترك في المحلل اللغوي، ومعرفة متى يجب الوصول إليها لكل منها هي معظم المهارة.
التجميل للبشر. فهو يضيف فواصل الأسطر والمسافة البادئة بحيث يكون التداخل مرئيًا، وهو ما تريده أثناء التحرير أو تصحيح الأخطاء أو تغيير نسختين أو مراجعة طلب السحب. عندما أقوم بالبحث عن خطأ في التخطيط، أقوم بالتجميل أولاً حتى أتمكن من رؤية العنصر غير المغلق أو المتداخل في مستوى واحد عميق جدًا.
التصغير مخصص للأجهزة. فهو يزيل المسافة البيضاء التي يتجاهلها المتصفح بحيث يكون الملف أصغر وأسرع في النقل. يمكنك تصغير HTML لنفس السبب الذي يجعلك تصغير CSS أو JavaScript: تكلف البايتات عبر السلك وقتًا، وفي صفحة كبيرة تضيف المسافة البيضاء. إذا كنت تعتمد بالفعل على مصغر HTML بالنسبة لضغط الإنتاج، فإن المنسق هو الأداة التي تستخدمها لقراءة هذا الإخراج مرة أخرى عندما ينكسر شيء ما.
وإليك كيفية مقارنة الاتجاهين بالقرارات التي تختلف فعليا
| جانب | تجميل | تصغير |
|---|---|---|
| هدف | سهولة القراءة | أصغر ملف |
| مسافة بيضاء بين العلامات | تمت إضافتها وتطبيعها | تمت إزالته |
| حجم الإخراج | أكبر | أصغر |
| متى تستخدم | التحرير، تصحيح الأخطاء، المراجعة | الإنتاج والنقل |
| المسافة البادئة | مسافتان أو 4 مسافات أو علامات تبويب | لا أحد |
| النتيجة المقدمة | متطابق | متطابق |
الصف الأخير هو المهم. ولا تغير أي من العمليتين شكل الصفحة. فقط المسافة البيضاء التي يتعامل معها المتصفح على أنها تغييرات غير مهمة. إذا قام المنسق بتغيير مخرجاتك المعروضة، فهذا خطأ في المنسق، وليس خاصية للتنسيق.
هل سيؤدي التنسيق إلى كسر نص JavaScript أو CSS أو النص المنسق مسبقًا؟
هذا هو السؤال الذي يفصل اللعبة عن الأداة، وهذا هو السبب الذي يجعلني انتقائيًا بشأن المنسق الذي أستخدمه.
تحتوي بعض العناصر على محتوى حيث تكون المسافات البيضاء والأحرف مهمة ويجب عدم لمسها. ال معيار WHATWG HTML يصنف script و style كعناصر نص خام و textarea و title كعناصر نصية أولية قابلة للهروب. بداخلها، يجب على المنسق التعامل مع المحتوى على أنه معتم. إذا حاول إعادة ربط JavaScript في ملف script العلامة، يمكنها تغيير محتويات القالب حرفيًا، أو تغيير تعبير عادي، أو نقل سطر داخل سلسلة متعددة الأسطر، والآن يتصرف الكود الخاص بك بشكل مختلف. هذا ليس تغييرًا في التنسيق، بل هو خطأ قدمه المنسق.
ال pre العنصر هو حالة ذات صلة. الغرض الأساسي منه هو الحفاظ على المسافات البيضاء، بحيث يتم عرض محتوى النص الخاص به تمامًا كما هو مكتوب. المنسق الذي يعيد المسافة إلى الداخل <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 بتطبيق قواعد الإغلاق الضمني هذه لإنتاجها <li>a</li> و <li>b</li> على خطوطهم الخاصة، تمامًا كما يقوم المتصفح ببناء الشجرة. أ <p> يتم إغلاقه تلقائيًا عند فتح عنصر كتلة بداخله، لأن الفقرة لا يمكن أن تحتوي على محتوى كتلة.
الحالة الثانية هي علامات مكسورة حقًا: علامة مفتوحة ولم يتم إغلاقها أبدًا، أو علامة إغلاق طائشة بدون فتح مطابق. يقوم المنسق بإغلاق أي شيء متبقي متدليًا في نهاية المستند والإبلاغ عنه كتحذير، حتى تعرف أن الإدخال كان غير مكتمل وليس تخمينًا بصمت. غالبًا ما تكون هذه التحذيرات هي أسرع طريقة للعثور على الخطأ الدقيق الذي أتيت لإصلاحه.
قارن هذا السلوك ضد المنسق الصارم، وضد القيام بذلك يدويًا
| يقترب | علامات النهاية المحذوفة | العلامات غير المغلقة | سرعة |
|---|---|---|---|
| المنسق المتسامح (Toolz.dev) | يطبق قواعد الإغلاق الضمني | يغلق تلقائيا ويحذر | فوري |
| منسق صارم بنمط XML | في كثير من الأحيان أخطاء | أخطاء خارج | لحظة عندما يعمل |
| إعادة المسافة البادئة اليدوية | يمكنك تتبع ذلك بنفسك | من السهل تفويتها | بطيئة وعرضة للخطأ |
اعتدت أن أكون في الصف السفلي، أعود إلى المسافة البادئة يدويًا وأفتقد رسالة غير مغلقة div ثلاث مرات من أصل عشرة. تفوز الأداة المتسامحة لأن العلامات الحقيقية فوضوية وتريد ظهور الفوضى وعدم رفضها.
متى يجب أن أستخدم المنسق مقابل المحرر الخاص بي؟
إذا كنت تمتلك الملف وكان موجودًا في مشروعك، فإن المحرر الخاص بك بالإضافة إلى Prettier أو ما يعادله هو المنزل المناسب للتنسيق، لأنه يعمل على الحفظ ويظل ثابتًا عبر الفريق. أنا لا أقترح عليك استبدال ذلك.
يكتسب المنسق المستند إلى المتصفح مكانه في الفجوات التي يتركها سير العمل. أنت تلصق جزءًا من تقرير الأخطاء وتحتاج إلى قراءته الآن. أنت على جهاز ليس صندوق التطوير الخاص بك. أنت تنظر إلى مخرجات CMS، أو قالب بريد إلكتروني، أو علامات تم إنشاؤها لم تعيش مطلقًا في الريبو. تريد تصغير مقتطف واحد دون توصيل خطوة إنشاء. في كل هذه الحالات، يكون فتح علامة التبويب أسرع من تكوين المشروع، والنتيجة هي نفسها.
هناك أيضًا زاوية الخصوصية، وهي ليست شيئًا صغيرًا. نظرًا لأن محلل Toolz.dev يعمل بالكامل في متصفحك، أو ترميز يحتوي على عناوين URL داخلية، أو نسخة غير منشورة، أو استجابات واجهة برمجة التطبيقات المضمنة في قالب، أو بيانات العميل '؛ لا تترك جهازك أبدًا. يقوم الكثير من المنسقين عبر الإنترنت بنشر مدخلاتك على الخادم للقيام بالعمل. بالنسبة لأي شيء من قاعدة بيانات العمل، فهذا يمثل تعرضًا للبيانات لا تحتاج إلى القيام به. أهتم بهذا الأمر بدرجة كافية بحيث تكون قاعدة تصميم لكل أداة على الموقع، والتي كتبت عنها المزيد في مجموعة أدوات مطور الويب والدليل ل خصوصية البيانات في الأدوات عبر الإنترنت.
سير عمل عملي وفر لي ساعات
هذه هي الحلقة التي أقوم بتشغيلها بالفعل عندما يسيء التخطيط التصرف. قم بتجميل العلامات بحيث يكون التداخل مرئيًا. قم بمسح المسافة البادئة للمستوى الذي يبدو خاطئًا، لأن المسافة البادئة الإضافية الضالة تعني دائمًا علامة لا تغلق أبدًا. اقرأ تحذيرات المنسق، والتي كثيرًا ما تذكر العنصر غير المغلق بالضبط. إصلاحه في المصدر. إذا كان الجزء مخصصًا للإنتاج، فقم بتصغيره في طريق العودة. الدورة بأكملها دقيقة، ومعظم تلك الدقيقة أقرأها، وليس محاربة الأداة.
تعمل نفس الحلقة على عمليات تدقيق المحتوى. عندما أتحقق من العلامات بحثًا عن إمكانية الوصول أو تحسين محركات البحث، أقوم أولاً بالتجميل حتى أتمكن من رؤية بنية العنوان والعناصر المميزة في لمحة، ثم أقوم بسحب أجزاء محددة إلى أدوات أخرى: تحويل قطعة إلى Markdown للتوثيق باستخدام HTML إلى Markdown المحول، أو إنشاء جدول مقارنة مع مولد الجدول. التنسيق هو الخطوة التي تجعل الهيكل مقروءًا بدرجة كافية للعمل به. إذا كنت تريد الروتين الأوسع الذي تتناسب معه هذه الأدوات، فإن أدوات إنتاجية المطور الدليل يوضح ذلك.
الأسئلة المتداولة
كيف أقوم بتنسيق HTML عبر الإنترنت؟
الصق HTML الخاص بك في لوحة الإدخال، واختر Beautify، واختر عرض المسافة البادئة، وانقر فوق تنسيق. تقوم الأداة بتوزيع شجرة العلامات وإعادة المسافة البادئة إليها، ثم تتيح لك نسخ النتيجة أو تنزيلها. تتم جميع عمليات المعالجة في متصفحك، لذلك لا يتم تحميل أي شيء.
ما الفرق بين تجميل وتصغير HTML؟
يضيف التجميل فواصل الأسطر والمسافة البادئة بحيث يكون التداخل سهل القراءة، وهو مثالي للتحرير وتصحيح الأخطاء. يؤدي التصغير إلى إزالة المسافة البيضاء غير المهمة بين العلامات لإنتاج ملف أصغر للإنتاج. كلاهما يحتفظان بنفس النتيجة المعروضة؛ تتغير المسافة البيضاء فقط.
هل سيغير التنسيق شكل صفحتي؟
لا. يقوم المنسق بتغيير المسافة البيضاء فقط بين العلامات، وليس العناصر أو السمات أو النص. يتم الحفاظ على المحتوى الذي تكون فيه المسافة البيضاء مهمة، مثل ما قبل النص ومنطقة النص والنص المضمن، بحيث تعرض الصفحة نفس الشيء قبل التنسيق وبعده.
هل يقوم المنسق بإعادة تنسيق JavaScript وCSS الخاص بي؟
لا. يتم التعامل مع المحتوى الموجود داخل البرنامج النصي وعلامات النمط كنص خام ويتم نسخه حرفيًا. تعيد الأداة وضع مسافة بادئة لـ HTML حولها ولكنها لا تلمس الكود نفسه أبدًا، لذلك تظل القيم الحرفية للقالب والتعبيرات العادية وقيم CSS متطابقة من بايت إلى بايت.
هل يمكنه التعامل مع HTML المكسور أو غير المكتمل؟
نعم، في حدود المعقول. المحلل اللغوي متسامح: فهو يطبق نفس قواعد الإغلاق الضمني التي تستخدمها المتصفحات لعلامات مثل li وp وtd، ويقوم تلقائيًا بإغلاق العلامات التي تركت مفتوحة في نهاية المستند. وعندما يحدث ذلك، فإنه يُظهر تحذيرًا حتى تعرف أن العلامات غير مكتملة.
هل من الآمن تنسيق HTML الذي يحتوي على بيانات حساسة؟
نعم. يعمل المحلل اللغوي بالكامل بلغة JavaScript في متصفحك. لا يحمل أي طلب شبكة ترميزك، ولا يتم تخزين أي شيء، وتعمل الأداة دون اتصال بالإنترنت بمجرد تحميلها. HTML الذي يحمل روابط داخلية أو استجابات واجهة برمجة التطبيقات أو نسخة غير منشورة لا يترك جهازك أبدًا.
ما هي خيارات المسافة البادئة المتاحة؟
يدعم Beautify الإخراج مسافتين أو 4 مسافات أو علامات تبويب. مسافتان هي المساحة الافتراضية الشائعة لمشاريع الويب، وأربع مسافات تناسب الفرق التي تفضل مسافة بادئة أوسع، وتسمح علامات التبويب لكل مطور بتعيين عرض العرض الخاص به في المحرر.
كيف يختلف منسق HTML عن مصغر HTML؟
يحتوي المنسق على كلا الاتجاهين في أداة واحدة: التجميل لتوسيع العلامات للقراءة، والتصغير لطيها للشحن. يقوم المصغر المخصص بالضغط فقط. إذا كنت بحاجة بشكل أساسي إلى ضغط الإنتاج، فإن مصغر HTML يركز على ذلك؛ إذا قمت بالتبديل بين القراءة والشحن، فإن المنسق يغطي كليهما.
قم بتنسيق الترميز الخاص بك مجانًا منسق HTML. يتم تشغيله بالكامل في متصفحك، ويحافظ على البرامج النصية والمحتوى المنسق مسبقًا سليمًا، ولا يقوم بتحميل بايت أبدًا.
