Se sei un sviluppatore web o di programmi sicuramente conosci i servizi di CodePen. Per questo motivo da Neoteo ti presenteremo i migliori consigli per ottenere il massimo da questa piattaforma, così potrai modificare e creare progetti in HTML, CSS e JavaScript in tempo reale.
Ma per coloro che non conoscono le funzionalità di CodePen, faremo una breve recensione per incorporarlo nei tuoi strumenti di sviluppo. CodePen è una piattaforma per fare test, modificare, esercitarti e condividere piccoli progetti web o frontend (pen) di programmi in HTML, CSS e JavaScript (supporta metalinguaggi); in questo modo tu e la comunità potrete apportare miglioramenti in tempo reale.
Pulsante Run
Se sei uno di quegli utenti che non è soddisfatto dell'output del codice mentre lo stai sviluppando, puoi disattivare l'opzione Auto Update Preview e ottenere invece un pulsante Esegui (Run). In questo modo, ogni volta che aggiorni il design, puoi cliccare sul pulsante per aggiornare l'anteprima.
Settings – Behavior – (Disattiva) AUTO UPDATE PREVIEW
Lo consigliamo per sviluppi pesanti e con una grande quantità di codice e miscuglio di linguaggi.
Esporta
Una volta salvato il Pen, potrai esportarlo in un file ZIP con tutti i linguaggi (HTML, CSS e JS). Ma esiste anche un'opzione per salvarlo come gist di GitHub.
Export - Save as GitHub Gist
In questo modo avrai il tuo lavoro come un repository di GitHub.
Cerca e sostituisci
Cerca e sostituisci è una delle azioni più importanti sulla piattaforma, perché gli sviluppatori cambiano spesso nomi, variabili e altri elementi.
Ctrl + Shift + F (abiliti la ricerca) – Scrivi la parola da sostituire in Replace – Invio – Scrivi quello che vuoi inserire in With – Invio – Poi fai clic su Yes e su All.
Ottenere i singoli file di codice
Se esporti un Pen nel modo convenzionale, ottieni i tre file (HTML, CSS e JS), ma se ti serve solo uno di essi devi usare questa azione.
Change View – Direct Code Links: qui scegli il linguaggio che vuoi – E potrai salvarlo da una scheda del browser.
Pen come modello
Se usi quasi tutti i tuoi Pen con lo stesso modello, puoi attivare ogni Pen che crei con il modello che usi abitualmente. Ma prima devi salvarlo come modello.
Settings – Inserisci un titolo al Pen – Seleziona l'opzione Template
Speriamo che i consigli che ti abbiamo dato per ottimizzare il tuo lavoro su CodePen ti aiutino a ottenere il massimo dalla piattaforma e a migliorare i tuoi sviluppi.
Se vuoi che facciamo una seconda parte dell'articolo, aspettiamo i tuoi commenti.
