۵ محیط آنلاین برای اجرا کدهای Front-End

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 10 مهر 1397
دسته بندی ها : طراحی وب

به همان اندازه‌ای که از ادیتورهای آفلاین خوشم می‌آيد، به همان اندازه نیز از این موضوع متنفرم که کدهایی را بنویسیم و برای تست آن‌ها بارها و بارها مجبور به باز کردن مرورگر و... باشم. حتی زمانی که تب مورد نظرتان را باز کرده‌اید اما باز هم باید به صورت مداوم بین مرورگر و ادیتور سوئیچ کرده و صفحه را رفرش کنید. در غیر اینصورت نمی‌توانید خروجی را به شکلی درست ببینید. به شخصه بیشتر ترجیح می‌دهم روی محیطی کار کنم که به صورت سریع و بلادرنگ به من خروجی‌هایی را نشان دهد.

ویرایشگرهای آنلاین یک قابلیت خوبی که دارند این است که به محض نوشتن کدها به شما خروجی را نشان می‌دهد، همچنین قابلیت تست را فراهم می‌کند. یکی دیگر از مزیت‌های این ویرایشگر‌ها و محیط‌های توسعه وجود انجمن‌هایی برای برنامه‌نویسان است که در آنجا می‌توانند سوالات‌شان را بپرسند و قطعه کدهای‌شان را با همدیگر به اشتراک بگذارند.

۱. Codepen

CodePen جامعه بزرگی از توسعه‌دهندگان و طراحان وب هستند که در آن کاربران می‌توانند کدهای‌ HTML/CSS/JS را تست کنند و به اشتراک بگذارند. CodePen خود را مانند یک محیط آموزشی متن باز و کد ادیتوری آنلاین می‌بیند. در این پلتفرم توسعه‌دهندگان قطعه کدهایی را با نام pens توسعه می‌دهند و در همانجا نیز تست می‌کنند. ادیتور مربوط به CodePen همراه با قابلیت‌هایی مانند indentation و colorful syntax highlighting ارائه می‌شود. این ابزار به صورت رسمی از HTML/CSS/JS پشتیبانی می‌کند، اما باید بگویم که محدودیتی برای Pug، Slim، SCSS، Typescript و... وجود ندارد. همچنین وجود قابلیت همکاری با دیگران نیز بسیار به روند توسعه کمک می‌کند. در این پلتفرم هیچوقت کارهای‌تان را از دست نخواهید داد، به این دلیل که همه چیز به صورت خودکار ذخیره می‌شود. با وجود مشابهت‌هایی با گیت‌هاب، شما در این ابزار قابلیت فورک کردن کدها و ویرایش آن‌ها را دارید. 

۲. JSfiddle

JSFiddle جامعه آنلاین بزرگی برای تستینگ و نمایش کارها و همچنین همکاری روی قطعه‌ کدهای HTML/CSS/JS است. این وبسایت قابلیت شبیه‌سازی فراخوانی‌های آجاکس را نیز برای شما فراهم می‌کند. Codepen نیز دقیقا به همین صورت است. رابط کاربری این وبسایت بسیار ساده و مرتب است، شما در قسمتی از برگه‌ اصلی وبسایت کدهای‌تان را می‌نویسید و در بخشی دیگر در همان صفحه، بعد از انتخاب دکمه run خروجی را به صورت بلادرنگ مشاهده می‌کنید. از ویژگی‌های این ابزار می‌توان به پشتیبانی از SCSS و همچنین کتابخانه‌های جاوااسکریپتی مانند Typescript، CoffeScript، Vue و React اشاره کرد. این ابزار در حال توسعه و بهبودی بیشتر است، اخیرا قابلیت code hinting نیز به این ابزار اضافه شده که به شما در حین کدنویسی پیشنهادهایی را برای خاصیت‌ها و مقادیر CSS/JS ارائه می‌دهد. همچنین این ابزار از قابلیت همکاری توسعه‌دهندگان با یکدیگر پشتیبانی می‌کند. 

۳. Plunker

