كيف ترى معاينة مباشرة للرمز الخاص بك مع codepen

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

CodePen.io

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

بمجرد القيام بذلك ، يمكنك إنشاء "قلم" بالنقر فوق الزر "قلم جديد" في الزاوية العلوية اليمنى من الشاشة.

بعد ذلك ، ستتمكن من إضافة أي HTML و CSS و JavaScript إلى المربعات المقابلة لها. بمجرد البدء في إضافة بعض التعليمات البرمجية ، سترى معاينة مباشرة لما تقوم بإنشائه. يمكنك تسمية القلم الأول في الركن الأيسر العلوي. بعد النقر فوق "حفظ" الأول ، ستتمكن من مشاركة عنوان URL للصفحة مع الأصدقاء والعائلة وزملاء العمل حتى يتمكنوا من رؤية ما تعمل عليه.

هذه هي الطريقة التي سيبدو بها القلم الخاص بك مع بعض الكود (مجاملة لمشروع Free Code Camp يسمى Tribute Page):

عند إنشاء القلم الخاص بك ، سترغب في الانتقال إلى الإعدادات قبل البدء. عند النقر فوق الزر "New Pen" ، سترى قالب Pen جاهزًا لك لبدء إدخال بعض الأكواد. في الزاوية اليمنى العليا سيكون هناك زر "الإعدادات". انقر فوق ذلك (سترى الشاشة أدناه).

يمكنك هنا الاطلاع على علامات تبويب HTML و CSS و JavaScript لإضافتها إلى معلومات معينة. في علامة تبويب HTML ، ستكون قادرًا على إضافة معلومات التعريف ، والأشياء التي يجب أن تدخل في علامة التبويب ، وهلم جرا. ضمن CSS ، ستتمكن من إضافة CSS Preprocessors مثل LESS و Sass. ليس ذلك فحسب ، بل يمكنك أيضًا إضافة CSS خارجي مثل Bootstrap و Foundation. ضمن علامة تبويب JavaScript ، يمكنك إضافة معالج JavaScript مسبقًا مثل Babel أو CoffeeScript. بالإضافة إلى ذلك ، يمكنك إضافة أطر عمل JavaScript خارجية مثل Angular و React و Lodash و D3 وما إلى ذلك.

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

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

ما رأيك في CodePen؟ هل استخدمت أداة مماثلة؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!