CodePen: إنشاء واختبار ومشاركة واكتشاف HTML و CSS وجافا سكريبت

Codepen: بناء واختبار واكتشاف كود الواجهة الأمامية

يتمثل أحد التحديات التي تواجه نظام إدارة المحتوى في اختبار وإنتاج أدوات نصية. على الرغم من أن هذا ليس مطلبًا لمعظم الناشرين ، بصفتي أحد منشورات التكنولوجيا ، إلا أنني أحب مشاركة نصوص العمل من وقت لآخر لمساعدة الآخرين. لقد شاركت كيفية الاستخدام JavaScript للتحقق من قوة كلمة المرور، وكيفية تحقق من بنية عنوان البريد الإلكتروني باستخدام التعبيرات العادية (رجإكس) ، وأحدث إضافة هذا آلة حاسبة للتنبؤ بتأثير المبيعات للمراجعات عبر الإنترنت. آمل أن أضيف العشرات من الأدوات على الموقع لكن WordPress لا يفضي بالضبط إلى نشر مثل هذا ... إنه نظام محتوى ، وليس نظام تطوير.

لذلك ، للحصول على نصوص صغيرة تعمل أستمتع باستخدامها CodePen. CodePen هي أداة منظمة بدقة مع لوحة HTML ، ولوحة CSS ، ولوحة JavaScript ، ووحدة تحكم ، ونشرة منشورة من الكود الناتج. تحتوي كل لوحة على معلومات عند تحريك الماوس فوق العناصر حتى تفهم ما هو ممكن ، بالإضافة إلى ترميز ألوان HTML و CSS و JS لمساعدتك على التحرير والكتابة بشكل أسهل.

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

حول CodePen

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

CodePen - آلة حاسبة للتنبؤ بتأثير المبيعات للمراجعات عبر الإنترنت

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

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

يمكنك الحفظ كملف GitHub Gist ، والتصدير في ملف مضغوط ، وحتى تضمين القلم في مقال مثل هذا:

انظر القلم
تأثير المبيعات المتوقع للمراجعات عبر الإنترنت
by Douglas Karr (تضمين التغريدة)
on CodePen.


أحد قيود محرر القلم هو الحجم الهائل للشفرة. قد لا تواجه هذه المشكلة مطلقًا ، حيث يجب أن يكون المحرر جيدًا مع مئات أو حتى آلاف سطور التعليمات البرمجية. ولكن عندما يبدأون في الوصول إلى 5,000 - 10,000 سطر أو أكثر من التعليمات البرمجية ، سترى أن المحرر يبدأ في الفشل. ومع ذلك ، يمكنك إضافة مراجع خارجية إلى أوراق الأنماط أو JavaScript مستضافة في مكان آخر!

أنا أشجعك على التسجيل. ستشترك في بريدهم الإلكتروني الأسبوعي ويمكنك أيضًا إضافة الخلاصة إلى موجز RSS الخاص بك حتى تتمكن من رؤية الأقلام المنشورة حديثًا. وإذا بدأت في البحث أو تصفح الأقلام العامة هناك ، فستجد بعض المشاريع الرائعة ... المستخدمون موهوبون تمامًا!

يرجى فتح Douglas Karr على Codepen

يوفر الإصدار المدفوع ، CodePen Pro ، الكثير من الميزات الإضافية لتحسين الوظائف أو الفرق - بما في ذلك التعاون والعمليات واستضافة الأصول والعروض الخاصة وحتى المشاريع المنشورة مع المجال الخاص بك أو المجال الفرعي. وبالطبع ، يوفر CodePen مستودعًا رائعًا مع تكامل Github حيث يمكن لفريقك بأكمله العمل. إذا كنت ترغب فقط في اختبار بعض التعليمات البرمجية البسيطة مثلي ، فإن CodePen هي أداة لا تقدر بثمن.

ما رأيك؟

يستخدم هذا الموقع نظام Akismet لتقليل الرسائل الضارة. تعرف كيف تتم معالجة بيانات تعليقك.