Usare CodePen per testare codice HTML, CSS e Javascript.

Come funziona CodePen l'Editor online HTML, CSS e Javascript per testare il codice e avere la demo del risultato visivo.

Nei numerosi articoli che ho scritto ho dovuto testare molte volte del codice prima di presentarlo ai lettori. Molto spesso ho linkato dei blog di Demo in cui avevo inserito il widget o la personalizzazione, altre volte mi sono semplicemente affidato a dei tool online per verificare che il codice funzionasse correttamente.

Quello che in assoluto ho usato maggiormente è stato il Real Time HTML Editor in cui si può incollare codice HTML, CSS e Javascript esattamente come si farebbe in una pagina web. Un altro servizio utile in questo senso è JsFiddle che permette di inserire cvodice HTML, CSS e javascript in aree separate e di usare librerie javascript come JQuery, Mootools o Prototype. JsFiddle è anche utilizzabile mediante una estensione di Chrome e rispetto a Real Time HTML Editor ha il vantaggio che si può salvare il lavoro per poi presentarlo come Demo senza la necessità di pubblicare una pagina apposita.

CodePen è molto simile a JsFiddle ma per certi versi è anche migliore. Nella home sono visibili una gran quantità di realizzazioni salvate da altri utenti che possono dare grandi spunti e che possono essere usate nei nostri siti. Per ottenere un account basta andare su CodePen Signup e scegliere quello gratuito. Sarà sufficiente inserire nome, email, username e la password. Il profilo di ciascun utente si troverà all'indirizzo codepen.io/username. L'accesso sarà immediato e potremo iniziare da subito

 

Si può cliccare su uno dei lavori postati oppure cercare tramite l'apposita casella posta sulla destra. È possibile diventare dei follower di altri utenti per essere subito informati dei codici che hanno postato. Nella parte bassa di ciascuna miniatura ci sono tre numeri che indicano il numero di commenti, il numero di visualizzazioni e il numero di click sul cuoricino che sono stati ricevuti.

Per testare un nostro codice dobbiamo andare su New Pen o digitare Ctrl+P

Ricordo che il codice HTML si incolla in una pagina web così come è. Il codice CSS invece si inserisce tra i tag <style> e </style> oppure tra <style type="text/css"> e </style>. Infine il codice javascript si incolla tra i tag <script> e </script> oppure tra i tag <script type="text/javascript"> e </script>. Su CodePen questi codici vanno inseriti in tre distinti riquadri

Nella parte bassa si vedrà il risultato visivo del codice immesso. Andando su Save si può salvare il lavoro per riprenderlo in seguito e andando su Share si può avere il suo link di condivisione da incollare in un post, in un commento o da inviare via email. Per visualizzare i link non occorre essere loggati su CodePen. Una grande particolarità di questo servizio è che chiunque può editare il codice per vedere in tempo reale che effetto abbiano le modifiche apportate.

• Menù a Libro su CodePen -

Andando su Info si può dare il nome al Pen, inserire una breve descrizione dello stesso e aggiungere dei tag separati da delle virgole per favorire la sua ricerca da parte degli altri utenti

Andando invece su Fork si può copiare il Pen corrente per poi visualizzarlo nel nostro account e modificarlo a piacere. Per maggiore chiarezza ho realizzato un Pen con il codice del Menù Colorato ruotante che può essere aperto in queste due pagine

1. Demo del codice del Menù Colorato su CodePen -
2. Demo del Menù Colorato a tutta pagina -

Per avere il link della sola Demo senza codice bisogna cliccare su Share > Full Page.

È anche possibile esportare la nostra realizzazione in formato ZIP, salvarla su GitHub o condividerla su Twitter, Facebook e Google+. I Pen possono anche essere incorporati (embedded) ed è possibile caricare le librerie javascript più importanti esattamente come su JsFiddle. Per completezza riporto anche il link alla Documentazione di CodePen e quello al suo Blog Ufficiale.