Vamos a estar 8 horas creando un clon de TikTok desde cero.
Vamos a estar creando el frontend, lo vamos a hacer con React, iremos viendo, ¿no?
La verdad, no me he preparado nada, no he visto nada de TikTok, no tengo ni puñetera idea por dónde empezar.
Tengo alguna idea, más o menos, pero que no la he practicado, o sea, que veréis que me puedo quedar muchas veces penchao, congelado,
así que no os preocupéis, porque total, como tenemos 8 horas, pues he pensado, bueno, pues ahí vamos tirando, ¿vale?
Entonces, ¿crees que podamos ir siguiendo el código o mejor solo mirar?
Bueno, yo creo que, no sé, a ver, podéis intentar seguir el código.
No sé si conocéis TikTok, me imagino que sí, o sea, es muy difícil que alguien no conozca TikTok.
Os lo voy a enseñar un poco, porque, bueno, vamos a hacerlo con tecnologías web, ¿vale?
Así que os voy a enseñar ahora el TikTok, lo que es TikTok y para qué sirve TikTok.
Voy a enseñaros aquí, lo voy a hacer totalmente, sí, lo voy a hacer totalmente improvisado, no tengo nada, cero, cero, no tengo nada preparado, nada preparado.
Lo subiré a TikTok, sí, voy a hacer un Inception con TikTok.
Pues bueno, amigos, para el que no sepa lo que es TikTok, esto es TikTok, lo malo es que me da miedo porque si lo muevo se va a poner esto en marcha y el audio va a reventar.
No sé si se puede quitar el audio.
Mira, sonido, perfecto, silenciar, así lo silencio y así ya no molesta el audio, ¿vale?
Pues esto es TikTok, para el que no lo sepa, le puedes dar play.
Tengo una idea bastante buena de cómo hacer esto, este scroll en web, que espero que no nos dé mucha murga y, bueno, también sé un poco qué API podemos utilizar para que se ponga a reproducirse automáticamente.
Creo que esto va a ser una, esa parte al menos, sí, ¿eh? Me ha quedado bien, ¿verdad? Me ha quedado perfecto, aparece TikTok.
No, esta no es la mía, Dorian, esta no es la mía.
Esto lo que es, el original, ¿vale? He ido a TikTok.com y esta es la aplicación de TikTok.
Si no lo sabéis, la aplicación de TikTok está hecha con Next.js, por si no lo sabíais.
Sí, está hecha con Next, lo podéis ver aquí.
Está hecha con Next.js y no sé si utiliza CSS Modules o utiliza StyleJSX, ahí ya no lo sé.
Pero bueno, este no es el mío, ¿eh? Este es el original.
Cositas que tiene, bueno, que nada más entrar, si tú entras a TikTok.com, nada más entrar, pues fíjate que lo primero que te dice es,
toma, aquí tienes tu vídeo que he encontrado para ti.
El, obviamente no vamos a hacer el algoritmo en 8 horas, en una jornada laboral, TikTok, me imagino que han tardado más de 8 horas en hacerlo.
Pero bueno, el tema es que te empieza a enseñar, se supone, pues nada, a aplicar vídeos que te puedan interesar, ¿vale?
Esto a veces hay que pillarlo un poco con pinzas, esto que te puedan interesar, porque a mí, no sé por qué, a veces me salen vídeos de petar granos y cosas así,
que yo digo, ¿pero qué es esto, sabes? Es muy raro. O sea, que si veis algo raro, no me lo tengáis en cuenta.
Bueno, mira, este perro sí que me gusta. Este perro es muy bonito. Está cargando, pero este perro es muy bonito.
Oye, por cierto, no tendré yo aquí... Voy a quitar un momento, espero que no se corte, pero tengo la VPN del trabajo, la voy a cortar un momento.
Espero que no se rompa nada. Desconecta. Fuera. Salir. Espero que no se corte. No se ha cortado, ¿verdad? Vale.
Oye, Gorusuke, ¿10 suscripciones? ¡Pero Gorusuke! Dios, Gorusuke ha regalado 10 suscripciones a la comunidad.
¡Madre mía! Vamos a ponerse a especial arquitectura de Front. ¡Madre mía!
Gorusuke, muchas gracias. Café 8, gracias por renovar la suscripción, pero muchas gracias, Gorusuke.
¡Qué locura! ¡Qué locura! Muchas gracias, Brian, Jesús Gómez, muchas gracias a todos los que os suscribís.
Vale, pues entonces la idea es esta, ¿no? Que tú vas deslizando, mira, vas deslizando y se supone que se va viendo un vídeo nuevo
y además se reproduce automáticamente. Tenemos aquí arriba aquí el siguiendo y el para ti,
donde si le das a siguiendo, pues se supone que las cuentas que sigues te salen los vídeos.
Aquí a la derecha tendríamos los iconos, ¿no? El de los perfiles, el like, comentario, compartir.
Compartir también tengo un poco una idea de lo que podríamos hacer fácil. Vamos a intentar ser un poquito pragmáticos.
No filtra tan bien. No, no, está bien. Está clarísimo que no filtra nada bien.
Aquí se supone que es la canción que está sonando, ¿no? Y aquí teníamos el usuario que la ha subido, la descripción
y aquí tiene un ticker de estos, que esto es muy antiguo, pero mira, aquí han encontrado su funcionalidad.
Está bastante interesante. Aquí ya me dice que me baje la aplicación y finalmente tenemos aquí unos botones
para entrar a tu perfil. Por ejemplo, este sería mi perfil. Aquí la gente, pues las notificaciones.
Si nos da tiempo de hacer notificaciones, ya lo curón, ¿eh? Y esto sería para subir, ¿vale?
Aquí dice que utiliza la aplicación. Me imagino que en desktop, vamos a mirarlo, en desktop,
pero yo me imagino que en desktop el subir sí que te permite, ¿vale? O sea que sí que te permite
subirlo de alguna forma, ¿ves? Cargar vídeo. Esto lo vamos a intentar hacer también.
Lo de cargar vídeo lo vamos a intentar hacer. Vamos a intentar hacer, no sé si exactamente así,
pero vamos a intentarlo. No sé hasta dónde llegaremos, pero a ver.
¿Estará abierto para hacer PR? Sí, va a ser totalmente de código abierto, ¿vale?
Totalmente de código abierto. Hombre, no voy a aceptar PR mientras lo estoy haciendo,
pero seguro, seguro que lo dejamos de código abierto y a lo mejor lo seguimos en otro directo
y cosas así. Como se puede cargar vídeo, pues esto igual sí que lo intentamos implementar
y me parece interesante. Así que, vale, pues vamos un poquito a por ello.
Ahora que he visto el TikTok, ¿qué podemos hacer? ¿Por dónde podemos empezar?
Madre mía, qué vértigo, qué vértigo cuando uno empieza desde cero y se tiene que poner a hacer
todas estas cosas. Bueno, muchas gracias a los 484 que estáis por aquí. Hola, Diana, ¿cómo estáis?
¿En ocho horas te da tiempo a todo esto? No, hombre, no me va a dar tiempo a todo.
Vamos a intentar hacer lo que podamos, lo que me dé tiempo bien y lo que no, pues igual lo seguimos otro día, ¿vale?
Entonces, mi idea, mi idea era hacerla con Vite, ¿vale? Y el que no conozca Vite, pues voy a intentar también,
sé que os lo he explicado muchas veces, pero a lo mejor hay gente que es su primera vez,
bienvenido, bienvenida, o no sabe lo que es, muchas veces me preguntáis. Voy a intentar ser didáctico también, ¿vale?
No voy a ir a saco, ya que son ocho horas también. Así que voy a intentar ir explicando las cosas que hago,
cómo las hago, las cosas que voy pensando y todo esto, ¿vale? Así que vamos a utilizar Vite. Vite es una alternativa a Webpack.
El que no conozca Webpack, entonces que se mire mis vídeos en YouTube, que lo explico perfectamente.
Webpack es un empaquetador de aplicaciones web, básicamente bundeliza, a mí me gusta empaquetar, más en castellano,
las aplicaciones y lo convierte en estáticos. Pues Vite es exactamente lo mismo, simplemente es que es mucho más rápido,
mucho más moderno y seguramente a día de hoy yo lo recomendaría bastante más, ¿vale? Bastante más.
Así que vamos a utilizar Vite, pero lo vamos a hacer con React. Ya veremos si más adelante estaba pensando también
utilizar React, a lo mejor utilizar algo de TypeScript, no lo sé, la verdad. En principio lo voy a hacer sin TypeScript, ¿vale?
Pero puede ser que luego me dé cuenta de, bueno, mira, vamos a intentar hacer esto con TypeScript, lo que sea,
porque sé que a algunos pues os gusta. Entonces vamos a hacer el npm init y aquí vamos a ponerle Vite con latest,
le vamos a poner proyecto Midutok. ¿Midutok os gusta?
Para mí los pasos más complicados son los primeros, cuando se empiezan a organizar las cosas, Bibletump.
Sí, no, la verdad. A ver, yo creo que sí, que al principio es complicado, pero yo creo que al final el momento...
Hostia, mollo, a nivel 3 del tren, pero que dices, exagerados. Increíble, nivel 2 completado.
Oye, muchas gracias los del tren del hype, muchas gracias Café8, Gorusuke, gracias por las suscripciones.
Muy cracks, ¿eh? Vale, le vamos a llamar Midutok. ¿Qué os parece?
Midutoki, no, Midutok, Tik Tok, Midutok, venga. No Tok de Tok mental, sino Midutok. Vamos a ponerle Midutok, ¿vale?
No lo vamos a hacer con Next.js porque es que al final me da un poco de palo.
Tampoco tiene sentido utilizar React Query si vamos a utilizar el backend, lo vamos a hacer con Supabase.
Tik Tok, Midtok, Midtok, a ver, Tik Tok, Midtok, no sé cómo llamarle. Un poco de Tok sí que hay.
Bueno, vamos a llamarle Midtok, que son tres letras igual, Midtok.
Y vamos a creer con el template del React. Vamos a hacerle el DTS porque yo me imagino que si le ponemos al final el de...
Si utilizamos JavaScript no debería haber ningún problema. Así que vamos a intentarlo, ¿vale?
Si el paquete es Midtok, a ver, he puesto bien las... porque me dice Package Name.
Hostia, va a haber tormenta encima. Bueno, si se corta en algún momento no os preocupéis que continuaré.
Solo que he escuchado... Hostia, Julio, pero dejadme configurar el Inter.
Habías dicho que ibas a utilizar Next.js, ahora no. Me parece que lo de ayer te está afectando.
Hostia, sí, dije de utilizar Next.js.
El otro día intenté configurar tests para un proyecto de React con Vite, pero fue un tanto complicado. Extrañé Create React.
Ostras, sí, es verdad. Igual lo podemos intentar también, a ver si lo conseguimos.
Sé que la verdad es que no he hecho todavía ninguno, así que lo podemos intentar.
Bueno, aquí tenemos nuestra primera aplicación ya. Voy a abrir Midtok, a ver cómo va la cosa.
Voy a configurarle todo el tema del Inter y todo esto. ¿Sabes cómo sacar TypeScript de un proyecto?
Uf, con agua caliente. Dependiendo cómo sea la cosa, puede ser bastante complicado ya.
Pero bueno, a ver, mira, por ejemplo, esto es TypeScript y ya ves tú, esto no tiene TypeScript.
A lo mejor lo que puedes hacer es empezar a quitar TypeScript de tus ficheros, ¿no?
Digo yo que puede ser una buena idea en ese sentido. Tú lo que haces es que si tienes TypeScript se lo empiezas a quitar y ya está.
Seguro que hay algún tipo que manda, lo dice alguien.
NPM install, un install TypeScript. RMRF, disco duro. O empezar de cero, ¿no?
No, yo creo que sí que se puede, un poco de forma iterativa.
Vale, voy a ver cómo puedo hacer esto. Esto lo vamos a dejar por aquí. Esto lo vamos a dejar por aquí.
Me voy a poner esto por aquí. Vale, muy bien. A ver, lo primero que quiero hacer es configurarlo todo.
Ah, claro, es que si utilizo TypeScript, el linter va a ser un rollo. Bueno, va a ser un rollo porque estándar...
A ver, hay un estándar TypeScript, pero bueno. Vamos a empezar primero con el JS.
Ya me preocuparé de estándar JavaScript. A ver, eviteconf, react...
Es que lo que me encanta es que la configuración, aunque tengas TypeScript, o sea, es exactamente la misma.
Le da igual que utilices TypeScript, que utilices... Eso es lo bueno que te evite.
Bueno, que al final lo que tiene evite es que, ves, es que el archivo es exactamente el mismo.
O sea, yo lo renombro y ya está. Y esto yo me imagino que debería funcionar exactamente igual.
Ah, no, no le ha gustado, ¿eh? Lo que hemos hecho. Ah, bueno.
Access to main.tsx. Y en qué momento está... Ah, en el index.html.
Ya, ya está. Vale, vale. Interesante. Ahora sí. Bueno, lo mismo.
Luego, más adelante, si hace falta, le pasamos un poquito de TypeScript y ya está.
Por ahora, ya sé, voy a instalar el linter, aunque me lo habéis desactivado por unos cuantos minutos,
pero si me dejáis, al menos vamos a intentar configurarlo.
Vamos a ponerle el linter, ¿vale? Vamos a empezar por algo.
El linter es que es súper importante. Así que, install standard, ¿vale?
Como dependencia de desarrollo, menos D. Y así nos lo dejan la depth dependencies.
Y aquí yo voy a ir... Bueno, espérate que termine porque ahora, ves, me ha actualizado esto.
Vamos a quitarle todos los carets por ahora. A ver, esta es la versión...
No, esta no es la última versión de React. Vamos a ponerle la última.
Pam, pam, pam, pam, pam, pam, pam.
Que esa debe ser la que se han instalado.
SlintConfig extends y aquí creo que es .barra no modules barra...
No, standard slintrc.json.
¿Para qué sirve esto que estoy haciendo aquí?
Básicamente lo que estoy haciendo aquí es indicarle dónde está la configuración de mi linter.
Que como estoy utilizando standard, que ya es... Bueno, por si no conocéis que es standard, es esto.
Que a mí me encanta.
Pero bueno, es un conjunto de reglas como el de slint Airbnb, pues lo mismo, ¿vale?
A mí me gusta mucho este, el de standard, por las reglas que tiene.
Me gustan más que las de Airbnb.
Pero bueno, podéis utilizar el que os dé la gana, ¿eh?
Y aquí podemos ver ya que se me está quejando.
O sea, ya ha recuperado bien la configuración y ahora si le doy a guardar, pues me lo formatea correctamente como espera y ya está.
Pero como me habéis dicho que tengo que desconfigurarlo y tal, pues lo que voy a hacer es por ahora ponerle esto aquí.
Y ya desactivo así el linter y punto pelota, ¿vale?
Vale, ahora que ya tengo el linter, pues nada, vamos a empezar un poco a limpiar esto.
Vamos a quitar todas estas cosas que hay por aquí.
Vamos a dejar este div vacío, ¿vale?
Vamos a poner aquí TikTok Clon.
Ya está hecho.
Bueno, muchas gracias por estar aquí.
No, es broma.
Vamos a quitar el logo este.
Vamos a quitar el logo.
¿Por qué no lo hago en Next.js?
Porque alguien antes lo estaba diciendo, oye, ¿por qué no haces Next.js?
Es que te ha afectado la de ayer.
No, es porque Vite es bastante más rápido en la experiencia de desarrollo a día de hoy.
Entonces, por ahora, pues yo qué sé.
Mira, he dicho, vamos a hacerlo en Vite, que es menos pesado.
Y bueno, si hace falta, luego lo podemos migrar a Next.js.
No es que tenga nada en contra.
Es que no tiene mucho sentido que tenga serverless rendering, por ejemplo.
Entonces, no tiene mucha ventaja hacerlo con Next.js en este caso.
También tema de SEO.
Como no tiene serverless rendering, lo podemos hacer con React Head o React Helmet y cosas así.
Así que esa es un poco la idea.
Voy a dejar TikTok por aquí para tener una referencia visual.
A ver si...
Alguien me decía, oye, ¿cómo has puesto el Moto G aquí, no?
¿Esto?
¿Qué MacBook tienes?
Se ve bastante fluido y rápido.
No tengo un MacBook, tengo un Mac Mini.
Y la verdad es que sí que va bastante bien.
Es el Mac Mini M1.
Dicho esto, vale, lo voy a poner aquí.
Alguien me había dicho, oye, ¿y esto?
Esto básicamente cuando le abres las herramientas de desarrollo, tú le das a estos icónicos,
¿vale?
Se te abre este modo, tú aquí seleccionas qué dispositivo es y hay algunos que tienen este borde.
Si no te enseña el borde, asegúrate que aquí tengas, tengas, tengas, tengas esto.
Quitar tipo de dispositivo.
No, ese no es.
Ocultar marco de dispositivo.
Pues que lo tengas así.
Mostrar marco de dispositivo.
Entonces te lo aparece.
Pero ya te digo que no están todos, ¿eh?
El iPhone X no lo tiene.
El iPhone 6 creo que sí.
Ahí depende de cuál.
Queda bastante bonito.
A ver, vamos a poner el iPhone, que así ahí sale un poquito más de contenido.
¿Es solo front o también se va a hacer back?
También vamos a hacer back, pero vamos a utilizar subabase y a lo mejor lo que utilizamos son
las Netlify Functions o las funciones de Vercel, lo que sea.
Una de las dos.
No te esperé barrera, lo siento.
Lo siento.
¿Cuánto tiempo dura lo del nullinter?
Creo que unos 15 minutos.
Creo que lo puse que eran 15 minutos porque, hombre, no podía estar ahí todo el día.
Vale, y dicho esto, una cosa que tenía lo primero curiosidad era qué fuente utiliza, ¿no?
Vamos a empezar por buen pie de utilizar la fuente que realmente utiliza esta gente.
Próxima regular.
Bueno, pues vamos a copiarnos esto.
Voy a utilizar la de esta.
Vamos a utilizar esta.
Próxima regular.
Próxima regular font.
Próxima regular.
Me imagino...
Este fontsfree.net, esto es que es pirata.
O sea...
O es que próxima...
A ver, vamos a Google Fonts.
A ver si está ahí la próxima.
Próxima regular.
Dice...
Hostia, con las cookies.
Próxima.
Próxima...
Próxima nova.
¿Será esta?
¿Será esta?
Próxima nova.
Ah, no, pero es...
No, no, no, no.
No es...
Gratis no parece.
Desde luego.
Parecer no parece.
¿Será esta?
O es que yo he estado utilizando una que se han inventado.
Vamos a ir aquí a fuentes.
Próxima nova.
Vale, sí que es Próxima nova regular.
Y Próxima nova.
Bueno, pues vamos a hacer una cosa.
Vamos a abrir una nueva pestaña.
Y abrir una nueva pestaña.
Y aquí no ha pasado nada.
A ver, tengo que haceros un consejo legal, ¿vale?
Lo que acabamos de hacer, no es que sea ilegal.
No es que sea ilegal.
Pero obviamente porque yo lo voy a tener aquí en local y no es para temas comerciales, ¿ok?
Entonces, si hacéis esto, no podéis vender la aplicación ni podéis tener temas comerciales.
Lo estamos haciendo por fines educativos, ¿vale?
Fines educativos.
Importante, importante diferencia.
Vamos a poner aquí assets y venga, vamos aquí a mover estas fuentes que han aparecido de la nada por fines educativos, ¿vale?
Fines educativos, ¿vale?
Fines educativos, muy bien.
Me encantan las fuentes de fines educativos.
Entonces, PhoneFamily lo tenemos por aquí.
Uy, veo que el body tiene Sofía Pro.
A ver si ahora va a tener más de una fuente.
A ver, por ejemplo, esta, próxima nova, próxima semivolt.
Bueno, pero la próxima semivolt yo creo que es la misma.
Nada, yo creo que sí que será esa en todos los lados.
Por ejemplo, esta, pa, pa, pa, próxima regular, ¿vale?
No va a tener mucha historia.
Perfecto.
Entonces, vamos a cargar estas fuentes.
Vámonos.
A ver que ya os he perdido.
Esto por aquí.
Vámonos al CSS.
Assets.
Le voy a cambiar un poco el nombre, ¿no?
Que esto, bueno, estaría una persona.
Index.
Vámonos con el PhoneFace.
Vale.
Esto vamos a por aquí.
PhoneFace.
PhoneFamily.
Prox.
Me extraña que no me ponga el mismo nombre, ¿no?
O sea, esto debería ser próxima nova.
Aquí.
Oye, este índex, espérate.
¿Dónde he copiado?
Aquí, ¿no?
¿Dónde he copiado la próxima nova?
Se me había copiado todos los estilos de...
No sé dónde lo he hecho.
A ver, intento dos.
Juraría que la había copiado, pero bueno.
Está de code fuera.
Esto lo vamos a llamar próxima nova, así.
La verdad es que estaría bien poner el inter también,
pero el de CSS, ya que estoy.
Vale.
PhoneFamily.
Le decimos el source, la URL,
que entiendo que esto sería assets.
No tengo muy claro cómo funciona en bit.
Assets.
Vale.
Assets include.
Barra assets.
Pero, ¿dónde lo meto?
Webpack.
Field loader.
Entiendo que sea carpeta de assets.
Bueno, nos vamos a dar cuenta ahora.
Assets.
Y vamos con la próxima nova.
Próxima guión.
Nova.
Regular.
Woof.
Woof.
Woof.
Woof 2.
Este sería el formato de la Woof 2.
Woof 2.
Y yo creo que ya está, ¿no?
O, no.
Tenemos que decirle el font.
Que esta sería la de 400.
Esto lo repetimos aquí.
Y le vamos a decir que esta es la de 600.
Próxima nova.
Próxima nova.
Aquí he puesto regular.
Bueno, es semi-volt.
Semi-volt.
PhoneHaze.
Creo que no es 600.
Es 500.
Bueno, es que creo que no hay.
Bolt, Bolt, Bolt.
700.
O sea, que sí que es 600.
Vale, perfecto.
Y aquí próxima nova.
Vale, pues con esto entiendo que ya si volvemos a nuestro proyecto.
Vamos a poner esto por aquí.
Esto por aquí.
Esto por aquí.
Vale.
Ya tenemos ahí la fuente.
Perfecto.
Tiene buena pinta.
Vamos a hacer algo.
Para empezar ya por buen pie, la aplicación vamos a tener que tenga un...
Para que, claro, para hacer un poco el modo este.
Vamos a poner 100.
H.
Vale.
TextAlign Center.
Bueno, esto no es necesario.
Este app logo tampoco sirve para nada.
Todo esto era en estilos de antes, que esto no lo podemos petar.
App.css.
App.js.
Bueno, este lo vamos a quitar.
App.css.
No sé si utilizará el app.css.
Vale.
Vamos a poner aquí un main, donde va a estar el contenido principal.
Vamos a ponerle el tico top.clone, este.
Y por ahora el main, vamos a estirarlo así directamente aquí.
Le vamos a poner border, un pixel, solid, tal.
Aspect, ratio, 16, 9.
No, 9.16, ¿vale?
Porque va a ser como si fuese un móvil.
Vale.
Muy bien.
Max height, 80 bh, ¿vale?
Display...
No, este display grid no lo tenemos que poner aquí.
Lo tenemos que poner aquí.
Display grid, place content, center.
Hostia, cuando me lo he puesto ahí en medio, ¿qué ha pasado?
¿Qué ha pasado?
Jaja, ¿no?
¿Qué ha pasado ahí?
Bueno, vale, me parece...
Hostia, ¿por qué se me ha quedado así?
Qué raro, ¿no?
O sea, cuando le he puesto el aspect ratio así, le he puesto el display grid que me lo centre,
porque se me ha quedado así de chiquitito.
Esto es súper raro.
A ver, vamos a ver esto.
A ver, puede tener sentido, ¿no?
Pero, o sea, le he puesto el display grid, ¿lo ves?
Place content, center.
Y solo por esto ya dice, sí, sí, yo te lo dejo aquí en el centro, pero...
Es que estoy alucinando con esto.
Es que debería ser esto, max width 320 pixels.
Algo así, por ejemplo.
Algo así.
Bueno, 320 igual es demasiado poco, ¿no?
Vamos a ponerle 375, que sería justamente...
Ahora sí, sería como justamente donde lo vamos a ver.
Esto luego lo podemos ajustar, pero es más o menos donde vamos a ver el tema, ¿vale?
El borde, obviamente, lo tenemos que editar.
Borde radio, vamos a ponerle 3 pixels, ¿va?
Otra vez me lo ha hecho.
¡Otra vez me lo ha hecho!
Width 375, no, max width 375 pixels, width 100, ¿vale?
Vale, más o menos.
Aquí es donde vamos a ver el contenido un poco de nuestra aplicación,
de forma que se queda ahí en medio, y da igual que lo veamos un poco en otro formato,
y así lo hacemos, ¿vale?
¿Alguien puede repetir los pasos para las font?
Bueno, pues font face, tú le dices el font family.
Es importante que el font family siempre sea el...
¿Ves?
Que el font family sea el que vas a utilizar después, o sea, no te inventes uno.
Le pones punto y coma, source.
Aquí tú puedes tener, separado por coma, diferentes fuentes dependiendo...
O sea, diferentes fuentes no.
Diferentes estáticos, dependiendo del formato.
Puedes tener el formato woof, woof2, woof no sé qué, ¿vale?
Eh, faltó cambiar el nombre de la semi-bolt.
No, porque fíjate, mira, esto está bien.
Esta es la forma correcta de hacerlo, no sé por qué en TikTok lo hacen de otra forma, ¿vale?
Pero el tema es, lo correcto, cuando tienes fuentes que es la misma fuente con diferentes tamaños,
tú lo que haces es utilizar el mismo font family, pero lo que tienes es, vale, pues el font family regular son 400,
el semi-bolt es este, y automáticamente tú cuando utilices la regular o la semi-bolt lo que va a ocurrir es que utilizará esta o esta,
de forma totalmente transparente, en lugar de utilizar un font family diferente.
No sé por qué esto lo ha hecho, ¿eh?
No tengo ni idea.
No sé por qué lo hacen así en TikTok, pero no va a ser, no es como lo vamos a hacer nosotros.
Vale, pues ya tenemos esto, eh, solo hemos tardado 30 minutos, ¿vale?
Se puede usar fuentes con weight dinámico, sí, pero como el próxima no va a este, no sabemos si tiene un font variant de estos
que podemos hacer que sean dinámicas, pues vamos a utilizar la misma fuente, ¿no?
En principio lo vamos a hacer solo para móvil y luego ya veremos si lo hacemos un poquito más responsive.
Primero empezamos por aquí, total, vamos a hacerlo mobile first.
Primero hacemos la versión de móvil, que luego, pues, tenemos ganas de más, pues hacemos más.
Vale, a ver dónde he dejado mi TikTok, por aquí.
Vale, vale, me parece muy buena que GBVeta dice que podría hacer commits de vez en cuando.
Venga, pues vamos a iniciar si os parece.
Mire, y lo voy a intentar hacer por terminal para que todos aprendáis a hacerlo todo por terminal.
Vamos a utilizar GH, ¿vale?
Que es un, es un CLI, es una línea de comandos de GitHub.
Podemos crear repositorios, podemos crear un repositorio y le podemos, bueno, si haces ya directamente GH repo create,
directamente, esto, ¡ah! Claro, tengo que iniciar el repositorio.
Aunque yo creo que hay un, a ver, enable public confirm.
Ah, no, pues pensaba que te lo creaba, ¿eh? Bueno, no pasa nada.
Git init, ¿vale? Me ha dicho que ha utilizado master, porque no tengo, no tengo esta configuración, básicamente.
Voy a poner que por defecto ahora me la ponga main, ¿vale?
Y si no, voy a hacer un git branch, menos m, main.
Y así utilizamos main, que ahora es lo que se utiliza a día de hoy más, ¿vale?
Y ahora que tengo esto, vamos a hacer GH, voy a subir esto por si acaso hay notificaciones, porque entonces no lo veréis.
De hecho, muchas gracias por el sub, xbrechezu y nsdonato, muchas gracias a todos.
Vale, GH repo create, ahora sí, ¿vale?
El nombre del repositorio, vamos a ponerle tiktok clone, ¿vale?
Y repositorio excursion clone de tiktok para fines educativos.
Vamos a hacer que sea público, ¿vale?
Me parece bien que va a añadir origin, ese es el alias que va a utilizar para el repositorio remoto en mi repositorio local,
que es lo normal, así que le decimos que sí, ¿vale?
Creado el repositorio, ha añadido este remoto, por lo tanto ya vamos a añadirle un git ignore también.
Ah, mira, me ha puesto un git ignore.
Ah, esto debe ser, este git ignore debe ser de vite, que al iniciar el proyecto seguramente me ha añadido algo.
Vale, viteconf.ts, hostia, qué fuerte.
Vale, tsconf.ts, por si acaso después.
Vale, todo tiene buena pinta, así que vamos a ponerle...
Mira, como hemos dicho que íbamos a hacer más o menos unas buenas prácticas y cosas así,
vamos a instalar el suimono, que para el que no sepa es lo que utilizamos.
¡Esta camura no me pregunta es que es vite, hombre, que lo hemos explicado un buen rato antes!
¡Cago en la leche!
Pero bueno, hemos quedado hace media hora aquí, hay que ser puntual.
Un empaquetador de aplicaciones.
Npm install suimono-d, ¿vale?
Me iré al comienzo del live.
Pues claro, ahí lo hemos comentado, pero bueno, que no pasa nada.
Es un empaquetador de aplicaciones web, es una alternativa a webpack, pero más rápido.
Eso es lo que es vite, ¿vale?
Tampoco...
Era un regaño de broma, que no pasa nada, no pasa nada.
Vale, suimono es una herramienta que tenemos en mi empresa que nos sirve para manejar monorepositorios multipaquete.
Y dentro de lo que se maneja, pues pueden ser como se hacen los commits, un changelog, cosas así.
Entonces, ahora en lugar de hacer un git commit, lo que vamos a ejecutar aquí sería suimono.com.
De esta forma, lo que vamos a poder hacer sería empezar a añadir las cosas.
Mira, cambios, state changes.
Voy a tirar para atrás los state changes estos.
Vaya por dios.
Vaya por dios.
Git ignore, no sé qué.
Puedo separar esto.
Vamos a separar también.
Vamos a dejar el git ignore.
Vamos a dejar esto.
Entonces, por ejemplo, git ignore.
Vale, pues git ignore, si yo hago npm ranko, pues esto me...
Ay, es que he puesto co también en el...
Esto es commit, ¿vale?
Suimono commit, ¿vale?
npm ranko.
Y esto lo que detecta es, vale, qué tipo de cambios vas a subir.
Vale, pues yo le voy a decir esto que es una feature, un fix, un documentación, refactor, performance, test o core.
En este caso sería chore porque son cambios en el build process o herramientas auxiliares.
Así que vamos a poner este.
Esto es interesante cuando tienes más de un paquete.
No creo que lo veamos hoy porque esto es un monorepositorio.
O sea, un solo repositorio con un solo paquete.
Es una alternativa a commit send.
A commit send click.
Al más grande, ¿vale?
Así que sí.
Vale, vale.
Root.
Y entonces decimos, por ejemplo, add files to ignore from git repository.
¿Vale?
Y esto puedo ponerle la descripción más larga.
Las issues que estamos cerrando.
Me diría, mira, va a quedar así el commit.
Le digo que sí, ¿vale?
Y ya está.
Ahora ya ha hecho el commit.
Y esto, pues, podría seguir haciéndolo con todos.
Por ejemplo, voy a añadir los assets.
Esto, ¿no?
Y, por ejemplo, venga, empie en rancón.
Voy a ponerle no verify por si teníamos el linter o lo que sea.
Esto sí que podría ser una feature.
Add fonts.
Static fonts.
Assets to project.
¿Vale?
Pa, pa, pa.
Ya voy un poco más rápido para que no...
Ahora hago el push.
Y ahora, si me voy a mi repositorio, mi dudev, clon, tiktok.
Creo que lo he llamado.
O al revés.
TikTok clon.
TikTok clon.
Pues aquí veréis que ya se están haciendo mis commits.
Así que os dejo por aquí en el chat.
Y ya tendríais por ahí...
Me ha salido el chuchu.
Pues ahí tenéis, ¿vale?
Vale.
Dice, almuerzo desnudo.
Dice, un clon de tiktok es muy relativo.
Tiene el editor de vídeo.
Mucha lógica por detrás.
Recopilación.
Supongo que va a ser un clon del 15%.
Claro que sí.
Vamos a ver.
Vamos a empezar un clon de tiktok.
O sea, si alguien pensaba que yo como una persona humana en 8 horas iba a ser capaz de replicar el 100% de tiktok, que es una de las empresas que más dinero está haciendo y que tiene un equipo de seguramente cientos de personas.
A ver, que soy lo que soy, ¿vale?
O sea, no doy pa' más.
Pero bueno, yo creo que vamos a ver igualmente cosas interesantes.
La idea es ir acercándonos poco a poco.
Intentar hacer también la ley de Pareto, ¿no?
De que sea un 80-20.
Cosas así.
Seguro que alguien lo pensaba.
Joder, pues si alguien lo pensaba, lo siento, ¿eh?
Tampoco quería que fuese un clickbait en ese...
¿Cómo que eso es un clon de 100%?
Venga.
Os devuelvo el dinero, ¿vale?
Para los que...
Mira, esto se me ha escapado esto.
Se me ha escapado esto.
Bueno, da igual.
Próxima.
Vamos a poner aquí todo el proyecto ya.
Eso os está enseñando un poco el ejemplo.
Vamos a poner que esto es Feature, Start Project of TikTok Clon.
¿Os imagináis en 8 horas hacer hasta el editor de vídeos?
O sea, ya sería increíble, vamos.
Increíble.
Vale, pues ahí tenéis el Midtalk, ¿vale?
Con un montón de cositas.
Ya iremos añadiendo más cosas.
Por ahora lo dejamos así.
Vale, pues vamos con el tema.
Voy a hacer una cosa ya para empezar.
Vamos a ver cosas, ¿no?
Que ya me imagino que con el rato que llevamos ya deberíamos empezar a ver cositas.
Así que vamos a poner Components y vamos a poner List...
¿Cómo le puedo llamar esto?
Más que List of Videos.
Es que no es un List of Videos.
Es Videos Fit.
Vamos a llamar Fit o Fit Videos.
Fit Videos.
Fit Videos.
También podríamos tener un Video.
Más que Video.
¿Cómo se le podría llamar a un solo Video?
A ver si a esta gente le tiene un nombre a esto.
TikTok Player Icon.
No, eso es mentira.
Eso no es en Player Icon ni en broma.
Vamos.
Home Header.
Home Loading.
¿Ves?
Ahora entiendo lo que decía ayer Tailwind.
Pero bueno, el problema es el nombre del componente, no tanto.
TikTok Player.
TikTok Player me gusta, ¿eh?
Vamos a ponerle Player porque total...
Video Player.
¿Vale?
El Video Player que tenga de todo.
De hecho deberíamos tener el...
El Video...
Bueno, por ahora vamos a dejar así.
Seguramente separaremos un poquito mejor.
Por ejemplo, vamos a empezar enseñando el Video Player este.
Vamos a poner por aquí IndexJSX.
ExportDefaultFunctionVideoPlayer.
¿Vale?
ReturnVideo.
¿Esto era Source?
¿Era Source?
Es SRC, ¿no?
¿Vale?
ControlsFalse, que yo creo que esto ya es así.
Lo que vamos a recuperar es...
Mira, este que además me da hambre.
Creo que...
Mira, si es que además nos chiva aquí un poquito el tema.
Creo que por aquí...
Esto lo vamos a sacar luego para hacer algo.
Video SRC.
Bueno, SRC.
Por ahora que ya saco.
¿Vale?
Vamos a tener esto por aquí.
Le vamos a poner aquí el SRC.
¿Vale?
Vamos a poner esto por aquí.
Esto por acá.
A.JSX.
Video Player.
¿Vale?
Pam.
Rotura.
Rotura de que ha explotado todo.
Vamos a ver por qué ha apretado todo.
Video Player.
Ha reventado.
Vamos a ver que no le ha gustado.
React is not defined.
Hostia, yo pensaba que se podía...
A ver.
Vite import react automatically.
Pensaba que esto lo hacía.
Pensaba que esto lo hacía.
Auto import.
Esto es lo que quiero yo.
Auto import JS inject.
Amigo.
Vale.
Acordiando el documento podemos importar.
Vale, vale.
Pensaba que lo tenía automáticamente.
Pensaba que esto lo hacía automáticamente.
Auto import.
Codemod.
React as...
La verdad es que esto es un poco...
Ña, que no...
No haga lo del JSX ya automáticamente, ¿no?
Me sorprende incluso.
Seems to work fine for me.
¿Ves?
Esto es lo que justamente...
Thought you were stuck with need.
Anyways, just do it.
Esto es lo que yo quiero.
Sí.
Esto tiene buena pinta.
¿Por qué?
Porque esto lo que hace es recuperar el JSX y el JSX fragment.
Así que...
Sí, sí, sí.
Esto es lo que vamos a querer.
Vámonos a Vite.
Así no tenemos que importar.
Es que no tiene mucho sentido importar a día de hoy.
Entiendo que esto va por aquí.
Ahora cerramos el servidor.
Lo volvamos a levantar.
¿Vale?
Y ahora sí que tiene esto.
Vale, esto me está molestando un poco el tema del width.
Que no sé si es por el aspect ratio.
Que...
Es que si no, a ver.
Si no, me reviento eso.
Pero yo pensaba que el aspect ratio este iba a funcionar súper bien.
Pero lo que veo es que hace lo que da la gana.
No está haciendo lo que debería.
375.
Hostia, una cosa importante que me acabo de dar cuenta es tener en los estilos estos.
Aquí el reset típico de box sizing, border box.
Siempre me olvido cómo es el inerit este.
Este artículo es de 2012.
Y siempre...
Esto con HTML.
Y siempre, siempre me pongo a mirarlo.
Esto es HTML.
Siempre lo pongo de la otra forma.
Con HTML.
Esto básicamente es para que el padding y el border se cuenten para el ancho.
¿Vale?
Mira, esto es un artículo mío.
Vale, y al menos esto ahora sí es 375.
Ah, es que hay aquí un TikTok clone que hemos dejado.
Esto fuera.
¿Vale?
Y el video player vamos a poner por aquí.
Vamos a intentar utilizar CSS modules.
A ver si esto le gusta.
Video with 100%.
High 100%.
Yo creo que esto sí que debería funcionar.
Import styles from index module CSS.
Bueno, más que index vamos a dejarlo como style.
Styles, modus, no sé qué.
Styles.
Styles.
Class name.
Styles.video.
Vale.
No ha hecho un coño.
Vale.
Está ignorándome.
El video no tiene las dimensiones, no sé qué.
Bueno, pero es que el video, a ver, si ves, si quito el video, el tema es, he quitado el video, ¿vale?
El tema es, ¿por qué?
Que debe ser una tontería, ¿eh?
El tema es, si yo tengo aquí un width de 305 pixels, ¿vale?
Le pongo 305.
Si yo le pongo aquí un tamaño 25 por 25, debe ser una tontería, ¿eh?
Pero fijaos que me está dejando este espacio.
A nivel de la app, eh, min height.
Ah, bueno.
Bueno, pero tampoco.
Aquí hay algo raro porque esto lo debería centrar directamente.
Lo he restablecido aquí.
¿Habéis visto esto?
Era el zoom.
Era el zoom.
Pero, ¿ves cómo era el zoom?
Sabía que era el zoom.
Pero es que está roto mi zoom.
Mira, le pongo 400 y esto se queda aquí.
Le he tenido que dar a restablecer.
Yo creo que se ha roto Chrome.
Cabrón.
Estaba roto.
O sea, estaba roto mi Chrome.
Porque yo cambiaba aquí el zoom y aquí no cambiaba.
De hecho, estoy cambiando el zoom.
Aquí está 250 y esto sigue igual.
La madre que lo parío.
Chrome, primer aviso.
Chrome, primer aviso, ¿eh?
Primer aviso te la vas a jugar como sigas así.
Vale.
Ahora, ahora, o sea, estaba todo bien.
O sea, bueno, aquí es normal que se rompa.
Porque el tema es perrecho y que le hemos puesto un ancho fijo, ¿vale?
Pero vale, ahora tiene sentido.
Y ahora está bien el vídeo.
O sea, desde el principio estaba todo bien.
Pero Chrome nos está jodiendo, maldito.
Vale, vale.
Bueno, al menos ahora sé que nos estoy volviendo loco.
Que es importante.
Vamos a quitarle el...
Vamos a poner esto por aquí.
Vale.
Esto y vamos a quitarle en el apps.css el borde, ¿vale?
Vale.
Borde radios, overflow y scroll.
Vale, perfecto.
Vale, ya tenemos...
Esto es el vídeo.
El problema del vídeo es que además, claro, se tiene que ejecutar.
Así que, ¿qué podemos hacer aquí?
Creo que esto tiene un auto start, pero me da...
Ah, mira, start, auto start, auto play.
Pero me parece a mí que el auto play no funciona.
No funciona porque...
Esto es un tema de seguridad.
Que el vídeo en auto play no funciona hasta que no interactúas con...
O lo puedes silenciar.
Una de dos.
O le pones auto play, pero tiene que estar silenciado.
Silence.
No.
Audio.
¿Cómo era esto?
Muted.
Muted.
¿Ves?
Esto es súper importante, ¿vale?
Si le pones auto play, lo tienes que poner en muted.
Yo entiendo que en TikTok, cuando entremos...
TikTok.
Me imagino yo...
Qué bueno.
Tengo gatillos.
Como carga, ¿eh?
TikTok parece que es muy rápido y tal, pero tarda a lo suyo.
Le cuesta.
¿Ves?
Se queda aquí con el play.
Vale.
Pues nada, vamos a poner...
Vamos a recuperar este play de aquí.
Este no.
Este play...
¿Este play qué es?
Ah, es una imagen.
Hostia, pues nos vamos a robar la imagen también.
Guardar imagen.
Bueno, lo que podemos hacer...
A ver si esto cuela.
Guardar imagen como...
Escritorio.
Vámonos para acá.
Assets.
Vale.
Player.
Un poco raro esto del player, pero bueno.
Vamos a ir al grano con el player.
En el video player, este...
Vamos a ver.
Player.
Assets.
Player.
PNG.
Contain.
No repeat.
No sé qué.
No sé cuánto.
Vamos a poner aquí tip.
Es el video.
Vamos a poner...
Grapper.
Position.
Absolute.
Top 0.
Vamos a usar el inset.
Inset 0.
Margin auto.
A ver si esto cuela.
¿Vale?
Tenemos el player.
Vamos a hacer que sea un botón el player.
Voy a activar el linter que yo creo que ya pasa un rato con el tema este que hemos perdido
el tiempo ahí con el...
¿Vale?
OnClick.
Classname styles.
Hostia.
No tengo una extensión de esto.
Que me diga CSS Modules lo que hay por aquí.
Handle player.
Handle...
Handle play.
Handle play.
Porque entiendo que...
Sí.
Yo entiendo que aparecerá...
Vale.
Handle play.
Esto por aquí.
Además, vamos a necesitar una referencia a este video para que se pause y se ponga en marcha.
Le voy a quitar eso.
Y esto lo vamos a guardar en una referencia de React.
¿Vale?
O sea, vamos a poner un use ref.
Vamos a tener aquí el video.
Ahí.
Esto es video.
Vamos a utilizar un use effect.
Y en el use effect...
No olvidemos los almohadillas a fines educativos.
Midwalk.
¿Cómo?
¿Las almohadillas a fines educativos?
¿What?
¿Fines educativos?
Sí.
Totalmente.
Eh...
Use effect.
Vale.
Entonces, lo que...
Vamos a tener el video aquí, el ref del video...
No sé para qué es el use effect.
No.
No lo necesitamos.
Lo único que necesitamos es el use ref para guardar la referencia de nuestro video.
El use effect yo creo que todavía no se necesita.
Video.current.play.
Creo que es .play para ponerlo en marcha en el handle play.
Lo que vamos a tener que poner aquí es...
Playing.
SetPlaying.
UseStateFalse.
Vamos a importar también el useState.
UseState.
UseState.
Vale.
Si estamos haciendo playing esto.
Si no esto.
Vale.
Si está playing esto.
Si no video stop.
Luego lo refactorizamos cuando esté mejor.
Por ahora vamos a hacerle...
Playing.
Lo vamos a poner aquí abajo.
Total.
Vale.
Esto estaría bien que tuviese...
Convertir en...
Hay veces que...
Ah, mira.
Refactor.
Ojo.
Uy, pensaba que me lo iba a convertir en una ternaria.
Digo, Dios.
Increíble.
Pero no.
Pero ha sido demasiado.
Hostia, digo, joder.
Qué bien.
Qué avanzado lo tenemos.
No.
Vale.
Este icono se ve bien.
Vale.
Lo que es el play va bien.
Lo otro no.
El playing.
Vale.
Entonces aquí en el class name...
Esto lo vamos a tener que...
Vamos por partes.
¿Por qué te ves mal?
Para empezar.
Vale.
Porque el botón tiene un montón de estilos que no debería tener en esta.
Por ejemplo.
Background debería ser transparent.
El border...
Bueno, transparent no.
Background color debería ser transparent.
Vale.
Y por lo demás...
¿Por qué no se ve la imagen?
En assets...
Lo hemos puesto bien, ¿no?
Player.png
Centrado sí que aparecía.
O sea, estaba en el sitio correcto.
Pero me da la sensación que el player este no lo encuentra.
El icono este.
¿Por qué no lo encuentra?
Porque en realidad lo debería encontrar.
¿Porque intenta buscarlo de forma relativa?
No.
Esto no es.
Assets...
He escrito bien assets.
Assets.players.assets.players.vite.assets.url background...
Las referencias barra assets barra in the production build.
Vale.
Pero no me lo está encontrando.
Nada.
¿Por qué no me encuentra este fichero?
Si lo tengo ahí.
Player.png barra assets.
Hay gente que me dice...
Ponlo entre comillas.
Vale.
Ponlo entre comillas.
A ver.
Pero no es...
En las comillas no es el problema.
¿Por qué no es el problema?
Porque estoy intentando acceder directamente luego a la URL y tampoco me la está pillando.
Vale.
Background color transparent y border 0.
¿Veis?
No me lo está pillando.
De hecho, aquí en esta URL esto debería...
Al abrir una nueva pestaña aquí deberíamos ver justamente el player.
Pero no lo hace.
A ver qué más me contáis.
Agobio de espacio, ¿no?
¿El qué?
¿Esto?
Hombre, claro.
Lo hago para streamear un Brax.
O sea, es que si no la gente...
O sea, a ver.
Si queréis yo, streameo así, ¿vale?
Es un poco como trabajo.
Pero si me pongo a streamear así, luego la gente me va a estar escribiendo cada dos minutos
de...
Oye, ¿qué no veo?
Hazlo un poco más grande.
Hazlo un poco más grande.
Y que me...
Claro.
A ver.
Tiene que ver el assets dentro del source.
Bueno, pero...
Lo he pensado.
Lo he pensado.
Pero como antes me había funcionado justamente lo de las fuentes.
No, pero aquí pone player.
Lo voy a intentar mover.
No se ve.
Ahora me dice, no se ve.
Que no veo, que no veo.
Bueno, ahora lo arreglo.
Ahora lo arreglo.
Bueno, esto lo arreglarán después.
El tema de este tamaño.
No.
Bueno, vamos a mover el assets fuera.
A ver.
Igual tiene sentido que sea fuera.
A ver.
Yo pensaba que era fuera.
Pero como la fuente ha funcionado correctamente, me ha dejado bastante loco.
La verdad.
Mira.
Ya lo tenemos.
Es fuera.
¿Vale?
¿Vale?
¿Vale?
¿Vale?
Luego yo había...
Bueno, esto lo voy a hacer medio más grande.
¿Vale?
Luego me diréis que tampoco lo veis.
Pero bueno.
Ya os conozco.
Estoy encantado de tenerlo así.
Más grande.
Luego me vais diciendo, venga, es lo más grande.
Más grande.
Vamos a poner el access en el video player.
No es stop.
Es pause.
Pause.
¿Vale?
¿Vale?
Entonces, ahora el tema que tenemos que hacer.
Class names GitHub alternative.
Vamos a ver aquí.
Configuraciones.
Enpi en rancón.
Bueno, como más o menos me lo sé de memoria, vamos a hacerlo aquí.
Core root auto import ria jsx.
¿Vale?
Acá json.
Fiat.
No.
Core root enable linter.
Venga.
Layer.
Vale.
Vamos a mover los assets al sitio correcto.
Pamp fit root move assets to correct.
Esto no será una fit.
Será un fix.
Fix move assets to correct.
Folder.
App.css.
¿Vale?
Fit root.
Adapt styles to keep the aspect ratio accordingly.
¿Vale?
Los estilos.
Index.jdsx.
¿Vale?
Vamos a poner fit root show first video on tiktok clone.
Puseamos.
Perfecto.
No me estoy enterando de nada.
Joder, Max Nebel.
Al menos lo estoy explicando poco a poco.
Es...
No me deja darte hidratación.
Igual se ha acabado ya la hidratación.
Pero mira.
Midu aumenta un poquitín el zoom.
Y de nuevo tenemos otra vez el zoom que teníamos al principio.
Gracias por jugar.
Es que os conozco.
Os conozco.
Vale.
Tenemos el de class names.
¿Alguien se conoce una alternativa a este de class names?
Que alguien me dijo el otro día.
¿Hay una alternativa?
Ahora no me acuerdo cómo es.
Class names.
Github alternative.
Class names.
Class names.
¿Qué es esto de class names?
Os explico por si alguien no sabe lo que es.
Básicamente es una utilidad de JavaScript en la que es a través de unas condiciones vas construyendo el nombre de la clase.
¿Vale?
Y entonces es genial porque con esta puedes utilizar los CSS.
O sea, los CSS modules.
Y decir, vale, pues voy a construir esto, voy a construir lo otro.
Entonces, sé que hay una alternativa que era mejor que esta.
Alguien me la dijo el otro día.
Pero...
CLSX.
Vale.
CLSX.
Eso.
Muy bien, gracias.
Tampoco es que esté actualizada de hace mucho tiempo.
Pero bueno, es más pequeñita.
Mira, Deluxe.
Este tío es muy crack.
CLSX.
No la conozco, pero bueno, me parece bien.
Así que así nos la jugamos y la prendo.
CLSX.
Perfecto.
Pues venga, vamos con CLSX porque ahora nuestro vídeo, el componente de vídeo player, aquí lo que tenemos que hacer es...
Los estilos del player este dependerán...
Vamos a poner aquí player class names.
CLSX.
Me imagino que funcionará exactamente igual que el otro, ¿no?
Si esto es true...
Vale.
Yo creo que esto debería funcionar con...
Vale.
Styles video player...
Styles player.
O sea, primero vamos a querer styles player, esto seguro.
Y aquí vamos a querer styles...
Coño, esto en CSS...
¿Qué estoy pensando?
Player...
Vamos a poner no player.
Podemos poner opacidad a cero, aunque aparezca ahí.
Ah, lo que pasa es que esto...
Claro, claro, espérate.
No hace falta que el click...
Claro, este click en realidad debería estar aquí.
Click debería ser más en el handle play de todo.
Del propio vídeo incluso.
Lo podemos hacer en el vídeo y así...
Claro, claro, tiene más sentido que esté en el vídeo, no tanto en el icono.
Al final esto, hemos puesto que sea un botón, pero podría ser esto y lo único simplemente que se muestre o no.
O sea, hidden...
Y esto, si no está playing, pues entonces no se muestra.
Esto lo ponemos aquí y ya estaría.
¿Vale?
Esto lo vamos a mejorar un poco.
Esto podríamos poner...
Vale, vamos a ponerlo fácil.
Playing, video current post, video current play.
Tutu, tutu.
Video current, video element.
Video...
Esto lo vamos a poner así.
Así.
Set playing.
Vale, aquí vamos a ponerle que esto es null.
Handle video play.
Vale, ya hemos utilizado ese.
Gracias por llevármelo.
A quien haya sido.
Vale.
Esto sigue sin funcionar bien, pero vamos a ver por qué.
Console.log.player.classname.
Player classname.
Si no está...
No playing, entonces...
Ah, hidden.
Claro, es que no he hecho el hidden este.
No lo puedo inventar, claro.
Si no le pongo los estilos, que...
Upper.
Vale.
Sería al revés, ¿no?
¿Cómo es esto?
Esto es cuando está parado.
¿Vale?
Cuando está parado es al revés.
Si está playing, está hidden.
Vale, vale.
Está playing y está hidden.
Vale.
Bueno, al menos hemos hecho un poquito de esto, ¿no?
Un display te obliga a hacer un re-layout y un opacity y un repaint.
En este caso creo que es mejor hacer un opacity o tal porque el coste es un poquito mejor.
Pero no creo que tampoco afecte mucho, ¿eh?
Entre una y otra.
Pero bueno.
Días porque buenos son tus directos.
Joder, muchas gracias.
Qué bonito.
¿Vamos bien, no?
¿Vamos bien?
Más o menos.
Bueno, pues ya está.
Ya hemos terminado.
Muchas gracias por pasarte por este directo.
Ya sabes que hablo de desarrollo.
No, es broma.
Nos quedan siete horas por delante.
Siete horas.
Y vamos a tener...
Mira, primero, vamos a tener...
Vais a decidir qué voy a merendar.
Vais a decidir qué voy a cenar.
Vais a votar unas cuantas cosas.
Así que...
Esto es un directo con fines educativos, ¿vale?
Ya somos más de mil gatillos.
Pues nada, gatillos, que sepáis que tengo un canal de YouTube en el que también me podéis
encontrar por si os gusta el desarrollo web, ¿vale?
Venga, vamos a seguir.
Ya tengo esto.
Esto es solo, vamos, el principio.
Cosas que ahora debería hacer.
A ver, puedo empezar con diferentes cosas.
Por ejemplo, podría listar...
Por ejemplo, aquí, claro, el vídeo este, esto debería venir por source.
Este source que hemos puesto aquí, esto debería venir por fuera.
Por ahora, voy a hacer una cosa un poco guarra, pero guarrilla, ¿vale?
Source, source...
Y este source que venga de las props.
¡Ah!
Otra cosa importante, claro.
Esto debería tener un loop.
Porque si no me equivoco, los vídeos en TikTok, una vez que terminan, vuelven a empezar.
Así que vamos a hacer esto.
Esto lo hacemos short, ascending...
Y gracias, Davidcito, por suscribirte con Prime.
Vale, fit de vídeos.
Fit de vídeos.
Vamos a tener un fit de vídeos.
Ahora vamos, vamos encrechiendo.
Export the full function.
Fit vídeos, ¿vale?
Ahora voy a hacer que se le pase por...
Bueno, no hace falta que sea por props.
Vamos a tener aquí un array.
Luego ya iremos vídeos.
Y vamos a tener un fit de vídeos.
Cosas a tener en cuenta del fit de vídeos.
Bueno, tendríamos los sources, ¿no?
Tendríamos dos vídeos.
Uno, los sources.
Este sería uno.
El source del vídeo.
Y aquí deberíamos también...
Voy a copiarme...
Este hombre no lo conozco.
No sé quién eres.
Animes que te harán llorar en una semana entera.
¡Joder!
Venga, va.
Vamos a ver.
Una cosa que me ponen los nervios del TikTok es cuánto tiempo tarda la gente en...
Vamos, que no tengo todo el día y dura 15 minutos.
No quiero verte llorar a ti.
Quiero llorar con el anime.
Vale.
Voy a aprovechar para estilar...
Bueno, estilar no.
Modelar un poco los objetos, ¿no?
Tendríamos por un lado el autor.
Author.
Author.
Que esto sería Ruzio Taku.
Ruzio Taku, por ejemplo.
Vamos a tener aquí la descripción.
Copiar...
Qué lástima.
No se puede copiar el texto.
¿Cómo que no se puede copiar el texto?
Vamos a ver.
Esto lo solucionamos en un momento.
Tengo esto.
Me quiero ir a la consola que tenemos aquí.
Esto lo voy a hacer más pequeñito.
Esto lo voy a poner por aquí.
Vamos a la consola.
Creo que esto era...
Cero.
Cero.
Punto.
Inner.
Inner text.
Bueno, no estáis viendo un coño, pero os lo voy a enseñar, ¿vale?
Os voy a enseñar un truquillo.
A ver, no es un truquillo.
Es un truquillo muy bestia, pero...
El caso.
¿Qué estoy haciendo aquí?
Voy a quitar esto.
Que se vea más.
Limpiar esto.
Pum.
Seleccionas aquí un elemento.
Seleccionas este elemento, el H1.
Y yo quiero este texto.
Vale.
Pues selecciono el elemento.
Pensaba que dándole al botón derecho, podría un copiar texto, pero veo que no.
Copiar ruta, estilos, nada.
Entonces, lo que hago es...
Yo tengo seleccionado este elemento aquí.
¿Ves?
Que está seleccionado.
Te vas aquí a la consola.
Si haces un $0, te sale el elemento.
Si haces $0.innerText, esto ya es un elemento del DOM y por lo tanto estamos recuperando justamente
el texto, ¿vale?
Pum.
Aquí ya tendríamos esto.
Y ahora, pues lo que podríamos hacer es un copy de 0.innerText.
De forma que me dejan el portapapeles el texto que quiero.
Y ya está.
Y eso sería todo.
Por ahora están los tags.
Los vamos a dejar así.
Luego ya veremos cómo lidiamos con los tags.
Si nos da tiempo.
Por ahora lo dejamos así, ¿vale?
Vamos a poner que sea exactamente lo mismo.
También vamos a tener los likes, los 3, los shares, 2, 3, 4.
Y qué más hay por aquí.
Los likes y los comentarios.
Comments, 3, 3, 3.
¿Qué más tiene?
Vale.
La canción tendríamos song y song match.
O album image.
O album cover, ¿no?
Album cover sería lo que está dando vueltas ahí.
Eso lo vamos a hacer ahora.
Esto.
Entiendo que este sería el album cover.
Copiar, copiar.
Ay, la madre que parió.
Mira, copiar esto.
Dirección del enlace, ¿vale?
Al menos esto ya nos va a servir un poco de guía de las cosillas que tenemos.
Song name.
O song title vamos a poner.
Esto es lo del ticker este que está aquí.
Esto de aquí.
Sonido original.
¿Qué forma más rara de hacer el ticker que tiene esta gente?
Sonido original y...
¿Qué más?
Ah, nos falta el usuario, claro.
Bueno, eso lo podemos hacer un poco después.
Al menos ya hemos avanzado un poco en cómo sería...
Hola, corta directo y te dono 10.000 bits.
Ojo, Juan Manuel dice que corta directo.
Que si corto...
Me cago en la hostia.
¿Tú qué dices?
¿Corto directo y me dona 10.000 bits?
Me he puesto nervioso y hasta he roto el cable del...
A ver.
Juan Manuel.
¿Sabes qué?
No voy a cortar directo.
No voy a cortar directo porque mucha gente se suscribió, regaló suscripciones para que
hiciéramos este especial de 8 horas.
Me importa un pepino que me vayas ahora a dar 10.000, 100.000, 80.000 o 10.000 millones
o que me traigas a Ibai aquí en persona y me dé un abrazo.
Da igual.
Así que no voy a cortar directo porque llegamos a un acuerdo que si hacíamos el tema este
de que llegamos a los 400 suscripciones lo íbamos a hacer, así que da igual.
Pero gracias por pasarte, te lo agradezco, te lo agradezco mucho.
Pero no vamos a cortar directo que además 10.000 bits no me da para un iPhone Pro.
Si me regalas el iPhone Pro, me lo pienso.
Nah, es broma, broma, lo pienso.
No pasa nada.
Claro que no pasa nada, Juanma.
Pero gracias por...
Joder, BetPol, tío.
BetPol, macho.
Ahora cortamos directo.
Nah, es broma.
Joder, BetPol.
¿Cómo regalas 20 suscripciones, macho?
Madre mía.
Dios.
Dios.
Vaya tela.
Oye, muchas gracias, BetPol.
No hacía falta.
No iba a cortar directo igual, joder.
No iba a cortar directo.
O sea, que me da igual.
Oye, muchas gracias, BetPol.
Me cago en la leche, eh.
¿20 suscripciones?
Madre de mía.
Joder.
Oye, muchas, muchas, muchas, muchas, muchas gracias.
Espero que no se haya tocado a gente que os gustaba.
Mía, BetPol es...
Yo creo que es junto con Sergio Serrano.
Que Serrano es que el tío se suscribió en Patreon con el máximo.
Estuvo aquí y desde hace mucho tiempo me pagó mentorías.
Yo creo que BetPol y Sergio Serrano son mis máximos inversionistas ahora mismo.
Son mis inversores.
Totalmente, eh.
Así que, madre mía.
Oye, muchas gracias, BetPol.
Muchas, muchas, muchas gracias.
Vamos a darle cañita.
BetPol es el que compró a Messi.
Sí, sí, sí.
BetPol no será el del PSG.
Ahora que...
Todos mis mecenas, eh.
Mis mecenas son muy cracks.
Así que, bueno, muchas gracias.
Todos.
Muchísimas gracias.
Mis mecenas.
No solo mecenas.
Mecenas son.
BetPol es mecenas.
Sergio Serrano es mecenas.
Tengo un montón de mecenas y que son maravillosos.
El 5% de mi duele es mío, dice BetPol.
Ya te digo.
Ya te digo.
Y sí, hay canal de Discord para suscriptores.
Ve a Discord y entrarás a la sección.
Bueno, muchas gracias.
Vamos a seguir que, coño, que me está pagando BetPol y entonces no puedo parar.
No puedo parar.
Pero, bueno, ahora ya sabéis por qué no cierro el stream.
Me importa un pepino lo de los bits.
Además que lo bien que me lo estoy pasando.
Vale.
Vídeos.
Tenemos autor, descripción.
Por ahora me lo voy a copiar todo, ¿vale?
Menos el source para que veamos que el vídeo es diferente.
¿Vale?
Luego ya lo edito un poco.
Y con estos vídeos lo que deberíamos hacer.
Return.
Joder.
Ahora el tema de los vídeos.
Map.
Vídeo.
Y de cada vídeo, pues nada.
Tenemos el vídeo player.
Y le vamos a pasar como...
Bueno, le podríamos pasar todo.
Vamos a pasárselo todo.
Todo el vídeo.
Vídeo.
Vale.
Vídeo player.
Missing kill.
Por ahora vamos a poner...
Vamos a ponerle una idea.
Vídeo 1.
Vídeo 2.
Vale.
Vídeo.
Vídeo.id.
Vale.
Vídeo.id.
De vez en cuando ahora veo, ya no sé cuál es mi aplicación y cuál es la de...
Vale.
¿Por qué no sale...?
Vale.
Porque no estoy...
Aunque le estoy pasando el vídeo.
El vídeo player.
¿Dónde está el vídeo player?
El vídeo player.
Esto le tenemos que pasar el source.
Pues sí que le estoy pasando el source.
Source.
Undefined.
¿Qué me he quedado?
¿Qué me he perdido aquí?
Tengo aquí los vídeos.
Vídeos map.
Vídeos map.
Cada vídeo...
Ya está llegando el source.
Ahora me ha dejado esto muy roto, ¿eh?
Fuerte esto.
Qué fuerte.
He dejado ahí todo el...
A ver.
Vídeos map.
Vídeos.
A ver.
Es que como estoy escuchando la...
Y ya sé que esto espera esto.
Vale.
Vídeo.source.
O sea, esto no tiene mucha historia, ¿no?
Se me está escapando aquí.
Y esto es un objeto.
Y esto es otro objeto.
Y tiene aquí el source.
¿Eh?
Define.
Vídeo.
Hola.
Que esto no...
No estoy viendo esto.
Ah, joder.
La madre que me trajo.
Claro, es que me pongo a pensar y no...
Claro, es que no he cambiado esto todavía, ¿no?
Pero bueno, está bien que al menos...
Al menos final he caído.
Ponen feeds...
Feedsvideos.jsx.
Vamos a poner jsx.
Pum.
Use state.
Por ahora...
No lo necesitamos.
Lo vamos a quitar.
Esto también.
Ahora mejor.
Ahora mejor.
Hostia, esto se queda aquí.
Este...
Esta cosilla.
Eso vamos a arreglarlo también.
Tenemos aquí...
Estándar.
Lo que pasa...
Claro, es que tiene eso ahí en medio y eso no tiene mucho sentido.
Lo que deberíamos hacer...
Vamos a quitar el consolo.
Este hola.
El hola este.
Esto ya está bien.
Aquí...
Video...
No sé qué.
Vamos a poner aquí...
Class name...
Styles...
Player.
Decir algo.
Vale.
Es que le he llamado player ya, hombre.
Ponerle grapper.
Grapper.
Position.
Relative.
Vale.
Vamos a llamarle grapper.
Este.
¿Dónde estás?
Grapper.
Grapper.
Ahora mejor porque...
Espérate que se me ha quedado algo ahí.
Ahora mejor, ¿no?
Porque el botón se queda donde está.
De hecho, yo creo que esto es normal.
O sea, el botón se queda donde está y luego se sigue.
Vale.
Perfecto.
No tendrías que retornar con la llave cuando haces el map.
Mientras hagas un return, lo mismo da, queda lo mismo.
Yo aquí estoy haciendo este return, pues ya está.
Mientras el map, lo que tiene que devolver es un return.
O sea, por cada elemento que mapeas, devolver cuál es la transformación.
Mientras hagas esto, ya estaría.
Vale.
Entonces, ya tenemos esto.
Tendríamos así una...
Lo interesante.
Ya, aquí viene...
Tiene un poquito de...
Pon lanzando contramedidas.
Bien hecho.
Dale con lo del return.
Amigos, que ya lo sé.
Mira, que antes lo he hecho así exactamente, ¿vale?
Sí.
Aquí lo tenéis, ¿vale?
Ya lo tenéis en el return.
Dios mío.
O sea, no hace falta ni paréntesis.
O sea, que sí, que ya lo sé.
Si lo he hecho antes así.
Pero lo he dejado con el return porque he puesto aquí un console.log.
Y bueno, pues ya que lo he dejado así, pues tampoco había mucha diferencia.
Créate que ahora, por lo que sea, pues tengo que hacer una pequeña transformación aquí.
Pues bueno, pues lo he dejado así.
Porque es importante entre una cosa y otra.
Vale.
Vamos a volver a este que decía...
Vale.
Este scroll horizontal yo creo que lo podríamos quitar, ¿no?
Si no me equivoco, esta sería la app.
Vamos a volver...
Vamos a cerrar esto.
Vamos a subir esto.
Vamos a probar una cosa.
Overflow.xhidden.
Vale.
Ahora mejor.
Esto a nivel de app.
Le ponemos el hidden.
Esto app.
Flow.xhidden.
De hecho, no sé si el hidden este debería ir a nivel de app.
A nivel de app, en realidad el hidden debería estar por todos los lados.
A nivel de app.
Que el scroll está ya a otro nivel.
Que ya estaría.
Pues ahora que tenemos esto, si esto es normal, porque esto creo que también se puede quitar.
Que es...
No me acuerdo cómo se llama, pero luego lo buscamos.
Pues nada.
Ahora sí que tenemos el momento del scroll snap.
Así que el video player, no, en el feed of videos este, vamos a añadir el styles.module.css.
Y vamos a poner aquí que esto sea el feed.
Vamos a poner scroll.
No se me olvida cuál es el primero, cuál es el segundo.
Vamos a buscarlo en midudev, que esta gente sabe de lo que habla.
Scroll snap.
El primero es el scroll snap type.
Decirle dónde se crea scroll snap type.
Solo mandatory.
Mandatory.
Y, vale, ahora os explico los tres valores que hay.
Y, mandatory, ¿no?
Elige en el eje vertical.
Y eso, align center.
Align, entonces...
No, tendríamos que poner aquí a lo mejor...
Vale, vamos a poner section.
Que aquí tenga styles.
Importar los estilos.
Styles from...
Styles module.css.
¿Módulo o modules?
Módulo.
.fit.
Este es styles.fit.
Section.
Dip.
Este dip, esto lo vamos a mover aquí.
Pam, pam, pam, pam, pam, pam, pam.
Y esto lo metemos por aquí.
Esto por aquí.
Esto por aquí.
Esto por aquí.
Este section lo quitamos.
Parsing expected.
Voy a poner este return aquí.
Y ahora para cada uno de estos.
Vamos a ponerle el dip.
Classname.
Styles item.
Cerramos aquí.
Esto por aquí.
Esto por acá.
Vamos con la key.
Demovemos la key al dip.
Vale.
Entonces el item.
Scroll.
Snap.
Align.
Center.
Vale.
Y yo creo que con esto.
Donde he dejado ahora mi tiktok.
Tengo tantas cosas.
Este me lo voy a dejar por aquí.
Que es el de pillar las ideas.
Este es mi tiktok.
Voy a quitar esto.
Esto fuera.
Esto fuera.
Esto fuera.
Vale.
Lo ha pasado de mí.
Lo ha pasado de mí.
A ver si lo tengo.
Ah, espérate.
Porque claro.
Que esto no funciona así.
Esto no funciona así.
El scroll snap type no debería estar aquí.
Debería estar donde está el overflow.
O sea.
Este.
Este.
A mí.
Claro.
Porque si no.
¿Cómo lo vas a ver?
No lo sabe.
Este tiene que estar aquí.
Tiene que estar aquí.
Ahora sí.
Claro, claro.
¿Qué ha hecho ahí?
Ahora sí.
Vale, vale.
No está en el main.
No está en el feed.
Aquí no tiene sentido.
O sea.
Esto.
Lo podemos hacer.
Pero no tiene tanto sentido.
Este section.
En realidad.
Lo podría dejar como estaba.
Lo podría dejar como estaba.
Vale.
No es necesario.
Ese dip ahí gratis.
Que le hemos puesto.
En el.
A ver.
Lo he puesto por ahora en la app.
Pero bueno.
Esto lo podríamos mover.
Lo podemos poner aquí.
Vamos a ordenar esto.
Vale.
Creo que ahora sí que sí.
¿No?
Uy.
Vale.
Bueno.
Bueno.
A ver.
No está mal.
Esto debería estar en el main.
Porque te afectará cuando hagas los perfiles.
¿No?
Y se moverá también el navbar de abajo.
Bueno.
A ver.
Esto también.
Igual es que utilizamos otra cosa.
Para hacer los perfiles.
Porque por ejemplo.
Cuando aquí vas a los perfiles.
Yo creo.
O sea.
Le vas aquí al perfil.
O sea.
Recarga la página.
Y luego le vas aquí atrás.
Y recarga la página.
O sea.
En el.
Claro.
Otra cosa es la aplicación nativa.
¿Vale?
O aquí.
Fíjate.
Es que se lo carga.
Tiene sentido.
Porque.
Si no.
Se lo carga directamente.
Me refiero a este.
A este de aquí.
Al navbar.
El video debe emplear automáticamente.
Cuando se centran.
Creo.
En evalero.
Lo que pasa es que.
Trabajando en ello todavía.
Estamos trabajando en ello.
Y nos faltan cositas.
Esto de aquí.
Pero esto de aquí.
Fíjate que no se mueve.
Entonces.
Esto puede ser un position fix.
Que está ahí por encima.
Incluso.
¿No?
Este footer.
No sé cómo lo tendrán ellos.
O yo pondría un position fix.
Aquí he puesto un relative.
Pero bueno.
Esto porque puede ser que lo que tenga dentro.
Position.
Pam.
Container.
Pueblo al container.
Bueno.
Claro.
Porque tiene dentro del container.
Le ha puesto.
Mira.
Aquí tiene un calc.
Y le deja.
O sea.
Claro tiene el main.
Seguramente lo moveremos.
Para que no esté en el main.
Y esté en otro sitio.
Pero.
Sí.
De hecho.
En el main.
Igual.
Podemos mover todo el overflow.
El tema de la altura.
Y eso.
Lo podemos mover al fit.
Y entonces.
Dejamos lo otro.
Venga va.
Vamos a intentarlo.
Lo importante.
Es que nos estamos acercando.
Ya tenemos un poquito así esto.
Que cuando se mueve.
Es que hay gente que.
Alguna forma de realizar un scrapper.
Para obtener los datos rápidamente.
Bueno.
En este caso.
Estamos haciendo un poco a mano.
¿Qué hace el scroll?
Snap.
Snap.
Snap.
Snap.
Básicamente.
Lo que hace el scroll snap.
Es.
Añadir puntos.
De captura del scroll.
Lo que te dice es.
Vale.
El scroll snap type.
Se lo tienes que poner al padre.
En este caso le dices.
Uno.
El eje.
Y luego le dices.
Si es obligatorio.
Que se tenga que quedar en un punto.
Vale.
Le puedes decir.
Mira.
Los puntos serían.
Horizontal.
O vertical.
O los dos.
Podría ser de arriba, abajo, izquierda, derecha.
O ninguno.
Que anularía.
Estos puntos.
Que se quedaría de.
Ajustado.
El.
El contenedor.
Vale.
Entonces.
Aparte del scroll snap.
Tienes que sea mandatory.
Entonces siempre.
Se va a un punto de ajuste.
Proximidad.
Que se mueve automáticamente.
Solo cuando el scroll está muy próximo.
A uno de estos puntos de ajuste.
Lo mejor es ver aquí.
Justamente una demo.
Vale.
Así de esta forma.
Si tú tienes uno mandatory.
Siempre.
Siempre.
Siempre.
Se va a quedar.
Un slide.
¿Ves?
Más que tú lo dejes en medio.
Que es lo que hace esta sensación.
De que yo lo dejo así.
Y siempre se va a mover.
O al anterior o al siguiente.
Pero nunca se va a quedar.
En una de las dos.
Veces así.
¿Sabes?
Siempre se va a ir a uno.
O sea.
Porque es obligatorio.
Pero si tú haces una de proximidad.
Pues claro.
¿Ves?
En este caso.
Sí que se podría quedar así a medias.
Estos serían los dos valores.
El de proximidad.
O el de mandatory.
Aparte del de no hagan nada.
Y en nuestro caso.
Sería mandatory.
Luego.
¿Dónde queremos que se centre?
Podríamos decirle.
Se centra al principio.
Al end.
O en nuestro caso.
Que lo queremos.
Al centro.
Cuando es uno a uno.
Cuando es una sola caja.
Creo que no hay mucha diferencia.
Entre hacerlo.
Y aprobarlo.
En center.
O start.
Por ejemplo.
Claro.
No hay mucho.
No hay mucho cambio.
Porque total.
Alinearlo al centro.
O al principio.
O al final.
Es casi que lo mismo.
Cuando son más de un elemento.
Los que quieras centrar.
Porque claro.
Tú puedes centrar aquí.
Que si tú tienes slides.
Y esta slide solo ocupa el 50%.
Entonces sí que puede ser.
Que quieras que te quede en el centro.
Cuando tienes dos cajas.
Que te quede una en el centro.
Cuando mover esos ejemplos a Codilink.
Bueno.
Pues eso lo podéis hacer vosotros mismos.
Le podéis dar caña ahí al Codilink.
Y eso.
Tú que dices.
Él dice que sí.
Que lo hagáis en Codilink.
Sí.
He ordenado CSS por orden alfabético.
He seleccionado.
He seleccionado así.
He hecho.
Mayúscula.
Comando P.
He hecho short.
Lines ascending.
Y ya está.
Lo he hecho.
Y espero que eso no haya roto algo.
Porque tened cuidado.
Que en CSS.
El orden de las propiedades.
Sí que afecta.
No sé cómo es en Windows.
Pero creo que es algo muy parecido.
Entonces.
¿Qué decíamos?
Decíamos de que se podía romper.
¿No?
Me decían.
No.
Es que esto se puede romper con el tema.
Vamos a hacer una cosa.
Vamos a dejar que eso sea un problema para el Miguel del futuro.
Y vamos a poner descripciones estas.
Descripciones.
Y este menú lácteo.
¿Os parece?
¿Vale?
Vamos a poner aquí.
Video.
Site.
Site.
O Sitebar.
O Video Actions.
Video Player Actions.
La verdad es que si son actions.
Podemos ponerlo aquí.
Video Player Actions.jx
¿Vale?
Además.
Me parece a mí que vamos a tener que empezar a necesitar iconos.
Así que vamos a poner.
Icons.
Aquí vamos a tener.
Voy a copiarnos ya los icónicos estos.
Que son SVGs.
¿Vale?
Está muy bien.
Creo que.
Con.
Zone.
Export.
Fold.
A ver.
Estoy utilizando export default.
Si deberíamos utilizar algo así.
En este caso.
Voy a hacer una cosa.
Pasarlo por SVG.
Oh my god.
My god.
SVG.
Oh my god.
Tío.
Fuerte esto.
Fuerte.
Porque ese CSS este.
O sea.
Esto es porque lo anima.
Bien animado.
Porque el CSS.
Aquí.
Aunque no lo parezca.
El CSS lo que está haciendo.
Este me parece esto.
El CSS.
En realidad ya tiene la animación.
Y todos estos estilos.
Lo que hace.
Mejor.
¿Ves que tiene aquí como un montón de class names y muchas cosas?
Me parece a mí que eso es lo que hace es estilarlo.
Fuerte.
Estoy alucinando.
A ver si elimino esto.
Pues no vamos a poder tener el.
Vamos a poder tener estos.
Este.
Es que como hace una animación.
Solo tiene.
A ver.
Si me copio solo una parte.
Es que tiene toda la animación ahí en medio.
¿Qué parte es esto?
A ver si por suerte.
Yo que sé.
La flauta y hemos hecho algo increíble.
El corazón.
¿Por qué?
Vale.
Porque tiene este film.
Vale.
Vale.
Vale.
Vale.
Pues le vamos a poner el film por aquí.
Este film se lo vamos a poner por aquí.
Y si no.
Vamos a poner que esto sea del current current color.
Vamos a dejar esto así.
El width.
No sé si esto deberíamos cambiar.
Film none.
Este no sirve para nada.
El XML este tampoco sirve para nada.
Esto tampoco.
La animación.
Bueno.
To have.
Lo dejaremos para el final.
Por ahora vamos a tener así el heart.
Export.
Default.
Function.
Video.
Player.
Actions.
Action.
Action.
Vamos a poner aquí.
Esto sea una site.
Lo vamos a tener el corazón.
Poner que esto sea.
Deep.
Class name.
Styles.
Punto.
Action.
Punto.
Action.
Lo vamos a poner ahora mismo.
Por el corazón.
Luego ya nos preocuparemos de hacer esto de otra forma.
Zone.
Styles.
Vale.
Lo repetimos tres veces.
Creo que son tres.
¿No?
Los que hay por aquí.
Un, dos, tres.
Vale.
Importamos.
Heart from.
Pone cons.
Heart.jx.
Esto.
Estilos.
From.
Styles.
Punto.
Module.
Punto.
CSS.
Vamos a.
Actions.
Action.
Position.
Absolute.
Bottom.
16 pixels.
Write.
16 pixels.
Vamos a poner esto.
Y por ahora esto.
Last name.
Styles.
Actions.
Vale.
Player actions.
El video player.
Esto total lo podemos poner en cualquier lado.
Vamos a ponerlo aquí mismo.
No importa.
Por aquí.
Como eso.
¿Por qué sale negro?
Vamos a.
Vamos a explicar esto.
¿Por qué sale negro?
¿Qué he hecho?
Y todo esto.
¿Vale?
La diferencia entre.
Module.
Y está el punto CSS.
El module es que.
Te activa el tema del.
CSS modules.
¿Vale?
Tema de.
¿Por qué has vuelto a utilizar JSX?
Porque en Vite.
Lo tiene en cuenta.
Para hacer las transformaciones.
De JSX a JavaScript.
¿Por qué no lo haces.
Componente de React.
Con React.
Svgr.
Porque lo he hecho a mano.
Directamente.
En un momento.
Podría hacer.
De hecho.
Seguramente sería mejor.
Porque me habría cambiado todos los.
Todo esto que se está quejando aquí.
Lo he utilizado un montón de veces.
Pero veis estas cosas.
Esto es porque tiene que ser.
Free rule.
Tiene que ser así.
Bueno.
Es que era un momento.
Entonces por eso.
Para no hacer un task switching.
Y evitar.
Ahora ya lo tenemos arreglado.
¿Por qué sale de color negro?
Si no le.
Coño.
Que susto me ha dado.
Porque.
Porque le he dicho que utilice.
El current color.
Entonces vamos a pasar.
A hacer que el.
Action.
Ponemos blanco.
Ahora sí que sale correctamente.
Current color.
Para el que no lo sepa.
Muy interesante.
Es muy interesante.
Mira.
Vamos a poner que este.
Svg.
Por ejemplo.
Tenga fill.
Red.
Este no.
Perdón.
El de dentro.
Este.
Lo que pasa es que como tiene el fill aquí en línea.
Claro.
Es que esto es lo mejor.
¿Veis que aquí el fill le he puesto current color?
Si yo aquí.
En el texto.
De este.
El texto.
Lo pongo rojo.
Pues se adapta.
El color del texto.
El current color.
Es como una variable especial.
Es muy antigua.
Es súper compatible.
Con un montón de navegadores.
Y lo que hace el current color.
Es tomar el color del texto.
Esto es súper útil.
Porque claro.
De esta forma.
Tú tienes un icono.
Que no necesitas saber justamente el color.
Porque vas a hacer que sea el mismo.
Que el del texto.
Tú pones color.
Pues blanco.
En este caso.
Y.
Fijes que los iconos.
Sean del color que quieras.
O puedes poner que sea.
Blue.
Texto.
Pues que sea blue.
Que sería lo que aparezca debajo.
Y ya lo tendríamos.
Vamos a hacer esto.
Un flex direction.
Flex direction.
Bloom.
Justify.
Center.
Align.
Enter.
Vale.
Además.
Esto.
Hostia.
Este.
Bottom.
Ah.
Es que.
No está siendo exactamente.
Habría que arreglarlo.
Que claro.
Vamos a ver.
¿Veis que no está siendo exactamente?
Esto es por la cosa esta.
Que me tiene frito.
Me tiene frito.
El width.
He puesto este.
Pero si lo pongo así.
Ya bien.
Porque claro.
Esto es 16, 9.
Positivos que no son 16, 9.
Por ahora vamos a quitarlo.
Luego ya lo adaptaremos.
Pero no hace falta que el width sea 375.
Eso es porque antes lo he hecho.
Porque me quería fijar con el problema del zoom que hemos tenido.
Pero bueno.
Ahora sí que está mejor.
¿Vale?
Ahora.
Esto en realidad.
Vale.
Está bastante alto.
¿Cuánto?
Debería quedar un poco por encima justamente de lo otro.
Pero bueno.
Por ahora.
Que veamos esto.
He dejado los actions.
Tengo un montón de cosas abiertas.
Voy a hacer todos los commits.
Que se diga.
Pack.json.
Hit.
Root.
A.
C.
S.
X.
Package.
Dependency.
For.
Conditional.
Classnames.
App.
Css.
At.
Scroll.
Snap.
Remove.
Static.
Width.
Este lo uso después.
Este es el de feed videos.
Lo vamos a poner con sus estilos.
Hit.
Root.
Implement.
Fade.
Videos.
Componen.
The new heart icon.
Estilos.
Ta ta ta.
Hidden.
Vale.
Actions.
Start working.
Start working on videos.
Actions.
Sidebar.
Este.
The feed root.
Use feed videos.
Componen.
To show more than one.
Veamos.
Esto.
Los actions.
Venga.
Pam.
Pam.
Pam.
Actions.
Actions.
Tendría que ser bastante más.
No sé cuánto.
Pero bueno.
Ya esto lo ajustaremos cuando aparezca lo otro.
No sé si esto está tirado a mano.
Tiene una distancia o más o menos dice.
Mira.
Es que aquí pone 122.
Pero supongo que esto lo está calculando.
O sea que igual tiene javascript en el que está calculando justamente donde se tiene
que poner eso.
Voy a hacer una cosa así.
Me tiene un poco frito.
Zoom.
Porque me da la sensación aquí.
Tampoco se ve bien.
Pum.
O sea.
Como que lo veo muy grande este.
Entonces.
Vamos con este.
Strong.
Title.
Like.
No sé qué.
No sé cuánto.
Video.
Player.
Actions.
Vamos a poner aquí.
Strong.
Title.
Like.
Esto lo quitamos de aquí.
Y vamos a poner aquí.
Likes.
Sería los comments.
Y si shares.
Strong.
Like.
Vamos aquí abajo.
Like.
Comments.
Esto lo vamos a copiar aquí abajo.
Y esto señala los shares.
Vamos a cambiar estos dos a vez.
Shares.
Vale.
Likes.
12.
Comments.
Shares.
12.
Y.
Y.
Hurted.
Esto será importante para el heart.
El.
El corazón para ponerlo rojo o no.
Claro.
Y para saber si ya le ha dado like o no.
Bueno.
Más o menos.
Más o menos.
Se está pillando su.
Su estilillo.
2041.
Voy a poner algo más.
Que se parezca un poco más.
Quien todo.
20.
Vale.
Entiendo que cada uno aquí hay un poquito más de separación.
Aquí se ve como el corazón más grande.
Es cosa mía.
Que se ve más grande.
Porque parece más grande.
Mira.
Y el corazón está como un position absolute aquí en medio.
En sus estilos.
Esto es muy raro.
Width.
40 y 40.
Esto está ocupando 56.
Pero lo de dentro es 35.
Esto es porque tienen los espacios en el SVG.
Bastante curioso.
Está ocupando lo mismo.
Básicamente.
Pues 35, 32.
Y aquí 35, 5, 32.
O sea.
Son iguales.
Lo que vamos a necesitar son los otros.
Pam.
Ya está.
En este caso.
Buah.
Espero que no me haya vuelto a pasar.
Sabes.
Que no me hagan otra vez lo mismo.
Tener estilo.
No creo.
Claro.
No tiene sentido.
No.
En este caso.
No tiene sentido.
Es VGR.
React.
A convertirlo en un momento en un componente.
Brown.
Tendríamos el SVG.
Hay cosas que no me gustan un poco de este.
Pero bueno.
Tiene cosas muy raras aquí.
Estos filtros.
A mí me da la sensación que aquí.
El componente hace más cosas de las que realmente necesita.
Pero bueno.
Iconos.
Voy a poner comments.jsx.
Creo que podemos quitar cosas de aquí.
Opacity 0.9.
Esto también lo tiene el corazón.
No lo parece.
¿Qué que lo parece?
Que tiene una opacidad.
La madre os parió.
Parece que este opacity también lo tenga el corazón.
Ahora lo buscaré.
Export function comments.
Vamos a poner.
Bueno.
Vamos a poner que tenga todas las props aquí.
Lo que quiero evitar.
Que tenga un fill por ahí.
Que al final.
El color que le dé la gana.
Pero bueno.
En nuestro caso.
En este caso.
Da igual.
Share.jsx.
Esto sería comment.
Más que comments.
Comment y el share.
Vamos a recuperar el share de aquí.
Papapapam.
Copiar el elemento.
Copiar.
Outer HTML.
Vale.
Tenemos.
Mistado.
Por aquí.
Crea un componente de React.
Cambiamos con todo lo nuestro.
Share.
Por function share.
No sé por qué.
Bueno.
No sé.
Pero nosotros queremos utilizar esto.
El heart.
Heart.
Perdón.
El heart.
Anda que yo también.
Y madre mía.
Que tengo que irme a Polonia.
Pues si me voy con este inglés.
Que no me van a dejar pasar.
Ni en el aeropuerto.
Es decir.
Perdón.
Señor.
Usted.
Mejor váyase a su pueblo.
Que no le entendemos.
Si dice heart.
Para el corazón.
Es que venir aquí a dar una charla y todo.
Pues madre mía.
Estamos salvados con usted.
Pues está al revés.
Aquí.
Uuuu.
Esto se ve enorme.
Esto se ve en enormes.
Que no sé por qué.
Sí que lo sé por qué.
Sí que sé por qué.
Sé por qué.
Esto es porque el corazón este.
Vamos a ver si somos capaces.
Ahora entiendo por qué se ve más grande.
O sea.
Porque estos están bien.
Y este es el que está mal.
Este está mal.
Porque este pad.
Encaja con esto.
Pero claro.
¿Qué podríamos hacer con esto?
A ver.
Si le ponemos aquí estos 35.
Y que esto es 35.
Al menos esa parte.
Sí que está bien.
Pero claro.
Esto tiene que ser 32.
¿Los 32?
No hemos cargado.
No lo hemos cargado directamente.
Quitamos esto.
Entiendo que a lo mejor.
Esto ¿no?
32.
Si lo dejamos como lo teníamos.
El view box.
Esto es.
Donde empieza.
La X.
La Y.
A ver.
Yo le pongo un 8 aquí.
Pero el tamaño también.
Tenía que ser un poco distinto.
O sea.
Vuestro Dios.
Tení ahí fe ¿verdad?
Tendrán le dice.
¿Qué está haciendo este idiota?
¿Qué se cree?
¿Lo va a poner bien o algo?
Eso he hecho.
8, 40, 16.
Creo que esto debería más o menos dejarlo igual.
Esto lo que pasa es que.
¿Qué está pasando aquí?
¿Qué has hecho?
Bueno.
A ver.
Toda lo que sería el trazos que hay aquí dentro.
Están partiendo.
Claro.
Si el view box.
Que es la caja.
Va de 0 a 56.
Está dejando espacios por fuera.
Entonces lo que he intentado es.
Ustedes la caja.
Para que aunque esto.
Se siga viendo bien.
O sea.
Lo que es el dibujo.
Pero quede justo.
Ya se podría arreglar un poco más.
O sea.
Este va justo a sangre.
Y este.
Este todavía le queda.
Ah no.
Este no está a sangre.
Ahí.
O sea.
Este tiene un poquito también de.
Igual lo debería ajustar.
Bueno.
A ver.
No ha quedado mal.
Bastante bien.
La verdad.
Ya está.
Lo que necesitaríamos ahora es separar un poco.
Os voy a leer.
Os voy a leer.
Porque no os escucho.
O sea.
No os estoy escuchando.
No sé qué estáis diciendo.
Yo a lo mejor estoy aquí.
Solo.
Sí.
Icons.
Nada.
Yo quiero los mismos iconos que tiene TikTok.
No quiero los de Boxe Icons.
Una consulta.
¿Qué utilizas para esa advertencia que te da Codelens?
No me la han preguntado nunca.
Así que espero que.
Que la gente.
Sepa lo que es.
¿Por qué no poner los iconos como una carpeta dentro de Assets?
Porque en este caso.
No sé cómo copiar los SVGs.
Probablemente luego lo pasaremos como un ESG.
No pasa nada.
Pero bueno.
Quería tener por si acaso la oportunidad de utilizar como ESG.
Ellos lo están utilizando como SVGs en línea.
También hay que tener en cuenta.
Los SVGs en línea tienen cosas buenas y cosas malas.
¿Vale?
Y los que sean externos tienen sus cosas buenas y sus cosas malas.
Por ejemplo.
Al ponerlo en línea.
Lo bueno que tienes.
Es que en realidad es más crítico.
En el hecho de que no tienes que hacer una petición.
Para descargar el SVG.
Al ponerlo en línea.
Pues es que lo va a ver inmediatamente.
No vas a ver un salto del SVG.
Lo malo obviamente es que si tienes 80 veces ese icono.
Pues 80 veces lo tienes en línea.
Eso te lo arregla y te lo cachea mejor si lo tienes externo.
En este caso TikTok lo tiene en línea.
Y me imagino que es porque es algo como muy crítico para ellos.
¿Esto es mejor este live a mi clase escolar?
Me alegro mucho de pin.
Me alegro mucho.
Es una configuración.
¿Cómo harías esos commits individuales sin Visual Studio Code?
Pero guay, como si los he estado haciendo antes.
Guay, como vamos a ver.
Comment.
Voy a poner estos tres que son añadir.
Mira.
Y en Ranko.
Esto es porque yo estoy utilizando una herramienta que se llama Swimono.
Estoy aquí en la terminal.
Bueno, no sé por qué esto se ve mal.
¿Por qué se ve mal?
Pero porque esto es el scroll.
El role está ahí en medio y por eso se ve mal.
El tema.
Si quieres comitear.
Mira.
Lo voy a tirar para atrás para que veas y todo.
Es un git status.
Para ver cuál es el estado que tienes de tus ficheros.
Esto y mucho más.
Todo esto que te voy a explicar.
Y mucho más.
Lo tienes en mi libro de Aprendiendo Git.
Que por cierto está en portada del InPub.
Mira.
Aquí estoy.
Portada del InPub.
Ooks está como uno de los más vendidos.
Bueno, el más vendido de la semana.
¿Por qué?
Porque es la bomba.
Y todavía tengo que subir la nueva versión que la tengo preparada y no ha subido.
Bueno.
Aquí te lo explico.
No te preocupes.
Git status.
Vemos cuál es el estado de nuestros ficheros.
¿Qué queremos?
Bueno.
Pues queremos añadir todo lo que tenemos dentro de Icons.
Bueno.
Pues vamos a añadir todo lo que tengamos.
Los JSX de Icons.
¿Vale?
Todos los JSX.
Fíjate que ya se ha reflejado aquí.
Me ha incorporado al área de stage.
Fase de preparación antes de hacer el commit.
Cuando hagamos un commit.
Los que trae son los que tengamos en el stage.
¿Vale?
Que es como un área temporal.
Donde pones los archivos que tienes preparados.
Los iconos.
¿Vale?
Pues ahora lo que tendrías que hacer.
Tengo una herramienta que justamente me ayuda a hacer estos commits.
¿Vale?
Que es esta de...
En posto.
En Pien Ranko.
Y lo que hace es decirme.
Oye.
¿Qué tipo de cambio es?
Pues le puedo decir feature fix.
No sé qué.
Bueno.
Fíjate que no quieres.
Lo quieres hacer de forma manual.
As git commit.
M.
Y das el mensaje.
En este caso.
Yo quiero decir que esto es una feature.
Que es del paquete de la raíz.
Y estamos añadiendo.
Add video actions.
Por ejemplo.
¿Vale?
Vamos al enter.
Y ya lo tenemos.
Y ahora lo que tenemos que hacer es un git push.
Y ya está.
Si es un git push.
Te dice.
Oye.
¿Qué pasa con el git push?
¿Dónde lo quieres enviar realmente?
Vamos git push origin.
Y le decimos también la rama.
Pues git push origin main.
Creo que si le quitas la rama.
Ah sí.
Git push origin main.
Pensaba que la rama iba a intentar pillar la que tengo ahora mismo.
O sea.
Que si estoy en main.
Que lo haría por defecto ahí.
Aquellos que como utilizo el gg push.
Que justamente hace lo que te acabo de decir.
Pues por eso estoy acostumbrado.
Pero tú le dices.
Vale.
Quiero empujar estos cambios a origin.
Origin.
Sería mi repositorio remoto.
Enter no.
A la rama main.
¿Vale?
Entonces ahora.
Veríamos en mi repositorio remoto.
La forma de abrir directamente desde la terminal.
El repositorio remoto.
Y aquí puedes ver mi commit.
Que acabo de hacer aquí.
Fantásticamente.
En un momento.
Pim pam pum.
Pues aquí ya el resto de cambios.
Pues vamos a poner más cambios.
Puedes hacer aquí.
Lo puedes hacer desde la terminal como he hecho.
New icons.
Hit root.
Tile.
View actions.
El gg push.
Que esto es mi alias.
Favorito del mundo.
Ya lo tenías.
¿Vale?
¿Qué más?
¿Qué más?
Me contáis.
Guitat.
Yo comiteando.
Hola, Midu.
¿Es real native?
No.
Es ria.
Que el fronte de TikTok está crazy.
Está crazy.
Normal.
Está estilando nada más.
Hola.
¿Es visual studio?
¿Es diferente a visual studio?
Sí, es diferente.
Visual studio code es diferente a visual studio.
A secas.
Deja el view box con 0024.
Bueno, ya he intentado.
¿Midu ha merendado?
No.
¿Qué hora es?
¡Hostia!
Son las 6.
Madre mía.
Pues voy a tener que merendar.
¿Midu que debería de aprender si se ria que quiere usar Nex?
Pues si sabes el ria y quieres usar Nex, tienes que aprender todo.
Y si no importas como componente.
Bueno, más o menos.
Algo nueva en Twitch.
Hola, NecoGel.
Y tengo una duda.
¿Los midu coins quedan guardados de un stream para otro?
Sí.
300 midu coins.
Muy bien.
No los inviertas.
Manténlos.
Y los podrás utilizar en siguientes directos.
La DGT recomienda para cada dos horas descansar un ratillo.
Vale, pues ahora voy a descansar.
De hecho, ahora voy a haceros una poll a ver qué creéis que debería merendar.
Vamos a ver.
Poll.
¿Debería merendar?
¿Tú qué dices?
¿Hace falta ser muy bueno en RAW JavaScript para pasar a aprender React?
No, no hace falta ser muy bueno en JavaScript, pero con que se pase un poquillo.
¿Debería merendar?
Pago una encuesta, ¿vale?
Unos donetes.
Y ahora os explico lo que son unos donetes.
¿Qué más tengo por ahí?
Tengo unos donetes.
Un sándwich.
Tomas.
De hambre.
Veremos cómo de troll sois, ¿vale?
Comete unos donetes.
Hazte un sándwich.
¿Qué más?
¿Qué más puedo comer?
¿Qué tengo yo por ahí?
Come lo que quieras.
Comida china.
Hostia, no.
Comida china.
Qué asco.
Como sois tan troll, sois capaces de ponerme cosas muy chungas.
Así que, bueno.
Vamos a poner duración cinco minutos.
¿Quién es el más troll?
Midu, antes de que venía eran 250 espectadores.
Ahora me aparecen 1250.
¿Pero qué ha pasado en Árgel?
Pues que te fuiste y la gente vino aquí a saco.
Cosa súper rara.
Broma.
Creo que es que Twitch me está promocionando en portada.
Y creo que por eso viene tanta gente.
Por cierto, bienvenidos a todos y bienvenidas.
Muchas gracias por pasaros.
Seguidme.
¿Verdad?
Estamos haciendo un clon de TikTok, por si no lo sabías.
Nos está quedando bastante bien.
A ver, llevo dos horas, pero también es verdad que hemos hecho proyectos desde cero.
Ya vamos así.
Y además, mira, puedes hacer scroll hacia abajo y tal.
Aquí tenemos los iconitos.
De hecho, le voy a dar un poquito de espacio antes de continuar.
Que esto se me olvide.
Lo estamos haciendo desde cero.
Lo estamos haciendo en React.
Ah, para que sepáis qué es lo que comer.
Unos donetes.
No me llevo...
Esto no es patrocinado, ¿eh?
Unos donetes es esto.
Son unos donetes recubiertos de chocolate.
Estos están buenísimos, pero estos no tengo.
Solo tengo estos de chocolate, ¿vale?
Y eso.
Que si queréis que me coman unos donetes.
Es que creo que lo único que tengo.
Eso o me hago un sándwich.
Más separación de estas cosas, ¿no?
Cada acción que tendríamos aquí debería tener un poquito de separación.
No sé, un margin, bottom, 20 píxeles.
Lo que pasa es que esto lo sube para arriba.
¿Cuál es la separación que tenemos aquí, por ejemplo?
Que tenga algún tipo de separación.
¿Cuál es la separación?
Vale, aquí la veo.
15.
Tiene 15 text align center.
Vale.
Este text align center...
Me la voy a copiar.
Voy a copiar para que vamos a inventar algo.
Sí, ya.
Margin, bottom...
Ya, 15 o era 20.
15, ¿verdad?
Y text align center creo que no es necesario.
Porque ya lo tenemos todo centrado.
Pero bueno.
Midu...
Es una cosa muy rara.
Voy a quitar el strong que ellos tenían.
Porque no tiene mucho sentido este strong cuando luego lo van a estilar para que no sea strong.
Pero bueno.
No tiene más sentido que sea así.
Porque aquí tienen así.
A ver una cosa.
¿Cuánto ocupaste?
55, 56.
35, 56.
40.
¿Y by quién sos?
Grande Midu.
Grande.
8.
Vale.
Bueno, más o menos.
Yo creo que...
La sensación que estos...
Si le ponemos aquí width 32 pixels...
Pa, pa, pa, pa...
Yo creo que tienen que ser de 40.
Es que no sé si me lo estoy imaginando.
A ver.
Es que cuando lo pongo aquí me dice 35.
40, 35.
El SVG es de 40.
El SVG, lo que es de fuera, es de 40.
Lo veo más grande.
No sé por qué.
No sé si se hace el zoom.
Ya no sé...
Lo sé.
Súper loco.
El zoom de Chrome está súper...
Súper, súper loco.
Ahora lo veo un poco más...
Cada uno está de su padre y su madre.
Vamos a dejar un poquito más grande.
Vamos a dejar 45.
Me parece a mí que tiene más sentido.
45, 45.
Esto para...
Y así pruebo si esto funciona aquí o no funciona aquí.
El tema de las props.
Creo que en el heart, el corazón, no lo he preparado bien, ¿no?
Que es lo que me ha pasado antes.
Vamos a poner aquí props.
Té, té, té, té, tén.
Share, por ejemplo.
Aquí tiene 56.
No.
Props, viewbox, 0, 0, 48.
Están metiendo el que es por defecto.
Está esto.
¿Cómo queda el heart?
¿Cómo es el único?
Que he hecho ahí...
Feel is not defined.
¿Cómo es el único?
Hostia, este.
Corazón, un lado.
Vamos a ser lo único que no he podido sacar fácil, bien.
Me está dando esos problemillas de...
Mira.
Hacerlos este.
Un poquito más pequeño.
25 píxeles, que yo creo que ya se vería bien.
Esto es lo que vamos a hacer, ¿vale?
Y ya no tocamos más y que nos olvidamos de él.
¿Vas a la propiedad title?
Bueno, en este caso...
¿Dónde está la propiedad title?
¿Dónde la hemos dejado?
Propiedad title...
Aquí.
Bueno, es que si te pones encima...
A ver si soy capaz de enseñártelo.
Si te pones encima con el puntero...
Hostia, ¿cómo se ve ahora esto?
Esto es que me lo he petado, ¿eh?
Pero bueno.
Voy a enseñártelo el puntero.
Si soy capaz...
A ver.
Es que está loquísimo.
Lo del tema del zoom...
No se ha arreglado, ¿eh?
Ya está ahí.
No se ha arreglado.
Es que si te pones encima...
Claro.
Es que ahora la site este que hemos puesto por aquí...
Para que esto se quede por encima...
Teníamos que poner un z-index 1, ¿no?
Si te pones encima con un title...
Debería decirte lo que es, ¿vale?
Debería decir...
Vale, esto es...
No sé qué.
Si vamos en TikTok...
Me imagino que sí que aquí lo veremos bien...
Porque me imagino que tendrán...
Ahora mismo bien por encima y esto.
Lo en desktop...
Ni siquiera...
No se ve.
Pero es que ahora tengo dudas.
Si no se ve...
Mi culpa...
Bueno, o sea...
Eso es TikTok.
O sea, no es mi culpa.
No sé si es por mi culpa...
O es más por culpa de...
Zoom este...
Este que me tiene un poco frito.
Esperando en Firefox.
A ver si lo veo ahí.
Se supone que es para eso.
Para que cuando te pongas encima...
Te ponga el título.
No sé también si es por un tema de accesibilidad...
En el caso de que no funcione lo de dentro...
Pero yo creo que en ese caso...
El title debería ir dentro del SVG.
Pero bueno.
Igualmente...
Ah...
Video Player...
Esto...
Yo pulso aquí...
En...
Por ejemplo...
Aquí...
Y le doy justo...
Ah, vale.
Esto es el texto.
Pero el texto sí que funciona como botón.
Bastante raro, ¿eh?
Cómo funciona esto.
Esto lo vamos a arreglar nosotros de otra forma.
Vamos a intentar poner aquí un botón.
Haremos un poco...
Para que aunque quede...
Mientras lo voy estilando...
Botón...
Ahora haremos el tema de Intersection of Server...
Para que se reproduzca automáticamente...
Y todo esto.
Vale.
Esto...
ClassName...
Styles...
ActionButton.
Esta es la por aquí.
ActionButton...
ActionButton...
ActionButton...
ActionButton...
Background...
Transparent...
Border 0...
Y que quería hacer este Actions...
Lo quería dejar por encima...
Porque me da a mí la sensación que esto lo vamos a necesitar.
Volver a nuestro Moto G 4...
¿Veis que ahora me ha dejado aquí en medio...?
Cargado los estilos.
Un momento.
Cargado los estilos aquí.
ActButton...
Estos estilos que ahora se ven mal...
Es porque lo he puesto dentro del botón.
Este Action es el que antes tenía...
Vale.
Pues en lugar de...
Vamos a hacer esto.
Es que estos Actions...
Me voy a cargar...
¿Qué voy a hacer?
Vamos a quitar esto.
Vamos a poner el Action...
Que sean los botones directamente...
Menos Div...
El botón directamente...
Action...
Fuera...
Action...
Fuera...
Action...
Damos el ActionButton...
Directamente empezamos a estilar...
Background...
Transparent...
Order 0...
¿Vale?
Ahora vemos esto...
Y al menos que sea todo clicable...
Que este botón lo tengamos aquí...
¿Vale?
Poner las acciones...
Handle Like...
Alert Like...
Handle Comment...
Alert Comment...
Handle Share...
Alert Share...
Esto por ahora...
Vamos a poner que cada uno haga una cosa...
Like...
Por aquí...
Handle Share...
Haremos que estas cosas funcionen...
De forma...
Handle Shares...
Share...
No Shares...
Antes de funcionar...
Al menos ahora funcionan...
Luego le damos un vistazo...
¿Vale?
Ahora vemos...
¿Esa ascensión de errores es molesta?
Ah...
A mí me gusta Fabián...
La verdad...
Me ayuda bastante...
Luego es que cuando está en rojo...
Pues...
Miro por qué me pone en rojo...
O por qué está en rojo...
Este no lo estoy utilizando...
¿Ves?
Así veo los errores...
Súper fácil...
Me ayuda un montón...
A la hora de programar...
¿Ves?
Me dice...
Pusiste Share en Comments...
Pues mira...
Me di cuenta súper rápido...
Gracias al error este...
Lo positivo de esto...
Es que no me siento tan mal ahora...
Renegando un CSS...
Mira la cara de Midu...
No...
¿Por qué tienes que...
Estar sufriendo?
No hombre...
La verdad es que con CSS...
Hay que tener paciencia a veces...
Oye...
Juan Pablo Solana...
Gracias por suscribirte con Prime...
Behider...
Muchas gracias a todos...
Que esta...
No sé...
¿No ha salido la poll?
¿Ha terminado ya la poll de...
Y no me cuenta?
No...
La poll...
Entró...
Cuenta, ¿no?
Eso no es un empate...
Mentira...
Mentira...
No...
No he visto lo de la poll...
Gestionar encuesta...
Encuestados...
Venga...
Vamos a ver los resultados de la poll...
A ver lo que...
No lo has puesto...
Mentira...
Cómete unos donetes...
O hazte un sándwich...
Hostia...
Sí que ha repetido...
Se ha empatado...
Qué fuerte...
Qué fuerte...
No más muere de hambre...
54 personas querían que no comiese...
Y que muriese de hambre...
54 votos...
Y...
Come lo que quieras...
14 personas...
Eh...
No sé...
Se puede hacer un desglose de votos...
Donantes de bits...
Donantes de puntos de canal...
Nefine...
¿Y qué habrá dotado Nefine?
¿Aunfine quería que muriese de hambre?
¿Pudiera ser?
No, no...
Se puede ver quién ha votado...
Tacos de perro...
Ha pagado...
Hostia...
No sé si esto es privado...
Debería ser privado...
Pero veo que hay gente que ha pagado...
Con mi DuCoins...
Para que me muriese de hambre...
O sea...
Qué fuerte...
Es fuerte...
Hay...
No...
Nadie quería...
Come lo que quieras...
Nadie confiaba en mi buen criterio...
Que me haga un sándwich...
Hay gente que se ha contribuido...
Pero nada...
¿Vosotros lo que queríais?
Nefine lo que queríais...
Que me comiese aquí unos donetes...
Muy bien...
Perfecto...
Pues venga...
Voy a por los donetes...
Dejar un momento...
Con...
Con...
Con este...
¿Vale?
Cuenta algo...
Y...
Ahora con mis donetes...
Con...
¿Vale?
Gracias.
Gracias.
¿Qué te han dicho?
¿Te han dicho algo?
¿Están bien, gruad?
Dicen que sí.
¿Cómo estás, Midurex?
¿Cómo te trata la vida?
Estoy bien.
Muchas gracias por estar aquí conmigo.
Me encanta estar con mi papá.
Estamos haciendo el preprogramming.
Muy bien.
Toma.
Un donut.
Muy bien.
A dormir.
Me he pillado un café también.
¿Por qué elige donetes si eran pate?
Debería comer ambas.
Hostia.
Pues luego voy a por el sándwich, ¿vale?
Tres donetes.
Una encuesta para el nombre del Midurex.
Ya tiene nombre.
Se llama gruad.
Bueno, ya me he quedado con los nombres de la gente que quería que muriese de hambre.
Muy bien.
Cuenta.
Un cuento con los nombres.
Voy a seguir, va, un poquito.
Vamos a seguir mientras me como el donete y todo esto.
¿Qué tengo que hacer?
Va.
La parte de abajo.
La parte de abajo que es un momento.
Es un momento esto y ya tenemos un poco eso.
Le damos un poquito de caña.
Además, aquí hay dos cosas que son un poco divertidas.
Así que vamos a darle a descripción.
Vamos a comernos el donete mientras.
Voy a poner la sub.
Cante.
Sub me haré otro donete más.
Player.
Video.
Video.
Description.
Esta parte sí que ahora mismo puede estar abajo del todo.
¿Le podemos poner footer?
Anda bien.
Footer.
No es escrito, ¿eh?
Si no.
Tendríamos por un lado el strong.
Voy a poner música mientras como.
Para que no me tengáis que escuchar ahí a saco.
¿Cuánto el anzol?
Así no puedo, ¿eh?
El anzol, muchas gracias por las subs, hombre.
Muchas, muchas, muchas gracias.
Por regalar subs.
Mira, vamos a poner el anzol.
El de la música parece que está haciendo otra cosa, ¿eh?
No, no, no, no, no, no.
O sea.
Ay, coño.
Que se me cae el donete.
¿Pero esto qué es?
Pero.
Pero, Aidix.
Pero, Aidix.
Pero, Aidix.
¿Dónde vas con las 20 subs?
Pero que.
Me va.
Me voy a morir con los donetes estos.
Estos son los donetes.
Se vienen 84 horas, ¿eh?
Gracias.
Muchas gracias.
Me cago la leche.
La leche.
Vamos a poner aquí.
Muchas gracias, Aidix.
Un montón de gracias.
Album.
Disc.
que es un punto j6x
esto si le das
te lleva a un
más unido
idix muchas gracias
todavía escucho
las suscripciones
y
y
y
y
y
y
y
y
y
y
y
y
y
y
pues mira esto sí que es un svg
como esto más o menos ya os lo he explicado unas cuantas veces estoy yendo por faena vale
mmm
y hacemos esto así vemos más
más cositas
bueno que esto es un anco pero bueno por ahora
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
y
¿Vale?
Animation
Y este álbum
Aquí, ¿vale?
Tenemos que renderizar esto
Este álbum disc
Lo vamos a renderizar dentro de la descripción
Lo vamos a poner aquí
Este álbum disc lo vamos a importar
Album disc from
Album disc
Tenemos la descripción
Este video description
Nos vamos al video player
Video player, video player
Vale, estas son las actions
Solo que al video description
Necesita el
Autor y la descripción
Autor, descripción, claro
Álbum, image
El álbum, image
Esto
Vamos a quitar esto aquí
El álbum, image
Autor, descripción
Esto aquí
El álbum, image
Esto
Vamos a quitar esto aquí
El álbum, image
Autor, descripción
Esto aquí
Coño
Yo me he comido los donetes, por cierto
Ya me he comido los donetes
Lávaro
Ibix, de nuevo, muchas gracias
Muchas gracias también
Alonsol, muchas gracias a los dos
Madre mía
Qué cracks
Venga, vamos a seguir
Venga, vamos a seguir
Así cuanto antes terminemos con esta cosa
A ver qué le pasa a esto
Me sale aquí llorando esto
Vale, porque el footer este
Tenía que ser un position
Absolute
Bottom
Zeta index
Esto me lo copio
Son las 6 y 24 por aquí
Vale, vamos con los estilos del footer
¿Cómo le llamamos esto?
Posición absolute
Voy a poner footer
O...
Mira, aquí tenemos a Idix
Está también aquí
Vale, la descripción
Vale, me falta el disco, ¿no?
Vale, me falta el disco, ¿no?
Vale, me falta el disco, ¿no?
Vale
Vale
El album disc este que tenemos el álbum
No solo tiene que estar dando vueltas
Como un loco
Es que el álbum tiene que enseñar el...
Tiene que enseñar el...
Background
Yorel
Assets
Album.svg
¿Y esto qué?
Album cover le hemos llamado
Vale, pues vamos con el álbum cover
Vale, pues vamos con el álbum cover
Es que le he llamado álbum image
Vamos a llamarlo igual en todos sitios
Vamos a llamarlo igual en todos sitios
Álbum image
Álbum cover
Álbum cover
Álbum cover
Álbum cover
Álbum cover
Álbum cover
Hostia, el álbum cover
Se ha ido de las manos el álbum cover esta
¿Cómo le ha pasado este álbum cover?
Esta imagen
O sea, ha dicho...
Todo para mí
Todo para mí
Uy
Hostia, la animación...
He hecho algo mal en la animación
Es que antes la he visto...
Animation
Rotate
Infinite
Vale, al menos...
Hostia
El álbum cover dando vueltas ahí como un loco
Vamos
Vamos
Hostia, pero hay una cosa que me tiene aquí
Loco
Ah, vale
Border
Radius
100%
Pero...
Se sigue sin ver el álbum
Es que esto debería ser mal, ¿no?
¿Cuánto ocupa esto?
150
Aquí...
O sea, una cosa es más grande que la otra
O sea, esto es 60 y no sé cuánto
¿Cuánto?
48
Según esto
O sea, una cosa es la imagen
Border radius
Y esto vamos a ponerlo un poco más grande
48px, 48px
Display
Dale, grarrr
Ahí está, dándole vueltas
Grarrr
Yes
Venga, esto debería ser un display flex
Flex
Flex
Flexend
Un padding de 20px más o menos
Color blanco
Space between
Ay, no, espérate
Es que yo...
No, esto estaba bien
Esto estaba bien
Esto era un flexend
Claro, el tema es...
Primero que el font size debería ser un poco más pequeño
Bueno...
No es malo, ¿no?
Bueno...
No es malo, ¿no?
Bueno...
No es malo, ¿no?
Bueno...
No es malo, ¿no?
Description
Bueno, vamos a poner este...
Description sí que lo vamos a poner aquí
El álbum disc lo vamos a apretar de aquí
Check it out, check it out
Check it out, check it out
Check it out
Check it out
Check it out
¡Gracias!
Vale, a ver que le ha gustado el álbum disc.
Mmm, pero yo creo que esto es que Slido no.
VideoPlayer, vale, esto es porque aquí todo esto que estaba haciendo aquí, este VideoDescription.
No, la he liado, ah bueno, no pasa nada, porque, no me olvides que se puede hacer un Undo en
Visual Studio Code y te salva la vida, te salva la vida, es que he borrado un archivo sin querer
y ya me estaba teniendo lo peor de nooooor.
Vale, estoy creando el VideoDescription, esto es porque estoy importando mal este.
Este VideoDescription que estoy importando en este index no lo tenía que importar aquí,
lo vamos a importar de . . . . components.
Description, vale.
Vale, me dice que no existe, porque esto es VideoDescription, o sea, es un index, o sea, fuera.
¡Bam!
Vale, no quieres funcionar, bueno.
A ver, components, bar, video, a ver, . . . bar, . . .
VideoDescription, bar.
Vale, ahora me ha petado otra vez los estilos que había arreglado.
Vídeos, VideoDescription, no, si aquí lo tenía todo, ¿no? Video, Margin Top.
Esto es más que nada, me parece.
Es algo que se me ha olvidado.
Que a lo mejor tenía un editor aquí.
Ah, no, este DisplayFlex ya está.
Y entonces este.
Ah, es que este no me está pillando los estilos.
Vale, vale.
Vale, vale, vale, vale.
El index, tenemos el autor por aquí, author.
Sí, con cuidado porque esto no es volt, es 600.
El color da igual.
Fonsight 17, pixel perfect, ahí a tope.
Ay, sí, el color sí que lo había hecho, esto.
Es que lo acabo de borrar, no sé por qué.
Vale, esto lo podemos quitar.
¡Buah, que me falta el ticker este!
La madre que lo parió.
El ticker.
Y estos son 17 pixels también, todo lo que es texto.
Lado, size, 15.
Piri, piri.
Vale, además aquí debe haber una separación, un poquito.
Bastante separación.
O sea, es como que hubiera un máximo.
A ver, yo como tengo esto.
Esto es la idea esta y aquí tendríamos el álbum.
No sé si hacerlo más bien al revés o ponerle un máximo a este.
A ver, vamos a ver otra descripción.
Está poniendo un poco porno, ¿eh?
La animación me dice Miroso HD.
¿No es un segundo más?
Hostia, no lo he contado, pero si me dices que es un segundo más, lo pongo.
He puesto tres por poner algo que le estuviese dando vueltas, ¿eh?
Pero si me dices que es un segundo más, me fío de ti.
Voy a contarlo.
Vale.
Pues...
Esto, un poco así.
Esto me parece que debería ir un poco más pegado a la derecha.
Porque es que de hecho esto...
Tiene súper poco de separación aquí.
Y yo aquí lo he separado bastante más.
Bastante más.
No sé si serán ocho píxeles o algo así.
¿Cómo llamamos a esto?
Punto actions...
Vale.
Pero bueno, esto...
A mí me parece que hay aquí...
Ah, bueno, claro.
Es que este es oscuro.
¿Qué le pasa al Andrew Garfield este?
Vas a decir, no, Andrew Garfield, di la verdad y punto.
Y déjate chorradas.
Sí.
Aquí hay como un...
Para que se vea lo de abajo.
Fíjate que hay como un fade out aquí.
Un degradado.
Pues...
Tendríamos que añadirlo, ¿no?
Para que se vea.
Porque me imagino...
Ah, esto solo está...
Esto se mueve solo cuando es play.
Cuando hace play.
Pues esto también lo deberíamos arreglar, ¿no?
O sea, hacerlo al menos.
Y esto tiene un máximo 274.
O sea, que en la descripción...
A ver, vamos por partes.
Una, la descripción.
En la descripción tendríamos aquí todo el tema del footer.
Vamos a poner aquí un...
Styles...
Text Grapper.
Punto text.
Bueno, text.
Vamos a poner que sea todo el grapper.
Máximo 275 píxeles.
Vamos a ver si el display flex...
Yo esto lo he hecho bien.
Bueno, claro.
Es que...
Aunque yo esto...
Esto es que ocupa menos.
Entonces estaría bien al menos ponerle una separación.
No sé.
16 píxeles.
O 32.
32 píxeles a lo mejor.
Para que al menos se separe.
Ahora, también debería quitar el margin-bottom de este.
En el tec.
Margin-bottom 0.
Para que quede bien alineado hacia abajo.
Entonces, text-rapper.
Le ponemos el padding-right este.
Por si suena más grande.
Y ya así queda bastante mejor.
Nos faltaría lo del...
Ese degradado.
Background.
Eh...
Fade out.
Había un play...
¿Cómo era este?
CSS...
No.
No.
¿Cómo era?
Fade in?
No.
Fade out.
¿Será el...?
No.
Es que esto es un fade in.
Eh...
Background.
De...
Playground.
No.
Es que...
Ah!
No me acuerdo el generator.
Ah!
Generator.
Background.
CSS.
Generator.
Este.
CSS.
Mira cuántas veces lo he utilizado.
Casi ninguna.
Pues...
Esto.
Lo que la idea sería.
Pues ponerla...
Quitamos uno.
Sería en negro.
Y este.
Sería básicamente así.
Lo que habría que cambiar es que va de abajo arriba.
O sea, sería...
Al revés, ¿no?
No.
Así.
A cero.
Y...
Ya está.
Y el stop...
No sé cómo sería esto.
O sea, no sé si hay muchos stops.
No sé cómo...
A ver si no nos podríamos copiar.
Pero me parece que ya a mí el primero ya...
Ya tiene algún tipo de...
Degrado.
O sea, que...
Que no se ve totalmente negro.
Que sería algo más así.
Me da la sensación.
¿Qué?
La sensación en broma give.
Ok.
Y esto...
Si estoy metiendo en el footer...
Algo así.
algo así. A ver, esto sería 0, 0. Vamos a quitar todo esto, no sé por qué esa bestialidad.
Pero sería algo así, ¿no? Entiendo más o menos. Bueno, por ahora vamos a dejar este.
Pues algo así, algo así, ¿no? Oye, ¿hacemos un sorteo o qué? Sí, venga, vamos a hacer un sorteo, ¿no?
Con lo fácil que era ayer hacer un degradado con Tailwind, ¿eh? Cago en la leche. Venga, vamos a hacer un sorteo, que llevamos 2 horas 40.
Tenemos aquí a Grar, que está nervioso. Grar, ¿qué pasa? Venga, vamos a hacer un sorteo. ¡Sorteo, sorteo!
Además, vamos a aprovechar que antes éramos 1.200 y se han ido 500 personas, pero seguro que hay gente que no es parte de la comunidad, ¿sabes?
Entonces, digo, hacemos el sorteo cuando se vaya todo el mundo. ¡Y ya está! Y entonces, pues mejor para los que estemos aquí.
Vamos a poner una keyword, va. Vamos a poner una keyword. Vamos a poner que la keyword sea... Espérate, se no ha dicho todavía.
¡Madre mía! ¡Madre mía, manjerez! Regalando 5 suscripciones cuando va a hacer el sorteo. ¡Mamjerez! Muchas gracias por esas suscripciones.
Esas 5 suscripciones a la comunidad. Muchas, muchas, muchas, muchas gracias. Muchas gracias.
A ver, ¿cuál puede ser la palabra? Ah, vamos a poner que la palabra mágica sea Grar. Va, que sea Grar.
Ahora os digo como Grar, que tiene que ser escrito como G-R-O-H-R. Como Grar, ¿no? Como es Grar. No sé cuánto...
¿Cómo es Grar? ¿Row no? Grar. Pero espérate que todavía no me he puesto.
Ah, sí, ¿no? Esto ya ha empezado. ¡Madre! Ya... Sí, sí, sí, es Grar. Grar. Muy bien, Grar.
Ahí está, Grar. Están entrando... Eh... A ver, ¿por qué solo 4 personas? No, pero si aquí hay un montón.
No entiendo. Nunca entiendo esto. Nunca entiendo estas cosas. ¿Por qué pone 4 personas elegibles si hay una lista entera aquí de...?
Mirad. Como voy a enseñar, veáis. O sea... ¿Ves? Me pone aquí usuarios. O sea, aquí me salen un montón de usuarios.
¿Por qué solo me pasa...? ¿Por qué solo me salen los que no son... Ah, vamos. Ahora, ahora. 153 elegibles. Vale, vale.
Es que estaba tardando. Estaba tardando. Vale, vale.
Pues eso. Oye, mamjerez, muchas gracias. Gracias a IDX. Muchas gracias a todos.
Ya sabéis. Ponéis Grar. De Grar. De Grar. Como... ¿Cómo es Grar? Grar. Pues eso. Grar.
Y... Y nada. Que mucha suerte. Vamos a... ¿Qué sorteamos? ¿Cuándo, no? Libro aprendiendo Grit. Grit. Anda, que Grit. Grit.
Libro aprendiendo Git. Vale. Vamos a sortear... Vamos a sortear unos cuantos. Va. Vamos a sortear unos cuantos. Venga.
Vamos a sortear unos cuantos. Y... Le doy ya, ¿eh? Grar. Grar. Grar.
191... 192 personas elegibles. No está participando mucha gente. De los que estamos, al final, tampoco mucha está participando.
Venga. Grar. Grar. Grar. Vale. Le doy. La primera persona que le va a tocar es a...
Amoktur. Amoktur. La primera persona que le toca es Amoktur. Amoktur, dinos algo. Cuéntanos.
¿No te habrás ido, Amoktur? Amoktur. No se ha enterado todavía Amoktur.
Se habrá enterado Amoktur. Vamos a...
Amok... Al agua. Se ha ido al agua.
Pero Amoktur, si has participado, ¿cómo te has podido ir en el momento en el que íbamos a decir a quién le había tocado?
Amoktur. ¿O es que estás saltando de alegría?
Amoktur no existe, son los padres.
Voy a apuntar...
Amoktur.
A ver si en algún momento da señales de vida Amoktur.
Uy, que llega el tren del hype y todo.
Venga, vamos a sortear otra. Va.
Roll it. Restart.
XXMilo11XX
Hostia.
XXMilo11XX
Tiene cojones porque XXMilo...
Esta personita...
Mira, X...
¡Ni me sigue el cabrón!
¡Ni me sigue!
Not following.
Pero, ¿cómo me puede tocar una persona que no me siga? Ni siquiera.
Esto está roto.
Uy, XMilo te la estás jugando también que tampoco contestas.
Bueno, os voy a apuntar.
No vale.
Es un bot.
No me estrenaría.
Oye, dos personas que la ha tocado, dos personas que no contestan.
Ah, no.
Si soy sub.
Ah, sí.
Ah, no.
Pues aquí pone not following.
XXMilo11X.
Si soy...
Jaja.
Bueno, ha escrito, ha escrito.
XMilo ha escrito, eh.
Ha escrito.
XMilo.
Venga, va.
Uno más.
Y seguimos codeando, va.
Le doy a Roll it, eh.
Para el próximo sorteo solo seguidores y subs.
Ah, si soy sub.
Jaja, otra vez.
Parece un bot, eh.
XMilo.
Dos veces ha escrito, dos veces ha escrito lo mismo.
Le doy, le doy, va.
XMilo.
El tercero y último, por ahora.
Alsagüero.
Alsagüero.
Alsagüero.
Que me sigue desde el 18 de septiembre de 2021.
Un día a las 5 de la tarde.
Donde decidió...
Seguirme.
Luego vamos a hacer un...
Vamos a hacer un sorteo solo para subs, va.
Alsagüero.
Alsagüero.
Alsagüero.
¿Estás ahí, Alsagüero?
Escribando premios compro.
Sí, me sigue desde las 5.
O sea, me sigue desde hace un rato, básicamente.
A ver, vamos a ver si...
Voy a apuntarme también al Alsagüero.
Vamos a ver si puedo...
Por ejemplo.
Channel Regulars.
Users.
Vale, vamos a poner...
Vamos a poner...
Usuarios regulares.
Vamos a poner usuarios regulares.
Y que además sean sus...
Bueno, o sea, regulares y suscriptores.
Los dos.
Los suscriptores le vamos a dar el doble de chance.
¿Vale?
O sea, doble de chance.
Para que lo veáis, ¿eh?
No vamos a inventar.
Vamos a hacer regulares.
Suscriptores.
Suscriptores doble chance.
¿Vale?
Así que...
Que ahí lo tenéis.
78 personas ahora.
78.
O sea, que ya se ha reducido bastante.
Bueno, hemos hecho test para todo el mundo.
Pues ahora vamos a hacer uno para la gente que lleva aquí bastante tiempo.
Así que...
Vamos a darle.
Regulares.
Suscriptores.
Los subs tienen doble posibilidades.
Le voy a dar a Rollit.
Que dice aquí que los regulares...
Selectos.
Son un grupo de usuarios selectos, no son todos.
Hostia.
Ya me imagino, pero bueno.
Quiero pensar que los regulares...
Digo yo que serán regulares de verdad.
A ver, los subs seguro que van a participar.
Así que...
Venga.
Vamos a darle.
Rollit, ¿eh?
Al Rollit.
Vamos.
Rollit y le toca...
Yomar Sánchez.
Que sí que me sigue desde marzo, ¿eh?
Yomar.
No se puede decir que no, Yomar.
Yomar sí que es conocido, ¿eh?
Yomar sí que es conocido.
Grar, mira.
O sea, Yomar le ha tocado.
Y dice, no, no.
Yo voy a participar más todavía.
A ver si reviento esto.
No, Yomar.
No hace falta que vuelvas a poner Grar.
Ya te ha tocado.
Ya te ha tocado.
Que por cierto, solo os puede tocar una vez, ¿eh?
Luego, si os toca...
Luego, si vuelvo a tocar, pues nada.
Yomar.
Pues si ya tienes el libro, no pasa nada.
Se lo puede regalar a alguien.
No pasa nada.
Vuelva a sortear.
Sí.
Sí.
No, hombre.
Yo te lo regalo y tú lo regalas a quien quieras.
Si alguien lo quiere, que te escriba por privado y ya está.
No pasa nada.
Yomar.
Te lo regalo.
Y tú lo regalas.
O lo que sea.
Venga, le doy.
Roll it.
Tomás FX.
Tomás FX.
Madre mía.
Estamos sorteando un montón de libros.
Es brutal.
Tomás FX.
Lo voy a apuntar también.
Tomás FX.
Aquí Tomás.
Ostras.
Primero me tocó una sub y luego el libro.
Madre mía, Tomás.
Eso sí que es suerte, tío.
O sea, eso sí que es suerte, ¿eh?
O sea, madre mía.
No te has visto en otra, vamos.
No te has visto en otra.
No te has visto en otra.
Venga, pues...
Te conto más.
Luego continuamos.
Va.
Luego varé el sorteo.
Luego haremos el sorteo chungo, además.
Del tema de...
De las entradas.
¿Vale?
Muchas felicidades a todos.
Y...
Y nada.
Luego seguimos.
No os preocupéis.
Que habrá más premios.
Habrá más.
Vale.
Pues venga, vamos a seguir.
Por ahora ya teníamos esto.
Hombre, yo creo que ahora sí que empieza a tener mejor pinta, ¿no?
En el sentido de que...
Joder.
Ahora sí que se parece.
Igual todavía los iconos los veo un pelín más grandes de lo que son.
No sé si es cosa mía.
Igual es cosa mía.
Vamos a poner...
Por aquí me imagino que esto...
Vale.
O sea, esto ya lo teníamos.
Voy a ir un vídeo más por aquí.
Pam, pam, pam.
Feed videos.
Index.
Pam.
Esto por aquí.
Vamos a poner aquí uno.
Otro más.
Que este es de Beckpool.
Vamos a poner ID3.
Y la descripción...
¿Es gato?
No es un gato.
Vamos a poner una que es un gato.
Hombre.
No es un gato, pero es Goku.
Me parece.
Me parece correcto.
Me pare bien.
Vale.
Dios, esto no es...
Me han engañado.
Venga, no.
Me está solo el detallito del ticker y seguiré.
Y me voy a poner con su pavéis, ¿vale?
Me voy a poner, un momento, con este tema de aquí.
Este ticker, que no sé por qué va tan rápido.
El ticker este me vuelve muy loco.
Entonces, voy a ver esto.
¿Esto qué es?
Me imagino...
Ups, Music Icon.
Ah, no.
¿Esto qué es?
Hostia, Base64.
La madre que lo parió.
La madre que lo parió.
Bueno, mira.
No nos vamos a rayar mucho con el Music Icon este.
Vamos a ir a saco con el Music Icon este.
Pequeño.
Styles.module.css
Music Icon.
Me lo voy a copiar tal cual.
Porque no es muy importante ese Music Icon.
A ver, que si no, podríamos buscar un icono por ahí, ¿no?
Bueno, da igual.
Music Icon, Music Icon, Import Styles from, Styles.module.css, Export, Default, Function, Music Icon, Return, Diff, Classname, Styles.music Icon.
Y lo ponemos aquí en el Description.
Esto de aquí debajo.
Claro, pero más que el Music Icon, o sea, eso es parte solo en Music Icon.
Aquí no sé si poner SongTicker.
Vamos a poner.
Y esto tiene que ser SongTitle.
Lo teníamos en el Feed de Vídeos.
Feed, Vídeos.
Como lo hemos puesto, SongTitle.
SongTitle, SongTitle, SongTitle, SongTitle.
Vamos a llamarle SongTicker a esto.
Index.jsx.
Export, Default, Function, SongTitle, Ticker.
Return.
Es que este, Styles.
Ahí estáis.
Esto es Classname.
Classname.
Y aquí es donde vamos a poner el SongTitle.
Que esto le pasa por aquí.
Por Prop, SongTitle.
Importamos los estilos.
A ver un momento.
Como tengo esto así, no me está enterando.
Aquí.
Que no lo encontraba.
Import from Music Icon.
No, está en Components, Icons, Music Icon.
Vale.
Este que es el Ticker que ahora buscaré.
Porque creo que hay un React Ticker que lo vamos a poder utilizar.
Que es bastante.
O sea, no es algo que sea muy habitual el Ticker este.
Creo que este...
Mira como peta, eh.
Pero bueno.
Es a lightweight and performance.
And performance.
Bueno, no parecía, eh.
A ver, encode sandbox este.
A ver cómo se ve.
Ah, pues mira.
Esto es justamente lo que queremos.
This is of Elemental Ticker.
Pues vamos a instalar este, eh.
Npm install React Ticker.
A ver cómo se utiliza esto.
Ticker.
Ticker.
Ticker.
Por Ticker.
From React Ticker.
Index.
Súper raro este contrato.
¿Para qué es el Index?
This is the element of Element Index.
Es que no entiendo, sinceramente, por qué.
O sea, por qué se inyecta el Index.
O sea, no.
Bueno, no sé.
Total.
Que esto es una render prop.
Vale.
Esto podemos poner que esto es un span.
Son tight.
Span.
Esto así.
Y aquí tenía el speed.
Speed.
Esto por ahí.
Speed 10.
Vale.
Speed 10.
Me imagino que luego tendremos que estilarlo de dentro.
Son ticker este.
Mat title.
Import song ticker from...
Barra barra comp.
Son.
Es el music icon.
Bueno, vamos a ver cómo se está renderizando todo esto.
Y ahora le echa un vistazo.
A ver si tenemos que ajustar cosas y ya está.
Vale.
¿Le gusta?
¿Qué es lo que no le gusta?
No le gusta.
Que estoy intentando importar.
Con los estilos que no existen.
Bueno.
A mí tampoco me gustaría.
O sea que lo puedo entender.
Styles.
Modul.
Entonces ese.
¿Para qué quería?
Los.
Por eso.
Este es un display.
Display flex.
Flex.
Direction.
Rock.
Vale.
Y el music icon este.
Estato.
Modul.
Ah, vale.
Lo que no encuentro es el music icon.
Vale.
Esta es.
Modul.
Barra.
Icons.
Music icon.
Vale.
Y ahora lo que no encuentro es el react ticker.
Vale.
Nada.
Yo creo que es que...
Ay, es que no la he instalado el cabrón.
En PMI Store.
React Ticket.
No la he instalado por las Legacy Peer Depths.
Esto es que ha dado un error.
Seguramente.
Porque la versión de las Peer Dependencies de React.
Han contado 17.02 y esperaba 16.
Pero bueno.
Creo que los ignorar.
Utilizando la Legacy Peer Depths.
Porque la versión 16 es bastante compatible con lo que haya en la 17.
Hostia.
Vale.
Ahí me está rendirizando un 0.
O sea que aquí...
Ah, vale, vale.
He hecho aquí algo raro.
Vale.
Vale.
Esto es efectivamente lo que pensaba.
Que en el vídeo...
Voy a cerrar cosas.
En el vídeo description este...
Aquí.
Tengo que volver...
Ah, no.
Pero si ya lo he envuelto.
En 2Dip.
Este Dip.
No, aquí no.
Aquí no.
Esto y esto.
Hostia, espera.
¿Qué le pasa a esto que...?
Ah, es porque si tengo un footer dentro de un footer, esto no le va a gustar.
Y aquí esto lo tengo que cerrar.
Vale.
Bueno, igualmente no he arreglado nada.
No he arreglado nada, pero esto es porque estos sections...
A ver.
Dentro de este...
De este...
Esto ahora tiene que ser en Display Flex.
Flex Direction Column.
¿No?
Ah, pero si ya lo tengo.
Por partes.
¿Por qué me rendiría el dinero?
Eso para empezar.
Porque el Song Title...
No se lo estoy pasando.
Bueno, vamos por partes.
Vídeo description.
Song Title.
Song Title.
Y el Song Title...
Lo voy a sacar aquí.
Sin reutilizarlo.
Dios.
Al final sí que le tiene que estar llegando...
A la descripción.
O sea, donde estábamos aquí.
Aquí.
Este Song Title.
Aquí sí lo que tengo bien.
¿Vale?
O sea, que aquí sí que le lleva para abajo.
Al Video Description.
Video Description.
Song Title.
Y aquí tenemos el Song Title otra vez.
Aquí está llegando bien.
Entonces nos vamos al Song Ticker.
Song Title.
Esto es lo que nos está gustando.
Este Ticker es una mierda.
O sea, vamos a ver en la documentación exactamente a ver qué es lo que nos gusta.
Qué es lo que está esperando.
Igual es que no se puede renderizar lo que te...
No se puede renderizar un spam.
Pero aquí veo que se puede renderizar lo que de la gana.
O sea, qué le pasa al Ticker este.
Y por qué me está renderizando un cero.
O sea, si yo pongo aquí...
Hola.
¿Por qué me está renderizando un cero?
No lo sabemos.
O sea, que igual es un problema más de la propia librería.
Porque aquí sí que estoy renderizando esto bien.
O sea, no tengo nada...
Otra cosa es lo que tenemos que arreglar de aquí.
Que se ve mal eso.
Pero...
Ticker.
O sea, que está roto esto.
O sea, que está roto esto.
O sabes que en un fragment puede ser.
Vamos a probar.
No, cero.
Hostia.
A ver.
Hace dos años que no se actualiza.
También es que...
A ver.
Marquee HTML.
Yo que sé.
Igual hacemos esto, ¿no?
Evita usarla.
Evita usarla.
Marquee HTML demo.
Es que yo que sé.
Igual al final hacemos esto.
Utilizamos el Marquee.
Tomar por saco aquí el...
Va a ser que usamos esto, ¿eh?
Direction.
Down.
Estoy a mirar si había alguna para la velocidad.
Esto es...
Velocidad de movimiento.
¿Habría que añadir?
No, no, no.
O sea, es que no me fío del Marquee este.
Ay, del Marquee del Ticker.
No, es que no me fío directamente.
Entonces, vamos a poner aquí Song Title.
Deja de salir Ticker, que no te voy a utilizar más.
Basta.
Song Title.
Vamos a ver.
Ahora veremos si es el problema del Ticker.
O qué.
Es que mira qué bien va este.
Fantásticamente bien va.
Pues ya está.
Voy a tomar por saco.
A ver, todos estos sections donde no es.
Vale.
Venga, Ticker.
Adiós.
Text Grapper.
Estamos aquí.
Vale.
Este section.
y flex me está dando
¿sabes el proyecto pensoso que pueda
realizar contribución?
sí
al final
que me sé algunos, es que entra aquí Cap
y tienes millones, lo que te parezca
mejor, lo mejor que puedes hacer es
el mejor, buscarlo de
git first issue, esa es la mejor
buscar así, esta página web
está bastante interesante, donde
tienes un montón de proyectos y puedes decir
vale, pues by language, dices javascript
y estos proyectos que tienen
la etiqueta
de primera, buena primera issue
y entonces puedes ir a reactallbox
le das, y aquí tienes las us
que son buenas para gente que está empezando
entonces le das, ya te lleva, y tienes esto
git first issue
entonces te recomiendo esta
esta está bastante bien para eso
yo haría, sí, porque es que
decirte repositorios, o sea
creo que es más fácil hacer eso
que
que yo te diga repositorios
es que al final van cambiando
mira, para el marquee
¿cuál es?
¿why is marquee deprited?
¿cuál es la mejor alternativa?
a ver
si, seguro que se puede hacer por CSS
lo que no quería era
perder el tiempo
que hacen dos CSS, es una tontería
es una parte muy chiquitita
react fast marquee
mira, este ya
bueno, lo voy a probar
lo voy a probar
y si funciona
vamos a hacer una cosa
voy a arreglar primero
porque
se está peleando
con el display flex
dejamos esto bien
porque fijaos aquí
que esto es una tontería
pero
ah, claro
es que esto tiene
un position absolute
es que esto es una
es por eso, claro
mal, nada
es este deep
que aquí
me copia los estilos
que tiene un position absolute
que no sé qué
no sé cuánto
vale, vale
eso es lo que está pasando
básicamente es esto
vale
esto es lo que está pasando
vale
display flex
align
center
justify
vale
y esto es lo que podríamos hacer aquí
un padding right
ahora he entendido mejor
a ver
padding
a ver
si se ve bien
en esto
vale
creo que este es un poquito
el efecto que hace
vale
así que
ahora he entendido
porque se veía
estaba alucinando
digo
pero que hace ese icono ahí
¿dónde vas?
¿dónde vas al macántaro?
pero ahora he entendido
todo esto fuera
todo esto fuera
aquí está el base 64
ese horrible que tiene
le añadimos el padding right
este
con ese pequeño espacio
vale
ahora esto
el song
le vamos a dar un poquito
de espacio también
al care
vale
y ahora sí que
ahora sí que ya
nos despreocupamos un poco de esto
eh
ah vale
aquí no le he puesto lo de alinearlo
¿no?
no le he puesto esto de alinear
align
center
vale
ya lo pongo
align
item center
vale
y ya lo tenemos
ahora sí que sí
hostia este va súper rápido
bueno
vamos a utilizar el react fast marquee este que me habéis recomendado
así lo probamos
si va bien bien
y si no va bien
dejamos el marquee
y ya está
no importa así
hostia
que cambio he hecho aquí
que no he grabado
no sé cuál es el que no he grabado
pero espero que no se haya roto nada
parece que no
venga
son tickers
invitamos el marquee
marquee
y ese fondo horrible que le ha puesto de gratis
porque le ha dado la gana
o sea ha dicho
sí sí sí
toma
te pongo este fondo
yo que
gradient boolean true
muy bien
o sea
me parece
fantástico
que hagas lo que te dé la gana
me parece bien
vale
a ver
esto es súper súper súper súper rápido
separación
pero bueno yo creo que tampoco está mal
lo único que ha quedado
es más velocidad ¿no?
speed number 20
speed
bien
creo que depende del texto
pero bueno algo así
yo creo que ya está bien ¿no?
le falta un poco más de separación
con lo de arriba
y yo creo que esto ya lo tenemos
finiquitado
vamos a darle 15
más o menos
y ya está
bueno a ver
pues está el tema ¿eh?
a ver
voy a ver un este
Rodri Laya
dice que si busco marquee html
veo un
ah mira que bueno
no lo sabía
qué bueno
qué bueno
no tenía ni idea
muy buena
pre-kated ¿eh?
aquí lo marqué html
no tenía ni idea
vale
a ver
bueno no tiene mala pinta
hostia
lo que pasa
lo que ha pasado aquí
¿por qué?
porque el último
no está encontrando el vídeo
¿vale?
no está encontrando el vídeo
vamos a arreglar esto
porque esto tampoco está muy bien
el graper este
cada item
tiene que ser como mínimo
esto
será así
claro
tiene que ser el vídeo también
tendría que ser el vídeo
tendría que ser algo así
justamente para dar ese
ese problema
también
pero bueno
eso es que no encuentra el vídeo
pero vamos a arreglar también
por si acaso
vídeo
min
este vídeo no encuentra
igual me lo he copiado mal
pero bueno
lo importante es que tenemos esto
me faltaría el menú de abajo
pero bueno
yo creo que podemos pasar a otra cosa
podemos pasar a otra cosa
en el caso
que no encuentra el vídeo
el último vídeo que he puesto aquí
no sé por qué no lo encuentra
vete a saber por qué
lo importante
es que lo demás
sí que está
a ver
visualmente
está mal ¿eh?
no está mal
a mí me gusta
está mal
hostia
¿qué hemos hecho aquí?
a ver esto
claro
esto ya
todo el rato
es el
que no he opcionado antes
¿no?
del aspect ratio
¿qué significa?
que debemos
es que esto
el aspect ratio
vamos a quedar
bueno
voy a dejar de los estilos
vamos a dejarlo tranquilos
porque si no
con los estilos
lo subirás en GitHub
si ya lo estoy subiendo
ya se está subiendo
voy a comitear
todo lo que he hecho
¿vale?
pack json
voy a quitar
vale
dejadme que me concentre un momento aquí
haciendo commits
como si no eran mañana
le quitamos el react ticker este
que ha sido horrible
la esperible
fiat
fit
fiat tanto que yo también
fiat root
react
fast
mal
dependencia
voy a comitear
porque si no
vale
y esto
y esto
music icon
music icon
add more icons
and adapt
the old ones
vale
el song
esto es el song ticker
song ticker
create song ticker
component
to show
song
titel
¿vale?
¿qué más?
video player actions
anders for actions
on video
que todavía no se me paró
pero bueno
video description
esta es la descripción
del video
uno
fix
que hemos hecho para las acciones
así que esto nada
vamos a poner video player
video player
create video description
component
for show
to show
more info
for the use
vale
icon
hostia
music icon
add styles
for music
icon
el feed
the beat
new
new result
for the feed
video player
description
user
description
component
¿vale?
vamos a pushar esto
y así ya tenéis todo
en el
en el
repositorio
de github
¿vale?
perfecto
muy bien
¿cómo estáis?
tres horas
y cuarto
¿eh?
a ver
no está
quiero decir
al principio
qué lento voy
dios mío
o sea
qué lento
pero no estoy
no estoy
no estoy
no está mal
no está mal
podría
venga
os voy a pasar una poll
¿vale?
y vosotros decidimos
voy a leeros
revisa el mock
por lo del
el video que no funciona
ya
para hacer
los videos
en tiktok
que utilizaste
el tema
de los videos
pues que
lo hemos hecho
en directo
todo
¿cuándo debería
crear un archivo
.js o jsx?
jsx
pues cuando
dentro
utilice jsx
ya está
poll
ahora
peléate
con intersection
observer
observ
algo
o
netly
fashions
para mirarlas
o
base
o
tb
con
superbase
de login
que
venga
5 minutos
5 minutos
estás haciendo
testing
no me ha dado
tiempo
o sea
¿qué testing voy a hacer?
todavía no hemos
hecho ningún testing
igual hacemos
más adelante
a ver
bit
react
testing
library
bit
bit project
mira
esto parece interesante
babel rc
claro
es que se necesita
babel rc
babel jest
testing library
in a react
bit project
estoy mirando
porque sé que era
problemático
hacer react
testing library
un poquito de td
componentes de react
hacer td
no es un poco
coñazo
que alguna vez
lo debo
que las pase
putas con eso
bueno
pues vamos a probar
a integrar
vamos a probarlo
no to nada
aquí he encontrado
este ritmi
vamos a intentar
hacerle caso
a ver si
somos capaces
de al menos
pero si no
no la pinta
install
todo desarrollo
y hostia
me he cargado
el package
json
el package
json
el package
json
fix
root
remove
not needed
coma
package
json
data
la verdad
la verdad es que
con los test
los componentes
que habíamos hecho
podríamos hecho
tdd
en alguno
para que lo vierais
pero
es un poco rollo
la verdad
hacer tdd
hay una discusión
bastante interesante
sobre el tema
de tdd
hay gente
que le gusta mucho
es recomendable con los componentes de riac
yo la verdad
es que me parece un poco innecesario
me parece un poco innecesario
pero hace
realmente usaste componentes de riac
no
yo no he utilizado tdd
la verdad es que en general
tampoco
alguna vez que hago tdd
y lo podemos mirar
de como lo hacemos
pero en componentes de riac
me parece un poco innecesario
no creo que probemos hoy algo de aws
me da el gusto
a los
o sea
hacerte de den
los componentes de riac
madre mía
todo lo que hay que instalar
para esto
vamos a probar
a ver
esto
set jest
veremos si esto funciona
que también
set jest
envabel config
y si no
quedaremos sin test
de ningún tipo
source
no tenemos nada
fuera de source
bueno
aquí está haciendo cosas
que ni siquiera necesitamos
porque es css
eso seguro
podríamos quitar
create a directory
then create a
create a mox
vale
según esto
tengo que crear aquí
mox
access
ese mox
create a
yes
setup
dentro de mox
a ver
lrc
in the source
directory
que raro esto
vamos a hacerle caso
test
test
ah porque está buscando
dentro de source
vale vale
yo lo he creado
caca
el fichero donde decía
inside mox
create a
css
mox
.js
file
with this code
create a
yes directory
root
path
of the project
entonces dentro
de otro mox
inside yes
directory
pero
esto no me gusta
count
district
config
as it is
undefined
conf
no es verdad que
integrate
real testing library
revisiones 2
a ver quién es esta persona
cual dames
alberto salvador
no lo he estado viendo
ya que estás del salvador
pero no nos ha funcionado
estaría genial
que esto estuviese
mejor resuelto
es un problema
que mucha gente
se queja
¿ves?
btj integration
eso es lo que le falta
first class
de bt
da muchos problemas
el testing
en bt
por lo que he estado leyendo
es un tema
de las transformaciones
que no son asíncronas
y que
el cómo funciona
bt
ah mira
btj
btj
btj
btj
bueno mira
aquí parece que alguien
porter
hace meses
pero mira
está empezando a crecer
entonces se nota
que es algo
que le preocupa a la gente
btj
.config
pues este tema
input
problems
common.js
bit server
working solution
si es un montón de pasos
bueno lo hemos ido
por ahora
igual luego lo revisamos
otra vez
que me
me lo perdió
supabase
ha ganado
vale
iniciar
rate
gestionar encuesta
verlos
supabase
vale
pues venga
vamos con la base de datos
de supabase
va
venga
vamos a cerrar todo
pa pa pa pa
pa pa
pa
pero no
es el nuestro
vamos a
supabase
supabase
vamos a tener que tener
paciencia
porque yo al menos
es la primera vez que lo utilizo
lo utilizo una vez
muy al principio
pero me imagino
ha cambiado mucho
de hecho tengo que poner
para que el proyecto
lo hicimos en directo aquí
mira está pausado
mi proyecto
así que nada
vamos a empezar un nuevo proyecto
con la organización mía
a ver
ven aquí
ayúdame
tú mira la pantalla
a ver si
te enteras de algo
bueno es que aquí me molestas
es que no te ves
siento
no te ves en la pantalla
ponte aquí
a ver aquí
así
así sales
venga
no te muevas
chao
crea un nuevo proyecto
el nombre
hasta luego
grab
anapi
you can easily interact
vale esto es lo que quiero
justamente
el nombre va a ser pues
mi
toc
toc
¿no?
le hemos llamado
database password
a ver
database password
vamos a poner
una en password aquí
hay que ser fuerte
según esto
la contraseña
vale
me voy a guiar esto
por algún sitio
que no se vea
en cualquier lado
a ver
por aquí
me imagino
que ver la contraseña
no se debería enseñar
voy a hacer
aquí un montón
de cosas abiertas
superbase
vale
y ahora me pregunta
que donde debería
crear esto
lo vamos a crear
en
Frankfurt
cerca de mí está
pero de toda la gente
no lo sé
venga
creamos un proyecto
vale bien
no tarde tanto
es dos minutos
vale
perfecto
dice
mientras espera
venga
vamos a abrir ya la documentación
que parece que la vamos a necesitar
Project API Keys
tu API está asegurada
detrás de un API Gateway
que requiere una API Key
para cada request
puedes utilizar esta Key
para utilizar
database client libraries
perfecto
este es anónimo
dice
esta Key
que podemos poner
en el navegador
vale
dice
esta llave
es segura
de utilizar el navegador
si has activado
role security
para tus
o sea
es
es
un navegador
si has activado
role level security
para tus tablas
y políticas configuradas
vale
server role secret
this key has the ability
to bypass
role level security
o sea
claro
esta es la que me imagino
que será para admin
vale
server role
perfecto
config url
arrestful endpoint
for querying
and managing
your database
y este es el javascript
web token
para de congres
web tokens
perfecto
no le voy a dar reveal
tenemos aquí la librería
javascript
le voy a dar
proyectos de
pues eso igual
estaría bien
mirar uno de ejemplo
real time chat
vanilla out
todo list
vamos a darle al todo
que acaso necesitamos después
bueno esto
haciendo el setting up
entiendo que
de config
lo que vamos a necesitar
vamos a ver
la
javascript
react
que tiene esto
con react
me imagino que
necesitamos
en la variable
de entorno
sería
esto de la config
bueno
no lo creo
vamos a verlo
vale
ya he creado el proyecto
el setup
de database
esquema
o sea
ya
esto no
me imagino
database
si yo me voy a las tablas
ya puedo crear una tabla
no
todavía
está como construyendo
o sea que hasta que no
pueda
vamos a tener que crear las tablas
me imagino que todo esto
esto no hace falta
que lo hagamos nosotros
no tendrá
sí que lo podemos hacer
pero
mira dice
no
wicca
de user management starter
quick start
en SQL editor
o puedes copiar esto
bueno
ahora le daremos al
management starter
este
cuando
ah mira
ya ha terminado
ya ha terminado
pues venga
vamos
vamos a empezar con la tabla
a ver
la tabla
vale
vamos a ver las tablas
ay
a ver las tablas
tablas
tablas
esto es lo que no
vamos a dejar esto
a ver
la primera
user
¿no?
y
user o
users
users
¿no?
un poquito más de eso
descripción
users
of our
application
enable security
entiendo que sí
que vamos a querer esto
restrict access to your table
by enable rls
and write in progress policies
yo lo voy a dar por ahora
que sí
id int 8
entiendo que int 8 no
porque no nos va a empezar
a crear aquí
identifier
yo creo que sí
no creo que haga falta
que pongamos el create add
y el updated add
bueno
el create add sí que lo podemos
hacer
¿no?
subverbios relacional
o tiene base de datos
de distintos tipos
yo creo que es solo relacional
me da a mí la sensación
a ver subverbios
a una firebase
me parece a mí que subverbios
es un poquito más
a bajo nivel
me da a mí
¿cuánto del clon de tiktok
que hemos realizado?
ya hemos terminado
si ya se ha subido
y toda la producción
esto igual sí que tiene sentido
pero actualizado
vamos a dejarle actualizado
¿qué más podemos ponerle?
bueno podemos ponerle
el username
por ejemplo
por ahora
vamos a hacer esto
luego más adelante
me imagino que podremos
ponerle lo que nos dé la gana
vamos a poner text
default value
no
sin default value
el id es la primary
¿y esto para qué es?
a ver
is un nulable
can assume null value
if no value is provided
vamos a poner que no
¿no?
porque
el created add
tampoco
username
can assume null
o sea entiendo que no
a ver
esto entiendo que es una forma
de decir que es requerida
¿no?
use unique
la verdad es que sí
que esto debería ser unique
y no es una array
¿vale?
vamos a darle
save
ay
bueno
perdón
perdón
vale vale
que no veis
bueno no
no os habéis perdido mucho
básicamente
le he dado aquí
y aquí aparece esto
que dice
es nulable
es unique
y lo que es que ninguno sea nulable
porque no tiene sentido
que sea nulable
y he dicho
que el username
sí que sea unique
porque entiendo que el username
el nombre de usuario
tenemos que ser
única
vale
primero vamos a hacer esto
luego ya veremos
a ver qué pasa con todo esto
identity
must be linked
what
empiezas mal
vale que me
no pasa nada
además
¿por qué me petas
si encima aquí en este ejemplo
tienes aquí profiles
y en la idea
tienes un uid
¿sí?
o sea
y no me dejas
no entiendo
por qué no me dejas
¿por qué no puede ser uid?
sí que me la he dado
o sea
me ha hecho
pero me lo ha hecho
como le ha dado la gana
¿no?
o sea
me ha creado la tabla
el nombre
pero no me ha creado
las columnas
a ver
si me deja
o no me deja
no entiendo
por qué me deja
uid
y yo le pongo
id
id of the user
¿me creo?
no entiendo
pero por qué me ha dado problemas
por crear un id
como uid
y ahora sí que lo puedo crear
no entiendo
no entiendo
name of the user
vale
esto tendría que ser text
j
hello the column
te suma null value
if no value
es provide
esto no
y no es unique
no lo entiendo
no lo entiendo
date when user was created
vale
y aquí le ponemos
time
date
esto sería
vale
aquí en default value
entiendo que se le pueden poner
como diferentes
ah mira
sugerencias
está bien
diferentes funciones
y en este caso
cuando lo creamos
queremos que ejecute
la función now
y aquí
le guarde
la fecha
y el tiempo actual
vale
yo entiendo que es no
y el usuario
lo he hecho único
¿no?
o sea
la id
no se puede hacer nada
con la id
o sea
la id tiene que ser única
sí o sí
¿ves?
cuando tú pones la id
y le pongo uid
esto es único
el username
vale
que no sé si
el username
no es verdad
es unique
¿no?
aquí no me deja
aquí no me deja
antes sí que podía poner
que era única
ahora por qué no me deja
no
sí deja
bueno
a ver
también se puede hacer
de forma manual
pero es un poco
más rollo
la verdad
bueno
lo vamos a dejar
al crear
me saque
ah vale
pues
vamos a petarnosla
total
name of the user
vale
y es unique
oye que raro
que entonces no se pueda cambiar
¿no?
fuera esto
name of the user
aquí le ponemos
que esto sea el texto
vale
y null
allow nullable
no
save
vale
vale
el username
agreed at
el id
yo creo que con esto
deberíamos tener
vamos a ver otra
tabla que podemos hacer
whole table
new table
aquí
joder
podemos poner
vídeos
por ejemplo
creo que tengo por aquí
el objeto
lo tiene por aquí
más o menos
más o menos
luego
vamos a adaptar
luego
id
así que debería dar igual
que sea
int 8
no es int 8
pero bueno
cuando se ha creado
cuando se ha actualizado
enable
ah pero esto
al final
esto no me lo ha preguntado
con el usuario
cuando he creado
bueno
pero me lo ha creado
o sea que entiendo
que sí que la hará
eh
que vivo con miedo
de darle a save
y que me vuelva a petar
así que lo que voy a hacer
esto
videos
to be saved
vale
save
ahora le añado
igualmente
no me vaya a volver a petar
y
iremos
vale
que pues bueno
aquí lo que podemos poner
como le pongo
user id
ideo
that created
the video
vamos a ver
add foreign
key relation
esto es lo que quiero
desde la tabla
users
efectivamente
de la idea
esta
muy bien
si
que pueda ser nulable
no puede ser nulable
y que si
no tiene
no es necesario
que sea unique
así que
más
que más necesitamos
que hay un montón de cosas
por ejemplo
channel
falta
¿no?
channel debería ser
la idea del usuario
description
description
for the video
aquí tenemos el text
también
pun text
define array
alone nulable
entiendo que no
tampoco
tampoco es unique
vale
description
más
a ver
los likes
pero
es que los songs
a ver
aquí me podría liar
me podría liar
hacer tablas
y relaciones
y por ahora
vamos a ir un poco a saco
de tener
la letra
o sea
la canción
la
cosas así
luego a lo mejor
los likes
sí que los separamos
al menos para ver
un ejemplo de relación
lo que vamos a hacer
es a saco
por ejemplo
el song
esto en un mundo de
en realidad
la tabla de song
debería ser
una tabla
y ahí tener todas las canciones
y todo esto
pero
podemos volver un poco
crazies
y estar aquí
más de 4 horas
o 8
o 14.000
así que vamos a hacer esto
vamos a ver
aquí
no song
por ejemplo
value
no song
por ejemplo
a lo nulable
no
pero ya tiene
default value
y que sea única
bueno
como va a ser el texto
no es necesario
venga
otra
tenemos el song
tenemos
shares
número de shares
esto sí que podría ser
un contador
number of shares
no va a llegar a tanto
pero
4 byte
integer
max number
4
yo creo
16 millones
tampoco creo que nunca se vea algo así
yo creo
lights
easy identity
no
desarroll
no
default value
0
es única
no
no
no
vale
la verdad
una cosa
un poco en falta
es poder
esto está muy bien
que veo aquí
pero me gustaría poder ver
ves
o sea
verlo en vertical
no verlo tanto así
en horizontal
me gustaría ver
todos los campos que he creado
todos sus tipos
sus cosas
así verlo en horizontal
es un poco raro
un poco lo mismo con los comentarios
comments
save
the video
tipo
no me creo que lleguemos a tanto
pero bueno
define
alone new label
0
name
los shares
los messages
los likes
los likes
luego
como tenemos
bueno
creo que tenemos tiempo
voy a intentar luego hacer una tabla
que sea la relación entre usuarios y likes
y entonces
lo haremos de otra forma ahí
pero por ahora
lo vamos a hacer así
al menos para que tengamos los likes
y luego ya no nos preocuparemos
vale
0
value 0
y si
tengo los likes
los messages
los shares
la descripción
que es un texto
el user id
vale
que tenéis una relación con el otro
created at
ya lo hemos visto
que es un timestamp
mmm
a ver
si vamos
toque
claro
no puedo ver
si hago un share
y le digo copiar el enlace
a ver dónde me lleva esto
esto es
el nombre del usuario
barra
vídeo
barra
la id del vídeo
y ya está
como la id del vídeo
le he puesto
int 8
pues ya estaríamos
o sea que la url
se podría generar
no hace falta que la guardemos aquí
pues que ya está
a ver
os leo por si
me he olvidado algo
tinta
y te pondrás filas abajo
si no
me imagino que si yo ahora
que es lo que quiero hacer
un insert row
por ejemplo
teníamos aquí
el
donde tengo yo mi editor
cuantas cosas abiertas
esto lo teníamos aquí
yo tenía aquí
el fit
fit vídeos
teníamos todo esto
todo esto
que
ah bueno
este autor
bueno
claro no pasa nada
teníamos la descripción
vale
description
vale id
this value will be generated
ok perfecto
user id
voy a crear primero varios
vamos a crear el primer usuario
vale
id
generator
no
me
creado
username
pues aquí vamos a poner
middle def
que sea el primero
save
ahora voy a crear un vídeo
insert row
user id
que bueno
que bueno esto
esto está muy bien
porque fíjate
que ya puedo ver
la relación
dándole aquí
te sale la relación
con el usuario
vale
descripción
bueno me voy a copiar
lo que tenemos
en el otro
vale
vamos a crear
oh que genial es
spiderman
falta de description
eso se supone
que ya va de gratis
esa sería la descripción
yo los tags
yo los metería
en la descripción
y a lo mejor
esto lo que debería hacer
es automáticamente
el servicio
detectar
cuando hay un hashtag
y transformarlo en tag
pero bueno
eso ya también lo veremos
más adelante
sonido original
no sé qué
vamos a poner
sonido original
backpool
vale
shares
pues vamos a poner
los shares que tenemos aquí
234
comments
333
y
1,2,3
optional
ah vale
porque no se necesita
ya
se me ha olvidado
el álbum cover
y el
del
del vídeo
efectivamente
importante
digo yo
vamos
vale
vamos con
el
álbum cover
claro
álbum cover
álbum cover
esto sí que
debería venir
de una tabla
que fuese songs
y tener el nombre
de la canción
y álbum
se ven así
aquí
no
tiene que ser
álbum cover
vamos a poner
for
the image
of the
álbum cover
vale
no tiene que ser
nulable
tiene que ser
única
tampoco
definir
bla bla
claro
ahora tengo que
permitir
que sea nulable
porque ya existe
aquí uno
que
entiendo
que debería
primero ponerlo
y luego
dejar de permitir
que lo puedan ser
los siguientes
ahora lo arreglamos
y además
el source
o sea que
una cosa que quiero hacer
justamente
es el hecho
de intentar subir
vídeos
y que los hagamos
desde su pavés
vale
vamos a poner
source
source
source
of the
video
con el
text
define ese array
a lo nulable
porque si no
no me va a funcionar
también
y por ahora
vamos a poner
todo este churro
esto
perfecto
ahí no
es aquí
para el
para
estamos
esta
no permitió
nulables
esta
no
nulables
porque es lo que queremos
insertamos
rápido
el segundo
vídeo
también
con
id
que esto
va a ser
generado
userid
voy a poner
que soy yo
también
claro
de todo
el tema
también
del avatar
y todo esto
pero bueno
una vez que
segundo
vídeo
una descripción
mega genial
y cracks
como
mi dev
mi dev
mi dev
ratata
como mola
shares
1 1
3
3
ya tenemos
dos
todo bien
puedes importar un archivo
una plantilla
excel supongo
si
si lo tuviese
hecho así
pues lo podría haber hecho
como vas a hacer con los límites
de supa
no creo que tengamos límites
muy graves
o sea
tampoco que vamos a
hacer que tiktok lo utilice
un montón de gente
hostia
carlos chaves
gracias por regalar 5
suscripciones de la comunidad
hombre
de nivel 1
muchas muchas muchas gracias
también a de jap
que se ha suscrito con prime
con chasensio
también se ha suscrito con prime
muchas gracias
cap de trons
que se ha suscrito un mes
con nivel 1
muchas gracias a todos
muchas muchas gracias
vale
trabajo que estás haciendo ahora
estamos con un poquito
el backend
ya de
más haciendo el backend
del tiktok
hemos llegado
a esto
donde está
aquí
bueno
todavía no hemos trabajado
el tema que se vean desktop
pero bueno
este es nuestro tiktok
lo puedes dar
irte a siguiente
pues así
este es porque el vídeo
no funciona
pero bueno
hemos avanzado alguna cosita
la verdad es que
visualmente
el clon se ve bastante bien
vale
ahora que tenemos esto
vamos a ver
vamos a ver el tema
porque
a ver
no hace falta que logueemos
porque entiendo que el usuario
al principio
pues no
no pasa nada
o sea los vídeos
ya son de algún usuario
así que lo que nos faltaría
mira
aquí está lo de storage
create buckets
to store and serve
any type of digital content
make your buckets
private or public
vale
esto lo veremos luego
para subir el vídeo
vale
luego
dice
no crees que los likes
podrían ir en un array
relacionado a los uses
y así puedes saber
quién le ha dado like
a ver
lo he comentado antes
vale
he comentado
que
lo que deberíamos hacer
lo que pasa es que
no lo quiero hacer ahora
era
crear una tabla
que sea por ejemplo
user videos likes
o users videos likes
y lo que podemos hacer aquí
es crear justamente esa
como esa relación
entonces deberíamos crear
podríamos tener una idea
que fuese el primary
de ese like
pero luego lo que deberíamos
tener aquí
al crear la tabla
sería
el user id
que esto fuese del tipo
id
vale
que no tenga default value
y que esto debería ser
una relación
que además no me deja aquí
porque aquí no me deja
hacer
bueno voy a darle
vale
table with users
videos likes
esto
created ad
y updated ad
esto yo no creo que sea necesario
bueno
created ad
created ad
sí que puede ser necesario
¿no?
porque si se quiere ordenar
por cuáles son los
los que te han gustado
bueno
vamos a ponerlo
por si acaso
un poco raro
pero pensaba que
podríamos hacerlo
de otra forma
bueno
me imagino que es que
eso es en el caso
que
claro
o sea
al final vamos a tener
una key primaria
pero que va a ser
a través del user id
y del video id
con esos dos
es que va a ser
la
sería nuestra key
bueno
tenemos user id
user id
that like it
a video
podríamos tener una relación
un poco más así
una tabla para relacionarlos
y ya está
ah mira
tiene que tener booleanos
que bueno
universal id
vale
foreign key
esto de users
id
for user to res
sería este
entonces
no puede ser
nulable
no necesita
que sea la única
vale
insert row
insert row
no
no a column
y aquí lo que podemos poner
sería el video id
id
o the video
y pues
creo que era
int8
vamos a verlo
a superbase
table
videos
int8
vale
int8
id
no se permite
nulable
es única
y ya
entonces podríamos hacer esto
a ver
hay tejas en las que se podría hacer este tipo de tabla
para crear este tipo de relación
por ejemplo
pues esta información
dejarla en users
o dejarla en los vídeos
pero
creo que esta podría tener sentido
teniendo en cuenta como funciona aquí en superbase
no tengo ni idea como nos gestiona la API
pero esta podría ser una
no la he usado nunca
pero he visto que tiene instant API con base de datos relacional y me han dado ganas de probarla
si
es la primera vez que la pruebo
así que vamos a ver
como funciona
pero al final no es la primera vez que lo voy a utilizar
no permite hacer relaciones one to many
al menos así como lo hemos visto
me parece que no
que hay que hacerlo más a mano
o sea aquí no
desde aquí parece
que es
pero mi marca lo mejor
más allá del tablet
hostia
me lo he petado
cae aquí un SQL
me imagino que aquí sí que se podría hacer este tipo de cosas
ese tipo de table y hacerlo a mano
me imagino que este tipo de cosas
y nosotros
no
users
y producción ready
triggers functions
function hooks
y ahí
mira API
esta API
no sé qué no sé cuánto
mira te dice aquí todo lo que hay que hacer para utilizarla
bueno
venga va
vamos a probar
vamos a probar
nuestra API
con esto que pone aquí a ver si es fácil si es difícil venga dice que
instalemos su país esto al final caca la vaca
cuántas veces está la oso su padre dice que no sé qué no sé cuánto su
pavés aquí está sobre si vorel su pavés que tendría que estar en el punto
env voy a crearme un archivo punto en fila todo esto
por otro trae to enable jest test
vale no funciona muy bien pero al menos vamos a dejar por ahí el código
estos son los comentes a ver vamos a hacer cosas
por esto luego
ex me falta su pavés que esto en el punto en su pavés que vamos a ver cómo
funcionan invite las environment variables
punto meta punto el modo punto punto no sé qué
x will not work vale vale es punto meta punto en el lugar de lo que nos ha puesto
aquí las variables de entorno envite funcionan con import y es import punto
meta punto su pavés que es pero el punto se cargan todos los casos en punto local
ese es el que quería utilizar en punto local
vale en punto local este es el que se carga en todos los casos pero se ignora
por git por defecto luego puedes tener modo desarrollo modo lo que sea pero por
ahora nos interesa ese necesito recuperar el su pavés que y ponerlo aquí así que
vamos a ver
lo que vale
vamos a por el su pavés que su pavés que
de estar aquí en sin antes lo hemos visto que estaba infraestructura wss database api
o sea no sé si es este si me imagino que es este no yo creo que esto sale aquí
claro es que al final no tiene mucho sentido tampoco o sea
una cosa del express ya no funciona es que siempre que lo intento importar me da un error y lo importo
bien y tengo la dependencia pero me da error de prototype
me extraña que no te funcione algo raro tiene que haber ahí algo raro
express sigue funcionando no sé si será la versión de note no sé si será algo de código que tienes por ahí
algo hay algo hay vale hay que ponerlo de vite porque si no esto no lo expone
vite vite
de son que tu primer acceder en líquen
only variables preferirse convite are exposed to the beat process code
vale esto tiene sentido es algo parecido a lo que hace en xd es
y es que tienes que añadirlo pensar que por defecto no sé si veis está ignorado ya
por defecto esto se llama el super base intel y sense nada nada nada venga
aquí aplicación es el management bueno eso lo veremos después vídeos vídeos pone que con esto
deberíamos poder recuperar los vídeos o sea yo podría hacer esto esto bueno esto es para el
el id lo quiero recuperar todo bueno all rows vale debería ser así vale seleccionar más de una
especie de una columna específica joder esto está muy chulo esto está muy chulo o sea es que tienes
aquí el código y todo pero es que ya no hace falta aprender backend si esto te está dando el
bacon hecho todo dios mío esto está muy chulo o sea te genera la documentación y todo por ejemplo
yo quiero esto a ver vamos a probar esto vale esto o sea get vídeos algo así vale
así dios si hay un error vale entiastelo porque te devuelve el error oa qué guapo esto dios qué
chulo ves aquí tienes el error directamente te lo devuelve ya sin que tengas que hacer ningún
tipo de cachena vale si seleccionó si lo seleccionó todo y de otras a ver me imagino que esto funciona
de otra tabla esto como with pagination with filtering inser a row o sea mi pregunta es
es que no entiendo muy bien el porque yo lo que quiero aquí es users foreign key sería id
pero lo que me tengo dudas de dar el resto de lo que quiero de
pues que con el select bueno vamos a verlo ahora ya está vamos a ver compone vídeos index vale aquí
tenemos todos estos churros vale vamos a utilizar aquí un use effect esto ya luego lo cambiaremos por
ya sabéis que a mí los use effects no me gustan en los componentes entonces veremos cómo lo podemos cambiar vale
import que vídeos from
vale esto debería ser esto debería ser así
vídeos vamos a poner un consuelo de los vídeos estos que vídeos de services index vale nos vamos a nuestro tick tock
vale
request dejad no申ase an export
what
qué
okay
what
vida
folom dedité que desempeño de ....
precedente de u legg
Más de una relación ha sido encontrada para vídeos y usuarios.
Cardinalidad. Ah, mira. Many to one.
Public videos. Relationship.
Many to many.
Videos and users.
By changing the URL to select relationship.
O target relationship. Hostia, hostia, hostia. Esto me ha dejado.
Should we be changing the URL?
Pero, ¿cómo voy a cambiar la URL aquí?
Relationship. Asterisco. O target. No relationship.
Esto me imagino que en...
A ver.
Relationship.
Relationships.
Adicional.
Relationships. Bueno, solo me sale esta parte de...
Database. Bueno, esto es un mini vídeo.
Bueno, pero esto es lo que ya hemos hecho.
O sea, yo creo que lo que estoy haciendo mal es como estoy pidiendo la información con la API, pero...
Accesing the docs. Managing real time.
Me gustaría ver un ejemplo. Yo creo... A ver.
Puedo quitarlo por ahora. Es esto.
Me imagino.
Si hacemos esto, yo quiero pensar...
Que esto no debería darnos ningún problema. Lo que pasa es que me falta la información que me interesa.
Ah, pues no. Ya. Array. Vacío.
A ver. He puesto vídeos.
¿Y cómo llamo yo aquí vídeos?
Pues esto no me está devolviendo nada.
¿Por qué?
Ah, bueno. Espérate. Si es que yo también.
¡Madre mía!
Es que esto... Esto es error.
Y esto es vídeos.
¿Vale? Esto está muy bien porque...
Claro. Lo que hace es que siempre...
Es que, claro. Está en la costumbre.
Si no tengo un error...
Bueno, a ver. Voy a poner console.log de las dos cosas para no perdernos nada.
Vídeos.
Pero, claro. Esto es un poco...
Esto es diferente.
¿Vale?
Yo he hecho que devuelva un array de dos posiciones.
Donde la primera posición es el error y la segunda posición es el resultado.
Le he llamado vídeos porque aquí le llama vídeos.
Que esto podría ser data.
Entiendo que esto sí que funciona.
Ahora, aquí en vídeos, vamos a ver el array con los resultados.
De hecho...
Hostia. ¿Qué ha pasado aquí?
Ay, no. Es que este es el TikTok de verdad.
Madre mía.
Es este. Es este.
Vale.
No, pues sale también vacío.
Sigue saliendo vacío.
No.
Bueno, os voy a leer porque seguro que se me escapa algo.
Un super hot fix y escuchando de fondo.
¿Está bien?
Claro que está bien, hombre.
No pasa nada.
¿Relación circular?
¿Puede ser?
Lo tengo que mirar a ver qué capachao.
¿Cómo va ese nuevo TikTok?
No está mal.
Vamos en ello.
Tendrás que mandarlo si quieres ir con una clave foránea.
Claro, pero yo pensaba...
Yo lo que quería era recuperar todos los vídeos y que los vídeos se hiciese automáticamente.
Pensaba que a lo mejor haría eso.
Lo cual ya me iba a parecer increíble.
Que la API directamente yo recuperase los vídeos y que me hiciese automáticamente la relación con la base de datos.
Con los usuarios.
Eso ya me iba a parecer increíble.
A ver.
Voy a leer un poquito.
Voy a leer.
Todavía no armó el backend.
Bueno, estoy en ello.
Supongo que usará Node.js.
Bueno, no voy a usar Node.js.
Lo que sí que puede ser es que lo que estáis viendo de Superbase lo metemos en...
O sea, sí que voy a utilizar Node.js, pero lo haremos en funciones como si fuesen microservicios.
Y eso sí que puede ser que lo hagamos para sacar todo esto que estamos haciendo, este tipo de peticiones.
Las dejemos en una API.
¿Vale?
¿Alguien tiene el enlace de Discord?
Discord.gg barra midudev.
A ver, voy a subir un poco las canciones porque me parece que han bajado un poco el nivel, ¿eh?
Las cancioncillas.
Con la tontería ya llevamos el 50% de la jornada.
Joder, sí.
Con la tontería.
No te olvides de tratarte.
Venga.
Cafecito.
Copy and paste.
Tal cual está ahí.
Eso es lo que he hecho, ¿no?
Con React haces webmobiles, sin negativas.
Si quieres sando negativas con un nuevo sistema de interfaz de Kotlin, puedes pasarla fácilmente, ya que es muy parecida a React.
Si no vas a especificar columnas, solo deja el select.
O sea, decís que si aquí le quito el asterisco y hago así, ya me los devuelve todos.
No me los devuelve, pero me acabo de dar cuenta.
Ah, sí.
Sí, sí, sí.
Sí que lo está.
Hostia, es que ahora estoy alucinando porque tampoco tiene mucha historia.
¿No será que me estoy equivocando de la key esta de Superbase?
¿Sabes?
Que esto no esté devolviendo lo que supone que devuelve.
Pero raro, ¿no?
Que no dé un error.
Es que no me está devolviendo nada.
Es muy raro.
¿Ya pusiste la key?
Creo que no la vi.
Bueno, ahora quiero recuperar todos los vídeos, ¿eh?
No, en el libro de Git no hablo del rebase interactivo, pero hablaré.
Quiero añadir el tema del rebase.
Supabase punto...
Hostia, pero...
Me está comentando aquí...
Sergio...
¿Que aquí tengo que poner un punto execute?
Pues no...
Me pone que no existe, ¿eh?
No, punto execute no existe.
Dope.
Dope.
Vale.
Tengo que aprender microservicio, no hay ninguna hot.
¿Café con leche o negro?
No es café con leche, más bien.
Midu no olvide levantarte de vez en cuando, de todo el palda lo agradecerá.
Venga, me voy a levantar, mientras os doy tiempo para pensar.
Voy a recoger al...
A grar.
¡Ay!
¡Ojo!
Venga, grar.
Mira, ¿qué te dicen?
¿Qué te dicen que aquí?
Creo que tienes un problema con la key, ya que mirando la documentación es lo que has puesto tú.
Efectivamente.
Venga, vamos a mirar un momento la key.
¡Ay!
Vamos a estirarnos.
A ver qué le pasa a la key.
Pero qué raro, ¿no?
O sea...
User, vídeos...
Un poco raro.
Sí, me ha dejado...
Vídeos.
Nada.
La ID está bien.
ID, uno, dos...
Tenemos aquí enlace con...
O sea, no tiene ninguna historia, la verdad, esto.
¿Sabes?
No parecen...
Vídeos...
O sea, ahora mismo no tiene ninguna historia.
Hay locks.
Puede ser que haya locks.
Pues la verdad es que no parece que haya locks tampoco.
No parece que haya locks.
This case use es...
A ver, vamos a ver que realmente estoy utilizando bien la key.
Supabase key...
A ver si la vemos que está ahí.
No vaya a ser que...
Sí, está ahí.
O sea, que la key la está pasando bien.
Eso lo está pasando bien.
Supabase...
Y aquí este data error...
Me está pasando totalmente de mí.
Sigo leyendo.
Y me levanto.
A ver...
¿Igual en SupervisiteLogs?
No.
Pues depende.
Normalmente en...
Ah, no.
Verifica primero si des en la página de Supervis que hayan datos.
Por la página de SQL.
Sí, sí, sí que hay datos.
De hecho, a ver...
Podemos hacer aquí una query.
En un momentito.
Creo que hay una forma de ejecutar...
Como la imagen...
Not production ready.
No será esto, ¿no?
Que no nos...
Creo que hay una forma...
¡Ay, espérate!
¿No será esto de lo que hemos puesto esto?
A ver...
Es que antes...
Cuando hemos creado la tabla...
Mira, new query.
Puede ser...
Puede ser...
Select all from videos.
SQL query is empty.
Vale.
Supa.
Supa.
No super.
Supa, ¿veis?
¿No será la mierda esa que hemos puesto al principio?
De...
Cuando he creado la tabla...
Me decía...
¿Quieres proteger esta tabla?
Hostia.
Vale, vale.
¿Quieres proteger la tabla con no sé qué, no sé cuánto?
Yo le he dicho que sí, pero porque pensaba que era algún tema...
Pero, ¿ves?
Es que ahora, encima, no tengo información sobre si eso está protegido o lo que sea.
Entonces, no sé si puede ser eso, ¿no?
Creo que tienes un problema con la key.
Bueno, la key no creo que sea.
¿Dónde has copiado la key?
Tenías debajo una key con asteriscos.
No, la key está bien, ¿eh?
Yo creo que la key está bien.
Porque se nos petaría, ¿eh?
De hecho, podemos probar.
Si yo me invento la key...
Voy a añadirle A al final.
Guarda.
Aquí, ¿eh?
No, no puede ser la key.
Porque acabo de hacer un select dentro de mi tabla.
Es la key.
A ver.
Voy a quitar.
Voy a poner esto.
Y cierro esto.
Y lo vuelvo a levantar.
Aquí me da un error de 401.
O sea, la key está bien.
¿Vale?
Esta aquí.
De hecho, ahora sí lo voy a voltar.
Ahora, ¿vale?
Si no, lo que voy a hacer...
New query a la izquierda arriba.
Sí.
Eso es justo lo que he hecho antes.
Los permisos me parece que faltan.
¿Vale?
¿Dónde puedo...?
Crea una nueva tabla, lo veremos.
Sí.
¿Cómo taparla aquí?
Me voy a enseñar cómo podrás clonar y ejecutar el proyecto en mi visual.
Bueno, clonar, git clone y le pones el repositorio.
Y luego en PM install y ya está.
¿Vale?
No será que deje el rendidor y el router también.
Vale.
Esto se dice, mira, aquí tienes el select.
Bueno, el problema no es tanto el select.
El select estoy bastante seguro que está bien.
A ver, user management.
Pero es que ahora mismo ni siquiera necesito user management.
En el sentido...
Esto sí que puede ser.
Road level security.
Esto sí que puede ser.
Esto es lo que justamente quería mirar.
O sea, cuando aquí...
¿Dónde está el server security?
Este.
Authentication.
Policies.
Users.
Policies.
Policies.
Vale.
R enable.
Esto.
Este.
Este es el tema.
Este.
Yo creo que este es el tema.
¿Vale?
El tema es...
Ah, mira.
Access to everyone.
Esto es lo que quiero.
Ah, pero esto es lo que yo pensaba que tenía.
O sea, yo pensaba que esto lo tenía por defecto.
Yo entiendo.
Este es el problema.
Que no tiene acceso de lectura.
Pero es que yo pensaba que cuando le añadíamos el RDS, justamente es esto.
Credit a policy from a template.
Vale.
Tenemos leer para todo el mundo.
Insert eso.
Para authenticators only.
Enable our users based on their email.
Enable delete access to the user ID.
Vale.
Entonces.
Enable retire everyone.
Eso.
Vale.
Y entonces.
Forward select using for...
Como...
No sé si es...
Para permitirme leerlo.
Pero bueno.
Vamos a probarlo.
Abaster.
Role authenticated.
Vale.
Aparte, digamos que ver que la idea realmente sea la que tenga que ser.
Esto entiendo que debería ser true.
No sé si...
Control ya estaría.
Vale.
Not recreated.
Add policy for the select operation under the policy enabled insert for authenticated users only.
Coño.
Complicado.
Es que no me queda claro si va a hacer las dos cosas o solo va a hacer una.
Vamos a ver.
Voy a empezar con esta.
Vale.
¿Ves?
Era el true que me imaginaba.
O sea.
Quiero este.
Porque quiero esto.
Pselect.
True.
Así.
For your policy.
¿Veis?
¿Quieres en cuanto?
Ah, claro.
Aquí igual no sé qué.
Aquí me pone true.
Ya está.
6 policy.
Luego ya cambiaremos la policy.
Primero vamos a hacer este.
Y luego si no.
2 users.
True.
O sea.
O sea.
Puedo tener más de una.
O sea.
Lo que me choca.
Es que no sé si la política.
O sea.
Si se juntan.
O si solo puedes crear una política.
Y ya está.
Bueno.
Este era el problema.
¿Ves?
Ahora ya está aquí.
Joder.
Ha costado.
Ha costado porque la de lectura era bastante evidente que iba a ser para atrás.
Pensaba que al activarlo no se iba a hacer esto por defecto.
Pero ya veo que no.
Lo importante que tenemos aquí.
Ahora que tenemos es justamente que a lo mejor.
Ahora volviendo con esto para atrás.
Que funcione.
Creo que funcione.
Porque aquí sigue nada el problema este del details.
No sé qué.
No sé cuánto.
Que tenemos many to.
O sea.
Many to one y many to many.
Pero esto es por el user video likes.
¿Sabes?
O sea.
Esto es.
Origin.
Aquí.
Origin public videos.
Target public users.
Origin public videos.
Target public users.
Y la relación que tenemos aquí.
Que es el de video likes y tal.
Esto es lo que me choca un poquillo.
En the way the user.
Este es el problema.
This is the way the user.
We changing the URL.
Pero yo entiendo que en la API.
Seguramente aquí.
No sé cómo.
Contain it by.
Tiene que haber una forma.
A ver.
Superbase.
Join.
Query.
Too many.
¿Ves?
Eso hay que hacerlo ahí a maneja.
Claro.
If you database relationship.
You can query related tables too.
Claro.
Esto es lo que queremos.
O sea.
Lo que queremos es users.
Id.
Claro.
No es users.
Id.
Porque users.
Esto se supone que ya lo deberíamos tener.
O sea.
Yo lo que quiero es el username.
De justamente esa.
No.
No le gusta.
No le gusta.
No le gusta.
Pero es culpa de la otra.
De la otra que tengo.
¿Eh?
¿Eh?
So now you will need to create the same for internal with count options.
Return.
Si quitase la otra tabla me funcionaría.
Pero me da rabia no entenderlo.
Wish you had the shop.
Porque al final lo que yo quiero es justamente eso.
Los quiero todas.
Y de users.
Me gustaría el username.
Es así de sencillo.
Lo que quiero hacer.
Lo que me.
Pero me sigue dando el hint.
By following the details key.
Desenvolve the request by changing the URL.
Y esto es lo que me.
¿Cómo ir cambiando la URL?
Es lo que la que quiero es la primera.
¿Sabes?
Es esta la que quiero.
Voy a estudiar Postgre.
Hace mil años que no tocó SQL.
Pero Postgre.
O sea.
Ha tocado cero.
Muchas cosas.
Ah.
Ta ta ta.
I've got a review.
¿Enter?
SQL.
Sí.
Eso te pasa también.
Ah.
No di for a view.
Query.
To a crash for it.
You can do some gratis.
Sí.
Esto es lo que me gustaría.
Ah.
Members.
Dos puntos.
Users.
No.
Pero.
¿Por qué utilizar los de members?
¿Por qué utilizar los de members?
Está chulo esto.
¿No es al revés la relación?
O sea.
¿Cómo no es al revés?
De poner aquí el username.
Y aquí users.
No.
Bueno.
Yo creo que.
O sea.
Primero se le pone.
La colección de la que quieres extraer.
¿No?
¿No?
¿No?
No.
No.
O sea.
La relación está claro que es así.
Users.
Y de users.
Quiero que me extraiga el username.
Es como hacer un join.
El tema es eso.
Que no.
No llego a entender muy bien.
¿Por qué se me ha?
¿Por qué me pone esto?
La desinvigación.
No sé qué.
No sé cuánto.
¿Ves?
The hint says.
Ah.
Select.
Ah.
Ah.
Ah.
Ahora entendió.
Creo.
Hint.
By following the details.
Origin.
Relations.
Target.
Target.
Target.
Target.
A ver un momento esto.
Origin.
Select.
Relations.
Pues no.
Pensaba que lo había entendido.
Pero no.
Relations.
Relations.
¿Veis?
¿Veis?
¿Veis?
¿Veis?
¿Veis?
¿Veis?
¿Veis?
¿Veis?
¿Veis?
¿Veis?
O sea.
Es que.
A ver.
Es que esto es lo mismo.
Public.
Dos puntos users.
O punto users.
Es que es lo mismo.
Pero yo tengo claro que es esto.
Pero no hay forma de.
Dos puntos users.
Es lo mismo.
Lo mismo.
A ver.
Podría quitar la tabla.
Pero me gustaría entenderlo antes.
Cons data.
Id.
Supplier.
Ya no tosha.
Pero ese ejemplo es un poco lo mismo.
¿No?
Y si en vez de ID es user ID.
¿Cómo?
A ver.
A ver eso.
A ver.
Pero ¿cómo haces el join sin pasarle cuál es el campo?
No.
Porque el tema.
Mira.
El tema es que.
Esto lo hace automáticamente.
De hecho aquí lo tienes.
Mira.
¿Cómo hace una query de tablas que están fuera?
Dice.
Si tu base de datos tiene relaciones.
Puedes hacer una query a tablas que están relacionadas también.
De forma que.
Si tú dices un select de countries.
Dices un select.
Me haces un select de name.
Pero además.
De cities.
Le sacas el nombre.
Porque cities.
Es una relación.
O sea.
De esta forma.
Aquí tendrías el nombre del país.
El nombre de la ciudad.
Que esto es lo que tiene todo sentido del mundo.
De hecho.
A ver.
Para que lo veamos más claro.
Voy a cargarme.
No sé si.
Molaría.
No tener que cargársela.
Delete.
Pero si.
Yo.
Yendo que esto ahora.
De repente funcionará.
Pero hombre.
Nos dejará de funcionar después.
Y.
No.
¿Ves?
Ahora me ha funcionado.
Y.
Vale.
Tengo users vacío.
Ah.
Claro.
¿Por qué?
¿Por qué?
Porque esto.
Username.
Este es el userid.
Y users.
Está vacío.
Podría pensar.
Bueno.
Espérate.
Es que de users.
No.
Pues de users.
Le he dicho que quiero sacar el username.
¿El username es un campo que tenemos por aquí?
Sí.
Pues el tema es que yo.
Lo que esperaba aquí.
Que tampoco está pasando.
Es que aquí en users.
Que me devuelva el username.
Aquí debería estar.
Justamente.
Aquí en users.
Debería estar.
Lo que falta de información.
Pero es como que este userid.
No lo ha encontrado.
Si vamos a vídeos.
Este userid.
Userid.
Que es una vez.
No sé qué.
No sé cuánto.
Que es este que tenemos aquí.
Aquí sí que tiene la información.
O sea.
Aquí sí que está haciéndolo bien.
Aquí.
Sí que me lo está enseñando bien.
Y claramente esto es para luego lo que sirve.
A ver.
Superbase.
Join examples.
Venga.
¿Por qué no funciona esto?
Vale.
Vale.
Ahora ya sé por qué no funciona.
No funciona porque tampoco tiene la política.
¿Vale?
Ese es el problema.
¿Vale?
Ese es el problema.
El problema es que en la base de datos.
En la policía.
Vale.
Ahora va a funcionar.
Ya veréis.
Porque en las policies.
El users.
No tengo la policía.
Que todo el mundo pueda leer.
¿Vale?
Entonces.
Vale.
Hacer esto.
Voy a hacer esto.
Ahora ya.
Ahora sí.
Ahora hago.
Ahora entiendo por qué no me funcionaba.
Bueno.
Mira.
¿Ves?
Users.
Username.
Medudev.
Perfecto.
Esto es lo que quiero.
Es que esto tiene todo sentido en el mundo.
Lo que no entiendo.
Y aquí es donde está el problema.
Es que cuando creo la tabla de usuarios y likes.
No entiendo por qué en esta relación.
Porque yo no estoy pidiendo.
De video likes.
Que me.
O sea.
No entiendo por qué se mete en la tabla de video likes.
De video user likes por medio.
Ahí es lo que.
Lo que me ha dejado un poco despistado.
¿Sabes?
A ver si le pongo.
De lo que me dé la gana.
¿Esto qué pasa?
¿Me lo deja como undefined?
Ah no.
Vale.
Vale.
Ese es el tema.
Luego veremos.
Cómo lo volvemos a arreglar.
Pero el tema ese siendo.
No entiendo eso.
No entiendo.
Avatar.
For the user avatar.
Vale.
Vamos a poner que esto es un text.
Claro.
Ahora tengo que hacer que esto sea anulable.
No hace falta que sea única.
Papá.
Vamos a ver.
Github.
Por ahora.
Vamos a poner.
La mía de Github.
Y ahora.
Ahora sí que vamos a.
Mira qué bonito.
Lo hago aquí.
Ay qué bonito.
Vale.
Todos los cambios.
Vale.
Ahora sí que tengo el avatar.
Que el avatar me falta de lo otro.
Pero bueno.
Users.
Avatar.
Username.
Entonces.
Lo ves ahora.
Sergio.
Cómo funciona el tema.
O sea.
El tema es.
Que él recupera la información de vídeos.
En vídeos.
Yo tengo este campo.
User ID.
Que ya tiene una relación con otra tabla.
Y lo que le estoy diciendo aquí.
Es.
Vale.
Recupérame toda la información de vídeos.
Y.
De la relación que tengo en la tabla users.
Recupera.
Recupera.
Avatar.
Username.
Es un join.
Y no hace falta que tengas la ID del usuario.
Porque.
Básicamente.
Lo que le estás diciendo.
Es como que expanda la información que tienes de vídeos.
Vale.
Ese sería el tema.
Username.
Dos puntos.
User ID.
Username.
Avatar.
Y eso.
Eso funciona.
Seguro.
Lo habéis probado.
Es que creo que el ID que estabas pasando.
Era el del vídeo.
Y necesitabas pasar el ID del user.
Como user ID.
Que es como que está definido en la tabla vídeos.
No sé.
No.
Todo muy claro.
Dartiles.
Bueno.
Pásame la.
Pásame si queréis.
Me podéis pasar las.
Las queries.
Y yo las voy probando.
El tema es que ahora funciona.
O sea.
Ahora funciona.
Porque la ID.
O sea.
Ya tiene.
Automáticamente.
Yo no.
No creo que sea una cosa de cómo se la estamos pasando.
Lo que me da la sensación es que no sé por qué.
Estábamos viendo errores por la otra tabla.
Que era como que.
No sé.
O sea.
Estaba como haciéndolo al revés.
Es como que no estaba sabiendo.
Sacarlo exactamente de una.
No sé.
O sea.
Me ha dejado bastante loco la verdad.
Me ha dejado bastante loco.
A ver.
¿Qué queréis que hagamos?
Intentamos volver a mirar el error este.
Sale la documentación.
Supplier ID.
Sometimes you need to create the same foreign table twice.
In this case you can use the name of the join column.
Identificar which join you intend to use.
If we had a shop of products.
We wanted to get the supplier and the purchaser at the same time.
We had a shop of products.
And we wanted to get the supplier and the purchaser at the same time.
Pero es que nosotros no queremos.
O sea.
No es hacer una petición a la misma tabla dos veces.
En nuestro caso.
Solo queremos hacer una.
Puedes hacer.
Puedes usar el nombre.
De la columna que.
Quieres unir.
Para identificar.
Cuál es el que intentas usar.
Puedes darle un alias.
A cada columna.
Claro.
Lo que no me queda claro es.
Este.
¿Cuál es el alias?
Este es el alias.
How to shop of products.
We wanted to get the supplier and the purchaser at the same time.
Esto sería la ID.
Que se le quiere pasar.
Y esto es lo que se quiere recuperar.
O sea.
Utilizando esta ID.
Entiendo.
Alias.
Frunky.
Sí.
Sí.
Eso lo tengo clarísimo.
Que quiero.
No es el mismo caso.
Pero bueno.
Ahora es cuando tiene más contexto.
Venga.
Va.
Pues lo intentamos otra vez.
Va.
Vamos a intentarlo.
Va.
¿Cómo era esto?
Habíamos dicho que queríamos tener aquí.
Users.
Videos.
Likes.
¿Vale?
Relation.
Between users.
Between users.
And videos.
Bueno.
Likes.
Of users.
To videos.
Por ejemplo.
Enable road level.
Vale.
Ahora que ya tengo claro esto.
Esto hay que ponerlo.
El crew.
Detad.
Este no hace falta.
Aquí lo que deberíamos poner es el user ID.
Le.
Bueno.
Esto.
¿Cómo se hace el level for in key?
Le decimos que es de users.
Selega column from users.
¿Vale?
Es este.
UID.
No puede ser primario.
Y aquí le decimos video ID.
Y el video ID le decimos que es de videos.
Y le.
¿Vale?
Esta es la regla que tiene que hacer.
Uno es UID.
Y otro int 8.
Le damos a save.
Vamos a cambiar la policy.
Para empezar.
Para asegurarnos que todo el mundo puede leer de esta tabla.
Aunque real igual.
Porque ahora mismo no queremos leer de esta tabla.
O sea.
Queremos ignorar esta tabla.
Vamos a policies.
Policies.
Users.
Vamos a decirle que todo el mundo va a poder leer.
Users.
Video likes.
Public.
Vale.
Review.
Save policy.
¿Vale?
Ya he creado la tabla.
Yo tengo aquí el código exactamente igual de cómo estaba funcionando hasta ahora.
Me vuelvo a mi aplicación.
Y peta.
Me dice que ahora tenemos dos relaciones.
Y tenemos que decirle cuál de las dos es la que tenemos que utilizar.
El origen.
Public.videos.
Al target.
Public.users.
Y tenemos dos cardinalidades.
Uno.
Many to one.
Igual o many to many.
El many to many.
Es justamente el de la relación de users.
Videos.
Likes.
Este no es el que quiero utilizar.
Que aquí es.
¿Por qué me está utilizando ese?
Siguiente.
Puedes hacer un disambiguado.
O sea.
Dejar clara cuál es de las dos relaciones en las que quieres utilizar.
Target.
Relationship.
¿Vale?
Target.
Las dos.
El target es el mismo.
Target.
Videos.
Users.
O sea.
Que sí.
Que la relación es esta.
Videos.
Pero.
Aquí está mi duda.
¿Qué es lo que le tengo que indicar aquí?
Porque.
A ver.
Intento utilizar lo que hemos visto por aquí.
Que era supplier dos puntos.
Supplier ID.
Y a user dos puntos.
User ID.
Sería esto.
¿Vale?
Entonces.
Probamos aquí otra vez.
Bueno.
Y parece que ha funcionado.
Pues ya está.
Lo hemos arreglado.
¿Somos un equipo o no somos un equipo?
Joder.
Pues ya está.
Somos un equipo.
Para mí el select está mal.
Que no está mal.
Maximineto.
El select está bien.
Bueno.
Select.
A lo mejor es esto.
Al final.
Lo que decías que estaba mal.
Pero el select estaba funcionando.
Lo que pasa es que cuando hemos creado la nueva.
Porque es un alias.
O sea.
Esto de aquí se supone que es un alias.
O sea.
¿Queremos?
Funciona.
Así.
User ID.
Pone.
Esto es muy raro.
¿Qué pasa?
Que si hay una desambigüedad.
No le tienes que decir el nombre de la columna.
Le tienes que decir el nombre del campo que tiene que utilizar.
Porque ahora si pongo user sí que funciona.
Pero en la documentación.
Justamente.
Un poco más arriba.
Pone.
Que aquí.
¿Vale?
Pero aquí.
Dice.
The related tables.
Pero aquí lo que pasa en cities.
No es el city ID.
Aquí claramente le está pasando el nombre de la columna.
En cambio.
Aquí dice que esto es un alias.
Este supplier.
Esto es un alias.
Y hay que indicarle.
El campo.
De la key.
O sea que ya está.
Ya sabemos que sería así.
Que le podemos pasar el alias.
Que es donde recibirá el objeto.
Y este sería justamente la key.
Que queremos.
O sea.
La propiedad.
Con la que tiene que hacer el join.
Y con esto.
Ahora.
Sí que funciona.
Bueno.
Pues.
Nunca te ha costado.
Senza una cosa más.
A ver.
Todo.
Lo que nos ha pasado.
Es un poco la idea que tenía.
De que.
Con el tema de su pavéis.
Porque es la primera vez que utilizamos.
Somos un equipo.
Somos.
Andreas Lorozco.
Sí que sabemos cómo se ha arreglado el bug.
Pero.
Es un poco.
Es verdad que ha sido un poco raro.
Creo que de esa manera está habiendo un join de la tabla de users completa.
Es decir.
Si tuvieran muchos users.
Te traería todos.
Solo necesitas el user autor.
O sea.
Con lo que acabamos de hacer.
Yo entiendo.
Está haciendo un join de la tabla de users completa.
A ver.
Yo creo que debería estar.
Haciendo de cada una.
Se está trayendo justamente lo que necesita.
Pero bueno.
User.
Debería ser user.
Efectivamente.
De hecho.
Vamos a probar otra.
Para asegurarnos que esto está devolviéndose correctamente.
No vaya a ser que la estemos liando.
Vamos a crear otro usuario.
Si os parece.
Vamos a poner por aquí.
UID generator.
Vamos a generarlo.
Vale.
Genero uno.
Este es el UID.
El username.
Vamos a poner.
A ver.
Vamos a poner.
A.
A ver.
Vamos a poner IDX.
IDX.
Y el avatar de IDX.
A ver cuál es el avatar de IDX.
Vamos a Goruzuke también.
A ver.
Pero.
Vamos a poner IDX.
Y ahora ponemos a.
A ver.
Peppa Pig.
Vamos a poner una imagen de Peppa Pig mismo.
Vale.
Hostia.
¿Qué es esto?
Dios.
Dios.
Voy a tener pesadillas hoy.
Vamos a poner este mismo.
Vale.
Este por aquí.
Esto me parió.
Joder.
Me he traído la única página.
Que tiene.
Control.
De.
Hot linking.
O sea.
La única.
Me la he encontrado yo.
Vale.
Venga.
Goruzuke.
Bien.
Uy.
Generator.
Para tener.
Las cosas hacer.
Goruzuke.
Goruzuke.
Ah no.
Goruzuke va aquí.
Goruzuke va aquí.
Aquí hay ID.
Y el avatar de Goruzuke.
Vamos a ver.
Goruzuke.
Me da miedo buscar vuestros niks.
Porque pueden salir cosas muy chungas.
Hostia.
Goruzuke.
Y sale Midudev aquí.
O sea.
Mira.
Torre.
Goruzuke.
Goruzuke.
Goruzuke.
Ah no.
Pero esto.
Torre.
Goruzuke es.
Ah no me acuerdo cuál era la página.
Goruzuke.
Ojo.
Aquí el avatar.
Venga.
Copiar dirección de imagen.
Goruzuke.
Ahí lo tienes.
Esto.
Si hago un refresh.
Información de un usuario.
¿Vale?
Con el alias solo traes el user ID relacionado.
Ah.
Que antes estaba trayéndome la tabla completa.
Me estaba trayendo la tabla completa.
Tú dices.
O sea.
Yo viendo.
O sea.
Entendiendo este.
Este ejemplo.
Por ejemplo.
Name.
Cities.
Name.
O sea.
Me da que.
Al menos lo que entiendo aquí.
Es que hace.
Está haciendo ya la.
La.
La.
La query.
De las tablas relacionadas.
¿No?
Automáticamente.
O sea.
Que aquí solo.
Se supe.
Cómo funciona este select.
En esta API.
¿No?
Que estaría recuperando solo el nombre.
De las.
Country.
Aquí.
Me da aquí la sensación.
O sea.
Entiendo el ejemplo.
Pero es que.
Sin su sentido.
Hacerlo así.
Con esto.
Base de datos.
Que tienen relaciones.
Pero bueno.
Se ha arreglado.
Que es lo importante.
Y parece que.
Todo funciona bien.
Así que.
Venga.
Vamos a.
A.
Poder.
Quitar ahora.
Ahora sí.
El.
Feed videos.
Este que tengamos.
Esto.
Habrá que adaptar.
Alguna cosa.
No.
Porque teníamos.
Autor.
En lugar de autor.
Esto debería ser.
Username.
Que tiene bastante más sentido.
La verdad.
Video player.
Autor.
Username.
Username.
Video description.
Username.
Username.
Username.
Username.
Username.
Username.
Y yo creo que está aquí.
Vale.
Like.
Song title.
Vamos a ver que he hecho esta.
Porque al final.
Videos.
Tu tu tu.
Album title.
¿Qué?
Ah.
Song.
Joder.
La madre que me trajo.
Eh.
Title.
Para que sea más fácil.
Title.
Album cover.
Esto sí que está bien.
Source.
Pues también lo tenemos.
Id.
Id.
O sea.
Yo creo que todos estos.
Estos tres.
No lo.
Ah.
Bueno.
Falta la id.
Vale.
He puesto id también.
Perfecto.
Id.
Bueno.
Ya podríamos petarnos esto.
Aquí.
Vengan de feed videos.
Vamos a ver dónde estamos utilizando el feed videos.
Por ahora vamos a hacer esto.
Uses.
Uses state.
Array.
Pin.
Pin.
Set.
If.
Error.
Set.
Set.
Error.
Joder.
No sé por qué le gusta el synthwave ese.
Extraño.
Vale.
Error.
Set.
Error.
Use state.
Pum.
Y si no.
Pues hacemos un set videos de videos.
Venga.
Vámonos.
Vídeos.
Tenemos un error.
Por ahora vamos a poner aquí null.
O bueno.
Vídeos.
Vídeos.
Vídeos.
Map.
Lo de loading.
Podríamos intentar utilizar react query aquí.
Con esto.
Podría estar bien.
No sé por qué he puesto que eso venga de ahí.
Pero no tiene mucho sentido.
Vale.
Está petando algo.
Ah no.
Claro.
No está petando nada.
Lo que pasa es que el vídeo que hemos puesto es exactamente el mismo.
Vale.
Pero esto que está pasando por aquí.
Esto sí que viene de la base de datos.
La información que estamos viendo viene de la base de datos.
El tema.
Vale.
Es que estos vídeos.
La información de autor este que había puesto.
A ver.
En console.lock.
Hostia.
Usefx se me ha olvidado aquí el.
Esto.
Uh.
Madre.
Un poco el stream o qué.
Conciente.
He intentado usar Next.js.
Entiendo eso que comentas.
O sea yo creo que a bajo nivel.
Si solo tiene una foreign key.
Tú le pasas a la colección.
Y automáticamente te hace eso.
Hola.
¿Cómo han ido estas 8 horas?
Bueno.
Llevamos 4.40.
O sea llegas al momento culmen.
Vamos por la mitad.
Todavía del tiempo.
Ah.
Me olvidé cambiar un autor.
Vale.
Vale.
Vamos a por el autor.
Gracias por fijarte.
Eh.
Eh.
Eh.
Todos.
Vamos a por el autor.
Esto.
Es que no he grabado los cambios antes.
Porque.
Estoy bastante seguro que solo había cambiado.
¿No?
¿Cómo?
What?
A ver.
A ver.
A ver.
Username.
Este username.
Ya.
Undefined.
Para empezar.
Aquí me está llegando.
Ah.
No.
Bien.
Es que.
Bueno.
Aparte del autor que se me ha olvidado.
Vale.
Vale.
Aquí va un poco lo que quería.
Claro.
Claro.
Con todo el rollo este.
Se me ha olvidado lo que quería hacer aquí.
Claro.
Claro.
A ver.
Voy a hablar un consultor un momento.
Vale.
Con mi.
Con mi psiquiatra.
A ver.
¿Cómo lo llevas?
¿Bien?
¿Sí?
Sí.
Vale.
Lo llevo bien.
Muy bien.
¿Qué tenemos que hacer?
Tienes que mapear.
León.
Vale.
¿Por qué tengo que mapear la información?
¿Por qué?
Claro.
Porque está en un objeto.
La tenemos que aplanar.
Básicamente.
Ese sea el tema.
Vale.
Ahora ya he hablado con mi psicólogo.
El tema es que aquí este data.
O sea.
Aquí.
Claro.
Si tenemos un error.
Pues aquí deberíamos decir el error.
Y todo esto.
Bueno.
Por ahora vamos a decir un console.
Error.
Error.
Que aquí lo ideal.
Estoy pensando.
Un momento.
Igual lo hacemos al revés.
¿No?
Si tenemos información.
Entonces hacemos algo.
Y aquí le ponemos vídeos.
Y el data.
Que debería ser.
Básicamente.
El data.
Debería ser el array.
Lo que podemos hacer.
Si tenemos un error.
Podemos hacer error.
Y poner un array vacío.
Y si no.
Podríamos crear los vídeos.
Esto sea data.
Y de cada vídeo.
Vale.
Aquí haríamos esto.
Esto sería un poco la idea.
Entonces tenemos.
Si hay un error.
Devolvemos el error.
Así.
Que igual.
Esto ni siquiera hace falta.
Pero bueno.
O sea.
Podríamos devolver el error.
Y así como primera.
Como un array de dos posiciones.
Pero la primera posición.
Ya es el error.
Ahí deberíamos evitar.
Hacer cualquier cosa.
Aunque bueno.
Por si acaso.
Podemos hacer esto.
De la ribacía.
Y luego.
Si no.
Pues aquí sí.
Tendríamos el error.
Que el error aquí.
Sería null.
Y luego devolvamos los vídeos.
Y los vídeos.
El tema.
Este pedazo de objeto.
Que esto está muy bien.
O sea.
Es de hacer.
Vídeo.
Pero sacamos el user.
User rest.
Vídeo.
Aquí tenemos.
O.
Podríamos meter el user ID.
Dentro de user.
Que al final.
Así tendríamos la información.
Sería un poco.
A ver.
Estoy pensando.
Cuál sería lo mejor.
O sea.
O.
Facilitar el consumo.
En los componentes de React.
O.
Y ya está.
Estoy pensando.
Estoy pensando.
Estoy pensando.
Es que ya sabes.
Que el user sí que está aquí.
O sea.
Hasta que.
Vale la pena.
Hacer un malo.
O sea.
Porque si no.
Lo que podríamos hacer.
User.
Rest of video.
Sería sacarlo.
Y.
Pero aplanarlo.
A mí me parece un poco más peligroso.
O sea.
A lo mejor.
Sí que tiene sentido.
Dejarlo en un objeto.
Dentro de user.
Y ya está.
Lo ideal.
Sería mover este user ID.
Hacia adentro.
Que igualmente.
Lo que estoy pensando.
Es que entiendo.
Que esto se podría hacer.
Y yo creo que es sencillo.
Y no se evita.
De historias.
De.
Que es verdad.
La información.
Pero bueno.
Tampoco es muy.
Muy grave.
Podría ser incluso.
Este asterisco.
Para que quitase el user ID.
Y pero.
Está bien.
Que aparezca.
O sea.
Que sea aquí.
Que esté la información.
No pasa nada.
Lo único que está.
Cuando estemos haciendo.
A los componentes.
Es donde lo tenemos que sacar.
Es que si lo aplanamos.
El problema es que claro.
Tendríamos que prefijar todo con user.
No sé qué.
User no sé cuánto.
Y al final.
A las malas.
Algún momento.
A lo mejor la tabla.
Por lo que sea.
Se crea un user.
Lo que sea.
Que no debería.
Pero.
Pero eso que nos evitamos.
Entonces aquí.
Que teníamos esto de vidrio.
No sé qué.
Que es pasarle todo.
Ahí a saco.
Aquí le deberíamos pasar el author.
Y esto sería.
Sacar el user del vídeo.
Solo lo haríamos en un punto.
Y aquí sería.
Use.author
Incluso podríamos poner esto.
Por si acaso.
Hay que darnos a gusto.
Y ya no hemos arreglado.
Vamos a ver por qué.
Porque es username.
Perdón.
Que yo ahora con autor.
Autor.
Autor.
Autor.
Y al final.
Con el autor.
¿Veis?
Ahí tenemos el midudev.
Y aquí tenemos el midudev.
Porque todos los vídeos son míos.
Y ya está.
Pero ahora.
Toda esta información que tenemos aquí.
Esto viene ya de la base de datos.
Que es lo que queríamos.
Y ya.
Miguel Ángel.
Hostia.
Miguel Ángel.
Miguel Ángel me llama mi madre cuando se enfada.
Miguel Ángel.
¿No sería más fácil usar user.userman en cada componente?
Recorres menos veces.
Yo evitaría hacer eso en todos los componentes.
O sea.
Intentaría separarlo una vez.
Por ejemplo aquí.
Poner.
Y ya está.
En un solo sitio.
Poner todo.
O sea.
Intentaría planar.
En las props.
Ahí sí que lo intentaría planar.
Disma.
Pero lo veo muy flojo a todos.
Sinceramente.
No hay mucha documentación.
Dice Jorge.
Con SQLite y Prisma.
Oye.
Prisma tiene buena pinta en temas de documentación.
Si dices que no tiene buena documentación.
Pues mal.
Mal, mal.
Por cada persona que pregunte por error lens.
Venga.
Shot.
¿Es posible que exporte las tablas y la config de tu Superbase para nosotros?
Usarlo de ejemplo con base propia Superbase.
Claro que sí.
Si se puede.
Si hay algún export o algo.
Y si me decís.
Mira.
Backups.
Backups.
Backups.
Backups.
Free plan 2.
Backups.
Vale, por dios.
Storage.
Authentication.
Pues no.
Es verdad.
Si alguien encuentra una forma que me lo diga.
Y lo hacemos.
¿Vale?
¿Su Pabies se puede estar en un servidor propio?
Sí.
Se puede.
Ahora.
Estoy viendo mucho interés.
Bueno.
No es por interés.
Es porque.
Bueno.
La verdad es que.
Está.
TikTok.
Y ya está.
Y estaba interesante.
¿Vale?
Vamos a ver cuántas cosas.
Que tenga un montón de cosas abiertas.
Venga.
Ponemos.
Cides.
La leche.
Son rayos.
Tenemos.
Nos tendríamos que poner.
¿Vale?
Una.
Sería de con el Intersection Observer.
Básicamente que si es.
Estacionando.
¿Ves?
Con el Section Observer.
Cuando salga.
Tendríamos que pausarlo.
Y al pausarlo.
Tendríamos que intentar también.
Que el siguiente.
Se autorreproduciese.
Reproduciese.
¿Vale?
Entonces.
Esa sería una.
Hacer el que.
El Intersection Observer.
Para detectar.
Cada vez que tenemos un vídeo.
Otra.
Subir los vídeos.
¿Vale?
Podría poner el menú de abajo.
O ponerlo de cualquier forma.
Empezar a tener rutas.
Podríamos hacer el menú.
Vamos al menú.
Podríamos tener el menú.
Y tener algo así.
Esto de cargar vídeo.
E intentar subir el vídeo.
Con Superbase Storage.
Y tener la URL.
Que eso nos actualice.
La tabla.
Y todo esto.
Esta.
Podría otra.
Así que nada.
Vamos a hacer una encuesta.
Va.
A ver que prefiréis.
¿Con qué nos ponemos ahora?
Intersection Observer.
¿Vale?
Subir vídeo.
Y formulario.
Bueno.
Formulario y subir vídeo.
Formulario.
Y.
Sí.
Oí cenáis conmigo.
De hecho.
Una encuesta.
Y decidimos entre todos.
Que cenamos.
¿Vale?
En un ratito.
¿Qué más?
¿Qué más?
¿Qué más podemos hacer?
¿Qué nos queda?
Pues nos quedan cositas.
Ta ta ta.
A ver.
TikTok.
A ver.
Buscar todavía.
Es bastante pronto.
A ver.
Otra sería el.
Login.
Y registro.
Lo que pasa es que.
Claro.
Login y registro.
Claro.
Para subir el vídeo.
Deberíamos tener.
A ver.
Por ahora lo podríamos ignorar.
Y al menos.
Cuando se sube el vídeo.
Que siempre sea el mismo usuario.
O podríamos hacer.
Login y registro.
Y luego hacer el otro.
Pero yo creo que es más divertido subir.
¿No?
Directamente ya.
¿Qué más podríamos hacer?
Rutas.
Algunas rutas.
Un link.
De compartir.
De sharing.
Estoy hablando petardos.
¿Qué está pasando?
La gente que está.
Pues ahí tenéis.
La encuesta.
La verdad es que no ha quedado mal esto.
No ha quedado mal.
Visualmente.
La cosa esta.
Tenemos el like.
Tenemos el comment.
Tenemos el share.
Podríamos hacer ya la tabla de comments.
Comments.
Descripción.
Comments.
All for.
A vídeo.
Loose security.
Date that.
User ID.
Escucháis los petardos.
Petardos hoy.
User ID.
ID.
Un.
Video ID.
También, claro.
Vídeos.
Vale.
Sería content.
Vale.
Escucho.
No sé por qué.
Petardos.
Petardos son fuegos artificiales.
Fuegos artificiales.
Eso son.
Por cierto, el perro.
Acabas de aparecer.
Que sepas que no me acuerdo.
O sea, no me acuerdo.
No me olvido.
Que querías que me muriese.
No.
Totalmente.
Vale.
Además aquí que pone.
Is new label.
Esto no tiene que ser new label.
Video ID.
Tampoco puede ser new label.
Esto sí que tiene que ser identity.
Seguir comercial.
User ID.
Is new label.
Tampoco puede ser un label.
¿Qué más puede tener?
Cuando se ha creado.
Cuando se ha hecho.
Si yo te pidas unos tacos.
Que no cuela.
No cuela.
Una separación en el icono.
Tiene una separación pequeña.
Pero es verdad que en TikTok me parece muy exagerada.
La separación que hay.
Dos semanas para los comentarios.
Si no te hubiese tiempo a acabarla hoy.
La idea es acabando poco a poco en directo.
Sí.
Mi idea es que si no terminamos hoy.
Vamos a.
No sé.
Si os parece un proyecto chulo.
Yo sí que lo voy a añadir.
O sea.
Lo voy a seguir utilizando.
Me gustaría seguir desarrollándolo.
Ya os digo que en TikTok.
O sea.
En TikTok.
De Supabase.
Es algo que me interesa muchísimo.
Y es la primera vez que lo utilizo.
O sea.
Es la primera vez que lo he utilizado aquí con todos ustedes.
Por lo tanto.
Sí.
Sí.
Me gustaría.
Siguiendo.
Vale.
Me faltaría esta parte de aquí.
Me faltaría esa parte.
Que eso.
Además.
Tu tu tu.
Video description.
Video player.
Video description.
En las actions.
Justo encima.
Aquí tendríamos el alt.
El username.
Y aquí tendríamos el avatar.
Tip.
Tip.
Mientras se va decidiendo.
Voy haciendo esto.
Que es.
Un poco tonto.
Pero.
Ya.
Apareciéndose cada vez más.
Username.
Avatar.
520.
Hostia.
Los shares.
Los comments.
Y los likes.
No vienen de la.
No vienen de la.
De la API.
Solo debemos ver.
Avatar.
Ah.
Username.
Ya lo he puesto.
Joder.
Clash.
Name clash.
Vale.
El avatar también.
Lo he puesto a veces.
Muy bien.
Por ti.
Bien por mí.
Vale.
El avatar.
Que no se lo estoy pasando.
Video.
Player.
Actions.
Username.
Username.
Y el avatar.
Porque el video player.
Vale.
Video player.
Claro.
Es del objeto.
Username.
Pues esto.
Lo mismo.
Tenemos que sacar.
El avatar.
Username.
The user.
Así.
Vale.
Avatar.
Avatar.
Username.
Hostia.
Es muy grande.
Tick.
Espíritu.
Action.
Player action.
Ta ta ta ta.
Hmm.
Styles.
Action.
Class name.
Styles.
User.
User.
User.
User.
User.
Image.
Bueno.
Ah.
Es que son dos imágenes.
radio cien por cien
bueno por ahí van los tíos que le pasa a esto porque esto no me lo está centrando
vale
a ver si pongo si le pongo aquí un flex a ver podría hacer esto column y aquí un margin
todo menos 16 píxeles ya está es algo parecido a lo que tienen aquí con un poquito más abajo
ay ay que me equivoqué me equivoqué y creo que van por aquí los tiros vamos a ver cómo
de grandes esto 48 28
vale que nos ponemos ahora que no he visto él crea un condo se con css bueno con paciencia y tal
con paciencia al final y hay un borde
no pensaba que los de todos el borde pero no no no y me encantan los de gatitos
vale no lo tienen todos que es lo importante no lo tienen todos así que bueno ya hemos añadido ahí el
usuario no ahí a ver voy a hacer un ejercicio así el raudo mientras volviendo voy a que has escrito
lo que habéis votado hostia la verdad que molaría molaría que sé que la cámara me siguiese eso estaría
bien a ver voy a hacer una voy a ver lo que habéis votado en el portátil en el portátil en el móvil a
ver atrás hola pues esto uy gente me ha dado susurros hola amigo estoy viendo el directo desde el celo en
otra cuenta mi cuenta principal si soy sub a bueno x milo está salvado yo he comprado el libro sortea
para alguien que no lo tenga nada que se fastidien te ha tocado a ti si vamos a hacer venga hacemos ahora
otro sorteo si o que hacemos otro sorteo no nada más sorteo no se lo merecen joder tampoco te tienes
que poner así a ver se han portado bastante bien no nos han portado bien se han portado bien pero
que te han dicho me miran mal pero como que te miran mal o sea pero si no estaba ni siquiera en
pantalla como que lo que estamos estabas en pantalla que te he visto que no estás en pantalla joder me
querían llamar súper feo como que súper feo si te llamas guard o sea como te vaya más super saber dónde
puedo ver aquí en el panel de control
para el control
tú tú tú tú tú joder
panel de control esto ya sé que estoy en directo yo mismo gestor de eso era para ver a qué cuesta
porque así hoy me estira un poquito pero ya veo que aquí no se puede ver una mierda o sea
twitch tienes que hacer algo tienes que hacer algo porque la aplicación está caca de caca para
cuando el libro de ríac primero va el libro de javascript como que rmrf guard
mira no no enfadéis al dinosaurio que se me revoluciona el pobre
tranquilo tranquilo tranquilo no es un trilo no ella no le escuches no le escuches no le escuches no quieren
decir eso vale que íbamos a hacer y vamos a hacer lo de tweets que va a ver que había ganado que no lo habíamos visto desde un
momento que mire que es lo que ha dado vale llevo cinco parece cinco horas aquí de caña no está mal
gestionar encuesta
ver resultados
y los resultados son
intersection observer vale estáis hasta la polla ya deje hasta la polla o hasta el chichi
o hasta el hasta lo que sea de
todo el tema de
intersection server luego habéis puesto el login y registro y luego formulario y subir vídeos ya he estado ha estado cerca
al menos no hemos votado si queríais que me muriera de hambre
vais que sorteo vamos con el sorteo vamos a hacer un sorteo para toda la gente que dios mío está aquí como si no eran mañana
la pregunta ya me lo pasa de
genial y me quedan tres horas por delante o más así que yo estoy bien no sé lo que cómo estaréis ustedes pero yo estoy muy bien
Mi duda de compartir la estructura de la base de datos está la info a mira que os paso la
migrating beat in projects make sure if you have
Tu migrating to a free free for the step joder qué difícil
Difícil no hombre yo esperaba botón
Es que creo que no tengo psql instalado ni siquiera en mi máquina
Tendría que instalarlo
es un rollo pero es que que si no voy a estar mucho rato con esto el botón debe ser pago ya te digo de pana las mejores cinco horas de la semana
dios mío has visto escuchado eso sí que bonito eso sí que está bien vale pues ves como dicen cosas bonitas
vamos a hacer el sorteo van tras 553 personas que siguen aquí como
Perdón lo había leído lo había leído mal para la consola de su para
No pero me dice make sure you have the p-sql installed in your computer
pero va a hacer el pg dump no pero es según esto es en sola que tampoco tiene mucho sentido
pero no si claro tiene sentido porque este es el host
estás engañando me estás engañando me estás engañando no está bien engañar
a hacer el
el sorteo vamos a poner una keyword y esta y la keyword va a ser esta vez
dino
has escuchado si me encanta pues eso dino es la palabra
la palabra secreta es dino entonces poned y
y vamos a hacer también que
que los subscribers tengan un poquito más de suerte
y ya está
dino dino dino dino dino dino dino dino
venga dino me gusta
por cierto grard no he abierto la lata esta tú crees que debería hacerlo grard tú qué opinas
crees que deberíamos bebernos esta monstruosidad de energy ultra
venga vamos a darle que lo peor que puede pasar debería un tirón de este café que está frío ya
así 50 elegible users
ya está ya van saliendo ya van saliendo los usuarios ya van saliendo los usuarios que es que con retraso
te pasa un poco como a mí que va que un retraso a veces así que
5 2
no va subiendo va subiendo
ya sabe gente aquí como 60 me viste creeper
vimox
charly
danny front
de loure
john lee que ha renovado su suscripción aprovechando ahí que tema suerte los subs
resi 235 que hace un rato ha renovado su suscripción
2 me ha pagado por la postura y estoy intentando estar recto pero está complicado
argue lo que se ha suscrito con prime antes
bueno yo veo ya
va le va a dar lugar al botón vale venga dale al botón lugar yo no quiero ver
yo no quiero ver
yo no quiero
va a ver
sabes dar o no
si vale
y le ha tocado a
jose luis
gts
jose luis gts
jose luis gts
jose luis gts t g
jose t s
muy bien
muy bien
te has ganado el peluche
es broma
te has ganado el libro de aprendiendo git
edades
si lo tenías ya
si lo tenías pues nada regálalo por ahí
con otro
voy a poner jose luis lo voy a poner la lista blanca
en la lista que tengo de gente que le ha tocado para luego no tener que estar buscando
esto que es
vale
ya tengo vuelve a sortearlo
no jose luis no me digas eso
a ver
yo te lo doy
y tú
lo regalas
a quien quieras
hacemos eso
para otro que lo necesite
tú lo regalas
a quien creas que lo necesite
tendrás ese poder
tendrás ese poder
eh
Rolly
te doy
sacorion
cosan
cosacorion
cosacorion
cosacorion
cosacorion
además me suena a cosacorion
muchas veces
cosacorion pone hype
midu hype
midu hype
pues cosacorion te ha tocado
te ha tocado
estás contento
estás con trino
contento
tú estás contento
yo sí estoy muy contento
me encanta
bueno pues
cosacorion
se ha ponido hype midu hype
y se ha ido a su casa
ya
mamá me ha tocado el libro
me ha tocado
y no ha vuelto a escribir más
ha dicho
me ha tocado dios mío
bueno con el siguiente
mientras cosacorion se recupera
saludos mamá
mientras se recupera
cosacorion vamos con el otro
uno más
y
cli
cli
cli
me encanta
cli
cli
una persona que hasta las letras de su nombre
cli
hasta nori dades
ha dicho en lugar de r
que mar
que maravilla
di que sí
a ver voy a poner cosacorion
cli
cli
que maravilla
pero si con la de sorteos que hago
algo tiene que tocar en todo este tiempo
no me lo esperaba mamá estoy triunfando
es lo mal que he llegado en mi vida mamá
no hombre
cli
te queda muy delante
bueno amigos
el último por ahora
uno más
uno más
y hasta para ver que como
mientras me pongo en intersection of server vale
uno más
uno más
y le va a
a
no
a ver a quien le toca
vamos
vamos
min
min
freak
min freak
además me suena a min freak
me gusta que
que me suenan al menos
todos los nombres que van saliendo
min freak
estás ahí min freak
min freak
hola
wow
bueno ya está ya podéis dejar de poner el dino por ahora
vale
min freak como te sientes
te ha gustado
enhorabuena a todos los certudos que le ha tocado el libro
luego de un mensaje privado vale para para enviarlo en twitter así que
estate atento que llegará un susurro
venga
que cenamos
tacos mexicanos
ensalada
un pokeball
pokeball
ensaladita
hamburguesa
hamburguesa
que más podemos comer
ah
japo
o
quisiera yo cachapas
no hay cachapas en mi pueblo
no hay cachapas
quisiera yo
cachapas
cosas del mexicano
pokeball
ensaladita
hamburguesas
hamburguesa
locurón
japo chiqui
o
chino chino chano
chino chano
venga
durión
esto voy a dar más tiempo
vamos a dar 10 minutos
no he puesto uno de que te mueras de hambre vale porque sé que sois capaces de hacerlo
lo que sí que os voy a enseñar rápidamente un poco el mexicano sería el
¿cómo se llama el mexicano?
joder
ahora no me acuerdo
el
colmado
este sería el mexicano
vale
está colmado
este sería el mexicano
una hechifa para que no salga en un año
hombre no
gracias
hamburguesa locurón
cosa no
o un pokeball
bueno este sería el mexicano
el
mikeypokes
la ensaladita
o sea vosotros tenéis vosotros y vosotras tenéis en vuestras manos
el
la posibilidad
de que comas a
esto sería
vale
arepa mundi
pero arepa mundi
eso donde está
arepa mundi
eso que es
arepa mundi
pero esto no
esto es barcelona
yo estoy en el prat de llobregat
esto no está
no está aquí al lado
mikeypoke
está colmado
tenemos el colmado
que sería mexicano
el mikeypoke
que veo que por ahora va ganando
sería la hamburguesa locurón
tengo dos opciones
la ensalada
porra borra
la
la
esa locurón
sería el santo
bueno santo no
la santa
el pat
oye que grande
este
estás escuchando esta canción
ya que es
que estoy feliz de star wars
ya que fíjate
que chulo esto
que hasta me ha cambiado
el reproductor
a un sable láser
estoy flipando
estoy flipando
todo porque es star wars lofi
pero fíjate aquí
chulo
me encanta la versión esta
super chula
bueno
pues esta sería la hamburgueso está
vale hamburgueso está
qué buena carta
pues tendríamos que verla
veríamos juntos obviamente
vale
pero tiene un buen año
lo digo yo
que más tendríamos tendríamos el
hapo sushi el hapo sushi sería del
como sería
no
realmente a giro lo se llama
es que es tan chula la canción esta
estoy flipando
ramen el prat
a ver
ramen king
esto
ya os digo que ramen king tampoco
es que
me ha gustado mucho shan chi
me ha gustado
me ha
me sorprendió para bien
shan chi
no sé si la habéis visto
no voy a espolear nada
no os preocupéis
pero me sorprendió
muchísimo
shan chi
o sea
bueno pero estos son todos
melocotonazos
pero qué está pasando aquí con la música
no sé si sabéis qué canción es
pero es la de sony 10 jock en versión lofi
yo no pongo notas
pero es un 10
vale o sea es un 10
miguel se tiene que ir elijas lo que elijas que aproveche
veré las tres horas restantes después en youtube
muchas gracias por quedarte hombre un rato
pues hablemos de shan chi mientras votáis va un momentito
vamos a hacer un momento un momento off topic va
vamos a hablar de shan chi sin spoilers vale sin spoilers
ah espérate que os tenía que enseñar otra
teníamos el chino chano bueno el chino el chino era un chino normal y corriente
tampoco los chinos da comidas que pueda enseñar mucha cosa
pues eso el taco el mado está el mikey poke que sería ensaladita vale
por si queréis que coma sanito
la hamburguesota que ya os digo que tiene unas pintas las hamburguesas
que me podría casar con una vale perfectamente luego tenemos el ramen y no os preocupéis por mejor un directo cocinando adido adino pero bueno que os pasa se llama croire para empezar vale y no lo voy a cocinar es como mi hijo
hay que ver no no escuche no escuche bueno pues ramen king que sushi y hablemos de shanky shanky sin spoilers
películas en spoilers al final cuando muere nada es broma broma sin spoilers en serio
es una película que creo que empieza muy bien muy alto súper bien o sea empieza muy arriba con cosas muy antes y me da la sensación que poco a poco se va no desinflando o sea la parte de acción es increíble o sea todo lo que es acción tiene en el primer tercio de la película una escena de acción en auto en un autobús
muy chula que yo estaba en el cine que estaba a punto de reventar la silla estaba y agarrándome con las uñas y estaba muy bien o sea de no voy a decir de las mejores escenas de acción que he visto en mi vida porque he visto muy buenas pero de verdad o sea una escena de estas que dices vale ha valido la pena venir al cine para verlo
luego creo que la peli se va un poco desinflando o sea la peli empieza a irse un poco la cabeza
a no sé es como que al principio es una película que te crees mucho que dices oye que bien hilada la historia y tal y luego poco a poco te vas diciendo hostia esto igual se les ha ido un poco aquí bueno si me lo voy a creer no sé qué
bueno esta escena sale en el trailer esto es que sale salen algunos que hay en la película la verdad una cosa que me ha sorprendido mucho de la película
es que la película tiene mucho más que ver con el universo marvel de lo que parecía
lo bueno que tiene esta película es que se caga encima de la historia original de sanchi vale o sea si habéis leído el cómic
mira este es el actor este es el cómic si habéis leído el cómic no bueno no sé si os tenéis que preocupar o no pero no tiene nada que ver con el cómic
vale no tiene absolutamente o sea se llama chi eso es lo que tiene que ver con el cómic
a mí la verdad que el cómic me gusta mucho y por lo tanto lo agradezco a mí es un personaje que me aborre o lo aborrezco un poquito en el cómic yo personalmente vale
así que os la recomiendo si os gusta el universo marvel no os preocupéis está a la altura totalmente del universo de hecho a mí me ha gustado bastante más que black widow
en casi todos los aspectos y creo que muy bien con el tema de la cultura china muy bien con las peleas muy bien con la historia
me ha gustado muy en general todas las interpretaciones así que es mejor que blado de verdad o sea a mí me ha parecido mejor película que black widow
mejor película que mira esta es la escena que os digo del autobús brutal la autobús tremenda mejor que capital
marvel seguramente seguramente también pero si vi la última de mortal kombat y también me gustó a ver me parece mejor si también también
también os digo que la de mortal kombat pero bueno estuvo entretenida se parece el estilo a mortal kombat hombre
con bastante diferencia a mí sanchi me parece mejor peli película que mortal kombat y que estás estás
si soy fan y lector de los cómics de marvel a ver soy fancillo y le voy leyendo de vez en cuando pero tampoco no soy de estos que
tienen ahí que tiene colección de de marvel no suelo no suelo pero de vez en cuando sí que me leo de dc de marvel
sí que me leo algún algún cómic o lo recomiendo es recomiendo la película de hecho hace casi un año que no iba al cine y fui al cine solo para
ver esta película y no me arrepentí absolutamente nada casi me llevo el press delante pero no de verdad que me gustó me gustó
bueno que está que me estáis votando a ver cosas del mexicano hostia de cosas de mexicano está vamos muy arriba esto es lo del mexicano
esto antojitos tacos quesadilla burro espero que no me digan que está cerrado porque si me dice que está cerrado pues no se pide y ya está
a ver jueves y viernes 7 a 12 jueves y viernes 7 a 12 a ver hoy es viernes hoy es sábado ya sábado de 8 a 12
vale pues entonces entiendo que sí que vamos a poder pedir así que vamos a poder pedir que sabías te ha tocado una sub de regalo
con tantos de latam es normal que esté ganando el mexicano bueno pero hay gente que puede ser de latam pero a
mejor mexicano no le guste no puede ser que sea colombiano y diga pues si no hay arepas no voto
mexicano si vaya deja de jabú tuvimos un día íbamos a pedir escena y lo que nos pasó es que estaba cerrado
los cabrones me puede regalar alguna web para aprender css pero que quieres aprender desde cero o quieres
practicar joaquín que quieres hacer david pong dice que es de lo y él votó la hamburguesa de basta ya no
comas mexicano si no es de aquí j rafael dice que las arepas son venezolanas a qué bueno j rafael my cox
tenéis que saber una cosa mi pareja es venezolana y me encanta hacerle chinchar con el tema de de que
las arepas son colombianas pero yo no me meto en eso no tengo ni puñetera idea de si son colombianas
venezolanas lo que sea a mí me da igual porque a mí lo que me vuelve el loco son los pequeños y entonces
front-end mentor y depth challenge dice doniel de science las arepas son colombianas a ver yo no me
quiero meter pero yo diría que son un poco más venezolanas que colombianas me da la sensación también
verá que por contrato con mi pareja tengo que decir estas cosas vale yo por contrato con mi pareja
afirmamos que yo tenía que defender que las arepas son venezolanas entonces pues son venezolanas lo que
tengo que decir y es lo que se dice y ya está lo que hay pero cuántos tipos vas a y bueno ha ganado
el mexicano ha ganado el mexicano ha ganado el mexicano pero es que soy la hostia de 6 la leche hay hay
wifo 2 vamos a ver esto que está con detalle vale vamos a ver esto un momento a ver cómo como veo
cómo abro la encuesta en otro sitio tengo que tener un directo quiero hacer unas herramientas para poder
ver para poder poner aquí la encuesta fácilmente cosas así es que es un poco rollo bueno vamos a
cuesta ha ganado cosas del mexicano me encanta porque son cosas del mexicano suena fatal porque podría ser
cualquier cosa lo del mexicano cosas del mexicano wifo 2 lo tenía clarísimo y ha dicho no no no 33.000
puntos del canal 33.000 puntos del canal ha dicho wifo 2 ni hamburguesa ni hostias o sea tú te comes una
cosa del mexicano me cago en la hostia wifo 2 ha dicho a con mexicano dios wifo 33
sois lo vale soy lo bueno la locurón también ha habido votos por aquí dice no cometa hamburguesa
cometa hamburguesa el hapo sushi george lo ha intentado pero no contaba con wifo 2 y también el
chino chano pero nos ha dicho se acabó aquí las tonterías aquí se han terminado las tonterías
wifo 2 estás ahí cuéntanos wifo 2 por favor cuéntanos qué sabes o sea que se te ha pasado por la cabeza que digas hoy son en España las 9 y 23
este chano se va a comer algo del mexicano por mis puntos sabes no sé cuéntanos de verdad que le tengo mucha curiosidad
me interesa mucho tonterías las justas con el mexicano dicen que es el dueño que es el dueño del restaurante
soy lo máximo estáis estáis como una chota me lo agradecerás me encanta ni siquiera me lo agradecerás
bueno wifo 2 wifo 2 mira te voy a decir una cosa como te has gastado 33 mil puntos wifo 2 te lo digo en serio
voy a empezar que elijas mi comida lo que dime qué pido dime qué es lo que tengo que pedir para no
arrepentirme wifo 2 dime dime qué es y entra lo otro o sea lo que tú seas me lo voy a pedir me da
igual me da igual life driven development vas a bueno si fotos que te veo tímido que no nos escriben no nos
dicen nada wifo 2 está vamos wifo 2 que la comida mexican roll nachos tacos quesadillas burrito y
enchilada flauta tacos venga tacos que tacos me pido al pastor rejo chili pepper frida taco la cochinita o
la carnita que tú digas wifo 2 tacos por dos al pastor no eso me está diciendo pedrolo pero bueno
que también puede ser al menos wifo 2 que a uno el quien me diga lo pedimos me da igual lo que sea
ser de guar o de azufre de lo que sea o de donete del pastor pero es lo que diga wifo 2 ya me dio
hambre a mí también me está dando un hambre o sea wifo 2 por favor por favor dime algo corriendo aquí
de hambre cochinita porque soy yucateco pues a por la cochinita que vamos venga una pinta la cochinita
cochinita no sé pero cochinito me voy a poner yo yo sé que me voy a poner cochinito venga va esta entiendo que
venga elegir te voy a dejar elegir lo que tú quieras que tacos y así pedimos probamos otra cosa va que
que pido wifo 2 por tu inversión usa aquí hay un código un 10% así que taco plomo que cabrones a ver
flautas se lo dice cristian me hace mucha gracia el nombre de cristian no hay pollo a la brasa burritos
taco plomo taco plomo es el descuento se llama así que sabe esperando a wifo 2 a ver si me dice
autas wifo 2 por favor pero qué está haciendo wifo 2 wifo 2 estamos aquí esperándote flautas o burgía
vale wifo 2 no se llega a yucatán no no le llega a internet vale estado que le queda sin vender que
bueno venga va una flautita sólo hay del gallito no sé que tenga el gallito torta de trigo pollo chipotle
crema agria aguacate pico de gallo cilantro bus que bueno dios mío venga va el gallito a ver pero si no me
voy a salir rodando aquí la carta había no ha hecho saber pero soy una persona solo así que
antojitos ni ostias pedidos va pedidos vale la c venga vamos a pedir voy a poner mi dirección y
tal con gea tu hostia 15 euros a ver no está mal 13 95 sexual que pongo aquí mi dirección recibir
descuentos y venga wifo 2 envíame descuentos en pagar recogida en tienda e introduje su dirección
todos los campos son obligatorios vale dirección calle javascript pero 101 más 0.2
el prate gas 0 8 8 20 barcelona vale entre vida entregado a domicilio venga envío lo cagará en 50
minutos más en 50 minutos yo estoy desmayado aquí pero bueno pagar entrega la tarjeta de crédito yo
quiero pagar ya no quiero no creo más no quiero que siento 234 saben que ahora si ese esa pantalla
porque estoy poniendo todos mis datos perdón que estaba aquí eres del prate tienes pinta de san
cosme si estoy en mitad de san cosme ahí en mitad de san cosme os voy a explicar una cosa off topic
perdónate y que pedimos para bebés no he pedido no he pedido nada tenía que haber pedido es verdad
no he pedido nada ah bueno me puedo beber esto no ya que estoy me bebo esto a ver si en henry gracias
por la sub muchas gracias a ver también se ha olvidado ya pero bueno ya está ya me pido me pido
esto y ya está cuánto tiempo llega 50 minutos o sea que bueno voy a abrir la puerta me a ver qué
si es para no dormir en toda la noche no me dio te vas a ir con úlcera este life nada pasa nada a morir
el monster es igual que red bull si más o menos otros 32.000 points para la bebida vale os voy a
contar una historia muy truculenta vale lo que pasa bueno me da cosa pero encuentran hombre tocado
a ver ya es un poco truculento eh no sé
jodía bueno el tema se encuentra encuentra nombre muerto voy a contar la historia el tema otro día
pues nada resulta que un padre asesinó lo cual es bastante grave bastante jodido bastante chungo vale
es muy fuerte es muy fuerte de hecho joder bastante impactante el tema es que el hombre este
estaba en paradero desconocido que había desaparecido totalmente no sabía dónde estaba y lo han encontrado
de un árbol metros de mi casa
de mi casa o sea casi que podía salir por el balcón y mirarlo y verlo es muy fuerte serio o sea lo han encontrado
muy cerca del aeropuerto no sale mi dirección esto esto a ver en realidad no no han encontrado por
ahí pero bueno que que mi casa está por aquí vaya que que han encontrado y que la han encontrado al lado
me queda un poco joder que fuerte me parece que es un sitio por el que si creo que es donde es es un sitio
donde por donde suelo pasar andando muchas veces sabéis esos vídeos que a veces hago
sabéis que a veces salgo andando en vídeos en instagram y digo pues voy estoy haciendo esto porque estoy
andando y todo esto bueno pues a veces paso por ahí así que no no muy muy fuerte muy fuerte la verdad
muy fuerte muy fuerte sólo que decir eso que cualquier lado me sorprendí un montón
para que vea que vio peligroso realmente bueno perdón no cada gracia pero midu te
hubiese pasado que hubiera en japón que me pasa que le pasó en youtube en japón
oye midu primera vez que me suscribo a un canal y fue mi mejor decisión hoy muchas gracias muchas
gracias muchas gracias pero bueno que joder que miedo que miedo bueno habéis dicho intersection
observer vale entonces voy a cerrar esto habéis dicho intersección observer vale que tenemos que
hacer con intersección para bajar un poco la música que ya que tengo que estar un poco a la white
puerta para enterarme bien o lo sabes o sea midu hay alguien detrás de ti mira no me digáis estas cosas a
mí me gusta mucho la peli de miedo lo paso muy mal así que por favor por favor parece bajo soy 171 una
cosa así soy bastante bajito pero la verdad que me gusta mucho en ser bajito
le tengo ningún problema siendo bajito pues el tema interés para qué tenemos que hacer intersever lo
primero es la verdad que esto que estoy utilizando sesión el server en el vídeo player que va a tener
que ser ya teníamos aquí el red tenemos el red justamente perfecto entonces el tema de intersever
no sé si lo conocéis pero es una api que lo que te permite es saber si está un elemento era yo esto
este artículo lo traducido lo traducido lo traduje yo y vi mdn contributors cabrones mira que tu def
luego me fixes pero aquí yo esto deben ser cosas nuevas porque lo trabaje casi todo vamos
probé una vía sincrona observar cambios en la intersección de un elemento un elemento ancestro
elemento con color la idea del server básicamente es poder detectar cuando un elemento pues está en
el viewport ya sea que acaba de entrar que hay una parte y cosas así no está muy bien para hacer
lazy load y este tipo de cosas lo mejor pues que en temas de rendimiento está muy bien en lugar de
escuchar el scroll lo que puedes hacer con intersecciones de observer es dejar de escuchar el scroll y
aquí lo harías al revés lo que estarías es observando cuando un elemento está en algún
punto en concreto si alguna vez alguno de ustedes ha estado en aquel en la técnica del chivato que
hicimos en un directo pues pues fue así vale hicimos la técnica del chivato y estuvo bastante bien
entonces mira conseguir una página de escrito es pues lo típico creo infinito también sería un poco así
de hecho con intersecciones server también podríamos detectar cómo de cerca estamos del final para
hacer paginación hacer el infinity scroll en tiktok de hecho pues quién sabe igual si podemos lo hacemos
vale creando un intersecciones server bueno vamos a crear vamos a ir bastante a saco pero luego poco a
poco lo tendremos que lo tenemos que ir arreglando vale ops vale el root el root hay que decirlo en él
si no se le pasa a un root esto sería el documento general o sea sería el body body o el html yo creo que
sería el html en nuestro caso yo creo que sí que vamos a editar poner un query selector y esto tiene
que ser sobre el que tenemos el scroll que es si no me equivoco el main vale vamos a poner al main que
es el que tiene el overflow del scroll vale estoy también adelante veremos si no lo cambiamos con el
tema de las rutas que cambian y todo esto porque si no este main es lo que decía un compañero en el chat
no oye que esto luego cuando tengas otra página scroll snap type esto te va a afectar y tiene todo así que por
ahora vamos a poner aquí el vale el jean root martín el root martín es como el margen alrededor de un
elemento mira que les meto el que te meto no esto está mal esto no es elemento se nota que soy yo el
que hizo esta traducción porque hay un error ahí básicamente es como el el margen de ser que tiene
que haber o de distancia pero no sólo puede ser de arriba o abajo claro es cualquier margen porque
imaginar que el intersexual server aunque nosotros lo vamos a hacer cuando le scroll también puede ser
de izquierda a derecha entonces tú aquí le puedes poner el margen de forma que el elemento como que
crezca y digan no también tiene que tomar lo que hay alrededor dependiendo de cuánto le pongas en
nuestro caso le vamos a poner cero creo que tiene sentido que sea cero porque nosotros en realidad queremos
que este sea que se vea entero o vea luego veremos porque tengo un poco de dudas muchas cosas de
intersexual server lo malo es que a veces te quedan dudas de con un píxel de diferencia te puede joder
vivo o sea tiene cosas muy chungas porque bueno eso es lo que hace que funcione bien luego está el
threshold que es el tanto visibilidad que tiene que tener el elemento por ejemplo si yo le pongo que
que sea 0 5 al menos la mitad del elemento tiene que estar visible en nuestro caso 1.0 porque porque
si no mientras estoy haciendo el scroll el problema es que ya detectaría que está y yo quiero que sea
entero veremos si esto no tenemos que tunear lo yo que sea algo así pero vamos a poner lo que sea
entero entiendo que verá un valor de 1 significa que el umbral no se considerará pasado hasta que
todos los píxeles sean visibles vamos a ver si esto es verdad y a ver cómo lo hace vale determinando un
elemento para ser observado aquí es donde está el tema yo voy a que el observador este claro
el colba aquí es donde está el tema tengo por aquí en react rendering tengo que tener por ahí
bien está a ver hay hooks que ya estén hechos hay hooks que ya están hechos que hacen esto pero bueno
al menos para que lo entendáis porque me parece que es algo súper interesante vamos a intentar hacerlo
más o menos en mira de hecho aquí tengo un juego para que lo veáis a ver cómo lo haríamos mira esto
es muy interesante porque además tiene un polifil sabes un polifil si no lo si el intersector server
a ver lo soportan casi todos los navegadores a día de hoy intersector observer de hecho en el
tick tock en el clon este no vamos a poner un polifil porque fíjate un 94% y el que no lo soporta
casi que es porque ya no quiere así que no pero si tienes que soportar internet explorer 11 pues
necesitas un polifil y esto es una técnica muy buena por qué porque lo que puedes hacer es envolver
el check server en una promesa de forma que cuando intentas utilizar en el observer puedes bien interseccion
ser o puedes devolver la carga del y cuando se resuelva entonces utilizar interseccion server es algo
parecido a lo que podrías hacer con feds es muy interesante esta técnica de hecho es esto que te
interseccion ser bebes promis punto resolve is client no que es el cliente y no tengo interseccion
server support entonces importó interseccion server esto lo que lo que haría que te interseccion
server interseccion server options y esto está más windows eso sería window viewport root margin vale
estas sean las opciones que os he comentado antes lo que quiero ver mira un led observer porque una
cosa interesante sería crear esto una vez en lugar de crear un observer cada vez sería tener
aquí una variable que le puedas guardar el observador y así no tengas que estar constantemente creándolo
una vez y otra porque esto es como crear un montón de eventos que te deje escuchar vale handle intersect
esto es lo que ocurre cada vez que haces una intersección vale esto esto es una interesante este
handle intersect porque lo que hace es que tú muta target y le pones el callback no está mal y seguramente
justamente para optimizar el tema de el uso de los observables estos porque porque al intersección
observer le tiene que pasar el callback las opciones yo las opciones ya las tengo aquí esto es una constante
ahora no hay más pero hay que pasarlo el back se ejecuta cada vez que detecta un cambio en esa
intersección claro cuando le pasamos aquí el handle intersect en este caso veis aquí estoy haciendo
windows punto intersección observer de hecho esto es práctica y lo voy a utilizar utilizar el cuento
vale en este callback le tenemos que pasar algo aquí tenemos que hacer algo vale voy a poner aquí un
con solo esto tiene un evento así que vamos a poner aquí el evento por ahora voy a hacerlo así luego lo
lo haremos en condiciones vale y ahora lo que nos faltaría cuando creamos el observador le tenemos que
decir qué es lo que queremos observar o sea por ejemplo aquí tendríamos un punto de ser que top
server punto den observo no sé qué este que top server es útil justamente por si lo tenemos ya guardado o
no tenemos guardado vamos a hacer esto bueno claro es que es porque lo estoy haciendo de la otra forma en
otros sitios porque tiene ser besar rendering aquí lo podemos hacer muy fácil porque es clave en ser
rendering solo entonces puedo crearlo aquí una vez y olvidarme y ya está el otro es un poco en
ser ves a render y no tienes el intersection of server tendrías que mirar si es window ves is
client type of window no sé que sólo lo podrías empezar a crear cuando estás en el use effect por
ejemplo aquí ves que te lo haces en el use effect que aquí también lo tenemos que hacer en un use effect pero
ya el efecto porque aquí ya podemos tirar directamente del observer server punto observe y aquí le pasaríamos
a ver qué bueno es que jacob pilot le tenía que pasar el elemento que tenemos que observar a ver aquí
yo entiendo que el vídeo sería el adecuado el vídeo pero bueno veremos si funciona bien si no funciona
bien pues le daremos una vuelta vale tenemos que observar el del s aquí es donde estamos haciendo
computación esa de cuando intersecta hacer algo y dejar de observar porque debe de ocurrirse una
vez vale y luego de suscribirse pero bueno esto lo hacemos ahora en un momentito por ahora vamos a
hacer esto esto lo hacemos solo una vez vale al montar porque no hace falta estar observando y
desobservando todo el rato vídeo no sé qué porque al final es que el vídeo aunque sí o sea es que tiene
sentido bueno vamos a ver qué tiene este evento evento vámonos a nuestro tic tic tic tic consola
bueno fíjate que nada más en ya tengo aquí entradas del intersection of server o sea entre sesiones
de verba por todas esto va rápido rápido y es que nada más entrar en realidad ya pasan cosas con el
elemento porque porque ya el elemento está aquí interseccionando ya está aquí este elemento ya los
observando el tema es que si yo hago esto fíjate o no es que cada vez intersecciona el elemento pues
vamos a tener uno de estos que ves es que te comentaba que me da un poco de miedo cuando yo voy
a cijo sí que y aquí me debería decir si es visible se está interseccionando si esto y lo otro además esto
fíjate que está dos veces porque estado porque tenemos dos elementos tenemos dos elementos uno el que
está arriba otro el que está abajo no entonces los dos cada uno va a ser diferente uno estará
con interseccionando y el otro no está interseccionando cada uno va a ser uno force un otro y esto lo que
nos va a permitir justamente es darle play a uno para el otro y evitar que estén los dos en play y cosas
así en este caso mira target este target es el de arriba y este que fíjate que cuando hago joven fíjate
que aquí a la izquierda lo ves seleccionado que me dice que éste sí que está en intersecting me
ponéis vol false y esto es lo que decía que me probaba si lo subo un poco ves que he hecho un
poco hacia arriba ahora me ponéis visible false porque no está entrando todo el interseccionando
pero el is visible a false yo creo que es por el threshold porque no es 100% de todo aquí si le ponemos
menos a lo mejor deberíamos ver ver voy a arreglar está este piso y el piso vos vos bueno al menos
si nos pasa es visible false a ver vamos a ver esto es lo que significa es visible 3 se observó
el track visibility tono de correct options track visibility nada pues vamos a afiarnos del
es interseccion y vale vamos a olvidar noticias decía yo que no me sonaba yo pensaba que antiguamente
existía el intersection ratio que era con el que sabías exactamente el tanto por ciento de lo que
estaba arriba por ejemplo en este el cero es el vídeo que está arriba si yo me pongo aquí en target
ves está seleccionado este el 1 es vídeo que está abajo entonces intersection ratio de este es 1 porque se
ve entero y en cambio el otro es 0 porque casi no se ve lo bueno es que si yo así claro fíjate que
hay a la sección server este y aquí puedes intersección ratio porque se veía un trozo lo bueno esto sería
que podemos quedarnos de sección ratio de 1 y entonces puedes poner los ley y todo este tipo de cosas a ver
vamos a intentarlo por ejemplo no sé si fiarme de las interseccion interseccion o sea yo entiendo
que intersecting si ahora este esto es con falls y este target es el de abajo ese plan como el 3 gol están
es 100% aunque esté fíjate algo este que intersecting es false y poner aquí algo del palo
punto intersection ratio porque la arriba me imagino que será cero patadero
claro es que estas otras
es que porque hay un pequeño el mismo pero no sé si es que se ajusta claro porque hay un momento que sí y
luego se ajusta sección es intersecting pero es que luego éste sale a falls es como que puja un poco el contenido hacia
ves ves que haga el intersecting vamos a quitar esto este es el arriba sin falls
ves interseccion o 998 podríamos o sea que con que escuchemos la primera vez y ya no salga que es true ya no deberíamos olvidar
y se interese vale a ver cómo se podía del propio server punto ser vamos a hacer a partir del de dentro vale
entres filer todos los que estén intersecting
así que las entidades las entidades las filtramos las que estén naciendo intersecting y para cada una pues la dejamos de observar pero claro qué pasa
si
como vayan han llegado
con la gente
pesadilla
es una mierda hay formas fáciles de
donde pongas para mear como un loco en todos los canales es un rollo gracias por avisar
pues esto claro es que si me fijase de intersecting ya sería la bomba pero el problema es que no me puedo fiar y tiene sentido no quitarlo
nunca sabes nunca hacer un up ser porque puede volver puedes tirar para arriba y volver a verlo o sea el problema se pasa esto
y lo ponemos por café no a ver esto sería y ven entris vamos a quitar aquí esto entris event vale
e
estar gris
se
han de intersector
direct time
claro esto se devuelve no es un evento son todos los el array que hemos visto y en cada uno tienes la información de intersector server
de ese elemento vale filtramos para ver si está intersecting
cada uno target este es el elemento target punto on intersect esto lo que tenemos que hacer para la mutación
si no lo que podemos hacer es tener más de un intersector server pero bueno cuando son mucho es un poco
built
este sería el este de hacer un intersecting y aquí hacer lo que tu vida que hacer por ejemplo vídeo punto ocurren
punto vamos a poner esto y vamos a poner aquí con solo solo para
vale
interact with the document first que cabrón eso
no puedo darle al play porque el usuario todavía no ha interaccionado
pero ahora sí que ha interaccionado no o sea
funciona
ahora funciona
pero es de plicos de user didn't interact with the document first cual ira
a esto
pido html 5 get status plane así me acuerdo cómo era detente esto
esto
esto
punto post y ya está
vale
vídeo element current vídeo
entonces
vale
vídeo element punto play
esto vamos a condicionar aquí
pa pa pa
aquí además hay otro problema
menos a pausa vamos a ver esto un momento pues me da la sensación si vamos a tener que tener
joder
como
la madrigo parió
a ver voy a quitar el sonido porque
no hace falta
no está parando
post
qué
pero cuánto
vale
o sea
lo que pasa es que por un lado para
lo ponen
nada más entrar no funciona
porque
aquí acciones vale
pues le damos entonces funciona
entonces yo cuando para el de abajo
el diario
a usar
no cuando cuando me voy
directamente
acá no
filter los que están interseccionando
entonces
vale
es creando si está interseccionando y tal
pero es que al final lo que queremos
no es un intersec
sería por ejemplo
handle
intersec
no
y aquí además que lo observe lo que podríamos hacer sería
is
intersec
intersec
intersec
intersec
esto lo recuperaremos de aquí
no vale
el hunter sé que este que lo habíamos hecho aquí
cuando
no
que está
o sea
si en tercero deberíamos hacer el vídeo element
play
si
o sea da igual a o no esté pausado si pausa y ya está pausado pues es lo que hay
la vida es así
o sea el intersecting
si está interseccionando lo hacemos y si no pues lo pausamos así de fácil
a tomar por saco
a ver
intersecting
es
que ahora me da la sensación que dice play fell because the user didn't interact with the document pero
es que
ya he
o sea hasta que no le das un clic
o sea esto no desaparece pero bueno esto lo podemos arreglar ahora
ahora me voy
este sí que funciona ahora vuelve a funcionar
o sea ahora esto vale lo está haciendo bien
me faltó eso sí
pero
ves hasta
o sea
tendríamos que mirar si que más que hacerlo sería empezar desde cero pero bueno eso tampoco
sería muy complicado hacerlo con javascript
el tema es
ves
el tema es
además si esto cuando hacemos esto si está deseleccionando esto y
y
y eso es un set playing
existente sexo
así que desaparece esto
funcionando bien
le estamos que está haciendo justamente lo que
cómo funciona tiktok
cosas
vale esto así
hacemos interseccionando le damos play al o paus al vídeo si estamos o no estamos
se planes intersection esto lo hacemos una vez
esto lo hacemos una vez y con esto ya lo tendríamos solucionado
vale el console lo que este que he quitado que
a ver ahora que me está saliendo es esto esto es un rollazo sabes o sea
claro porque porque aunque le he dado al play no funciona
entonces
más que hacer interseccionando esto no es fiable
esto sería vídeo el punto pauset
he usado
no
a ver ahora
ahora
vale ahora sí
uff complicado eh la leche
y si imita es un click falso no puedes o sea no cuela ojalá te imaginas
metiendo un click falso
se queda ahí se queda parado un 00 no se queda en el minuto
a ver espera que es que está aquí un montón muy como a tope
a tope
de la gente que usa marihuana marihuana en la universidad
qué opino de la gente que usa marihuana en la universidad
a ver yo creo que si la marihuana esa es algo que te deje mejorar como persona
pues
marihuana a ver no sé me imagino que dices la marihuana pero en la universidad
yo creo me voy a meter un vergenal vale pero yo creo que la marihuana como casi todas las cosas en la vida
si se hacen casi todas no todas casi todas hay cosas que ni por pocas que sean no lo hagas
pero creo que la marihuana si tú controlas la marihuana y no la marihuana te controla a ti
pues mira si es recreativo por meditación farmacéutico lo que sea vale pero
pero con cuidado sabes o sea no sé hay en sitios como como que un follow pasa como que strike porque
pero si ese yo no estoy diciendo nadie que utilice la marihuana ni nada
no la marihuana es es legal en algunos países solo digo eso la marihuana
se optimiza a sí mismo el cabrón claro que me optimizo como no voy a optimizar
si irás de las personas 0 58 quien puede medir 158 es muy raro
fines educados
es una actividad muy pedagógica dicen por ahí
mételo en un hook
si lo puedo meter en un hook de hecho a ver lo que hemos hecho lo puedo meter un hook
las cosas a ver
antes de un hook y tal no pasa nada porque lo hagáis
primero en el componente y una vez que veáis que funciona que por cierto ya hemos dicho que funciona
pues lo sacamos pero
hacerlo al revés intentad primero probar las cosas no
no hagáis o sea como se dice esto
cuando sean
prematuras vale
vale pues eso para hacerlo fácil ver que funciona y tal y luego yo ya lo tenía antes un hook pero vamos a poner esto
en nos darle porque no es intersecting como tal sino que sería
control video player
intersection
player algo así
algo así
entonces esto lo sacamos por aquí
esto lo sacamos por aquí
esto lo sacamos por aquí
esto por aquí
esto te aclaro
vamos a ver si somos capaces
section video player
fan
es que estoy pensando estoy pensando estoy pensando eh
chat
chat saquen clip
insta a sus seguidores a fumar hierba
seems god
what
yo no he dicho eso
yo no he dicho eso para nada
yo no he dicho eso para nada
para cuando cambias de video en tiktok
bueno pues lo queríamos
lo quería
quería que poder subir un video o sea que aún estamos a ello
igual podemos subir eso
no he dicho nada de eso
la leche yo no he dicho nada de eso
además odio fumar no me gusta fumar nada
no no me gusta el tabaco ni nada
o sea que no sé
use intersection player
esto no hace falta
no sé por qué pues tener road function de todo esto
importamos el use effect
import from react
vale
ahora que ya tenemos aquí es donde está el tema
este set playing
qué podríamos hacer
pues el playing
podríamos sacar el play
o sea este estado que tenemos de playing
pues sacarlo aquí
pero ya sería un vídeo players
bueno podemos hacer esto state
y aprobarlo a ver cómo funcionará el tema
aquí tendríamos is playing
bueno día playing
básicamente si ya pero o sea tampoco
sería use intersection server
le pasaríamos
el aquí que la silencia
que sea la referencia
este efecto no estaríamos
se plane esto fuera
y lo que tendríamos aquí que sería
un
play
o
handle play
o que esto de aquí
y petarlo
podría
por aquí
más que hacer un play
por ahora pero luego lo
lo cambio
lo vamos a hacer con un objeto
entonces veremos por qué
porque esto puede ser bastante problemático
si no utilizamos use callbacks y todo este tipo de cosas
yo creo que esto seguramente tiene algún loop infinito
vamos
espero conseguirlo
sacarlo
esta vez
la primera vez se ejecuta
el vídeo
vídeo
hay que cambiar
bueno
vídeo punto current
vale
otro lado
punto
current
y ahora veo
vídeo
current
cabrón
se queda siempre
grande
vídeo
objeto
infinito
pero es verdad que aquí
cuando se cambia el estado
de plane
pues nada se crea este handle play
a ver no es muy grave
muy grave
pillamos
por aquí
petado en un momento
no he entendido por qué es blanco la
cuando está así
no lo puedo volver a dar
tin tin tin
y eso es culpa de este
voy a pasar para atrás un momento el use callback
que no creo que tenga que ver pero bueno
no sé por qué hay un momento
no sé si es que de verdad hay un
lo voy a poner por aquí
oh que vienen los tacos
los tacos
los tacos
los tacos
use intersection video player
los tacos
que nervios
ahora vengo
ahora vengo
a ver por aquí
los tacos
y
todos
un
chico
yo
Vamos a ver
Lo que ha venido por aquí
Sacos más complicados
¿Qué más hay por aquí?
Unas flautas
Come un poquito
¿Quieres?
No
Uy, cae
Bueno, quédate aquí un momento
Que tengo que ir a por la...
¡Dios!
¡Madre mía!
¡Qué buena pinta tiene esto!
¡Uf!
He gastado mis puntos
Sí, wifodos
Creo que tenía razón
Valió la pena, ¿eh?
Hostia, me voy a poner aquí
Pero como un cochino
Muy exagerado
¡Oh, mamá!
¡Oh!
A ver
Gracias con...
¡Ah, Dios, Dios!
¿Cómo poner esto aquí?
Globo de Liberu
He llamado a la empresa
O sea, he utilizado la empresa
Por 15 euros
Sí, sí, está de puta
A ver
Sé que en México
Yo he estado en México
Y sé que en México
Esto costaría...
Menos...
Así que...
Trae el rollo de que no va a ocurrir
Tienes toda la razón
A ver cómo hago esto
Vigila
¿Se han portado bien?
¿Sí?
¡Ay!
Hostia
No te suicides
¡Hala!
¡Oh!
¡Se la ha comido!
¿Qué c***o?
Me ha dejado...
Me ha comido...
La flauta...
Se la ha comido...
Y no me habéis dicho nada
Mira
La ha dejado...
¿Qué c***o?
Esto es lo que me va a...
¿Eh?
¿Sabes qué?
Bueno
No me vuelvo a...
No dejo al...
Vamos
¡Es la vida!
Ya fue
Así voló
¡Ay!
En fin
Pues no sé
Que no, que está bien
Está bien
Grar le gusta hacer estas cosas
¿Vale?
Le gustan estas cosas
¿Cómo?
¿Me puedes explicar bien el use callback?
O sea, estoy salivando
Sabel
Estoy como salivando
Pero te voy a intentar explicar el use callback
Mientras salivo
¿Vale?
¡Ay!
Voy a...
Voy a tragar saliva
Porque...
¡Ay!
¡Qué bueno!
Ya explico
Y como vale
¡Hostia!
De verdad
Las papilas estativas
Se han puesto ahí como...
¡Rrr!
Hago un use talk en sí
Ahora cambio el esto
Chatting
Charlando
Y viendo vídeos de programación
Mientras...
No
Vale
¿Vale?
El use callback es que se guarda una copia de ese método
Y dependiendo, básicamente
Y eso que todavía no he bebido
Y ya tengo aquí
El handle play
Cada vez que se renderiza
Bueno, cada vez que se vuelva a ejecutar este hook
Vuelve a crear este método de aquí
Entonces vuelve a recrear
Porque a ver
Yo si pongo aquí un console.log
Mira, lo va a ser muy claro
Fíjate en este use intersection video player
Voy a guardar los cambios
Voy a ir aquí a mi proyecto
Fíjate cuántas veces se está ejecutando
Este use intersection video player
¿Vale?
Dos, cuatro, seis, ocho
O sea
Se va ejecutando cada vez
¿Qué pasa?
O sea, que cada vez cuta
Tú cada vez que ves aquí un console.log
Se está ejecutando este const handle play
O sea, se está recreando una vez más este método
Y claro, no hay problema
Para que te des cuenta
Mira, handle play
¿Vale?
Yo lo voy a hacer aquí
Esto suele ser bastante evidente
Porque tú pones previous handle play
Lo pongo aquí
Y por ahora es null
¿Vale?
Previous handle play
Yo voy a hacer
Previous handle play
Igual handle play
O sea
Voy a guardar función en una variable
Y lo que vamos a hacer aquí
Es
Antes
Vamos a ver si el previous handle play
Es igual
Handle play
¿Vale?
Lo que
A ver si el previous handle play
No sé qué
Es normal que la primera vez
Esto pues sea true
Porque el previous handle play
Es null
¿No?
Pero las siguientes veces
Esto debería
La siguiente vez
Esto debería ser true
Porque si he guardado
Previous handle play
Y esto no se vuelve
La misma función
Pues vamos a ver
Qué pasa aquí
Fíjate, ¿no?
Si está saliendo false
O sea
La función
De antes
Cada vez que se está ejecutando esto
Se está creando una nueva función
Y esto siempre es false
Para que esto sea true
Deberíamos utilizar use callback
¿No?
El use callback
Lo que hace es
Vale
Esta función de aquí
Solo la voy a volver a crear
Cuando la dependencia
Que pongas aquí
O las dependencias
Que listes aquí
Van a cambiar
Así que ponemos este use callback
Lo ponemos aquí
¿Vale?
Es decir
Que esta función
La vamos a cambiar
Cada vez que el video.current
Cambie
¿Vale?
El valor de video.current
Cambie
Ahora, si volvemos aquí
Bueno, es que este es el tema
Que no sé por qué
Me sale esto
Bueno
Me estoy quitando por algo
Que desconozco
Y un...
Pero...
Si lo pongo
Porque igual es que está cambiando
Todo el rato
El video.current
Joder
Pues nada más
Es que no sé por qué me ha...
Es que el cdn este
Ay
Me está fallando con 404
410
Igual es que se ha dado cuenta
Que no he parado de petar
Ahora me ha dejado esto
Bueno
Debería pasar
Que el handle play
Siempre
Siempre se quede el mismo
O sea
Que solo se cree
Esta función
Cuando...
Cuando cambian estas dependencias
Lo que haces con esto
Es que si el handle play
Por lo que sé aquí
Este handle play
Utilizarse en el useEffect
Como una dependencia
Entonces no generaría
Cada vez esa función
Y por lo tanto sería
Te podrías evitar
Loops infinitos
Y además
Pues se supone
Que es un poco más otro
Pero mi recomendación
Es que este tipo de cosas
De useCallback
Solo utilices
Cuando realmente las necesites
Cuando realmente tengas
Un problema de performance
O realmente
Sea un problema
Que lo tengas
Como una dependencia
Del efecto
Y entonces te haga
Un loop infinito
¿Vale?
No sé por qué
Hay un momento
Que me pasa por aquí
Este
Options unexpected
Me parece
Refresh
¿Sabes?
Que cuando hago cambios
Aquí
Y mira
Vamos a tener que cambiar
El vídeo de TikTok
Así que
Estaréis contentos
¿Vale?
Hustle por tesoro
Vale
Vale
Entonces
Me habéis dicho
Que estoy salivando aquí
No puede hacer
En vez de un useCallback
Hysteria
Porque son cosas distintas
O sea
El useEffect
O sea
Lo que estamos haciendo
Con el useCallback
Es crear
Solo la función
Cuando es necesario
El useEffect
Sería para ejecutar efectos
O ejecutar código arbitrario
Es como diferente
Es una especie
De singleton
Bueno
Lo puedes entender
Como sería un singleton
Pero que solo cambiaría
Cada vez que tú
En la dependencia
Cambias
¿Vale?
¿En qué caso usaría
Pense?
Pues son los casos
Que tienen sentido
No se puede utilizar
En cualquier caso
Por ejemplo
Si tienes un react.lazy
O sea
Que si tienes código
Que es lazyload
Y ya está
Podría haberlo explicado
No pasa nada
Hombre
No pasa nada
Y claro
Puedes utilizar
Un useMemo
Puedes utilizar
Un useMemo
No tiene sentido
El useMemo
Sería más bien
Para valores calculados
Lo puedes utilizar
Al final
El useCallback
Sería como
Un envolt
UseMemo
¿Vale?
Vale
Vamos a ver
Yo que sé
¿Qué podemos mirar
En YouTube
Mientras?
Ser mejor persona
Hostia
Esto suena bien
Ser
Ser mejor persona
¿Qué?
Vemos esto
Con los spaces
Me gustan
Son en inglés
Lo malo
Performance
¿Tenéis algún vídeo
Al que quieres que reaccione?
Decidme un vídeo
Va
Que queréis que reaccione
Luisito comunica
Luisito comunica
¿Qué es eso?
Ponte un sit
Verde
Vale
Si te ríes
Pierdes
Ni dos
Joder
Si te ríes
Joder
Cabrones
Es difícil
O sea
Yo comiendo
Venga va
Lo intento
Va
Si te ríes
Pierdes
Es muy difícil
Se llama
La cumbia
Del tilín
Primo
Uno
Un
Dos
Tres
Cuatro
Reaccionando
A tu primer vídeo
Venga
Me voy a dejar
Me voy a partir
La caja
Mientras estoy aquí
Comiendo
Ya
Vamos a ver
El prío
Lo que hice
Bueno
Pero es que
Estos
Son muy difícil
A ver
Vamos a
Bajarle
Bastante
A esto
Primer vídeo
¿Qué es?
¿Y para qué sirve
BoxSizing
The Border Box?
Hostia
Vaya voz
Que tengo
Como bajito
Esta es la propiedad
Vamos a crear
Un elemento
Div
Que será una caja
Ahora vamos a estilarlo
Usando la clase
Box
Para que podamos
Ver visualmente
La caja
Especificamos
Unas dimensiones
Y le ponemos
Un color de fondo
Mide 250 píxeles
De ancho y alto
Pero si añadimos
Un borde de xpxels
Veréis que nuestra caja
Se hace hablar
Si le pones una caja
De xpxels
¿Por qué me pasa eso?
Un padding
Vuelve a crecer
Y pasa a ser
De 290 píxels
Pero está bien explicado
Pero qué locura es esta
Pero qué locura es esta
Vais a saber
Cuánto ocupa vuestra caja
Exactamente
¿Por qué?
El modelo de caja
Que usa el motor
De xps
Por defecto
Para calcular
Pero está bien explicado
El chico sabe
De lo que habla
Pero porque si
Calcula su ancho y alto
Estoy susurrando a alguien
Pues usando el valor
Borderbox
Que incluye el padding
Y el border
Para calcular
Las dimensiones
De los elementos
Normalmente se usa
Este truco del almendruco
Para que todos
Bueno, me hace gracia y todo
Pero muy bien
No me ha acordado
Que hacía estas cosas
Dale like
Si tienes alguna petición
Deja un comentario
Gracias por darme un minuto
Qué bonito
Gracias por darme un minuto
Qué bonito
Qué chico
Y los códigos
Vamos a enseñar
A ver este
Hola
En un minuto
Aquí ya me animo
Hola, hola
¿Qué pasa?
Venga
No me encuentro bien
Señor Stark
¿Cómo pica esto?
Me cago en la hostia
Para que tome como centro
Otra coordenada
Podemos hacer exactamente
Lo mismo con la forma
De la elipse
Pasándole dos radios diferentes
Vamos a cambiar
El radio vertical
Para no verle la papada
Al calamar
El calamar es el Thanos
La elipse empieza
En el centro por defecto
Pero podríamos modificarlo
Para que parta
Desde otra posición
Mi forma favorita
Y la más creativa
Es la del polígono
Ya que te permite
Indicar los diferentes vértices
Para así crear un área
Los vértices son puntos
X e Y
Y se separan con coma
El punto 00
Yo no me acordaba de esto
De arriba a la izquierda
Del elemento
Así que si ponemos
Estos tres vértices
¡Tachán!
Hacemos un triángulo
Nada más
Que sepas
Que en caso
Dios, he hecho un triángulo
Por ejemplo
Hago así
Que ping, que pan, que pum
Y tan fácil como
Chasquear los
Hostia, que bien está eso
El soporte
Está un poco como Hulk
Un poco verdecillo
Pero ya se puede ir probando
En algunos navegadores
¿Os animáis a hacer
Vuestros propios ejemplos?
Pues dadle caña
Si te ha gustado el vídeo
Dale like
Y compártelo con tus amigos
Hasta el próximo
¿Qué es eso?
¿Qué es eso?
Hola, hola
Y no me acordaba de caña
Por cada like y retuit
Este hombre recibe una donación
Para su trasplante de corazón
Piensa en él
Compártelo
Pero
Yo no imaginaba de esto
Ay, Dios mío
Y esto es del 2018
Bueno, hace tres años y medio
Pues tampoco hace tanto
Pero bueno
Me gusta esta sección
A ver
Doctor Mario
Oye, en JavaScript tiene bichos
La precedencia de operadores
Con sorpresa en esperada
Imaginemos que queremos mostrar
Por consola
La siguiente operación
Como veis
El resultado es 7
Quizás estabais tentados
A pensar que era 9
Pero si sabes un poquito
De matemáticas
Ya sabes que hay un conjunto
De reglas
Que te indican
En qué orden se realizan
Las operaciones aritméticas
Muy bien
Y donde se determina
Que la multiplicación
Y la división
Se resuelven antes
Que la suma y la resta
JavaScript también tiene
Un orden de evaluación
Sobre sus operadores
Como muestra en esta tabla
De MDN
Donde los paréntesis
Es el de mayor precedencia
Seguido por el incremento
La multiplicación
Suma y las relaciones
Y ahora que sabemos esto
Podríamos volver al código
Y hacer que se resuelva
Primero la suma
Envolviéndolo con un paréntesis
Qué bueno está esto
Dios mío
Pero no he venido a hablaros de esto
Aunque me parece muy interesante
No, pues llevas un minuto
Hablando de esto
Imaginemos que queremos ver
Si uno es menor que dos
Y menor que tres
Mentira
Como veis en consola
Esto nos da true
¿Por qué?
Y si leemos de izquierda a derecha
Tiene todo el sentido
Y si te dijera
Que esto está mal
Vamos a probar
A ver si tres
Es menor que dos
Y menor que uno
También pone true
JavaScript está roto
No
Yo te explico
El caso es que
La precedencia de operadores
Y su evaluación
Te está jugando una mala pasada
Lo que está haciendo primero
Es evaluar si tres
Es menor que dos
Que en este caso
Es false
Como podemos comprobar
En la consola
Así que está mirando
Si false
Es menor a uno
Ahora está forzando
La conversión de false
A un número
Y al hacerlo
Lo convierte a cero
Por lo que está mirando
Si cero
Es menor a uno
Que como os podéis imaginar
Es true
Y de ahí
Toda la explicación
De hecho
En el anterior
Que os he dicho
Que estaba mal
Pasa exactamente lo mismo
Uno es menor a dos
Por lo tanto es true
Convierte el true
A un number
Y compara si uno
Es menor a tres
Que evalúa a true
Así que el hecho
Que te dé true
Es simplemente
Una casualidad
Por si os interesa
La forma correcta
De hacer este tipo
De comparación
Sería usar ampersand
De forma que separamos
Ambas evaluaciones
Y comprobamos
Si ambas operaciones
Son ciertas
Y esta es la primera entrega
Uy la primera entrega
Y la última
No hice nunca más
Esta mierda
Es increíble
O sea
Estas flautas
Esa que hablabais antes
Buf
Está esto increíble
O sea
Muchas gracias
A todos los que
He hablado
De comer mexicano
Bueno pero
Que pasa aquí
Todo de un minuto
Un minuto
Mira
Scroll snap
Que bueno
Hostia puta
Pero quien eres tu
Quien eres tu
Está aquí grar
Está aquí grar
Está aquí grar
Ya
O sea
Ya estaba
Es su primera aparición
Es su primera aparición
Y grande
Grande
Para crear un slider
En nuestras páginas web
Teníamos que recurrir
A librería
Pero porque me veo
Más viejo
Antes que ahora
Que me pasa
Mira pero si parece
Que
Que
Estaba un hombre
O algo
Ya lo has escrito
Pero con las nuevas propiedades
De CSS
Yo creo que era el peinado
Este peinado
No viene
Hombre si
La cámara
La luz
Pero no se
Me veo más jodido
Yo me veo mejor ahora
Creo
Es verdad
Esto no va a ser más necesario
Vamos a ver
Cómo crear un slider
Con solo CSS
Hostia un slider
Ojo
Vamos ya
Este es el slider
Que vamos a crear
Con unas imágenes
De osos panda
El slider
Se podrá navegar
Utilizando el scroll
De un trackpad
Y de forma táctil
Y como veis
Tiene una experiencia
Totalmente nativa
Pero antes
Os explicaba
Que siempre se han necesitado
Esta basada
Podemos
Ya os
Podemos
Ah pero ya no salgo
Enfermo
A ver al final
Ah no digo nada
O sea no pago más
Bueno
A mi
Por el snap
Es que esto
Eh
Que CSS
Bonita la portadilla
Esa que he hecho ahí
Otra vez
Mirad
Ahí me veo mejor
Esta es la web
De fotocasa
Ojo
Yo haciendo publicidad
A la web
De fotocasa
Sin que aguanten
Nuestro código
Y mejorar
Notista
Te tengo que dejar
Que vaya bien
Gracias
El propio react
Espera
Joder
Café
Mira esta es una idea
Que tenía
Y al final
Tomando café
El café es gratis
Aquí en
UICU
El Prat
Ahí está
O sea que puedes venir
Cuando quieras
Mamá
Este es un amigo mío
Que es un crack
El tío
No no
Me va a dar
El presupuesto
Para café
Joder
Qué bueno
Esta
Estamos haciendo
Un montón de cosas
Si tengo que destacar algo
Es que estamos utilizando
Ahora react hooks
En producción
Ojo react hooks
En producción
Increíble
Midu
Muy bien
Nada más salir
Ya venga
Para adentro
Bueno
Hemos aprendido
A utilizarlos
Y tampoco es que
Lo hemos refactorizado
Todo
Tenemos algunos componentes
Que lo utilizan
Y es que bueno
Para que no sepamos
Transpirar las clases
No es que tenga un coste
De que tarde más
Ya está
Ya me he cansado
De mi dueste
Un poco pesado el chaval
Vamos a ver
Si te ríes pierdes
Comiendo
Nivel
Dios
Lo que pasa es que estoy cenando
Entonces estamos aquí
En descanso
Súbele
Pues me va a dejar
Sordo esto
Toma
Está detrás tuyo
Eso está preparado
Hombre
Como no lo vas a ver
Dios
Por favor
Venga ya
Toma
Javascript y React
Arturito
Oye que este hombre murió
Joder
Salí a pasear
Y se trajo una vaca
Para comerse la segura
Tampoco es tan difícil
No reísse de esto
Poco flojo
Poco flojo
Nivel
Esto de nivel muy difícil
Mentira
Mentira
Pero que me haga gracia
Voy a intentar
Aguantarme
200 euros
Le voy a dar
Con el primero
Que me ha
He hecho un
Inception
Ibai
A ver
Que me habéis preparado
Bien
Venga
Chicos
Si te ríes tú
Yo no pago nada
Cabrón
Que tú desee la pasta
¿Qué pasao?
No he entendido
Me hace más gracia
El tío intentándose aguantar la risa
Me hace más gracia
La cara de Ibai
Habéis ido a por mi punto débil
Habéis ido a por mi punto débil
Pero las paga
¿Los paga de verdad?
¡Puta madre!
¿En qué año estamos?
¿En el 2020?
Estamos en donde está el coronavirus
O los zombies
¿Cómo que los zombies, amigo?
Puta gracia
Es un normal
Es un normal
Es un normal
Payaso
Joder
Yo perdería
De todas estas
O sea
Yo perdería demasiado
Me estoy intentando aguantar
Por comer
Claro
Nos vamos a luchar
Porque en el chino
Yo me compro
Una puta chuche
Chuche
¿Patatas?
Me hace más gracia el Ibai
Que la
Unas garrafatas
Mucha calle
Mucha calle Reven
¿Cómo lo hace Ibai?
O sea
Es que el tío está así como tenso
A ver
Voy a intentar hacer un Ibai
No, no
Ya lo hubiera apagado
Las pibizas
Ay, qué asco
Los pibardos
Refacheros
Con tremenda verga
¿Cómo me lo comía?
Me cago en la puta, tío
Ahora tengo un hambre
Pero Ibai
El tío
No se ríe de nada
Vale
Cordero
Casero
Viva Galicia
¿Y esto cómo lo pago?
Tira agua
Tira agua
Pero no va a prender todo
Tira agua
Agua
Agua
No puede ser peor
¿Esta agua?
Agua no le pasa nada, tío
Va a salir una explosión ahí
Que
No, ¿ves?
Cago en Dios
Todos muertos
Pero cómo hace gracia eso
Murieron tres personas ahí por lo menos
Acabaron la corrección
Y me diga qué animal es este
Miren
Muerto
Ahora le dan el ojo
Sangre
Quita el rotón
Ya está, lo pongo grande
Para que lo veáis
Para que lo veáis
Eso me ha hecho gracia
Pero por qué se fuera a rezar
La bomba esa
Que explotó en Líbano, ¿no?
Mamá
No sé
Puta
Vamos a jugar
Vamos a jugar
Vamos a jugar
Pero él se ríe más que él, el cabrón
Pero el tío la ha parado
Eso es trampa
Ahí se está riendo
No
Hostia, que revienta
Y aquí le da los 200 euros
O sea, a la persona que le ha hecho reír
Y no quiero decirlo
Hostia, vaya tela
Es que el texto
El texto
Bueno, flauta, va
Es que ya llevaba aguantándome como 4 o 5, tío
No podía más, tío
Pues calláis ya la puta bolquita
Que me estoy enterando de cosas
Y no quiero decirlo
A ver, pero
Me estás partiendo con este
El ganador, por favor
Julito, has ganado
Este se cales
Este ya lo había visto
Ah, ya se puede reír de todos
¿Por qué no oigo nada?
A ver
I used to
No oigo nada
¿Por qué leches no oigo nada, tío?
En el micrófono
Tío, no me puedo reír de esto
Tío, de verdad
Pero increíble
Está riendo solo
Pero a ver, está desatado
¿Cómo se nota?
Que a Ibai le sobra la pasta, joder
Pero si se ríen todos
Pero bueno, lo pierde este hombre
Está tirando de ser streamer
Qué hijo de la gran puta
A ver, voy a poner esto en otro borrón
¿Por qué dices?
¿Por qué dices?
¿Por qué la era?
Ah, vale
Ya ganó el primero
Los siguientes no cuentan
Vale, vale
Solo le da el que más gracia le da
Vale, vale
Porque digo, joder
Porque digo, joder
Se va a...
Brasil es un país
Que hay que...
Se habla poco de Brasil
Y aquí se agorpan los primeros curiosos
Para saber qué es lo que ha ocurrido
¿Lleva usted aquí toda la mañana?
¿Todo el día?
Aquí toda la mañana
A mí me han dicho
Que está ahí mi tía encerrada
Y digo, voy a ir a ver...
¿Su tía?
Sí, mi tía
Lo hago mi tío por la tele
Y digo, uff
¿Es cliente de este banco?
Sí
No, es la limpiadora
No es el cliente
Ah, es la limpiadora del banco
Sí, sí, sí
¿Y usted tiene constancia de que está ahí?
¿Ha podido hablar con ella?
No, no, no
No he podido hablar siquiera con ella
Yo estaba esperando
Que me pusiera de comer
Y no me he puesto
Todavía
¿Esto está asustado?
¿Espera que le puede pasar algo?
Sí, sí, sí
¿Qué? ¿Me quedo sin comer?
Este es arriba, ¿no?
¿Qué del otro?
¿En silencio?
¿Qué pasa que...?
¿Ves?
Ah, ah
Bueno, la cámara quería
Al suelo
¡Sácame foto!
¡Qué pilotoza es el piso!
¿Cómo ha sido eso?
¡Sácame foto!
¡Sácame foto!
Que me cago quemando
Quería en la cámara
¡Sácame foto!
¡Qué palutuda!
Me encanta la cara del hombre
Es que los argentinos son los mejores, tío
Los argentinos de verdad
Son los mejores, tío
No he entendido el chiste
Nada
O sea, nada
Bueno, ahí ya creo que se detalla
Bueno, esto está muy bueno
Pero voy a ver ya
Tenemos todavía tiempo
Bueno, ¿cómo estáis?
¿Os ha gustado el...
Revisando vídeos de Ibai?
¿Qué?
¿O queréis ver vídeos de Ibai?
Que si queréis ver vídeos de Ibai
Yo sigo queriendo, eh
Hoy adiviné Tom González
Lemón González
¿Has visto?
Vídeo a juicio
Podemos hacer tu vídeo a juicio también
Joder
Esto está increíble
Está increíblemente bueno
A ver, tenía que arreglar esto
Porque aquí funciona bien
Pero...
Ah
A ver si que funciona bien
¿Por qué?
A lo mejor era el...
El...
El...
¿Qué le pasa?
Joder, cómo está la gente
¿Cómo está la gente?
Mira a este cabrón ahí
Con su Ibai
Xiaomi nuevo
Qué bien, ¿no?
Xiaomi y todos
A ver
Más la dependencia
Pero bueno
Porque no había puesto a lo mejor
Lo del estado
Y claro, si el estado es parte
De la dependencia
Lo curón, ¿no?
La dependencia del callback
Últimamente
J.Rafael
Mira tu setup a juicio
¡Hostia, el perro!
Cómo me gusta esa, ¿eh?
Me gusta esa idea
Me cago en Ross
Sois la clave
Joder, es que os quiero, tío
Os quiero
Eh...
Canal de texto
Me encanta
También es que
Claro, ahora estoy
La sangre la tengo
En el estómago
Y ahora a ver las neuronas
Lo que hacen, ¿eh?
Verás
Si no me cuesta
Verás
Bueno, a ver
Camello
Cam
Vale
Pero tiene que ser vuestro
Pero bueno
Está bien, está bien
Energía de gestión
De estas flautas
Que madre mía
Vale
Venga
Me voy a copiar esto
Me voy a ir a mi
Supabase
Supabase
Upload file
Supabase
Supabase
Que entiendo que tampoco
Tiene que ser muy difícil
Eh...
Midtalk
Vamos con la tabla
Table editor
Claro que queda clavado
Album cover
Source
Damos
Este
Esto así
Esto funciona
Lo que necesitamos ahora
Se va a ver
Esta parte de aquí
Esta parte de aquí
Sobre todo para subir vídeo
Deja
Escriban tu nombre
En algún papel o así
Ah, muy bien
El perro
Joder
Madre mía
Muy bien
Me he ido en cuenta
En la foto
Tiene que aparecer
Algo
De mi dude
A ver si no
Lo ha robado
Por ahí
El
Deame
Pero
Pero está negro
¿Ha subido el código en guija?
Poste, hace rato
Que no subo nada
Vamos a subir
Vale
Todo este
Ah, ya lo he borrado
Todos estos vídeos
Vale
Supabase
Venga
Create
Supabase
Connection
And services
Hook
To hand
Your player
And intersections
Precio
Yo también te aprecio
Hey Diana
¿Qué tal?
Pues bien, bien, bien
O sea, ha sido brutal
Hemos estado aquí
Con el lo de TikTok
Este no es
Este es el de verdad
Este es el nuestro
Este sí que es el nuestro
A ver
Ya son las que están en el backend
No está mal
Porque hemos hecho
El tema de intersection
Que ya se
Se pone automáticamente en play
Se para
Estoy bastante contado
Para
Teniendo en cuenta
Que hemos estado hablando
Un montón
Que he estado accionando
Y eso
Y ahora creo que
Ahora que ya hemos solucionado
El tema de intersection
Vamos a ponernos
Con el tema
De subir un vídeo
Vamos a intentar crear vídeos
Y eso le puede dar un poco de vidilla
Y además
Pues igual me podéis pasar
Si queréis en Discord
Vídeos que sean 16, 9
Oye, por cierto
Qué grande
Que estáis poniendo aquí
Un montón ya de
De setups
Sería lo máximo
Pues haremos un directo
Oye, la idea es brutal
Me ha encantado el perrillo
Me ha encantado
Vale
Use
Me voy a
Vale
Vamos a ir un poco a saco
Porque
Make
Intersection
Observer
Work
And use
Subbase
No sé por qué no sale
Pero ahí va
Onlog
Push
Y
Me he dejado un console
Un console log
Y este
Que ya no tiene mucho sentido
Fuera esto
Preview
Refact
Root
Y darlo de los sentidos
Y solo tengo un paquete
Mi talk
Vamos con el storage
Vamos a intentar
Si os parece
Vamos a intentar subir vídeos
Y que estén en la base de datos
No lo he hecho nunca
Pero bueno
Hay que empezar por algún lado
Storage
Crea un store
And serve
Any tal content
Yo quiero vídeos
Eso es lo que quiero
Make your buckets
Public
Depending on your security preference
Create a new bucket
Name of the bucket
Videos
Buckets
No ser renombrados
Una vez creados
Vale
Make bucket public
Por supuesto
Entonces os pueden leer
Los objetos públicos
Sin ninguna autorización
RLS
Polity
Required
Other operations
Vale
No pasa nada
Me parece correcto
Venga
Vale
O sea
¿Por qué no me metes aquí dentro?
Vale
Me dice
Drop your
No creo que tenga mucho sentido
Supabase
Up and create record table
Porque me imagino que tendremos que
Esto es insertar
Leer
Load storage
Vale
Es que subir
Pero yo lo que quiero luego
Es crear
A blob file
Pensaba que habría una forma fácil
De crear
¿Sabes?
De añadir un bucket
Bueno
Lo que puedo hacer es
Una vez que se suba
Básicamente
Entiendo que en data
Nos devuelve esto
Pensaba que podríamos hacerlo automático
Me imagino que podríamos
Si creamos algún tipo de trigger
En el tema este
Pero bueno
Como no tengo mi puñetera idea
Hay que cambiar el título
Cierro
Gracias
Con desarrollo
Vale
Ya no estamos charlando
Estamos de software
And development
Venga
Vale
Entonces
Quitamos esto
Quitamos esto
Servicios
Index
Supabase
Sport
Const
Load
Video
Sync
Esto por aquí
Vale
Esto parece bastante fácil
Supabase
Event
Target
Esto bueno
Más que event
Target
Vamos a pasar aquí
El file
O
Video
File
Que sería esto
Video
Video file
Public
Esto sería
Videos
Voy a hacer
Voy a descargar
Un vídeo
Mío
Porque así
Sé que no tengo
Programas de copyright
Y de
No
Pero no me deja
Entrar
En mi
Vale
Este mismo
Me lo voy a descargar
Voy a volver a subir
¿Qué os parece?
Siete métodos de
En un minuto
Vale
En un minuto
Muy bien
Descargar
Pido
Cabrones
Ostras
Que rata
Puede estar
Puea
Siete métodos de array
Wow
Eso me ha sorprendido
Ah
Que digo
¿Has pasado eso?
Orio
Se lo ha descargado
Son tres megas
Perfecto
Lo que queremos
Vamos
Vamos a necesitar
Algún tipo de rutas
También
En nuestra aplicación
Vamos a instalar
Good
Venga
Ruta S
Router
Github
Para tener rutas
En nuestra aplicación
Por ahora
Portal router
Root
Path
Esto va a ser
Bueno
La home
Vamos a poner que la home
Sea esto
Y vamos a
Root
Path
Abload
Abload
Bajo
1000
Upload
Ok
Debe bien
No sé
Que es esta
Porque salió una raya
Ahí
Era un poco raro
Porque está
En
Esta
Vamos a poner aquí
Las páginas
X
Export
Default
Function
Upload
Return
Deep
Hmm
Upload
Vale
Creamos el upload
Aquí
Vamos a ponerle
Index
.jx
Para el tema
De los estilos
Tato
Module
.css
Ehm
Upload
Background
Phone size
48 píxeles
Phone
Weight
Vamos a poner 900
Aunque sé que no
No va a colar
Class name
Styles
.upload
Esto
TikTok
Vídeo
Eso es
Cargar
Vídeo
Por ahora
Aquí
Me aplicará
Esto
Tendríamos que arreglarlo
Cuando iniciamos sesión
Y todo esto
Venga
Formulario
Style
Class name
Joder
Con style
Style
Styles
Form
Vamos a tener
Label
Leyenda
Input
Type
Text
Playholder
No hay
Playholder
Que lo interesante
De hecho
Nada va a ser más complicado
Porque la portada
Lo pilla
De detectar el
Vídeo
O sea la portada
Vamos a pasar de esto
Quien puede ver
Programar
No puedan
Publicar
Y descartar
Vamos a poner eso
Y ya está
De hecho
Más fácil
Al menos
Empezamos con esto
Y ahora luego
Ya iremos añadiendo
Estilos
Desde los
Styles
Punto
Module
CSS
Este video
Se publicará
El perfil
No sé qué
Se cuánto
Esto
Title
Final
Si una vez
Que ya
Playflex
Vamos a poner
El React
Dropzone
Que debe ser algo parecido
A lo que he estado
Utilizando aquí
No sé qué será
Esto que he estado aquí
Vamos a verlo
Igual lo pone
No
Operation
A veces se le cuela
Este tipo de
De cosas
Por ahora
Vamos a poner
Este para
El input
File
Acepta
MP4
Upload
Button
Vale
Vamos a nuestra aplicación
No
He podido importar
Source
Vale
Porque lo he cambiado
Cerramos aquí
Aquí
Payput
Index.js
Y en el
Index
Ahora lo arreglamos
También
Cuando esté hecho
Vale
Cargar vídeo
Cargar vídeo
Lo voy a poner poquito
Ahora lo arreglaremos
Un poco más
Padding
Si
Seres
High
Incluso
Podríamos ponerlo
Vale
Esto es
De arriba
Y level
Vale
Vamos a hacer
Flex
Direction
Column
Vale
Bueno
Falta que ponga
Lo otro
¿Qué podemos hacer?
Uno tenga
Separación
¿No?
Un poquito
La leyenda
La leyenda
Del
Form
Label
16
¿Por qué estamos
Escuchando una peli porno?
O sea
¿Nadie me está diciendo nada?
Es cosa mía
Oh yeah
Sí
Acércate
Sí
Vamos a hacer
TikTok
Juntos
Oh nena
Sí
Bebé
Ah mira
Ahora ya ha cambiado
Coño
Es que de repente
Yo estoy aquí
Tal
Ay Dios mío
A ver
A ver
Voy a buscar
Star Wars
Que me ha parecido
Increíble
La canción antes
Aquí ya tenemos
Ojo
Esta
Esta
¿Qué llevaban esos tacos?
Sí
Yo soy así
Pero tenía aguacate
Si estuviera aquí
Mi amigo Danny Dev
Estaría flipando
Con esta canción
Estaría
Dios mío
Hostia
Sergio
Gracias por regalar
Una suscripción
De la comunidad
Nivel 1
Gracias Disorder
También por
Renovar tu suscripción
Jeff18
Henry Jr
Y a todos
Muchas gracias
A todos los que os hayáis
Seguido
Suscribiendo
Un repaso
De la tecnología
Que estás usando
Pues amigos
Estamos usando
RIA
Que estamos utilizando
CSS Modules
Estamos utilizando
Superbase
Y la verdad
Es que poca cosa más
Estamos siendo bastante
Comedidos
Sobre las cosas
Que vamos utilizando
Eso es lo que estamos
Haciendo
Una locura
De hoy
Me do got
1300 reptilianos
Por vos
Muchas gracias
A todos los que me estáis viendo
No os perdáis
Estos streams
Porque aparte de
Perreo
Sucio
Hacemos otras cosas
Hacemos
Sobre todo
Desarrollo web
Eso hacemos
Y hacemos mucho
Muy bien
Y react drop zone
No es la que estoy buscando
¿Cuál es?
React drop file
No drop zone
No es
Me cago en un rost
Como me vuelve a salir
El drop zone
Le doy un bocado en el ojo
File drop
Hostia
Alguien se sabe
Una librería
A mi me suena una
Y ahora no la encuentro
Y ahora no la encuentro
File drop
Puede ser
Esta si que tiene buena pinta
Vamos a probar con esta
Hace tiempo que no se la actualiza
A ver
Drop
File
React
Component
Es una pena
No se puede utilizar
Con elements
Drag and drop
File upload
En React
Es que ahora que estoy pensando
Esto es bastante fácil
En realidad
En React
O sea
A lo mejor no es ni siquiera una
¿Qué estoy pensando?
¿Por qué no?
React drop zone
No porque
Me sonaba otra
Mejor
Pero si
Si no la utilizamos
Esta que también está bastante bien
Solo que recordaba una
Que es que
React DND
Puede ser React DND
Hostia
Creo que es esta
Creo que es esta
React
Testing
No me acuerdo
No me acuerdo
Me parece que era esta
Pero
A ver ejemplos
Ejemplos que pueda haber
No ejemplos que me hagas instalar
Mira
Pues se la ha ganado
El
Drop zone
¿Vale?
Vamos a utilizar
Direct drop zone
Y ya está
Drag
Files
React
Sí
Con ese nombre
Que puede fallar
¿No?
React drop files
No sea esta
Creo que es este
Sí
Creo que sí
Creo que sí
No pero este
Pero se puede customizar
Por ejemplo este
Porque este no parece
Que se pueda
Customizar
Clases
Drink with clases
Wishes to add
React beautiful
DND
Ese
Vale
Ahora
Ahora estamos hablando
Amigos
Ahora
Estamos hablando
Este
Este es super guay
El drop zone
Este está bastante chulo
Y el beautiful
DND
DND
Este lo rollo
Pero este
El de drop zone
Es el que
Files
Made easy
Este me gusta
Este
Este es que está
Que raro
Un pack
Y tenga un botón
Download
Este no tiene
No parece
Que tenga
O sea
Parece muy vanilla
¿No?
Web pack
Drop zone
Que al final
Nos vamos a quedar
Con el primero
Que era
Esta
Sí
Va a ser este
Se ve fácil
Sencillo
Y parece que
Me parece que
He visto antes
En Github
Github
He visto que
Está bastante utilizado
Parece que
Parece que se actualiza
Así que
Vamos a darle a este
Drop zone
Vale
Use
Dobs
Puedes utilizar
El hook
No
Is drag active
Get input
Props
Get drop
Props
Use
Vale
O
Se puede utilizar
Drop zone
El on drop
Este
Get input
Drops
Vale
Si está activo
Get drop
Drops
Vale
Vale
Vale
Use drop
Use drop zone
Hostia que buena esta canción
Perdón de sonic
Dios mío
Vale
Get input drops
Esto
Props
Esto por aquí
Esto por aquí
Entiendo que
Get input
Props
Este
Se podría customizar
Con algo
Accept
Custom
Refkey
Get root
Get root
Props
Drop zone
Get input
Props
Set the specific number of files
Vale
El use drop zone
Este es el que hay que pasarle a las opciones
Accept
Accept
Accepted files
Esto lo que queremos son
Esto
Aceptamos
Esto
Así
Esto no lo podemos petar
Esto también no lo puedo petar
Vale
Input
El root
Entiendo que
Vamos a poner aquí esto
Y el root
Vamos a poner que sea este
Class name
Esto no es así
Esto es así
Vale
On drop
Vale
Get input
Accepted files
File reactions
Lo que quiero saber
Esto debe tener unos
Class name
O sea
No hace falta esto
Como tal
Por ejemplo
Si yo me voy aquí
Que pone lo de cargar vídeo
Y yo le digo
Toma
Ahí
¿Dónde tengo mi vídeo?
Este
¿Ves?
No
Lo come con patatas ahí
Y ya está
Si empezar de nuevo
No dice nada
Algo parecido a lo que ha puesto aquí
Selecciona vídeo
Al cargar
Y todo esto
En los ejemplos
Style in drop zone
¿Ves?
Porque pone drag and drop
No sé qué
No sé cuánto
Básicamente
Es dentro
O sea
Tú aquí
Aparte del input
Lo que haríamos aquí
Tener un div más
Y aquí le podríamos meter
Joder
Con los divs
Son los divs piratas
Vamos a ver
Aquí lo que podemos hacer
Es
Estilar un poco
Lo que han hecho
Aquí
De hecho
Vamos a copiar
Aquí un poco
A lo bestia
No hace falta
Esta clase
Vamos a cerrar
Esto por aquí
Vamos a copiar
Incluso
Esto
Esto
Y aquí
Es hacer un poco mejor
Esto porque aquí he puesto
Un vr
Esto sí que me lo voy a copiar
Esto no hace falta
Hasta 180
Esto es más difícil
Porque entiendo que esto es una revisión
Que te diría hacer el servidor
¿Sabes?
De ver cuánto tarda
Eso podría mirar en el head
Me parece que eso se puede mirar
Buah
Eso es
No es imposible
Pero
Es un poco rollo
Vale
Vamos a
Vale
Está apretando todo
OnDrop
Is not defined
OnDrop
Is not defined
Porque el onDrop este
Por ahora vamos a hacer esto
Lo que pasa es que este es un drop
O sea, ya puedo crearlo aquí
Y hacer algo
O sea, lo digo porque tendremos que cambiar el estado
Y todo esto
Drop
Vamos a ver qué parámetros tiene esto
Vale
Vamos a estirar esto
Vamos a ver este
Deep
Deep, deep
Class name
Styles
Upload
Drop
DND
Vale
DND
Me gusta el nombre de DND
Va
DND
Border
Solid
No, dash
Un poquito más oscuro
El background lo vamos a poner un poquito más claro
Display flex
Flex direction
Column
Justify contents
Align
Vale
Padding
36 pixels
Vale
DND
Este, el aspect ratio igual también debería ser
9
16
Y así de esta forma nos quedaría un poco así
Ahora
Esto que le había puesto
Esto debería ser como mínimo
El upload
Vamos a poner esto
Lo podríamos destilar la imagen
Margen de bottom para abajo de 24 píxeles por ejemplo
A ver
Voy a fijarme un poquito
Arrastro, suelto en archivo
Vale
Vamos a ponerle el color
Un color así que sea gris pero que se note un poco más
Tendría que ser pues algo así
9
Vale un poquito menos
7
Que sí que se lea
Vamos a ponerle font size
Vamos a ponerle mejor con rems
Un poquito menos
Muy grande
Vale
Lo que pasa es que claro
Hay una parte que debería ser más grande
Y otra menos grande
Así que vamos a ver esto
Seleccionar el archivo
No sé cuánto
Vale
Aguarrazo
Vale
Huele y tal
Vale
Entonces
El DND
Font size
Más grande este
Y vamos a poner un color un poco
El del diablo
DNH5
Dios mío
Que locura
Que locura amigos
Que locura
Aquí escribiendo a tope
Como se nota la Coca-Cola
Como se nota
Jean
Cero
Margin cero
No
Cero no
Este va a tener un poquito más
Cero
Bueno
Arriba
Arriba
Arriba
Derecha
Abajo
Todo
Ah bueno
Es que aquí
No cabe
Y aquí sí que cabe
Pero igualmente
Yo creo que está
Lo hacemos un poquito
Más pequeño
Y así cabe
Joder
Qué cabrón
Que no cabe igualmente
Bueno
La verdad es que me gusta más el mío
Casi eh
Me gusta un poco más el mío
Porque
Joder
Es que no se ve un coño
Aquí en este
Vale
Ya veo que el border este
Esto no lo tiene
El suyo es más
Como que se ve menos
Pero
Me da la sensación
Que se ve demasiado poco
El suyo también
Pero bueno
Vamos a intentar
Que crezca un poquito más
Vale
Este no se publicará
En el perfil
De no sé quién
Perfecto
Vamos a ver
Si ahora podemos
Descar
Pam
Drop
Aquí tenemos el file
Perfecto
Con el nombre
El size
El type
Imagino que si intento
Subir algo
Que no debería
Drop
Eh
Voy a hacer una cosa
Un momento
Voy a hacer una cosa
Voy a hacer una cosa
Amigos
Qué lástima
Qué lastimica
Qué lastimica
Qué lastimica
Qué lastima
A ver
Me imagino que esto
De tener aquí
Is drag active
Is drag
Reject
Is drag
Buah
Qué bueno
La librería
Me ha gustado
No la conocía
No nos conocíamos
Pero
O sea
Me sonaba
Pero no la
No era un
Active
Porque al final
Si es active
No tiene mucho sentido
Al final
Lo que queremos
Es este
Es accept
O es reject
Entonces
En el root
En este
Esta canción
¿Qué recomendarías
Alguien que empieza
Más o menos
A programar ahora?
Dice
Artics
Paciencia
Y que
No tengas
No tengas prisa
Que tengas en cuenta
Que es una carrera
De fondo
Así que
Después
Después
De paciencia
De camino
Y que vayas
Poco a poco
Pues
Disfrutando
Las pequeñas victorias
Bueno
Ya veo que te
Dejó tabillar
El tema
De la rem
Pixels
Y todo esto
¿Has visto
El viaje de Chihiro?
Hostia
Lo vi hace mucho tiempo
¿Estás usando
Link para los vacíos?
Yo creo que sí
Yo creo que sí
Estando Animal Crossing
Está sonando
Star Wars
¿Cómo
Que te salga
Ese auto
Compli
En CSS?
Creo que es
Gija Copilot
Básicamente
¿Qué criterios
Utilizas ahora
Es coger librerías?
Que ocupen
No le he dedicado
Mucho tiempo
En este caso
Pero
Solo mirar
Que esté actualizada
Voy a su
Repositorio
Hombre
Si hace 5 años
Que no se toca
Me intento buscar otra
Las issues abiertas
Lo que ocupa
Por ejemplo
Una cosa que hago
A veces
Después es ir a
Vandelfobia
Y digo
Vale
Pues vamos a ver
React
DND
¿No?
Que es la que estamos utilizando
Vale
Pues 15k
Pues a lo mejor digo
Ostras
¿Y cuánto ocupa
DND?
Yo que sé
Otra
¿No?
Por ejemplo
A ver si encontramos alguna
Beauty
DND
¿Vale?
Hostia
30
Ocupa el doble
Realmente
Merece la pena
Ocupando el doble
Es un conjunto
De cosas
Que para
Decidir
Y para tomar
La mejor
Vale
Estáis muy callados
¿Eh?
¿Qué os pasa?
Que estáis muy callados
Estáis bien
Tengo que guardar
Varias veces
El linter me corrija
Todos los errores
Cada vez que guardo
Me los soluciona
De a poco
¿Sabes por qué puede ser?
Yo creo que
Seguramente
Lucas
Es que tienes
Un linter
Perezoso
O sea
Que te va arreglando
Poco a poco
Y dices
Bueno
Ahora esto
Bueno
Ya que se ha dado cuenta
Que no se ha arreglado todo
Pues te lo vuelvo a
A tal
No
La verdad es que no tengo ni idea
A veces
Es un tema más
De conflictos
De configuración
Completer
Y linter
Eso suele pasar
¿Vale?
Suele pasar eso
Más bien
Si por ejemplo
Tienes un div con font 624
Y ese mismo div
Agregas un padding 2M
¿Estás haciendo un padding 48?
Porque 1M
Sí
Efectivamente estás haciendo eso
En el caso del rem
Ah vale
Que Dartiles está dando una aspirant
Perdón
Es que te estaba dando la raza
Si estáis vivos
Por lo que veo
¿Hay algún vídeo sobre el setup
De tu consola?
Para contarte los plugins
Vamos a intentar enfocarnos
En el clon este
Porque si no
Lo voy a mirar
Para limpiar código
Siempre tiro escoba
Eso suele ir muy bien
O si no con lejía
Directamente
Vandelfobia es un comparador
Vandelfobia lo que te dice
Es cuánto ocupa
Te ayuda a comparar
Cuánto ocupa
Cada librería
O dependencia
Biblioteca
Utilidad
Cada paquete
Básicamente
Y aquí te dice
Oye mira
30K
Ocupa este
Además te dice aquí
La composición del paquete
Pues mira
Utilizan Redax
React Redax
A lo mejor por eso
Ocupa 30K
Y por eso a lo mejor
React DND
Pues no tiene
Aposamente Redax
Pero React Redax
Bueno
El tema es
Que es interesante
Ver también las dependencias
Que tiene
Deporte favorito
Codificar
Es increíble
Codificar
Y si no
Le he pillado
No sé
No me suele
De gustar
Yo lo que más he jugado
En mi vida
Ha sido
Fútbol
Y me lo pasaba muy bien
Pero ahora mismo
De ver
No
Nada
De ver
Deporte
No sé
No me gusta mucho
Las olimpiadas
Me suele gustar
Natación
Atletismo
Porque suelen ser
Bastante
Bastante chulas
Pero
De deportes así
Competitivos
Fútbol por ejemplo
Me aburre un montón
¿Qué equipo Mac
Estás usando?
Mac Mini M1
¿Se podría hacer
Que cuando se suba
Un archivo
Que no es el que se pide
La pantalla
Tenga una pequeña vibración?
Sí que se podría
La verdad
Lo voy a intentar
Lo voy a intentar
¿Vale?
Lo voy a intentar
La verdad
Mira
Vamos a intentarlo
Yo voy a intentar
Hacer lo que iba a hacer
Y ahora
Intento también eso
Que básicamente sería
Sfect
Le ponemos aquí
La dependencia
Del
IsDrag
Reject
Y lo que podríamos hacer
Que si
IsDrag
Reject
Lo que podríamos hacer
Es
Navigator
Punto
Vibrate
100
Por ejemplo
Cada vez que cambie
El valor
Del IsDrag
Reject
Si es true
Pues vibraría
No sé si le pediría
Algún tipo de
De
De permiso
Me imagino que sí
Pero podríamos mirar
¿Qué lente tienes
Para la cámara?
Creo que
Pues tengo
Que venía con la cámara
Tengo una EOS M5
No sé cuál es
La lente exactamente
Pero la que venía
Con la cámara
¿Estás con Node también?
Sí
Trabajo con Node
¿Estáis fino?
Me alegro entonces
La carpeta
Es porque planteo
Meterle test
Lo que pasa es que
En Vite
Es un poco
Problemático
Y ya hemos visto
Que da algún problema
Pero
Intentaremos
Solucionarlo
Voy a ver cómo se soluciona
Es una cosa
Que me interesa mucho
Arreglar
Lo que pasa es que
No quiero estar perdiendo aquí
30 minutos
Y que os aborráis aquí
Como unas
Ostras
¿Qué serie estás viendo?
Estoy viendo
What If
No sé si estáis viendo
What If
Pero es una serie
Brutal
De Marvel
Me está gustando muchísimo
Bueno es que me encanta Marvel
¿Vale?
Y entonces
La estoy disfrutando un montón
A ver
Hay capítulos más buenos
Otros menos buenos
Pero en general
Me gusta
Me gusta
El que más me ha gustado
Es el del Doctor Strange
Ese es el que más me ha gustado
De lejos
O sea a mí me ha parecido
Un capítulo genial
Ojalá hubiera sido una película
Porque
Porque es que
Es muy bueno
Muy bueno
Bueno se ha sido una ronda informativa
Un poquito
¿Qué tema usas en Visual Studio?
¿Qué fuente?
Oh Dios mío
Cascadiaco
Y Wonder Pro
¿Cuántos capítulos tiene?
Por ahora creo que lleva 5
Más o menos
¿Recomendas tu cámara
Para realizar directos?
Sí
Pero yo creo que un algo menos
También porque se hace directos
Perfectamente
Va a ser parte de la peli nueva
Del Doctor Strange
Ojalá de Apelu
Ojalá
Ojalá sea verdad
Vale
Is Drag Upset
Venga
Os cuento un poco
Lo que quería hacer
Bueno no os lo cuento
Os lo muestro
Os voy a mostrar
¿Vale?
Os voy a mostrar
Clases
Names
¿Vale?
Vamos a utilizar el clx
Por ahora aquí
Lo que tiene es el styles dnd
Y lo que vamos a hacer
Es tener unas clases
Que son condicionales
¿Vale?
Lo que vamos a hacer
Es
Básicamente
Vamos a poner por ahora esto
Pero vamos a decirle
Que sí
Si es tal
Vamos a hacer esto
Styles.dnd
Accept
Si
Esto es true
Lo que vamos a hacer con esto
En los estilos
Si sale
Ya veremos si sale
Vamos a hacer
Algo
Así
Vamos a hacer una cosa
Que puede ser interesante
Ay vaya por dios
No me digas que no me salen
Los colores
¿Y eso por qué?
Y detecta que CSS
Ah mira
Si es CSS
Si no
Vale
Bueno vamos a poner esto
Vamos a poner una cosa así
Pam
Y aquí vamos a poner lo mismo
Con el accept
Pam pam pam pam pam
Accept
Pero lo vamos a poner de color
Verde
Vale
Karim
Pam pam pam pam
Pam
Pam
Y entonces
Ojo
Que pasa
Que chulo
Que chulo
A ver
Vamos a darle un poquito de gracia a esto
Transition
El
Esto es el background
Color
3s
Is
Vale
Seleccionar un video
Vale
Lo que quiero hacer ahora
Es que
Isdra
Reject
Selecciona el video
De acá
Vale
Que es lo que quiero hacer con esto
Const
Render
Dnd
Content
If
Isdra
Isdra
Reject
Return
Archivo
No soportado
If
Isdra
Accept
Suelta el archivo
Para subirlo
Y si no
Devolvemos
Todo este churro
Que ya hemos hecho
Que os parece
Que no solo
Vamos a hacer
Un clon
Que es verdad
Que nos quedan un montón de cosas
Que hacer
Pero vamos a intentar mejorar
Un poco la experiencia
Del usuario
Que tiene la gente
De Tik Tok
Que os parece eso
Si
Ahora
Si yo hago esto
Mira
Archivo no soportado
Mira
Archivo no soportado
Si
Le intento
Si se va a encontrar
Descarga
Para subirlo
Suelta el archivo
Para subirlo
Y ahora
Nos faltaría
El tema
Del
De mientras se sube
Suelta el archivo
Y me voy a subirlo
Que os apareció
No os apareció nada
Vale
Nada
No hay nadie aquí
Me gustaría que vibre
A ver
Yo creo que vibra
Es que no vibra
El dispositivo
A ver
Is drag reject
Is drag reject
Que debe vibrar
Mira
True
False
Creo que vibraría
Lo que hemos hecho
Haría que
Si lo soltar
No es
Navigator.vibrate
O sea
Yo creo que vibraría
Esto cuando no esté soportado
Pues vibraría
Ya está
Que os parece
Está bien
Utilizar reno
Para utilizar
Errorlens
Se necesita
Alguna configuración
Con que tengas
Un linter
Ya estaría
Hola
Santitobi
De nuevo
Que tal
Soy nuevo por aquí
Y no se si es la pregunta adecuada
Que bootcamp de España
De España Alex
De España
Me recomiendas para desarrollo web
Mira sabes una cosa
Que mucha gente me pregunta
Que bootcamp me recomiendas
Que no se que
No tengo ni puñetera idea
Pero por un montón de motivos
Uno
No los he hecho todos
Podría recomendar uno
Dos
Independientemente de que un año
Sea muy bueno
Un bootcamp
O lo que sea
Al final lo que depende mucho
Es del profesor
O de la profesora
O sea
De quien te dé el curso
A lo mejor un bootcamp
Es buenísimo
Y te toca un profesor
Que es malísimo
O una profesora
Que no se entera
Entonces
Es complicado
Y lo tercero
Es que España es muy grande
Y ni siquiera
Cada vez hay tantos bootcamps
Que no sabría decirte
Lo que sí te puedo recomendar
No te puedo decir un nombre
Lo que te puedo recomendar
Es que
Si es un bootcamp
Que no te hace una prueba de acceso
Que no te hace algún tipo de prueba
Yo me preocuparía
¿Vale?
Porque eso significa
Que le da igual quien entre
Evita esos bootcamps
Luego
Busca por internet
Si tiene buenas opiniones
Que opina la gente
Y sobre todo
En Linkedin
Busca gente que haya estudiado
En ese bootcamp
Y pregúntale
Y así te puede decir
Más referencias de
Oye
Yo lo hice con este profesor
Te puedes enterar
Si el mismo profesor o profesora
Va a hacer el curso
Y entonces
Va a tener experiencias más reales
Yo lo que te recomendaría
Es imposible
Que yo te pueda decir
Algo así
Se puede cargar imágenes
Bueno eso vamos
Eso vamos
Pero no estaría bueno
Que permita cargar imágenes
También
No
A ver
Estamos haciendo
TikTok
Sebas
Estamos haciendo TikTok
Rollo movimiento
De vibrar
Claro
También lo podríamos hacer
A ver
Es un poco raro
Pero si queréis lo hacemos
A ver
Eh
Que
Shake
Shake
From
Más que tú
Bueno vamos a ver esto
Esto del shake este
Que lo repitan
Las cuantas veces
Es
Animation
Shake
5.s
Infinite
A ver si esto lo
Si
Vamos a probar esto
No
Esto es el upset
Vamos a ponerlo aquí
Yo creo que
Habrá gas
Pero
A ver
Vibrate
Animation
Una cosa mejor
Como
Como creo que tendría que tener
Más
La animación
No esta que nos ha hecho esto
Tenemos que poner muchos pasos
O sea
0%
Por ejemplo
Y esto que sea
Translate
Y
A ver
Y lo voy a repetir unas cuantas veces
¿Vale?
Y rotar un poquito
¿Vale?
0 grados
A partir de esto
Esto
Lo copiamos
A ver
Que no se me olvide
Punto y coma
Pam
Pam
Pam
Pam
Pam
Pam
Pam
Pam
Pam
Y aquí vamos tocando
¿No?
Pues
Hostia
Este translate
No sé si hace falta
Vamos a poner
3D
Que rabia
¿No?
Que ahora tengo que
Volver a repetir
Más o menos
15
30
45
60
75
90
100
Más o menos
Más o menos
Esto sería la X
Un pixel
Yo que sé
Un pixel
Un pixel
Un grado
Algo muy pequeñito
¿Sabes?
De 0
Un grado
Un grado
Un grado
Y aquí pues lo mismo
¿No?
Un pixel
O 0
0
Un pixel
Menos un pixel
A ver cómo va quedando esto
Más o menos
Ay
Que este no vibra
Ay
Me ha dejado fatal esto
A ver
Ah es que
No
Shake
Infinity
Translate
A ver
Que he puesto mal
Aquí
Entonces
Translate
3D
No
Ah es que
Esto
El roto
A ver
Lo que he hecho
Y debería ser
Un poco más
A ver
Vamos a ponerlo
Un poco más
Exagerado
No sé
Si es que
A lo mejor
He puesto
3
2
PIC
Menos
2
Píxels
2
Píxels
Menos
2
Píxels
2
Píxels
Coño
¿Será
Será que
Esto tiene que ir junto
Me da a mí que sí
Me da a mí que esto tiene que ir junto
Igual eso explicaría porque
A ver dónde tengo el archivo
Mira
Un poco
Esta es la idea
¿No?
Igual ves
Me he pasado
O sea yo creo que tiene que ser muy imperceptible
Y esto pues
Menos
Un píxel
Menos
Dos píxels
Un píxel
Menos
Dos píxels
O sea
Tienen que ser
Un píxel
Un píxel
Un píxel
Y movimientos un poco así
De esa forma
Y que vaya como de lado a lado
¿No?
Todo el rato
Bueno
Esto se puede tunear
Pero
Yo creo que lo mejor
Es que tenga muchos pasos
A lo mejor 10
¿No?
Aquí yo he hecho
Muy poquitos pasos
Pero esto
Haría justamente
Incluso puede ser que
Claro
Más rapidez
¿No?
Menos tiempo
Bueno
Igual ahí ya me he pasado
¿Eh?
Y si
Vamos a ver
Una locura
Una locura
De
Venga
Pues eso
¿Qué te parece?
¿Vibra o no vibra?
Eso es lo que quería
Que vibre la pantalla
A ver
La pantalla vibra
Vibra
¿Cómo va el clon?
Va bastante bien
¿Usas algún plugin de autocompletar?
GitHub Copilot
¿Para cuándo un clon de Twitch?
Para más adelante
Midu me he contactado
A través de LinkedIn
Para un trabajo de freelance
En equipo
¿Crees que debo aceptar
O debo buscar una empresa
Que ofrezca un contrato?
Patricio
Si es tu primer trabajo
Acepta
Lo que sea
A ver
No lo que sea
Pero
Si más o menos
Te encajas
Si no estás encontrando trabajo
Y
Y te
Te van a pagar
Vibras
Mira
Tú le dices que sí
Y empiezas a trabajar ahí
Y ya te buscarás otra cosa
¿No?
Ya está
¿Puedo aprender por mi cuenta
Y tener un buen portfolio?
Sí que se puede
Pero
Tiene este
Que nos hace falta
Que nos hace falta
Que hace falta poco
Para las 8 horas
Se da media hora solo
Como has pasado volando
¿No?
Yo lo haría en 3 sets
La verdad es que
Cuanto más etapas
Yo creo que os puede quedar mejor
¿Eh?
Creo que si hacéis 3
Va a quedar un poco
Me da la sensación
¿Eh?
Tampoco lo probas
Pero bueno
¿Qué es lo que hace Celeskis?
Bueno
Una utilidad para
Para hacer
Classnames condicionales
Pero le sale
El drag and drop
Claro
No sé
Pero puedes dar un clic
¿No?
De hecho
¿Ves?
Hay que subir el vídeo
En la versión móvil
Además de editor
Pero
Mira
Le puedes dar
Bueno
No sé dónde
Es que si le das a la imagen
No nada
Ah
O sea
Que funciona
Lo que pasa es que tarda
Pero
Pero eso
¿Ves?
Claro
Habría que darle
En lugar de seleccionar el vídeo
Para cargar
Dice
Pues en versión móvil
Podrías quitar
O arrastrar
Y suelter al archivo
Y dice
Dale clic
Y elige lo de tu galería
Y ya está
Y estaría funcionando correctamente
Oye
Habéis puesto un montón
De
Joder
De set
Qué mal
Qué más
¿Es de cuál o está editado
Subdirectos?
Hay de todo
En su pavés
El mesoambaken
Dedicado o directo en el front
De todo
O sea
Puede ser
De hecho
Yo quería hacer un poco de API
En eso
Ojo
A ver con las bonitas palabras
MagoDev
Muchas gracias
Porque pese a ser una persona
Clonada
En la que existen dos MagoDevs
En el mundo
Tú eres mi favorito
Tengo que decirte
Que tú eres la versión favorita
Con la que
Estoy más agradecido
Eres el MagoDev
Para mí el auténtico
El otro
No sé
No sé
No sé dónde ha salido
Pero sé que
Que es que
Te está intentando
No copiar
Pero homenajear
Y yo también te quiero homenajear
Te quiero dar las gracias
De verdad
De corazón
Por estar en la comunidad
Y por
Bueno
Para acompañarme
En comienzos
Incluso viendo
Vídeo
Incluso
Aión de TikTok
Un abrazo enorme
Para mí eres pura magia
Así que
Muchas gracias
Y
Y nada
Que gracias por los
Diez mil
Eres el mejor
Es lo contrario
No hombre
Vosotros
De verdad
Ahora entra el bajón
Ahora entra el bajón
De
Hostia
Me estoy acordando
Que deja el monster
En el congelador
Va a estar el monster
Que va a salir hecho un monstruo
Vale
Vamos para hacer
Ya hemos hecho el drag and drop
Ya tenemos aquí
Esto que no tiene mala pinta
Vamos a hacer
Error data
Vale
El drag and drop
Ya hemos hecho
Vale
Oye
Ponía
Que ponía
No he soportado
Display
Blood
4 cells
Border
A ver como es el
Ah
Está aquí
Bueno
Que esto desaparece
Totalmente
Esto desaparece
Totalmente
Vamos a ver
Crecio
Border
Radius
Ah
La verdad
Gira
Bordes radios
Bordes cero
Pixel
Sol
C
Margin top
4
Celes
Este
PPP
A ver
No tenga
Un load input
Eso te pasa
Por no fiar
De ti mismo
Tiel
Tiel
Tiel
Tiel
Tiel
Tiel
Tiel
Tiel
Y
Tiel
Tien
Tiel
Tiel
Tiel
Tiel
Tiel
Tiel
Tiel
Tiel
no
el caro se sube pero hasta que se publica no se publica el vídeo
pero bueno vale por un lado abrió en el servicio
vamos a ver vuestro servicio tenemos a blog vídeo pero claro también estaría el
publish vídeos a blog vídeo porque mientras tú lo pones se va subiendo
entiendo que si luego se cancela lo que debe hacer de alguna forma es limpiar
esos vídeos entonces lo que necesitamos hacer aquí en parte del vídeo file
vídeos y
los superbes storage vamos a poner from vídeos
esto no es avatar es de vídeos y aquí esto a blood que hay que ponerle un
nombre qué nombre le pone a esto yo supongo que le pone un nombre random
ravi
e
y
sí si pero creo que sea
también a string totalmente
recuilar
con la pinta
dicto
o sea que éste tendría
a un escrito este window.crypto que es random values window por punto no me sale nada que rando
el autocomplete básicamente ese es el problema sí bueno pero lo que tu número de la suerte coño
que va a poner crear un string esto lo que quiero un rando en que este show funciona en note
que este tiene muy mala pinta es random que yo de
seguro que me ha expuesto alguno por él voy a mirarlo sin nano y d pero eso es con dependencia
que quería justamente no hacer una dependencia crítica claro ese ese ya que había uno de uaid a ver
ese de este no me acordaba pero si puse ese escrito ves y no sale autocomplete no sale él
ese muchas gracias el yutgón efectivamente este es el buscando pero no sé por qué no funciona autocomplete
en file y rando
file name file name
4 está vale esto para subir el vídeo este habló vi tiene que ser cuando hacemos el on drop este no habló vídeo
vio hola ahí porta esta
hoy es una pena es cuando subes algo o blow the feeling security rules helpers esto es retos de
name of a file vale for accessing object al access a lo individual access to file co y si y sin beta y
si tienes problemas tal vale pero lo que quiero no sabía es dar el progreso sobre eso bueno que
entonces es tan beta me parece esto o sea esto se resolverá cuando termine de subirse y punto
básicamente entonces bueno vamos a intentarlo vamos a intentar a su blog vídeo este a lo vídeo
vamos a hacer aquí progreso el progreso use state o habló de mejor
se lo use state
venga ellos es a blog
pero bueno habló vídeo loading
rio
x 0
3
x
y
addict
etc
y
disable
でしょう que justamente react
tenemos
valen
a vueltra hoogán drag can drag vale
Do you want to prevent a crack in some cases?
You could implement this be giving your component a prop can drag.
Esta es la que está.
Can drag.
Use drag, use drag, use drag.
Nente.
Es el que es.
A ver, cuando.
Estoy mezclando paquetes ya.
Es que me sonaba, pero no sabía que ese no era.
Vamos a ver, este es el que estamos utilizando, ¿vale?
Al final he visto tantos.
Vale, drop zone, esto es con el siguiente.
El hook.
Volt.
Claro, esto con el componente.
Pero...
Yo le truco.
Esto se vuelve a ejecutar.
Y está.
Uploading.
Bueno, ahora esto lo vamos a arreglar.
A ver, os voy a leer un poquito.
A ver cómo estáis.
No estaba escondriado.
Sí, efectivamente.
Gracias por fijarte.
Sí, sí, sí, sí.
Estaba, estaba.
La he liado, la he liado.
A lo loco.
Una cargando.
Sí.
Hola.
Fantasma.
First.
Sergiedo.
Pues que es el número uno.
No estás cansado.
De hecho, creo que nos vamos a quedar...
Nos vamos a quedar más.
¿24 horas?
Pues, no, hombre.
Oye, Rapustín, vete, hombre, si quieres.
A ver, me voy.
Quedan 15 minutos, ¿se quedan?
Sí.
Todavía me quedan para aquí que comerme.
Los puedo recalentar.
Me puedo recalentar y vamos.
Volvemos a cenar.
Vemos un vídeo.
Mide unas 12 horas.
Yo para poco, Betta.
Ay, qué bueno.
Bueno, va.
Vamos a intentar...
Es que no me voy a ir a dormir para que no consiga subir el vídeo.
Por eso estoy dándole...
Porque quiero subir el vídeo.
Mírame que...
Vamos, ¿no?
A ver.
Esto...
Vamos a quitar esto.
Vamos a enfocarnos en lo interesante, ¿vale?
Que es aquí.
Aquí quiero subir mi vídeo.
Entonces, vamos a subir el vídeo para...
El archivo.
Venga, ha petado.
No perder la Reading Files.
Vale.
Vamos a...
Este E...
Como que esto es una E, pero bueno, esto será lo que le dé la gana hacer.
Claro.
Yo no sé cuál.
Array en un minuto.
Vale, vale.
Vale.
Esto es Array.
O sea, esto son Files.
Ya.
Y de Files, justamente, la primera.
Files.
Vale.
Tenemos un File.
Y ya está.
O sea, es lo que queremos.
File.
Súbeme esto, va.
Súbelo.
Madre mía.
Así ya.
El monitor dice, ya, por favor.
Por favor.
Nada.
Trabajar, monitor.
Esto lo que quiere decir, en realidad, es las policies.
Porque ahora mismo no puede...
No podemos subir.
Policy...
Allow access to a public.
Hostia, madre mía.
Existe to give user access to a folder only to authenticate users.
Esto es lo que estaría bien, pero no lo tenemos autenticado.
Storage.objects.
Vamos a utilizar este template.
None.
If user access to a folder only, yo creo, folder, alert.
So, folder name, igual private.
Book it ID.
Es que esto es lo que no tenemos.
A ver, porque esto...
Pero...
Storage folder name private.
A ver, por la saco.
Esto.
Voy a hacer esto.
Seleccionar e insertar.
Vale.
Te sé bien.
Te soy de apender to the home.
Yo pese...
Eso es un...
Vale.
ổi tán Construction.
give users access, any user to select and insert videos, store videos, insert, share with check, pal, pal.
A ver, esto no es lo que deberíamos hacer, deberíamos, por ejemplo, que esté autenticado, pero bueno, no nos ha dado tiempo.
Vale, ahora sí que se ha subido, que veo que es vídeos, vídeos, no tiene mucho sentido, así que si ahora me la store ha hecho vídeos, pues aquí no está.
Aquí tenemos, muy bien, 0 bytes, fantástico.
Oye, pues qué raro, ¿no?
Porque el upload file, este, esto está así, bueno.
Entonces, file, perfecto.
File name, tenemos todo esto.
Esto de vídeos no hace falta.
Uploads, file name.
Claro, esto se interesa, lo podríamos tener en una carpeta.
Voy a ponerle a la...
Vamos a subir.
Bueno, este, la primera prueba.
Vale, ahora es pending.
Esto me da, me da, me da, me da la primera subida de un vídeo, ¿eh?
Ahí vamos, ahí vamos, ¿eh?
Mega, mega, mega soportado, ¿eh?
Bueno, ya tenemos nuestro primer videíto.
Obviamente aquí faltan cosas porque en los estilos que está uploaded.
O sea, ahora se supone que está activado y no debería ser capaz...
¿Ves?
Que ahora no me aparece ni le debería poder dar.
Está desactivado.
O sea, ahora está en disabled.
Este disabled porque es o uploading o uploading.
¿Qué es?
Deberíamos, deberíamos hacer más cosas.
Por ejemplo...
Hostia, los monitores pagan ya.
Me dice, oye, que me voy a dormir, ¿eh?
Que venga, chao.
No, tú quieto ahí.
Quieto ahí.
Uploaded.
A ver, el upload lo ideal sería ponerlo en otro sitio.
Pero bueno, vamos a ver.
Claro, es que no tiene sentido.
Uploaded.
Entonces, return.
H4.
Archivo.
Cargado.
Con éxito.
If uploading.
Return.
H4.
Aquí, pero esto no es necesario.
Esto lo dejamos por aquí.
Dn de content.
Esto es lo que nos devuelve...
Bueno, esto sería para ver visualmente lo que hace y todo esto.
Lo hago con éxito.
También necesitaríamos unos estilos, ¿no?
Estilos uploaded.
Uploaded.
Uploaded.
Uploaded.
Ya que os han gustado...
Estos de...
Del shake.
Podríamos hacer keyframes.
Uno que fuese...
¿Cómo sería?
Pulse.
A ver.
Esto no es como tal.
Yo esperaba más una cosa con...
Pero bueno.
Se lo...
Ocho.
O sea...
Uno.
Vamos a hacer casi imperceptible.
Empezamos con uno.
Vamos con punto ocho.
Y acabamos con...
A ver.
Si no le ponemos el cien por cien debería volver al...
Al del inicio.
Pero bueno.
No me la quiero jugar ahora.
Esto.
Loading.
Animation.
Infinity.
Incluso se lo podemos dejar casi que...
Casi algo blanco.
¿Sabes?
Como transparente.
Y el uploaded que es verde.
Muy verde.
El archivo cargado con éxito.
Aquí le ha pasado de todo.
Claro.
Le ha pasado de todo.
Porque...
Los estilos estos de uploader o no uploading.
Esto tiene que ser...
Así.
No uploader.
Si está uploaded.
Y no está uploaded.
Es en ese estado ahora.
Está ahora.
Claro.
Archivo cargado con éxito.
Que al final podríamos hacer que desapareciese justamente para que apareciera la leyenda.
Pero bueno.
Eso ya nos podríamos volver aquí locos.
Entonces.
Le ponemos uno que no...
Se pone ahí nervioso.
Le decimos.
Venga.
Toma.
Aquí tienes tu descarga.
Dice.
Venga.
Suelta el archivo para subirlo.
Lo suelto.
Coño.
Es que va súper rápido.
Esto no puede ser.
Es demasiado rápido ahora.
No sé.
Mega lo ha subido.
No hay menos.
¿Cómo puede ser que lo ha subido tan rápido?
A ver.
No puede ser.
No puede ser.
3G.
Le digo.
Ah.
Coño.
Es que me he olvidado.
Mira que lo quería hacer antes.
Y se me ha olvidado de la wait.
La leche.
Esto era una wait.
Alguien me lo ha dicho antes.
Y he dicho.
Sí, sí.
Si lo tenía claro.
Y no lo he hecho.
El await de esto.
De hecho.
Esto.
Al final también.
La idea.
Más que sería.
A bloated file.
Vale.
Vamos a hacer esto.
A bloated que tenía por aquí.
Esto es que la bloated.
Debería devolver el error.
Y el data.
Vale.
Entonces.
A ver.
Ya lo miraremos.
Vale.
Ya miraremos que hacemos con esto.
Pero si no.
Data.
Entiendo que esto tenía la key.
¿No?
Vamos a consola.
Hay que subir.
Otra vez un archivo.
Para ver esto.
La leche.
Venga va.
Limitaciones.
Pam, pam, pam.
Aquí.
Lo podríamos hacer aquí.
Yo creo.
¿No?
File name.
File name.
Es que sale la url.
Pero me faltaría.
O sea.
Entiendo que es.
Esta.
Esa.
Vamos.
Pap, pap.
Enf.
Local.
Vite.
Superbase.
Vale.
Por qué.
Ah.
Superbase.
Storage.
Url.
Esta piqui es.
Es visible en javascript.
Vale.
Este sería.
Vamos a dejarlo así.
Y a partir del oje.
No.
Ra.
Videos.
Upload.
Ra.
Pack.
Public.
Videos.
Vale.
Vale.
VA.
Que.
Hola.
definition.
No.
TBY.
Sowa.
T Aaah.
No.
Tá.
TBY.
TBY.
TBY.
T� biblical.
TBY.
TBY.
TBYida.
TBYida.
TBYida.
TBYida.
TBYida.
aquí en mayúscula, filename, esto sería aquí, a ver, esto sería así, data, haríamos esto,
si no, aquí ya tenemos esto, a ver, voy a hacer esto, y voy a devolver el
file url, file url, file url, set uploaded file url, venga, guardamos, nos vamos a nuestra
aplicación, nuestro midu talk, perfecto, justamente lo que esperaba, un and define ahí, en toda
la boca, porque, ah, porque hay que cerrar el servidor y abrir cuando añadimos variables
de entorno, amigos, efectivamente, cosa, orión, no he hecho un recompilado, efectivamente,
tienes el canal de youtube de midu def, totalmente, y si su que es como un que ya ha declarado
file, alguien me recuerda, de react, hay uno de react de un chico, increíble, o sea, te
voy a decir, dispuesto a pagar, no hace falta ni que pagues, o sea, hay uno de react en youtube,
creo que lo recomienda el chico este, dan abramov y todo, que es, mira, es este, tú vas a youtube.com
barra mi def, calla, te vas a listas, se parece un poco a mí, pero no sé, y aquí tienes este pedazo
de curso, no sé si hay, mira, 12 horas, son 14 horas de curso de react gratis, mira, 120.000 visualizaciones
casi, 4000 likes, bueno, aquí estos 42 son gente que le gusta angular, view o cosas peores, así que, así que bueno,
que seguro que te puede gustar, si no es midu.reac, me parece, no, midu.link barra react, ya lo tienes.
Oye, hemos hecho, wow, 8 horas, Dios mío, como te sientes, me pregunto yo mismo, pues estoy
bien, yo creo que podría estar otras 8 horas perfectamente, yo podría, como si nada, yo
creo que sí, yo no sé cómo lo hago, vamos a por las 10 horas, vamos a por las 12, venga.
Hola, su WhatsApp, sí que tengo su WhatsApp, el teléfono es 6888-888-9888. ¿Tienes un
bootcamp gratuito? Tengo un bootcamp gratuito, yo que sé, tengo que tener ahí 30 horas de
contenido. Bueno, venga, vamos, ¿en serio 12 horas? No, pero algo más seguro. Voy a revisar
si necesitas, un momento, voy a revisar el móvil por si me ha escrito mi novia. Pequeño,
¿ves? Ya que soy pequeñito. Me dice, ah, eres el mejor. Justo hemos entrado cuando
dijiste, voy a hacer una cosa guarra. Mi novia, a ver, ¿no? Pero no escuchéis, ¿eh?
Hola amor, ¿cómo estás? Pues nada, muchas gracias por verme el directo, hemos hecho muchas
cosas guarra, la verdad, más de las que habrás visto. Todavía estoy en directo, me están
escuchando como grabo esta nota de voz, así que no digan nada. Ah, no, será nota de voz,
solo la escuchas tú. Bueno, pues nada, que al final me he pedido mexicano, la gente ha
votado mexicano. Hay un chico que se ha gastado como 35.000 midu coins para que me comiese
el mexicano. Y la verdad es que tenía razón, estaba bastante bueno. Y nada, he intentado
hacer esto del Ibai, que dice, no me puedo reír, que da dinero. Y madre mía, yo habría
perdido ya la primera. A ver, había vídeos muy malos, eso también te digo. Pero sí,
me ha costado. Menos donetes por la tarde, o sea que me he saltado la dieta bikini para
agosto del año que viene, así que tendré que recuperar. Bueno, que mañana nos vemos,
quiero mucho, sé buena y que te lo estés pasando. Ahora, hasta luego. Que le escribo,
que le hago a mi pareja, para que veáis. Tal cual, ¿eh? No le extrañará. Vamos, que el
ritmo no pare, no pare. Ya tengo la url. Esta es la url. Siete métodos de array y ya
tienes la url. Muy bien, pues aquí tenemos la url. Lo tenemos ya en el... Solo nos faltaría
entonces. Cosas que nos faltan. ¿Cómo publicamos el vídeo? Vamos a ver cómo...
Ah, ya por dios. Esto. Aquí. Api. Eso. Introducción. Vídeos. Y esto. Insert a row. Vale. Esto
queremos. Insertar nuestra primera row. Blog video. Publish video. Vale. Subabase. Vídeos. Insert.
Set. Las que me hacen falta. Se crea sola. Create. Se crea solo. El userid. Userid. Ahora
mismo voy a tener que ponerle... Lo vamos a hacer en otro... Haremos en otro directo la creación
del usuario y todo esto. Description. Vale. Esto lo vamos a hacer de... Esto sí que se lo podemos
pasar, ¿no? Description. Este. Shares. Se supone que esto tiene default values. El shares, el
comment, el likes, que empieza a cero. Album cover. Se supone que el álbum cover no acepta
nulls. O sea... Nulls por aquí. Fold. Vale. Fold. Song. También. Song type. Eh...
Midef. Songs. Por ahora vamos a hacer esto. Porque no. Se nos complica un poco. ¿Vale?
Así que... Album cover. Ser el default álbum. Y el... Song. El default song. Muy bien. Y hacko pilot.
Esto por aquí. Esto por aquí. Esto por aquí. Esto por aquí. Y esto por aquí. Vamos a insertar uno. Ah, también me falta el source. Claro.
El source es el video source. Vaya cosa. Entonces. Venga. Va. Va. Va. Que estamos cerca de conseguir esto.
Estamos cerca. Lo huelo. Lo huelo. Ah, no. Soy yo. Qué huelo. Pensaba que es mi éxito. Y no es mi éxito.
Soy yo el que huelo. Eh... Nada. Broma, ¿eh? No huele. Me he duchado antes. Tengo... Aunque he estado ocho horas
de aquí. La verdad es que no huele nada. Huele bastante a taco. Eso sí. Eso sí que es verdad. Vale. Pues...
entonces... Ya lo tenemos listo. También lo tenemos listo. Teníamos que ir al upload. Y en el upload,
cuando terminamos, en el on-drop, perfecto. Vamos a guardar aquí el description. Set description. Joder.
Con user state. Description. Ah, ah, ah. Input. Unchange. Handle. A ver. Esto la verdad es que ahora...
Handle description. Estaría mejor que esto estuviese echado de otra forma, pero ya...
Eh...
Es igual. Mira. Y sí que falta que manejemos...
Que manejemos. O sea. Hacemos el handle sub.
Hacemos el prevent default.
Le voy a poner un name a esto.
Description.
Y lo operamos. Y ya está.
Use effect.
Submit.
Aquí tenemos el evento.
Prevent default.
Eh...
Target...
Hostia.
Coño, ahora se me ha olvidado.
Get form input values.
Pero desde el...
Desde el evento.
Esto no es.
Esto tampoco.
Se hace sin todo esto.
Ah, qué rabia.
¿Esto hace esto?
Pero si...
Oye, qué rabia me da no acordarme cuando es bastante más fácil que todo esto.
This. Value.
Eso.
Eh... Target.
Ahí está.
O sea, yo creo que sería...
Que es el que estamos haciendo.
Punto.
Description.
Punto.
Value.
Pero porque la gente está...
No sé.
Parte de...
Vamos a llamar al...
Publish video.
Le tendríamos que pasar...
El...
Dos cosas.
El video.
Y el description.
El description es...
Básicamente...
Por...
Como me...
Creo que esto no va a funcionar a la primera.
Voy a hacer esto.
Description.
Value.
Vamos a poner aquí event.
Me voy a mirar el evento.
Esto igual.
Publish video.
Esto tenemos que importar.
Importamelo.
Muy bien.
Publish video.
Videos.
Videos.
Videos.
Videos.
Videos.
Videos.
Videos.
De hecho.
Esto se importe.
Si no tenemos uploaded.
Entonces...
Y pasamos de todo.
También habría que mejorarlo.
Y hacer una cosa.
Pero bueno.
Enseñar un mensaje.
Oye, tienes que subir un video.
Pero bueno.
Si no tenemos unloaded.
Oye, no hagas nada.
Y si no.
Pues haz esto.
Bueno.
Voy a quitar esto por ahora un momento.
Voy a...
Voy a mirar un momento.
Que esto realmente haga...
Me devuelvo a la descripción.
Y ahora...
Ahora lo vuelvo a hacer.
¿Vale?
Eh, eh, eh, eh, eh.
¿Sí?
Eso es lo que quería.
Que raro que no hace...
¿Sabes?
O sea, todas las opciones y soluciones que había.
Form data y todo esto tan complicado.
No sé.
Igual.
Muy en diagonal.
Pero me ha dado la sensación.
La gente se complica un poco la vida.
Esta era un poco la idea que quería.
Target.description.value.
Con el name.
Puedes acceder directamente al valor del input.
Vale.
Este input...
En realidad no hace falta.
No sé por qué lo he puesto antes.
Vale.
Haces ahora.
Entonces.
Cuando haya ido bien, entonces, ¿qué hago?
Porque tendré que hacer algo, ¿no?
Una vez que ha hecho...
Eh...
¿Sabes?
Una vez que he hecho el submit.
Y esto ha ido bien.
Publish video.
Tendré que hacer algo.
Pero...
Bueno.
Por ahora vamos a poner video publish.
Error.
Vale.
Sí tiene error.
Console no.
Vamos a poner console.log este.
¿Vale?
Vale.
Vamos a ver.
Voy a refrescar esto.
Creo que no se me ha olvidado nada.
Vamos subiendo archivo.
Archivo cargado.
Leyenda.
El primer video de muchos.
Publicar.
Apeta.
No.
Que apeta.
400.
Column song.
Ah, vale.
Off relay.
Piste.
Bueno.
Bueno.
¿Por qué song title, amigo?
No pasa nada.
Ojalá todos los problemas fueran estos.
Porque esto es song title.
No pasa nada.
Ojalá sea todo de lo que es que quejar.
No.
New Rob.
Ah, vale.
Vale.
Venga.
No pasa nada.
No pasa nada.
Porque la política.
Claro.
No hemos tocado la política.
Igual me lo estáis diciendo.
No.
Política.
La política.
Pero.
No.
No.
Tenga feedback de que va a subir videos.
Y así.
Reforme.
Vamos con calma, ¿no?
Vamos con la calma.
Hay la política.
La política se mete en medio de las cosas.
De la gente.
Siempre.
Videos.
LS.
Vale.
Por ahora.
Lo que pasa.
Una cosa que me gustaría.
Es que es un poco raro.
Ah, vale.
Pues.
Pues voy a hacer.
Enable read access to everyone.
Enable read access for authenticated users only.
Insert.
Yamos true.
All users.
Vale.
Esto lo arreglar.
Vale.
La próxima vez lo arreglaremos.
No.
El primer video de muchos.
Aquí.
Y sale lo mismo.
¡Ah!
¡Etro video!
Este es nuestro video.
Veo que están mal unas cuantas cosas.
Voy a revisar una cosa.
Porque veo que aquí, por ejemplo, está mal el 2041.
Es el 2041.
A ver de dónde sale esto.
Esto es de likes.
Video player actions.
Vale.
Déjame.
Claro.
Solo estoy pasando avatar.
Username.
Esto.
La verdad.
Estaría bien si todo esto.
Props.
Tata tata tata.
Cons.
Video.
Video.
Un momento.
Un momento.
Video.
Video.
No estoy sacando ese.
Vale.
Props.
Props.
Tata tata.
Tata tata.
Tata tata.
Props.
Props.
Props.
Props.
Props.
A ver.
Es que esto al final.
Queden por culo a esto.
Vamos a simplificarlo.
Porque es que si no.
Estamos aquí todo el día.
Vale.
Cero.
Cero.
Tiene sentido.
Ahora sí que estamos pillando.
Las del.
Justamente estas.
Bueno amigos.
O sea.
Es que ahora.
Ya lo que podemos hacer es quitarnos de en medio.
Las cosas estas que habíamos hecho.
Vamos a borrar un poco así.
Como de mentira.
¿No?
Si nos vamos a la web.
Pues aquí tendríamos extra.
O sea.
Esto es un vídeo nuestro.
Que hemos subido nosotros.
¿Vale?
Que está perfectamente.
Luego.
Aparte de todo.
Lo que podríamos hacer.
Es.
Vamos a irnos a TikTok.
Vamos a mi perfil.
Todos estos.
Que estos son míos.
Vale.
Y.
30 segundos.
Vamos a usar.
Madre mía.
Lo de TikTok en 30 segundos.
Con la clase TikTok.
Y empezamos a estilar.
Vale.
Relax.
Relax.
Para escucharte.
Ahora.
Un placer.
Tiene buena.
Tengo aquí poniendo cosas.
¿Podrías enseñar cómo poner a prueba todo lo que voy aprendiendo?
Joder Alba.
Menudas preguntas me hacéis.
Joder.
Es que me ponéis unas preguntas.
¿Me podrías enseñar cómo poner a prueba todo lo que voy aprendiendo?
Escribo los códigos y veo resultados.
Es la bomba.
¿Qué programa usas para hacerlo y poder utilizarlo?
Lo he visto.
Quedó genial.
Haciendo más de esto.
Necesitamos más vídeos así.
Debes subir más contenido.
Joder, claro.
Te digo.
Se me pagarán por ello.
Necesito más de esto.
Pregunta.
¿Qué es un keyframe?
Espero que visite Codilink.
¿Qué quería hacer?
Ah, sí.
Quería guardar el vídeo.
Me do spam.
Sí, había un dato de...
Hombre, ya que estoy, ¿no?
Pues...
Hoy en CSS.
Hoy en CSS.
30 segundos.
Te voy a estar al principio de medio...
Medio drogado.
Hoy en CSS.
30 segundos.
Hoy en CSS.
Hoy en CSS.
30 segundos.
¡Qué bueno!
Guardar vídeo.
Guardar...
Hosting.
El...
Más peligro.
Ten, ten, ten, ten, ten, ten, ten, ten, ten, ten, ten, ten, ten...
Bloat.
¿Este cuál es?
El logo.
El logo.
En 30 segundos.
Vamos a poner frontend, desarrollo web, programación.
Bueno, esto, porque no me dice si ha ido bien, si ha ido mal y tal.
Aunque sabemos que ha ido bien.
Lo arreglaremos, ¿vale?
Descarga, subió en...
Esto va, vamos.
Esto va para arriba todo.
Hoy en CSS.
Hoy en CSS.
30 segundos.
CSS en 30 segundos.
CSS.
Frontend.
Desarrollo web.
Creamos un spin.
CSS en 30 segundos.
Publica.
Vale.
Buenas cosas malas.
Uy, ha pasado.
Una cosa que me...
Ah, no, está bien.
Vale, vale.
Una cosa mala que me he dado cuenta.
No pasa nada.
Estas cosas tenían que pasar.
Pero es una realidad que...
Que no está...
Mira, esto todo igual.
Mira, props.
Y todos felices.
Y a tomar por saco.
Tanta historia.
Y ya.
Boom.
Vale.
No está ordenado.
Pues esto nos vamos a...
Index.
Source.
Ta, ta, ta.
Get videos.
Short.
Create.
Ad.
Superbase.
Base.
Porque en la dotación salía short.
Y ahora no me acuerdo dónde había que ponerlo.
Midtalk.
Api.
Videos.
No pone nada de esto.
Vale.
Short de suerte.
Suerte con la búsqueda.
Superbase.
Lo he visto en algún sitio.
Order.
Eso.
Es que es order.
Order.
O sea, quitamos.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Order.
Bueno, pues con esto ya tenemos que van apareciendo, pero bueno, tiene que ser ascendente, descendente.
O sea, false.
Ahora sí que tenemos eso de que se van creando y van apareciendo por ahí.
Gracias de un len que era order.
Sí, pero no sé dónde y recordaba que era short, pero no, era order.
Bueno, pues con esto ya tenemos que van apareciendo aquí arriba.
¿Qué se van poniendo?
7 ml crea un div, el logo de tiktok.
40 segundos.
Vamos a usar 7 métodos de array en minuto.
Usar un solo elemento div en el ml con la clase tiktok y empezamos a estilar.
Está chulo.
Forma cada número multiplicando.
Está bien, ¿no?
Bueno, a ver, verdad, han sido 8 horas, que ha sido bastante rato, pero bueno, hemos hecho
unas cuantas cositas, no está mal, aparte de que se parece bastante el tema.
No está mal, yo al menos estoy contento.
Yo estoy contento, no estoy, no estoy, no estoy nada, nada decepcionado, o sea que hemos
hecho todo su bajo increíble, es una pena que guardo por dos para disfrutarlo, por haberse
pasado mal, está para amarlo, ¿no, Diana?
Muchas gracias, Diana.
Brutal.
Joder, muchas gracias, JoshDev.
8 horas para hacer esto.
No, Samu Garrón, no me digas.
A ver, entiendo que mucha gente dirá, guau, en 8 horas, pues qué poco has hecho, pero
la verdad es que, hombre, teniendo en cuenta que he cenado, que he estado hablando por aquí,
no es lo mismo hacer 8 horas directo, de hecho, le retaría.
Alguien se me dice, guau, es que han hecho horas, en 8 horas, hablando con gente y tal,
me parece, y explicando, joder, es que también parar, explicar.
Además, había cosas que no había utilizado nunca, Supa Base, por ejemplo, que me ha parecido
genial, ¿eh?
Yo encantado de la vida, porque hemos estado hablando.
Así que, genial, genial.
De hecho, me quedo con ganas de seguir, ¿eh?
Me quedo con ganas.
Yo podría estar aquí un rato más.
Lo que pasa es que entiendo que tenéis sueño.
Que tenéis sueño, ya es la hora de dormir, y, y, así que, nada.
¿Midu eres el mejor?
Bueno, no logré.
Ah, y voy a hacer los, voy a ir haciendo cómics, mientras os leo un poquito, ¿eh?
Eh, oye, muchas gracias por que me habéis ayudado, ¿eh?
Con lo de FastMarki, por ejemplo.
Bueno, estas cosas están chulas.
A ver, esto sería, add, hit, add, mid-dependency.
¿Qué?
Creo que este era el guter.
¿Qué?
Pues...
Amazon, Dependency.
A ver, que os leo.
No, mañana, mañana descanso.
¿Eh?
Mañana descanso, porque mañana tengo que subir la nueva versión del libro.
Eh, tiene mucha idea.
Se nota la experiencia.
Bueno, muchas gracias, Bepulc.
51 de regalos.
Muchas gracias por tu apoyo
O sea, es que me parece increíble
Muchas gracias
Muchas gracias a todos los que habéis regalado
Si os habéis suscrito
Porque es brutal
Esto es brutal
No, hombre
Seguro que hacéis más
Estás a otro nivel
O sea, de verdad
Que yo creo que esto lo podría hacer
Acá son las 5 y 23
No tengo sueño
Dice Ferral
Te enseño a un palatán
Palatán me empieza el día
Que me saco el monster
Y nos quedamos dos horas más
Mira que me quiere
Pero hasta que hora
Ja, ja, ja, ja, ja, ja, ja
Ja, ja, ja, ja, ja, ja
Un besito
No
Ajás
A partir de cuánto hay que preocuparse
Cuando sea grande
Quiero ser como tú
Pero ya, bueno
Ya os habéis enterado
Que no soy muy grande
Soy más bien chiquitito
Muy chiquitito
Bueno, no, Ferral
Aquí en la TAM todavía es temprano
Pero él tiene que descansar
8 horas es una jornada laboral
Se hace una feature
Tú una app
Quieres un gran app
Bueno, no he hecho una app
Entera
O sea
Es un mini clon
Y hemos hecho cosas muy inconcretas
¿Qué problema has tenido con el testing?
Jest y testing library
No son compatibles con Vite
Pues hay bastante problema con eso
¿Qué pasa?
El problema es que Vite
Como funciona a la hora de bundleizar
Las dependencias
Claro
Como las compila
No es compatible con Jest
Entonces hay que utilizar Babel a la vez
Y hay que
Dice ser que hay que moquear
Algunas variables globales
Y por eso no funciona del todo bien
Una hora menos en Canarias
Hostia, ¿ves de Canarias?
Mira, Beepul
No me digas que eres de Lanzarote
Porque si me dices encima
Que eres de Lanzarote ya
Locurón, ¿eh?
Sube el tonto a Midu
Joder, pero los
Los directos se suponen
O sea, los TikToks se suponen
Como muchos son 3 minutos
¿Cómo que qué libro?
Samu, garrón
El libro de AprendoGit
Que ya hemos vendido 750 unidades
O sea
Midu.link barra git
Ojalá tener un maestro
Nahum, lo tienes
Aquí estoy
O sea
¿Por qué para cada input
Se puede tomar de eventos submit?
Muy buena pregunta
Ahora agrebo
Muy buena pregunta
Pero a veces
¿Cuál es el problema?
El problema más bien
¿Por qué se suele utilizar?
A ver
Te lo voy a enseñar
Em...
Upload
Este
Y lo que hemos hecho
O sea
Hemos hecho que el input
Sea descontrolado
Básicamente no controlado por React
Pero claro
A la hora de hacerle validaciones
Por ejemplo
Sería bastante complicado
Porque no sabemos
Qué valores tiene
Cuando se está escribiendo
Por el usuario
Hasta
Que hace el submit
Además el problema
Si hiciésemos validaciones
Sobre este submit
Es que el código que haríamos
Sería
Input
Y bueno
Sino que sea más declarativo
Con React
Pero bueno
Que no pasa nada
O sea yo creo que
En este caso
Puede tener bastante sentido
De hecho
Es un escape hatch
Que le decimos
Una escotilla de escape
Que
Bastante bien
Pocas gente utiliza
Este handle submit
Directamente del evento
Y tal
Pero es verdad
Que el propio
La propia biblioteca de React
Recomienda
Que se utiliza el state
Porque al final
Es una
Controlado el estado
De tu aplicación
O sea
Que eso
En este canal
Sí
Lo haremos en mi canal
Y estar sentado ahí
La verdad es que
Ando bastante
Aunque no lo parezca
Ando bastante
De todos los días
De todos los días
Salgo a caminar
Casi una hora
Tengo un camino
Por la playa
Y suelo salir a caminar
Todos los una hora
Me pongo a escuchar podcast
Me pongo a leer
Bueno a leer libros
No
Tengo libros
Y cosas así
Entonces no hago ejercicio
Y correr
Que antes iba
Pero sí de andar
Me gusta mucho andar
O sea es una cosa
Que me gusta bastante
Y me ayuda mucho a pensar
Lemon
Que dices
Que te compré el libro de Git
Y no pude
Me imagino que desde Argentina
Me han dicho
Que te tienes que pillar
La tarjeta de prepago
De Walla
O de Walla
Como se pronuncia
Y
Y con eso dicen
Que se puede
Que con la de Walla
Y poniendo tarjeta
Pagando como si fuesen pesos
Te hace la conversión
Y que funciona
A la media hora
Procrastina
Yo he procrastinado
Un ratito
Nosotros también te queremos
También os creo
Que a vosotros
Ya voy a darle amor
A tu pareja
No
Mi pareja es que no está
No está hoy aquí
Mi pareja
Aprovechando que hoy
Bueno ya sabes
Habíamos hablado
De esto
Uy tengo un poquito
De Coca-Cola
Mira que bien
Coca-Cola
Aprovechando
Que iba a hacer
El directo
De 8 horas
Y estaba aquí
Se ha ido con una amiga
Y está
No están de fiesta
Pero están por ahí
Como
Durmiendo
Haciendo una pija
Se ha ido ya a dormir
A lo mejor se ha ido de fiesta
Tampoco me importa
La quiero igual
Y no tengo
¿Cuántas monstres tomas diarias?
No tomo monstres
A lo mejor me tomo
Una monstres
O dos
De hecho la de hoy
Tampoco me la
O sea
No tomo monstres
De verdad
Te han dicho grande
Pero grande puede ser
Muchas veces
Ser argentina
No entiendo nada
Pero me llama atención
Es muy temprano acá
Seguí
Que bueno guasón
Que bueno
Saca el monstres
Y seguimos con la autenticación
¿Sí o qué?
Ya
Mejor muchos jajas
Que un jajas
Eso es verdad
Hostia
Yo odio el jeje
Jeje
Jeje
Nada
Eres grande
Gracias
Oye muchas gracias
Espero que lo hayáis pasado muy bien
¿Me podrías explicar
Lo de Intersection of Server?
Gracias de antemano
Hostia
He estado un buen rato
Antes de Rafa
Explicándole Intersection of Server
Otro día
Te lo vuelvo a explicar
Pero es que hoy
Es que he estado mucho rato
Con Intersection of Server
Es Server
El Anzol
Tuve que salir
Me perdí gran parte
No pasa nada
¿Cuándo subirás a tu canal?
Lo subiré pronto
A YouTube
Desde Argentina
No se puede comprar
Bueno eso
Lo de Wallah
Y con la tarjeta prepago
O mercado pago
Han dicho eso
Podcast que escucho
No escucho ninguno de desarrollo
Porque es que
O sea lo utilizo mucho
De
De desintoxicar
Escucho
El de Kaizen
Escucho
Un libro para emprendedores
Me gusta mucho
Ese podcast
Escucho
Euge Oyer
Que está bastante interesante
Yo diría que ahora
Escucho
Esos tres
Son muchos
Devedores
Desarrollo personal
A mi es un tema
Que me gusta mucho
El tema del desarrollo personal
Como ser mejor profesional
Mejor persona
Como optimizar
Como sabes
Este tipo de cosas
El libro de git
Está en castellano
Como va a estar en inglés
No hombre
Mi libro de git
Está en castellano
Totalmente
Mi tema es
OneDart Pro
El mejor tema
De Visual Studio Code
Lo sabe Dios
Bueno para otro maratón
De estos
La no
Están pañales
Están pañales
Dice
Un vídeo con mi pareja
Programando
Ella bastante vergonzosa
No sé si se le haría
Desde cuándo
Los programadores
Bueno
Yo me he tomado
Dos cafés
En directo
O sea
Me he tomado dos
Uno frío
Pero que ya
Frío preparado
Y otro
Calentito
Al final
No me tomamos
Lo subiré
A mi
No te penalizan
Si subes el live
Compra YouTube
Si pasan 24 horas
No pasa nada
¿Qué te ha costado más
De este?
Buena pregunta
Al desnudo
Pues hombre
Creo que he sufrido
Un poco con el tema
De Supabase
Porque es la primera vez
Que he utilizado Supabase
Y claro
Pues al no tener
Ni puñetera
De Supabase
Pues me han chocado
Unas cuantas cosas
Se nota que no
Tengo una facilidad
Supabase
Pero bueno
Dentro de lo que cabe
Como que lo he utilizado
Creo que hemos llegado
Bastante lejos
O sea
Que estoy bastante contento
Hostia
Trabase Space
8 megas
Ya
De 500
Estuvo genial
Pasar contigo
Midu
Esperemos repetirlo
Muchas gracias
Héctor
Muchas gracias
¿Cuál es la playlist?
Os la paso
Es una que se llama
Luffy
DMCA
Copyright Free
Básicamente para que no
Metan más strikes
La paso en el chat
Está bastante chula
Parece que está un poco
Es irregular
Tiene canciones muy chulas
Y de repente
Te sale alguna
Que es un poco
Que esto que es
Pero me gusta mucho
Por ejemplo
La de
A ver si la encuentro
Creo que era esta
Esta
Esta
Esta es chula
Si he subido el código
Lo tenéis disponible
Oh
Mira, mira
Voy haciendo los cómics
Mientras disfrutáis
De esta canción
La de
De esta canción
De esta canción
Mira
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¿Tienes midu child?
¿Te gustaría en un futuro?
La verdad es que no me lo planteo a corto plazo.
No por nada.
No me veo ahora mismo con un midu child.
Pero bueno...
O sea, no es una cosa...
Hay gente que dice...
Tengo la ilusión de que quiero tener un niño.
Yo no he sentido todavía...
Mi pareja por ahora tampoco.
Pero bueno, quién sabe.
No es que...
No es que esté negado.
No me lo estoy planteando para nada.
¿Cuál es la próxima meta de subs para otras 8 horas?
Bueno, para otras 8 horas no.
Pero he puesto este, que es una locura.
De que si llegamos a 1000,
pues hacemos un especial de CleanArchitecture.
No creo que lleguemos a 8 horas.
Pero me lo traba...
O sea, haría...
Casi...
Intentaría hacer un curso en condiciones.
Lo tendríamos que hacer para finales de octubre.
Como mínimo.
O sea, bueno, no vamos a ver tampoco.
O sea, que no pasa nada.
Pero tendría que ser un poco para...
Para finales de octubre o así.
Tengo que dar una...
Tengo bastantes...
En octubre tengo bastantes cosas.
Tengo una charla en Polonia que tengo que ir.
Tengo un viaje en caravana.
Que voy a estar 4 días...
5 días.
Tengo...
Tengo otra conferencia en Burgos.
Tengo...
Tengo que presentar una conferencia.
Tengo muchas cosas en octubre.
Entonces tendría que ser para finales.
Pero lo haría.
Lo haría, lo haría.
O sea, lo haremos.
Si llegamos, igual que yo he hecho hoy.
8 horas y media.
Si llegamos, que no...
O sea, no hace falta que lleguemos.
No hace falta que lleguemos.
Pero...
Que lo haríamos.
Si no, igualmente.
A ver, no.
No igualmente.
Pero igual algún día.
Pero a lo mejor no tan pronto como otro día.
¿Qué opinas de arquitectural?
Pues que...
Bueno, arquitectura es una...
Es una de las implementaciones, ¿no?
Del arquitectur.
Me parece muy, muy, muy interesante.
Pero hay veces que hay que tener un poco de cuidado.
Porque es verdad que hay mucho boilerplate.
La curva de aprendizaje puede ser alta.
Hay que tener cuidado meterlo en un proyecto.
Pero es interesante.
Depende del proyecto.
De escalabilidad, mantenibilidad durante el tiempo.
Puede ser interesante.
Entonces, me gusta.
Lo que no me gusta, sobre todo, son los mantras.
No me gusta el hecho de que hay gente que es que...
Es que en el libro es así.
Y...
Es a las peligrosas.
Es peligrosas.
Pero me gusta, Ángela.
¿Cómo manejar tanta cantidad de espacio que ocupan los vídeos?
Pues, Lemon, yo creo que la cantidad de espacio es lo de menos.
El espacio, el almacenamiento, es muy barato.
De hecho, un vídeo de TikTok son 3 megas.
Más problema tiene YouTube.
Te lo puedo asegurar.
Que YouTube, a lo mejor cada segundo o cada hora que pasa, se suben miles y miles de gigas.
Y aún así, para YouTube, ya te digo que el espacio, el almacenamiento, no es un problema.
El almacenamiento es bastante barato.
Parece mentira, ¿eh?
A ver, es un reto.
No te quiero decir que no sea un reto, ¿vale?
Y seguro cuesta dinero.
Pero no es lo que más cuesta dinero en ese aspecto.
Por ejemplo, los datos que tengan que ser súper rápidos, con relaciones, soporten un montón de queries, concurrencia y tal.
Puede ser bastante peor.
Incluso la propia transferencia de los datos.
O sea, no es tan caro el almacenamiento como la transferencia de los datos.
Es más cara la transferencia de los datos que el almacenamiento de esos datos.
Imagínate.
Así que...
Y creo que TikTok lo tiene más fácil que muchas otras.
Como por ejemplo, YouTube.
Así que lo tiene más o menos fácil.
¿Qué te ha quedado pendiente?
Me ha quedado pendiente autenticación.
Me han quedado pendiente un montón de cosas.
Por ejemplo, hacer el...
Quería hacer el menú de abajo.
Pensaba que me daría tiempo, la verdad.
A ver, dentro...
Al final he hecho bastante lo que pensaba.
O sea, no bastante lo que pensaba.
He hecho un poco más o menos lo que pensaba.
Pero esta parte de aquí abajo me gustaría hacerla.
Me gustaría hacerla.
Hacer un marcador.
Bueno, quería hacer.
Quería hacer muchas cosas, pero así en pensar.
La página de perfil.
Que se pueda comentar.
Que se le pueda dar like.
Me gustaría poder seguir a gente.
Empezar a hacer la red social ya, ¿no?
Así que me gustaría seguir por ahí.
¿Por qué commit por cada archivo y no por todo?
No he hecho un commit por cada archivo.
Hay veces que hay commits que tienen tres o cuatro archivos.
O sea, lo que he hecho un commit por cada cosa que creo que tenía sentido.
Y no he hecho un commit con todos los archivos de golpe.
No tiene sentido.
Lo que es mucho más fácil, lo que he hecho, por ejemplo.
Si ves, en este caso he cambiado tres archivos.
Y he hecho un commit.
Esos archivos.
Lo que pasa es que si miras este commit.
Pues tiene sentido, ¿no?
He añadido la página de upload.
Y te lo explico.
Y el servicio de upload.
Y el commit, ¿qué dice?
Pues add a blog page and services.
Bueno, pues es mucho más fácil, ¿no?
Tienen sentido los commits.
Así ves un commit y dices, ostras.
Añadir un nuevo resultado para el feed.
Pues vas aquí y fíjate.
Lo único que he hecho es añadir un nuevo resultado para el feed.
O sea, descriptivo sobre los cambios que he hecho.
Es lo que he intentado.
Comits tienen que intentar ser pequeños.
Con sentido.
O sea, no hace falta que sea una línea y ya está.
Por ejemplo, añadir una dependencia.
Bueno, podría haber añadido un commit que fuese añadir la dependencia y utilizarla.
Pero en este caso, pues los he separado.
Pero...
Muchas gracias, Diana.
Muchas gracias, Cristian.
También, que ha regalado 5 suscripciones a la comunidad.
Muchísimas gracias.
Muchas, muchas, muchas gracias.
Muchas gracias.
Gracias.
Un buen conocimiento.
Gracias a ti, Humberto.
Mañana descansa, Midu, que es nuevo.
Vas a quedar próximo al lunes a currar.
Sí.
Si no tienes un Midu-chan, me adoptas.
Joder.
Qué va, qué va.
Si no me da la vida.
Ya soy leyenda.
¿Todo eso por el curro?
¿Qué opinan tu jefe de toda esta deriva que estás tomando tu vida?
¿Te ha alejado en parte de hacer tanto focus en tu trabajo?
La verdad es que no creo.
Yo me considero bastante productivo y en mi trabajo le doy muchísima caña.
No me gusta, creo que no me da tanto.
Y en mi empresa creo que están bastante contentos con la deriva en el sentido de que les da bastante publicidad.
O sea, no es tanta gente que entra a trabajar en mi empresa porque estoy yo, por ejemplo.
O sea, que creo que eso va por parte de la empresa.
Quiero empezar a hacer tutoriales para que aprendan a programar.
¿Qué me recomiendas para empezar?
¿Youtube o Twitch?
Fuah.
No sé cuál es.
O sea, te recomiendo YouTube.
O sea, Twitch, si no tienes una comunidad ya, no te va a ver nadie.
Directamente.
Con todo mi cariño, ¿eh?
Porque Twitch no es donde la gente te descubra.
Es una gente donde va tu comunidad.
¿Youtube es un buscador?
Es que Twitch no es un buscador.
YouTube sí.
YouTube, si por suerte uno de tus vídeos lo peta, te pueden encontrar.
Entonces, te recomiendo más YouTube que Twitch.
Twitch al final puede ser un pozo.
Tú dejas ahí las cosas.
Al final se pierden.
Son en directo.
Es si tienes comunidad, Twitch.
Al final los picáis como el otro día y llegamos a 1.000.
Joder, si me cago en la hostia.
Si es la leche.
Espero que...
Dios mío.
Eh...
Venga, ahora al final ya son 8.40.
Lo voy a intentar subir a Netlify.
Lo voy a intentar subir a Netlify.
Como ya sabéis, el tema del sponsor con Vercell no ha salido.
Y me ha hecho replantear.
No os voy a engañar.
Estamos aquí de chills y de honestidad.
Pero he pensado...
Claro.
¿Por qué Vercell me va a...
Si al final...
Pues tengo que traer mi...
O sea, y está bien.
O sea, es una cosa en la que creo, ¿no?
En la de...
Oye, tengo que abrir posibilidades hacia todas las direcciones.
Y nunca he probado Netlify.
O sea, mejor he utilizado Vercell siempre por automatismo de que me ha gustado
y me sigue gustando y siempre me va a gustar.
Pero...
Pensé...
Oye, pues ¿por qué no pruebo Netlify también?
Y quién sabe.
O sea, a lo mejor esto también es una reflexión para Vercell.
En el sentido de...
Oye, que sí.
Que nos interesa más el sponsor.
Search.sh lo he probado.
Pero me parece bastante menos potente que...
Mucho menos potente que Vercell y Netlify.
Netlify lo he probado un poquito.
Pero...
No tanto como Vercell, claro.
En tu libro hablas sobre los...
Hombre, claro que hablo sobre los cómics.
Hablo sobre muchísimas cosas.
Sobre los cómics, buenas prácticas, estrategias...
Son...
Casi 200...
Y todavía el libro está sin terminar.
Imagínate.
O sea que...
Sí, sí.
¿Qué cosas necesitaré para el clon en HTML y CSS?
Bueno, pues JavaScript y React.
Oye, Cristian, muchas gracias por otras cuatro suscripciones.
Es que estoy intentando pillaros en el chat y es que no hay manera, ¿eh?
Oye, pero en el trabajo haces así las ocho horas como hilo de TikTok.
O sea, todo el día codeando.
No, nada.
Sol.
Nada, nada.
Sol.
En mi trabajo tengo muchas charlas, acompañamiento, solucionar problemas, desbloquear a compañeros,
más hablar, politiqueo...
No es codificar ocho horas.
Hoy he programado mucho que casi toda la semana trabajo.
O sea, imagínate.
Hay reuniones, muchas historias.
Es otro rollo.
Otro rollo.
De hecho, me viene bien porque a veces me oxido un poco de programación.
Entonces, me viene bien hasta aquí.
Si es verdad que en Twitch estamos porque queremos más que por recomendación.
Qué grande.
Eh...
No todo es programar, ahí lo loco.
Totalmente.
Mucha, mucha, mucha, mucha...
Mucha, mucha reunión.
Te va regalando...
¿Se merece un mensaje?
Sí, claro que sí.
Cristian, te mereces un mensajito.
Pero bueno, que lo merecéis un montón de gente, eh.
Que...
Que...
También...
Es que sois un montón.
Que he abierto un montón de subs y...
Que muchas gracias a todos.
Cosmonauta me dice que sí sé programar.
A ver.
Me defiendo.
Porque me defiendo un poco.
Que sobre qué tenemos que desarrollar TikTok.
Que ya te he dicho.
Xcode.
Que he utilizado JavaScript React.
He utilizado CSS Modules.
Y Supabase.
No he probado Render.
Y es la primera vez que lo escucho.
No sé qué.
Tu host...
Oye, me gusta.
Me parece interesante.
Ah, mira.
Oye, pues esto está muy bien, eh.
Pero lo malo es el pricing.
Normalmente.
7 dólares al mes.
Oye, pues no sale.
Me imagino que esto es un solo proyecto.
Ah, databases van aparte, eh.
Eh...
Bueno.
Ese es...
Oye, lo miraré.
No...
No lo conocía.
Me parece muy interesante.
Gracias por compartirlo.
Me suena a Waka Time, que es uno de estos dashboards, ¿no?
Para ver métricas como programas, si vas rápido y tal.
Me parece interesante si no se utiliza como...
Yo sé que le veo un objetivo, Jeff.
En el sentido de...
A ver, es interesante para detectar posibles puntos de mejora en los equipos de desarrollo,
pero no para monitorizarlo, ¿sabes?
No si es...
Ay, es que está valiento, pues ya les vale...
Esto sí que no, eh.
Esto sí que no.
Pero si es para intentar ayudar al equipo, me puede parecer interesante.
Sí, lo dejaré para que lo podáis ver.
Eh...
Asbel, que dice que son 206 páginas el libro de Git.
Asbel, es que voy a actualizar el libro de Git.
Lo estoy actualizando.
Y te puedo asegurar que la versión no son 206 páginas.
De hecho, mira.
Te lo voy a enseñar.
Para que veas.
Este enviando Git, que por cierto, la portada del Impap.
Mira.
Me voy aquí a Books.
Eh...
Este es el libro que tengo publicado.
Versiones.
Eh...
Preview New Version.
Download.
Esta es la versión en la que estoy trabajando.
En la que...
De nuevo, los que hayáis comprado el libro Aprendiendo Git.
Recibiréis una actualización totalmente gratis.
Que para que os avise...
Eh...
Library.
Vale.
Esto es que lo activéis.
Le dais aquí.
New Version Available.
Esto activado.
Y os enviando un mail.
Y ahora vas a ver que no son 206 páginas.
Que he puesto unas cuantas más.
Hombre, me he contado que sí sé programar.
Digital Ocean tampoco está mal, pero tampoco...
Harás algún directo dedicado a Docker.
A ver, no soy un pedazo de crack de Docker.
No os voy a engañar.
Me defiendo.
Eso sí que es verdad que me defiendo.
¿Dónde curras y qué rol?
Soy Enabler Frontend, que es casi como un arquitecto, en Adebinta Spain.
Mira.
Este es el libro.
Vamos a ver cuántas páginas tiene ahora.
¿Cuántas páginas tiene ahora?
223.
Esta no es la última versión que tengo en el disco.
O sea, que ya le he quitado casi 15.
Y además, le he quitado páginas.
Esto se ha hecho, por ejemplo, los cómics.
Para que veas.
Porque pasa esto, ¿no?
Que me decían que había páginas que daban demasiados saltos.
Por ejemplo, lo de buenas prácticas de los cómics.
Pues lo que pasaba es que había demasiados espacios.
Y la verdad es que tenían razón.
Pues he quitado un montón de páginas así, vacías.
O sea, casi todas las páginas están llenas.
Estas, las que son de los títulos, ¿no?
Esta la tengo que escribir, ¿vale?
¿Verdad?
Pero que ahora se ven menos páginas vacías, a no ser que sean saltos de línea más normales.
De hecho, he añadido esto.
Esto lo he añadido.
Todas estas páginas son nuevas.
Claro, cuando son saltos de línea que no sepan.
Pero, vamos, que son mucho más llenas.
Pues eso.
Que ahora son 200 y algo.
225, sí.
Midu, ¿recomiendo alguno?
Aprendiendo Git, Fede, el mejor.
Y si no, pues el JavaScript for Inpatient Programmers.
Y si no, el que pondré dentro de poco.
El Auth, ¿cómo lo plantarías?
Nada, vamos a utilizar su pavés, ya para siempre, jamás.
La verdad no sería la actualización.
Bueno, a ver, si no quieres actualizarte aquí, ¿sabes?
Si no quieres poner el New Version Available, al menos si entras aquí,
aquí puedes ver cuándo lo he actualizado.
¿Ves? Pon aquí, última actualización, el 12 de noviembre.
Ya que entre hoy y mañana...
Bueno, hoy no.
O sea, quiero decir, hoy por el domingo o el lunes.
Yo creo que el domingo voy a intentar que tengas la nueva versión.
Y entonces la voy a descargar aquí otra vez.
Pero creo que lo mejor es que le des la versión para que te avise, ¿vale?
Y os van a ir añadiendo, llegarán todas las actualizaciones.
¿Qué opinas de la costumbre de la profesión?
¿Qué es decir los salarios entre compañeros como si fuese lo más normal del mundo?
Me parece de mala educación un poco.
Bueno, yo creo que es la gente que se quiere compartir su salario.
Me parece súper lícito.
Me parece bien.
Y a veces incluso puede ser sano.
Lo que me hace mal, en todo caso, es un tema más de que la gente, pues, a espaldas, ¿no?
De esta persona me he enterado que cobra tanto.
Eso sí que no me gusta.
Pero si es tu propio salario y lo quieres compartir, a mí me parece súper bien.
La gente que haga lo que le dé la gana.
O sea, no me parece mal.
¿Recomiendas alguno de JavaScript en español que no sea el de Azaustre?
Es que en español, ahora mismo no.
O sea, que yo me haya leído un buen libro de JavaScript en español.
Es que no tengo este.
¿Traducciones no oficiales?
Sí que hay alguno.
El de Eloy JavaScript lo están viendo.
Para mí no es el mejor Eloy en JavaScript en español.
Este creo que puede ser el más interesante.
Me gusta más el Deep Patient Programas.
Pero ese sí que no es tanto.
Es que no hay muy castellano.
No hay mucha cosa.
Bridal me dice...
Oye, Midu, ¿dónde me sugieres una Full Stack con No React y Mongo?
En Heroku, seguramente.
O Render.com, que te conocía.
Has usado Netlify muy poquito.
Midu, es muy bueno tu libro de Git.
Gracias, hombre.
¿Crees que podrás agregar cómo usar múltiples claves SSH?
Tuve muchos líos hasta que encontré esta guía en inglés.
Bueno, lo tendré en cuenta.
Miraré el artículo.
La verdad es que nunca lo he hecho.
No te voy a engañar.
O sea, nunca he tenido la necesidad de crear varias claves SSH.
O sea, lo que he hecho es usar la misma.
Y ya está.
No tengo más problemas con eso.
Pero nunca he usado más de una diferente para diferentes servicios.
¿Con qué software estás escribiendo el libro?
Lo estoy escribiendo con Visual Studio Code.
Directamente.
¿JavaScript qué dijo?
¿Qué libro?
JavaScript for impatient programmers.
Ese es mi favorito.
Estoy escribiendo un libro de JavaScript.
Aunque, claro, como ya está el de Carlos, por ejemplo, para aprender JavaScript desde cero.
Estoy escribiendo otro que es 100 preguntas sobre JavaScript.
¿No?
Y este...
Primero voy a acabar el de Git.
O sea, que no penséis que este lo vais a tener dentro de poco ahí en vuestras estanterías.
Pero...
Claro, es que aquí tendré una versión súper igual, ¿eh?
Por ejemplo...
A ver si tengo por aquí escrito algo.
Buah.
Es que esto parece una versión súper, súper, súper vieja.
Es que está vacío.
Vete a saber de dónde lo tengo.
Es que creo que lo tengo en el portátil.
Porque empecé a escribirlo en el portátil.
Y aquí...
Ya ves tú.
Bueno, la idea es que son más preguntas de JavaScript que muchas veces la gente se hace y entonces
te lo explica todo.
Por ejemplo, ¿qué es una función pura?
Bueno, es que aquí no está.
Pero te dice, una función pura es tal, te pone ejemplos y todo esto.
¿Cuál es la diferencia de Arrow Functions y todo esto?
Guau, pero es que esto es súper, súper, súper.
Coño, pensaba esa vía movida.
Madre mía.
Madre mía.
Qué p...
Tengo a Gruar.
Aquí, no sé, el dinosaurio este.
Y me había dado la sensación que se había movido el cabrón.
La madre que lo parió.
Ofu.
Gracias por tu tiempo con nosotros.
Estoy leyendo el libro que me recomendaste y me está costando aún.
Pero voy.
Gracias por tu recomendación.
Ah, un placer, hombre.
Eloquent está traducido.
Bueno, a mí que me gusta es el de Inpatient Programers.
¿Para buscar trabajo Angular React of You?
Pues dependiendo.
Pues dependiendo de lo que a ti te guste.
¿Para cuándo te has pensado esa versión física?
Para antes de que termine el año.
Así que...
Antes de que termine el año tendremos aprendido en físico.
Primera vez que he visto y llevo 8 horas.
Muy bien.
Homeless.
No está mal.
Casi 9 horas que hemos estado.
Tengo un montón de ganas.
Es el de React.
Primero va a ser el de Java.
Luego le daremos al de React.
Yo que tengo que reescribir.
No, hombre.
Voy a reescribir.
¿De quién es el libro que dijo en español?
Pues no sé.
¿Cuál es el que dije en español?
¿En el libro de Git enseña el historial de cómics?
Por ejemplo, cuando haces push de contraseñas.
Pues mira, Nacholo.
No lo explico.
Voy a explicar.
¿Veis?
El libro está al 80%.
Le falta un 20%.
Que es Gil Rebase.
Y hablar más de ramas.
Pero hay un montón de contenido.
O sea, está al 80% y tiene 225 páginas.
O sea, tiene contenido.
¿Vale?
Luego las actualizaciones serán gratis para la gente.
Pero sobre el tema que dices, ¿no?
En el libro enseñas a borrar historial de cómics.
Por ejemplo, cuando haces push de contraseñas.
Y Nacholo, lo que te explico en el libro, y eso sí que está escrito.
Es que yo te recomiendo que nunca borres el historial.
Nunca borres el historial de cómics.
Aunque hagas push de contraseñas.
Y tú me dirás.
Hostia, pero he hecho un push de una contraseña.
Pues es que entonces lo que digo en el libro.
Es que lo que deberías hacer es cambiar la contraseña.
¿Por qué?
Porque si tú reescribes directamente el historial.
Eso no hace que de repente esa contraseña, por lo que sea.
Sea segura de nuevo.
Una vez que tú en el historial está el cómic.
Tú ya no sabes quién ha podido ver en ese tiempo directamente eso.
O sea, que ya es demasiado tarde.
O sea, no tiene ningún tipo de sentido.
Yo lo evitaría al máximo.
Y al final el hacer el...
Bueno, si lo tienes en local sí que puedes hacer.
No solo el rebase.
Sino que puedes tirar para atrás los cómics, eliminarlos y todo esto.
Me refiero sobre todo en repositorios remotos.
Hablo de repositorios remotos.
Que no tiene sentido.
Que no vale la pena ya hacer ninguna sobreescritura ni mucho menos.
Así que eso.
¿Es importante aprender Docker?
Hombre, sí.
Acabo de comprar tu libro.
Gracias.
Es importante aprender Docker.
Al menos saber utilizarlo, sí.
Cuando puedas incluir en el libro de Git sobre rebase interactivo y...
Cherry Peak tiene.
Sí, hay un artículo de Cherry Peak.
El de rebase interactivo.
Mira, tengo rebase, rebase interactivo, stash.
Esos tres los tengo empezado en local.
Los artículos para hablar de eso.
De Cherry ya hablo.
O sea, hablo es un artículo entero.
El stash es el que tengo que poner.
Y es una cosa que utilizo un montón y es súper útil.
Pero vaya.
O sea, Cherry Peak lo tienes.
El de eloquent javascript.
Eloquent javascript en castellano.
Es este.
Paso el enlace.
React o Angular y por qué.
Hostia, perdonad.
Que me ha puesto el chuchú ese.
React o Angular y por qué.
¿Y por qué tengo que elegir?
Esa es la pregunta, ¿no?
¿Por qué tengo que elegir?
Si me preguntas a mí, todo lo que a mí me gusta más React.
¿Vale?
Me encanta React.
Por un montón de trabajo.
De que me gusta más conceptualmente.
Me gusta la libertad que te da.
Por un montón de cosas, ¿vale?
Pero yo, si tenéis que elegir vosotros.
O sea, utilizar React o Angular.
Porque los dos son súper válidos.
Y están súper genial, ¿eh?
O sea, que no...
No tenéis que...
¿Cuándo vas a coger la caravana?
A ir a visitarnos a todos.
Bueno, voy a estar con la caravana más en España.
Barcelona, Bilbao.
Zaragoza, todo eso.
Así que...
Tu nivel de inglés es...
Mi nivel de inglés es...
Me defiendo.
Ese es mi nivel de inglés.
No tengo un gran, increíble nivel de inglés.
Tengo uno lo suficientemente bueno.
Mira, aquí tienes lo de cherryplick.
Cherryplick.
Cherryplick.
Aquí dice hasta una imagen.
O sea, me ocurría que una imagen.
Ya no seguí con los vídeos de él, pero me gustaría volver.
O sea, que no...
Nunca digáis nunca.
Yo me defiendo en todo.
Yo soy de defenderme.
Bueno, amigos.
Nueve horas, ¿vale?
No está mal.
Nueve horas.
Muchas gracias a todos y a todas por vuestro tiempo.
Sobre todo por acompañarme.
Por lo bien...
Se me ha pasado volando.
O sea, a mí alguien me dice...
Oye, no.
Es que...
Vas a estar aquí nueve horas.
Que no sé qué.
Y...
Joder.
La leche.
La leche Becpol, tío.
O sea, Becpol.
Becpol.
Por las nueve subs.
Muchas gracias.
Vaya tela.
Vaya tela Becpol.
Eh...
Para conferencia de polvo sin traductor.
Voy yo solo.
Becpol.
Muchas gracias.
De verdad, eh.
Muchas, muchas, muchas gracias.
Me daba toque el 51.
Vaya tela.
Vaya...
Becpol.
No, hombre.
Dice...
No te vayas.
Claro, que me tengo que ir.
Habrá que irse a dormir.
Que si no, mañana cualquiera se despierta y tengo un libro que escribir.
Becpol.
Muchas gracias.
Joder.
60...
60 subs.
Esa locura, eh.
Dice...
A Becpol le mola su...
Será al revés.
Que...
Que...
Que me mola él a mí.
O sea...
Es que...
Joder.
Que muchas gracias.
Entonces hablan español y la comunidad que lo hablan.
No.
En Polonia lo haré en inglés.
Voy a hacer una presentación de 30 minutos en inglés.
Eh...
O sea que...
Que...
Hostia.
La postura, la postura.
La voy a hacer en inglés.
La podréis ver.
Podréis verme en inglés hablar.
Si ya tengo por ahí...
¿Cuándo sigue Codilink?
Pues la semana que viene.
La semana que viene seguro.
Me has dado tú con los vídeos y cursos.
No, hombre.
Muchas gracias.
Eh...
De verdad.
De corazón.
Joder.
Es increíble.
El pedazo de apoyo y...
A todos os lo agradezco un montón.
Espero que estéis súper bien.
Que disfrutéis mucho del fin de semana.
De nuevo Becpol.
Gracias mil.
Gracias a todos por acompañarme.
Los que hayáis estado nueve horas.
Sois lo máximo.
Buenas noches y que descanses.
Muchas gracias.
Buenas noches.
Sed buenos.
Voy a recalentar esto.
Y creo que me voy a tirar en el sofá un poco a comerme el último taco que queda.
Muchas gracias.
Cuidado mucho.
Os aprecio.
Buenas noches.
Buenas noches.
Gracias.
Que descanses.
Gracias.
No te preocupes.
Que ahora te lo resumo.
Mira.
Y ahora me estoy yendo.
Jajaja.
Adiós Diana.
Lauti.
Sergio Serrano.
Almuerzo desnudo.
Humberto Daniel.
Adiós Roland.
D'Artiles.
Chillo27.
Vedasquies.
Álvaro Walker.
Que viene para irse.
Carlitos.
Feralp.
Skulmap.
Violeta.
Jomar Sánchez.
Leo16.
Es gameplayer.
Jomar Sánchez otra vez.
Lemón González.
Kimiello.
Óscar Roby.
Juan Pablo Solana.
Chillo.
Neko.
Rafa.
Madre mía.
Estas nueve horas.
Gorusuke.
Darío de Shadow.
Tía Nero.
Pipe Woods.
Krumi.
Dadu.
AsturexD.
Patricio.
Julián.
Sed muy buenos.
Tened un fin de semana.
Fantástico.
Gracias por acompañarme con este clon de TikTok.
Nos vemos en el siguiente.
Nos vemos en lunes.
Sed buenos.
Chao.
Adiós.