DEV Community: DYLAN VILLARREAL TOSCANO

100 DAYS CSS CHALLENGE: Day #2

DYLAN VILLARREAL TOSCANO — Fri, 08 Mar 2024 01:40:23 +0000

Hola Mundo.

El ejercicio del día #2 requirió utilizar animaciones. Las cuales no estoy muy familiarizado. El objetivo de este reto es entender y comprender el mundo que es el CSS.

Day 2

100 DAYS CSS CHALLENGE DAY 2.

Código base del reto

HTML

<div class="frame">
  <div class="center">
        <p>Happy coding :)</p>
  </div>
</div>

CSS

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
    box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
    overflow: hidden;
  background: #fff;
  color: #333;
    font-family: 'Open Sans', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

1. Identificar los elementos del reto

El elemento cuenta con 4 contenedores.

El contenedor principal sirve para contener 3 contenedores con estilo de líneas.

De igual manera se pueden identificar alrededor de 6 animaciones, 2 animaciones por línea

Al momento de darle clic, el primero y última línea se desplazan al centro, después de llegar rotan para quedar en diagonal y formar una X. La línea de en medio se encoge mientras cambia su opacidad.

Una vez toma la forma de X Al darle clic pasa a su forma original de la manera inversa.

2. Maquetación de los elementos

Para el contenedor principal cree un div al cual le asigne un, Id para posteriormente acceder a él mediante JS, la clase btn para aplicar estilos. A sí como él role button que sería el papel que plantea el reto un botón de menú de hamburguesa

Para las líneas les asigné dos clases, una de ellas la comparten esta contaría y la segunda para identificar a cada uno por separado.

<div id="btn-1" class="btn" role="button">
  <div class="line line-1"></div>
  <div class="line line-2"></div>
  <div class="line line-3"></div> 
</div>

3. Estilos básicos.

Para el diseño del contenedor principal. Opte por hacer uso de display flex para facilitar el acomodo de los elementos

Dejo un recurso rápido del uso de flexbox

btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80px;
  height: 52px;
}

.btn .line {
  background: white;
  width: 80px;
  height: 8px;
  border-radius: 3px;
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.3);
}
.btn:hover {
  cursor: pointer;
}

Resultado de la aplicación de estilos

4. Animación de entrada

La animación de entrada de la línea 1 y línea 3 se dividen en dos.

Desplazamiento al centro.
Rotación diagonal.

Mientras que la línea 3 escala su tamaño mientras baja su opacidad.

Para realizar esto haré uso de keyframes

De manera resumida, los keyframes nos permite definir estilos de css por frame para la creación de animaciones.

Animación de la línea 1 y 3
Para este caso definí el 70% y 100%. El 0% sería la posición inicial.

70% Traslada en el eje y 21 píxeles.
100% Rota la línea -45 grados y termina de acomodar la linea para centrarla.

En el caso del translate que agregue en el 100% lo hice a ojo mirando que la X que se forma se mirara céntrica.

Para la línea 3 el translareY es negativo, ya que va de abajo hacia arriba.

/* Linea 1 */
@keyframes moveTopToCenter {
  70% {
    transform: translateY(21px);
  }
  100% {
    transform: rotate(-45deg) translateY(17px) translateX(-14px);
  }
}

/* Linea 3 */
@keyframes moveBottomToCenter {
  70% {
    transform: translateY(-21px);
  }
  100% {
    transform: rotate(45deg) translateY(-14px) translateX(-15px);
  }
}

Animación de la línea 3

Para esta línea fue un scale de 1 a 0, agregando opacidad de 0.7 al 50% para evitar que se visualiza muy transparente a la mitad de la animación para al 100% ser de 0

@keyframes reduce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

Para el manejo de tiempo de animación, cree otra clase llamada animated. La cual uso para aplicarle a todas la misma duración.

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

La idea de hacerlo de est amanera la aprendi de una libreria usada para la creacion de animaciones Animate CSS

Resultado después de la aplicación de los estilos

Para regresarlas a la forma anterior, aplique lo mismo pero a la inversa.

