es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


10 consejos Codepen para principiantes

Codepen es un sitio súper fácil y popular para escribir un combo de códigos de interfaz de usuario que funcione de inmediato. Si no sabes lo que Codepen es o no has escuchado antes, es básicamente un campo de código fuente en línea (llamémoslo OSCP para sonar nerdier) para los tres mosqueteros de la codificación front-end; HTML, CSS y JavaScript .

Hay otros OSCP similares, como JSFiddle, JS Bin, CSSDeck & Dabblet. Codepen es definitivamente uno de los desarrolladores front-end más conocidos. Sin más preámbulos, vamos directamente a algunos consejos básicos y útiles para usar Codepen.

1. Botón Ejecutar

Si no le gusta la forma en que la salida de su código en Codepen se mantiene actualizada mientras escribe, puede optar por no participar en la opción "Vista previa automática de actualización" y obtener un botón Ejecutar. Al hacer clic en él, podrá ver y actualizar la salida de su código siempre que lo desee .

Esta es también una gran opción si está trabajando con un código cuyo resultado pasa por muchos cambios de diseño y se repinta cada vez que se actualiza, lo que resulta en lentitud.

2. Incremento / Decremento numérico

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

3. Cursores Múltiples

Puede poner cursores en múltiples puntos en el código fuente, y luego escribir o editar en todos esos puntos al mismo tiempo . Esto solo funciona si ingresa 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. Diferentes mensajes de color de la consola

El objeto JavaScript de la Console tiene algunos métodos más además de log() para permitirle imprimir cosas en la consola web .

Puede usar los métodos info(), warn() y error() para información, advertencia y error . Por lo general, las consolas web colorean estos mensajes por escrito, o mostrarán un ícono apropiado al lado de ellos (como un signo 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 de la consola en la esquina inferior izquierda. Es ideal para una verificación rápida de los mensajes de la consola sin tener que abrir la consola del navegador . Esta consola distingue los diferentes tipos de mensajes de consola con diferentes colores de fondo .

5. Exportación

Una vez guardado, un bolígrafo (una sola entidad de Codepen) se puede exportar como un archivo ZIP con todo su código HTML, CSS y JS en los archivos. También hay una opción para guardar el lápiz como un github gist (un repositorio de 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 abrir el cuadro de diálogo "Buscar y reemplazar" .

7. Emmet Tab Trigger

¿Sabes sobre los activadores de pestañas para la codificación de Emmet? Emmet es una herramienta de productividad para desarrolladores de aplicaciones para el usuario que le permite escribir código de esqueleto que luego se amplía . Para hacer esto en Codepen, simplemente escriba rápidamente la abreviatura apropiada en el editor, presione la tecla Tab y el código completo aparecerá a la vez. Solo disponible para HTML en Codepen.

8. Obtenga archivos de código individual

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

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

9. Inspeccionar las variables de JavaScript

Como la consola JavaScript de Codepen se conecta con el JavaScript guardado en su pluma, también puede usarla para probar rápidamente su JavaScript. Esta función es especialmente útil para inspeccionar las variables JS, ya que de esta manera no tiene que insertar consola adicional o mensajes de alerta en el código original únicamente con fines de prueba.

10. Convierta la pluma en una plantilla

Si tiende a comenzar la mayoría de sus plumas con el mismo conjunto de códigos, puede usar una plantilla para guardar esos códigos repetitivos . Para convertir un lápiz en plantilla, marque la opción Plantilla en el menú Configuración. Cuando más adelante cree un nuevo bolígrafo, puede comenzar con su plantilla guardada haciendo clic en la flecha hacia abajo en el lado derecho del botón Nuevo bolígrafo. Abrirá una lista desplegable con todas sus plantillas guardadas para elegir.

8 impresionantes drones que puedes comprar para grabar videos aéreos con

8 impresionantes drones que puedes comprar para grabar videos aéreos con

El uso de drones está ganando popularidad en estos días y tienen muchos usos. Sin embargo, el uso más común es que las personas puedan capturar hermosas tomas aéreas. Después de todo, ofrecen una perspectiva diferente para el individuo interesado. Ya sea que esté pensando en experimentar con su fotografía o simplemente quiera probar un pasatiempo diferente, ¿por qué no considerar un dron?Hay mucho

(Consejos de tecnología y diseño)

15 ideas de regalo de bolsillo para ayudar a difundir el amor de Navidad

15 ideas de regalo de bolsillo para ayudar a difundir el amor de Navidad

Probablemente haya verificado la mayoría de las ideas de regalos disponibles, pero si no le gustan los obsequios voluminosos que podrían hacer un agujero en su bolsillo, entonces revise las opciones de bolsillo que tenemos para usted en esta publicación. Encontrará lindas cámaras pequeñas, diseños creativos de unidades de memoria USB, copias de seguridad de baterías portátiles, un rastreador de actividades, una billetera delgada e incluso una máquina de café espresso con alimentación manual.Nota: Algun

(Consejos de tecnología y diseño)