CodePen: construye, prueba, comparte y descubre HTML, CSS y JavaScript

Codepen: compile, pruebe y descubra código front-end

Un desafío con un sistema de administración de contenido es probar y producir herramientas con guiones. Si bien ese no es un requisito para la mayoría de los editores, como publicación de tecnología, me gusta compartir scripts de trabajo de vez en cuando para ayudar a otras personas. He compartido cómo usar JavaScript para comprobar la seguridad de la contraseña, Cómo comprobar la sintaxis de la dirección de correo electrónico con expresiones regulares (Regex), y agregó más recientemente este calculadora para predecir el impacto en las ventas de las reseñas en línea. Espero agregar docenas de herramientas en el sitio, pero WordPress no es exactamente propicio para publicaciones como esta ... es un sistema de contenido, no un sistema de desarrollo.

Entonces, para que mis pequeños scripts funcionen, disfruto usando CodePen. CodePen es una herramienta perfectamente organizada con un panel HTML, un panel CSS, un panel JavaScript, una consola y una publicación del código resultante. Cada panel tiene información cuando pasa el mouse sobre los elementos para que comprenda lo que es posible, así como la codificación de colores de su HTML, CSS y JS para ayudarlo a editar y escribir más fácilmente.

CodePen es un entorno de desarrollo social. En esencia, le permite escribir código en el navegador y ver los resultados a medida que lo construye. Un editor de código en línea útil y liberador para desarrolladores de cualquier habilidad, y particularmente empoderador para las personas que están aprendiendo a codificar. CodePen se enfoca principalmente en lenguajes front-end como HTML, CSS, JavaScript y sintaxis de preprocesamiento que se convierten en esas cosas.

Acerca de CodePen

Con CodePen, pude hacer todo el trabajo necesario para publicar la calculadora Me incrusté en el sitio. La mayoría de las creaciones en CodePen son públicas y de código abierto. Son seres vivos con los que otras personas y la comunidad pueden interactuar, desde un simple corazón, hasta dejar un comentario, bifurcar y cambiar para sus propias necesidades.

CodePen: calculadora para predecir el impacto en las ventas de las reseñas en línea

Con CodePen, puede cambiar su vista si desea que los paneles estén a la izquierda, derecha o abajo mientras trabaja ... o ver el HTML en una nueva pestaña. La vista de lado a lado funciona increíblemente bien para probar su configuración de respuesta, ya que puede ajustar el tamaño del panel visible.

Puede organizar cada uno de sus scripts de trabajo en bolígrafos, combinarlos en proyectos (editor de varios archivos) o incluso crear colecciones. Básicamente, es un sitio de portafolio de trabajo para código front-end donde puede seguir a otros autores, bifurcar otros proyectos compartidos públicamente en los suyos para modificarlos e incluso aprender a hacer cosas divertidas a través de desafíos.

Puede guardar como GitHub Gist, exportar en un archivo zip e incluso incrustar el bolígrafo en un artículo como este:

Vea la pluma
Impacto de ventas previsto de las revisiones en línea
by Douglas Karr (@douglaskarr)
on CodePen.


Una de las limitaciones del editor de Pen es el gran volumen de código. Es posible que nunca se encuentre con este problema, ya que el editor debería estar bien con cientos o incluso miles de líneas de código. Pero cuando comienzan a llegar a 5,000 - 10,000 o más líneas de código, verá que el editor comienza a fallar. Sin embargo, puede agregar referencias externas a hojas de estilo o JavaScript alojado en otro lugar.

Te animo a que te registres. Estarás suscrito a su correo electrónico semanal y también podrás agregar el feed a tu feed RSS para que puedas ver los bolígrafos recién publicados. Y, si comienza a buscar o navegar por los bolígrafos públicos allí, encontrará algunos proyectos increíbles ... ¡los usuarios son bastante talentosos!

Síguenos Douglas Karr en Codepen

La versión paga, CodePen Pro, ofrece un montón de funciones adicionales para mejorar la funcionalidad o los equipos, que incluyen colaboración, procesos, alojamiento de activos, vistas privadas e incluso proyectos implementados con su propio dominio o subdominio. Y, por supuesto, CodePen proporciona un gran repositorio con integración de Github donde todo su equipo puede trabajar. Si solo desea probar un código simple como yo, CodePen es una herramienta invaluable.

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.