Home-theater-designers
قد يكون البدء في تطوير الويب باستخدام JavaScript عملية محبطة ، ولكن هناك أدوات تجعل الأمر أسهل.
CodePen.io هي بيئة تشفير داخل المتصفح مصممة لتعلم البرمجة ولإنشاء الأفكار بسرعة بأقل قدر من المتاعب.
في هذه المقالة ، نلقي نظرة على بعض ميزات الموقع وكيف يمكن أن تساعدك في أن تصبح مبرمجًا أفضل.
ما هو CodePen؟
يوفر CodePen شيئًا يسمى ملف قلم ، والذي يتألف من ثلاث نوافذ مختلفة لـ HTML و CSS و JavaScript ، بالإضافة إلى جزء معاينة يتم تحديثه في الوقت الفعلي أثناء الكتابة.
بينما يتم استخدامه بشكل متكرر لمطوري الويب لعرض أفكار لمواقع الويب ، إلا أنه يعد أيضًا مكانًا رائعًا لتعلم أساسيات تطوير الويب للواجهة الأمامية. فيما يلي أبرز الميزات التي تحتاج إلى معرفتها عند استخدام CodePen.
1. المعالجات
المعالجات المسبقة هي لغات مفسرة أو مجمعة مصممة لتبسيط الترميز. يمكنهم إضافة ميزات إلى لغة ما للراحة وتسهيل قراءة التعليمات البرمجية. في تطوير الويب ، يتم استخدام مجموعة من المعالجات الأولية لـ HTML و CSS و JavaScript لإنشاء تعليمات برمجية نظيفة بسرعة.
إذا كنت تتعلم تطوير الويب وترغب في تجربة معالجات أولية مختلفة ، فإن CodePen يسمح لك بتبديل المعالجات الأولية بسرعة ، والاطلاع على الكود الذي يقوم بتجميعه في الوقت الفعلي. يحتوي كل جزء من الأجزاء الثلاثة في تطبيق CodePen على قائمة منسدلة في أعلى اليمين. يختار عرض المترجم HTML / CSS / JS لنرى كيف سيتم تفسير الكود.
في هذا القلم ، أنشأنا موقعًا بسيطًا باستخدام هامل و ساس لتصميم بعض نص العنوان. التحديد مشاهدة ملف Compiled يعرض HTML و CSS القياسي. في هذا المثال الاختلاف ضئيل. ومع ذلك ، أثناء تعلم لغة جديدة ، قد يكون من المفيد أن ترى كيف تبدو الشفرة المعالجة مسبقًا بمجرد تجميعها.
2. الموارد الخارجية
إلى جانب الدعم الأصلي للمعالجات الأولية ، يدعم CodePen البرامج النصية الخارجية. هذا يجعله المكان المثالي للحصول على خبرة عملية مع المكتبات لمشاريعك الشخصية ، أو لتنشيط مكتبات تطبيقات الويب الشهيرة مثل React.
لإضافة مكتبة خارجية ، افتح ملف إعدادات جزء من القلم الخاص بك ، وتوجه إلى علامة التبويب JavaScript. هناك طريقتان لإضافة الموارد ، إما عن طريق إضافة عنوان URL للمورد يدويًا ، أو عن طريق البحث.
استخدمنا هذه الميزة في مقالتنا التي تغطي الرسوم المتحركة للويب باستخدام mo.js ، جنبًا إلى جنب مع معالجة بابل المسبقة.
انظر القلم مثال Mojs MUO بواسطة إيان ( تضمين التغريدة ) في CodePen.
نعم ، يمكن تضمين أقلام CodePen! انطلق وانقر على جزء المعاينة أعلاه لمشاهدة نتائج البرنامج التعليمي Mo.js!
يمكن استيراد أقلام أخرى مثل المكتبات الخارجية. هذا يعني أنه يمكنك أخذ عناصر من أقلام مكتوبة مسبقًا لاستخدامها مثل الوحدات النمطية في أقلامك الجديدة. مستخدم CodePen آدم استطلاع بسيط القلم خير مثال على ذلك.
3. القوالب
عندما تتعلم مفاهيم جديدة أو تختبر أفكارًا جديدة ، فإنك تستخدم مكونات متشابهة بشكل متكرر وتعيد اتباع نفس الخطوات للبدء. يسمح CodePen بإنشاء أقلام قوالب يمكنها قطع التكرار ، وتتيح لك الوصول مباشرة إلى النقطة.
لإنشاء قالب ، افتح قلمًا جديدًا ، وقم بإجراء التغييرات ، ثم حدد ملف نموذج شريط التمرير في قائمة الإعدادات.
https://vimeo.com/221428690
حتى وقت قريب ، كان بإمكان المستخدمين المجانيين فقط إنشاء ثلاثة قوالب ، ولكن الآن يمكن لجميع المستخدمين الحصول على العديد من القوالب في حساباتهم كما يريدون. مثالي لبدء فكرة جديدة بأقل تأخير!
4. أزياء التعاون
قد تكون القدرة على التعاون والتعليم باستخدام CodePen أعظم أصولها. هناك بالفعل ثروة من أدوات التعاون الرائعة للمبرمجين ، لكن نهج CodePen بسيط وبديهي.
يمكن لمستخدمي CodePen المحترفين إنشاء قلم جديد وفتحه للتعاون ضمن تغيير العرض قائمة. يؤدي هذا إلى تغيير رابط القلم إلى دعوة قابلة للمشاركة تستوعب عددًا كبيرًا من الأشخاص اعتمادًا على خطة CodePen Pro الخاصة بك.
أين يمكنني طباعة شيء ما مجانًا
في هذه الحالة ، قمت بكتابة HTML أثناء قيام أحد الأصدقاء بتحديث CSS في الوقت الفعلي ، بمؤشر مسمى تم تحديد مكان عملهم.
يمكن لأي شخص لديه الرابط الانضمام إلى وظيفة الدردشة في المتصفح واستخدامها ، بغض النظر عما إذا كان مستخدمًا محترفًا أو حتى لديه حساب CodePen. بشرط إيقاف تشغيل الحفظ التلقائي ، يمكن لمالك القلم فقط حفظ أي تغييرات ، مما يجعله طريقة آمنة لفتح التعليمات البرمجية الخاصة بك للآخرين دون مخاطر.
تعد الطبيعة المفتوحة لهذا الوضع مفيدة للمبتدئين حيث يمكنك دعوة أي شخص تقريبًا إلى قلمك لإرشادك خلال مفهوم صعب. إنه أيضًا وضع مفيد للتعرف على طريقك لأنه مثالي لإجراء مقابلات مع الموظفين المحتملين ، وقد تم بالفعل تم استخدامه بشكل احترافي بهذه الطريقة !
5. وضع الأستاذ
يسمح وضع الأستاذ لمستخدم Pro واحد باستضافة غرفة يستطيع فيها فقط تعديل الكود. يمكن لما بين 10 إلى 100 مستخدم المشاهدة والدردشة وفقًا لخطة Pro الخاصة بالمضيف.
يسمح وضع الأستاذ بالمرونة بين التعلم في الفصل والتعلم عن بعد ، أو مزيج من الاثنين. سيمكن استخدام وضع الأستاذ الأشخاص في الجزء الخلفي من الفصل من الحصول على نفس تجربة أولئك الموجودين في المقدمة ، كما سيمكن المعلم من عرض إصلاحات الأخطاء التي سيتم تحديثها في الوقت الفعلي.
6. وضع العرض
تم تصميم وضع العرض التقديمي ، بشكل غير مفاجئ ، مع وضع الكود في الاعتبار. يتم عرض التطبيق في عرض مبسط ، مصمم للعمل مع أجهزة العرض العلوية. قام CodePen بتحسين وضع العرض التقديمي للاستخدام على اتصالات الإنترنت ذات السرعة المنخفضة والأجهزة الأضعف.
قد يكون القراء الأذكياء قد أدركوا بالفعل أن الإصدار المجاني من CodePen سيوفر هذه الوظيفة بدقة ، على الرغم من أن وضع Pro يحتوي على بعض الميزات المفيدة. يمكن تغيير التخطيط وحجم الخط والسمات بسرعة أثناء التنقل ليناسب أي إعداد تقريبًا ، ويؤدي إظهار الارتباط إلى القلم إلى ظهور عنوان URL مختصر بحجم كبير مما يسهل مشاركة المشروع.
هذه التغييرات الصغيرة ، جنبًا إلى جنب مع القدرة على توسيع نافذة المعاينة لتناسب كل ما تعرضه ، تجعل وضع العرض التقديمي مثاليًا لكل من المعلمين والمطورين الذين يقدمون الأفكار إلى الزملاء. يعد وضع العرض التقديمي أيضًا طريقة نظيفة وبسيطة لتقديم التعليمات البرمجية إذا وجدت نفسك تجري مقابلة للحصول على منصب في البرمجة.
7. الأنماط
أصبح البحث عن الإلهام أسهل بكثير مع مجموعات CodePen من أنماط التصميم .
كل فئة عبارة عن مجموعة من أمثلة التعليمات البرمجية التي يوفرها مستخدمو CodePen لمهام محددة. هل تبحث عن طريقة لإنشاء أزرار ديناميكية لموقعك؟ القوائم الأكورديونينج؟ هناك ثروة من الفئات التي تناسب أي مثال تقريبًا.
تعد هذه الأنماط أيضًا طريقة رائعة لمعرفة كيفية عمل الأزرار التفاعلية والطرق المختلفة التي يمكن أن تعمل بها واجهات المستخدم الديناميكية.
8. إيميت
إيميت ، المعروف سابقًا باسم Zen Coding ، يعتبر على نطاق واسع أكبر توفير للوقت لتطوير HTML و CSS. يأخذ المكون الإضافي بعض التعليمات البرمجية التي تجد نفسك تكتبها كثيرًا ويحولها إلى اختصارات بسيطة.
إن رؤيتها أثناء العمل أفضل من شرحها ، لذا قم بالإعداد المعتاد لمستند HTML:
تم تقليل إضافة هذا إلى كل مستند HTML إلى إجراءين. باستخدام Emmet ، اكتب ! وضرب فاتورة غير مدفوعة مفتاح. سحر!
Emmet نشط كمعيار في CodePen وهو مفيد بشكل خاص إذا كنت تحاول تعلم مفهوم جديد في JavaScript وتحتاج إلى إنشاء HTML و CSS الداعمين بسرعة.
قم بالتطوير باستخدام CodePen للحصول على تجربة أفضل
CodePen هي أداة ممتازة لمطوري الويب ، والمجال ينمو باستمرار. JavaScript هي لغة رائعة للتعلم من أجل مستقبل في تطوير الويب.
كيفية إيقاف المكالمات الهاتفية غير المرغوب فيها على الخط الأرضي
هناك بعض البرامج التعليمية والدورات التدريبية الرائعة المتاحة للأشخاص الذين يرغبون في البدء في استخدام JavaScript ، وتعد CodePen بيئة رائعة لاختبار مهاراتك الجديدة.
يشارك يشارك سقسقة بريد الالكتروني أفضل 8 مواقع لتنزيل الكتب المسموعة مجانًاتعد الكتب المسموعة مصدرًا رائعًا للترفيه ، كما أنها أسهل في الهضم. إليك أفضل ثمانية مواقع يمكنك تنزيلها مجانًا.
اقرأ التالي مواضيع ذات صلة- برمجة
- لغة البرمجة
- تطوير الشبكة
- جافا سكريبت
- CSS
إيان باكلي صحفي مستقل وموسيقي وفنان ومنتج فيديو يعيش في برلين بألمانيا. عندما لا يكتب أو على خشبة المسرح ، فإنه يعبث بإلكترونيات أو رموز DIY على أمل أن يصبح عالمًا مجنونًا.
المزيد من Ian Buckleyاشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك