Menu
in

CodePen: Editor de código con preview en tiempo real

Si eres desarrollador Web o de programas seguramente conoces los servicios de CodePen, por este motivo desde Neoteo te vamos a presentar los mejores consejos para sacarle los mayores resultados a dicha plataforma, de esta manera podrás editar y crear proyectos en HTML, CSS y JavaScript en tiempo real.

Pero para los que desconocen las prestaciones de CodePen, vamos a hacer una breve reseña para que lo incorpores en tus herramientas de desarrollo. CodePen es una plataforma para hacer pruebas, editar, practicar y compartir pequeños proyectos Web o frontend (pen’s ) de programas en HTML, CSS y JavaScript (soporta metalenguajes); y de esta manera tú y la comunidad podrán hacer las mejoras en tiempo real.

 

Botón Run

Si eres uno de esos usuarios que no está conforme con la salida del código mientras los estás desarrollando. Podrás desechar la opción Auto Update Preview y obtener un botón de Ejecutar (Run) en su lugar. Y de esta manera cada vez que actualizas el diseño podrás pinchar en el botón y refrescar el diseño.

Settings – Behavior – (Desactivar) AUTO UPDATE PREVIEW

Esto lo recomendamos para desarrollos pesados y con una gran cantidad de código y mezcla de lenguajes.

Activar el botón Run

 

 

Exportar

Una vez guardado el Pen lo podrás exportar en archivo ZIP, con todos los lenguajes (HTML, CSS y JS). Pero también existe una opción para guardarlo como un Github gist.

Export – Save as GitHub Gist

De esta manera tendrás tu trabajo como un repositorio de Github.

Una opción muy útil

 

Buscar y reemplazar

Buscar y reemplazar es una de las acciones más importantes en la plataforma, porque los desarrolladores cambian nombres, variables y otros elementos de forma muy habitual.

Ctrl + Shift + F (habilitas las búsquedas) – Escribes la palabra a reemplazar en Replace – Enter – Escribes lo que quieres insertar en Witch – Enter – Luego pinchas en Yes y All.

Puedes hacer todos los reemplazos de una sola vez

 

 

Obtener los archivos de código individual

Si exportas un Pen de la forma convencional, obtendrás los tres archivos (HTML, CSS y JS), pero si necesitas uno de los tres tendrás que utilizar esta acción.

Change View – Direct Code Links: aquí eliges el lenguaje que quieras – Y lo podrás guardar de una pestaña del navegador.

Lo abrirá en una nueva pestaña del navegador

 

Pen como plantilla

Si utilizas casi todos tus Pen con la misma plantilla, podrás activar cada Pen que realices con la plantilla que utilizas de forma habitual. Pero primero tendrás que guardarlo como una template.

Settings – Insertar un Título al Pen – Seleccionar la opción Template

Guardar Template

 

Esperemos que con los consejos que te hemos dado para optimizar tu trabajo en CodePen, te sirva para que puedas sacarle mayor rendimiento a la plataforma y mejorar tus desarrollos.

Si quieres que realicemos una segunda parte del artículo, esperamos tus comentarios.

Escrito por Edgardo Fernandez

Leave a Reply