Pues está súper chulo, ¿no?
Pica, oh, pica, pica, pica, pica, pica, pica, pica, pica, acá.
Y mirad, lo bueno es que se guardan todas.
O sea, se va viendo aquí cómo se está picalol.
¿Vendemos nuestra idea por un millón de dólares?
¿Queréis que hagamos nuestro Wordle, pero con Dino?
Quiero hacer esto justo por un motivo.
Quiero hacer esta app por un motivo.
Y es porque os he dicho que Dino utiliza la API nativa del navegador.
Claro, que tenga la API nativa del navegador está muy bien.
Pero eso significará que podremos hacer un alert o que podemos hacer un prompt.
Y eso es lo que quiero descubrir.
Quiero descubrir si vamos a poder hacer un prompt.
Y si podemos hacer un prompt, vamos a basar el hecho de que añada las cuestiones,
o sea, la palabra, con el prompt.
Venga, vamos a ello, va.
Vamos a llamarle Poketle.
Poketle.
Es que no sé cómo era.
Wordle, ¿no?
Bueno, pues Poketle, por decir algo, va.
Lo primero que tendríamos que hacer, vamos a recuperar primero un Pokémon de la Pokéapi.
Y como tenemos un rato, voy a darle cañita, ¿vale?
Voy a darle cañita, voy a intentar ir focalizarme porque si no, no terminaremos esto.
Y tengo muchas ideas, luego pueden fallar muchas cosas, así que vamos a intentar que no falle nada.
Vale, vamos con lo primero.
Lo primero que quiero hacer es recuperar un Pokémon random.
porque es el nombre, bueno, da igual, esto lo podemos hacer después.
Vamos a poner el nombre del Pokémon.
Primero son, ¿cuántos intentos son?
Son seis intentos los que se pueden hacer.
Vamos a guardar en un Previous Guesses, me gusta.
Y vamos a tener también los Global State, no.
Global Results.
Esto es lo que vamos a ir mostrando en la Global Trace.
No, esto ya va a ser el Pokémon.
Vamos a poner por ahora Pikachu.
Pikachu, ¿vale?
Pikachu va a ser el Pokémon que tenemos que adivinar.
Voy a poner una constante y voy a ponerlo esto.
This Pokémon should be fetched randomly from...
Vale, lo primero que quiero hacer es justamente asegurarme que le vamos a poder preguntar al usuario la información.
Así que vamos a hacer una función que sea preguntarle la palabra.
Vamos a poner...
Joder, me encanta esto.
Esto está buenísimo, joder.
Esto está...
Me lo va a escribir esto al final.
Estoy pensando, ¿eh?
Vale, string, prompt, PokémonName is...
Y vamos a ejecutar ya el askword.
Vamos a probar esto.
A ver si esto funciona.
Vámonos aquí.
Ejecuto esto.
Process started.
Ah, espérate, claro.
Es que vamos a poner pocketle.tsx.
No sé si hacerlo en TypeScript.
¡Ojo!
¡Ojo!
Ya está el prompt.
Ya está.
Deja de escribir que jacopailo, ya te digo, ¿eh?
Apenas aprendiendo en Node y sale esto.
Bueno, esto ya tiene bastante tiempo, ¿eh?
Esto ha salido hace dos años o tres.
Pero tampoco han salido muchas alternativas a Node.
Y esto es del creador de Node.
O sea, que tampoco es...
No te deja ni pensar, ya te digo, ¿eh?
Ya te digo.
¿En qué manera Dino es mejor que Node?
Bueno, guardián vicios.
Lo hemos comentado unas cuantas veces ya.
Pero si en el chat te lo pueden volver a poner.
De Pokémon is Pikachu.
Vale.
Vale.
No ha salido nada.
O sea, pongo Pikachu.
Me deja escribir.
Lo cual, o sea...
Pero fijaos en esto, ¿eh?
Que estoy haciendo un prompt.
Es increíble.
Bueno.
Pokémon is Pikachu.
Vale.
Ya termina.
Pero entiendo que esto debería devolverme el string.
Vamos a ver si esto devuelve el string.
Pokémon is Pikachu.
Hostia.
Ya está.
Ya está.
Ya hemos terminado.
No, hombre.
Todavía nos queda.
Pero fíjate que ya puedo recuperar el string de lo que diga el usuario utilizando
la API del navegador.
Dios mío.
Me parece esto increíble.
Vale.
Entonces, aquí vamos a hacer diferentes checks.
¿Vale?
Primero vamos a mirar si es nul.
Porque, bueno, al menos en el navegador se puede cancelar.
Y puedes decir nul.
Vamos a devolver aquí un error.
Error.
Speak.
You must provide a possible Pokémon name.
Vale.
Puede ser nul o undefined.
Por eso le pongo dos iguales.
¿Vale?
Si fuese así sería exactamente nul.
Y quiero que sea o nul o undefined.
Por eso utilizo el de los dos.
¿Vale?
¿Vale?
¿Qué más?
Luego puede ser.
Creo que hay.
Claro.
En el Wordle.
Este.
Voy a ponerlo por aquí.
Tú tienes que decir soluciones de tantas.
O sea.
No puedes poner una palabra de tres letras.
Tienen que ser siempre de cinco letras.
De las mismas letras.
Así que vamos a hacer que si el string.length es diferente al Pokémon.length.
Pues aquí tenemos otro error.
¿No?
Error.
Y podemos poner rule.
Una regla.
Muy bien.
De Pokémon name.
Vale.
Me gusta.
Me gusta.
Me gusta.
Ah.
Claro.
Joder.
Me está ayudando esto un montón.
Vamos a mirar si ya lo habíamos hecho antes.
Previous guesses.
¿Ves que tenía yo aquí un array?
Vale.
Que dice que esto.
Se está quejando TypeScript porque dice que tiene implícito un array de cualquier cosa.
Vamos a decir que es un array de strings.
Entonces.
En previous guesses vamos a ir añadiendo las cosas que hemos escrito.
Porque en Word.
Claro.
Ahora no puedo volver a hacerlo.
Pero no puedes volver a poner la misma palabra.
Lo cual tiene sentido porque si no estás perdiendo la oportunidad de seguir adivinando.
Así que lo que vamos a hacer aquí.
Previous guesses.includes string.
Esto es que ya lo includes.
Tiene sentido.
Esto daría true.
Y si es true.
Da devuelve un error.
Luego vamos a ver.
Bueno.
Es que si hacemos esto es que ya lo hemos adivinado.
Esto lo vamos a hacer después.
Ahora lo que deberíamos ver es que solo puedes utilizar letras.
Solo pueden ser letras lo que has añadido.
Entonces.
Joder.
Vale.
Está bien.
¿Vale?
¿Esto está bien?
Sí.
Vale.
Y vamos a decir return.
Error.
Y el único que ha escrito mal he sido yo.
You already guessed.
No.
You already guessed.
No.
You already tried.
Tried this Pokémon name.
¿Vale?
The Pokémon name must contain only letters.
¿Qué más tenemos que hacer?
Estamos haciendo dino.
Vamos a hacerlo en dino.
Esto.
Lo estamos haciendo totalmente en dino.
Pues nada.
Yo creo que ya está.
¿No?
En el caso.
Entonces ya en el caso de que todo haya ido bien.
Vamos a poner que la response es el string.
A ver.
Le voy a cambiar esto de string.
Vamos a ponerle response.
Response.
Y aquí vamos a hacer que esto devuelva a response.
Vamos a ver.
Runewatch.
Bla bla bla.
Pokémon is.
¿Uno?
Me ha petado.
Ah.
Vale.
Espérate.
Es que aquí todavía tengo que.
Tengo que hacer cosas.
Tengo que hacer cosas.
Este as word.
Esto está muy bien.
Claro.
Ahora lo que tenemos que hacer es tener como un loop infinito.
Vamos a hacer un loop infinito en el que vamos a tener aquí lo que estamos adivinando.
¿Vale?
Trice.
Esto puede ser que lo necesitemos.
Vamos a hacer un loop infinito en que mientras lo que el guess sea igual a un string vacío,
pues hay que preguntar esto.
¿Vale?
Esto lo que hace es devolvernos el error, error y response.
Preguntamos cada una.
Si hay un error, pues lo enseñamos en la pantalla y hacemos un continue.
O sea, si hay un error, enseñamos el error en la pantalla y volvemos a preguntarle al usuario.
Que de hecho esto, el while, no sé qué, no sé cuánto, al final preguntaremos.
¿Vale?
Si preguntaremos aquí.
En cada iteración, as word, si hay un error tal, si hay una respuesta, lo que podemos...
Bueno, aquí podemos ver...
Bueno, vamos a hacer guess.
Nuestro guess es la response que nos ha devuelto.
Vamos a hacer un console log del guess.
Y aquí podríamos ir incrementando el traes, ¿no?
Vale, por ahora voy a probar esto.
A ver qué tal.
Bueno, se está acercando, ¿eh?
Se está acercando.
Sí, sí.
Faltan muchas cosas.
Dice, falta que hayas quemado el máximo intento.
Joder.
Sí, sí.
Faltan muchas cosas.
¿No sería mejor un dog wild?
Qué más da, ¿no?
O sea, porque lo harías una vez.
Bueno, pero es que al final es lo mismo, ¿no?
Porque al final lo vas a hacer igual.
O sea, no sé.
Mejor.
No veo que sean mejor.
Pero bueno, sí que se puede hacer, ¿eh?
Vale.
Pokémon Ease 1.
De Pokémon Ease...
Mira, ya está.
De Pokémon Ease más Bise, sé del carácter es long.
Vale.
Entonces, tiene que ser 7.
Voy a poner Pikachu, que es el bueno.
Vale.
Ah, claro.
Porque es que quiero ver los errores.
Quiero ver los errores, ¿vale?
Entonces, primero, vamos a poner 1, esto.
Si pongo esto, vale, que tiene que ser 7.
1, 2, 3, 4, 5, 6, 7.
¿Cómo es posible?
Ah, porque puede ser null.
Vale.
You must provide possible es este, el de null.
Luego, que sea diferente.
Esto ya lo hemos visto.
Que ya lo hayamos intentado.
Esto todavía no lo hemos hecho, ¿vale?
Y esto tiene que contener solo letras.
1, 2, 3, 4, 5, 6, 7.
Vale.
Pues ya tenemos unas cuantas cositas, ¿vale?
¿Qué tipo de maestría?
Porque según pienso que es innecesario.
Bueno.
Se me hace...
Bueno, pero un wild true.
A ver, podríamos hacer el break, pero al menos ya tenemos una condición.
Midu, ¿qué tal momento Dino?
Pues muy bien, la verdad.
Lo que me tranquiliza es que el creador de Dino es el de no.
No hay nada mejor que ser tu propia competencia.
Hombre, totalmente.
Totalmente, totalmente.
Entonces, vamos por faena.
Que ya esto va teniendo buena pinta.
Lo que podríamos hacer es...
Aquí, esto lo haríamos con el fetch de la API.
Luego vamos a hacer un...
Luego escribiremos y leeremos del file system.
Porque vamos a hacer como trampa para que escriban un fichero.
Y que escriba lo que queremos saber y tal.
Y ya está.
Entonces, ¿cómo podemos hacer esto?
Porque, claro, es que estoy dejando aquí un montón de cosas.
Vamos a mover esto por aquí.
Vamos a mover esto aquí.
Vamos a poner aquí como un start o algo.
Trice number.
Para empezar todo esto.
Vamos a recuperar Pokémon.
Necesitamos el length del Pokémon.
¿Vale?
Y aquí...
Ah, mira.
Esto.
Si tenemos aquí los...
Si los intentos que hemos hecho son...
Bueno, iguales no.
Mayores o iguales que el max try.
Vamos a decir que...
Vale.
You lost.
Y vamos a decir que el de Pokémon was...
Me parece bien.
Y aquí ya devolvemos.
Y si no, entonces hacemos todo esto que estábamos haciendo aquí.
El trace...
El trace lo podemos poner fuera.
Así que vamos a ver esto solo.
Vale.
Ta ta ta.
Spons error.
Esto.
Fuera del while.
Ya tendríamos aquí lo que...
Si el guess es el Pokémon.
Entonces...
Bueno.
Teníamos que hacer check que ese es correct.
¿Vale?
Vamos a crear otra función por aquí que sea de chequear.
Luego la hacemos.
Check.
Check es correct.
¿Vale?
Y al check lo que le deberíamos pasar...
Bueno, le podríamos pasar el Pokémon y tal.
Pero el Pokémon lo tenemos en una variable global.
Así que le vamos a dejar el guess.
Seguridad.
¿En qué sentido?
Si le agregas un process exit para tener problema de perder...
Creo que no tiene...
Eso es una diferencia que tienes de Dino con Node.
Es que no tienes un process.
¿Vale?
No puedes hacer...
No puedes utilizar un process.
El process no está disponible en Dino.
Ahora lo probamos.
A ver si está.
Check if the guess is correct.
Vale.
Check.
Guess.
Si tenemos esto...
Hemos ganado.
Y si no...
Pues...
Vale.
El check...
Este check en realidad lo que vamos a hacer...
Porque el check lo estamos haciendo aquí.
Pero lo que tenemos que hacer...
Esto que veis aquí visualmente lo vamos a hacer también en Dino.
Lo vamos a hacer en Dino.
Vamos a importar una librería que nos coloree las cosas.
Lo vamos a hacer...
O sea, se va a ver bonito.
Vamos a ver las letras.
Lo vamos a ver todo.
Y lo vamos a hacer visualmente.
Para que lo pinte también.
¿Vale?
Así que este check, en lugar de chequear...
Porque ya sabemos si es correcto o no.
Lo que vamos a hacer es print.
¿Vale?
Y vamos a printar esto en la terminal.
Es lo que vamos a hacer.
Así que printamos eso.
Print guess.
Y por ahora vamos a hacer aquí un console.log del guess.
Que esto debería ser un string.
Y por ahora ya está.
¿Vale?
Trice...
Y aquí sería en este else donde vamos a hacer el...
Vamos a poner aquí un espacio.
Trice++.
Y lo que entonces volvemos a hacer el start para empezar.
Vale, vale.
Venga, vamos a ir viendo cómo va esto.
Fatal.
Fatal porque ahora ni me ha preguntado.
¿Por qué no me ha preguntado?
Porque, claro, ahora tenemos que inicializar al menos al principio esto.
Con el número de intentos, que al principio es cero.
¿Vale?
Venga.
Vale, Pokémon es Pikachu.
¿Pikachi?
Pikachu, Pikachu, Pikachu.
You lost the Pokémon was Pikachu.
Was Pikachu.
Bueno, lo que pasa es que esto se ha vuelto loco.
Y los ha hecho todos uno detrás de otro, ¿no?
A ver.
Start.
Length.
Empezamos con el cero.
¿Vale?
Entra aquí.
Trae cero.
Le pillamos el...
Bueno, que esto lo podríamos hacer así.
Pillamos el length del Pokémon.
Esto es porque creo que puede ser interesante que lo mostremos, por ejemplo, ¿no?
Podríamos hacer ahí un console.log y mostrar el length.
¿Vale?
Trae.
Ta, ta, ta.
Si el trae es mayor que max trae.
Que max trae lo hemos puesto aquí, que es seis.
¿Vale?
Y el trae aquí es cero.
Que esto también lo podríamos...
Al final todo esto.
Vamos a dejarlo aquí arriba.
Trae.
Ta, ta.
You lost.
Return.
Hasta aquí, bien.
Luego, mientras haces esto, guess response.
Guess response.
¿Vale?
Si aquí este es igual.
Si no, hacemos el print.
Trae más, más.
Start.
Hmm.
Lo que no veo...
Ah, amigo.
Bueno, no.
Esto da igual, ¿no?
No, eso da igual, eso da igual.
¿Alguien ve dónde me...?
¿Pikachi?
¿Ves?
Es que me los hace todos, Pikachu.
Me lo pone tantas veces.
A ver si...
Falta un break.
Tienes que eliminar guess.
Claro, pero el guess solo lo ponemos aquí en el caso que tengamos una respuesta.
Guess.
Ah, claro.
Es que el guess dice irresponse.
Entonces, el guess es el response.
Pero tiene sentido, ¿no?
Porque mientras no tengamos...
O sea, esto en realidad...
Claro, es que el guess este deberíamos tenerlo fuera.
Es que el guess este que he puesto aquí...
Esta variable, como la tenía fuera, la quería poner aquí.
Vale, ya está.
Venga, vamos a tener a Pikachu y Pikachu.
Vale.
Venga, vamos con la parte visual.
Vamos a hacer esto.
Vamos a buscar alguna dependencia en Dino para hacer esto.
Dino, SirParty, Colors, Terminal, Ink.
Esta tiene buena pinta.
Me parece que esta es una que han migrado de Node, me parece a mí.
Ink.colorize, Hello World, Bold, InkMod, Valen, Ink, Ink.
Pero esto tiene VGBody y todo esto.
Vamos a ver si la Standard Library tiene alguna.
Tiene una.
No puede ser.
Ostras, pues podemos importar esta directamente.
Mira, con esta URL directamente nos vamos a ir aquí y la vamos a importar.
Vale, así que hacemos un import from esto y nos traemos directamente la librería.
Vale, vamos a ver qué tiene por aquí.
Necesitamos un color verde, amarillo y gris.
Así que VGBreen.
VGBreen.
Vale.
Quita.
VGBreen, VGBellow, VGBray.
No hay VGBray.
Vale.
Pues un VGB...
VGBbright Black.
¿Esto qué es Bright Black?
¿Cómo es el negro brillante?
Eliseo, ¿cuál sería la competencia de Dino?
La competencia de Dino sería Node, obviamente.
Esa sería la competencia de Dino, directamente.
A ver qué más tenemos por aquí.
Bold, Italic.
Vamos a traernos el Bold.
El White.
Y ya está.
Vale.
Vale, ahora que tenemos esto, lo que podemos hacer aquí en el Print...
Vale.
Cada vez que hagamos algo, vamos a limpiar la consola.
Vamos a ver aquí con...
Vale.
Por ahora vamos a traernos las letras.
Vamos a separar todas las letras para poder pintarlas así.
Como está aquí.
Vale.
Así que...
¿Qué es?
Bueno, podemos hacer así, ¿no?
Y aquí tener un Array de Strings.
Y ahora lo que vamos a hacer es comprobar cada letra.
Vamos a ver si cada letra...
Si la letra está dentro de...
O sea, lo que estamos diciendo que puede ser lo correcto.
Tenemos cada letra de lo que nosotros hemos puesto.
Por ejemplo, del Pikachu.
Tenemos primero la P.
Vamos a ver si la P está, si está en el sitio correcto, si no está en el sitio correcto y todo esto.
Letter...
Y entonces vamos a mirar el Pokémon.
El Pokémon es el que tenemos el nombre ya aquí, que es el de Pikachu.
Pokémon y le...
Ah, mira.
Pues perfecto.
Esto sería un poco la idea.
Si la letra que nosotros hemos dicho que está en esa posición está en la misma posición que la del nombre de este del Pokémon,
miramos el índice.
O sea, si está en el mismo índice.
Entonces, en los resultados podemos poner que está en verde.
Hemos puesto aquí bold, pero podemos hacer que sea bg green.
A ver cómo funciona esto de colors.
Este no es.
Este.
Vale, son todos funciones que tienes que pasarle el string.
Pues bg green.
Y aquí lo ponemos que sea white.
Vale.
Si la letra podemos poner que si Pokémon incluye la letra, esto lo que significa es que los resultados, vale, algo así.
Pero vamos a poner todo esto, pero con el yellow, bg yellow.
Esto significa que la letra está en el nombre del Pokémon, pero no está en el sitio correcto.
Y luego tendríamos que si, claro, si no está directamente entre los resultados, vamos a poner...
Le he puesto aquí negro brillante.
Bueno, vamos a ver cómo es este negro brillante, que es un poco raro.
Vamos a poner todo esto.
Luego ya nos preocuparemos.
Bright black, ¿vale?
Vale, y entonces los resultados globales...
Pues los resultados, claro, hay que ir enseñándolos, porque si os fijáis aquí, se van acumulando.
Entonces yo lo que quiero es enseñar exactamente esto.
Lo que vamos a ir haciendo es ir guardando los resultados globales para que cada vez que lo intente vaya saliendo cada una de las filas, ¿vale?
Así que global results...
Ya tendríamos los resultados.
Y le vamos a dar unos saltos de línea para que deje espacio.
Hostia, aquí deberíamos dejar espacio también, ¿eh?
Pero bueno, no pasa nada.
Espérate, ¿eh?
Porque esto lo estoy haciendo dentro del for each y esto lo que hace fuera, porque si no la vamos a liar para la.
Vale.
Vamos a ver esto.
¡Pikachí!
Pues ya está.
Ya lo hemos hecho.
No, le falta, le falta, ¿eh?
Pero...
Vale.
Cosas que veo, cosas que veo.
Cosas que veo.
Lo primero es que creo que deberíamos en algún punto pasarlo todo a uppercase, ¿no?
Así que...
Primero esto debería ser uppercase.
Luego el guest...
Cuando tenemos el nombre...
Cuando hacemos esto, guest, response, start...
A ver, ¿dónde está pidiendo...?
¿Dónde está el prompt?
Que no lo veo ahora.
Vale, response, response...
Vale, pues aquí sería response to uppercase.
De hecho, aquí el incluso también...
Vale, o sea que deberíamos...
Hostia.
Bueno.
Vamos a hacerlo regular.
No pasa nada.
To uppercase.
Vale, to uppercase, to uppercase.
Ya está.
Y ahora sí...
Pikachu.
Vale.
Y si pongo...
Pococho.
Vale.
¿Veis?
Se ve ahí como si...
Las letras que están en verdes es que están en la posición correcta.
Y las que están así como grises es que no está en la posición correcta.
Eh...
Midu, hazme un hijo.
Midu, hijo.
¿Un Midu, hijo?
Grande, Midu, saludos de Perú.
Hombre, Julio García.
Gracias, hombre.
¿Cómo haces para el zoom de la transmisión?
¿Modifica en la escala del sistema o se hace por EOS?
Es una cosa que tengo en el sistema operativo.
Cámbialo por un Tesla.
Llegué tarde al stream.
¿Por qué utilizas TSX si lo estás haciendo en la consola?
Ya, lo del TSX es porque antes estábamos con un proyecto en...
Que hemos hecho un poquito de React para ver que se podía hacer React y tal.
No es necesario, ¿eh?
Lo de la X.
Ya está.
TSX es porque antes estábamos utilizando un componente de React por ahí.
¿Y ahora lo venderás a 2 millones?
No, hombre.
Todavía me queda, ¿eh?
Un poquito.
Todavía me queda un poquito.
Me queda un poquito.
Eh...
Vale.
¿Cuándo vamos a ver a MiduDev consumiendo una API de Dino con Angular?
Mis sueños húmedos.
No sé.
No sé por qué.
No sé por...
O sea, cuál es la...
Si al final la API está hecho en Dino, lo puedes consumir con lo que te dé gana.
Hola, Miguel.
Tengo una pregunta.
Recién terminó un curso de Node.
Pero la gente me dice que no hay mucha demanda de Node.
¿Debería complementarlo con algo?
A ver, creo que si solo sabes Node, pues, hombre, por ejemplo, React y cosas así que sería interesante.
Ahora mételo a la paquetería en PM y después de un tiempo corren por el código.
Y si agregamos un espacio entre cada letra, es lo que voy a hacer.
Es lo que comentaba, ¿eh?
Es lo que comentaba antes.
Que lo que me gustaría hacer...
A ver, esto lo podríamos mejorar un poco.
O sea, vamos a crear aquí una función que sea color letter, color letter.
Y el color, ya hemos visto que puede ser verde, amarillo o que pueda ser...
A ver, se supone que es gris, pero bueno.
Y le pasamos la letra.
Entonces, const color methods.
Vamos a crear aquí los...
Si es green, si es yellow y si no es...
Vale.
Y aquí le vamos a pasar de cada uno...
Vg...
Vamos a recuperar de los colors method el color que le pasamos.
Aquí tendríamos la función.
Y así nos podemos quitar todo esto y le hacemos toda la magia esta que estábamos haciendo antes.
Vamos a hacer bold letter.
Bueno, a ver.
Lo podríamos hacer a lo bestia, ¿eh?
Tendríamos esto aquí.
Entonces...
A ver cómo queda el Pikachu este.
Pikachu.
Tendríamos que poner primero un espacio aquí en blanco.
Así que hacemos aquí un espacio en blanco.
A ver, podríamos utilizar part también, pero bueno, vamos a hacerlo así.
Que total.
Esto sería el espacio en blanco.
Luego está en la canelita.
Y aquí lo que necesitaríamos...
También deberíamos tener un espacio en blanco entre...
Letter...
O sea, deberíamos tener un espacio en blanco, creo que así.
Vale.
Color is letter.
Vale.
Letter.
Color letter.
Y todo esto...
Color letter.
Green.
Letter.
Vale.
Vale.
Color letter.
Color letter.
Yellow.
Letter.
Y color letter.
Gray.
Letter.
Y ahora...
Pikachu.
Joder.
Pues está súper chulo, ¿no?
Ya está.
Pikachu.
A ver.
Pikachu.
Pika.
Pikachu.
Vale.
Pika.
Pika.
Oh.
Pika.
Pika.
Ah, no.
Pika.
Pika.
Pika.
Pika.
Acá.
Y mirad.
Lo bueno es que se guardan todas.
O sea, se va viendo aquí cómo se está...
Pika LOL.
Mira.
Y vas viendo cómo vas jugando.
Pika...
Mim.
You lost the Pokémon was Pikachu.
Pues ya está.
Ya hemos hecho el juego con Dino.
Todavía nos faltaría un poquito esto.
Nos faltaría, por ejemplo, hacer el fetch.
Porque ahora tenemos aquí esto.
Vamos a utilizar el fetch.
Ay, este traes.
Al final nunca lo he utilizado aquí.
Aquí he hecho esto.
Pero lo que vamos a hacer es ir a Pokeapi.
¿Vale?
Que teníamos esto por aquí.
Y vamos a pillar primero.
¿Cuántos Pokémon?
A ver.
No sé cuántos Pokémon en concreto hay.
¿Vale?
Pero voy a poner que...
Que hay 800.
Porque sé que 800 hay.
Porque antes hemos entrado en la URL esta de 800.
No sé si hay 850.
Sí.
Parece que sí.
900.
No.
900 no hay.
Bueno.
800 hay 850.
Entonces, cuando vamos a jugar, tenemos que pillar un Pokémon random.
Para pillar un Pokémon random...
Esto lo he enseñado más de una vez.
Pero bueno.
Para que sepáis cómo pillar un ID random, tenemos que hacer random ID, más flor.
Y aquí hacemos un más random.
Y lo multiplicamos por el número de...
O sea, si queremos un número del 0.
Ah, bueno.
Es que esto va a ser del 0.
Esto va a ser del 0.
¿Verdad?
Esto me podría dar 0.
Esto me podría dar 0.
Bueno, a ver, que podría sumarle uno y ya está.
Ya está.
Ya está.
Podríamos hacer esto.
Bueno.
El tema es que esto me va a dar un ID random de Pokémon.
Como podemos utilizar el top level await, pues podemos hacer aquí const response await.
Vamos a pillar el fetch este.
Fetch.
Con el random ID.
Bueno.
Vamos a hacerlo aquí directamente.
Res JSON.
Then.
Esto es la response.
Response punto name to uppercase.
Hemos visto que esto era punto...
Antes lo hemos sacado el name, ¿no?
Name.
Ah, no.
Forms punto name.
Ah, no.
Está aquí.
Name.
Vale.
Con esto tendríamos un Pokémon random.
Aquí, en lugar de response, esto sería el Pokémon.
Así que ya podemos petarnos esto.
Pokémon.
Vale.
Como ya tenemos aquí el Pokémon, cuando preguntamos...
Podríamos hacer al principio algún tipo...
Esto no hace falta.
Podríamos hacer aquí...
Aquí.
Console log.
Let's play a game.
Vale.
Me parece.
Guess the Pokémon name.
Vale.
Console log.
Vamos a poner aquí un hint.
Y vamos a poner...
It has Pokémon punto length.
Characters.
Good luck.
Vale.
Y con esto, si le damos...
Y con esto, si le damos...
Ups.
Vale.
Esto es Dino.
Esto es Dino.
Dino.
Vale.
Sí, no es...
No es...
No es super...
No es super random.
Vale.
El más random...
La distribución que tiene de números es que va bastante al centro.
O sea, que es bastante rollo en ese caso.
Pero...
Pero bueno.
Y me está diciendo que esto me podría dar 851.
Deberías dejar el máximo de 850.
A ver, que da igual en realidad.
El problema es que no me dé cero.
O sea, que podríamos hacer el mod sale.
Y hacer esto.
Y ya está.
Vale.
Vale.
Y ahora Dino se está quejando porque no tiene permiso.
No tiene permiso de acceso a la red de pokeapi.co.
Así que lo que tenemos que hacer sería ejecutarlo todo igual.
Y darle acceso a la onet.
Y con el flag de...
Y ya está.
Con este de la onet y ya está.
O le podríamos dar justo acceso a la pokeapi.co.
Podríamos hacer esto.
De esta forma solo tiene acceso a la red para ir a este host.
Lo cual está bastante chulo.
¿Podrías ir guardando en local storage los ideas que ha sido...?
Está bien.
Con el más uno te jodes y toca el último elemento.
Bueno, más o menos.
Tampoco pasa nada.
O sea, es que tampoco...
Tampoco pasa...
O sea, lo he hecho por poner algo.
Pero podría ser una lista de lo que sea.
No hace falta que se quede...
No sé ni siquiera si hay 850.
Igual 868 o lo que sea.
Bueno, le doy a ver.
Hey, let's play a game.
Guess the Pokémon name.
Hint.
It has 7 characters.
Vale, Pikachu.
¡Uy!
Bueno, ya estamos, ¿eh?
Solo hay 802 Pokémon.
Bueno, perdona.
No los he contado nunca.
No lo sabía.
No lo sabía.
Vale.
Charmander.
Yo qué sé.
Charizard.
No, porque tienen que ser 7 characters.
Chariz.
3, 4...
Charizard.
Bueno, es Cha.
Empieza por Cha.
Empieza por Cha.
Ya sabemos que el Pokémon empieza por Cha.
¿Cómo será por Cha?
Y tiene otra A.
Ah, claro.
Pero esta A...
Bueno, porque, claro, puede ser que la A...
No, Chakra no puede ser.
¿Chayan?
¿Será Chayan?
¿Chayane?
¿Chayane?
¡Ojo!
¡Ojo que tiene todas las letras!
¡Ojo que tiene todas las letras, eh!
¡Ojo que tiene todas las letras!
O sea, puede ser...
¡Chan!
¡Sí!
¡Chan sí!
¡Ojo!
¿Qué hemos ganado?
¿Qué hemos ganado?
¡Oye!
¡Qué chulo!
Oye, ¿qué os parece?
Hemos hecho...
En un momento hemos hecho esto.
Venga, vamos a ver más cosas de Dino.
Vamos a ver más cosas de Dino.
Por ejemplo, ahora que ya tenemos el juego...
Ahora que ya tenemos el juego, lo que podríamos hacer...
Oye, me ha costado bastante menos de lo que esperaba.
Pensaba que lo íbamos a llevar bastante peor, eh.
Pero es que el tema del prompt ese me ha gustado un montón.
Porque con el while esta, al final, lo que hemos podido hacer es ir pidiendo la información al usuario y ya está.
Ahora, lo que podemos hacer es ver más cosas como, por ejemplo, lo del environment variable de Dino.
Vamos a hacer un modo que sea el de trampa, ¿vale?
Un modo trampa.
De forma que...
Vale.
Allow env.
Vale.
Para recuperar una variable en torno a un Dino, hay que hacer dino.env.get y todo esto.
Me gusta.
Está bueno, pero extrañaría un poco los scripts del package.json.
Es medio lío escribir siempre ese script de ejecución.
Más si se agranda el tema de los permisos a los host y quieres darse los sitios específicos.
A ver, vamos a buscar.
Dino alternative npm run scripts.
Tiene que haber una solución.
Me sorprende, la verdad.
Mira, Velociraptor is a script runner for Dino.
Tiene que haber, ¿eh?
Seguro que hay alguna...
Mira, ¿ves?
Ya tendrías aquí.
Ya tendrías esto.
Velociraptor.
Me encanta el nombre de Velociraptor.
Hombre, tiene sentido con Dino, con el nombre de Dino.
Tiene todo sentido del mundo, ¿eh?
Vamos a ver.
A ver cómo se ejecuta.
Dino install.
Dino install Velociraptor.
Va.
Pero es verdad que es raro.
Es raro que no tenga...
Su propia...
No sé.
Creo que es una cosa que debería tener...
O sea, que ellos deberían tener ya solucionados.
Creo que debería tener esto solucionado.
Y me sorprende que Dino no lo tenga solucionado.
Me parece un poco fail.
Porque tiene linter.
Tiene forma de todo.
Y no va a tener una forma de hacer...
¿Ves?
Scripts installer.
Yo creo que lo pondrán, ¿eh?
Hombre, Lizer, gracias por suscribirte.
Muchas gracias.
Pero bueno, vamos a probar un momento el Velociraptor este.
Vamos a probar el Velociraptor.
Esto lo vamos a instalar aquí, por si acaso.
A ver si se puede.
Usando última versión.
Y vamos a poner aquí scripts.json.
He visto que era...
Bueno, también aceptaba YAML.
Puede ser JSON o YAML.
Vamos a poner el YAML, va.
Bueno, a ver.
Vamos a poner el JSON porque es muy parecido a...
Y aquí podríamos tener dev.
¿Y cómo hemos hecho el modo dev?
Vamos a ejecutar todo esto.
Y esto ahora dice que era VRRUN.
No.
Dev.
Pues ya está.
Ya está.
Velociraptor dev.
Y ya lo tendríamos.
La verdad es que chulo.
Podríamos hacer la build.
Denobuild.pocketle.ts.
Podríamos tener el...
Bueno, el run.
Bueno, sí, el run.
Porque sería deno run sin el watch.
O sea, sería todo esto, pero sin el watch.
Tendríamos el link.
Denolint, creo que es.
El formatter.
Denofmt.
Vale.
Oye, pues...
Tiene buena pinta, ¿no?
O sea, parece que sí que...
Que funciona bien.
Bueno, ahora no sé qué le ha pasado ahí.
Pero...
URDEV.
URBuild.
Vale.
Ahí.
¿Es build o bundle?
Es que era bundle, me parece.
No es build.
Era bundle.
Y esto, además, habría que hacerlo dist.pocketle.js.
Claro, lo debe...
A ver.
URBuild.
No.
Claro, es que no existe la carpeta.
Tendría que crearla antes.
Al menos la de dist.
Ahora sí.
Y ya está.
Ahora sí que tenemos aquí el JavaScript con todas las dependencias y todo.
Ya tendríamos scripts.
Ah, sí.
Le voy a agregar el modo trampa.
¿Vale?
Vamos a agregarle un modo trampa en el que básicamente vamos a mirar.
Bueno.
Vamos a hacer, antes de nada,
all code.
Voy a sacar el código este antiguo que tenemos por aquí.
All code.
All code.
Esto, esto era el ejemplo de servers a rendering.
Fuera.
Ah, vamos a poner SS server.
SSR.
Lo vamos a sacar aquí.
Y por qué del...
Vale.
Entonces, ya que tengo esto por aquí,
vamos a poner colors.ts.
Voy a separar unas cuantas cosillas por aquí.
A ver, es que lo he hecho muy a saco.
Y...
Aquí tenía una...
Esto.
Colors methods.
Todo esto.
Entonces, esto.
Lo que vamos a hacer, en lugar de hacer todo esto...
Que esta sería la forma correcta, yo creo, de trabajar con Dino.
Intentar tener las dependencias lo más aisladas posible.
Así que, color letter.
Vale.
Color letter.
Es por function.
Importamos esto.
Color letter.
From colors.
Vale.
Esto debería seguir funcionando bien.
Def.
Vale.
Vale.
Ya funciona bien.
Perfecto.
Bueno, espérate que no he visto si...
Pikachu.
Vale, sí.
Qué guay.
La verdad es que está chulo.
Vale.
Pues tendríamos por aquí esto.
Y ahora vamos a tener también una carpeta...
O sea, una que sea env.
Y...
Otro que sea file.
Porque vamos a guardar un fichero.
Vamos a guardar un fichero.
Entonces, en el env vamos a mirar si...
Esto es dino.get.
¿Cómo era?
.env.get.
Y vamos a pillar el...
Modo dios.
O gotmode.
Gotmode.
Vale.
Y entonces...
Is gotmode...
Vamos a hacer...
Que si tenemos esta variable en torno...
Entonces...
Exportamos esto.
¿Vale?
Y si es gotmode...
Lo que vamos a querer hacer...
Aquí en dino...
Tenemos file.write...
¿No?
File...
Entonces, ¿para qué sirve el file este?
No sirve para nada el file.
Pensaba que habría...
Vale.
Hay un método que es write file.
Fíjate lo fácil que es a la hora de descubrir la API.
O sea, es que no he mirado casi la documentación.
Es increíble.
No he mirado casi la documentación.
Y solo hago dino, que es un objeto global que tienes ahí.
Punto.
Y aquí tienes un montón de cosas.
Y...
No sé.
Ahora he buscado...
File.
Que he visto que al principio he equivocado.
Pero mira.
Aquí tienes todo el tema de...
Copy file.
Write file y tal.
Pues es que es este.
Write file.
Write file.
O sea, vamos a hacer aquí una función.
Que sea...
Write Pokémon file.
Le vamos a pasar el Pokémon.
Que esto no es un Pokémon.
Será un string.
Que dice...
Nombra las variables...
Is Arceus mode.
Venga.
Me parece muy bien.
Is Arceus mode.
Arceus mode.
¿Vale?
Entonces...
Lo que vamos a hacer simplemente es...
Devolver.
Esto debe ser asíncrono.
Vamos a devolver la promesa.
O podríamos esperar.
Pero bueno.
Vamos a devolver la promesa.
Export const.
Devolvemos esto así.
¿Vale?
Vamos a escribir write file.
Esto que necesita.
El path.
Bueno.
Pues lo vamos a hacer aquí mismo.
Y aquí vamos a hacer...
Solution.txt.
Y vamos a guardar el Pokémon.
¿Vale?
¿Vale?
Argument of type.
String is not a...
¡Oh!
¡Qué bueno esto!
¡Qué bueno!
¡Qué bueno esto!
¡Uy!
Aquí he puesto comillas.
Perdón, ¿eh?
Vale.
Pokémon.
Vale.
Esto es porque el write file debe esperar...
Mira.
Text encoder.
¡Qué bueno!
Esto está muy chulo.
¿Vale?
¿Cuál es el problema?
Que el write file este seguramente necesita un...
Un array...
Tipado.
Un array tipado.
¿Por qué?
Porque esto es lo que se sube utilizar para el tema de bytecode.
Entonces la información no la puedes guardar en un string directamente.
Es raro que no haya un método que sea...
Ah, mira.
Write text file.
Bueno, ¿qué queréis?
¿Os explico cómo lo haría de la otra forma?
¿O lo hacemos...?
Esta es la forma fácil.
Entiendo que esta es la forma fácil.
Venga, luego os enseño la otra, ¿vale?
Que es un poquito más complicada.
Pero que es interesante.
Esta es la forma...
Esta sería la forma fácil que entiendo que esto funcionaría.
Entonces lo que podemos hacer aquí...
Vamos a ver si funciona la forma fácil y luego os enseño la forma chunga.
¿Vale?
Que la forma chunga es solo para que entendáis cómo funciona el tema de codificar cierta información.
Lo que pasa es que siendo de terminal, no sé si va a funcionar, ¿no?
Porque si es de terminal y la despliego, ¿cómo va a ejecutar?
Es un poco raro.
O sea, aunque la despliegue, no la vais a poder ejecutar.
Pero bueno.
A ver, vamos a importar esto y luego os explico la forma chunga.
¿Vale?
Vale.
Write Pokémon File.
Esto from barra file.
Y vamos a traer también el...
Isar Zeus Mode.
Y esto lo hacemos de from enf.ts.
Esto nos va a petar, ¿vale?
O sea, nos va a petar así, tal cual.
Entonces, lo que vamos a hacer es que una vez que tenemos en el fetch...
La verdad es que aquí...
A ver, déjame mirar una cosa.
Global Results más igual...
Vale, este tiene sentido.
Voy a mover esto.
Voy a mover esto de sitio.
Esto es que al final lo podría haber hecho en otro sitio.
Bueno, da igual.
Es que lo puedo hacer aquí.
Si es Arceus Mode, entonces lo que vamos a hacer es escribir en este sitio.
Además, con una wait, porque si no...
Bueno, da igual.
En realidad lo podríamos hacerse en una wait.
Vamos a escribir al Pokémon.
Entonces, vamos a hacer el Arceus Mode.
Con Arceus Mode a true.
Que en realidad con cualquier cosa funcionaría.
VRDEF.
A ver si funciona con el Velociraptor este.
Vale.
Me está petando.
Que es lo que esperábamos, ¿vale?
Estábamos esperando que nos petase.
Porque el leer las variables de entorno también necesita permisos.
Y es súper interesante esto.
Porque en realidad si lo piensas fríamente,
Node tiene mucho peligro.
Porque en Node tú puedes ejecutar un script
y entonces podría acceder a todas las variables de entorno que tengas
y empezar a enviarlas a algún sitio.
¿Sabes?
O sea, es muy chungo.
Que por defecto tengas ese problema es muy bestial.
Yo creo que en algún momento Node todas estas cosas las va a cambiar
ahora que Dino ha enseñado un poco el camino.
Pero como veis, tenemos que poner un flag más.
Así que nos vamos a ir a scripts y vamos a hacer como allow...
Bueno.
Vamos a hacerlo aquí.
Allow env.
Y yo creo que también te permite indicarle cuáles son las variables de entorno
que quieres pillar.
Creo que puedes hacer esto.
Lo vamos a mirar un momento.
Allow env.
Y veis que podéis pasarle las variables.
Eso está muy chulo.
Eso está muy chulo porque al final le dices,
no, este programa solo tiene acceso en esta variable en concreto.
Lo cual está súper chulo.
Está súper chulo.
Claro, el string lo convierta a boleano.
¿El string lo convierta a boleano?
¿El string lo convierta?
O sea, lo que estoy haciendo yo es convertirlo a boleano.
Esto lo que estoy haciendo es pasarlo a false.
A ver, esto es lo mismo que hacer esto.
Pero en lugar de hacerlo así, lo estoy haciendo así.
Me gusta, normalmente me gusta más este.
Porque me parece más fácil de leer.
Pero esto lo que hace básicamente es que esto lo transforma a boleano
y lo convierte al signo contrario.
O sea, si esto es trucey, lo pasa a false.
Y luego le vuelve a dar la vuelta.
Y esto directamente lo convierte a boleano.
Bueno, lo vamos a dejar así para que no volváis locos.
Venga.
Entonces, ponemos el modo dev.
Aquí he puesto ya el allow env.
Esto también lo voy a poner en el run.
Hostia, en el run este se me ha olvidado aquí el de no run de todo esto, ¿no?
Vale.
Venga, modo dev.
Vale.
Y ahora se queja otra vez.
Se queja otra vez.
Se queja otra vez porque necesita acceso para escribir.
O sea, es increíble.
Es increíble.
Está muy chulo.
Está muy chulo.
Está muy chulo porque es que en Node puedes escribir lo que te dé la gana.
Así que ahora nos está diciendo, oye,
pero que necesito acceso para escribir en el solution txt.
Vuelve a ejecutarlo.
Entonces, aquí podríamos hacer dos cosas.
Una, de nuevo, podríamos decir allow write y ya está.
O le podríamos decir que solo puedes escribir en el punto barra solution.txt.
Creo que esto funcionaría.
Vamos a probarlo.
¡Qué chulo!
Ya está.
Entonces, como veis, estamos en el Arceus Mode y aquí la solution tendríamos nuestro nombre del Pokémon.
Así que ahora podemos decir guardeboil.
¿Ves?
Guarde...
Obul.
Ahí.
Pues eso.
Así que súper seguro.
La verdad es que está muy bien.
Alguien preguntó por qué era lo del beneficio de seguridad.
Toma tu respuesta.
Hombre, claro.
O sea, yo creo que es bastante evidente el beneficio de seguridad.
Muchos de los ataques que ha habido en Node han sido justamente por problemas de seguridad.
De que un script...
Tú, imagínate.
Mira, lo voy a explicar para que os hagáis un poco la idea, ¿no?
Tú en Node instalan muchas dependencias.
Y esas dependencias tienen otras dependencias.
Imaginad que una sola dependencia, por muy pequeña que sea, tiene problemas de seguridad.
Que empieza a escribirte archivos, a leerte archivos de tu sistema.
Es muy fácil.
Es muy fácil.
Es muy fácil atacar un paquete que sea lo suficientemente famoso y que se ponga a leer archivos de tu sistema
que pueda tener información sensible y enviarlas con un fetch.
Es súper fácil.
Entonces, lo que está haciendo esto de Dino, que alguien decía,
¿Pero no crees que esto es muy tedioso de darle permisos todo el rato?
La verdad es que no.
No creo que sea tedioso.
¿Por qué?
Porque normalmente para producción lo vas a tener bastante controlado.
Y una vez lo tengas más o menos.
Si es para probar, piensa que si lo que quieres es probar, puedes hacer Dino.
Allo.
DinoRan.
Allao.
Y puedes hacerle un All.
O menos A, en mayúscula.
Y dices, aquí, pocketle, no sé qué.
Y ya lo tendrías.
Entonces, esto lo que hace, este menos A, que no está recomendado, esto lo que hace es darle directamente permiso de todo.
Pero no lo recomiendo.
Porque, claro, ¿cuál es el tema?
Que tú estás importando a veces paquetes incluso, como por ejemplo, este Colors.
Esto es un paquete que está en internet.
Que es lo mismo que pasa con NPM, ¿no?
Pero a mí no me parece tedioso.
Porque al final es una cosa que haces una vez.
Que tampoco es que estás haciéndolo constantemente.
No estás cambiando constantemente esto.
Y me parece bien porque es una posibilidad que tienes.
Ya te digo que a las malas le pones este flag y se lo come todo.
Yo no lo haría.
Yo creo que esto es la forma correcta.
Y creo que Dino en esto se ha pegado un tanto.
Yo sé que a nosotros, igual a nuestros proyectos nos da igual.
Pero tenemos que tener en cuenta que hay proyectos ahí fuera, en producción, que dan servicio a millones de usuarios.
Y que es muy peligroso este tipo de cosas.
Entonces, yo creo que tiene sentido.
O sea, me parece que tiene todo sentido el mundo.
También es verdad que este Allow Write no hace falta indicar todos los archivos.
Por ejemplo, yo creo que puedes decirle en la carpeta.
Por ejemplo, este Allow Write sería para esta carpeta.
El Allow Net, creo, si no me equivoco.
Allow Net Domain.
No sé si Regex, pero tiene alguna cosa.
Dino.
Creo que puedes tener como...
¿Ves?
O sea, puedes poner...
Puedes separar por comas diferentes dominios.
Puedes utilizar un dominio.
Y me imagino que sí que puede ir a subdominios.
O sea, que habría formas de simplificar esto.
No tengas que ponerlo todos a mano.
Por ejemplo, esto sería permitir escritura a esta carpeta.
Pero también podrías permitir escritura a todo.
O sea, me parece muy bien que es muy granular.
Aquí, por ejemplo, si no le pones nada, pues sería disponible todas las variables de entorno.
Si le pones esto, bueno, pues serían esas variables de entorno que tú indiques.
¿Cómo le pones autocomplida a la terminal?
Eso es FIC, que es una aplicación que está muy chula.
Yo creo que sacará un paquete para que sea súper sencillo el tema de los permisos.
Entonces, no creo, porque ya un paquete es demasiado tarde.
O sea, un paquete no puede ser.
O sea, no sé.
Igual sí que puede ser un NP.
O sea, una utilidad que ejecutas antes si te va preguntando.
Pero vaya.
No sé.
Yo creo que está bien.
Al final tiene todo sentido el mundo.
Tiene buena pinta.
¿Me repites el nombre del terminal?
FIC.
Bueno, la terminal se llama ITERN.
Bueno, y esta es la de Visual Studio Code.
El autocompletado es de FIC.
A ver, ¿qué más quería?
Quería hacer una cosa más.
Y ahora...
Ah, sí.
Bueno, quería indicar esto que teníamos por aquí.
Quería hacer lo del local storage.
Quería hacer lo del local storage.
Pero bueno, es que me parece brutal lo que hemos hecho aquí en un momento.
Esto ha sido tremendo, ¿eh?
Vale, cada vez que juguemos...
Vamos a pillar del local storage.
Local storage.
Previous game o times plate.
No, getItem.
Vamos a pillar el getItem.
Esto de times plate.
Vale.
Claro, esto puede ser null.
Así que vamos a hacer esto.
O cero.
Pero el más...
Más cero, ¿qué hace?
No hace nada, ¿no?
O sea, lo deja cero, ¿no?
Sí.
Más cero es cero.
Es plate.
Y aquí vamos a hacer...
Exacto.
Este tu string no hace falta.
Ah.
Claro.
Sí que hace falta.
Vale.
Made with love by Jorge Bravo.
Esto es mentira, ¿vale?
Jorge Bravo no ha estado aquí.
Así que no me engañen.
Que no me engañen.
No, Jorge Bravo, un coño, ¿eh?
Ay, qué risa.
Ah.
Falta el modo para escribir archivo con unit 8.
Ahora os lo explico, ¿vale?
Ahora os lo explico.
Es que quiero...
¿Qué puedo poner aquí?
Ah.
Esto.
You.
Bueno.
Joder.
Es que si quiero poner aquí una variable...
You have played tantas veces.
¿Vale?
Times plate.
Times plate.
Bueno, es que he hecho esto.
Y ahora esto.
Y ahora esto.
Times plate.
Tu string.
No sé qué.
Vale.
Vamos a ver esto.
Denon Run.
Vale.
Ha jugado una vez.
Ha jugado dos veces.
Toma local storage.
¡Dios!
Toma local storage.
Y el Pokémon.
Vamos a ver la solución.
Ah, no.
Esta solución...
Ah.
Arceus mode.
True.
¿Era Arceus?
Sí.
Vamos a ver la solución.
Machoque.
Machote.
Ojo, machote.
Pachote.
Achote.
Joder.
Es que me ha gustado machoque.
Dios.
Está súper chulo.
Vale.
Ya hemos hecho esto.
Os voy a explicar esto.
Os voy a explicar lo de guardar el archivo.
Como veis...
Buah.
Es que es súper fácil grabar un archivo.
Súper fácil.
Hacéis deno.writefile.
No sé qué.
Bueno.
Antes, cuando he hecho esto.
writefile, me ha salido que no podía guardar esto.
Me ha dicho, no puedo guardar esto.
De hecho, se queja TypeScript.
Dice, el argument of type is not as enabled.
Y esto es porque el writefile este no espera un string,
sino lo que espera es un int 8 array.
Esto, al final, normal,
porque entiendo que este es como un poquito más de bajo nivel
que no el write text file.
Que, bueno, seguramente esto no vais a necesitar nunca,
pero, bueno, creo que es interesante
por si lo queréis saber.
El tema es que para hacer o usar que el writefile este funcione,
para convertir un string a este formato,
lo que tenéis que utilizar es el text encoder.
Así, next text encoder.
¿Vale?
También podéis transformar streams.
¿Vale?
Por si lo necesitáis.
En este caso no es un stream,
sino que es un string.
El text encoder.
Entonces haríais encoder punto encode
y le pasáis el string que queréis transformar.
En este caso, este.
Y aquí ahora sí que tendríamos el...
¿Cómo se llamaba esto?
Wint 8.
Bueno, podríamos ponerle...
Bueno, bytes.
Los bytes, básicamente.
Y ya está.
Esto sería.
Lo interesante...
Y por qué os explico esta mierda, ¿no?
Porque dirás, bueno, y esto para qué me va a servir la vida.
A ver, te va a servir porque este text encoder,
en realidad esto es una API nativa de la plataforma,
de la web.
Y a veces, cuando tú lees un archivo,
puede ser que tú leas un archivo
o que un stream de datos y este tipo de cosas.
Y te puedes encontrar...
O tienes que...
Por ejemplo, esto puede pasar con vídeos.
Bueno, aunque eso son array buffers.
Pero el tema es que lo que te permite
es que hay veces que los datos te llegan como un stream
o te llegan con un formato byte o lo que sea.
Lo que puedes hacer es codificarlo.
En este caso, el string lo estamos codificando a ese formato.
Pero también lo puedes decodificar.
Tendrías el text decoder.
Y entonces harías un decoder punto decode
y le pasarías el unit.
O sea, el array de enteros de 8 bits sin signo, ¿vale?
Para transformarlo en un string.
Que sería lo contrario a hacer esto.
De hecho, si leyéramos este fichero,
seguramente nos encontraríamos que nos devuelve un win8 array.
Ese es el tema, ¿vale?
¿Podrías guardar tus news en txt?
A ver.
Un poco difícil, ¿eh?
¿Para guardar logs?
Bueno, a ver.
Lo que pasa es que es lo que os digo.
O sea, está bien el local storage,
pero, por ejemplo, si cada vez que hacéis un despliegue
se borra esa carpeta porque levantáis nuevas máquinas,
entonces, pues, se lía parda.
Se lía parda.
Y, bueno, creo que con esto ya estamos.
La verdad es que me lo he pasado increíble.
Me ha encantado.
A mí me ha encantado.
Me ha encantado mucho y muy fuerte.
Mucho y muy fuerte.
Run, location...
Claro, location API este, que antes estaba mirando,
es un poco raro porque, claro, location API, para que lo sepas,
es básicamente aquí tendrías el location.hrf, ¿no?
El location API lo que te permite es recuperar información sobre la URL que tienes aquí.
De hecho, ves que aquí tienes esta, es la misma que tendrías aquí.
Entonces, también está disponible en Dino,
pero, claro, es raro porque en Dino no tienes una web.
O sea, no tienes una URL en la que puedas acceder de esa forma.
Por lo tanto, se la tienes que informar de alguna forma.
¿Ves?
Cuando haces un deno run, le puedes pasar un parámetro location
e indicarle cuál es la location que vas a poder luego acceder dentro.
No entiendo muy bien cuál sería la utilidad real de tener este tipo de, no sé.
Bueno, mira, esto es una buena utilidad.
Justamente, esto es una buena utilidad.
Esta será una buena utilidad a la hora de, justamente,
claro, cuando tú haces un fetch relativo,
lo que haces es utilizar el location
para saber dónde tiene que encontrar los fetch relativos
o las URLs relativas.
Pues, mira, no se me hubiera ocurrido este uso.
Mira, solo usar si necesario.
Yo, la verdad, es que lo evitaría.
Yo lo evitaría bastante porque me parece un poco peligroso.
Pero, bueno, entiendo que esto funcionaría.
Pero yo no lo haría.
No lo haría, la verdad.
Ah, mira, también tienes import maps.
¡Ostras! ¡Ostras!
Mira, pues, mira, antes que estábamos hablando de esto de las dependencias,
que os preocupaban un poco,
pues, se ve claro.
Buah, es que esto está muy chulo.
Es que por eso digo que me gusta tanto Dino,
porque es que tiene un montón de cosas que son de la plataforma.
Los import maps es una cosa que va a llegar al desarrollo web,
que es la bomba.
Es la bomba.
Yo tengo una charla por ahí que hice,
hablando de esto y otras cosas.
Y esto lo que te permite es que en tu código JavaScript,
sin webpack, sin npm, sin nada de eso, ¿vale?
En tu código JavaScript tú hagas import moment from moment
y este moment, utilizando el import map,
vaya en realidad a una URL o a una ruta.
Lo cual es brutal.
Y veo que Dino, hostia, no lo sabía.
Y esto es lo bueno de leerse la documentación.
Pues, te lo...
O sea, funciona también.
Vamos a probarlo para que lo veamos en funcionamiento.
Pero esto lo cambia todo.
Esto lo cambia todo.
Esto lo cambia todo.
Por ejemplo, nos acordamos en colors
que yo tenía esta dependencia.
Pues esta dependencia,
nos vamos al import map
y aquí lo que podemos hacer es imports
y vamos a poner aquí colors
y aquí le vamos a decir
dónde tiene que ir a buscar la dependencia de colors.
Esto sería como un package JSON, básicamente.
Esto sería como un package JSON, pero es nativo.
Pero es nativo.
O sea, es que es tremendo esto.
Esto es una...
O sea, es que es lo que os digo.
Es que Dino, lo que más me gusta
es que aprendes un montón de JavaScript.
De hoy y del futuro.
O sea, que esto es tremendo.
Bueno, pues ahora lo que podríamos hacer
en colors, en lugar de usar esto,
hacemos esto.
Hacemos esto.
Pero ¿por qué dice que import colors...
No sé qué, no sé cuánto.
Dino import prefix missing.
Bueno, se supone que no debería ser necesario.
Ah.
Es que...
Package barra colors.
Package barra colors.
No, no me deja.
Y aquí veo que lo utilizan sin problemas.
O sea, que no sé por qué...
No sé qué, no sé cuánto.
For absolute imports.
Esto es...
A ver, entiendo que es el linter este
que se podría desactivar.
Me imagino.
Me imagino que tampoco me va a dar ningún problema.
O sea, voy a dejarlo como estaba.
Y lo probamos.
Y seguro que el linter este se puede desactivar
o se puede hacer alguna cosa.
Entonces, ahora, tal y como teníamos...
Esto, con el demo run este...
Ahora le podríamos decir
dónde tenemos el import map
y le decimos que lo tenemos en
punto barra import map json.
Y si le doy al enter...
Pues...
8 cara 3 pica pica.
Vale.
Podemos ver que está funcionando correctamente.
O sea, ahora, cuando va a buscar este colors...
Que, bueno, ya os digo que este...
Este linter yo entiendo que se podrá quitar
de alguna forma.
De hecho...
De hecho, antes lo he visto.
Que estaba el json config este.
Se podía poner un json config.
Y aquí...
Creo que había el link.
No, aquí no aparece.
Pero estaba el link y se podía configurar el link.
Se podía configurar.
Configuration file.
Esto.
Compiler options.
Ta, ta, ta.
¿Ves?
Y aquí se podía...
Se podía configurar esto.
Así que...
Lint files.
Bueno, esto lo vamos a dejar así.
Tags.
Recommended.
Include.
¿Vale?
Vamos a poner un exclude de este.
Import prefix missing.
Creo que...
O sea, entiendo que sería así.
Que no hace falta ponerlo todo.
Pero bueno, veo que da igual.
No sé si es que tengo que cerrar y volver a entrar.
Pero esta sería la idea.
Esta sería la idea.
De desactivarlo.
No sé si...
No.
Bueno, no sé.
No sé cómo se...
Si es fiable esto para desactivar o...
Entiendo que si a lo mejor hago el Deno link aquí...
No.
¿Ves?
Aquí no me está fallando.
Aquí no está fallando.
Es el editor.
A lo mejor si salgo y vuelvo a entrar...
Bueno, no me está fallando, pero tampoco me está fallando...
O sea, me está fallando aquí porque le da la gana.
Directamente.
O sea, porque le da la gana.
Porque en el Deno link no falla.
Igual es un problema de la extensión.
Bueno, el tema es que con los import maps...
Tú le puedes indicar aquí un nombre al que referirte...
Con una dependencia, aunque sea de fuera.
Y irá a buscar esta dependencia aquí...
Aunque tú pongas esto.
Y es como un alias.
Es como un alias, básicamente.
Recargando la ventana.
A ver.
Me parece a mí que...
Reload window.
A ver.
¿Qué va?
¿Qué va, qué va?
No sé por qué, pero no.
Midu, mira la documentación.
La documentación la he mirado un poco.
Pero esto es relative import prefix missing lint import map.
Mira.
Justamente este es el problema que tenemos.
A ver.
Can you test...
No sé qué.
Cut.
Ah, mira.
Ah, mira.
Ah, ya está.
Vale.
Lo que pasa es que es esto.
En el workspace, como os decía al principio...
Cuando utilizamos la extensión, cuando estamos utilizando la extensión, hemos iniciado el proyecto, lo que está pasando es que, veis, aquí se ha activado el linter, he dicho que no utilice APIs no estables, hemos activado la extensión de Dino, y aquí hay que decirle también que utilice la de los import maps.
Y indicarle dónde tenemos el import map.
Entonces, supongo que hay que utilizar esto.
Vale, pues ha pasado igual.
Import punto map, suggest import host, suggest import host, bueno, pero no.
Pensaba que era eso, pero no.
Pensaba que, porque aquí parecía que el firmware was missing.
Según este, a este se lo ha arreglado.
Pero...
Ah, ya está, arreglado.
Ahora sí, ahora sí se me ha arreglado, ¿vale?
El tema es que tenía que reiniciar.
Para decirle que esto en realidad no necesita...
O sea, es una dependencia que puede resolver por sí misma, le tenemos que decir dónde están los import maps a la extensión, ¿vale?
Y ya está.
Y de esta forma, pues ya lo tendríamos.
Ya lo tendríamos.
Ahora ya sí que sé dónde encontrar este colors.
De hecho, le puedes dar...
Y fíjate, te lleva al colors.ts que se ha descargado, pero es el de la URL.
Ah, no.
¿Este colors?
Ah, no, me está llevando al mismo.
La madre que lo parió.
Me ha engañado.
Pensaba que lo estaba encontrando.
Porque fíjate, que como pone...
¿Ves que pone Resolve Dependency y sí que encuentra la URL?
¿Veis aquí que pone code?
Esta es justamente la dependencia que he puesto en el import map.
Es exactamente la misma.
Y pensaba que iba a saber, al darle click, que me iba a llevar ahí.
Pero...
Ah, sí, me está llevando.
Me está llevando.
Sí que me está llevando a la web.
Sí, sí.
Es que como he visto esto...
Sí, sí, sí que me está llevando.
Pero esa es la versión que tenéis descargada.
Pero bueno, está bastante bien igualmente.
Increíble que este pana se mete en cualquier lenguaje y lo entiende.
Y yo aquí medio aprendiendo.
Bueno, a ver.
También todos nos aprendemos.
O sea, todos estamos aprendiendo.
Yo he aprendido hoy Dino un montón.
Yo no había tocado...
Sí que había tocado Dino antes.
Pero ha cambiado un montón y...
Joder.
Además hemos hecho programilla este que ha quedado súper genial.
Estoy súper contento.
Estoy súper contento de lo que hemos hecho aquí.
Pica, pica, pica.
Pica, pica, pica, pica.
Vale, la K no está.
Vale.
Y, no.
Pi, no.
I, I, P, P, I, A, A, S, E, P.
Ojo, la P va ahí.
La P va ahí.
Venga.
A adivinar el Pokémon.
Es para darle hostias.
Sí.
Grande, Midu.
Tiene mucho potencial.
Deploy, deploy.
Quiero jugar eso.
Lo malo es que si yo despliego esto, yo no creo que lo pueda utilizar.
Porque pensad que si yo lo...
A ver.
Voy a subir el repositorio.
¿Vale?
Vamos a subir el repositorio.
Vamos a crear un nuevo repositorio.
Bueno, aquí lo pienso.
Voy a intentar hacerlo todo desde la terminal.
Va.
Vamos a intentar hacerlo todo desde la terminal.
GH.
Repo.
Create.
Y esto le vamos a llamar...
Dino Wardle.
¿Vale?
Vale.
Ah, quedamos fatal.
Ah, porque tengo que decirle...
Public.
Vale.
Repo init.
No.
Pensaba que funcionaría.
Es que nunca creo repos desde el principio así.
Nota git.
La madre que parió.
¿Cómo era?
Repo init.
No.
View.
Create.
Archiclone.
Syntheser.
From source repository.
Bueno.
Pues nada.
Me he quedado con las ganas.
Me he quedado con las ganas.
Me ha creado el repo.
Pero no.
No me lo ha...
Pensaba que me lo iba a hacer de una.
Pero ya veo que no.
Dino.
Wardle.
¿Vale?
¿Vale?
¿Vale?
SSH.
Create.
Push.
Hostia.
Dorian.
¡Hombre!
Muchas gracias por ser 37 personas.
Mirad lo que hemos hecho desde cero.
Decidme que no está chulo.
Con Dino hemos hecho esta cosa.
Esta cosa.
¿Sabéis lo que es el Wardle?
Bueno.
Pues hemos hecho uno con Dino y para ver si adivináis los pokémones.
Y por ejemplo Pikachu.
Entonces te dice.
Vale.
Pues tiene la letra I.
Pues a ver.
Chariza.
Chariza.
Vale.
La I sí que la tiene.
Joder.
No voy a dar ni una.
D.
T.
I.
B.
E.
Vale.
Pues estas letras están.
Pero no en ese orden.
Bueno.
Pues lo hemos hecho desde cero con Dino.
Hemos estado aprendiendo Dino.
Y de hecho ahora estamos metiéndolo en un repositorio.
Para que lo pueda ver y trastear la gente.
Y además.
A ver si no la lea parda.
Que no la lea parda.
Vale.
Git init.
Ta ta ta.
El ringme.
No.
Git remote add.
Vale.
A ver que no te da ninguna cosa rara por aquí.
Vale.
All code.
Bueno.
Solution este tampoco.
No es necesario.
Así que vamos a ponerlo en un git ignore.
Git ignore.
Solution.
.txt
Y lo que vamos a hacer.
Git branch.
Esto ya está.
Vamos a poner aquí.
First commit.
Git push origin main.
Vale.
Y ahora con esto.
Ya lo teníamos por aquí.
A ver.
Lo malo.
Podríamos desplegar esto.
Lo podríamos desplegar.
Pero es verdad que ya os digo.
Como hemos hecho una aplicación de terminal.
Pues igual no tiene mucho sentido.
¿Qué pasa chumachos?
¿Tiene sas?
No tiene sas ni css.
Bueno.
Tiene estilos.
Me curro los estilillos.
No está mal.
Hasta los que hacen los libros les hace falta revisar el git.
Hombre.
Bueno.
No.
Eso sí que me lo sabía.
Lo que no me sabía.
No quería repetir.
Escribirlo todo.
Lo que no me acordaba era el cómo hacer el repo.
Y a la vez añadirle el remote.
Y sé que se puede.
Pero me ha dado rabia que no me he acordado.
Bueno.
Vale.
Ya tenemos esto por aquí.
Y decíais de desplegarlo.
Lo malo lo puedo desplegar.
Pero lo malo.
Escribirlo.
Escribirlo.
Escribirlo.
Escribirlo.
Escribirlo.
No.