8 Code Playground per imparare lo sviluppo web

Che tu sia un programmatore principiante o uno sviluppatore esperto, i playground del codice sono utili quando condividi e impari con gli altri.

Un code playground è un servizio online in cui è possibile scrivere, compilare (o eseguire) e condividere codice con altri. Ti danno anche la possibilità di biforcare e giocare con i codici degli altri.

Se stai imparando lo sviluppo web e stai praticando le tue abilità HTML o CSS, l'utilizzo di un playground di codice sarebbe utile per creare semplici pagine web online. Inoltre, potresti sfruttare i progetti di tendenza in quelle piattaforme e prenderli come risorse di apprendimento.

D'altra parte, se sei uno sviluppatore web professionista e vuoi mettere in mostra il tuo lavoro, i playground del codice sono il posto perfetto per farlo.

La parte migliore è che la maggior parte dei playground di codice ha un livello gratuito e puoi incorporare i risultati del codice nel tuo sito web.

Rivediamone alcuni!

JSFiddle

JSFiddle è un parco giochi di codice in cui è possibile testare frammenti HTML, CSS e Javascript. Proviene da un'app proof-of-concept nel 2009 e ora è uno dei più grandi playground di codice in circolazione.

Puoi creare un account gratuito, salvare tutti i tuoi violini e anche forkare gli snippet di altre persone.

Un'altra cosa impressionante di JSFiddle sono le sessioni di collaborazione. Puoi creare una sessione di chat audio durante la codifica nel violino.

Se sei un blogger che vuole incorporare il risultato di frammenti di codice e anche il loro codice sorgente, JSFiddle sarebbe un'ottima opzione con cui andare.

Ovviamente, al momento della scrittura, questo parco giochi di codice non supporta altri linguaggi di programmazione popolari come Python, Go o PHP, quindi non puoi aspettarti di creare un'app full-stack su di esso.

Caratteristiche

• Piattaforma gratuita per l'uso
• Interfaccia minimalista
• Supporto per HTML, CSS e JS
• Forcella qualsiasi snippet di violino pubblico sulla piattaforma
• Collabora con altre persone utilizzando la chat audio direttamente sul sito
• Buona documentazione

Codepen

Codepen non è solo un parco giochi del codice, ma una comunità di sviluppatori che vogliono migliorare le proprie capacità e condividere il miglior lavoro possibile.

Con oltre 6 milioni di utenti, è uno degli editor di codice online più utilizzati per lo sviluppo frontend. Se stai iniziando a imparare front-end, trovare idee e motivazione per continuare il tuo percorso di apprendimento è l'ideale.

E l'esperienza di sviluppo?

Posso dirti che Codepen ha un editor intuitivo con tre pannelli regolabili per codificare in HTML, CSS e JS. Codepen include il supporto integrato per Javascript e preprocessori CSS come Typescript e Sass. Inoltre, se ti affidi a un pacchetto npm, puoi installarlo dal pannello delle impostazioni.

Caratteristiche

• Piano professionale opzionale
• Editor di codice facile da usare
• Grande comunità
• La maggior parte dei codepen sono open-source
• Il luogo ideale per praticare lo sviluppo frontend

CodiceSandbox

La prototipazione di un sito Web potrebbe essere un compito difficile se non si dispone della configurazione corretta. L'utilizzo di CodeSandbox dovrebbe essere una decisione ovvia quando la priorità è creare rapidamente siti Web.

Come suggerisce il nome, CodeSandbox fornisce un ambiente sandbox per lo sviluppo frontend.

Dalle integrazioni GitHub e dagli strumenti di debug a un'esperienza personalizzabile simile al codice VS, questo parco giochi del codice ti offre tutto per iniziare a codificare in pochi secondi.

Se il tuo scopo principale è collaborare, tutto ciò di cui hai bisogno è condividere il tuo link sandbox e sarai pronto per programmare le coppie in tempo reale.

Ad esempio, puoi esplorare un elenco selezionato dei migliori sandbox.

Potrei finire il tempo per elencare tutte le caratteristiche di CodeSandbox, quindi menzioniamo le sue caratteristiche killer.

Caratteristiche

• Integrazione con GitHub
• Basato sull'editor Monaco che alimenta il popolare editor VScode
• Prima piattaforma di collaborazione
• Distribuisci su Vercel o Netlify
• Strumenti di debug
• Framework di test pronti all'uso
• supporto npm

Soloimpara

La popolare piattaforma di apprendimento del codice Sololearn ha il proprio parco giochi per il codice per lo sviluppo web.

Ad essere onesti, non è un IDE completo come gli altri editor online che abbiamo visto nell'articolo, ma offre un ambiente privo di distrazioni in cui è possibile scrivere ed eseguire codice.

