CodePen: construït, provat, compartit i descobert HTML, CSS i JavaScript

Codepen: construeix, prova i descobreix el codi frontal

Un desafiament amb un sistema de gestió de contingut és provar i produir eines de script. Tot i que no és un requisit per a la majoria d’editors, com a publicació tecnològica, m’agrada compartir guions de treball de tant en tant per ajudar altres persones. He compartit com utilitzar-lo JavaScript per comprovar la força de la contrasenya, com comproveu la sintaxi de l'adreça de correu electrònic amb Expressions regulars (regex), i darrerament ho va afegir calculadora per predir l’impacte comercial de les ressenyes en línia. Espero afegir dotzenes d'eines al lloc, però WordPress no és exactament propici per publicar així ... és un sistema de contingut, no un sistema de desenvolupament.

Per tant, per fer funcionar els meus petits scripts, m’agrada fer-los servir CodePen. CodePen és una eina ben organitzada amb un tauler HTML, un tauler CSS, un tauler JavaScript, consola i una publicació del codi resultant. Cada panell té informació quan passeu el ratolí per sobre dels elements perquè entengueu el que és possible, així com la codificació de colors del vostre HTML, CSS i JS per ajudar-vos a editar i escriure amb més facilitat.

CodePen és un entorn de desenvolupament social. Al fons, us permet escriure codi al navegador i veure’n els resultats a mesura que aneu creant. Un editor de codis en línia útil i alliberador per a desenvolupadors de qualsevol habilitat, i especialment útil per a les persones que aprenen a codificar. CodePen se centra principalment en llenguatges front-end com HTML, CSS, JavaScript i sintaxis de preprocessament que es converteixen en aquestes coses.

Quant a CodePen

Amb CodePen, vaig poder fer tota la feina necessària publica la calculadora Em vaig incrustar al lloc. La majoria de creacions a CodePen són de codi públic i de codi obert. Són éssers vius amb els quals altres persones i la comunitat poden interactuar, des d’un simple cor, fins a deixar un comentari, passant per bifurcar-se i canviar per les seves pròpies necessitats.

CodePen: calculadora per predir l'impacte en les vendes de les ressenyes en línia

Amb CodePen, podeu canviar la visualització si voleu que els panells estiguin a l'esquerra, a la dreta o a la part inferior mentre esteu treballant ... o bé visualitzeu l'HTML en una pestanya nova. La visualització paral·lela funciona increïblement bé per provar la configuració de resposta, ja que podeu ajustar la mida del tauler visible.

Podeu organitzar cadascun dels vostres scripts de treball en llapis, combinar-los en Projectes (editor de fitxers múltiples) o fins i tot crear col·leccions. Bàsicament, és un lloc de cartera de treball per al codi frontal on podeu seguir altres autors, incorporar altres projectes compartits públicament per modificar-los i fins i tot aprendre a fer coses divertides a través de reptes.

Podeu desar-lo com a GitHub Gist, exportar-lo en fitxer zip i fins i tot incrustar la ploma en un article com aquest:

Mireu el Bolígraf
Impacte de vendes previst de ressenyes en línia
by Douglas Karr (@douglaskarr)
on CodePen.


Una de les limitacions de l'editor Pen és el gran volum de codi. És possible que no trobeu mai aquest problema, ja que l’editor hauria d’anar bé amb centenars o fins i tot milers de línies de codi. Però quan comencin a tocar 5,000 - 10,000 o més línies de codi, veureu que l'editor comença a fallar. Tot i això, podeu afegir referències externes a fulls d’estil o JavaScript allotjats en un altre lloc.

Us animo a inscriure-us. Se us subscriurà al seu correu electrònic setmanal i també podreu afegir el feed al vostre canal RSS perquè pugueu veure els bolígrafs recentment publicats. I, si comenceu a cercar o navegar pels corrals públics, hi trobareu alguns projectes increïbles ... els usuaris tenen molt de talent!

Seguir Douglas Karr a Codepen

La versió de pagament, CodePen Pro, ofereix un munt de funcions addicionals per millorar la funcionalitat o els equips, com ara col·laboració, processos, allotjament d’actius, vistes privades i fins i tot projectes desplegats amb el vostre propi domini o subdomini. I, per descomptat, CodePen proporciona un gran dipòsit amb integració de Github on tot el vostre equip pot treballar. Si només voleu provar algun codi senzill com jo, CodePen és una eina inestimable.

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.