DEV Community: CodingTube

¿Por qué uso punto y coma (;) en Javascript si no es obligatorio? 🤔

CodingTube — Tue, 05 Jan 2021 11:07:09 +0000

Cuando Javascript acierta... 👍‍‍

Si bien es cierto no es obligatorio poner el punto y coma (;) al final de cada sentencia en Javascript, ya que éste automáticamente detecta el final de cada línea de código e internamente le inserta un punto y coma, si es altamente recomendable su uso, ya que hay veces en que Javascript no logra interpretar bien el final de cada sentencia y produce errores.

Analicemos este ejemplo para entenderlo mejor. Si escribimos el siguiente código, Javascript va a hacer la suma de estos números y luego, su resultado lo va a poner en pantalla:

alert(2+3+2+5);

el resultado será el siguiente: 12

Hemos utilizado el punto y coma al final, pero si lo omitimos:

alert(2+3+2+5)

vemos el mismo resultado: 12

Aquí Javascript interpreta correctamente el final de la sentencia y ejecuta el código correctamente, de hecho, si ponemos algunos saltos de línea y dejamos el código de la siguiente forma:

alert(2+
    3+2
    +5)

el resultado seguirá siendo 12.

No hay ninguna equivocación por parte de Javascript, ya que hay ciertas pistas en las que Javascript se basa para poder saber que el código aún continúa y no es el final de la sentencia. Como por ejemplo, al tener un signo "+" al final de la primera línea, Javascript sabe que el código continúa y no le pone un punto y coma. Al inicio de la última línea pasa lo mismo, con el signo "+", Javascript sabe que es la continuación de la línea anterior.

Cuando Javascript se equivoca... 👎‍‍

Pero si analizamos el siguiente ejemplo, vamos a ver como Javascript si se puede equivocar al momento de determinar dónde poner un punto y coma. Vamos a utilizar la función alert y otra función denominada forEach:

alert("Hola");
["Bienvenidos a", "CodingTube"].forEach(alert);

Lo que estamos haciendo aquí es mostrar al usuario un mensaje con la palabra "Hola", y luego la función forEach va a mostrar las frases “Bienvenidos a” y luego “CodingTube” después de presionar el botón aceptar.

Pero que pasa si omitimos los punto y coma de esta manera:

alert("Hola")
["Bienvenidos a", "CodingTube"].forEach(alert)

En el navegador solamente se muestra el primer mensaje "Hola" y luego nada más. Es decir no está poniendo un punto y coma al final de la primera sentencia y esto es como si se tuviera este código en una línea de esta forma:

alert("Hola")["Bienvenidos a", "CodingTube"].forEach(alert)

Si utilizamos la consola. La misma que se encuentra dentro del navegador presionando la tecla F12, vamos a ver un error luego de que se muestre el primer mensaje "Hola":

Uncaught TypeError: Cannot read property 'CodingTube' of undefined

Este error es el que no nos permite ejecutar la función forEach y por eso no se muestran los siguientes mensajes en el navegador. El error se crea al no haber un punto y coma antes de los corchetes [] de la función forEach.

Conclusiones 😊😊😊

Si quieres escribir código Javascript de forma profesional siempre, siempre, siempre!! utiliza el punto y coma al final de cada sentencia. Es una buena práctica. 🙌‍‍
En el ejemplo anterior encontrar el error es muy sencillo ya que el código es pequeño, pero si se trata de un proyecto mediano o grande con cientos o miles de líneas de código, encontrar el error puede ser una tarea agotadora, así que acostúmbrate al punto y coma que te puede ahorrar varias horas de trabajo. 😫

Si quieres ver esta explicación más a detalle, te recomiendo el siguiente video. Puedes ver todo el video que contiene varios temas o si quieres ver sólo la explicación del punto y coma, sáltate al minuto 10:22. 😉

Si te interesó este contenido me puedes seguir mis redes sociales:

✅ Twitter
✅ YouTube
✅ WEB

Icono de portada diseñado por Freepik from www.flaticon.es

Diseño responsivo con Media Queries

CodingTube — Tue, 03 Nov 2020 03:13:01 +0000

¿Qué son los Media Queries? 🤔

Cuando se trata de diseño responsivo, una de las mejores herramientas son los Media Queries. Los Media Queries te permiten aplicar estilos dependiendo de ciertas condiciones. Éstas condiciones, en un diseño responsivo, son los tamaños de las pantallas.

Es decir, tu puedes condicionar el estilo de una página dependiendo del tamaño de la pantalla. Por ejemplo, si la pantalla donde se está viendo el contenido es de 375px o menor se puede especificar cierto color de fondo. Éste color de fondo puede cambiar si la pantalla es de 678px o mayor, y tener otro color completamente diferente si el tamaño es de 1080px en adelante, y así sucesivamente...

La forma de aplicar un Media Query dentro del archivo CSS es la siguiente:

@media only screen and (max-width: 768px){
   body{
      background-color: grey;
   } 
}

Donde:

