Come utilizzare CodePen: e se esistesse una piattaforma in cui è possibile modificare il codice, testare una libreria, un framework o un componente e vedere i cambiamenti avvenire proprio davanti ai propri occhi? E se potessi condividere i tuoi esperimenti con altri sviluppatori o copiare il loro lavoro per migliorare le tue capacità di codifica, trovare ispirazione e correggere rapidamente i bug nel tuo lavoro?
CodePen è una piattaforma di sviluppo in cui chiunque può modificare front-terminare linguaggi come HTML, CSS e JavaScript dal proprio browser senza dover scaricare alcun software. La parte migliore è che puoi vedere i risultati in tempo reale, il che rende più facile correggere i bug. Sviluppatori e designer possono anche creare frammenti di codice, chiamati”penne”, e condividerli con il resto del mondo.
Come usare CodePen
Apri CodePen.io Digita qualsiasi cosa nella casella di ricerca: puoi digitare tutto ciò che desideri aggiungere alla tua pagina web. Può essere un dispositivo di scorrimento reattivo, una scheda della squadra, una sezione, animazioni, ecc. In questo articolo aggiungerò un bellissimo dispositivo di scorrimento. Quindi vai avanti e cerca il bellissimo cursore nella casella di ricerca. Estrazione del codice: Ora, come puoi vedere, l’editor Codepen ci mostra il fantastico codice che ha creato questo dispositivo di scorrimento. Ma pensi che funzionerebbe semplicemente copiare il codice da questo editor e incollarlo nel tuo? NO è la risposta. La maggior parte delle”penne”che vedi utilizzano librerie al di fuori di CodePen che l’editor non mostra. Lo zip contiene due cartelle dist e src insieme a un file di testo readme e licenza. Puoi esplorarli/leggerli per il tuo interesse. Ora seleziona la cartella”dist“e lì vedrai index.html, style.css, e script.js file. Apri tutti questi in un editor di testo (Sublime, Atom, Brackets, ecc.). Apri il file index.html
Che cos’è CodePen utilizzato
Condivisione o raccolta di idee
Poiché CodePen ha costruito una comunità così grande, migliaia di utenti stanno creando e condividendo idee per la prima volta componenti finali, animazioni e persino layout di pagine Web quasi finiti. Questo è il posto perfetto per condividere le tue idee che potrebbero essere utili ad altri professionisti front-end. Tutto quello che devi fare è assicurarti che il tuo codice non abbia problemi di copyright.
Guida allo stile del tuo progetto
Se non vuoi usare il codice di altre persone, puoi sempre utilizzare l’editor di codice online di CodePen per dare alle parti del tuo progetto il proprio stile. In questo modo, puoi assicurarti che il codice destinato a modellare altri componenti non cambi il tuo. È un po’come una tela bianca.
Scopri un nuovo framework o libreria
L’editor basato su browser su CodePen è un ottimo modo per testare ed eseguire una nuova libreria o framework. Non devi impostare un nuovo ambiente ogni volta che vuoi vedere se le tue modifiche funzionano. La vista dell’editor mostra contemporaneamente le tre aree di modifica e l’anteprima. Ogni volta che qualcosa cambia, i risultati finali vengono aggiornati.