Plunker یکی از بهترین ابزارها برای نمونه‌سازی، تستینگ، به اشتراک گذاری و دیباگ کردن ایده‌های‌تان است. بهتر از همه تمام این موارد در دنیای وب قابل دسترس است. از ایده تا پیاده‌سازی، Plunker به شما اجازه می‌دهد تا همه چیز را به سرعت انجام دهید. محیط کاری این ابزار دقیقا شبیه به محیط کاری ابزارهای ویرایشگر آفلاین است. شما با یکسری پنل مختلف همراه هستید که هر کدام از آن‌ها ویژگی‌های خودشان را دارند. برای مثال قسمتی از این ادیتور فایل‌های پروژه را به صورت درختی به شما نشان می‌دهد، قسمتی دیگر کدهای‌تان در آن قرار می‌گیرد و... همچنین قابلیت‌های مانند درگ/درپ فایل‌ها را دارید. یکی دیگر از مزیت‌های این ابزار قابلیت بلادرنگ بودن آن در ارائه پیشنمایش کدها است. 

با استفاده از Plunker، شما هیچوقت کارهای‌تان را از دست نمی‌دهید. این ابزار تمام فایل‌های‌تان را دنبال می‌کند، تغییرات را مشاهده می‌کند و همواره از مواردی که ذخیره نشده‌اند یکسری کپی برمی‌دارد. تمام فایل‌های پروژه در Plunker ایندکس می‌شوند و قابلیت جستجو را پیدا می‌کنند. شما می‌توانید هر چیزی که دوست دارید را در این ابزار جستجو کنید. حتی می‌توانید از دیگر پروژه‌ها نیز فورک بگیرید. وجود رابط متنی و کنسولی، این قابلیت را برای شما فراهم می‌کند که روند دیباگ بسیار آسان‌تری داشته باشید.

۴. JSBin

JSBin یک ادیتور رایگان و آنلاین برای HTML/CSS/JS است. یکی از ویژگی‌های منحصر به فرد این ابزار قابلیت خروجی زنده است، شما هر چیزی را که می‌نویسید به سرعت در خروجی دریافت خواهید کرد. اضافه کردن کتابخانه‌ها، فریمورک‌ها و امکانات مختلف دیگر بسیار آسان و سریع است. همچنین قابلیت کنسول به شما امکان این را می‌دهد که با سرعت بیشتری کدهای‌تان را دیباگ کنید. JSBin از زبان‌های مارک‌آپ، پیش‌پردازنده‌های CSS و کتابخانه‌های مختلف جاوااسکریپتی پشتیبانی می‌کند. همچنین در این ابزار قابلیت clone کردن پروژه‌ها نیز وجود دارد.

۵. Codeply

Codeply یک ادیتور مبتنی بر وب برای HTML/CSS/JS است که با بهترین فریمورک‌های حال حاضر ادغام شده است. Codeply طراحی وبسایت به صورت واکنشگرا و فرایند توسعه را به لطف کمک گرفتن از فریمورک‌هایی مانند بوت‌استرپ، فاوندیشن و... بسیار سریع و راحت می‌کند. خودتان را دیگر از بابت خواندن مستندات و جستجو کردن و... راحت کنید، در این ابزار همه چیز از قطعه کدهای کوچک تا لایه‌بندی‌های آماده فراهم دشده است. 

منبع

مقالات پیشنهادی

چگونه محیط کار در کار طراحی اثر می گذارد

بعضی از اوقات، به عنوان یک طراح وب یا دیجیتال ممکن است که در دام دنیای کوچک کامپیوتر و طراحی بیافتیم، و تمام تلاش هایی را که برای حل کردن مشکلات کاربر...

55 نمونه کامل که نشان دهنده الهام گرفتن از همه چیزه

مردم همیشه میگن پیدا کردن چیزی الهام بخش برای خلق یک چیز خلاقانه خیلی سخته . من میگم همیشه باید سعی کنیم چیز های متفاوت رو احساس کنیم . بعضی ها حتی به...

15 کتابخانه جالب javascript و css

ماموریت ما در راکت این است که شما را بر اساس تکنولوژی روز طراحی وب به روز نگه داریم . به همین خاطر هم هست که ما تقریبا ماهانه یا چند هفته در میان پستی...

15 پلاگین عالی Sublime Text

Sublime Text این روزها رتبه اول را بین ویرایشگرها برای کد نویسی کردن را دارا است. برنامه نویسیان به دلیل سادگی ، سرعت و اکوسیستم غنی پلاگین از Sublim...