एक जटिल परियोजना मा काम गर्दै, चाहे तपाईं एक अनुभवी प्रोग्रामर हो वा एक नयाँ व्यक्ति, तपाईं लगभग सम्भवतः समस्याहरु मा चल्नुहुनेछ। जब तपाइँ तपाइँको परियोजनालाई धेरै मोड्युलहरूमा विभाजित गर्नुहुन्छ, समस्याहरू उत्पन्न हुन्छन्, त्रुटिहरू ट्र्याक गर्न र समाधानहरू खोज्न अझ गाह्रो बनाउँछ। अन्य परिस्थितिहरूमा, व्यक्तिगत उदाहरणहरू डिबग गर्न गाह्रो हुन सक्छ किनभने तपाईंले काम गरिरहनुभएको समस्याको उचित समाधान पत्ता लगाउनु भएको छैन।
यो अवसरमा कोडको टुक्राको रूपमा पनि हुन्छ, जुन समयमा जटिल देखिन सक्छ। JavaScript वेब-आधारित भाषाहरू मध्ये एक हो जुन सिक्न एकदमै सरल छ। केवल आफ्नो डेस्कटप ब्राउजर सुरु गर्नुहोस् र विकासकर्ता उपकरणहरू (सामान्यतया F12) मा नेभिगेट गर्नुहोस्, र तपाईंको काम सकियो! त्यसपछि तपाइँ कुनै पनि जटिल सफ्टवेयर स्थापना वा चलाउन आवश्यक बिना JS को साथ प्रयोग गर्न सक्नुहुन्छ।
सुरु गर्नको लागि, तपाईलाई चाहिने सबै ब्राउजर हो। यो सबै सादगीको बाकस बाहिर पाउनु अचम्मको छ, तर त्यहाँ अवसरहरू छन् जब तपाईंलाई थप आवश्यक पर्दछ। उदाहरणका लागि, मान्नुहोस् कि तपाईंले भर्खरै पत्ता लगाएको नयाँ वेब API प्रयोग गर्न चाहनुहुन्छ तर नयाँ परियोजना सुरु गर्न चाहनुहुन्न।
यस पोष्टमा, हामी तीन सबैभन्दा लोकप्रिय JS खेल मैदानहरू, CodePen, CodeSandbox, र StackBlitz को तुलना र विपरित गर्नेछौं। सुरु गरौं!
CodePen
फ्रन्टएन्ड वेब विकास उपकरणहरू सधैं विकसित भइरहेका छन्, र पाठ सम्पादकहरू नवीनतम प्रविधिहरूको ठूलो भाग हुन् जसले विकासकर्ताको जीवनलाई सरल बनाउँछ। एटम वा नोटप्याड ++ जस्ता स्ट्यान्ड-अलोन टेक्स्ट सम्पादकहरू बाहेक, हालका वर्षहरूमा ब्राउजर-आधारित सम्पादकहरूको विस्फोट भएको छ जसलाई प्रोग्राम स्थापनाको आवश्यकता पर्दैन र ठूलो सहयोगलाई बढावा दिन्छ।
CodePen एक "प्रयोगकर्ताद्वारा निर्मित HTML, CSS, र JavaScript कोड स्निपेटहरू परीक्षण गर्न र प्रस्तुत गर्नको लागि अनलाइन समुदाय हो" जसले फ्रन्टएन्ड वेब पृष्ठहरू राम्रोसँग कसरी लेख्ने भनेर सिक्नको लागि उत्कृष्ट अवसरहरू प्रदान गर्दछ।
CodePen ले तपाईंलाई दुई "मोडहरू" दिन्छ। पहिलो र सबै भन्दा साधारण प्रयोग कलम हो। यो एक बटन क्लिक गर्न र सम्पादकमा दायाँ ढुवानी गरिनु जस्तै सरल छ। त्यहाँबाट, तपाइँ पूर्वावलोकन प्यानलका साथै आधारभूत HTML, CSS, र JS सम्पादन विन्डोहरू पहुँच गर्न सक्नुहुन्छ।
त्यहाँ कुनै "फाइल प्रणाली," "IntelliSense," वा अन्य केहि छैन - केवल सरल वाक्य रचना हाइलाइटिङ र prettify जस्तै छिटो आदेशहरू। विकल्प ट्याबमा, तपाईंले तीनवटै भाषाहरू (जस्तै JS का लागि टाइपस्क्रिप्ट)का लागि प्रिप्रोसेसरहरूको प्रतिबन्धित दायराबाट चयन गर्न सक्नुहुन्छ वा बाह्य स्रोतहरूमा जडानहरू थप्न सक्नुहुन्छ।
यदि तपाईंलाई सित्तैमा केहि गर्न आवश्यक छ भने, सम्पादकहरू मध्ये कुनै एक पर्याप्त हुनेछ। म कुनै पनि कुराको लागि CodePen सुझाव दिन्छु जसलाई धेरै सेटअप वा पुस्तकालयहरू आवश्यक पर्दैन - केवल HTML, CSS, र JS माथि वैकल्पिक पूर्व-प्रोसेसरहरू सहित। यदि तपाइँ तपाइँको सामाजिक मिडिया उपस्थिति सुधार गर्न वा व्यक्तिगत पोर्टफोलियो विकास गर्न खेल मैदान को उपयोग गर्न चाहनुहुन्छ भने, CodePen एक राम्रो विकल्प हो।
प्रीमियम संस्करण
तपाईंसँग CodePen मा चयन गर्न केही थप विकल्पहरू छन्। यदि तपाइँ वार्षिक रूपमा भुक्तानी गर्नुहुन्छ भने, तपाइँ प्रत्येक महिना $ 12, $ 19, वा $ 39 को लागी तीन प्रिमियम योजनाहरु मध्ये एक प्राप्त गर्न सक्नुहुन्छ। तपाईले असीमित संख्यामा निजी कलमहरू, पोस्टहरू, र तीन तहहरू मध्ये कुनै पनि सङ्कलनहरू सिर्जना गर्न सक्नुहुन्छ।
तपाईंले प्रो ब्याज (सामाजिक प्रवर्द्धन), प्रत्यक्ष सहयोग मोड पहुँच, कुनै विज्ञापन, र थप कुराहरू पनि प्राप्त गर्नुहुनेछ। त्यहाँ निश्चित टोली-विशिष्ट रणनीतिहरू र अन्य क्रस-टियर भेदहरू पनि छन्। थप जानकारीको लागि तिनीहरूको आधिकारिक बिलिङ बोर्ड हेर्नुहोस्।
प्रमुख विशेषताहरु
CodePen मा HTML, CSS, र JavaScript सिर्जना गर्नु बाहेक, त्यहाँ केहि थप चीजहरू छन् जसले यसलाई अलग गर्दछ।
- तपाईंको कोडको वास्तविक-समय अवलोकन सम्भव छ। यसलाई संकलन आवश्यक छैन।
- प्रयोगले तपाईंलाई नयाँ कुराहरू सिक्न अनुमति दिन्छ।
- समस्याहरू खोज्न र सम्बोधन गर्नको लागि सानो परीक्षण केसहरू सिर्जना गर्नुहोस्।
- आफ्नो अद्भुत कामहरू प्रदर्शन गर्नुहोस्।
- पछि प्रयोगको लागि कलमहरू सिर्जना गर्नुहोस् र भण्डार गर्नुहोस्।
- अन्य विकासकर्ताहरूको कोड प्रयास गर्नुहोस् र यसलाई कार्यमा हेर्नुहोस्।
फाइदा
- सुरु गर्न, कुनै लागत छैन।
- निर्मित सिकाइ स्रोतहरू।
- अरूसँग सहकार्य गर्नुहोस् र तिनीहरू भविष्यमा कहाँ जान सक्छन् भनेर हेर्नको लागि परियोजनाहरू तुलना गर्नुहोस्।
- UI प्रयोग गर्न सरल र सीधा छ।
बेफाइदा
- कोड लाइब्रेरी सानो छ, स्वत: कोड पूर्णता अपर्याप्त छ। यो केवल एक-पृष्ठ परियोजनाहरूको लागि राम्रो छ र केहि ठूलो ह्यान्डल गर्न सक्दैन।
- CodePen मा, तपाईंले निजी कलमहरू सिर्जना गर्न सक्नुहुन्छ, तर तपाईंले प्रो सदस्यता ($ 9/महिना) मा स्तरवृद्धि गर्न आवश्यक छ।
कोडस्यान्डबक्स
CodeSandbox वेब-आधारित कोड सम्पादक हो। यसले तपाईंको लागि ट्रान्सपिरिङ, प्याकेजिङ्ग, र निर्भरता व्यवस्थापनलाई स्वचालित बनाउँछ, तपाईंलाई एक क्लिकमा नयाँ परियोजना निर्माण गर्न अनुमति दिँदै। तपाईंले मनमोहक कुरा सिर्जना गरिसकेपछि, तपाईंले वेबसाइट साझेदारी गरेर अरूसँग साझेदारी गर्न सक्नुहुन्छ।
सम्पादक कुनै पनि JavaScript परियोजनाहरूसँग उपयुक्त छ, यद्यपि यसले केही प्रतिक्रिया-विशेष सुविधाहरू समावेश गर्दछ, जस्तै निर्माण-प्रतिक्रिया-एप टेम्प्लेटमा परियोजना बचत गर्ने विकल्प।
तपाईंले CodeSandbox मा निर्माण गर्ने कुनै पनि परियोजना टेम्प्लेटबाट सुरु हुन्छ। यो या त एक विशिष्ट पुस्तकालय, फ्रेमवर्क, वा रनटाइम (Node.js सहित) सँग सम्बन्धित हुन सक्छ वा केवल मानक वेब प्रविधिहरू प्रयोग गर्न सक्छ। टेम्प्लेट चयन गरेपछि, तपाईंलाई सम्पादकमा पठाइन्छ, जहाँ तपाईंले सबै आवश्यक फाइलहरू फेला पार्नुहुनेछ र पूर्वावलोकन विन्डो पहिले नै खुला छ।
तपाईंसँग सबै स्यान्डबक्सहरूमा "फाइल प्रणाली" मा पहुँच छ, जसको मतलब तपाईंले नयाँ फाइलहरू सिर्जना गर्न सक्नुहुन्छ, मोड्युलहरू प्रयोग गर्न सक्नुहुन्छ (NPM प्याकेजहरू सहित), र स्थिर सम्पत्तिहरूसँग अन्तर्क्रिया गर्नुहोस्। टेम्प्लेट-विशिष्ट कन्फिगरेसन फाइलहरू परिमार्जन गर्ने अवसर पनि छ।
तपाइँ तपाइँको अद्वितीय प्रयोग-केस को लागी तपाइँको आफ्नै टेम्प्लेटहरू पनि निर्माण गर्न सक्नुहुन्छ, फाइल संरचना र निर्भरता संग पूर्ण, धेरै IDE मा जस्तै। किनभने उपकरण Github मा लिङ्क गरिएको छ, तपाइँ चाँडै कमिटहरू उत्पन्न गर्न र PRs खोल्न सक्नुहुन्छ। तपाईंले तुरुन्तै आफ्नो आवेदन ZEIT वा Netlify मा प्रयोग गर्न सक्नुहुन्छ।
CodeSandbox Team Pro
CodeSandbox, एक डच व्यवसाय जसले विकासकर्ताहरूलाई ब्राउजर-आधारित वेब एप विकास स्यान्डबक्स निर्माण गर्न अनुमति दिन्छ, आधिकारिक रूपमा एक सहयोग प्लेटफर्म जारी गरेको छ जसले टोलीहरूलाई क्लाउडमा कोडमा काम गर्न अनुमति दिन्छ। नयाँ उत्पादन, टीम प्रो, पूर्ण उत्पादन टोलीहरूका लागि डिजाइनर र प्रबन्धकहरूदेखि गुणस्तर आश्वासन (QA) टोलीहरू र त्यसभन्दा बाहिरका लागि निर्मित नो-कोड समाधान हो।
वेब अनुप्रयोगमा परिवर्तनहरू गर्न वा स्वीकार गर्न चाहने जो कोहीको लागि परियोजनाहरू प्रयोगकर्ता-अनुकूल इन्टरफेसमा प्रदान गरिन्छ, परिवर्तनहरू कार्यान्वयन गर्न विकासकर्ताहरूलाई टिप्पणीहरू र सिफारिसहरू पठाउने, छलफलको लागि फिर्ता पठाउने, र प्रक्रिया दोहोर्याउने जस्ता वैकल्पिक विधिहरू बेवास्ता गर्दै।
प्रमुख विशेषताहरु
- वेब-आधारित कोड सम्पादक र प्रोटोटाइप उपकरण।
- स्थानीय प्रयोगको लागि, स्यान्डबक्स जिप फाइलमा सजिलै डाउनलोड गर्न सकिन्छ।
- कार्यक्रम स्यान्डबक्सहरूमा गरिन्छ, जुन सहकर्मीहरूसँग सजिलै साझेदारी गर्न सकिन्छ।
फाइदा
- एक सुधारिएको प्रयोगकर्ता अनुभव र सम्पादक मा अधिक नियन्त्रण।
- प्रत्यक्ष पूर्वावलोकन सुविधा परिमार्जन गर्न सकिन्छ र छुट्टै विन्डोमा हेर्न सकिन्छ।
- कोड स्वतः ढाँचा हुन्छ र यसमा CLI (codesandbox-cli) समावेश हुन्छ
- उन्नत npm मोड्युलहरूको लागि समर्थन।
- सिफारिसहरूको साथ राम्रो त्रुटि सन्देशहरू।
- यसले राम्रो टर्मिनल, परीक्षण दर्शक, र मुद्दा दर्शक प्रदान गरेर डिबगिङ अनुभव सुधार गर्दछ।
बेफाइदा
- अन्त उपभोक्ता धेरै निजीकरण को लागी उजागर छ।
- स्थानीय कम्प्युटरबाट फाइलहरू ड्र्याग र ड्रप ठीकसँग काम गर्दैन।
- कोडस्यान्डबक्समा एक निश्चित फोल्डर संरचना पछ्याउनु पर्छ।
- निजी स्यान्डबक्सको कार्यक्षमता संरक्षकहरूको लागि मात्र उपलब्ध छ।
StackBlitz
StackBlitz वेब अनुप्रयोगहरूको लागि भिजुअल स्टुडियो कोड-संचालित अनलाइन IDE हो। प्लेटफर्म डेस्कटप संस्करण जस्तै उत्तरदायी र अनुकूलनीय छ। StackBlitz एक अनलाइन IDE हो जुन पूर्व-लोड हुन्छ कोणीय र प्रतिक्रिया विकास उपकरण।
Thinkster.io ले त्यो उत्कृष्ट परियोजना निर्माण गर्यो यसलाई आफ्नो Angular वा React परियोजनाको साथ सुरु गर्नको लागि सकेसम्म सरल बनाउनको लागि निर्भरता स्थापना वा निर्माण सेटिङहरू बारे चिन्ता नगरीकन। StackBlitz ले धेरै आश्चर्यजनक र अद्वितीय सुविधाहरू प्रदान गर्दछ जुन अहिले कुनै अन्य अनलाइन कोड सम्पादकसँग छैन। नतिजाको रूपमा, StackBlitz को थप अनुसन्धान गर्न र यो अनलाइन IDE ले के प्रस्ताव गर्छ भनेर पत्ता लगाउनु सार्थक छ।
Stackblitz पूर्ण IDE सँग धेरै तुलनात्मक छ, विशेष गरी यदि तपाइँ VS कोडलाई अलविदा भन्न सक्नुहुन्न किनभने उपकरण यसमा आधारित छ। प्याकेजमा विभिन्न सुविधाहरू छन् जसले तपाईंलाई पूर्ण-स्ट्याक अनुप्रयोग सिर्जना गर्न र जारी राख्न अनुमति दिन्छ।
कार्यक्रम भिजुअल स्टुडियो द्वारा संचालित छ, जुन विकासकर्ताहरु माझ परिचित छ। अफलाइन सम्पादन परियोजनाको स्ट्यान्डआउट सुविधा हो। यो सम्भव बनाउनको लागि, Stackblitz टोलीले एक इन-ब्राउजर वेबसर्भर सिर्जना गर्यो। तपाईंले टाइप गर्दा, यसले स्वचालित रूपमा निर्भरताहरू, कम्पाइलहरू, बन्डलहरू, र तातो रिलोडिङ स्थापना गर्दछ।
प्रीमियम संस्करण
क्याडेट, अन्तरिक्ष यात्री र कमाण्डर क्रमशः $8/महिना र $29/महिना नि:शुल्क उपलब्ध छन्। अन्तरिक्ष यात्री र कमाण्डरले असीमित निजी परियोजनाहरू, असीमित फाइल अपलोडहरू, कोर टोली स्ल्याक च्यानलमा आमन्त्रित गर्ने जस्ता धेरै सुविधाहरू समावेश गर्दछ। थप जानकारीको लागि, आधिकारिक बिलिङ बोर्ड हेर्नुहोस्।
प्रमुख विशेषताहरु
- तपाईंको परियोजनामा NPM प्याकेजहरू थप्दै।
- एक उपन्यास इन-ब्राउजर dev सर्भर को लागी धन्यवाद, तपाइँ अफलाइन हुँदा सम्पादन गर्न सक्नुहुन्छ।
- होस्ट गरिएको एप URL जसले हामीलाई कुनै पनि समयमा हाम्रो लाइभ एप पहुँच (र साझेदारी) गर्न अनुमति दिन्छ।
- अन्य उल्लेखनीय भिजुअल स्टुडियो कोड सुविधाहरू समावेश छन् Intellisense, परियोजना खोज (Cmd/Ctrl+P), परिभाषामा जानुहोस्, र अन्य।
फाइदा
- तैनातीका लागि फायरबेसको क्षमताहरू।
- सम्पादक प्रयोग गर्न साँच्चै सजिलो र अत्यन्त छिटो छ।
- प्रयोगकर्ताहरूसँग package.json, index.html, र index.js मा पहुँच छ।
- साझा गर्न मिल्ने स्रोत कोड जुन इम्बेड गर्न सकिन्छ।
- पृष्ठको ठूलो खण्डमा प्रत्यक्ष पूर्वावलोकन, आवश्यक भएमा फरक पृष्ठमा खोल्ने विकल्पको साथ।
- अफलाइन हुँदा, सम्पादन गर्दै
- स्मार्ट पूर्णता र सुधारिएको Intellisense।
- Stackblitz को कोर हो खुला स्रोत.
बेफाइदा
- तपाईंसँग भवन वा विकासकर्ता सर्भरमा कुनै प्रभाव छैन किनभने ती सिर्जना-प्रतिक्रिया-एप आदेशद्वारा व्यवस्थित हुन्छन्।
- प्रतिक्रिया मा, एक आधारभूत फोल्डर संरचना अवलोकन गर्नुपर्छ।
- कोड स्वतः ढाँचा गर्न सम्भव छैन, यद्यपि यो म्यानुअल रूपमा गर्न सम्भव छ।
निष्कर्ष
आजकल, हामीले माथि देखेका जस्तै कोडिङ खेल मैदान कुनै पनि वेब परियोजना पूर्ण रूपमा निर्माण गर्न प्रयोग गर्न सकिन्छ। तपाइँले तपाइँको वेब ब्राउजरबाट सीधा निर्माण, डिबग, परीक्षण, र डिप्लोइ गर्न सक्नुहुँदा तपाइँको पीसीमा बोझिलो IDE हरू स्थापना गर्न आवश्यक छैन।
मेरो विचारमा, StackBlitz तिनीहरू मध्ये सबै भन्दा राम्रो हुनेछ किनभने यो एक वेब-आधारित IDE हो जसले JavaScript, Angular, र अन्य विकास परियोजनाहरूलाई बक्सबाट बाहिर अनुमति दिन्छ, कुनै पनि स्थानीय विकास वातावरण जस्तै Node.js, npm, स्थापना गर्न आवश्यक पर्दैन। वा कोणीय। यसले स्थानीय रूपमा भिजुअल स्टुडियो कोड प्रयोग गर्ने जस्तै अनुभव प्रदान गर्दछ। वास्तवमा, स्ट्याकब्लिट्ज भिजुअल स्टुडियो कोड द्वारा संचालित भएकोले, यो डेस्कटप संस्करणको रूपमा छिटो र बहुमुखी महसुस गर्दछ।
CodePen, CodeSandbox, र StackBlitz मध्ये तपाइँको जाने उपकरण कुन हो? हामीलाई टिप्पणीहरूमा थाहा दिनुहोस्।
अब्बात्या
यस महान लेखको लागि धन्यवाद, एक पटक मैले stackblitz.com हेरे, मलाई थाहा छ म के चाहन्छु।