Home-theater-designers
Iniziare con lo sviluppo web JavaScript può essere un processo frustrante, ma ci sono strumenti là fuori che lo rendono più semplice.
CodicePen.io è un ambiente di codifica all'interno del browser progettato sia per imparare a programmare che per prototipare rapidamente idee con il minimo sforzo.
In questo articolo, esaminiamo alcune delle funzionalità del sito e come possono aiutarti a diventare un programmatore migliore.
Cos'è CodePen?
CodePen fornisce qualcosa chiamato a penna , che comprende tre diverse finestre per HTML, CSS e JavaScript, oltre a un riquadro di anteprima che si aggiorna in tempo reale durante la digitazione.
Sebbene sia spesso utilizzato dagli sviluppatori web per mostrare idee per i siti web, è anche un ottimo posto per apprendere le basi dello sviluppo web front-end. Ecco le caratteristiche 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 rendere il codice più facile da leggere. Nello sviluppo web, viene utilizzata una combinazione di preprocessori per HTML, CSS e JavaScript per creare rapidamente codice pulito.
Se stai imparando lo sviluppo web e vuoi provare diversi preprocessori, CodePen ti consente di cambiare preprocessore al volo e vedere il codice in cui viene compilato in tempo reale. Ciascuno dei tre riquadri dell'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 semplice sito utilizzando Haml e Sass per modellare un testo di intestazione. Selezione Visualizza compilato mostra lo standard HTML e CSS. In questo esempio la differenza è minima. Durante l'apprendimento di un nuovo linguaggio, tuttavia, può essere utile vedere come appare il codice preelaborato una volta compilato.
2. Risorse esterne
Oltre al supporto nativo per i preprocessori, CodePen supporta script esterni. Questo lo rende il luogo perfetto per fare esperienza pratica con le librerie per i tuoi progetti personali o per rispolverare le librerie di app Web popolari come React.
Per aggiungere una libreria esterna, apri il Impostazioni riquadro sulla penna e vai alla scheda JavaScript. Esistono due modi per aggiungere risorse, aggiungendo manualmente l'URL della risorsa o effettuando una ricerca.
Abbiamo usato questa funzione nella nostra copertura dell'articolo animazione web con mo.js , insieme alla preelaborazione Babel.
Guarda la penna Esempio di Mojs MUO di Ian ( @Bardoctorus ) su CodePen.
Sì, le penne CodePen possono essere incorporate! Vai avanti e fai clic sul riquadro di anteprima in alto per vedere i risultati del tutorial Mo.js!
Altre penne possono essere importate in modo molto simile a librerie esterne. Ciò significa che puoi prendere elementi da penne precedentemente scritte da utilizzare come moduli nelle tue nuove penne. Utente CodePen Adam's Sondaggio semplice la penna ne è un buon esempio.
3. Modelli
Quando si imparano nuovi concetti o si testano nuove idee, si utilizzano spesso componenti simili e si ricostruiscono gli stessi passaggi per iniziare. CodePen consente la creazione di penne modello che possono eliminare 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.
https://vimeo.com/221428690
Fino a poco tempo, gli utenti gratuiti potevano creare solo tre modelli, ma ora tutti gli utenti possono avere tutti i modelli che desiderano nel proprio account. Perfetto per iniziare una nuova idea con il minimo ritardo!
4. Collaborazione alla moda
La capacità di collaborare e insegnare con CodePen può essere la sua più grande risorsa. Esistono già una vasta gamma di ottimi 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 il Cambia punto di vista menù. Questo cambia il collegamento della penna in un invito condivisibile che può ospitare un numero crescente di persone a seconda del tuo piano CodePen Pro.
come scaricare film su ipad
In questo caso, ho scritto HTML mentre un amico aggiornava il CSS in tempo reale, con un cursore etichettato identificato dove stavano lavorando.
Chiunque abbia il collegamento 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 eventuali modifiche, rendendolo un modo sicuro per aprire il codice ad altri senza rischi.
La natura aperta di questa modalità è vantaggiosa per i principianti in quanto puoi invitare quasi chiunque nella tua penna per guidarti attraverso un concetto difficile. È anche una modalità utile per sapere come muoversi in quanto è perfetto per intervistare potenziali dipendenti e ha già stato usato 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 a seconda del piano Pro dell'host.
La modalità Professore consente flessibilità tra l'apprendimento in aula e l'apprendimento a distanza o una combinazione dei due. L'uso della modalità Professore consentirà alle persone in fondo alla classe di avere la stessa esperienza di quelle in prima fila e all'insegnante di mostrare correzioni di bug che si aggiorneranno in tempo reale.
6. Modalità di presentazione
La modalità di presentazione è progettata, ovviamente, tenendo presente il codice di presentazione. L'app viene visualizzata in una visualizzazione semplificata, progettata per funzionare con i proiettori. CodePen ha ottimizzato la modalità di presentazione per l'utilizzo su connessioni Internet a bassa velocità e hardware più debole.
I lettori più attenti potrebbero aver già capito che la versione gratuita di CodePen fornirebbe proprio questa funzione, sebbene la modalità Pro abbia alcune funzioni utili. Il layout, la dimensione del carattere e i temi possono essere modificati rapidamente al volo per adattarsi a quasi tutte le impostazioni e mostrando il collegamento alla penna viene visualizzato un URL abbreviato di dimensioni enormi che semplifica la condivisione del progetto.
Queste piccole modifiche, oltre alla possibilità di ridimensionare la finestra di anteprima per adattarla a ciò che stai mostrando, rendono la modalità di presentazione perfetta sia per gli insegnanti che per gli sviluppatori che presentano idee ai colleghi. La modalità di presentazione è anche un modo semplice e dall'aspetto pulito per presentare il codice se ti ritrovi a fare un colloquio per una posizione di programmazione.
7. Modelli
La ricerca di ispirazione è resa molto più semplice con le collezioni di CodePen di Modelli di progettazione .
Ogni categoria è una raccolta di codici di esempio forniti dagli utenti di CodePen per attività specifiche. Stai cercando un modo per creare pulsanti dinamici per il tuo sito? Menu a fisarmonica? Ci sono una vasta gamma di categorie per adattarsi a quasi tutti gli esempi.
Questi modelli sono anche un ottimo modo per imparare come funzionano i pulsanti interattivi e i diversi modi in cui possono funzionare le interfacce utente dinamiche.
8. Emmet
Emmet , precedentemente noto come Zen Coding, è ampiamente considerato come il più grande risparmio di tempo per lo sviluppo di HTML e CSS. Il plugin prende parte del codice che ti ritrovi a scrivere molto e li converte in semplici scorciatoie.
Vederlo in azione è meglio che spiegarlo, quindi prendi la solita configurazione per un documento HTML:
L'aggiunta di questo a ogni documento HTML è stata ridotta a due azioni. Usando Emmet, digita ! e premi il tab chiave. Magia!
Emmet è attivo di serie su CodePen ed è particolarmente utile se stai cercando di imparare un nuovo concetto in JavaScript e hai bisogno di creare rapidamente HTML e CSS di supporto.
Sviluppa con CodePen per un'esperienza migliore
CodePen è uno strumento eccellente per gli sviluppatori web e il campo è in continua crescita. JavaScript è un ottimo linguaggio da imparare per un futuro nello sviluppo web.
come cambiare i dpi dell'immagine
Ci sono alcuni fantastici tutorial e corsi disponibili per le persone che vogliono iniziare con JavaScript e CodePen è un ottimo ambiente per testare le tue nuove abilità.
Condividere Condividere Tweet E-mail Gli 8 migliori siti Web per scaricare audiolibri gratuitamenteGli audiolibri sono una grande fonte di intrattenimento e molto più facili da digerire. Ecco gli otto migliori siti Web in cui puoi scaricarli gratuitamente.
Leggi Avanti Argomenti correlati- Programmazione
- HTML
- Sviluppo web
- JavaScript
- CSS
Ian Buckley è un giornalista freelance, musicista, performer e produttore di video che vive a Berlino, in Germania. Quando non scrive o sul palco, armeggia con l'elettronica o il codice fai-da-te nella speranza di diventare uno scienziato pazzo.
Altro da Ian BuckleyIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti