كم من الوقت تقضي لكتابة أكواد HTML ، الكثير من الأوسمة (Tags) ، ولكنها تبدوا أكثر سهولة إذا كان المحرر الذي تستخدمه لديه القدرة على إتمام و إكمال الأكواد . ولكن تبقى تلك الكتابة تستهلك الكثير من الوقت و الجهد.
ولكن ماذا لو كان المحرر لديه القدرة على التقدم خطوة إضافية على إتمام الكود ، وهي تحويل تعقيدات HTML اللى كود بسيط .
اليوم سوف أقوم بتفديم إداة emmet أو كما كانت تسمى سابقا Zen Coding ، وهي أداة تزيد من سرعة كتابة أكواد HTML و CSS . و هي ببساطة شديدة عبارة عن Plugin في محررات الHTML,CSS و هي تدعم الكثير من المحررات منها:
Sublime Text, Eclipse, TextMate, Coda, Espresso, Chocolat, Komodo Edit, Notepad++, PSPad, CodeMirror, Brackets, NetBeans, Adobe Dreamweaver
لنفهم في البداية طريقة العمل :
أنت تكتب المخطط باستخدام طريقة معينة سنتعلمها لاحقاً .
ثم تضغط علي مفتاح TAB .
ثم يتم تحويل المخطط إلي كود HTML كامل .
لنر مثال على كود مكتوب بواسطة emmet
#menu>ul>li*3>a
بعد ضغط علي مفتاح TAB
سيظهر الكود التالي
<div id="menu">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
الموقع الخاص بالأداة
http://emmet.io
مصادر لتعرف على الأداة
http://docs.emmet.io
http://docs.emmet.io/cheat-sheet
إذا كنت تستعمل هذه الأداة أخبرنا عن تجربتك معها
مثال آخر
إكتب الكود التالي
بعد ضغط علي مفتاح TAB
سيظهر الكود التالي
و html:5 ايضا تؤدي الى نفس نتيجة doc
جربتها مؤخراً ووجدتها رائعة، أنوي تبنيها بشكل كبير. أعمل عادة على NetBeans و Adobe Dreamweaver و ++Notepad
إظافة رائعة... والأجمل أنها تعمل مع أشهل المحررات
بالطبع سأقوم بالعمل عليها لأني رأيت بموقها كيف يقوم المصمم بكتابة عبارات مثل الأوامر بعدها يصبح كود HTML متكامل
شكرا على الإفاداة
الجميل في هذه الأداة أيضا أنها تدعم خدمات أونلاين
مثل
JSFiddle, JS Bin, CodePen, ICEcoder, Divshot, Codio
جربتها لتوي وجدتها رائعة للغاية
للعلم فقط ، قبل ان تعمل الإضافة يجب اولا بعد تنصيبها التوجه لمنظم الإضافات لتعيين زر tab او اي زر في لوحة المفاتيح كإختصار لتظهر الأكواد
رائعه جداً ويوجد أيضاً مشروع شبيه بذالك Haml :: http://haml.info
نعم استخدم اضافة Web Essentials داخل Visual Studio تقوم تقريباً بنفس الوظيفة منذ ان كانت ZenCoding , رائعة جداً ومنجزة للوقت والجهد بشكل ملحوظ.
لقد إكتشفتها منذ مدة ولما جربتها وجدتها مذهلة فهي تختصر وقت كبير في التصميم وتغنيك عن كتابة الكود بكامله بالإضافة إلى أنه يمكنك إضافة أكواد خاصة بك تستعملها بكثرة في تصاميمك.
نعم استخدمها
عملية الحقيقة وبها اصبحت اسرع فى التكويد