Bab lan Paragraf[Singidaken][Tampilake]
Nggarap proyek sing rumit, apa sampeyan programmer sing berpengalaman utawa mahasiswa anyar, sampeyan bakal nemoni masalah. Nalika sampeyan pamisah proyek dadi akeh modul, masalah muncul, dadi luwih angel kanggo nglacak kesalahan lan nemokake solusi. Ing kahanan liyane, debugging kasus individu bisa uga angel amarga sampeyan durung nemokake solusi sing tepat kanggo masalah sing wis ditindakake.
Iki uga kedadeyan minangka potongan kode, sing bisa uga katon rumit ing wektu kasebut. JavaScript minangka salah sawijining basa basis Web sing gampang banget kanggo sinau. Cukup bukak browser desktop lan navigasi menyang Alat Pangembang (biasane F12), lan sampeyan wis rampung! Sampeyan banjur bisa eksprimen karo JS tanpa perlu nginstal utawa mbukak piranti lunak rumit.
Kanggo miwiti, sampeyan mung butuh browser. Iku apik kanggo duwe kabeh gamblang iki langsung metu saka kothak, nanging ana kesempatan yen sampeyan perlu liyane. Contone, umpamane sampeyan pengin nyoba nganggo API Web anyar sing bubar ditemokake nanging ora pengin miwiti proyek anyar.
Ing kirim iki, kita bakal mbandhingake lan mbedakake telung taman dolanan JS sing paling populer, CodePen, CodeSandbox, lan StackBlitz. Ayo dadi miwiti!
CodePen
Piranti pangembangan web frontend tansah berkembang, lan editor teks minangka komponen gedhe saka teknologi paling anyar sing nggawe urip pangembang luwih gampang. Saliyane editor teks mandiri kayata Atom utawa Notepad ++, ana jeblugan editor basis browser ing taun-taun pungkasan sing ora mbutuhake instalasi program lan ningkatake kolaborasi sing luwih gedhe.
CodePen minangka "komunitas online kanggo nguji lan nampilake potongan kode HTML, CSS, lan JavaScript sing digawe pangguna" sing menehi kesempatan sing apik kanggo sinau babagan nulis kaca web frontend sing luwih apik.
CodePen menehi rong "mode". Pisanan lan paling umum digunakake yaiku Pen. Iku gampang kaya ngeklik tombol lan diangkut langsung menyang editor. Saka ing kono, sampeyan bisa ngakses panel pratinjau uga HTML dhasar, CSS, lan jendhela panyuntingan JS.
Ora ana "sistem file," "IntelliSense," utawa liya-liyane - mung nyorot sintaks sing prasaja lan printah cepet kaya prettify. Ing tab opsi, sampeyan bisa milih saka sawetara preprocessors sing diwatesi kanggo kabeh telung basa (kayata TypeScript kanggo JS) utawa nambah sambungan menyang sumber eksternal.
Yen sampeyan mung butuh apa wae sing ditindakake kanthi gratis, salah sawijining editor bakal cukup. Aku nyaranake CodePen kanggo apa wae sing ora mbutuhake akeh persiyapan utawa perpustakaan - mung HTML, CSS, lan JS kanthi pre-prosesor opsional ing ndhuwur. Yen sampeyan pengin nggunakake papan dolanan kanggo nambah kehadiran media sosial utawa ngembangake portofolio pribadi, CodePen minangka pilihan sing luwih apik.
Versi Premium
Sampeyan duwe sawetara alternatif liyane kanggo milih saka ing CodePen. Yen sampeyan mbayar saben taun, sampeyan bisa entuk salah siji saka telung rencana premium kanthi rega $12, $19, utawa $39 saben wulan. Sampeyan bisa nggawe pulpen pribadi, kiriman, lan koleksi tanpa wates ing salah siji saka telung tingkatan kasebut.
Sampeyan uga bakal nampa lencana Pro (dorongan sosial), akses mode collab langsung, ora ana pariwara, lan liya-liyane. Ana uga strategi khusus tim tartamtu lan bedane lintas tingkat liyane. Priksa papan tagihan resmi kanggo informasi luwih lengkap.
Fitur Key
Saliyane nggawe HTML, CSS, lan JavaScript ing CodePen, ana sawetara perkara liyane sing mbedakake.
- Deleng kode sampeyan kanthi nyata bisa uga. Ora mbutuhake kompilasi.
- Eksperimen ngidini sampeyan sinau babagan anyar.
- Gawe kasus tes cilik kanggo nggoleki lan ngatasi masalah.
- Tuduhna karyamu sing apik tenan.
- Nggawe lan nyimpen Pens kanggo nggunakake mengko.
- Coba kode pangembang liyane lan deleng ing tumindak.
Kaluwihan
- Kanggo miwiti, ora ana biaya.
- Sumber belajar sing dibangun.
- Kolaborasi karo wong liya lan mbandhingake proyek kanggo ndeleng ing endi sing bakal ditindakake ing mangsa ngarep.
- UI iku gampang digunakake lan langsung.
cacat
- Pustaka kode cilik, completion otomatis kode ora nyukupi. Iku mung apik kanggo proyek siji-kaca lan ora bisa nangani apa-apa sing luwih gedhe.
- Ing CodePen, sampeyan bisa nggawe pena pribadi, nanging sampeyan kudu nganyarke dadi anggota Pro ($ 9 / wulan).
KodeSandbox
CodeSandbox minangka editor kode basis web. Ngotomatisasi manajemen transpiring, kemasan, lan ketergantungan kanggo sampeyan, ngidini sampeyan mbangun proyek anyar kanthi siji klik. Sawise sampeyan nggawe sesuatu sing nggumunake, sampeyan bisa enggo bareng karo wong liya kanthi mung nuduhake situs web kasebut.
Editor kompatibel karo proyek JavaScript apa wae, sanajan kalebu fitur khusus React tartamtu, kayata pilihan kanggo nyimpen proyek kasebut ing cithakan nggawe-react-app.
Sembarang proyek sing dibangun ing CodeSandbox diwiwiti kanthi cithakan. Bisa uga ana hubungane karo perpustakaan, kerangka, utawa runtime tartamtu (kalebu Node.js) utawa mung nggunakake teknologi web standar. Sawise milih cithakan, sampeyan bakal dikirim menyang editor, ing ngendi sampeyan bakal nemokake kabeh file sing dibutuhake lan jendhela pratinjau wis mbukak.
Sampeyan duwe akses menyang "sistem file" ing kabeh Sandbox, tegese sampeyan bisa nggawe file anyar, nggunakake modul (kalebu paket NPM), lan sesambungan karo aset statis. Ana uga kesempatan kanggo ngowahi file konfigurasi khusus cithakan.
Sampeyan bisa uga nggawe template dhewe kanggo kasus panggunaan unik, lengkap karo struktur file lan dependensi, kaya ing IDE. Amarga alat kasebut disambung menyang Github, sampeyan bisa kanthi cepet nggawe komitmen lan mbukak PR. Sampeyan bisa langsung nyebarake aplikasi menyang ZEIT utawa Netlify.
KodeSandbox Team Pro
CodeSandbox, bisnis Walanda sing ngidini pangembang kanggo mbangun kothak wedhi pangembangan aplikasi web adhedhasar browser, wis resmi ngluncurake platform kolaborasi sing ngidini tim bisa nggarap kode ing awan. Produk anyar, Team Pro, minangka solusi tanpa kode sing dibangun kanggo tim produk lengkap, wiwit saka desainer lan manajer liwat tim jaminan kualitas (QA) lan liya-liyane.
Proyek disedhiyakake ing antarmuka sing ramah pangguna kanggo sapa wae sing pengin nggawe utawa nampa owah-owahan ing aplikasi web, ngindhari cara alternatif kayata ngirim cathetan lan rekomendasi menyang pangembang kanggo nglakokake owah-owahan, ngirim maneh kanggo diskusi, lan mbaleni proses kasebut.
Fitur Key
- Editor kode basis web lan alat prototipe.
- Kanggo panggunaan lokal, kothak wedhi bisa didownload kanthi gampang ing file zip.
- programming wis rampung ing kothak wedhi, sing bisa dienggo bareng karo rekan kerja.
Kaluwihan
- Pengalaman pangguna sing luwih apik lan kontrol sing luwih gedhe babagan editor.
- Fitur pratinjau langsung bisa diowahi lan dideleng ing jendela sing kapisah.
- Kode kasebut kanthi otomatis diformat lan kalebu CLI (codesandbox-cli)
- Dhukungan kanggo modul npm majeng.
- Pesen kesalahan sing apik karo rekomendasi.
- Ngapikake pengalaman debugging kanthi nyedhiyakake terminal sing luwih apik, panampil tes, lan panampil masalah.
cacat
- Konsumen pungkasan kapapar akeh personalisasi.
- Seret lan selehake file saka komputer lokal ora bisa digunakake kanthi bener.
- Struktur folder tartamtu kudu ditindakake ing CodeSandbox.
- Fungsi kothak wedhi pribadi mung kasedhiya kanggo pelanggan.
StackBlitz
StackBlitz punika Visual Studio Code-powered online IDE kanggo aplikasi web. Platform kasebut responsif lan bisa adaptasi kaya versi desktop. StackBlitz minangka IDE online sing wis dimuat Sudut lan Reaksi piranti pangembangan.
Thinkster.io nggawe proyek sing luar biasa kasebut supaya gampang kanggo miwiti proyek Angular utawa React tanpa kudu kuwatir babagan instalasi ketergantungan utawa nggawe setelan. StackBlitz nyedhiyakake akeh fitur apik tenan lan unik sing ora ana editor kode online liyane saiki. Akibaté, luwih becik nliti StackBlitz lan nemokake apa sing ditawakake IDE online iki.
Stackblitz arang banget iso dibandhingke IDE lengkap, utamané yen sampeyan ora bisa ngomong pamit kanggo kode VS amarga alat adhedhasar iku. Paket kasebut nduweni macem-macem fitur sing ngidini sampeyan miwiti lan terus nggawe aplikasi tumpukan lengkap.
Program kasebut didhukung dening Visual Studio, sing kondhang ing antarane pangembang. Suntingan offline minangka fitur proyèk sing misuwur. Kanggo nindakake iki, tim Stackblitz nggawe server web ing browser. Nalika sampeyan ngetik, kanthi otomatis nginstal dependensi, kompilasi, bundel, lan nindakake reloading panas.
Versi Premium
Kadet, Astronot, lan Panglima kasedhiya gratis, $ 8 / sasi, lan $ 29 / sasi, mungguh. Astronot lan Panglima kalebu sawetara fitur kaya proyèk pribadi tanpa wates, upload file tanpa watesan, ngajak menyang saluran slack tim inti, lan liya-liyane. Kanggo informasi luwih lengkap, deleng papan tagihan resmi.
Fitur Key
- Nambahake paket NPM menyang proyek sampeyan.
- Thanks kanggo server dev in-browser novel, sampeyan bisa nyunting nalika offline.
- URL aplikasi sing dadi tuan rumah sing ngidini kita ngakses (lan nuduhake) aplikasi langsung kapan wae.
- Fitur Visual Studio Code liyane kalebu Intellisense, Panelusuran Proyek (Cmd/Ctrl+P), Go to Definition, lan liya-liyane.
Kaluwihan
- Kapabilitas Firebase kanggo panyebaran.
- Editor pancen gampang digunakake lan cepet banget.
- Pangguna duwe akses menyang package.json, index.html, lan index.js.
- Kode sumber sing bisa dienggo bareng sing uga bisa diselehake.
- Pratinjau langsung ing bagean gedhe ing kaca, kanthi pilihan mbukak ing kaca sing beda yen perlu.
- Nalika Offline, Ngedit
- Rampung cerdas lan Intellisense sing luwih apik.
- Inti saka Stackblitz punika mbukak sumber.
cacat
- Sampeyan ora duwe pengaruh ing bangunan utawa server pangembang amarga sing dikelola dening printah create-react-app.
- Ing React, struktur folder dhasar kudu diamati.
- Ora bisa ngowahi format kode kanthi otomatis, sanajan bisa ditindakake kanthi manual.
kesimpulan
Saiki, papan dolanan coding kaya sing wis dideleng ing ndhuwur bisa digunakake kanggo ngrampungake proyek web. Ora perlu nginstal IDE sing rumit ing PC nalika sampeyan bisa mbangun, debug, nyoba, lan masang langsung saka browser web.
Ing mratelakake panemume, StackBlitz bakal paling apik ing antarane wong-wong mau amarga iku IDE basis web sing ngidini JavaScript, Angular, lan proyèk pangembangan liyane langsung metu saka kothak, tanpa perlu nginstal lingkungan pangembangan lokal kaya Node.js, npm, utawa Sudut. Nyedhiyakake pengalaman sing padha karo nggunakake Visual Studio Code sacara lokal. Ing kasunyatan, amarga StackBlitz didhukung dening Visual Studio Code, krasa cepet lan serbaguna kaya versi desktop.
Endi saka CodePen, CodeSandbox, lan StackBlitz sing dadi alat sampeyan? Ayo kita ngerti ing komentar.
Abbatyya
Matur nuwun kanggo artikel sing apik iki, yen aku ndeleng stackblitz.com, aku ngerti iki sing dakkarepake.