वेब कोड प्लेग्राउंड टूल्स जिन्हें आपको आजमाना चाहिए

यदि आप वेब कोडिंग में बिल्कुल भी हैं, तो संभवतः आपने अपने समय में कम से कम एक कोड खेल के मैदान का उपयोग किया है। ये आपके सामान्य कोड संपादक नहीं हैं, लेकिन ऐसे स्थान हैं जहां आप बैकएंड सर्वर सेटअप की चिंता किए बिना अपने कोड का परीक्षण कर सकते हैं। कोडपेन और जेएसएफडल दो सबसे लोकप्रिय हैं, लेकिन, शायद आश्चर्यजनक रूप से (यह देखते हुए कि वेब कोड खेल के मैदानों के लिए लक्षित दर्शक वे लोग हैं जिनके पास कोड खेल के मैदान बनाने का कौशल है), कई हैं विकल्प।

यदि आप बस एक त्वरित HTML/CSS/JavaScript ऐप को व्हिप करना चाहते हैं और इसके साथ खेलना चाहते हैं, तो आपके द्वारा चुना गया खेल का मैदान काफी हद तक व्यक्तिगत पसंद का मामला होगा। यदि आप अधिक सुविधाएँ चाहते हैं, हालांकि, रीयल-टाइम सहयोगी कोडिंग, JS फ्रेमवर्क जैसे रिएक्ट या Vue, बैक-एंड समर्थन, या यहां तक ​​कि केवल एक सक्रिय रचनात्मक समुदाय तक त्वरित पहुँच, तो आप थोड़ी खरीदारी करना चाह सकते हैं।

कोडपेन

संभवत:सबसे लोकप्रिय फ्रंट-एंड कोड खेल का मैदान कोडपेन है, और अच्छे कारण के लिए:यह सहज और उपयोग में आसान है, इसमें एक बड़ा और जीवंत समुदाय है, और कामकाजी वेब कोड को पृष्ठों में एम्बेड करने के लिए एक स्वीकृत मानक बन गया है। इसके त्वरित ऑटो-अपडेट और लचीली देखने वाली खिड़कियां इसे सीएसएस एनीमेशन परियोजनाओं जैसी चीजों के लिए काफी लोकप्रिय बनाती हैं। इसमें CSS/JS प्रीप्रोसेसर हैं और बाहरी स्क्रिप्ट (React, Vue, और CDNjs के माध्यम से उपलब्ध कुछ भी) और यहां तक ​​कि अन्य पेन से आसानी से जुड़ सकते हैं।

कुल मिलाकर, कोडपेन अपने शीर्ष स्थान का हकदार है, विशेष रूप से फ्रंट-एंड प्रोजेक्ट्स और पोर्टफोलियो के लिए। यह बैक-एंड के लिए नहीं बनाया गया है, हालांकि, और इसकी कुछ विशेषताएं, जैसे सहयोगी कोडिंग, एकाधिक प्रोजेक्ट (व्यक्तिगत पेन के विपरीत), और लाइव पूर्ण-पृष्ठ दृश्य (लाइव आंशिक-पृष्ठ दृश्य निःशुल्क हैं), एक भुगतान पेशेवर की आवश्यकता होती है सदस्यता।

JSFiddle

दूसरे वायलिन पर (हालांकि कालानुक्रमिक रूप से यह सबसे पुराने में से एक है) फ्रंट-एंड कोड खेल के मैदान में JSFiddle है। जैसा कि नाम का अर्थ हो सकता है, यह जावास्क्रिप्ट-उन्मुख है, इसलिए यह अधिक आउट-ऑफ-द-बॉक्स JS सुविधाएँ प्रदान करता है और HTML / CSS के रूप में कम। (शाब्दिक रूप से, इसमें Sass के लिए डिफ़ॉल्ट समर्थन है, लेकिन कम के लिए नहीं।) यह एक बहुत बड़ा मुद्दा नहीं है, हालांकि, एक छोटे से काम के साथ आप जो भी HTML/CSS/JS सुविधाओं की आवश्यकता है उसे जोड़ सकते हैं, और चूंकि यह कोड संकेत और ऑटो- फिर से लोड करना, समग्र कोडिंग क्षमताओं के मामले में यह कोडपेन से थोड़ा बेहतर भी हो सकता है।

