আপনি যদি একেবারেই ওয়েব কোডিংয়ে থাকেন, আপনি সম্ভবত আপনার সময়ে অন্তত একটি কোড খেলার মাঠ ব্যবহার করেছেন। এগুলি আপনার সাধারণ কোড সম্পাদক নয়, কিন্তু এমন জায়গা যেখানে আপনি ব্যাকএন্ড সার্ভার সেটআপ নিয়ে চিন্তা না করেই আপনার কোড পরীক্ষা করতে পারেন৷ কোডপেন এবং জেএসফিডল দুটি সর্বাধিক জনপ্রিয়, কিন্তু, সম্ভবত আশ্চর্যজনকভাবে (প্রদত্ত যে ওয়েব কোড খেলার মাঠের জন্য লক্ষ্য শ্রোতা হল এমন লোকেরা যাদের নিজেরাই কোড খেলার মাঠ তৈরি করার দক্ষতা রয়েছে), সেখানে অনেকগুলি রয়েছে বিকল্প।
আপনি যদি একটি দ্রুত এইচটিএমএল/সিএসএস/জাভাস্ক্রিপ্ট অ্যাপ তৈরি করতে চান এবং এটির সাথে খেলতে চান, তাহলে আপনি যে খেলার মাঠটি বেছে নিয়েছেন তা ব্যক্তিগত পছন্দের বিষয় হবে। আপনি যদি আরও বৈশিষ্ট্য চান, যদিও, রিয়েল-টাইম সহযোগী কোডিং, JS ফ্রেমওয়ার্কগুলিতে দ্রুত অ্যাক্সেস যেমন React বা Vue, ব্যাক-এন্ড সমর্থন বা এমনকি শুধুমাত্র একটি সক্রিয় সৃজনশীল সম্প্রদায়, আপনি কিছুটা কেনাকাটা করতে চাইতে পারেন।
কোডপেন
সম্ভবত সবচেয়ে জনপ্রিয় ফ্রন্ট-এন্ড কোড খেলার মাঠ হল CodePen, এবং সঙ্গত কারণে:এটি স্বজ্ঞাত এবং ব্যবহার করা সহজ, একটি বৃহৎ এবং প্রাণবন্ত সম্প্রদায় রয়েছে এবং এটি পৃষ্ঠাগুলিতে কার্যকরী ওয়েব কোড এম্বেড করার জন্য একটি স্বীকৃত মান হয়ে উঠেছে। এর দ্রুত স্বয়ংক্রিয়-আপডেট এবং নমনীয় দেখার উইন্ডোগুলি এটিকে CSS অ্যানিমেশন প্রকল্পগুলির মতো জিনিসগুলির জন্য বেশ জনপ্রিয় করে তোলে। এটিতে CSS/JS প্রিপ্রসেসর রয়েছে এবং সহজেই বহিরাগত স্ক্রিপ্টগুলির সাথে সংযোগ করতে পারে (প্রতিক্রিয়া, Vue, এবং CDNjs এর মাধ্যমে উপলব্ধ অন্য কিছু) এবং এমনকি অন্যান্য কলমও৷
সামগ্রিকভাবে, CodePen এর শীর্ষস্থানের যোগ্য, বিশেষ করে ফ্রন্ট-এন্ড প্রজেক্ট এবং পোর্টফোলিওর জন্য। যদিও এটি ব্যাক-এন্ডের জন্য তৈরি করা হয়নি, এবং এর কিছু বৈশিষ্ট্য যেমন সহযোগী কোডিং, একাধিক প্রকল্প (ব্যক্তিগত কলমের বিপরীতে), এবং লাইভ ফুল-পেজ ভিউ (লাইভ আংশিক-পৃষ্ঠা ভিউ বিনামূল্যে), এর জন্য একটি অর্থপ্রদানকারী পেশাদার প্রয়োজন। সদস্যতা।
JSFiddle
ফ্রন্ট-এন্ড কোড প্লেগ্রাউন্ড ওয়ার্ল্ডে দ্বিতীয় বেহালায় (যদিও কালানুক্রমিকভাবে এটি প্রাচীনতমগুলির মধ্যে একটি) JSFiddle। নামটি বোঝাতে পারে, এটি জাভাস্ক্রিপ্ট-ভিত্তিক, তাই এটি এইচটিএমএল/সিএসএস-এর ক্ষেত্রে আরও কম-অব-দ্য-বক্স JS বৈশিষ্ট্যগুলি অফার করে। (আক্ষরিকভাবে, এটি সাস-এর জন্য ডিফল্ট সমর্থন রয়েছে কিন্তু কম জন্য নয়।) এটি একটি বিশাল সমস্যা নয়, যদিও, সামান্য পরিশ্রমের মাধ্যমে আপনি আপনার প্রয়োজনীয় HTML/CSS/JS বৈশিষ্ট্যগুলি যোগ করতে পারেন এবং যেহেতু এটি কোড ইঙ্গিত এবং স্বয়ংক্রিয়ভাবে সমর্থন করে পুনরায় লোড করা হচ্ছে, সামগ্রিক কোডিং ক্ষমতার পরিপ্রেক্ষিতে এটি CodePen এর থেকে কিছুটা ভালোও হতে পারে৷
JSFiddle-এর পক্ষে একটি বড় বিষয় হল যে এটি বিনামূল্যে সহযোগিতা মোড (ভয়েস এবং টেক্সট চ্যাট সহ!) অফার করে, যা আপনাকে অন্য লোকেদের মতো একই সময়ে কোডে কাজ করার অনুমতি দেয়। এটির সত্যিই খুব বেশি সম্প্রদায়গত দিক নেই এবং আকর্ষণীয় প্রকল্পগুলি প্রদর্শন করে না, যদিও, তাই এটি সেই ফ্রন্টে কোডপেনের কাছে হেরে যায়৷
সামগ্রিকভাবে, আপনার যদি আরও JS সহ একটি প্রকল্প থাকে বা সহযোগিতামূলকভাবে কোড করার প্রয়োজন হয়, JSFiddle একটি দুর্দান্ত বিকল্প। যদিও এটি সম্পর্কে কিছু আপনাকে বিরক্ত করে, তবে নীচের "অন্যান্য খেলার মাঠ" তালিকায় অনেকগুলি একই রকম অনুভূতির বিকল্প রয়েছে৷
ত্রুটি
ঠিক আছে, তাই আপনি শুধু ফ্রন্ট-এন্ড স্টাফ নিয়ে খেলতে চাইছেন না:আপনার এমন কিছু দরকার যাতে আপনি একটি ফুল-স্ট্যাক ওয়েব অ্যাপ তৈরি করতে পারেন। অনেক কোড প্লেগ্রাউন্ড আপনাকে HTML/CSS/JS কোড আপ করতে এবং স্ট্যাটিক ওয়েব পেজ তৈরি করতে দেয়, কিন্তু Glitch আপনাকে কিছুটা স্টোরেজ স্পেস দেয়, প্রতি ঘন্টায় 4000 অনুরোধ করে এবং Node.js সার্ভার-সাইড কোড চালানো বেশ সহজ করে তোলে। $0.00 এর নিখুঁত দর কষাকষি মূল্যের জন্য, আপনার যত অভিজ্ঞতাই থাকুক না কেন, আপনি ছোট আকারের প্রকল্পগুলি তৈরি এবং তাৎক্ষণিকভাবে স্থাপন করার একটি উপায় পান৷
এটি অন্যান্য দুর্দান্ত বৈশিষ্ট্যগুলির একটি সম্পূর্ণ ভেলা সহ আসে:সহযোগী কোডিং, সংস্করণ নিয়ন্ত্রণ (যাকে "রিওয়াইন্ড" বলা হয়), প্রচুর শেখার সংস্থান, ভাল গিটহাব ইন্টিগ্রেশন, সহজ এম্বেড, একটি বন্ধুত্বপূর্ণ সম্প্রদায়, আপনি রিমিক্স করতে এবং খেলতে পারেন এমন অনেকগুলি প্রকল্প, এমনকি ভিজ্যুয়াল স্টুডিও ইন্টিগ্রেশন। এর ফ্রন্ট-এন্ড কোডিং ইন্টারফেস অন্যান্য খেলার মাঠের মতো মসৃণ নাও হতে পারে, তবে এর সামগ্রিক কার্যকারিতা ঠিক ততটাই ভাল। আপনি যদি একটি ওয়েব অ্যাপ চালু এবং চালানোর জন্য একটি দ্রুত এবং সহজ উপায় খুঁজছেন (অথবা আপনি কীভাবে শেখার চেষ্টা করছেন!), গ্লিচ একটি দুর্দান্ত প্রথম স্টপ৷
কোডস্যান্ডবক্স
কোডস্যান্ডবক্স গ্লিচের মতো একই বিভাগে তবে কিছুটা জটিল এবং সম্পূর্ণ বৈশিষ্ট্যযুক্ত। যেখানে গ্লিচ তার মোটামুটি শক্তিশালী কার্যকারিতার উপর একটি মোটামুটি ন্যূনতম ইন্টারফেস স্তর রাখে, কোডস্যান্ডবক্স VS কোডকে ক্ষমতা দেয় সেই একই মোনাকো সম্পাদক ব্যবহার করে সেই সমস্ত শক্তিকে উন্মুক্ত করে দেয়। যারা এই IDE-এর সাথে স্বাচ্ছন্দ্য বোধ করেন, তারা কোডস্যান্ডবক্সের সাথে বাড়িতেই ঠিক অনুভব করবেন৷
৷
এটি অত্যন্ত নমনীয় এবং কাস্টমাইজযোগ্য, ওপেন সোর্স, আপনাকে সম্পূর্ণ ওয়েব অ্যাপস স্থাপন করতে দেয় (যদিও গ্লিচের চেয়ে আরও কয়েকটি ধাপ সহ), আপনার ফাইলগুলি হোস্ট করে, একটি কমিউনিটি ভাইব রয়েছে এবং আপনার জন্য অনেকগুলি ব্যাকগ্রাউন্ড লেগওয়ার্ক করে, যা আপনাকে মুক্ত করে কোড লিখুন এবং আপনার অ্যাপ স্থাপন করুন। এটিতে গিটহাব এবং ভিএস কোড ইন্টিগ্রেশন, এমমেট (একটি সংক্ষিপ্ত রূপ প্রসারক) এবং আরও অনেক বৈশিষ্ট্য রয়েছে যা পাওয়ার ব্যবহারকারী এবং কম-অভিজ্ঞ কোডাররা একইভাবে প্রশংসা করবে। আপনি যদি শুধু এলোমেলো করে থাকেন তবে এটি সম্ভবত অতিমাত্রায়, কিন্তু যদি আপনার প্রজেক্টটি আর কোডপেনে ফিট না হয়, এবং আপনি শেখার বক্ররেখায় কিছুটা আপত্তি না করেন, কোডস্যান্ডবক্স দেখুন।
Repl.it
এই খেলার মাঠ/আইডিই শেষ নয় কারণ এটি আমার সর্বনিম্ন প্রিয় (এটি অবশ্যই নয়):এটির কারণ Repl.it এর নিজস্ব বিভাগ। এটি একটি টন সমর্থন করে Python থেকে LOLCODE পর্যন্ত (Lolcats-এর পছন্দের প্রোগ্রামিং ভাষা), ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড কোড সমর্থন রয়েছে, যা আপনাকে সাইট এবং অ্যাপ স্থাপন করতে দেয়, খুব শক্ত GitHub ইন্টিগ্রেশনের সাথে আসে, একটি বড় এবং খুব সক্রিয় বিকাশকারী সম্প্রদায় হোস্ট করে, এবং একটি স্বজ্ঞাত ইন্টারফেস রয়েছে যা বিশ্বাস করে যে এটি আসলে কতটা শক্তিশালী৷
৷
Repl.it-এর সমস্ত বৈশিষ্ট্য রয়েছে যা আপনি এই তালিকার অন্যান্য খেলার মাঠ থেকে আশা করতে এসেছেন, সহযোগী কোডিং থেকে এম্বেডিং পর্যন্ত, এবং যদিও এটি এখনও প্রাথমিকভাবে প্রোটোটাইপিং এবং কোড ভাগ করার জন্য একটি টুল, এটিতে স্পষ্টতই বেশিরভাগ ছোট-র জন্য যথেষ্ট রস রয়েছে মাঝারি আকারের প্রকল্প (যতক্ষণ আপনার একটি স্থির ইন্টারনেট সংযোগ থাকে)। আপনি যদি ফ্রন্ট-এন্ড ডিজাইন করেন বা আপনি যদি কোডে নতুন হন তবে এটি কিছুটা বেশি হতে পারে, তবে আপনি যদি নিয়মিত প্রোগ্রাম করেন তবে এটি অন্বেষণ করার মতো।
চেক আউট করার জন্য অন্যান্য খুব দুর্দান্ত খেলার মাঠ
উপরের খেলার মাঠগুলো আমার ব্যক্তিগত গো-টাস, কিন্তু আরও অনেক কিছু আছে। তারা সকলেই মৌলিক বিষয়গুলি করতে খুব সক্ষম, এবং প্রত্যেকেরই আলাদা প্রয়োজনের জন্য আবেদন করার জন্য নিজস্ব মোড় রয়েছে। JSFiddle তাদের অনেককে স্পষ্টভাবে অনুপ্রাণিত করেছে, তাই আপনি যদি সেই অ্যাপটির বিকল্প খুঁজছেন, তাহলে আপনি এটি এখানে খুঁজে পেতে পারেন।
- Liveweave:অনেকটা JSFiddle এর মত, কিন্তু আরো ডিজাইন-ভিত্তিক। এটি বিশেষ করে এর অন্তর্নির্মিত CSS, কালার জেনারেটর টুলস এবং এর ভেক্টর এডিটরের জন্য আলাদা।
- JSItor:একই রকম অনুভূতি সহ একটি JSFiddle বিকল্প এবং উল্লেখযোগ্যভাবে, Android/iOS অ্যাপ।
- StackBlitz:একটি চমৎকার ব্রাউজার-ভিত্তিক IDE মোনাকো এডিটর দিয়ে তৈরি যা VS কোডকে ক্ষমতা দেয়। এটি কিছুটা কোডস্যান্ডবক্সের মতো মনে হয় তবে এটি কিছুটা সহজ কারণ এতে ব্যাকএন্ড সমর্থন নেই৷
- ফ্লেম:বেয়ারবোনস, মিনিমালিস্ট খেলার মাঠ। আপনি যদি 0 ননসেন্স এবং/অথবা বিভ্রান্তি-মুক্ত কিছু চান তাহলে পারফেক্ট।
- JSBin:JSFiddle-এর আরও ন্যূনতম সংস্করণ।
- CSSDdeck:একটি খুব সাধারণ ফ্রন্ট-এন্ড খেলার মাঠ। আপনি যদি HTML/CSS এবং বেসিক JS-এ কিছু ধারণা পরীক্ষা করার জন্য একটি নো-ফ্রিলস উপায় চান, তাহলে এটি একটি চমৎকার পছন্দ।
- ICECoder:এটি একটি অনলাইন খেলার মাঠ যা অন্যান্য অনেকের সাথে তুলনীয় বৈশিষ্ট্য সহ, কিন্তু এর প্রধান আকর্ষণ হল এটি এছাড়াও একটি ডাউনলোডযোগ্য প্রোগ্রাম যা আপনার ব্রাউজারে চলে, মূলত এটিকে একটি অফলাইন ব্রাউজার-ভিত্তিক IDE তৈরি করে৷
- প্লাঙ্কার:একটি ফ্রন্ট-এন্ড টুল যা আপনাকে অন্য কিছু খেলার মাঠের চেয়ে একটু বেশি ফাইল নিয়ে খেলতে দেয় এবং এতে ভালো ডেস্কটপ/গিটহাব ইন্টিগ্রেশন রয়েছে।
- Scrimba:ঠিক আছে, এটি কঠোরভাবে একটি কোড খেলার মাঠ নয় - এটি একটি উদ্ভাবনী ভিডিও/কোড সম্পাদক সমন্বয়ের একটি সাইট যা আপনাকে একই সময়ে একটি শিক্ষার পরিবেশ এবং খেলার মাঠ দেয়। শিক্ষানবিশদের জন্য দেখার যোগ্য!
- ওয়েব মেকার:অফলাইন কার্যকারিতা এবং এমনকি কোডপেন ইন্টিগ্রেশন সহ ভাল ফ্রন্ট-এন্ড খেলার মাঠ!
- ড্যাবলেট:বেশ মৌলিক HTML/CSS/JS খেলার মাঠ কিন্তু চমৎকার ডিজাইন।
- প্লেকোড:একটি সুন্দর, মৌলিক HTML/CSS/JS খেলার মাঠ। সবচেয়ে বড় খারাপ দিক:একটি বিরক্তিকর বার্তা যা প্রতি 60 সেকেন্ডে পপ আপ হয় যা আপনাকে একটি প্রো প্ল্যানে আপগ্রেড করতে বলে৷
অনেক বেশি আছে! আমি কোনটি বেছে নেব?
হ্যাঁ, এক মিলিয়ন ওয়েব কোড খেলার মাঠ আছে, কিন্তু তাদের মধ্যে সিদ্ধান্ত নিতে এবং জিনিসগুলি তৈরি করার জন্য আপনি যে সময় ব্যয় করতে পারেন সেগুলিকে নষ্ট করতে দেবেন না! একটি অনলাইন কোডিং পরিবেশে আপনি যা খুঁজছেন সে সম্পর্কে আপনার যদি অর্ধেক-শালীন ধারণা থাকে, তবে এটিকে কেবলমাত্র দুটি বা তিনটি অ্যাপের মধ্যে সংকুচিত করুন যেগুলিতে সেই বৈশিষ্ট্যগুলি রয়েছে, তাদের প্রত্যেকটির সাথে কিছুটা কাজ করার চেষ্টা করুন এবং আপনি কোনটিকে খুঁজে পান তা দেখার চেষ্টা করুন অভিকর্ষের দিকে তাদের অনেকেরই গিটহাব ইন্টিগ্রেশন এবং/অথবা এক্সপোর্ট/আমদানি বৈশিষ্ট্য রয়েছে, তাই এটি এমন নয় যে আপনি চিরতরে একটি খারাপ সিদ্ধান্তে নিজেকে আটকে রেখেছেন।
আমি ব্যক্তিগতভাবে সাধারণ স্ট্যাটিক পৃষ্ঠাগুলির জন্য কোডপেন ব্যবহার করি এবং বড় প্রকল্পগুলির জন্য ডিজাইন পরীক্ষা এবং গ্লিচ ব্যবহার করি, যদিও আমি কোডস্যান্ডবক্সের ভিএস কোড ডিজাইন এবং Repl.it এর কনসোলের প্রশংসা করি। যদি আমি আপনার প্রিয় খেলার মাঠ মিস করি বা একটি দুর্দান্ত বৈশিষ্ট্য উল্লেখ করতে অবহেলা করি, নীচে মন্তব্য করুন যাতে অন্যরা এটি খুঁজে পেতে পারে!
