Siti per scrivere e provare codice con anteprima in tempo reale

20 Siti come Codepen e JSFiddle per scrivere e provare righe di codice HTML, CSS e Javascript o progetti di app web con anteprima live

Sia per i principianti che vogliono imparare, sia per i professionisti esperti, ci sono alcuni siti web che permettono di provare righe di codice e vedere, in anteprima e quasi in tempo reale, il risultato. Si tratta di vere e proprie applicazioni con lo schermo diviso in due, dove da una parte si scrive il codice che può essere HTML, CSS, PHP, Javascript o altro, mentre dall'altra parte, dopo aver premuto un tasto per l'esecuzione, si vede effettivamente cosa appare se quel codice fosse all'interno di un sito web.
Questi non sono semplici editor di codice, ma luoghi in cui è possibile testare la programmazione senza preoccuparsi di fare errori e scoprire rapidamente dove si trovano gli errori. Codepen e JSFiddle sono i due siti più popolari di questa categoria, ma ci sono anche molte alternative.

Siti per provare codice online

1) CodePen

CodePen è il sito più popolare e usato dai programmatori perchè gratuito, intuitivo e facile da usare. Essendo diventato uno standard nel mondo dei programmatori, basta fare ricerche su Google per trovare pagine già compilate da Codepen e vedere immediatamente se è quello che si stava cercando. Le finestre di visualizzazione flessibili e l'esecuzione immediata del codice scritto lo rendono abbastanza perfetto per provare javascript e animazioni CSS, inoltre può facilmente connettersi a script esterni (React, Vue e qualsiasi altra cosa disponibile tramite CDN).
CodePen merita il primo posto di questa categoria, tuttavia alcune funzionalità sono a pagamento, come ad esempio la codifica collaborativa e la visualizzazioni live a pagina intera (le visualizzazioni live parziali sono gratuite).

2) JSFiddle
Al secondo posto (anche se cronologicamente è uno dei più antichi) nel mondo dei siti per scrivere e provare codice di programmazione c'è JSFiddle, orientato sopratutto alla creazione e test di JavaScript. Si può anche usare per il codice HTML e CSS e dal momento che supporta i suggerimenti per il completamento del codice e potrebbe anche essere preferibile rispetto CodePen per i meno esperti.
Un grande punto a favore di JSFiddle è che offre gratuitamente la modalità di collaborazione (inclusa la chat vocale e di testo), in modo da poter lavorare sul codice contemporaneamente ad altre persone.

3) Glitch
Molti siti di codice consentono di codificare HTML / CSS / JS e generare pagine Web statiche, mentre Glitch offre un piccolo spazio di archiviazione gratuito per salvare i progetti e rende abbastanza semplice eseguire codice lato server Node.js. Si può programmare su Glitch in modo collaborativo,
Viene inoltre fornito con una serie di altre fantastiche funzionalità: codifica collaborativa, controllo della versione, molte risorse di apprendimento, buona integrazione con GitHub, incorporamenti facili, una community per chiedere consigli, progetti già fatti che si possono modificare liberamente o utilizzare e l'integrazione di Visual Studio. Si tratta di un ottimo modo, semplice e veloce, per avviare un'app Web (o imparare a farlo).

4) CodeSandbox
CodeSandbox è simile a Glitch ma un po' più complesso e completo. CodeSandbox ha un'interfaccia più flessibile e personalizzabile, permette di distribuire app web complete, ha uno spazio per salvare i file e fa gran parte del lavoro di base lasciando al programmatore solo il compito di scrivere.

5) Repl.it
Repl.it è un ambiente di sviluppo per provare diversi tipi di linguaggi di programmazione come Python con il supporto del codice front-end e back-end, consente di distribuire siti e app, ha l'integrazione con GitHub e un'interfaccia intuitiva. Potrebbe essere un po' troppo difficile per chi sta solo provando a disegnare pagine web, ma per i programmatori già esperti è una risorsa da considerare. se stai solo progettando front-end o se sei nuovo nel codice, ma se programmi tutto regolarmente, vale la pena esplorare.

6) Liveweave è un web editor molto simile a JSFiddle, con cui scrivere e provare codice da usare su siti web, con funzionalità di anteprima live, suggerimenti sul codice per HTML5, CSS3, JavaScript e jQuery e che permette di scaricare il progetto come file zip. È inoltre possibile aggiungere abbastanza facilmente librerie esterne come jQuery, AndgularJS, Bootstrap.

7) CodeSandbox è uno spazio online gratuito dove è possibile avviare progetti di app web usando diversi framework, come React, Vue, Angular e tanto altro.

8) StackBlitz è un eccellente editor di applicazioni javascript, che supporta diversi framework come Vue e React.

9) Flems, sito minimalista, perfetto per fare prove veloci.

10) JSBin, una versione più minimalista di JSFiddle, per scrivere codice di pagine web e vedere come appare.

11) CSSDeck è un sito semplice per testare alcune idee in HTML / CSS e JS di base.

12) ICECoder, un altro ambiente online per provare codice, che richiede di scaricare un programma che viene eseguito nel browser ed utilizzabile anche offline.

13) Plunker, uno strumento front-end che permette di scrivere codice, file e pagine web e salvarle su Github.

14) Scrimba è un'innovativa combinazione di editor video e codice che è un perfetto ambiente di apprendimento per studenti e chi vuole imparare.

15) WebMaker, un creatore di applicazioni web con funzionalità offline e integrazione con CodePen.

16) Dabblet, per provare e scrivere codice HTML / CSS / JS con una bella grafica e correttore automatico per il codice CSS.

17) PlayCode è anche un ambiente per testare in tempo reale codice HTML / CSS / JS di base.

19) JSItor è un'altra alternativa a Codepen e JSFiddle, dove scrivere codice combinando HTML, CSS e Javascript e vedere subito il risultato.

LEGGI ANCHE: Siti per imparare a programmare giocando con corsi e sfide interattive