Questo dovrebbe essere più che sufficiente se stai appena iniziando con la programmazione.

Un'altra cosa interessante di Sololearn è la grande comunità e il supporto per diversi linguaggi di programmazione, il che è abbastanza buono se vuoi giocare con altre tecnologie.

Caratteristiche

• Gratuito da usare con il tuo account Sololearn
• Semplice editor di codice online
• Grande comunità per condividere il tuo codice
• Supporto per più lingue
• Un grande ecosistema con i corsi Sololearn

Per riassumere, il parco giochi del codice di Sololearn non include la batteria, ma funziona come dovrebbe essere, e se fai già parte dei milioni di studenti solisti, dovresti provarlo.

Codeply

La cosa migliore di Codeply è il supporto per più framework e librerie pronti all'uso e l'editor di codice reattivo orientato al design.

Se stai appena iniziando con un nuovo framework come React, Vue o Angular, Codeply è un ottimo punto di partenza grazie a un set completo di modelli di partenza e una grande comunità di oltre 40k sviluppatori.

Caratteristiche

• Piattaforma gratuita per l'uso
• Documentazione semplice ma diretta
• Piano pro a pagamento una tantum
• Include oltre 50 librerie
• Metti alla prova il tuo web con diverse risoluzioni dello schermo

replica

Replit è forse l'IDE online più adatto per ogni sviluppatore. Include letteralmente tutto ciò di cui avresti bisogno per creare, da una semplice home page a un'app Web complessa utilizzando qualsiasi moderna libreria JS.

Con Replit, puoi codificare in oltre 50 lingue, scrivere app in modo sincrono con i tuoi colleghi, testare i tuoi programmi, integrarti con GitHub e accedere a una delle più grandi comunità di sviluppatori in circolazione.

Potrei letteralmente rimanere senza carta menzionando tutte le funzionalità di Replit, quindi passiamo alle principali.

Caratteristiche

• Lo starter pack gratuito o il piano hacker da 5$/mese
• Modalità multiplayer (programmazione live pair)
• Grande comunità
• Molte lingue supportate
• Personalizzazione dell'editor
• Pulsante Esegui: esegui il progetto con azioni personalizzabili
• Deposito segreto
• Codice ospitato

StackBlitz

Se non puoi vivere senza codice VS, StackBlitz è l'opzione giusta per te. Proprio come CodeSandbox, si basa sull'editor Monaco , che alimenta questo popolare editor di codice.

Accedi con il tuo account GitHub e voilà! Hai accesso a un ambiente familiare.

A parte l'esperienza dell'editor di codice, è un parco giochi piuttosto solido. Puoi utilizzare modelli pronti all'uso per framework frontend e librerie come React, Vue, Angular, Svelte e Ionic.

Ma la principale particolarità di questo strumento è la capacità di giocare con framework di backend come Node.js, Next.js e GraphQL.

Caratteristiche

• Piano "Cadetti" gratuito
• Esperienza di codice VS all'interno del tuo browser. Ciò include Intellisense, Ricerca progetto e altro.
• Esperienza di codifica fluida (davvero fluida)
• Editor di codice offline (Ehi! Potrebbe essere utile se ti disconnetti per un giorno o due)
• URL dell'app ospitata: facile condivisione live

glitch

Ultimo ma non meno importante, Glitch è un ambiente di programmazione collaborativo che semplifica la creazione di un'app Web.

Ha una delle interfacce più divertenti da codificare! Basta dare un'occhiata:

Nel caso ve lo stiate chiedendo, sì, ha una modalità oscura.

A parte la bellissima interfaccia, Glitch viene utilizzato da milioni di persone per la sua usabilità, la programmazione di coppie live e la comunità amichevole.

Puoi creare qualsiasi tipo di app full-stack utilizzando non solo HTML, CSS e JS, ma Node.js (Backend), React o Eleventy (che non sapevo esistesse prima di entrare nella pagina Glitch).

Caratteristiche

• Piano gratuito con un'opzione per l'aggiornamento
• Sviluppa app full-stack nel tuo browser
• Programmazione in coppia dal vivo
• Interfaccia piacevole
• App per principianti
• Remixa (o fork) le app pubbliche di altri

Conclusione

Al giorno d'oggi, puoi creare interamente qualsiasi app Web utilizzando un parco giochi di codice come quelli che abbiamo visto sopra. Non è più necessario scaricare pesanti IDE sul tuo computer, mentre puoi creare, eseguire il debug, testare e distribuire senza uscire dal browser web.

Se non sei abbastanza sicuro di passare all'utilizzo di questi strumenti, perché non dai un'occhiata ai 10 migliori editor di codice (quelli che devi installare sul tuo computer).