Pre začiatočníkov, ktorí sa chcú učiť, ako aj pre skúsených profesionálov, sú niektoré webové stránky, ktoré vám umožňujú vyskúšať si riadky kódu a zobraziť výsledok takmer v reálnom čase. Toto sú skutočné aplikácie s obrazovkou rozdelenou na dve časti, kde na jednej strane napíšete kód, ktorým môže byť HTML, CSS, PHP, Javascript alebo iné, zatiaľ čo na druhej strane po stlačení klávesu spustíte, skutočne vidíte, ako to vyzerá, keby sa tento kód nachádzal na webovej stránke.
Nejedná sa o jednoduché editory kódu, ale o miesta, kde môžete otestovať svoje programovanie bez obáv z chýb a rýchlo zistiť, kde sú chyby. Codepen a JSFiddle sú dve najobľúbenejšie stránky v tejto kategórii, existuje však aj veľa alternatív.
READ ALSO: Hlavné programovacie jazyky používané pre aplikácie a webové stránky
1) CodePen
CodePen je najobľúbenejší web, ktorý používajú programátori, pretože je bezplatný, intuitívny a ľahko použiteľný. Keď ste sa stali štandardom vo svete programátorov, jednoducho vyhľadajte na webe Google, aby ste našli stránky, ktoré už zostavil Codepen, a okamžite zistite, či ste hľadali to, čo ste hľadali. Vďaka flexibilným oknám na prezeranie a okamžitému vykonaniu napísaného kódu je možné vyskúšať animácie javascript a CSS, ktoré sa navyše dajú ľahko pripojiť k externým skriptom (React, Vue a čokoľvek iné dostupné prostredníctvom CDN).
CodePen si zaslúži prvé miesto v tejto kategórii, avšak niektoré funkcie sú platené, napríklad spoločné kódovanie a živé zobrazenia na celej stránke (čiastočné živé zobrazenia sú zadarmo).
2) JSFiddle
Na druhom mieste (aj keď chronologicky je to jedno z najstarších) vo svete webov na písanie a vyskúšanie programovacieho kódu je JSFiddle, orientovaný predovšetkým na tvorbu a testovanie JavaScriptu. Môže byť tiež použitý pre HTML a CSS a pretože podporuje tipy na dokončenie kódu a pre menej skúsených môže byť tiež výhodnejší ako CodePen.
Veľkým bodom v prospech JSFiddle je, že ponúka režim bezplatnej spolupráce (vrátane hlasového a textového chatu), takže môžete na kóde pracovať súčasne s ostatnými ľuďmi.
3) Závada
Mnoho kódových webov vám umožňuje kódovať HTML / CSS / JS a generovať statické webové stránky, zatiaľ čo Glitch ponúka malý voľný úložný priestor na uloženie projektov a pomerne ľahko sa spúšťa kód na strane servera Node.js. Môžete spolupracovať v programe Glitch,
Tiež prichádza s množstvom ďalších fantastických funkcií: spoločné kódovanie, kontrola verzií, veľa učebných zdrojov, dobrá integrácia s GitHub, ľahké vkladanie, komunita so žiadosťou o radu, už vyrobené projekty, ktoré môžete voľne upravovať alebo používať, a Integrácia Visual Studio. Je to skvelý, rýchly a ľahký spôsob, ako spustiť webovú aplikáciu (alebo sa naučiť, ako to urobiť).
4) CodeSandbox
CodeSandbox je podobný závada, ale trochu zložitejšie a kompletné. CodeSandbox má flexibilnejšie a prispôsobiteľnejšie rozhranie, umožňuje vám distribuovať kompletné webové aplikácie, má priestor na ukladanie súborov a robí väčšinu základnej práce, takže programátor zostáva iba na písaní.
5) Repl.it
Repl.it je vývojové prostredie na testovanie rôznych typov programovacích jazykov, ako je Python, s podporou front-end a back-end kódu, umožňuje vám distribuovať weby a aplikácie, má integráciu s GitHub a intuitívne rozhranie. Pre každého, kto sa snaží navrhovať webové stránky, to môže byť príliš ťažké, ale pre skúsených programátorov je to zdroj, ktorý treba zvážiť. Ak plánujete iba klientske rozhranie alebo ak ste v kóde nový, ale ak všetko pravidelne plánujete, stojí za to preskúmať.
6) Liveweave je webový editor veľmi podobný JSFiddle, s ktorým môžete písať a skúšať kód, ktorý sa má používať na webových stránkach, s funkciou živého náhľadu, tipmi na kódy pre HTML5, CSS3, JavaScript a jQuery a ktorý vám umožňuje sťahovať projekt ako súbor. zips. Môžete tiež pridať externé knižnice ako jQuery, AndgularJS, Bootstrap pomerne ľahko.
7) CodeSandbox je bezplatný online priestor, kde môžete spustiť projekty webových aplikácií pomocou rôznych rámcov, napríklad React, Vue, Angular a oveľa viac.
8) StackBlitz je vynikajúci editor aplikácií Javascript, ktorý podporuje rôzne rámce, napríklad Vue a React.
9) Flems, minimalistický web, ideálny na rýchle testy.
10) JSBin, minimalistickejšia verzia JSFiddle, písať kód webovej stránky a vidieť, ako to vyzerá.
11) CSSDeck je jednoduché miesto na testovanie niektorých základných nápadov HTML / CSS a JS.
12) ICECoder, ďalšie online prostredie na testovanie kódu, ktoré vyžaduje, aby ste si stiahli program, ktorý beží v prehliadači a ktorý sa dá použiť aj offline.
13) Plunker, front-end nástroj, ktorý vám umožní písať kód, súbory a webové stránky a ukladať ich na Github.
14) Scrimba je inovatívna kombinácia editora videa a kódu, ktorý je dokonalým vzdelávacím prostredím pre študentov a tých, ktorí sa chcú učiť.
15) WebMaker, tvorca webových aplikácií s funkciou offline a integráciou s programom CodePen.
16) Dabblet, vyskúšať a písať HTML / CSS / JS kód s peknou grafikou a automatickým korektorom pre CSS kód.
17) PlayCode je tiež prostredie na testovanie základného kódu HTML / CSS / JS v reálnom čase.
19) JSItor je ďalšou alternatívou k Codepen a JSFiddle, kde môžete písať kód kombináciou HTML, CSS a Javascript a okamžite vidieť výsledok.
ČÍTAJTE TIEŽ: Stránky, kde sa môžete naučiť programovať hraním s interaktívnymi kurzami a výzvami
Nejedná sa o jednoduché editory kódu, ale o miesta, kde môžete otestovať svoje programovanie bez obáv z chýb a rýchlo zistiť, kde sú chyby. Codepen a JSFiddle sú dve najobľúbenejšie stránky v tejto kategórii, existuje však aj veľa alternatív.
READ ALSO: Hlavné programovacie jazyky používané pre aplikácie a webové stránky
Webové stránky na testovanie online kódu
1) CodePen
CodePen je najobľúbenejší web, ktorý používajú programátori, pretože je bezplatný, intuitívny a ľahko použiteľný. Keď ste sa stali štandardom vo svete programátorov, jednoducho vyhľadajte na webe Google, aby ste našli stránky, ktoré už zostavil Codepen, a okamžite zistite, či ste hľadali to, čo ste hľadali. Vďaka flexibilným oknám na prezeranie a okamžitému vykonaniu napísaného kódu je možné vyskúšať animácie javascript a CSS, ktoré sa navyše dajú ľahko pripojiť k externým skriptom (React, Vue a čokoľvek iné dostupné prostredníctvom CDN).
CodePen si zaslúži prvé miesto v tejto kategórii, avšak niektoré funkcie sú platené, napríklad spoločné kódovanie a živé zobrazenia na celej stránke (čiastočné živé zobrazenia sú zadarmo).
2) JSFiddle
Na druhom mieste (aj keď chronologicky je to jedno z najstarších) vo svete webov na písanie a vyskúšanie programovacieho kódu je JSFiddle, orientovaný predovšetkým na tvorbu a testovanie JavaScriptu. Môže byť tiež použitý pre HTML a CSS a pretože podporuje tipy na dokončenie kódu a pre menej skúsených môže byť tiež výhodnejší ako CodePen.
Veľkým bodom v prospech JSFiddle je, že ponúka režim bezplatnej spolupráce (vrátane hlasového a textového chatu), takže môžete na kóde pracovať súčasne s ostatnými ľuďmi.
3) Závada
Mnoho kódových webov vám umožňuje kódovať HTML / CSS / JS a generovať statické webové stránky, zatiaľ čo Glitch ponúka malý voľný úložný priestor na uloženie projektov a pomerne ľahko sa spúšťa kód na strane servera Node.js. Môžete spolupracovať v programe Glitch,
Tiež prichádza s množstvom ďalších fantastických funkcií: spoločné kódovanie, kontrola verzií, veľa učebných zdrojov, dobrá integrácia s GitHub, ľahké vkladanie, komunita so žiadosťou o radu, už vyrobené projekty, ktoré môžete voľne upravovať alebo používať, a Integrácia Visual Studio. Je to skvelý, rýchly a ľahký spôsob, ako spustiť webovú aplikáciu (alebo sa naučiť, ako to urobiť).
4) CodeSandbox
CodeSandbox je podobný závada, ale trochu zložitejšie a kompletné. CodeSandbox má flexibilnejšie a prispôsobiteľnejšie rozhranie, umožňuje vám distribuovať kompletné webové aplikácie, má priestor na ukladanie súborov a robí väčšinu základnej práce, takže programátor zostáva iba na písaní.
5) Repl.it
Repl.it je vývojové prostredie na testovanie rôznych typov programovacích jazykov, ako je Python, s podporou front-end a back-end kódu, umožňuje vám distribuovať weby a aplikácie, má integráciu s GitHub a intuitívne rozhranie. Pre každého, kto sa snaží navrhovať webové stránky, to môže byť príliš ťažké, ale pre skúsených programátorov je to zdroj, ktorý treba zvážiť. Ak plánujete iba klientske rozhranie alebo ak ste v kóde nový, ale ak všetko pravidelne plánujete, stojí za to preskúmať.
6) Liveweave je webový editor veľmi podobný JSFiddle, s ktorým môžete písať a skúšať kód, ktorý sa má používať na webových stránkach, s funkciou živého náhľadu, tipmi na kódy pre HTML5, CSS3, JavaScript a jQuery a ktorý vám umožňuje sťahovať projekt ako súbor. zips. Môžete tiež pridať externé knižnice ako jQuery, AndgularJS, Bootstrap pomerne ľahko.
7) CodeSandbox je bezplatný online priestor, kde môžete spustiť projekty webových aplikácií pomocou rôznych rámcov, napríklad React, Vue, Angular a oveľa viac.
8) StackBlitz je vynikajúci editor aplikácií Javascript, ktorý podporuje rôzne rámce, napríklad Vue a React.
9) Flems, minimalistický web, ideálny na rýchle testy.
10) JSBin, minimalistickejšia verzia JSFiddle, písať kód webovej stránky a vidieť, ako to vyzerá.
11) CSSDeck je jednoduché miesto na testovanie niektorých základných nápadov HTML / CSS a JS.
12) ICECoder, ďalšie online prostredie na testovanie kódu, ktoré vyžaduje, aby ste si stiahli program, ktorý beží v prehliadači a ktorý sa dá použiť aj offline.
13) Plunker, front-end nástroj, ktorý vám umožní písať kód, súbory a webové stránky a ukladať ich na Github.
14) Scrimba je inovatívna kombinácia editora videa a kódu, ktorý je dokonalým vzdelávacím prostredím pre študentov a tých, ktorí sa chcú učiť.
15) WebMaker, tvorca webových aplikácií s funkciou offline a integráciou s programom CodePen.
16) Dabblet, vyskúšať a písať HTML / CSS / JS kód s peknou grafikou a automatickým korektorom pre CSS kód.
17) PlayCode je tiež prostredie na testovanie základného kódu HTML / CSS / JS v reálnom čase.
19) JSItor je ďalšou alternatívou k Codepen a JSFiddle, kde môžete písať kód kombináciou HTML, CSS a Javascript a okamžite vidieť výsledok.
ČÍTAJTE TIEŽ: Stránky, kde sa môžete naučiť programovať hraním s interaktívnymi kurzami a výzvami
