Una inteligencia artificial que programa, ¿vale?
No que programa, pero que sí que te va a recomendar o sugerir líneas de código,
incluso funciones enteras, y funciona para diferentes lenguajes de programación,
TypeScript, Go, Python, Ruby, JavaScript.
Por ahora esos, no sé si luego, ¿ves? Aquí están.
Supongo que irán añadiendo más y más y más y más.
Por ahora son estos, ¿y cómo funciona esto?
Pues funciona en forma de extensión de Visual Studio Code.
Y la extensión la podéis instalar, ¿eh? La podéis instalar.
Mira, aquí busco Copilot. ¿Dónde estás, Copilot?
Aquí está, GitHub Copilot, ¿ves? Mira, Reload Required. Le voy a dar.
Parece ser que la han actualizado.
Me imagino que la estarán actualizando y mejorando ahora, mientras estamos hablando.
¿Veis? Esta es la extensión, esta la podéis descargar.
Veis que tiene aquí un preview, así que, bueno, que sepáis que está todavía en preview.
Pero lo importante es que no está abierta para todo el mundo,
sino que tenéis que ir a GitHub Copilot, a esta página,
y os tenéis que registrar aquí.
Le dais a Sync App y ya os dirá, bueno, pues estás en la cola.
En este caso, ¿ves? Yo ya la tengo activada en mi cuenta.
¿Por qué? Porque esto va con tu cuenta de GitHub.
Así que te tienes que iniciar sesión con GitHub, pedir acceso a GitHub Copilot,
y entonces la extensión te dirá, vale, pues necesito que te logues en GitHub.
Lo harás y ya tendrás acceso a las bondades de GitHub Copilot.
Alguien estará pensando, oye, ¿esto es como un TAP9?
No, es mucho mejor que un TAP9. Esto se fuquea, el TAP9.
No hay agujero por el que no le dé a TAP9, me parece a mí.
¿Por qué? A ver, pues vamos a ver una demo y os haréis un poco la idea, ¿no?
Perdón, no sé si hay niños en la sala, pero espero que no le importe.
No sé si funciona así tal cual, pero normalmente tú puedes poner ya un comentario directamente y decirle
Get the max number from an array.
Y aquí ya, mira, aquí este, mira, menuda, menuda sugerencia me ha hecho.
Me ha hecho como un comentario.
Vamos a poner una function que sea, ¿veis?
He dejado de escribir y fijad lo que ha pasado, ¿vale?
Lo que acaba de ocurrir es que a través del comentario este, ¿no?
Yo le he puesto un comentario, una línea antes.
Yo he puesto, vale, esto es una function.
Al principio me había dicho este comentario así random.
No tiene mucho sentido.
Pero entonces yo digo, bueno, voy a seguir escribiendo.
Voy poniendo function, espacio, pam.
Y lo que acaba de ocurrir aquí es que GitHub Copilot ha recuperado el contexto
de lo que yo estoy haciendo y me acaba de recomendar una función que hace exactamente
lo que acabo de poner en el comentario, tal cual, ¿vale?
Es una función que se llama max, que recupera, que se le pasa un array y devuelve el número
máximo de ese array.
Entonces le doy a tabulador, pam, y fíjate lo que pasa, ¿vale?
Ya tengo escrita pues toda la función.
Lo mismo podría decir, incluso ahora que tiene más contexto la función, igual si intento
min, ¿ves?
¿Qué pasa aquí?
Pues que ya ni siquiera le he tenido que explicar, ¿no?
El comentario, sino que viendo el contexto del archivo, he puesto min y ya he dicho,
ostras, es que tú ahora quieres hacer una función que recupere el número mínimo.
Y efectivamente es lo que quería hacer.
O sea que con esto lo que está pasando es que me está leyendo la mente, básicamente.
Fíjate en una cosa, que es que esto tiene cosas interesantes.
Si le doy al control enter, mira lo que me abre aquí.
Esto no se ha enseñado mucho y me parece muy, muy, muy, muy interesante.
Bueno, de hecho, ah, mira, en este caso como la solución es muy evidente, luego lo intentaremos
otra vez con otra, ¿vale?
Pero el tema es que tú puedes abrir aquí y te aparecen todas las soluciones que te ofrece.
O sea, esta es una de las que te puede ofrecer.
Claro, en este caso ha detectado que las soluciones son muy similares.
Y ves, te pone duplicates hidden.
Te las ha ocultado.
Y le puedes dar aquí, aceptar cualquiera de las soluciones que han aparecido, pues
accept solution y ya la tendrías.
Yo qué sé, podríamos seguir aquí escribiendo.
Fíjate, o sea, a veces se vuelve un poco, se envalentona, ¿sabes?
Dice, ah, vale, pues si ya has hecho un max y un min, pues esto será un zoom, por decir algo.
O sea, que ya empieza como ir a un poco a saco, ¿no?
Y ves, ahora sí, le he dicho, vale, voy a ver todas las soluciones que me dices.
Y ahora es él intentando averiguar qué es lo siguiente que voy a hacer.
¿Qué vas a sumar? ¿Qué vas a hacer?
Creo que esto es la media, si no me equivoco.
El average, el min, que es como el que...
El min, creo que es como la media, ¿no?
También, sí.
Pues fíjate, mira, aquí incluso en estas soluciones está utilizando una función previa.
O sea, una función, bueno, pero este average no podría funcionar, ¿no?
Este zoom, porque si no tiene esta solución, ¿cómo va a funcionar?
No, este zoom no existe.
Ahí la ha liado.
Bueno, tened en cuenta una cosa, que esto es súper importante.
Por muy buena que sea esta inteligencia artificial,
las recomendaciones que hace todavía necesita que tú revises que están bien, ¿vale?
Tú puedes poner aquí lo que sea, validate phone number from string, ¿vale?
Y ves, mira, ya me ha dicho todo esto de la función.
Le voy a dar al tabulador.
Ahora voy a dar enter y fíjate, ya me la ha solucionado.
Me la ha solucionado.
Ya me ha hecho el validate phone number entero, enterito, enterito, ¿vale?
¿Qué pasa?
Claro, que el validate phone number, esto que está haciendo aquí,
tened en cuenta que esto lo ha recuperado de un millón de sitios, ¿no?
De todo el código abierto que tenga la licencia GPL.
Claro, una licencia que sí que le permita leerla y poder estudiarlo y todo esto.
Pero a lo mejor esto no es exactamente lo que necesitas, ¿vale?
O sea, que tienes que revisar el código que realmente hace lo que necesitas,
que lo haga bien, porque a lo mejor esta validación de un teléfono no es exactamente.
Lo digo porque mucha gente está como asustada, ¿no?
De, ostras, es que me va a quitar el trabajo.
A ver, tampoco nos pasemos.
Si ya veis que necesitáis todavía revisar un poquito, ¿vale?
Bueno, leo un poco, ahora que hemos hecho esta demo.
Y le doy las gracias al señor Obis, que se ha suscrito con Prime.
A Chávez, el crack, que me ayuda con los vídeos de YouTube.
Que ha renovado su suscripción y ya lleva cinco meses de suscripción.
Muchas gracias y gracias por tu ayuda, crack.
Y también Dorian Designs, que ya seis meses.
Oli, ¿qué tal?
Muchas gracias por renovar tu suscripción.
Muchas, muchas gracias.
Como veis, sobre todo entiende inglés, pero entiende idioma, o sea, lenguaje de humanos
y también lenguaje de programación, que esto es lo realmente novedoso.
Brian Argel dice, hay que tener claro lo que está pasando.
Microsoft es un monopolio y ha hecho cosas de probables años atrás.
Ahora crean esta herramienta, nosotros lo vemos como una ayuda,
pero en realidad ese es el pensamiento de Microsoft a futuro.
Si nosotros, sí, nosotros somos indispensables,
pero no nos dejemos llevar de lo que está pasando
y compartir nuestros repos con algo que quiera ayudarnos,
no estamos practicando nuestra amiga la IA.
Bueno, bueno, es interesante, es interesante, me gusta.
Estamos practicando nuestro reemplazo, en mi punto de vista.
Guau, guau, guau.
Hay gente que veo que no le han aceptado la beta todavía.
Bueno, tened paciencia, pensad que esto va a ser un producto de pago.
Muy poca gente también comenta esto y hay mucha gente que también no lo ha entendido.
GitHub Copilot os puede asegurar al 100% que va a ser un producto de pago.
Se tendrá que pagar por esto que has visto, ¿vale?
No va a ser gratuito.
No sé si habrá una especie de, no sé, de free tier
en el que puedas tener 100 autocompletes, no lo sé, no lo sé.
Pero que será de pago, que esto, la idea es pagar por ello, eso va a ser así.
Bien, ¿entiende el español?
Probemos, ¿no?
Vamos a poner algo, yo qué sé.
Eliminar los espacios de un string.
¿Vale?
Entiende el español.
Mira, está con el trim y esto básicamente lo que hace es eliminar los espacios de un string.
O sea que sí, entiende el español también.
Muy bien, o sea, es políglota.
¿Qué os parece?
Lo ha dicho el blog, gracias, hombre.
GPT-3 no se esperaba que programe y lo hizo.
Ya ves, no se esperaba y ahí está.
Han sacado para lograr esto, esto está basado en OpenEye, ¿vale?
Esto es una empresa que tiene, que es de Elon Musk, si no me equivoco.
Bueno, entre ellos también, veis que aquí tenemos unos cuantos, pero tenemos Elon Musk.
Y bueno, pues al final lo que es, es como para investigar sobre inteligencia artificial
y todas estas cosas y tienen ahora un algoritmo que se llama OpenEyeCodex.
En este está basado este GeekHack Copilot, que bueno, ya veremos.
Supongo que Microsoft, que puso mucho dinero en esta empresa, muchísima pasta,
me imagino que tiene algún tipo de, no sé, de exclusividad o algo.
No creo que cualquiera lo pueda utilizar ahora porque sí.
Así que, bueno, creo que GeekHack Copilot a los juniors nos afectará un poco más que a los seniors,
pero no creo que nos quitará el trabajo.
Yo, y esto os lo digo sinceramente y de corazón, yo creo, creo que no va a afectar a día de hoy absolutamente
en nada a los juniors, a los seniors ni a nadie.
A día de hoy, primero, porque todavía esto está en el aire, hay que tener en cuenta que la computación que tiene
es bastante cara, habría que ver el precio final que tiene.
Si es que al final sale, porque en la propia página web avisa, dice, oye, que esto es una prueba,
que igual no vale la pena y no lo hacemos.
O sea, que ojo, ¿vale?
Lo segundo, yo no creo que le quite esto el trabajo a nadie.
Tened en cuenta que no hay que confundir, cuando programamos, mucha gente se cree que nos pagan
por escribir líneas de código y no.
Nuestro trabajo como programadores es solucionar problemas, ¿vale?
Entonces, si os fijáis, muchas de las cosas que nos está haciendo GitHub Copilot es darnos soluciones
que realmente podríamos encontrar en Stack Overflow y cosas así.
A día de hoy no está solucionando un problema, sino que es como pequeñas funciones.
De hecho, una de las recomendaciones que te hace GitHub Copilot es intentar utilizar funciones pequeñas,
porque cuanto más pequeña es la función, mejor.
O sea, son cosas muy unitarias, no problemas de un usuario real.
Un usuario no te va a pedir, búscame el número máximo de un array, no.
Sino que te dirá, bueno, quiero hacer una compra de un producto.
Y ahí es donde yo creo que entra el tema del programador y la programadora, ¿vale?
Así que yo no creo que, ni a Juniors, ¿eh?
De verdad, yo creo que a Juniors a lo mejor les puede ayudar a celebrar un poco su trabajo.
Un poco, ya veremos cuál es el precio de todo esto.
Recién me avisa el bot, hay que pagarle más, le pagaremos más.
En una encuesta, en la encuesta ha salido, ha salido, a ver, que enseño la encuesta,
porque hemos hecho una encuesta para ver qué era lo...
A ver, a ver.
Hemos preguntado a quién le iba a afectar más.
Y en la encuesta ha salido que a los backend.
Los backend con un 32%.
Voy a poner por aquí los resultados.
Los backend con un 32% son los que deben temer más a Geekhacko Pilot.
El segundo es Midu.
Soy yo el que tengo que temer a Geekhacko Pilot.
20 personas dicen que soy yo la persona que tiene que temer a Geekhacko Pilot.
Mejor que me tenga mi miedo a Geekhacko Pilot.
Que le meto un bocado que le quito hasta las ganas de dar sugerencias.
O sea, vamos.
Los frontend, 14 personas.
La panadera, 8 personas.
Digo panadera porque debajo de mi casa hay una panadería y siempre está la panadera.
Y this is fine, vale.
Y Jason Soul ha contribuido con puntos y todo para votar.
Me imagino que a Almidu, no sé a quién ha votado el Jason Soul.
Bueno, pero gracias por votar.
Vosotros creéis que a los backend, o sea, los backend son los que lo tienen peor con Geekhacko Pilot.
Es interesante, es bastante interesante, ¿no?
Y es verdad que hay un montón, a día de hoy, un montón de servicios que hacen que los backend,
no es que no sean necesarios, pero sean más opcionales.
En el sentido de Firebase o Superbase.
Cada vez hay más servicios.
Airtable.
Cada vez hay más servicios.
Y yo tengo muchos desarrolladores que son backend que me dicen, ostras, estoy preocupado.
Pero yo le digo, bueno, pero a ver, piensa que a las malas pues trabajarás en una empresa de este estilo, ¿no?
Como Airtable.
Dice, pero bueno, a lo mejor cada vez hay menos trabajo.
Puede ser, pero yo todavía no lo percibo.
No lo percibo así, la verdad.
Gantit, muchas gracias por suscribirte con Prime.
Gracias por siempre compartir tu conocimiento, dice.
Nada, sigue así.
Así seguiré.
Y sobre todo con vuestro apoyo.
A ver qué más me contáis.
¿Afectará nuestros sueldos?
Yo creo que no, ¿vale?
Yo no creo que, a ver, no tiene sentido que os bajen el sueldo.
Es como si hoy en día dijésemos que os van a bajar el sueldo por visitar Stack Overflow.
Es que no tiene sentido.
No.
Yo no creo ni que bajen los sueldos ni nada.
De hecho, yo creo que esto puede ayudar a ciertos desarrolladores juniors.
Y ya veremos.
Es que esto va a tener un precio, ¿vale?
Va a tener un precio.
Gihaco Pilot va a costar dinero y ya veremos cuánto.
Y sobre todo para grandes empresas será más costoso todavía.
Esto no viene gratis.
Así que no os preocupéis.
¿Cuando salga la primera versión comercial te lo compras lo que cueste?
La verdad es que no.
Yo en mi caso no.
Por ejemplo, Tab9.
Tab9 a mí es un producto que personalmente me sabe mal, ¿no?
Porque Tab9 me escribió para promocionarlos y tal.
Pero, claro, dije, es que no los puedo promocionar.
Porque a mí es un producto que no me funciona muy bien.
¿Y qué digo en el vídeo?
Que realmente a mí no me gusta.
Es que no tiene sentido.
Entonces, prefiero no engañaros.
Además, son 12 dólares al mes por usuario.
Hombre, es carillo.
Y teniendo en cuenta que a mí, yo por lo que he intentado la versión Pro de prueba,
a mí no me funciona muy bien.
Ya veremos cuánto cuesta.
Si IHack Copilot, la verdad es que funciona a mí.
Me funciona un poquito mejor que Tab9.
Me parece más útil.
Pero a ver el precio.
Si son 20 dólares al mes, ojo, ¿eh?
Es bastante dinero.
No está mal.
No está mal.
Me lo pensaré.
Me lo pensaría.
Depende, depende.
Ya sabemos lo que puede hacer el monstruo de Microsoft.
Vaya, Microsoft es como que al principio muy amiguitos, ¿no?
Ahora veo que tenéis un poquito...
Hola, Amidu, ¿tienes acceso a Copilot?
Sí, sí que lo tengo.
De hecho, vamos a preguntarle algo aquí a Copilot.
Dice...
Do I have access to GitHub Copilot?
Mira.
A ver qué me dice.
Mira, lo intenta, ¿eh?
Has GitHub...
Oye, ¿no me digas?
Ah, mira.
No, no.
No.
Está intentando hacer algo, pero no.
¿Veis aquí?
O sea, se equivoca.
No siempre es perfecto lo que hace, ¿vale?
O sea, que tenerlo en cuenta.
¿Ves?
Aquí le he preguntado.
Si tengo acceso a...
Pues esta función lo que ha hecho es inventarse algo.
Pero si hacemos fetch latest tweets from user, ¿vale?
Y le doy al enter, ¿ves?
Ya aquí empieza un poco más la magia, ¿eh?
Aquí empieza un poco más la magia.
A ver.
Ay, mira.
Pensaba que me...
Ahora.
Fíjate todo el código que te está dando.
Todo el código.
Pero claro, esto es importante, ¿vale?
Que mucha gente...
Y de hecho en la web lo dicen.
Hay que tener en cuenta que este código que nos está sugeriendo viene de un montón de repositorios.
Un montón de repositorios, ¿no?
Entonces, no es un buscador.
Eso lo primero.
No es que ha buscado este código y te está dando un snippet que ha encontrado.
Esto es súper importante.
Lo que está haciendo es generar este código a través de un montón de sugerencias y muestras que ha encontrado.
Y se supone que lo ha generado.
Digo, se supone.
Y de esto os hablaré después.
Pero hay que revisarlo también.
Porque, vale.
Yo le doy.
Y esto a lo mejor, a lo mejor, hace lo que quiero, ¿no?
Que es recuperar los tweets de un usuario.
Pero fíjate.
Estoy utilizando variables.
Var.
Que yo en realidad quería utilizar.
Pues yo utilizaría const, ¿no?
Aquí, pues no.
Está utilizando más usernames.
Pero yo quería un template string.
Luego, aquí habría que ver en realidad cómo, si realmente esto está funcionando.
Porque suena un poquito raro.
De hecho, aquí está concatenando, por si, imagínate que yo solo quiero los últimos.
De hecho, le he puesto aquí los últimos.
Pues aquí esto se vuelve loco y se pone a concatenar si tiene más ítems.
O sea, esto se puede volver loco.
O sea, hay que revisar el código.
Conforme más líneas tiene, más necesario es revisarlo.
Y para revisarlo se necesitan ojos humanos.
Así que ya te digo que, por ejemplo, yo, de esto que me acaba de dar, yo no me fío.
Nada.
No está utilizando fetch.
Claro, como al final es el código que tiene, pues no puede inventarse el código.
¿Vale?
Pues parece que ahora tendremos que mirar el tratamiento de datos y cloud.
¿Quieres ser gerente del Team Copilot?
¿Tienes 10 años de experiencia con Gija Copilot?
¿Copilot solo está para JS, para JavaScript?
No.
También está, por ejemplo, para TypeScript.
Para TypeScript, para Go, para Ruby.
Yo qué sé.
Vamos a hacerlo con TypeScript.
Fetch YouTube videos from channel.
¿Vale?
Y aquí, ¿ves que voy a poner un channel ID?
Voy a intentar hacer directamente la función.
¿Vale?
Porque vais a ver que hay como diferentes formas de que funcione.
¿Vale?
¿Veis?
Pues, en este caso, ha funcionado ya utilizando directamente lo que sería el nombre de la función.
Esto es TypeScript, aunque no lo parezca, ¿vale?
Pero es TypeScript.
Lo que ha hecho es, solo leyendo el nombre de la función y los parámetros que le he pasado,
ha dicho, ostras, pues yo creo que aquí te vendría bien este código de aquí.
Bueno, que ahora no sé por qué no me lo está dando.
Pero ahora, ¿ves?
Ahora le puedo dar a OpenCopilot y aquí tendríamos todas las soluciones que serían interesantes.
Fíjate una cosa.
Tienes el destino de GeekHackCopilot en tus manos y tus decisiones.
¿Por qué?
Porque cada vez, cada vez que nosotros...
Otra forma de hacer esto, por cierto.
Aquí.
Creo que, si no me equivoco, a ver, poniéndolo encima, veis que pone Next, Previous, Accept.
Podéis ir dándole a Next.
Bueno, se ha vuelto tonto.
Es que esto todavía está un poco...
Vale, pero ¿veis?
Le podéis ir dando a Next y os va recomendando diferentes soluciones.
Fíjate, ¿vale?
Son muy similares.
Al final son bastante similares.
Pero la elección de cuál hagamos determinará cuál es la que va a recomendar a lo mejor después.
O sea, que nosotros vamos a estar mejorando la sugerencia en este caso.
Esta, por ejemplo, parece una muy buena selección conforme a lo que he dicho.
Pero ¿veis?
Este YouTube API Key no existe.
No lo podéis encontrar.
Pero, bueno, esto, por ejemplo, es TypeScript y aquí lo está haciendo correctamente.
Con TypeScript también funciona.
Con Ruby, con Python, con Go también funciona.
Y poco a poco iremos viendo más.
Pero con HTML, por ejemplo, que yo sepa.
Vamos a verlo.
¿Quién sabe?
Pero, nada, ¿ves?
No está haciendo nada.
Aquí esperaría que me pusiera un Lee.
¡Oh, sí que funciona!
No sabía.
No lo había probado.
Pero es muy raro, ¿eh?
Es que, claro, es más difícil, ¿no?
En un archivo...
Pero, ¿veis?
Sí que me ha puesto ahí una recomendación.
No lo había probado todavía con HTML.
Así que, fíjate, nunca te acostará...
Pero es muy random esto que está pasando.
Es difícil cuando no tiene un contexto.
Por ejemplo, mi dev blog.
Vamos a poner esto.
Vamos a poner...
A ver si tiene un poquito más de contexto.
H2.
This is an awesome development blog articles.
Y ahora aquí le pongo...
Mira, ya me he recomendado una P.
A ver si me escribe un artículo.
¡Hostia!
Mira, este...
Esta línea...
Esto ha tenido que encontrarlo de algún sitio.
O sea, esto ha tenido que encontrarlo de algún sitio.
No sé de dónde, pero...
O si lo ha generado...
No sé qué está generando aquí.
Es súper raro.
Súper raro.
Es interesante ver las cosas que...
Mira, la A...
Las cosas que va diciendo y que te va creando.
Pues mira, con HTML también funciona.
Me imagino que con CSS...
Pues también.
A día de hoy...
Esto es importante.
A día de hoy...
El contexto que utiliza Githack Copilot...
Es a nivel de archivo.
¿Vale?
No a nivel de proyecto.
¿Por qué esto es importante?
Hombre, porque cuando tenga a nivel de proyecto...
Esto va a ser...
Va a ser otro nivel.
¿Vale?
Mira, background...
Sí que me va diciendo, ¿eh?
Me va recomendando...
Mira, mira.
Me está recomendando hasta un estilo.
¿Queréis que hagamos una página web?
¿A ver qué estilos le hace?
¿Lo hacemos?
¿Creamos una página web a través de...
A través de Githack Copilot?
Os voy a leer.
Y ahora hacemos eso.
Creamos una página web...
Solo con las recomendaciones que nos vaya dando Githack Copilot.
A ver qué hace.
¿Vale?
¿Cómo van?
Venga.
Dice que hay 60.000 descargas y 16 reviews.
60.000 descargas.
O sea, 60.000 personas ya tienen acceso.
Chuchu.
Gracias por...
Por, hombre.
Desbloquear el tren del hype.
Bichito of Coco.
Gracias por suscribirte con Prime.
Stack Overflow está nervioso.
Creo.
Mucha gente habla de esto, ¿no?
De quién va a perder el trabajo aquí, ¿no?
Los programadores.
Adiós, programadores.
Y yo creo que la gente que tiene que estar preocupada aquí es, por un lado,
Tap9 y Quite, porque obviamente es su negocio.
O sea, este es el negocio de esas empresas.
Y me parece que claramente va contra su negocio.
O sea, no tengo ningún tipo de duda.
Así que yo creo que esas son las que deberían estar más preocupadas.
Y por otro lado, quizás Stack Overflow.
Y con toda la razón del mundo.
¿Por qué?
Porque te está evitando esa búsqueda.
Si ya no sabes buscar el número máximo, es que le pones un comentario y te lo dice.
Así que yo estoy de acuerdo que esas son las dos.
Estoy totalmente de acuerdo.
Stack Overflow y empresas como Quite y todo esto.
A ver, vamos a probar esto que dice...
A ver, vamos a poner...
Center de Element.
Mira, Central Elemento, Margin Zero Auto.
The Screen.
A ver.
Margin Auto, Max Width.
Bueno, aquí ya se le está...
¿Habéis visto que incluso me está recomendando comentarios?
Es curioso, ¿eh?
Como ha visto que le he puesto un comentario acá arriba, ha dicho...
Ah, pues sí, hombre, yo te voy poniendo comentarios.
Aquí ya se le va, ¿no?
Porque este background color...
Yo ya tenía un background color.
Pero bueno.
Pero no está mal, ¿eh?
O sea, ha visto el estilo y ha dicho...
Ostras.
Vale.
A ver, que os leo un poquito.
Madre mía, es que voy súper atrasado con el...
Voy súper atrasado.
A ver.
F, programadores.
Toma agua, ya, güey.
Ya está, mago.
He probado.
A ver, agua por Héctor.
Michael, que quiere que me ponga el reto.
Vale.
Todos los que habéis pagado por el agua va por ustedes.
Perdonad.
Es que me pongo aquí con esto.
Hidratación a vuestra salud.
Un decode.
Un poco tarde, pero acá andamos.
Un abrazo.
Un decode.
Tendrá mucha más prioridad los tests.
También nos ayuda para el tema del testing.
Lo podemos mirar.
¿Cómo se puede instalar?
A ver.
¿Instalar se puede instalar la extensión?
Ya.
Solo tenéis que ir a extensiones, buscar GitHub Copilot e instalarlo.
Pero de nuevo necesitáis acceso a la beta.
Y para eso tenéis que ir a la página de copilot.gihab.com y pedir aquí en SyncUp.
Y estaréis en la lista de espera.
Y si tenéis suerte, os llegará un correo pronto.
Vale.
Deja de decir tonterías.
No le va a pasar nada a los juniors.
No sé quién está diciendo tonterías.
Jota, si yo he sido el primero que digo que no le va a pasar nada a los juniors.
O sea, que a lo mejor yo tonterías digo muchas.
Pero a lo mejor es tú que no sabes leer o no me sabes escuchar.
Yo qué sé.
¿Qué quieres que te diga Jota?
O sea, a ver, de nuevo, yo no creo que le pase nada ni a los juniors, ni a los seniors, ni a nadie.
De verdad.
No creo ni que bajen el sueldo, ni nada de eso.
Yo estoy en camino para ser junior y no sé cómo sentirme.
Pues no te sientas mal.
De verdad, no os sintáis mal, no le va a pasar.
Ah, a lo mejor se lo decía otra persona en el chat.
Pero bueno, que no os tengáis que sentir mal, que no os preocupéis, que no ocurre nada.
De verdad, que al menos a día de hoy es muy interesante, pero no va a quitarle trabajo a nadie.
La beta gratis, totalmente gratis.
Está por aquí.
Aquí tenéis una demo, por cierto.
Mira, este ejemplo es brutal, ¿eh?
Este ejemplo me parece muy interesante.
Vamos a ver si este ejemplo funciona.
Un momento.
Vamos a la parte de TypeScript.
Lo que dice este ejemplo es que tú puedes tener un comentario así, con el JSON Schema.
Imagínate, aquí tenemos un array y tú le dices, este es el JSON Schema.
Yo me imagino que además va a funcionar muy bien con TypeScript y cosas así.
Eso puede ser muy, muy, muy interesante.
Así que, bueno, a ver qué tal.
JSON Schema.
Vale, y aquí dice que le puedes decir, vale, pues una function de getNameFromCollaborators.
Mira, fíjate, es justo lo que estaba pensando.
A ver, no es exactamente, no, no es exactamente lo que estaba pensando, pero no está mal, ¿eh?
No está mal.
O sea, ha detectado, gracias al contexto del archivo, ¿veis?
Aquí teníamos el JSON Schema, el name, collaborators, y le he dicho, getNameFromCollaborators.
Y lo que ha hecho es aquí, pues nada, con collaborators, los mapea, recupera el name, y aquí me está haciendo un join.
Que a ver, no quería el join, pero no está mal.
A lo mejor soy yo que he puesto mal el nombre, ¿no?
O sea, que a lo mejor tendría que ser, a ver, MapCollaboratorsNames.
¿Ves? Esto es lo que quería.
¡Guau!
Está muy chulo, ¿eh?
Está muy chulo.
Y solo, claro, esto es gracias al contexto que lo hemos puesto aquí.
¿Veis?
Que como sabe justamente esto, vamos a poner otra.
Bueno, FilterWithoutCollaborators.
Bueno, no sé exactamente.
FilterEmptyCollaborators.
Este sí, este sí que está bien.
No está mal, ¿eh?
No está mal.
La verdad es que muchas veces es sorprendente decir, ostras, que realmente hace...
A veces hay que probarlo más de una vez, ¿no?
Pero, bueno, no, no, no, no, no está nada mal, no está nada mal.
No está nada mal.
Nos va a ayudar, nos va a ayudar, ¿eh?
Nos va a ayudar.
A ver, la beta es gratis, sí, la beta es gratis.
Pero, bueno, hasta entiende todos los lenguajes.
Sí, esa es otra, que entiende todos los lenguajes.
Gente, no va a afectar.
Tarde o temprano hará falta que esos juniors se conviertan en seños o los seños ya no se jubilan.
Claro, hombre, siempre.
Pero no sé por qué tanto susto.
Lo que hacemos en Buscar y Copiar y de Google lo hacemos desde Visual Studio.
Claro, o sea, es como si ahora dijésemos, no tiene, o sea, no tiene mucho sentido.
O sea, ahora mismo ya buscamos en Stack Overflow, ya buscamos en la documentación.
O sea, esto que está ocurriendo aquí, ya os digo que ya lo hacemos.
O sea, que, bueno, va un poco más rápido.
Va a hacerlo un poco más rápido.
Así decían con los taxistas.
Bueno, y los taxistas ahí siguen.
La gente cree que esto ya está a nivel de la Matrix.
No, todavía no.
Pero, bueno, poco a poco.
Viene a reemplazar Stack Overflow.
Sí, nos va a hacer la vida un poco más fácil y más rápida.
Nos va a ayudar a resolver problemas chicos, pequeños, exacto.
Pero una funcionalidad particular para una empresa.
Sí.
Le pones, hacemos una tienda online y te la programa.
Sí.
Vamos a ver.
A ver.
Haz una tienda online.
De productos.
Mira, de productos.
Autocomplete, ¿vale?
Pues de productos.
A mí la de productos.
Cada producto tiene un precio.
Una excursión, un stock.
Esto me está contando una historia.
El stock se decrementa a una cantidad por el precio.
Cuando el stock es cero, se elimina el producto.
Cuando el stock es cero, se elimina el producto.
Otra vez.
Ay, ay, ay, que ha entrado un bucle.
Hemos roto la inteligencia artificial.
Hemos roto Geekhack Copilot.
La hemos roto.
No lo hemos cargado.
Ya está.
Ahora se ha quedado un bucle.
Ya no sabe cómo salir de aquí.
Esto nos pasa por...
A ver.
Crea una empresa.
Crear empresa que me haga millonario.
Es raro, ¿no?
Que la sugerencia, cuando no sabe muy bien, pues te diga exactamente lo mismo.
Supongo que esto es...
¿Por qué pasa esto?
Supongo que lo que está pasando aquí es que lo más parecido a esta intención
es exactamente lo mismo que has puesto, porque no encuentra nada similar, ¿no?
Y lo único que encuentra es justamente lo que acabas de escribir.
Me resulta bastante curioso.
Curioso.
Cuanto menos curioso.
Bueno, bueno.
Vamos a ver.
Yo creería que en una empresa grande hace que menos programadores se encarguen del mismo trabajo.
No, no creo.
Es como tener snippets sin hacerlo, totalmente.
Yo diría que es más temer.
Es una tremenda ayuda para mejorar la productividad.
Yo creo que lo que nos va a permitir es preocuparnos de problemas mucho más interesantes.
¿Has visto el ejemplo en el que recrea todo el código de Quake?
Tendrán que corregir muchos problemas con tantas licencias.
Eso es un tema muy, muy, muy, muy interesante.
Ese es un tema muy interesante.
El hecho es...
Gihaco Pilot, todo el código que vemos, ¿no?
El código que genera, en realidad lo genera, ¿vale?
No lo extrae.
Pero claro, en realidad si yo le digo get latest post from Hacker News y le doy aquí...
Hostia, ahora no sé por qué solo me salen comentarios.
Se ha quedado loco.
Yo creo que ya no es capaz de...
A ver, vamos a quitar todo esto.
Fetch latest post from Hacker News.
No te creas que tal pobre que lo he dejado un poco tonto y todo.
Function.
Vale, get latest post.
Ahora sí que lo ha hecho, ¿no?
Claro, en realidad todo este código que estoy viendo yo ahora, todo este código, ¿de dónde sale?
Vale, sí.
Lo está generando, ¿está claro?
Lo está generando.
Pero, ¿quién me dice a mí que esto no lo ha recuperado leyendo Gihab, ¿no?
Y que todo este código línea por línea venga de algún sitio.
Que a ver, este código tampoco es que sea el mapu ni todo el mundo.
Pero que realmente este código se le haya...
Haya un código en Gihab de donde lo ha sacado que sea línea por línea igual.
Entonces, es lo que decía justamente aquí Monify, ¿no?
Que decía, ¿has visto el ejemplo en el que recrea todo el código de Quake?
Tendrán que corregir mucho los problemas con tanto a licencias.
Si este código se lo...
Básicamente está basado en otro código y resulta que es el mismo.
Si es una licencia GPL, tendríamos nosotros ahora de repente...
El tema es, ¿cuál es el límite del copyright?
¿Cuál es el límite de las licencias?
Porque, claro, un código que es generado a partir de algo que ha aprendido, una inteligencia artificial, prevalece la licencia en la que se ha basado.
Ahí os lo dejo y os voy leyendo.
A ver.
Yo creo que es una herramienta que ayudará a escribir código de manera más rápida, pero aún así la lógica lo seguiremos teniendo los desarrolladores y por eso no es que sea tan malo como parece, creo.
Ahora sale la alternativa gratuita de Google.
Bueno, hay una alternativa gratuita que es muy, muy, muy interesante.
Muy interesante.
Oye, por cierto, por cierto, mirad, eh, que estaba aquí pendiente, que no se diga, que luego me decís, no, no estaba pendiente.
España pasa las semifinales, ahí, en los penaltis, porque nos gusta, nos gusta sufrir.
Pues eso, que hemos pasado las semifinales.
Se ve que han fallado unos cuantos penaltis, pero, ¿ves?
Yo estaba haciendo aquí el directo y no se notaba nada y de vez en cuando iba con el riojo y iba viendo los penaltis.
Increíble.
¿Cómo han podido sufrir tanto?
Hay que ver.
Bueno, lo que os decía.
Mira, el tema es, el tema es que ya hay una alternativa gratuita que es muy interesante, que, ¿cómo era?
CapTime, CapTime Stack.
No sé si la conocéis.
Es una alternativa totalmente gratuita y de código abierto de Github Copilot, que no está nada mal, ¿vale?
Lo que pasa es que todavía no la podéis instalar en la versión actual de Visual Studio Code.
¿Por qué?
Mira, es como funciona.
¿Es así?
Tú le pones un comentario.
Find JavaScript Binary Search.
Y mira, ¿ves?
Autocomplete con todo, con todo.
¿Qué es lo que hace esta extensión?
Que es súper interesante.
Lo que está haciendo esta extensión es buscar el comentario en Stack Overflow y extraer la primera respuesta correcta y te la pega.
¿Qué te parece?
Y ya está.
Y la verdad es que tiene un efecto guau igualmente.
Os lo voy a poner por ahí porque, pues, si os interesa, pues, echarle un vistazo.
Aunque ya os digo que no es compatible todavía con la versión actual de Visual Studio Code.
¿Por qué?
Porque esta API, esta API que habéis visto aquí, o sea, este autocomplete, esta cosa aquí, como que se ve un comentario y tal, esto es una funcionalidad nueva de Visual Studio Code.
O sea, la están estrenando con Github Copilot.
No hay nada, ninguna extensión que utilice esto.
Y está en modo prueba en el editor.
O sea, es una API que no la puede utilizar cualquier extensión.
Y entonces, pero sí que está activada en Visual Studio Code Insider.
Así que si instaláis la versión Insider, sí que podríais instalar esta extensión.
Si no, no funcionará.
Pero, bueno, la siguiente versión de Visual Studio estará y la podríais utilizar.
Y, hombre, no, a lo mejor no es tan guau como la de Github Copilot, pero funciona bastante bien.
¿Puedes intentar algo así?
¿Crear un componente de React con Tepsi que devuelva o no la mundo?
Venga, claro que sí.
Venga, vamos a crear, vamos a, voy a crear un proyecto que tengo, voy a crear aquí el proyecto, Github Copilot, ¿vale?
Github Copilot, voy a abrirlo aquí.
Claro, me fío, si todavía no he escrito nada.
Y vamos a poner aquí index.tsx, ¿no?
Y vamos a poner crear un componente.
Vosotros decidme cosas que queréis que pruebe, que me gusta.
Que devuelva un hola mundo, ¿vale?
Crear un componente de React.
Vale, bueno, es raro que me lo pone como un comentario.
Qué raro, ¿no? Esto.
Yo creo que aquí, ¿veis?
Me lo está haciendo todo como un comentario.
Vamos a, vamos a intentar darle un poquito de, no sé, from React.
Vale, que tenga un pelín más de contexto.
Porque igual, crear un componente de hola mundo.
¡Ojo!
¿Habéis visto el cambio?
Es que el contexto es importantísimo.
Ahora sí que me lo ha hecho, ¿eh?
Cuando no tenía el import, ¿qué es lo que pasa?
Que él mira el archivo y dice, vale, ¿cómo está y tal?
Como yo he empezado el archivo con un comentario, ha dicho, ah, pues es que todo va a ser comentarios.
A lo mejor es que es un ejemplo, vete a saber.
Pero cuando ya le he puesto en la primera línea el import, ya me ha dicho, ¿habéis visto esto?
Mira, mira, mira.
Dice, export function, hello world.
Venga, va, enter.
Pam.
¡Hostia!
Pues me acaba de escribir un componente de React con TypeScript que devuelva un hola mundo.
Bueno, y le he puesto justamente con TypeScript que devuelva un hola mundo.
A ver.
Crear un componente.
Ahora no voy a decir que es de React.
Un componente que sea un contador.
Un componente.
Voy a hacer un componente con estado que tenga un contador.
Bueno.
Ahí va.
Ahí va intentándolo.
Ahí va intentándolo.
Además en castellano lo estamos intentando.
¿Los data scientists tienen algo que temer?
Yo creo que no.
Yo creo que justamente los data scientists les puede ayudar mucho esto, ¿no?
Lo mismo pasaba con los autos que manejaban solos o estacionaban solos.
Todos temían que reemplazar a los choferes.
Sin embargo, al final nada reemplaza.
A ver.
Estoy de acuerdo con lo que dice Beburmi.
Pero la historia de la humanidad trata de esto.
O sea, la historia de la humanidad siempre ha habido algo que ha intentado reemplazar
algo y es normal.
Y es normal tenerle miedo porque es un sentimiento normal que nos empuja a ir hacia adelante
también, ¿sabes?
O sea, pone en peligro el status quo en el que estamos.
O sea, es que es comprensible.
Pero de alguna forma este miedo lo que hace es justamente que intentemos explorar algo
en la siguiente etapa.
Por ejemplo, cuando se automatizaron muchos procesos en la revolución industrial.
Pues quieras o no, aparte de mucho trabajo en las fábricas, también la gente intentaba
buscar trabajo de otra cosa.
O sea, y a lo mejor con esto empezaron a crearse muchos servicios a, pues, yo qué sé, de
hostelería, de lo que sea, para paliar esto.
O sea, encontrar nuevas ocupaciones, nuevos trabajos y tal.
Pero, a ver, todavía queda, ¿vale?
Esto, por muy bien que está, que está muy bien, pues todavía le queda.
Pero es algo de la historia de la humanidad.
O sea, no creo que podamos hacer nada.
Cada siglo siempre ha traído alguna revolución.
Y, hombre, la inteligencia artificial yo creo que es una de las siguientes revoluciones.
Ya verás, cuando veamos el precio nos vamos a reír.
Yo estoy de acuerdo, ¿eh?
Creo, creo que no va a ser barato.
Creo.
Hay que tener en cuenta que este tipo de máquinas chupan mucho.
Así que veremos, ¿eh?
Yo creo que optimiza el trabajo.
Le encuentro Simplitude con herramientas de low code que, aunque simplifican el desarrollo
bastante, siempre queda la parte de la lógica de la aplicación.
Claro, es que es muy difícil que vaya a quitar lo que es, lo que realmente le da valor
al usuario.
Eso es, ahí es donde está el tema, ¿no?
Miguel, pero seguro que open source ya está copiando la idea.
Claro.
Lo que cueste se lo resta solo de los programadores.
Qué va, qué va, hombre.
La IA.
No humano.
Yo no tengo acceso a ti.
Con los frameworks y demás funciona igual.
Bueno, acabamos de ver un ejemplo con React, ¿no?
Yo qué sé.
Hello World.
Si pongo Hello World.
Vamos a ver.
Por ejemplo, montar la aplicación en el div root.
Fíjate, ¿eh?
¡Ostras!
¡Qué cabrón!
Mira.
No está bien.
No está bien.
Pero no está bien.
No está bien porque...
Esto es muy interesante lo que acaba de pasar.
El fallo este.
Por dos cosas.
Mirad.
El código que está poniendo es incorrecto.
Pero no era incorrecto siempre.
¿Qué quiere decir esto?
El código que acaba de poner era correcto hace tiempo.
Claro.
Pensad que en GitHub existe código antiguo.
Y por lo tanto, es difícil, ¿no?
Separar el grano de la paja muchas veces.
Este código funcionaba antiguamente cuando React no estaba separado React y React DOM.
Y por lo tanto, para montar la aplicación necesitabas React, no React DOM.
¿Qué pasa?
Que como solo he importado, lo que os he dicho, el contexto es importante.
Como solo he importado React, ha dado, por supuesto, que era así.
Yo me imagino que si yo ahora pongo a React DOM, from React DOM, e intento otra vez.
¿Ves?
Ahora sí me utiliza este.
Pero fíjate, ¿eh?
Esto es una cosa que va a ser interesante porque el código en el que está basado, aunque sea código abierto, pues tiene una antigüedad.
Y el código sigue ahí.
Es muy difícil que la IA, claro, lo hará a base de nuestras, lo que nosotros vayamos aceptando como correcto.
Pero, ¿veis?
Aquí el contexto ha sido súper importante porque ha dado por hecho que solo lo podía sacar de React y por eso ha hecho un React.render.
También solo ha encontrado este Hello World y ha dicho, ah, vale, pues será este.
Si yo, me imagino, hago un import app from un archivo que no existe y le digo app y lo vuelvo a poner, ¿vale?
React DOM.
A ver, espérate.
¿Veis?
Ahora en el contexto ha dicho, vale, montar la aplicación.
Está hablando de la aplicación, no del compuente de Hello World.
Está mirando en el contexto de a qué me puedo estar refiriendo con aplicación.
Y ahora me está renderizando la aplicación, no el componente de Hello World.
¡Uf!
No está nada mal.
O sea, está muy, muy bien.
¿Estoy aprendiendo para ser junior en JS?
¿Debería tener miedo?
No.
No deberíais tener miedo.
De verdad.
Primero, está en beta.
Todavía queda.
Dos, va a ser de pago.
Tres, lo único que puede ocurrir es que desarrolléis un poco más rápido.
Y esto es algo bueno para la empresa.
La empresa, esto no funciona solo.
No funciona solo.
Lo bueno, lo mejor es el nombre.
Github Copilot.
Copiloto, ¿vale?
Necesitas a un piloto.
Necesitas a alguien que esté al mando, ¿vale?
Esto no funciona solo.
Y no, por fortuna, a día de hoy, no entiende los requerimientos del cliente, del usuario,
los tickets de Jira.
Es muy difícil.
Porque es que, como estáis viendo, funciona mucho con el contexto, ¿vale?
Pídele que haga algo en React.
Vale, lo acabamos de probar.
Es que voy muy retrasado con el chat.
Pregúntale los números que van a salir de la lotería.
Me da risa todos los que dicen no al monopolio de Microsoft, pero bien que solo usan Visual Studio Code.
Sí, bueno, a día de hoy Microsoft tiene, pensar que tiene GitHub, tiene NPM.
Tiene GitHub, NPM.
¿Y cuál es la otra que había comprado también?
Microsoft.
Bueno, claro, tiene Xbox, por supuesto.
Había comprado hace poco una.
Nuance.
Nuance, que era de reconocimiento de voz.
LinkedIn.
LinkedIn es de Microsoft también.
O sea, un montón.
Un montón.
O sea, no está mal.
Yo uso XML.
Seguro que también se puede.
También hay que tener pendiente, dice Brian, que todos nuestros repos públicos son examinados
por esta inteligencia artificial y que tener control de nuestra data pública es más fácil pasarse para GitLab.
Mirad, sobre esto os voy a contar una cosa que me parece muy interesante.
Bueno, sobre este comentario voy a decir una cosa.
Nadie nos dice que realmente esta inteligencia artificial no esté también aprendiendo de GitLab.
Porque si en GitLab tienes una licencia que permite leer y estudiar el código, se supone, se da por entendido,
en la GPL leer y estudiar el código es algo que es totalmente abierto y que puedes hacer.
Es verdad que si haces una copia, o sea, una copia no, un trabajo derivado, tienes que utilizar la misma licencia.
Pero claro, ahí es donde está lo gris.
¿Esto es un trabajo derivado o no lo es?
¿Qué opináis? ¿Esto es un trabajo derivado o no?
Claro, lo que dicen en GitHub Pilot es, bueno, es que esto en realidad lo que es es un trabajo,
es un estudio y por lo tanto estamos entendiendo que esto es un uso, un fair use, un uso justo del código.
Porque no lo estamos copiando, lo estamos estudiando.
Y a través de ese estudio yo estoy generando un modelo de datos para crear sugerencias,
pero está totalmente separado.
A ver qué opináis.
A ver qué opináis sobre esto.
Os voy a buscar lo que dijo, lo que dijo, hostia, qué bueno esto.
A ver si está aquí.
Lo que dijo, ¿dónde está? ¿Dónde está?
Os pongo la pantalla.
Satya.
Satya Nadella.
No me acuerdo cómo se llama el chico este.
Satya Nadella, ahora.
No, Satya Nadella no.
Gihap Theo.
¿Cómo se llama el chico?
Eso, Nat Friedman.
Ostras.
Nat.
No.
Vamos a buscar a Nat.
Porque puso en Hacker News.
Hacker News, Nat Friedman.
Puso una cosa que me pareció interesante.
Ah, pues nada, ahora no lo voy a encontrar.
Ah, no lo voy a encontrar.
Mira que antes lo he estado leyendo y ahora no lo voy a encontrar.
Bueno, si alguien lo encuentra, que me lo pase.
Pero había puesto en Hacker News, había puesto una cosa muy interesante con su opinión sobre esto y el tema del copyright, ¿no?
Y había gente, ¿no?
Pues que estaba en contra, gente que estaba a favor y me parecía muy interesante al menos leer todo eso porque era muy curioso.
Ahora todo hay un problema con el tema de licencias.
Vi mucha gente a hablar de eso.
Eso es lo que justamente estaba buscando.
Juan Semprun, muchas gracias por suscribirte con Prime.
Ya seis meses.
Y Numoncete, también tres meses de antigüedad.
Muchísimas gracias a los dos.
Ponle para que hackee la NASA.
Sí, no, lo podemos probar, pero ya me imagino que además en muchas ocasiones...
A ver, vamos a poner nasa.tsx.
Hack de NASA.
Mira, pero ves, lo intenta.
Intenta hack de planet.
Intenta hacer cosillas, intenta siempre.
Si pones tipo get latest tweets from users with access, ¿funciona?
Me dio curiosidad.
Claro.
Get...
Mira, primero...
Ya os digo, primero el contexto es importante, ¿no?
Así que ahora si le decimos get latest tweets from users with access.
Mira, get tweets.
Y mira, con axios.
¡Pam!
Ya está.
Ahí lo tienes.
Aquí volvemos un poco a lo mismo.
Esto no funciona porque esto creo que necesitas un token.
Aquí no hay ningún token.
O sea, faltan cositas.
Pero bueno, mira, lo has dicho con axios.
Pues utiliza axios.
El contexto es la vida.
Con Python funciona.
Con Golang funciona.
¿Cuál es la extensión que usa Midu para correr JavaScript y TypeScript en el editor?
Es un programa que se llama Ranges.
¿No tendría que haber tipado el parámetro de esa función como string ya que lo metía
en el template literal del fetch?
Sí.
Muchas veces veis, o sea, aquí por ejemplo este asusername, veis que aquí en TypeScript
no me está tipando absolutamente nada.
Depende del código del modelo y tal.
Prueba con Assembler.
Bueno, ya habéis visto que HTML y CSS sí que funcionan.
Vale, pues qué, probamos lo del HTML.
Hacemos una web a base de Geekhack Copilot.
Bueno, ya habéis visto que hemos hecho algo de cierto stackoverflow.
¿Será este el fin del hombre araña?
Puede ser.
El hombre araña igual sí que puede ser que tenga problemas.
Corre.
MiduDef está aprendiendo.
Hola, Hydro.
Crea una clase para encentrar un deep.
Hostia, es que habéis escrito un montón y estoy súper atrasado.
Madre mía.
Vale.
A ver.
Alguien dice, pídele que cree una interfaz de un JSON.
O sea, por ejemplo, pongamos que yo tengo un JSON.
Vamos a ponerlo así.
Un JSON schema.
Y vamos a tener, claro, esto tiene bastante sentido.
JSON schema, el type.
A ver lo que me está diciendo.
Type, properties, id.
Name, type.
String, ¿vale?
Vale.
URL.
Vamos a hacer esto.
Descripción.
Este, el JSON schema.
Vale, joder, imagen y todo.
Vale, vale.
Ya, ya, ya.
Hasta aquí, hasta aquí.
Esto, properties y ya cerramos aquí.
¿Vale?
Si yo le pongo ahora create TypeScript interface from JSON schema.
Bueno, y NASA.
Id string.
Name string.
URL string.
Description.
Ja, ja.
Lo acaba de hacer.
Me acaba de crear la interfaz del JSON schema que tenía arriba, ¿eh?
Es verdad que el nombre de la interfaz...
Ah, no.
El nombre de la interfaz es por el nombre del archivo.
No está mal.
Es que es constante, ¿eh?
Cada vez que pruebas algo dices, ostras.
Te sorprende realmente.
O sea, realmente hace algo que...
No sé, que no te esperas.
A ver, Type.
Bolean.
Fíjate, ¿eh?
O sea, es que lo tiene todo.
Porque, a ver, son cosas que yo escribiría ya de per se, ¿no?
Pero he puesto hash image, que se nota que es un boleano.
Y aquí en el Type, fíjate, ya me está diciendo, vale, pues es un boleano.
Os puedo asegurar que este autocompletado de inteligencia artificial se revienta a Tab9 de una forma que da mucho miedo, ¿eh?
Da mucho miedo.
Ahora me imagino que si hago esto, ¿veis?
Me está autocompletando el que acabo de añadir.
Me dice, ah, es que te falta este.
Oye, ¿quién sabe?
Esto es que es solo el comienzo.
Esto puede ser bastante potente el día de mañana.
No creo que reemplace Stack Overflow porque es gratis o me equivoco.
No, a ver, no lo va a reemplazar.
No lo va a reemplazar, ¿eh?
No va a reemplazar Stack Overflow.
Pero sí que creo que le puede hacer un poco de pupa.
Eso sí que creo.
El programador ha muerto.
Qué va, no ha muerto.
No ha muerto.
¿Qué clase de 12SV estoy viendo?
¿Cómo?
Guay, no he entendido eso.
La IA, ganaste esta vez humanos y lo he roto, ¿eh?
¿Este plugin autocompleta script de Bash?
No lo sé.
A ver.
Si, por ejemplo, ¿dónde tengo esto?
ZSH, no.
¿Dónde tengo...?
Bueno, ahora no me acuerdo.
Iba a abrir uno, pero es que ahora no me acuerdo dónde lo tengo.
ZSH config.
Creo que tengo...
Sí, mira, justamente.
Open, open.
Mira, tengo aquí un ZSH RC.
Yo qué sé.
Si le pongo aquí alias.
Ostras.
A ver, no es exactamente...
No está mal, pero está funcionando en un archivo cualquiera.
No es lo que...
O sea, no sé ni en qué estaba pensando, pero bueno, que no está mal.
Ahí me está dando un autocomplete.
O sea, me está intentando decir algo.
Está intentando autocomplete.
Ahí ha intentado con el alias, ha intentado hacer algo.
A ver, me está autocompletando lo mismo.
Esto es un error un poco raro, ¿eh?
Pero ya veremos que esto lo irán arreglando.
Hazlo en inglés.
Yo creo que en inglés funcionará mejor.
Hemos visto en castellano y era solo para verlo.
En español falla, claro.
Debe fallar más.
Pensad que está empezando.
Tengo...
Vamos a crear nuestra aplicación de React.
Vamos a quitar todo esto.
Vamos a crear Vite.
Y vamos a crear una aplicación.
La estamos mejorando poco a poco, ¿no?
Conforme con lo que estamos haciendo.
Vite es un empaquetador de...
De aplicaciones, como lo es Webpack.
Solo que va súper rápido.
Va súper, súper, súper rápido.
Vale.
En PNRAM.
Y esto ya tendríamos que hacer un dev.
Vale.
3000.
Perdón por el ruido.
Estaba moviendo esto.
Ya tenemos nuestra aplicación.
Vamos a escribir con Gijaco Pilot.
A ver.
¿Se podrían hacer librerías con Vite?
Librerías.
A ver.
Debería ser agnóstico.
¿Sabes?
O sea, no debería ser un...
Con Vite podrías hacer la librería.
O sea, ¿quieres decir que te la compile en una librería?
Hostia, eso sí que creo que no.
Creo que no tiene Vanilla.
¿Puedes hacer Vanilla?
No sé si te lo compilaría para tener...
O sea, es parecido a Webpack,
pero no sé si tiene alguna forma de bundleizar
y tener solo un entregable que sea un JavaScript.
No lo he probado y no lo he probado.
Así que...
Pero lo podremos mirar.
Me parece interesante.
Con Webpack seguro que se puede porque yo lo hago.
Pero no sé si con Vite.
Venga, vamos con React.
¿Qué podemos hacer?
Va.
¿Qué hacemos?
¿Qué hacemos?
¿Qué aplicación hacemos?
Una aplicación sencilla.
Que pensemos...
No sé.
Hacker News.
¿Os parece un Hacker News?
Más o menos.
Un Hacker News Happy Jason.
Una calculadora.
¿Queréis hacer una calculadora?
¿Sí?
¿No queréis algo con Fetch?
Como un...
Hacker News.
Que suelen ser bastante rápidas.
Calculadora.
Vale, bueno.
Si queréis la calculadora,
hacemos una calculadora.
A ver.
¿Hacker News o calculadora?
Algo con Axios.
Venga, Hacker News.
Luego hacemos la calculadora.
Venga, vamos a hacer una de Hacker News.
Ya le voy a dar una pista.
Vamos a poner que esto es una Hacker News App.
Le voy a eliminar el estado este.
Este logo se lo vamos a quitar.
Y le vamos a dejar...
Venga, vamos con el Hacker News.
Vamos a quitar todo esto.
¿Vale?
Le vamos a ayudar.
Le vamos a ayudar.
Le vamos a dar contexto.
Hacker News App.
Hacker News App.
Voy a crear aquí una función
que sea
Fetch
Hacker News.
Hostia, ya me está autocompletando.
Hacker News.
Ay, perdón.
Hacker News.
Ahí.
Ahí se ha ido, ¿eh?
Bueno, vamos a crear el estado.
Un setLoading.
¿Vale?
LoadItems.
SetLoading.
Response.
Ojo, cuidado.
Ojo, cuidado.
Que no estoy escribiendo.
Madre mía.
Madre mía.
Vale, ya me ha hecho la función, ¿eh?
Ya me ha hecho la función del LoadItems y tiene buena pinta.
Aquí no puede llamar al LoadItems.
Aquí está equivocado totalmente.
O sea, no podemos hacer esto.
Pero necesitamos un UseEffect que lo vamos a importar.
Lo autocompletamos.
Efectivamente, llamamos al LoadItems.
Lo hacemos cuando nos montamos.
Pues esto es lo que quiero.
Muy bien, Copilot.
Efectivamente, quería un H1 de Hacker News.
Una P.
Venga, esto es un Hacker News.
No tengo RealRouter.
Aquí se la ha colado.
¿Veis?
¿Qué pasa con esto?
¿Qué pasa con esto?
Es que esto se la ha tenido que copiar.
Esta línea de código se la ha copiado de algún lado.
Esta línea de código se la ha copiado.
O sea, ¿veis esto?
This is a Hacker News client built with...
Se la ha copiado.
Se la ha copiado directamente.
Pero bueno, no veo ningún proyecto que tenga exactamente en el código esto.
Solo written in React, in Play Vanilla.
O sea, que sí que lo ha generado, ¿no?
Pero claro, una frase así.
De hecho, que no os extrañe que en algún momento veáis un email o información personal.
O sea, que no os extrañe.
De hecho, antes hemos visto cosillas así.
Así que...
Bueno, pero esto no es lo que quiero.
Vamos a darle un poco más de pista.
Porque lo que quiero aquí es el items...
Ah, bueno.
Sí.
Joder, qué listo.
Mira, me ha ayudado aquí.
Loading.
¿Por qué?
Porque tiene sentido mirar si estamos cargando.
¿Vale?
Si está cargando vamos a hacer el loading.
Si no, pues un dip.
¿Vale?
Con items.
Items justamente es lo que quiero mirar.
Si tiene los items.
Vamos a mapearlo efectivamente.
Con la key.
Este H3 no tiene mucho sentido.
Este tampoco.
Pero bueno, luego lo puedo cambiar.
Ya me parece bien.
¿Vale?
No items.
Cerramos el dip.
Cerramos el dip.
¿Vale?
Más o menos me ha convencido.
No es 100% lo que esperaba, ¿no?
Pero bien.
¿Qué pasa con este H3?
Que este H3, claro, me falta...
Igual que me falta a mí, le falta también a esta persona.
Ah, fíjate que aquí solo vienen IDs.
Aquí solo vienen IDs.
Esto no va a funcionar, ¿eh?
A ver, lo podemos ver.
Vamos a ver cómo va por ahora nuestra aplicación.
Vamos a ver cómo va.
Voy a guardar los cambios.
No va.
Nuestra aplicación no va, ¿eh?
App is not defined.
Vale.
App is not defined.
Esto es culpa mía porque el export default...
Vale.
Vamos a ver entonces.
Ahora sí.
Bueno.
¿Qué ha hecho aquí?
Este Hacker News, por lo que veo, es que esto es la ID y esto es el índice.
No es exactamente lo que queríamos.
Pero bueno.
Es que este Top Stories, esta API de Hacker News es un poco ñe, ¿eh?
Por lo que veo, vamos a poner aquí load o get info from hacker news articles, items, news items, ¿vale?
Info, items for each.
¡Hostia!
Esto es justamente lo que necesitaba.
Muy bien.
Lo que pasa es que esto tampoco va a funcionar bien, ¿eh?
Pero bueno.
Este código no funciona porque este for each no puedes hacer una wait aquí y así.
¿Sabes?
Este...
De hecho, no tengo una sync aquí.
Para hacer este código se tendría que hacer de otra forma.
Este código no funcionaría así.
No está mal la idea.
O sea, ya me ha dado la pista de dónde tengo que sacar el item, la información del item.
Pero claro, esto en realidad, esto no funciona así.
Esto tendríamos que hacer que esto fuese asíncrono.
Estos serían promises.
Bueno, de hecho, ni siquiera necesitaríamos esto.
Esto está bien.
El item.
Este item, en realidad, tiene una ID.
Que esta sería el item.
Sería item.id.
Ah, no.
No, no, no.
Sí que está bien.
Sí que está bien.
O sea, está mejor la ID que yo.
Está mejor la ID que yo.
Es item, es verdad.
Lo que sí que necesitaríamos aquí.
Esto es un promisol de todas las promesas que estamos haciendo aquí.
En lugar de hacer el push este que estaba haciendo aquí, pues haríamos un return del item info.
Vale, hacemos un premisol.
Y aquí sí que devolveríamos toda esta información.
Get info from hacker news items.
Esto tendríamos aquí articles.
Lo tendríamos aquí.
Get info, le pasaríamos items.
Esto está correcto.
Y articles.
Items.
O IDs.
Vamos a llamar a esto IDs.
IDs.
Y a este article le vamos a llamar a items.
Bueno.
Creo que esto más o menos debería funcionar.
Vale.
Esta wait porque...
Bueno, es que esta wait en realidad no tiene mucho sentido.
Las promesas esta...
A ver, lo podemos poner.
Pero...
Vale.
No items.
Igual nos hemos equivocado en alguna cosilla.
Vale.
Promise.
Refrails.
Es que este tampoco tiene mucho sentido.
Map.
Ahí.
Esto está bien.
Yo estuve con Zambuca.
Aquí me falta la wait.
Tenemos items.
Y bueno.
A ver.
Esto puede tardar mucho porque está haciendo un montón.
Bueno, de hecho me ha petado porque...
Claro, he hecho demasiadas llamadas.
¿Veis?
Está haciendo tantas llamadas aquí de todos los items.
Lo que deberíamos hacer a lo mejor sería...
Vamos a hacerlo.
Get first five IDs.
¡Qué bueno!
Pues ya está.
Ideas to get.
Esto es lo que queremos.
Ya está.
¿Ves?
No me acordaba cómo recuperar las cinco primeras.
Pues con el slice.
Perfecto.
Ideas to get.
Me está devolviendo cinco primeros.
Y esto me debería ayudar un poco a recuperarlo.
Un poco mejor.
Vale.
Kids should be unique.
Vamos a ver qué tiene el items.
A ver qué está devolviendo esto.
Mira, aquí tenemos los items.
ID.
Es que dice que tiene que ser único.
Pero las ideas.
4, 0.
Bueno, ya hemos recuperado aquí la información.
1, 0, 7.
No sé qué.
Vale.
Y ahora aquí lo que pasa es que tenemos que adaptar esto.
¿Vale?
Esto lo tenemos que adaptar que ahora ya no tiene tanto sentido.
Vamos a cambiarlo.
A ver si me ayuda.
Item.
Vale.
Return.
Efectivamente.
Fijaos.
Esto ahora estoy flipando un poco.
¿Vale?
No sé cómo se ha dado cuenta que el objeto ha cambiado.
O sea, ahora accede a item.id.
Antes había que el items era un array de ids.
Ahora sabe que es un objeto.
O sea, es bastante impresionante esto.
¿Vale?
¿Ves?
Sabe que tiene el item.title.b.time.
Claro que sí.
Claro que sí.
Claro que sí.
Bueno.
Y aquí tenemos un poco nuestro estilo.
Ya tenemos aquí nuestro Hacker News.
Aquí está nuestro Hacker News.
No es el estilo más increíble del mundo.
Pero, bueno, no está nada mal.
De hecho, si cambiamos esto en href.
Esto sería item.url.
No está nada, nada, nada mal.
Nada mal.
Nada mal.
Está interesante.
Paginado.
Hostia, paginado.
A ver, paginado será un poco más complejo.
A ver, tenemos aquí el dip.
A ver, paginado es que el problema que tenemos aquí...
A ver, nos va a generar código, pero se le va a ir.
Se le va a ir.
Porque le va a costar mucho el contexto, yo creo.
Bueno, por ejemplo, aquí tenemos los cinco primeros.
Claro, estamos haciendo aquí del items.
Y des to get.
Tendríamos que...
Ya me cuesta incluso pensarlo por mí mismo.
Esto con Tailwind.
Pásale el número de la página.
Claro, lo que podríamos...
El problema del top stories este es que esto es un JSON.
¿Vale?
O sea, esta API es un poco ñe.
Porque, ¿veis?
Esta API no tiene mucha historia.
O sea, es un JSON, no es una API en la que pueda filtrar o lo que sea.
Entonces, no sé.
Creo que no se puede filtrar y ponerle aquí limit 3.
¿Ves?
Esto no le gusta.
A ver si vamos a la página esta.
A ver si nos dice un poco cómo es la API.
No.
Ni siquiera se puede hacer.
Top stories.
Lo que podemos hacer a lo mejor en el getItems, loadItems, number o limit.
Pero para pillar los siguientes, getInform from HackerNews.
Lo que podemos hacer...
Le podríamos poner un botón.
Vamos a ver.
Vamos a poner aquí page.
A ver si me dice lo de page.
Page.
SetPage.
UseState1.
Vale.
1 no es exactamente así porque debería ser 0 en este caso.
Pero bueno.
Vamos a utilizar aquí el page.
¿Vale?
Page.
Y tenemos el límite.
Vamos a poner aquí un botón.
Deep.
Y vamos a poner button.
NextPage.
A ver si poniendo button...
A ver.
No.
Button.
NextPage.
OnClick.
Handle.
NextPage.
Vale.
Vamos a crear aquí una función.
Handle.
PageChange.
Bueno.
Me ha cambiado el nombre.
Ha hecho lo que le ha dado la gana.
Pero bueno.
No está mal.
Handle.
PageChange.
Vamos a...
Bueno.
Lo que pasa...
No está bien ya porque ya empieza ahí Handle.
NextPage.
Bueno.
Esto cambia la página.
Vale.
¿Qué pasa con esto?
Que este lotItems en lugar del limit aquí lo que le podríamos decir es que cuando
cambie aquí el page se vuelve a ejecutar este efecto.
Así que vamos a ver.
UseEffect.
A ver si ahora que tiene más contexto...
No.
¿Veis?
Aquí...
A ver.
Que está bien pero que tampoco...
Que no sé...
Page y limit.
Pero no tengo nada de limit.
Pero bueno.
Le pasamos el page.
Y este page lo teníamos aquí.
Ah.
Limit lo he dejado aquí.
Es verdad.
Page.
Ah.
Pero mira.
Qué listo.
Esto me lo ha arreglado.
Esto me lo ha solucionado.
Y lo iba a dejar mal.
Hostia.
Ahí me ha dado un truquillo.
Ahí me ha dicho.
Hostia.
No.
Que tienes que sumar el page.
Muy bien.
Ahí me la ha salvado.
Porque la iba a dejar como estaba.
Iba a poner un 5.
Y...
Y no.
Y creo que no está bien.
O sea que...
Joder.
Vale.
Get 5.
Ítems per page.
Mira.
Me está escribiendo el comentario.
Qué cabrón.
Mira, mira, mira.
Me está escribiendo el comentario.
He puesto.
Get the first page.
Get.
He puesto.
Ítems per page.
Bueno.
Me ha escrito el comentario.
Me ha dicho.
Bueno.
Pues esto está así.
Vale.
Vamos a ver cómo hemos dejado nuestra aplicación.
A ver.
No es la más bonita del mundo.
Next page.
Pero mira.
Ya tenemos aquí el next page.
Ya está funcionando la paginación.
También igual que el next page.
Vamos a ver si sabe hacer el previous page.
Previous page.
Set page menos uno.
Hostia.
No está mal, ¿eh?
No está mal.
Vamos a ver si es capaz de saber que quiero otro botón para ir para atrás.
Ish.
Bueno.
Me está poniendo el next page.
Vamos a ver si tiene otra sugerencia.
Vale.
Handle next page.
Bla, bla.
No.
No.
No está dando ninguna sugerencia.
Vale.
Vamos a ver si lo pongo.
No.
Es que.
Si empiezo a escribirlo.
On click.
Handle.
Previous page.
Ahora sí.
Mira.
Al menos dice que eso sí que entiende que es previous.
Vale.
Con el previous, pues nada.
Uy.
Perdón.
Que he escrito.
He abierto Safari.
Pues ahora sí.
Tenemos el previous.
Y tenemos el next.
Y ahí está.
Funcionando bien.
¿Qué os parece?
¿Qué os parece?
No está mal, ¿eh?
No está mal.
A ver.
Es una ayuda.
¿Vale?
Es una ayuda.
No es que esto de repente vaya a acabar con todo en nosotros.
Pero no está mal.
Vamos a ver si le podemos poner unos estilos.
Claro.
El tema de los estilos es lo mismo.
Esto será súper interesante cuando los estilos, de alguna forma, estén.
Tenga noción de todo el proyecto.
Que esto es un problema que ahora mismo no tiene, ¿eh?
Esa, eso.
¿Pagaríais por esto o no?
¿Pagaríais por esto?
Porque esa es una muy buena pregunta, ¿eh?
Esa sería una muy buena pregunta.
¿Cuánto pagaríais por esto?
¿Cuánto pagaríais por esto?
Comentadme.
Al mes.
¿Cuánto dinero pagaríais?
No estoy haciendo...
No es una encuesta encubierta de GitHub, os lo puedo asegurar.
Es curiosidad mía pura y dura, ¿eh?
Es curiosidad mía.
Es curioso.
Eso me lo ha recomendado antes.
Este Line High, con ese 1, 4, este, me lo ha recomendado exactamente antes.
Mira, hay gente que me dice 10, ¿no?
O sea, 10 dólares es lo que estaríais dispuestos a pagar.
10, 15, 10, quizá unos 15.
Venga, os hago una encuesta.
Y así...
Depende mucho la calidad.
Por GitHub o Pilot.
10, eh...
Ay.
Menos de 10 dólares.
De 10 a 15 dólares.
Hasta 20 dólares.
Show me...
My Money.
Gracias o nada.
Money...
Os estoy poniendo la encuesta, ¿vale?
Venga, he iniciado en la encuesta.
Mensual, ¿vale?
Es mensual.
Es el Line High, es el de Bootstrap.
Muy bien.
Bien visto.
Claro.
Son estilos de Bootstrap.
A saco.
A saco.
Claramente...
A ver, os voy a leer un rato.
Es como tener snippets a tu disposición más rápidamente.
Sí, pero otro nivel, ¿no?
De snippets.
Claramente esto mejorará y con el tiempo será mucha utilidad, así que estaría dispuesta
a pagar por esto.
Mensual como la mayoría de subs.
Sí, será mensual seguro.
Seguro, ¿eh?
Ni de coña pienso pagar por algo así.
No se sabe lo que hay detrás de la IA y encima pertenece a Microsoft.
Está bien que te recomiende mierdas que no escribimos porque no tenemos test.
Bueno, a ver, también esto, hoy a lo mejor no, pero otro día lo probaremos a hacer test.
Bueno, lo probaremos seguro porque yo ya lo voy a tener y entonces voy a convivir con
ello durante un tiempo porque me gustaría estar ahí probando y lo iremos viendo.
Así que iremos viendo si hace test, si no hace test, pero sí que hace test, ¿eh?
Yo he visto haciéndole, haciendo testing.
Esto me hace referencia con la responsabilidad de los deepfakes.
Totalmente.
Kenzie Dodds ya publicó test escritos con Copilot y eran normalillos.
A ver, sí.
Y mucho código del que hace es normalillo.
Pero a veces puede marcar, ¿no?
A veces sí que realmente hace ahí ese, no sé, ese pujoncito.
Oye, no está mal esto, ¿eh?
No está nada mal.
Min height.
Voy a poner min height que sea todo para loading.
Hacker News.
Ah, mira, voy a poner loading.
A ver qué hace.
Ah, no me dice nada.
Pensaba que me iba a recomendar algo para...
Create a loading spinner.
Haz tu magia, vamos.
A ver, a ver qué ha hecho esto.
Ah, pero no.
Hay.
Loading.
Pero este background, ¿o no es suficiente?
No.
No.
Pensaba que...
Create a loading spinner.
A ver, voy a crearlo.
Voy a intentarlo fuera.
Ah, mira.
Fíjate con la...
Con el class name.
Vale.
Vamos, inténtalo.
Tú puedes.
Hazme un spinner.
Hazme un spinner.
Hazmelo, va.
Vamos.
Muy bien.
Me ha creado la animación y todo, ¿eh?
Uh, rotate, rotate.
Venga, vamos.
Vamos, mueve tu...
Mueve tus manitas de robot.
Vamos, muévelas.
Vamos a ver este spinner.
Vamos a ver este spinner que me has creado.
Sale el loading ahí, dando vueltas.
Nah, pero es que algo le falta a ese spinner, ¿no?
Algo le falta que no lo termina.
Pero bueno, a ver.
Ha sido un buen intento.
Ha sido un buen intento, ¿eh?
Ha sido un buen intento.
Algo le falta.
No sé el qué.
Pero veis que está dando vueltas, está dando vueltas.
El problema es que esta imagen...
Esta imagen es un poco rara.
No sé qué hace esta imagen.
Claro, esta imagen.
Además, fill...
Vamos a ponerle cero.
A ver si...
No.
Cero, cero, cero.
No.
Fill...
No sé qué le puede estar fallando.
Pero falta ahí el SVG.
Ahí es donde está el kit.
Que le falta el SVG este.
Este SVG no está bien.
A ver, background.
Vamos a intentar otro más.
Background.
Vamos a ver los que me está diciendo aquí.
Open Copilot.
Mira, aquí encima está con el expected tal.
Y ahí falla.
Se vuelve como un poco tonto.
¿Vale?
Background.
Open Copilot.
Pero veis, es como buscar casi, ¿no?
A veces es más como buscar.
He probado lo del color, pero nada.
Mira, aquí tendríamos otro.
Pero me parece a mí que este es el mismo problema.
No está mal el intento.
Pero veo que en este caso...
Vamos a ver esto.
Vamos a ver este.
No.
No sé si es tanto el error este.
No.
Inline Block.
No sé si es el top este extraño.
Es que estas imágenes vete a saber también, ¿no?
Vete a saber de dónde salen.
Qué es lo que hacen.
Qué es lo que tienen.
Pero yo aquí no veo el spinner.
Yo creo que esos SVG...
O se los están inventando...
O no...
Background.
Spinner.
Margin 0.
Lo demás parece que tiene buena pinta.
Lo demás parece que tiene buena pinta.
Qué pena, ¿eh?
He estado ahí a punto, ¿eh?
Me llega a hacer el...
Me llega a hacer el spinner...
A ver, ya tiene mis respetos.
No os voy a engañar.
Ya tiene mis respetos.
Se lo ha ganado.
Pero me hubiera hecho el spinner...
Hubiera tenido más respetos todavía.
Venga.
Esto fuera.
Vamos a hacer...
El cutre spinner.
¡Ay!
Spinner.
No.
¿Cómo es esto?
Eh...
Ah, no sé por qué no me va.
Bueno.
Iba a hacer el cutre spinner, pero ya veo que no...
No puede ser.
¿Spinner?
¿Twist?
¿No?
Bueno, ahora no me acuerdo.
Pero hay un emoji que a veces se puede utilizar, que bueno, es muy feo, pero...
A ver.
Mira que hay...
Mira que hay.
Y ni uno se puede utilizar para spinner.
Creo que está en la naturaleza.
Este, el ciclón.
Madre mía, joder.
Con el nombre del ciclón.
El ciclón.
Ahí tienes el ciclón.
Ya está.
Bueno.
Y todo para no salir.
O sea, si es que es muy rápido, joder.
Bueno, pero el color era mejor.
Nada, lo he intentado.
Debe ser un div.
Le falta un color.
Pero el color ya hemos visto dentro.
Seguía súper bien con la palabra y dando vueltas.
La verdad es que sí.
Vaya spinner de gasolinera.
No lo hagas en el DevTool.
Bueno, he intentado también sin el DevTool.
Create a Blue Progress Circular Spinner.
Es verdad.
Vamos a ser más...
Buena, Nacho.
Buena, Nacho.
Vamos a intentarlo, va.
Vamos a intentarlo.
Vamos a darle otra oportunidad.
Create a Blue Progress Spinner.
Venga.
With.
Ha cambiado el...
Va, súper raro.
Ahora está como centrándolo en mitad de la página.
Es que ya veis que yo creo...
A ver, no está mal en el sentido de que hace bastantes...
Hace bastantes cositas, ¿eh?
Intenta cosas realmente...
¿Sabes?
Se está dando cuenta que la animación se llama spinner y tal.
Pero, claro, es que tampoco tiene buen gusto por los diseños.
Ya sería increíble.
Puede ser buen gusto.
Vamos a ver qué ha intentado.
Pero creo que lo está poniendo como en mitad de la pantalla.
¿Veis?
No está mal.
Ahí sale algo.
¿Veis ahí en medio?
Pero sigue sin ser exactamente.
¿Por qué?
Porque esto, pues, se supone que entiendo que debería tener...
¿Ves?
Tendría que tener un div dentro.
¿Ves?
Que aquí lo está intentando.
Pero, claro, he hecho en falta...
Pero esto mejorará, ¿eh?
He hecho en falta que me ponga un bloque entero, como lo hace con las funciones de JavaScript.
Pero esto es más que nada...
O sea, puede ser una ayuda, pero no...
No es...
En este caso no es magia del todo, ¿eh?
Aquí le falta, aquí le falta.
Create a circular...
Create a circular round loading spinner...
In a single...
Line no.
Element.
Div element.
Vamos.
Tu última oportunidad.
No me falles.
No me falles.
Esta es tu última oportunidad.
Keyframes.
Spin.
Venga.
Creo que no lo ha hecho bien, igualmente.
Ha sido un buen intento, pero no lo ha hecho bien.
Me ha puesto ahí una cosa, ha dicho...
Bueno, está tu spinner.
Ahí tienes tu spinner.
gave me.
Tire.
Felt.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.
Tire.