Gli ambienti di codifica locale sono fantastici, ma spesso non ho intenzione di aprire l'Espresso e passare qualche minuto a impostare il codice quando tutto ciò che voglio veramente è testare un'idea o lavorare su un bug. Inoltre, le opzioni di condivisione per la maggior parte delle app di codifica locali sono limitate e in genere richiedono l'integrazione di un'app esterna come Dropbox.
Campi da gioco online o sandbox come jsFiddle risolvono questo problema fornendoti un ambiente di codifica immediatamente pronto per iniziare a sperimentare non appena la pagina viene caricata. Questi strumenti ti consentono di combinare CSS, HTML e spesso anche JavaScript per creare e condividere esempi di codifica. Sono completamente dipendente da queste cose e ho ampiamente testato tutti quelli su cui riesco a mettere le mani. Oggi parlerò dei miei cinque preferiti e discuterò non solo del perché mi piace di ciascuna opzione, ma anche di dove non sono disponibili.
CSSDesk
Inizierò con CSSDesk perché è uno dei più vecchi in questa lista. È in uso da anni come un piccolo ed oscuro strumento estremamente utile per giocare con il codice web di base. CSSDesk è uno strumento molto semplice che si concentra esclusivamente su HTML e CSS.
Cosa mi piace di CSSDesk
Ci sono molte cose che mi piacciono di CSS Desk. Ci sono tre sezioni principali: HTML, CSS e anteprima dal vivo, le cui dimensioni possono essere facilmente modificate con un clic e trascinare. Mi piace il fatto che puoi vedere facilmente tutto ciò di cui hai bisogno in una semplice vista. Non c'è sforzo o configurazione qui, basta caricare la pagina e iniziare a creare.
C'è anche l'evidenziazione della sintassi di base, proprio come tutti gli altri strumenti presenti in questo elenco. Tuttavia, una caratteristica abbastanza unica che non si vede spesso in questi tipi di strumenti è rappresentata dai numeri di riga. È un'aggiunta così semplice ma tendo ad apprezzare i numeri di linea, quindi apprezzo molto l'inclusione.
Le funzionalità della barra degli strumenti sono piuttosto interessanti, con alcune opzioni che semplicemente non trovi in altri posti. Oltre alla funzione di condivisione standard, hai anche la possibilità di scaricare ciò che hai appena creato. Inoltre, c'è una serie di trame di sfondo di affiancamento predefinite che vengono applicate se non le sovrascrivi manualmente. Questi sono divertenti se stai semplicemente costruendo un pulsante o un widget di qualche tipo e vuoi qualcosa di diverso dal tipico sfondo bianco.
Cosa non mi piace di CSSDesk
Onestamente, non c'è molto da antipatia per questo. Certo, è semplice e non ha alcune delle caratteristiche fantasiose delle altre opzioni, ma è anche ciò che lo rende fantastico. Non uso quasi mai questo, ma ogni volta che lo faccio è così bello che dovrei fermarmi più spesso.
Il più grande svantaggio di codificatori hardcore è la mancanza di supporto JavaScript. Se questo è un affare per te, prova a controllare una delle altre opzioni.
JS Bin
JS Bin è un altro luogo popolare per armeggiare con il tuo codice. Il design di questa app è abbastanza minimale e ti permette davvero di concentrarti sul codice. Per impostazione predefinita, la pagina mostra solo i riquadri HTML e di anteprima dal vivo, ma è possibile aggiungere facilmente anche JavaScript.
Cosa mi piace di JS Bin
Ci sono alcune caratteristiche interessanti su JS Bin. La prima cosa che mi è sembrato di apprezzare è il fatto che l'aggiornamento della pagina non uccida il tuo lavoro. L'anteprima si aggiorna automaticamente, ma per quelle rare volte in cui hai bisogno di un aggiornamento manuale, è bello che il tuo primo istinto (Comando-R) non determini la perdita accidentale di un'ora di armeggiare.
Come con CSSDesk, salvi, condividi e scarica il tuo lavoro. Il luogo in cui questo ovviamente va avanti, sebbene sia l'implementazione di JavaScript. Puoi ovviamente inserire il tuo JS, ma come bonus puoi scegliere di includere librerie popolari come jQuery.
Un'altra caratteristica interessante è la possibilità di controllare quali pannelli si vedono manipolando l'URL. Ad esempio,? Http: //jsbin.com/#javascript,html,live? otterrà tutti e tre i riquadri mentre? http: //jsbin.com/#html,live? ti prenderò due.
Cosa non mi piace di JS Bin
Ad essere onesti, JS Bin è la mia opzione meno preferita in questa lista. Non è male, ma sicuramente manca il fascino degli altri. Una cosa che mi viene sempre in mente è che non esiste un posto dedicato per i CSS, che ti costringe a incorporarlo nel tuo codice HTML. Funziona bene, ma non è bello come la separazione intenzionale vista nelle altre opzioni.
jsFiddle
jsFiddle è completamente decollato negli ultimi mesi fino ad un anno ed è probabilmente l'opzione più popolare in questo elenco al momento. E per una buona ragione, questa è un'app fantastica. Ammettiamolo, una volta che hai scavato in jsFiddle, potresti non guardare mai più nessuna delle altre opzioni.
Cosa mi piace di jsFiddle
Ci sono un sacco di grandi cose da includere nel mio elenco dei motivi per cui dovresti usare jsFiddle. Il primo è il layout. Ci sono quattro pannelli (HTML, CSS, JavaScript e anteprima) in modo da poter vedere tutto ciò che è necessario in una sola volta e ridimensionare ogni area al volo. Il sistema di layout qui sembra davvero flessibile ed è davvero divertente da giocare.
Mentre stiamo discutendo i pannelli, puoi personalizzare i pannelli CSS e JavaScript per utilizzare i tuoi strumenti di terze parti preferiti. Troverai supporto per la sintassi Sass SCSS e CoffeeScript.
jsFiddle ti consente di creare un login e visualizzare un dashboard del tuo lavoro salvato passato. Ci sono un sacco di opzioni e strumenti di menu dopo aver salvato un violino, i miei preferiti sono la possibilità di creare rapidamente una forchetta e l'opzione per riordinare automaticamente la struttura del codice.
Oltre alle opzioni di personalizzazione del pannello, la barra laterale ha un sacco di altre fantastiche funzionalità. Ad esempio, è possibile aggiungere rapidamente entrambe le principali librerie che si desidera includere (jQuery, MooTools, ecc.) E le proprie risorse JavaScript / CSS.
Un'ultima fantastica opzione jsFiddle che ho appena scoperto l'altro giorno: puoi incorporare violini in una pagina web. Questa opzione si trova nel menu di condivisione ed è un'ottima alternativa ad altri servizi di inclusione del codice.
Cosa non mi piace su jsFiddle
Il mio manzo principale con jsFiddle è la mancanza di un'opzione di aggiornamento automatico per l'anteprima. Dopo aver utilizzato tutte le altre opzioni in questo elenco e provato le gioie dell'aggiornamento automatico, è difficile fare il refresh manuale ogni pochi secondi in jsFiddle.
Per quanto riguarda le altre funzionalità, è il migliore della lista, ma quel fastidio spesso mi spinge altrove se voglio solo fare un rapido test. Le scorciatoie da tastiera aiutano, ma non sono ancora così belle come qualcosa di automatico.
Dabblet
Dabblet è un ragazzo abbastanza nuovo sul blocco in questo genere. Come CSSDesk, si concentra solo su HTML e CSS senza JavaScript. Tuttavia, non contarlo perché porta qualche innovazione seria alla tabella che non troverai in nessun altro editor.
Cosa mi piace di Dabblet
Per impostazione predefinita, Dabblet è suddiviso in tre schede: CSS e risultati, HTML e risultati e risultati. Ciò fornisce flessibilità e attenzione mentre consente di tenere sempre d'occhio il risultato.
Puoi cambiare le cose con i controlli mostrati sotto. La divisione può essere verticale, orizzontale o completamente eliminata. C'è anche un codice interessante? Dietro? modalità in cui il risultato è semplicemente lo sfondo per l'area di codifica. Notate che c'è anche un messaggio sull'uso di un prefisso. Uso Dabblet tutto il tempo e non l'ho mai notato fino ad ora! Ciò significa che non devi usare prefissi pazzi del venditore e puoi codificare le semplici impostazioni predefinite, il JavaScript nascosto si assicurerà che i tuoi browser lo interpretino correttamente.
Dabblet ha anche alcune grandi opzioni di risparmio come? Salvare in modo anonimo.? Si collega anche al tuo account GitHub, che i nerd di codifica ameranno.
La mia caratteristica Dabblet preferita è l'integrazione dell'effetto hover super slick nel CSS. Sono più facili da mostrare che descrivono. Ecco due esempi:
Come puoi vedere, passando sopra alcuni bit di CSS vengono visualizzati questi piccoli tooltip che sono davvero grandiosi. È possibile ottenere anteprime per caratteri, colori, dimensioni e persino immagini.
Cosa non mi piace di Dabblet
Dabblet è un po 'bizzarro da una prospettiva visiva, o lo ami o lo odi. Personalmente mi diverto ad usarlo, ma vorrei davvero avere più controllo sulle dimensioni del pannello. Avere una suddivisione automatica 50/50 è ottima, ma dovrei essere in grado di regolarla manualmente, comunque scelgo.
Per quanto ne so, non c'è nemmeno modo di visualizzare il tuo HTML e CSS allo stesso tempo, il che è un po 'fastidioso se sei abituato a opzioni come jsFiddle in cui puoi tenere d'occhio tutto in una volta.
Tinkerbin
Tinkerbin è l'alternativa più vicina a jsFiddle che ho trovato. Anche se non ha tutte le caratteristiche fantastiche che si trovano in jsFiddle, ha alcuni trucchi che sono davvero carini.
Cosa mi piace di Tinkerbin
Il layout del pannello di default su Tinkerbin è probabilmente il mio preferito su questa intera lista. È un layout molto logico che colloca il codice sulla sinistra e una bella e grande anteprima di aggiornamento automatico sulla destra. Le sezioni HTML, CSS e JavaScript sono tutte impilate una sull'altra, con schede opzionali che consentono di concentrarsi solo su una di queste.
Inoltre, Tinkerbin supporta anche altre opzioni di sintassi alternative rispetto a jsFiddle. Puoi scegliere HTML o HAML; CSS, SCSS (con Compass), la vecchia sintassi SASS o LESS; e JavaScript o CoffeeScript. Inutile dire che, se si scavano i preprocessori, questa è l'opzione che fa per voi.
Tinkerbin è l'unica opzione che ti permette di sostituire la tua anteprima per una bella, ampia? Visualizza sorgente? finestra.
Quello che non mi piace di Tinkerbin
Ancor più di Dabblet, il layout di Tinkerbin è completamente rigido. Certo, mi piace l'impostazione predefinita migliore, ma a volte voglio rendere l'anteprima più ampia e semplicemente non ho l'opzione qui.
Inoltre, le opzioni di risparmio non sono le migliori. Non c'è alcuna configurazione dell'account, dashboard, integrazione con GitHub, ecc. Semplicemente salva i tuoi esperimenti su un URL abbreviato.
Conclusione
Ormai sono sicuro che puoi vedere i vantaggi di avere alcuni di questi siti segnalibro. Vi incoraggio a sperimentare il più spesso possibile con nuove idee per mantenervi freschi e questi servizi forniscono un fantastico modo per farlo.
Spero che questa recensione sia stata utile per dare un'occhiata ai dettagli di ciascuna di queste soluzioni. Ora dovresti sapere non solo ciò che rende unica ogni opzione, ma anche dove cade ogni cosa. Questo ti aiuterà a prendere una decisione informata su quale o due concentrarsi principalmente su.
Personalmente faccio un salto avanti e indietro con tutti regolarmente, ma ultimamente sono uscito per lo più in jsFiddle, Dabblet e Tinkerbin. Quale di questi è il tuo preferito e perché?