Si alguien se está preguntando, oye, ¿cómo puedo hacer que revises mi página y tal?
Bueno, pues en el Discord, que podéis hacer el comando de exclamación Discord,
pues vais a este canal, ¿ves? Tu web a juicio.
Este que sale en los ojitos estos así.
Y aquí lo ponéis.
Tenemos un montón, ¿vale?
Tenemos un montón por poner, así que vamos a empezar ya.
Aquí dice, hola, dejo mi página.
Es una plantilla que hice para inmobiliarias.
Una plantilla.
Number 304.
Buah, me ha dado una bofetada.
Material Design.
En cuanto he entrado, que casi me echa para atrás.
Bueno, a ver, una página, José Miguel, que está bien.
Está bien para lo que es.
Me gusta además el vídeo este.
Le da dinamismo.
No hacemos edificios, construimos hogares.
Dios, esta frase es potente.
Es algo así como para adentro.
¡Pam!
Proyectos destacados.
Bueno, a ver, está bien la web.
Lo que pasa es que a mí cuando una web se utiliza en ciertos frameworks,
que como que se nota, que se huele, ¿sabes?
Aquí en este caso el Material Design es muy claro.
Claro, ¿qué pasa?
¿Qué pasa con esto?
Para que entendáis, ¿vale?
¿Me gusta Material UI?
Sí que me gusta.
Me gusta Material UI.
¿Qué problema tiene Material UI?
El problema de Material UI es que cuando tú haces una página con Material UI,
no es tu página.
Es una página de Google, básicamente.
Entonces, está bien que utilices Material UI, especialmente para desarrollos que tengan que ser muy rápidos o cosas así.
Pero depende para qué.
Normalmente, por ejemplo, en este caso, pues a lo mejor está bien que utilices Material UI.
No hay problema, ¿sabes?
O sea, al final es una página así bastante sencilla.
Pero depende para qué proyecto, hombre, pensad que se pierde marca.
Porque al final el problema es que es como un proyecto de Google, en realidad.
¿Entendéis?
O sea, se pierde un poco de marca.
Ese es el problema.
Bueno, entonces hay proyectos grandes, no puedo utilizar Material UI, no tendría sentido.
Entonces, claro, va a quedar más o no bien, porque a ver, los colores, verlos todos.
A verlos todos.
Muy bien.
Verlos todos.
Pero está bien.
Me gusta el proyecto, sencillote, con los colores de la marca.
Eso está gracioso.
Pero es eso, no hay mucho que ver.
Es que al final esto, ubícanos.
Bueno, está bien, normal.
Pero es que, es lo que os digo, pillamos todos los trozos de Material Design, pues no va a quedar mal.
A ver, todavía se podría hacer algo.
Este, tengo que decir, este diseño no me gusta mucho, que esto queda aquí centrado.
O sea, esto está centrado, pero esto está centrado.
Esto está a la izquierda, esto está a la izquierda, pero luego esto está centrado también.
Este título es más grande que este.
Aquí hay cosas raras, ¿eh?
Este título, yo juro, que es más grande que este.
No lo sé.
¿Qué creéis?
¿Estoy en lo cierto o no?
Vamos a verlo.
Font Size 2125.
La descripción.
Vamos a ver este.
Ubícanos.
O a lo mejor es una...
Es que lo parece.
Este es 40 píxeles.
¿Y el de arriba?
34.
Esto hay que darle la vuelta, ¿eh?
Queda muy raro.
Es que, no sé, esta composición es un poco extraña.
Es un poco extraña.
Me tiene un poco confundido.
No sé.
No sé si necesita más espacio.
No sé.
Nombre completo, correo electrónico, número telefónico.
Enviar.
Vamos a darle.
Se le puede dar a enviar y aquí no pasa nada.
Pero bueno, se ve bien.
Me gusta.
O sea, no me desagrada, pero bueno, tened en cuenta estas cosas, ¿eh?
Proyectos destacados.
Tampoco esté destacado aquí en mayúscula.
¡Ay, mira, se tiene el blog!
Esto se puede arreglar.
Esto, amigos míos.
¡Uy, uy, uy, uy!
Que estoy viendo aquí.
¡Uy, uy, uy, uy, uy!
Eso tiene mala pinta, ¿eh?
Esto tiene un problema de performance importante.
A ver.
Aquí está mejor.
¿Veis los saltos esos que da?
¿Os dais cuenta?
Que da unos saltos.
Este, aquí veo que hay un problema de CSS seguro, ¿eh?
Seguro.
Sí.
Yo creo que o está bloqueando la fuente.
Aquí hay algo raro.
Este Material Design Icons.
¿De dónde está cargando CSS?
Porque lo está cargando desde JavaScript.
Esto está mal, ¿eh?
No, no, no, no, no.
Aquí te has colado, amigo.
Aquí te has colado.
Aquí hay algo que no está bien.
Aquí hay algo que...
O no, o sea, igual está en CSS.
Aquí hay algo raro.
Aquí hay algo raro.
Lo bueno.
Lo estoy oliendo.
Lo estoy oliendo.
Lo estoy oliendo.
Pero ¿de dónde sale, entonces?
Porque este application...
O sea, es que parece que hay una parte que está en los estilos,
pero ¿por qué no se cargan desde el principio?
¿Sabes?
Aquí hay algo raro.
Puede ser Style...
Pues aquí sí que están los estilos.
Hay algo raro.
Hay algo muy raro.
¿Por qué da ese salto si están los estilos aquí?
Y están en línea.
Deberían ser súper rápidos.
Y en cambio...
O fijáis que pega ese salto.
Como que se está cargando todos los estilos.
Empieza viéndose mal.
Es como que...
Conforme se va descargando los estilos.
O como si el JavaScript inyectase los estilos.
Ese es el tema.
Es como si el JavaScript inyectase los estilos.
Eso es lo que me parece.
Eso habría que revisarlo, ¿eh?
Habría que revisarlo porque me parece que ese es un problema.
Luego esto del protocolo, esto lo podrías deployar en Vercel y ya tienes HTTP2 y te va a ir mejor la página ya por defecto.
De gratis.
De gratis.
Un montón de JavaScript para un blog que no tiene...
O sea, no es raro.
¿Qué pensáis?
Esto es una pregunta seria.
Lo que os voy a decir ahora es una pregunta seria.
Por cierto, muchas gracias, Oguarup, Neith92 y Minfreak.
Os voy a hacer una pregunta seria.
¿Vosotros y vosotras?
¿Ustedes creen que la página que estamos viendo necesita JavaScript?
Ahí os lo dejo.
Ahí os lo dejo.
Esta página que estamos viendo aquí.
¿Creéis que necesita JavaScript?
Para el menú, las cookies y ya.
¿Pero qué cookies?
¿Qué menú?
Si el menú está aquí...
Porque si os fijáis en esta página, este blog, ¿vale?
Que es súper sencillo.
Fíjate.
O sea, yo entro aquí a Nickwork, me voy a JavaScript, voy a recargar.
Y tiene un mega y medio de JavaScript.
O sea, no tiene una taza.
Tiene un tazón de JavaScript que te lo está metiendo entre pecho y espalda.
O sea, un mega y medio de JavaScript.
¿Qué estamos haciendo, amigos?
Amigos, ¿qué estamos haciendo con nuestra vida, vale?
¿Qué estamos haciendo con el universo web?
¿Qué hacemos?
¿A qué jugamos?
O sea, vamos a ver.
Me sabe mal, ¿eh?
Me sabe mal.
Pero desde aquí os mando unas palabras de, no sé, que intento que sirvan y resuenen y hagan autocrítica en vosotros mismos, ¿vale?
La web está tirada.
HTML, CSS y JavaScript.
Pero lo más importante es el HTML y el CSS.
El JavaScript debería estar siempre y cuando se necesite.
Se pueden crear páginas web que no tengan JavaScript.
Que no pasa nada.
Que no está prohibido.
Todavía.
Todavía no.
Entonces, no intentemos meter, es que encima está hecha con view, que digo, ¿pero por qué?
Viendo la página, es que no veo dónde está la necesidad de meterle un mega, un mega y medio.
Y es que hoy, hoy me ha dicho alguien, oye, ¿por qué no haces tu blog también con Next.js?
Y le digo, ¿por qué sí?
Es que se nos va un poco de las manos.
Que es que no pasa nada que hagamos las páginas sin JavaScript, sin React o con el JavaScript justo.
Que es que parece que tenemos que hacer las cosas a cañonazos.
Es un poco bestia, ¿vale?
O sea, yo creo que se nos está yendo un poco de las manos.
Esto es lo que os digo, ¿vale?
En este caso este es muy sangrante.
Es un mega y medio que esto está impactando súper negativamente en la experiencia del usuario.
Que es que de hecho cuando se carga ya se ve que se va cargando.
Y eso que tengo una conexión súper brutal.
No sé, amigos, que no lo digo por este proyecto.
Lo digo un poco en general.
Porque muchas de las cosas que se ven aquí, esto es CSS puro y duro.
Esto deberían ser enlaces normales y corrientes.
Que espero que sea un enlace.
Vale, es un enlace, menos mal.
Y ya está.
Incluso el fetching de datos, no sé.
Seguro que se puede encontrar mejores soluciones.
Pero bueno, ahí os lo dejo, ¿vale?
Que tengamos un poquito, un poquito de, no sé.
No, si desactivo el JavaScript, seguro que está utilizando NACs.
Y entonces me imagino que esto tendrá ser VSI Rendering.
¿Ves?
Ay, no, espérate.
No, espérate.
Que es que he cerrado esto, claro.
Disable JavaScript.
No, sí.
Lo que pasa es que es eso.
¿Veis que hay como CSS que no carga?
Es un poco raro.
CSS no termina de funcionar bien.
No se ve la imagen.
El hecho de que no se vea la imagen, esto es muy raro también.
Que necesite JavaScript cuando ahora mismo las imágenes puedes tener el lazy load nativo.
Que por cierto, lo puse el otro día aquí en un artículo.
Lazy loading de imágenes HTML sin escribir JavaScript.
Pues eso.
No sé, que es que de hecho es mucho más fácil de desplegar, mucho más fácil de mantener.
No tienes que preocuparte de versiones, cosas así.
Pero a ver, que la página está bien, está bien.
Que tiene problemas de rendimiento, es obvio.
Que tiene demasiado JavaScript, sin ningún tipo de duda.
Pero bueno, ahí os lo dejo, ¿vale?
Vale, no sé si...
Vale, ya lo hemos dejado funcionando.
Y que es demasiado material, en mi opinión, demasiado.
Demasiado material.
Para mí.
Para mí.
O sea, como que se nota demasiado.
Pero bueno, le vamos a dar un check a nuestro number 304.
EnzoCuella.versell.app
Enzo, págate un dominio, hombre.
Que no son gratis, pero tampoco están mucho.
Uy, uy, uy, Enzo.
Enzo, Enzo, Enzo.
Vamos a ver, Enzo.
Amigo Enzo.
Lo primero es que este layout lo hemos visto ya en alguna ocasión.
Ya estoy viendo que esto es algo que se repite muchas veces.
Vale.
Vamos a ver.
Me gusta que sale su imagen.
Este, available for work.
Esto fuera.
Que parece ahí que se tacola un texto que nadie va a ver.
Hello, I Enzo.
Y tres puntos suspensivos.
No.
No, hombre.
Tres puntos suspensivos.
Aquí no hay suspense, Enzo.
O sea, hola, soy Enzo.
Y soy un frontend developer.
Yo esto lo pondría en grande, ¿sabes?
O sea, yo esto lo pondría más grande.
Y eso debe ser tu, no sé por qué se ha puesto ahí el menú encima.
Esta frase está bien.
I help people to transform the ideas into code.
Bueno, y más grande.
I am frontend developer.
Es que parece que es un hito histórico.
I am frontend developer.
O sea, prefiero que me digas tu nombre.
I am frontend developer.
Contact me.
Vale.
Bueno, esto está bien.
A ver, demasiado gris, ¿eh?
No me estoy enterando de nada.
Aquí hay tanto gris que al final no se lee, ¿no?
Y además, no sé qué hace.
Fíjate, no sé si lo podéis notar cuando hago el over, que hace como un parpadeo.
No sé si se ve, pero hace un parpadeo súper raro.
Esto suele ser con el tema de la opacidad y de box shadow y cosas así.
O sea, eso habría que mirárselo.
Luego el service es aquí en medio que parece que se va a caer.
Ay, ay, ay.
Watch my quark.
¿Vale?
Pero si no puedo verlo.
Al revés.
Esto tiene que ser al revés.
Esto tiene que ser al revés, Enzo.
No puedes ocultar la imagen.
Si la imagen es lo que está genial, ¿sabes?
O sea, la imagen es lo que se tiene que ver al principio.
No que yo haga over de decir, ay, voy a ver lo que hay detrás.
No, no, no.
Al revés.
Se ve la imagen y luego, si tú quieres, cuando haga over, pues le puedes poner texto que esté más interesante o lo que sea.
Pero no que dale ahí y tal.
Luego, yo creo que las imágenes están mal.
Vamos a ver.
Sí, sí, sí.
Fíjate, mira esto.
¿Ves?
Estas cosas.
Estas cosas hay que arreglarlas.
No se puede romper así el diseño.
No se puede romper.
Tú aquí le pones un object feed, le pones un cover.
Oye, ¿por qué no se...
Hay cover, perdón.
Bueno, y aún así.
Vale.
Porque además tiene como dos efectos.
Es súper raro.
Súper raro.
¿Veis?
Que hay uno cuando no está y otro cuando sí que está.
Bueno, pero ¿ves que cuando hago over al menos sale bien?
Bueno, pues eso tiene más sentido.
De hecho, puedes poner un object position y al menos cuando salga, ¿ves?
Sale bien.
¿Ves que ahora sale bien?
¿No sale roto?
Que ahí cuando no sale...
Hay una cosa rara aquí en el hover.
Habría que echarle un vistazo, ¿eh?
Pero bueno, al menos ahora se ve bien.
Yo creo que hay que darle una vuelta al diseño.
El diseño...
A ver, yo no soy diseñador, pero de verdad, no hagáis diseños tan complicados.
O sea, si no somos capaces de hacer diseños complicados...
¿Sabéis qué vamos a hacer un día?
Un día vamos a hacer un porfolio.
Lo vamos a hacer...
Me voy a guardar el proyecto de Enzo y le haremos un porfolio.
¿Vale?
Lo haremos con CSS.
Sin diseño ni nada, ¿eh?
Lo haré como yo lo haría.
Como yo iría haciendo.
Y a ver qué sale.
A ver qué sale.
Luego, esto de que esto...
Uf.
A mí estas cosas.
Que las cosas se muevan tanto.
Vale, proyectos.
Pero bueno, está bien.
My projects.
More info.
Mira ahí, con un...
Pero esto no se lee.
Esto no se lee.
Y además no hace falta...
¡No, amigos!
¡No!
A ver, Enzo.
Sé que lo has hecho con todo el cariño del mundo, ¿eh?
Sé que lo has hecho con todo el cariño del mundo.
Y yo te quiero ayudar.
Estas cosas no hace falta que tengan hover.
No hace falta.
Luego, no se lee.
Este...
Hay algunas que cuesta mucho leer.
Este, mira.
Este Redux casi pierde aquí la vista.
Pues entonces, o hazlo de color blanco.
Haz que tengan esto de color blanco.
Los botones.
No sé.
Algo así.
¿Sabes?
Le pones aquí un background...
FFF.
Un poquito.
Y que todos tengan el background...
Bueno, ahora lo perdí.
A ver, ¿dónde estabas?
Aquí.
Pues eso.
Que todos tengan el background blanco.
No sé.
Y le va a dar un poquito más de contraste también, ¿sabes?
Esto no hace falta que tenga el hover, que es muy raro.
Cuando algo tiene hover, parece que va a responder a tu click.
Si no responde a tu click, mejor no le pongas un hover.
Y esto, lo que está pasando mucho con la página de Enzo,
es que le cuesta como el layout, ¿no?
Por lo tanto, si nos cuesta el layout...
¿Ves que hay mucho espacio y muchas cosas?
Si nos cuesta el layout, lo mejor que podemos hacer es una columna de arriba a abajo, pero bien.
O sea, es que os digo de verdad que es mucho mejor el hacer una sola columna,
todo centrado, pero bien.
¿Sabes?
Que digas, vale, pues esta imagen encima, aquí arriba.
Y todo en una columna.
Todo en una columna.
Todo en una columna.
Pero bien.
A lo mejor aquí es una columna de proyectos, pero los proyectos son más chiquititos.
Que no empezar a hacer esto.
A ver.
Y por lo demás, por lo demás...
Vamos a ver una cosa.
¿Sabes?
Es un proyecto que me imagino que está hecho con Next.js.
O sea, no sé qué pasa que cuando se pone...
Vamos a poner en modo móvil.
Ah, vale, ahora sí.
Sale aquí.
Bueno, me gusta el menú, está súper chulo.
Mira, y lo devolver para arriba.
Pues muy bien.
Mira, me gusta más.
En móvil, ¿veis?
En una columna.
Yo le daría una vuelta a algunas...
Ves aquí, servicios.
Este no tiene negrita.
Luego bajas y el My Projects tiene una negrita y tiene otra fuente.
Pues esto habría que mirarlo.
Todos los títulos igual y tal.
Pero en modo móvil está bastante mejor.
Está bastante mejor.
Esto no parece casi un botón por culpa de los tags.
Claro, si yo veo los tags y luego veo tal...
Esto...
Ah, hay que darle un clic a la modal para cerrarla.
Bueno.
Bueno.
Bueno, Enzo.
Pues de verdad.
Me voy a guardar tu...
Me la voy a guardar, ¿eh?
Hostia.
Demasiadas animaciones, ¿eh?
Esto...
¿Qué está pasando?
Mira, mira, mira.
No hace falta, ¿vale?
Si tenemos claro...
Si tenemos claro lo que tiene que hacer...
Esto seguramente es un Transition All.
Que los Transition All los carga el diablo.
Mira.
Cuando hacemos esta...
Que fíjate que se pone el menú ahí todo loco a moverse de lado a lado.
¿Qué le pasa?
Transition.3s.
Yo qué sé.
Pues si es esto, pues solo pone el width.
Y a lo mejor ya no se vuelve...
No, todavía se vuelve loco porque ni siquiera sé qué es lo que se pone ahí a moverse.
Debe haber un Transition All por ahí.
Que está, vamos...
Que parece que está borracho.
Por eso.
Los Transition.
Esto es súper importante.
Los Transition.
Cuando hacéis un Transition.
Solo animad lo que realmente se necesite animar.
No le pongáis un All.
Porque si por X motivo se cambia el layout o lo que sea.
Vais a ver este tipo de cosas que parece que está bailando la página.
¿Vale?
Hola, Sonia.
Hola, Harrison.
¿Ese es el primero que lleva?
No, este es el segundo.
El primero ya lo hemos hecho antes.
Mejor que sobre y no que falte.
Yo creo que hizo el Mobile First y luego se lo olvidó.
Mira, pues os digo una cosa, ¿eh?
Con lo de Mobile First.
Pues esta página la podéis mostrar como si fuese para Mobile y ya está.
Y queda mejor.
Ya os lo digo.
Ya os lo digo.
Venga.
Ahí lo tienes, Enzo.
Pero me voy a intentar...
Me voy a poner aquí un...
Una bombilla.
A ver si me acuerdo.
Y le haremos a Enzo un porfolio desde cero.
¿Vale?
Y sí, no hace falta ponerle joven a todo.
No, es el mío.
Recién llego.
Hostia, Hidragor.
Lo siento.
Lo siento.
Pero bueno.
Muchas gracias, amigo.
A ti, hombre.
Te vamos a hacer un porfolio en directo.
¿Vale?
Enzo, te lo vamos a hacer.
Vamos a hacer un diseño.
Hoy no.
Hoy vamos a seguir con tu web a juicio.
Igual la semana que viene vamos a hacer un porfolio.
A ver, como yo opino más o menos.
O sea, yo no soy diseñador.
Pero bueno.
Igual le puedo pedir a Salomón que nos eche una mano.
Y lo hacemos.
Y lo estilamos.
Y más o menos.
Pues a ver cómo quedaría.
¿Vale?
¿Cuándo vas a rediseñar tu web?
Usando el diseño que te hizo.
No sé, no sé.
Ahora le dice...
Le di un pequeño...
Un pequeño retoque a la página.
Un poco con alguna idea de lo de Salomón.
Pero no sé.
No sé si me voy a atrever con...
¿Ves?
La he simplificado.
Yo es que...
Como no soy diseñador, yo lo simplifico todo.
Para que no quede mal.
¿Y por qué no me haces a mí un porfolio?
No, mentir.
Te quiero a mí.
Pues venga, Salomón.
¿Qué te parece si le hacemos a Enzo un porfolio simple, bonito, que pueda servir para cualquiera?
Que sea limpio, que se entienda de arriba a abajo.
Te dejo ahí el enlace por si te animas, Salomón.
¿Vale?
Vale, venga.
Vamos a seguir con otro.
Vamos a seguir con otro.
Aquí dejo una app que hice siguiendo el curso de Julián que debaquen con Node.js uso Vue.js.
Venga, vamos a verlo.
¿Qué MNTD pass?
Hostia.
Voy a tener que crear...
Five minute email.
Voy a tener que pagarle dinero a la gente del 10 minute mail.
Venga.
User.
Midu.
Contraseña.
A ver, os voy a decir una cosa.
Os voy a decir una cosa que es bastante importante.
Esto, yo no soy diseñador, ¿vale?
No soy diseñador.
Pero os voy a decir una cosa.
En el diseño no hay icono en el planeta Tierra que sea mejor que el texto.
No hay icono.
O sea, el icono que tú pienses que es la hostia, que se entiende...
No.
El texto siempre se entiende mejor.
¿Por qué te digo esto?
Hombre, porque estoy aquí y ahora tengo dudas.
Ahora me he enterado, ¿no?
Pero digo, ¿y este check qué es?
Y es que tengo que volver a poner la misma contraseña.
Que ya es raro, además, porque es que se rompe.
Cuando me pongo a escribir, ¿ves?
El formulario cambia.
El formulario tendría que quedarse quitecito, ¿vale?
Entonces, yo aquí no sé si tengo que poner un nombre de usuario, si tiene que ser mi correo,
si tiene que ser lo que sea.
Aquí me he imaginado que es el password, pero no sé si es mi palabra secreta o mi número favorito.
Venga, Sync App.
No le ha gustado.
Aquí hemos llegado.
Bueno, pues nada, la web ha estado muy chula.
Me ha gustado mucho.
No, a ver.
A ver.
A ver.
Vamos a leer un poco.
App Store Secrets.
Vale.
Vale.
Bueno.
Intento dos, ¿eh?
Intento dos.
Hasta aquí vamos a llegar con intentos dos.
Venga.
Pongo user con tres puntos suspensivos encima.
Como si...
Este playholder, además, no se entiende, ¿eh?
No se entiende.
Si ya he puesto algo, si se escribe...
Pues nada, no funciona.
Oh, oh.
Error 500.
Peor todavía.
Pues nada.
Hasta aquí...
Ah, bueno.
Es que es Heroku, claro.
Es que tienes esto en Heroku.
Esto igual lo tenías que haber puesto como una...
En vez de Heroku, pues ya que tenías haber utilizado las APIs de Eversel.
¿No?
Bueno.
Pues nos hemos quedado hasta aquí.
Lo siento.
Lo siento, Kenry Ortega.
Lo hemos intentado, ¿eh?
Que no se diga.
Vale.
Dartiles.
Gracias por tu feedback.
Mira, lo había mejorado.
Dartiles mejoró su página después del feedback que le dimos, ¿eh?
Qué grande.
Venga.
A ver, ¿qué más?
Harrison.
Harrison te toca.
Te toca, te toca.
Dice, cuidado con ese sing-in.
No, no pasa nada.
Si he puesto una contraseña ahí que no...
Que ni funciona.
Y estoy utilizando el 5-minute mail.
A ver, Harrison.
¿Qué es esto?
Heladería Keiken.
Me gusta, me gusta que salgan helados.
Eso empieza bien.
Vale, vale.
Bueno, ya veo cosas raras, ¿vale?
Ya veo cosas raras.
Pero bueno.
A ver.
Así a primeras de diseño, ¿eh?
De diseño.
Me gusta que es una heladería y que hay helados y que este helado le metería un bocado que me lo comería ahora mismo.
Esta letra es demasiado finita y aquí hay demasiado texto.
Yo esto, o sea, lo he visto y digo, aunque son helados, no me lo voy a leer.
Luego, te damos la bienvenidad.
Mira que lo he leído poco, ¿eh?
Pero bienvenidad, no.
La bienvenida.
Esperamos que estés muy bien.
Claro que estás bien.
Si estás visitando una página web de helados, no pongas que esperes que estás bien.
No le preguntes.
Somos una heladería que quiere...
Ya sé que es una heladería, ya ha entrado a ella.
Que quiere brindar experiencias y productos llenos de amor.
Vale, eso está bien.
Brindamos experiencias y productos llenos de amor.
Punto.
O sea, fíjate, con eso, o somos una heladería o, mira, mejor, la heladería que brinda experiencias y productos llenos de amor.
Punto.
Ya está.
Tenemos toda una barra de frutas.
Dulce.
Fuera.
Para que crees el mejor helado del mundo.
No, no lo crean ellos, lo creas tú.
Tenemos helado suave de yogur.
Demasiado.
Mucho me vendes.
Mucho me vendes.
A ver, somos una heladería que quiere brindar experiencias y...
No.
¿Qué quiere?
No.
¿Cómo que quiere?
No quiere.
Uy, uy, uy, uy.
Vamos a ver.
Somos...
¿Qué quiere brindar?
La heladería que brinda experiencias y productos llenos de amor.
Le pones...
Es que encima de este font size aquí, esto...
Vamos a ver.
Es muy finita esta.
Text align left.
¡Pum!
O sea, prefiero esto, ¿sabes?
La heladería que brinda experiencias y productos llenos de amor.
Punto.
O...
Ya está.
A ver.
Luego también es verdad que es que aquí que sale el horario...
Bueno, el horario está bien.
Consumo en el lugar.
Check.
Entrega a domicilio.
Bueno, no puede...
Puede no estar mal.
Todos los derechos reservados.
No hace falta.
Estas cosas nadie se las va a copiar.
De hecho, este texto aquí te molesta para estos iconitos.
Esto que son para las imágenes.
Vale.
Vale.
Bueno.
Es un poco raro que...
Esto yo lo pondría un poco más para la izquierda para que quede claro que es aquí.
Luego...
Hostia, cuántas vueltas da esa cosa.
La leche.
Hostia, que está mareado.
Mira, mira, mira.
¡Huera!
¡Ey!
Ya.
Para arriba, para abajo.
Vale.
Menos vueltas, ¿vale?
Menos vueltas que...
A ver.
Y además esto...
Os voy a decir una cosa que es seria, ¿eh?
Que es seria.
Os voy a decir una cosa seria.
De verdad.
Hay que pensar también que hay gente que le molesta las experiencias visuales que tengan muchas animaciones.
Y os lo digo en serio porque tengo un familiar que se ha mareado...
Se marea visitando ciertas webs.
Y tiene desactivado incluso el tema de las animaciones.
Que eso es una media query que es muy interesante.
Que es el prefers...
Ah, no me acuerdo.
Pero bueno.
Ahora lo buscamos, ¿vale?
Y eso lo deberíais utilizar especialmente si tenéis este tipo de experiencias tan...
Que se mueven muchas cosas.
No hace falta.
¿Vale?
Son gustos.
No son gustos, no.
¿Cómo que son gustos?
Son gustos el que dé muchas vueltas.
No.
En este caso...
Si está bien que tenga una pequeña animación.
Pero fijaos que tiene demasiadas animaciones.
Tiene el subrayado.
Tiene este.
Con el subrayado aquí tiene suficiente.
O una vuelta.
¿Vale?
Pero no hace falta dar tanta, tanta, tanta, tanta vuelta.
¿Vale?
Mira, esto me gusta.
Lo que pasa es que si ya estoy...
¿Ves?
Si ya estoy, esto lo podrías desactivar.
Cartas.
¿Ves?
Porque si estoy...
Esto es súper fácil de ver.
Me lo he cargado.
¿Ves?
Lo he dado tantas veces que me lo he cargado.
¿Vale?
Esto parece que faltaría ponerse abajo del todo, ¿no?
Que quedaría un poco mejor encajado.
Pero en general me gustan los colores.
Es así como divertida.
Eso es una cosa que está chula.
Esto yo lo intentaría encajar abajo.
No sé si...
Claro.
Es que esto, a lo mejor con un position absolute, que vaya abajo del todo.
¿No?
Y luego que esta cosa de aquí...
A ver.
Yo esto lo estoy haciendo mal, ¿eh?
Pero...
Bottom...
Bottom 20 píxeles.
¡Ay!
¿Qué le pasa a esto?
Vamos a poner...
¡Ay!
Vale.
Ya sé lo que pasaba.
Lo estaba poniendo mal.
Bueno.
Pues algo así.
¿Vale?
Igual esto centrarlo.
El pedir ahora creo que quedaría bien.
A ver.
Hay que arreglar unas cuantas cosas.
También demasiado...
Demasiado el tema de los colores y tal.
Vamos a echarle un vistazo al código.
Va.
A echarle un vistazo al código.
Pero a ver.
Tiene sus cosillas.
Tiene sus cosillas.
Pero hay que darle una vueltecilla a algunas cosas.
¿Vale?
Git, clone...
¿Cuál es tu...?
Yo no tengo porfolio.
Lo siento.
A mí sinceramente me agobia.
Lo has roto.
Dañando tu página web.
¿Cuál es tu...?
Yo no tengo porfolio.
Yo tengo mi página web.
Yo es que tengo un blog.
Yo es que paso de porfolio.
Porque no lo necesito.
Prefiero utilizar el LinkedIn.
Pero...
No sé.
O sea...
¿Qué queréis?
Meteros con mi porfolio.
Es lo que queréis.
¿Queréis hacer mi porfolio a juicio?
¿Queréis hacer mi porfolio a juicio?
Es lo que queréis.
Bueno.
Pues lo haremos.
¿Haremos un porfolio?
Le vamos a decir a Salomón que haga uno.
Y lo haremos.
Hemos visto porfolios que están bastante chulos.
Para tenerlo de modelo.
Yo lo que os digo es que está bien.
Que tengáis vuestro estilo.
Eso está súper chulo.
Pero intentad que sea sencillo.
Y que la gente lo pueda entender.
A veces lo más fácil.
Lo más sencillo.
Es lo que se vende mejor.
A ver.
Vamos a ver un poco el código de Harrison.
A ver qué tal.
Tiene componentes.
Con React.
Vale.
Slider.
El Slider.
Slider.
Slider 1.
Slider 2.
Vale.
La galería con el JSON.
¿Ves?
Yo esta página de la heladería.
Hostia.
Y este formato de imagen.
Jfif.
¿Qué es esto?
Es la primera vez.
Que lo veo.
Solo pueden ser ciertas aplicaciones.
Es porque son archivos de datos en lugar de documentos.
Hostia.
Es la primera vez que veo un Jfif.
No sé.
¿Lo habéis visto?
Yo no me lo he visto.
A ver.
Está guay hacerlo con React.
Me imagino que para aprender.
Eso puede estar chulo.
Mira.
Esto no.
Estas cosas no hace falta ponerlas.
Cuando utilizas el usuario G así.
Esto lo podéis eliminar si queréis.
Además.
Claro.
¿Veis?
Todo esto que sea consumo en el lugar.
Consumo en el lugar.
Ah.
Estos checks son SVGs.
Pues fíjate.
Si es que aquí lo tienes.
Mira.
Esta parte de aquí.
La voy a sacar a un nuevo.
Y lo vamos a ver aquí.
¿Vale?
Esta parte de aquí.
Justamente la gracia.
Aquí tienes un componente de RIA genial.
No hace falta que lo repitas una y otra vez.
Esto es lo que decimos.
De dejar de utilizar RIA como un template engine.
Aquí es donde se nota la gente que sabe utilizar RIA.
Cuando dice.
Hostia.
Pues esto lo extraigo.
En un componente.
¿Vale?
Harrison.
Pues esto es una cosa que tienes que trabajar.
Que básicamente en cuanto ves una cosa.
Y esta.
Esta es bastante clara.
¿No?
Pues.
Check icon.
Pues le pones así.
Y así.
Y ya lo tienes.
A ver.
Si lo queremos poner más bonito.
Ponemos así.
Y esto que.
Ya sé que parece una chorrada.
Parece una chorrada.
Porque dices.
Hostia.
Pero ya ves tú.
¿No?
Pero.
Al final es que.
De esto trata un poco RIA.
¿Sabes?
De la componentización.
Y a partir de hacer esto.
Esto va a simplificar un montón.
Un montón tu código.
Parece tontería.
Pero es que un montón.
¿Vale?
¿Ves?
El footer lo podría sacar otro componente.
No hace falta hasta aquí.
Lo que pasa es que esta página.
Ya se nota que es poco.
Hostia.
Crítica al CSS.
Ah no.
Coño.
Digo.
Esto.
Pensaba que tenías crítica al CSS.
Estaba flipando.
Y no.
Es que eso es un proyecto que tengo yo ahí.
Vale.
La car.
Hostia.
Hostia.
El slider este.
Terita.
Para el slider seguramente lo podrías haber hecho con el scroll snap.
Y a lo mejor tú hubieras simplificado.
Pero bueno.
Muy valiente de hacer esto.
Mira.
Con esto.
Con las arrow.
Que fíjate.
Es que las arrows son muy similares.
Muy muy.
¿Ves estas dos arrows?
Estas dos arrows son muy similares.
Pero.
Al final.
Una cosa que tenemos que pensar a veces.
¿Vale?
Que esto muy pocas veces lo hacemos.
Es que esta arrow la puedes reutilizar.
Y tú has utilizado una diferente.
Esta.
Este path.
Y este son diferentes.
¿Por qué?
Porque una apunta para arriba y otra para abajo.
Pero si quitas este.
Le vamos a poner este path.
Vamos a intentarlo.
¿Vale?
En un momento.
Y esto.
Esto creo que es algo útil.
Que la gente utilice.
Para reutilizar.
Justamente los iconos.
Cuanto más mejor.
¿Vale?
Vale.
Este está para arriba.
Pero tú lo que puedes hacer.
Es.
Imagínate.
Podría ser un componente de RIA.
Que se llamase.
Arrow Icon.
Y le puedas indicar.
Si es.
La de arriba.
O la de abajo.
O la de la izquierda.
O la de la derecha.
Porque.
Simplemente.
Girándolo.
Tú puedes decir.
Transform.
Rotate.
Y le pones.
Mira.
Hasta en diagonal.
Te puede servir.
Pues tú le pones aquí.
Y le pones.
Mira.
Mira.
Para todos los lados.
¿Ves?
Bueno.
Ahora.
Yo lo he puesto.
Así.
Y a que no notas la diferencia.
Es que no la notas.
Y es el mismo.
Es el mismo icono.
De esta forma.
Tienes el mismo componente.
Y lo utilizas para los dos.
Para las dos flechas.
Y además.
Es que esta flecha.
Con props.
Ya te sirve.
Para la izquierda.
Para la derecha.
Para arriba.
Para abajo.
En diagonal.
Brutal.
¿Sabes?
Esto es un ejemplo.
¿Vale?
De cómo podríamos.
También reutilizar los iconos.
De dándole.
Una pequeña funcionalidad.
Extra.
Vale.
Aquí una cosa que.
Ah mira.
No sé qué pasa.
¿Ves?
Este.
Otra vez el problema.
Lo mismo.
¿Vale?
¿Veis este?
Que se va haciendo más pequeño.
Más grande.
Y se va animando.
Esto es lo mismo.
Es el transition.
Transition all este.
Que.
¿Sabes?
Tendría que ser un poco más.
Sin menos transitions.
Porque si no.
Empieza a hacer estas cosas.
Que son un poco raras.
Que hay demasiado.
Demasiado.
Demasiadas cosas.
Pero bueno.
Me gusta.
El modo móvil.
Me gusta.
Así como queda.
Como una tarjeta de estas.
Que te dan en papel.
Eso está chulo.
Me gusta el estilo.
Igual.
El problema es que pierde mucho espacio.
Yo le echaría un vistazo.
A ver si esto se puede mover.
En alguna forma.
O mejor.
Poniéndolo encima de la imagen.
Quizás.
Incluso.
¿Sabes?
Para.
Ah mira.
Aquí.
Algo se está intentando.
Bueno.
Igual esto también me he cargado yo.
Lo del botón.
Pero bueno.
Está.
Está interesante.
Globals.
Ah mira.
Está aquí el arrow.
O igual es que tenía la idea.
Claro que no estoy leyendo el chat.
Igual está ahí Harrison.
Lo hice con React para aprender.
Claro.
A ver.
Está bien.
Pero bueno.
Ya que lo hiciste con React.
Pues igual.
Tienes esas oportunidades.
Add or remove the class to buttons.
Button 1 false.
Option token.
Active class.
Mira para este tipo de cosas.
Para este tipo de cosas.
Hay una librería que a veces os puede ayudar.
Que es la de CX.
No.
Class names.
Class names.
GitHub.
Es una librería muy chiquitita.
Muy chiquitita.
Que te permite añadir clases de forma dinámica dependiendo de si te da true o te da false.
Una de las variables.
¿Ves?
Entonces tú le puedes decir el class name que tiene por defecto.
O sea le pondrías un string.
Y luego un objeto donde la key sería la clase que se añadiría en el caso que fuese true.
Si es false nos añade.
Y justamente ayuda mucho para este tipo de código.
Creo que este tipo de código lo mejora bastante.
Porque mira.
Fíjate.
Si nos ponemos por aquí.
Por ejemplo.
Sería como más directo.
Sería button 1 class.
¿Vale?
Que no pondría button 1.
No sé si es.
No sé.
No sé qué botón era.
Esto es el header.
Y esto es para la galería.
Vale.
Pongamos que es button gallery.
O gallery button.
Bueno.
Button gallery.
Pues lo que puedes hacer aquí.
Imagínate que tiene que tener un estilo seguro.
Pues le pones el button.
Por decir algo.
Y aquí lo que puedes hacer simplemente.
Es decirle.
Vale.
Button 1.
Pues le pones aquí button active.
Y esto es solo si le pasas el true.
Y creo que eso lo simplifica.
O sea.
Aquí es false.
Y ya está.
Algo así.
Es que.
A lo mejor el nombre.
A lo mejor solo con el nombre.
También mejoraría.
¿No?
En lugar de button 1.
Poner algo así como.
Is gallery button.
Enabled.
No sé.
O sea.
O sea.
Yo prefiero poner variables.
Nombres de variables.
Que sean bastante.
¿Cómo decirlo?
Verbosas.
Y que se entienda.
Porque button 1 y 2.
¿Sabes?
Es como que.
Por ejemplo.
Yo no sabía a cuál se refería.
Cuál había arriba.
Cuál era el 1 y tal.
Pero en cambio.
Si pones algo así.
Is gallery button.
Is menu button enable.
¿Vale?
Y pones algo así.
Pues bueno.
Al menos.
Ya se entiende bastante mejor.
¿No?
Algo así.
No entiendo muy bien lo del option token este.
Option token.
Set option token.
Porque en lugar de ser binario.
Yo evitaría.
Esto que sea binario.
¿No?
O sea.
Porque a lo mejor.
Si añades un tercer botón.
Pues ya la has liado.
En lugar de poner un option token.
Lo que deberías poner a lo mejor es.
¿Cuál es el que está activado?
¿Sabes?
Poner.
Por ejemplo.
Option token.
En lugar de option token.
Yo tendría aquí el estado.
Que fuese más.
Selected button.
Set selected button.
Y puede ser un string.
Pero entonces.
Lo que puedes hacer aquí.
Es tener buttons.
Y todo hacerlo.
Mira.
Es que de hecho.
Vamos a.
Vamos a hacerlo aquí.
¿Vale?
Mira.
Tienes aquí buttons.
Tú pones buttons.
Y le pones aquí.
Esto es un array.
Y en el array.
Ya tendrías aquí.
Mira.
Le puedes poner una id.
Puedes poner esto que es gallery.
Le puedes poner texto.
Que sea galería.
En castellano.
O con la traducción.
Por supuesto.
Y aquí.
Por lo mismo.
Id.
Y aquí.
Pues sería menú.
Y el texto.
Que sea.
No me acuerdo.
Sea menú.
O lo que sea.
Entonces.
Una vez que tienes esto.
En lugar de option.
Bueno.
Pues option.
O.
Selected option.
Selected.
Option.
Y esto aquí.
Lo que le deberías poner.
Es el buttons.
Bueno.
Es verdad que esto.
En lugar de ser un array.
Igual lo puedes poner.
Como un objeto mejor.
Porque esto nos va a simplificar bastante.
Si aquí le ponemos.
Gallery.
Y aquí le ponemos el text.
Gallery.
Y esto aquí le ponemos menú.
Porque al referirnos.
Así lo podemos hacer.
Como si fuese un enum.
Y entonces.
Buttons.
Punto.
Le dices.
¿Cuál es la opción que está seleccionada?
¿Vale?
Pues le vamos a poner id.
Le puedes poner un número.
Si quieres.
Cero.
Yo que sé.
Lo que tú quieras.
Id.
Uno.
Pues gallery.
Punto id.
¿Vale?
Entonces ya tienes este.
Entonces ya todo esto.
En lugar de hacer esto de true, false.
No sé qué.
No sé cuánto.
Al final.
Lo único que tendrás que hacer.
Es buscar cuál es el que está.
El que está.
Seleccionado.
Porque estos botones.
En lugar de hacerlo así.
Como lo estábamos haciendo.
Al final.
Ahora.
Lo que debes hacer.
Es tener el buttons.
Y el buttons lo que haces.
Buttons.map.
Y tienes button.
¿Vale?
Pues por cada button.
Aquí.
Tú dices.
Vale.
Pues tengo todo.
Todo esto.
¿Y qué es lo que tengo que renderizar de esto?
Vamos a quitar todo esto.
¿Vale?
Entonces.
Del button.
Que hay que renderizar.
Vale.
Esto aquí.
Pues tienes que decir.
¿Está activo?
Vale.
Pues si está activo.
Es porque este button.
Bueno.
Es que ahora he hecho un array.
Yo también.
Tienes que soy la leche.
Bueno.
No pasa nada.
Ponemos.
Objects.
Entries.
Buttons.
Y tendríamos aquí.
Tendríamos.
La aquí.
Aquí.
Y el value.
¿Vale?
Más o menos.
Es para que pille la idea.
Del value.
Aquí lo que podría sacar.
Por ejemplo.
Sería.
Del value.
Tendrías el texto.
O sea.
Value.
O sea.
Value.
Ya tendrías aquí.
En lugar de galería.
Pues aquí.
Value.
O sea.
Value.
O sea.
Y ya está.
Y ya está.
Si es activo.
Esto lo sacarías del value.
Punto id.
Value.
Value.
Y ya está.
Y ya está.
Y ya está.
Con esto ya tendrías una.
Bueno.
Puesto al final.
Podría poner object values.
Y hubiera quedado mejor y todo.
¿Vale?
Vale.
Entonces.
Con esto.
Ahora si tú.
Bueno.
Todavía faltaría aquí el set option token.
¿Vale?
Porque esto.
Lo que puedes hacer con esto también.
Es que cuando haga un clic.
Pues.
En lugar de set option token.
False o true.
Que añada la id.
O lo que sea que quieras meter.
Entonces.
Con esto lo que puedes lograr.
Es que si yo de repente.
Aquí.
Pongo un tercero que sea contact.
Pues ya todo funciona automáticamente.
Que eso es lo interesante de RIA.
¿Sabes?
O sea.
El hecho de hacer de.
Separar la fuente de datos.
A lo que renderizas.
De forma que.
Se adapte lo que renderiza.
A la fuente de datos.
Y eso es lo que.
Es lo genial.
Vale.
Bueno.
No.
Tiene sentido.
¿Qué beneficio tiene eso de SVG?
SVG es un formato de imagen.
Venga.
Voy a.
Voy a leeros un rato.
Vale.
Que estaba ahí.
SVG es un formato de imagen vectorial.
Que.
El beneficio que tiene.
Es que puede ocupar muy poco.
Y en cambio.
Por más que tú lo hagas grande.
Pues.
La calidad.
Sigue siendo.
Súper buena.
¿Por qué?
Porque se trata de vectores.
Vale.
Pues se tratan de líneas.
O formas geométricas.
Para.
Representar una figura.
O una imagen.
Lo que pasa.
Que cuanto más complicada la imagen.
Más.
Poder ocupar el SVG.
Hay logos que están hechos con el SVG.
Pero al final llega un momento.
Que ya no es tan fácil.
Por ejemplo.
Una foto.
No la puedes hacer con el SVG.
No es que sea imposible.
Pero.
Ocuparía demasiado.
Para fotos.
De imágenes reales.
O de dibujos.
Normalmente.
Es mejor hacerlo con JPEG.
O PNG.
Si tiene pocos colores.
Y cosas así.
O si quieres.
Muchísima calidad.
Para SVG.
Serían cosas más vectoriales.
Eso es SVG.
Y esa es.
La ventaja que tiene.
Es que.
Suele ocupar poco.
Y.
Escala muy bien.
No se harían esos cambios de tamaño.
El usuario lo abre en el tamaño que le da a su dispositivo.
Y listo.
Sí y no.
Bet.
Sí y no.
Por ejemplo.
Eso de.
Eso.
Eso.
Eso está muy mal.
Pensado.
La verdad.
O Bet.
Esto que mucha gente piensa.
Esto.
Dice.
No.
Este es el tamaño que te da.
Y nadie lo va a tocar nunca más.
A ver.
No.
Porque.
Al final.
Lo que.
A ver.
Mira.
Fíjate.
O sea.
Alguien puede decir.
Voy a mover esto un poco así.
Y ya se le mueve.
O sea.
Tampoco he hecho nada raro.
O sea.
O ponerlo grande.
Esto.
Esto es bastante normal.
La gente lo hace.
Otra cosa es.
Muy extremo.
Que esté así todo el rato.
Vale.
Eso te lo puedo comprar.
Pero no es tan raro.
¿No?
Hacerlo tan.
Yo.
Esto lo hago un montón de veces.
Esto de ponerlo a la izquierda o a la derecha.
No sé.
El hecho de pensar.
No.
Eso no lo hace nadie.
Para no hacerlo.
Cuando es fácil evitarlo.
Vale.
¿Cómo se?
Aquí hay otra librería más liviana.
CLSX.
Muy bien.
El copilot un paso adelante de Mido.
Ya te digo.
Nos va a reemplazar.
Se nota que no conocen C++.
Lenguajes tipados.
Vale.
Venga.
A ver.
Hola Ortega.
¿Qué tal?
Que acabas de entrar.
Me la apunto.
Muy bien Harrison.
En el map no hiciste key en return the button.
Bueno.
Pero era un poco la idea.
Para que lo entendáis.
Ya.
Se me ha podido escapar.
Vale.
Me refiero a que si se mueve rápido se ve feo.
Pero si es solo un paso puede verse bien.
Hombre.
Pero no se ve bien.
O sea.
Yo esto.
El hecho de moverlo y que se mueva es un poco raro.
O sea.
Esto es un paso.
Tampoco.
No sé.
A ver.
Si se anima una cosa no pasa nada.
O sea.
No me refiero a que la animación esté mal per se.
Pero fíjate que es que hasta el texto se anima.
Es todo.
Ese es el problema.
Es que en la cantidad está al gusto también.
¿Sabes?
Nosotros tenemos un dicho aquí en mi pueblo.
Bueno.
En mi pueblo.
En Cataluña.
Que dice.
En el tarro pequeño está la buena confitura.
¿Vale?
Está la buena mermelada.
Entonces.
Con que haya uno.
¿Vale?
Pero hostia.
Es que es todo.
¿Ves?
Que empieza como.
Parece un transforme.
Ese es el problema.
¿Vale?
Vale.
Muy bien Harrison.
Pues nada.
Siga aprendiendo.
Sigue dándole cañita.
Hombre.
Está muy bien.
Ojalá yo la primera vez que hubiera tocado Ria.
Hubiera hecho algo así.
Ya también te lo digo.
En el put petit y a la buena confitura.
Ese es.
Efectivamente.
Ese es.
Ese es el dicho.
En mi idioma catalán.
Que es Cataluña.
Vale.
Pues venga.
Vamos con el siguiente.
Vamos con el siguiente.
Harrison.
Muy bien.
Me habías comprado con los helados.
A tope.
Me habías comprado a tope.
Sergio Casallas.
Vamos contigo.
Sergio.
Vamos contigo.
A ver.
Os voy a decir.
Antes de pasar con Sergio.
Os voy a decir una cosa.
Vale.
Eso.
Lo he dicho.
En otro.
En otro.
En otro.
En otro.
En otro.
En otro.
Pero no sé por qué.
Os gustan tanto las animaciones.
Sobre todo cuando estamos empezando a aprender.
No sé por qué.
¿Qué es lo que pasa?
¿Por qué os gustan tanto?
Si con que pongáis una o dos ya está bien.
No hagáis tanta.
Venga.
Pero es que entro.
¿Cómo que se ven bien?
No se ven bien.
No se ve bien que todo se esté moviendo.
No se ve bien.
No son God.
Santi y Toby.
No son God.
Lo siento.
Pero es que no lo son.
No lo son.
A ver.
Si se mueve una cosa o dos cosas marcan la diferencia.
Si se mueve todo.
No.
No.
No.
Y sobre todo cuando ya encima se mueven cosas.
Y bueno.
¿Qué pasa?
¿Qué?
¿Qué está pasando?
Bueno.
Hello.
I'm Sergio.
Frontend developer.
Bueno.
Sergio ha dado por bueno el tema de decir.
Buah.
Lo voy a poner grande que luego me echa bronca.
Me gusta mucho la imagen.
Pero hombre.
Sergio.
No hace falta que salgas con la mascarilla.
Ah.
Bueno.
Aquí sale mejor.
Extensive knowledge as a front.
No.
No puedes decir que tienes extensive knowledge y que escribas mal frontend.
¿Vale?
No puede ser.
Es incompatible.
Incompatible.
Aquí te has comido la té con patatas.
En búsqueda de innovación y un trabajo.
¿Cómo?
En búsqueda de innovación y un trabajo de innovación.
Aquí.
Pero ¿por qué no leéis los textos que ponéis?
Que me los lea yo.
Que yo me los leo.
Pero que no cuesta dinero.
Pero leeros lo que ponéis.
Sergio.
Léetelo.
Que no te lo has leído.
Cajo en la leche.
Es que no entiendo.
¿Por qué no lo leéis?
A ver.
Que yo cometo un montón de errores en mis artículos y me los leo.
¿Eh?
Vale.
Pero hostia.
Son artículos.
Que es que aquí tenéis tres líneas.
Tres líneas.
Tres.
Tres.
Extensive knowledge as a front of the open search of innovation.
And job innovation and job innovation and job growth.
Vale.
Esto me gusta mucho.
Que haya un GIF aquí.
Me ha gustado mucho.
Eso está muy chulo.
Muy chulo.
Bueno.
Me gusta directamente.
Un enlace.
Me lleva al sitio que quiero.
Perfecto.
Muy bien.
Mira.
Countdown.
Pum.
Vale.
Contact.
Vale.
A ver.
Hay un...
No sé.
No sé si lo conocéis.
Pero hay como un...
Hay un...
No me acuerdo de dónde lo leí.
¿Vale?
Pero hay un...
Una regla.
Que dice que cuanto más campos tienen un formulario.
Menos oportunidades tendrás de que nadie te escriba.
A mí particularmente.
Yo creo que...
Yo recomendaría que tiréis todos los...
Todos los formularios que tengáis.
Todos los que tengáis.
Todos.
Los tiráis a la basura.
Y ponéis aquí toda vuestra información.
Porque si alguien os quiere contactar.
Y mira.
Le habéis puesto un enlace a...
A...
A WhatsApp.
Que es brutal.
Que me parece genial.
Entonces.
Si le pedís ya.
El primer nombre.
El segundo nombre.
La dirección de email.
Que bueno.
La dirección de email.
Lo puedo entender.
El número de teléfono.
Que además.
Según esto.
Es obligatorio.
Que la persona tiene que decir.
Pero ¿Por qué quiero darte mi número de teléfono?
Y además.
Los comentarios.
Que se supone que es el contacto.
Es lo opcional.
Yo te digo una cosa.
Yo.
Si quiero ir a saco.
Yo hago un textarea.
Que solo sea en los comentarios.
Porque la gente.
Se suele.
Saber.
Se suele presentar.
Hola.
Soy fulanito.
Y esto y lo otro.
Y mira.
Y me puedes contactar.
Mira.
O si no.
El email address.
¿Vale?
Pero quitas el first name.
El last name.
Y el phone number.
Cuanto más campo.
Estén un formulario.
Menos posibilidades.
De que lo use la gente.
Porque cuanto va avanzando.
Más ganas.
Se le quitan.
De darle al botón de submit.
Pero si los quitáis.
Igual.
Hasta mejor.
Ahí os lo dejo.
Ahí os lo dejo.
El hover.
Que no es clicable.
Para eso esto.
Lo haces clicable.
Y al menos que te puedan enviar.
El mail directamente.
Pero mira.
Si tienes hasta el telegram.
Me gusta mucho.
Que le has puesto todo esto.
Yo este.
El header.
Le pondría un fondo.
Le pondría algo.
Porque fíjate.
¿Ves?
Que pasa por aquí.
Y hace esta cosa extraña.
Esto.
Tiene una solución.
Bastante chula.
Además.
Que le puedes poner aquí.
Y puedes quedar como.
Un dios griego.
Mira.
Si le ponemos aquí esto.
Aquí así.
Más o menos.
Más o menos.
Más o menos.
Nueve.
No.
Uno.
Vale.
También es verdad.
Se rompe el responsive.
Pero eso.
Bueno.
Lo perdonamos.
Mira.
Es una chorrada.
Pero al menos.
Al menos se ve.
De hecho.
Lo podemos exagerar.
Bastante.
O bastante más.
O bastante más.
O bastante más.
Y hombre.
Pues le das.
Toquecillo.
Así que dices.
Hostia.
Pues mira.
Esto está pasando.
¿Sabes?
Que le puedas dar.
Es que si no.
Se ve que no se lee muy bien.
¿Sabes?
O sea.
Es un poco raro.
Pero bueno.
Esto le da un toque.
Que dices.
Hostia.
Tiene una cosilla ahí.
Con blur.
Que además se lee.
¿Sabes?
Se lee bien.
Bueno.
Pues le da un toque.
Luego.
Una cosa que os recomiendo.
Es que no utilicéis.
Bueno.
Las fuentes son súper importantes.
¿Vale?
Entonces.
Las fuentes que son.
Bueno.
Es que a mí me encantan las fuentes.
No sé.
¿Os lo he dicho alguna vez?
¿Es que soy un friki?
Soy un friki de las fuentes.
A ver.
No soy un experto.
Una cosa es el friki.
Otra cosa es un experto.
Pero.
Eh.
Bueno.
Que me gusta bastante.
El hecho de saber.
Cómo se tienen que.
Cómo tienen que ponerse las fuentes.
Cuáles son buenas para leer.
Cosas así.
Eso me gusta bastante.
Entonces.
Ya os digo yo.
Una cosa que esto es bastante.
Obvia.
Este tipo de fuentes.
O este tipo de fuentes.
No suelen quedar muy bien.
No suelen.
Hay veces que sí.
Pero.
No suelen quedar muy bien.
En pantalla.
Las fuentes que tienen muchas.
Florituras.
¿Vale?
Que son las serif.
En este caso.
No suelen quedar muy bien.
En pantalla.
Por lo tanto.
Ya se nota.
Sobre todo esta.
Esta se ve que.
Esta especialmente.
Cuanto más pequeña.
Peor.
Así que.
Yo le cambiaría.
Yo le.
Es que de hecho.
Es que una de las mejores fuentes.
Que le podéis poner a la vida.
Ya.
Es la de PhoneFamily.
Es la de.
La del propio sistema.
Pero bueno.
Si no queréis.
Que lo puedo entender.
Pues al menos.
Una que no tenga esta.
Esta cosa.
Porque si no.
No se entiende muy bien.
Por ejemplo.
A ver.
Le vamos a poner uno al lado de la otra.
PhoneFamily.
Y es que.
Esta es la serif.
¿Veis?
Serif.
No es la oficial.
O sí.
Sí que es la oficial.
Es que encima es la.
La por defecto.
Mira.
Ya te digo que.
Entre estos dos.
Se lee mucho mejor.
El de la izquierda.
Que el de la derecha.
Pero es que se nota.
O sea.
Dices.
Hostia.
Es que se nota.
Si no os gusta la de sistema.
Que es normal.
Porque la que mola del sistema.
Es la de Mac.
Pues al menos.
O sea.
Empezáis aquí a poner.
Elbética.
Arial.
Sansserif.
Y bueno.
Elbética.
Yo creo que está bien.
La Arial.
Creo que tampoco está mal.
Y ya empieza a leerse bastante mejor.
O sea.
Parece una tontería.
Pero yo creo que en pantalla.
Hay que ser muy bueno.
Bueno.
Y esta.
Esta ya.
Sí que.
Sí que no sé.
La evitaría totalmente.
Que entiendo que la gracia está con esto.
Pero.
Aunque tengas el logo.
Con serif.
O sabes.
Con estas florituras y tal.
Puede quedar bien.
Porque justamente.
Lo que crea es este.
Esta diferencia entre una y otra.
El hecho de que tú la tengas en serif.
Pero tu página.
O a lo mejor.
Puede ser que las que son muy grandes.
Como por ejemplo los títulos.
Pues sí que pueda ser con serif.
Pero las que son chiquititas.
Es estas.
Las que son más chiquititas.
La del menú y tal.
No.
Verdana también me gusta.
Está bien.
Víctor Mono.
Open source.
Me encantó.
Súper chula.
Víctor Mono.
Muy bien Sergio.
A ver.
Mira.
Nos ha dejado el código y todo.
Vamos a ver con qué está hecho.
Con componentes de React y todo también.
A ver.
Esto es un poco lo mismo.
¿Vale?
Este portfolio.
Si lo ha hecho para aprender.
Pues bien.
Pero.
Hostia.
Light off.
Aquí.
Window.
Add event listener.
Para escuchar el event listener.
Hostia.
Esto.
En lugar de utilizar el scroll.
Y mirar esto.
Esto lo mejor.
Es utilizar un use near screen.
O cosas así.
Mira.
Justamente tenía ahí.
Use near screen.
Esto es un hook.
Que utiliza el intersection observer.
Y con esto puedes observar.
Qué distancia hay.
Y cosas así.
Y es bastante.
Ojo.
Pero qué.
Pero esto qué es.
Pero esto qué es.
Pero Sergio.
Pero Sergio.
Pero vamos a ver.
Pero tú cómo programas.
Sergio.
¿Qué haces programando?
Pero por qué si el texto.
El tope cero.
Tú quieres esto.
Sergio.
Si no te van a contratar.
Tú estás seguro.
Que cuando hablas de innovación.
Estás hablando.
De software.
Qué tipo de innovación.
Qué tipo de innovación.
Estás buscando Sergio.
No Sergio no eh.
Si no se programa.
Joder.
No se programa así eh.
Igual es que el front.
Sin te.
Significa una cosa que yo no conozco.
Ahora.
Vivo con miedo.
Vivo con miedo.
De seguir mirando.
No sé qué puedo encontrarme.
En el primer archivo.
Me he encontrado esto.
Que puedo encontrarme.
En los siguientes.
Pero a la vez.
Tengo curiosidad.
No sé qué hacer.
No por ahora.
Parece ser que Sergio.
Sergio solo.
Solo hace esas cosas.
En ese componente.
Bueno.
Nada.
No sé cómo voy a continuar.
A partir de ahora eh.
La leche.
Hostia y coca.
Aquí mi sub para el mejor canal del parchís.
Muchas gracias hombre.
También.
Muchas gracias.
Odonel82.
Que se me ha pasado.
Ah mira.
Chávez me había pedido de nombrar una variable.
Ahora la nombro.
Gracias PRCL.
Muchísimas gracias también a ti.
Kingaficus.
También.
Minfreg.
También.
Nath92.
O what up.
También.
Resist235.
Y muchas gracias Sergio.
Por compartir con nosotros.
Que en el About Me.
Ah no.
En el About Me.
No.
Sí.
En el About Me.
Encima en el About Me.
Sergio.
Es que.
La has liado.
Joder.
Encima en el About Me.
Cómo se te va de las manos.
Yo que pongo los consoles.
Yo.
Os tengo que decir.
Que yo en los consoles.
No pongo esas cosas raras.
Vale.
Yo en los consoles.
Obo poner el console.
Y pongo la variable.
Así.
O pongo console.
Gracias por todo Midu.
Gracias a ti hombre.
Muchas gracias.
Dragon Death.
Y gracias por esa 100 bits.
Muchas gracias.
Ay.
Qué risa.
Dios mío.
Estoy llorando y todo.
Le acabo en la puta.
Es que.
Sois la leche.
Ya.
Ahora.
Vivo.
Vivo con miedo.
De seguir abriendo aquí.
Mira.
Le vamos a dar.
Un check.
Y vamos a buscar.
Un culo.
Ash.
Vamos a ponerle este emoji.
Sabemos.
Esto es.
Sabemos lo que haces.
Sergio.
Sabemos lo que haces.
Ay.
Joder.
Se me han caído las lacrimillas y todo.
Ay.
Sergio.
Vilander.
Muchas gracias por tu sub.
Crack.
Muchísimas gracias.
Que ha empezado el trend de hype.
A tope.
Bueno.
Bueno.
Bueno.
Bueno.
Bueno.
Elías.
Elías.
Elías.
Elías.
Vamos.
¿Qué ha sido eso?
Que casi me da una epilepsia o algo.
Esto me gusta mucho.
Esto está muy bien.
Desliza.
Pero por qué.
Bueno.
Venga.
Deslizo.
Vale.
Vale.
Uh.
Qué chulo esto.
No sé si es suyo.
Pero está súper chulo.
Parece como el Rick and Morty.
Me gusta.
Vale.
Vale.
Creo que ha pillado por ahí los GIF.
A ver.
Me gusta más el otro.
No mezcléis.
Si pilláis de un ilustrador o lo que sea.
Siempre el mismo estilo.
Porque este había quedado súper chulo y el de abajo.
Vale.
Vale.
Ahora no sé si abrir el código.
Vamos a ver con qué código.
Elías 97.
Elías 97.
Muy bien.
Mira.
Elías.
Ha dicho.
¿Sabéis qué?
Yo lo.
Este código.
Como no necesita JavaScript ni leches.
Pues lo voy a hacer.
Directamente con.
HTML.
CSS.
Y JavaScript.
Y ya está.
Muy bien.
Me gusta.
No sé qué es esto.
Uf.
Esto no.
Esto no.
De hecho.
Eso es un.
Eso es un.
Un problemilla.
Vale.
Elías.
Me gusta.
No sé por qué de vez en cuando hace ese pum.
Que me.
Encima me flashea toda la pantalla.
Como si me estuviera haciendo una foto.
Pero.
Espero que no hagas tú también console logs por ahí.
Eh.
Esto.
Esto no me gusta.
Vale.
Yo esto.
Eh.
Que.
Está.
No está mal.
De hecho.
Elías.
Me has caído bien.
Vamos a intentar hacer algo.
Vale.
Elías.
No sé si voy a poder hacer una PR.
Con el code spaces.
¿Puede ser?
Bueno.
Ahora lo intentamos.
Vamos a intentar cosas.
Va.
MPN run.
Esto ha hecho un MPN stall o lo tengo que hacer yo?
Joder.
Pues vamos.
Vamos finos.
Ah.
No.
Es que esto no tiene ni MPN run ni nada.
Vamos a utilizar server.
Punto.
¿Veis?
Con esto.
Con server.
A mí me encanta.
Vamos a ir abriendo el código.
Vale.
Tiene bastantes cosas.
Open browser.
Venga.
¿Cuándo los pusieron?
Hace tiempo.
Vale.
Esta es la página de Elías.
¿Vale?
Cosas que me gustan.
Bueno.
Se ve clarita.
Esto es un poco raro.
Que veis que no puedo hacer clic aquí.
Tengo que hacer clic aquí.
Eso está como un poco regular.
Me gusta mucho el estilo de los botones.
No me gustan los colores.
Los colores creo que están.
Se podrían manejar un poco mejor.
Porque ese gris así es un poco raro.
Eso no me termina de gustar.
Yo creo que en lugar de color.
Yo lo que haría.
Yo.
Personalmente.
Si a mí me preguntan.
Venga.
Haz algo.
Yo lo que haría en lugar del color.
En este caso.
A ver qué os parece.
Ay.
Es que encima pone line.
Pero esto por qué.
Ah.
Vale.
Está aquí.
Toggle.
Toggle.
¿Qué es esto de toggle?
Es que la línea.
Es que encima.
Yo es que lo que haría justamente.
Este line.
Que tiene todo este background.
No sé qué.
No sé cuánto.
Eso es lo que haría justamente para.
Ese estilo.
Lo utilizaría para el hover.
En lugar de cambiar el color.
Yo lo que haría.
La pastilla esa que aparece.
La utilizaría para el hover.
A veces el logo no se ve.
Y es que esta imagen aquí enorme.
Yo lo que haría.
Es esto que tiene aquí.
Yo lo dejaría aquí.
En lugar de.
Es que no sé por qué flashea.
Y además.
Me es un poco extraño eso.
Vale.
Vamos a ver un poco el HTML.
Vale.
Bueno.
Los comentarios.
Especialmente.
Si no se los quitas.
Sí.
Yo.
No soy muy fan.
De ponerle comentarios a HTML.
Especialmente.
Si no se los quitas.
O al menos intentaría ser bastante más.
Comedido.
No hace falta.
¿Sabes?
No hace falta poner tanta.
Es que no sé.
Yo creo que se lee bastante bien.
¿Sabes?
O sea.
Yo creo que si haces esto.
Y haces esto.
Ya lo tienes.
Separado.
Y ya estaría.
Este preload.
No sé si te funcionará.
Con ese espacio por ahí.
Aquí estás cargando demasiada fuente.
200.
300.
400.
500.
600.
Ya te digo yo.
Que con dos tamaños.
O sea.
Dos grosores.
Vas a tener suficiente.
Nuestro.
Con dos grosores.
Vas a tener suficiente.
Sergio Casallas.
No sé.
Pero tú.
Creo que sí.
Vale.
Esto que es.
Esto es para cargar una fuente.
Otra fuente más.
No sé.
No sé para qué.
Vale.
Preconnect.
Vale.
Font.
Swap.
Hasta aquí bien.
Venga.
Header.
Bla bla bla.
Href.
Perfecto.
Perfecto.
Vale.
Muy bien.
Loading.
Mira.
Aquí le puedes poner incluso el decoding.
Como async.
Y ya te coronas.
Ya te coronas.
Y esto se lo pones a todas.
Y así tienes decodificación de la imagen asíncrona.
Vale.
Con alt.
Muy bien.
La verdad es que el HTML se ve bien.
Hay una cosa que no me gusta.
Vale.
Aquí bajando.
Esto es demasiado texto.
Aquí.
Fuf.
Aquí hay demasiado texto.
Muy pequeño.
O sea.
Tened en cuenta que más de 15, 10 palabras en una línea.
A ver.
Yo lo tengo bastante calculado.
Ya os digo que yo soy un fricazo.
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17.
15, 18 palabras.
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13.
12, 12, 13, 14, 14, 15, 16, 17, 18, 19, 20, 21, 22.
Demasiada.
Yo intentaría esto hacerlo más pequeño.
Incluso intentaría hacerlo más.
A ver si le puedes quitar cositas.
Porque demasiado texto.
Max quiz.
Yo qué sé.
500.
Y esto lo centras.
Nunca.
Otra cosa.
No justifiquéis el texto.
Suele quedar horrible.
¿Vale?
No sé quién dijo algún día que era buena idea, pero justificar el texto queda bastante
mal.
Otra cosa.
Si ponéis emojis, tenéis que tener mucho cuidado con el line height.
¿Veis que queda mal?
Porque este emoji está empujando.
Está empujando el contenido.
Entonces, también hay que adaptar el line height para que quede bien.
Sí, he puesto aquí.
Para que quede bien el emoji.
Porque si no, lo que hace es que lo pegue demasiado.
Entonces, tenéis que dejarlo como quede exactamente bien con el emoji.
¿Vale?
Si no, se rompe y queda muy raro.
Se lee muy raro.
Y eso, no justifiquéis.
Es que es muy raro leer un texto justificado.
Porque veis esto aquí.
Normalmente yo evitaría el tema de los justificados.
¿Vale?
De ex aline.
Es que queda mucho mejor.
Y a lo más grande.
Porque esto no lo leo yo.
A ver, que yo también tengo una edad.
Menos texto.
Menos ancho.
Y mejor que mejor.
¡Ay, mira qué bonito!
Pues mira, con lo bonito que has hecho esto, este borde te sobra.
Oye, esto está chulo.
Mira, ya que tienes un hover, al menos que marque la diferencia.
Mira, aquí, esto de aquí, esto de aquí, esto te sobra.
Es que es muy raro.
Si es que queda mucho mejor.
Si es que queda mucho mejor.
No sé, es que me parece como algo sucio ahí, que se ha quedado...
Te queda ahí limpísimo.
Vale.
Bueno, y aquí, pam, pam, pam.
¿Ves?
Esto es lo que decía.
Que se vea el proyecto.
Yo le daría más espacio, que esto está muy junto.
Este de aquí no respira.
Además, con la sombra parece que le cuesta.
No sé si los haría más grandes y de dos columnas.
Para que se vean bien.
Porque además, total, tienes tres, seis, siete, ocho.
Pues con dos columnas te queda mejor.
Porque así no tienes este hueco.
Así que yo haría eso.
Y muy bien, lo del contacto, pues sí.
A tomar por saco.
Telegram, GitHub, sobre todo LinkedIn.
Y aquí tienes el...
A ver, una cosa que yo sí que os recomiendo.
Esto a lo mejor no lo había dicho.
Es que aparezca vuestro email.
¿Por qué?
Porque si yo le doy un clic a esto.
Me carga esto.
Que yo no utilizo este editor.
Y tengo que darle aquí.
Le tengo que dar a copiar dirección.
Es un poco rollo.
Entonces, bueno.
Si podéis hacer algún sitio que aparezca.
Y eso, yo aquí, en todo este espacio.
Que está muy bien esta gracia.
Yo pondría esto, ¿eh?
Esto que tienes aquí oculto.
Como si fuese un secreto.
Esto lo pones y lo enseñas, ¿eh?
A ver, los estilos.
Muy bien.
Con custom properties.
Además, con dark theme.
Muy bien.
Light.
Con scroll behavior por aquí.
La poppins.
Este background.
Ah, muy bien.
El transition solo del background.
¿Veis?
¿Veis?
O sea, muy bien.
Esto es una buena idea.
Porque ahora, si yo me pongo a hacer estas cosas.
Bueno.
¿Veis que ese pone a moverse el tema?
Bueno, a ver.
No pasa nada.
No pasa nada.
Porque no es muy bestia como en el otro.
No pasa nada.
Pero bueno.
Si os lo podéis evitar.
Si hacéis un transition de lo que queréis.
Y ya está.
Pues mejor.
Vale.
Bueno.
No está mal.
O sea, bien.
A ver.
Un poco de JavaScript.
Los comentarios se borran, ¿eh?
Los comentarios se borran.
No hace falta guardar comentarios.
No, hombre.
¿Cómo que soy duro?
A ver.
Pero si estoy dando aquí.
A ver.
No he dicho nada del otro mundo.
Mira.
Muy bien.
Aquí poniendo con una letrilla el document.
Creo que aquí puedo usar mejor.
Mejor intention server.
Estoy de acuerdo, amigo.
Vamos a hablar con esta persona aquí.
Al menos no ha puesto console log sexual.
No, no ha puesto nada.
Nav line de query selector.
A ver.
También es verdad.
Yo en lugar de hacer estas cosas.
Del document D.
Yo lo que haría aquí.
Sería esto.
Document query selector.
Y le ponéis aquí el selector.
Y le ponéis aquí el selector.
¿No?
Y entonces aquí en lugar de D.query selector.
Utilizáis aquí esto.
Y hombre.
Esto queda parecido a jQuery.
Pero bueno.
En este caso ya sabéis que no es pide el jQuery.
O podéis poner get element.
Pero bueno.
Yo creo que con el dólar.
Teniendo en cuenta que es un solo archivo.
Ya puede quedar bien.
Y hacéis algo así.
Y esto queda bastante bien.
¿Sabes?
Porque así te quitas todos los queries selector all.
Estos.
Ah, bueno.
Había puesto query selector all.
Bueno.
Pues esto.
Mira.
Más fácil.
No pasa nada.
Puedes hacer esto.
Selector.
Y esto para el document.
Query selector all.
Y ya tenéis los dos.
Y ahora ya sabéis que esto lo utiliza además las herramientas de desarrollo de Chrome.
Con uno seleccionas uno.
Con dos seleccionas todos.
Y ya está.
Los que son uno.
Pues le pones una.
Los que son dos.
Pues le pones dos.
A ver.
Esto en el caso de que utilicéis.
En lugar de utilizar el D.query selector.
Pues igual ya que estáis.
Podéis hacer algo así.
Mira.
Esto.
Ya que estás utilizando aquí constantes.
Esto puedes hacer una cosa.
Que es de dioses.
Todo este tipo de const, coma y todo esto constantes.
Yo esto no te lo recomiendo.
Una cosa que puedes hacer aquí es recuperar los links.
Y luego pues de cada uno.
Aquí ya ves tú.
Button home.
Si es que los tienes.
Esto es súper.
Lo tienes súper fácil.
Utilizas el de structuring.
Te pones aquí uno detrás de otro.
Vale.
Pillar los projects.
Pillas el de contacto.
Y haces esto.
Y esto te queda.
Para la merlo.
Pum.
Ya está.
Y esto mismo lo puedes hacer con todos.
Con estos puedes hacer exactamente lo mismo.
De estructurar.
Y la de estructuración lo que estás haciendo aquí es.
En el primer.
La primera posición de la array links.
Lo guardo en la constante button home.
Y cosas así.
Vale.
Vale.
Pero bueno.
Button active.
Set interval.
Color de cabecera.
Vale.
Mira.
Esto es un error típico.
Que.
No pasa nada.
O sea.
Está bien.
Pero que esto.
Muchas veces lo he comentado.
El hecho de extraer.
Lo que realmente.
Cambia.
En la condicional.
Incluso usando.
Cosas como.
La ternaria.
Ves aquí.
Estás.
Como repitiendo otra vez el código.
Si es que es lo mismo.
Y esto te queda mucho mejor.
Si tú le dices.
Mira.
Background color.
O header.
Background color.
Lo que tú quieras.
Le pones esto aquí.
Se lo pones así.
Y tú aquí.
Simplemente.
Lo que haces.
Es cambiar el valor.
Que utilizarás.
Y al hacer algo así.
Es que se lee.
Mucho.
Mucho.
Mucho.
Más fácil.
Porque ahora.
Esto que tú estabas haciendo aquí.
Ya le pones aquí esto.
Y le dices.
Header.
Background color.
Y se entiende mucho mejor.
Lo que estás haciendo.
Porque es que si no.
Estás repitiendo como el mismo código.
Y bueno.
Esto de hecho.
Lo puedes dejar en una sola línea.
Tampoco que pase nada.
No sé.
Cuál es el máximo que tienes ahí.
Pero.
Esa podría ser una.
Vale.
Ta ta ta.
Y esto igual.
Pero bueno.
Pero bueno.
Esto puede ser una idea.
Solo extraer.
Lo que realmente cambia.
Vale.
Pero bueno.
Bueno.
Bueno.
Scroll arriba.
Window.
Mira.
Esto.
Esto está mal.
Este.
Cuidado con esto.
Cuidado con esto.
Porque aquí.
Lo que estás haciendo es crear.
De hecho.
Lo podemos utilizar.
Podemos utilizar.
Una variable global.
Llamada W.
Ah.
Pues no.
Pensaba que estaría.
Pero la.
Ah.
Porque tiene una coma.
Es que.
Es que.
Claro.
¿Ves?
Pues mira.
Yo hubiera caído en esto.
Pensaba que era una variable.
Global.
Es que yo poner esto de comas.
Yo no soy muy fan.
No soy muy fan.
Porque mira.
Yo visualmente.
Me había equivocado.
Porque es que la coma.
Casi no se ve.
Vale.
Bueno.
Bueno.
Bueno.
Ves.
Aquí un poco lo mismo.
Otra vez.
Lo de extraer.
La variable.
Que cambia.
De esto.
Mira.
Os voy a contar una cosa.
Que es interesante.
De este tipo de.
De.
De.
De código.
¿Vale?
En este tipo de código.
Veis.
Este.
Esto se suele hacer.
¿No?
El hecho de decir.
Mira.
El body.
La lista de clases.
Le voy a quitar light.
Y le voy a añadir dark.
¿No?
Y tú tienes aquí un condicional.
Esto es muy interesante.
Porque esto veo que mucha gente lo hace.
Y aquí tienes un condicional.
¿No?
Que básicamente lo que quieres es quitar uno y poner el otro.
Esto se puede hacer muy simplemente.
De forma muy fácil con el toggle.
De hecho.
Toggle.
Classlist.
Esto.
Esto está muy bien.
Porque además es manipulación del DOM.
Que esto no se suele ver mucho.
Vale.
Pues el toggle.
Veis.
Que aquí hay un.
Ay.
Tiene un segundo parámetro.
De forma que puedes utilizar el toggle.
Y esto lo simplificas un montón.
En lugar de tener este color theme dark.
Vale.
Pues pones.
Is dark theme selected.
A mí es que me gusta mucho extraer las condicionales.
¿Vale?
Lo pongo aquí.
¿Vale?
Y ahora aquí lo que puedes hacer.
Es decirle.
Vale.
Pues entonces.
Voy a utilizar el toggle.
Y el light.
Si el dark theme está selected.
¿Qué es lo que debería hacer?
Pues lo deberías quitar.
¿No?
Pues entonces.
Is dark theme selected.
Is not dark theme selected.
Y esto es lo mismo.
Pero al revés.
Lo pondrías con el dark.
Si el dark theme es selected.
Entonces le pondrías el dark.
Sería true.
Y ya estaría.
Y con esto.
Pues te simplificas un montón el código.
Gracias a utilizar el toggle.
Cuando suena hay un argumento.
Lo único que tienes que tener en cuenta.
Que no.
Por lo que veo.
No te importa.
O estás utilizando constantes y tal.
Es que el toggle.
El toggle.
Toggle class list.
Creo que.
No soporta el segundo parámetro.
En.
Algunos navegadores.
Antiguos.
Mira.
¿Ves?
Donut support.
The second parameter.
Of toggle method.
Pero bueno.
Ya ves que son.
Internet Explorer 11.
Y algunos muy antiguos.
Pero es una forma interesante.
Justamente.
De hacer esto.
Sin necesidad.
De tener que hacer todo el rato.
La comparación.
¿Vale?
Muy bien.
Mi dudé fue.
Usó la librería.
Dark mode switch.
Yo o él.
Está perfecto.
Porque cuando se enseña.
No se muestran todas las malas prácticas.
O todas las cosas que se pueden mejorar.
Pero viendo proyectos.
Viene todas esas cosas.
Que no se verían mientras se enseña.
Está muy bien esta sección.
Gracias Alex.
Muchas muchas gracias.
Y gracias.
Félix Ortega.
A mi chance.
Muchas gracias a los dos.
Por suscribirse con Prime.
Muchas gracias.
Puto javascript que he copiado de jQuery.
Bueno.
También se puede pensar al revés.
O sea.
También se puede decir que jQuery se copió de javascript.
Es que.
Yo creo que es una retroalimentación.
Es como lo que ha pasado.
No sé si os habéis enterado.
He estado a punto de hacer hoy un directo.
Para quejarme.
De comentarios.
De gente.
No.
Porque mira.
Hoy he puesto en Twitter esto.
De que se ha anunciado el.
Oye.
¿Qué ha pasado?
O sea.
Me ha llevado.
A donde.
Le ha dado la gana.
Vale.
He puesto este.
De que hoy hay un paso de gigante para CSS.
La especificación de CSS Nesting.
¿Vale?
Que es básicamente la anidación en CSS.
Utilizando el.
El ampersand.
Que esto lo tienen procesadores.
Como.
Preprocesadores como SAS.
O postprocesadores con post CSS.
Y todo esto.
Pero el tema.
Es que había gente por ahí.
Pero ¿para qué?
¿Pero esto qué es?
Si esto.
Bueno.
Esto no.
Martínez.
Me gusta más la primera.
Que si vienes un poco más larga.
Más legible.
Bueno.
Que está bien que te guste más una u otra.
Pero el tema no es que.
O sea.
Esto lo puedes seguir utilizando sin ningún problema.
¿Sabes?
Mucha gente dice.
Me gusta más la otra.
Bueno.
Pero no pasa nada.
Que puedes seguir utilizando la otra.
Que nadie te dice que.
¿Sabes?
El tema es que ahora tendrá la opción de utilizar la otra.
Pero había gente que.
Hostia.
Y va con H.
Y va con H.
Ahí.
En PMJuan.
Hay que instalarse el corrector.
No cambia nada.
Es una idiotez esto.
Pero bueno.
¿Cómo va a ser una idiotez?
Nicolás.
Mamadera.
Mamadera es lo que dices.
Pero ¿cómo va a ser una idiotez?
Cualquier evolución del lenguaje.
¿Cómo va a ser una idiotez?
Si se han utilizado durante años preprocesadores solo para hacer esto.
No digamos tontería.
Por favor.
Me lo pongo en serio.
Bueno.
Pero había gente que decía.
Esto es inútil porque ya lo hago con SAS.
Que dice.
Bueno.
Pero necesitas SAS.
¿Cómo va a ser inútil?
Pues un montón de cosas así.
Que me han dado ganas de.
Ojo.
No se puede usar todavía.
A ver.
Se puede utilizar si utilizas por CSS.
Que lo que hace es convertir tu CSS.
Del futuro.
En CSS.
De ahora.
Pero todavía no.
Pero.
A lo largo del año.
Yo creo que algún navegador.
Si que lo va a añadir.
Me da a mí la sensación.
Muy bien.
Venga.
Vamos a con la siguiente.
Elías.
Espero que te haya servido.
Check.
Venga.
Luis Masterworld.
Nos pone la suya.
Vale.
Y tiene G-Hat también.
Vamos a ver.
Vale.
Sencilla.
No está mal.
El fondo este.
Demasiada sombrita.
O sea.
Esta sombra así.
Muy, muy bestia.
Yo echo de menos ya una foto.
También.
Descargar currículum.
Vale.
Esto está bien.
Esto está bien.
Que ponga aquí currículum.
Pero bueno.
Está bien que ponga aquí la foto.
Estas cosas no.
No las pongáis.
No.
No.
No molan.
Las barras no.
No se venden.
Todos los miércoles hago revisión de porfolios.
Todos los miércoles.
¿Cómo te enteras de las últimas noticias?
Save 75.
Pues lo único que tienes que hacer es seguirme en Twitter.
Así te vas a enterar siempre.
Pues eso.
Que las barritas estas.
¿Qué es?
¿Qué quiere decir 80?
O sea.
Es que es muy raro.
Está bien que pongas las actitudes que tienes.
Pero tantos porcientos es un poco raro.
Es un poco extraño.
Pero bueno.
La página.
Bueno.
Está sencilla.
Pero no está mal.
Aquí le dejaría un poco de espacio.
Respecto a la parte de arriba.
Educación.
H.
Acento en la O.
Ahí.
Esto.
¿Veis aquí?
Este del footer no ha quedado abajo del todo.
Esto se puede arreglar con Display Grid.
Aquí hay un error que suele ser muy típico.
Gorram 01.
Gracias por el sub.
Crack.
Muchas gracias.
Esto es un error que suele ser muy típico.
Súper importante que lo arregleis.
Súper, súper, súper, súper, súper, súper importante.
Esto es un problema de maquetación.
Y es un problema bastante, bastante común que tiene fácil solución.
¿Por qué?
Porque veis que si bajo un poco cambia.
Pues si le doy aquí a esta parte y le doy clic es que no hace nada.
Esto es que está mal porque el hover lo tenéis sobre el Lee.
¿Vale?
Esto es lo que tiene el hover.
Este elemento de aquí es el que tiene el hover.
Si yo le pongo el hover aquí.
¿Ves?
Este es el que tiene el hover.
Y esto no debería ser correcto.
El que tiene que tener el hover sería el anchor.
A ver, le puedes poner el Lee, el hover, pero entonces te tienes que asegurar que el
anchor ocupe exactamente lo mismo.
Si no, la ha liado.
A ver, vamos a quitar este.
Y de este lo que vamos a hacer, bueno, por poner un ejemplo.
Claro, es que como tiene estas pedazos de clases es un poco complejo.
¿Vale?
Add new class.
Quería hacer algo.
Esto.
Ahora.
Hover.
Así.
Venga.
Vale.
¿Cuál es el problema de esto?
Claro.
Pues que si yo ahora hago hover aquí.
¿Ves?
Esto es realmente el hover que tiene el anchor.
De esta forma te das cuenta mucho mejor, mucho mejor, qué es lo que te deja arreglar.
Porque te das cuenta de que lo que es clicable es lo que no debería ser.
Para ello, el padding este que le estaba dando a todos los Lee, este padding fuera y este padding se lo tendría que dar al anchor.
¿Vale?
Entonces tú vas al anchor y ponemos aquí padding, 15 píxeles.
Y ya está.
Y ahora sí, todo es clicable.
Ahora sí.
Esto es súper importante.
Sobre todo cuando se hacen hover, no sé por qué este es un error que mucha gente maquetando comete.
Incluso, pero no hablo de gente que esté empezando.
Esto hablo de gente que lleva muchos años en la industria, incluso páginas web.
Y de verdad es que es muy frustrante para una persona que, fíjate la diferencia.
Es que de hecho me ha pasado.
¿Ves?
Yo voy aquí, le voy dando y es que yo creo que no funciona.
Digo, hostia, ¿esto por qué no funciona?
Bueno, pues ya sabemos por qué no funciona.
Porque tiene que ser clicable todo.
Vale, Luis Alberto.
Yo esta parte, yo esto lo separaría bastante.
Yo pondría aquí una foto tuya.
Padding, botón, bastante, ¿eh?
Que respire eso un poquito.
Y así.
A mí la verdad es que este text shadow no me gusta mucho.
O al menos este azul.
No sé si valdría más la pena que le pongas un blanco.
Creo que a lo mejor se puede leer un poco mejor.
Incluso hacerlo un poco más grande, que tampoco pasa nada.
Si tienes ahí espacio de sobra.
El tema este del background, que está interesante el background este div.
Pero no sé yo, no sé yo si ponerle algo más, ¿sabes?
Un poco más, que marque más la diferencia con el fondo, ¿no?
Porque si os fijáis, si haces esto, es como que hace un efecto raro, ¿no?
Pero yo intentaría ponerlo más blanco.
Un poquito más blanco.
Más padding por abajo también.
No sé.
Lo haría un poco más, que respire un poco y que se diferencie, que destaque un poco más del fondo.
Igual así también.
Hostia, es que también este...
Este shadow es un poco fuerte.
Pero bueno, creo que algo así.
Y con la foto...
Y que el A ocupe todo el Lee también podría ser otra opción.
Que el A ocupe todo el Lee podría ser otra opción.
Pero, ¿qué pasa?
Que para eso...
Yo creo que ayuda en este caso es que no tiene ninguna necesidad, de hecho,
de cambiar las...
Cómo cambiar las medidas del Anchor para que se adapte a cómo ocupa el Lee.
Y entonces dejar el hover en el Lee.
Cuando lo puedes hacer en el Anchor ya queda perfecto.
O sea, es mucho, mucho, mucho más fácil.
En mi opinión.
¿Vale?
¿Vale?
Proyectos...
Oye, me gusta como están presentados.
Los colores es lo que no me termina.
Creo...
O sea, estos colores así con esa sombra.
Yo lo que a lo mejor haría con estos...
A lo mejor, ¿eh?
Yo le haría a estos...
A estos no sé si le haría quizás...
Bueno, claro, ahora habría que modificar bastante, ¿eh?
Pero no sé si le haría una pastilla.
Una pastilla así de estas...
¡Ay!
Una pastilla que...
Que sea algo así.
A ver, el problema es...
Algo así...
Padding...
12 píxeles...
Un poco menos, 8 píxeles...
Entonces ya le quitas esa sombra.
Aquí es que esa sombra no ayuda a leerlo.
Las sombras...
Hay que tener mucho cuidado con las sombras.
Porque las sombras lo que puede hacer es que parezca que esté sucio.
Sé que suena muy raro.
Pero de verdad.
O sea, a veces...
Fíjate.
Fíjate en esto, ¿eh?
Le he quitado la sombra.
He puesto este.
Uno, se lee mucho mejor.
Dos, queda mucho más limpio.
A ver, faltaría ponerle un poco de padding por los lados y tal.
Pero le da un toque más de orden.
Que no con las sombras...
Para que veáis un poco la diferencia, ¿eh?
Uy.
No se puede entrar directamente, ¿eh?
Eso hay que mirárselo también.
No se puede entrar al...
Pero veas, esto no se lee.
Parece que se ha quedado a polvo.
Es algo raro.
Y en cambio, algo así, con una pastilla...
A lo mejor le puedes dejar un poquito de transparencia, si no te gusta...
Mira, esto sería algo así.
Algo así.
Y si quieres, le dejas un pelín, un pelín de transparencia.
No tanto.
Algo así.
Algo así, ¿vale?
Algo así.
¿Por qué no se puede entrar directamente?
Le dio un 404.
Yo creo que esto...
Pueden ser muchas razones, ¿vale?
Esto yo creo que es que tiene algún tipo de proxy, por lo que veo.
Porque no sé si estos son páginas...
A ver si nos ha dejado el código.
Mira, tenemos aquí en GitHub el código, con Pons...
Ah, bueno, pues es una página de React.
O sea, esto está hecho con React.
No sé si lo tiene de...
Me da la sensación, por lo que veo aquí, que no está desplegado en React.
En Vercel, perdón.
Está como desplegado en su propio servidor.
Y seguramente su servidor no entiende que esta URL tiene que responder también a la home.
Así que...
¿Ves? Yo creo que no lo tiene bien configurado esto.
Tendría que mirárselo.
Y para eso, se hizo los cambios que se mencionan en la clase de formación.
¡Ah, Luigi!
¿Es tú, LuigiDev?
Igual está por aquí.
Que suele estar. Antes estaba, Luigi.
Pues mira, Luigi.
Una cosa que te puedes leer, que te recomiendo un montón,
es buenas prácticas para escribir cómics en Git.
Porque esto de se hizo los cambios que se mencionaron en la clase de formación.
Se arregló un caliente.
Se creó el proyecto.
Es un poco... Se quitó.
¿Ves?
Todo el rato.
Se, se, se, se.
Mejor ser más...
¿Quitar?
Bueno, yo lo haría en inglés.
Pero bueno.
Muy bien, Luigi.
Pues ahí está.
Tu página.
Vamos a ver cómo está el...
Responsive.
Vale.
Pero mira, ¿veis?
Aquí tiene el mismo problema.
Le estoy dando clic y no entra.
Esto es súper importante, sobre todo en móvil.
Porque no, no, no, no.
No entra.
No entra.
Hostia.
Capachao.
Capachao.
Es un error con el HT Access.
Me dio ese error en su momento.
Efectivamente.
Me imagino que utiliza Apache.
O sea que sí.
Será con el HT Access.
Muy bien, Luigi.
Ahí la tienes con un poco de feedback.
Damián C. Siros.
Damián C. Siros.
Vamos a ver.
Damián.
Muy bien.
O sea, le ha dedicado un dinerillo al dominio.
Lo tiene en Heroku.
Porque parece ser que tarda.
Parece que está en Heroku.
Está hecha con React también.
Parece...
Hostia.
JQuery.
Import JQuery.
¿Pero por qué?
Qué chulo.
Dice.
No, no.
Yo quiero utilizar JQuery aquí a saco.
¿Por qué utilizar a JQuery?
Qué raro, ¿no?
Vamos a ver el código mientras se carga.
Hostia, pero la página tarda.
Tarda, ¿eh?
Eso está tomando con calma.
No sé por qué.
Es el futuro.
Vale.
Loader.
Bueno, esto es...
Ahora, mira, ya.
Muy bien, Damián.
Bienvenidos a mi portfolio.
Yo, Damián...
Empieza un poco testamento, Damián.
Yo, Damián Cesiro González, soy un informático que sueña con hacerse un hueco en el mundo
de informática.
Sobre todo en el mundo de aprobación.
Y dejo aquí por escrito.
Voy por el camino de informática aprendiendo y quiero compartir poco a poco los conocimientos
que adquiero para ayudar a la gente con los problemas técnicos que pueda surgir.
Solo soy una persona más de este mundo.
Tengo que decirte, Damián, que al menos por ahora no he leído ninguna falta de ortografía.
Cosa que se te agradece mucho.
Para ayudar a los demás es lo que pueda.
Me encanta el tema de formación y poder ayudar a los demás.
Síguenos en las redes sociales.
Pero te seguimos a ti o a quién más seguimos.
Es que las tienes en este mismo currículum vital.
Si necesitas contactado conmigo, verás que se trae el contacto.
Te responderé lo antes posible.
Me presto en el trabajo.
Podrás...
Ahí ya ibas muy bien.
Aquí ya falta el acento lado.
¿Qué has realizado en empresas con internet naturales?
Vale.
Datos personales.
Vale.
Mira, 2006.
Es que, Damián, si es que eres un yogurín, cago en la leche.
Coño.
Bueno, Damián, como estás empezando, te voy a decir...
A mí no soy muy fan de los tantos por ciento.
¿Vale?
Porque es que...
¿Qué quiere decir un 70% de JavaScript?
Es complicado.
O un 70% de SQL.
Y si es verdad, tengo que decir que tienes un...
O sea, si realmente lo que yo entiendo por 100% es lo que tú entiendes por 100%,
tengo que decir que ya eres un crack para la edad que tienes.
Tienes 14 años.
Pero bueno.
Igual aquí, ves que se hace como muy aburrido.
Igual pueden ser los logos de las habilidades, las cosas que sabes.
Aunque más interesante de tus habilidades son las cosas que has hecho.
Por lo tanto, yo lo pondría...
Lo primero que pondría son tus proyectos.
Y en tus proyectos puedes decir las tecnologías que has utilizado.
Y entonces ya se hace como la...
Ya está.
Esto es lo que este chico sabe.
2014-2021.
Estudios.
Colegio Integral del Norte.
Muy bien.
En proceso.
Bachillero.
Suerte.
Cursos.
React esencial.
Node.js esencial.
Variables.
Estructuras.
No veo ningún curso mío aquí, eh.
Nah, hombre.
No pasa nada.
Mira aquí con los...
Bueno, está bien.
Está bien.
Muy estructurado.
Experiencia.
Estoy ayudando a la determinación y mejora de un sistema portal.
Claro.
Contacto.
Bueno, mira.
Al menos Damián está aprendiendo formulario fácil, ¿sabes?
Nombre y mensaje.
Punto.
Ay, mira.
Y me envía el mensaje al WhatsApp.
Damián.
Hola, Damián.
Yo, Miguel Ángel Durán, estoy revisando tu porfolio en directo en Twitch.
Es increíble que con la edad que tengas, que tienes, que tengas, no, que tienes, hayas creado semejante porfolio.
Enhorabuena.
Te deseo muchos éxitos.
Que no te pierdas ningún directo mío.
Y que...
¡Viva Colombia!
Un abrazo.
Midu.
Venga.
Enviar el mensaje al WhatsApp.
¿Me lo voy a copiar?
Bueno...
Bueno...
Yo pensaba...
Ya decía yo.
Ya decía yo.
A ver, se lo voy a enviar.
Se lo voy a enviar, ¿eh?
Se lo voy a enviar.
Va.
Continúa el chat.
Parece...
Mentira.
Parece que WhatsApp no está instalado.
Buah.
Fail.
Bueno, Damián.
Espero que hayas leído mi mensaje.
También te digo.
Ya que tienes aquí tanto espacio, podrías poner algo así.
Y el botón este en negrita, ¿eh?
Que se vea.
Facebook Page.
Una página de Facebook.
Se ha hecho Damián ya.
Pero qué cosas.
La gente cada vez va más rápido.
Está el liche.
GitHub, Twitter, LinkedIn.
Ish.
Hace una cosa...
Un problema.
¿Veis?
Este tipo de hover no lo recomiendo tampoco, ¿eh?
Porque el hover que pasas de normal a negrita suele hacer este efecto en el que...
Mira, y de hecho tiene como dos hovers.
Ah, no.
Es que GitHub es...
Vale.
Pero es este efecto en el que se hace de repente más grande el texto y como que es un poco rara la sensación.
Yo creo que aquí, ponerlo todo en negrita y con el color, yo creo que queda bastante bien.
Pero, ¿veis?
Tiene el mismo problema que tenía antes.
Para que veáis.
¿Queréis que se lo envíe?
Venga, se lo voy a enviar por web WhatsApp.
Lo que pasa es que...
A ver, es que hay que...
Venga.
A ver.
Buscar un chat.
Teléfono.
Aquí.
Nuevo mensaje.
Es que no puedo.
No puedo.
Ah, sí que puedo.
No puedo.
No, no puedo.
No puedo.
O sea, no puedo enviar un mensaje en WhatsApp, en web WhatsApp, si no lo tengo creado.
Si no lo tengo como contacto.
No puedo.
No me deja.
No me deja.
Pues nada.
Lo siento.
Lo he intentado.
Mándaselo a Twitter.
Joder, ¿pero qué pasa?
¿Qué pasa?
Yo he intentado.
He intentado.
Utiliza el API de WhatsApp.
Pero que lo hubiera puesto él en el fórmula de contacto.
Bueno.
Pues eso.
Mirad.
Aquí tiene el mismo problema que hemos encontrado antes.
¿Vale?
¿Veis?
El mismo problema.
Yo le estoy dando click y esto no funciona.
Y esto es porque ha puesto el hover encima del link.
A ver.
Esto, por suerte, debería tener solución más o menos sencilla.
Hostia, el hover, el responsive está de vacaciones, ¿eh?
Ese 95% de CSS supongo que es desktop.
¿Ves?
Ahora sí.
Ahora sí.
Lo que pasa es que es un poco raro, pero ahora sí.
Pues eso.
El anchor tiene que estar...
Aunque esta parte, ¿veis?
Esta parte sigue estando sin clicar.
¿Le mando?
¿Qué le mando?
A ver, que estáis todos aquí.
¿Qué le mando?
Dale continuar al chat y luego usar web WhatsApp.
A ver, venga.
Voy a darle.
Continuar al chat.
Vale.
Usar web WhatsApp web.
A ver.
Que va a salir ahí todas mis conversaciones.
Ay, es verdad.
Tienes razón.
Tienes razón.
Venga.
Sí.
Tienes razón.
Ha funcionado.
Ha funcionado.
Ha funcionado.
Pero no uses tu número.
¿Y qué número uso?
Si solo tengo uno.
Da igual.
¿Qué más da?
Damián.
¡Coño!
Me ha contestado ya.
Mi nombre es Damián Cesarios.
¿Qué necesita?
Dígame su nombre, correo electrónico, número de teléfono por motivos de facturación.
Joder.
Ya me quiere cobrar este chico.
A ver.
Voy a intentar enseñároslo.
A ver.
Mira.
Mi nombre es Damián Cesarios.
¿Qué necesita?
Dígame su nombre, correo electrónico y número de teléfono por motivos de facturación.
¿Por qué me quieres cobrar, Damián?
Si solo te estoy saludando.
Si no es de Colombia, solo aceptamos como medio de pago Paypal o Western Union.
Pero, Damián, espérate.
Deja.
Conóceme un poco.
Conóceme antes de intentar cobrarme.
Cago en la leche.
Ya va a saco, Damián, ¿eh?
Catorce años y eran catorce, ¿no?
Ah, no.
Más, más, más.
¿Cuánto es esto?
Quince.
Quince.
Quince años.
Bueno, Damián, vamos con calma.
Vamos con calma, ¿eh?
Vamos con calma.
Bueno, Damián.
Muy bien, ¿eh?
Te doy el check.
Y vamos por faena.
Que si no, la gente se me queja y nunca llego.
Ya te quiere quitar toda la sangre, ¿no?
Ya me quiere cobrar, ya me quiere cobrar.
Ya me quiere cobrar.
Ay.
Muchas gracias por la raid.
Andy Darocha y los tres participantes.
Bienvenidos.
¿Cómo reís, eh?
Me quieren cobrar y...
Console.log págame.
15 euros el mensaje.
¿Os imagináis que era una trampa?
¿Sabes?
Del palo.
No, no.
Envíame un mensaje a cobro revertido.
Son 20 euros.
20 dólares.
Aprovecho también para poner el mío.
Claro que sí, José.
Ese es el ep.
Vamos a ver qué, José.
Bueno, bueno, José.
Oh, yeah.
Oh, yeah.
Uf.
Esto está muy bien.
Me gusta la idea.
Pero están los botones en la conchinchina, ¿eh?
Cada uno está muy lejos.
Está muy lejos.
He pensado que estaba rota al principio y todo.
Oye, qué bonito el efecto del fondo.
El efecto del fondo está muy chulo.
Qué pena que se corte, ¿eh?
Porque si no se cortase, si no se cortase, sería genial.
Hostia, el modo blanco es blanco, ¿eh?
No es medio blanco.
No, es blanco.
Es para que cueste dinero la factura de la luz.
Qué pena que sale cortado.
Pero me gusta, me gusta.
El estilo está chulo, está chulo.
A ver.
Yo esta sombra...
Esta sombra aquí...
De nuevo, parece...
Estas sombras son...
Yo le llamo las sombras del polvo porque parece como si tuviesen polvo los botones o algo así.
A lo mejor esto se llevaba antes.
Pero creo que como está todo tan limpio, pues yo le quitaría la sombra y pondría un botón de todo el mundo y ya está.
Arregla el fondo.
¿Qué le pasa al fondo?
¿Qué queréis que haga con el fondo?
Ah, le pusiste un max width.
Sí, sí, porque yo creo que eso hubiera quedado...
Vamos.
Ah, pero mira aquí.
Joder.
Claro.
Sí, pero a lo mejor max width se lo podrías haber puesto, ¿sabes?
O sea, la otra cosa.
No, no.
Eso da igual.
Pasarle la escoba de vez en cuando.
Sí, sí.
Pero está guay el efecto, ¿eh?
Me gusta esto sencillo.
Me gusta que el header pues tiene color negro.
Está bien.
Proyectos.
Le falta un hover.
Ya que estás...
Mira, aquí el hover lo tienes súper fácil.
Porque ya que en el logo tienes esto subrayado, pues aquí le haces el mismo estilo del hover con el subrolladito.
Y eso queda fino, fino.
Así que hover tienen que tener, ¿eh?
Las cositas.
Este, ves, yo aquí no le pondría...
Ya que te recomiendo que tú dices aquí el subrayado como el hover, pues hombre, entonces ya aquí no lo podrías utilizar como subrayado.
Tendrías que hacer otra cosa.
Subrayado los títulos así es un poco también raro, ¿eh?
También te digo.
Hola, soy José Manuel Rosales, Frontend.
Bueno.
Bien.
Vale.
Estas rayitas me desconcentran a veces un poco, ¿eh?
Pero...
Vale.
Esto sería para ir al proyecto.
Vale.
¿Eh?
Oye, esto está bien, ¿eh?
Mira, qué bonito.
No sé cómo se...
O sea, esto es darle y ya está, ¿no?
Ya jugará y...
Ah, mira, ya he ganado.
Joder, qué bueno soy.
La leche.
Mira, con el proyecto.
Vale.
Esta imagen, no sé si la has sacado alargada o es que se alarga.
Proyectos en los que he participado.
Esto no tiene por qué saber nadie.
Contacto.
¿Te gustaría ponerte contacto?
Envíame un correo.
Sí, hombre, que me cobras, que os conozco.
Esto yo lo quitaría.
Esta sombrita, ¿no?
Igual el formulario...
¿Ponerte no me he participado?
Contacto.
Está muy chulo.
Me gusta mucho esto.
¿Ves?
Muy bien.
Una animación normal.
Pues fina.
¿Ves?
La única animación que hay.
Pues llama la atención.
Esta también está chula.
Esta también está bien.
Esta animación.
Está genial.
O sea que...
Bien, bien, bien, bien.
Me gusta, ¿eh?
Sí.
Lo del formulario es...
Un poco...
De aquella manera, ¿eh?
No sé.
O sea, es que...
Envíame un correo.
Te gustaría ponerte en contacto.
Veo que te falta el LinkedIn.
Lo cual me sorprende.
Creo que el LinkedIn es bastante importante.
Y la gente se suele poner en contacto en LinkedIn, ¿eh?
Con estas cosas.
Circles.
Circles blue.
Body.
Maxwith.
Y por qué el maxwith...
Es que hay otro maxwith, ¿o qué?
Que pinta, ¿no?
Ah, porque está todo ahí centrado.
Hay este, por ejemplo.
Maxwith también.
Pum.
Todo, todo maxwith 1500.
Yo creo que queda mejor así, ¿eh?
A ver.
Lo que tienes que hacer es...
Max...
O sea, tú haces eso.
O sea, lo dejamos así.
Y luego lo que haces es que tú le pones...
Creas una clase container, por ejemplo.
A ver si soy capaz de crearla, ¿vale?
Container.
Tú le pones aquí el maxwith de 1500 píxeles.
Le pones un margin 0 auto.
Algo así, fácil.
Y tú, este div container, pues empieza a utilizarlo en todos los sitios que te interesen.
Bueno, veo que el header ya tiene el maxwith también.
¿No?
Sí.
1500.
Pero, por ejemplo, si el contenido o lo que sea no quieres que tire, pues nada.
Le metes ahí el container y ya está.
Pero bueno, es que veo que todo ya tiene el...
No sé si es cosa mía, pero me da la sensación.
Sí, sí.
¿Cuál es?
Pero bueno, que lo metes dentro de un container y aunque no se vea visualmente el container...
Mira este.
Por ejemplo, proyectos.
Pones container aquí.
Y ya está.
Bueno, no sé por qué el fondo...
¿Por qué el fondo...?
O sea, el fondo solo tienes...
Hostia, esto es muy raro, ¿eh?
Main, all.
¿Esto qué es?
Todos los elementos z index 3, transition, background...
Eso parece un poco innecesario, ¿eh?
Esto del all...
Aquí hay algo que deberías hacer más con clases que no con lo otro.
Me da la sensación.
Bueno, vamos a ver responsive.
Ahora vamos a ver el responsive.
Primera vez que te veo en vivo, me pude suscribir.
Muchas gracias, Kingaficus.
Muchas gracias.
Vale.
Bueno, en responsive se ve lo único, ¿eh?
Igual yo le quitaría estos bordes así.
No sé, es un poco raro.
No sé.
¿Sabes que en ningún sitio de la web sale y de repente...?
Bueno, no está mal.
Igual tarda mucho, ¿eh?
En salir.
También te digo...
Había un momento al principio que he dicho, ¿qué está pasando?
Pero bien.
Igual no sé si...
Parece que estoy mirando LinkedIn.
Es verdad, claro.
Tienes LinkedIn aquí.
Pero es verdad que no lo tenías aquí.
Me ha sorprendido.
Pero es verdad, lo tienes arriba del todo.
O sea que...
Bueno, José.
Está bien, está bien.
Me gusta.
Además es con index.html script.
O sea, sencilla.
Sin React ni nada.
Vamos a ver aquí el código un poquito.
Index.html.
Viewport.
Blah.
Esto...
¿Estaba en castellano o estaba en inglés?
Estaba en castellano.
Si está en castellano, esto lo tienes que poner en castellano.
¿Por qué lo pones en inglés?
Para confundir a Google.
Lo confundas a Google.
Lo confundas a Google.
Sí, yo creo que la foto desde abajo es un poco rara.
Yo la pondría arriba.
Sí.
Estoy de acuerdo.
Vale, está el sheet.
Bueno, el HTML no tiene mala pinta.
Creo que lo que me chirría un poco más es el tema del CSS.
El CSS he visto cosas muy extrañas.
Vale, esto está bien.
Aquí veo muchas, muchas, muchas, muchas fuentes.
¿Cómo ajustan las fuentes?
Mira, tiene la roto con Denset.
300, 400, 500.
Bueno, ¿qué es este de 0 a 0,300?
Esto no lo había visto nunca.
A ver.
Open.
Sí o no.
O sea, son todas.
O sea, es que no hace falta, ¿no?
O sea, es un poco raro.
Es un poco raro eso.
Margin.
Hostia.
Esto con el box sizing vale, pero con lo demás es un poco jugársela.
Esto tampoco lo haría.
Yo haría aquí un height auto.
O sea, max width 100%.
Y el weight, perdona.
Weight no, height.
En auto, ¿vale?
Esto de min height 100% también.
Veo que te gustan mucho los asteriscos, ¿eh?
Yo intentaría que los asteriscos estuviesen solo donde fuese necesario.
¿Ves?
Esto.
Bueno, objetos.
Header logo.
Ahí, utilizando Bema a tope.
Muy bien.
Bueno, a ver.
No tiene mala pinta.
¿Tiene alguna cosa rara así con los estilos?
Como hemos visto.
Esto de utilizar los asteriscos, yo no te lo recomiendo, ¿eh?
Sí, pues que os gusten menos los asteriscos.
Porque los asteriscos, lo primero es que lo carga el diablo.
Y lo segundo es que estéis haciendo trabajo que no es necesario.
Muy bien, José.
No está mal, no está mal.
Ahí la tienes.
¿Cuándo haces la próxima sesión?
Ahora la estoy haciendo.
Venga, vamos con la de Diego.
Juan Diego.
Juan Diego.
Juan Diego.
Oh, oh.
Una explosión de color de Juan Diego Sala Jiménez.
Parecen espermatozoides buscando su camino hacia la libertad.
Los espermatozoides de colores.
Bueno, a ver, voy a ver otra vez esto para ver si lo dijeron.
Vale.
Sin cambio no hay innovación, creatividad o incentivo para mejora.
Aquellos que inician el cambio tendrán una mejor oportunidad para administrar el cambio que es inevitable.
William Pollard.
William Pollard.
Se llama William Pollard.
O sea, encima con el nombre de Pollard.
O sea, pero ¿qué os pasa hoy?
Vale.
Spanish, México.
Muy bien.
Esto está muy chulo, ¿eh?
Me gusta mucho.
Me gusta mucho este Spanish.
Muy bien.
Está bien.
Eso está bien.
Además, el cambio es súper rápido.
Hay una cosa que no me...
¿Sabes?
Que cuando aquí aparece inglés, esto está en castellano, me gustaría que al darle apareciesen los lenguajes que puedo cargar, ¿sabes?
Que fuese algo así.
La bandera que lleva en español es el mexicano.
Pero bueno, no pasa nada.
Tampoco pasa nada.
Tiene sentido, ¿no?
Porque su mercado está en México.
O sea, o él es de México y además era español.
O sea, claro.
Sin cambio no hay...
Ah, mira.
Se está en castellano.
Yo traduciendo.
Bueno, el arroba...
Los iconos me gustan mucho.
Este texto es demasiado largo.
Tendría que tener aquí un breakpoint.
O sea, ¿sabes?
Aquí, por ejemplo, se lee súper bien.
La verdad es que el efecto del fondo está muy bonito.
Está muy bonito, aunque sé que es una librería y no se la ha currado él.
Bueno, igual sé que se la ha currado.
Eso y yo diciendo, ¿eh?
Pero bueno, está bonito.
Me gusta.
O sea, me parece interesante.
Aquí es verdad que...
Claro, como queda tanto espacio, es un poco raro.
Es un poco raro.
Pero bueno, cuando es móvil, queda muy bien.
Acerca de...
Muy bien, ¿eh?
Me gusta.
Sobre mí, aquí, con su cara.
Bien.
22 años, además, súper joven.
Quien tuve ese 22 años ahora mismo.
Nacionalidad mexicana.
Además, dice que es soltero por si alguien le quiere tirar la caña.
Español, nativo, inglés a dos.
Descargar currículum.
Vamos a ver, currículum.
Mira, además, en español e inglés.
Muy bien.
Muy bien, muy bien.
Además, que no se note que iba a tener que hacer dos clics.
Eso está muy bien pensado.
Ya sabéis que a mí esto no me gusta.
Yo no sé si esto es una cosa que en Latinoamérica sí que te piden o algo.
No lo sé.
Pero yo eso no...
Yo no lo pondría, de verdad.
Desarrollador Frontend.
Actualmente.
Residente...
Bueno, está bien.
Es que estoy mirando como que hay cosas que veo un poco apretadas.
Por una parte...
¿Sabes?
Como que veo cosas muy, muy, muy apretadillas.
No sé si molaría más que tuviese más espacio y rellenar todo el espacio.
Y a lo mejor quitar...
No sé.
Es algo que...
¿Qué pereza el porcentaje de tecnologías no exista?
En Latam recomiendan no ponerlo.
Hostia, ¿por qué no?
¿Lo anéis?
No lo piden, pero estaba de moda.
Ajá.
Ya veo.
Ya veo.
Me gusta mucho como está esto de los servicios.
¿Vale?
Desarrollo web.
El sitio.
Punto y coma.
Eso es un punto, ¿eh?
No se lee.
Esto no se lee.
Eso también, ¿no?
O sea, me gusta más o menos, pero este color yo lo leo.
De nuevo, para hacer...
Yo mejoraría un poco los colores.
Porque estos colores...
Si es que...
No hay información.
¿Tiene contraste?
¿Por qué esto no funciona de Google?
No sé si es porque no tiene fondo eso.
Pero es raro.
Es raro que no funcione.
Es súper, súper raro.
Porque normalmente...
No sé si es porque tiene que tener un color, ¿sabes?
Que sea, por ejemplo, un color así.
Vamos a poner este.
Yo creo que es por esto, ¿no?
Ah, no.
Pues no.
No, no me lo dice.
Vale, pues no me lo digas.
Ya está.
¿Alguien sabe por qué no sale lo del contraste?
Mi idea, ¿no?
Se ve que están de moda estas plantillas para el currículum.
Ya.
Yo...
A ver, está bien que sea de dos páginas, ¿eh?
Eso está chulo.
Pero como que respiro un poquito.
¿Será por estar en versión móvil?
Ah, pues mira.
Eso puede ser.
Puede ser.
Pues es...
Buen apunte.
No creo, la verdad.
Pero vamos a verlo.
Ah, pues tienes razón.
Mira, no me había fijado, ¿eh?
Muy bien.
Bien visto.
Muy, muy, muy bien visto.
Pero sí, sí, no.
Yo esto...
Es que fíjate la diferencia.
Es que casi no lo leo.
Así.
Un poquito casi.
No hace falta que sea blanco, pero un poquito más.
Es que este de aquí abajo, este no lo leo ni en broma, ¿eh?
Oye, buena pregunta.
¿Quién lo ha dicho?
AlexRG119.
Lo has clavado, amigo.
Lo has clavado.
Desarrollo móvil, desarrollo web, diseño web.
Bueno, me gusta el...
El que me lo ha puesto.
Esto se ve un poco desordenado.
No sé si pondría...
No sé.
Sabes que te digo muchos saltos, pero bueno.
Currículum.
Bueno, otra vez las habilidades.
Oh, pero el currículum me gusta.
Pero otra vez el color.
Le falta un poco el colorcillo.
El colorcillo gris ese no se lee.
Muy bonito el porfolio.
Muy bonito.
Esto tampoco se lee.
Ya que es tan pequeño, tendría que mejorarle el...
Tendría que mejorarle.
Por un lado...
Yo le pondría negrita.
No sé por qué.
No sé por qué la gente, cuanto más pequeño es, le pone menos grosor.
¿Veis aquí que le había puesto 300?
300 no se ve.
¿Sabes?
Es demasiado fino.
Bueno, cuando es más pequeño, justamente se utiliza un poco más la negrita.
Para que justamente gane un poco de...
No sé.
Entiendo que quiere crear ahí un contraste con el otro, pero un pelín, un pelín más.
Ahora se lee mucho mejor.
Mucho, mucho mejor.
Vale.
Mira, ahí está bien.
No entiendo muy bien cuál es la diferencia entre esto y esto.
¿Esto qué es para el código?
No.
¿Y esto?
Esto es para ver la imagen en grande.
Yo quitaría la imagen en grande.
O sea, yo directamente...
Entrar y ya está.
¿Vale?
El currículum.
Es un poco raro poner de tu porfolio el porfolio.
Es un poco raro.
Esto lo he dicho alguna vez.
Porque da la sensación que no tienes cosas que mostrar.
Y ya, hombre, ya que tienes unos cuantos.
Además, que te sobra uno, porque no se ha alineado, pues te quitas este.
Que la gente...
Es que lo están viendo, ¿sabes?
En ese instante.
Se están dando cuenta.
Un blog.
La imagen no es clicable.
El tema del blog...
Bueno, claro, es porque son de Medium de fuera.
Cuando tenéis en vuestro porfolio un blog que no actualizáis normalmente, yo lo quitaría.
Si actualizáis normalmente, sí.
Bueno, es que de hecho, Juan Diego es del 2020 este porfolio.
Pero bueno.
Contacto.
Tu nombre, tu correo, el asunto, el mensaje, la dirección, correo electrónico.
Completa este nombre.
Ay, ese es el mío, no el suyo.
Hostia, Juan Diego, pero es que tienes algo en contra de la gente que no ve.
O sea, es que no sé.
Ahora este sí que es blanco, pero este...
¿Por qué este es blanquito y este es gris?
Es un poco raro.
¿Quiero una noche muy porno con vosotros?
Quiero una noche muy porno con vosotros.
Me gusta tu porfolio, pero no se pueden leer bien los mensajes por el gris ese oscurito.
Thumbs.
¿Esto me sale el emoji?
Bueno, pues este.
Enviar.
Oye, cómo que está súper genial el loader este.
Bueno, aquí le ha puesto una librería.
Muy bien, me ha gustado, Juan Diego.
Me ha gustado.
Además está todo hecho con componentes.
¿Le ha puesto hasta Redux?
Hostia.
¿Para qué?
App Reducer.
¿Qué pasó ahí?
Si se saca...
Hostia, lo de quiero una noche muy porno con vosotros.
Los autocompletados de Miguel.
La verdad es que no tengo ni idea de dónde ha salido eso.
O sea, no se me...
Seguro que lo he puesto yo en algún mensaje.
Quiero una noche muy porno con vosotros.
Estoy pensando todavía que no le he dicho esto.
El focus rojo parece que está mal lo que está introduciendo en el input.
Hoy todo ha sido muy horny.
Te atrapamos.
Pues ya ves tú.
Ya ves tú.
Borrar el autocompletado.
¿De dónde salió eso?
No lo sé.
Molaría saber dónde se han puesto las cosas.
Quiero una noche muy porno con vosotros.
Es que no se me ocurre de haberlo puesto hace poco.
Estoy pensando.
Tu web a juicio más 18.
Pues imaginad que una vez...
Una vez en el tu web a juicio...
Se vieron unas tetas.
Porque alguien las puso ahí en medio en un chat.
Y entonces he subido el vídeo a YouTube.
Y YouTube me ha dicho...
Oye, no se puede monetizar esto.
No se puede monetizar porque en algún punto parece ser que hay algo chungo.
Y digo...
¿Qué chungo?
¿Será que he dicho alguna palabrota o algo?
Y no.
Es que resuelta que es por eso.
Por la escena porno que me colasteis.
Pero bueno, no pasa nada.
Al menos nunca me banearon.
No sé si está aquí el que lo hizo.
Pero nunca me banearon.
Lo cual estoy bastante agradecido.
Y fue bastante bien.
Así que genial.
Por cierto, ya que estáis aquí 300...
Venga, os voy a...
A ver si lo conseguís.
Os voy a pedir algo.
Os voy a pedir algo.
He puesto un tuit.
Acabo de ponerlo.
Este tuit.
Donde publicito...
No publicito porque no es publicidad.
Pero he puesto un tuit.
Bueno, de hecho, lo puse en el tuit.
¿Quieres aprender React desde cero y gratis?
Pues eso.
Para que la gente se anime a ver mi curso de React que tengo en YouTube.
Pues a ver.
Si entráis y le dais ahí 302 retuits.
Bueno, 302 retuits no puede ser.
Pero 300.
No, 300 no.
Si le dais 300 retuits, os explico a quién le escribí el mensaje ese de que quiero una noche porno.
La verdad es que no sé ni si la he escrito yo.
Puede ser.
¿Sabes que me la escribiese alguien y me la copiase?
Yo qué sé.
Qué cosa.
Qué cosa.
Coño, la madre que os trajo.
Que de verdad le estáis dando.
Oye, muchas gracias.
Va directamente al minuto 22.
Hostia, es verdad.
Es verdad.
Ah, no.
No.
Creo que no.
Esto es porque tú lo tenías en el minuto 22.
Yo creo que es eso.
Es que solo se rende.
No.
A mí me va el minuto una hora.
Aún está actualizado el curso.
Sí.
El curso sigue bastante vigente.
El backend del curso de React hay que actualizarlo.
Mido.
Qué backend.
Qué curso de React.
De React.
El curso de este está bastante, bastante vigente.
No ha cambiado, yo diría que casi que nada.
Y a ver, son 12 horas, pero es verdad que se hace en directo, por lo tanto, el cómo se va
explicando es todo en directo, se van haciendo preguntas, lo cual está bastante bien.
El principio, si queréis, lo podéis saltar, porque la primera media hora no es de React, pero es para que entendáis React.
Es que a mí me gusta entender las cosas.
Entonces, explico por qué React, de dónde sale React, la necesidad de React.
Hasta el minuto 45 no se ve JSX, pero es que al principio yo creo que es súper interesante.
Se hace un componente con JavaScript y sin React, ¿no?
Y es del palo, oye, para que entiendas por qué necesitas esto.
Si no, pues, bueno, casi os podéis saltar el primero y ir a este.
Bueno, este ya se ve mejor.
Pensaba que se vería también regular.
Vamos a hacer la aplicación.
Al usar Yarn app.
Creí que me había llegado un mensaje de WhatsApp.
No, yo no he sido.
La parte del backend con Dino.
Hostia, claro.
Hostia, pues mira, lo miraré, lo miraré.
Me lo miraré.
Sí, sí, habéis escuchado WhatsApp.
Habéis escuchado WhatsApp porque no sé dónde lo he dejado abierto antes.
Y claro, no lo he cerrado.
No sé dónde está ahora.
No sé dónde está.
Tengo tantas cosas abiertas que no sé dónde está.
Oye, muchas gracias por...
Vale, pues te doy retuits.
Si llega a mil retuits...
Si llega a mil, hago otro curso desde cero de React.
O el mismo mejor.
¿Qué pasó con Codilink?
¿Qué pasó?
Lo hicimos el otro día.
La semana que viene o seguimos.
No sé si alguien lo vio, pero hicimos esta pedazo de maravilla,
que es un editor en vivo.
Y lo seguiremos haciendo.
Básicamente es un editor que tú vas escribiendo.
Bueno, es como un Code Sandbox.
En tiempo real.
Y lo hicimos en vivo, aquí en directo.
Y estuvo súper bien.
Súper bien.
¿Y Vue para cuándo?
Yo cuando empecé en Twitch, lo primero que hice fue utilizar Vue.
Igual para septiembre.
Igual para septiembre.
¿Aún está actualizado el curso?
Eso.
Que sí, que está actualizado.
Midu va a tirar la de manager.
La culpa es de otro.
Twitter es de chimenteros.
Es la imaginación.
Escuchaste WhatsApp.
Creí que me había llegado un mensaje en WhatsApp.
Perdón, perdón.
Muy bueno tu curso.
Muchas gracias, hombre.
¿Para cuándo el nuevo curso de Next 10?
Hostia, quiero que me lo patrocine Eversell.
Eso es lo que quiero.
Porque es que no tengo tiempo y necesito como ayuda, apoyo para poder hacer un curso de Next 10, ¿sabes?
Pero en Discord me podéis dar ideas para ver qué podría hacer.
¿Hay vídeos en tu canal de React con TypeScript?
Lo va a ver muy pronto.
Lo va a ver pronto porque yo hice en el Fullstack Bookcamp, creé el vídeo de...
Hicimos una clase de React con TypeScript y lo subiré muy pronto.
¿Para cuándo el curso de Next 10?
11 por 2.
Pues eso, que me gustaría hacerlo.
Y lo quiero hacer.
Lo que pasa es que tengo muchas cosas pendientes.
Y tengo muchas cosas que hacer.
Tengo que escribir el libro.
Tengo un libro que estoy a punto de sacar.
Que es de Git.
Que luego sacaré el de React.
Pero por ahora voy a sacar el de Git.
Y se lo están mirando mis mecenas de Patreon.
Para que me den su opinión.
¿Queréis ver algo del libro o no?
Os da igual.
Si os da igual nada, ¿eh?
Bueno, os voy a leer.
A ver si lo queréis ver.
A ver si no te lo enseño.
Pero lo voy a poner...
Creo, creo, no lo sé.
Creo que lo voy a poner...
Lo voy a poner en Twitter.
Y en Twitter diré.
Si este tuit llega a 500 retuits, lo pongo gratis...
Lo pongo...
Gratis no.
De paga lo que quieras.
Y entonces si quieres te lo podrás llevar gratis, claro.
Y si no, pues paga lo que quieras.
Eso haré.
¿Cómo ves Next de cara a crear una SPA?
Creo que es mejor usar React para ello.
Bueno, lo veo bastante bien, ¿eh?
No te creas.
Creo que Next es verdad que tiene muchas cosas de server-side rendering.
Pero todo el tema del SEO...
¿Sabes?
Tienes el componente de SEO.
Tienes el de React Router.
Tienes bastantes cosas.
Mira, otra vez ha sonado el WhatsApp.
Y no sé dónde tengo el WhatsApp.
¿Te has dejado WhatsApp?
Ah, mira, está aquí.
Ahora.
Ya está.
Ya es donde está el WhatsApp.
Ya está.
Cerrar.
The Next DS.
Porfa.
Vale, haremos el siguiente The Next DS.
Denle amor por el chisme.
Para el chisme.
Hostia, 44 retweets, ¿eh?
A ver, no sé los 290 que hay ahora, pero bueno.
¿Podrías añadir emotes de BetterTV?
Hostia, no sé cómo se hace, pero me lo voy a mirar.
Me lo miraré.
BetterTV.
Me lo apunto.
A ver qué es.
MiddleCodyLink.
Si llegas con un enlace, deberías parar la ejecución mientras revisas lo que te viene.
Por lo menos el JavaScript.
Ya, pero eso pasa casi en cualquiera, ¿no?
O sea, por ejemplo, en un CodeSandbox, en...
Ay, perdón, con la postura.
En StackBlitz, CodePen, no pasa exactamente lo mismo.
¿Sabes?
Si yo en CodePen, por ejemplo, si yo estoy aquí en CodePen y alguien me pone un alert y
yo os comparto eso, ¿sabes?
Yo pongo aquí alert.
¿Qué pasa?
Bueno, no pasa nada porque CodePen funciona mal.
Lo odio, de verdad.
O sea, el CodePen lo odio.
Es que funciona fatal.
O igual es que los tiene...
No sé si es que los tienen vetados.
Ni siquiera.
Es que no funciona, ¿eh?
No, creo que los tienen vetados los alerts.
A ver, también puedo hacer eso, ¿eh?
Puedo hacer que los alerts no se puedan escribir.
¿Sabes?
Evitar que...
Sobreescribir esa funcionalidad.
Harás otro tuve para juicio el miércoles que viene.
¿Qué edad tenías cuando hiciste tu curso de React?
Se te ve joven.
¿Qué pasa?
¿No me ves joven ahora?
¿Es eso?
Pero, no sé, un año menos.
Lo que pasa es que no tenía el pelo tan largo.
Midu, si hasheas el código de la URL para que quede más corto en CodeLink, o sea, hashear
el código hasheado...
Lo he pensado.
Tengo que mirar a ver cómo lo puedo hacer.
Si se puede comprimir con algún tipo de que zip o algo así.
Pero...
¿Sí?
¿Queréis que muestre el libro?
Venga, muestro un poco del libro, va.
A ver qué os parece.
A ver qué os parece.
Mira, este es el librito.
Esta es la portada, que bueno, la vais a ver ahora.
Guía rápida Git.
El nombre no es oficial, ¿vale?
O sea, es que estoy todavía...
Estoy esperando feedback de la gente.
Porque ¿sabéis qué pasa?
Que empecé este libro un poco para aprender a escribir libros técnicos.
Porque estaba escribiendo el de React y me estaba costando, porque me estaba costando saber escribir.
Cómo escribir, en qué formato, en qué editor...
Un montón de cosas.
Me estaba costando.
Entonces digo, mira, voy a hacer un libro que no sea el de React, porque el de React es bastante complejo.
Al menos lo que quiero plasmar.
Voy a hacer un libro sencillo, corto y tal.
Entonces empecé a escribir el de Git y bueno, creo que encontré el flow.
Me sentía súper cómodo.
Y de repente, digo, hostia, que llevo ya 80 páginas escritas.
De hecho, aquí no están todas las páginas.
O sea, tengo más páginas de las que aparecen por aquí.
Pero mira, aquí tienes una página, ¿no?
¿Cómo puedo aplicar los cambios de un commit a otro?
Pues te dije, al trabajar con tantas ramas diferentes, a veces puede ser útil, no sé qué.
Y bueno, de vez en cuando pongo imágenes, un poco explicando el concepto.
Y tienes como trucos de Git.
Te explica.
O sea, es un tutorial de qué es Git.
O sea, desde el principio.
Bueno, te hablo de mí también, claro.
Te digo, ¿quién soy yo?
No sé qué.
Reportando bugs, agradecimientos, que es un control de versiones porque es importante.
Git.
Bueno, y así.
Voy explicando los tres estados en Git.
Un poco para que la gente entienda Git.
Y hay un montón de preguntas, de trucos, de historias.
Por ejemplo, el contenido este de cómo escribir un buen commit.
Buenas prácticas para escribir commits en Git.
Este que escribí el otro día.
Este artículo en realidad es parte del libro.
Lo que pasa es que dije, hostia, me parece que es un artículo muy interesante.
Y por eso lo saqué.
Pero es parte del libro.
Y en realidad lo tengo bastante avanzado.
Me falta un capítulo que lo tengo avanzadillo.
Y nada, pronto espero, a ver, aquí.
Espero pronto sacarlo.
Si queréis, os puedo decir el manual Git, creo que es.
No, 50 preguntas.
Creo que es 50.
50 preguntas típicas de Git.
Por si os interesa y os queréis apuntar, pues ahí lo tenéis.
Lo que pasa es que todavía no me sé el nombre oficial.
Ya os digo que puede ser que cambie.
Puede ser que cambie.
Milusena, que alguien me esté dando bola.
Claro, pero ¿por qué no te voy a dar bola?
¿Te están cobrando?
¿Quién me está cobrando?
Yo no uso Twitter.
No pasa nada, hombre.
Acabo de ver tu mensaje de WhatsApp cuando revisaste mi porfolio de React con 15 años.
Gracias.
¡Qué grande!
Milu, ¿tienes algún vídeo en YouTube sobre cómo empecé la programación?
Yo sí, tengo uno de cómo empecé la programación.
Claro que sí.
Te lo paso.
O sea, además es súper...
O sea, ha triunfado un montón.
Tiene un montón de visitas el vídeo este.
Hoy quiero hablarte de mi experiencia en la universidad.
Este, este.
Mira la cara de tristeza que tengo.
De lo malo que lo pasé y estas cosas.
Pues este es el vídeo donde lo explico.
De cómo empecé la programación, lo mal que lo pasé.
Las cosas que aprendí.
No soy yo, ¿eh?
Todo el rato.
No sé por qué salvará todo el rato, pero...
Joder.
Eso.
Tengo que...
Como que voy enseñando cosas.
Guiteando como un campeón.
Guía rápida para no pasar tanta vergüenza.
¡Hostia!
Van de Burman.
Ojo, ¿eh?
No está mal.
No está mal.
Me gusta.
Oye, Pelimol.
Gracias por suscribirte con Prime.
¿A cuánto lo vas a poner?
Como digo, depende.
De hecho, estoy pensando que...
De poner un tuit, que si llega a tantos retuits, lo pongo a paga lo que quieras.
Y si la gente no quiere pagar nada, pues que se lo lleve gratis.
Y si alguien quiere pagar 10 euros o 10 dólares, pues que lo pague.
Y ya está.
¿Algún consejo para motivarme?
J. Camilo.
Mírate el vídeo que acabo de decir del de mis desastrosos inicios en la programación.
Eso te va a motivar seguro.
¿Has usado Yield?
Dice Yield y Joshua.
Sí lo he usado.
Y de hecho, aquí en directos lo hemos explicado unas cuantas veces.
No lo uso en mi día a día, ¿eh?
Si me preguntas, ¿lo usan mucho?
No.
No lo uso mucho y de hecho le veo usos moderados.
O sea, muy pocos.
¿Cómo haces para poner parte del código en la página?
¿En qué página?
¿En qué página?
Ah, con Prism.
Sí, yo utilizo, en realidad utilizo una librería que es de Hugo.
¿Cuánto tiempo te llevó a aprender todo lo que sabes de JavaScript?
Pues al día de hoy sigo aprendiendo cosas de JavaScript.
Por lo tanto, me ha llevado los 15 años de experiencia que tengo en el sector.
Y lo que me va a seguir llevando.
Porque es un aprendizaje continuo.
Cuando crees que lo sabes todo, que nunca he creído que lo sepa todo.
Pero cuando crees que sabes mucho, de repente aparece otra cosa y dices,
hostia, o el otro día estábamos haciendo el Codilink, ¿vale?
Estuvimos haciendo este proyecto, este, Codilink.
Y mira, Sergio Serrano dijo, oye, pues al iframe puedes utilizar el atributo srcdoc.
Y yo no lo conocía, no lo había visto en mi vida.
Y es lo que nos ayudó a simplificar un montón de cosas.
¿A qué edad arrancaste a programar?
Sobre los 21 o así.
Había programado ya cuando era niño, pero lo que hacía era copiarme líneas de código de un libro.
No, esa es la verdad.
Y si no se llega, esperemos que no.
Te recomiendo la extensión para YouTube de Vidic.
Es que no me da tiempo a mirar ni Vidic, ni YouTube Buddy, ni estas cosas.
Git para lentos.
Pero hasta saber hacer cosas solito, no sé a qué te refieres.
¿Para cuándo haces una app solo con VanillaJS?
Cidroid, hemos hecho Codilink y tiene VanillaJS.
Mira, esta la hicimos el otro día.
VanillaJS.
Y mira, se pueden cambiar estas cosas.
Y espérate, que esto lo vamos a mejorar.
Esto, de verdad, yo lo tengo en la cabeza porque mirad, este enlace que veis aquí,
pues yo lo puedo pasar y ya veis directamente este editor con ese código y tal.
Y cada vez que alguien pone lo que sea, pone aquí, body, mientras tú vas escribiendo va cambiando la URL.
Con family.
Y va cambiando todo en tiempo real.
Es súper guay.
¿Consejillas para un blog con Markdown?
Estoy acostumbrado a hacer todo con HTML y descubrí hace poco el MDX.
Pues, a ver, yo, a mí me gusta mucho Markdown y no lo cambiaría por MDX, la verdad.
O sea, es que MDX es más que Markdown.
Cuando crees que sabes 80%, cambia 20%.
Totalmente.
Pareto.
¿Has usado 3GS?
No.
¿Alguna recomendación para aprender a maquitar si me da mucha pereza?
Pues que hagas copias diseños que te gusten mucho.
Algunos que te gusten mucho, mucho, mucho.
¿Agregarle secretario para varios usuarios?
Lo tengo pensado, mi parcero.
Lo tengo pensado.
Lo que pasa es que me puede complicar alguna cosilla.
Pero lo tengo pensado.
¿Alguna variante recomiendo para Windows?
Go, Hugo.
Debería funcionar en Windows totalmente.
No conozco ninguna variante.
Pero puedes utilizar el Eventy, por ejemplo.
Si quieres que sea así también como en crudo.
¿Midu te ha pasado usando React en Vitec?
¿Te dice que el React no está definido?
Me pasó ayer y no sabía por qué.
¿Puede ser porque no hacías un import React from React?
Porque Vitec no lo añade automáticamente.
No tengo ningún proyecto que utilice grafos, que yo recuerdo.
La URL tiene un límite de 2048 caracteres.
Lo probamos el otro día y al menos en Chrome lo superaba mucho.
MDX dicen que puedes usar un componente de React dentro de un MD.
Es verdad, totalmente.
¿Lo recomiendo?
No sé, a mí es que me da igual utilizar un componente de React.
Es que el problema de tener un componente de React es que normalmente ya tienes todo el tema del build.
Yo te hice Hugo porque yo escribo mucho en mi blog.
Tengo ya cientos de artículos en mi blog y necesito que vaya rápido.
Y Next.js, al menos a día de hoy, no ha escalado suficientemente bien.
Y cualquier tema de build que sea con MDX y con React, para mí no va a escalar bien.
Pero si te interesa, está súper bien MDX.
Lo que pasa es que en mi caso, cuando crees que sabe mucho JavaScript y cambia en Macscript.
¿Algún consejo para entrar en mi primer empleo de IT?
Ya tengo unos 7 proyectos personales, currículum y todo.
Hear Frank.
Lo mejor que puedes hacer es probar, probar y probar.
Echar currículums.
Ver si te dicen que no.
Pedir feedback y decirle, oye, me puedes decir por qué no.
Que has visto que debería mejorar para intentarlo más adelante.
Y a partir de ahí es que al final, las cosas que tú veas que te faltan,
pues estudiarás para seguir mejorando.
¿Cuándo crees que sabe mucho JavaScript y cambia en Macscript?
Mido, ¿cuándo crees que falte para poder usar las tuplas?
Creo que falta.
Yo creo que hasta el año que viene no vamos a tener tuplas.
Récords y tuplas.
¿Qué tecnologías usas en tu blog?
Utilizo Hugo.
Hugo, que es un generador de sitios estáticos.
Se llama Hugo porque está hecho...
Bueno, he buscado Hugo y aquí me ha puesto lo que le ha dado la gana.
Pero Hugo...
Mira.
Ah, gougo.
Más fácil.
Gougo.io.
The world's fastest framework for building websites.
Es súper rápido porque está hecho con Golang.
Golang es bastante rápido.
Entonces, por eso lo estoy utilizando.
No es el más cómodo del mundo.
No es el más cómodo del mundo.
O sea, seguramente Next.js, en cuanto a developer experience, es más rápido.
O sea, más rápido no, más cómodo.
Pero claro, es que...
Fíjate, este es mi blog, ¿vale?
Yo hago un API en run build y ha tardado un segundo.
Ha tardado un segundo y me ha creado 216 páginas.
Claro, un segundo, pues imagínate.
Esto es lo que necesito yo porque necesito sea inmediato.
Pero si no, es que tenéis un montón de opciones.
Si no os gusta Hugo, Hugo lo que tiene es que es súper rápido.
Pero es verdad que no es cómodo.
Claro, Next.js lo que tienes que es muy cómodo.
La developer experience es genial y estas cosas.
Bueno, amigos y amigas, lo primero, muchas gracias a todos los que habéis dado el retweet de verdad, al pedazo de... al tweet.
Os lo agradezco mucho.
Muchísimas gracias.
Y por darle like también.
Sois unos cracks.
Es que no os merezco.
Bueno, sí que os merezco.
¿Qué coño?
Claro que os merezco.
Merezco lo mejor de lo mejor.
Vosotros sois lo mejor de lo mejor.
Así que hemos terminado por hoy.
Muchas gracias por acompañarme.
Espero que os lo hayáis pasado tan bien.
Al menos la que me he pasado yo.
Ha habido momentos mágicos que recordaremos por mucho tiempo.
Como el tema es de los console.log que buscan sexos anales.
En fin.
No sé si lo superaré nunca.
Este es lo que hemos visto.
Pero vamos a ver.
Ah, mira.
Vamos a ver.
Vamos a asustar a esta chica de aquí.
Esta chica de aquí.
Levi Sack.
Gracias, Midu.
Siempre te lo mereces, crack.
Muchas gracias, Aibix.
Muchísimas gracias, hombre.
Muchas, muchas gracias.
Me hiciste reír bastante.
Muchas gracias, hombre.
¿Qué tuit?
Pero si lo he puesto.
He puesto un tuit.
Entrad en mi Twitter y he puesto el curso de React.
Si la gente se quiere animar.
Y os había pedido que pusiera el retuit.
Y ha habido bastante gente que ha hecho retuit.
Así que os lo agradezco un montón.
Vosotros sí que sois los mejores, Feralt.
Nixux.
Gracias, mis de reír.
Save 75.
David.
Santi Tobi.
Hack on Dalbers.
Hysteria.
Gracias, Aibix.
Ojalá en un futuro se venga el React version 2021.
Lo haremos, lo haremos.
Lo que pasa es que ahora hay un poco de saturación de cursos.
Que vaya bien.
Buen provecho.
Muchas gracias.
Tengo un hambre.
Nazasol.
Gracias, Midu.
Gracias a ti.
A Roland.
The Sorder.
MinSaitama.
Excelente contenido.
Muchas gracias a todos.
A Chosti.
Deno.
Geobeta.
Cuidado mucho.
Vamos a darle una write a una chica que creo que es portuguesa.
Pero está haciendo cosas con HTML, CSS y JavaScript.
Así que con eso nos vamos.
Y ya sabéis, podéis ir utilizando Kodi.link para ir compartiendo.
La semana que viene lo mejoraremos.
Así que nos vemos ahí.
Hasta luego.
Cuidado mucho.
Un abrazo enorme.
Y que tengáis una semana fantástica.
Chao.
Un abrazo enorme.
Un abrazo enorme.
Un abrazo enorme.
Gracias.