تطوير FrontEnd: CodePen أم نص Sublime؟

CodePen أو نص سامية؟

CodePen أو نص سامية؟ إذا تحدثنا عن برمجة الويب ، فإن اسم HTML و CSS و JavaScript يأتي إلينا على الفور. هناك عدة طرق للوصول إلى هناك. حتى، إذا فتحنا مفكرة يمكننا العمل لكتابة "html". صحيح أنه لرؤية نتيجة ما تقوم ببرمجته من لوحة ، ستحتاج إلى إجراء شاق لملاحظة التقدم.

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

سنقوم اليوم بتحليل CodePen و JSBin و Plunkr و sublimeو CSSDeck و Dabblet و LiveWeave. ما هي أشهر الأدوات وأكثرها استخدامًا في هذه البيئة. هناك المزيد بالطبع.

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

CodePen

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

عرض المحتوى والدعم واختصارات لوحة المفاتيح

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

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

إذا كنت أحد أولئك الذين اعتادوا على استخدام الحالات لوحة مفاتيح تمامًا عندما تعمل ، سيكون CodePen رائعًا بالنسبة لك. تحتاج أدوات أخرى الإضافات لتتمكن من استخدام اختصارات لوحة المفاتيح لملء البيئة. هذا يجعل المهمة غير مريحة أكثر قليلاً (على الرغم من أنها فعالة بمجرد التثبيت). CP. يدمج كنظام قياسي يجعلك تملأ نفس سطور التعليمات البرمجية التي يتم تكرارها ، كما يمكن أن تكون في قائمة. تكتب كيف تريد أن تظهر القائمة وانقر فوق Tab.

يسمح الإصدار الاحترافي أيضًا بالعديد من الخيارات بسعر 9,00 يورو للحزمة الأساسية إلى 29,25 يورو للحزمة "Super". القدرة على التحديث في عدة أجهزة في وقت واحد ما نقوم به في جهاز واحد. أيضًا وضع تعاوني ، "وضع المعلم" ، إلخ. الاستفادة إذا كنت تريد هنا.

JSBin

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

JSBin بسيط ، مع الهيكل الأساسي الذي تم إنشاؤه بلغة html حتى لا تضيع الوقت ، سوف تتداخل بين اللغات المختلفة لإكمال العمل. أولاً ، هناك HTML ، ثم CSS ، و Javascript ، وأخيرًا عملك بصريًا. وعلى الرغم من أن الأمر يبدو أكثر صعوبة ، إلا أنه سيكون لديك نفس أنواع الاختصارات دون تثبيت أي شيء. مباشرة من المتصفح.

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

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

CSSDeck

CSSDeck

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

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

بلونكر

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

قل أيضًا أنه وفقًا للويب ، فإنهم في الإصدار 1.0.0. هذا يشرح قليلاً عن التصميم والعرض التقديمي والأخطاء المحتملة التي تجدها عند تصفح الويب.

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

dabblet

dabblet إنها أداة بسيطة ، تدخل وتخلق. على الرغم من أنه يمكنك التسجيل والحصول على اسم المستخدم الخاص بك من خلال GitHub ، إلا أنه ليس شيئًا يبرز كثيرًا على الويب. مع وجود خلفية متدرجة من الأصفر إلى الأحمر ، في الجزء المرئي وخلفية بيضاء في جزء الكود (كما هو طبيعي) ، يتم تقديم مشروع Dabblet ، على الرغم من أنه يمكنك تغييره من علامة التبويب CSS. بالنسبة لي ، من الأفضل أن تكون فارغة ، لأن هذا التدرج اللوني كل ما يقدمه قليل حياة a

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

أحد الأشياء التي أحببتها على أقل تقدير ، ولكن قد يحبها المبرمجون العظماء ، هو ذلك ليس لديك خيار جدولة التسمية وجعلها تكتب نفسها. أي ، ضع HTML وانقر على علامة التبويب واكتب "html" و "html" تلقائيًا. شيء ما في التطبيقات الأخرى إذا تم ذلك.

نسج حي

نسج

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

نص سامية

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

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

اختتام

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


اترك تعليقك

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها ب *

*

*

  1. المسؤول عن البيانات: ميغيل أنخيل جاتون
  2. الغرض من البيانات: التحكم في الرسائل الاقتحامية ، وإدارة التعليقات.
  3. الشرعية: موافقتك
  4. توصيل البيانات: لن يتم إرسال البيانات إلى أطراف ثالثة إلا بموجب التزام قانوني.
  5. تخزين البيانات: قاعدة البيانات التي تستضيفها شركة Occentus Networks (الاتحاد الأوروبي)
  6. الحقوق: يمكنك في أي وقت تقييد معلوماتك واستعادتها وحذفها.