JSFiddle के पक्ष में एक बड़ी बात यह है कि यह सहयोग मोड (वॉयस और टेक्स्ट चैट सहित!) मुफ्त में प्रदान करता है, जिससे आप अन्य लोगों की तरह ही कोड पर भी काम कर सकते हैं। इसका वास्तव में कोई सामुदायिक पहलू नहीं है और यह दिलचस्प परियोजनाओं को प्रदर्शित नहीं करता है, हालांकि, यह उस मोर्चे पर कोडपेन से हार जाता है।

कुल मिलाकर, यदि आपके पास अधिक JS वाला प्रोजेक्ट है या सहयोगात्मक रूप से कोड करने की आवश्यकता है, तो JSFiddle एक बढ़िया विकल्प है। अगर इसके बारे में कुछ आपको परेशान करता है, हालांकि, नीचे "अन्य खेल के मैदानों" सूची में कई समान-भावना वाले विकल्प हैं।

गड़बड़

ठीक है, इसलिए आप केवल फ्रंट-एंड सामान के साथ खेलना नहीं चाह रहे हैं:आपको कुछ ऐसा चाहिए जिस पर आप एक पूर्ण-स्टैक वेब ऐप बना सकें। कई कोड खेल के मैदान आपको HTML/CSS/JS को कोड करने और स्थिर वेब पेज बनाने की सुविधा देते हैं, लेकिन Glitch आपको थोड़ा सा संग्रहण स्थान देता है, एक घंटे में 4000 अनुरोध करता है, और Node.js सर्वर-साइड कोड को चलाना बहुत आसान बनाता है। $0.00 की पूर्ण सौदेबाजी कीमत के लिए, आपको छोटे पैमाने के प्रोजेक्ट बनाने और तुरंत लागू करने का एक तरीका मिलता है, भले ही आपके पास कितना भी अनुभव हो।

यह अन्य महान सुविधाओं की एक पूरी बेड़ा के साथ आता है:सहयोगी कोडिंग, संस्करण नियंत्रण ("रिवाइंड" कहा जाता है), बहुत सारे सीखने के संसाधन, अच्छा गिटहब एकीकरण, आसान एम्बेड, एक दोस्ताना समुदाय, कई परियोजनाएं जिन्हें आप रीमिक्स कर सकते हैं और साथ खेल सकते हैं, और यहां तक ​​​​कि विजुअल स्टूडियो एकीकरण भी। इसका फ्रंट-एंड कोडिंग इंटरफ़ेस कुछ अन्य खेल के मैदानों की तरह चिकना नहीं हो सकता है, लेकिन इसकी समग्र कार्यक्षमता उतनी ही अच्छी है। यदि आप वेब ऐप को चलाने और चलाने के लिए एक त्वरित और आसान तरीका ढूंढ रहे हैं (या आप यह जानने की कोशिश कर रहे हैं कि कैसे!), ग्लिच एक बेहतरीन पहला पड़ाव है।

कोडसैंडबॉक्स

कोडसैंडबॉक्स ग्लिच के समान श्रेणी में है लेकिन थोड़ा अधिक जटिल और पूर्ण विशेषताओं वाला है। जहां ग्लिच अपनी काफी शक्तिशाली कार्यक्षमता पर काफी सरल इंटरफ़ेस रखता है, कोडसैंडबॉक्स उसी मोनाको संपादक का उपयोग करके उस सारी शक्ति को खुले में रखता है जो वीएस कोड को शक्ति देता है। इसलिए, जो लोग उस आईडीई के साथ सहज महसूस करते हैं, वे कोडसैंडबॉक्स के साथ घर जैसा महसूस करेंगे।

