Y venga, a subir otra vez. Venga, le scroll para arriba. Venga, scroll para arriba.
A ver si me acuerdo dónde nos habíamos quedado.
Madre mía, es que tenemos aquí... Tenemos una de proyectos, una de historias.
Mi porfolio con Gatsby Contentful. Vamos a ver, creo que es con este.
Vámonos, Jorge Andrés Mena Jr., Full Stack, JavaScript Developer.
Me gusta, Jorge, me gusta.
Foto potente, con los colores del porfolio. Muy bien.
Bien elegida el título claro, directo y ya está.
Hay una cosa que... Bueno, esto es mi opinión.
Ya os digo que yo os doy mi opinión de mierda.
Pero a mí me gustaría que saliese sin gafas.
Está bien la foto, pero si fuese sin gafas ya sería mejor.
Más que nada porque ya sabéis que cuando la gente está detrás de unas gafas,
cuando es una presentación, es extraño.
Porfolio. Wanna try... Oh, mira, esto me gusta.
Me gusta mucho la presentación.
O sea, me gusta mucho cómo están estos...
Cómo están presentados los proyectos.
Me gusta. Este está bonito también.
Lo que pasa es que... Uy, uy, menos 3.
¿Cómo es esto? ¿Cómo puedes crear menos 8 párrafos?
Oye, pues esto es fácil de arreglar.
Al menos de la UI.
Esto aquí, en el input, se le puede poner...
No me acuerdo si era un range o un rango, ¿sabes?
Te puedes decir rango o no sé qué.
Y entonces evitas que tener números negativos.
Pero bueno, me gusta cómo está.
Lo que sí, que esto sí que es importante...
Sí, mira, que me la han chivado ahí...
Lucy me la ha chivado.
El min, ¿no?
Exacto.
Era bastante fácil, ¿no?
De poner aquí un min.
Le decimos min.
Yo pondría 1, ¿no?
Porque como mínimo tendrías un párrafo.
Y ahora sí que esto nos debería dar...
¿Ves?
1, 2, 3...
Y ya está.
Ya lo tenéis arreglado.
No hay nada como saber HTML, amigos.
El HTML salva vidas.
Salva vidas.
Vale, una cosa súper importante.
Si...
A ver, si haces hover, ¿sabes?
Si tiene efecto cuando pasa el ratón, lo que esperas es que sea clicable.
Es muy raro que tú hagas este efecto y luego no le puedas hacer clic ni nada.
A mí es una cosa que me frustra mucho.
Porque, ¿ves?
Encima hay que buscar justamente donde está para entrar a la web, aquí en medio.
Yo lo que haría, que todo fuese clicable, todo clicable y ya está.
No hagáis hover de algo que no se pueda clicar.
Es muy raro.
Al menos a mí me resulta raro, ¿eh?
No sé, la gente igual sí que le parece súper bien.
Pero muy pocas veces, a no ser que sea una imagen en la que quieres destacar o y tal.
Pero claro, en este caso es que parece clicable.
Github User.
Uy, me da miedo loguearme con mi cuenta.
Github User.
Bueno, pero si encima no puedo hacer login con la cuenta de Github.
Stock Photo and Plush.
Esto no está...
Me parece que esto no está centrado, ¿eh?
Me parece a mí.
Me da a mí que no está centrado.
Pero bueno, me gusta, ¿eh?
Me gusta cómo está...
Esto es un proyecto de Platzi.
Uy, mira, qué bonito.
Jason.
Bueno, pero ¿la búsqueda?
Ah, vale.
Que sí que hay que poner flight.
Hola.
Box.
Es que hay que darle clic.
¿No?
No sé qué hay que hacer aquí en este...
A ver, Ángela.
Clic.
No, no hace nada.
A ver, en esto...
Es que no sé...
Bueno, esto es un proyecto.
No pasa nada.
Pero es un poco raro.
Pero bueno, está bien.
Tiene un montón de proyectos.
Ah, mía, tiene más.
Oye, si tiene más, yo os diría que si tenéis más proyectos, pues ya que estáis aquí,
solo enseñad los seis mejores.
No dejéis este huecazo aquí, ¿no?
O pues elegí tú uno que no te guste.
A ver, Jorge Andrés.
Vale, muy bien la foto.
No sé por qué en todas tiene que salir con la gafa de sol, pero bueno.
Hola, ¿qué tal?
Bienvenido.
Uy, esto...
Esto falta ortografía aquí.
Esto en mayúscula.
Mi nombre es Jorge Mena.
Self-driven motivated business engineer.
Madre mía.
Motivated business engineer.
Vamos a empezar a crear este tipo de puestos, ¿eh?
En 2021 encontré mi pasión por el desarrollo Frontend.
Y ahora mismo, ahora, escribo Frontend Code as...
¿Esto qué es?
Code punto.
Pero revisado en los textos.
Que son gratis revisar.
¿Qué significa ese...?
Esto es un poco raro, este tooltip y tal.
No hace falta que pongáis esas cosas.
¿Vale?
Experiencia.
Mira, muy bien.
Con experiencia, además.
Con experiencia de trabajo.
Hostia, qué bueno el vídeo este aquí al final, ¿eh?
Qué bueno el vídeo ahí, dándole la mano.
Sí, un acuerdo.
Como sabéis, yo me gusta...
Hostia, se ha colado...
Mira, se ha colado aquí algo, ¿eh?
Aquí hay algo que se ha colado en el scroll.
Algo se ha colado.
Algo se ha colado.
No sé si lo veis aquí.
¿Veis aquí que hay una raya?
Y que hace que tenga scroll horizontal.
Aquí se ha colado algo.
Yo creo que es este skill set.
Vamos a echarle un vistazo al skill set.
A ver qué ha pasado aquí.
Hostia, le he dado al slack.
No, el slack no.
Quería entrar aquí.
Vamos a ver el repo.
Porque a mí me parece que hay algo por aquí.
Algo hay, algo hay ahí.
Algo hay ahí.
Vamos a ver script.
Bueno, son componentes de React.
Muy bien, muy bien.
Mucho componente de React.
Pero está echando un Gatsby.
Vamos a ver aquí por qué.
¿Ves aquí?
Aquí no le tiene el error.
O sea, es un error que le pasa solo cuando está en modo desktop.
Hay algo ahí que lo está empujando.
Bueno, de hecho ahora ya lo tiene el error.
Vamos a ver.
Ta, ta, ta, ta, ta, ta, ta.
No, no.
Siempre lo tiene, ¿eh?
Vamos a hacer el truco este.
Pues yo me parece...
A mí me parece que es esta sección.
Que es como la que más sobresale.
Esta, la de skill set.
Width 100, sí.
¿Veis que hace como de más?
¿Esto por qué le pasa?
Yo creo que esto le pasa porque no tiene...
Hombre, pues sí que tiene el box sizing.
Pero parece que es por culpa del padding.
Si le quitamos el padding...
No, pues no es culpa del padding.
Es por culpa de este 100 del viewport como que está pillando de más.
¿Veis que si esto le pone así ya se arregla, se ajusta y se arregla bien?
Hmm, curioso, curioso, pero habría que ver mejor por dónde van los tiros, pero ahí está el problema, ¿vale?
Ahí está el problema.
A mí este estilillo, yo esto lo quitaba, ¿eh?
Parece un poco raro, pero no sé.
Y los formularios, cuanto a menos información, el teléfono es un poco...
Yo le pediría el teléfono.
A no ser que de verdad le vayáis a llamar, ¿no?
Ah, el view width no cuenta la barra de scroll.
Lo suma, claro.
Pues ahí lo tenéis.
Pero es raro, teniendo en cuenta, pensaba que eso lo tendría a más de uno, ¿eh?
Ah, no, es que solo lo tiene este.
Claro, yo pensaba que todos los sections...
Pero no, es el único section que lo tiene.
Claro, yo ponía el width del 100%, ¿eh?
No tendría mucho sentido poner este.
Claro.
Claro, porque ese espacio es justamente el del troll.
Muy bien, bien visto.
Muy bien.
Así que...
Así que eso.
La versión móvil.
Vamos a ver la versión móvil.
Vamos a ver la versión móvil que nos ofrece.
Bueno, de nuevo lo tiene todo animado.
Yo no sé qué...
Uy, aquí hay un rollito, ¿eh?
Ahí este sticky se ha quedado de aquella forma, ¿eh?
Se ha quedado a mitad de camino.
Hay cosas que parece que no están centradas.
Pero bueno, está bien, me gusta.
Todo hecho con componentes de React.
Al menos veo que, ¿veis?
Tiene un botón primary.
O sea que sí que ha hecho componentes visuales reutilizables.
Así que bien por ello.
Oye, no sé por qué hace esto de las props.
Lo hace aquí, en lugar de hacerlo directamente aquí.
No sé si lo hace por algo.
Porque veo que luego no utiliza las props.
Pero bueno.
Vamos a ver la card.
Guau, cuántos componentes.
Uy, esto pinta mal, ¿eh?
Esto de que aquí tiene dos espacios y este card block tiene cuatro.
Esto o no tiene el inter o algo pasa ahí, ¿no?
Un poco extraño de que en unos dos, en otros cuatro...
Mira, lo tiene con traducciones.
Muy bien.
Muy bien, con traducciones y todo.
Vamos a ver.
Profile picture.
O sea, qué raro que tiene un índice que lo que hace es exportar el default.
Yo, sinceramente, es que esto es como demasiado trabajo repetido constantemente en todos los componentes.
Yo no sé si haría como el icono, ¿no?
Que es un index dentro del icono, pues un index y ya está.
O sea, porque esto de en todos y en cada uno meter el index.js para hacer un export del default del componente...
Hostia, no sé, ¿eh?
A mí no me convence mucho esa forma de proceder.
No lo sé.
Es que verlo repetido, todos los archivos ahí con esa misma línea...
Esto está llamando un custom hook, bueno, a gritos, ¿vale?
Bueno, es un NextDS, por lo que veo.
Hubiera estado bien, ya que utiliza NextDS.
O creo yo que es...
No, no, no.
No es un NextDS, perdón, ¿eh?
No es un NextDS.
Me lo ha parecido porque tenía un pages, pero no es un NextDS.
Esto está hecho además con webpack a tope.
Muy bien.
Oye, Dapelu, gracias por suscribirte con Prime.
Muchas gracias.
Y alexis699.
Parece Angular hecho en React.
Pues puede ser.
Bueno, tiene Redux.
Tiene un montón, un montón de dependencias para lo que es.
Esto es un poco lo que siempre decimos.
A ver, está bien, porque me imagino que lo ha utilizado para aprender.
Y...
Hostia, hostia, hostia.
Uno va por la izquierda, otro por la derecha.
Bueno.
Pero bueno, que tiene pinta que podría ser todo con HTML, CSS y ya está.
Pero bueno.
Tiene buena pinta.
Tiene mi check.
Así que ahí le damos.
Vamos a darle check.
Muy bien.
Al Jorgevi.
Al Jorgevi.
Jorge Andrés.
Vamos con el de Odomble.
Odomble.
Vamos a ver.
Odomble.
Vale.
Hostia, hostia.
Odomble se la ha jugado.
Ha dicho, yo he venido a jugar.
Y me gusta.
Me gustan estos porfolios.
Así que se la juegan un poco, hombre.
Que si no...
Muy bien.
Vamos a ver.
Bueno.
Esto no parece que sea un menú.
O sea, al principio estaba leyendo porque pensaba que era una frase.
Ah, mira.
Está por aquí Ortega.
Muy bien, Ortega.
Hola, soy.
Y soy.
Ah, soy.
Hola, soy.
A ver, pensaba que eras tú, Ortega.
Digo...
A ver, inicio, educación, porfolio, diseño.
Me gusta el estilillo, pero yo le daría un poquito más de separación, ¿no?
Porque está demasiado pegado eso.
Mira, cuando se hace más pequeño, todavía mejor.
Todavía más pónico.
Hostia, la imagen...
Claro, cuando se ve así, queda un poco raro, ¿eh?
Fíjate que el pobre Odón parece que le están haciendo un sándwich.
Claro, no sé.
O sea, no me digas.
Claro, ahora tengo dudas como realmente Odón.
No sé si Odón es así.
Y si hacemos 2.000...
Ah, vale, vale.
Ya ha llegado el límite.
Pero claro, no sé cuál es el Odón real.
No sé si es así de fino, no sé.
Bueno.
Inicio, educación, porfolio, diseños, skills, intereses, contacto.
Me gusta.
Hola, soy Odón ML.
Me gusta mucho el efecto este.
Y soy mexicano...
Bueno, esto es un poco raro, ¿no?
Hola, soy.
Y soy mexicano, técnico en programación, ingeniero en sistemas, front-end developer,
ilustrador aficionado.
Me gusta la idea.
Este soy, yo lo pondría en minúsculas.
Está muy bien el estilillo.
Esto está chulo.
Lo que pasa es, o sea, como la imagen se estira, no sé cuál es el nivel de ajustar.
Ay, no tiene ningún scroll ni nada.
El icono del Facebook no lo veis, pero está, mira, está ahí detrás.
Y está como un poco también como chafado.
Algo pasa.
Bueno, vamos a ver qué más tiene Odón.
Educación.
Joder.
Odón se queda siempre en pantalla.
Él quiere ahí que...
Quiere quedarse.
¿Qué es esto?
Hay gente que dice, ¿qué es esto?
¿Esto qué es?
Mira, está hecha con Angular, eso ya lo sabemos.
Pero, ¿qué es esto?
Pues, mira, no lo sé porque hay una cosa que ya le veo que tiene la página que es como...
Está un poco hecha, un poco extraña.
App Image.
Vale, estos son Web Components.
Es que no soy capaz de entrar.
Es que parece como que tiene muchas positions.
Absoluts y muchas historias raras, ¿eh?
Me gustaría...
No sé.
No, no, no.
Vale, esto fuera.
A ver si soy capaz.
Esta es la imagen.
Esta es la imagen de fondo.
La imagen de fondo es esto.
Que se ha dejado con...
Bueno, ahora ya sabemos que esta es la imagen real.
Vale.
Esto...
Vamos a ver si son capaces.
Es que tiene como un montón de cosas.
No sé dónde sale la educación este.
Ah, aquí.
¿No?
Aquí.
Sí, pero parece que es algún tipo de librería o algo, ¿eh?
Porque...
Bueno, es que no sé.
Tiene como algo encima también.
Como que tiene un montón de cosas.
Mira, el fondo.
Al fondo ya lo hemos visto.
Bueno, vamos a volver.
A ver.
Yo...
Está bien, ¿eh?
Que salgáis.
Sobre todo en el inicio.
Pero, hombre, yo...
Aprovecharía el espacio para...
Para...
Para poner...
Ya una vez que te han visto, pues ya lo demás.
Técnico en programación.
Diploma.
Ver diploma.
No entiendo.
México.
Ver...
Me imagino que será la ciudad o algo.
A ver.
Qué gratis escribir, ¿eh?
Ingeniería en sistemas.
Pero, ¿por qué utiliza Pascal Case para las frases?
Menos mal que este D no lo ha puesto a maícola también.
Título.
Ver...
Es que no entiendo qué es ver.
Me imagino que será la ciudad.
Pero...
Título.
Diploma.
Ah, eso es lo que le han dado.
Es que es un poco raro, ¿eh?
¿Cómo está escrito?
Porfolio.
Él sale en todas.
Cubet.
Desarrollador web.
Actividades.
Tiene buenas ideas, ¿vale?
Pero los...
Ah, ver es Veracruz.
Gracias.
Pues es que no entiendo por qué...
Pon Veracruz, que tampoco...
Qué gratis.
A ver.
Le faltan espacios.
Odon.
Está muy bien las ideas que tienes, pero yo creo que falta espacio.
Por ejemplo.
Aquí, pues esto...
Bueno, a ver si soy capaz de editarlo.
Porque claro, también, viendo que no sé qué sale con un montón de cosas aquí encima...
¿Ves?
No soy capaz de...
Es súper raro el z-index que tiene.
Es muy extraño.
Porque veis que se me pone encima la imagen cuando la imagen debería estar de fondo.
Es como muy raro.
Muy, muy raro.
Muy, muy raro.
La verdad es que accesible...
Lo que es accesible no es, ¿vale?
Porque no puedes...
Ahora.
Ahora sí que he podido...
Pero ¿por qué no me sale el cursor de seleccionar?
Bueno.
¿Qué le falta de espacios, vale?
Diseños.
También con acento.
También tengo experiencia haciendo diseños gráficos para proyectos independientes, musicales y de emprendimiento.
Bueno.
Está bien.
Skills.
Bueno, mira.
Está chulo.
Mira, esta parte me gusta.
Yo evitaría salir en todas, ¿vale?
En todas las páginas.
No sé.
Es que ahora tengo curiosidad por ver cuáles son los ojos de Odon.
Ahora me dice Odon que, pobre, he perdido los ojos en un accidente y entonces lo entendería.
Pero, no sé.
Quiero ver a Odon.
Intereses.
Mi interés es...
Hostia.
Es muy raro esto.
Como el texto es un poco raro.
Es aprender más sobre JavaScript.
Más con acento en la A.
Porque si no, es pero.
Es aprender pero sobre JavaScript.
Y subframework porque la intención es poder crecer y compartir los conocimientos con los demás.
Mi interés es aprender más sobre JavaScript y subframework.
También estoy interesado en aprender más sobre diseño gráfico, animación, edición de vídeo y otras cosas relacionadas a las artes digitales.
Bueno, contacto.
Perdón si no te muestro mi rostro.
Es por temas de privacidad.
Ah.
Mira.
Por temas de privacidad.
O sea...
Pero a ver, a ver, a ver.
Odon.
A ver, Odon.
A ver, Odon.
Tú imagínate.
Que yo llego aquí.
Le doy a contacto.
Y ya lo primero que haces cuando quiero contactar contigo es pedirme perdón.
Perdón.
Si no muestro mi rostro.
Perdona, Odon.
Pero es que no te he preguntado en este momento por qué no enseñas tu rostro.
Lo único que quería era contactar contigo.
¿Sabes?
Es como yo que sé.
Vas al supermercado.
Y le dices.
Una barra de pan, por favor.
Dice.
No, lo siento.
No nos queda cerveza.
O sea...
Y dices.
Pero a ver.
Yo no te he preguntado por la cerveza.
Quiero pan.
Entonces.
Es que no entiendo este perdón.
¿Vale?
Si no muestro mi rostro es por tema de privacidad.
Contáctame en mis redes sociales.
Y con gusto te hago llegar.
Vale.
Ahí lo entiendo.
Pero no le pidas perdón.
Y gracias.
Y bye.
Hala.
Chao.
Mira.
Como entra en LinkedIn y tengas una foto.
Te muerde un ojo.
Vamos a ver, Odon.
¿Qué temas de privacidad?
No entiendo.
Si no muestro mi rostro es por tema de privacidad.
Luego pones un link de esto.
Y lo tienes aquí.
Y además.
Súper majo, Odon.
Que parece que es un chico aplicado.
No entiendo este tema de privacidad.
Como vaya al Twitter y tengas otra foto más y medio borracho.
Ah, vale.
Aquí tienes también esta foto así.
Como vaya al Instagram y salgan 80 fotos tuyas.
Bueno, no.
Mira.
Sales de lado.
Bueno.
Pero LinkedIn viene.
Que la sale.
La has sacado, ¿eh?
Uy.
Pensaba que era tu familia.
Digo, joder, macho.
A ver.
Temas de privacidad.
Cuando en algún momento pueden ver tu foto.
Que me parece muy bien, ¿eh?
Que tengas una foto.
Al final.
Es muy difícil guardar privacidad.
Cuando se tienen redes sociales.
Y quieres.
Pues exponerte en el mundo web.
Pero.
Bueno.
Eso.
Que intentaría no salir en todos los sitios.
Porque se hace un poco.
Hostia.
Todo el rato ahí.
Y encima.
Cuando llegas al último momento.
Te dice.
Ay.
Perdona.
En mobile.
Está muy chula, ¿eh?
En mobile me gusta mucho más.
Me gusta el estilo.
Yo revisaría el tema de las fuentes.
Porque las fuentes como que no se entienden muy bien.
Me gusta el.
Incluso la animación.
Que ya sabéis que no soy muy fan de las animaciones.
Pero en este caso creo que quedan bien.
Algunas.
¿Ves?
Ya me imaginaba que en algunas no te iba a quedar bien.
El tema de que ocupa demasiado espacio.
Esto habría que revisarlo.
Por ejemplo.
Aquí no queda bien.
La imagen está mal.
O sea.
Esto no tiene.
No se ve bien.
O sea.
El texto está pegado.
O sea.
Que mal.
Aquí te queda bien.
Lo malo.
Lo malo en general.
Que le veo un poco al diseño.
Es que parece un diseño de ilustrador.
¿Sabes?
Un diseño de cómo se ilustran las revistas.
Y está bien.
Pero claro.
Tiene alguna cosilla así que.
Que se le puede echar una.
Pero me gusta el móvil.
Yo.
Yo me animaría.
Sé que los temas de privacidad son jodidos.
Pero yo me animaría.
Y le.
Y saldría tu foto.
Igual esta.
Esta está bien.
Y.
Y esto.
A lo mejor no puedes hacer.
Pero luego.
Pues no sé.
Porque.
O sales tú.
O.
O desaparece.
Al menos.
Deja más espacios.
Y eso.
Pero bueno.
Te la has jugado.
Tengo que decir que.
Que me gusta el diseño.
Y.
Que es un diseño que llama la atención.
Que eso también hay que.
Hay que conseguirlo.
Así que muy bien.
Muy bien.
Adorno.
Vamos a ver.
¿Qué más?
¿Qué más tenemos por aquí?
¿Qué más tenemos por aquí?
Web portfolio.
¿Qué dice para el productor musical?
Este ya no hemos visto.
Fena.
Este lo hemos visto ya.
No sé por qué.
Le di un check.
Porque ya lo vi.
Javo.dev.
Vale.
Javier.
Javier vive en las montañas.
¿Vale?
Javier vive.
En las montañas.
Vamos a ver.
Javier me está diciendo que le dé a la izquierda o a la derecha poderosamente.
Que deje de perder el tiempo.
Venga.
Pues le damos.
Hostia.
Hostia.
Hostia.
Javier González.
Software developer.
Vale.
Vale.
Ya no puedo volver otra vez.
Vale.
Vale.
Bueno.
Ya lo he visto.
Ya lo he visto.
De Yui los dice.
Me encanta cuando un vídeo se encuentra con animación.
A mí las animaciones me gustan.
Bueno.
Vamos a ver.
Vamos por partes.
Javi.
Javi.
Tu pueblo es muy bonito.
Se ve que está muy a tomar por culo.
Pero se ve muy bonito.
De verdad.
Me entran ganas de venir aquí.
A pastar con las cabras.
Las ovejitas.
Tocar una vaca.
Y estas cosas.
Pero no sé.
No sé quién eres.
No te veo.
No lo sé.
O sea.
¿Dónde estás Javi?
No me digas que estás aquí.
Aquí al fondo.
No me digas que eres este.
Que estás saludando.
Nos tenemos.
O sea.
Es que hay que verte.
Mira.
Encima tienes un blog personal.
Yo ya te digo que yo los mezclaría.
Hostia.
Explicación.
Springboot.
Uf.
Yo.
Esto de tener un blog así y tal.
Mejor mezclarlo.
Mira Javi.
Pero si estás aquí.
Y fantástico.
Mira.
De Madrid.
Entonces no.
Esta imagen de fondo no es suya.
Claro.
Es que esa imagen tan poderosa de fondo.
Pues me hace preguntarme si Javi viva ahí o no.
Yo pondría por aquí una fotito.
Que la gente me diga.
Oya.
Pues mira.
Este soy yo.
Hola.
Bienvenido a mi página personal.
Nada.
Esto no hace falta.
Soy Javier.
Un software developer.
Con un grado de ciencias de la computación.
Y un apasionado.
Me encanta que lo ponéis siempre en inglés.
Eso está bien.
Ah.
Relacionado con la industria del videojuego.
Punto.
Punto.
He creado un blog personal.
Con la visión de expandir mi conocimiento.
Y tal.
Me.
No sé.
Esto no hace falta.
Cuando se explican estas cosas.
Es mejor.
Si vais a poner el about.
Pues hablar.
Hablar de vosotros.
¿No?
¿Qué pasa con esta animación?
¿Vale?
Y os voy a explicar.
Os voy a explicar el tema de por qué a mí no me gusta.
Mira.
Una cosa que veo.
Que me pone un poco nervioso.
Es que.
Es que cuando me acerco.
Parece.
No sé por qué se pone así.
Si es cuando me pongo.
Me acerco.
Cuando me acerco.
Se para.
Es un poco raro.
Lo fastidioso de esto.
Es que cuando tú.
Cambias el slide.
Fíjate que.
Uno.
Las.
Tú imagínate que quiero ir a la derecha todo el rato.
¿Vale?
Pues resulta.
Que me tengo que volver a mover.
O sea.
No siempre el ancho queda en el mismo sitio.
Es muy raro.
Esto es súper básico.
Yo pondría aquí arriba.
El hecho de que.
Tenga acceso directo.
A todas las secciones.
Porque no a todo el mundo le interesa.
O sea.
Empezar a pasar.
Pasar el Abound Me.
Es que la gente.
Al works.
No va a llegar nadie.
O sea.
No va a llegar.
Porque ya va a haber el Abound Me.
Va a ver un poco como es la cosa.
Y el hecho de esto.
De que parece un Transformer.
Mira.
El hecho de que tú estás aquí.
Y mira.
Mira como suena.
Mira.
¿Sabes?
Como un Transformer.
Que se está como.
Que me parece.
Optimus Prime.
¿No?
Y cuando se transforma.
De trailer a robot.
Y sale ese sonido de.
Míralo.
Pues eso.
Que.
Es como que va a trozos.
Entonces.
Es mejor.
Que sacas.
Sabes que ya está.
Pues saca todo el.
No lo dibujes ahí.
Poco a poco.
Pues todo el trasto.
Y yo haría que siempre el ancho fuese el mismo.
Porque así.
Pues podría navegar.
Aunque yo.
Si me preguntas.
Pondría aquí arriba.
Un menú.
Para navegar.
Y ya está.
Y si quieres que sea un slide.
Al menos eso.
Que sea un slide.
En el que.
La animación.
Bueno.
Aquí veo que.
Hostia.
Aquí.
Bueno.
Pasa lo mismo.
Pero más.
De otra forma.
¿No?
Bueno.
Menos mal que te descrola.
Al menos.
Además no es nativo.
Que molaría.
Pues ya que estás.
Por hacer el slide.
Bueno.
Bueno.
Hay que darle.
Hay que darle cañita a Javi.
Hay que darle cañita.
Porque queda como que.
Faltaría.
Falta.
Falta Javi.
Hacer cositas.
Ya te digo yo.
Que aquí.
Le haría.
Que salgas tú.
Un poquito más de vida.
Un poquito más de vida.
Vamos a darle check.
Es un buen inicio Javi.
Pero hay que darle más.
Hay que darle más.
Más movimiento.
Más movimiento.
Más movimiento.
Esto no significa más animaciones.
Sino que hay que.
Ojo.
Bueno.
A ver.
¿Qué pasa con esto?
William.
Yo os digo una cosa.
¿Vale?
Si vais a hacer un porfolio.
En el que al final.
Este basado.
En.
En un ejercicio.
De alguien.
¿Sabes?
O un porfolio.
Que hace a alguien.
O lo que sea.
Pues es que no vale la pena.
O sea.
Para eso no hagáis un porfolio.
Porque entonces.
Vuestro porfolio.
Es genérico.
Es que este porfolio.
Lo he visto ocho veces.
Este.
Este porfolio.
Al final.
Es un porfolio.
De un ejercicio.
Que se hace.
En un sitio.
Y claro.
Entonces.
¿Qué es lo que te diferencia?
¿Qué es lo que tienes?
Entonces.
Como ejercicio.
Para aprender.
Está súper bien.
Pero para utilizarlo.
Como porfolio.
Yo os diría.
Que.
Que.
Os replanteéis mucho.
Porque esto.
Al final.
Lo que significa.
Es que no.
No demostráis nada.
No tenéis personalidad.
¿Sabes?
Es como.
Mi carta de presentación.
Es la misma.
Carta de presentación.
Que tienen.
500 personas.
Entonces.
La gente se va a quedar un poco.
Bueno.
¿Qué cambia?
Vale.
Pues.
Tu foto y tal.
Pero entonces.
¿Qué te diferencia?
A empezar a utilizar.
Plantillas.
Por ahí.
Ese es el tema.
Que.
Que puede estar bien.
¿Vale?
Pero que hay que darle un poco de.
Que igual el código está muy bien.
Ahora le echamos un vistazo.
Pero bueno.
Lo digo porque no utilicéis este tipo de porfolio.
Para que sea vuestro.
Porque al final no es vuestro.
No.
No representa.
Hola a todos.
Hola.
Soy William.
¿Qué tal William?
Muy bien lo de la foto.
Me gusta además.
El estilillo ahí de fondo.
Un frontend developer.
Que le encanta implementar diseños que inspiran.
Y atraen a las personas.
Muy bien.
Además tiene su GitHub.
Y tiene su LinkedIn.
Perfecto.
Vamos a ver su LinkedIn.
Pues muy bien.
Muy bien.
Y abierto a trabajar.
Así que ya sabéis.
Le podéis buscar trabajillo.
A lo largo de mi carrera como frontend.
He tenido el privilegio de trabajar en proyectos retadores.
E increíbles.
Muy bien.
Aquí hay algunos que me gustaría compartir.
Pues no hace falta de poner la flechita.
Ya lo voy a ver.
Hightech.
Landing page para una empresa dedicada a ofrecer soluciones tecnológicas.
Vamos a ver.
Proyectillo.
Esto no es un enlace.
Esto pinta mal.
Vale.
No hagáis esto.
Como hagáis esto.
Os voy a buscar a casa.
Os voy a buscar a casa.
Y os voy a arrancar la cabeza.
Vamos a ver.
Vamos a ver.
Vamos a ver.
Vamos a ver.
Que esto es importantísimo.
Importantísimo.
William.
Vamos a ver.
Los botones para interacciones del usuario que no sean a priori que va a una URL.
¿Vale?
Si vas a una URL tiene que ser un anchor.
No hay otra.
Un anchor.
Anchor.
Anchor.
Anchor.
Y anchor.
Para eso sirve.
¿Vale?
El HTML tiene el elemento A de anchor para llevar a los usuarios a otras páginas.
Entonces si te quiere llevar a otra página.
Pues le pones el anchor.
Pero no utilices un botón para llevar a alguien a una página.
¿Por qué?
Mira.
Te voy a decir por qué.
Yo estoy aquí.
Y aquí en ver proyecto.
¿Vale?
Yo le estoy clicando con el botón central.
Con el clic central.
¿Vale?
¿Por qué?
Porque lo quiero abrir en otra pestaña.
Lo quiero abrir en otra pestaña.
Digo.
Vale.
Me gusta este porfolio.
No quiero salir.
Pues lo quiero abrir en otra pestaña.
Y no me deja.
Pero el botón.
Míralo.
Míralo.
Que me chulea.
Me dice.
Sí, sí, sí.
No.
Clica.
Clica.
Sí, sí.
Dale, dale.
Dale.
Se pone a temblar como si tuviese epilepsia.
Pero no me abre otra pestaña.
Y me cabrea.
Me pone nervioso.
Porque digo.
¿Pero por qué no?
O sea.
Si está reaccionando.
Y no me abre otra pestaña.
Y claro.
Entonces yo.
Pues que.
Como algo de frontend.
Pues sé.
Digo.
Ah.
Pues voy a ver.
¿Qué es lo que tiene aquí?
Y claro.
Cuando veo aquí un botón.
Pues lo que hace es que me sube una cosa.
Que porque no tuvo un arma homicida aquí.
Porque.
¿Para matar?
O sea.
Un anchor.
¿Vale?
Un anchor.
Esto te lo digo justamente solo para que.
Para que lo tengas clarísimo.
¿Vale?
El ver código.
Igual.
No sé este ver código.
¿Qué es lo que hace?
Pero es que se me lleva a una página.
Es que.
Mira.
Lo podría llegar a perdonar.
Bueno.
Llegar a perdonar no.
Si te abre una modal.
Tendría todo el sentido del mundo.
¿Vale?
Que igualmente.
Estaría bien.
Mira.
Encima.
Encima se te abra en la misma página.
O sea.
Fíjate.
Estás perdiendo a la gente.
O sea.
Pones un anchor.
Y le pones un target blank.
Para no quitar tu página de ahí.
Que la gente no se vaya.
Así que eso hay que arreglarlo.
¿Vale?
Súper.
Súper.
Súper.
Súper.
Súper.
Súper importante.
De verdad.
Es que no sé cómo explicaros lo importante que es esto.
Porque esto es básico.
O sea.
Es básico.
Para saber.
Para decir.
Hostia.
Sé maquetar.
Y esto hay que saber hacerlo.
Y es básico de HTML.
Si estás interesado en trabajar conmigo en su.
A ver.
Ah.
Si estás interesado en trabajar conmigo en su próximo proyecto.
No duden en poderse en contacto conmigo.
Muy bien.
Vale.
Vale.
Vale.
Bueno.
Proyectos.
Hablemos.
William.
Hecho por William.
Bueno.
William.
Yo.
De verdad.
Con todo mi cariño.
Te dejo ese.
Ese tema.
¿No?
De que le des una vuelta.
Que lo hagas tuyo el porfolio.
Que lo cambies un poco.
Que le des una.
No sé.
Un toque.
Para que no se parezca tanto.
El descargar el currículum.
Mira.
Esto sí que.
Muy bien.
Está bien el currículum.
Pues mira.
El currículum tiene ahí su cosa.
Me gusta.
Me gusta el currículum.
Está bien.
Me gusta.
Yo esta foto.
No sé si le sigue.
Aquí sí que la pondría redonda.
Esto de poner formas raras en el currículum.
Los currículums.
Hay que pensar que son como más.
No formales.
Pero sí más rectos.
¿No?
O sea.
No hace falta poner borde.
Radius.
Sombras.
Cosas así.
Y este tipo de forma.
Yo te recomendaría que hicieses una redonda.
¿Sabes?
Algo más.
Más lineal.
En ese caso.
¿Vale?
Vamos a verlo en móvil.
Parece que lo interesante es un poco lo que tiene.
¿Vale?
Aquí el hola a todos.
Soy William.
Aquí como que la balanza de fuentes es un poco rara.
¿Eh?
Pero bueno.
Ahí está.
Proyecto.
Hablemos.
Pero muy bien.
Nombre completo.
Correo electrónico.
¿Qué mensaje?
También te digo que aquí el placeholder es gratis.
¿Eh?
Aquí el placeholder es gratis.
Yo aquí le metería un placeholder.
Porque, hombre.
Nunca.
Nunca está de más.
Al menos poner un placeholder.
Que hace que no quede tan vacío.
¿No?
Y que pones aquí.
Tu nombre.
Yo que sé.
Algo así.
Tu nombre.
Y que le da.
Uy.
¿Qué pasa?
Ahora.
Pues eso.
¿No?
Que le da un poco que.
Ah.
Bueno.
De alguna forma esto se está llenando.
Hay una cosa rara.
Esta.
Esta barra de aquí.
A mí me parece que aquí hay algo que no está bien del todo.
Este contenedor.
No sé.
Hay algo raro.
¿Veis que el fondo aquí?
El fondo no llega.
Sí.
No sé si es un tema ya.
¿El HTML?
No sé.
O sea.
Es que.
Es que de verdad.
O sea.
Es como que le falta una.
¿Sabes?
Hay una rayita.
¿Eh?
Hay un MaxQuiz por ahí.
No sé.
No sé.
Algo hay por ahí que no termina de estar bien.
Está rayada aquí.
Así que.
Ahí hay que echarle un vistazo.
Para ver qué es lo que pasa.
Porque se ve como roto el diseño.
Pero bueno.
Vamos a ver un momento el código.
Que parece lo interesante que decía William.
Es que lo había hecho Next.
Graph.
CMS.
Y GraphQL.
Así que vamos a darle.
Chávez.
Muchas gracias por suscribirte con Prime.
Amigo.
Y gracias por la gente que me paga los.
La hidratación.
Vamos a ver el código un poco.
Bueno.
Me gusta que.
Bueno.
Es una mezcla.
Pero hay como parecía.
Parecía que había cómics semánticos.
Vale.
Mira aquí como habías hecho.
Aquí sí que habías utilizado un anchor.
Para llevarlo a otras páginas.
Pero la tuya no.
Importante.
En estos anchos.
Target.
Blank.
Vale.
Porque claro.
Si le das aquí.
Y se quita tu portfolio.
Pues no.
Cuando son páginas externas.
Que se abran en otra.
En otra pestaña.
Vale.
A ver.
Componentes.
El contact form.
Use state.
Hostia.
Que raro.
Initial state.
Ah.
Esto debe ser para.
Cuando lo envía.
Para volver a ponerlo.
Esto habría que.
Bueno.
A ver.
Ya que estás.
Y estás utilizando GraphQL.
Yo te recomiendo que esto lo saques de aquí.
La mutación.
Que no la pongas dentro del contact form.
Además.
Este método.
Se va a estar recreando.
Cada vez que se renderiza el componente.
Así que.
Las mutaciones.
Pues.
Esto.
La mutación.
La deja fuera.
Luego te creas un servicio.
Para el fetch.
Eso puede estar.
Puede estar bien.
Vale.
Los comentarios.
Ya que utiliza git.
Eso lo podéis eliminar.
Muy bien.
Con el handle submit.
Importante.
Vale.
Venga.
Vamos a ver.
Que más.
El footer.
Vale.
Footer.
Hecho.
Bueno.
La navbar.
Vamos a ver.
¿Ves?
Este link.
Next link.
Vale.
Project.
Project va con J.
Si se pone en inglés.
Vale.
Link.
¿Y dónde están los links estos que?
Link.
Ah.
Es que tiene aquí un botón.
Claro.
Es que pone link href y luego renderiza un botón.
No.
No se puede hacer esto.
O sea.
No puedes intentar tener un link y luego renderizar un botón.
No tiene sentido.
Hay que renderizar aquí un anchor.
De hecho.
Seguramente con eso ya tendría suficiente y te lo arreglaría.
Así que con eso ya lo tendrías.
A ver.
Yo quería ver un poco lo de.
Claro.
Es que lo de GraphQL al final es muy poco.
Muy poca cosa.
¿No?
¿Ves?
Esto si lo separas por un lado la query, por otro lado por la llamada, pues te queda mucho
mejor de entender.
A ver.
Hmm.
A wait.
Claro.
Esto es súper optimista.
Esto es que va a ir todo bien.
Porque como este apete, esto revienta, pero cosa mala.
A ver.
No pasa nada.
Está bien que sea optimista.
Pero bueno.
Que podría gestionar un poquito mejor el error.
Project ID.
Aquí podría utilizar la imagen de NextDS para optimizar las imágenes.
Vale.
Esto ya no se utiliza.
Yo no sé esto.
Este XUA Compatible.
Bueno, lo podemos mirar.
No sé.
Pero yo creo que.
Mira.
¿Para qué sirve?
Ya no me acuerdo ni para qué servía.
A ver.
¿Para qué servía?
Pero esto ya no se utiliza.
La vista de compatibilidad es una característica que fue incorporada a Internet Explorer 8.
Que permita al navegador mostrar páginas web que no cumplen con los estándares como
si corrieran versiones anteriores de Internet Explorer.
Nada.
Ya os digo que esto no se utiliza.
O sea, esto ya lo podéis quitar porque no es necesario.
Esto es cuando se tenía que dar soporte a Internet Explorer 8 y tal.
Que lo que hacías es que Edge funcionase de una forma.
Pero es que Edge ahora utiliza Chrome.
Esto ya no sirve para absolutamente nada.
Ya que lo sepáis.
Esto tampoco.
Esto es opcional porque por defecto el favicon que se carga es el de la raíz.
Esto vale la pena ponerlo en el caso de que el favicon lo pongáis en otro sitio que no sea favicon.ico.
Por ejemplo, si queréis utilizar un PNG o lo que sea.
Si es un favicon.ico, esta línea la podéis quitar porque justamente es automática.
Y la descripción, pues importante, que no se os olvide.
No dejéis esto que ha sido generado.
Y en el título no solo pongáis vuestro nombre.
Podéis poner algo más.
Así que es importante para el SEO.
De hecho, no sé si a lo mejor está este proyecto.
Bueno, creo porque he visto aquí que no tiene...
Ay, es que es otro.
¿Qué pasa aquí?
Es otro.
Nos ha engañado, William.
William.
William.
Ahora he entrado ahí y es otro.
A ver, William.
William.
Huchim.
Ni siquiera sale la página.
Claro, es que es difícil porque es versell.app.
Cuando no tiene un dominio, entonces tenías que enviarlo, enlazarla un poco en Twitter, compartirla y cosas así.
Vale, William.
Espero que te ayude un poco lo que te hemos comentado, William.
Y ya sabes, hombre, dale un poquito de...
Dale una vuelta.
Dale una vuelta a tu proyecto.
¡Hostia, Fred!
Empiezas bien.
O sea, Fred empieza bien.
Nos pone un enlace que no existe.
Pero no nos vamos a rendir, Fred.
No sé si por un lado...
¿No?
¿Porfolio?
¿Fred?
¿Qué ha pasado con tu porfolio?
No sé qué ha pasado, Fred.
No sé qué ha pasado.
Pero lo he intentado, ¿eh, Fred?
Lo he intentado.
Vamos a ponerle una cara...
Una...
Nos ha dejado con el hype ahí.
¿El proyecto es privado?
Pues puede ser Fred.
De vez en cuando Fred está.
O sea, que igual no sé si...
No sé si la...
Si está o...
A veces está.
PackageGenerator.
Yabo.def.
Mira, otra vez, Yabo.
Seguro que lo ha borrado porque utilizaba botones en lugar de Anchor.
¿Te imaginas?
PackageGenerator.
Vale.
Vale.
Bueno, me gusta.
Me gusta un poco la idea.
Mira, esto es un Monaco Editor.
Muy bien, ¿eh?
Esto es el Visual Studio Code.
Pero esto lo tendría que haber puesto a mejor solo lectura, ¿no?
No sé si esto tiene mucho sentido aquí dejarlo.
O sea, está bien para verlo, pero que sea un editor es un poco raro, ¿no?
Porque si total lo vamos a hacer a partir de esto.
A ver.
Oye, pero está bien porque se sincroniza.
Eso está bastante interesante.
Vamos a poner la versión 2.0.0.
Descripción.
Esta es la descripción.
Esta es la descripción de la vida.
Hay una cosa que no me gusta.
Esto es un error también muy típico, ¿vale?
A ver.
A ver.
Vamos a ver.
Aquí, en el project este, veis que cuando...
Vamos a poner esto así.
Cuando...
Voy a hacer un poco más...
No, quería hacer más grande la página.
Vale.
Cuando yo le doy, veis que hace todo como...
Se va todo hacia abajo.
Es un poco raro.
Estos saltos hay que evitarlos.
En lugar de cambiar el ancho de la línea, pues cambiarle el color.
Creo que aquí le hubiera quedado un color, pues más esto.
Un color, no sé, más apagado.
Algo así.
Un poquito más apagado.
Y que cuando le dé, en el caso de que le dé...
A ver si ahora soy capaz de encontrar.
Ay, ¿por qué no sale aquí el...
Tata, tata, hover, active, focus, focus.
Vale.
Pues cuando le dé, entonces sí, le pones este.
Y solo con este cambio...
Bueno, ahora porque tengo el estilo obligado, ¿vale?
Pero mira, ¿ves?
Solo con este cambio, pues ya es otro rollo, ¿no?
Luego también, otro tema es que...
Está como mal alineado, ¿no?
Lo de la izquierda.
¿Qué pasa?
Que está a la derecha...
No sé.
Aquí una cosa que, a ver, no es...
Lo mejor sería utilizar el...
Bueno, es que de hecho tiene un display flex.
Tiene un display flex.
O sea, un display...
Sí, un flex.
Pero esta parte de aquí, que tiene min width 20%.
Mira, casi que me gusta más así que no de la otra forma, ¿eh?
Porque al menos están todos...
Al menos hay algo alineado.
Ah, es porque el project name es demasiado grande, ¿no?
O sea, el project name es un poquito más grande y eso es lo que hace que se desalinea el de arriba y ya quedan todos un poco raros.
Bueno, esto habría que alinearlo mejor, ¿vale?
Para que quede alineado.
Depth dependencies.
A ver si pongo React.
Ah, mira.
La puedes añadir.
O sea, lo que los...
Las fuentes que elegís a veces son muy raras.
Son muy raras.
Y esto de aquí es que es una pena, ¿eh?
Porque es un proyecto que me parece muy bonito.
Pero a veces queremos hacer unas cosas tan raras, tan raras, es que este color es imposible que te quede bien.
O sea, a no ser que seas Salvador Dalí, es que no te va a quedar esto bien nunca.
Es imposible.
Es que hay más colores aquí que en la paleta de Windows.
Es que es brutal.
Entonces, como es imposible que esto te quede bien, porque la página es que tiene buena idea.
Pues quítalo.
Si es que, mira, esto lo quitas.
La fuente esta le pones una fuente normal, porque es que esta fuente, esta fuente así cursiva y tal, pues no.
Le pones una fuente que es más normal.
Si es que la del sistema es mejor.
Más normal.
Le quitas ese, no sé, el padding pues lo alineas o le pones un poquito más...
Lo pones incluso más grande.
De ahí que quede y que digas, madre mía, la gente, hostia, este es el package.json generator de la vida.
Es que algo así ya está...
Bueno, no sé por qué.
Claro, lo que estaría genial es que el package.json generator este estuviese alineado con esto.
Luego también, claro, el problema también está en estas sombras tan bestias que a veces le ponéis,
que no sé dónde está la manía esta de estas sombras que parece que las regalan en algún sitio o algo.
No sé, una... A ver.
A ver, ahora yo también, si soy capaz de hacer una sombra.
Esto es que está mal.
Es que tiene un CSS que está mal.
Pero ves, un poquito más easygoing, ¿no?
Un poquito, así, un detallito.
Los detallitos, ahí, pim, pim, pim, ¿no?
Tim, tim.
Y ya está.
Yo el package.json y este generator, bueno, lo alinearía o incluso lo pondría...
Igual hasta me eliminaría el título, ¿eh?
Pero bueno, ya pues va pillando un poco de esencia, ¿no?
¿Qué más? ¿Qué más?
¿Ves aquí esto?
Es que esta fuente, ¿por qué?
¿Por qué esta fuente?
Si es que es gratis.
No entiendo esta fuente...
Porque me da la sensación que encima está hecha posta esa fuente.
Me da la sensación.
Bueno, si no, en el body, pues le ponéis ahí un phone family.
Le ponéis el system UI.
Y al menos ahí ya tenéis la fuente.
Luego la X esta, pues...
De esta X...
No utilicéis esta X.
Esta X no es lo que pensáis.
Esa es una X.
Si queréis utilizar una X...
Multiply...
Symbol HTML...
La de multiplicar al menos podría quedar un poquito mejor.
Un poquito.
¿Vale?
Pero...
¿Ves que al menos queda un poco más...?
Luego lo que ha pasado aquí...
¿Ves que no está alineado?
Esto hay que ponerlo.
Ah, mira, la de times también.
Times...
Bueno, no, pero si lo pongo así...
No, no va a salir.
Pero la de times es la que teníamos, ¿no?
O se parece mucho.
Bueno...
Pues ahí la tienes.
Y hombre...
Pues ya empieza a quedar un poco mejor.
Luego...
El tema aquí...
Es que hay algo raro con los bordes.
¿Ves?
Que no queda del todo alineado.
Aquí hay una cosa que es un poco raro.
Un poco raro.
Nos podríamos poner a mirar ahí en el código a ver qué ha bachado.
Pero bueno.
Pero bueno.
¿Ves?
Ya empieza con una tontería, ¿eh?
O sea, te pones aquí cinco minutos pico pala y ya está.
Otra cosa que yo haría...
Al menos a mí que me gustaría...
Yo evitaría este padding que hay aquí.
Aquí hay un padding.
Claro, lo malo es que rompemos esto porque no está muy bien gestionado el tema este.
¿Esto qué es?
Esto es un grid...
Max width 80%.
Min height 80% del viewport height.
Y esto es un display grid.
Claro que pone 1.15 fr 0.85.
No, pero esto...
Esto no tiene que ver.
Es que aquí, claro, tiene min width, tiene historias que hacen que...
Min height...
Es que...
¿Ves?
Hay un problema, ¿vale?
Cuando se trabaja con los tantos porcientos de estos, esto te rompe la vida.
Tú aquí lo que tendrías que hacer en todo caso sería trabajar con el grid o con el flex
y entonces justificar, ¿sabes?
En lugar de poner cuánto ocupa y tal, pues decir, vale, pues si tienes este...
Lo que pasa es que, claro, esto es un rollo porque aquí tendríamos que editar este HTML
para que estuviese envuelto en un div y aquí tú lo que pones es...
Pues esto hace que el contenido, uno se queda arriba y otro abajo porque esté separado
y hagas un space...
Ahora aún no.
Space, joder, no me sale.
Justify content space between.
Exacto.
Between, ¿vale?
Y así el espacio lo dejas en medio, entonces uno quedará arriba y otro quedará abajo y ya está.
En lugar de poner un min height, que entonces lo que hace esto es que te rompe.
Es como lo que está pasando aquí.
Que aquí lo que está pasando es que se rompe porque tienes por ahí un montón de historias
de decir, ah, pues esto tiene que ser con este min height y esto no sé qué.
Claro, esto al final lo que empiezas a hacer es que no quepa y pasen estas cosas, ¿vale?
Así que lo que habría que hacer es adaptarlo bastante mejor para evitar estos saltos y estas cosas.
Al final esto se puede lograr con flex, súper bien, súper bien.
Entonces yo lo que haría es, este editor lo pegaría, esto con todo el espacio que te queda,
los botones también los simplificaría bastante y aunque pueda quedar un poco sobrio,
pero yo creo que le puede dar un toquecillo.
A ver, aunque no lo hemos terminado, pues no sé, un poquito mejor.
Es que yo creo que lo de arriba es lo que es un poco loco, muy loco.
Pero me gusta mucho la idea, ¿eh? Me gusta la idea.
Es una pena que no está el código fuente, Javituni, pero me gusta la idea.
Así que, check, check. Muy bien.
Mili Galeano. Hola, comparto este proyecto que es una libreta de vacunas.
Ojo, libreta de vacunas, Mili. Vamos a ver esa libreta de vacunas.
Vacun R. Complete email y contraseña para ingresar o crear una nueva cuenta, ¿vale?
Email, contraseña. ¿Vale? Hay que poner playholders.
Los playholders son gratis y te pueden ayudar.
Vamos a utilizar el 5-minute mail. Correo de 10 minutos. Bueno, de 10 minutos.
Venga, vamos a utilizar este, el email este, la contraseña. Vamos a poner vacunar.
Hostia, registrarse, ingresar. Bueno, registrarse. ¿Vale? Guardar la contraseña.
Bueno, eso me ha gustado. Me ha gustado ese loading. ¿Vale? Mis vacunas.
Aquí a lo mejor lo que te faltaría ya es un tour que te diga,
mira, aquí puedes encontrar esto, aquí lo otro, aquí no sé cuánto.
¿Cómo se llama? Tour, JavaScript. Hay un montón de librerías.
De hecho, Product Tour Libraries. Hay un montón de librerías.
Y si son con React, ¿ves? Algo así.
Es decir, mira, aquí puedes encontrar no sé qué.
Suele ser bastante fácil y en cambio son súper efectivos porque te quedan brutales.
Mira este, ¿ves? Quedan súper bien.
Para un producto, especialmente que es algo un poco especial,
esto queda muy, muy bonito.
Primeras horas. Hostia, hepatitis.
Vale, estos son como una agenda de vacunas de tu vida, ¿sabes?
En las primeras horas de vida te tienen que poner la BCG y la hepatitis BHB.
Hostia, qué miedo de vacunas.
A ver, vamos a verlo en modo...
Uy, hostia, que no tiene lo de las rutas.
Y lo he refrescado.
Bueno, modo móvil, muy chula.
Los colores creo que se pueden mejorar un poco, ¿eh?
Este, por ejemplo...
Claro, es que este color es muy peligroso.
Este color es muy peligroso.
¿Por qué?
Porque este color, este de mis vacunas, es una transparencia.
Los colores que son transparencia hay que tener mucho cuidado
o tiene que ser muy poco transparente.
Porque si no, se hacen difíciles de leer.
De hecho, ahora sí que se lee mejor, pero como estaba antes, esto...
Yo tengo una edad y me empieza a costar un poco.
De hecho, si le das aquí, ves que aquí te dice contrarratio
y te dice prohibido.
Forbidden.
Pues nada, lo de siempre.
Aquí puedes empezar a moverte hasta que llegue un momento que te diga,
vale, pues ahora el contrarratio sí que está bien
y por lo tanto ahora sí que es accesible.
De hecho, ahora se lee bastante mejor.
Primeras horas.
Yo aquí he hecho en falta un desplegable, ¿no?
Una flechita o algo, ¿no?
Porque le he dado por dar.
Porque digo, a ver qué pasa.
A ver qué pasa.
Pero creo que le vendría bien una flechita.
Una flechita ahí.
Esto, este tipo de botón, que está muy bien pensado,
pero este tipo de botón, esto...
Hostia, además es súper raro, que es un anchor.
Bueno, es un anchor porque te lleva a un sitio.
Pero lo raro es que me pongo encima y me lleva a la conchinchina.
Súper raro.
A ver, display, block, background, fff, border, radius, 4 píxeles.
A ver si pongo esto red.
Súper raro.
O sea, ¿dónde está este...?
¿Qué le está pasando?
¿Por qué este...?
¡Ah!
Es que ha puesto los estilos...
Los ha puesto donde no es.
Ha puesto en el SVG, ha puesto los estilos que deberían ir en el anchor.
¿Qué está pasando?
Que el SVG lo ha colocado aquí.
Pero el anchor, el anchor está colocado aquí arriba.
Entonces, estos estilos que tiene aquí, estos estilos en realidad,
estos estilos, deberían tenerlo, en todo caso, este de aquí.
¿Ves?
Entonces, ahora sí, yo aquí lo que haría es, pues, a ver, puedes poner que sea...
Bueno, vamos a ponerlo negro, pero podría ser cualquier color.
Algo así, el borde radio lo ponéis a 5.000.
Vale, que quede redondo.
Right, etc, etc, etc.
Esto habría que ver exactamente cuál se supone que debería ser esto.
Igual lo pondría todavía más oscuro.
Que se vea que es un botón, vaya.
Esto lo podemos poner así.
Bueno, no sé de qué color está poniendo el botón.
Bueno, es muy grande, ¿eh?
Pero para que se pille un poco la idea.
Esto habría que centrarlo mejor y verlo en el SVG y tal.
Pero, hombre, al menos que se vea que es un botón, no sé,
con otro estilo, que tenga un borde, que tenga algo.
Pero no dejéis el icono solo ahí flotando, porque queda muy raro.
Especialmente, bueno, lo vamos a ver como estaba antes,
para que veamos cómo queda ahí flotando el botón.
Y queda muy raro, porque sobre todo, ¿ves?
A mí, así, la sensación que me da, que encima se queda la rayita aquí,
me da la sensación como que es algo que se ha quedado...
Bueno, mira, igual le podemos dar la vuelta a los colores, ¿sabes?
Igual así, y esto, pues sí, lo dejamos con blanco.
Y le puedes poner, entonces, un borde.
Del mismo color que tenga esto.
Algo así, yo que sé.
Lo tiramos un poquito...
Bueno, esto, en lugar de empezar del top 82,
yo esto normalmente se empieza desde abajo.
Tiene bastante más sentido, porque desde abajo
es más fácil que sepas cuánto es lo que ocupa
la parte de abajo.
Es mucho más fácil en píxeles, o incluso en tanto por ciento y tal.
Normalmente en píxeles, pero es mucho más fácil.
Que no desde arriba es un poco...
Al menos a mí me parece un poco más fácil.
Y aquí, tanto por ciento también muy peligroso,
porque el tanto por ciento, conforme va cambiando,
entonces el botón se irá moviendo y tal.
Yo intentaría ajustarlo y dejarlo un poco por ahí.
Y así.
Ahora sí, al menos, parece un poco más un botón.
Que creo que te puede ayudar.
Te puede ayudar.
Vale.
Entonces, bueno, sí, he puesto aquí esto,
pero esto, si lo ponemos así, ya está.
Borde radio 100% y ya quedaría bien.
He puesto 5.000 píxeles porque sabía que así iba a ocurrir y ya está.
Pero si no, lo dejáis así y ya lo tenéis.
Y, hombre, faltaría todavía que cuando se dé un clic,
que quede bien y todo esto, y ya lo tendríais.
Vale.
Me gusta el diseño este de que salga.
Como digo, me faltaría aquí que saliese como el desplegable.
¿Ves?
Como lo que hay aquí.
Un poquito más grande, porque este es muy chiquitito.
Aquí me da la sensación que hay cosas aquí que sobran.
Esta división no tiene sentido.
Esto yo lo quitaría.
Y esta división también.
Hay divisiones aquí que se están mostrando.
Ahora mejor, ¿no?
Hay divisiones ahí que no tienen mucho sentido.
¿Vale?
Embarazo.
Para cuando esté embarazado.
¿Vale?
Calendario.
Crear usuario.
No, esto es un poco raro.
Yo esto lo hubiera puesto porque darle al usuario, crear usuario,
y te sale aquí el lapicillo y hay que darle.
Hombre, pues si yo ya tengo claro que quiero crear el usuario, pues que ya me aparezca para crear.
O sea, que ya me aparezca esto.
¿Vale?
No sé, no sé el estilo.
O sea, me recuerda algún tipo de...
Ah, mira que bueno.
Hostia.
Aquí esto hay que limpiarlo, ¿eh?
De HTML.
¿Vale?
Y esto parece algún mapa.
Venga, sí.
Que conozca mi ubicación.
A ver qué tal.
Mira, un mapa ya.
Muy bien.
A ver, vamos a ver el GitHub.
Que quiero mirar una cosa.
Pero muy bien, Mili.
A mí me ha gustado.
Mira, es con Firebase.
Tú puedes descargarlo como PDF.
Puedes añadir al Google Calendar.
Bueno, es súper potente.
O sea, que se ve la UI.
Se ve así sencillita, pero tiene un montón de cosas.
¿Vale?
Las rutas.
Aquí tiene rutas.
Hombre, las rutas, ya que estás, esto...
Esto lo que podrías hacer es cargarlas en...
Con un import dinámico.
Justamente hoy he hecho un vídeo sobre esto.
Bueno, no he hecho un vídeo, sino que...
Mira, aquí está.
Aquí lo tengo.
Aquí.
Este vídeo.
A ver si sale.
Este.
He hecho este vídeo.
Pongamos este.
¿Ves?
Y lo que haces es un lazy.
¿Cuál es el componente que tiene que importar?
Le dices el componente que tiene que importar.
Ahora deberíamos poner lazy.
Y ya está.
Y en las rutas lo utilizas este componente.
A ver si soy capaz de enseñarlo.
Ahí.
¿Ves?
Esa es la ruta.
Lazy note.
Y ya está.
Con eso haces un import dinámico y te evitas cargar todas las rutas que a lo mejor necesitas.
Porque este del mapa se ve potente.
De hecho, vamos a mirar cuánto ocupa esto.
Porque tiene pinta...
Hostia.
Otra vez.
Esto hay que mirarlo también.
Sí, sí.
No.
Mira.
Fíjate, ¿eh?
Fíjate cuánto está cargando.
Solo de JavaScript hay 3 megas de JavaScript.
Y fíjate que está cargando el mapa cuando no es necesario cargar el mapa.
Si no estoy viendo el mapa.
Si igual nunca llego al mapa.
¿Sabes?
Igual nunca llegamos al mapa.
Así que...
Ya lo sabéis.
Esto hay que mirárselo, ¿eh?
Para que no...
Es que ocupa un montón el mapa.
Un montón.
Luego 400k de aquí...
467.
Ah, bueno.
Esto es de las DevTools.
Que esto no hay que contarlo, ¿eh?
Pero bueno.
Que los 2 megas...
Esto se los lleva un mega transferido y 3 megas una vez que está descomplido.
Si no llega al mapa, pues esto se evita súper fácil, ¿vale?
Así que os miráis el vídeo cuando suba a mi canal secundario.
Porque es que es tan fácil, tan fácil que vale mucha la pena hacerlo.
¿Qué más?
Contextos.
¿Vale?
Contexto del usuario.
Muy bien.
Contexto.
Use context out.
¿Vale?
Esto es con lo de Firebase.
Un linter.
A ver, amigos y amigas.
Los linters os hacen escribir mejor.
Y además dices, hostia, pero ¿cómo me hace escribir mejor?
Y no tengo que hacer nada.
Porque es que, a ver, mira.
Estas cosas os las arregla un linter.
Estas cosas.
Estos saltos así.
Esto también se puede mejorar, ¿eh?
De hecho.
De hecho.
De hecho.
De hecho.
Vamos a ver.
Vamos a ver.
Mili.
Te voy a explicar una cosa, ¿vale?
Con este código de aquí.
Y voy a explicar unas cuantas cosas aquí con el usef que esté.
Mira.
Vamos por partes.
Esto.
Esto que se ve ahí.
Que parece que hace como un kamehameha.
¿Sabes?
Aquí hay un huecarro que dices, ¿qué está pasando aquí?
Esto, bueno.
Porque es un usef y tal.
¿Vale?
Con out state change.
Esto ya recibe una función.
Lo que ya nos dice esto, si recibe una función, es que esto ya podría simplificarlo haciendo esto.
Handle out state change.
Para empezar.
¿Vale?
O sea, ya lo que podrías hacer es pasarle directamente una función que se ejecute.
Y esto ya quedaría así de fácil.
Por lo tanto, lo que podríamos hacer es crear la función ya afuera.
Esto lo que nos permite es evitar el anidamiento, ¿no?
Porque aquí ya estamos empezando a anidar.
Si anidamos estos dos y luego los de dentro, ya estaríamos anidando hasta seis.
Mira, fíjate.
Cuando empieza esto, sería dos, dos y el siguiente ya sería seis.
¿Vale?
Pues eso nos lo evitamos ya con lo que he hecho.
Este, ¿vale?
Entonces creamos el handle state.
A ver, lo podríamos crear fuera, lo podemos crear en un montón de sitios.
Pero bueno, vamos a ponerlo aquí.
Podría ser con un use callback, lo que sea.
Pero al menos lo tenemos por aquí.
Y aquí, pues un poquito mejor.
Ahora.
Bueno, me va a fallar esto porque no tenemos el use effect y lo que sea.
Ahora aquí, ahí es una cosa súper rara.
Porque dices, si tal, no sé, si tiene use...
Vale, pues más fácil.
Está muy bien pensado la ternaria, Q2 por la ternaria.
Pero hay veces que la ternaria es contraproductiva, especialmente cuando lo que hace es tan largo.
¿Vale?
Cuando lo que hacemos es tan largo, no se utiliza la ternaria.
Se utiliza mejor...
Bueno, hay diferentes formas de decirlo.
Las cláusulas de guardia, las que como le quieras llamar.
Pero aquí le dices, si no tengo user, entonces devuelvo con el set, con esto.
Y queda mucho mejor.
Porque tú ahora, una vez que ya has hecho la cláusula de decir, vale, si no tengo usuario, hago lo más corto.
¿Vale?
Entonces, pues ya lo tienes.
Y a partir de aquí, cuando ya llegas al código de aquí, tú ya puedes hacer todo esto.
¿Vale?
Todo esto ya lo puedes hacer.
Entonces quitas esto.
Y ya, fíjate, que empieza a quedar como mucho más legible, ¿no?
Porque ya les dice, vale, tengo la lista...
Bueno, de hecho, esta lista la puedes crear después si quieres y todo.
Esto lo puedes crear aquí y quedarte bien a gusto.
Y así quedas.
Vale, pues si cuando esto no tengo usuario...
Bueno, de hecho, me sorprende.
Hay una cosa.
Si tengo usuario...
Ah, es que el usuario viene del user context.
Vale.
Si no tengo usuario, pues tal.
Luego, este tipo de métodos, esto hay que hacerlo con camel case, ¿vale?
Si no, parece una clase.
Este getUserData no tiene que ser en mayúsculas.
Cuando le importaste, hacerlo en camel case.
Vale, getUserData, user.email.
Bueno, aquí tienes diferentes opciones.
Una, hacer que esto sea asíncrono.
Y entonces haces aquí una wait, porque total, tampoco estás haciendo un catch de nada.
Aquí, recuperar los usuarios, vamos a dejarle el nombre.
Y esto lo que te permite es volver a ganar un nivel más de anidamiento, ¿vale?
Y fíjate de cómo habíamos empezado antes, que estaba súper anidado,
a cómo ahora estamos haciendo poco a poco, que se le da mucho mejor.
Y luego aquí, este letUser, no sé qué, no sé cuánto.
Esto, esto, esto es súper importante, Emili.
Súper, súper, súper, súper importante.
Esto no es un forEach.
Esto está mal.
Esto no puede ser un forEach.
Cuando tú ves esta construcción, donde tienes el list of users,
con un array vacío, y haces un forEach para meter el mismo número de elementos
a un array vacío, a esto se le llama map.
Y por lo tanto, hay que utilizar un map.
Este usuario es .forEach, ponemos un map.
Aquí lo que tendríamos, además es que vas a ver que es mucho más fácil,
porque ahora te quitas este list of users,
y lo ponemos aquí, list of users, ¿vale?
Lo que te devuelve el map es la transformación de cada uno de los elementos de la array.
En list of users, lo que tienes que devolver es lo que quieres que se guarde en ese mismo array.
Así que en lugar de crear aquí el let user, vamos a hacer un return de esto directamente,
y ya lo tendríamos.
Y hay más cosas todavía, hay más cosas.
¿Por qué?
Porque fíjate que tienes nombre, fecha, URL.
Aquí hay diferentes opciones.
Uno, no sé qué tiene el usuario, pero si el usuario solo tuviese estas tres cosas,
y quieres devolverlas igual, pues yo lo que haría aquí sería esto.
User, coma, y ya lo tendrías, ¿vale?
Pero imagínate que dices, no, no, es que el user tiene nombre, fecha, URL, descripción,
tiene un montón de cosas.
Vale, no pasa nada.
Lo que hacemos, yo lo que haría es sacar nombre, fecha, URL de user,
y aquí lo que pondría es nombre, fecha, URL, ¿vale?
Sacamos solo lo que necesitamos y devolvemos solo lo que necesitamos.
Y ahora, súper importante, este active también prohibidísimo, esto a fuego.
Fíjate, fíjate, es una ternaria, Q2 por la ternaria, pero es más fácil que esto,
porque fíjate la ternaria lo que hace es, si index es igual a cero, devuelvo true,
si no, false.
Pero fíjate que qué es lo que te devuelve este index igual a cero,
pues si te devuelve un boleano.
O sea que esto, pam, ya está.
¿Cuándo es activo?
Cuando index es igual a cero.
Si es que ya lo estabas haciendo, no hace falta que lo vuelvas a hacer.
Ahora, a mí lo que me gusta en estos casos es ponerlo esto aquí, ¿vale?
¿Por qué?
Porque me gustan los cálculos, extracción de datos, cálculos y lo que sea,
y luego lo que te hay que devolver en el map.
Yo esto es como lo haría aquí cada uno que haga lo que quiera,
pero bueno, esto es como yo lo haría.
Y ahora esto, pues ya te ha quedado bastante mejor.
De hecho, fíjate cómo son las cosas, que si quieres rizar el rizo,
esto que has hecho aquí, esto también lo podrías extraer a una función
y podrías hacer el map.
O sea, aquí podrías map, no sé qué, map, users, no sé qué.
Y esto lo podríamos sacar en una función y ya lo tendrías.
Pero bueno, que eso ya sería, a lo mejor, rizar el rizo.
Con esto ya lo podríamos dejar así.
Esto, obviamente, lo podríamos dejar en una sola línea.
Y, hombre, fíjate, de esto, esto sería por un lado.
Vamos a dejar para compararlo un poco, para que veas un poco la diferencia, ¿vale?
Que no pasa nada.
Al final es cuestión de ir aprendiéndolo.
Y poco a poco se van pillando las técnicas para hacerlo.
Vamos a abrir esto, aquí.
Esto, ya va a escribir.
¿Vale?
Pues la izquierda sería la forma que hemos refactorizado un poco, ¿vale?
Y la de la derecha es la que teníamos antes.
Claro, pero es que fíjate.
A ver, además es que aquí, pues como con el linter no lo tienes,
pues esto lo podrías mejorar también, ya per se.
Porque esto tiene más saltos de línea de lo que necesita.
O, bueno, igual es que se lo está copiando.
No, no, tiene más saltos de línea de lo que necesita.
Pero, bueno, es como que puedes entender un poco mejor
por dónde va justamente el código, ¿sabes?
O sea, es decir, ostras, es que ves, esta ternaria queda muy oculta.
Es que no se nota, ¿sabes?
Esto te queda aquí muy lejos.
Aquí, en cambio, dices, vale, cuando...
Es como mucho más verboso.
O sea, alguien me puede decir, no, es que te has pasado, es muy verboso.
Bueno, pero es que verboso significa que la gente no entiende.
Y es mucho más fácil decir, vale, tengo un efecto que cada vez que el out, pues cambia,
ejecuto el handle out state change.
Vale, voy a ver qué hace el handle.
Que lo bueno de esto es que, además, esto no hace falta que sepas lo que hace.
No hace falta.
Porque, al menos, ya sabes que hace un handle out state change.
En cambio, con esto, vale, sí, lo puedes ocultar.
Pero ya es diferente porque no sabes exactamente lo que está haciendo ahí.
A lo mejor aquí lo que está haciendo no es correcto.
Pero sabes que hay un método que se llama handle out state change que hace lo que se supone que debería hacer.
En este caso, ya tienes que tenerlo más desplegado.
Ya es como que te obliga.
Pero es que, una vez que lo tienes desplegado, pues aquí lo puedes leer de arriba a abajo.
Si no tengo usuario, ya está.
Set show child.
Punto.
Ya está.
Igual no necesitas seguir leyendo.
Pero bueno, si necesitas seguir leyendo, pues tengo que recuperar los usuarios.
Cuando tengo los usuarios, voy a mapear los usuarios y cambio el estado.
Ya está.
Aquí, en cambio, claro, es verdad que el for each este te ha penalizado un montón.
Porque hace que tengas que hacer estas cosas un poco raras y el push y todo esto.
Pero de esta forma, mapear te queda...
Refactorizar es una de mis grandes pasiones, la verdad.
Por eso me gusta el testing.
Porque así puedo refactorizar.
Pero bueno, espero que te haya ayudado un poquito.
Me ha gustado el código.
Tiene buenas ideas.
Pero esto te puede...
Yo creo que te puede ayudar a...
Mira, que ya habías utilizado un map.
O sea, que sí que sabías.
¿Ves?
Esto también se podría refactorizar seguro.
Porque se ve...
Update user...
¡No!
¡No!
¡No!
Mira.
Uno más y seguimos, ¿vale?
A ver.
Este...
Este también es muy tricky.
Este es muy tricky.
Porque es que es el mismo código.
Es que es el mismo código.
Fíjate.
Incluso haciéndolo no mal.
O sea, no es que lo estábamos haciendo mal.
Pero imaginemos que decimos...
Mira, escribe esto.
Extraes el código.
¿Sabes?
Imagínate que dices...
Active es...
Vamos a poner que es false.
Y pongamos que...
Que bueno, lo hacemos así.
Lo hacemos con if.
No hace falta...
A veces no hace falta complicarse.
¿Vale?
Lo hacemos así.
Bueno, y así.
Y este...
Bueno, es que este ni siquiera hace falta.
Una vez que lo tienes en active es false.
Es que ya no hace falta.
O sea, es que ya solo tienes que mirar este.
Ni siquiera.
Pero bueno.
Y este lo pasas a active.
Lo pasas a true.
Y ya lo tienes.
Ya esta parte la tendrías.
El update user y tal.
Ya está.
Ya lo tendrías.
Esto ya al final lo que puedes hacer...
A ver, es que tengo que mirar aquí.
Pero siempre estás haciendo el set user data.
Es que...
Set user data.
Bueno.
A lo mejor no se quiere cambiar el...
A lo mejor no se quiere cambiar eso.
Bueno.
Lo podríamos mirar.
Pero si no le puedes poner el undefined.
Y entonces si miras los dos.
Aunque sea solo eso.
Es que aunque solo cambies la parte.
Que tampoco soy muy fan de hacerlo así.
Pero aunque solo cambies esa parte.
Update user.
Ah, es que devuelve update user.
Vale.
O sea, mejor.
El update user es...
Es...
User...
Vale.
Puedes poner user.active.
Active.
Es diferente.
Undefined.
Entonces, active.
Y si no, user.active.
Solo con eso, aunque sea, al menos te quitas todo el código.
O sea, es como extraer la diferencia.
Que yo lo haría de otra forma.
Pero al menos el if que sea solo de la diferencia.
Porque de esta forma no te tienes que liar tanto a volver a repetir exactamente el mismo código.
Y más teniendo en cuenta que esa es la diferencia.
Me falta un poco de contexto, ¿eh?
Pero bueno.
Creo que podría estar bien.
Tu web a refactorizar.
Ya está.
Estaría bien.
Bueno.
No lo descarto, ¿eh?
¿No es mejor bolean active que la comparación con undefined?
Bueno, en este...
No, porque en este caso soy yo el que estoy creando este undefined.
¿Ves?
Yo estoy creando que tenga el valor undefined.
Porque justamente lo que quiero es que se quede el user.active que tenía antes.
Porque si me pongo bolean active, a lo mejor es false.
No quiero mirar si es false o es true.
Lo que quiero ver es si he cambiado el valor de active.
¿Vale?
Yo lo inicializo como undefined.
Y solo si el user.active es true.
Bueno, que esto sí que es un poco raro.
Porque esto sí que podría...
Bueno.
Lo vamos a dejar así para no hacer...
Porque no sé si active siempre es un bolean o lo que sea.
Solo en el caso de que se haya cambiado.
¿Sabes?
Solo en el caso de que se haya cambiado lo quiero machacar con ese nuevo valor.
Y si no, que utilice el antiguo.
Al menos es como parece que está funcionando.
O sea, yo estoy intentando hacer el mismo código que está haciendo Mili.
Para no romperle la página.
Tal y como está funcionando este código, está haciendo eso.
Claro, yo no puedo suponer que está haciendo otra cosa.
O sea, esto es lo que estamos haciendo.
Lo que estamos haciendo es cambiar el active a true o false dependiendo de esto.
Y si no, que utilice el user.active que tenía antes.
Porque es lo que está haciendo el return user este.
Está devolviendo eso.
Así que ese es el tema.
Este else no haría falta.
¿Vale?
Porque una vez que ya tienes este return, pues este else.
Es que fíjate, estas cosas son las que suman.
Porque tú tienes este else y este else ya te obliga a intentar más.
O sea, esto lo quitas y esto te lo llevas un nivel más.
Y hombre, pues quieras o no, pues ya va ganando.
Va ganando un poco.
Pues pones aquí y esto ya, pues igual.
Si tienes usuario y este, pues te lo quitas también.
Y va quedando más a la izquierda.
Lo que hay que intentar es que el código no se indente mucho.
Cuanto más se intenta, pues más difícil.
Porque, claro, cuanto más lo intentas, más tienes que escanear el código.
Los saltos de línea, que hace esto, que hace lo otro.
Es más difícil de procesarlo.
Entonces, por eso, yo creo que una cosa que puede ser interesante aquí es,
pues si no te echa el esto, si tiene usuario esto y todo lo demás sería esto.
Cuanto más a la menos indentado el código, mucho mejor.
Es que son pequeñas cosas, pero son wins que inmediatos, vamos.
¿Ves?
Es que aquí ya este return, comparado con todas estas tres cosas que estaban aquí,
comparado con esto, se entiende mucho mejor.
Mucho, mucho, mucho mejor.
Que, por cierto, este loading tendría que ser así.
Pero bueno, no sé por qué tiene esto también.
Linter.
Hay que ponerse un linter, ¿eh?
Hay que ponerse un linter.
¡Hostia, Jellowin!
¡Qué grande!
Ha regalado una suscripción.
Ahí le ha quedado a Brando Vidal.
Muchas gracias, hombre, por regalar una suscripción.
Dos que llevas en total.
¡Qué grande los que regaláis suscripciones y todo, eh!
Sois unos cracks, pero vamos.
Pero brutal.
Brutal.
Muchas gracias.
Iván, con razón, dice también que podríamos utilizar el Nulish aquí.
Ahí, ya lo he tirado para atrás.
La verdad es que nos quería liar con el Nulish, porque como la verdad estábamos utilizando
las ternarias y tal, pero aquí podríamos utilizar este.
¿Tirri?
¡Julio!
Muchas gracias por suscribirte con Prime, amigo.
Muchísimas gracias.
Vale, pues eso.
Podríamos hacer así.
Ay, quitando esto.
Vale.
Pues nada, le hemos hecho un refactor importante a Mili.
Espero que le haya gustado.
Me ha gustado el proyectillo, así que muy bien, Mili.
Espero que te ayude.
Check.
Tonchi Serra, comparto mi porfolio.
¡Vamos, Tonchi!
¡Vamos!
Bueno, bueno, bueno.
¡Pero Tonchi!
¡Tonchi!
¡Vamos a ver, Tonchi!
¡Está chula la web!
¿Pero por qué pones una imagen que tiene una resolución de Game Boy?
Es que no entiendo.
Pero si tú te has tenido que dar cuenta, ¿sabes?
Está súper chula la web.
Yo entro y digo, hostia, qué buena pinta, que esto va bien.
Y de repente, pixelado.
¡No!
Mira, Tonchi, te voy a hacer un favor.
Te voy a hacer un favor.
Proof Quality Image.
Os voy a enseñar una web.
Que es brutal.
A ver si...
¡No!
Vamos a dejar la imagen esta aquí.
Vamos a dejar esta imagen.
Esta imagen aquí.
Bueno, o sea, me tienes que...
Tengo que iniciar sesión y todo.
Ahí.
Ready to process.
Vale.
Esta no es la página que yo había visto.
Pero bueno, no pasa nada.
No pasa nada.
Smart Enhancer.
Sí.
Yo no había visto...
¿Cuál había visto?
Esta.
Esta es la que había visto yo.
Vamos a probar las dos.
Esto es que le puedes pasar una imagen
y lo que hace es que te la mejora.
Mira, fíjate, ¿eh?
O sea, es que la ha mejorado bastante.
No está mal.
Ampliar 4X.
Mira, más todavía.
Ahora la ha mejorado todavía más.
Dirección de la imagen.
Ya la veo igual.
No, ahora se ve mucho mejor, ¿no?
Hombre, ¿has visto Gonzalo?
Fíjate la diferencia, ¿eh, Gonzalo?
Mira, mira, mira.
Y todavía la podrían mejorar más.
Pero, hombre, poquito.
Es que no entiendo, no entiendo.
Es que no entiendo como...
Hostia, Gonzalo.
Yo creo...
Hay una cosa, hay una cosa, Gonzalo,
que viendo este proyecto, este porfolio,
sé quién te lo ha podido diseñar.
Esto tiene un olor, un aroma a Salomón.
Salomón, Salomón, Salomón, ¿cómo se llama?
Salomón Sánchez.
Salomón Sánchez.
Tiene un aroma a Salomón.
Importante, ¿eh?
Tiene un aroma a Salomón importante.
Este chico es un diseñador que va diseñando cosillas y tal.
Voy a buscar porque seguro que te ha hecho el porfolio.
Es que estoy hasta convencido.
Es que se parece mucho a este.
Se parece mucho.
Se parece a este.
Es que el estilo que tiene Salomón es muy peculiar.
¿Sabes?
Se detecta.
No sé si te hizo...
A lo mejor hizo vídeo y todo.
Parece que no.
Se parece mucho al estilo.
O a mí me da la sensación, ¿eh?
Se parece.
Ahí lo dejo.
Porque por el tipo de letra y tal.
Bueno, aquí yo le dejaría un espacio, ¿eh?
Del contactame este.
Aquí hay que dejar un poquito de espacio, que respire.
Me gusta el diseño.
Está bastante chulo.
Voy a ir para un top 50 píxeles.
Un poquito más de espacio por aquí, ¿no?
Que respiren los últimos proyectos, pobre.
Gonzalo Serra, Frontend Developer.
Hola.
Me llamo el...
La M va con mayúscula.
Me llamo Gonzalo.
Serra, pero puedes decirme Tonchi.
Me puedes llamar.
No puedes decirme.
Me puedes llamar.
Soy oriundo de la ciudad de Totora, Santa Fe, Argentina.
Bueno, claro.
Igual en Argentina se dice...
Pero puedes decirme.
Es un poco raro.
Me suena raro, pero bueno.
A lo mejor algún argentino me dice que es así.
En 2019 comencé a estudiar ingeniería en sistemas de información en la Universidad Tecnológica Nacional de FURRO.
Y de forma autodidacta me centro en aprender y mejorar mis habilidades como Frontend Developer.
Me gusta, Gonzalo.
Buena introducción.
Igual yo le pondría un pelín menos de texto, ¿vale?
Un pelín menos.
Pero está bien.
Me gusta.
Me gusta el efecto este.
Me gusta, me gusta.
Este JS es un poco raro, pero bueno.
Lo acepto.
¿Vale?
Muy bien.
Ahí con los icónicos.
Vamos a darle aquí.
Acerca.
¿Ha pasado?
Yo este acerca, si es esto, yo...
O sea, acerca fuera.
Skills, ¿vale?
Le dejas el skills porque no tiene sentido.
El acerca cuando además ya no sale más para darle clic.
O sea, este acerca no es lo mismo que inicia.
No tiene mucho sentido.
Skills.
Tecnologías que aplico.
Bueno, aquí colorcito, ¿eh?
Yo le pondría color.
Y haría que menos ancho porque queda muy grande, muy grande, muy grande.
Queda todo muy grande.
¿Ves?
Así queda súper bonito.
Pues haría que tuviese menos ancho.
Aquí sí que le has dejado espacio, ¿eh?
Ahí sí.
A lo mejor demasiado y todo, ¿eh?
Está bien porque le has puesto 100 de viewport del height.
Pero igual demasiado, ¿eh?
To-do list.
Bueno, aquí con todas las cosillas.
Bueno, ¿veis?
Aquí, ¿vale?
Me gusta cómo están los enlaces, mis proyectos realizados.
Hombre, este estaría bien que no saliese, ¿eh?
Ya que es porque queda un poco como que está cargando.
¿Qué está pasando?
¿Qué hay ahí?
¿Qué esconde esa card?
¿Qué esconde?
¿Vale?
Puedes ver todos mis proyectos en mi perfil de GitHub.
Vale, muy bien.
Me gusta.
Contacto.
Aquí le falta un poco de padding, ¿eh?
Esto está ahí a fuego.
Puedes contactarme enviando un mail o a través de mis redes sociales.
Espero tu mensaje.
Subrayado.
Espera mi mensaje.
Midu.
Espera mi mensaje.
Lo voy a hacer.
Aquí tienes el mensaje que esperas.
Ya podrás dejar de esperar.
Enviar.
Hostia.
Muy bien.
Pues mira, me ha gustado el feedback del formulario, ¿eh?
No suelen ser muy buenos.
Está bien que te diga, oye, sí, ha ido bien.
Se ha guardado correctamente.
Bueno, le echo en falta, ya que tienes esta navegación aquí y estás haciendo que la página ocupe todo el viewport, ¿sabes?
Hombre, pues que aparezca la navegación constantemente podría ser buena idea para ir para arriba, para abajo y tal.
Y, por supuesto, lo de la imagen, ¿eh?
La calidad de la imagen, que no te cuesta nada.
Si es que eso, para una imagen que tienes, está muy bonita.
En versión móvil está muy, muy bonita.
Claro, aquí tiene más sentido el menú porque el menú siempre está.
Así que está muy bien.
Pero me gusta el diseño, me gusta.
Sigue pasando aquí este sombra, este sombreado polvo, que yo le llamo.
Que no sé, no sé por qué a la gente le gusta la sombra tan bestia.
Creo que es una cosa, es una cosa que se hacía antes.
Por cierto, que son ancos, muy bien, muy bien.
Pero eso, que creo que es una cosa que se hacía más antes.
Yo creo que ahora se lleva más, no sé, más...
Más bestia, o sea, más bestia lo que es la sombra, pero mucho más sutil.
Hostia, mucho más sutil, ¿sabes?
O sea, que no se note tan...
O sea, que salga la sombra, ¿ves?
Pero más sutil, digo yo.
Porque es que la otra forma parece como que hay mugre ahí debajo.
¿Cómo que por qué Ancors es mejor?
¿Cómo que...?
¿Cómo...?
Jsinux, ¿me estás bromeando?
¿Cómo que...?
¿Cómo que por qué Ancors es mejor?
Vamos a ver.
Ay.
A ver, no es que sea mejor, es que es la única forma.
No es que sea mejor.
Vamos a ver.
Ancors, cuando es una navegación que te lleva a una URL, es como hay que ser.
Es que no hay otra forma de hacerlo.
Cualquier otra forma está mal.
¿Vale?
O sea, ya está.
Eso es lo que es.
Cuando tú quieres que sea un link navegable a otra URL, es un Ancors.
No es que sea mejor, es que no hay otra.
No hay otra.
Cago en la leche.
Que no, ¿cómo se va a ganar el ban?
Pero es que es eso, que no utilicéis botones.
Buttons.
O sea, botones, que se vea un botón.
Pero bueno, ¿qué os parece?
¿Cuál les gusta más de sombrita?
¿Así o así?
Que igual es un tema personal mío, ¿eh?
Que no lo descarto.
Pero como que, no sé, a mí me gustan un poco más que sean así.
Seoblacat llorando por la ofugación va a 64 en el enlace.
Ya te digo.
Bueno, Gonzalo, me ha gustado, ¿eh?
Me ha gustado.
Vamos a echarle...
Ah, sí, mira, tiene repo y todo.
Mira, encima está hecha con HTML.
No, parece igual, pero es mucho más...
Mira, mira, hombre.
Mira esto, mira esto.
Mira ahí.
Mira el polvillo.
Míralo.
Ese sería uno.
Y este es el otro, que es mucho más imperceptible.
Pero porque todo el fondo tiene la sombra, ¿sabes?
Aquí todo el sombro tiene como la sombra.
Sí, se escribe van.
Claro que sí.
Pasa el link.
Claro que pasa el link este.
Mira, este era uno que no he podido...
Este, este es uno.
Este lo recomiendo un montón.
Os la podéis dejar a 4K.
Quedan súper bien.
Mira, sí, mejoré algunas imágenes.
Esta es la de tu web a juicio.
Este es que Salomón tú también, ¿eh?
Salomón que vas a pillar tú también, ¿eh?
Pero siendo diseñador, Salomón, ¿cómo no pones una imagen ahí que sea 8K?
Que luego la optimizas.
Que está bien que la optimices.
Está bien, pero hay que poner imágenes que se...
Si solo tenéis justamente la imagen más grande, tiene que ser una imagen que se vea bien.
Y luego, pues la optimizáis.
Mira, vamos a intentar...
Bueno, no.
Iba a poner a Salomón en el AppScaler este.
Bueno, Tony.
Bueno, la web de Tony es totalmente...
Está hecha...
Ah, no, esto es el Weather.
¿Dónde me he metido?
Bueno, su porfolio está hecho todo con HTML, lo cual me parece muy bien.
Vamos a echarle un vistazo.
Bueno, esto en los comentarios...
Google Fonts.
Google Fonts.
Con Preconnect para el tema del rendimiento.
Muy bien.
Description.
Muy bien.
Con una buena descripción.
A ver, Frontend Developer y Eterno Autodidacta.
Este es mi porfolio web.
No es la mejor descripción del mundo.
O sea, yo en el título pondría Gonzalo Serra.
¿Vale?
Y pones...
Porfolio Frontend Developer.
¿Vale?
Títulos, palabras claves.
Pam.
Y luego la descripción...
Sí que puedes poner más.
Soy...
Y aprovechas.
Soy desarrollador web y Eterno Autodidacta.
¿Por qué?
Para cambiar las palabras claves que pones en la descripción con las que pones en el título.
Ahí intentas.
¿Vale?
Y yo esto lo evitaría.
Este es mi porfolio...
Es que esto parece un título.
Y no.
Este es mi porfolio web.
Esto sobra.
Soy desarrollador web y Eterno Autodidacta.
Descubre todos mis proyectos en los que he trabajado.
Y ponte el contacto conmigo para lo que sea.
¿Sabes?
Pero este es mi porfolio web.
Es un poco raro.
Summary.
Muy bien.
Apple Touch.
¿Vale?
Anchors.
Me gustan los anchors.
¿Vale?
Aunque sean así también.
Bueno.
Se ve limpia.
Se ve bien.
Me gusta.
El script.
En lugar de ponerlo aquí...
Esto es un error, ¿eh?
Este script lo que tendríais que hacer...
De hecho, vamos a ver esto.
Esto está interesante.
Esto está interesante.
Sí, sí, sí, sí.
Tony.
Tony.
Tonchin.
Tonchi.
Tonchi.
Vamos a ver una cosa.
Tonchi.
Tonchi, tonchi.
Ay.
Tengo que eliminar todos los Codespaces que tengo.
No me deja nunca crearlos.
A ver.
Lo voy a borrar.
Y ahora volvemos a tonchi.
A ver, tonchi.
Tonchi, tonchi.
Vamos a mirar una cosa que está muy interesante de tu código.
Los comentarios es para el desarrollo.
A ver.
Es una tontería el tema de los comentarios, pero es innecesario.
O sea, el tema es si puedes evitarlo.
¿Para qué lo íbamos a hacer?
A ver, npm.
¿Sí?
Tenemos npm, ¿no?
Aquí.
Sí.
Vale.
NPX server punto.
Quita.
Vamos a hacer esto un poquito más grande también.
Esto lo cerramos.
80-80.
Esto es increíble.
O sea, Codespaces es brutal.
Mira.
Ya tengo aquí el estado abierto.
Vale.
Eso no se lo vamos a arreglar.
¿Qué es lo que quería mirar?
Sí.
Lo que quería mirar, por un lado, es...
Bueno, mirando el código fuente, ¿veis que aquí quedan los comentarios?
Pues que esto es innecesario.
Pues al menos lo que podría hacer es minificar todo el HTML.
Mira.
Si vais a mi web y vemos el código fuente, está todo minificado.
¿Ves?
Es que no se ve un comentario, minificado.
Es que le quita todo lo que puede.
Mira.
Le quita hasta las comillas en los atributos.
Porque hay que minificarlo.
Porque así está más optimizado.
Bueno.
Lo interesante de Gonzalo, de su web, es...
Vamos a hablar de un momento de rendimiento, ¿vale?
Es un momento.
Su web tiene bastante buena pinta de rendimiento.
No es una web muy grande.
Y seguramente lo que mejoraríamos sería una chorrada y tal, ¿no?
Pero sigue siendo interesante.
Y entonces, pues lo vamos a ver.
Mira, esta es la web...
Mira, la voy a poner aquí.
Gonzalo...
Vamos a abrirla aquí.
Un momento.
Pero creo que se puede aprender cosas.
Se puede aprender cosillas.
Vale.
Esta es la web de nuestro amigo.
Y el tema es que si vemos aquí el script...
Fijaos dónde está el JavaScript, ¿no?
El JavaScript está aquí abajo.
Tenemos aquí el HTML con Broly.
Genial.
Creo que la versión que yo tengo es que decir...
La mía irá peor, pero por un tema del servidor.
Pero bueno, no pasa nada.
Pero al menos mejoraremos como es la cascada de recursos.
Si miramos aquí el waterfall, esta es su versión.
Vemos aquí que tiene el gsr, que aquí tiene el css, luego tiene otro css aquí, otro aquí.
La imagen, otra imagen.
Y el script lo tiene aquí.
Que a ver, el script, claro, tampoco es importante.
Pero lo empieza a descargar aquí cuando a lo mejor no es necesario.
Pues una cosa que podemos hacer...
Y eso la vamos a hacer aquí en el código.
Vamos a intentar mejorarle un poquito la performance viendo las cosillas que tiene, ¿vale?
Lo primero que vamos a hacer es que este script lo vamos a poner arriba.
Y claro, la gente dirá, hostia, arriba, pero ¿qué haces?
¿Estás loco?
¿Qué haces?
¿Salvaje?
Bueno, lo que vamos a poner aquí es ponerle un defer.
El defer...
Ay, esto lo que pasa es que tengo que refrescar.
A ver.
Vale.
El defer, con lo que vamos a hacer el defer, al final es que sí, lo va a poner arriba.
Lo va a cargar mucho antes, que no como lo estaba cargando antes.
Pero no va a bloquear ninguna carga, ¿vale?
No va a bloquear absolutamente nada.
En cambio aquí sí que podemos ver que...
¿Veis que esta cascada que está aquí?
O sea, que aquí está bloqueante.
Que no lo está haciendo porque tampoco tiene nada más que cargar.
Pero aquí lo que conseguimos es que se cargue mucho antes.
Y al final lo que va a hacer es ejecutarlo solo cuando termine de parsear todo el documento.
Lo que es bastante interesante.
Y de esta forma, pues ya lo tenemos aquí.
Luego lo que podríamos hacer es algunas cosas que sean importantes.
A ver, aquí tengo un montón de fuentes y todo esto.
Pero lo que podríamos hacer, algunas cosillas que tiene por aquí, sería cargarlas en cuanto se pueda.
O sea, por ejemplo, he visto que tenía por aquí un preload.
No, no tiene ni siquiera un preload.
La fuente tiene un swap.
Este tiene un rel...
Mira, este también podría hacer un pre-connect, ya que lo ha hecho con las fuentes.
Este pre-connect, que lo ha hecho aquí, esto lo podríamos hacer aquí.
Y lo podríamos hacer con el cdn.
Esto por un lado.
Luego, vamos a ver todas las imágenes.
Esta sí que tiene sentido.
Pero esta, vamos a ponerle un decoding async.
Y un loading...
Sí, loading lasing.
Esto nos lo vamos a copiar.
Y lo vamos a poner en todas las imágenes que estén bastante lejos.
A ver si esto...
No sé si están lo suficientemente lejos, pero bueno.
Yo creo que a lo mejor no están lo suficientemente lejos.
Hostia, aquí le ha faltado un alt.
Imagen del proyecto.
Project es con J cuando es en inglés, ¿eh?
Vale.
Hay una cosa rara con los estilos que hace.
A ver si le pasa a él también.
Sí.
¿Veis los estilos?
Que hace una cosa rara.
Eso es muy raro, ¿eh?
Eso es muy, muy, muy raro.
A ver cómo carga...
Cómo está cargando los styles.
.css
Qué raro.
Súper, súper raro.
Clover Phone Awesome.
Yo es que además este...
Este estilo...
Yo lo pondría antes del Phone Awesome por si acaso, ¿eh?
Esto lo movería.
Esto lo pondríamos aquí, hasta aquí.
Pero sí, lo de los estilos también.
No sé si es una cosa que le pasa que es mía.
A ver.
Oye, Manz, muchas gracias por la ride de 20 personas.
Bienvenidos.
Estamos aquí arreglándole un poco la performance a nuestro amigo Tonchi.
¿O Tochi?
Ahora Gonzalo Serra, pero se hace llamar Tonchi.
Le puedes decir Tonchi.
Y en eso estamos.
Estábamos echándole un vistazo un poco a la web.
Lo que estamos viendo aquí es el tema de los estilos.
Pero bueno, ahora ya sí que veo que va un pelín mejor.
Claro, aquí tienes suerte porque en Netlify lo que tiene es Broadly.
En nuestro caso no tenemos Broadly.
Pero aún así, lo que podemos hacer...
Este script lo llevamos un poquito más para arriba.
Y lo que conseguimos es que los estáticos se carguen un poco antes.
No hace falta que se pase todo el HTML para empezar a descargar eso.
Porque al final, si no, lo que estamos haciendo es bloquear un poco más.
De esta forma, pues conseguimos que cargarlo antes.
Entonces, además, ¿ves aquí que está cargando las imágenes del weather, el todo list y tal?
Aquí lo que hemos conseguido también es que no se carguen.
Estamos cargando incluso un poquito menos.
Esto gracias al Loading Lazy que hemos utilizado.
Así que aquí, si estamos transfiriendo, no sé si se ve, 558k, pues con unos pocos cambios, lo que hemos conseguido aquí son transferir 200k menos.
Y ya estuve.
Los cambios que hemos hecho han sido un momentito de nada.
De hecho, aquí se pueden ver los cambios.
Hemos traído el CSS hacia arriba.
Hemos hecho el defer del script.
Luego, hemos hecho un pre-connect también de Cloudflare.
De hecho, aquí, el pre-connect de Cloudflare...
A ver, ¿dónde está?
Es este de aquí.
En nuestro caso, bueno, es que no se ve casi la ventaja.
En este caso.
Pero yo haría el pre-connect igualmente.
Y lo que hemos hecho luego es poner los atributos del Loading y todo esto.
¿Vale?
Y con estas pequeñas cosas hemos mejorado ya un poquito el rendimiento.
O sea que...
Ahí está.
Ahí está.
Un poquito mejor.
De hecho...
De hecho, igual, otra cosa que se podría hacer...
Bueno, esto ya es para notas, ¿eh?
Para...
¡Ay, mira!
Fíjate que también tiene aquí...
¡Uy, qué bueno!
Bueno, muy bien, ¿eh?
Tiene un poquito de JavaScript para el formulario y todo esto.
Bueno, está bien.
A ver, una cosa que...
Ya que tiene el de este...
De...
Esto es del document.
Que se lo está pasando por aquí.
Está bastante bien.
Pero bueno, ya que estaba aquí con los queries selectos...
Bueno, sí.
Está bien.
Me gusta, me gusta.
Me gusta, me gusta.
En este caso...
Token...
Remove...
Add...
Hmm...
Sí.
Remove...
Estaba pensando en una cosa, pero creo que...
Claro, qué pena que aquí no puedo utilizar el de, ¿eh?
Que había hecho arriba.
Que al final...
Este es en mail.
¿Dónde lo está usando?
Claro, no lo está usando aquí.
Esto es porque lo tiene que tener aquí en el HTML a saco.
Esto no lo hagáis así, ¿eh?
Yo esto lo quitaría de aquí.
Este un clic.
De hecho, no está bien porque tendría que ser en submit, ¿vale?
Esto...
Pues esto sí que es un error.
Claro, lo he puesto en el type submit de un clic.
No sé si esto, el formulario, cuando haga enter, sí que funcionará.
¿Sabes?
Si se podría hacer un submit del formulario aún así.
Pero yo no lo haría así.
Yo lo que haría sería recuperar este elemento.
De hecho, esto lo que está interesante es que ya se puede llevar esto.
Añadirlo aquí.
Y lo que haría aquí es hacerlo otra vez.
Utilizar el de este que ha utilizado.
Recuperar el selector este del formulario, que es el del contact form.
Contact form.
Escuchar el evento de submit.
Y aquí directamente, pues, hacer lo que estaba haciendo en el send email este.
Bueno, de hecho, es que mira.
Si es que lo está recuperando aquí.
Y de esta forma.
Se quita eso.
Y todo esto, pues es todo esto.
Se lo puede quitar de aquí.
Espera que...
Ah, no, sí.
Ya está, ya está.
Este es en...
Sí, sí.
Lo que tengo que quitar es en mail.
Hacer esto aquí dentro y ya estaría.
Más que hacer un clic ese que no tiene buena pinta.
¿Vale?
Pues nada.
Ya le hemos echado ahí un vistazo.
El async es que se encargan simultáneo de forma sincrona.
A ver, que no os he leído.
Transitional.
Sí, también tiene Transitional.
¿Qué hace el pre-connect, Midu?
A ver.
El pre-connect, hay un montón de formas de hacer, como de darle un...
Se le dice como consejo o pista.
Es como que darle pistas al navegador de qué es lo que tienes que cargar, ¿no?
Tienes el pre-load, que lo que hace es pre-cargar directamente un estático.
Por ejemplo, un JavaScript que vayas a utilizar más adelante porque le dices, vale, haz un pre-load de esto.
Y lo que sería el pre-fetch.
El pre-fetch lo que hace son para recursos que no sean muy prioritarios.
Y lo que hace en realidad...
Bueno, he hecho un pre-fetch.
No, he hecho un pre-connect.
El pre-fetch sería para recursos...
Es como un pre-load, pero para recursos menos prioritarios.
Y lo que lo hace es ir descargando ese recurso por detrás.
Y entonces está el pre-connect.
Que el pre-connect lo que hace es conectarse, hacer la conexión HTTP con ese recurso.
De esta forma, lo que es la negociación de los nombres del servidor, el TCP, TLS, SSL...
Y todo esto lo haría antes.
Antes incluso de saber cuándo se lo tiene que descargar.
Esto está muy bien justamente cuando se bloquea alguna carga de algún script.
O para CSS.
Porque de esta forma es mucho más inmediato cuando realmente necesitas el recurso.
Así que si son cosas que son de fuera, pues cuanto más arriba lo pongas, así hace la pre-conexión cuanto antes.
Y así, esto lo puedes ver, por ejemplo, en su caso lo hemos visto aquí.
No, antes lo hemos visto.
A ver, mira.
¿Ves estas barras de aquí?
Estas barras de aquí, por ejemplo esta, ¿no?
¿Ves que tienes esta barra?
Y aquí tienes DNS, Initial Connection y SSL.
Esto es lo que harías con el pre-conexión.
Con la pre-conexión harías estas cosas de aquí.
Que quieras o no, pues son 70 milisegundos.
Y eso, si te fijas, si lo hubiera podido hacer antes, si ese pre-conex...
En este caso no, porque el HTML no está haciendo un streaming.
Pero este pre-conexión lo pudiera haber hecho justo cuando estaba descargando el HTML, pues fíjate todo lo que se hubiera evitado.
Porque, claro, está bloqueando el poder descargarse realmente el recurso.
Lo mismo le pasa con este all.min.css, que viene de un dominio externo.
Fíjate todo lo que tiene que hacer de DNS y todo esto.
250 milisegundos.
Pues para eso es el pre-conex, ¿vale?
Para pre-conectar con dominios.
No es para un estático en concreto, sino que es para un dominio.
Así que tienes que poner el dominio al que te quedas cargar.
Y es importante que hay una diferenciación entre HTTP y HTTPS.
Necesitarías una barra cada.
¿Vale?
Ah, a ver que os leo un momentito.
Hola, Tonchi.
Ah, mira, se está de Tenchi.
Vi que me llegó el mail.
¡Qué grande!
No sabía que estabas en stream.
¡Ay, Tonchi!
Tienes que ponerte las notificaciones.
Por favor, no pregunten sobre Anchors.
El async es carga en simultáneo de forma asíncrona.
El atributo loading es para carga a carga.
El atributo loading, cuando se pone async, es que lo que hace es detectar cuál es el threshold.
O sea, cuánto queda.
Para ver la imagen y dependiendo de la conexión que tenga, la carga o no.
Por eso es el async que habíamos visto.
Es el tema también de la decodificación.
¿Vale?
¿Lo he puesto?
Sí, lo he puesto bien.
Que puedes decodificar la imagen de forma asíncrona.
Pero bueno, eso lo suelen hacer automáticamente casi todos los navegadores.
Si no quieren ver a Midu cabreado, dices tú, efectivamente.
Levantar sus espadas.
¡Qué grande!
¿Por qué Query Selector y no GetElementById?
La verdad es que yo recomiendo utilizar siempre el Query Selector.
Yo intentaría no utilizar, a no ser que sea un sitio en concreto, puede tener sentido utilizar GetElementById.
Pero en su caso, además, por el código que había visto, son clases.
Por lo tanto, tiene sentido que utilice el Query Selector.
Si no, podría utilizar el GetByClassName o algo así.
Pero yo ahora siempre utilizaría el Query Selector por un tema de unificar la API.
El GetElementById tiene sentido cuando tienes una ID, pero tampoco es que la diferencia de rendimiento sea mucha.
A no ser que necesites recuperar 10.000 millones de elementos.
¿Quereselector es más nuevo?
Pero se puede hacer de las dos formas.
Sí, pero en este caso, como estaba utilizando clases, no podía utilizar el GetElementById porque no son IDs, son clases.
Evita el uso del atributo onClick en el evento onClick es más que suficiente.
Evita el uso del atributo onClick con el evento click.
Es más que suficiente.
No, o sea, yo no pondría un evento click, yo haría un evento submit, como os he explicado.
No hagáis eventos click en formularios porque una cosa es el click de un botón y otra cosa es hacer submit de un formulario.
Pensad que se puede hacer submit de un formulario con el teclado.
Entonces, no escuchéis el evento click.
Ya está.
Player dice, mi poco conocimiento no me dejan seguirlo al 100.
Bueno, poco a poco.
Ya solo me faltan 48.000 puntos para un pep programing con Midu.
Bueno, Nicola, poco a poco.
Tonchi dice que gracias a Midu después veré la repetición de stream para verlo todo completo.
Bueno, espero que te haya gustado.
¿Cuándo subirás el vídeo de las rutas?
Hostia, de las rutas, qué rutas.
Pásalo en Discord.
Gonzalo tiene un console log raro.
No he visto ningún console log raro.
Ya estoy bastante, bastante atento a los console logs.
Ya sabéis que me gusta encontrar console logs por ahí.
Venga, vamos a darle otro más.
Que se me van...
Vamos, que hoy hemos avanzado.
Hemos avanzado.
Vamos a poner aquí.
Check.
Venga.
Por cierto, ya que estáis aquí.
Si estáis aquí y tenéis acceso al Discord, que por cierto, somos casi 5.000.
O sea, solo tenéis que compartir a todos vuestros amigos.
A ver, llegamos a 5.000.
Si os interesa, tengo invitaciones para esta aplicación que se llama FIC.
Si tenéis macos, es un autocompletado para terminal.
Yo lo tengo, de hecho.
Mira, lo tenéis aquí.
Yo hago CD y veis que sale aquí un autocompletado súper...
Bueno, ahora sale debajo del nuevo follow.
Gracias, idoboga y bienvenido.
Pues esto, que si queréis acceder a la beta, porque es una beta totalmente gratuita,
pues que tengo invitaciones.
Pues necesitáis macos, eso sí.
Funciona con item 2 y con Visual Studio Code.
Visual Studio Code también.
Mira, hacéis así.
Y aquí en la terminal funciona también.
Puedes utilizarlo con Git.
Si te pone todos los comandos, puedes utilizarlo con MPM.
Está bastante bien.
Con LS.
Está bastante chulo.
Si lo queréis, entrad al Discord.
Tienes que entrar al Discord.
Y aquí en Discord hay un canal especial, escondido, que pone invitaciones FIC.
Y aquí ya hemos dado unas cuantas.
Tenía, no sé, 100 invitaciones.
Pues cuando se acaben, se acabaron.
Pero mientras, ya sabéis.
Vais ahí al canal de invitaciones y la pedís.
Vale.
Ay, no.
¿Qué pasó?
¿Qué pasó?
¿Dónde se me quedó esto?
Madre mía.
Es que me ha cambiado el scroll de esto.
Venga, a bajar, a bajar, a bajar.
Un montón, eh.
Pam, pam, pam, pam.
La de los helados, que la vimos el otro día.
Vale.
Esto lo hemos visto hoy.
Harakanda, polvo, polvo, plam, eh, eh, eh, eh.
Aquí estás.
Ángelodar.
Ángelodar.
¡Ojo!
¡Ojo, Ángelodar!
¡Vamos!
Como me gusta cuando tenéis porfolios que dan ganas de lamerlos.
Muy bien, eh, me gusta mucho.
Ya he visto un error.
Ya he visto un error, Ángel.
Ya he visto un error.
He visto un error ya.
Sí, efectivamente he visto un error.
Que ya me ha puesto un poco de...
Ya me ha cabreado un poco, pero bueno.
Pero me gusta, me gusta mucho.
Me gusta el estilo muy limpio.
¿Vale?
Welcome to my personal website.
Yo esto lo quitaría.
O sea, pone cosas que realmente marquen la diferencia.
O sea, welcome to my personal website.
Es que aquí puedes encontrar mucho sobre mí.
No sé.
Pondría otro texto.
Es que es demasiado descriptivo.
Pero bueno, me gusta, eh.
Main projects.
Muy bien.
Mira, esto es que es todo clicable.
No, mentira.
Ángel.
Estabas ahí, eh.
Estabas ahí, pero primero el pointer.
Luego que esto no tiene...
Son anchors que no tienen href.
Eso está prohibido.
Esto me cambia el cursor y no lo puedo clicar.
Estaba cerca, estaba cerca.
Solo tenías que hacerme feliz un poco más.
Y luego lo clicable es este botoncito, ¿sabes?
Es este botoncito chiquitito.
Pero ¿por qué me cambia todo?
Ah, mira, ahora.
Ahora sí, otra vez.
Qué raro.
Bueno, pero me gusta cómo se enseñan los proyectos.
Igual le faltaría una imagen aquí a los proyectos.
Podría ser interesante.
¿Vale?
Latest articles, creating my own website with Next.js, Chakra UI, MDX, Ambersel.
Todo el mundo está haciendo este stack.
No se puede abrir en otra pestaña.
Eso tiene mala pinta también.
Tiene mala pinta.
¿Ves?
¿Por qué?
¿Dónde está mi anchor?
¿Dónde está mi anchor?
Perdón.
¿Dónde está el anchor?
¿Dónde está?
O sea, pero ¿por qué no es un anchor?
¿Por qué no hay un anchor?
O sea, es que no entiendo.
No entiendo.
No entiendo.
Dios mío, no entiendo.
No entiendo.
Es como lo más básico.
Pero no entiendo cómo una web tan bonita, porque es muy bonita,
me gusta este estilo así al oversell o Apple, me gusta, está muy bien.
Me gusta hasta el logo.
No sé, no sé, pero no entiendo.
No entiendo.
No entiendo.
I'm going to show you how I created the website you are watching right now.
Vale, cómo he creado, no sé qué.
Me gusta.
El diseño está muy chulo.
Hostia, este es el logo de Gmail, ya que estabas, al menos que fuese de color rojo,
porque lo demás queda muy bien, pero este que es negrito es un poco raro.
Pero me gusta el diseño.
Está muy chula la web.
Hostia, lorem ipsum, ipsum, no sé qué.
O sea, era mentira.
Era una falsedad.
¿No os has engañado?
Dale aquí, dale aquí.
Sí, mira cómo he creado mi blog.
Toma blog.
Es mentira, lorem ipsum.
Todo es mentira.
Y este, también mentira.
Es un engaño, es una fachada todo esto.
Me gustan hasta las animaciones, imagínate.
Es verdad que da algún salto un poco raro, depende de dónde estés.
Ah, no, ahora bien.
Antes me había dado un salto.
Pero bueno, bien.
Con ese opacity, me gusta el opacity ese.
Está bien.
Proyectos, otra vez.
Vale.
Blog.
El blog de mentira este.
O sea, que aquí voy a buscar un real.
Ah, mira qué bien.
Pues está muy bonito.
Resume.
No sé si...
He visto este estilo y lo he visto más de un sitio.
No sé si es una plantilla o algo.
O se parece mucho a webs que la gente hace.
Pero bueno, me gusta bastante.
Me gusta este botón.
No me gusta el hover.
El hover es bastante horrible.
Este, ¿sabes?
O sea, no se lee el hover.
Parece que he hecho algo mal.
Este hover es como...
¿Qué haces?
¿Qué haces?
Que has roto algo.
¿Ves?
Ese hover ahí con ese blanco pálido que parece que has matado a alguien.
Hombre, yo lo dejaría rojo.
¿No?
Si ya estaba en rojo, pues en rojo.
Algo así, ¿no?
¡Ay, mierda!
La he liado.
La he liado.
A ver.
No.
Yo lo dejaría en rojo.
Estaba en rojito, pues en rojito.
Algo así.
No sé.
Algo así.
Algo así mejor, ¿eh?
Que se note, pero tampoco tanto.
Que es un poco raro.
Vale.
Pero sí, es que el estilo es que me recuerda...
Me recuerda.
Me recuerda alguna web.
O ya he visto esta web antes.
¿Verdad sabes?
Bueno.
Vamos a ver un momento el código.
Y Ángelo...
Ángelo Dar, te voy a decir un par de cosas.
Vamos a ver.
Aquí, en components...
Vale, aquí están todos los componentes.
Aquí ya saco.
Este stack lo está utilizando mucha gente.
El tema de NextDS con MDX y todo esto.
La verdad es que está muy, muy, muy de moda.
Pero claro, si luego encima me hacéis los botones que no tengan anchos...
Vamos a ver.
Logo, logo...
Navigation link.
¿Ves?
Te pone el tú, este, como si fuese realmente algún sitio.
Y este navigation link no está haciendo lo que se supone que debería estar haciendo.
Porque este navigation link...
Un botón como una A que cuando se hace un clic...
No.
Esto no.
Esto no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, un botón como una A.
Claro, esto lo que te está haciendo es que te está dibujando la A, pero no te está poniendo el href.
Entonces, lo que está ocurriendo aquí es que esto te lo está pintando como un anchor, pero sin el href.
¿Ves?
No tiene href.
Entonces, no.
Al menos, o le pasas el href, que no sé si con el href al menos ya te saldría el cursor, porque el cursor no te sale...
Bueno, no te sale también porque está pintando un...
A lo mejor está aquí el cursor.
Cursor, cursor...
A ver, computed.
Cursor.
No.
Pues no.
Pues igual lo único que te falta es pasarle el href.
Y mira, al menos con eso, pues ya lo tendrías.
Pero sin el href, el problema...
A ver...
El problema es que ni se puede...
Sí.
¿Veis que ahora sí que sale el cursor?
Cuando paso, ¿veis que ahora sí que sale el cursor?
Eso es por el href.
Porque como le falta el href, pues habría que pasarle el href este que le estás pasando a este link.
También habría que pasarse al botón, pero no sé si lo aceptaría.
Habría que mirarlo.
Pero bueno.
Y en esto igual.
Nada de onclicks.
En el blog, article card este.
Link href.
Pero claro, este link, esto...
Aunque se llama link, el de next link, el de este, aquí tú tienes que pintar un anchor.
¿Vale?
Y el anchor tiene que envolver todo este texto.
Y entonces ya lo tendrás.
¿Vale?
Solo con hacer eso, pues ya lo tendrías.
Ya sería una mejora.
Es que estas cosas...
Y esto también es súper raro.
Esto aquí pasa algo raro.
Este dip, pero luego no es un anchor.
Y entonces cambia como el cursor.
Pues eso también habría que cambiarlo.
Pero está bonito.
Me gusta.
Está bien.
Colorido.
Me gusta la página.
Simple, pero efectiva.
A esto también le falta un anchor.
Me gusta, Ángel.
Me gusta.
Tienes mi dedito para arriba.
Tienes mi dedito para arriba.
A ver, ¿qué os leo?
Os leo con los ancos.
¿Alguna vez te han pasado un WordPress a juicio?
Pues no, pero no me importaría.
O sea, de hecho, incluso podría mirarme el código.
Hemos sido engañados, ya te digo.
Un loremipsum vale más que mil palabras.
Hombre, eso es una imagen.
Un loremipsum no vale para nada.
¿Cómo que los anchos están sobrevalorados?
¿Y Manol?
Solo quería que vieras su diseño, nada más.
¿Alguna vez te han pasado un...
Ah, increíble.
Dos horas ya y todavía nadie ha preguntado cuál es el programa que utiliza para ejecutar JavaScript.
Bueno, porque ya lo...
Nadie me ha preguntado la extensión que utiliza un Visual Studio Code.
Nadie me ha preguntado cuál es el tema del editor.
Brutal.
Me recuerda al blog de Letop.
Sí.
Ah, Letop.
Sí, es el de Letop.
Next.js.
Letop.
Sí, se parece.
Mira, este.
Sí que se parece.
De hecho, se parece bastante.
Es que ya te digo, es un estilo que he visto.
Que he visto bastante.
Entonces...
Sí, sí.
No, pero está chulo.
Este...
A este creo que le faltaría un pelín algo, un toquecillo.
Pero bueno, está muy chulo.
Y bueno, lo mismo, ¿no?
MDX, Next.js...
Ahí cada...
Cada vez que miro internet veo un tutorial sobre cómo lo haces con no sé qué.
Midu, ¿qué es eso de la etiqueta con AS?
El AS, esa etiqueta que has visto...
A ver si la tengo...
A ver si...
No, nada, no sé dónde lo tenía.
Vale, esto es de Chakra, ¿vale?
De Chakra UI, que es una catálogo de componentes.
Esto es muy típico en el sentido de que una cosa es lo que quieres ver visualmente, ¿no?
Que tú lo que quieres ver es un botón, ¿ves?
Tú quieres ver un botón.
Y otra cosa es lo que renderizas en el HTML.
Entonces tú lo que dices es, renderízame visualmente un botón,
pero el elemento que quiero que utilices es el anchor, ¿vale?
Esto sería, ¿ves?
Pues esto, por ejemplo, con el box.
Esto quiero que visualmente se vea una caja,
pero que utilices la etiqueta botón para renderizarla, ¿vale?
En lugar de utilizar lo que sería un div, a lo mejor por defecto.
Y aquí podrías pasarle un section, un header, un lo que sea.
Y pues lo mismo con el botón.
El botón le podría decir, visualmente quiero un botón,
pero quiero que sea un span.
O quiero que sea un botón, que sería el que es por defecto.
O un anchor, o un paragraph, que no deberías, pero bueno.
Midu, NextDS, ¿con MDX tiene problemas de performance?
No, yo no diría que tiene problemas de performance.
Pero es verdad que para un blog puede ser, puede tener cosas que no necesitas.
O sea, es que, no sé.
Vamos a ver un momento su página, ¿vale?
El de Ángelo.
Vamos a ver su página, ¿vale?
Y ya se nota que tarda en cargar.
Y es una página muy sencilla.
Si yo me pongo aquí y pongo JavaScript y recargo,
mira, solo de JavaScript, de JavaScript, ¿vale?
Esta página, que no tiene nada de necesidad casi de JavaScript,
un mega.
Un mega de JavaScript.
Bueno, un mega igual es demasiado porque está cargando la React DevTools.
Mira, os voy a enseñar un truco.
Bueno, os iba a decir, la ventana incógnito.
No, pero lo que podéis hacer es tener un perfil en vuestro navegador.
¿Ves? Yo tengo el de performance.
Y en este perfil no tenéis ningún tipo de...
No tenéis ningún tipo de extensión ni nada.
De forma que así no carga la extensión de RIA, Grammarly o lo que sea que tenéis, ¿vale?
Y así, pues, podéis mirar, pues, de una forma mejor cómo funciona realmente la página.
Porque si no, se te mezclan extensiones y es un rollo.
Pues aquí en JavaScript, pues, miramos y, bueno, 700...
Bueno, no sé si lo veis, ¿vale?
Pero 700k.
Está pasando 700k de JavaScript.
¿Y vosotros creéis que esta página necesita 700k de JavaScript?
O sea, no es que tenga un problema de performance.
Es que está cargando cosas que a lo mejor son innecesarias.
Y ese es el problema.
Esto pasa con cualquier página de Next10.
Seguramente lo mejorarán, irán haciendo mejoras, pero...
Bueno, a mí me parece innecesario, la verdad.
Mira, por ejemplo, mi blog.
Por poner un ejemplo, que no es que mi blog sea mejor o peor.
Pero es lo que yo intento.
En mi blog, solo cargo...
Bueno, para que lo veáis...
Solo cargo un archivo JavaScript que es de 2k.
Y en total, 7k de JavaScript.
Y claro, pues, a la web que va, pues, volada.
¿Y qué hago?
Pues las cosas de JavaScript que necesito.
Por ejemplo, el buscador necesita JavaScript.
Pues cuando le doy un clic y me pongo a buscar...
¿Ves?
Lo que ha pasado es que ha descargado el script de Algolia solo cuando lo ha necesitado.
Y bueno, pues cuando lo ha necesitado se ha cargado 5k más y ya está.
Punto.
Pero cuando no lo necesita, pues, no los carga.
Y punto pelota.
Así de esta forma, hombre, de rendimiento va mucho mejor.
Pero no es un problema de Next10 con MDX.
Que aparte, está el tema de la compilación, que es otra cosa en la que están trabajando.
Pero un blog donde tengas cientos de artículos puede ser un poco más lento.
Yo, por ejemplo, que para mí eso es súper importante.
Si solo vas a escribir 4 artículos en tu vida, pues sí, te lo puedes permitir.
Pero si tienes 200, 300 o quieres escribir 1.000, pues igual ahí sí que no escala bien.
Entonces este es el tema, ¿no?
¿Realmente este blog necesita 700k de JavaScript?
Pues es la pregunta de hacerse.
Yo creo que no, la verdad.
Por lo que veo, ¿eh?
Por lo que veo aquí.
Por más que tenga el modo noche, 700k para un modo noche que es cambiar una clase, no me parece.
Pero no es un problema como tal.
Es un trade-off.
Es lo que estás pagando por utilizar ese stack.
¿Vale?
Viendo los streams de Mido me he dado cuenta de cuántos errores cometo.
Bueno, eso es bueno, jacón.
Ojalá yo en su día hubiera tenido a un chico ahí programando y diciendo cosas para enterarme de los errores que he cometido y que sigo cometiendo.
¿Aprender 10% HTML, 5% CSS, 10% JavaScript y meterte a un framework y montar un servidor en el backend?
Esto es lo que se lleva de verdad ahora.
Ya.
Ya.
Sí.
Sí, totalmente.
¿Soy el único que ordena los componentes en carpetas?
No, yo también lo suelo hacer, ¿eh?
¿3.600 dólares en Latinoamérica a Chile será un salario alto?
Hostia, yo creo que sí, josca.
Yo creo que 3.600 dólares en Chile se puede vivir muy bien.
Mido, ¿cuándo subes el tercer tu web a juicio para mandárselo a toda mi familia?
Lo intento subir esta semana seguro.
De hecho, tengo el vídeo por ahí.
Así que pronto.
Pronto, pronto.
No sé si hoy o mañana.
Si no lo sabéis, lo suelo subir en mi canal secundario, ¿vale?
YouTube barra Mido Life.
Que el otro día digo, no me lo puedo creer.
Somos casi, mira, 3.810.
O sea, a este ritmo vamos a pillar el canal principal.
Y voy poniendo, ahora estoy creando estos shorts, que bueno, creo que están bastante interesantes.
Y pronto pongo el de tu web a juicio.
Yo al inicio de lo Mido Life abro un vino y cada vez que le pregunto a por el Ranji es bebo un trago.
Qué grande.
Nos vemos, crack, me voy.
Un abrazo, Jelowin, Jennifer, muchas gracias.
¿Mido, en qué casos un use effect no se debería transformar a custom hook?
En casi ninguno.
No me queda claro y me gustaría saber las mejores prácticas.
A lo mejor no transformaría un use effect en custom hook si es algo del layout, de la UI.
Hay algo muy específico del propio componente, pero casi siempre intentaría extraerlo en custom hook.
Casi siempre.
Si es algo muy específico del componente, igual lo dejaría ahí.
¿Cómo saber cuántos kilobytes o megabytes es mucho al cargar?
Bueno, a ver, no es tan importante en realidad cuántos kilobytes o megabytes o lo que sea cargas.
Porque lo cierto es que en una línea de JavaScript tú puedes hacer que una web vaya súper lenta.
O sea, si tú tienes un loop de un millón de elementos en JavaScript y haces cosas con ese millón de elementos,
pues puedes hacer que vaya mucho más lento que a lo mejor cargar 100k de JavaScript.
O sea, no es tanto el tamaño.
Pero es cierto también, a su vez, que ves visualmente que una página que no tiene interacción,
igual un mega de JavaScript parece innecesario.
¿Sabes?
O sea, es como te das cuenta.
Entonces, no es como saber cuántos es más o menos.
Porque Netflix a lo mejor necesita, claro, tiene muchos vídeos, muchas imágenes.
Igual son muchos megas, pero es necesario porque es muy visual.
Entonces, yo creo que es más fijarse en la experiencia del usuario, ¿no?
De, ostras, sí que se nota cargar, pasarle lighthouse, ver las métricas de rendimiento, este tipo de cosas.
Estoy pensando en hacer una serie de directos sobre performance.
No sé.
No sé, pero no sé si triunfa mucho el tema de performance.
Presumiendo de blog.
Hombre, siempre.
Siempre.