Y buenas tardes, bienvenidos y bienvenidas a tu web a juicio, porque le íbamos a echar un vistazo a tu web.
¿Que te encanta la sección de tu web a juicio? Bueno, pues que sepas que en mi canal secundario,
Midulife, en YouTube, vamos subiendo todos los vídeos de tu web a juicio, donde puedes ver entregas anteriores.
Y la verdad es que yo creo que se aprende bastante, porque una vez que vemos, damos ideas,
pero a veces incluso nos metemos en el código, hablamos sobre el código, así que no te lo pierdas.
No te lo pierdas, que creo que está genial. ¿Cómo puedes dejar tu página web?
Pues entras a Discord, tienes el comando de... Mira, aquí lo tienes, el comando.
Aquí, aquí, este es el comando. Pones este comando y te llega un mensaje privado.
Y el mensaje privado tienes un enlace y en ese enlace hay un virus. No, no hay un virus, es mentira.
Lo que hay es el mejor canal de Discord del mundo entero, que es la comunidad que tenemos,
que ya somos casi 7.000 personitas, y ahí tendrás justamente un canal que es tu web a juicio.
Ahí puedes dejar tu portfolio, tu web, tu aplicación, que le echaremos un vistazo, ¿vale?
Con Eduardo Vergara. Hola, en una oferta de laboral me solicitaron con prueba técnica
realizar un carrito de compras con Angular.
Login, register, database and firebase. A ver cómo la ves. Nota, la prueba es de Angular.
Bueno, no soy un experto en Angular, pero vamos a ver un poco el proyectillo.
Shopping Games. Hostia, se le ha roto aquí el enlace. Capachao. Capachao con el enlace.
Se ha roto. Se ha roto. ¿Qué buscas? Resident. No. Oh, me gusta mucho eso. Muy bien, ¿eh?
Esto de tener feedback instantáneo está genial. Me imagino, también es verdad,
que el filtraje este, el filtrado que está haciendo aquí, lo está haciendo de una, ¿sabes?
Desde un array. Esto a lo mejor seguramente no lo está recuperando de...
Ostras, ¿este welcome? Este 404. Este 404 tiene muy mala pinta, ¿no?
O sea, si yo voy aquí a la página... Qué raro, ¿no?
Mira, bueno, aquí tenemos esta que peta. Por si no sabíais, los 404 tienen un impacto
súper, súper negativo en lo que son los... en lo que son la performance, el rendimiento,
porque pierde bastante tiempo intentando recuperar el archivo y al final peta.
Todos estos thumbnails... Mira, es que fíjate, mira, recursos... Bueno, no sé si lo veis.
No, no lo veis. Os lo voy a enseñar. Esto de 15 megas de recursos, esto es una locura, ¿eh?
Esto hay que echarle un vistazo a esto, ¿eh? Hay que echarle un vistazo. ¿Por qué?
Porque, hombre, imagínate, yo entro en móvil. Entro en móvil y solo por entrar una vez...
O sea, solo podría entrar, según los planes de datos que tengas,
igual solo puede entrar 10 veces o 100 veces a esta página. Eso no puede ser, ¿vale?
O sea, que tenemos que pensar en los usuarios que no ocupe tanto.
Esto se puede hacer un lazy load, que solo puede tocar la imagen cuando lo necesita,
no que cargue todas las imágenes, porque fíjate que esto es una locura.
Vale, .javascript... Bueno, estilos 200k. ¿Estos estilos de 200k?
Esto suena súper raro. Aunque sea undesigned, muchos cambios, me parece, ¿eh?
Muchos cambios, me parece. Si el 404 es al utilizar una source que no existe en una imagen,
también impacta mucho la performance. Estoy haciendo una web usando datos de una API
que tiene imágenes dinámicas, pero a veces las han borrado. A ver, si las han borrado y tal...
A ver, al menos lo que sí que puedes hacer es evitar que aparezca esto, ¿vale?
Esto a la imagen tú le pones un onError y puedes hacer, pues, mostrar otra imagen o ocultarla, lo que sea.
Al menos para que no te aparezca esta imagen horrible de que se ha roto, porque queda fatal, fatal, fatal.
Yo lo que haría, pues, es... Le pones el atributo onError aquí, editar con HTML, le pondrías un onError y lo que podrías hacer...
Bueno, aquí, en este caso, no sé si funcionaría, pero...
Is.parentNode.removeChild, algo así. No sé si esto funciona, ¿eh? No sé si esto funciona, pero bueno.
Mira, sí, sí que ha funcionado. Si os fijáis, ha funcionado. Ha funcionado tan bien que ha desaparecido la imagen.
Solo porque he hecho el onError, lo que he hecho es, cuando hay un error en la imagen, voy al...
Es que es la única forma de borrar, si no me equivoco, es la única forma en la que se puede borrar en...
O ya se puede utilizar el punto remove. Igual se puede utilizar, ¿eh? Vamos a probarlo.
Pero, bueno, básicamente lo que le digo, mira, si hay un error en la imagen...
A ver, en esta imagen no tiene sentido, ¿eh? También lo digo.
Te amamos, Midu. Muchas gracias por el libro. Saludos desde México.
Yo también os amo a vosotros. Muchas gracias, Andecote. Te mando un abrazo enorme desde México.
Cómo me gustó México, ¿eh? Cómo me gustó México cuando fui. Me encantó. Me encantó con las luchas mexicanas.
Bueno, pues podéis poner esto, this.remove. Sí, yo creo que eso sí que funciona.
A ver si es que al poner un HTML chungo esto desaparece. Que ahí está. También puede ser otra cosa.
O sea, si yo pongo aquí esto... Ah, no. Vale. O sea, aquí sí que está funcionando lo que estoy haciendo, ¿eh?
Bueno, pues eso es interesante, ¿vale? Que sepáis que tenéis la oportunidad de hacer un onError, ya sea de atributo HTML.
Bueno, en este caso ahora he puesto uno osdust, pero puedes poner onError. Esto que ejecute un método, lo puedes hacer desde HTML para que se borre la imagen.
Si en el caso este, ¿no? Que no te interesa que la imagen se quede, pues la borras.
O lo que puedes hacer es desde JavaScript también escuchar este evento de error, ¿vale?
Aquí hay... Madre mía, el Undesign este ya os digo que ocupa demasiado, me parece demasiado estos 200Ks y eso que tiene compresión.
Esto seguro que se puede mejorar de alguna forma, ¿eh? Esto me resulta bastante raro.
Mira, desde móvil me gusta. A mí desde móvil hay una cosa que os tengo que decir sobre el tema de los diseños móviles.
Y es que hay que intentar aprovechar un poco el ancho. No sé si habéis visto lo que va a hacer Twitter, pero Twitter ahora va a hacer que en la aplicación móvil utilice todo el ancho.
Y es que fíjate, ¿no? De esto aquí, en este trozo, y este trozo lo estás perdiendo.
Uy, he hecho una captura. No sé si valdría la pena que una vez que en móvil ya, pues que se junte.
De hecho, esto es una cosa que se ve de vez en cuando, ¿no? El hecho de que en lugar de tener estos espacios aquí, que a lo mejor no hacen más, pues que se junte.
Y al menos este trocito de aquí lo ganas. Que ganas 20pixels. Bueno, pues 20pixels que ayudan a que se vean más llenos, ¿sabes?
Que si no se ve un poco de aquella manera. Este border radius es muy raro, ¿eh?
Te recomiendo otro border radius. Uno de dos. O le haces un border radius que sea como muy chiquitito.
A ver, border, border, border. No hagáis border radius de tanto por ciento, ¿eh? Suelen quedan fatal.
Suelen verse horrible. Y de hecho, este es el caso. Fíjate que al poner un tanto por ciento, queda así como...
¿Ves que por arriba sea así? Pero luego de repente son muy raros.
Además, no encaja con este ni con este. No utilicéis border radius de tanto por ciento porque quedan muy mal.
Utilizar o de pixels. Bueno, claro, en este caso encima, fíjate que, claro, es la imagen a su vez también la que tiene.
Esto se puede arreglar porque esto... A ver, border radius. Mira, encima con un elemento está él. O sea, no.
No, no, no. Pero mira, un border radius, este border radius que es más sutil, queda bastante mejor.
Y si no, pues mira, le vamos subiendo. A ver.
Claro, tendríamos que poner un overflow hidden seguramente.
Y le vamos a poner aquí un 10 píxeles. Algo así.
Yo creo que esto queda mucho, mucho, mucho, mucho mejor, ¿eh? Mucho mejor.
Esto sería como estaba antes en la imagen y aquí es como queda ahora.
No utilicéis border radius de tanto por ciento que queda muy regular, ¿eh? Muy regular.
Vale, bueno, me gusta. De nuevo, esto de que si hace efecto over en algún momento, si hacéis over es que tiene que clicarse porque queda muy raro también, ¿vale?
O sea, si yo en esta card, yo estoy aquí y hace este efecto hover como que algo puede pasar, pues déjame que pase algo porque es que es muy raro.
O haz que todo sea clicable para entrar como hace aquí en la imagen y este botón lo dejas aparte.
Oye, esto está bien, ¿eh? Me gusta ese iconito, mira.
Me gusta la animación. ¡Uy, qué bonito! Cuando pasa de 10.
¡Hondo, hondo, hondo!
Y mira, y aquí se está actualizando a la vez.
Está bastante bien que tiene esto de...
Vaya, debo iniciar sesión y no puedo ver mi carrito.
Esto no tiene sentido, ¿vale?
O sea, mi carrito lo puedo ver siempre.
Lo que no puedo es comprar nunca.
O sea, yo suelo usar 2px, 5px como mucho.
10px quedan súper los bordes.
Sí, quedan a lo mejor demasiado.
2px, 5px está bien.
Sí, la UI está bonita.
Me gusta.
Está bastante bien.
Tiene...
A ver, es limpia, pero me imagino, por lo que veo, está utilizando Undesign.
O sea, mucho del diseño que vemos es básicamente Undesign.
Que es muy bonito este framework.
Muy limpio.
La gente sabe lo que se hace.
Creo que viene de China este framework, pero está bastante bien.
Pero bueno, que hay que optimizar unas cuantas cosillas, ¿eh?
Vamos con el siguiente, va.
Vamos con Virtual Health.
Mido acá, la mía.
Si pudieras dar tu apreciación sobre la app, ¿qué es?
Te mando a los usuarios si la tomas en cuenta.
Te mando a los usuarios si la tomas en cuenta.
¿Qué quiere decir que me he mandado a los usuarios?
¿A dónde?
¿A mi casa me lo va a mandar?
Espero que no.
La mía.
¿Ves?
Ahora, lo que no sé...
Bueno, claro, cuando son de Roku, ¿vale?
Best Doc.
¿Pero esto qué es?
Urinary Track Infections.
A ver, ¿dónde me he metido?
Mido acá la mía.
Best Doc.app.
Si pudieras dar tu apreciación sobre el app, ¿qué es?
Te mando a los usuarios si la tomas en cuenta.
Espero que no me mande a los usuarios con una infección urinaria.
Ya estamos.
Bueno, sí.
Book Visit.
Venga, va.
Bueno, a ver, cosas a comentar.
Cosas a comentar.
Lo primero es que el tipo de letra es muy raro, ¿vale?
El tipo de letra es extraño.
Cuanto menos extraño.
Yo me la repensaría, ¿eh?
Porque este tipo de letra tan especial incluso le quita un poco de veracidad al tema este
de que sea algo del doctor.
Entonces, yo intentaría que fuese lo más, no sé, normal posible.
Esto que tiene esta...
Es que parece hasta caricatura a veces.
¿Sabes?
Como demasiado dibujada la letra.
La evitaría, ¿vale?
Luego, no sé por qué, pasa una cosa extraña.
Ahora no.
Ahora, pues no.
Vale, vale.
Sí, es que, ¿ves?
No puedo seleccionar el texto.
Es muy raro lo que...
No puedo seleccionar el texto.
No puedo...
Aquí parece que hace...
Fíjate que aquí empieza como el botón, pero...
O sea, ha cambiado el puntero.
El puntero aquí cambia, pero aquí vuelve a...
No sé.
Es muy raro.
Me da la sensación o que este texto es una imagen, pero es que si es una imagen...
No sé, es muy raro.
Es muy raro.
No, no es una imagen.
No sé por qué.
Es algo...
Es que va cambiando la imagen, ¿no?
O sea, es que va cambiando la imagen.
Pero hace un efecto muy raro.
Bueno, mira.
Este fondo, además, yo lo cambiaba.
Este fondo que has puesto aquí, como para...
Creo que queda mucho más limpio.
A ver.
También es verdad que la parte de arriba...
¿Pero qué está pasando aquí?
O sea, ya sé que es BestDoc.
Ponlo una vez.
Mira, BestDoc aquí a la izquierda.
BestDoc Providers.
A ver, ponlo en un sitio solo.
No hace falta que lo pongas en los dos sitios.
La parte de arriba hay que reestructurarla un poco, ¿eh?
Y esto yo le quitaría el fondo.
No funciona muy bien el slide.
Le pasa algo raro.
Mira, esto que tiene un fondo muy extraño, yo esto le quitaría el background.
Es que queda mejor sin background, pero lo que a lo mejor podría...
Bueno, o lo puedes dejar el background, pero lo tendrías que...
Le pones un...
Es que ni siquiera.
Yo es que ni siquiera le pondría un board.
Es que lo quitaría.
Lo quitaría, solo que le pondría un poquito...
Mira, creo que queda mejor, solo que lo deberías alinear mejor.
Eso yo creo que es el problema.
Es que está todo ahí de cualquier forma, ¿sabes?
Que no está bien alineado.
Vale.
El hover podría mejorar un poco.
Creo que la letra le pasa mucha factura, ¿eh?
Estas sombras yo también las quitaría.
Esto está mal escrito.
Providers.
Una cosa que te puede ayudar, si no tienes mucha idea del tema de diseño que te puede pasar,
es que no intentes ocupar todo el espacio.
Porque cuando uno intenta ocupar todo el espacio, fíjate, esta parte se ve más o menos bien,
pero tú vas bajando por aquí y fíjate que aquí se ve un poco regular, mucho pegote, mucho texto.
O sea, hazlo todo más chiquitito.
Y luego, es que este texto de aquí se parece demasiado al que pone justo debajo.
Te voy a decir una cosa con todo mi amor y con todo mi cariño, ¿vale?
¿Cómo se llamaba nuestro amigo Edwin?
Mira, Edwin, te lo voy a decir con todo mi amor y todo mi cariño.
Bueno, si yo tuviese un problema en mi tracto urinario, seguramente no iría a Best Dog,
porque me daría bastante miedo, ¿ok?
Antes me intentaría meter por el orificio para desatascar el asunto un palillo
que seguramente entrar y mirar aquí.
Es que es muy raro todo, ¿vale?
Así que, bueno, no, lo del palillo no lo haría, ¿eh?
Pero necesitas menos cosas.
Es que nos volvemos locos metiendo cosas.
Menos es más.
Es que además este efecto fading que hace es muy raro.
Quítalo.
Yo quitaría el fading este que parece que la infección urinaria la tiene el slider en lugar de tener...
Mira, es que hace esto ahí poco a poco.
Pues eso.
Y aquí yo creo que te has dejado un margen.
Yo creo que ahí te has dejado un margen.
Mira, ¿ves?
Te has dejado aquí un...
Este padding, esto sobra, ¿eh?
Ese padding sobra.
Queda mejor así la página.
¿Por qué le dejas el padding ese?
Queda mejor así la página.
Sin el padding por los lados que parece que está rota.
¿Vale?
Entonces, yo esto lo alinearía.
Le quitaría este bestdoc providers.
Haría la página más chata, más pequeñita.
Es que fíjate cuántas veces sale el bestdoc.
Si sale el bestdoc por todas partes.
Arriba a la izquierda, arriba a la derecha.
Aquí.
Que si le doy, ¿qué pasa?
¡Hostia!
Que ya me está escribiendo bestdoc.
Ah, es que no lo estáis viendo.
No, no, no.
Tranqui.
Ya voy a buscar un palillo.
No te preocupes.
Vale.
Nada, es broma, es broma.
Pues eso.
Que...
Mira, es que esto rompe demasiado.
Quítalo, quítalo.
Quítalo.
Bueno.
Edwin.
Está bien intentado.
Vamos a check.
Bien intentado.
Hice un clon de Yelp en React.
Venga, vamos con el clon de Yelp.
Para que no sepa lo que es Yelp.
Es como para ver dónde...
Vale, quiere conocer tu ubicación.
Para ver dónde puedes comer y tal.
Oye, me gusta, me gusta.
Venga, me gusta, me gusta.
Guru It.
Vaya, empezamos mal.
Unable to get data.
Pues ya empezamos mal.
Empezamos mal.
A ver, voy a refrescar.
Nada, no hay forma.
No hay forma.
O sea, es una página medio vacía.
Vale.
Guru It.
Muy bien.
Hostia, qué raro este...
Que sé.
El It es lo único que...
Esto ha costado, eh.
Tacos.
Venga.
Chip Dinner.
Chip Dinner me gusta.
Y en Barcelona...
Bueno, Los Ángeles.
¿Ves?
Ahora me da la sensación como que no funciona.
Esto es...
¿Eh?
Los Ángeles no puedes entender.
A ver.
Pues, ¿qué puedes entender?
¿Barcelona?
Tampoco.
Claro.
¿Qué pasa?
Ahora yo me doy...
Me da la sensación que a lo mejor el...
En lo que es el backend no funciona.
Pero para...
Para que te dé la sensación...
Bueno, aquí ya me da la sensación que no funciona, eh.
Por mucho pollo frito que me pongan encima, no me están convenciendo.
Pero el tema es que para que te dé la sensación que esto...
Esto de aquí funciona, cuando tú escribes...
¿Sabes?
Cuando tú escribes en este tipo de input y no pasa nada, ya dices...
Uf, ya no funciona.
Nada.
Que me imagino que es lo que está pasando, eh.
Que la API está rotísima.
Uy, la consola.
403, 403.
Claro, es que encima estás utilizando el course anywhere.
Uf, claro, el course anywhere.
Yo esto, esto de utilizar course anywhere, ya os digo yo...
Ah, mira.
Ya sabemos por qué no funciona.
Es por esto.
Ahora funciona.
Es por el course anywhere, ¿vale?
A ver, os digo una cosa.
Mira, esto del course anywhere, esto es una...
Es un...
Es solo para desarrollo, que obviamente lo habéis utilizado.
Esto tiene una utilidad mientras estás desarrollando, pero una vez que despliegas, aunque sea de demostración, ya hay que quitarlo, ¿eh?
Y te digo por qué.
Hay que quitarlo, primero por esto, ¿no?
Por el request temporal de access to the demo server.
Pero hay que quitarlo porque esto, al final, lo puedes conseguir tú también desde un servidor.
O sea, tú te creas un servidor que, además, si utilizas Vercel, mira, vamos a verlo aquí.
Te creas aquí una carpeta API y ya lo tienes.
Te haces una carpeta API, te haces tus endpoints y de esta forma puedes envolver los puntos de la API que te interesen de Yelp.
Le creas un pequeño envoltorio y eso lo va a desplegar directamente en Vercel.
Mira, para que veamos un poco la idea, ¿vale?
Un libro de course.
Deshabilito el course.
No se puede deshabilitar el course.
O sea, porque es una API externa.
Ahora lo vamos a ver.
A ver, mira, API.
Claro, el base URL es esta API de Yelp.
Claro, tú no puedes desactivar el course de una API externa.
No puedes hacer nada.
O sea, Yelp ha decidido el course y esto es lo que hay.
Pero lo que sí que puedes hacer es del servidor, tú aquí en source, bueno, pues tú lo que haces aquí es crearte la carpeta API
y en la carpeta API puedes empezar a hacer este, yo qué sé, search, business, URL, search o no sé qué.
Vale, pues te creas aquí.
Uy, perdón, aquí.
Y haces search.js, por decir algo, ¿vale?
Y hacemos un export, default, function.
Esto tiene que ser asíncrono, function.
Y aquí tendrías la request y la response, ¿vale?
Y entonces tú aquí podrías hacer todo lo que quieras hacer.
O sea, de la response, send, vamos a poner por ahora hola, ¿vale?
Pero lo que podrías hacer es decir, bueno, pues tengo esta API Yelp, pues hago aquí esta petición.
Y luego, pues aquí, en lugar de decir al course, pues nada, que haga esta petición que habías hecho por aquí y que esto te devuelva la petición.
¿Cuál es la ventaja que tienes con todo esto?
Hombre, la ventaja es que, además de quitarte el tema del course, puedes aquí mapear los datos de alguna forma, que a lo mejor le está haciendo aquí algo, pero no parece.
Puedes mapear los datos para que se adapte a las necesidades de tu app.
Puedes añadir una caché con, por ejemplo, ¿cómo se llama esto?
Ay, siempre me olvido.
Con AppStash, ¿vale?
Pues puedes añadir una pequeña caché.
Tienes un montón de opciones.
Pero yo creo que la mejor idea es crear tus propios endpoints, aunque tiren de Yelp.
O de Yelp o un servicio externo.
Y esto es lo que yo haría.
Ya que tiene Vercell.
Vercell API Endpoints.
A ver si...
Serverless Functions.
¿Ves?
Aquí te lo explican.
Deploying Serverless Functions.
Bueno, esto lo deploy automáticamente.
Si es Next.js, que no sé si...
No me he fijado si es Next.js.
Creo que no es Next.js.
No, no es Next.js.
Lo ha hecho a mano, con React.
Si es Next.js, lo tiene que hacer en la carpeta pages barra API.
Pero si es un proyecto de Vercell, lo puedes hacer en la carpeta API.
¿Ves?
Y tendrías que hacer esto.
Bueno, aquí lo ha hecho con un módulo export.
Yo lo había hecho con export default, con Mascry Modules.
Pero es exactamente esto.
Tú aquí podrías hacer...
Te puedes hacer la request de Jelp.
Esta.
Un poco para que veáis.
¿Vale?
Base URL.
Cuando tienes la respuesta.
La transformas en JSON.
Cuando tienes la respuesta.
Pues nada.
Aquí ya puedes hacer lo que te dé la gana.
Por recuperar esta...
Vamos a devolver el fetch este.
Y aquí lo que hacemos...
Return.
Aquí sería response.
Bueno.
Vamos a poner aquí response.
Response.
Y aquí recent.
Response.
¿Vale?
Esto tan sencillo como esto es como envolver un poquito la aplicación.
La API externa.
Y si el día de mañana cambia la API externa, pues genial.
Porque así ya sería totalmente transparente para tu aplicación.
Pues eso.
Vamos a ver un poco el tema.
Mira, me gusta que tiene aquí el emoji.
Lo malo de los emojis, de utilizar emojis como iconos, es que en cada...
En cada sistema se va a ver totalmente diferente.
Que lo tengas en cuenta que...
Bueno.
Au.
Chacapam.
Pues eso no funciona.
More.
Tampoco hay más.
Bueno.
Cervecería catalana.
Oye, pues eso sí que...
Eso era...
Ah, porque he encontrado mi localización.
Barcelona.
Claro.
Claro, claro.
Uy, pero le he dado ahí al like y...
Bueno, el diseño se puede mejorar, ¿eh?
Un poquito.
El diseño está bastante...
Bastante justillo.
Bastante justillo.
A ver, vamos a darle.
Mira, aquí el playholder este no reviews.
Y luego te salen las reviews.
No.
Cuando estamos cargando, pues...
No...
No le pongamos no reviews.
Esto hay que hacer algo.
O sea...
No podemos tener el estado de...
Estoy cargando como si no tuviese reviews.
No.
Si estamos cargando reviews, puedes poner playholders.
Puedes poner un montón de cosas.
Pero no le pongan no reviews.
A mí, al menos, me ha vuelto aquí como...
¿Qué ha pasado ahí?
¿Qué ha pachado?
Mira, a ver.
Detalles.
Esto no va.
Spanish.
Es que no sé si esto es clicable por algo o...
Pero bueno.
Bueno.
A ver.
A ver.
El diseño está de aquella forma.
Pero bueno.
A ver.
Vamos a ver un poco el...
Qué tal el...
El tema de...
A ver.
Esto lo he comentado alguna vez.
¿Vale?
No pasa nada.
O sea...
No pasa nada hacer esto.
Pero yo intentaría que este tipo de dispatch y tal...
Esto lo hagáis en un custom hook.
Para que no llenéis vuestros componentes de llamadas a Redux de bajo nivel.
¿Vale?
Esto es lo que os recomiendo para que lo evitéis.
Results Detail.
Lo es igual.
Porque si no vais a estar llenando esto de todos los...
A todos los sitios.
Hostia.
Esto es muy raro.
Esto.
Path ID.
A ver.
A ver.
Esto del Path ID.
Path ID.
Results Detail.
A ver.
Si yo pongo tacos.
Barcelona.
O sea.
No entiende tacos.
Ahora sí.
¿De dónde será esto?
Es que este Path ID así.
Tal cual.
Es un poco raro.
Tener que hacer un location.
Punto Path Name.
Punto Split.
Cuando normalmente deberías ser capaz de recuperar.
Si esto es parte de las rutas.
Si tienes las rutas por aquí.
No sé si.
A ver si las encontramos.
Actions.
Pages.
Reducers.
Pages.
Reducers.
App.
A ver si tengo aquí las rutas.
Sí.
Pues en principio.
Este.
Esto que ha hecho aquí.
Este.
Bith.
Barra.
Este.
Dos puntos ID.
Esto lo debería poder recuperar fácilmente.
Esto no hace falta.
A ver.
¿Dónde estaba?
Aquí.
Pues eso.
Que no hace falta hacer esto.
Que haya hecho así.
Este Path ID.
Se puede recuperar directamente de los parámetros.
Creo que hay un hook.
Además que se llama.
Use Params.
Si no me equivoco.
Ya.
Se lo puede recuperar.
Directamente.
Venga va.
Vamos a volver a tu web a juicio.
Virtual Health.
El Jelp Clone.
Jelp Clone.
Lo hemos visto ya.
Check.
Rick and Morty.
Hice esta app usando React.
Muy bien.
Venga.
Vamos a ver.
Rick and Morty and React.
Rick and Morty.
Rick and Morty and React.
Muy bien.
Hostia.
Qué bueno.
Hostia.
Esto me recuerda que hace tiempo que no veo Rick and Morty.
No sé cómo estará la cosa.
Welcome to Rick and Morty and React.
This is React app that uses the fantastic Rick and Morty API.
Muy bien.
Muy buena API.
La verdad.
Latest search.
Vale.
Pues voy a buscar Rick.
Por ejemplo.
Oye.
Me gusta bastante.
¿Eh?
Como está hecha.
A ver.
Es una página simple.
Pero está bien.
Están las cosas alineadas.
A ver.
Morty.
Oh.
Eh.
Eh.
Eh.
Eh.
Eh.
Eh.
Eh.
Eh.
Eh.
Aquí hay un error de estado.
Esto ha añadido.
Ha hecho un append.
¿Sabes?
Me ha añadido resultados al final.
Nope.
Nope.
Alien.
Sí.
Me lo está añadiendo al final.
Eso, hombre.
Para ser la búsqueda.
Y para tener eso.
Tampoco era muy difícil.
Bueno.
Bastante sencilla.
Pero tiene buena pinta.
Me gusta.
Va bastante.
Va bastante fina.
La verdad.
A ver.
Entiendo que es para lo que es.
Para probar cosillas.
Así que nada.
Vamos a ver el código.
A Camilo.
Y vamos a echarle un vistazo.
A ver.
Mira.
Utiliza este formato de commits.
Que está bastante interesante.
Venga.
Vamos a ver en el web editor.
Que esto no guija Cotspaces.
¿Vale?
Para que lo recordéis.
Hombre.
Ha utilizado Cypress y todo.
¿Eh?
Mira.
Muy bien.
Le ha puesto un readme.
Muy bien.
Genial.
Add Gitmoji hook.
Gitmoji.
Ese es el que está utilizando.
Para los commits.
Gitmoji.
No soy muy fan.
¿Eh?
De Gitmoji.
Pero bueno.
To consider.
If some change is not reflected.
Probably is the service worker.
Bueno.
Just clean up.
Si los service workers.
No sé si lo sabéis.
Pero service workers.
Los han cargado.
Los carga el diablo.
Hay veces.
Hay compañías.
Mira.
Service worker.
Buy.
Domain.
Because of it.
Hay compañías.
Ah.
Ahora.
Es que de esto hace tiempo.
Pero hubo una compañía.
Que por utilizar service worker.
Tuvo que comprarse.
Mira.
Service worker.
Is dangerous.
Is dangerous.
Qué bueno.
Bueno.
Esto por un tema de ataques.
Bueno.
Qué pasa.
Que los service workers.
Al final.
Con la caché.
Tú lo que puedes hacer.
Es cargarte la experiencia del usuario.
Porque si cacheas.
Y no permites.
Que se vuelva a actualizar.
El service worker.
O lo que sea.
Pues te lo puedes cargar.
Por suerte.
Y esto ya lo arreglaron.
Y lo que te permitía.
Es que podías.
De registrar.
Un service worker.
Que antes.
Al principio.
No se podía.
Pero bueno.
Me ha hecho gracia.
Porque me ha recordado esto.
Muy bien.
Hombre.
Muy bien.
Mox y tal.
¿Cómo se hace para añadir emojis a los cómics?
A ver.
Pues súper fácil.
Para empezar.
O sea.
Simplemente.
Si vosotros estáis aquí.
TMP.
TMP.
O sea.
Solo tenéis que hacer esto.
Escribir aquí el emoji.
Puedes el emoji.
Y ya está.
Bueno.
Ahora.
Porque no le gusta a mi máquina que haga estas cosas.
Uy.
Pues es verdad.
Tenéis razón.
No me ha salido.
Pero.
Pero se puede.
Porque yo lo he hecho.
Si no.
Lo que utiliza él.
Que es lo interesante.
Es esto.
Gitmoji.
¿Vale?
Gitmoji.
Tienes un montón de emojis.
Dices.
Si mejoras la estructura.
Si no sé qué.
No sé cuánto.
Y esto.
Lo que puedes hacer es instalártelo.
Básicamente.
Con el Gitmoji.
Chainlog.
Gitmoji.
No sé qué.
Y esto tú le eliges.
Cuál es el cómic que te hace.
Y te deja esto de aquí.
Y ya está.
¿Cuál es el problema que le veo yo?
Que esto.
Aquí cada uno.
El tema es que tiene demasiados.
Tiene demasiados.
O sea.
Se les va de las manos.
¿Por qué?
Porque hombre.
Art.
Zap.
Firebook.
Al final se hace un poco cansino.
Yo intentaría tener menos.
A ver.
Al final cada uno decide cuánto se utiliza.
Pero es verdad que.
Por ejemplo.
Aquí queda bastante bien.
Porque solo ha utilizado cuatro o cinco diferentes.
Pero está bastante bien el de Gitmoji.
Además desde un desarrollador español.
Si no me equivoco.
Así que.
Está.
Está.
Está chulo.
Mira.
Este es el Gitmoji.
Click.
Que con este.
Es el que te sale la lista.
Mira que Gitmoji.
¿Ves?
Ahí te sale la lista de los que puedes utilizar.
Y entonces ya directamente.
Pues solo tienes que escribir.
Pero fíjate.
Es que hay un montón.
Hay un montón.
Pero ¿ves?
Ahí te sale una lista como para elegir.
Ah.
Que pues quiero que haga esto.
Quiero que haga lo otro.
Ahí lo tenéis.
¿Vale?
Pero sí.
Es que hay un montón.
Un montón.
Es que he visto algunos que se pasan un poco de utilizar demasiados emojis.
Bueno.
Vamos a ver aquí.
¿Qué tiene por acá?
Type compact.
Si es compact este.
Si no este.
Hmm.
Hmm.
Hmm.
Hmm.
Estoy mirando aquí.
Bueno.
Vale.
Uf.
Esto es React Memo.
No hace falta hacerlo en todos los componentes.
Carácter.
Bueno.
Este link.
Por ejemplo.
Podría estar aquí fuera.
Aunque yo evitaría.
Dentro de un componente.
Crear esto.
Location ID.
Data.
Location.
.url.
.replace.
Este tipo de transformaciones.
Mejor si la hacéis fuera del componente.
Mucho mejor.
Además.
Date location.
Es que claro.
Fíjate.
Además esto se lee difícil.
Mira.
Para empezar.
Primero.
Extrae los datos que vas a utilizar.
Pues por ejemplo.
El origin.
Y también el location.
De dónde lo sacas.
De data.
Vale.
Pues entonces ya tienes aquí el data punto.
Que te puedes empezar a cargar.
¿No?
Data punto.
Del origin.
No sé qué.
No sé cuánto.
Pam.
Esto para empezar.
Luego.
Hmm.
Hmm.
Location.
Data.
Location.
URL.
Es que.
Esta es lo que se hace aquí.
Es muy similar.
A lo que se hace aquí.
De hecho.
Es que me parece que es lo mismo.
O sea.
De lógica.
Si no.
Si.
O sea.
Es que es lo mismo.
Entonces.
Yo crearía una función.
Porque es que se lee un poco raro.
Create location.
Que aquí le puede poner.
El.
URL.
El name.
Y.
La id.
Vale.
Y aquí.
Pues harías.
Un.
Retune.
Que si.
Tienes name.
Vale.
Pues si tienes name.
Ah no.
Perdón.
Si la URL.
Es igual a vacío.
Entonces.
Devuelves el name.
Y si no.
Pues pones todo esto.
Y todo esto.
Esto sería location.
Esto sea la id.
Y esto sería el name.
Fíjate.
Que.
Que.
Que bien ha quedado.
Esta función.
Súper fácil.
Súper chiquitita.
Y esta función.
La puedes reutilizar ahora.
Para hacer todas estas cosas.
Que estabas haciendo por aquí.
De hecho.
Este es location id.
Vale.
Location id.
Perfecto.
Pues ahora ya puedes hacer aquí.
Location link.
Haces un create link.
Le pasas.
El.
Es que además de location.
Puedes pasar.
Puedes hacer diferentes formas.
Pero bueno.
Vamos a hacerlo así.
Location.
Un punto url.
Luego la id.
Sería location id.
Y luego lo que puedes hacer.
También.
El location id.
Nos faltaría el name.
Que esto es location punto name.
Otra cosa que podrías hacer todavía.
Mejor.
Bueno.
Mejor.
En este caso.
Bueno.
Esto ya se eliminaría.
Se eliminaría.
Y esto igual.
Ya tendrías el origin link.
Que esto.
Sería con esto mismo.
Solo que.
Bueno.
Esto lo moveríamos aquí.
Esto podría ser.
El principio.
Podríamos origin.
Y tal.
Entonces al menos.
Ya está en un solo sitio.
Como crear los links.
Yo incluso.
Iría a más.
Que es que.
Es un poco raro.
Todo esto.
Lo que está haciendo.
Podrías.
No sé a qué se refiere.
Con origin.
Y location.
Me imagino que es un tema.
De él.
Del propio.
Del código o algo.
Claro.
Del location origin.
Pero.
Esto.
Le podrías pasar.
Todo el objeto.
Incluso.
Sabes.
Podrías ponerle aquí.
Que.
Sacase.
URL.
El name.
De todo.
Entonces.
En lugar de.
Crearle aquí.
Location ID.
Yo lo que haría aquí.
Es pasarle el location.
A saco.
Location.
Y aquí igual.
Lo que harías.
Pasarle aquí a saco.
Es el origin también.
Lo que hacemos es.
Crear el location.
El origin.
Y el origin ID.
Este.
Que se está creando aquí.
Pues esto al final.
Es que lo puedes calcular aquí.
Súper fácil.
Esto lo quitamos el ID aquí.
Y le hacemos.
Que el URL.
Replace.
Hay que pasarle eso.
Y ahora el link.
Link.
Que el link al final.
Bueno.
Lo tiene aquí fuera.
Bueno.
Pues ya estaría.
O sea.
Que esto ahora.
Ya queda mucho mejor.
Pim.
Pim.
Pim.
Pim.
Pim.
Esto es lo que.
Yo creo que.
Se podría hacer.
¿No?
Creo que queda bastante.
Más legible.
Más legible.
Más legible.
Así.
Extraes lo de crear el link.
Fuera del componente.
Y se lee bastante.
Que tienes que hacer alguna cosa.
Mejorar y tal.
Pues es que lo puedes hacer aquí.
Y ya lo tienes extraído.
Vale.
Status.
Mira.
Este es el típico.
La típica cosa.
Que esto.
Suena a componente.
Para no.
Porque esto es utilizar RIA.
Como si fuese un template engine.
Porque si al final.
Tienes esto todo el rato.
Pues esto tiene pintado.
Es un componente.
Que sea el info data.
Vale.
Replace.
Episode.
Replace.
Bla bla bla.
Bueno.
Tiene mocks.
¿Cuál está bastante?
Ay.
Mocks.
Mocks.
No es mocks.
Mentira esto.
Pero he visto que por ahí tenía test.
A ver los test.
Bueno.
Está bien.
El test es.
Vamos a ver.
Que algo se renderice.
Oye.
Algún día.
Algún día.
Me encanta la promesa.
¿Qué es un mock?
Un mock.
Básicamente.
Es cuando se hace pasar.
Algo por otra cosa.
¿Vale?
O sea.
Por ejemplo.
Si no puedes tener la llamada.
Una API.
Pues lo que haces.
Es mockearla.
Que lo que quiere decir.
Es que haces.
Como si existiese esa llamada API.
Como si estuviese devolviendo.
La información que tú quieres.
Por ejemplo.
Pues yo que sé.
Imagínate que es una API.
Que te devuelve.
Una lista de resultados.
Pues podrías tener aquí.
Mocket response.
¿No?
Y entonces tenéis results.
Y tú.
Pues aquí tenés lo que quiera.
¿Para qué es útil la mock response?
O la respuesta.
O moquear cosas.
Porque hay veces que no tienes acceso.
A esa API.
O porque es muy lenta.
O porque no te interesa.
O quieres probar diferentes casos.
Que puedan ocurrir.
Que la API no devuelva resultados.
Lo que sea.
Hablo de la API.
Pero no solo para la API.
También se puede moquear.
Por ejemplo.
Un método del window.
¿Por qué?
Pues porque a lo mejor.
No quieres que realmente.
Se llame al window.alert.
O quieres moquear la consola.
O sea.
Al final.
Es como simular alguna cosa.
¿Vale?
Mock.
No sé exactamente cuál es la traducción al castellano.
Mock en castellano.
A ver cómo es.
Mock en castellano es.
Burlarse de.
No creo que signifique eso.
Pero básicamente es como hacerse pasar por otra cosa.
¿Vale?
Episode card.
Class name.
X.
Hostia.
X.
List of episodes.
Bueno.
Está bien.
Tiene un custom hook.
Interesante.
Location card.
He visto que tenía redax también.
Si no me equivoco.
Hooks.
Mira.
Aquí tiene unos cuantos custom hooks.
Ideas.
Push.
Y limit.
Push.
Base.
Hostia.
No entiendo muy bien qué es esto.
Vale.
Entiendo.
O sea.
Ideas.
Esto es como para.
Si tú tienes aquí 52.
Puedes poner 53, 54, 55.
Bueno.
Creo que se podría hacer de otra forma.
Pero.
Está curioso.
Vale.
Con cat.
Set load fails.
Bueno.
Custom hooks.
Bien.
Mira.
Esto lo podrías extraer.
Esto lo podrías extraer.
¿No?
A una función.
Que lo estás haciendo aquí todo el día.
Pero que lo estás haciendo todo el rato.
No hace falta que lo hagas todo el rato.
Bueno.
Pues.
Está bien.
Está bien.
Me ha gustado.
A ver.
Tiene el problema este que debería arreglar de las búsquedas.
Pero bueno.
Es sencilla.
Pero bueno.
Parece que le ha servido para aprender.
Pues.
Bueno.
Fantástico.
Venga.
Vamos con el.
Next.
RSBMK.
Esta app la comencé como práctica.
Pero ahora la quiero llevar más allá.
Así que se aceptan todos los PRs posibles.
Madre mía.
Le dediqué madrugadas a este proyecto.
Con la fe de que Midudev hiciera un vídeo.
Haciéndole PR a este proyecto.
Pero viendo la lista enorme que le falta por revisar.
Ese sueño se desvanece.
Pobrecito.
RSBMK.
Tu sueño no se va a desvanecer.
No te preocupes.
No te preocupes.
Le dediqué.
Bueno.
Pero la fe es lo último que se pierde.
Bueno.
Lo último.
Tienes toda la razón.
Midudev si tienes tiempo revisa mi tarea.
Joder.
Tu tarea.
También.
Pero bueno.
Que me mandáis deberes.
Maps.
Bueno.
Esto es un buscador de superhéroes.
Midudev.
Vamos a buscar a Midudev.
Superhéroe Midudev.
No está Midudev.
Speedy.
Speedy sí que está.
Spider-Wen.
Spider-Girl.
Spider-Girl también.
Spider-Man de 1602.
Este que es el callejero.
¿Quién es este?
Tiene ojos de chica.
Spider-Man 2099.
Este creo que se llama Miguel.
Spider-Man de 2099.
Creo que se llama como yo.
Spider-Man Zombie.
Tía.
Mala cara tiene.
Spider-Man.
Bueno.
Muy bien.
Spider-Woman.
Spider-Girl.
Spider-Woman.
Spider-Wen.
Spider-Man.
Spider-Ham.
Joder.
¿Cuánto Spider?
Spider-Lego.
Bueno.
Bueno.
Bueno.
A ver.
Se ve.
Maps.
No sé qué significará.
Se ve bien la aplicación.
Mira.
Dark Mode.
Ojo.
Dark Mode.
Muy bien.
Ahí con el efectillo.
A ver.
Un problema que suele haber en este tipo de aplicaciones.
Al menos a mí.
Que yo recomiende.
¿Vale?
A ver.
Necesitan.
Las aplicaciones.
O sea.
Las webs necesitan respirar.
Necesitan espacio.
¿Ok?
Necesitan.
No sé.
Y aquí veo que hay una falta de padding que hasta me pone nerviosa.
Me pone nervioso.
¿Por qué?
Porque es que no hay padding aquí.
No hay padding aquí.
No hay padding aquí.
O sea.
Es del palo.
Déjame vivir.
Déjame espacio para ser persona.
Vamos a ver.
Este input.
Por ejemplo.
Pues yo que sé.
Mira.
Es que este padding.
Este es el padding.
Padding.
Le voy a llamar.
Padding.
Agarrado.
Un padding justico.
Para hacer lo justo.
¿Vale?
Por eso pide ayuda en el diseño.
Ah.
Está bien.
Cafe.
Está bien.
Pero.
Por eso.
Un poquito de padding.
A ver.
Tampoco tanto.
¿No?
Pero.
Algo un poquito así.
Luego.
El truco de los search.
Uno de los trucos de los search.
Es que hay que dejarle bastante padding para la izquierda.
O sea.
Que.
Le dejamos un poco como más.
¿Sabes?
Como más.
Como.
Nunca empezamos el título.
Fíjate.
El título.
Nunca lo empezamos.
Donde está el borde radius.
Porque queda raro.
¿Sabes?
Entonces.
Le empujamos un poco.
Hasta que.
Quede donde está el momento este.
Donde ya empieza a estar recto.
Y si puedes un poquito más.
Puedes un poquito más.
¿Vale?
Pero una cosa así.
Ya se ve un pelín mejor.
Un pelín mejor.
Luego aquí.
Este.
Este botón.
Creo.
El botón es muy chiquitito.
Yo lo haría un poquito más grande.
Y además.
Me da la sensación que no está alineado.
O sí.
Pero tiene algo raro.
No sé.
No sé.
Igual haciéndolo más grande.
Luego.
No sé qué os pasa.
Con los.
Box shadows estos.
No sé si es que los regalan en algún sitio.
Yo me.
No me.
No me enteré.
Pero el box shadow.
Tiene que ser más sutil.
¿Vale?
Porque esto.
¿Qué hemos dicho que parece esto?
Esto parece.
Polvo.
Y no queremos que tengan polvo nuestras cosas.
Entonces lo hacemos más sutil.
Más.
Un poco más sutil.
No hace falta.
No hace falta que se vea el negro.
Porque cuando algo tan blanco.
Se ve ese fondo negro.
Es como que chirría un poco y todo.
¿Vale?
Entonces así un poquito más sutil.
Mira.
Vamos a ver ya.
Con las dos diferencias.
Esto es antes.
Y esto es ahora.
Y ya empieza a verse un poquito más limpio.
Por ejemplo.
En el maps le pasa lo mismo.
Le pasa esto de.
No dejéis que las sombras.
Se vean negras.
Porque es que.
Ah.
Es que de verdad.
Crea un poco de.
¿Qué está pasando aquí?
Que sabes.
¿Qué hay sucio ahí?
¿Qué es lo que está pasando?
Tienen que ser más sutiles.
Porque.
Mira.
Pues ahí con el maps.
Más sutil.
O ni siquiera hace falta que pongáis lo que sea.
Bueno.
Eso.
Es un poco por.
Por decir algo.
Marvel.
Y hay que darle al enter.
Vale.
Ahora el menú este.
Hi.
Login you.
Hi.
Login you.
¿Quién es Login you?
Ah.
Login.
Está aquí.
El menú este habría que darlo a vuelta.
Pero bueno.
No.
No pasa nada.
Me gusta el efectillo este que se queda aquí arriba.
Estaría genial si además se hace más pequeño.
Aquí.
Pues un poco lo que también comentaba alguien.
¿No?
Que se separe más las cosas.
Ya verás que en cuanto lo separemos un poco.
Mira.
Hero list.
Min height.
Magric close.
Bueno.
Por ahora vamos a ponerle un max width.
De 900 píxeles.
Margin 0 auto.
¿Vale?
Vamos a ponerle 1000 píxeles.
Por poner algo.
Pero.
Algo así.
Igual incluso un pelín más.
Le puedes poner una columna más.
Y más gap.
Entre ellos un poquito más de gap.
Y vamos.
Esto.
Grid gap.
Pues un poquito más.
Es que respire esto.
Que no pasa nada.
Es que no pasa nada.
Que respire esto un poquito más.
Vamos a ponerle por arriba 25 píxeles.
0.
Arriba.
Derecha.
Auto.
¿Vale?
Vamos a ponerle que pueda llegar hasta 1200.
Algo así.
Sabes como que no agobia tanto.
¿Vale?
Empieza como a respirar las cosas un poco más.
Y luego.
El tema.
Es que también los paddings están un poco aquí.
¿No?
También le puedes dar un poquito.
Fíjate.
Como estaba esto.
Que.
Es como que.
Dios.
¿Cuántos superhéroes?
Cago en la leche.
Parece que.
Y aquí ya.
Pues.
Como que respira.
¿No?
Todo respira un poco más.
Y eso.
Mira que yo no soy diseñador.
No tengo ni de puñetera idea de lo que digo.
Pero bueno.
Luego aquí igual.
¿Vale?
La car.
Pues.
Padding también.
Padding.
Padding.
Padding.
Padding.
Pau.
Pau.
Piensa en el paun.
¿Vale?
Todo el padding.
Es bueno.
Tampoco hay que pasarse.
Pero fíjate.
Es que le estás poniendo.
Es que eres un poco agarrado con los márgenes.
Pero que si esto.
Tres píxeles.
Pero que significa.
Tres píxeles.
Tres píxeles no es nada.
Y esto tiene que ser un padding.
Porque si no.
Esto te puede colapsar.
Tres píxeles.
¿Sabes?
Del palo.
No.
No.
Es que los tengo que ir dando de uno a uno.
Qué malo.
De uno a uno.
O revienta.
Bueno.
Pues esto.
Un poco igual.
Ahora.
Lo que veo.
Una cosa que veo.
Claro.
Es que el ancho.
De la.
De la.
O sea.
En la altura de las cards.
Las tienes puestas allá.
A fuego.
Eso también puede ser un poco problemático.
Pero bueno.
Y lo mismo con esto.
¿No?
Un poquito más de.
Que sea un poquito más grande.
Que el padding también.
Que tenga más padding.
No sé por qué le ha puesto margen también.
Margen.
Tendría que ser padding.
Cinco píxeles.
No sé cuánto he puesto antes.
Bueno.
Separar un poco.
¿Vale?
En este caso sí que lo podríamos poner solo a la izquierda.
Si lo veis claro.
Pero bueno.
También tenemos que cambiarle la altura.
Que la altura no quede fija.
De hecho la altura.
¿Ves?
Este max height.
Height.
De 310.
Es que al final eso te puede limitar demasiado.
Pero bueno.
Ya me empieza a gustar un poco más.
Ya me empieza a gustar un poco más.
De que respire un poquito la aplicación.
Si tienes tiempo.
Revisa mi tarea.
¿Cuál es su tarea?
Coño.
La tarea era el porfolio.
Venga RSVMK.
Vamos a por tu tarea.
Vamos.
Maps app.
A ver.
Vamos a ver un momento el código.
A ver.
Maps.
Mira.
Oscuro.
Este data provided.
Esto lo puedes poner en el footer.
No pasa nada.
A ver.
Source.
Muy bien.
Slin.
Bla, bla, bla.
Source.
Components.
Vamos a darle al editor.
¿Cuándo se usa padding?
¿Y cuándo se usa margin?
Pues esa es una muy buena pregunta.
Carlos Dami.
A ver.
Básicamente.
Cuando quieres que el padding.
Sería como para empujar.
Sobre todo.
Hacia afuera.
¿Vale?
Y el margin sería más para separar cosas.
El tema es que el padding.
Tú lo que puedes.
El margin puede colapsar.
En el sentido que dos margins.
Se pueden pisar.
Uno encima del otro.
Lo cual no puede pasar con el padding.
Si tú tienes un título con un margin bottom 8 píxeles.
Y el elemento de abajo tienes un margin top de 4 píxeles.
Podrías hacer que estuviese el margin encima del otro.
Con el padding no lo harías.
Se sumarían las dos distancias.
¿Vale?
Entonces normalmente para este tipo de cosa, por ejemplo, tiene más sentido.
Bueno, es que depende.
Los dos podrían tener sentido.
¿Sabes?
Porque hay veces que quieres que haya una distancia mínima cuando hay dos elementos juntos.
Pero no que se junte esa distancia.
Entonces utilizarías el margin.
Pero si lo que quieres es rellenar el espacio, tienes que utilizar un padding seguro.
¿Vale?
Muy bien.
A ver.
Components.
Button like.
Muy bien.
Button like.
Use user.
User context.
User context.
Vale.
Use callback.
Bueno.
A ver.
Tiene bastante historia.
Bastante historia.
Hostia.
Is like.
Todo esto.
Far.
Fast.
Fast.
Esto es una cosa que no me gusta mucho.
Yo esto separaría en un componente para darle más semántica a esto.
Separar los iconos en componentes.
Porque así esta diferencia casi no se ve.
O sea, fíjate.
La diferencia es una S y una R.
O sea, uno no se entera.
Uno no se entera ahí.
Handle click.
Esto no lo entiendo.
A ver.
Si no quieres utilizar este parámetro, pues no lo uses.
Pero no le pongas una barra baja.
Que tampoco se entiende mucho.
Claro.
Exacto.
Dice Meet.
Los margin en elementos block no se suman.
Es lo que he dicho.
Que en los elementos block se puede poner uno encima del otro.
Se toma el más grande en cuenta.
Efectivamente.
Lo que he dicho.
Que si un título tienes un margin bottom de 12 píxeles.
Y abajo tienes un párrafo de margin top de 4 píxeles.
La distancia que tendrás son justamente la máxima.
La que ha puesto el margin bottom del de arriba.
Pues eso.
Que básicamente se queda uno encima.
Es como si se quedase uno encima del otro.
Básicamente.
Que si quieres que no sea así.
Pues tendrás que utilizar un padding.
Padding sería para empujar.
Es rellenar con espacio.
Básicamente.
Vale.
Dark mode.
Use check.
Uy.
Check este está mal escrito.
Ostras.
Pero esto.
Set check.
Local storage.
Si es igual.
Si es igual.
A ver.
Esto.
Esto a veces.
Es que parece que os cobren por las variables.
Vale.
Tú aquí pones.
Is dark.
Pues lo pones aquí.
Te lo pones aquí.
Que yo esto igual.
Del local storage.
Lo sacaría de aquí.
Pero bueno.
Is dark.
Pues haces esto.
¿No?
Esto.
Tampoco pasa nada.
Ahora.
Esto tiene mejor pinta.
Lo que había hecho en la línea 9.
Esto no tiene mala pinta.
Pero bueno.
Esto es local storage.
Por si le ha dado el usuario.
Y el check.
Si lo habías escrito bien aquí.
¿Por qué lo escribes mal aquí?
Amigo.
Hero.
Blight.
Bueno Roberto.
Me voy a tener que ir.
Que he quedado con unos amigos.
Para cenar.
Pero en el próximo web a juicio.
Vamos a revisar tu portfolio.
Que no se diga que no lo hice.
¿Vale?
Me tengo que ir.
Me tengo que ir.
Porque tengo una cena.
Que es.
Fueron los cumpleaños de un par de amigos míos.
Y entonces.
Pues nada.
Los tengo que ver.
Que luego me dicen.
Que si no.
Me tienen que ver por Twitch.
Con razón.
Pero les he dicho.
Mira.
Si.
Si os suscribís a mi canal en Twitch.
Entonces quedamos.
Y nos tomamos una cerveza.