په یوې پیچلې پروژې کار کول، که تاسو یو تجربه لرونکی پروګرامر یا نوی یاست، تاسو به احتمالا د ستونزو سره مخ شئ. کله چې تاسو خپله پروژه په ډیری ماډلونو ویشئ، مسلې رامینځته کیږي، د غلطیو تعقیب او د حلونو موندل خورا ستونزمن کوي. په نورو حاالتو کې، د انفرادي مثالونو ډیبګ کول ممکن سخت وي ځکه چې تاسو د هغې ستونزې لپاره مناسب حل ندی موندلی چې تاسو یې کار کوئ.
دا په موقع د کوډ د یوې برخې په توګه هم پیښیږي، کوم چې ممکن په وخت کې پیچلي ښکاري. جاواسکریپټ یو له ویب میشته ژبو څخه دی چې زده کول خورا ساده دي. په ساده ډول خپل ډیسټاپ براوزر پیل کړئ او د پراختیا کونکي وسیلو ته لاړشئ (معمولا F12) ، او تاسو بشپړ شوي! تاسو بیا کولی شئ د JS سره تجربه وکړئ پرته لدې چې کوم پیچلي سافټویر نصب یا چل کړئ.
د پیل کولو لپاره، ټول هغه څه چې تاسو ورته اړتیا لرئ یو براوزر دی. دا په زړه پوري ده چې دا ټول سادگي له بکس څخه بهر وي، مګر داسې وختونه شتون لري کله چې تاسو ډیر څه ته اړتیا لرئ. د مثال په توګه، فرض کړئ چې تاسو د نوي ویب API سره تجربه کول غواړئ چې تاسو پدې وروستیو کې کشف کړی مګر نه غواړئ نوې پروژه پیل کړئ.
پدې پوسټ کې ، موږ به درې خورا مشهور JS لوبې ډګرونه ، کوډپین ، کوډ سینډ باکس ، او سټیک بلیټز پرتله او برعکس کړو. راځه چي پیل یی کړو!
کوډ پین
د مخکینۍ ویب پراختیا وسیلې تل وده کوي، او د متن مدیران د وروستي ټیکنالوژیو لویه برخه ده چې د پراختیا کونکي ژوند ساده کوي. د سټنډرډ متن ایډیټرونو لکه اتوم یا نوټ پیډ ++ سربیره ، په وروستي کلونو کې د براوزر میشته ایډیټرونو چاودنه شوې چې د برنامه نصبولو ته اړتیا نلري او پراخه همکارۍ ته وده ورکوي.
کوډپین "د کارونکي لخوا رامینځته شوي HTML ، CSS ، او جاواسکریپټ کوډ ټوټې ازموینې او وړاندې کولو لپاره آنلاین ټولنه ده" چې د مخکښې ویب پا pagesو غوره لیکلو څرنګوالي زده کولو لپاره عالي فرصتونه وړاندې کوي.
CodePen تاسو ته دوه "موډلونه" درکوي. لومړی او تر ټولو عام کارول شوی قلم دی. دا دومره ساده دی لکه څنګه چې د تڼۍ کلیک کول او سم مدیر ته لیږدول کیږي. له هغه ځایه، تاسو کولی شئ د مخکتنې پینل او همدارنګه د بنسټیز HTML، CSS، او JS ترمیم وینډوز ته لاسرسی ومومئ.
دلته "د فایل سیسټم"، "IntelliSense" یا بل څه شتون نلري - یوازې ساده ترکیب روښانه کول او ګړندي کمانډونه لکه ښکلی. د اختیارونو په ټب کې، تاسو کولی شئ د ټولو دریو ژبو لپاره د پری پروسیسرونو محدود حد څخه غوره کړئ (لکه د JS لپاره ټایپ سکریپټ) یا د بهرنیو سرچینو سره اړیکې اضافه کړئ.
که تاسو یوازې د وړیا لپاره هرڅه ترسره کولو ته اړتیا لرئ، د مدیرانو څخه یو به کافي وي. زه د هر هغه څه لپاره CodePen وړاندیز کوم چې ډیری سیټ اپ یا کتابتونونو ته اړتیا نلري - په ساده ډول HTML ، CSS ، او JS د اختیاري پری پروسیسرونو سره په سر کې. که تاسو غواړئ د خپل ټولنیز میډیا شتون ښه کولو یا شخصي پورټ فولیو رامینځته کولو لپاره د لوبې ډګر وکاروئ ، کوډپین یو غوره انتخاب دی.
پریمیم نسخه
تاسو په CodePen کې د انتخاب کولو لپاره یو څو نور بدیلونه لرئ. که تاسو په کال کې تادیه کوئ، تاسو کولی شئ هره میاشت د $ 12، $ 19، یا $ 39 لپاره د دریو پریمیم پالنونو څخه یو ترلاسه کړئ. تاسو کولی شئ په هر یو کې په دریو پوړونو کې بې شمیره شخصي قلمونه ، پوسټونه او ټولګې رامینځته کړئ.
تاسو به د پرو بیج (یو ټولنیز وده) هم ترلاسه کړئ، د ژوندی همکارۍ حالت لاسرسی، هیڅ اعلان نه، او نور ډیر څه. د ټیم ځانګړي ستراتیژۍ او نور کراس ټیر توپیرونه هم شتون لري. د نورو معلوماتو لپاره د دوی رسمي بلینګ بورډ وګورئ.
کلیدي ځانګړتیاوې
په CodePen کې د HTML، CSS، او JavaScript جوړولو سربیره، یو څو نور شیان شتون لري چې دا یې جلا کوي.
- ستاسو د کوډ ریښتیني وخت لیدل ممکن دي. دا تالیف ته اړتیا نلري.
- تجربه کول تاسو ته اجازه درکوي چې نوي شیان زده کړئ.
- د ستونزو د موندلو او حل کولو لپاره د ازموینې کوچنۍ قضیې رامینځته کړئ.
- خپل په زړه پورې کارونه ښکاره کړئ.
- د وروسته کارولو لپاره قلمونه جوړ او ذخیره کړئ.
- د نورو پراختیا کونکو کوډ هڅه وکړئ او په عمل کې یې وګورئ.
ګټي
- د پیل کولو لپاره، هیڅ لګښت نشته.
- د زده کړې سرچینې جوړ شوي.
- د نورو سره همکاري وکړئ او پروژې پرتله کړئ ترڅو وګورئ چې دوی په راتلونکي کې چیرته ځي.
- UI د کارولو لپاره ساده او مستقیم دی.
زيانونه
- د کوډ کتابتون کوچنی دی، د اتوماتیک کوډ بشپړول ناکافي دي. دا یوازې د یوې پاڼې پروژې لپاره ښه دی او نشي کولی لوی څه اداره کړي.
- په CodePen کې، تاسو کولی شئ شخصي قلمونه جوړ کړئ، مګر تاسو اړتیا لرئ چې د پرو غړیتوب ته لوړ کړئ ($ 9 / میاشت).
کوډ سینڈ باکس
CodeSandbox د ویب پر بنسټ کوډ مدیر دی. دا ستاسو لپاره د لیږد ، بسته بندۍ او انحصار مدیریت اتومات کوي ، تاسو ته اجازه درکوي په یوه کلیک سره نوې پروژه جوړه کړئ. وروسته له دې چې تاسو یو څه په زړه پوري جوړ کړئ، تاسو کولی شئ دا د نورو سره د ویب پاڼې په شریکولو سره شریک کړئ.
ایډیټر د هر ډول جاواسکریپټ پروژې سره مطابقت لري، که څه هم پدې کې د عکس العمل ځانګړي ځانګړتیاوې شاملې دي، لکه د پروژې د جوړولو-عکس اپلیکیشن ټیمپلیټ کې د خوندي کولو اختیار.
هره پروژه چې تاسو په CodeSandbox کې جوړ کړئ د ټیمپلیټ سره پیل کیږي. دا کولی شي یا د ځانګړي کتابتون، چوکاټ، یا د چلولو وخت (د Node.js په شمول) پورې اړه ولري یا په ساده ډول معیاري ویب ټیکنالوژي وکاروي. د ټیمپلیټ غوره کولو وروسته ، تاسو مدیر ته لیږل کیږئ ، چیرې چې تاسو به ټول اړین فایلونه ومومئ او د مخکتنې کړکۍ دمخه خلاصې وي.
تاسو په ټولو سینڈ باکسونو کې "فایل سیسټم" ته لاسرسی لرئ، پدې معنی چې تاسو کولی شئ نوي فایلونه جوړ کړئ، ماډلونه وکاروئ (د NPM کڅوړو په شمول)، او د جامد شتمنیو سره اړیکه ونیسئ. د ټیمپلیټ ځانګړي تشکیلاتو فایلونو بدلولو فرصت هم شتون لري.
تاسو ممکن حتی د خپل ځانګړي کارونې قضیې لپاره خپل ټیمپلیټونه جوړ کړئ ، د فایل جوړښت او انحصار سره بشپړ کړئ ، لکه د IDE په څیر. ځکه چې وسیله د ګیتوب سره تړلې ده، تاسو کولی شئ په چټکۍ سره ژمنې او PRs خلاص کړئ. تاسو ممکن سمدلاسه خپل غوښتنلیک ZEIT یا Netlify ته ځای په ځای کړئ.
د کوډ سینډ باکس ټیم پرو
CodeSandbox، یو هالنډي سوداګرۍ چې پراختیا کونکو ته اجازه ورکوي چې د براوزر میشته ویب ایپ پرمختیا سینڈ باکس رامینځته کړي ، په رسمي ډول د همکارۍ پلیټ فارم خپور کړی چې ټیمونو ته اجازه ورکوي په کلاوډ کې کوډ باندې کار وکړي. نوی محصول، ټیم پرو، یو بې کوډ حل دی چې د بشپړ محصول ټیمونو لپاره جوړ شوی، د ډیزاینرانو او مدیرانو څخه د کیفیت تضمین (QA) ټیمونو او هاخوا څخه.
پروژې د هر هغه چا لپاره د کاروونکي دوستانه انٹرفیس کې چمتو شوي چې غواړي په ویب اپلیکیشن کې بدلونونه رامینځته کړي یا یې ومني ، د بدیل میتودونو څخه ډډه وکړي لکه د بدلونونو پلي کولو لپاره پراختیا کونکو ته د نوټونو او وړاندیزونو لیږل ، د بحث لپاره بیرته لیږدول ، او د پروسې تکرار کول.
کلیدي ځانګړتیاوې
- د ویب پر بنسټ کوډ ایډیټر او پروټوټایپ وسیله.
- د محلي کارونې لپاره، د شګو بکس ممکن په زپ فایل کې په اسانۍ سره ډاونلوډ شي.
- پروګرامونې په شګو بکسونو کې ترسره کیږي، کوم چې ممکن په اسانۍ سره د همکارانو سره شریک شي.
ګټي
- د کاروونکي ښه تجربه او په مدیر باندې ډیر کنټرول.
- د ژوندی مخکتنې ځانګړتیا په جلا کړکۍ کې ترمیم او لیدل کیدی شي.
- کوډ په اوتومات ډول فارمیټ شوی او CLI پکې شامل دی (codesandbox-cli)
- د پرمختللي npm ماډلونو لپاره ملاتړ.
- د سپارښتنو سره ښه خطا پیغامونه.
- دا د غوره ټرمینل ، ازموینې لیدونکي ، او مسلې لیدونکي چمتو کولو سره د ډیبګ کولو تجربه ښه کوي.
زيانونه
- وروستی مصرف کونکي د ډیری شخصي کولو سره مخ دي.
- د محلي کمپیوټر څخه د فایلونو ډریګ او ډراپ په سمه توګه کار نه کوي.
- یو ځانګړی فولډر جوړښت باید په CodeSandbox کې تعقیب شي.
- د شخصي شګو بکس فعالیت یوازې د سرپرستانو لپاره شتون لري.
StackBlitz
StackBlitz د ویب غوښتنلیکونو لپاره د بصری سټوډیو کوډ لخوا پرمخ وړل شوی آنلاین IDE دی. پلیټ فارم د ډیسټاپ نسخې په څیر ځواب ورکوونکی او د تطبیق وړ دی. StackBlitz یو آنلاین IDE دی چې مخکې له مخکې بار شوی زاویه او غبرګون د پراختیا وسیلې.
Thinkster.io دا په زړه پورې پروژه جوړه کړې ترڅو دا د امکان تر حده ساده کړي ترڅو ستاسو د انګولر یا عکس العمل پروژې سره پیل وکړئ پرته لدې چې د انحصار نصب کولو یا تنظیماتو رامینځته کولو په اړه اندیښنه ولرئ. StackBlitz ډیری حیرانونکي او ځانګړي ځانګړتیاوې وړاندې کوي چې اوس مهال هیڅ بل آنلاین کوډ مدیر نلري. د پایلې په توګه، دا ارزښت لري چې د StackBlitz نور پلټنه وکړئ او ومومئ چې دا آنلاین IDE څه وړاندیز کوي.
Stackblitz د بشپړ IDE سره خورا پرتله کیدونکی دی، په ځانګړې توګه که تاسو نشئ کولی د VS کوډ ته الوداع ووایئ ځکه چې وسیله د هغې پر بنسټ والړ ده. کڅوړه مختلف ځانګړتیاوې لري چې تاسو ته اجازه درکوي د بشپړ سټیک غوښتنلیک رامینځته کولو پیل او دوام ورکړئ.
برنامه د بصری سټوډیو لخوا پرمخ وړل کیږي ، کوم چې د پراختیا کونکو ترمینځ ښه پیژندل شوی. آفلاین ترمیم د پروژې غوره ځانګړتیا ده. د دې ممکنه کولو لپاره، د Stackblitz ټیم د براوزر ویب سرور جوړ کړ. لکه څنګه چې تاسو ټایپ کوئ، دا په اوتومات ډول انحصارونه نصبوي، تالیفونه، بنډلونه، او ګرم ریلوډینګ کوي.
پریمیم نسخه
کیډیټ، خلاباز، او کمانډر په ترتیب سره وړیا، $ 8 / میاشت، او $ 29 / میاشت کې شتون لري. اسټروناټ او کمانډر یو شمیر ځانګړتیاوې لري لکه لامحدود خصوصي پروژې، لامحدود فایل اپلوډونه، د اصلي ټیم سلیک چینل ته بلنه، او داسې نور. د نورو معلوماتو لپاره، د رسمي بلینګ بورډ وګورئ.
کلیدي ځانګړتیاوې
- ستاسو پروژې ته د NPM کڅوړې اضافه کول.
- د نوي براوزر ډیو سرور څخه مننه ، تاسو کولی شئ د آفلاین پرمهال ترمیم کړئ.
- د کوربه شوي اپلیکیشن URL چې موږ ته اجازه راکوي په هر وخت کې زموږ ژوندۍ ایپ ته لاسرسی (او شریک کړو).
- نور د پام وړ بصری سټوډیو کوډ ځانګړتیاوې شاملې دي Intellisense، د پروژې لټون (Cmd/Ctrl+P)، تعریف ته لاړ شئ، او نور.
ګټي
- د ګمارنې لپاره د Firebase وړتیاوې.
- مدیر د کارولو لپاره واقعیا اسانه او خورا ګړندی دی.
- کارنان package.json، index.html، او index.js ته لاسرسی لري.
- د شریکولو وړ سرچینې کوډ چې هم ځای پرځای کیدی شي.
- د پاڼې په لویه برخه کې ژوندۍ کتنه، د اړتیا په صورت کې په مختلف پاڼه کې د خلاصولو اختیار سره.
- پداسې حال کې چې آفلاین، ترمیم کول
- سمارټ بشپړتیاوې او د انټیلیسنس ښه والی.
- د Stackblitz اصلي برخه ده د پرانيستې سرچينې.
زيانونه
- تاسو په ودانۍ یا پراختیا کونکي سرور باندې نفوذ نلرئ ځکه چې دا د Create-react-app کمانډ لخوا اداره کیږي.
- په عکس العمل کې، د فولډر بنسټیز جوړښت باید مشاهده شي.
- دا ممکنه نده چې په اتوماتيک ډول کوډ فارمیټ کړئ، که څه هم دا په لاسي ډول ترسره کیدی شي.
پایله
نن ورځ، د کوډ کولو لوبې ډګر لکه هغه څه چې موږ یې پورته لیدلي کیدای شي په بشپړه توګه د هرې ویب پروژې جوړولو لپاره وکارول شي. ستاسو په کمپیوټر کې پیچلي IDEs نصبولو ته اړتیا نشته کله چې تاسو کولی شئ مستقیم له خپل ویب براوزر څخه جوړ ، ډیبګ ، ازموینه او ځای په ځای کړئ.
زما په نظر ، StackBlitz به د دوی په مینځ کې غوره وي ځکه چې دا د ویب میشته IDE دی چې جاواسکریپټ ، زاویه او نورو پرمختیایي پروژو ته اجازه ورکوي د بکس څخه بهر ، پرته له کوم ځایي پرمختیا چاپیریال لکه Node.js ، npm ، نصبولو ته اړتیا نلري. یا زاویه. دا ورته تجربه چمتو کوي لکه څنګه چې په محلي توګه د بصری سټوډیو کوډ کارول. په واقعیت کې، ځکه چې StackBlitz د بصری سټوډیو کوډ لخوا پرمخ وړل کیږي، دا د ډیسټاپ نسخه په څیر ګړندی او هر اړخیز احساس کوي.
د CodePen، CodeSandbox، او StackBlitz څخه کوم یو ستاسو د تګ وسیله ده؟ موږ ته په نظرونو کې خبر راکړئ.
ابتاتیا
د دې عالي مقالې لپاره مننه ، یوځل چې ما stackblitz.com ولید ، زه پوهیږم چې دا هغه څه دي چې زه یې غواړم.