Os cuento cositas. Ayer hicimos el tema de los pronósticos, de forma que ya podíamos votar.
¿Ves? Tu voto, voto a este, tu voto, nos faltan cosas, ¿no?
Pero al menos ya podías votar y cuando refrescabas salían aquí tus votos y ya se guardaban y esto se está guardando en una base de datos.
Pero ayer la lié parda. Ayer rompí la página web. La rompí a lo bestia. Se petó, petó la página web.
¿Qué pasó ayer? Bueno, lo que pasó ayer, lo que pasó ayer, os explico.
Cuando me fui ayer, despedido, sí, sí, me escribió gente, me dijo, oye, que la página no funciona.
Bueno, resulta que ayer cuando me fui, la página daba un error 500.
¿Por qué pasó esto? Pues que teníamos un error bastante grave.
Y es que resulta que, a ver, vamos a abrir el, vale, resulta que ayer cuando me fui por todo lo alto,
yo me fui por todo lo alto y no habíamos publicado los cambios de la base de datos.
La base de datos la teníamos en local, que, oye, muy bien, funcionaba en local perfectamente.
Aquí habíamos hecho la configuración, ¿vale? Teníamos aquí, esto lo teníamos vacío, hoy lo pondremos.
Pero el problema es que sí que funcionaba en local, pero no funcionaba en el servidor.
Y es que resulta que teníamos que hacer cositas. Y aquí lo teníamos, ¿vale?
Lo que nos indica Astro Studio, que es lo que estamos utilizando para el tema de la base de datos,
es que tenemos que hacer la build, tenemos que añadirle el guión guión remote, ¿vale?
Que ya veis aquí que lo he hecho. Y entonces os voy a explicar paso a paso cómo lo arreglé para que no os pase.
Así que lo primero que tendríamos que hacer es añadir esto. Esto lo que va a hacer es que cuando haga la build
de nuestra aplicación, va a asegurarse que la conexión que utiliza de la base de datos va a ser la remota,
no la local. Porque claro, si intenta utilizar otra vez la local, cuando esté en producción no va a poder utilizar
la base de datos porque no la va a poder crear en local, ¿vale? No va a tener acceso y no le va a funcionar.
Y ese era el error que estábamos teniendo, ¿vale? Ese es el primero.
Ahora, tened cuidado con esto. Esto de remote es interesante solo para cuando vayáis a hacer el despliegue a producción.
Si lo hacéis en local, tened en cuenta que entonces la base de datos que utilizaréis será la remota.
¿Me puedes recomendar un curso de LangChainJS? Quiero hacer un LLM chatbot que pueda consultar a la BD y otros recursos externos.
No tengo ni idea. No se me ocurre un curso de LangChainJS. Lo siento, sé cuál es la tecnología, pero no conozco ningún curso, la verdad.
Entonces, primero esto. Pero todavía hay más cositas, no os creáis.
Lo segundo que tuve que hacer era poner el token del Astro Studio AppToken. ¿Veis? Pone crear un token de tal.
Lo que había que hacer con esto es ir a AstroDB, nos vamos aquí, entráis a Astro Studio, aquí a la derecha, y aquí, iniciais la sesión con GitHub, pam, pam, pam.
Y aquí entre los proyectos, ¿ves? La velada web oficial. Pues aquí, si vamos a Settings, creo que es, le dais a Tokens.
A ver, voy a ver que el token no aparezca, que la puedo liar. Vale. Le dais a Tokens y en Tokens, pues generáis un token.
En este caso, pues podéis poner Vercell, ¿vale? Yo puse Vercell y aquí me creo este.
Te lo copias y entonces vas a la página de vercell.com y lo ponéis en las variables de entorno.
Así que os vais por aquí, la velada web oficial, vais a Settings, en Environment Variables, aquí, pues añadís la de Astro Studio Token,
esta de aquí, y le ponéis el token que os ha creado aquí, ¿vale? Y lo guardáis. ¿Veis? Yo lo tengo aquí y lo hice hace 22 horas, justamente ayer cuando terminó.
O sea, justamente ayer cuando terminé el stream. ¿Vale? Esa es otra. Entonces ya tendríamos lo del remote y lo del token.
Pero todavía hay más, porque hasta aquí todo bien, pero nos faltaría también enviar los cambios de la base de datos a producción.
No tengo muy claro que fuese 100% necesario enviar el esquema, pero al menos yo lo hice por si acaso, por si acaso.
Porque, a ver, a ver si os lo enseño. Por dónde era esto, AstroDB, ¿vale? Y os enseño el... Aunque luego lo vamos a tener que hacer igualmente, ¿eh?
Luego lo vamos a tener que hacer. Aquí, Astro Studio, ¿veis? Pone Astro Studio, se puede conectar y tal.
Y pone tu esquema de la tabla puede cambiar conforme el proyecto va creciendo.
Y puedes probarlo en local, que es lo que hicimos ayer, y luego puedes desplegarlo a tu base de datos del estudio.
Entonces, aquí te dice cómo puedes desplegar el esquema, que el esquema es lo que tendríamos aquí, ¿vale?
Cómo puedes desplegar esto en el estudio del remoto, ¿no?
Entonces, para hacerlo, tendrías que hacer el push. Y además, si quieres, puedes enviar la base de datos que tienes local y enviarla a la nube.
Y para hacer eso, lo que podemos hacer aquí es esto.
Haríamos el Astro Build Remote, esto para hacer el Build Remote si queremos.
Esto es un poco peligroso, pero tened en cuenta que también puedes levantar entorno de desarrollo con la conexión remota.
Pero tened cuidado, porque esto va a conectarse a la base de datos remota.
Y finalmente, tendríamos que hacer el push, este que no veo, este, el pushing data, esto.
Podéis ejecutar el AstroDB Execute por lo que queráis. Esto lo queréis enviar también a la base de datos remota.
Esto lo vamos a hacer después, ¿eh? Porque lo vamos a necesitar, pero solo para que lo sepáis.
Así que, ¿os acordáis que ayer dije, no me voy a leer la documentación, que más o menos ya sé lo que hay que hacer?
Pues me dio en toda la cara.
Pues así de claro. Me dio una hostia de vuelta y vuelta. Eso es lo que me pasó.
Exacto, me la he leído. Efectivamente.
Efectivamente. Ahí está. Qué risa. Eso es lo que pasó.
Que me dio una hostia por no haberme leído la documentación.
Qué risa. Vale, pues con esto ya teníamos el tema de los pronósticos, ¿vale?
Vamos a arreglar cositas. Vamos a arreglar cositas, ¿vale?
¿Por qué? Porque resulta, amigos, que tenemos algunas cosas que tenemos que arreglar.
Una cosa que tenemos que arreglar. Vale, yo os he contado cómo configurar todo esto.
Una cosa que tenemos que arreglar es qué pasa si cuando vota el usuario algo va mal.
Tenemos que hacer un rollback de la UI.
Y esto está bastante chulo porque os voy a contar un concepto que en el mundo de la programación web es súper importante y que si utilizáis Twitter, Facebook y tal, pues habréis visto muchas veces que se trata de actualizaciones optimistas.
Actualizaciones optimistas. Es un tema muy interesante que hay muchos frameworks que te lo hacen automáticamente.
Ria Query, sin ir más lejos, te lo hace automáticamente.
Pero para que nos hagamos una idea de cómo funciona, mira, voy a abrir esto para que veáis, ta, ta, ta.
A ver si inicia la sesión y para que veáis, ¿vale?
Rollback de la UI, sí. Eso es lo que vamos a hacer. El rollback de la UI.
Mirad. Imaginad que yo voy a poner aquí que tengo que va a 3G, a 3G.
¿Vale? Y fijaos que le voy a dar like y aquí se ve que ya está el like, aunque todavía aquí no ha terminado de hacer la petición, ¿no?
Y lo mismo si lo quitamos. Si lo quitamos, fijaos que la petición no ha terminado y lo que hace normal...
O sea, no sé por qué me la ha vuelto a añadir. ¿Por qué me la ha vuelto a añadir?
¿Vale? No sé por qué me la ha vuelto a añadir.
Ah, porque, claro, porque está actualizando más tarde. Porque como está actualizándolo más tarde, pues justamente por eso, ¿no?
Porque aunque lo quite y lo tal, como no se ha actualizado, pero lo que podemos ver es que tú lo añades, lo quitas,
y aunque aquí todavía ha tardado y no lo está haciendo, ves, ahora me está dando un error, de hecho.
Por eso me está haciendo el rollback de la UI. Porque parece ser que hay un error. Ese es el problema.
¿Ves? Me está dando un error. Como me está dando un error, lo que hace primero es actualizarlo,
que parece que vaya bien, y luego es que me hace el rollback de la UI.
Luego lo ha vuelto a intentar y parece que haya funcionado bien.
Pero esa es un poco la idea. La idea es que primero actualiza la UI, luego lo intenta,
y una vez que lo intenta, entonces lo deja o no lo deja.
Si ha habido un error, hace un rollback de la UI y ya está.
Y esto es una muy buena práctica porque lo que estamos haciendo es enseñarle al usuario
que algo ha pasado cuanto antes, ¿vale?
Entonces, eso vamos a hacer, que de hecho ya lo estábamos haciendo.
Y vamos a ver cómo lo estamos haciendo.
Mirad, si nos vamos al vote.astro, voy a hacer una cosa.
Si por lo que sea, vamos a hacer que falle, ¿vale?
Que falle el combat ID. Vamos a hacer que falle esto.
Que por lo que sea, no llegue a cambiar nada de la base de datos.
Imaginad que pongo, que vamos a evitar este código y siempre da un 400, ¿vale?
Que siempre da un 400.
Y le voy a dar aquí a votar, ¿vale?
Voy a quitar aquí, que he puesto el 3G y ahora esto va lentísimo.
Vamos a quitar esto para que no tengamos el throttling, ¿vale?
Vale.
Entonces, vamos a poner desktop.
Vale, fijaos que aunque ha fallado la API, el problema es que se queda esto perfectamente.
Como que ha ido bien, pero la realidad es que este voto se está reflejando mal.
Porque estamos haciendo una actualización optimista, pero no estamos haciendo el rollback.
Tendríamos que hacer un rollback de la UI cuando esto falla.
Así que vamos a hacer eso.
Vámonos aquí y simplemente lo que vamos a intentar es guardar donde habíamos hecho aquí el cambio.
Vámonos.
¿Ves? Aquí tenemos un console.log.
Vale.
Pues en lugar de un console.log, aquí vamos a decir que si la respuesta no ha ido bien, ¿vale?
Vamos a llamar a un método que le vamos a llamar...
¿Dónde podemos poner el método este?
Vamos a ponerlo aquí.
Rollback UI.
¿Vale?
Y el rollback UI básicamente vamos a tener que el botón que tenemos actualmente,
vamos a quitarle la clase que le habíamos añadido, esta clase que le acabamos de añadir,
y el que habíamos votado previamente, vamos a volver a indicar que es el que tiene el voto.
O sea, el que tenía el voto antes es el que lo vamos a dejar.
Eso sí existe.
Por eso tengo esto.
Porque vamos a revisar que existe.
A lo mejor no existe.
A lo mejor no habíamos votado todavía.
Este rollback UI lo vamos a llamar en dos supuestos.
Uno, si la respuesta que devuelven no es correcta, esto significa, por ejemplo, un 400 o un 500 o un 404 o lo que sea, ¿vale?
Que esto es un error común que mucha gente comete.
El catch, el catch, que también es importante, esto no entra aquí si nos devuelve un 400.
Esto es muy importante, porque es un error muy, muy común.
De hecho, para que veáis lo que os digo, fijaos que voy a ponerlo, esta es la respuesta.
Fijaos, res.status.
Status, status.
¿Vale?
Fijaos este console que tengo por aquí.
Si yo aquí fallo, porque ya sabéis que ahora está fallando la API, le doy, y miramos en la consola,
fíjate, esta es la respuesta.
O sea, que ha entrado en el den.
Tenemos que mirar aquí, si la respuesta no es ok, entonces, pues vamos a hacer el rollback de la UI.
Y aquí ya, pues, podríamos hacer un return.
Y aquí luego podríamos hacer otra cosa.
Pero bueno, por ahora, vamos a hacer esto.
Si no ha ido bien, pues, hacemos el return este.
¿Vale?
Y también aquí este catch.
¿Cuándo entra entonces aquí en el catch?
Buena pregunta.
Esto normalmente entra si ha habido un error de conexión.
No tanto de la petición, de cómo se ha resuelto la petición, sino más bien que has perdido conexión,
que no se puede hacer la petición por algo más a nivel de protocolo y cosas así.
¿Vale?
Pero no porque haya hecho una respuesta con un error.
Que eso ya os digo que entra en el den.
Pero igualmente aquí, pues, vamos a poner rollback UI.
¿Vale?
Para que también haga rollback UI.
Y por ahora con esto, pues, ya lo tendríamos.
Si ahora le damos aquí un clic, ¿vale?
Fíjate que le doy clic, pero, aunque optimísticamente sí que lo hace,
fíjate que luego vuelve a donde estaba el voto anteriormente.
Esto ahora va muy rápido porque lo estamos haciendo así.
Pero bueno, que podríamos hacer, yo que sé, si hacemos un set timeout,
que esto devuelva la request esta después de un segundo, ¿vale?
Y todo esto lo comentamos.
Que no sé si esto, creo que esto no le va a gustar.
No le va a gustar más que nada porque debería devolver una respuesta.
Pero bueno, a lo mejor.
¿Vale?
Y le damos.
¿Vale?
¿Ves?
Un endpoint tiene que devolver una respuesta.
No sé qué es o cuánto.
Tiene que devolver una respuesta.
Bueno, pero como esto sí que es así que await,
entiendo que aquí lo que sí que podríamos hacer,
vamos a poner aquí un delay.
Cons delay.
Solo para enseñar esto.
¿Vale?
Que esto devuelva una promesa.
Y así hacemos aquí una wait delay de 1000.
Y ya devolvemos esto.
Y ya está.
¿Vale?
Así esperará un segundo antes de devolver el error.
¿Vale?
¿Veis?
¿Veis que ahora ha hecho como cuando falla la API?
Dice, no, no.
Lo has intentado.
Te lo he mostrado,
pero luego estoy haciendo el rollback de la UI
para que lo veas claramente.
Esto lo hace tanto lo hace Twitter,
lo hace Facebook,
lo hace un montón de redes sociales,
lo hacen para eso,
para que parezca que es inmediato,
pero realmente,
realmente,
seguro que te ha pasado alguna vez
que le has dado like a algo
y luego has dicho,
pero si yo le había dado like
o has puesto un comentario,
que has hecho un comentario,
le has dado al enter,
te has ido
y luego dices,
pero si ya había puesto un comentario.
Pues eso,
porque muchas veces,
¿qué es lo que pasa?
Pues lo que pasa es que,
aunque tú habías visto visualmente en la UI
el comentario,
lo cierto es que todavía estaba haciendo la petición.
Eso también a mí me ha pasado un montón de veces en YouTube
que me da un montón de rabia
porque en YouTube,
no sé por qué,
el comentario tarda mucho,
entonces me tengo que asegurar.
Y a veces he comentado,
me he ido
y luego ha desaparecido.
Y digo,
pero si yo esto lo he comentado.
O sea que,
básicamente para que veáis
que esto es una cosa que pasa mucho
y esto es lo que hay detrás.
Mira,
a zamblar también le pasa mucho en YouTube.
¿Ves?
Como pasa,
a mí también me pasa.
Pues para que sepáis un poco
cómo funciona la página web,
¿vale?
Incentivando a la demencia.
Qué bueno ese comentario,
me ha gustado.
Vale,
pues vamos a comentar todo esto
y vamos a hacer otra cosa.
Una cosa importante.
Vale,
esto ahora es porque se le está yendo a Astro.
Vale,
vamos a hacer una cosita importante.
Vamos a modificar un poco nuestra base de datos.
¿Por qué?
Habíamos dejado aquí una cosa por hacer.
Hostia,
no sé.
Hostia,
¿por qué?
Me ha borrado aquí cosas.
Ah,
me ha borrado cosas.
Vale,
me ha borrado cosas
porque como no las utilizaba,
me las ha,
me ha borrado los impos.
La madre que lo parió.
Vale,
ya está,
ya está.
Total,
como no hemos tocado nada ahí,
ya lo dejamos así.
Esto lo movemos aquí.
Esto se me está quejando
porque esto debería ir aquí.
Vale,
vale,
vamos a hacer una cosa.
¿Veis que aquí tenía un to do?
Que era validar que el voto
fuese un voto válido.
Que debería ser
o un equipo
o un boxeador.
Y esto es porque en los combates
tú lo único que podrías votar
sería o el boxeador Agustín 51
o el de carrera.
El boxeador de Guañar
o la Cobra.
O sea,
solo puedes votar a uno de estos.
No debería tener mucho sentido
votar a alguno que no sea de estos.
Vale,
pues lo que vamos a hacer aquí
para asegurarnos
y para ver un poquito más
de las bases de datos estas
que están bastante interesantes
es crear otra constante aquí
que le vamos a llamar
VoteSelections.
¿Vale?
Para que sean como las selecciones
que puedes tener en los votos.
Y aquí vamos a poner,
a ver,
como demasiado,
vamos a poner ID
y vamos a poner
Column.Text
Primary Key
True.
¿Vale?
Le vamos a poner una ID
y ya está.
Y ahora
lo que podemos decirle
es que este VoteId
que era del tipo texto
podemos hacer una referencia
referencia
y decirle que esto
va a referenciar
al VoteSelections.id
Y ahora
solo con esto
ya,
ah no,
.columns,
perdón,
.id.
Solo con esto
ya está creando
como una referencia
y va a obligar
que este VoteId
sea uno
de los que están aquí.
¿Vale?
Porque si no,
no funcionará.
Si nos inventamos aquí
la referencia
no funcionará.
A ver,
podríamos hacer esto
de diferentes formas
pero lo voy a hacer así
para que veamos
cómo crear referencias
porque me parece
bastante útil
y también para ver
si va a fallar
o no a fallar
si alguien intenta votar
con algo que no existe.
Pero así
pues nos evitamos
algunos problemas.
Ahora,
también tenemos que poner aquí
que en las tablas
tenemos el VoteSelections
¿Vale?
Y ya tendríamos aquí
este VoteId
ahora tiene que referenciar
a estas tablas.
Lo malo es que esta tabla
necesitamos tener
todos estos valores,
los boxeadores,
boxeadores,
en el caso este
los equipos
y necesitamos
que estén
en la base de datos.
Para eso
podemos utilizar
la semilla.
La semilla
no es que vamos
a plantar un árbol
sino que la semilla
lo que nos permite
es crear
o inicializar
nuestra base de datos
con la información
que queramos
y además
cada vez que tú
cambias este archivo
se ejecuta
para llevar
esta información
a la base de datos
lo cual hace
que sea bastante útil.
Lo primero
vamos a traernos
los combates,
la constante
de los combates
y aquí
vamos a tener
que todos los equipos
ah mira
y vamos a utilizar
flatmap
esto está bonito
vamos a utilizar
combats.
mira flatmap
muy bien
flatmap
y para cada uno
cada uno de los combates
que son estos
que tenemos aquí
¿vale?
ves estos los combates
tenemos boxeadores
boxeadores
pero hay uno
que tenemos equipos
porque como es un dos contra dos
es un poquito diferente
y lo que puedes votar
es el equipo
no es el boxeador
entonces
vamos a decirle aquí
que lo que vamos a querer
es que el flatmap
vamos a sacar
de los combates
los boxeadores
y los equipos
y que
y que
lo que vamos a ponerle
es o los equipos
o los boxeadores
de forma que
si tiene equipos
quédate con los equipos
si tiene boxeadores
quédate con los boxeadores
ahora
¿por qué flatmap?
el flatmap
lo que hace
claro
aquí lo que estamos haciendo
con el map
normalmente haríamos esto
tendríamos un array
y el problema
es que estaríamos sacando
primero los boxeadores
estaríamos sacando
aquí los boxeadores
aquí estaríamos sacando
guañar y la cobra
¿vale?
estaríamos haciendo esto
¿no?
sería un array de arrays
y no es lo que nos interesa
porque lo que queremos
¿vale?
esto es como
como tendríamos
lo que queremos
en realidad
sería
que estuviese
totalmente aplanado
o sea
queremos todos los elementos
y para eso
justamente
podemos utilizar
el flatmap
¿qué hace?
un map
va a estar iterando
cada uno
pero va a estar
aplanando el array
entonces
esto es lo que conseguiríamos
con el punto map
y esto es lo que vamos a conseguir
con el punto flatmap
¿vale?
fíjate que
funciona exactamente igual
pero nos va a permitir
aplanar el array
de una
y ahora que tenemos
cada una de estas ideas
lo que podemos hacer después
una vez que hacemos el flatmap
podemos mapear
y tener aquí
las ideas
a ver que esto en realidad
lo podríamos hacer también aquí
o sea
podríamos hacer aquí
teams
y luego
sacar la idea y tal
pero es que creo que
se lee mucho mejor
si lo hacemos así
¿no?
y aquí ya tenemos
la idea
y lo que devolvemos
sería
un objeto
idea
y ahora vas a tener
lo que tendríamos
finalmente
sería esto
¿vale?
tendríamos
efectivamente
esto
muy bien
que hackopilot
vamos a tener
un objeto
que va a ser
idea
agustín 51
id
carrera
id
guañá
id
la cobra
id
pero es un array
de un solo nivel
¿vale?
no está anidado
y además con objetos
con la key id
esto es lo que queremos
para los equipos
y ahora solo nos falta
pues meterlo en la base de datos
await
db.
insert
vote
selections
vale
veo que no me lo pilla
automáticamente
vamos a forzar
vote
selections
from
astro
db
no se encuentra
db
no tiene ningún miembro
vote selections
a ver
debería estar aquí
vote selections
no me lo está pillando
normalmente lo pilla
automáticamente
ningún miembro
yo creo que es
yo creo que es la extensión
esta
o sea la extensión le cuesta
porque
estar está
ahora me
ahora sí que me va a salir
ya verás
ah pues no
no tiene ningún miembro
vote selections
puede ser que no tenga
vale porque no lo tengo abierto
no lo tengo abierto
votos
modit
esquema
reference
invalid function
return type
vale ahora miro eso
a ver si
claro el problema es que se me había caído
el entorno de desarrollo
vale veis ahora que pone
nueva base de datos creada
vale pues ese era el problema
yo creo
yo creo que el problema
era este
vale
ves ahora me está dando
otro error
ahora ya ha funcionado
es porque tenía el entorno de desarrollo
se había caído
no estaba detectando los cambios
y no estaba generando
los nuevos tipos
entonces vamos a insertar
en vote selections
vamos a insertar
los valores
del teams
y ya está
con esto ya lo tendríamos
esto bueno lo voy a dejar ahí
para tener una referencia
pero esto sería un poco
la idea
vale
la idea es que ahora vamos a poder
tener toda esta base de datos
no sé si podría petar
vale
bueno esto no tiene sentido
no sé si podría petar
creo que no
porque no deberíamos tener
ningún problema
pero
sí sí
no debería haber ningún problema
pero veis que los votos
han desaparecido
le doy esto
si le doy
vale
funcionar funciona
y para probar
si funciona o no funciona
una cosa que podríamos hacer
es cambiar aquí
por ejemplo aquí
podríamos cambiar
el vote ID
si yo le pongo
a
vale
y le doy
vale
parece que ha funcionado
vamos a ver
qué petición ha hecho
porque igual
no ha hecho
ha hecho bien la petición
y no debería
veis
la ha hecho bien
vamos a ver
por qué la ha hecho bien
esto es porque seguramente
estamos sacando la información
efectivamente
estamos sacando la información
antes del click
que está bien
pero así el problema
es que si yo lo cambio
es demasiado tarde
entonces voy a sacar la información
después de hacer el click
y así
lo bueno
es que sí que podré
forzar
cambiar aquí
por ejemplo
Agustín
vamos a poner
que el vote ID
sea
lo que sea
vale
no has pensado
hacer multistream
en Twitch y Youtube
ya que ahora
se puede yo consumir
ya mucho más tus streams
desde Youtube
y creo que sería mejor
para muchas personas
¿tú qué piensas?
que
sí que lo he pensado
pero
al final
es una falta de tiempo
pero sí que lo quiero hacer
sí que lo quiero hacer
eventualmente
creo que lo voy a hacer
pero por ahora
es que es más
un tema de tiempo
de que quiero que
que se asegure
que todo funciona correctamente
que la calidad
me gusta mucho Twitch
como plataforma
la verdad
y me sería un poco más difícil
estar por todos los comentarios
pero sí que eventualmente
yo creo que lo vamos a intentar hacer
alguna vez lo he hecho
alguna vez sí que hemos hecho
alguna cosita
y la hemos hecho a los dos sitios
pero es verdad que me gustaría
que lo podamos hacer
lo bueno de Youtube
es que puede retroceder
en Twitch también puede retroceder
no sé si lo sabíais
os digo un truco
pero sí que se puede retroceder
si os vais
mira
si os vais aquí
os vais a Midudep
y aquí os vais a Vídeos
pues veréis que
está aquí ya el vídeo
es verdad
¿ves?
ya tenéis aquí el vídeo
pero es verdad
que no se puede retroceder
en el propio
es verdad
es más incómodo
es más incómodo
uy mira
y este chico tan guapo
que parece que te va a dar
un mordisco
bueno pero es verdad
es verdad que está como separado
que es más incómodo
que en Youtube
eso es cierto
pero bueno
es que hay gente
que no lo sabe
que puedes ver
lo que te has quedado atrás
vale
entonces
voy a poner as das das das
y si le damos click
vale
ahora veis que ha fallado
también hay una herramienta
para fusionar los chat
de Twitch y Youtube
me gustan las fusiones
vale
pues me gusta
¿ves?
mira
que buen truco
¿veis?
es que hay gente
que no lo sabía
¿veis?
ahora sí que está fallando
ahora está fallando
con un internal server error
pero
yo me imagino
que es por esto
SQLite
constraint
foreign key
o sea
ahora ya tenemos
el problema arreglado
de que ahora
alguien intentaría
pues manipular los votos
que a ver
lo peor que puede pasar
no va a pasar nada
¿vale?
pero lo peor que puede ocurrir
lo peor que puede ocurrir
es que su voto
no sirva para nada
eso es lo único
que va a ocurrir
no va a pasar
ninguna otra cosa
no se contabilizará
su voto
y vale
pues felicidades
ya está
pero es interesante
evitar que la gente
intente votar
así cualquier cosa
porque es tan fácil
como editar el HTML
y con esto
ya estamos viendo
una pequeña seguridad
nuestra base de datos
bueno
nuestro backend
para que no nos la cuelen
¿vale?
así que ahí lo tendríamos
vale
esto lo voy a dejar aquí
porque total
pues más seguridad
incluso por si alguien
cambia el HTML
o lo que sea
ojo con la inyección de SQL
en este caso
no hay ningún problema
de inyección de SQL
porque ya internamente
lo está arreglando
el propio
el propio
la propia biblioteca
de Astro
¿vale?
cuando se hace el insert
y todo esto
ahí no puedes inyectarle SQL
¿no?
ves es que cuando le pones aquí
los values y tal
esto ya lo está sanitizando
básicamente
y además
nos estamos asegurando
que solo pueda poner
la ID
de uno
y si le pone la ID
de otro boxeador
sí que podría
si le pone la ID
de otro boxeador
sí que podría ahí
o sea
podría poner el combate
podría poner un combate
que no fuese
con ese boxeador
eso sí que lo podría hacer
pero bueno
es que pues no se contaría
y ya está
tampoco no pasa nada
es una cosita
que más da
podríamos
podemos hacer todavía más
pero bueno
por ahora
ya tenemos una primera
ya hemos mejorado algo
y podemos añadirle
más mejoras
y lo hacemos poco a poco
y ya está
así que
ahora ya con esto
parece que ahora
sí que funciona
vale
perfecto
tenemos aquí ya los votos
muy bien
venga vamos a continuar
con más cositas
ya tenemos lo de los inserts
hemos intentado cambiar
hemos hecho el rollback
lo que podríamos hacer
ahora que ya tenemos
este arreglo
vamos a
vamos a
vamos a
desplegar esto
a producción
para que tenga los cambios
y así os voy a enseñar
cómo lleváis estos cambios
al esquema de producción
¿cómo lo haríamos?
bueno primero tendríamos
podríamos subir
primero los cambios
voy a subir
primero los cambios
porque total
como hay un poco de
como que tarda un poquito
pues vamos a
upload new checks
for database
¿vale?
vamos a subir los nuevos checks
de la base de datos
¿vale?
hostia como tarda
el linter ¿no?
vale
sincronizamos
y ahora nos vamos
a la base de datos
astro studio
¿vale?
aquí astro studio
voy a borrar
todos los votos
que hay por ahora
que tampoco pasa nada
porque oficialmente
se supone
que no hemos hecho
todavía ningún tipo de
no hemos hecho
los votos oficiales
¿vale?
entonces vamos a poner
delete
delete from
¿cómo era?
votes
delete from votes
¿vale?
sin el where
sin el where
¿vale?
vale
ya los ha borrado
y lo que podemos hacer ahora
también
es asegurarnos
que
el nuevo esquema
lo tenemos en producción
lo primero que hay que hacer
es
iniciar sesión en astro
así que hacemos
astro db
login
esto te abre una nueva ventana
que va a la misma página
esta que hemos visto
y te pide hacer login
si ya tienes la sesión iniciada
pues te aparecerá esto
y ya lo tienes
¿vale?
esto es lo primero
luego
npx astro db
link
esto sirve para enlazar
este proyecto
que tenemos
con el proyecto
que hemos creado
en astro estudio
ves que te dice
este es el proyecto
que tienes
si nos vamos aquí
al astro estudio
veréis
que tengo
en database
no en database no
¿dónde está?
ah no
aquí
preamoridad
bueno
es que es el único que tengo
la velada web oficial
aquí
ves la velada web oficial
vale
pues le damos
la velada web oficial
y ya lo tendríamos
y luego además
lo que podemos hacer
una vez tenemos esto
astro db
push
y se supone que esto va
pushear
todo lo que es el esquema
y esto
¿vale?
ves
data schema
is up to date
pushing database
schema updates
push complete
vale
perfecto
y finalmente
si lo que queremos
es asegurarnos
que aquí
en la base de datos
en el vote selections
tenemos
las ideas
que queremos tener
pues podemos ejecutar
el archivo de semilla
que hemos creado
desde local
para que lleve
esta información
también a producción
y le decimos
vale
ejecútame
para la base de datos
el archivo
de la semilla ts
y me lo guardas
en remoto
y esto
si todo ha ido bien
y no hay ningún problema
vale
conecta
ejecuta
volvemos a tri
aquí
y ya tenemos aquí
todos los equipos
que se podrían votar
vale
aquí tenemos todos los equipos
y ya tendríamos
en producción
todo lo que tenemos
en local
y que no deberíamos tener
ya el problema de votar
y tal
ok
eso
muy buena pregunta
alguien me pregunta
¿cómo solucionaste
el tema del ID con Twitch
de autenticación?
cierto
os lo quería comentar
así que ahora lo comento
que está bastante
bastante chulo
pues la
el tema lo hizo alguien
no lo hice yo
que está un poco alineado
con lo que vimos
en el stream de ayer
que
lo he cerrado
pero ahora os lo enseño
vale
¿cómo arreglamos
tener la ID
del usuario?
bueno pues
Folibares
Folibares Ríos
hizo una PR
muy cortita
que está basada
un poco
en lo que quisimos
hacer ayer
y no nos salía
pero que ha sacado
usó el callbacks
y utilizando el session
sacando
toda la sesión
que ya tenemos
dentro del user
el del user
todo el user
que ya tenemos
le añade el ID
sacándolo
del token.sub
y esto
ahora veremos
y de hecho
ahora os pediré
que justamente
intentéis
crear
vuestros usuarios
y tal
para ver
si esto funciona
correctamente
y sale la ID
correcta
vale
por lo que vamos
a tener aquí
con este token.sub
se supone que este sub
es el ID
del usuario
y con esto
ya lo he arreglado
y aquí
en esta PR
justamente
quitó toda la lógica
que hicimos
para generar
el user ID
con el email
porque el email
aunque no era
tan mala opción
se podía cambiar
y el usuario
podría votar
más de una vez
cambiando constantemente
el correo
cosa que no queremos
vale
así que
nada
muchas gracias
por hacer esta PR
también alguien más
hizo la PR
una PR
parecida
aunque esta era
un poquito más sencilla
y creo que estaba
súper bien
que estuviese
fuese tan sencilla
y veis
aquí teníamos
la ID del usuario
y en la base de datos
se ve como la
la ID del usuario
correctamente
muy interesante
muy interesante
mira aquí ya tenemos gente
que está votando
así que
no sé si uno
seré yo
me imagino
así que muchas gracias
por votar
y por ver que
que sí que funciona
el user ID
porque ya veo
que es diferente
perfecto
en local
o ya en prod
lo probamos
lo podéis probar
en producción
sin ningún tipo
de problema
el tema es que
si se loguea
con redes distintas
ese sub va a cambiar
salvo que no lo permitamos
bueno
eso es verdad
jpadeo
pero la idea
es que solo
te vas a poder
solo vas a poder
iniciar sesión
en este caso
con Twitch
o sea
solo vamos a
iniciar sesión
con Twitch
estaría bien
que pusieras
el nombre del boxeador
porque no conozco
a nadie
el nombre del boxeador
pero bueno
los nombres de boxeadores
están ¿no?
ah
claro
bueno
claro
claro
a ver
se supone
que deberías saber
por quién vas a votar
¿no?
pone
Carrera
Agustín
a ver
se supone
que deberías saber
que este es
Carrera
y este es Agustín
no es broma
que es al revés
este es Agustín
y este es Carrera
la verdad
que me he aprendido
yo los nombres
ahora ¿eh?
me he aprendido
los nombres ahora
la verdad que sí
pues
es buena idea
es buena idea
o sea
es un buen asunto
sí sí
tienes toda razón
lo que pasa es que
no quedará un poco repetitivo
teniendo en cuenta
que aparece aquí el nombre
Midu
el login con Twitch
en producción
no funciona
hostia
la hemos liado
la hemos liado
a ver qué pasa
qué hemos hecho aquí
en pronósticos
puede ser
que la hemos liado
la hemos liado
en producción
vale
iniciar sesión
pues es verdad
que no funciona
pues es verdad
que no funciona
pues hemos roto algo
hemos roto algo
solo tuve que refrescar
puede ser
ah
hostia
puede ser
que esto sea
el Service Worker
yo creo que es el Service Worker
yo creo que es el Service Worker
tío
yo creo que es el Service Worker
es que el Service Worker
está cacheando
está cacheando
el
está cacheando
esto
porque ves
si lo refresco
o sea
sí que
es que el tema
del Service Worker
es un tema
súper complejo
que puede traerte
más problemas
que beneficios
y en este caso
nos está jodiendo vivo
nos está jodiendo vivo
por eso
el problema es que
esto además
lo hizo alguien
en una PR
ves
StealWall Revalidate
en todo lo que es
HTTPS
a ver
vamos a quitar esto
vamos a quitar este
Navigate
Global Director
aunque aquí veo que
ah no
porque esto es para
Progresive Web App
bueno pero
ese es el problema
o sea
funcionar sí que funciona
pero el problema es ese
ahora lo que no sé
ya os digo
es como
donde está todo el tema
del Service Worker
alguien lo
yo la verdad
os voy a decir algo polémico
yo no iba a añadir
la PR del Service Worker
porque son los problemas
que pueden traer
tiene un montón de problemas
pero
pero
bueno
parecía buena idea
y ya está
está apuntando a localhost
4 3 2 1
a ver
al votar
puede ser
al que está apuntando
al hacer el login
o al votar
a ver
la velada
al votar
no
al votar
está en la velada
al iniciar sesión
ves
es que
veis esto
es el Service Worker
el Service Worker
tiene este
esto aquí
que significa
que lo que ha devuelto
de HTML
es del Service Worker
pero en cambio
lo que deberíamos tener
mira
si quito el Service Worker
vamos a poner
bypass
for network
vale
y hacemos esto
ves
funciona correctamente
y si cierro sesión
funciona correctamente
el problema
es el Service Worker
Service Worker
los carga el diablo
tío
los carga el diablo
yo
la verdad es que
los Service Worker
no me gustan mucho
no me gustan mucho
justamente por esto
y que además
está bastante complicado
es mejor solo usar
la cacheta del navegador
menos problemas
menos problemas
te da totalmente
totalmente
bueno
lo arreglo después
y miramos donde está
el Service Worker
y ya está
va no hombre
tampoco es eso
el problema es que
un Service Worker
es más que todo
para una Provisual Web App
a nivel de cliente
si eso estoy de acuerdo
cuando cancelo el login
se rompe el callback
mira la url
de user denied you access
cuando cancelo el login
se rompe el callback
hostia claro
puede ser
porque
es normal
porque claro
al cancelarlo
pero si deberíamos evitarlo
vale
me lo apunto también
para mirarlo
vale
vamos a poner
todo
evitar
Service
Service Worker
para HTML
aquí
cuando
cancela
el usuario
evitar error 500
vale
esto lo miraremos también
venga
me voy apuntando
cositas
vale
cual sea la función
estas apuntas
de Twitch
Twitch no tiene ningún control
sobre el contenido
ni la seguridad
de localhost
4.3.2.1
no sé
no sé por qué os pasaría eso
el tema este
del localhost
4.3.2.1
porque realmente
no hay ningún sitio
donde realmente
debería tener
localhost 4.3.2.1
y ahí en el redirect
está el correcto
entonces no sé
si tiene que ver
con lo del Service Worker
pero lo miraremos
porque igual
es problema también
de Service Worker
que está pasando
lo mismo
pues por ahora
me voy a apuntar las cositas
y luego lo miramos
voto a este
que diga voto por nombre
vale
buena idea
por este
este
voto a
vale
aquí debería poner
en la imagen
fotografía de
vale
vamos a poner
el alt
aquí
vale
y ahora arreglamos
quiero arreglar
lo del rey de la pista
que faltaba
vale
y esto igual
lo vamos a poner
esto
lo vamos a poner
aquí
vale
venga
vamos a
localhost otra vez
y ahora
continuamos
pronósticos
mira
voto a
carrera
voto a guanyar
voto a la cobra
hay una cosa rara
que se pone en azul
y esto tiene que ser
algún problema de estilos
también
vamos a arreglarlo
un momento
porque
está como
aquí
vale
este text green
este
no tiene mucho sentido
y este
text accent
is voted
already voted
esto
lo vamos a poner
aquí
que se pone blanco
pero tampoco tiene mucho sentido
que se ponga blanco
to vote text
claro
es porque esto
los colores
los debería tener
desde el principio
¿sabes?
o sea
este text accent
que lo está haciendo
en el hover
esto lo debería tener
ya desde el principio
o sea
no queremos
que haga una
que cambie el color
¿sabes?
entonces
esto
por aquí
y este igual
este already voted
bueno
en este caso
no creo que haya ningún problema
a ver
tu voto
en este caso
no hay ningún problema
vale
ahora
ahora sí que está bien
¿vale?
vale
más cositas
en el alt
los nombres salen pegados
¿pegados a qué?
a ver
el alt
dice que los nombres salen pegados
pegados
alt
de
Agustín 51
ah
no sé si te refieres a
que Agustín 51
debería ser
separado
o la cobra
a ver
la cobra
es verdad
que salen juntos
salen juntos
a ver
es una cosa menor
a ver
si queréis
esto lo voy a dejar
para que lo arregléis
vosotros
que es un momento
¿vale?
pero bueno
mira
ya está
arreglado
arreglado
ya está
ya está
vale
fixes
y vamos a arreglar
para página
de votos
vamos a arreglar
lo de
el
bueno
vamos a hacer un sistema
de notificaciones
cierto
porque un problema que hay
es que molaría
que cada vez que votes
pues que te aparezca
un sitio
que ponga
oye
tu voto se ha registrado
o si hay un error
no solo que haga el rollback
sino que también aparezca
hay un error
al registrar tu voto
¿sabes?
porque si no es un poco rollo
porque si no
no sale
no sale correctamente
¿no?
el replace de ayer
lo tenías mal
bueno
lo acabamos de arreglar
hay que crear los tickets en repo
hombre
ayudaría
vamos a hacer un toast
un sistema de notificaciones
¿vale?
esto vamos a ir cerrando
vamos a ir cerrando por aquí
y vamos a abrir aquí
a ver
me he basado
porque
he estado buscando
un sistema de notificaciones
puro javascript
que estuviera bien
y he encontrado este
que me ha gustado bastante
pero tiene un error
mayúsculo
tiene una cosa
que me pone muy de los nervios
y es que resulta
que no tiene paquete de npm
y me gusta mucho
está muy bonito
no necesita dependencias
de ningún tipo
está hecho solo
con vanilla javascript
es bastante fácil
y me gusta
está bien
pero el problema es eso
que no está preparado
para hacer un npm install
y utilizarlo y ya está
entonces
¿qué es lo que he hecho?
lo que he hecho
he estado mirándolo antes
y he preguntado antes
por el discord
estaba preguntando a la gente
del discord
oye
¿hay alguno que os guste?
que no sé qué
y me han dado algunas opciones
pero no me he terminado
ya las había visto
y el problema es que
no me gustaban tanto
los estilos
entonces
¿qué es lo que he hecho?
pues me he copiado
todo el código
y he creado un componente
para astro
entonces
vamos a crear aquí
UI
vamos a poner
toast
toast.astro
lo único que he hecho
lo voy a pegar
pero ahora os explico un poco
lo único que he hecho
de hecho no he arreglado nada
lo he hecho tal cual
lo que he hecho
aparte de poner la referencia esta
es que he ido al repositorio
y aquí
me he copiado el CSS
lo he puesto dentro de un style
me he copiado el JS
y lo he puesto dentro de un script
ya está
eso es todo lo que he hecho
y por eso
tenemos aquí un script
y tenemos un style
esto es todo lo que he hecho
me lo he copiado ahí a saco
y ahora
lo único que tendríamos que hacer
ahora que tenemos aquí
todo este JavaScript
y todos estos estilos
para tener este sistema
de notificaciones
lo vamos a tener
a nivel de toda la página
que tampoco creo que sea
muy bestia
así que lo vamos a poner aquí
el toast
y una vez que ya tenemos
este toast
a ver si nos trae
vale
así nos trae la importación
ya tenemos aquí
este componente
pues ya podríamos ir
a nuestro sistema de votos
y aquí
nuestro JavaScript
por ejemplo
pues cuando
cuando ha ido bien
aquí
cuando ha ido bien
podemos decir
window.toast
vale
y aquí ya llamar
directamente
title
vamos a decir
title
voto registrado
vale
ah hostia
lo que hay que arreglar
es el global
este
en .dts
nunca me acuerdo
siempre se me olvida
global
siempre me lo recordáis
ah
como es esto
window
punto
no
como era
siempre se me olvida
como se pone
en el global
para que no me salga
el error este
para decirle
no
que el toast este existe
de verdad
es declare global
extend
está en lo de los
erland
es que en lo de los
erland
nos pasó exactamente
lo mismo
gracias
voy a mirar
mi propio código
así de lamentable
así de lamentable
ah no está
no está aquí
no está aquí
a ver
puede ser que esté
en otro sitio
no me acuerdo
donde lo hicimos
pensaba que estaba
en los erland
declare global
vale
gracias
señor draps
ahí está
soner se puede personalizar
por completo
si martínez
pero soner
que a mi me encanta
y lo he recomendado
10.000 millones de veces
necesitas
necesitas utilizar
riac
entonces
para que queremos
utilizar riac
tendríamos que importar
riac
está chulísima
soner
es mi
mi favorita
de lejos
fíjate que maravilla
es super bonita
pero me da mucha rabia
que necesitas
tener riac
entonces no vamos a cargar
toda la biblioteca
de riac
por esto
me encantaría
que fuese
que fuese
totalmente agnóstica
pero no
toast
vale
y esto va a ser
una
función
que claro
esto además
es un temazo
ves aquí me dice
que todavía no existe
interface
a ver
porque me dice
que todavía no existe
bueno si no
lo ignoraré
a ver
si ponemos function
function
toast
y a ver si
así no
nos dice
que ya estaría
al menos que
que sana funcione
y ya está
que me deje tranquilo
y ya lo miraremos
location
bottom center
ves
pues no
no hay que ponerlo ahí
habría que ponerlo en otro sitio
dismissible
es una pena
que no tenga tipos
también
es que esta es la diferencia
de experiencia de desarrollo
de una que está
super bien
no una biblioteca
que tenga
los tipos
porque aquí ya sabríamos
las opciones que tiene
y todo esto
y en cambio aquí
pues te tienes que acordar
de memoria
o tienes que revisar
y todo esto
vale
window.tosh
title
voto registrado
bottom center
dismissible
esto es que se pueda cerrar o no
y el tipo que queremos
entonces
si vamos a nuestra página
y aquí en los pronósticos
lo damos
vale
ya tenemos ahí
un voto registrado
vale
y si vamos poniendo
pues bueno
que vayan apareciendo ahí
y que tengamos
un montón
hay un límite
o sea
no va a poder ahí
darle infinito
podemos poner
que tengan menos
creo que se puede
cambiar
por algún sitio
aquí
ves
pone máximo 3
bueno
podemos poner también
que duren menos
y stacket toast
a ver si le ponemos
que haga un stacket
para que ocupe menos
a ver
bueno stacket
pues es que está igual
¿no?
sí que lo del 3
sí que ha funcionado
pero el stacket este
o sea
se ve igual
se ve igual
yo pensaba que iba a poner
uno detrás de otro
pero no
bueno
al menos con 3
yo creo que ya estaría
¿no?
con 3
para tenerlo ahí
y ya está
bueno
ya teníamos el toast
podríamos poner el toast
también para los errores
por si acaso
así que aquí en el rollback UI
vamos a aprovechar esto
vamos a poner aquí
que sea error
creo que era error
bottom center
error
al guardar
el voto
¿vale?
y para probar esto
podríamos
cambiar una idea
por ejemplo esta
vamos a poner aquí
que tenemos
tu tu tu
en el botón
vamos a decirle que
la idea es
¿vale?
ah
porque
no funciona
porque el dataset
otra vez lo he arreglado
porque he arreglado
el dataset
para que la gente
justamente no haga estas cosas
no haga estas cosas
entonces ya lo tenemos
desde el principio
al final verás
que lo voy a dejar
¿vale?
ves
error a guardar el voto
¿vale?
que al menos
al menos
le mostraremos
algo de información
en el caso
que haya algún error
¿vale?
así que
perfecto
ya podemos tener esto
y vamos a hacerle
add
toast
service
notifications
for vote
¿vale?
vale
una cosita menos
otra cosa que quiero hacer
venga
que es que cada vez que vote
vaya al siguiente
y que le baje el scroll
porque es un poco rollo
cambia el estilo del toast
si quieres
Luis Bent
en lugar de decir
es que está muy feo y tal
lo que puedes hacer
es arreglarlo
puedes hacer una PR
que es de código abierto
y le cambian los estilos
por ahora no voy a perder
tiempo en hacer
los estilos
porque
es que
ponerme a estilar
todo el rato
en el stream
pues no iba a avanzar
pero
puedes
o sea
puedes mover las manitas
porque es muy fácil hablar
hablar es barato
pero escribir el código
dale cañita
que es fácil opinar
venga
vamos a darle cañita
vamos con más cositas
lo que quiero hacer ahora
es que
al hacer un click
te vaya al siguiente
¿vale?
¿por qué?
porque
estaría bien
¿no?
para ir votando
que votes a uno
que luego vais al otro
y todo esto
y esto no es muy difícil
o sea
está muy bien
de hecho es una cosa
que mañana
mañana
vamos a estar haciendo
mañana vamos a estar desarrollando
el juego este
del monkey type
monkey type
este
este juego
que está muy chulo
think about
we
i
lead
vamos a hacerlo todo
con javascript
incluso esto de los errores
el cursor
que puedas ir para atrás
que al darle al espacio
vayas a la siguiente
todo esto lo vamos a hacer
todo con javascript
y es un ejercicio
buenísimo
porque vas a aprender
un montón de vanidad
javascript
y además
vas a aprender
a utilizar
el DOM
de una forma
bastante interesante
porque aquí
por ejemplo
cuando una vez
que ha funcionado
lo que podemos hacer
es utilizar el DOM
para recuperar
el siguiente combate
le podemos decir
vale
recupérame el siguiente combate
de este botón
ve al next element sibling
y esto lo que quiere decir
es que
ah no
al next element sibling
no
tendríamos que ir al
al parent
al padre
me ha engañado
hija copilot
¿te habéis visto?
que rata
no, no
porque el botón
no tiene
el elemento siguiente
no esté al lado del botón
es que tenemos que ir al padre
y del padre
vamos al siguiente
el hermano
vale
y una vez que estamos
al siguiente hermano
lo que podemos hacer
es decir
vale
si tengo un siguiente hermano
vale
esto sí
del siguiente
next combat
haz
una transición
mueve el scroll
para llevar
este elemento
a la vista
y haz que sea
con una vista
o sea
con suave
que vaya suave
el movimiento
y con esto
mañana vamos a utilizar
un montón
lo del
next element sibling
y el previous element sibling
un montón
y nos va a simplificar
un montón la vida
¿qué tal?
en un momento
o sea tampoco
y aquí ya no puede bajar más
pero
y lo interesante
es que
ves claro
aunque esté muy arriba
o sea tú haces así
y vas al siguiente
podríamos complicarlo más
¿qué podríamos hacer
para complicarlo un poco más?
podríamos detectar
si tiene
si tiene voto
o no tiene voto
pero bueno
yo creo que en general
esto ya será suficiente
para que tampoco
para que realmente vea el voto
y ya está
podríamos
intentar
modificarlo más
de forma que
lo que hace
es que
detecte si ha votado
y va al siguiente
que no haya votado
y tal
bueno podría ser
pero bueno
creo que con esto
al menos ya nos da el mínimo
que necesitamos
aquí la imagen
veo que todavía
aquí se había quedado
muy pequeño
no sé por qué
esto no lo terminamos
de arreglar
pero voy a arreglarlo
en un momento
porque mi sensación
es que a lo mejor
esto
si lo hacemos
un poquito más grande
yo creo que mejor
¿no?
yo creo que mejor
lo que podríamos hacer
es
que según la imagen
que según la imagen
¿ves?
y ahí queda pequeño
que queda bien
la verdad
pequeñito ahí en medio
o sea que
lo que vamos al pointer
vale
ya tiene el pointer
bench
no
vale
lo digo porque
si le doy click aquí
creo que
el click este
vaya aquí
vale
perfecto
vale
pues eso
también tenemos una pinta
vamos a sacar esto
que hemos hecho aquí
fix image
and go to next boat
vale
vale
ahora voy a arreglar
el rey de la pista
que este también tiene
¿por qué no pones un check
en vez del texto de tu voto?
creo que quedaría mejor
bueno
pues puedes también
hacer una PR
y le echamos un vistazo
yo no puedo estar frecuente
en los streams
pero me generó duda
es una librería
cuando accedes al DOM
o hay algún vídeo
de la velada
donde esté explicado
es una librería
cuando accedes al DOM
una librería
no sé si te refieres
a esta biblioteca
que hicimos nosotros
y que son tres líneas
¿esta?
¿esta te refieres?
puedes entrar
son tres líneas
de código
básicamente
es para no tener
que escribir
todo el rato
el document.queryselector
es una tontería
de biblioteca
pero es verdad
que queda mucho más corto
parece jQuery
pero lo hemos hecho nosotros
midu no se puede eliminar
el voto
solo votar al contrario
claro
no se puede eliminar
el voto
al final
vas a querer votar
a uno u otro
ya el hecho de no votar
ya me parece un poco
a ver
elige
elige
¿sabes?
elige a uno
te la juegas
es lo que hay
¿de dónde sacarás
las palabras
para el juego de mañana?
pues primero haremos
una frase
nuestra
y luego lo que haremos
seguramente es generar
de un campo de palabras
generar las frases
en random
solo dos chicas
en la pelea
son dos contra dos
las chicas
las letras de centro
de las chicas
están muy pequeñas
creo que las acabo de cambiar
¿no?
pues eso
las he cambiado ya
creo que se refiere a
servicio worker
midu
quiero ser suscriptor
y me sale este mensaje
cuando coloco mi tarjeta
bueno
ojalá te pudiera ayudar
amigo
igual chapter
pero bueno
twitch
es las cosas como son
del twitch
vale
que me decís
que haga push
vale
estoy subiendo ya los cambios
para que podáis trabajar
en los estilos
y si quiero elegirte a ti
a mí no me podéis elegir
por desgracia
por desgracia
venga
vamos a continuar
con otra cosa
porque es que
hay mucha cosa
mucha cosa
el rey de la pista
vale
a ver
es que
entre los votos
habréis visto
que hay uno
que no está
que es el rey de la pista
entonces
también hay que votar
el rey de la pista
el rey de la pista
es un poco complicado
podría intentar
reutilizar al máximo
el html este
podría
y seguramente
lo podría hacer
con éxito
pero
para no liarla
y ya nos preocuparemos
después de evitar
duplicidades y tal
ves lo que comentaba
de la abstracción
y tal
lo que voy a hacer
es
simplificar
y repetir
y hacer esto
vale
si es el rey de la pista
aquí vamos a devolver
un cholón de cosas
que va a estar basado
en todo esto
pero claro
es que toda esta parte
de aquí está pensada
en que son dos
los contrincantes
no que son más
entonces
por ahora
lo vamos a repetir
ya veremos
si nos tenemos que preocupar
en que tenemos que hacer
lo diferente
o lo que sea
cosas que tenemos
que tener en cuenta
que vamos a tener
que listar
vale
entonces todo esto
de slack
todo esto
lo vamos a tener
que cambiar
y los botones
que hemos puesto aquí
solo lo vamos a repetir
una vez
o sea que
esta imagen
que esta imagen
si que va a ser la misma
la vamos a tener
que poner arriba
así que la vamos a poner
la primera
vamos a poner aquí
arriba
vale
solo que aquí
vale aquí pone
loading index
no sé qué
no sé cuánto
esto ya sabemos
que va a ser lazy
seguro
porque total
va a estar más abajo
pointer events known
combat id
bueno esto
lo podemos sacar
del combate
esto no hay ningún problema
y de los botones
vamos a utilizar
solo uno
y lo que vamos a hacer
es iterar
luego esto
lo podríamos extraer
a un componente
que esto sí que
es lo que creo
que sería interesante
el hecho de sacar
en un componente
estos componentes
los botones
la imagen
todo esto
y ahí sí que creo
que sería bastante interesante
pero por ahora
vamos a hacer
que funcione
y luego ya vemos
a ver
que podemos extraer
la imagen la dejamos arriba
que es lo más importante
imágenes
yo creo que no hay ningún problema
con las imágenes
sí que puede ser
que aquí esté el i
tengamos que cambiar
alguna cosa
pero bueno
ya luego nos preocupamos
y vamos a hacer aquí
una lista desordenada
y en la lista desordenada
del combat data
vamos a tener
los boxeadores
vale
y los boxeadores
mapeamos
y para cada boxeador
vamos a
renderizar
su botón
así que
ponemos aquí el botón
y ya veréis
que la imagen
del luchador
también va a ser diferente
porque la imagen
ahora mismo
fijaos que pone
voto a
no sé qué
no sé cuánto
claro
todo esto
todo esto
sí que lo podemos mantener
o sea
esto no hay problema
o a lo mejor
en lugar de voto a
podemos poner directamente
el nombre
de la persona
vamos a ver
boxer
está definido
pero nunca se utiliza
información que tenemos
del boxeador
tendríamos la idea
así que
vamos a sacar la idea
a ver si esto
me lo está pillando bien
no existe en el tipo
string
o sea
solo tenemos el string
aquí
ah claro
solo tenemos el string
vale vale
o sea
este es el boxer
es la idea
vale vale vale
claro tenemos el combat data
vale que eso es lo suficiente
así que aquí sería el boxeador
vale para mirar si está votado
o no está votado
este sería el boxeador
vale que es la idea
en el source
el source
vamos a utilizar
la imagen pequeña
así que
image
barra
boxers
barra
el nombre del boxeador
small.webp
la fotografía
esto también
tendríamos que sacar
lo típico
esto que hemos hecho antes
del replay
sol este
vale
fotografía de
voto a
en lugar del voto a
aquí podemos ponerle directamente
un poco lo mismo
esta cosa aquí
esta es un poco
un poco pirata
porque lo que podríamos hacer
es sacar la información
que tenemos del boxeador
pero bueno
por ahora con esto
funcionaría
y esto
a ver
aquí se me queja
la expresión genera un tipo
de unión demasiado complejo
para representarlo
que dices
typescript
la expresión genera
un tipo de unión
demasiado complejo
para representarlo
¿por qué?
¿por qué me está diciendo esto?
hostia que raro ese error
bueno a ver
el rey de la pista
si el rey de la pista
haces todo esto
toda esta información
sí que parece
la está sacando
los botones
vale
y si no
vale
hacemos return de eso
y si no
volvería y seguiría
haciendo lo otro
luego vemos
cómo lo podemos
arreglar un poquito
vale
rey de la pista
bueno
más o menos
ya veo que aquí
aquí
cuando tenemos los
la pista
aquí en el ul este
vamos a hacer que tenga
un grid
grid calls
5
vale
bueno
bueno
a ver
mejor de lo que esperaba
mejor de lo que esperaba
pensaba que iba a estar
bastante peor
a ver
lo primero
aquí tenemos una altura
puesta a manija
que es un poco rara
y esto
claro
esto tiene un position absolute
en algún sitio
esto aquí
tiene un position absolute
que esto ya no lo vamos a necesitar
al menos para este
esto lo vamos a poner
por aquí
y seguramente
lo haremos más pequeño
aquí el flex
va a tener que ser
como una columna
vale
y para que
vale
esto tampoco lo vamos a querer
ah
es que están los dos
vale
pues esto lo quitamos
vale
rey de la pista
a ver
para que esto quede un poco
vale
vamos a hacer esto un poco más pequeño
porque también es demasiado grande
¿no?
este
span
xs
hostia
porque este xs
porque este
to vote text
to vote text
puede ser que tenga aquí
ah sí
claro
es que los tengo aquí abajo
es que aquí abajo
es donde tengo el text xl
y la madre colpario
vale
esto teníamos que hacerlo
un poco más pequeño
pero bueno
más o menos
al menos
para ver
también tienen como mucha separación
así que
o sea
están muy juntos
perdón
a lo mejor teníamos que hacer
que tenga un poquito de separación
y esto también
vamos a tener que hacer
un poquito más
vale
y a esto
lo vamos a bajar un poco
para abajo
vamos a hacer
una cosa ahí
un poco pirata
más pirata
y vamos a hacer
que esto tenga
el mask image
muy bien
yhako pilot
ya he utilizado tantas veces
que yhako pilot
el pobre yhako pilot
mask image
linear gradient
hostia
pero no me lo está haciendo
¿no?
ah sí
sí que me lo está haciendo
sí que me lo está haciendo
a ver
también
lo voy a hacer
un poco más pequeño
tampoco hace falta
que sea tan grande
lo que pasa es que ahora
queda esto
un poco raro
¿no?
vale
bueno
¿qué os parece?
a ver
como un diseño ahí
rápidamente
¿no?
diseño rápidamente
es verdad que este
la sudadera
le faltaría ahí
que esta sudadera
copase menos
porque todos los demás
quedan súper bien
pero esta sudadera
como que queda ahí cortado
la madre que lo parió
la madre que lo parió
quedaría mejor al final
el rey de la pista
hostia
no sé
si queda abajo
queda raro
tío
yo creo que quedaría raro
creo que puede quedar raro
lo que podemos
lo que sí
o sea
me imagino que te refieres
a ponerlo al final del todo
o sea
poner el rey de la pista
al último
eso sí que lo podemos hacer
o sea
podemos mover
el combate
el rey de la pista
entiendo que te refieres
a mover el combate
¿no?
no el
no la imagen
o sea
poner esto
aquí
algo así
puede ser
esto sí que me gusta
mejor en la mitad
y alrededor
estén los peleadores
no lo sé
no
me parece a mí
que no
me parece que
de hacer que estén
alrededor y tal
sería como demasiado complicado
yo
yo creo que
algo sencillo
porque si no
nos va a complicar
un montón la historia
el hecho de hacerlos
alrededor y tal
me parece un poco
demasiado flipada
que
a ver
ya lo hemos hecho
aquí en la entrada
hemos hecho algo así
pero aquí
para hacerlo aquí
yo creo que es un poco
forzado
y aquí
me parece que está
bastante fácil
el hacerlo así
creo que habría que hacerlo
un poquito más pequeño
o sea el texto
porque veis
es demasiado grande
y
vale
y no me funciona el botón
espérate que le tenemos
que arreglar el botón
¿qué pasa con el botón?
botón
data boat
id
boxer
vale
y el boxeador
no me está pillando
vamos a ver
si hay algún error aquí
si le doy click
no me está pillando el click
¿por qué no está pillando el click?
vamos a ver
¿por qué no está pillando el click?
tenemos
bot id
pelicanger
o sea esto sí que está funcionando
el combat id también
hostia
es que me he cargado todos los clicks
¿qué ha pasado?
¿qué ha pachado?
me he cargado el
¿ahora?
ah
creo que sé lo que puede ser
puede ser que al volver
y al ir
ah pues no
no sé por qué
no sé por qué
pero bueno
funcionar
funcionan
¿qué es lo que deberíamos hacer
en todo caso?
podríamos ponerle aquí
que los que son estos
podemos poner
is small
o small directamente
¿vale?
para hacerlos un poquito más pequeñitos
los hacemos
los hacemos aquí un poco más pequeños
vámonos para aquí
span
y aquí
que si tiene el small
muy bien
le ponemos el text xs
bueno
se ha pasado
se ha pasado
claro
es que
es que este
tampoco es tan
vale
pues así
vale
yo creo que así
a ver
ya se podría votar
funcionaría bien
y ya lo tendríamos
ahora lo que nos faltaría también
astro
estoy cansado jefe ya
sí sí
astro que se había desmayado un momento
el rey de la pista es el penúltimo combate
no el último
creo que prefiero el mismo orden
bueno
entonces a ver
vais a tener que poner de acuerdo
lo podemos poner
según el orden
que tienen los combates
que eso puede ser
pero también es verdad
que a lo mejor
no sé si
no sé si
tienen que ser
ves es que así
rompe bastante
el como es
rompe bastante
como que
de repente
todos están
uno al lado del otro
y de repente estos
pam
aquí te mete esto
no lo sé
como lo veis
lo dejamos el último
me parece que se ve mejor
para mí queda mejor al final
venga vamos a hacer una encuesta
la encuesta de
donde queda mejor
penúltimo
último
en mi corazón
no voy a poner uno de broma
que si no gana el de broma
y os conozco
venga
ahí tenéis tres minutitos
y le damos
aunque visualmente se vea mejor
el main event
tiene que ir al final
creo yo
si creéis que debería ir al final
porque yo al final
lo que estoy pensando
es ponerlo al revés
estoy pensando que el main event
que vaya arriba del todo
porque es como el más importante
y hacerlo al revés
sabes como hacerlos
al revés
eso es lo que estoy pensando yo
en hacerlo al revés
lo que me falta
es que los
claro
una cosa es que se vean
un poquito más grandes
los primeros
justamente
al final
más grande
el main event
plexa al principio
combates al medio
rey al final
esa podría ser
pero al final
se podrá ver el porcentaje de votos
de hecho lo haremos
la semana que viene
tendremos el tema
de los porcentajes
pone el main event
más grande
lo haremos más grande
yo creo que para un hype
el main event al final
parece que pone dieta
en lugar de pista
bueno pero ya
te sabemos un poco
la pelea
el main event es el virus
y el helado
no
el main event es el plexi
y el mariana
no me deja votar
bueno
puede ser que lo de votar
hay algún momento
no sé si es de perder
que se pierde el foco
o al intentar
ves
ves
aquí
otra vez
deja de funcionar
esto
yo creo que es el tema este
del document
lo que hemos hecho
del page load
este
unas cuantas veces
esto
yo creo que es esto
así que lo vamos a añadir
por aquí
yo creo que este es el problema
tú tú tú
claro
vamos a tener que hacer esto
esto
esto
y meter todo esto
lo tenemos que meter aquí
porque si no
se pierde el evento
y ya está
vale
ta ta ta
vale
y ahora
vale
tu voto
vamos aquí
eventos
vamos para atrás
tu voto
tu voto
a ver una cosa
evento
combates
vamos para atrás
vamos para atrás
vale vale
así que está pillando
vale ahora sí que
ahora sí que sí
ahora sí que sí
vale
perfecto
estoy grabando el representante
y tarda mucho
por las imágenes
seguramente
es que hay un montón
de imágenes
historias
tendríamos que optimizar
alguna cosa
pero
¿quieres que te explique un truco
para clonar rápido?
lo que tienes que hacer
para clonar rápido
cualquier proyecto
esto es trucazo
esto es trucazo
esto es trucazo
esto es un error común
que cuando clonamos
un proyecto
lo que hace es extraerte
todo el histórico
lo que tienes que hacer
cuando te clones un proyecto
es decirle
git clone
vale
y si ahí lo hacen normal
por ejemplo
ejemplo
normal
ejemplo normal
pues claro
se lo clona
y esto empieza ahí
a traerse
1%
3%
se trae aquí
un montón de megas
historias
y bla bla bla
y una burrada
y tarda un montón
justamente porque
como tenemos un montón
de imágenes
pues claro
entre todo el histórico
de cómics
imágenes y tal
pues lo que tienes que hacer
aquí es poner el depth
y ponerlo a 1
y al ponerlo a 1
lo que hace es
es que el histórico
que se va a pillar
es mucho más pequeño
se está pillando
el último commit
ves que ya va por el 59%
fíjate que el otro
lo hemos tenido que parar
y este va a tardar
por mucho menos
entonces 10 segundos
este lleva un 16
por 16 segundos
y tenía
y llevaba por el 25%
¿qué es lo que haces con esto?
esto lo que haces
es que te está llevando
del histórico
el último commit
el último commit
punto
pero no pasa nada
para ti
porque no necesitas
el histórico completo
es exactamente lo mismo
solo que no tendrías
el histórico completo
pero tú para trabajar
y hacer un apple request
ya lo tienes
y esto lo puedes hacer
con cualquier repositorio
esto lo hacía yo un montón
con mi empresa
porque en mi empresa
muchas veces
teníamos repositorios
que eran de gigas
y a lo mejor
podías estar 25 minutos
con el clon
entonces con esto
te hacías el depth 1
tú haces la pr
tarda segundos
y luego cierras
y ya está
punto
es un trucazo
y además
haces que ocupe mucho menos
porque cuando tú vas
a ejemplo normal
y miras en el punto git
esto
aquí tienes el problema
que mucha gente no lo sabe
pero tú cuando te estás bajando
un repositorio
aquí en el punto git
tienes un montón de información
y tienes un montón de
claro
fíjate que aquí
como no me he traído nada
pues tiene 400 bits
pero
si vas a la velada
y haces el sla
seguramente el punto git
ah pues no
me ha dejado fatal
me ha dejado fatal
o es porque no
lo estoy viendo bien
porque realmente
debería haber
no sé si
pues igual no es ese
me ha dejado fatal
pero igual no es ese
pero en algún sitio
tienes todo el historial
¿vale?
tienes todo el historial
y ya está
pero también tardo menos
porque lo bajaste
en el mismo folder
con algo de historial
no
lo he bajado en otro
lo he bajado en otro
lo he bajado en otro
160
no pues
480
pues es que el historial
está en otro sitio
estar en otro sitio
a ver
ah amigo
vale vale
pensaba que
no sé por qué
pensaba que
pero no
fíjate
fíjate aquí
en los objetos
fíjate aquí
en los objetos
a ver
vamos a poner
duh
punto
a ver
hostia
creo que este
también te irá en depth
no
este no te irá en depth
a ver
duh
la velada
4
web oficial
bueno
quería justamente
mira
1,2 gigas
1,2 gigas
ocupa
la madre que me parió
claro
entre el no modules
y el punto git
mira
solo el punto git
son 300 megas
300 megas
claro
el ejemplo normal
el ejemplo normal
fíjate
que el punto git
son 145 megas
la diferencia
la diferencia
y esto es bastante
porque claro
está llevando
como solo
generado cambios
y que es un proyecto
que lleva poco tiempo
que tampoco lleva tanto
pero es bastante importante
la diferencia
y mucha menos complejidad
así que nada
lo del depth
os va a salvar la vida
sistema operativo
macos
entorno de escritorio
macos
eso es lo que utilizamos
vale
vamos con más cositas
ya tenemos el rey de la pista
hay otra cosa
que quería arreglar
que
nos va a dar tiempo
en un momentito
en los combates
tenemos aquí
que
en el 2 contra 2
el 2 contra 2
fijaos que
en el 1 contra 2
sí que aparecen
las características
tener aquí
Agustín
carrera
no sé qué
pero en el 2 contra 2
no aparece
entonces vamos a hacer
dos cambios
raudos
en un momento
para mejorar eso
vamos a hacer
que muestre
el 2 contra 2
vale
así que voy a subir
los cambios
vale
show
king of the hill
boat system
vamos a hacer
que salga
el 2 contra 2
el rey de la pista
es un poco más complicado
pero bueno
ya lo arreglaremos
vamos a ir ahí
de combates
vale
aquí en combates
hostia
pedrín
esto
vale
ahora mismo
solo salen los combates
que es solo
entre dos boxeadores
esto lo vamos a cambiar
y vamos a hacer
que salgan
los que son de
menor o igual a 4
vale
para que salgan
los que son
1 contra 1
y también los de 4
esto va a hacer
que aparezca aquí
pero no aparece
toda la información
así que
lo que quiero hacer
en el combat features
son dos cosas
primero
arreglar los problemas
del inter
que veo que hay por aquí
este
tengo que mirar
a ver cuál es el problema
que no entiendo muy bien
dónde viene este problema
esto también hay que arreglarlo
con tres igualdades
tres igualdades
vale
dale
lo primero que vamos a hacer
que es lo primero que vamos a hacer
a ver
lo primero que vamos a hacer
es simplificar
o sea
ahora el problema
que estamos haciendo aquí
es que
siempre da por hecho
que es un 1 contra 1
entonces
vamos a hacer aquí
que detecte
cuál es el índex
del medio
boxers.length
barra 2
y el índex
tendría que ser
menos 1
vale
o sea
de esta forma
vamos a detectar
cuando está a la mitad
no
entonces
si esto es 2
2 entre 2
vale
1
menos 1
0
o sea el middle index
no es middle index
sería
estos son 4
4
partido entre 2
2
menos 1
1
o sea después de ese
vale
vamos a hacerlo así
luego ya me preocupo
lo hacemos así
que queda más claro
que es el del medio
y punto
es que luego le vamos a tener que poner
un menos 1
pero bueno
no pasa nada
entonces
ahora aquí
que tenemos la información
de los boxeadores
esto es una tabla
muy bien
Joel
por utilizar una tabla
Q2
porque esto tiene sentido
que sea una tabla
muy bien
tiene todo el sentido del mundo
una tabla
que mucha gente
una tabla
pues no
claro
que es una tabla
o sea que tiene sentido
utilizar tablas
lo que no tiene sentido
es utilizar tablas
para cualquier cosa
y aquí vemos
que tiene
cada uno de las filas
y dentro
pues tendríamos aquí
CELIN
el alias
y alias
vale
entonces
como
para qué vamos a tener
el índice del medio
bueno
porque vamos a hacer
vamos a dividir
vamos a hacer un map
de todos los boxeadores
que tengamos
vale
aquí tenemos toda la información
y dentro
aquí
vamos a decirle
vale
pues me haces un boxers
punto map
boxer index
y encima con esto
vamos a repetir
menos código
y dentro
es que vamos a hacer
vamos a hacer
no vamos a hacer esto
exactamente
o sea
a ver
a ver cómo va a funcionar
esto
vamos a hacer
esta cosita por aquí
vamos a poner esto
por acá
esto por aquí
esto aquí
vale
esto aquí
este tr
porque me lo está
cambiando aquí
esto
joder
es que me lo pone solo
la madre que parió
vale
entonces
esto aquí
esto aquí
esto aquí
vale
aquí dentro
aquí dentro
vamos a hacer
lo que antes
estaba haciendo
aquí fuera
pero esto que antes
estaba haciendo
dos veces
lo vamos a hacer
solo una
así que todo esto
fuera
vale
todo esto
fuera
vale
y aquí
este label
que lo estaba
escribiendo aquí
a mano
este label
lo vamos a tener
que escribir
solo
aquí
si el índice
es igual
al my
del index
menos uno
o sea
solo cuando
hemos llegado
a la mitad
de los luchadores
vale
eso por un lado
y ahora
esta parte
de aquí
esta parte
de aquí
la vamos a hacer
aquí arriba
y ahora
el boxer
que llega aquí
es el que vamos a
poner aquí
vale
que veo que aquí
hay un montón
de checks
es posiblemente
undefined
vale
pues lo que vamos a hacer
es que si boxer
es undefined
pues me haces un return null
y me dejas tranquilo
ya por siempre
y con esto
vale
bueno
o sea
bien bien bien
a ver
esto ahora lo arreglamos
pero ahora
sí que está mostrando
la información
de Celine
de Alana
ni Sachs Digital
todas las demás
van bien
excepto esto
que esto es una chorrada
esto es porque
el country
esto tiene un flex
claro
este flex
seguramente
tendría que ir
aquí dentro
term center
justified center
porque si no
lo tenemos que meter
aquí dentro
este concat
eso que hace
ahora lo miro
y esto flex
esto lo quitamos
de aquí
pues ya está
ni tan mal
a ver
combates
carrera
vale
este sigue saliendo
así
bien
y ahora ya tenemos
el 2 contra 2
y además le hemos quitado
código
lo hemos simplificado
vale
lo que hemos hecho
aquí lo tenemos
o sea
creo que le hemos quitado
le hemos quitado más código
porque claro
ahora lo estamos
lo estamos utilizando menos
o sea
estamos repitiendo menos código
sí pero no están bien
los equipos
vale vamos a ver
claro
es que a lo mejor
no están bien los equipos
Celine y Alana
Nisakster
Amablitz
claro
quién
quién era
esto es
Celine versus
Celine con Nisakster
¿no?
claro
porque los boxeadores
bueno a ver
esto tiene una solución sencilla
tiene una solución sencilla
que básicamente
mover los luchadores
o sea
así
a Celine la ponemos aquí
y a Alana la ponemos acá
y ya está
que además tiene sentido
la verdad
así que no hay ningún problema
ya está
arreglado
¡ting!
arreglado
en un momento
pim pam
pim pam
el diseño de las letras
de la web amarilla
es con código
no es una fuente
ya está
por no hacer caso al chat
¿por qué?
bueno es un momento ¿no?
es un momento ¿no?
vale
habría que arreglar
veo que alguna cosa hay todavía
por ejemplo
no sé si podríamos arreglar
bueno es que no hay un tejet
como tal
es verdad
no es que estaba pensando
habría que hacer un tejet
pero bueno
no veo que se necesite
bueno al menos ya lo hemos añadido
con uno
y hemos evitado
tener que duplicar
y ahora que tenemos esto
funcionando
lo que podemos hacer
es un poco la PR
que había hecho el chico este
aquí en combates
podemos crear
el
combat
future
country
punto astro
¿vale?
y así
todo esto que habíamos hecho aquí
para que quede
¿para qué es este concat?
country name
vale
si
la key es country
¿vale?
si es country
concat undefined
vale
pues esto fuera ¿no?
bueno
bueno
o sea
igual
igual
sí ¿no?
o sea que más da
si el concat ese no se utiliza ¿no?
si es undefined
pues fuera
ya está
más fácil
vale
pues este
lo ponemos aquí
aquí podemos pasar
el interface props
vamos a poner el boxer
ah el boxer no
boxer
así en minúscula
nos traemos el tipo del boxeador
y aquí
nos traemos el boxeador
y esto es astro punto props
y con esto
nos encuentra el nombre key
ajá
ah pero esto no es necesario
porque en punto country
ya debería estar
¿vale?
pues mira
más fácil
imposible
combat
future country
boxer
que es
le podríamos pasar solo la información que necesitamos
pero bueno
¿qué más da?
y con esto cerramos aquí
y ya una cosita menos ¿no?
y queda un poquito mejor
ya tenemos separado esto
ya tenemos esto aquí separado
y esto sigue funcionando exactamente igual
vale
para el otro
el otro
igual no vale tanto la pena separarlo
no lo veo tan importante
la verdad
lo que sí que podemos hacer
es mejorar el alias
porque una cosa que
a mí no me termina de gustar mucho
de lo que hemos hecho aquí
no está mal
que aparezca el alias este
no está mal
pero
si miráis aquí
en los luchadores
hemos mejorado
bueno hemos mejorado
un chico ha mejorado
y ha hecho una PR
donde
podéis ver
que aparece el rival
con su avatar
y tal
y está muy chulo
porque
claro
esto lo que hace
es que mejora la navegación
de la página
ahora lo que vamos a poder estar haciendo
es entrar por aquí
pum
entramos aquí
entramos acá
lo que no me gusta
es este subrayado
que lo vamos a quitar ahora
todos tienen el mismo peso y altura
no
no
bueno no sé si el error
es a lo mejor en el combate
pero
pero aquí se ve
55
bueno claro
vete a saber si los pesos
de las chicas
no tenemos por ningún
ningún sitio
eso puede ser
vale
ni saxter
vale
vamos a arreglar una cosa con esto
vamos a ir al
boxeador
tendríamos aquí
el combat section
tu tu tu tu tu
donde está
detail
info rival
aquí hay un
underline
que la verdad es que no me termina
de gustar mucho
esto
y luego aquí
esto me gusta más ahí
que haga ya
ese hover
incluso
prefiero una saturación
que no un underline ahí
que es un poco raro
así que no sé
vamos a poner algo así
hostia
madre mía
la locura
la locura
a ver
110
no se ve
no se ve
no se si es que
ahora
ahora si que se ve un poco
ahora si que se ve un poco
vale
pues
algo así
y
no se si este
bg slate
tiene mucho sentido
también
porque
tengo una cosa
a ver
si que tiene sentido
pero no es exactamente
el mismo
esto habría que arreglarlo
porque no es exactamente
el mismo
que estamos utilizando
en la home
tendría que ser el mismo
porque tendríamos que tener
el mismo
la mismo estilo
no solo el fondo así
sino que si os fijáis aquí
tenemos este estilillo
tendría que ser más o menos
el mismo estilo
queda un poco raro
pero bueno
por ahora lo vamos a dejar así
para que lo tengamos
más o menos
luego
lo que podemos hacer es
reutilizar todo esto
no
aquí este
anchor
ta ta ta
vale
que estoy viendo
como podemos sacar esto
como podríamos sacar este
combat features
por ahora lo puedo copiar
y ya lo sacaremos
en un componente
o si alguien hace la pr
y lo saca en el componente
pues ya lo tendremos
y al menos
por ahora lo copio
más que nada
para ver como quedaría
pero
igual que teníamos ahora
esta cosa
que ponía
return country
lo que podemos hacer es
vamos a detectar
que si es country
haces esto
vale
pero
esto
por ahora lo voy a quitar
voy a poner
voy a hacerlo
en una línea
si es country
haz esto
vale
luego si el key
es
como se llama hasta aquí
name
si es name
vamos a renderizar
combat feature
name
boxer
boxer
vale
para mostrar la información
y
esta parte
vamos a decirle
que si
country
si no eres
a ver
podríamos hacerlo
de las dos formas
pero
lo voy a hacer así
vale
si no eres ninguna
de estas
entonces
renderizas
esto
vale
es que con una ternaria
ya se complica
demasiado
vale
y nos faltaría
crear este
este componente
vamos a crear
este componente
punto astro
y aquí es donde
tenemos que hacer
el truco
vamos a tener otra vez
interface
props
aquí tenemos el boxeador
con el boxer
no sé si vamos a editar
is king of the
ring
de track
vamos a hacer que esto sea opcional
por si
porque he visto antes
que había alguna
alguna clase
que lo necesitaba
boxer
esto porque no me lo has importado
importa
is king
of the
track
y esto lo sacamos
de astro
punto props
entonces
esto
volvemos a repetir
este td
no sé qué
no sé cuánto
vale
td
no sé qué
no sé cuánto
y aquí
vamos a tener
me lo voy a copiar
porque ahora
nos lo simplifica bastante
solo que
si es versus
vale
esto no lo necesitamos
eh
donde ponga
item
es boxer
vale
este filter
está un poco
muy ido para allá
vamos a ponerlo
en su sitio
este index
este index
para qué necesitamos
esta id
para qué necesitamos
esta id
esta id sirve para algo
porque es que
yo creo que no sirve para nada
vale
combat features
no sé qué
combat future name
importamos esto
vale
nos vamos al combate
vale
hay algo raro
ahí
que tiene como
un
un background
pero no es este
es otro
es como que el texto
este tiene un background
¿no?
¿veis que hay un background
ahí?
o me lo estoy imaginando yo
tiene un background
y otra cosa
que podemos hacer
para que tenga el estilillo
este
vale
vamos a quitar cositas
vamos a quitar esto
para empezar
ah bueno
es que ese es el background
vale
y lo que podemos hacer aquí
es que tenga
hostia
no me lo ha pillado
porque
es que quería subirlo
para arriba
y que ocupase lo mismo
pero que sobresalese
de la cabeza
un poco para arriba
pero no
lo está pillando
a ver
margin top
margin top
pues no
esto no lo está pillando
a ver si es que
tiene que ser en este
a ver
margin top
menos 100 píxeles
ah
lo malo
es que aquí
no me está pillando ya
lo que debería ocupar menos
margin top
menos 100 píxeles
mmm
display
line block
claro
pero no hace
ocupe menos
que es lo que me interesaría
que ocupase menos
podemos
forzar con un
a ver
la imagen
tiene specward
h32
podríamos
ocupar
el espacio
con
con lo mismo
o sea
h100 píxeles
claro
lo que pasa es que esto
¿sabéis lo que os quiero decir?
para que salga por arriba
la cabeza
que creo que tendría sentido
que saliese por arriba
¿sabes?
para que quede un poquito mejor
y no hay tan encajanado
¿no?
si es eso
es por el otro
es por el otro
es por el otro
boxeador
ah
que puede ser por el otro boxeador
no
porque aquí he puesto
MT24
para los dos
o sea
bueno
puedo probarlo
tenéis razón
puedo probarlo aquí
que es donde pensaba
que a lo mejor tendría sentido
ah
si tenéis razón
tenéis razón
que listos sois cabrones
como sois tan listos
como sois tan listos
tíos
o sea
sois más listos que el hambre
vale
pues algo así
esta sería un poco la idea
más que nada
bueno
y lo del alias
yo creo que ya no hace falta
¿no?
queda un poco raro
ese alias
no sé qué
de hecho lo puedo quitar
de aquí
y aquí
pues lo ponemos vacío
y así queda más limpio
¿no?
no hace falta
es que observar siempre es más fácil
eso ¿verdad?
soy más listos que el hambre
hombre
es que con el hambre
no quedaría mejor
sin el VG degradado
no sé si te refieres a este
o a este
pero
es que en este
habría un hachazo ahí
habría un hachazo
habría un hachazo brutal
sería bueno subir
al comienzo
el enunciado del combate
que está al final
y se termina perdiendo
por la variedad de fotos
y así se mejora la visibilidad
subir al comienzo
el enunciado del combate
que está al final
y se termina perdiendo
por la variedad de fotos
bueno
eso es una cosa
que está por hacer también
de mejorar
aquí que pone
esto
sexto combate y tal
aquí
esto lo vamos a cambiar
un poquillo
para que también sea mejor
sea más clicable
que aparezca esta parte
de aquí en medio
con esta imagen
que también te lleve
eso lo vamos a cambiar también
entonces seguramente
a lo mejor lo subimos
pero es que claro
las redes sociales
tienen que estar bastante arriba
la galería
sí
la galería
la podríamos poner debajo
sí que puede ser
que hemos puesto ya
alguna galería
por ejemplo
creo que las chicas
sí que tienen galería
una galería de fotos
por si queréis ver fotos
de Alana
o de las chicas
las chicas tienen ya
las fotos
porque son con las que hemos empezado
a hacer las fotos
porque eran las que teníamos
las primeras fotos
así que
y la idea es que las tengan todas
así que
algún indicador de secciones
las tienes aquí arriba
aquí arriba
deberían aparecer
las secciones
el evento
aquí aparece
odio la programación web
pero disfruto
de tus técnicas comentadas
bueno
muchas gracias
qué bonito
me parece detallazo
por tu parte
bueno pues
nada
vamos a subir
todos estos cambios
show boxers
in the detail
y
ahí he hecho
un montón de cosas
pero bueno
¿quién
tiene miedo?
yo no tengo miedo
yo no tengo miedo
ah
en la tabla
están con centímetros
hostia
¿en serio?
lo arreglamos
lo arreglamos en un momento
en la tabla
están con centímetros
combat feature
a ver
sí, sí, no
esto debería ser
kilos
centímetros
vamos a poner metros
el alcance
que bueno
no tenemos mucha
esta información
y los años
¿vale?
fix
centímetros
nada, nada
no te vayas sin comprobar
que funciona
ya te digo
ya te digo
no te vayas sin comprobar