CodePen: Custruitu, Pruvate, Sparte è Scuprite HTML, CSS è JavaScript

Codepen: Custruisce, Prova, è Scopre u Codice Front-End

Una sfida cun un sistema di gestione di cuntenuti hè di pruvà è di pruduce strumenti di script. Mentre chì questu ùn hè micca un requisitu per a maggior parte di l'editori, cum'è una publicazione tecnologica, mi piace di spartite script di travagliu di volta in volta per aiutà l'altri. Aghju spartutu cumu aduprà JavaScript per verificà a forza di a password, cumu per verificate a sintassi di l'indirizzu email cù Sprissioni Rigulari (Regex), è più recentemente aghjuntu questu calculatrice per prevede l'impattu di vendita di e riviste in linea. Spergu di aghjunghje decine di strumenti nantu à u situ ma WordPress ùn hè micca propiu favurèvule à publicà cusì ... hè un sistema di cuntenutu, micca un sistema di sviluppu.

Cusì, per uttene i mo picculi script chì funziona mi piace aduprà CodePen. CodePen hè un strumentu pulitamente urganizatu cù un pannellu HTML, un pannellu CSS, un pannellu JavaScript, Consola, è un publicatu di u codice resultante. Ogni pannellu hà infurmazioni quandu si passa u mouse nantu à elementi in modo da capisce ciò chì hè pussibule, è ancu codificà i culori di u vostru HTML, CSS è JS per aiutavvi à mudificà è scrive più faciule.

CodePen hè un ambiente di sviluppu suciale. À u so core, vi permette di scrive codice in u navigatore, è vede i risultati di questu mentre custruite. Un editore di codice in ligna utile è liberatore per sviluppatori di qualsiasi abilità, è particularmente empowering per e persone chì amparanu à codificà. CodePen si concentra principalmente in lingue front-end cum'è HTML, CSS, JavaScript, è sintassi di preelaborazione chì si trasformanu in quelle cose.

À propositu di CodePen

Cù CodePen, aghju pussutu fà tuttu u travagliu necessariu publicà a calculatrice Aghju inseritu in u situ. A maiò parte di e creazioni in CodePen sò publiche è open source. Sò cose vive chì altre persone è a cumunità ponu interagisce cun, da un core simplice, à lascià un cummentariu, à forchettà è cambià per i so bisogni.

CodePen - calculatrice per prevede l'impattu di vendita di e riviste in linea

Cù CodePen, pudete cambià a vostra vista se vulete chì i pannelli sianu à manca, à diritta o in fondu mentre travagliate ... o vede l'HTML in una nova tabulazione. A vista side-by-side funziona incredibilmente bè per testà i vostri parametri reattivi postu chì pudete adattà a dimensione di u pannellu visibile.

Pudete urganizà ognunu di i vostri script di travagliu in Penne, cumbinalli in Prughjetti (editore multi-file), o ancu custruisce cullezzione. Hè basicamente un situ di portafoglio di travagliu per u codice front-end induve pudete seguità altri autori, forchettà altri prughjetti spartiti publicamente in u vostru da mudificà, è ancu amparà à fà cose divertenti attraversu e sfide.

Pudete salvà cum'è GitHub Gist, esportà in u file zip, è ancu imbrà a penna in un articulu cusì:

Vede a Penna
Impattu di Vendita Previstu di Risposte in Linea
by Douglas Karr (@douglaskarr)
on CodePen.


Una di e limitazioni di l'editore Pen hè u grande volume di codice. Ùn puderete mai attraversà stu prublema, chì l'editore duveria andà bè cù centinaie o ancu millaie di linee di codice. Ma quandu cumincianu à colpisce 5,000 10,000 - XNUMX XNUMX o più linee di codice, vedrete chì l'editore cumincia à fallu. Tuttavia, pudete aghjunghje riferimenti esterni à fogli di stile o JavaScript ospitu in altrò!

Vi incuraghju à scrivevi. Sarete abbonatu à u so email settimanale è pudete ancu aghjunghje u feed à u vostru feed RSS in modo da pudè vede penne appena publicate. È, se cuminciate à circà o navigà in e penne publiche quì, truverete alcuni prughjetti incredibili ... l'utenti sò abbastanza talentu!

Follow Douglas Karr nantu à Codepen

A versione pagata, CodePen Pro, offre una mansa di funzioni addiziunali per una funzionalità o squadre migliorate - cumpresi cullaburazione, processi, hosting d'assi, vedute private, è ancu prughjetti dispiegati cù u vostru propiu duminiu o sottodominiu. E, sicuru, CodePen furnisce un grande repositoriu cù integrazione Github induve a vostra squadra sana pò travaglià. Se vulete solu pruvà qualchi codice simplice cum'è eiu, CodePen hè un strumentu preziosu.

Chì ne pensi?

Stu situ utilizeghja Akismet per reducisce u puzzicheghju. Sapete ciò chì i dati di i vostri dati è processatu.