عموما اكتشفت اضافة رائعة مؤخرا اسمها Emmet تسرع من وتيرة العمل في تطوير المواقع على لغتي ال HTML / CSS حيث لن تحتاج بعد الان الى كتابة سطور كثيرة!!
لذلك قررت مشاركتها معكم وقمت بانشاء فيديو خفيف لاظهار ميزات الاضافة هنا على اليوتيوب :
هذه الاضافة تدعم كل من محرري Sublime Text 3 & Atom لكن انا استعمل ال Sublime حقا محرر رائع!! لتحميل الاضافة ستجدها بالوصف على الفيديو!
ربما هنالك من يعرفها من قبل لكن هناك من لا يعرفها ايضا ولذلك شاركتها لتعم الفائدة!
شرط مبسط للاضافة مثلا ساكتب الكود هذا كما نفعل في CSS مثلا :
div#wrapper>div.container>ul>li.post*5
ثم بعد الضغط على Tab سيتحول الى هذا الشكل حيث *5 ان وضعتها بعد HTML Tag ستعمل له loop للعدد المطلوب :) اليس رائعا؟؟
<div id="wrapper">
<div class="container">
<ul>
<li class="post"></li>
<li class="post"></li>
<li class="post"></li>
<li class="post"></li>
<li class="post"></li>
</ul>
</div>
</div>
ثم هنالك كذلك ميزة اخرى رائعة تكلفك عناء البحث عن النصوص Lorem Ipsum ونسخها ولصقها فقط بمجرد كتابتك ل :
lorem100
بعض الضغط على Tab فسوف يظهر لك النص به 100 كلمة حيث انه يمكنك التحكم في عدد الكلمات عبر تغيير العدد فقط!!
الناتج طبعا :
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit laborum, officia. Excepturi impedit a quam et exercitationem! Laudantium nam vel, saepe necessitatibus aliquid? Porro tempore, reiciendis nulla voluptatibus molestiae consequatur doloribus. Alias libero illum harum, quas similique laboriosam, inventore enim, ducimus id doloribus consectetur nesciunt ullam consequuntur! Voluptatibus possimus necessitatibus ut aliquam illum fuga placeat, commodi, officia magni error amet autem neque! Velit ut obcaecati qui optio nemo dolores, molestias quidem eaque exercitationem neque voluptas culpa itaque molestiae, vero alias dolor suscipit asperiores! Aliquid obcaecati tenetur tempore voluptatum. Libero laudantium ea eligendi amet architecto aut veritatis vel debitis praesentium ex.
هذه كانت مجرد ميزات قليلة من ميزات هذه الاضافة الرائعة :)
أترككم لمشاهدة الفيديو والتمتع بكتابة الكود بسهولة دون عناء وربح الوقت ايضا!!
بالتوفيق للجميع :)
التعليقات