@media: es la declaración inicial para indicar que lo que precede es un Media Query.
only: indica que los cambios se van a ver solamente donde se especifica. Podemos omitirlo.
screen: determina donde quiero ver los cambios, en este caso en pantalla, también puede llevar el valor de print, donde aquí, los cambios se van a ver cuando presionamos CTRL + P y se muestra la pantalla donde se previsualiza la página antes de enviar a imprimir.
and: conector lógico que indica al navegador que además de mostrar en pantalla también se debe cumplir la condición que está a continuación: (max-width: 768px). Este conector lógico también puede ser "or".
(max-width: 768px): Aquí estamos diciendo que los cambios que se encuentran dentro de las llaves "{}" se apliquen para pantallas cuyo tamaño sea menor o igual a los 768px. Así como hay max-width también se puede usar min-width donde el resultado va a ser el opuesto.

¿Se puede cambiar solamente el color de fondo? 🎨

En realidad puede ser cualquier estilo, no solamente el fondo, absolutamente cualquier estilo, desde los colores, el tamaño, hasta la disposición de los elementos.

Quiero saber más... 🙋‍‍♀️🙋‍‍♂️

Si quieres conocer más acerca del diseño responsivo con Media Queries te recomiento el siguiente video: 📹

👍‍‍Si te interesó este contenido me puedes seguir en:
twitter: @CodingTube 👈‍‍ youtube: CodingTube ❤️

Cómo mejorar tus habilidades como desarrollador frontend construyendo páginas reales.

CodingTube — Sun, 25 Oct 2020 13:01:36 +0000

¿Sabes utilizar HTML, CSS, Javascript o sus diferentes frameworks y aún no has creado ninguna página completa, con un diseño profesional?, ¿Estás cansado de ir de tutorial en tutorial haciendo piezas de código aisladas sin poner en práctica todos estos conocimientos en una página real? ¿Quisieras armar tu portafolio de proyectos para poderlo presentar aplicando a un trabajo?

La página 📰

No te preocupes, en este post te voy a mostrar una página que te va a ayudar a solucionar estos problemas y muchos más. Ésta página se llama frontendmentor.io, que aunque está en su fase beta está muy avanzada y realmente cumple con lo que promete que básicamente es darte las herramientas necesarias para que subas de nivel tus habilidades cómo desarrollador con proyectos reales.

Los retos 💪

Ésta página básicamente te brinda retos orientados al frontend, es decir a lo que usuario final ve en pantalla, y se puede resumir en 4 pasos:

Eliges el reto que quieres hacer.
Realizas el código y el diseño en tu computador con las herramientas y tecnologías que tú creas conveniente.
Envías la solución a la página donde podrás recibir feedback de otras personas; y
También podrás dar feedback a los demás.

Los diseños que se tiene como reto, son diseños profesionales, que no solamente te ayudarán a poner en práctica tus conocimientos, si no que también te ayudarán a engrosar tu portafolio de proyectos creados, que como sabes muy bien, un buen portafolio, es una excelente carta de recomendación que puedes presentar al momento que estés buscando trabajo como desarrollador web.

Lo bueno es que estos retos no solamente están pensados para personas que dominan las tecnologías del desarrollo web si no que también existen niveles donde si estás empezando en este maravilloso mundo puedes seleccionar niveles como intermedio o newbie que significa novato.

No es necesario suscripción 😍

Si bien es cierto la página es de paga, tú tienes una gran variedad de retos que puedes empezar a hacer simplemente registrándote en la misma, sin la necesidad de ingresar datos de una tarjeta de crédito.

Lo único que no incluye en la versión gratuita son los esquemáticos donde básicamente te va a decir cuantos pixeles de distancia debe haber entre los elementos, sin embargo esto lo puedes aproximar con herramientas que te permitan medir los píxeles en las imágenes de donde vas a tomar el diseño, así que tampoco lo veo tan necesario.

¿Qué es lo que te provee la página para que empieces a crear los diseños?📎

Una vez te hayas decidido por el reto le vas a dar click en StartChallenge y se van a descargar los archivos que vas a necesitar:

La carpeta con los diseños en jpg.✔
Otra carpeta con recursos como las imágenes que necesitas para el diseño, así como los fondos en caso de que se requiera, estos fondos tanto para móvil y escritorio.✔
El gitignore que lo necesitarás para cuando trabajes con GIT.✔
Un archivo html que tiene todo el texto ya digitado, hay que darle un poco más de formato con más etiquetas.✔
El archivo readme donde encontarás información general de cómo podrás empezar a programar y que hacer una vez que ya tengas tu diseño listo.✔
Una guía de estilos básicas que te indicará colores, tipografía y tamaños.✔

¿Estas atorado con algún reto? 😵

También puedes revisar soluciones hechas por otros usuarios y esto lo podrás revisar en la sección solutions que se encuentra en la parte superior. Donde aquí podrás ver las soluciones a todos los retos que se han enviado, podrás darle al botón me gusta o ponerle una marca para que lo puedas encontrar más rápido después.

De esta manera si estás enfrascado en alguna parte y quieres ver cómo lo han resuelto algunas personas esto te puede ser de mucha utilidad. Quieres saber más detalles checa el siguiente video:

Si te interesó este contenido me puedes seguir en twitter: @CodingTube o en youtube: CodingTube