ওয়েব কোড প্লেগ্রাউন্ড টুলস যা আপনাকে চেষ্টা করা উচিত

যদি আপনি ওয়েব কোডিং-এ আগ্রহী হন, তাহলে আপনি সম্ভবত ইতিমধ্যে কমপক্ষে একটি কোড প্লেগ্রাউন্ড ব্যবহার করেছেন। এইগুলো আপনার সাধারণ কোড এডিটর নয়, বরং এমন জায়গা যেখানে আপনি ব্যাকএন্ড সার্ভার সেটআপ নিয়ে চিন্তা ছাড়াই আপনার কোড টেস্ট করতে পারেন। CodePen এবং JSFiddle—এই দুটি সবচেয়ে জনপ্রিয়, কিন্তু আশ্চর্য নয় (যেহেতু ওয়েব কোড প্লেগ্রাউন্ডের টার্গেট অডিয়েন্স হলো যারা নিজেদের প্লেগ্রাউন্ড বানাতে পারেন), অনেক অপশন আছে।

CodePen

ফ্রন্ট-এন্ড কোড প্লেগ্রাউন্ডের মধ্যে সবচেয়ে জনপ্রিয় হচ্ছে CodePen, এবং এর পেছনে যুক্তিসঙ্গত কারণ আছে: এটি אינ্টিউইটিভ এবং সহজে ব্যবহারযোগ্য, এর একটি বড় ও সক্রিয় কমিউনিটি আছে, এবং এটি কাজ কর रहे ওয়েব কোড পৃষ্ঠায় এম্বেড করার জন্য স্বীকৃত মানদণ্ড বেছে। এর দ্রুত অটো-আপডেট এবং ফ্লেক্সিবল ভিউইং উইন্ডো ইএসএস অ্যানিমেশন প্রজেক্টের মতো কাজের জন্য খুব জনপ্রিয় করে তোলে। এতে CSS/JS প্রিপ্রসেসর আছে এবং এটি সহজে এক্সটার্নাল স্ক্রিপ্ট (React, Vue, এবং CDNjs-এ উপলব্ধ যেকোনো কিছু) এবং এমনকি অন্যান্য পেনের সাথে সংযোগ করতে পারে।

সারাসরি, ফ্রন্ট-এন্ড প্রজেক্ট এবং পোর্টফোলিওর জন্য CodePen তার শীর্ষ স্থানার যোগ্য। তবে এটি ব্যাকএন্ডের জন্য তৈরি নয়, এবং এর কিছু ফিচার—যেমন কোলাবোরেটিভ কোডিং, একাধিক প্রজেক্ট (আদাল পেনের পরিবর্তে), এবং লাইভ ফুল-পেজ ভিউ (লাইভ পার্শিয়াল-পেজ ভিউ ফ্রি)—প্রো সাবস্ক্রিপশন কেনার প্রয়োজন।

JSFiddle

ফ্রন্ট-এন্ড কোড প্লেগ্রাউন্ড জগতের দ্বিতীয় বায়লিন (যদিও কালক্রমে এটি পুরনো একটি) হলো JSFiddle। নাম অনুযায়ী, এটি জাভাস্ক্রিপ্ট-ওরিয়েন্টেড, তাই এটি বাক্সের বাইরে আরও জেএস ফিচার দেয় এবং HTML/CSS-এ কম। (সরাসরি, এতে Sass-র জন্য ডিফল্ট সাপোর্ট আছে কিন্তু Less-র জন্য নয়।) এটা বড় সমস্যা নয়, কারণ একটু প্রচেষ্টায় আপনি যেকোনো HTML/CSS/JS ফিচার যোগ করতে পারেন, এবং যেহেতু এটি কোড হিন্টিং এবং অটো-রিলোডিং সাপোর্ট করে, সামগ্রিক কোডিং ক্ষমতার দৃষ্টিতে এটি CodePen-চেয়ে কতটুকু ভালো হতে পারে।

