Share
Quando ho scritto su JSBin per un po 'di tempo, ha sicuramente suscitato molte discussioni e dibattiti su quale editor di frammenti di codice online fosse il migliore. Un paio di alternative sono state buttate fuori, in particolare CodePen.
Con così tanti lettori che si sentivano così appassionati e impegnati nelle loro scelte specifiche, volevo fare una recensione che mettesse in risalto un po 'della freddezza di CodePen. Dirò che questo non è un articolo di confronto, soprattutto perché odio davvero fare quei tipi di articoli. Ognuno di questi strumenti è unico e offre il proprio valore che, a mio avviso, si riduce alle preferenze degli utenti, in molti casi.
Esistono sicuramente delle somiglianze tra gli strumenti, sia nell'interfaccia utente che nella funzionalità. Se guardiamo entrambi gli strumenti, vedremo che l'interfaccia utente multi-riquadro è abbastanza comune e per una buona ragione; è molto intuitivo.
JSBin:
CodePen:
L'approccio multi-pannello rende incredibilmente facile visualizzare tutti gli aspetti del codice di esempio, consentendo di aggiornare rapidamente markup o JavaScript e ottenere risultati immediati. Ed è per questo che questi strumenti sono generalmente; prototipazione rapida e test di frammenti di codice.
Oltre alle somiglianze dell'interfaccia utente, entrambi gli editor consentono agli utenti di:
Dal mio punto di vista, queste sono tutte funzionalità critiche per qualsiasi strumento di bin del codice, consentendo all'utente non solo di prototipare il codice front-end usando le risorse che usano comunemente, ma anche permettendo loro di condividerlo attraverso la maggior parte dei mezzi utilizzati dagli sviluppatori. Come scrittore tecnico, la possibilità di incorporare uno snippet dal vivo è incredibilmente importante in quanto fornisce un feedback in tempo reale per la dimostrazione del codice che creo, rinforzando i concetti di cui sto scrivendo, dando anche un vero feedback e codice al lettore.
In alcuni casi, la parità delle funzionalità si riduce al costo, a seconda che queste funzionalità siano disponibili o meno. Ad esempio, se desideri funzionalità di collaborazione, JSBin lo offre gratuitamente mentre è una funzionalità disponibile solo per l'offerta a livello Pro di CodePen. E per essere chiari (e l'ho già detto prima), penso che sia perfettamente corretto addebitare grandi funzioni. Quindi, se la funzionalità è gratuita o basata sull'abbonamento è irrilevante secondo me, a condizione che apporti valore all'utente.
Di tutti gli strumenti del codice bin che ho usato, posso certamente dire che CodePen è di gran lunga il più esteticamente gradevole e, onestamente, ha senso. Il design front-end di CodePen è stato creato dallo sviluppatore di grande talento, Chris Coyier, che ha un occhio straordinario per il design dell'interfaccia utente. E certamente mostra l'aspetto lucido dello strumento.
Si è pensato molto a fornire un facile accesso a una moltitudine di funzioni importanti, garantendo al tempo stesso che l'editor non sia ingombrato e che le funzionalità non siano invadenti. Questo è importante dal momento che il settore immobiliare viewport, in questo tipo di interfaccia utente, è stretto. Cercando di bilanciare tutto, fornire un'esperienza di codifica decente in più lingue, fornendo al contempo risultati immediati; È davvero difficile e costringe a pensare in termini di layout.
Ciò è chiaramente evidente nell'uso di icone ben posizionate all'interno delle intestazioni di ciascun riquadro di script.
Sfruttando un'icona dell'interfaccia utente comunemente utilizzata per le impostazioni (una marcia), puoi vedere come il team di CodePen ha ben consolidato un bel po 'di funzionalità importante e complementare che migliora l'esperienza di prototipazione. Questo è ciò che intendo per l'interfaccia utente non essere invadente: offrire scorciatoie intuitive per funzionalità extra. Ma è molto di più che introdurre funzionalità extra. Questi sono strumenti del mondo reale che gli sviluppatori Web utilizzano quotidianamente e sono importanti per avere un senso legittimo se il loro prototipo funzionerà o no.
Funzionalità come "Dettagli"view dimostra l'attenzione di CodePen nel fornire non solo una solida esperienza di editing, ma anche un forte angolo sociale che consente agli utenti di ottenere una migliore visibilità sull'utilità dei frammenti di codice che stanno condividendo:
Ora, mentre entrambi gli strumenti offrono ampie funzionalità complementari, a mio parere CodePen dimostra un chiaro orientamento verso la fornitura di strumenti migliori per i progettisti attraverso il suo ricco supporto per Sass, LESS e Stylus inclusi componenti aggiuntivi come Compass, Bourbon e Pennino.
Ma mentre splende in CSS e markup, CodePen non offre tanto quanto JSBin quando si tratta del supporto della libreria JavaScript. Non è detto che non includa molti dei principali attori, ma con la pletora di nuove librerie e framework in uso oggi, c'è una chiara differenza in termini di supporto integrato:
CodePen:
JSBin:
È chiaro da questi screenshot (che sono solo acquisizioni parziali) che l'ampiezza del supporto del framework JavaScript è molto più ampia di CodePen sia nei numeri che nelle versioni supportate. CodePen offre la possibilità di includere una risorsa JavaScript esterna nello snippet di codice, ma la comodità di poter fare clic su un menu a discesa e scegliere da una serie di framework JS è molto utile.
C'è una caratteristica, però, questo è un punto di forza per me e questo è questo:
Giusto. CodePen include l'integrazione con uno dei miei strumenti di test browser preferiti, BrowserStack.com. Ho già scritto sul servizio e lo adoro per la sua semplicità di test e l'ampiezza della copertura del browser, quindi vedere CodePen che offre l'integrazione con esso è un grande vantaggio. Ma è più di quel pulsante che lo rende fantastico. È il menu a discesa accanto che ti consente di decidere quale browser desideri scegliere come target:
... che poi ti indirizza a BrowserStack con le stesse informazioni:
In termini di convenienza, questa è una vittoria definitiva per gli sviluppatori. È importante notare che verrai reindirizzato da CodePen quando fai clic sul pulsante BrowserStack e avrai bisogno di un account BrowserStack per poterlo utilizzare.
CodePen è disponibile in edizione gratuita e più ricco di funzionalità professionista versione. Ciò include funzionalità per l'anteprima in tempo reale del codice su più dispositivi, la collaborazione con altri sviluppatori, la tematizzazione di penne di codice incorporate e l'intuitiva "Modalità professore", che è molto utile per corsi e corsi online.
Tra le funzioni Pro disponibili, le due che ritengo più utili sono le Dal vivo e Asset Hosting con quest'ultimo consente agli sviluppatori di caricare risorse come immagini e file di script che possono essere utilizzati direttamente nella penna del codice.
Potresti chiederti perché questo è utile? Bene, l'alternativa è trovare un'opzione di hosting esterna come una CDN o il proprio server. Essere in grado di caricare direttamente il proprio file JavaScript personalizzato, le immagini o il foglio di stile risolve questo problema e rende queste risorse prontamente disponibili da utilizzare nelle penne del codice. Una volta caricato, è sufficiente fare clic sulla risorsa, afferrarne l'URL e rilasciarlo nel codice:
Questo da solo merita i $ 9 al mese per utilizzare il servizio e sembra unico per CodePen.
La ragione per cui mi piace davvero Dal vivo la funzionalità è perché oggigiorno i test su diversi fattori di forma sono incredibilmente importanti. Questo viene fatto inviando il link della penna al dispositivo con cui si desidera testare. Ciò può essere fatto digitandolo direttamente nella barra degli URL del browser mobile o utilizzando la finestra di dialogo di condivisione di CodePen per inviare un messaggio di testo a un dispositivo mobile:
Quando la penna viene aggiornata sul computer, riflette quasi istantaneamente le modifiche su qualsiasi numero di dispositivi.
CodePen è un ottimo strumento. È molto lucido e ricco di funzionalità con un fantastico supporto per il markup e gli strumenti CSS. Il fatto che alcune funzionalità siano basate solo su abbonamento, non mi disturba un po 'dal momento che non mi dispiace supportare un buon software. Devo dire che alcune funzionalità sembrano essere una parte standard del servizio, in particolare la creazione di penne private e l'anteprima dal vivo, specialmente quando altri servizi lo offrono già gratuitamente.
Secondo me, avendo usato sia JSBin che CodePen, è chiaro che condividono capacità molto simili e la scelta del servizio da utilizzare, alla fine si riduce alle preferenze personali. Alcuni potrebbero apprezzare l'interfaccia utente professionale di CodePen, mentre altri potrebbero apprezzare l'ampiezza del supporto del framework JavaScript in JSBin. Potrebbe semplicemente ridursi a utilizzare entrambi per svolgere diversi compiti, ma posso dire che CodePen è sicuramente un servizio utile da sfruttare e lo aggiungerò ai miei strumenti del mestiere.
Accentsconagua