Se segui Chris Coyier su Twitter, hai sicuramente notato che negli ultimi mesi sono passate alcune citazioni di un progetto non così segreto chiamato CodePen. Chris ci ha promesso che questo nuovo strumento sarebbe entrato nelle fila di jsFiddle e Tinkerbin, servendo come una sorta di parco giochi online per sperimentare e condividere demo CSS, HTML e JavaScript.
Come un bambino di dicembre che aspettava con ansia il giorno di Natale, stavo morendo dalla voglia di vedere cosa avrebbero inventato Chris e il suo team. Fortunatamente, il Natale è arrivato. CodePen è un progetto dal vivo e non vedo l'ora di raccontartelo.
Buona compagnia
Recentemente, ho scritto un articolo che mette a confronto i primi cinque campi da gioco online per HTML, CSS e JavaScript. In questo articolo, mi sono immerso nel modo in cui ciascuna delle seguenti soluzioni funziona e delineato quello che faccio e non mi piace di ognuna di esse:
- CSSDesk
- JS Bin
- jsFiddle
- Dabblet
- Tinkerbin
Questi strumenti sono una leggera dipendenza per me e semplicemente non ne ho mai abbastanza di loro. Come potete vedere, il mercato è pieno di opzioni davvero grandiose, tutte con i loro punti di forza e di debolezza.
Dato che gli strumenti esistenti erano già così grandi, ero piuttosto ansioso di vedere l'unica direzione che CodePen avrebbe preso e se sarebbe diventata la mia app standard per gli esperimenti di web veloce. Vediamo se è all'altezza di quella speranza.
Incontra CodePen
Come puoi vedere nello screenshot qui sopra, CodePen è un sito dall'aspetto nitido. Raccogliendo l'interfaccia utente scura, la tavolozza dei colori CodePen assomiglia molto a quella di Photoshop CS6 con alcune trame di lino simili a quelle di Apple lanciate per buona misura.
Inoltre, un importante consiglio per i talentuosi designer e sviluppatori dietro questo sito per fare il passo in più di renderlo reattivo.
Un'esperienza più sociale
La cosa che mi è subito evidente su CodePen è che questo sito sposta leggermente l'attenzione rispetto agli altri nella sua classe. Con ogni altro sito che ho visto in questo modo, la home page fa apparire l'editor. L'enfasi è sul farti codificare non appena la pagina viene caricata. Ci sono funzionalità di condivisione, ma la condivisione viene effettuata direttamente da te attraverso l'incollatura dei link.
CodePen, tuttavia, riprende l'approccio Dribbble. La homepage è piena di esempi recenti di utenti che ti consentono di navigare e modificare il browser. Ci sono attualmente tre feed tra cui scegliere: Scelte del redattore, popolari e recenti.
Come puoi vedere, proprio come Dribbble, ogni? Pen? viene mostrato con due statistiche: tempi visualizzati e tempi amati. Inoltre, proprio come ti aspetti, puoi seguire gli utenti che pubblicano i contenuti che ti piacciono.
Per me, questo modello è infinitamente più probabile da raccogliere e decollare. Invece di un focus interiore sui singoli sviluppatori, questa app ha una forte attenzione per la comunità che garantirà agli utenti interesse a tornare settimanalmente o persino giornalmente per vedere quale nuova dolcezza hanno postato gli altri utenti.
Inoltre, nessuno può resistere al fascino di vedere il proprio numero crescere quando pubblicano qualcosa, così gli autori di talento avranno una chiara ragione per continuare a fare nuovi post.
Utilizzando CodePen
Quando ho visto l'editor CodePen per la prima volta, l'ho subito apprezzato. È pulito, attraente e fa semplicemente un uso superbo dello spazio disponibile.
disposizione
Gli altri siti di giochi di codice hanno cercato di decifrare il sistema perfetto per mostrare il tuo codice e la tua anteprima tutti insieme, ma per essere onesti alla fine mi sento frustrato con tutti loro per un motivo o per l'altro. Tuttavia, CodePen sembra come se avesse colpito la palla fuori dal parco.
Come puoi vedere, c'è un layout a tre colonne per HTML, CSS e JavaScript, che si trova in cima a un'anteprima live completa che si aggiorna senza il fastidio degli aggiornamenti manuali.
Funzionalità fantastiche
Ogni modulo di codice può essere espanso per occupare l'intera larghezza delle tre colonne, nascondendo così gli altri moduli, con una rapida scorciatoia da tastiera. Sfortunatamente, queste scorciatoie sono in disaccordo con le scorciatoie integrate di Safari, ma puoi anche fare clic su ?? 1? testo per espandere la colonna quindi non è un grosso problema.
I ragazzi dietro CodePen hanno fatto di tutto per assicurarti che tutta la più recente meraviglia di programmazione sia a tua disposizione. Ad esempio, il modulo HTML consente l'utilizzo di HAML, Markdown e Slim. La mia funzione preferita qui è in realtà completamente nascosta: CodePen supporta ZenCoding! Questa è stata la mia unica richiesta di funzionalità per questo nuovo strumento e sono entusiasta che abbia fatto il taglio.
Saltando sul modulo CSS, qui si ha accesso a LESS, Sass e SCSS, oltre a varie opzioni di reset e Prefix gratuito, che consente di utilizzare CSS3 senza il trambusto dei prefissi del browser. Un'altra caratteristica eccezionale: l'anteprima dal vivo continua ad essere aggiornata automaticamente anche se usi Preprocessor (Tinkerbin no).
Infine, il modulo JavaScript ti consente di usare CoffeeScript e lanciare alcune librerie comuni come jQuery e MooTools.
Se salti nelle impostazioni dell'account, puoi effettivamente modificare tutte le impostazioni predefinite in modo da non dover impostare il flusso di lavoro ogni volta. Rendi SCSS la tua lingua CSS predefinita, passa a una combinazione di colori chiari o scegli di includere sempre Modernizr.
Andare avanti
Quando stai codificando la tua piccola demo, CodePen ti offre quattro opzioni nella parte superiore dello schermo: Aggiornamento, Fork, Dettagli e Condividi (la penna di qualcun altro ti fornisce i pulsanti Fork, Share e Love). Il sistema di account CodePen è basato sull'API GitHub, quindi i fan Git si sentiranno come a casa.
C'è un interruttore in alto a destra dell'interfaccia che ti porta dalla vista Editor alla vista Dettagli. L'ultimo di questi è mostrato di seguito:
Qui puoi ottenere una descrizione completa della penna, visualizzare statistiche interessanti e lasciare? Bello? Commenti.
Qual è il verdetto?
Avevo grandi speranze per CodePen, aspettative che sarebbero state difficili da vivere per qualsiasi prodotto gratuito.Fortunatamente, è tutto ciò che volevo e di più. Come ho detto prima, ho amato tutti i precedenti tentativi di un'app come questa, ma sembravano tutti un po 'off ed erano frustranti a modo loro.
CodePen, al contrario, è semplicemente una gioia da usare. Non è solo lo strumento più bello del suo genere, è anche il più funzionale. Tutte le piccole funzionalità e opzioni che voglio utilizzare sono presenti e facili da implementare e l'aspetto sociale rende l'intera esperienza molto più di ciò che posso inventare, ed è esattamente il motivo per cui questo sito sarà enorme.
Cosa pensi?
Ora che hai visto il mio rant, vai sul sito CodePen, dagli un giro e torna per farmi sapere cosa ne pensi.
È la migliore utilità del suo genere? Com'è meglio degli altri cinque sopra menzionati? Com'è peggio? Mi piacerebbe sentire i tuoi pensieri!