[ Plugin ] إضافة لكتابة الاكواد البرمجية بسرعة هائلة وسهولة تامة

Emmet, الأضافة المعجزة لكل مطوري الويب ( Web Developers ) العرب, الأضافة التي ستسهل عليك عمل ساعات في دقائق, الأضافة التي ستزيد حبك للبرمجة بشكل عام لما فيها من ميزات انا بنفسي زهلت عندما رأيت ما بها من ميزات بصراحة هي كنز بمعني الكلمة, باستخدام اضافة Emmet ستكتب كود بسرعة هائلة انا شخصياً غير متخيل الموضوع.

الاضافة Emmet متوفرة علي معظم محررات الاكواد المشهورة عالمياً وبسيطة لكي تستخدمها.

الاضافة Emmet هي مصدر مفتوح Open Surce مشروع خاص بال MIT. صدقني بعد قراءة هذه المقالة لن تكتب كود CSS & Html بدونها بعد الان, الاضافة التي ستوفر عليك الوقت والجهد وستجعلك محترف ولاكن بعد تعلم كيفية استخدامها, الاضافة ليست صعبة لكي تتعلمها بل سهلة جداً جداً وبسيطة وغير معقدة تحتاج بعض الوقت مع التركيز والتدقيق علي الخطوات والتطبيق عليها لكي تستطيع العمل بها بشكل احترافي.

الاضافة مطورة بواسطة Sergey Chikuyonok and Emmet's community ومصممة في عام 2008 بواسطة Vadim Makeev.

تنصيب إضافة Emmet :-

الاضافة لا تحتاج اكثر من برنامج او محرر اكواد يقبل الاضافات Built-in Plugin, بعدها مباشرة تذهب الي موقع الاضافة وتحمل الاضافة من خلاله ويمكنكم الاطلاع علي الاضافة بشكل ادق ومتابعة اخبارها ودروس تعليمية لها بالصوت والصورة من هنا.

الأستخدام :-

سأضع لكم الان الطريقة والكيفية الاستخدام للاضافة بشكل ادق ومفصل جداً وان شاء الله لا يقف امامكم شي.

Emmet تعمل علي اختصار كتابة الاكواد بحيث ان الكود بيكتب بشكل مختصر ويفك للمحرر بشكله الطبيعي بواسطة الاضافة كما سترون الان في الامثلة التي ساعرضها عليكم باستخدام لغتي البرمجة Css - Html.

مثال مبسط عندما نكتب هذا الكود


html>head>title{Hello}^body>p{Hello World!}

يفهم بواسطة المحرر هكذا :

<html>
<head>
  <title>Hello</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>


معلومة : لا بمكن اسنخدام ال Space بوسط الاكواد

الاكواد الفرعية هذه تكتب هكذا بواسطة الاضافة

div → <div></div>
p → <p></p>
a → <a href=””></a>


< : تتيح لك ان ترتب الاكواد علي نظام الابن والاب مثل - div>p>a تصبح


<div>
    <p>
        <a href=””></a>
    </p>
</div>




+ : تتيح لك ان تعرض الاكواد ك فرد بمثال div+p+a تصبح


<div></div>
<p></p>
<a href=””></a>




^ : معناها العودة للكود الاب بمثال div>p^div>p تصبح


<div>
  <p></p>
</div>
<div>
  <p></p>
</div>




* : معناها تكرار العنصر بمثال ul>li*3 تصبح


<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>




() : معناها جمع العناصر بمثال div>(ul>li*3>a)+p تصبح


<div>
  <ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
  </ul>
  <p></p>
</div>




بالطبع يمكنكم اضافة الClass و ال Id بواسطة هذه الاضافة ويكون الاضافة كالتالي.

div#main → <div id=”main”></div>
div.main → <div class=”main”></div>


ويمكنكم اضافة اكتر من كلاس او اي دي في سطر واحد هكذا

div.main.container → <div class=”main container”></div>


وتتيح الاضافة اضافة سمة معينة للكود هكذا

a[title=”Link” target=”_blank”] → <a href="" title="”Link”" target="”_blank”"></a>


ويمكنكم سرد السمات بواسطة ال $ بمثال ul>li.item$*3 تصبح

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>


كما ذكرت ساعرض عليكم الاضافة باستخدام لغتي ال Css - Html وقد انهيت عرض ال Html هذا ليس كل شي هناك المزيد والمزيد من الدروس انا فقط احببت ان اعرض عليكم الاضافة باستخدام هذه اللغة الان ساعرض عليكم بعض الاكواد المكتوبة بواسطة لغة ال Css.




يمكنك اضافة بادينج Padding لعنصر باستخدام الحرف P فقط فهو معرف لل Padding و M ل Margin.

m10 → margin: 10px;


بدائل ال Px في الاضافة كالتالي

p → %
e → em
x → ex


p15p → padding: 15%;


كما قلت ليس هذا كل شي بل هذا جزء بسيط وما عليك الا الدخول الي الموقع الخاص بالاضافة والاستمتاع بها وانا اعدك انك لن تتركها بعد الان.



ارجوا من الله ان اكون وفقت في عرضي لهذا الموضوع المميز من وجهة نظري ولا تنسونا من صالح دعائكم وتشجيعكم واانا اسف لو كنت عرضت الموضوع بشكل غير مفهوم او غير مرتب وشكرا لكم.

#اضافات #برمجة #حصريات

Teqani Plus | تقني بلس

[ Plugin ] إضافة لكتابة الاكواد البرمجية بسرعة هائلة وسهولة تامة