JSFiddle-এর বড় একটি প্লাস পয়েন্ট হলো এটি ফ্রিতে কোলাবোরেশন মোড দেয় (ভয়েস এবং টেক্সট চ্যাট সহ!), যা আপনাকে অন্যদের সাথে একসাথে কোড করতে দেয়। কিন্তু এর কমিউনিটি দিকটা নেই এবং রসপ্রদ প্রজেক্ট শোকেস করে না, সেজন্য সেখানে CodePen-কে হারিয়ে যায়।

মোটামুটি, যদি আপনার প্রজেক্টে বেশি জেএস থাকে বা কোলাবোরেটিভ কোডিং দরকার হয়, JSFiddle চমৎকার একটি অপশন। যদি এতে কিছুটা বাধা লাগে, তবে নিচের "অন্যান্য প্লেগ্রাউন্ড" তালিকায় অনেক সাদৃশ্যপূর্ণ অল্টারনেটিভ আছে।

Glitch

ঠিক আছে, আপনি শুধু ফ্রন্ট-এন্ড নিয়ে খেলছেন না: আপনাকে একটি ফুল-স্ট্যাক ওয়েব অ্যাপ বানাতে হবে। অনেক কোড প্লেগ্রাউন্ড শুধু HTML/CSS/JS কোড করতে দেয় এবং স্ট্যাটিক ওয়েব পেজ জেনারেট করে, কিন্তু Glitch আপনাকে কিছু স্টোরেজ স্পেস, ঘন্টায় ৪০০০ রিকোয়েস্ট, এবং Node.js সার্ভার-সাইড কোড রান করা খুব সহজ করে দেয়। সম্পূর্ণ ফ্রিয়ে, আপনি ছোট স্কেলের প্রজেক্ট বিল্ড এবং ইনস্ট্যান্টলি ডিপ্লয় করতে পারেন, আপনার অভিজ্ঞতা যেকোনো হোক।

এছাড়া এতে অন্যান্য অনেক চমৎকার ফিচার আছে: কোলাবোরেটিভ কোডিং, ভার্সন কন্ট্রোল (যাকে "Rewind" বলা হয়), প্রচুর লার্নিং রিসোর্স, ভালো GitHub ইন্টিগ্রেশন, সহজ এম্বেড, বান্ধব কমিউনিটি, রিমিক্স ও খেলার জন্য হাজার হাজার প্রজেক্ট, এবং এমনকি Visual Studio ইন্টিগ্রেশন। এর ফ্রন্ট-এন্ড কোডিং ইন্টারফেস অন্য প্লেগ্রাউন্ডের মতো স্লিক নাও হয়, কিন্তু সামগ্রিক ফাংশন্যালিটি তেমনই ভালো। যদি আপনি দ্রুত ও সহজে একটি ওয়েব অ্যাপ চালু করতে চান (বা শিখতে চান!), Glitch একটি চমৎকার প্রথম স্টপ।

CodeSandbox

CodeSandbox, Glitch-এর ক্যাটেগরিতে পড়ে কিন্তু কিছুটা বেশি কমপ্লেক্স এবং ফুল-ফিচার্ড। Glitch যেন একটি মিনিমালিস্টিক ইন্টারফেসের নিচে তার শক্তিশালী ফাংশন্যালিটি লুকিয়ে রাখে, CodeSandbox সেটি VS Code-কে চালানোর মোন্যাকো এডিটর ব্যবহার করে সব ক্ষমতা সরাসরি সামনে আনছে। যারা সেই IDE-এ কামফোর্টেবল, তারা CodeSandbox-এ ঘরোয়া মনে করবে।

