تعلم أن تكون سيد زين للترميز

يشير الترميز أو الترميز إلى لغات الترميز أو علامات التمييز كما هي HTML و CSS، ونعلم جميعًا كم هو مؤلم فتح وإغلاق الملصقات واحدة تلو الأخرى لإنشاء قالب ويب ...

بالطبع هناك حلول لهذا ، أحدها هو الإكمال التلقائي مع مثل IDE دريمويفر mierda بلوجريفون مزعج إذا لم تشتري منه المكونات الإضافية o تحرير كومودو ثقيل جدا... النقطة المهمة هي أن محرري IDE أو محرري التعليمات البرمجية المحملين بالخيارات غالبًا ما ينتهي بهم الأمر إلى إعاقة العمل بطرق لا يمكن تصورها ؛ هذه هي حالة دريمويفر تملأك بالشفرة التافهة التي تنشئها بيانياً وهي ثقيلة ومكلفة وقبيحة. بلوجريفون إنه أمر مزعج في الغالب لأنه مجاني ومجاني ، لكن نصف الخيارات محجوزة للمستخدمين المدفوعين ... هذا ليس ممتعًا. وأخيرا لدينا كومودو تحرير، وهو جيد جدًا وقوي ومليء بالخيارات ولكنه ثقيل (100 ميجابايت في iddle) وإعداده ممل.

أفضل سلاح لمطور الويب أو مصمم الويب ليس IDE بأسلوب دبابة الحرب التي تحتوي على ألف سلاح في الأعلى ، إنه محرر نصوص بسيط ، وبعض الإضافات والقدرة على الكتابة مثل شخص مريض ... لذلك أضف سحر زين الترميز وسيكون لديهم في أصابعهم أفضل أداة لوضع العلامات التي تم إنشاؤها على الإطلاق (على الأقل بالنسبة لي).

لكن ... ما هو بحق الجحيم زين الترميز?

بسيط ، إنه مكون إضافي خاص يعمل كطبقة تجريد منسدلة لـ HTML و CSS تم إنشاؤها في Javascript ومتاح للعديد من أشهر الناشرين (المفكرة ++ ، Komodo-edit ، Gedit ، Kate ، Bluefish ، Geany ، Dreamweaver، وما إلى ذلك).

آها ، ما زلت لا أفهم فكرة لعنة ما تقوله ...

لذلك أريكم بمثال بسيط ؛ تذكر الشيء التجريدي المنسدل؟ حسنًا ، قم بتغييره إلى الانكماش ، تخيل أنه يمكنك أخذ سطر من كود HTML / CSS مطويًا في سطر واحد ثم فتحه مثل ستارة أو طيها مرة أخرى ... هل تريد أن ترى كيف؟ عليك فقط التأكد من أن لديك شيئين لإنجاحه:

لديك زين الترميز مثبتة في محررك.
تعرف على الأوامر والنحو لاستخدامها.

حسنًا ، أصابع إلى الكود:

html>head+body

ترى هذا السطر من التعليمات البرمجية؟ حسنًا ، هذه هي صيغة HTML ، إنها بسيطة:

أولاً ، تضع اسم العلامة (html) ثم تشير إلى العلامات التي ستكون داخل تلك العلامة (>) ثم اسم العلامات التي تدخل داخل تلك العلامة (الرأس والجسم). تشير علامة "+" إلى أن الرأس والجسم هما تسميتان مختلفتان ولا يوجد أي منهما في الآخر ، كما لو كنت تقول "معا ولكن ليس مختلطة«... ثم ، دعونا نرى ما يولده هذا السطر من التعليمات البرمجية عند الضغط على المفاتيح السحرية (في حالتي CTRL + E):

بالضبط ، 4 أسطر من التعليمات البرمجية تم تكوينها في سطر واحد ، والتي تظهر بطريقة سحرية عند الضغط على مجموعة المفاتيح الصحيحة ... ويمكن أن يكون هناك المزيد ؛ فمثلا:

html>head+body>ul#lista_ordenada>li.listilla*5