यह बेहद लचीला और अनुकूलन योग्य, खुला स्रोत है, जिससे आप पूर्ण वेब ऐप्स (यद्यपि ग्लिच की तुलना में कुछ और चरणों के साथ) को तैनात कर सकते हैं, आपकी फ़ाइलों को होस्ट करता है, एक सामुदायिक खिंचाव है, और आपके लिए बहुत सी पृष्ठभूमि लेगवर्क करता है, आपको बस तक मुक्त करता है कोड लिखें और अपना ऐप परिनियोजित करें। इसमें गिटहब और वीएस कोड एकीकरण, एम्मेट (एक संक्षिप्त नाम विस्तारक), और अन्य सुविधाओं का एक टन है जो बिजली उपयोगकर्ताओं और कम-अनुभवी कोडर्स समान रूप से सराहना करेंगे। यदि आप बस गड़बड़ कर रहे हैं, तो यह शायद अधिक है, लेकिन यदि आपका प्रोजेक्ट अब कोडपेन में फिट नहीं होता है, और आपको सीखने की अवस्था में थोड़ा सा भी फर्क नहीं पड़ता है, तो कोडसैंडबॉक्स देखें।

Repl.it

यह खेल का मैदान/आईडीई अंत में नहीं है क्योंकि यह मेरा सबसे कम पसंदीदा है (यह निश्चित रूप से नहीं है):ऐसा इसलिए है क्योंकि Repl.it अपनी श्रेणी में है। यह एक टन . का समर्थन करता है भाषाओं की, पायथन से LOLCODE (Lolcats की पसंदीदा प्रोग्रामिंग भाषा), में फ्रंट-एंड और बैक-एंड कोड समर्थन है, जिससे आप साइटों और ऐप्स को तैनात कर सकते हैं, बहुत सख्त GitHub एकीकरण के साथ आता है, एक बड़े और बहुत सक्रिय डेवलपर समुदाय को होस्ट करता है, और इसका एक सहज ज्ञान युक्त इंटरफ़ेस है जो विश्वास करता है कि यह वास्तव में कितना शक्तिशाली है।

Repl.it में वे सभी सुविधाएँ हैं जिनकी आप इस सूची के अन्य खेल के मैदानों से अपेक्षा करते हैं, सहयोगी कोडिंग से लेकर एम्बेडिंग तक, और जबकि यह अभी भी मुख्य रूप से कोड को प्रोटोटाइप करने और साझा करने के लिए एक उपकरण है, इसमें निश्चित रूप से अधिकांश छोटे के लिए पर्याप्त रस है- मध्यम आकार की परियोजनाएं (जब तक आपके पास एक स्थिर इंटरनेट कनेक्शन है)। यह थोड़ा अधिक हो सकता है यदि आप केवल फ्रंट-एंड डिज़ाइन कर रहे हैं या यदि आप कोड के लिए नए हैं, लेकिन यदि आप नियमित रूप से प्रोग्राम करते हैं, तो यह देखने लायक है।

देखने के लिए अन्य बहुत बढ़िया खेल के मैदान

ऊपर के खेल के मैदान मेरे निजी काम हैं, लेकिन और भी बहुत कुछ हैं। वे सभी मूल बातें करने में बहुत सक्षम हैं, और एक अलग जरूरत के लिए अपील करने के लिए प्रत्येक का अपना मोड़ है। JSFiddle ने उनमें से कई को स्पष्ट रूप से प्रेरित किया है, इसलिए यदि आप उस ऐप के विकल्प की तलाश कर रहे हैं, तो आप इसे यहां पा सकते हैं।

