هڪ پيچيده پروجيڪٽ تي ڪم ڪندي، ڇا توهان هڪ تجربيڪار پروگرامر آهيو يا هڪ تازو ماڻهو، توهان ممڪن طور تي مسئلن جي وچ ۾ هلندا. جڏهن توهان پنهنجي پروجيڪٽ کي ڪيترن ئي ماڊلز ۾ ورهايو ٿا، مسئلا پيدا ٿين ٿا، ان کي وڌيڪ ڏکيو بڻائي ٿو غلطين کي ٽريڪ ڪرڻ ۽ حل ڳولڻ. ٻين حالتن ۾، انفرادي مثالن کي ڊيبگ ڪرڻ ڏکيو ٿي سگھي ٿو ڇاڪاڻ ته توهان ان مسئلي جو مناسب حل نه ڳوليو آهي جنهن تي توهان ڪم ڪري رهيا آهيو.
اهو پڻ موقعي تي ڪوڊ جي هڪ ٽڪري جي طور تي ٿئي ٿو، جيڪو شايد وقت تي پيچيده نظر اچي ٿو. JavaScript ويب تي ٻڌل ٻولين مان ھڪڙي آھي جيڪا سکڻ لاءِ تمام سادو آھي. بس پنهنجو ڊيسڪ ٽاپ برائوزر لانچ ڪريو ۽ ڊولپر ٽولز ڏانھن وڃو (عام طور تي F12)، ۽ توھان مڪمل ڪيو! توھان وري تجربو ڪري سگھو ٿا JS سان بغير ڪنھن پيچيده سافٽ ويئر کي انسٽال ڪرڻ يا هلائڻ جي.
شروع ڪرڻ لاء، توهان کي صرف هڪ برائوزر جي ضرورت آهي. اهو عجيب آهي ته هي سڀ سادگي دٻي کان ٻاهر آهي، پر اهڙا موقعا آهن جڏهن توهان کي وڌيڪ ضرورت هجي. مثال طور، فرض ڪريو ته توھان ھڪڙي نئين ويب API سان تجربو ڪرڻ چاھيو ٿا جيڪو توھان تازو دريافت ڪيو آھي پر ڪو نئون پروجيڪٽ شروع ڪرڻ نٿا چاھيو.
هن پوسٽ ۾، اسان مقابلو ڪنداسين ۽ مقابلو ڪنداسين ٽن مشهور JS راندين جي ميدانن، ڪوڊ پين، ڪوڊ سينڊ باڪس، ۽ اسٽيڪ بلٽز. اچو ته شروع ڪريون!
ڪوڊ پيئن
فرنٽ اينڊ ويب ڊولپمينٽ جا اوزار هميشه ترقي ڪري رهيا آهن، ۽ ٽيڪسٽ ايڊيٽر جديد ٽيڪنالاجيز جو هڪ وڏو حصو آهن جيڪي ڊولپر جي زندگي کي آسان بڻائي ٿو. ان کان سواءِ اسٽينڊ اڪيلو ٽيڪسٽ ايڊيٽر جهڙوڪ ائٽم يا نوٽ پيڊ ++، تازو سالن ۾ برائوزر تي ٻڌل ايڊيٽرن جو هڪ ڌماڪو ٿيو آهي جن کي پروگرام جي انسٽاليشن جي ضرورت ناهي ۽ وڌيڪ تعاون کي فروغ ڏيڻ.
CodePen هڪ ”آن لائن ڪميونٽي آهي جانچڻ ۽ پيش ڪرڻ لاءِ استعمال ڪندڙ جي ٺاهيل HTML، CSS، ۽ JavaScript ڪوڊ اسنپٽس“ جيڪا پيش ڪري ٿي شاندار موقعا اهو سکڻ لاءِ ته ڪيئن لکجي فرنٽ اينڊ ويب پيجز کي بهتر طور تي.
CodePen توهان کي ٻه "موڊ" ڏئي ٿو. پهريون ۽ سڀ کان عام استعمال ٿيل قلم آهي. اهو ايترو سادو آهي جيترو هڪ بٽڻ تي ڪلڪ ڪرڻ ۽ سڌو سنئون ايڊيٽر ڏانهن منتقل ڪيو پيو وڃي. اتان کان، توهان رسائي ڪري سگهو ٿا هڪ ڏيک پينل سان گڏوگڏ بنيادي HTML، CSS، ۽ JS ايڊيٽنگ ونڊوز.
هتي ڪو به “فائل سسٽم”، “IntelliSense” يا ٻيو ڪجهه به ناهي - صرف سادي نحو کي نمايان ڪرڻ ۽ تيز ڪمانڊ جهڙوڪ prettify. اختيارن واري ٽئب ۾، توھان منتخب ڪري سگھو ٿا محدود رينج مان پري پروسيسرز جي سڀني ٽن ٻولين لاءِ (جهڙوڪ TypeScript for JS) يا ڪنيڪشن شامل ڪريو ٻاهرين ذريعن سان.
جيڪڏهن توهان کي صرف مفت ۾ ڪجهه ڪرڻ جي ضرورت آهي، انهن مان ڪنهن به ايڊيٽرن کي ڪافي ٿيندو. مان صلاح ڏيان ٿو CodePen ڪنهن به شيءِ لاءِ جنهن لاءِ تمام گهڻي سيٽ اپ يا لائبريرين جي ضرورت نه هجي - بس HTML، CSS ۽ JS اختياري پري پروسيسرز سان گڏ مٿي تي. جيڪڏھن توھان استعمال ڪرڻ چاھيو ٿا راند جو ميدان پنھنجي سوشل ميڊيا جي موجودگي کي بھتر ڪرڻ لاءِ يا ذاتي پورٽ فوليو ٺاھيو، ڪوڊ پين ھڪڙو بھتر اختيار آھي.
پريميئم ورزن
توھان وٽ ڪجھ وڌيڪ متبادل آھن چونڊڻ لاءِ CodePen. جيڪڏهن توهان هر سال ادا ڪندا آهيو، توهان حاصل ڪري سگهو ٿا ٽن پريميئم منصوبن مان هڪ $12، $19، يا $39 هر مهيني لاءِ. توھان ٺاھي سگھوٿا لامحدود تعداد ۾ خانگي قلم، تحريرون، ۽ مجموعا ٽن مان ڪنھن ھڪڙي تي.
توهان پڻ حاصل ڪندا پرو بيج (هڪ سماجي واڌارو)، لائيو ڪوليب موڊ جي رسائي، ڪوبه اشتهار نه، ۽ وڌيڪ. اتي پڻ ٽيم جي مخصوص حڪمت عمليون ۽ ٻيون پار-ٽيئر فرق آھن. وڌيڪ معلومات لاءِ سندن سرڪاري بلنگ بورڊ چيڪ ڪريو.
اهم خصوصيتون
CodePen ۾ HTML، CSS، ۽ JavaScript ٺاهڻ کان علاوه، ڪجھ وڌيڪ شيون آھن جيڪي ان کي ڌار ڪن ٿيون.
- توهان جي ڪوڊ جي حقيقي وقت ڏسڻ ممڪن آهي. ان کي گڏ ڪرڻ جي ضرورت ناهي.
- تجربا توهان کي نئين شيون سکڻ جي اجازت ڏئي ٿي.
- مسئلن کي ڳولڻ ۽ حل ڪرڻ لاءِ ننڍا ٽيسٽ ڪيس ٺاهيو.
- پنهنجا شاندار ڪم ڏيکاريو.
- بعد ۾ استعمال لاءِ قلم ٺاهيو ۽ ذخيرو ڪريو.
- ٻين ڊولپرز جي ڪوڊ کي آزمايو ۽ ان کي عمل ۾ ڏسو.
فائدن
- شروع ڪرڻ لاء، ڪابه قيمت ناهي.
- تعمير ٿيل سکيا جا وسيلا.
- ٻين سان تعاون ڪريو ۽ منصوبن جو مقابلو ڪريو ڏسو ته اھي مستقبل ۾ ڪٿي وڃي سگھن ٿا.
- UI استعمال ڪرڻ آسان ۽ سڌو آھي.
وڌڻ
- ڪوڊ لئبرري ننڍي آهي، آٽو ڪوڊ مڪمل ٿيڻ نا مناسب آهي. اهو صرف هڪ صفحي جي منصوبن لاءِ سٺو آهي ۽ ڪنهن به وڏي شيءِ کي سنڀالي نٿو سگهي.
- CodePen تي، توهان خانگي قلم ٺاهي سگهو ٿا، پر توهان کي پرو رڪنيت ($9/مهينو) ڏانهن اپڊيٽ ڪرڻ جي ضرورت پوندي.
ڪوڊ سينڊ باڪس
CodeSandbox هڪ ويب تي ٻڌل ڪوڊ ايڊيٽر آهي. اهو توهان جي لاءِ ٽرانسپيئرنگ، پيڪنگنگ ۽ انحصار جي انتظام کي خودڪار ڪري ٿو، توهان کي هڪ ڪلڪ سان هڪ نئون منصوبو ٺاهڻ جي اجازت ڏئي ٿو. توھان کان پوءِ ڪجھ دلچسپ ٺاھيو آھي، توھان ان کي ٻين سان شيئر ڪري سگھوٿا صرف ويب سائيٽ شيئر ڪندي.
ايڊيٽر ڪنهن به جاوا اسڪرپٽ پروجيڪٽ سان مطابقت رکي ٿو، جيتوڻيڪ ان ۾ ڪجهه خاص React-مخصوص خاصيتون شامل آهن، جيئن ته پروجيڪٽ کي Create-react-app ٽيمپليٽ ۾ محفوظ ڪرڻ جو اختيار.
ڪو به پروجيڪٽ جيڪو توهان ٺاهيندا آهيو CodeSandbox هڪ ٽيمپليٽ سان شروع ٿئي ٿو. اهو يا ته هڪ مخصوص لائبريري، فريم ورڪ، يا رن ٽائم (بشمول Node.js) سان لاڳاپيل ٿي سگهي ٿو يا صرف معياري ويب ٽيڪنالاجيون استعمال ڪريو. ٽيمپليٽ چونڊڻ کان پوءِ، توهان کي ايڊيٽر ڏانهن موڪليو ويندو، جتي توهان سڀ ضروري فائلون ڳوليندا ۽ پريو ونڊو اڳ ۾ ئي کليل هوندي.
توهان وٽ رسائي آهي "فائل سسٽم" سڀني سينڊ باڪسز ۾، جنهن جو مطلب آهي ته توهان نيون فائلون ٺاهي سگهو ٿا، ماڊل استعمال ڪري سگهو ٿا (اين پي ايم پيڪيجز سميت)، ۽ جامد اثاثن سان رابطو ڪريو. ٽيمپليٽ مخصوص ڪنفيگريشن فائلن کي تبديل ڪرڻ جو موقعو پڻ آهي.
توھان پنھنجي منفرد استعمال واري ڪيس لاءِ پنھنجون ٽيمپليٽس پڻ ٺاھي سگھو ٿا، فائل جي ڍانچي ۽ انحصار سان مڪمل، گھڻو ڪري ھڪڙي IDE وانگر. ڇاڪاڻ ته اوزار Github سان ڳنڍيل آهي، توهان جلدي ٺاهي سگهو ٿا ڪميٽ ۽ اوپن پي آرز. توھان پنھنجي ايپليڪيشن کي فوري طور تي ZEIT يا Netlify تي ترتيب ڏئي سگھو ٿا.
CodeSandbox ٽيم پرو
CodeSandbox، هڪ ڊچ ڪاروبار جيڪو ڊولپرز کي اجازت ڏئي ٿو هڪ برائوزر تي ٻڌل ويب ايپ ڊولپمينٽ سينڊ باڪس ٺاهڻ، سرڪاري طور تي هڪ تعاون وارو پليٽ فارم جاري ڪيو آهي جيڪو ٽيمن کي ڪلائوڊ ۾ ڪوڊ تي ڪم ڪرڻ جي اجازت ڏئي ٿو. نئين پراڊڪٽ، ٽيم پرو، مڪمل پراڊڪٽ ٽيمن لاءِ ٺهيل ڪو-ڪوڊ حل آهي، جنهن ۾ ڊيزائنرز ۽ مئنيجرن کان وٺي معيار جي يقين ڏياريندڙ (QA) ٽيمن ۽ ان کان پوءِ شامل آهن.
پروجيڪٽس هڪ صارف دوست انٽرفيس ۾ مهيا ڪيا ويا آهن هر ڪنهن لاءِ جيڪو چاهي ٿو تبديل ڪرڻ يا قبول ڪرڻ چاهي ويب ايپليڪيشن ۾، متبادل طريقن کان پاسو ڪرڻ جهڙوڪ ڊولپرز کي نوٽس ۽ سفارشون موڪلڻ لاءِ تبديلين تي عمل ڪرڻ، انهن کي بحث لاءِ واپس موڪلڻ، ۽ عمل کي ورجائڻ.
اهم خصوصيتون
- ويب تي ٻڌل ڪوڊ ايڊيٽر ۽ پروٽوٽائپ ٽول.
- مقامي استعمال لاءِ، هڪ سينڊ باڪس آساني سان ڊائون لوڊ ڪري سگھجي ٿو زپ فائل ۾.
- پروگرامن سينڊ باڪس ۾ ڪيو ويندو آهي، جيڪو آساني سان ساٿين سان شيئر ڪري سگهجي ٿو.
فائدن
- هڪ بهتر صارف تجربو ۽ ايڊيٽر تي وڌيڪ ڪنٽرول.
- لائيو پريويو فيچر تبديل ڪري سگھجي ٿو ۽ ھڪ الڳ ونڊو ۾ ڏسي سگھجي ٿو.
- ڪوڊ خودڪار طريقي سان فارميٽ ڪيو ويو آهي ۽ هڪ CLI شامل آهي (codesandbox-cli)
- ترقي يافته npm ماڊلز لاءِ سپورٽ.
- سفارشن سان گڏ سٺو نقص پيغام.
- اهو بهتر ٽرمينل مهيا ڪندي ڊيبگنگ تجربو کي بهتر بڻائي ٿو، ٽيسٽ ناظر، ۽ مسئلو ناظر.
وڌڻ
- آخر صارف ڪيترن ئي ذاتي ڪرڻ جي سامهون آهي.
- مقامي ڪمپيوٽر مان فائلن کي ڇڪيو ۽ ڇڏي ڏيو صحيح طريقي سان ڪم نٿو ڪري.
- ھڪڙي خاص فولڊر جي جوڙجڪ جي پٺيان ھجڻ گھرجي CodeSandbox.
- خانگي سينڊ باڪس جي ڪارڪردگي صرف سرپرستن لاءِ موجود آهي.
StackBlitz
StackBlitz ويب ايپليڪيشنن لاءِ هڪ Visual Studio ڪوڊ سان هلندڙ آن لائن IDE آهي. پليٽ فارم ڊيسڪ ٽاپ ورزن وانگر قبول ۽ قابل قبول آهي. StackBlitz ھڪڙو آن لائن IDE آھي جيڪو اڳ ۾ لوڊ ٿيل آھي Angular ۽ React ترقي جا اوزار.
Thinkster.io اهو شاندار پروجيڪٽ ٺاهيو ته جيئن ان کي آسان بڻائي سگهجي توهان جي Angular يا React پروجيڪٽ سان شروع ڪرڻ کان سواءِ انحصار جي تنصيب جي باري ۾ پريشان ٿيڻ يا سيٽنگون ٺاهڻ جي. StackBlitz تمام گھڻيون حيرت انگيز ۽ منفرد خصوصيتون مهيا ڪري ٿي جيڪي ھن وقت ڪنھن ٻئي آن لائن ڪوڊ ايڊيٽر وٽ ناھي. نتيجي طور، اھو قيمتي آھي تحقيق ڪرڻ StackBlitz وڌيڪ ۽ دريافت ڪيو ته ھن آن لائن IDE کي ڇا پيش ڪرڻو آھي.
Stackblitz مڪمل IDE سان انتهائي موازن آهي، خاص طور تي جيڪڏهن توهان VS ڪوڊ کي الوداع نٿا چئي سگهو ڇو ته اهو اوزار ان تي ٻڌل آهي. پيڪيج ۾ مختلف خاصيتون آهن جيڪي توهان کي شروع ڪرڻ ۽ هڪ مڪمل اسٽيڪ ايپليڪيشن ٺاهڻ جاري رکڻ جي اجازت ڏين ٿيون.
پروگرام بصري اسٽوڊيو طرفان طاقتور آهي، جيڪو ڊولپرز جي وچ ۾ مشهور آهي. آف لائن ايڊيٽنگ پروجيڪٽ جي وڏي خصوصيت آهي. هن کي ممڪن بڻائڻ لاءِ، Stackblitz ٽيم ٺاهي هڪ ان-براؤزر ويب سرور. جيئن توهان ٽائپ ڪريو ٿا، اهو خودڪار طريقي سان انحصار، مرتب، بنڊل، ۽ گرم ٻيهر لوڊ ڪرڻ کي انسٽال ڪري ٿو.
پريميئم ورزن
ڪيڊٽ، خلائي مسافر، ۽ ڪمانڊر مفت ۾ دستياب آهن، $8 / مهينو، ۽ $29 / مهيني، ترتيب سان. خلائي مسافر ۽ ڪمانڊر ۾ ڪيتريون ئي خاصيتون شامل آھن جھڙوڪ لامحدود پرائيويٽ پروجيڪٽ، لامحدود فائل اپلوڊ، ڪور ٽيم سليڪ چينل ڏانھن دعوت، وغيره. وڌيڪ معلومات لاءِ، ڏسو سرڪاري بلنگ بورڊ.
اهم خصوصيتون
- توهان جي پروجيڪٽ ۾ NPM پيڪيجز شامل ڪرڻ.
- مھرباني ڪري ھڪ ناول ان-براؤزر ڊيو سرور جي، توھان تبديلي ڪري سگھو ٿا آف لائن رھندي.
- هڪ ميزباني ڪيل ايپ URL جيڪا اسان کي ڪنهن به وقت اسان جي لائيو ايپ تائين رسائي (۽ شيئر) ڪرڻ جي اجازت ڏئي ٿي.
- ٻيون قابل ذڪر بصري اسٽوڊيو ڪوڊ خاصيتون شامل آهن Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition، ۽ ٻيا.
فائدن
- تعیناتي لاءِ فائر بيس جون صلاحيتون.
- ايڊيٽر استعمال ڪرڻ بلڪل آسان ۽ انتهائي تيز آهي.
- صارفين تائين رسائي آهي package.json، index.html، ۽ index.js.
- شيئر ڪرڻ جو ذريعو ڪوڊ جيڪو پڻ شامل ڪري سگھجي ٿو.
- صفحي جي وڏي حصي تي لائيو پريويو، جيڪڏھن ضروري ھجي ته مختلف صفحي تي کولڻ جي اختيار سان.
- جڏهن آف لائن، ايڊيٽنگ
- سمارٽ مڪمل ۽ بهتر Intellisense.
- Stackblitz جو بنيادي حصو آهي کليل ذريعو.
وڌڻ
- توهان جو عمارت يا ڊولپر سرور تي اثر نه آهي ڇو ته اهي ٺاهيل-ري-ايڪٽ-ايپ ڪمانڊ پاران منظم ڪيا ويا آهن.
- رد عمل ۾، هڪ بنيادي فولڊر جي جوڙجڪ کي ڏسڻ گهرجي.
- اهو ممڪن ناهي ته ڪوڊ خودڪار طريقي سان فارميٽ ڪريو، جيتوڻيڪ اهو ممڪن آهي ته اهو دستي طور تي ڪيو وڃي.
ٿڪل
اڄڪلهه، هڪ ڪوڊنگ راند جو ميدان، جيئن اسان مٿي ڏٺو آهي، ڪنهن به ويب پروجيڪٽ کي مڪمل طور تي تعمير ڪرڻ لاء استعمال ٿي سگهي ٿو. توهان جي PC تي بوجھل IDEs انسٽال ڪرڻ جي ڪا ضرورت ناهي جڏهن توهان ٺاهي سگهو ٿا، ڊيبگ، ٽيسٽ، ۽ سڌو سنئون پنهنجي ويب برائوزر مان ترتيب ڏيو.
منهنجي خيال ۾، StackBlitz انهن مان بهترين هوندو ڇو ته اهو هڪ ويب تي ٻڌل IDE آهي جيڪو JavaScript، Angular، ۽ ٻين ڊولپمينٽ پروجيڪٽس کي سڌو دٻي جي ٻاهران اجازت ڏئي ٿو، ڪنهن به مقامي ترقياتي ماحول جهڙوڪ Node.js، npm، انسٽال ڪرڻ جي ضرورت ناهي. يا ڪنواري. اهو ساڳيو تجربو مهيا ڪري ٿو جيئن مقامي طور تي Visual Studio Code استعمال ڪندي. حقيقت ۾، ڇاڪاڻ ته StackBlitz بصري اسٽوڊيو ڪوڊ پاران هلائي وئي آهي، اهو محسوس ٿئي ٿو جيترو تيز ۽ ورسٽائل ڊيسڪ ٽاپ ورزن وانگر.
CodePen، CodeSandbox، ۽ StackBlitz مان ڪھڙو توھان جو وڃڻ وارو اوزار آھي؟ اچو ته تبصرن ۾ ڄاڻون.
ابتيه
هن عظيم مضمون جي مهرباني، هڪ دفعو مون ڏٺو stackblitz.com، مون کي خبر آهي ته اهو آهي جيڪو مان چاهيان ٿو.