نفس الصيغة ، لكننا نضيف شيئًا آخر ... إذا كنت تعرف بعض CSS ، فستدرك أننا نضيف معرفًا وفئات وشيءًا لم تكن تعرفه بالتأكيد ؛ المضاعفات ... ما كل هذا!؟ اللعنة أنت تربكني!

اهدأ ، هذا بسيط للغاية ، قلنا ما سبق أن داخل الجسم أدخل علامة «ul» ، لا شيء غريب ، لقد أوضحت هذا أعلاه ، ثم قمنا بتعيين معرف ، إذا كنت تعرف CSS فسوف تفهم أن هؤلاء مرتبطون بـ علامة "#" ، وداخل تلك القائمة غير المرتبة (ul) نضيف خمسة تسميات مع فئة listilla ، أشرح ذلك بإيجاز. في الواقع ، الأمر بسيط للغاية ، حيث يشير الرمز "#" إلى أنه معرف ، ثم تقول "li.listilla" أنه يتعين علينا إنشاء علامة "li" باستخدام الفئة listilla «li class = listilla» ثم نقول «كرر ذلك خمس مرات«. ما يعطينا نتيجة لذلك:

اثنا عشر سطراً من التعليمات البرمجية مكتوبة في سطر واحد وفي وقت أقل بكثير 😉

ويمكن القيام بذلك أيضًا باستخدام CSS ، على الرغم من أنني لن أطيل المقالة من خلال إظهار ما هو واضح (أدناه سوف أقدم لك قائمة كاملة من الغش ل زين الترميز).

يجب أن أؤكد أن هذا لا يعمل على إنشاء زليون مائة ألف سطر في واحد ، أوه لا ، هذا له حد وطريقة لاستخدامه. إذا أردنا على سبيل المثال القيام بشيء مثل هذا:

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

ما يجب أن يعطينا هذا نظريًا (انظر إلى الخط المميز في الصورة الأخيرة):

سوف يعطينا هذا:

مما يدل على أنه لا يمكنك أن تفعل السحر مع هذا أيضًا ؛ تذكر أن خبير Zen في الكود يجب أن يكون دقيقًا وسريعًا ، وأن القيام بالأشياء بشكل خاطئ يزيل السرعة والوقت ، وبالتالي فإن الأسلوب الصحيح للكتابة بسرعة وباستخدام زين الترميز سيكون هذا:

html>head>body>ul#lista_ordenada>li.listilla*5

تقوم بتوسيع وداخل علامة الرأس:

title+meta

والذي سيعطيك الكود الصحيح:

على الرغم من أن زين الترميز لديها الكثير من الأشياء لتظهر لك وربما الحاجة إلى كتابة سطر أوامر آخر داخل الرأس ليس هو الأفضل ، لذلك نستخدم أمرًا آخر ، «توسع مع الاختصار" في حالتي ctrl + alt + e سيؤدي ذلك إلى فتح شريط صغير حيث يمكننا كتابة كود Zen ونرى كيف يظهر في الوقت الفعلي. كن حذرًا ، لا أوصي بكتابة كل شيء بهذا ولكن الكتابة داخل الهياكل التي تم إنشاؤها بالفعل ، أعني ، أولاً قم بإنشاء الهياكل الكبيرة ثم ستقوم بالتفصيل بداخلها باستخدام هذا الخيار.

وهناك العديد من الأوامر الرائعة داخل ملف زين الترميز، الشيء هو أنك تقوم بفحصها بمجرد تثبيتها وتعلم كيفية استخدامها ؛ باستخدام هذا البرنامج المساعد ، لن تحتاج إلى تكملة تلقائية أو مقتطفات لـ css أو html ، في الواقع ، مع هذا ستدرك أن هذه الخيارات هي مضيعة كاملة للوقت في لغتي البرمجة هاتين

وللمهتمين ، إليك ورقة الغش الرسمية الخاصة بـ زين الترميز، يمكنك رؤيتها بتنسيق ODF o PDF فقط HERE