/* Linea 1 */
@keyframes leaveTopToCenter {
  0% {
    transform: rotate(-45deg) translateY(17px) translateX(-14px);
  }
  30% {
    transform: rotate(0deg) translateY(21px) translateX(0px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Linea 3 */
@keyframes leaveBottomToCenter {
  0% {
    transform: rotate(45deg) translateY(-14px) translateX(-15px);
  }
  30% {
    transform: rotate(0deg) translateY(-21px) translateX(0px);
  }
  100% {
    transform: translateY(0);
  }
}
/* Linea 2 */
@keyframes expand {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

5. JS para controlar la animación

Esta fue mi propuesta para el código donde al momento de darle clic al botón agrega las clases respectivas apara la transformación.


 const btn1 = document.getElementById("btn-1");
 const lines = document.getElementsByClassName("line");

// Funcion para eliminar y agregar clases a elemetnos html
 const classHelper = (elementHtml, classAdd, classRemove) => {
   elementHtml.classList.add(classAdd);
   elementHtml.classList.remove(classRemove);
 };

// Funcion qencargada de disparar la animacion
 const dispatchAnimation = () => {
   const [line1, line2, line3] = lines;

   if (line1.classList.contains("moveTopToCenter")) {
      classHelper(line1, "leaveTopToCenter", "moveTopToCenter");
      classHelper(line2, "expand", "reduce");
      classHelper(line3, "leaveBottomToCenter", "moveBottomToCenter");

       classHelper(line2, "d-block", "d-none");
        } else {
       classHelper(line1, "moveTopToCenter", "leaveTopToCenter");
       classHelper(line2, "reduce", "expand");
       classHelper(line3, "moveBottomToCenter", "leaveBottomToCenter");
        // Al momento de terminar la animacion principal aplico estilos
        // Para ocultar el linea 2

        setTimeout(() => {
          classHelper(line2, "d-none", "d-block");
        }, 500);
      }
 };

 btn1.addEventListener("click", () => {
   const clasess = btn1.classList;

   // Clase que utiliso para saber si actualmente se encuentra en transicion
   if (clasess.contains("is-animating")) return;

   // Agrego la clase de que se esta animando
   btn1.classList.add("is-animating");

   // Mando a llamar la funcion para aplicar al animacion
   dispatchAnimation();

   // Elimino la clase de que se esta animando.
   setTimeout(() => {
      btn1.classList.remove("is-animating");
     }, 700);
  });

Resultado final

Revisando la manera en que lo realiza la página de 100 días de CSS, a sí como videos de YouTube realizando el mismo ejercicio, encontré puntos de mejora en mi código para hacerlo más legible y óptimo.

Háganme saber en los comentarios si quieren un post analizando los cambios que se pueden aplicar y otras formas de realizar este reto del día dos.

100 DAYS CSS CHALLENGE: Day #1

DYLAN VILLARREAL TOSCANO — Mon, 04 Mar 2024 01:25:37 +0000

¡Hola mundo! Me gustaría compartir la manera en la que resuelvo los 100 retos de 100 DAYS CSS CHALLENGE.

El objetivo de realizar los 100 retos es el mejorar mi comprensión de CSS. Explicando lo que se hace se logra comprender de una manera más profunda lo que se está haciendo.

Day #1

Código base del reto

HTML

<div class="frame">
  <div class="center">
        <p>Happy coding :)</p>
  </div>
</div>

CSS

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
    box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
    overflow: hidden;
  background: #fff;
  color: #333;
    font-family: 'Open Sans', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Pasare a describir el proceso que yo realizo para este tipo de retos

1. Identificar los elementos del reto

Para este caso, tomando el código base proporcionado por el reto, estos fueron los contenedores que identifique.

3. Maquetación de los elementos identificados

 <div class="frame">
   <div class="center">
    <!-- 1.- Contenedor de las letras 100 -->
     <div class="days">
       <!-- 5.- Linea del uno principal-->
       <div class="one one__line1"></div>
       <!-- 4.- Linea diagonal del uno-->
       <div class="one one__line2"></div>
       <!-- 6.- Zero de en medio-->
       <div class="zero zero1"></div>
       <!-- 7.- Zero de el final -->
       <div class="zero zero2"></div>
     </div>
    <!-- 2.- Texto days-->
    <p class="text-big">Days</p>
    <!-- 3.- Texto pequeño-->
    <p class="text-small">css Challenge</p>
  </div>
</div>

En este punto luce de la siguiente manera:

3. Degradado de fondo

El fondo del contenedor cuenta con un degradado de dos colores, el cual va del extremo inferior izquierdo al extremo superior derecho.

Se modificó la declaración de los estilos del contenedor con la clase .frame a la cual se le agregó la siguiente propiedad:

mdn web docs: linear gradient

.frame {
  background: linear-gradient(45deg, #6525b3, #b191e5);
}

45deg puede ser cambiado por to top right

Con esto logramos tener el fondo con gradiente. Yo escogí colores diferentes para este reto.

4. Tipografía

Tengo que admitir que para este punto si me vi en la necesidad de inspeccionar elemento para saber la el font-family necesario para el reto.

Se agregó al contenedor con la clase .frame las propiedades font-family y color.

Lo hago de esta forma para que todos los hijos del contenedor con la clase .frame hereden las propiedades agregadas.

.frame {
  color: #f0ecec;  
  font-family: "Courier New", "Courier", sans serif;
}

Para el texto agregué la propiedad text-transform a la etiqueta p de manera general.

De igual manera, aplique un reset del margen a 0 y un font-weight de 700

mdn web docs: text-transform

p {
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}
p.text-big {
  font-size: 80px;
  line-height: 56px;
  margin-top: 12px;
  margin-top: 5px;
}
p.text-small {
  margin-top: 2px;
  font-size: 24px;
}

5. Número 100

Ya para este punto el reto va tomando forma.

Empecé delimitando el área, el cual va a abarcar el 200px* de ancho y una altura de la mitad de ese valor para obtener la forma rectangular, tomando de base el texto **DAYS

 .days {
  border: solid 1px red;
  width: 200px;
  height: 100px;
 }

Pasando a con el número 1**

Para este inicie definiendo en la clase one los estilos que las dos partes del número uno compartirían.

.one {
  box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
  background-color: #f0ecec;
  width: 24px;
}

En este punto visualmente no se puede apreciar el número 1 dado que revisando el reto nos podemos dar cuenta que se necesitara sobreponer elementos.

Para realizar esto de una manera más cómoda se necesita darle la propiedad positon con el valor relative al contenedor padre de los números, en este caso days. A si como asignarle la propiedad position con el valor absolute a los contenedores de los números.

mdn web docs: position

.days {
  position: relative;
  border: solid 1px red;
  width: 200px;
  height: 100px;
}
.one {
  position: absolute;
  background-color: #f0ecec;
  width: 24px;
}

Ahora ya se puede trabajar las dos partes del número uno.
Para el número 1 nos damos cuenta las siguientes características:

Está posicionado en la parte izquierda.
Abarca toda la altura del contenedor.
Cuenta con bordes redondeados.
Se encuentra al frente de los demás contenedores.

.one.one__line1 {
  /* 1 */ left: 0;
  /* 2 */ height: 100%;
  /* 3 */ border-radius: 3px;
  /* 4 */ z-index: 11;

}

Para la segunda línea del número 1 Nos percatamos de las siguientes características:

Los valores que asigne fue a prueba y error buscado el que mejor se adapte o paresca

Inclinación de 50 grados.
Altura menor de la mitad de la primera línea.
Ancho menor a en comparación con la primera línea.
Sale un poco del contenedor principal del lado izquierdo.
Se ubica en la parte superior del contenedor principal.
Se encuentra detrás de la línea principal.

.one.one__line2 {
  /* 1 */ transform: rotate(50deg);
  /* 2 */ height: 40px;
  /* 3 */ width: 18px;
  /* 4 */ left: -16px;
  /* 5 */ top: 0;
  /* 6 */ z-index: 0;
}

Ceros Para realizarlos de igual manera cree 3 clases. Una clase para asignar estilos que compartían. Dejando las otras dos clases para controlar posicionamiento.

Este es más fácil de lo que parece, lo dividiré en dos partes para que se pueda observar el cómo se realiza. Características:

Los círculos posen el mismo alto que ancho
El alto es igual que la línea principal del número uno.
Pose un borde algo robusto.

.zero {
  position: absolute;
  box-sizing: border-box;
  /* 1 */ width: 100px;
  /* 2 */ height: 100%;
  /* 3 */border: 24px #f0ecec solid;
}

Con esto todavía no contamos con la forma del cero. De esta forma obtenemos un cuadrado el cual luce de la siguiente forma:

Para darle la forma circular basta con aplicar un border-radius del 50%. De igual manera agregamos la propiedad position: absolute para modificar su posición.

.zero {
  position: absolute;
  box-sizing: border-box;
  width: 100px;
  height: 100%;
  border-radius: 50%;
  border: 24px #f0ecec solid;
}

Procedemos a modificar su posición utilizando las clases auxiliares que se agregaron.

.zero1 {
  left: 20px;
  z-index: 10;
}
.zero2 {
  right: 0;
}

Resultado final

Muchas grasias por leer, pongan en los comentarios si quieren un post explicando la animacion que agregue.

Mi primer trabajo como Desarrollador Front-end Jr.

DYLAN VILLARREAL TOSCANO — Fri, 01 Mar 2024 23:09:29 +0000

Como recién egresado puede ser difícil encontrar el primer trabajo, más cuando no se pose una experiencia que te respalde. En este post te contaré como fue mi experiencia y el camino que yo seguí para conseguir mi primer trabajo como desarrollador front-end Jr.

1. Acércate a la comunidad

Una de las cosas que me hubiera gustado saber era la comunidad de desarrolladores de mi localidad. Al momento de iniciar mi carrera no conocía las comunidades que existen en mi localidad.

Durante mi etapa como estudiante fui a pláticas de diversas comunidades en mi localidad. Esto me permitió conocer las tecnologías que se estaban usando en ciertos sectores, otras pláticas se centraron en un ámbito más personal.

Donde se abordaron temas como el síndrome del impostor, como crear un buen curriculum y comunicación efectiva. Estas hablaban de temas que para mí como estudiante eran desconocidos.

Acercarte a estas comunidades te ayudará a conocer diversos temas, opiniones y tecnología que serán útiles durante el desarrollo personal.

2. Participación en Bootcamps y cursos

La participación dentro de bootcamps o la realización de cursos pueden o no tener mucha relevancia a la hora para obtener un puesto.

Lamentablemente, mi interés en buscar estos programas inicio a la mitad de mi carrera. Mientras cursaba la ingeniera en el desarrollo de software. Conocí programas por parte del gobierno o empresas donde te proporcionaban la facilidad de aprender nuevas tecnologías.

Bright coders

En mi estado se encuentra la empresa MagmaLabs esta empresa cuenta con un programa de capacitación en ruby on rails o react native, con duración de 4 meses.

Fue un programa importante para mí, puesto que me ayudo a entender mejor el trabajo en equipo, a sí como mejorar la comprensión de la documentación oficial de las herramientas que utilizaba.

InovAccion

Programa patrocinado por el gobierno de México. Este programa estaba orientado a aprender tecnologías de la nube, en este caso Azure, con duración de dos meses.

Este fue el segundo programa que curse durante la carrera, en este programa tuve mi primer acercamiento con la nube.

En la última semana del programa se nos juntó en quipos los cuales participamos en un hackaton, al ser un programa financiado por el gobierno se nos pagó a los que logramos finalizar el examen para la certificación AZ-900.

Una experiencia que me serviría durante la carrera principalmente.

Full Stack devloper: Bedu by Santander

Programa patrocinado por Santander. Santander cuenta con una página que se dedica a difundir oportunidades de aprender, no solo como desarrollador.

Apareció el anuncio de este curso mientras navegaba en Facebook. Vi el programa y se adaptaba a las tecnologías que buscaba aprender y desarrollar. Ya en ese estaba haciendo mis prácticas profesionales, pero en ese tiempo, como próximo recién egresado, necesitaba adquirir la mayor cantidad de experiencia y conocimientos de la que fuera capas.

5. Portales de empleo

Páginas como LinkedIn, Glasdor o la bolsa de trabajo de tu localidad o país pueden ayudarte a conocer diversos empleos a los que puedes aplicar.

Como estudiante yo aplique a interships y programas de becarios. Fui entrevistado un par de veces, me llegaron varios correos diciéndome que no y también estuve a la espera de que me respondieran algún correo que envíe.

No importa si no cumples con todos los requisitos, o si te da miedo una entrevista es normal, es parte de ser humanos. Cada entrevista es diferente y la experiencia de cada entrevista en la que estés te va a ayudar a saber qué hacer en la siguiente,

4. Conexiones

En los dos puntos anteriores esta fue una parte importante. Las conexiones me sirvieron para enterarme de posiciones o ofertas laborales de las empresas antes de que estas la publicaran. A si como ser recomendado por personas con las que tuve el gusto de trabajar.

Sé que para algunas personas de esta área, como es mi caso, es difícil, hasta algunas veces cansado, el tener que salir de la zona de confort y acercarte a alguien para entablar una conversación.

No hubiera logrado llegar tan lejos, si no fuera por aquellas personas que pensaron en mí y me apoyaron a un que sea solo dándole me gusta a una publicación de búsqueda de empleo.

Conclusión

Esos son los puntos que marcaron la diferencia a la hora de encontrar mi primera chamba, Si quieren que hable sobre exactamente como influyo esto para encontrar mi primer empleo déjenmelo en los comentarios, ya que es una historia un poco más larga.

Y dime, ¿Qué otro punto agregarías a aquí?