في كل شهر عزيزي القارئ المبرمج، نستعرض عليك بعض المكتبات الخارجية للـ CSS و كذا الـ Javascript، نحاول من خلال هذه المكتبات ان نساعدك بشكل أكثر عملي في بناء برمجيات ويب إحترافية و ذكية و ذات واجهات جذابة في وقت وجيز و بدون اي عمل إضافي .
اصبحت المكتبات و الإطارات Libraries & Frameworks جزء ضروري من اي برمجية في هذا العالم مهما كانت، فهي تسهل علينا القيام بالعديد من الأشياء و توفر لنا منصات احترافية من أجل بناء برمجيات تمتثل لأجدد التقنيات و التكنولوجيات في هذا العالم البرمجي .
قبل ان نبدأ في سرد حصيلتنا لهذا اليوم، ما رأيك اولا ان تطلع على المكتبات و الإطارات التي تم نشرها الأشهر السابقة ؟
- إليك تجميعة لأفضل مكتبات و إطارات الـ Javascript و الـ CSS المختارة لك لشهر يناير
- إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر نوفمبر
- إليك أفضل مكتبات و إطارات الـ Javascript و الـ Css لشهر أكتوبر لا يجب عليك تفويتها
- إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر سبتمبر
- إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر أغسطس
- إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر يوليو
- NativeScript :
ماذا لو أطلعتك على إيطار تسمح لك بصناعة تطبيقات الأندرويد و الـ IOS بإستخدام الجافاسكربت و الـ CSS ( قد تحتاج بعض الـ HTML كذلك )، نعم يمكنك ذلك، يمكنك صناعة تطبيقات موبايل Native بإستخدام إيطار NativeScript، يتم ذلك عبر تقنيات الجافاسكربت و مكتباتها الضخمة مثل Angular و كذا الـ TypeScript، بإدراجها في فريموورك NativeScript ستتمكن من صناعة تطبيق الموبايل الخاص بك بكل الخواص التي تريد بإستخدام الجافاسكربت و إدراج بعض الـ CSS من أجل تزيين تطبيقاتك بشكل أكبر .
- Basic Scroll :
مكتبة مميزة لإضافة خاصية الـ Scroll او النزول في الصفحة بتقنيات مختلفة و متعددة، مع دعمها كذلك لتقنية الـ Parallax الرائعة من أجل تزيين الصفحات الخاصة بك، المكتبة سهل الإستخدام يمكنك الإعتماد على الـ CSS فقط الخاص بها، او ادراج الجافاسكربت كذلك لمزيد من التطويرات في الـ Animation الخاصة بالهبوط و النزول في الصفحة، المكتبة متوافرة على مجموعة من الحزم مثل الـ Npm او يمكن إستخدام الـ CDN الخاص بها لإدراجها في مشروعك البرمجي او تحميلها و ادراجها بشكل عادي و متوافقة مع كل المواقع بالطبع، كما انها مشروع مفتوح المصدر كليا .
تعرف أكثر على المكتبة من هنا .
مكتبة جافاسكربت مفتوحة المصدر، تسمح لك هذه المكتبة بتعقب حركة سهم الفأرة على الشاشة و معرفة الإتجاه المسبق لها و الإتجاه المستقبلي، مثلا ان يتجه من اليمين لليسار او من اليسار لليمين او من الاعلى للأسفل او من الأسفل للأعلى .
ستخبرني و ما الهدف من هذا؟ هذا سيسمح لك بصناعة Animation بناءا على حركة و إتجاه الفأرة ( كما سنرى في الرابط الذي سأتركه لك في نهاية هذه الفقرة ) ، هذه الأنيميشن التي ستضفي لمسة احترافية و ذكية على صفحات الويب الخاصة بي، كما يمكن تطويرها و إستخدام انيميشن خاصة بك، او Triggers خاصة بك مثل اظهار عنصر معين او شيئ من هذا القبيل حين يتحرك سهم الفأرة من اليسار الى اليمين كمثال .
إطلع على المكتبة أكثر من هنا .
في ظل تحديثات المكتبة الشهيرة FontAwesome، التي جعلت من أفضل الأيقونات ايقونات مدفوعة و ليست مجانية، نقترح عليك Nerd Fonts كبديل للخدمة، غذ توفر لك تجميعة كبيرة من الأيقونات الكثيرة التي يمكنك إستخدامها على شكل font، علاوة على ذلك ستحصل على مجموعة من الخطوط الأخرى المدرجة في المكتبة و التي ستساعدك على توفير خطوط مختلفة و أيقونات متعددة في مكتبة واحدة .
إطلع أكثر على المكتبة من هنا .
مكتبة جافاسكربت لا يتعدى حجمها 20KB، تسمح لك هذه المكتبة بإدارة رفع الملفات من على صفحتك الى الخادم الخاص بك بطريقة عملية، كما توفر لك خاصية الرفع من خلال السحب و الإفلات من أجل تسهيل العملية على المستخدم، المكتبة مثالية حقا و ننصحك بها إن احتجت إطلاقا الى اي جزء من الكود يسمح برفع الملفات في موقعك مهما كانت، و لا ننسى الواجهة الجذابة التي تأتي بها هذه المكتبة و التي توفرها لك في كود الرفع الخاص بك، ستجد بعض الأمثلة الحية على منصة Github في مستودع هذه المكتبة .
إطلع أكثر على المكتبة .
مكتبة CSS صغيرة و بسيطة، تأتي هذه المكتبة لتخلصك من أعباء ثقل و كثرة أكواد الـ CSS الخاصة بك، كمثال على ذلك، نجد ان بعض الخواص في الـ CSS تشتغل في متصفح جوجل كروم بشكل جيد، بينما لا تشتغل في فايرفوكس، و ستوجب عليك إضافة كود اخر من أجل دعمه لذلك المتصفح (-moz- / -webkit- ) و غيرها، تأتي هذه المكتبة لتخبرك بأن تتوقف عن فعل ذلك، سأوفر لك كل ما تحتاج من أجل جعل الكود البرمجي الخاص بالستايل الخاص بك سهل التعامل و خفيف و أفضل، و الأهم " طبيعي "، يتم إستخدام المكتبة من طرف خدمات معروفة و مشهورة مثل Twitter .
تعرف أكثر على المكتبة.
آخر مكتبة معنا لليوم، و هي مكتبة جيكويري jQuery، تقوم هذه المكتبة بجعل أي فيديو مدرج في صفحتك او تم تضمينه من خدمات خارجية مثل اليوتيوب او Vimeo او كيفما كان، متجاوبا مع حجم الشاشة، فأحيانا حين تقوم بتضمين فيديو Embed من على منصة خارجية، يحافظ على القياس الخاص به، و حتى عند تغيير الشاشة او قياساتها، لا يتم تغيير قياسات الفيديو مما يخلق لك مشاكل في الصفحة أحيانا، لذلك يمكنك الإعتماد على هذه المكتبة الخفيفة جدا من أجل توفير التجاوب للفيديوهات داخل الصفحات .
للإطلاع أكثر على المكتبة .
- Direction Reveal :
مكتبة جافاسكربت مفتوحة المصدر، تسمح لك هذه المكتبة بتعقب حركة سهم الفأرة على الشاشة و معرفة الإتجاه المسبق لها و الإتجاه المستقبلي، مثلا ان يتجه من اليمين لليسار او من اليسار لليمين او من الاعلى للأسفل او من الأسفل للأعلى .
ستخبرني و ما الهدف من هذا؟ هذا سيسمح لك بصناعة Animation بناءا على حركة و إتجاه الفأرة ( كما سنرى في الرابط الذي سأتركه لك في نهاية هذه الفقرة ) ، هذه الأنيميشن التي ستضفي لمسة احترافية و ذكية على صفحات الويب الخاصة بي، كما يمكن تطويرها و إستخدام انيميشن خاصة بك، او Triggers خاصة بك مثل اظهار عنصر معين او شيئ من هذا القبيل حين يتحرك سهم الفأرة من اليسار الى اليمين كمثال .
إطلع على المكتبة أكثر من هنا .
- Nerd Font :
في ظل تحديثات المكتبة الشهيرة FontAwesome، التي جعلت من أفضل الأيقونات ايقونات مدفوعة و ليست مجانية، نقترح عليك Nerd Fonts كبديل للخدمة، غذ توفر لك تجميعة كبيرة من الأيقونات الكثيرة التي يمكنك إستخدامها على شكل font، علاوة على ذلك ستحصل على مجموعة من الخطوط الأخرى المدرجة في المكتبة و التي ستساعدك على توفير خطوط مختلفة و أيقونات متعددة في مكتبة واحدة .
إطلع أكثر على المكتبة من هنا .
- Filepond :
مكتبة جافاسكربت لا يتعدى حجمها 20KB، تسمح لك هذه المكتبة بإدارة رفع الملفات من على صفحتك الى الخادم الخاص بك بطريقة عملية، كما توفر لك خاصية الرفع من خلال السحب و الإفلات من أجل تسهيل العملية على المستخدم، المكتبة مثالية حقا و ننصحك بها إن احتجت إطلاقا الى اي جزء من الكود يسمح برفع الملفات في موقعك مهما كانت، و لا ننسى الواجهة الجذابة التي تأتي بها هذه المكتبة و التي توفرها لك في كود الرفع الخاص بك، ستجد بعض الأمثلة الحية على منصة Github في مستودع هذه المكتبة .
إطلع أكثر على المكتبة .
- Normalize.css :
مكتبة CSS صغيرة و بسيطة، تأتي هذه المكتبة لتخلصك من أعباء ثقل و كثرة أكواد الـ CSS الخاصة بك، كمثال على ذلك، نجد ان بعض الخواص في الـ CSS تشتغل في متصفح جوجل كروم بشكل جيد، بينما لا تشتغل في فايرفوكس، و ستوجب عليك إضافة كود اخر من أجل دعمه لذلك المتصفح (-moz- / -webkit- ) و غيرها، تأتي هذه المكتبة لتخبرك بأن تتوقف عن فعل ذلك، سأوفر لك كل ما تحتاج من أجل جعل الكود البرمجي الخاص بالستايل الخاص بك سهل التعامل و خفيف و أفضل، و الأهم " طبيعي "، يتم إستخدام المكتبة من طرف خدمات معروفة و مشهورة مثل Twitter .
تعرف أكثر على المكتبة.
- FitVids.js :
آخر مكتبة معنا لليوم، و هي مكتبة جيكويري jQuery، تقوم هذه المكتبة بجعل أي فيديو مدرج في صفحتك او تم تضمينه من خدمات خارجية مثل اليوتيوب او Vimeo او كيفما كان، متجاوبا مع حجم الشاشة، فأحيانا حين تقوم بتضمين فيديو Embed من على منصة خارجية، يحافظ على القياس الخاص به، و حتى عند تغيير الشاشة او قياساتها، لا يتم تغيير قياسات الفيديو مما يخلق لك مشاكل في الصفحة أحيانا، لذلك يمكنك الإعتماد على هذه المكتبة الخفيفة جدا من أجل توفير التجاوب للفيديوهات داخل الصفحات .
للإطلاع أكثر على المكتبة .