Sekä aloittelijoille, jotka haluavat oppia, että kokeneille ammattilaisille on joitain verkkosivustoja, joiden avulla voit kokeilla koodiriviä ja nähdä tuloksen esikatselussa ja melkein reaaliajassa. Nämä ovat todellisia sovelluksia, joissa näyttö on jaettu kahteen osaan, jossa voit toisaalta kirjoittaa koodin, joka voi olla HTML, CSS, PHP, Javascript tai muu, ja toisaalta, kun painat näppäintä suorittaaksesi, näet itse miltä näyttää, jos koodi olisi verkkosivuston sisällä.
Nämä eivät ole yksinkertaisia kooditoimittajia, mutta paikkoja, joissa voit testata ohjelmoinnin huolehtimatta virheiden tekemisestä ja selvittää nopeasti, missä virheet ovat. Codepen ja JSFiddle ovat tämän kategorian kaksi suosituinta sivustoa, mutta vaihtoehtoja on myös monia.
LUE LISÄÄ: Sovellusten ja verkkosivustojen tärkeimmät ohjelmointikielet
1) CodePen
CodePen on suosituin sivusto, jota ohjelmoijat käyttävät, koska se on ilmainen, intuitiivinen ja helppo käyttää. Tultuaan standardiksi ohjelmoijien maailmassa, etsi vain Google: lta löytääksesi Codepenin jo laatimat sivut ja katso heti, onko sitä mitä etsit. Joustavat katseluikkunat ja kirjoitetun koodin välitön suorittaminen tekevät siitä riittävän täydellisen kokeilla javascript- ja CSS-animaatioita. Lisäksi se voi helposti muodostaa yhteyden ulkoisiin komentosarjoihin (Reakt, Vue ja kaikki muu, joka on saatavana CDN: n kautta).
CodePen ansaitsee ensimmäisen sijan tässä kategoriassa, mutta jotkut ominaisuudet, kuten yhteistyökoodaukset ja koko sivun live-näkymät, ovat maksettuja (osittaiset live-näkymät ovat ilmaisia).
2) JSFiddle
Toiseksi (vaikkakin kronologisesti se on yksi vanhimmista) KS- koodien kirjoittamiseen ja kokeiluun tarkoitettujen sivustojen maailmassa on JSFiddle, joka on suunnattu ennen kaikkea JavaScriptin luomiseen ja testaamiseen. Sitä voidaan käyttää myös HTML: ssä ja CSS: ssä ja koska se tukee koodinvalmistusvihjeitä, ja se voi myös olla parempi CodePeniin nähden vähemmän kokeneille.
Suuri piste JSFiddlelle on, että se tarjoaa ilmaisen yhteistyötilan (mukaan lukien ääni- ja tekstikeskustelu), joten voit työskennellä koodilla samanaikaisesti muiden ihmisten kanssa.
3) Häiriö
Monien koodisivustojen avulla voit koodata HTML / CSS / JS ja luoda staattisia verkkosivuja, kun taas Glitch tarjoaa pienen ilmaisen tallennustilan projektien tallentamiseksi ja tekee melko helpoksi Node.js.-palvelimen puoleisen koodin suorittamisen. Voit ohjelmoida yhteistyössä Glitchissä,
Siihen kuuluu myös joukko muita fantastisia ominaisuuksia: yhteistyökoodaus, versionhallinta, monet oppimisresurssit, hyvä integraatio GitHubin kanssa, helppo upottaminen, yhteisö neuvojen kysymiseen, jo tehdyt projektit, joita voit vapaasti muokata tai käyttää, ja Visual Studion integrointi. Se on hieno, nopea ja helppo tapa aloittaa verkkosovellus (tai oppia kuinka tehdä).
4) CodeSandbox
CodeSandbox on samanlainen kuin Glitch, mutta hieman monimutkaisempi ja täydellisempi. CodeSandboxissa on joustavampi ja mukautettavampi käyttöliittymä, sen avulla voit jakaa täydellisiä verkkosovelluksia, sillä on tilaa tiedostojen tallennukselle ja se tekee suurimman osan perustyöstä jättäen ohjelmoijalle vain kirjoitustyön.
5) Vastaa
Repl.it on kehitysympäristö erityyppisten ohjelmointikieleiden, kuten Python, testaamiseen käyttöliittymän ja taustakoodin tuella. Sen avulla voit jakaa sivustoja ja sovelluksia, se on integroitu GitHubiin ja intuitiivinen käyttöliittymä. Se voi olla hiukan liian vaikea jokaiselle, joka vain yrittää suunnitella verkkosivuja, mutta jo kokeneille ohjelmoijille se on resurssi, jota kannattaa harkita. jos suunnittelet vain käyttöliittymää tai olet koodissa uusi, mutta jos suunnittelet kaikkea säännöllisesti, se kannattaa tutkia.
6) Liveweave on JSFiddle: hen hyvin samankaltainen web-editori, jonka avulla voidaan kirjoittaa ja testata koodia käytettäväksi verkkosivustoilla, live-esikatselutoiminnolla, HTML5: n, CSS3: n, JavaScriptin ja jQueryn koodivinkillä ja jonka avulla voit ladata projektin tiedostona zip. Voit myös lisätä ulkoisia kirjastoja, kuten jQuery, AndgularJS, Bootstrap, melko helposti.
7) CodeSandbox on ilmainen online-tila, jossa voit aloittaa verkkosovellusprojekteja käyttämällä erilaisia kehyksiä, kuten React, Vue, Angular ja paljon muuta.
8) StackBlitz on erinomainen javascript-sovelluseditori, joka tukee erilaisia kehyksiä, kuten Vue ja React.
9) Lennot, minimalistinen sivusto, täydellinen nopeiden testien tekemiseen.
10) JSBin, JSFiddlen minimalistisempi versio, joka kirjoittaa verkkosivun koodin ja näyttää miltä se näyttää.
11) CSSDeck on yksinkertainen sivusto joidenkin HTML / CSS- ja JS-ideoiden testaamiseen.
12) ICECoder, toinen verkkoympäristö koodin testaamiseen, joka edellyttää, että lataat ohjelman, joka toimii selaimessa ja jota voidaan käyttää myös offline-tilassa.
13) Plunker, käyttöliittymätyökalu, jonka avulla voit kirjoittaa koodia, tiedostoja ja verkkosivuja ja tallentaa ne Githubiin.
14) Scrimba on innovatiivinen yhdistelmä video- ja koodieditoria, joka on täydellinen oppimisympäristö opiskelijoille ja niille, jotka haluavat oppia.
15) WebMaker, verkkosovellusten luoja, jolla on offline-toiminnallisuus ja integrointi CodePeniin.
16) Dabblet, HTML / CSS / JS-koodin kirjoittamiseen mukavalla grafiikalla ja CSS-koodin automaattisella korjauksella.
17) PlayCode on myös ympäristö HTML / CSS / JS-peruskoodien reaaliaikaista testausta varten.
19) JSItor on toinen vaihtoehto Codepenille ja JSFiddleille, joissa voit kirjoittaa koodin yhdistämällä HTML, CSS ja Javascript ja nähdä tulokset heti.
LUE LISÄÄ: Sivustot, joissa opitaan ohjelmoimaan pelaamalla interaktiivisia kursseja ja haasteita
Nämä eivät ole yksinkertaisia kooditoimittajia, mutta paikkoja, joissa voit testata ohjelmoinnin huolehtimatta virheiden tekemisestä ja selvittää nopeasti, missä virheet ovat. Codepen ja JSFiddle ovat tämän kategorian kaksi suosituinta sivustoa, mutta vaihtoehtoja on myös monia.
LUE LISÄÄ: Sovellusten ja verkkosivustojen tärkeimmät ohjelmointikielet
Verkkokoodin testaamisivustot
1) CodePen
CodePen on suosituin sivusto, jota ohjelmoijat käyttävät, koska se on ilmainen, intuitiivinen ja helppo käyttää. Tultuaan standardiksi ohjelmoijien maailmassa, etsi vain Google: lta löytääksesi Codepenin jo laatimat sivut ja katso heti, onko sitä mitä etsit. Joustavat katseluikkunat ja kirjoitetun koodin välitön suorittaminen tekevät siitä riittävän täydellisen kokeilla javascript- ja CSS-animaatioita. Lisäksi se voi helposti muodostaa yhteyden ulkoisiin komentosarjoihin (Reakt, Vue ja kaikki muu, joka on saatavana CDN: n kautta).
CodePen ansaitsee ensimmäisen sijan tässä kategoriassa, mutta jotkut ominaisuudet, kuten yhteistyökoodaukset ja koko sivun live-näkymät, ovat maksettuja (osittaiset live-näkymät ovat ilmaisia).
2) JSFiddle
Toiseksi (vaikkakin kronologisesti se on yksi vanhimmista) KS- koodien kirjoittamiseen ja kokeiluun tarkoitettujen sivustojen maailmassa on JSFiddle, joka on suunnattu ennen kaikkea JavaScriptin luomiseen ja testaamiseen. Sitä voidaan käyttää myös HTML: ssä ja CSS: ssä ja koska se tukee koodinvalmistusvihjeitä, ja se voi myös olla parempi CodePeniin nähden vähemmän kokeneille.
Suuri piste JSFiddlelle on, että se tarjoaa ilmaisen yhteistyötilan (mukaan lukien ääni- ja tekstikeskustelu), joten voit työskennellä koodilla samanaikaisesti muiden ihmisten kanssa.
3) Häiriö
Monien koodisivustojen avulla voit koodata HTML / CSS / JS ja luoda staattisia verkkosivuja, kun taas Glitch tarjoaa pienen ilmaisen tallennustilan projektien tallentamiseksi ja tekee melko helpoksi Node.js.-palvelimen puoleisen koodin suorittamisen. Voit ohjelmoida yhteistyössä Glitchissä,
Siihen kuuluu myös joukko muita fantastisia ominaisuuksia: yhteistyökoodaus, versionhallinta, monet oppimisresurssit, hyvä integraatio GitHubin kanssa, helppo upottaminen, yhteisö neuvojen kysymiseen, jo tehdyt projektit, joita voit vapaasti muokata tai käyttää, ja Visual Studion integrointi. Se on hieno, nopea ja helppo tapa aloittaa verkkosovellus (tai oppia kuinka tehdä).
4) CodeSandbox
CodeSandbox on samanlainen kuin Glitch, mutta hieman monimutkaisempi ja täydellisempi. CodeSandboxissa on joustavampi ja mukautettavampi käyttöliittymä, sen avulla voit jakaa täydellisiä verkkosovelluksia, sillä on tilaa tiedostojen tallennukselle ja se tekee suurimman osan perustyöstä jättäen ohjelmoijalle vain kirjoitustyön.
5) Vastaa
Repl.it on kehitysympäristö erityyppisten ohjelmointikieleiden, kuten Python, testaamiseen käyttöliittymän ja taustakoodin tuella. Sen avulla voit jakaa sivustoja ja sovelluksia, se on integroitu GitHubiin ja intuitiivinen käyttöliittymä. Se voi olla hiukan liian vaikea jokaiselle, joka vain yrittää suunnitella verkkosivuja, mutta jo kokeneille ohjelmoijille se on resurssi, jota kannattaa harkita. jos suunnittelet vain käyttöliittymää tai olet koodissa uusi, mutta jos suunnittelet kaikkea säännöllisesti, se kannattaa tutkia.
6) Liveweave on JSFiddle: hen hyvin samankaltainen web-editori, jonka avulla voidaan kirjoittaa ja testata koodia käytettäväksi verkkosivustoilla, live-esikatselutoiminnolla, HTML5: n, CSS3: n, JavaScriptin ja jQueryn koodivinkillä ja jonka avulla voit ladata projektin tiedostona zip. Voit myös lisätä ulkoisia kirjastoja, kuten jQuery, AndgularJS, Bootstrap, melko helposti.
7) CodeSandbox on ilmainen online-tila, jossa voit aloittaa verkkosovellusprojekteja käyttämällä erilaisia kehyksiä, kuten React, Vue, Angular ja paljon muuta.
8) StackBlitz on erinomainen javascript-sovelluseditori, joka tukee erilaisia kehyksiä, kuten Vue ja React.
9) Lennot, minimalistinen sivusto, täydellinen nopeiden testien tekemiseen.
10) JSBin, JSFiddlen minimalistisempi versio, joka kirjoittaa verkkosivun koodin ja näyttää miltä se näyttää.
11) CSSDeck on yksinkertainen sivusto joidenkin HTML / CSS- ja JS-ideoiden testaamiseen.
12) ICECoder, toinen verkkoympäristö koodin testaamiseen, joka edellyttää, että lataat ohjelman, joka toimii selaimessa ja jota voidaan käyttää myös offline-tilassa.
13) Plunker, käyttöliittymätyökalu, jonka avulla voit kirjoittaa koodia, tiedostoja ja verkkosivuja ja tallentaa ne Githubiin.
14) Scrimba on innovatiivinen yhdistelmä video- ja koodieditoria, joka on täydellinen oppimisympäristö opiskelijoille ja niille, jotka haluavat oppia.
15) WebMaker, verkkosovellusten luoja, jolla on offline-toiminnallisuus ja integrointi CodePeniin.
16) Dabblet, HTML / CSS / JS-koodin kirjoittamiseen mukavalla grafiikalla ja CSS-koodin automaattisella korjauksella.
17) PlayCode on myös ympäristö HTML / CSS / JS-peruskoodien reaaliaikaista testausta varten.
19) JSItor on toinen vaihtoehto Codepenille ja JSFiddleille, joissa voit kirjoittaa koodin yhdistämällä HTML, CSS ja Javascript ja nähdä tulokset heti.
LUE LISÄÄ: Sivustot, joissa opitaan ohjelmoimaan pelaamalla interaktiivisia kursseja ja haasteita
