10 consigli Codepen per principianti

Codepen è un sito molto facile e popolare per penna giù un codice front-end funzionante combo subito. Se non sai cos'è Codepen o non ne hai mai sentito parlare, è fondamentalmente un parco giochi online di codice sorgente (chiamiamolo OSCP per suonare nerdier) per i tre moschettieri della codifica front-end; HTML, CSS e JavaScript.

Esistono altri OSCP simili come JSFiddle, JS Bin, CSSDeck e Dabblet. Codepen è sicuramente uno dei più noti tra gli sviluppatori di front-end. Senza ulteriori indugi, saltiamo a destra in alcuni consigli di base e utili per l'utilizzo di Codepen.

1. Pulsante Esegui

Se non sei un fan del modo in cui l'output del tuo codice in Codepen continua ad aggiornare mentre stai scrivendo, puoi rinunciare al “Anteprima di aggiornamento automatico” opzione, e ottieni invece un pulsante Esegui. Quando fai clic su di esso, sarai in grado di vedere e aggiornare l'output del tuo codice ogni volta che vuoi.

Questa è anche una grande opzione se stai lavorando con un codice il cui output passa attraverso molte modifiche al layout, e ridisegna ogni volta che viene aggiornato, con conseguente lentezza.

2. Numero incremento / decremento

Aumenta o diminuisci i numeri nel tuo codice in Codepen senza digitare i nuovi numeri. Tutto quello che devi fare è usare la combinazione di tasti Ctrl / Cmd e Frecce su e giù.

3. Cursori multipli

Puoi mettere i cursori a più punti nel codice sorgente, quindi digita o modifica in tutti quei punti allo stesso tempo. Funziona solo se stai inserendo le stesse informazioni e riduce la necessità di incollare la copia. Basta tenere premuto il tasto Ctrl / Cmd mentre si fa clic su questi punti multipli.

4. Diversi messaggi console colorati

Il consolle L'oggetto JavaScript ha qualche altro metodo inoltre log () per permetterti di stampa le cose nella console web.

Puoi usare il Informazioni(), avvisare() e errore() metodi per informazione, avvertimento e errore. In genere, le console Web colorano questi messaggi in base al tipo o visualizzano un'icona appropriata accanto a loro (come un segnale di avvertimento per il messaggio di avviso) per un più facile riconoscimento.

Codepen ha la sua console che puoi aprire facendo clic sul pulsante Console nell'angolo in basso a sinistra. È ideale per un controllo rapido dei messaggi della console senza dover aprire la console del browser. Questa console distingue i diversi tipi di messaggi della console con diversi colori di sfondo.

5. Esportazione

Una volta salvato, a penna (una singola entità Codepen) può essere esportata come un file ZIP con tutto il suo codice HTML, CSS e JS nei file. C'è anche un'opzione per salvare la penna come un Github Gist (un repository Git). Puoi trovare il pulsante Esporta nell'angolo in basso a destra di ogni penna.

6. Trova e sostituisci

Trova e sostituisci - un'operazione essenziale per le persone che tendono a rinominare i loro nomi variabili di tanto in tanto. Ctrl / Cmd + Shift + F è la combinazione di tasti a apri il “Trova e sostituisci” dialogo.

7. Emmet Tab Trigger

Conoscete i trigger di tabulazione per la codifica Emmet? Emmet è uno strumento di produttività per sviluppatori front-end che ti permette di farlo Digita il codice dello scheletro che verrà successivamente esteso. Per fare ciò in Codepen, basta digitare rapidamente l'abbreviazione appropriata nell'editor, premere il tasto Tab e il codice completo appare contemporaneamente. Disponibile solo per HTML in Codepen.

8. Ottieni file di codice individuale

Se usi l'opzione Esporta come menzionato prima, otterrai tutti e tre i file (HTML, CSS e JS) della penna. Ma se ti interessa solo uno o due di questi file, e vuoi scaricarli individualmente, c'è un'opzione anche in Codepen.

Una volta effettuato l'accesso a Codepen, vai alla penna e fai clic sul pulsante Cambia vista nell'angolo in alto a destra. Nella parte inferiore dell'elenco a discesa, vedrai il link per il download diretto per i singoli file.

9. Ispezionare le variabili JavaScript

Poiché la console JavaScript di Codepen si collega al JavaScript salvato nella penna, puoi anche utilizzarla per testare rapidamente il tuo JavaScript. Questa funzione è particolarmente utile in ispezionare le variabili JS, in questo modo tu non è necessario inserire console o messaggi di avviso aggiuntivi nel codice originale esclusivamente a scopo di test.

10. Trasforma la penna in un modello

Se tendi ad avviare la maggior parte delle tue penne con il stesso set di codice, puoi usare un modello per salva quel codice ripetuto. Per trasformare una penna in modello, seleziona l'opzione Modello sotto il menu Impostazioni. Quando in seguito crei una nuova penna, puoi farlo inizia con il modello salvato facendo clic sulla freccia giù nella parte destra del pulsante Nuova penna. Si aprirà un elenco a discesa con tutti i modelli salvati tra cui scegliere.