19 Feb , 2022 — Web Design, Sviluppo Web

9 motivi per usare CodePen

Quali sono i 9 motivi per usare Codepen? CodePen è una comunità e piattaforma online di programmatori e sviluppatori dove si testano e mostrano frammenti di codice HTML, CSS e JavaScript creati dagli stessi utenti.
È stato fondato nel 2012 dagli sviluppatori full-stack Alex Vazquez e Tim Sabat e dal designer di front-end Chris Coyier. I suoi dipendenti lavorano in smart working da sempre e raramente tutti si incontrano di persona.
CodePen è tra le più grandi comunità di web designer e sviluppatori dove utilizzano la piattaforma per mostrare le proprie abilità e conoscenza di programmazione.
Si stima che la piattaforma abbia più di 330.000 utenti registrati e di 14,16 milioni di visitatori mensili.

Loro stessi si descrivono come un “parco giochi per il lato front-end del Web”. CodePen è ottimo per testare bug, collaborare e trovare nuove ispirazioni. Puoi quindi visualizzare “pens” sul tuo profilo, ricevere feedback e continuare a modificare i tuoi “pens” o quelle degli altri in qualsiasi momento.

Come in altri playground di codice live, CodePen ti consente di apprendere in un ambiente open source, visualizzando un’anteprima in tempo reale delle modifiche al codice e persino di incorporare le demo di CodePen su qualsiasi pagina web o per rendere il proprio sito web accattivante e al passo con i tempi.

In questo post andremo a vedere oltre le funzionalità sopra menzionate, anche alcune caratteristiche che penso mettano CodePen al di sopra delle altre piattaforme di sviluppo opera source e per quale ragione dovresti provare in prima persona se non lo hai già fatto.

Iniziamo a vedere i 9 motivi per usare CodePen

Opzioni CSS

CodePen include alcune fantastiche funzioni per scrivere CSS in modo veloce. Puoi scegliere di utilizzare Normalize.css o Reset.css per il tuo CSS semplicemente cliccando sul pulsante opzione. Puoi anche scegliere di utilizzare Prefix-free o anche Autoprefixer. In questo modo non è necessario dedicare tempo al collegamento a un file esterno.

Uno dei 9 motivi per usare CodePen è per le Diverse versioni di HTML, CSS, and JavaScript supportate

CodePen supporta tantissime versioni di HTML, CSS e JavaScript. Per HTML, puoi usare HAML, Markdown, Slim o persino Jade. I CSS, supportano Sass e SCSS (entrambi con un componente aggiuntivo Compass o Bourbon opzionale) e anche Less e Stylus.

Sotto il menu JavaScript, puoi selezionare CoffeeScript o LiveScript. C’è anche un menu a discesa dove puoi avere l’ultima versione di cose come jQuery e AngularJS.

Emmet and Vim Binding

CodePen vuol dire sviluppare in modo veloce e fluido. Questo, grazie anche all’utilizzo di due tools che rendono il lavoro intuitivo e di semplice programmazione, come Emmet, un toolkit di suggerimenti di codice per sviluppatori e a Vim Key Bindings che ne permette l’uso di scorciatoie da tastiera con i comandi in riga.

Tra i 9 motivi per usare CodePen ci sono i Tags & Collections

Grazie ai tag assegnati dai vari sviluppatori e all’uso del campo di ricerca, si trovano quantità infinite di codice, script, esempi freschi e di tendenza, dandone ispirazioni e la possibilità di copiarli ed impiegarli per i propri progetti web personali.

Differenti visualizzazioni dei Pens — 9 motivi per usare CodePen

CodePen è dotato di una serie di visualizzazioni ognuno delle quali ha i suoi vantaggi.

Editor View : questa è la visualizzazione predefinita per la modifica i Pens. È possibile regolare le dimensioni dell’anteprima del codice e selezionare le lingue da visualizzare.

Details View: questa consente di vedere i tag, i preferiti o cuori come piace descrivere a CodePen, i commenti, i forked pens, ecc. Quest’ultima contiene la maggior parte delle funzioni sociali di CodePen.

Full Page View – Questo come si evince facilmente, rende il codice visibile a schermo intero all’interno di un iframe.

Infine, viene offerta la Debug View , cioè una vista a schermo intero, ma con funzionalità extra. Rimuove l’iframe e il piè di pagina CodePen per un accesso più facile alla console JavaScript. Questo è ottimo per testare il codice con cui pensi che CodePen possa interferire.

Le viste per gli Utenti Pro

Se sei un utente CodePen Pro, hai accesso a più visualizzazioni:

Presentation Mode – questa modalità è stata creata appositamente per i video-proiettori. Rimuove l’intestazione per darti più spazio e ti consente di modificare rapidamente la dimensione del carattere dei colori dell’editor di codice. È inoltre possibile modificare le dimensioni del programma di anteprima senza modificare il codice.

Live View – Con CodePen Live View, hai una visualizzazione a schermo intero dei tuoi Pens. Mentre modifichi un qualsiasi pens, questo, si aggiornerà automaticamente durante la digitazione. Viene spesso utilizzato durante il test su più dispositivi.

Professor Mode – questa modalità consente alle persone di guardarti il codice in tempo reale. C’è anche un’apposita chat dove il professore e gli studenti possono interagire.

Collab Mode – questa modalità, consente a più sviluppatori di apportare modifiche a un Pen simultaneamente. Anche in questo caso, c’è la possibilità di chattare come nella modalità professore.

Sezione Blog

Altra caratteristica interessante di CodePen è quella di offrirti una sezione Blog, con la possibilità d’interagire con esperti di settore e fare blogging come in un qualsiasi altro blog, scrivendo, magari, sul codice da te realizzato.

Puoi scrivere con Markdown, cioè in un linguaggio di markup, utilizzando una sintassi del testo semplice, pensata in modo che possa essere mutata in HTML e/o in molti altri formati con l’impiego dell’omonimo tool. Puoi aggiungere CSS personalizzati ai tuoi post e con a disposizione un’anteprima semplicissima per testare il tuo post.

CodePen inteso come Comunità

La community è da sempre stata una parte rilevante di CodePen. Attraverso commenti e condivisione, le persone possono dare e ricevere critiche costruttive e imparare insieme. Gruppi come 4ae9b8 e Bullgit hanno avuto inizio da conversazioni avvenute su CodePen

Tutto questo è ciò che pone CodePen di gran lunga davanti a piattaforme similari come JSFiddle, Glitch, CodeSandbox, Repl.it, StackBlitz, ecc.

Fonte d’ispirazione ed apprendimento | 9 motivi per usare CodePen

Sulla home page di CodePen puoi trovare sempre Pens interessanti, fantastici articoli e collezioni di ogni genere. I Pens rappresentano sia metodo innovativo e d’ispirazione oltre che ad un modo divertente d’imparare.

La ricerca tra i vari Pens può sicuramente aiutarti a migliorare il tuo lavoro, aiutandoti a migliorare la tua conoscenza dei vari codici come HTML, CSS e JavaScript e delle loro differenti versioni.

Di seguito sono riportate alcune demo dalla quale può prendere ispirazione, verificare e modellare a tuo piacimento:

Text Animation di Salvo Leone
GameTroll di Matthew Davis
Canvas Sparkle Light Trial di Jack Rugile

E tanti altri ancora.

Se sei interessato ad inserire, nel tuo sito web, degli effetti come quelli che trovi su CodePen, CONTATTACI

Sito Web Catania, Sviluppo Web, Web Design

Comments are closed.