مرحبا بك في موضوعنا الشهري الذي نستعرض عليك من خلاله مجموعة من مكتبات و إطارات العمل لكل من لغتي الـ CSS و الـ Javascript، نقدم لك هذا الموضوع الشهري سعيا لتوفير مجموعة من المستجدات في عالم برمجة الـ Front End حتى يتسنى لكل مبرمج تطوير واجهات برمجياته، و إبتكار برمجيات بواجهات إحترافية، فنحن نعلم كم من الصعب اليوم إنشاء واجهة موقع معين من الصفر، خصوصا مع كثرة الإحتياطات التي يجب عليك إتخاذها مثل التجاوب و الـ Best Practice و غيرها، و هذه الإطارات تأتي لتوفر لك الكل في الكل، بكل سهولة و إحترافية .
قبل القفز مباشرة لحصيلتنا لهذا الشهر، ما رأيك ان تطلع على حصيلة الأشهر المنصرمة أيضا ؟ ستفيدك كثيرا :
- إليك أفضل مكتبات و إطارات الـ Javascript و الـ Css لشهر أبريل ستحب إستخدامها
- إليك أفضل مكتبات و إطارات الـ Javascript و الـ Css لشهر مارس لا يجب عليك تفويتها
- إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر نوفمبر
- إليك أفضل مكتبات و إطارات الـ Javascript و الـ Css لشهر أكتوبر لا يجب عليك تفويتها
- إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر سبتمبر
- إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر أغسطس
- إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر يوليو
دعونا إذن نطلع على حصيلتنا الشهرية :
- Full Page js :
هل فكرت يوما في صناعة صفحة ويب مقسمة لأجزاء بحيث يكون لكل جزء Scroll خاص به ؟ أعلم انني لم أشرح الأمر بشكل جيد، ما رأيك ان تطلع على المثال التالي لتفهم الأمر أكثر ؟
هذه المكتبة تسمح لك بصناعة صفحة واحدة مقسمة لأجزاء بحيث يمكنك الإنتقال من جزء لجزء عن طريق Scroll واحدة، نعم، نقرة واحدة على الـ Scroll و سيمكنك تصفح الموقع بشكل خرافي، يتم إستخدام هذه التقنية في الغالب في صفحات وحيدة Landing Pages، لكن إستخدامها شاسع.
مكتبة Full Page ستساعدنا على القيام بالأمر بشكل أسرع و أفضل، كما انها سهلة الإستخدام جدا و مفتوحة المصدر .
إطلع عليها من هنا.
- Pico js :
مكتبة Pico، مكتبة جافاسكربت صغيرة الحجم جدا، و سهلة الإستخدام، و قدراتها ستذهلك كثيرا، إضافة هذه المكتبة الى مشروع برمجي يوفر لك إمكانية التعرف على الأوجه في الصور، نعم هذه هي إمكانيات هذه المكتبة، بحيث تسمح لك برفع الصور او إلتقاط الصورة مباشرة من كاميرا الحاسوب / الهاتف، ثم تحديد و التعرف على الأوجه في الصورة و إحصاء عددها، فلنقل مثلا إن كان لديك موقع مخصص لرفع فقط صور الخاصة بالـ Landscape و الطبيعة و لا تريد للمستخدمين رفع اي محتوي يتضمن أشخاص، فيمكنك الإستعانة بهذه المكتبة من أجل تحديد الاوجه و فعل ما تريده لاحقا، المكتبة مفتوحة المصدر و سهلة الإستخدام جدا .
تعرف عليها أكثر من هنا .
فريموورك و إطار Front End كامل للـ CSS، يوفر لك هذا الإطار كما باقي الإطارات الأخرى الخاصة بالـ CSS كل ما تحتاجه من أجل صناعة واجهة إحترافية من أزرار، أشكال الـ Forms، الـ Cards، الـ Modal و غيرها، ولا ننسى أيضا التجاوب و الـ Responsive، مثل هذه الإطارات توفر علينا العمل الشاص في إعادة تنسيق كل عنصر من عناصر الـ Dom على حدة، شخصيا أستخدم كلا من Bulma و UIkit، لم اجرب يوما إستخدام TentCSS، لكن اعتقد انه ستكون تجربة فريدة و ستايل إحترافي للعمل به .
إطلع على الإطار أكثر
مكتبة جافاسكربت قوية و خفيفة جدا ( 3KB كما جاء في صفحة الإطار )، تسمح لك مكتبة Radi بصناعة صفحات وحيدة Single Page Application، بحيث يمكنك التعامل مع البيانات و المدخلات دون تحديث للصفحة، شبيهة بالـ Vue.js او Angular، إلا ان عملها مخصص فقط على نطاق معين، و ليس كما الـ Angular تتضمن الـ Services و غيرها، يبقى إطار Radi إطارا احترافيا رغم ذلك لمن يريد صناعة صفحات بسيطة مع بيانات محدثة بشكل تلقائي .
للإطلاع أكثر على المكتبة .
الـ Animation شيئ ضروري حين نتحدث عن إضافة بعض التأثيرات و بعض الحركة لتصميمنا الخاصة بالواجهة، منصة و مكتبة Motion UI، و لا بد انه و من الصورة قد حزرت ان مصممي هذه المكتبة هم نفسهم مصممي إطار العمل Foundation القوي، توفر لك هذه المكتبة كل ما تحتاجه لإضافة أنيميشن او تحريك (Animation) على أي شيئ تقريبا في صفحة الويب، و بمزايا و إختيارات كبيرة جدا لدرجة انك ستقضي ساعات في تجربة كل تلك التحريكات، و محاولة بناء أفضل الأنيميشن في عقلك و حفظها، المكتبة صغيرة الحجم و إحترافية كذلك .
إطلع على المكتبة أكثر .
يوفر لك Pretty Checkbox، و هي مكتبة CSS صغيرة جدا مجموعة من التأثيرات و الستايلات الجذابة لعناصر الـ DOM الخاصة بالـ Forms مثل الـ Checkbox و الـ Radiobuttons، يمكنك إختيار من بين مجموعة ضخمة من التأثيرات و الألوان و الستايلات و إدراجها، ستضيف هذه المكتبة رونقا إحترافيا و إجتذابا أكبر للزائر من خلال تأثير الـ UI الذي تطرحه هذه المكتبة الصغيرة .
إطلع عليها أكثر .
و نختم معك حصيلة هذا الشهر مع مكتبة Drop.js، مكتبة جافاسكربت توفر لك خدمة الحصول على DropDown إحترافية، يمكن للـ DropDown او القائمة المنسدلة ان تتضمن ليس فقط خيارات، بل أي شيئ تقريبا من صور، فيديوهات او حتى Div بأكمله، يمكنك أيضا تعديل الستايل الخاص بالـ Dropdown الخاص بك و تعديله حسب الحاجة، كما تتضمن أيضا Animations و تحريكات لا بأس بها للمنصة .
إطلع على المكتبة أكثر .
تعرف عليها أكثر من هنا .
- TentCss :
فريموورك و إطار Front End كامل للـ CSS، يوفر لك هذا الإطار كما باقي الإطارات الأخرى الخاصة بالـ CSS كل ما تحتاجه من أجل صناعة واجهة إحترافية من أزرار، أشكال الـ Forms، الـ Cards، الـ Modal و غيرها، ولا ننسى أيضا التجاوب و الـ Responsive، مثل هذه الإطارات توفر علينا العمل الشاص في إعادة تنسيق كل عنصر من عناصر الـ Dom على حدة، شخصيا أستخدم كلا من Bulma و UIkit، لم اجرب يوما إستخدام TentCSS، لكن اعتقد انه ستكون تجربة فريدة و ستايل إحترافي للعمل به .
إطلع على الإطار أكثر
- Radi.js :
مكتبة جافاسكربت قوية و خفيفة جدا ( 3KB كما جاء في صفحة الإطار )، تسمح لك مكتبة Radi بصناعة صفحات وحيدة Single Page Application، بحيث يمكنك التعامل مع البيانات و المدخلات دون تحديث للصفحة، شبيهة بالـ Vue.js او Angular، إلا ان عملها مخصص فقط على نطاق معين، و ليس كما الـ Angular تتضمن الـ Services و غيرها، يبقى إطار Radi إطارا احترافيا رغم ذلك لمن يريد صناعة صفحات بسيطة مع بيانات محدثة بشكل تلقائي .
للإطلاع أكثر على المكتبة .
- Motion UI :
الـ Animation شيئ ضروري حين نتحدث عن إضافة بعض التأثيرات و بعض الحركة لتصميمنا الخاصة بالواجهة، منصة و مكتبة Motion UI، و لا بد انه و من الصورة قد حزرت ان مصممي هذه المكتبة هم نفسهم مصممي إطار العمل Foundation القوي، توفر لك هذه المكتبة كل ما تحتاجه لإضافة أنيميشن او تحريك (Animation) على أي شيئ تقريبا في صفحة الويب، و بمزايا و إختيارات كبيرة جدا لدرجة انك ستقضي ساعات في تجربة كل تلك التحريكات، و محاولة بناء أفضل الأنيميشن في عقلك و حفظها، المكتبة صغيرة الحجم و إحترافية كذلك .
إطلع على المكتبة أكثر .
- Pretty Checkbox :
يوفر لك Pretty Checkbox، و هي مكتبة CSS صغيرة جدا مجموعة من التأثيرات و الستايلات الجذابة لعناصر الـ DOM الخاصة بالـ Forms مثل الـ Checkbox و الـ Radiobuttons، يمكنك إختيار من بين مجموعة ضخمة من التأثيرات و الألوان و الستايلات و إدراجها، ستضيف هذه المكتبة رونقا إحترافيا و إجتذابا أكبر للزائر من خلال تأثير الـ UI الذي تطرحه هذه المكتبة الصغيرة .
إطلع عليها أكثر .
- Drop.js :
و نختم معك حصيلة هذا الشهر مع مكتبة Drop.js، مكتبة جافاسكربت توفر لك خدمة الحصول على DropDown إحترافية، يمكن للـ DropDown او القائمة المنسدلة ان تتضمن ليس فقط خيارات، بل أي شيئ تقريبا من صور، فيديوهات او حتى Div بأكمله، يمكنك أيضا تعديل الستايل الخاص بالـ Dropdown الخاص بك و تعديله حسب الحاجة، كما تتضمن أيضا Animations و تحريكات لا بأس بها للمنصة .
إطلع على المكتبة أكثر .