CodePen: construído, probado, compartido e descuberto de HTML, CSS e JavaScript

Codepen: compilar, probar e descubrir código frontal

Un desafío cun sistema de xestión de contido é probar e producir ferramentas con script. Aínda que iso non é un requisito para a maioría dos editores, como publicación tecnolóxica, gústame compartir guións de traballo de cando en vez para axudar a outras persoas. Compartín como empregalo JavaScript para comprobar a intensidade do contrasinal, como comprobe a sintaxe do enderezo de correo electrónico con Expressions regulares (Regex), e máis recentemente engadiu isto calculadora para predicir o impacto nas vendas das recensións en liña. Espero engadir ducias de ferramentas no sitio, pero WordPress non é exactamente propicio para publicar así ... é un sistema de contido, non un sistema de desenvolvemento.

Entón, para que os meus pequenos guións funcionen gústame usar CodePen. CodePen é unha ferramenta ben organizada cun panel HTML, un panel CSS, un panel JavaScript, consola e unha publicación do código resultante. Cada panel ten información ao pasar o rato sobre elementos para comprender o que é posible, así como a codificación por cores do seu HTML, CSS e JS para axudarlle a editar e escribir con máis facilidade.

CodePen é un ambiente de desenvolvemento social. No fondo, permítelle escribir código no navegador e ver os resultados do mesmo a medida que vai construíndo. Un editor de código en liña útil e liberador para desenvolvedores de calquera habilidade, e especialmente capacitante para as persoas que aprenden a codificar. CodePen céntrase principalmente en linguaxes front-end como HTML, CSS, JavaScript e sintaxis de preprocesamento que se converten nesas cousas.

Acerca de CodePen

Con CodePen, puiden facer todo o traballo necesario publica a calculadora Inserín no sitio. A maioría das creacións en CodePen son públicas e de código aberto. Son cousas vivas coas que outras persoas e a comunidade poden interactuar, desde un simple corazón, ata deixar un comentario, pasando por forqueado e cambiando polas súas propias necesidades.

CodePen: calculadora para predicir o impacto nas vendas das recensións en liña

Con CodePen, podes cambiar a túa vista se queres que os paneis estean á esquerda, á dereita ou á parte inferior mentres traballas ... ou ver o HTML nunha nova pestana. A vista lado a lado funciona incriblemente ben para probar a configuración de resposta, xa que pode axustar o tamaño do panel visible.

Podes organizar cada un dos teus scripts de traballo en Bolígrafos, combinalos en Proxectos (editor de ficheiros múltiples) ou incluso construír coleccións. Basicamente é un sitio de carteira de traballo para o código front-end onde podes seguir a outros autores, incorporar outros proxectos compartidos publicamente para modificalos e incluso aprender a facer cousas divertidas a través de desafíos.

Podes gardalo como GitHub Gist, exportalo nun ficheiro zip e incluso embutir a pluma nun artigo coma este:

Vexa a pluma
Previsión de impacto nas vendas de comentarios en liña
by Douglas Karr (@douglaskarr)
on CodePen.


Unha das limitacións do editor Pen é o gran volume de código. É posible que nunca atopes este problema, xa que o editor debería estar ben con centos ou incluso miles de liñas de código. Pero cando empecen a bater 5,000 - 10,000 ou máis liñas de código, verás que o editor comeza a fallar. Non obstante, podes engadir referencias externas a follas de estilo ou JavaScript aloxados noutros lugares.

Anímovos a rexistrarte. Estarás subscrito ao seu correo electrónico semanal e tamén podes engadir o feed ao teu feed RSS para que poidas ver bolígrafos recentemente publicados. E, se comezas a buscar ou a navegar polos corredores públicos, atoparás algúns proxectos incribles ... os usuarios teñen moito talento.

seguir Douglas Karr en Codepen

A versión de pago, CodePen Pro, ofrece unha chea de funcións adicionais para mellorar a funcionalidade ou os equipos, incluíndo colaboración, procesos, aloxamento de activos, vistas privadas e incluso proxectos despregados co seu propio dominio ou subdominio. E, por suposto, CodePen ofrece un gran repositorio con integración de Github onde todo o seu equipo pode traballar. Se só queres probar algún código sinxelo coma min, CodePen é unha ferramenta inestimable.

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.