در طول سالها انواع زمین های بازی با کد بالا ظاهر شده است. اکثر آنها راهی سریع و کثیف برای آزمایش کد طرف مشتری (و گاهی اوقات سرور) ارائه می دهند و سپس آن را با دیگران به اشتراک می گذارند. در اینجا نگاه ما به هفت مورد از بهترین ها است.
زمین های بازی آنلاین برای کدگذاری معمولاً شامل موارد زیر است:
- ویرایشگرهای HTML ، CSS و JavaScript با کد رنگی
- دستور کد تکمیل خودکار
- یک پنجره پیش نمایش که (معمولاً) بدون بارگذاری مجدد دستی بارگیری مجدد می شود
- پیش پردازنده های HTML مانند HAML
- Less ، Sass ، Stylus و پیش پردازنده های CSS مشابه
- گنجاندن کتابخانه های محبوب جاوا اسکریپت مانند React ، Preact ، Angular و Vue.js (برخی از زمین های بازی جدید همچنین امکان توسعه کد پشتیبان را می دهند)
- کنسول های توسعه دهنده و ابزارهای اعتبار سنجی کد
- برنامه نویسی امکانات همکاری
- اشتراک گذاری از طریق URL کوتاه
- جاسازی تظاهرات در صفحات دیگر
- شبیه سازی و فورکینگ کد
- کپی در مخازن کد مانند GitHub
- هزینه صفر برای خدمات اولیه
- خدمات حق بیمه بیشتر با هزینه ماهانه اندک
- راهی برای نشان دادن مهارت های برنامه نویسی خود به جهان!
آنها به شما امکان می دهند قطعات کد آزمایشی را بدون محدودیت ایجاد فایل ، ویرایش ویرایشگر یا اجرای یک سرور محلی ، آزمایش کرده و نگه دارید.
بیایید برخی از گزینه های بهتر را بررسی کنیم.
CodePen اولین مورد نبود ، اما یکی از محبوب ترین و زیبا ترین زمین های بازی کد است. این سرویس که توسط کریس کویر از CSS-Tricks تاسیس شده است ، قلم های معروف (تظاهرات سمت مشتری) و Projects (محیط های توسعه آنلاین یکپارچه که می توانید برای ساخت پروژه های وب استفاده کنید) را برجسته می کند. این برنامه یک رابط ویرایش کاربر تمیز و کاربردی با قابلیت های پیشرفته مانند اشتراک گذاری ، جاسازی ، کنسول خطا ، کتابخانه های جاوا اسکریپت خارجی ، پیش پردازنده های محبوب CSS و موارد دیگر را ارائه می دهد.
CodePen PRO قلم های خصوصی ، میزبانی دارایی ها ، حالت همکاری و موضوعاتی را برای iframes های جاسازی شده ارائه می دهد که از 8 دلار در ماه شروع می شود.
JSFiddle یکی از اولین زمین های بازی با کد بود و بر زمین های بعدی تأثیر گذاشت. می توان از آن برای هر گونه آزمایش HTML ، CSS و JavaScript استفاده کرد و مجموعه ای از کتابخانه ها و چارچوب ها را ارائه می دهد. به طور غیر معمول ، می تواند درخواستهای Aynx ناهمزمان را نیز شبیه سازی کند.
JSFiddle بر روی کد متمرکز است بنابراین شما طیف وسیعی از ویژگی های اجتماعی مانند تظاهرات برجسته و امکانات اشتراک گذاری را پیدا نخواهید کرد. رابط کاربری ساده تر از دیگران است و به طور غیرمعمول ، باید آن را بزنید اجرا کن برای بارگذاری مجدد صفحه نتایج با این حال ، همیشه احساس شادی می کند و سادگی آن ممکن است بر برخی ترجیح داده شود.
JS بن توسط استاد راهنمای جاوا اسکریپت ایجاد شده است رمی شارپ و هنوز توسط او اداره می شود. این برنامه بر روی اصول برنامه نویسی تمرکز کرده و آنها را به خوبی مدیریت می کند. بر خلاف برخی دیگر از زمین های بازی ، می توانید کل یک فایل HTML از جمله <head>به
علاوه بر گزینه های معمول ، کتابخانه ها و پیش پردازنده ها ، JS Bin یکی از اولین کسانی بود که کنسول ورود به سیستم را ارائه کرد ، که برای توسعه جاوا اسکریپت ضروری است. حساب تجاری تجاری Pro ویژگی های پیشرفته ای مانند بارگذاری دارایی ، سطل های خصوصی ، URL های بیهوده و همگام سازی Dropbox را ارائه می دهد. حتی می توانید JS Bin را به صورت محلی بارگیری و نصب کنید اگر نگران حریم خصوصی هستید یا نمی خواهید دیگران وضعیت کد شما را ببینند!
با وجود نام ، عرشه CSS یک زمین بازی کاملاً HTML ، CSS و جاوا اسکریپت با ویژگی های اجتماعی و همکاری است. مدت زیادی است که وجود دارد و تأثیر عمده ای بر دیگر زمین های بازی داشت. CSS Deck به اندازه CodePen ویژگی ندارد ، اما کمی سریعتر به نظر می رسد و دارای صفحه نمایش برنامه نویسی کدگذاری قابل تنظیم تر است. یک انجمن فعال وجود دارد که به طور منظم نمونه تظاهرات کد را ارسال می کند.
بیشتر زمین های بازی کد یک فایل HTML ، یک فایل CSS و یک فایل جاوا اسکریپت ارائه می دهند (اگرچه بیشتر imports ممکن است ممکن باشد). CodeSandbox کمتر یک زمین بازی است و بیشتر یک محیط توسعه آنلاین است.
مانند پروژه های وب استاندارد ، می توانید هر تعداد فایل را اضافه کرده و آنها را با استفاده از یک محیط توسعه یکپارچه مانند VS Code (مانند IDE) ویرایش کنید. ثبت نام با استفاده از حساب GitHub یا Google رایگان است ، اما می توانید در زمان واقعی با دیگران همکاری کنید ، پروژه ها را به مخزن Git صادر کنید و در میزبانهای سایت ثابت مانند Netlify و Vercel مستقر شوید.
اگر از راه دور کار می کنید یا از یک دستگاه توسعه معمولی مانند Chromebook استفاده می کنید ، CodeSandbox می تواند یک گزینه کاربردی باشد.
کد پخش یک محیط توسعه آنلاین دیگر است که به شما امکان می دهد چندین فایل HTML ، CSS ، JavaScript و دارایی اضافه کنید. رابط کاربری ساده تر از CodeSandbox است ، اما سریع است ، عالی به نظر می رسد ، استفاده از آن آسان است و احتمالاً برای مبتدیان دلهره آور نیست.
PLAYCODE دارای یک کنسول ورود به سیستم است و به طور غیرمعمول ، به شما امکان می دهد اندازه و فرکانس به روز رسانی پنجره پیش نمایش را کنترل کنید. ویرایشگر رایگان است ، اما برای ذخیره پروژه ها باید با Google ، Microsoft ، GitHub یا یک حساب ایمیل وارد شوید.
پلانکر یکی دیگر از ویرایشگران مبتنی بر پروژه است که به شما امکان می دهد چندین فایل HTML ، CSS و JavaScript اضافه کنید. برای شروع پروژه می توانید الگوهای ایجاد شده توسط جامعه را وارد کنید. مانند دیگران ، Plunker به شما امکان می دهد نسخه های نمایشی کاری ایجاد کنید ، با توسعه دهندگان دیگر همکاری کنید و کارهای خود را به اشتراک بگذارید. ممکن است مانند برخی دیگر جذاب نباشد ، اما رابط کاربری سریع و کاربردی باقی می ماند.
یک جامعه فعال از مشارکت کنندگان وجود دارد. به نظر می رسد اکثر آنها تظاهرات Angular را ارائه می دهند ، اما از الگوهای شروع کننده وانیل JS ، React و Preact نیز پشتیبانی می کند.
گزینه های دیگر
البته ، بسیاری از زمین های بازی کد دیگر از جمله قطعی، ESNextBin، JSitor، پخش زنده، دابلت و بیشتر. StackBlitz یک زمین بازی جدیدتر است که از توسعه جلویی پشتیبانی می کند اما همچنین به شما امکان می دهد با استفاده از Node.js ، Next.js و GraphQL با کد پشت سر آزمایش کنید.
نکته: برای امتحان StackBlitz ، کافیست “node.new” (بدون نقل قول) را در نوار آدرس مرورگر خود تایپ کنید.
دلتنگ مورد علاقه شما شدیم؟ درمورد آن به ما بگو!
برای گزینه های بیشتر که کد پشتیبان را به اشتراک می گذارند ، به جمع بندی زمین های بازی آنلاین کد پشتی جیمز هیبار بروید.
اگر ترجیح می دهید محیط توسعه آنلاین خود را میزبانی کنید ، بررسی کنید کد ICE و به آموزش “ویرایش کد در مرورگر با ICEcoder” از SitePoint مراجعه کنید.
اگر چیزی مشابه می خواهید اما ترجیح می دهید هنگام خراب کردن کد ، آنلاین نباشید ، بررسی کنید وب ساز و به آموزش “وب ساز ، آفلاین ، مرورگر مبتنی بر CodePen Alternative” از SitePoint مراجعه کنید.
کد نویسی مبارک!
