الأسرار التي تحتاجها للتعامل مع موقع Codepen

في موقع Codepen لا تحتاج أبدا لوضع جميع محتويات صفحة ال HTML في الجزء الخاص بال HTML وكل ما عليك هو وضع محتوى ال body فقط شاهد الصور لتعرف الصواب من الخطأ

أما لو احتجت وضع أي شيء داخل عنصر ال head كل ما عليك هو الضغط على Icon ال Gear بجانب كلمة HTML وسوف تظهر لك الخيارات التالية وسوف يتم شرحها كلها

رقم 1

إذا كنت تعلمت واحد من ال Template Engines المشهورة الخاصة بلغة HTML مثلا HAML, Pugjs, Slim يمكنك إختياره من هنا لتكتب ال Code به

رقم 2

إذا أردت وضع أي Class معين على عنصر ال html يمكنك وضعه هنا على سبيل المثال إذا أردت وضغ أكثر من كلاس قم بوضع مسافة بينهم هكذا my-class my-class-two وسوف تجد النتيجة هكذا

رقم 3

إذا أردت وضع أي شيء داخل عنصر ال head يمكنك وضعه هنا مثلا واحد من عناصر ال meta أو عنصر ال style أو أي شيء يتم وضعه داخل عنصر ال head شاهد المثال

رقم 4

إذا ضغطت على هذا السطر سوف يقوم بوضع أهم عناصر ال Meta الخاصة بال Vieweport تلقائيا

لا يوجد أي شيء غريب كل ما عليك هو كتابة Code ال CSS كما تعودت عليه بدون أي مشكلة والآن ندخل إلى إعدادات ال CSS بالضغط على Icon ال Gear بجانب كلمة CSS لنقوم بشرح جميع المميزات

رقم 1

إذا كنت تعلمت واحد من ال PreProcessors المشهورة الخاصة بلغة CSS مثلا SASS, LESS, Stylus يمكنك إختياره من هنا لتكتب ال Code به

رقم 2

يمكنك إختيار واحد من ال Reset المشهورة التي تجعل الصفحة تعرض العناصر بشكل طبيعي مثل ال Reset وال Normalize

رقم 3

يمكنك إختيار واحد من ال Auto Prefixer الذي يقوم بوضع ال Prefix الخاصة بخواص CSS3 تلقائيا بدون أن تضعها بنفسك فبدلا من كتابة ال Prefix بنفسك كما في المثال التالي كل ما عليك هو كتابة الخاصية فقط وهو يقوم بالباقي

رقم 4

إذا أردت إستدعاء واحدة من المكتبات المشهورة لمساعدتك في التصميم كل ما عليك هو كتابة اسمها في البحث وبعد أن تظهر لك قم بالضغط عليها وسوف يقوم بإستدعاء هذه المكتبة لتساعدك في عملك

رقم 5

نفس الخيار السابق ولكن بدلا من البحث في المكتبات العالمية يمكنك إستدعاء أي مكتبة أو ملف Style في أي مكان عن طريق وضعه في خانة المصادر الخارجية ومكنك وضع أي عدد تريده ويمكنك ترتيبهم كما تحب عن طريقة Icon ال Order الموجودة بجانب حقل الإدخال

رقم 6

لإضافة حقل إدخال جديد لوضع ملف Style إضافي للمشروع

أنت مطور محترف ولا تحتاج لإعادة شرح ما تم شرحه, 🙂 كل ما تم شرحه في خانة ال CSS ينطبق على خانة ال JS بدون أي فرق

وهي عبارة عن معلومات تحتوي على تفاصيل ال Code ألخاص بك ووصف له وسوف يتم شرح كل نقطة

رقم 1

إسم ال Pen وهو مهم للوصول إليه ومعرفة محتواه وحتى تتعود على النظام ويكون عملك منظم يمكنك تسميته مثلا
My Front-End Task Number 01

رقم 2

الوصف الخاص بال Pen لتوضيح كل ما يخصه فيه مثال أن تقوم أنه تطبيق على فيديو معين على قناة Youtube معينة وتضع الروابط مثلا أو أن تقول أنه تطبيق لمحاضرة معينة في جامعة معينة وهكذا ليكون عملك احترافي ومنظم

رقم 3

ال Tags تساعد الناس للوصول لل Pen من البحث إذا كنت تستعملها بشكل جيد فمثلا أنت قمت بعمل Animation لصورة بشكل ظريف يمكنك وضع ال Tags المعبرة عن هذا العمل وتفصل بينهم بعلامة “,” لتضع أكثر من Tag ليكونوا مثلا بهذا الشكل
animation, front-end, image-, effects, css3

