41

هل تستعمل الأداة emmet في تطوير موقعك

كم من الوقت تقضي لكتابة أكواد 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

إذا كنت تستعمل هذه الأداة أخبرنا عن تجربتك معها


إظافة رائعة... والأجمل أنها تعمل مع أشهل المحررات

بالطبع سأقوم بالعمل عليها لأني رأيت بموقها كيف يقوم المصمم بكتابة عبارات مثل الأوامر بعدها يصبح كود HTML متكامل

شكرا على الإفاداة