CodePen: Crea, testa, condividi e scopri HTML, CSS e JavaScript

Codepen: crea, testa e scopri il codice front-end

Una sfida con un sistema di gestione dei contenuti è testare e produrre strumenti con script. Sebbene questo non sia un requisito per la maggior parte degli editori, in quanto pubblicazione tecnologica, mi piace condividere di tanto in tanto script di lavoro per aiutare altre persone. Ho condiviso come usare JavaScript per controllare la sicurezza della password, Come controlla la sintassi dell'indirizzo e-mail con le espressioni regolari (regex) e lo hanno aggiunto più di recente calcolatrice per prevedere l'impatto sulle vendite delle recensioni online. Spero di aggiungere dozzine di strumenti sul sito, ma WordPress non è esattamente favorevole alla pubblicazione in questo modo ... è un sistema di contenuti, non un sistema di sviluppo.

Quindi, per far funzionare i miei piccoli script mi ​​piace usare CodePen. CodePen è uno strumento ben organizzato con un pannello HTML, un pannello CSS, un pannello JavaScript, una console e una pubblicazione del codice risultante. Ogni pannello contiene informazioni quando passi il mouse sugli elementi in modo da capire cosa è possibile fare, così come la codifica a colori del tuo HTML, CSS e JS per aiutarti a modificare e scrivere più facilmente.

CodePen è un ambiente di sviluppo sociale. Fondamentalmente, ti consente di scrivere codice nel browser e di vederne i risultati durante la creazione. Un utile e liberatorio editor di codice online per sviluppatori di qualsiasi competenza, e particolarmente utile per le persone che imparano a programmare. CodePen si concentra principalmente su linguaggi front-end come HTML, CSS, JavaScript e sintassi di preelaborazione che si trasformano in queste cose.

Informazioni su CodePen

Con CodePen, sono stato in grado di fare tutto il lavoro necessario pubblica la calcolatrice Ho incorporato nel sito. La maggior parte delle creazioni su CodePen sono pubbliche e open source. Sono cose vive con cui altre persone e la comunità possono interagire, da un semplice cuore, a lasciare un commento, a biforcarsi e cambiare per i propri bisogni.

CodePen - calcolatrice per prevedere l'impatto sulle vendite delle recensioni online

Con CodePen, puoi modificare la visualizzazione se desideri che i riquadri si trovino a sinistra, a destra o in basso mentre lavori ... o visualizzare l'HTML in una nuova scheda. La visualizzazione affiancata funziona incredibilmente bene per testare le tue impostazioni reattive poiché puoi regolare le dimensioni del riquadro visualizzabile.

Puoi organizzare ciascuno dei tuoi script di lavoro in Penne, combinarli in Progetti (editor multi-file) o persino creare raccolte. È fondamentalmente un sito di portfolio funzionante per il codice front-end in cui puoi seguire altri autori, inserire altri progetti condivisi pubblicamente nel tuo da modificare e persino imparare come fare cose divertenti attraverso le sfide.

Puoi salvare come GitHub Gist, esportare in file zip e persino incastrare la penna in un articolo come questo:

Vedi la penna
Impatto previsto sulle vendite delle recensioni online
by Douglas Karr (@douglaskarr)
on CodePen.


Uno dei limiti dell'editor Pen è l'enorme volume di codice. Potresti non imbatterti mai in questo problema, poiché l'editor dovrebbe andare bene con centinaia o addirittura migliaia di righe di codice. Ma quando iniziano a raggiungere 5,000 - 10,000 o più righe di codice, vedrai che l'editor inizia a fallire. Tuttavia, puoi aggiungere riferimenti esterni a fogli di stile o JavaScript ospitato altrove!

Ti incoraggio a iscriverti. Verrai iscritto alla loro email settimanale e potrai anche aggiungere il feed al tuo feed RSS in modo da poter vedere le penne appena pubblicate. E, se inizi a cercare o sfogliare le penne pubbliche lì, troverai alcuni progetti incredibili ... gli utenti hanno abbastanza talento!

Segui Douglas Karr su Codepen

La versione a pagamento, CodePen Pro, offre un sacco di funzionalità aggiuntive per funzionalità o team migliorati, tra cui collaborazione, processi, hosting di risorse, visualizzazioni private e persino progetti distribuiti con il tuo dominio o sottodominio. E, naturalmente, CodePen fornisce un ottimo repository con integrazione Github in cui l'intero team può lavorare. Se vuoi solo testare un codice semplice come me, CodePen è uno strumento inestimabile.

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.