8 fantastiche funzioni CodePen per la programmazione e lo sviluppo Web

Iniziare con lo sviluppo web di JavaScript può essere un processo frustrante, ma ci sono strumenti là fuori che rendono più facile.

CodePen.io è un ambiente di codifica nel browser progettato per imparare a codificare e per prototipare rapidamente le idee con il minimo sforzo.

In questo articolo, esaminiamo alcune funzionalità del sito e come possono aiutarti a diventare un programmatore migliore.

Cos'è CodePen?

CodePen fornisce qualcosa chiamato a penna, che comprende tre finestre differenti per HTML, CSS e JavaScript, oltre a un riquadro di anteprima che si aggiorna in tempo reale durante la digitazione.

Sebbene sia frequentemente utilizzato dagli sviluppatori web per mostrare idee per siti Web, è anche un ottimo posto per apprendere le basi dello sviluppo web front-end. Ecco le funzionalità più importanti che devi sapere quando usi CodePen.

1. Preprocessori

I preprocessori sono linguaggi interpretati o compilati progettati per semplificare la codifica. Possono aggiungere funzionalità a una lingua per comodità e semplificare la lettura del codice. Nello sviluppo web, una combinazione di preprocessori per HTML, CSS e JavaScript viene utilizzata per creare rapidamente un codice pulito.

Se stai imparando lo sviluppo web e vuoi provare diversi preprocessori, CodePen ti permette di cambiare i preprocessor al volo e vedere il codice che compila in tempo reale. Ciascuno dei tre riquadri nell'app CodePen ha un menu a discesa in alto a destra. Selezionare Visualizza HTML / CSS / JS compilato per vedere come verrà interpretato il codice.

In questa penna, abbiamo creato un sito semplice utilizzando Haml e insolenza per modellare un testo di intestazione. Selezione Visualizza compilata mostra lo standard HTML e CSS. In questo esempio la differenza è minima. Durante l'apprendimento di una nuova lingua, tuttavia, può essere utile vedere come appare il codice elaborato una volta compilato.

2. Risorse esterne

Oltre al supporto nativo per i preprocessori, CodePen supporta script esterni. Questo lo rende il posto perfetto per acquisire esperienza pratica con le librerie per i tuoi progetti personali o per ripassare le librerie di app web più popolari come React 7 Best Tutorial gratuiti per l'apprendimento Reagire e realizzare app Web 7 I migliori tutorial gratuiti per l'apprendimento Reagire e fare Le app Web I corsi gratuiti sono raramente esaurienti e utili, ma abbiamo trovato numerosi corsi React eccellenti e che ti consentiranno di iniziare con il piede giusto. Leggi di più .

Per aggiungere una libreria esterna, apri il impostazioni riquadro sulla penna e vai alla scheda JavaScript. Esistono due modi per aggiungere risorse, aggiungendo l'URL della risorsa manualmente o eseguendo una ricerca.

Abbiamo usato questa funzionalità nel nostro articolo che copre l'animazione web con mo.js, insieme alla pre-elaborazione di Babel.

Vedi l'esempio di Pen Mojs MUO di Ian (@Bardoctorus) su CodePen.

Sì, le penne CodePen possono essere incorporate! Vai avanti e fai clic sul riquadro di anteprima sopra per vedere i risultati dell'esercitazione Mo.js!

Altre penne possono essere importate molto come le librerie esterne. Ciò significa che puoi prendere elementi da penne precedentemente scritte da utilizzare come moduli nelle tue nuove penne. Utente CodePen La penna Simple Poll di Adam ne è un buon esempio.

3. Modelli

Quando stai imparando nuovi concetti o testando nuove idee, utilizzi spesso componenti simili e ripeti gli stessi passaggi per iniziare. CodePen consente la creazione di penne modello che possono ritagliare la ripetizione e consentono di arrivare direttamente al punto.

Per creare un modello, apri una nuova penna, apporta le modifiche e seleziona Modello cursore nel menu delle impostazioni.

Fino a poco tempo fa, gli utenti gratuiti potevano creare solo tre modelli, ma ora tutti gli utenti possono avere quanti modelli nel loro account vogliono. Perfetto per iniziare una nuova idea con il minimo ritardo!

4. Modalità di collaborazione

La capacità di collaborare e insegnare con CodePen può essere la sua più grande risorsa. Esistono già numerosi strumenti di collaborazione per i programmatori, ma l'approccio di CodePen è semplice e intuitivo.

Gli utenti Pro di CodePen possono creare una nuova penna e aprirla alla collaborazione sotto Cambia punto di vista menu. Questo cambia il collegamento della penna in un invito condivisibile che consente di adattare un numero di persone in scala a seconda del piano CodePen Pro.

In questo caso, ho scritto HTML mentre un amico ha aggiornato il CSS in tempo reale, con un cursore etichettato che indicava dove stavano lavorando.

