وب‌سایت‌های زیادی وجود دارند که دولوپرهای فرانت‌اند می‌توانند کدهای خود را در آن‌ها تست کنند و یا به‌صورت آنلاین به اشتراک می‌گذارند که در این مقاله به معرفی و بررسی 7 مورد از پرطرفدارین Code Playground در این زمینه خواهیم پرداخت.
اگرچه وب‌سایت‌های بسیاری وجود دارند که این امکانات را در اختیار دولوپرها قرار می‌دهند اما ویژگی‌هایی وجود دارد که باعث می‌شود برخی از آن‌ها توجه کاربران را بیشتر به خود جلب نمایند که برخی از مهم‌ترین این ویژگی‌ها عبارتند از:
- رنگ‌بندی کدهای HTML ،CSS و JavaScript
- پنجره‌ای برای نمایش نتیجهٔ اجرای کدها (البته بدون نیاز به رفرش کردن صفحه)
- پشتیبانی از تکنولوژی‌های جدید کدنویسی مثل HAML ،LESS ،SASS و Stylus CSS
- ارائهٔ لایبرری‌های معمول جاوااسکریپت
- ابزارهای ارزیابی سورس‌کد
- به‌اشتراک‌گذاری صفحات با یوآر‌الهای کوتاه
- تغییر ساختار سورس‌کد
- رایگان بودن امکانات
- محیطی مناسب برای نمایش توانایی و مهارت شما در کدنویسی
و مهم‌تر از همه این‌که شما نیازی به اجرای نرم‌افزارهای معمول توسعهٔ نرم‌افزار ندارید و همه‌چیز به‌سرعت و سادگی انجام می‌شود؛ در ادامه به معرفی 7 وبسایت محبوب به اشتراک گذاری کد که معمولاً تحت‌عنوان Code Playground شناخته می‌شوند می‌پردازیم:
JSFiddle
یکی از اولین وب‌سایت‌ها در این زمینه JSFiddle می‌باشد و بسیاری از سایت‌های مشابه بعدی، JSFiddle را الگوی خود قرار داده‌اند؛ برخلاف نام این سایت، می‌توان مجموعه‌ای از کدهای HTML ،CSS و البته JavaScript را در این سایت بررسی و اجرا نمود. اگرچه ظاهر این سایت ممکن است قدری ابتدایی به‌نظر برسد اما امکانات پیشرفته‌ای نظیر شبیه‌ساز Ajax نیز در آن وجود دارد.
Codepen
شاید بهترین وبسایت از نظر طراحی رابط‌کاربری و تنوع امکانات Codepen باشد؛ در این سایت می‌توان بدون نیاز به ثبت‌نام با ایجاد یک Pens، شروع به نوشتن کدها نمود و در پایان با یک URL اختصاصی نتیجه را با سایر دولوپرها به اشتراک گذاشت.
همچنین اخیراً امکانات دیگری نظیر اتصال فایل‌های CSS و JavaScript از خارج وبسایت به پروژه نیز فراهم شده است. پلن‌های حرفه‌ای‌تر این وبسایت از مبلغی در حدود 9 دلار به‌صورت ماهیانه شروع شده و شامل امکاناتی نظیر تست کدها در مرورگرهای مختلف، برنامه‌نویسی هم‌زمان و نکات آموزشی می‌باشد.
CSS Deck
در Cssdeck سعی شده است تا به جذابیت‌های بصری به نسبت سایر سایت‌های مشابه بیشتر پرداخته شود؛ اگرچه نام این وبسایت تنها شامل CSS می‌باشد، اما دور از ذهن نیست که کدهای HTML و JavaScript نیز در آن پشتیبانی می‌شوند. در رابطه با عملکرد، شاید این سایت را بتوان شبیه‌ترین گزینه به Codepen دانست.
JS Bin
JS Bin توسط Remy Sharp یکی از اساتید حرفه‌ای جاوااسکریپت لانچ شد و این در حالی است که این سایت بیشتر سعی در اجرای صحیح کدهای جاوااسکریپت دارد؛ پس اگر به این زبان اسکریپتی علاقه دارید و یا از دولوپرهای آن هستید، فرصت تجربه کار با JS Bin را از دست ندهید.
Dabblet
یکی دیگر از اولین سایت‌هایی که در این زمینه فعالیت خود را شروع نمود Dabblet است (این وبسایت توسط فرانت‌اند دولوپری حرفه‌ای به‌نام Lea Verou ساخته شده است). به‌طور معمول، وب‌سایت‌های شخصی دولوپرهای معروف همیشه حاوی جدیدترین اطلاعات در زمینهٔ کاری‌شان می‌باشد؛ در این مورد نیز وبسایت شخصی Lea Verou شامل مطالب جدید و مفید در زمینهٔ توسعهٔ فرانت‌اند می‌باشد.
Plunker
یکی از برتری‌های این وبسایت تعداد صفحاتی است که کاربران می‌توانند آن‌ها را به‌صورت آنلاین ویرایش نمایند؛ به همین دلیل Plunkr می‌تواند یک راه‌حل مناسب برای به‌اشتراک‌گذاری کدهای یک پروژه برای اعضای تیم برنامه‌نویسی باشد (سورس‌کد Plunker به‌صورت رایگان در ریپازیتوری گیت‌هاب در اختیار عموم قرار دارد).
Liveweave
این سایت را می‌توان یکی از کامل‌ترین گزینه‌ها در این زمینه دانست؛ پشتیبانی از لایبرری‌ها و فریمورک‌های معمول نظیر جی‌کوئری، بوت‌استرپ، انگولار و غیره، و امکان اضافه کردن آن‌ها به پروژه تنها با چند کلیک در این سایت به‌سادگی امکان‌پذیر است.
اما شاید وجه تمایز این سایت امکانات گرافیکی فوق‌العاده مفید آن باشد؛ مواردی نظیر کدهای CSS نوشته‌شده که به‌صورت بصری می‌توان با دکمه‌های تعریف شده آن‌ها را تغییر داد، پنل انتخاب رنگ و همچنین محیط طراحی المان‌های گرافیکی، همگی باعث شده است تا Liveweave بتواند درمقابل رقبای خود گوی سبقت را به‌سادگی برباید.
حال نوبت به نظرات شما می‌رسد؛ به غیر از موارد بالا، چه Code Playground دیگری می‌شناسید که هم برای دولوپرهای فرانت‌اند و هم برای دولوپرهای بک‌اند می‌تواند مفید و کاربردی باشد؟ نظرات، دیدگاه‌ها و تجربیات خود را با ما و سایر کاربران به اشتراک بگذارید.
نویسنده: واحد تحقیق و توسعه شرکت داده پردازی فراتک FaratechDP.com
منبع: سایت https://sokanacademy.com