أفضل الطرق للاستفادة من دفتر مسودات المبرمجين … محرر CodePen !

موقع codepen
1

شارك المقال 👈

Share on facebook
Share on twitter
Share on linkedin
Share on pocket

لعلك لاحظت الازدياد اليومي في عدد مواقع وصفحات الإنترنت، وعلى الأغلب صادفت خلال بحثك عن عمل جملة “مطلوب مصمم مواقع للعمل في الشركة الفلانية“! فاليوم أصبح من المهم لجميع الشركات والمؤسسات التجارية إنشاء مواقع خاصة بها من أجل تسويق منتجاتها على الشبكة والوصول إلى المزيد من العملاء.

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

وأصبح بإمكانك البدء في تطوير نفسك بلغة البرمجة التي تريد لأنه أصبح هناك الكثير من الأدوات التي تجعل الأمر أسهل وأقل تعقيداً، ولعل أشهرها هذه وأكثرها تميزًا اليوم هو محرر CodePen.

موقع codepen

فهل سبق لكَ أن سمعت به أو استخدمته من قبل؟

يعرف موقع CodePen على أنه بيئة تنمية اجتماعية لأن معظم الإبداعات على CodePen هي عامة ومفتوحة المصدر، حيث أنها مشاريع حية يمكن للأفراد الآخرين والمجتمع أن يتفاعلوا معها بمجرد إلقاء نظرة بسيطة، من خلال ترك تعليق والتشكيل والتغيير حسب احتياجاتهم الخاصة.

كما وأن CodePen يتيح لك كتابة التعليمات البرمجية في المستعرض ومشاهدة النتائج أثناء ذلك، ويعتبر أداة مفيدة جداً للمطورين والمبرمجين ويركز في المقام الأول على لغات البرمجة مثل HTML و CSS و JavaScript وغيرها كما ويسمح للمطورين بتضمين CodePen Demos على أي صفحة ويب فقط باستخدام ميزة التضمين الخاصة بهم.

والجميل في CodePen القدرة على استخدامه لأشياء عديدة مثل تصميم أفكار جديدة، وهو يساعدك أيضاً بتقليل الأخطاء التي قد تتعرض لها ويمكنك من التعاون مع الآخرين، ويساعدك على تقييم مستواك كما ويستخدم بعض الناس CodePen كنوع من السيرة الذاتية لهم من خلال عرض أفضل أعمال التصميم والتطوير الخاصة بهم.

اقرأ أيضًا: لغات البرمجة المهمّة لسوق العمل دع الشركات تبحث عنك وليس العكس!!

ميزات عديدة!

 

موقع codepen

على الرغم من أنه يُستخدم بشكل متكرر لمطوري الويب لعرض أفكار لمواقع الويب، إلا أنه يعد أيضًا مكانًا رائعًا للتعرف على أساسيات التطوير في الويب وله العديد من الميزات التي تجعله أفضل من غيره وفيما يلي أبرز هذه الميزات التي تحتاج إلى معرفتها عند استخدام CodePen

دعم اطارات عمل متنوعة

حيث تدعم CodePen مجموعة كبيرة من أطر HTML وCSS وJavaScript، على سبيل المثال بالنسبة لـ HTML، يمكنك استخدام HAML أو Slim أو Markdown أو حتى Jade.

بالنسبة لـ CSS، فإنها تدعم SCSS وSASS (كلاهما مع إضافة Compass أو Bourbon الاختيارية)، بالإضافة إلى Less وStylus.

وكما هو الحال في لقطة الشاشة، يمكنك أن ترى أنه تحت قائمة JavaScript، يمكنك تحديد Coffee Script أو Live Script وهناك أيضاً قائمة منسدلة حيث يمكنك الحصول على أحدث النسخ مثل jQuery وAngularJS.

الوسوم والمجموعات

تسمح CodePen بإضافة وسوم إلى الـ Pen بحيث يمكن البحث عنها بواسطة محركات البحث ويمكن للـ Tags مثل “Loader” و”Form” أن تظهر عددًا كبيرًا من أكود التصميم التي يمكن استخدامها كمصدر إلهام للمشروع، وأيضاً يمكنك إنشاء مجموعات لنوع معين من الـPens

خيارات CSS

يحتوي CodePen CSS على وظائف فعالة للمساعدة في كتابة CSS بشكل أسرع، بمجرد النقر فوق زر الراديو، يمكنك تحديد تضمين Normalize.css أو Reset.css في CSS.

ويمكنك أيضًا اختيار استخدام البادئة الحرة أو Autoprefixer أيضًا بحيث لا تحتاج إلى تخصيص الوقت لربط ملف خارجي حيث أن الأخير هو أمر ممكن أيضًا، إذا كنت ترغب في ذلك.

Emmet و Vim Binding

CodePen أسرع وأكثر سلاسة وذلك بسبب استخدامه مجموعة أدوات مثل Emmet للمساعدة في الحفاظ على حركة المشاريع بالإضافة الى أن محرر CodePen يسمح لك باستخدام Vim Key Bindings وهي اختصارات لوحة مفاتيح سطر الأوامر يمكن أن يساعد كل من هذه الأدوات معًا في إنشاء وتسهيل عمل أسرع.

وغيرها الكثير من الميزات التي تجعل من CodePen موقعاً جذاباً لكل من يريد الدخول في عالم البرمجة وتصميم المواقع ولاسيما أن البرمجة أصبحت واحدة من أهم الأشياء التي يجب علينا إتقانها وتعلمها.

والآن كل ما عليك هو اختيار لغتك التي تريد البدء بها وتذكر أن CodePen هي خيار رائع لن تندم عليه حتماً.

1

شاركنا رأيك حول "أفضل الطرق للاستفادة من دفتر مسودات المبرمجين … محرر CodePen !"

أضف تعليقًا