Chiunque abbia il link può partecipare e utilizzare la funzione di chat nel browser, indipendentemente dal fatto che sia un utente professionista o abbia anche un account CodePen. Se il salvataggio automatico è disattivato, solo il proprietario della penna può salvare qualsiasi modifica, rendendolo un modo sicuro per aprire il codice agli altri senza rischi.

La natura aperta di questa modalità è vantaggiosa per i principianti poiché puoi invitare quasi chiunque nella tua penna a guidarti attraverso un concetto difficile. È anche una comoda modalità per sapere come muoversi, perfetta per intervistare potenziali dipendenti ed è già stata utilizzata professionalmente in questo modo!

5. Modalità professore

La modalità Professore consente a un utente Pro di ospitare una stanza in cui solo loro possono modificare il codice. Tra 10-100 utenti possono guardare e chattare in base al piano Pro dell'host.

La modalità Professore consente flessibilità tra l'apprendimento in classe e l'apprendimento a distanza o una combinazione dei due. L'uso della modalità Professore consentirà alle persone sul retro della classe di avere la stessa esperienza di coloro che stanno davanti e che l'insegnante mostri correzioni di bug che si aggiorneranno in tempo reale.

6. Modalità di presentazione

La modalità di presentazione è progettata, non sorprende, con la presentazione del codice in mente. L'app viene visualizzata in una vista semplificata, progettata per funzionare con i proiettori. CodePen ha ottimizzato la modalità Presentazione per l'utilizzo su connessioni Internet a bassa velocità e hardware più debole.

I lettori accorti potrebbero aver già capito che la versione gratuita di CodePen fornirebbe esattamente questa funzione, sebbene la modalità Pro abbia alcune funzioni utili. Layout, dimensioni dei caratteri e temi possono essere rapidamente modificati al volo per adattarsi a quasi tutte le impostazioni e mostrando il link alla penna viene visualizzato un URL accorciato di dimensioni ridotte che semplifica la condivisione del progetto.

Questi piccoli cambiamenti, insieme alla possibilità di ridimensionare la finestra di anteprima per adattarsi a qualsiasi cosa tu stia mostrando, rendono la modalità di presentazione perfetta per entrambi gli insegnanti e gli sviluppatori che presentano idee ai colleghi. La modalità di presentazione è anche un modo semplice e pulito di presentare il codice se ti ritrovi a intervistare per una posizione di programmazione. Come prepararti per un colloquio di programmazione Come prepararti per un colloquio di programmazione Il miglior consiglio per programmare le interviste. Qualsiasi intervista può essere scoraggiante. Sai abbastanza per passare? Le tue soluzioni saranno abbastanza buone? Cosa succede se soffochi? Applica questi cinque suggerimenti. Leggi di più .

7. Modelli

La ricerca dell'ispirazione è molto più semplice con le collezioni di Pattern Design di CodePen.

Ogni categoria è una raccolta di codice di esempio fornita dagli utenti CodePen per attività specifiche. Stai cercando un modo per creare pulsanti dinamici per il tuo sito? Menu a fisarmonica? Ci sono molte categorie che si adattano praticamente a qualsiasi esempio.

Questi pattern sono anche un ottimo modo per imparare come funzionano i pulsanti interattivi e i diversi modi in cui le interfacce utente dinamiche possono funzionare.

8. Emmet

Emmet, precedentemente noto come Zen Coding, è considerato il miglior risparmiatore di tempo per lo sviluppo di HTML e CSS. Il plugin prende parte del codice che si trova a scrivere molto e li converte in semplici scorciatoie.

Guardarlo in azione è meglio che spiegarlo, quindi prendi il solito setup per un documento HTML:

L'aggiunta di questo ad ogni documento HTML è stata ridotta a due azioni. Usando Emmet, digita ! e colpisci il linguetta chiave. Magia!

Emmet è attivo come standard su CodePen ed è particolarmente utile se stai cercando di imparare un nuovo concetto in JavaScript e devi creare rapidamente HTML e CSS di supporto.

Sviluppa con CodePen per un'esperienza migliore

CodePen è uno strumento eccellente per gli sviluppatori Web e il settore è in continua crescita. JavaScript è un ottimo linguaggio per imparare per un futuro nello sviluppo web.

Ci sono alcune fantastiche esercitazioni e corsi disponibili per le persone che vogliono iniziare con JavaScript Really Learn JavaScript con 5 corsi Top Udemy Imparare davvero JavaScript con 5 corsi Udemy Top JavaScript è il linguaggio di programmazione del web. Se hai un motivo per imparare JavaScript, questi cinque eccellenti corsi di Udemy potrebbero essere il posto giusto per iniziare il tuo viaggio di programmazione. Leggi di più, e CodePen è un ottimo ambiente per testare le tue nuove competenze.

Scopri di più su: CSS, HTML, JavaScript, Sviluppo Web.