এটি ব্যাপকভাবে ফ্লেক্সিবল এবং কাস্টোমাইজেবল, ওপেন সোর্স, আপনাকে ফুল ওয়েব অ্যাপ ডিপ্লয় করতে দেয় (যদিও Glitch-চেয়ে কিছুটা বেশি ধাপে), আপনার ফাইল হোস্ট করে, কমিউনিটি ভাইব আছে, এবং ব্যাকগ্রাউন্ডের অধিকাংশ কাজটি করে ফেলে, যাতে আপনি শুধু কোড লিখে অ্যাপ ডিপ্লয় করতে পারেন। এতে GitHub এবং VS Code ইন্টিগ্রেশন, Emmet (এব্রিভিয়েশন এক্সপ্যান্ডার), এবং অন্যান্য অনেক ফিচার আছে যা পাওয়ার ইউজার এবং কম অভিজ্ঞ কোডার দুজনই পছন্দ করবেন। যদি আপনি শুধু খেলাধুলা করছেন তবে এটি ওভারকিল, কিন্তু যদি আপনার প্রজেক্ট CodePen-এ ফিট না হয় এবং আপনি কিছুটা লার্নিং কার্ভ মেনে নিতে পারেন, তবে CodeSandbox চেক আউট করুন।

Repl.it

এই প্লেগ্রাউন্ড/আইডিই তালিকার শেষে নয় কারণ এটি আমার কম পছন্দ (নিশ্চয়ই নয়): বরং কারণ Repl.it নিজস্ব একটি ক্যাটেগরিতে আছে। এটি অল্প না, প্রচুর ল্যাঙ্গুয়েজ সাপোর্ট করে—Python থেকে LOLCODE (লোলক্যাটদের প্রিয় প্রোগ্রামিং ল্যাঙ্গুয়েজ) পর্যন্ত। এতে ফ্রন্ট-এন্ড ও ব্যাকএন্ড কোড সাপোর্ট আছে, সাইট ও অ্যাপ ডিপ্লয় করতে দেয়, খুব টাইট GitHub ইন্টিগ্রেশন আছে, বড় ও খুব সক্রিয় ডেভেলপার কমিউনিটি আছে, এবং একটি אינ্টিউইটিভ ইন্টারফেস আছে যা এর আসল শক্তি লুকিয়ে রাখে।

Repl.it-এ অন্যান্য প্লেগ্রাউন্ডের সব ফিচার আছে—কোলাবোরেটিভ কোডিং থেকে এম্বেডিং পর্যন্ত। এটি প্রধানত প্রোটোটাইপিং ও কোড শেয়ার করার টুল, কিন্তু এর জুস তেমনই আছে যাতে অধিকাংশ ছোট থেকে মাঝারি আকারের প্রজেক্ট হ্যান্ডেল করা যায় (যদি আপনার কাছে স্টেডি ইন্টারনেট থাকে)। যদি আপনি শুধু ফ্রন্ট-এন্ড ডিজাইন করেন বা কোডিং-এ নতুন হন তবে এটি কিছুটা ভারী লাগতে পারে, কিন্তু যদি আপনি নিয়মিত প্রোগ্রামিং করেন, তবে এটি এক্সপ্লোর করার যোগ্য।

চেক আউট করার লायक অন্যান্য অসাধারণ প্লেগ্রাউন্ডগুলো

উপরোক্ত প্লেগ্রাউন্ডগুলো আমার পারসোনাল গো-টু, কিন্তু আরও অনেক আছে। সবই বেসিক কাজের জন্য খুব ক্যাপেবল, এবং প্রতিটির اپন সুইট স্পট আছে যা আলাদা চাহিদা পূরণ করে। JSFiddle স্পষ্টভাবে অন্যান্যকে অনুপ্রাণিত করেছে, তাই আপনি যদি তার অল্টারনেটিভ খুঁজেন, তবে এখানে পাবেন।

