المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الثاني


Eng.Jordan
08-23-2015, 02:52 PM
http://ishadeed.com/blog/wp-content/uploads/2015/05/learning2-965x425.jpg (http://ishadeed.com/blog/front-end/learning2/)
كنت قد كتبت سابقاً عن تجربتي في تعلم تطوير الويب بشكل يومي، سوف أكمل التحدث عن التجربة. لمشاهدة الجزء الأول من هنا (http://ishadeed.com/blog/front-end/learning/)
بعد أن وصلت إلى أكثر من 8 أشهر من التعلم المتواصل شعرت بأن العمل على ملفات PSD أصبح أمراً يجب تغييره، لانه من الممكن ان تقوم بتطبيق ملف كامل بحذافيره كما هو بالتصميم، لكن بنفس الوقت لم تتعلم مهارة جديدة، فقط قمت بالممارسة أكثر. لا أقول أن هذا أمر غير جيد لكن يفضل أن تتعلم مهارة جديدة بنهاية كل يوم.
Codepen هو عبارة عن منصة تمكنك من عمل تجارب بالويب بشكل سريع من دون اللجوء إلى محرر برمجي على جهازك ومتصفح، تكتب الكود وسوف تظهر النتيجة مباشرة أمامك، بدأت بإنشاء أمور وأفكار جديدة كان بعضها يأخذ مني ساعات، وسابقاً كنت أعمل على تصاميم PSD وأحولها لصفحات ويب وتأخذ مني نصف الوقت الذي يلزم لتطبيق مهارة جديدة على Codepen. إذن تعلم مهارة جديدة ومواجهة مشاكل فيها أفضل من أن تنفذ تصميم معين وتفرح بإنجازه بكل تأكيد.
CSS ليست سهلة

صحيح أن تنسيقات CSS من السهل أن يفهمها أي شخص لا يعرف بالويب، لكن كتابتها ليست كذلك. في البداية كنت أعمل على مواقع تتكون من خمس صفحات مثلا، اقوم بعمل ملف CSS واحد وفيه الكثير من التكرار بالكود وكنت لا أكترث لهذا الأمر. لكن عندما عملت على مشاريع مختلفة لاحظت أن هناك مشكلة، كتابة CSS تحتاج لإن تكون محكمة جداً وأن أحاول قدر الإمكان أن يكون الكود المكتوب غير مكرر.
CSS ربما تكون سهلة عندما يتم تطبيقها على عنصر واحد – اثناء مرحلة التعلّم – أما إذا كانت على مشروع ويب حقيقي (كموقع اخباري مثل Mashable) فإن الأمر سيكون مختلفاً حينها. صعوبتها تكمن عندما يتوسع المشروع، وتتكرر العناصر، وتتعدد الصفحات، عندها تكون هيكلة CSS هي المشكلة، وارتباط الملفات مع بعضها البعض بطريقة متينة، ولتسمح لك بتوسعة المشروع في المستقبل بكل سهولة.
لو كنت تعمل على مشروع أنت وفريق من المطورين، يجب أن يتم الإتفاق فيما بينكم على طريقة معينة لكتابة CSS، هنا تكون الحاجة لمعرفة مهارات بتنظيم وترتيب الكود أكثر من معرفة كتابة الكود نفسه، فيجب أن يتم كتابة ال Classes بنسق معين ومتفق عليه، تقسيم الملفات إلى أسماء مختلفة ومنطقية، هناك مقال كامل عن هذا الموضوع قريبا.
إستخدام CSS Pre-Processors

لنفرض أنك تعمل على مشروع ويب ويوجد لديك 11 لون مختلف يتم إستخدامهم في الصفحات، لنفرض أن لون النص هو #dedede (رمادي)، هل ستقوم بكتابة هذا الكود عند كل عنصر يحتاجه؟ ماذا لو قررت أن تغير اللون وتستبدله لكافة العناصر؟ هل سوف تغير اللون يدوياً لكافة العناصر؟ بالتأكيد نعم لو لم تكن تعرف بالأمر التالي:
في لغات البرمجة يمكن أن تعرف متغير Variable وتعيد إستخدامه كما تريد في الكود، لكن في CSS هذا الأمر غير موجود (بالوقت الحالي)، لذلك تم إيجاد ال CSS Pre-Processors والتي تعطيك الإمكانية لإستخدام أمور مثل Variables, Nesting, Extend, For Loops. ومن أشهر هذه الأدوات هي Sass, Less.
كتابة كود CSS مرتب

من أهم مفاتيح النجاح بكتابة كود CSS مرتب ونظيف، هي أن تقوم بتسمية الكلاسات بشكل مرتب ومتسلسل وأن تبتعد قدر الإمكان عن إستخدام ال ID وإليك السبب:
يوجد مصطلح إسمه CSS Specificity ويعني قوة التحديد أو الاختيار، فمثلاً عندما يكون لدينا عنصر معين ونقوم بإعطاءه Class و ID بنفس الوقت، ومثلا في ال Class يكون لونه أحمر وال ID أزرق، سيتم أخذ اللون من ID لإنه أقوى. لذلك حاول قدر الإمكان أن لا تستعمله إلا بالحالات الضرورية فقط.
بالبداية كنت أسمي ال Classes من دون تخطيط وترتيب وذلك كان يؤدي لتكرار كثير، فعلى سبيل المثال يوجد عنصر معين يتكرر بنفس الخصائص لكن الإختلاف يكون فقط باللون في كل مرة، كنت أعطي كل عنصر Class بإسم مختلف عن سابقتها كالتالي:
http://ishadeed.com/blog/wp-content/uploads/2015/05/Screen-Shot-2015-05-16-at-5.30.50-PM.png (http://ishadeed.com/blog/wp-content/uploads/2015/05/Screen-Shot-2015-05-16-at-5.30.50-PM.png)
كما تلاحظون كل العناصر مشتركة بنفس الخصائص ما عدا لون الخلفية، لكن ماذا لو اعطينها 2 Class بحيث تكون وحدة منهم مشتركة بالخصائص بين العناصر والثانية تميز كل عنصر عن الاخر من ناحية اللون كالتالي:
http://ishadeed.com/blog/wp-content/uploads/2015/05/Screen-Shot-2015-05-16-at-5.32.25-PM.png (http://ishadeed.com/blog/wp-content/uploads/2015/05/Screen-Shot-2015-05-16-at-5.32.25-PM.png)
بهذه الحالة ستعطى الخصائص المشتركة ل header-item وعند تغيير اللون سيتم فقط وضع اللون الأزرق للخلفية في كلاس header-item-blue على سبيل المثال.
إستخدام Frameworks

من أكثر الأخطاء التي قد يوقع بها من يريد أن يتعلم الويب هي أن يستخدم إطار عمل جاهز مثل Bootstrap من دون فهم الأساسيات وما وراء الكواليس. يظن الكثير بأن عمل موقع تجاوبي أمر معقد وأن إطار العمل سوف يسهل عليك ويختصر الوقت، لكن بنظري:
“إذا كان لديك فهم لأساسيات الويب لن يهمك أن تستعمل شيء جاهز مثل Bootstrap أو أن تبني شيء خاص للمشروع الذي تعمل عليه، أفضل أن أرى ملف HTML مكتوب بطريقة مرتبة وجميع ال Classes فيه لها أسماء واضحة ومفهومة بدلاً من قراءة الأسماء التالية في مشروع تم عمله بإستخدام إطار عمل جاهز: col-md-6, col-xs-12, col-lg-10”. هناك مقال مفصل عن هذا النقطة قريبا إن شاء الله.
تسمية العناصر في CSS

مع الوقت وفي المشاريع الكبيرة ستحتاج لأن تسمي الكلاسات بطريقة وبنسق معين حتى يكون هناك تناسق عام في الكود، من أحد طرق تسمية العناصر هي BEM، اختصار ل Block, Element, Modifier. فعلى سبيل المثال يوجد لدينا العنصر التالي والذي يحتوي على: عنوان الخبر، صورة، الكاتب، أزرار المشاركة.
http://ishadeed.com/blog/wp-content/uploads/2015/05/news-item.jpg (http://ishadeed.com/blog/wp-content/uploads/2015/05/news-item.jpg)
لو أردنا أن نكتب الكلاسات الخاصة به ستكون كالتالي:
http://ishadeed.com/blog/wp-content/uploads/2015/05/Screen-Shot-2015-05-16-at-5.54.15-PM.png (http://ishadeed.com/blog/wp-content/uploads/2015/05/Screen-Shot-2015-05-16-at-5.54.15-PM.png)
لاحظ أنك بمجرد قرائتك لأسماء الكلاسات ستفهم المضمون لهذا العنصر ولو ليس بشكل كامل. لو اتبعت هذه الطريقة في التسمية سترتاح كثير خصوصاً لو كان هناك أكثر من مطور يعمل على ملفات CSS، استفدت من هذه الطريقة حتى الآن في التالي:


- التقليل من التكرار بإستخدام CSS
- كود HTML مقروء ومفهوم
- التخلص من التداخل Nesting في CSS

التوثيق والأدوات المساعدة

من المهم أن توثق ما تتعلم بشكل يومي في مستند نصي والأجمل من ذلك أن تطبعه أمامك في الأيام الأولى لكي ترى نتائج الجهد الذي قمت به. من الأدوات الممتازة لهذا الأمر هي Google Docs.
لنفرض أنك تعلمت مهارة معينة في اليوم رقم 100 وتريد أن تراجعها في اليوم رقم 250، سيكون من السهل عليك أن تبحث في الملف عن إسم المهارة وستجد المثال الذي قمت به. في التوثيق كنت أضيف روابط للتمارين التي أعملها على Codepen بحيث أرجع لها وقت الحاجة.
يوجد موقع رائع جداً إسمه Trello، فكرته بأن تقوم بإنشاء لوحة Board وتضع فيها بطاقات عن أمور معينة، في تعلمي للويب أضفت البطاقات التالية: Upcoming Practises, Finshed, VIP Topics, Articles. كما في الصورة التالية:
http://ishadeed.com/blog/wp-content/uploads/2015/05/Screen-Shot-2015-05-16-at-6.04.53-PM.png (http://ishadeed.com/blog/wp-content/uploads/2015/05/Screen-Shot-2015-05-16-at-6.04.53-PM.png)
نظام التحكم بالإصدار Version Control System

ببساطة هو عبارة عن نظام يساعدك في التحكم بمشاريعك بشكل أفضل مع توثيق ممتاز وحفط للبيانات، من الأمثلة عليه هو نظام Git. لو كان لديك مشروع ويب ويوجد خمس مبرمجين يعملون عليه، سوف يساعدك Git في أن يحصل كل منهم على نسخة محلية Local من ملفات المشروع، وعندما ينتهي كل منهم من عمله على جزء معين يستطيع أن يعمل Push للتحديثات على المستودع Repository، وباقي أعضاء الفريق بإمكانهم عمل Pull لمشاهدة التحديثات الجديدة. بكل بساطة :)
في رحلة تعلمي للويب استخدمت Git بالفترة الأخيرة (منذ شهرين قريباً) مع كل مشروع أعمل عليه، حتى لو يمكن هناك فريق سوف ينظم ذلك عملك ويحفظه في مكان آمن تستطيع الوصول له في أي وقت. فوائد Git بشكل عام:


