JsFiddle: un playground per i propri esperimenti con HTML, CSS e JS

Con una maturazione abbastanza lenta ma decisa, che lo ha portato ad essere uno strumento di una certa complessità , sta diventando sempre più utilizzato JsFiddle un sistema, completamente Web based, che, insieme ad altri suoi simili, può probabilmente vantarsi di aver creato una nuova categoria di applicazioni Web.

Probabile evoluzione di strumenti da sempre presenti usati per fare del veloce copia & incolla di porzioni di codice come (Pastebin, paste2, jsbin, jsFiddle permette di fare molto di più: scrivi del codice HTML, eventualmente del CSS, eventualmente anche del JavaScript e vedi subito il risultato "live". Tutto il codice viene renderizzato ed eseguito in una "sandbox" per cui qualsiasi esperimento ti passi per la mente non avrà  modo di influenzare tutto il resto del sito.

Sebbene sia (ormai da mesi e mesi) ancora in versione Alpha, lo strumento è già  usabilissimo. Presenta la viewport del browser suddivisa 4 porzioni - in senso orario, dall'alto a sinistra: dove scrivere la porzione di HTML, successivamente la porzione di finestra dove inserire il codice CSS ed eventualmente anche il CSS. Quello che poi si deve fare è usare il pulsante "Run", in alto sinistra in modo da mettere "tutto insieme" e vedere il risultato nella quarta porzione di schermo

Altre interessanti opzioni sono quelle che permettono di scegliere, per esempio, una libreria JavaScript da poter includere automaticamente nel test. Come potete vedere aprendo la seconda tendina sotto "Choose framework", nella spalla sinistra, le scelte sono veramente tante. Altre opzioni cambiano a seconda del framework selezionato (se per esempio scegliete di includere jQuery, vi sarà  data anche l'opzione di inserire jQueryUI).

La prima casella a discesa permette di scegliere inoltre se il codice JavaScript scritto da noi nell'apposita porzione del sito dovrà  essere eseguito come funzione al momento dell'onLoad/onDOMReady della pagina, oppure simulare l'inserimento all'interno dell'elemento HEAD o BODY dell'ipotetica pagina sui stiamo facendo le nostre prove.

àˆ inoltre addirittura possibile simulare delle chiamate AJAX usando delle funzionalità  server messe a disposizione come quella di "echo" (che non farà  che tornarvi indietro quello che avrete spedito).

Non manca inoltre la possibilità  di salvare i vostri test, eseguire un controllo sintattico con jslint oppure "pulire" il codice con Tidy (tutte opzioni accessibili dal menu in alto).

Gli utilizzi sono abbastanza disparati, ma personalmente ho trovato JSFiddle veramente molto utile quando ho dovuto preparare degli screencast per insegnare le basi di jQuery.

Lo sviluppatore è Piotr Zalewa, un ragazzo polacco molto simpatico che possiamo seguire su Twitter o su IRC (freenode) con il nick di Zalun. David Walsh lo ha anche intervistato.