• Liveweave: JSFiddle-এর মতো, কিন্তু ডিজাইন-ওরিয়েন্টেড। এর বিল্ট-ইন CSS, কালার জেনারেটর টুল এবং ভেক্টর এডিটর খুব 눈에 띄ে।
• JSItor: খুব সাদৃশ্যপূর্ণ ফিলের JSFiddle অল্টারনেটিভ, أند্রয়েড/আইওএস অ্যাপসহ।
• StackBlitz: ব্রাউজার-বেসড চমৎকার IDE, VS Code-কে চালানোর মোন্যাকো এডিটর দিয়ে বানানো। CodeSandbox-এর মতো কিন্তু ব্যাকএন্ড সাপোর্ট না থাকায় কিছুটা সিম্পল।
• Flems: বেয়ারবোন, মিনিমালিস্ট প্লেগ্রাউন্ড। পরিপাটি ঝামেলা বা ডিস্ট্রাকশন-ফ্রি চাইলে পারফেক্ট।
• JSBin: JSFiddle-এর আরও মিনিমাল ভার্সন।
• CSSDeck: খুব সিম্পল ফ্রন্ট-এন্ড প্লেগ্রাউন্ড। HTML/CSS এবং বেসিক JS-এ কিছু আইডিয়া টেস্ট করতে চাইলে ভালো চয়েস।
• ICECoder: অনলাইন প্লেগ্রাউন্ড যার ফিচার অন্যদের মতো, কিন্তু এর মুখ্য আকর্ষণ হলো এটি ডাউনলোডযোগ্য প্রোগ্রামও যা ব্রাউজারে চলে, এভাবে এটি অফলাইন ব্রাউজার-বেসড IDE বান যায়।
• Plunker: ফ্রন্ট-এন্ড টুল যা আপনাকে অন্যদের চেয়ে বেশি ফাইল নিয়ে খেলতে দেয় এবং ভালো ডেস্কটপ/গিটহাব ইন্টিগ্রেশন আছে।
• Scrimba: এটি স্ট্রিক্টলি কোড প্লেগ্রাউন্ড নয়—এটি একটি ইনোভেটিভ ভিডিও/কোড এডিটর কম্বিনেশন যা লার্নিং এনভায়রনমেন্ট এবং প্লেগ্রাউন্ড একসাথে দেয়। লার্নারদের জন্য একটি লুক!
• Web Maker: অফলাইন ফাংশন্যালিটি এবং এমনকি CodePen ইন্টিগ্রেশনসহ ভালো ফ্রন্ট-এন্ড প্লেগ্রাউন্ড।
• Dabblet: khá বেসিক HTML/CSS/JS প্লেগ্রাউন্ড কিন্তু ডিজাইন সুন্দর।
• PlayCode: সাদা, বেসিক HTML/CSS/JS প্লেগ্রাউন্ড। বড় ডাউনসাইড: প্রতি ৬০ সেকেন্ডে প্রো প্ল্যানে আপগ্রেড করার জন্য надоয়ান মেসেজ পপ আপ করে।

খুব অনেক! কোনটা বাছাই করব?

হ্যাঁ, ওয়েব কোড প্লেগ্রাউন্ড লাখ লাখ, কিন্তু সেগুলোর মধ্যে বাছাই করতে গিয়ে সময় নষ্ট করবেন না যাতে আসল কাজের জন্য সময় পাওয়া যায়! আপনার যদি অনলাইন কোডিং এনভায়রনমেন্টে কী চাইছেন সেটা নিয়ে ধुँধলা ধারণা থাকে, তবে সেরকম ফিচার वाले দুই-তিন অ্যাপ বাছাই করুন, প্রতিটির সাথে কিছুক্ষণ কাজ করে দেখুন, এবং কোনটার দিকে আপনি স্বাভাবিকভাবেই খিচিয়ে যাচ্ছেন সেটা বুঝুন। যাইহোক, অনেকগুলোর GitHub ইন্টিগ্রেশন বা এক্সপোর্ট/ইম্পোর্ট ফিচার আছে, তাই আপনি যেন বッド ডিসিশনে আজীবন বন্ধی থাকবেন সেটা নয়।

আমি পারসোনালি সিম্পল স্ট্যাটিক পেজ ও ডিজাইন এক্সপেরিমেন্টের জন্য CodePen এবং বড় প্রজেক্টের জন্য Glitch ব্যবহার করি, যদিও CodeSandbox-এর VS Code ডিজাইন এবং Repl.it-এর কনসোলও আমার পছন্দ। আপনার ফেভারিট প্লেগ্রাউন্ড বা কোনো অসাধারণ ফিচার আমি মিস করলে, নিচে কমেন্ট করুন যাতে অন্যদেরও জানতে পারেন!