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

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

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

مثال آخر

إكتب الكود التالي

doc

بعد ضغط علي مفتاح TAB

سيظهر الكود التالي

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

و html:5 ايضا تؤدي الى نفس نتيجة doc

جربتها مؤخراً ووجدتها رائعة، أنوي تبنيها بشكل كبير. أعمل عادة على NetBeans و Adobe Dreamweaver و ++Notepad

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

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

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

الجميل في هذه الأداة أيضا أنها تدعم خدمات أونلاين

مثل

JSFiddle, JS Bin, CodePen, ICEcoder, Divshot, Codio

جربتها لتوي وجدتها رائعة للغاية

للعلم فقط ، قبل ان تعمل الإضافة يجب اولا بعد تنصيبها التوجه لمنظم الإضافات لتعيين زر tab او اي زر في لوحة المفاتيح كإختصار لتظهر الأكواد

رائعه جداً ويوجد أيضاً مشروع شبيه بذالك Haml ::

نعم استخدم اضافة Web Essentials داخل Visual Studio تقوم تقريباً بنفس الوظيفة منذ ان كانت ZenCoding , رائعة جداً ومنجزة للوقت والجهد بشكل ملحوظ.

لقد إكتشفتها منذ مدة ولما جربتها وجدتها مذهلة فهي تختصر وقت كبير في التصميم وتغنيك عن كتابة الكود بكامله بالإضافة إلى أنه يمكنك إضافة أكواد خاصة بك تستعملها بكثرة في تصاميمك.

نعم استخدمها

عملية الحقيقة وبها اصبحت اسرع فى التكويد