• Liveweave:JSFiddle की तरह, लेकिन अधिक डिज़ाइन-उन्मुख। यह विशेष रूप से अपने बिल्ट-इन CSS, कलर जेनरेटर टूल्स और इसके वेक्टर एडिटर के लिए विशिष्ट है।
• JSItor:एक समान अनुभव वाला JSFiddle विकल्प और, विशेष रूप से, Android/iOS ऐप्स।
• StackBlitz:मोनाको संपादक के साथ निर्मित एक उत्कृष्ट ब्राउज़र-आधारित आईडीई जो वीएस कोड को शक्ति प्रदान करता है। यह थोड़ा कोडसैंडबॉक्स जैसा लगता है लेकिन थोड़ा आसान है क्योंकि इसमें बैकएंड सपोर्ट की कमी है।
• फ्लेम्स:नंगे हड्डियाँ, न्यूनतम खेल का मैदान। बिल्कुल सही अगर आप 0 बकवास और/या व्याकुलता मुक्त कुछ चाहते हैं।
• JSBin:JSFiddle का अधिक न्यूनतम संस्करण।
• CSSDeck:एक बहुत ही सरल फ्रंट-एंड खेल का मैदान। यदि आप HTML/CSS और बुनियादी JS में कुछ विचारों का परीक्षण करने के लिए बिना किसी तामझाम के तरीका चाहते हैं, तो यह एक अच्छा विकल्प है।
• ICECoder:यह एक ऑनलाइन खेल का मैदान है जिसमें कई अन्य सुविधाओं की तुलना में सुविधाएं हैं, लेकिन इसका मुख्य आकर्षण यह है कि यह भी है एक डाउनलोड करने योग्य प्रोग्राम जो आपके ब्राउज़र में चलता है, अनिवार्य रूप से इसे एक ऑफ़लाइन ब्राउज़र-आधारित आईडीई बनाता है।
• प्लंकर:एक फ्रंट-एंड टूल जो आपको कुछ अन्य खेल के मैदानों की तुलना में फ़ाइलों के साथ थोड़ा अधिक खेलने देता है और इसमें अच्छे डेस्कटॉप/GitHub एकीकरण हैं।
• स्क्रिंबा:ठीक है, यह एक कोड खेल का मैदान नहीं है - यह एक अभिनव वीडियो / कोड संपादक संयोजन वाली साइट है जो आपको एक ही समय में सीखने का माहौल और खेल का मैदान प्रदान करती है। शिक्षार्थियों के लिए देखने लायक!
• वेब मेकर:ऑफलाइन कार्यक्षमता और यहां तक ​​कि कोडपेन एकीकरण के साथ अच्छा फ्रंट-एंड खेल का मैदान!
• डबलेट:बहुत ही बुनियादी HTML/CSS/JS खेल का मैदान लेकिन अच्छा डिज़ाइन।
• PlayCode:एक अच्छा, बुनियादी HTML/CSS/JS खेल का मैदान। सबसे बड़ी कमी:एक कष्टप्रद संदेश जो हर 60 सेकंड में आपको एक प्रो प्लान में अपग्रेड करने के लिए कहता है।

बहुत अधिक हैं! मैं किसे चुनूं?

हां, एक लाख वेब कोड खेल के मैदान हैं, लेकिन उनके बीच निर्णय लेने से न चूकें और उस समय को चूसें जो आप वास्तव में चीजों को बनाने में खर्च कर सकते हैं! यदि आपके पास ऑनलाइन कोडिंग वातावरण में आप जो खोज रहे हैं, उसके बारे में आधा-सभ्य विचार है, तो बस इसे दो या तीन ऐप्स तक सीमित कर दें, जिनमें वे विशेषताएं हैं, उनमें से प्रत्येक के साथ थोड़ा काम करने का प्रयास करें और देखें कि आप स्वयं को कौन सा ढूंढते हैं की ओर आकर्षित हो रहा है। उनमें से बहुतों में वैसे भी GitHub एकीकरण और/या निर्यात/आयात सुविधाएँ हैं, इसलिए ऐसा नहीं है कि आप अपने आप को हमेशा के लिए एक बुरे निर्णय में बंद कर रहे हैं।

मैं व्यक्तिगत रूप से सरल स्थिर पृष्ठों और डिज़ाइन प्रयोगों के लिए कोडपेन का उपयोग करता हूं और बड़ी परियोजनाओं के लिए ग्लिच का उपयोग करता हूं, हालांकि मैं कोडसैंडबॉक्स के वीएस कोड डिज़ाइन और Repl.it के कंसोल की सराहना करता हूं। अगर मैं आपके पसंदीदा खेल के मैदान से चूक गया या एक भयानक विशेषता का उल्लेख करने की उपेक्षा की, तो नीचे टिप्पणी करें ताकि अन्य लोग इसे ढूंढ सकें!