إليك أفضل مكتبات و إطارات الـ Javascript و الـ Css لشهر يوليوز لا يجب عليك تفويتها

يتجدد اللقاء بنا و بكم مجددا في مقالنا الشهري لإستعراض اهم و أفضل المكتبات و الإطارات الخاصة بتطوير الواجهات و المبنية غالبا على كل من الـ CSS و الـ Javascript، تساعد هذه المكتبات و إطارات العمل المطورين في خلق واجهات أكثر إبداعية، أقل إستهلاك للوقت و الجهد، و إحترافية بالطبع، ناهيك على ان بعض المكتبات قد تحل لك بعض المشاكل البرمجية التي تواجهها اثناء برمجة تلك الواجهات، كما سنرى في هذا المقال بالطبع.
إربط حزام الأمان إذن صديقي، و إستمتع بحصيلتنا الشهرية لأفضل المكتبات و إطارات الـ Javascript و الـ Css لا يجب عليك تفويتها إطلاقا . 

- Gulp.js : 

هو ليس إطار عمل مبني على الجافاسكربت أكثر مما هو Webpack يسهل عليك تهيئة مشروع على الويب بإحترافية، لأشرح لك الـ Webpack بسلاسة، فهي تقنية تسمح لك بتجميع كل الملفات الخارجية و تهيئتها بحيث يسهل إستخدامها في المشروع، بالملفات الخارجية نقصد ملفات الـ Css و الجافاسكربت و حتى الصور في مشروعك، كما يتضمن الـ Gulp إمكانية ترجمة أكواد الـ Sass الى Css لتعامل و مرونة أفضل مع الستايل، يسمح لك الـ Gulp أيضا بالقيام بالعديد من العمليات عن طريق ما يسمى بالـ Tasks او المهمات، مثل مهمة لتقليل حجم ملفات الجافاسكربت و الـ Css اثناء عملية الـ Compile للمشروع ان صح التعبير، إمكانية خفض حجم الصور لتسهيل تحميل الصفحة، إلى جانب القيام بعملية الـ Watch من أجل عمل Auto reload للصفحة أيضا، الـ Gulp يعتبر Webpack إحترافي جدا يسمح لك بالتعامل مع الملفات الخارجية بسلاسة، انت لست مضطرا لإدراج ملفات الـ Fontawesome مثلا او اطار Bootstrap و غيرها في كل مرة تريد استخدامها في المشروع، الـ Gulp سيتكفل بذلك بمجرد تنصيبه في المشروع، يوجد Webpacks اخرى مثل Grunt على سبيل المثال.

- Minimemente :

مكتبة CSS خفيفة جدا، توفر لك هذه المكتبة العديد من حركات الأنيميشن و التحريك التي يمكنك تطبيقها على أي عنصر من عناصر صفحة الويب او الـ DOM بمجرد تلفيق إسم الكلاس المناسب، كما يمكنك اللعب على وتر التحريك بإستخدام الجافاسكربت أيضا، توفر لك المكتبة عشرات الأشكال و التحريكات و الأنيميشنز التي يمكنك تطبيقها، يمكنك الإستفادة منها من أجل إحياء عناصر صفحتك، و إضافة بعد الحركة لصفحة الويب الخاصة بك، مثل تأثير الإنتقال بين الصور، او إغلاق فيديو في الصفحة او عنصر معين، لك حرية إستخدام المكتبة كما تريد. 

- Bespoke.js : 

حسنا هذه المكتبة  ستعجب الكثيرين، تسمح لك مكتبة Bespoke بصناعة عرض بتأثير إحترافي ( لا يمكنني ان اشرح بالضبط التأثير قدر ما يمكنني ان اريه لك من هنا  )، يمكنك إستخدام هذا العرض التأثيري من أجل إستعراض نماذج لأعمالك ربما، او إستعراض صور بشكل و بطريقة مختلفة تماما، المكتبة سهلة الإستخدام، يكفي إضافة العناصر التي تريدها و تلفيق الكلاسات الملائمة، الى جانب التعديل على بعض الخواص البسيطة بالجافاسكربت، المكتبة مدعومة من طرف مدراء إدارة المشاريع الكبرى أيضا في حالة كنت تريد استخدامها عن طريق الـ Npm مثلا.

- Outdated Browser : 

مجرد إضافة بسيطة بالجافاسكربت ستعفيك من الكثير من الاعمال و المشاكل، إن اكثر ما يُؤرق اي مطور واجهات في هذا العالم، هو محاولة جعل صفحات الويب و الكود الخاص به ملائم مع جميع المتصفحات، فالشكل في الغالب قد لا يظهر كما توقعته ان قمت بتغيير المتصفح، لكن المعضلة الكبرى هي التعامل مع الإصدارات القديمة من المتصفحات، ربما إكسبلورر مثلا، بحيث ان هذه النسخ القديمة قد تعيق إستخدام بعض أكواد الـ CSS3 المتجددة و التي قد لا يدعمها في الغالب.
تأتي هذه الإضافة بالجافاسكربت لتسمح لك بتضمين رسالة تخبر المستخدم قبل كل شيئ ان يقوم بتحديث متصفحه الى اخر نسخة من أجل اشتغال الموقع بشكل جيد، مع إمكانية تحديد نوع المتصفح بدقة و جلب رابط لتحميله أيضا في اخر نسخه.

- Moment.js : 

التعامل مع الـ Date & Time سيصير أسهل و أفضل مع هذه المكتبة الرائعة، سهلة الإستخدام و سهلة التعديل، يمكنك اختيار و جعل التاريخ و الوقت يظهر بأي شكل او Format تريد بدون مشاكل، يمكنك أيضا اختيار نوع التاريخ الذي تريد إظهاره، هل هو العربي او الجريجوري، يمكنك اختيار التقويم الذي تريده من أجل إظهار التاريخ كما تريد، يمكنك حرفيا التلاعب بأي جزء من التاريخ لصالحك من إظهار اليوم و الشهر او الاسبوع و السنة و الدقائق و الثواني و حتى اجزاء الثانية، ان كانت العديد من الاكواد البرمجية الآن تسطع في عقلك لأنك تعاملت معها سابقا بالجافاسكربت عن طريق عشرات الأسطر و الأكواد، فيسعدني ان اخبرك ان هذه المكتبة ستيسر لك كل المهام .

- MO.js : 

وهي إختصار لعبارة Motion.js، تسمح لك مكتبة الـ Javascript هذه بالتحكم الكامل في منطقة Canva في موقعك و إضافة مجموعة من الموشن و التحريكات الإحترافية  على اي عنصر تريد، يمكننا إدراجها ضمن مكتبات الـ Animation، لكنها ابعد من ذلك قليلا، فهي تسمح لك بالتحكم الكامل في كل مسارات اي عنصر، كما يمكنك الرسم من خلالها او تجسيد اي حركو موشن جرافيك عن طريق الجافاسكربت فقط، مكتبة جميلة، التعامل معها قد يحتاج بعض الخبرة قليلا و ربما مشاهدة فيديو او إثنين لإحتراف التعامل معها، لكنها حتما ستضفي لمسة جد إحترافية على صفحة الويب الخاصة بك . 

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