10 consejos de Codepen para principiantes

Codepen es un sitio super fácil y popular para bolígrafo abajo un combo de código frontal de trabajo inmediatamente. Si no sabe qué es Codepen o no lo ha oído antes, es básicamente un código fuente en línea de juegos (llamémoslo OSCP sonar nerdier) para los tres mosqueteros de codificación de front-end; HTML, CSS y JavaScript.

Hay otros OSCP similares por ahí como JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen es definitivamente uno de los más conocidos entre los desarrolladores front-end. Sin más preámbulos, saltemos a la derecha en algunos consejos básicos y útiles para el uso de Codepen.

1. Ejecutar el botón

Si no eres un fanático de la forma en que se actualiza la salida de tu código en Codepen mientras estás escribiendo, puedes optar por salir de la “Vista previa de actualización automática” opción, y obtener un botón Ejecutar en su lugar. Cuando haga clic en él, podrá ver y actualizar la salida de su código. cuando tu quieras.

Esta es también una gran opción si está trabajando con un código cuya salida Pasa por muchos cambios de diseño., y vuelve a pintar cada vez que se actualiza, lo que resulta en lentitud.

2. Incremento / decremento de números

Aumente o disminuya los números en su código en Codepen sin teclear los nuevos numeros. Todo lo que tienes que hacer es usar la combinación de teclas Ctrl / Cmd y Flechas arriba y abajo.

3. Cursores múltiples

Puedes poner cursores en múltiples puntos en el código fuente, A continuación, escriba o edite en todos esos puntos al mismo tiempo. Esto solo funciona si está ingresando la misma información y reduce la necesidad de copiar y pegar. Simplemente mantenga presionada la tecla Ctrl / Cmd mientras hace clic en esos puntos múltiples.

4. Mensajes de consola de diferentes colores

los Consola Objeto JavaScript tiene algunos métodos mas además Iniciar sesión() para permitirte imprimir cosas en la consola web.

Puedes usar el info (), advertir() y error() métodos para información, advertencia y error. Por lo general, las consolas web colorean estos mensajes de manera tipográfica o mostrarán un ícono apropiado junto a ellos (como una señal de advertencia para el mensaje de advertencia) para un reconocimiento más fácil.

Codepen tiene su propia consola. que puede abrir haciendo clic en el botón Consola en la esquina inferior izquierda. Es ideal para una rápida comprobación de los mensajes de la consola. Sin necesidad de abrir la consola del navegador.. Esta consola distingue los diferentes tipos de mensajes de consola. con diferentes colores de fondo.

5. Exportar

Una vez guardado, un bolígrafo (Una sola entidad Codepen) puede ser exportada como un archivo ZIP con todos sus códigos HTML, CSS y JS en archivos. También hay una opción para guardar la pluma. como una esencia de Github (un repositorio Git). Puede encontrar el botón Exportar en la esquina inferior derecha de cada pluma.

6. Buscar y reemplazar

Buscar y reemplazar - una operación esencial para las personas que tienden a cambiar el nombre de sus nombres de variables de vez en cuando. Ctrl / Cmd + Shift + F es la combinación de teclas para abre el “Buscar y reemplazar” diálogo.

7. Emmet Tab Trigger

¿Sabes acerca de los disparadores de pestañas para la codificación Emmet? Emmet es una herramienta de productividad para desarrolladores front-end que le permite escribe el código del esqueleto que luego se extiende. Para hacer esto en Codepen, simplemente escriba rápidamente la abreviatura apropiada en el editor, presione la tecla Tab y aparecerá el código completo a la vez. Solo disponible para HTML en codepen.

8. Obtener archivos de código individuales

Si usa la opción Exportar como se mencionó anteriormente, obtendrá los tres archivos (HTML, CSS y JS) de su pluma. Pero si te interesa solo uno o dos de esos archivos, y desea descargarlos individualmente, hay una opción para eso también en Codepen.

Una vez que haya iniciado sesión en Codepen, vaya a su pluma y haga clic en el botón Cambiar vista en la esquina superior derecha. En la parte inferior de la lista desplegable, verá la Enlaces de descarga directa para los archivos individuales..

9. Inspeccionar las variables de JavaScript

Como la consola de JavaScript de Codepen se conecta al JavaScript guardado en su bolígrafo, también puede usarlo para probar su JavaScript rápidamente. Esta característica es especialmente útil en inspeccionando variables JS, como esta tu No tienes que insertar una consola extra o mensajes de alerta en el código original únicamente para fines de prueba.

10. Gire la pluma a la plantilla

Si tiendes a comenzar la mayoría de tus bolígrafos con la mismo conjunto de código, puedes usar una plantilla para guardar los códigos que se repiten. Para convertir una pluma en plantilla, marca la opción de plantilla en el menú de configuración. Cuando más tarde creas una nueva pluma, puedes Comience con su plantilla guardada haciendo clic en la flecha hacia abajo en el lado derecho del botón Nueva pluma. Se abrirá una lista desplegable con todas las plantillas guardadas para elegir.