10 نصائح Codepen للمبتدئين

Codepen هو موقع سوبر سهلة وشعبية ل قلم جاف أسفل التحرير والسرد رمز أمامي العمل على الفور. إذا كنت لا تعرف ما هو Codepen أو لم يسمع به من قبل ، فمن الأساس ملعب شفرة المصدر على الانترنت (دعنا نسميها OSCP لإلقاء صوت أكثر رعبا) للفرسان الثلاثة من الترميز الأمامي ؛ HTML, CSS و جافا سكريبت.

هناك OSCPs الأخرى المماثلة هناك مثل JSFiddle و JS Bin و CSSDeck & Dabblet. Codepen هي بالتأكيد واحدة من أكثر الشركات شهرة بين مطوري الواجهة الأمامية. دون مزيد من اللغط ، دعنا نقفز إلى اليمين نصائح أساسية ومفيدة لاستخدام Codepen.

1. زر التشغيل

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

يعد هذا أيضًا خيارًا رائعًا إذا كنت تعمل برمز ينتج عنه يمر الكثير من التغييرات في التصميم, ويعيد طلاء في كل مرة يتم تحديثه ، مما يؤدي إلى بطء.

2. عدد الزيادة / النقصان

زيادة أو تقليل الأرقام في التعليمات البرمجية في Codepen دون كتابة الأرقام الجديدة. كل ما عليك فعله هو استخدام مزيج مفتاح Ctrl / Cmd و صعودا وهبوطا السهام.

3. مؤشرات متعددة

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

4. مختلف رسائل وحدة التحكم الملونة

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

يمكنك استعمال ال معلومات (), تحذير () و خطأ() طرق ل معلومات, تحذير و خطأ. عادةً ، تقوم وحدات التحكم في الويب بتلوين هذه الرسائل حسب نوعها ، أو ستعرض أيقونة مناسبة بجانبها (مثل علامة تحذير لرسالة التحذير) لسهولة الاعتراف.

Codepen لديه وحدة التحكم الخاصة به التي يمكنك فتحها من خلال النقر على زر وحدة التحكم في الزاوية اليسرى السفلى. إنه مثالي لفحص سريع لرسائل وحدة التحكم دون الحاجة إلى فتح وحدة التحكم في المتصفح. تميز وحدة التحكم هذه الأنواع المختلفة من رسائل وحدة التحكم مع ألوان خلفية مختلفة.

5. تصدير

بمجرد الحفظ ، قلم جاف (كيان Codepen واحد) يمكن تصديرها كملف ZIP مع كل من في HTML ، CSS ورمز JS في الملفات. هناك أيضًا خيار لحفظ القلم باعتباره جوهر جيثب (مستودع بوابة). يمكنك العثور على زر تصدير في الركن السفلي الأيمن من كل قلم.

6. البحث واستبدال

البحث والاستبدال - عملية ضرورية للأشخاص الذين يميلون إلى إعادة تسمية أسماءهم المتغيرة بين الحين والآخر. Ctrl / Cmd + Shift + F هو مفتاح التحرير والسرد إلى افتح ال “البحث والاستبدال” الحوار.

7. Emmet تبويب الزناد

هل تعرف عن مشغلات علامات التبويب لترميز Emmet؟ Emmet هي أداة إنتاجية لمطوري الواجهة الأمامية تتيح لك ذلك اكتب رمز الهيكل العظمي الذي يمتد لاحقًا. للقيام بذلك في Codepen ، فقط اكتب الاختصار المناسب في المحرر ، واضغط على المفتاح Tab ، ويظهر الرمز الكامل مرة واحدة. متاح فقط لـ HTML في Codepen.

8. الحصول على ملفات رمز الفردية

إذا كنت تستخدم خيار التصدير كما هو مذكور سابقًا ، فستحصل على جميع الملفات الثلاثة (HTML و CSS و JS) لقلمك. ولكن إذا كنت مهتما في واحد أو اثنين فقط من هذه الملفات, وتريد تنزيلها بشكل فردي ، هناك خيار لذلك أيضًا في Codepen.

بمجرد تسجيل الدخول إلى Codepen ، انتقل إلى القلم الخاص بك ، وانقر فوق الزر "تغيير العرض" في الزاوية اليمنى العليا. في أسفل القائمة المنسدلة ، سترى روابط التحميل المباشر للملفات الفردية.

9. فحص متغيرات JavaScript

نظرًا لأن وحدة التحكم JavaScript في Codepen تتصل بـ JavaScript المحفوظ في قلمك ، يمكنك أيضًا استخدامه لاختبار JavaScript بسرعة. هذه الميزة تأتي مفيدة بشكل خاص فحص متغيرات JS, كما بهذه الطريقة لك ليس من الضروري إدخال وحدة تحكم إضافية أو رسائل تنبيه في الكود الأصلي فقط لأغراض الاختبار.

10. تحويل القلم إلى القالب

إذا كنت تميل إلى بدء معظم الأقلام مع نفس مجموعة الكود, يمكنك استخدام قالب ل حفظ تلك رمز التكرار. لتحويل القلم إلى قالب, حدد خيار القالب تحت قائمة الإعدادات. عندما تقوم بإنشاء قلم جديد لاحقًا ، يمكنك ذلك ابدأ بالقالب المحفوظ بالنقر على السهم لأسفل في الجانب الأيمن من الزر New Pen. سيفتح قائمة منسدلة تحتوي على جميع القوالب المحفوظة الخاصة بك للاختيار من بينها.