- هل قمت بتعديل على الكود واكتشفت بعد فترة أن التعديل خطأ وتريد أن ترجعه إلى ما كان عليه قبل التعديل؟ Git لها.
- مشاهدة الفرق بين صفحتين مختلفتين.
- هل تريد أن تجرب خاصية جديدة؟ تستطيع أن تنشىء فرع Branch وتعدل عليه كما تريد. اعجبتك الخاصية؟ تستطيع دمجها مع عملك الحالي، واذا لم تعجبك بإمكانك حذفها ومعاودة العمل سابقاً من جديد.


ماذا بعد؟

- حالياً أقوم بتقوية مهاراتي في ********** وسوف أبدأ بتعلم إطار عمل AngluarJS لكي يتم عمل تطبيقات ويب بإستخدام HTML وأيضاً أريد أن استفيد منها في ال Templeting، مثلا يوجد لدي Header في موقع معين، عندي خمس صفحات مختلفة وكل صفحة فيها Header، لو أردت التعديل على ملف HTML سأضطر لتكرار التعديل في الخمس ملفات. أما لو كنت أستعمل AngularJS سيتم تطبيق التعديل بشكل تلقائي على جميع الصفحات.
- التعمق في موضوع CSS Architicture وكيفية كتابة CSS بشكل مرتب ونظيف للمشاريع الكبيرة.