وهي الإعدادات الخاصة بال Pen وكيف يتم التعامل معها أثناء كتابة ال Code

رقم 1

هو الخيار الذي يقوم بعمل حفظ لل Pen تلقائيا كل 30 ثانية بدلا من أن تقوم أنت كل فترة بعمل حفظ

رقم 2

هذا الخيار إذا قمت بتفعيله يقوم بعمل تحديث للمحتوى تلقائيا وأنت تكتب فكلما قمت بعمل تغيير يظهر لك فورا في خانة ال Preview

رقم 3

هذا الخيار يقوم بعمل تنسيق Formatting لل Code عندما تقوم بعمل حفظ وإذا كنت محترف في مجالك فأنت لا تحتاج له لأن الطبيعي أن تكون متمكن من تنسيق ال Code أثناء الكتابة ولا تحتاج لمساعدة

هنا سوف تقوم بتغيير إعدادات محرر ال Code وهناك إعدادات بسيطة وإعدادات متقدمة في لوحة تحكم موقع Codepen نفسه

رقم 1

تقوم بإختيار المسافات في ال Code التي تسمى ( Indentation ) إما ب Space أو Tab مثل محرر ال Code ألعادي في جهازك وتختار هل هي 2 أم 4 والغالبية الآن بسبب أن ال Code أصبح أكبر يستخدموا 2 ولكن هذا راجع لك

رقم 2

من هذا الخيار يمكنك التحكم في الإعدادات العامة للمحرر مثل الموجود في جهازك تماما مثل تغيير ألوان ال Theme والتحكم في ال Syntax Highlights والخطوط وكل ما يخص ال Code

رقم 3

هنا سوف تجد جولة رائعة جدا لتجربة ال Pen وكتابة ال Code وسوف توضح لك الكثير والكثير باذن الله

مع نظام ال Template يمكنك عمل قالب مسبق تستخدمه في كل مشاريعك المستقبلية فمثلا أنت دائما تستعمل مكتبة معينة واطار عمل معين وتضع Classes معينة في كل Pen تقوم بإنشائها ولذلك مع نظام ال Template يمكنك جعل هذه ال Pen قالب ثابت كلما أردت بدأ مشروع معين تستخدم هذه ال Pen مباشرة بدون الحاجة لتكرار كل ما تقوم فعمله كل مرة.

عندما تتعمق في هذا المجال سوف تجد أنك قمت بعمل الكثير من ال Pens على الموقع وأعمالك سوف تزداد يوما بعد يوم وفي حالة عدم وجود تنظيم لن تستطيع العثور على ما تريد بسهولة وهنا يأتي دور ال Collection والذي يتيح لك تنظيم أعمالك داخل مجموعات فمثلا في المثال يمكنك عند عمل أي Pen أن تختار Add To Collection وبعدها يمكنك إضافة ال Pen لمجموعة معينة حسب نوعها أو يمكنك إنشاء Collection جديد وإضافتها فيه مباشرة ويمكنك تنظيم أعمالك على سبيل المثال لمجموعات كالتالي
Draw With CSS
Animation
SVG
Full Templates
Mobile Designs

يمكنك هنا التحكم في شكل الصفحة الكلي وتغييره لما هو مناسب لك وهذه من المميزات الجميلة التي تسمح لك مثلا أن تقوم بكتابة ال Code في واحدة من الشاشات وعلى الشاشة الأخرى تقوم بعرض الصفحة كاملة لترى التصميم بدون Code وهي ميزة جميلة جدا وتوفر عليك الوقت

Editor View

وهو الوضع العادي الذي ترى فيه ال Code ومعه شكل التصميم Preview

Details View

ومن إسمها هي صفحة التفاصيل التي ترى فيها تفاصيل ال Pen كاملة ومعها أيضا شكل التصميم Preview وأيضا رابط لمشاركة ال Pen والكثير

Full Page View

وهو شكل التصميم الكامل بدون وجود مكان لل Code ولا للتفاصيل لتستطيع مشاهدته بشكل كامل ومازال هناك البار العلوي الذي يمكنك من تغيير ال View كما تريد

Debug View

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

Edit Layout

أما الخانة الأخيرة فهي تشرح كل شيء وهي لتغيير مكان ال Code لما هو مناسب لك

في حالة كنت تحب الشروحات الفيديو هناك شرح كامل فيديو على الرابط التالي
How To Deal With Codepen Features