Bueno, pues teníamos la PR de Eliud Gon, que... Oye, ¿esta bandera de dónde es Eliud Gon?
República de Nicaragua. Hostia, no sabía que esta era la bandera de Nicaragua.
I don't know what I am. Quiero pensar que eres una persona humana.
Eliud. Eliud. Nunca había escuchado el nombre de Eliud. Pero muy bien.
Bueno, lo que ha hecho Eliud es brutal. O sea, brutal. Sí, ¿verdad? Parecía de los Illuminati.
O sea, brutal.
Pues ha añadido este botón de aquí, que es para añadir este buscador de packages en Skypack.
Para el que no sepa lo que es Skypack, lo hemos visto alguna vez, que es para tener paquetes de NPM que son utilizables desde el navegador directamente.
Por ejemplo, este de Confetti, le damos aquí a Run. Y mira, fíjate. Lo ejecuta aquí directamente. Run, run, run. Y este de Confetti.
Kaleidoscope. Muchas gracias por esa suscripción con Prime, amigo. Muchas gracias.
Entonces, mira, es que es brutal. Es que en Macri Modules, esto, o sea, yo no digo, yo no pongo notas, pero es un 10 directamente.
Pues esto es lo que ha hecho nuestro amigo Eliud Gon. Y por lo tanto, bueno, para que lo vayáis funcionando.
Aquí si buscamos Solid, por ejemplo. A ver si sale SolidJS. Hostia, searching.
Solid, no sé si es Solid. Ah, SolidJS. Mira, aquí lo tenemos.
Y le doy un clic. Pues me lo ha importado directamente aquí en el JavaScript. Esto está muy bien. Está muy bien. Muy rico. Muy rico.
Así que vamos a echarle un vistazo al código, un poquito de Eliud Gon. Seguramente lo vamos a mergear, seguro.
Y si queremos hacer alguna cosa, pues le echaremos un vistazo posteriormente y ya está.
Pero bueno, un poquito para echarle un vistazo. Vale, esto del Hidden, porque esa parte está oculta al principio.
Este es el iconito. Está muy bien, porque ha conseguido el icono, este icono de Skypack.
No sé de dónde lo habrá sacado. Supongo que es este, que es un SVG y se lo ha copiado.
Sí, sí, sí, ha hecho eso. Pero bueno, que bien conseguido. Bien conseguido porque de verdad da el pego aquí, pero totalmente.
O sea, genial. Muy bien. A ver qué más.
Search for and use JavaScript packages from NPM.
From NPM.
No me queda claro si es for...
Es que no es que lo busque from NPM, porque Skypack es como un registro en sí mismo.
Pero bueno, no pasa nada.
Digital for this package. Vale.
Vamos a ver un poquito el JavaScript. Vale, al final lo ha separado en un solo archivo.
Skypack. Voy a hacer esto más grande para que lo veáis.
Que luego me decís que no veáis. Aunque luego me decís, oye, ¿por qué tenéis la letra tan grande?
Vale, window.onMessage.
¡Hostia!
OnMessage.
Data.
Hostia, window.onMessage.
What?
What? ¿Con ese window.onMessage?
¿Dónde está utilizando...?
Hostia, window.post.message.
No sé, no sé si utilizaría un window.post.message en este caso.
Creo que esto, a ver, es una forma interesante, pero en este caso yo evitaría el post.message y el onMessage para hacer esto.
Incluso podría trabajar mejor con eventos o incluso se podría trabajar con el estado global que tenemos.
Pero bueno, por ahora lo vamos a dejar así, ¿vale?
OnMessage.onMessage.prototype.stream.call.data.
A ver si es que esto, claro, es que esto, tal y como está este if, creo que se podría hacer un poquito mejor.
Jset, pero bueno, esto está bien.
Set value.
Claro, pero si yo he escrito, o sea, si yo escribo aquí, vamos a poner, yo pongo aquí un console.locola y yo busco aquí solid, vale, lo escribe arriba del todo y luego le, vale, está bien, lo que hace es dejar el valor del JS Editor, le deja un salto de línea y hace el import en la primera línea.
O sea, lo que hace es que siempre añade la primera línea, ¿no?
Si ahora busca aquí React y le damos React, pues siempre me lo añade la primera línea.
Bueno, está bastante bien esto, está bien, ¿vale?
Aquí tenemos lo de Skypack con The Bounce, DOM, esto es para evitar que la búsqueda, pues esté haciendo búsquedas todo el rato.
API URL, CDN URL, ¿vale?
Search resource, aquí pilla todos los elementos del DOM al principio.
Aquí hace lo del evento para cuando se está escribiendo y a ver el handle search.
Hostia, qué raro esto.
Search input, Skypack search.
Search.
Search input, o sea, es como que le cambia el nombre.
Y luego utiliza search input ya.
Hostia, no sé si ya le llamaría aquí search input, ¿sabes?
Para evitar este tipo de reasignación para cambiarle el nombre a la variable, yo lo podríamos hacer de otra forma.
Pero bueno, entiendo un poco por qué lo ha hecho.
Vale, results, inner, vale, con inner HTML, bueno, esto es para todos los resultados.
Bueno, yo aquí en lugar de un for igual podemos intentar hacer otra cosa, pero claro, entiendo por qué lo ha hecho, porque luego habrá hecho esto del click.
Vale, handle page.
La verdad es que este es el rollo, este es el rollo de manejar con HTML la creación del DOM, ¿sabes?
El tener que hacer tan imperativo esto de cuando haces un click y todo esto, esto es un poco rollo.
Pero bueno, esto tiene buena pinta, fetch packages, no undefined.
Ah, mira, esto ahora os explico por qué le ha dado este error el linter y cómo solucionarlo y por qué tiene sentido solucionarlo como vamos a hacer.
Pero bueno, pero está bien, ¿eh?
Data results map, result.name, description.
Esto ahora veremos cómo hacerlo de otra forma, pero está bien la idea.
Vale, handle package selected.
No sé si está repetido algunos de los que ha puesto por aquí, ¿no?
Es que me sorprende aquí que hay un montón aquí de elementos nuevos.
Pero bueno, vale, editor.
Hostia, esto es para los anchors.
Hostia, hover text underline.
Bueno, como no tenemos ninguno, claro, este es el primer enlace que tenemos, pues no pasa nada.
Bueno, está bien.
Vale, y esta es toda la versión, todo lo de Skype, Skype content.
Ha utilizado aquí el parent selector, este, que es el nativo de CSS, ¿eh?
Este es el nativo de CSS, importante.
No funciona como el de SAS.
Vale, aquí con el input, ¿veis?
Aquí ya tenemos un componente que es como reusable y no lo estamos reusando como tal.
Este es un poco el rollo.
Bueno, y una utilidad de strings para capitalize.
Vale, bueno, esto está bien.
Vale, no usa jQuery.
Estamos utilizando, parece jQuery, pero ahora lo enseño.
Lo vamos a mergear, vamos a hacer un merge de esto, que está muy bien.
Muchas gracias a Luke Gon, que creo que ha hecho un trabajo brutalísimo, buenísimo.
Y ahora, si queréis, lo volvemos a revisar un poco por encima.
¿Esto qué es?
Estos son cosas que tenía yo, que estaba haciendo por ahí.
Bueno, voy a dejar en mi talk, por si luego intento hacer cositas.
Y me voy a por Kodi.link.
Me traigo los cambios.
¿Vale?
Y os comento un par de cosas.
Bueno, vamos a llamar de muchas formas.
Como un dólar, como el underscore, ¿no?
Que es lo que utiliza el Odash.
Tiene algunas.
De hecho, ¿qué es?
Valid, variable, name, javascript.
Hay un...
No, este no es.
Online.
No, ¿cómo era?
Este, este, este, este, este.
Mira, mira qué nombre de variable más chulo puedes poner.
Pues puedes poner este.
No sé si lo sabíais.
Pero esto es un nombre de variable válido.
Anda, que no está chulo.
Hacéis esto y despedidos en vuestra empresa, pero no habrá valido la pena.
No habrá valido la pena que os lo pidan.
Pero que en el código, en un momento dado, hayáis visto a este muñeco.
A este muñeco.
Claro que sí, que valdría la pena.
Sabéis que sí.
Pues eso.
Al final son todo lo que sea...
Creo que era de unicode, no sé qué.
Unicode 8.0.
Unicode 8.0.
Y claro, de esto es que hay un montón de simbolitos.
Un montón de simbolitos.
A ver.
Esto.
Este no.
Este tampoco.
La ñ es normal.
A ver.
Estoy intentando aquí símbolos súper normales, pero bueno.
Mira.
Hostia.
Con este se puede también.
Hostia, me estoy acordando de uno que es muy pajero.
Este.
Este sí que...
Este sí que le rompes la cabeza a la gente.
Este es muy loco.
Mira.
Tú aquí pones const y haces esto.
Ah, no me va a salir aquí.
Sí.
Yo qué sé.
No.
Function.
Hello.
Por ejemplo.
¿Vale?
Tú haces algo así.
Const.
Y esto parece una F, ¿verdad?
Esto parece una F.
Mira.
De este es que tengo una historia muy buena sobre esto.
Tengo una historia muy buena sobre esto.
Vale.
Pues esto es local.
Aquí tendríamos esto.
Vale.
Lo que yo estaba pensando.
Una cosa que os quería comentar.
A ver qué os parece.
Es el hecho de que tanto el buscador como los settings, en lugar de aparecer aquí centrado,
pues lo que he pensado es que aparezca más como...
Aparece esta barra aquí al lateral.
No sé qué os parece.
Pero veis que esta barra aquí lateral, esta barra aquí, aparece.
¿Sabes?
Esta barra aquí en medio.
El explorer aparece y desaparece.
En lugar de quitar todo el editor, pues el hecho de hacer que aparezca y desaparezca así.
De esta forma.
No sé qué os parece.
Contadme.
¿Os gusta más?
Porque es que creo que es un poco mejor...
Mejor que...
O sea, es que así se pierde mucho espacio, ¿no?
Y creo que lo genial sería justamente poder ver también esto.
Porque si no...
No sé.
Está bueno, pero está bien que sea un clon...
Que sea un clon...
Bueno, que sea un clon de Visual Studio Code.
La idea es...
Está hecha aposta, ¿eh?
Está un poco hecha aposta para que la gente, pues...
Como que tenga el look and feel y la experiencia de usuario sea parecida.
¿Vale?
O sea que está hecha un poco aposta.
No me desagrada, la verdad.
Que se vea muy parecido.
Aunque luego no va a funcionar exactamente igual.
Pues vamos a ver cómo lo podríamos hacer, ¿no?
Vamos a ver cómo lo podríamos hacer.
Vamos a ver.
Vamos a ver.
En el aside, que teníamos el header.
Y teníamos el footer.
Claro, ahora el aside va a tener que ser un poquito más complicado.
Pero vamos a necesitar poner, por un lado, la primera barra.
O sea, tendríamos que ponerlo así.
Bueno, esto vamos a tener que arreglar bastante los estilos.
Pero yo creo que puede valer la pena, ¿eh?
Puede valer la pena.
Vale, aquí me he cargado los estilos estos que teníamos.
Porque este aside, que tenía este flex direction, no sé qué.
Esto.
Esto ahora debería ser más bien así.
Aside tip.
Bueno, veo que no ha hecho lo que esperaba.
Pero no pasa nada.
Tendríamos que empezar aquí a poner aside class, aside sections.
A ver, aside sections.
Y estos botones serían estos.
Aside sections.
Aside, aside.
Vale, veo que todavía está mal.
Vamos a ver qué le pasa a esto.
Vale, porque este...
Y por qué la aside sí que tiene el 100% y esto no.
Vale, con esto lo arreglo.
Pero no entiendo muy bien por qué la aside...
Ah, vale, ya sé por qué es.
Vale, vamos a poner aquí el height, el 100%.
Vale, vamos a hacer esto un poquito así.
Así.
Para que podamos ir viendo.
Vamos a ponerlo en modo desktop.
Vale.
Sí, ya está.
Que no estaba ocupando todo lo alto.
Y Saito dice, perdón la pregunta, pero ya lo has explicado.
¿Cómo puedo tener Visual Studio como yo?
¿Qué extensiones usas, amigo?
Uf, lo hemos explicado.
Pero de verdad, de verdad, de la buena voy a intentar hacer un vídeo en YouTube para explicarlo.
Porque es que lo he explicado muchas veces.
Pero estate atento a mi canal de YouTube, en midu.tube, que me voy a poner con ello para que los tengas.
¿Vale?
Te pasas por el canal de YouTube y ya está.
Vale, a ver.
Entonces, el tema es que cuando le demos clic, lo que tiene que hacer en lugar de aparecer todo esto,
debería aparecer una barrita.
La barrita que al final es con una extensión.
Es como esto.
Que veo aquí que esto no tiene nada, pero aquí a la derecha sí que tiene un poquito un borde ahí.
Vale.
Entonces, esto lo podemos hacer más pequeño.
Esto sea, aside sections.
Aside sections.
Deep class.
Aside.
Aside.
No sé cómo llamarle aside a este.
Explorer.
No, ¿cómo podríamos llamar este?
Aside.
Aside extension.
Extension.
Por decirle lo peor, nombrar las cosas.
Helper.
Hostia, el helper.
Helper suena a útil, ¿sabes?
No es React instant así.
Ah, mira, aside bar.
Muy bien, esa me gusta.
Porque bar suena a cerveza.
Entonces me gusta.
Pero sí, aside bar me gusta.
Me gusta.
Vale, primero vamos a ver que se ve aquí la sidebar este, que debe ser este.
Vamos a poner que ocupe 200 píxeles.
100%.
Eso está ahí abajo porque este, esta side, tiene que ser un display flex.
Hostia.
Coño.
Vale.
Sí, tiene sentido.
72 píxeles.
Y si le pongo a esto que es cero.
Claro.
Vale.
Entonces a aside sections vamos a poner que esto tiene 72 píxeles.
Vale, aside sections with 72 píxeles.
Y lo que vamos a hacer es que este, bueno, por ahora el aside bar este, vamos a ponerle que tenga 200 píxeles, por decir algo.
Luego ya lo arreglaremos, lo ajustaremos un poquito.
Por ahora esto.
Y el tema es que a la app que antes teníamos app, teníamos esto, le vamos a poner un auto.
Y esto debería funcionar bien.
Vale.
Voy a refrescar.
Vale.
Más o menos.
Entonces, y la side bar, porque me aparece.
A ver.
Display flex.
Vale.
Ahora sí.
Ahora está ahí.
Vale.
Es que pensaba que le había puesto eso.
Vamos con esto.
Teníamos aquí el aside bar.
La idea del aside bar, claro, va a ser renderizar cosas diferentes.
O sea, lo que vamos a poner, teníamos aquí el editor por un lado, teníamos lo de skypack y teníamos los settings.
Yo entiendo que esto, lo que podemos hacer, madre mía, esto va a ser un poco ahora percal porque hay que cambiar unas cuantas cosas.
La verdad es que cada vez que vamos avanzando, cada vez más vamos, voy pensando más si deberíamos pasarlo todas asbelta y ya está.
Bueno, voy a guardar aquí a saco a ver qué hace esto.
Bueno, a ver, a ver, no está mal, algo más o menos.
Yo entiendo que esto debe ser de más, ¿no?
A ver, más o menos esto.
¿Cuánto debe ocupar?
310.
Vale, vamos a primero cambiar este 200 píxeles que había puesto por aquí.
Vamos a ponerle 310, más o menos.
Luego, este skypack.
Claro, ahora este editor que yo le hacía a esto de display none, ahora tendría que quedar un poco así.
Esta sería un poco la idea, ¿vale?
De hacerlo más así.
Y al pasar aquí, que se quitase.
Vale.
Entonces, ahora vamos a ver un poco cómo hacemos esto.
Yo más que a lo mejor esta explicación tan larga la quitaríamos.
A lo mejor queda demasiado larga.
Pero claro, esto de skypack 100vh, todo esto ya no hace falta como tal.
Porque esto entiendo que ya lo hace automáticamente.
Así que vamos a quitar estilos, settings, settings.
Estos dos estilos, fuera.
Luego, el tema este del view, no sé qué.
Esto view sky, este view ya no hace falta.
View.
Esto, fuera.
Esto de hidden, no, este sí que hace falta.
Espérate, espérate que a lo mejor ese view sí que lo necesitamos.
Lo que necesitamos más bien es que no desaparezca el editor.
Eso es lo que necesitamos.
Que no desaparezca el editor.
Entonces, el editor.
A ver, editor, editor, editor.
¿Dónde estás, editor?
Me voy a la colita, editor.
Tenemos este view.
Yo creo que sí le dejo así.
View.
¿Vale?
Bueno, ¿qué os parece que salga así?
Más o menos, ahora que estamos así probando.
Y que se ponga por encima ese menú.
Así no se cambia el tamaño de editor.
Bueno, es que en...
Si te fijas, en Visual Studio Code es así.
Que se pone...
Que sí que empuja el contenido.
Entonces, quiero mantenerlo.
Porque, bueno, es verdad que ahora sale así.
Pero esto es porque, fíjate.
Así sí que hay bastante espacio.
Normalmente va a haber bastante espacio.
Es que ponerlo por encima es un poco raro a veces.
Un poco más oscuro que en Visual Studio Code.
Vale.
Luego lo ajustamos.
Pero entiendo que eso es en general, ¿no?
Porque a lo mejor este...
A ver.
Color picker.
Este color.
Y este color.
Ah, no.
Si es el mismo.
Es el mismo color.
Si es igual de oscuro.
Me has engañado.
Me ha engañado.
Vale.
Lo que tenemos que hacer en todo caso es que este sea hidden.
Al principio, sea hidden.
Y que cuando le demos, pase el aside bar, deje de ser hidden.
Eso es lo que tenemos que hacer.
Eso es lo que tenemos que hacer.
Entonces, cuando le damos, vamos a ver aside.
Cuando le damos a cada botón, ponemos el is active.
¿Vale?
Este console log, me imagino que se me coló.
Lo vamos a quitar.
Element ID to show.
Esto nos dice el data to.
Esto es cada botón.
Aquí en el aside.
Esto dice data to editor.
¿Vale?
Entonces, debería el editor.
Bueno, claro.
Es que data to editor, este no tiene mucho sentido.
Si va al editor, claro.
Ahora ya esto no es tan fácil.
No es tan fácil.
Ahí.
Vamos a ver.
No es tan fácil ahora.
Esto es porque antes solo podía aparecer una página.
Entonces.
Podría ver hacia dónde va.
¿No?
Por ahora es.
Si yo tengo un botón.
Que es este, ¿no?
Que es Skype.
Aquí le digo.
Es que en lugar de data to.
Sería.
Data action.
Le voy a llamar.
Vamos a poner.
Close.
Close bar.
Aside bar.
Data action.
Vamos a poner.
Show.
Skypack.
Bar.
Vamos a buscar.
Vamos a intentar algo así.
Más.
No es que sea muy declarativo.
O sea.
No es declarativo.
Pero.
Show.
Esto que sería.
Show.
Settings.
Bar.
Por ejemplo.
Entonces.
Vamos a sacar el data action.
De la site.
Este.
Ta ta ta ta.
Data action.
Action.
Action.
Action.
Entonces.
Vamos a tener aquí.
Es.
Cuando tenemos esto.
Hacemos algo.
Cuando tenemos esto.
Hacemos otra cosa.
Cuando tenemos esto.
Hacemos otra cosa.
Actions.
Vamos a quitar esto por ahora.
Actions.
Action.
Closed sidebar.
Show skypack bar.
Show settings bar.
Vale.
Vamos.
Por ahora vamos a ver esto.
Hola Pedrolo.
¿Cómo estás?
¿Qué tal?
Carl Sneri.
¿Por qué no lo pillas con data set action?
Bueno.
Es que al final te podría preguntar lo mismo.
¿Por qué no lo pillas con get attribute?
Es verdad que tienes lo del data set.
Pero a mí una cosa que me gusta bastante.
De utilizar el get attribute.
Es que es una forma.
Unificada para todos los atributos del elemento.
En lugar de ponerte a mezclar cuando vas a recuperar un atributo con get attribute.
Y cuando son data.
Utilizar el data set punto.
Es que de esta forma siempre utilizas siempre la misma API.
Es como el query selector.
Que siempre me gusta utilizar el query selector.
Independientemente de si es una idea.
Si es una clase.
Si es un elemento.
Es una forma de unificar la API.
Para no tener código todo rato diferente.
Dependiendo de una cosa u otra.
Eso sería un poco la idea.
Por eso lo hago así.
No por otra cosa.
Ni creo que tenga una ventaja.
Ni nada raro.
¿Vale?
Is not a function.
Porque este action.
¿Qué tiene esa action?
¿Qué tiene?
Cuéntame.
Undefined.
¿Vale?
Pues muy bien.
Data action.
Ay, coño.
Es que ¿por qué he hecho esto?
Así.
No sé por qué he puesto ese.
Lo he traído de esa forma.
Vale.
Esta action ya está.
Ya tendríamos ahí la acción.
Esto sería solo para cambiar el tema de cada botón.
Is active.
¿Vale?
Recuperamos todo lo que son active.
Le quitamos esto.
¿Vale?
Y aquí haríamos directamente la acción de cada una.
Show skypack.
No sé qué.
Y el editor.
Vale.
Una cosa por ahí.
Set attribute hidden.
Y esto no hace falta con lo así.
Con esto deberíamos ya ocultarlo.
O sea, si...
Bueno.
Claro.
Primero.
Set attribute hidden.
Remove.
Attribute hidden.
Y esto igual.
Bueno.
Vale.
Más o menos.
Más o menos.
Por aquí van un poco los tiros.
Ahora solo tenemos que meter dentro la información.
¿Por qué pones un dólar en a sidebar?
Vale.
Eso es porque tenemos este dólar que se parece a jQuery.
Esto es porque nosotros tenemos una pequeña utilidad.
¿Ves?
Que la estamos importando de aquí.
Que lo que hace es que con un dólar recuperas el elemento que tiene este selector.
En lugar de tener que estar escribiendo aquí document.query selector.
¿Vale?
Lo que hemos hecho es esto.
Meterlo en un dólar directamente.
Y cuando hacemos dos dólares nos devuelve un array con todos los resultados que ha encontrado.
Esa es un poco la idea.
Vale.
Ahora aparte de esto.
En el asite aquí tendríamos este view.
Yo creo que es que yo creo que este view no hace falta.
O sea.
Es quitarle el hidden.
¿Para qué tenía ese view exactamente?
¿Qué es lo que hacía yo con ese view?
¿Ves?
Es que view no se utiliza para nada.
O sea.
Yo creo que este view.
Yo creo que es que me lo he cargado.
Claro.
O sea.
Que me lo he cargado ese view que a lo mejor antes sí que utilizaba.
Para algo.
Entonces.
Lo que vamos a hacer aquí.
Pues.
Esto sería ocultarlo.
Ya está.
Y esto sería pues tener aquí el skypack.
Sería lo mismo.
Poner una capa más entre las acciones y el html.
Dice Fenix.
Por cierto.
Bienvenido Fenix.
Que es la primera vez que participas en el chat.
Pero he visto que ya estás ahí participando bien.
Pues.
Poner una capa.
Sí.
Puede ser.
Poner una capa.
Yo creo que lo mejor.
Sería poner una clase.
¿No?
Poner una clase.
Directamente.
Que sirva de control.
Por ejemplo.
Teníamos aquí view.
Que era un poco raro.
No sé.
Podemos poner en lugar de view.
¿Cómo podemos ponerle?
Bar.
Content.
Por ejemplo.
Bar content.
Y aquí teníamos pues también.
Bar content.
Lo que podemos hacer con esto.
Es tener este.
Bar content.
Set attribute hidden.
O sea.
Primero le ponemos el attribute a todos los bar contents.
Y luego le ocultamos al que no interesa.
Yo entiendo que con esto.
¿Ves?
Ahora sí que funciona.
Ah no.
¿Qué ha pasado ahí?
¿Qué ha pasado ahí?
Espérate.
Pensaba que iba a funcionar esto.
Bar content.
Skypack.
Bar content.
Hit.
Pues me ha dejado fatal.
Vale.
A ver.
Que no sé por qué ahora esto no me funciona.
Vamos a ver.
Teníamos el bar content.
A sidebar.
Set attribute.
Esto se lo debería poner a todos.
¿Por qué no se lo pone?
O sea.
Yo estoy aquí.
Bar content.
Vale.
Tenemos settings y tal.
Bar content.
A este le ha quitado el hidden.
Nos vamos a este.
Vale.
Aquí ha funcionado bien.
Ahora me voy a este.
Y al settings no me lo ha puesto.
¿Veis?
Aquí sí que funciona bien.
Aquí funciona mal.
A ver.
O sea.
Cuando le doy al settings.
No.
Es cuando le doy.
Al skypack.
Ay.
Claro.
Porque esto solo me lo devuelve al primero.
Es una pena que esto no vaya a funcionar así tal cual.
Es una pena.
Me encantaría que funcionase así.
Pero no funciona así.
Esto básicamente.
Esto podríamos hacer que funcionase.
Hostia.
Podríamos hacer que funcionase esto.
Esto estaría guay.
Pero bueno.
Ahora es que es un coñazo.
Pero bueno.
Básicamente esto.
Como devuelve un array.
Lo que tendríamos que hacer aquí sería.
For each.
El.
Esta es la razón.
¿Vale?
Tendríamos que hacer esto.
Y esto hacerlo aquí también.
Y ahora.
Ahora explicaría por qué solo lo hacen uno.
Ahora sí que funcionará bien.
Ahora sí.
Y con esto.
Ahí está.
Es el dólar dólar.
Con esto ya lo tenemos un poquito.
Un poquito mejor.
¿No?
Ahora vamos a ajustar un poco esta búsqueda.
Que pone por aquí.
Search MP.
Hostia.
Que ha pasado.
¿Qué ha pasado ahí?
Max width 500 píxeles.
Aquí hay algún estilo que no gusta.
Width.
Hostia.
Sky content.
Que me da la sensación que aquí hay contenido.
Ah.
Bueno.
Yo es que creo que esto ya no es necesario.
Muchas cosas que hay ahí.
Este sky pack content.
Este.
Este de aquí.
Yo creo que esto no.
No es necesario.
Incluso este.
Max width 500 píxeles.
Es que no.
Tampoco debería ser necesario.
Como tal.
Debería ser más así.
Y así sí.
Así sí.
Lo que nos faltaría aquí es un overflow.
¿No?
O sea.
Este content.
Este height.
¿Dónde está el height?
Overflow y auto.
Overflow y auto.
No.
En algún sitio.
¿Dónde se está poniendo esto?
Flex.
Es este.
Es este.
Es este.
Tampoco.
Bueno.
Pues nada.
Que tú digas.
Vamos a ponérselo a este.
Es que además con cuidado porque esto me está empujando el contenido de esto.
¿Eh?
Claro.
Claro.
Que tiene que ser esto.
La sidebar tendría que ser esto.
Vale.
Sidebar.
Tendría que ser esto.
Lo que es horrible.
Es horrible el.
Cuando se pone en modo móvil.
Bien.
¿Sabes?
Está súper.
Esto es una cosa que yo odio totalmente.
Por cierto.
Fénix.
Muchísimas gracias por suscribirte durante un mes en el nivel 1.
Y te doy la bienvenida a la comunidad.
Muchas gracias.
Esto es una cosa que nunca jamás entenderé.
Nunca jamás entenderé.
De los scrolls.
De los scroll bars.
A ver si alguien me lo puede explicar.
¿Por qué cuando está en modo desktop es así de feo y así de horrible?
Pero nada.
Lo pones en modo móvil.
Y mira que bonito se queda.
O sea.
Súper bonito.
Y además desaparece.
Solo aparece cuando está.
O sea.
¿Por qué?
Es que no lo entiendo.
No lo entiendo.
Es que no entiendo por qué tiene que tener esta barra horrible.
Es que no la puedo entender.
No lo puedo comprender.
Bueno.
Que ya la estilaremos.
No pasa nada.
Pero que me.
Sí, sí.
Se puede modificar.
Pero no entiendo.
Sí, sí.
Ya sé que se puede modificar.
Se puede estilar.
La puedo ocultar.
Puedo hacer un montón de cosas.
Porque en móvil no hace falta tocar la barra para hacer scroll.
Vale.
Pero es que en desktop tampoco tienes por qué.
O sea.
Puedes hacerlo con la barra.
O puedes hacer así.
La barra la puedo entender.
Lo que no entiendo es que aparezca siempre.
Porque podría aparecer solo cuando pasas por encima.
O si fuese por un tema solo de accesibilidad.
Podría aparecer de otra forma.
¿Sabes?
Podría aparecer visualmente sin toda la barra esta.
O sea.
No sé.
Creo que hay posibilidades.
Y por un tema de accesibilidad visual tampoco puede ser.
Porque en móvil no aparece tampoco.
O sea.
Se oculta.
Ah, mira.
Ahora sí que.
¿Ves?
Se oculta.
No es porque los móviles es ese scroll.
Y en desktop se pueden dar estilos.
Pero de eso digo que el estilo es horrible.
Lo puedes ocultar en la configuración de la Mac.
No en todos los scrolls.
No todos los scrolls.
De hecho.
Yo creo que lo tengo puesto para que esté oculto.
Creo que lo tengo puesto para que esté oculto.
¿Ves?
Mostra barra de herramientas.
Automáticamente se une el ratón o trap pad.
Lo que hace Mac es que son ratas hasta para esto.
Si tú tienes un ratón, entonces siempre te aparecen las barras.
Si tienes un trap pad, sí que desaparecen.
De hecho, que desaparezca en móvil es contraintuitivo.
Yo creo que en móvil solo desaparece una vez que has interactuado una vez con el scroll.
O sea.
Yo le doy.
¿Ves?
Aparece.
Y hasta que no interactúo con el scroll, no desaparece.
Como de...
Bueno, ya sabes que hay un scroll, pues entonces ya desaparezco el scroll.
Pero no sé.
Es un poco raro.
Es un poco raro.
Es una cosa que me choca un poco de cómo funciona.
¿Sabes?
De joder.
¿Por qué no han podido hacer de otra forma?
Vamos a ver una cosa aquí.
Porque yo creo que esta letra es un poco chiquitita, me parece a mí.
Tampoco hace falta esa tan grande.
Pero un rem va a ser que sí.
Es un poco chiquitita, me parece a mí.
Vamos a darle un poco de espacio a estas cosas.
Ah, es que esto no es ni siquiera.
Ah, es que este troubleshooting and fuck.
Esto es como para buscar aquí.
Yo esto creo que me lo voy a petar, ¿eh?
Troubleshooting este.
Troubleshooting.
Troubleshooting.
Porque es que tampoco tiene mucho que ver con lo nuestro, ¿sabes?
Exactamente.
Parece que tiene más que ver cómo funciona eso.
El skypack, pero no el buscador.
Search, no sé qué.
Add package.
Add package.
Search for unused javascript packages from mpn here.
Creo que CodeSandbox tiene una funcionalidad parecida.
Voy a fijarme a ver cómo lo hace.
¿Sabes?
A ver qué texto pone y todo esto.
A ver qué...
Es que dependencies, add dependencies.
Es que me gusta mejor que no haya explicación.
¿Sabes?
El tema de que add dependency.
Y en lugar de tener toda esta explicación...
¿Sabes?
Un poquito menos de explicación.
No sé por qué no.
Me está refrescando automáticamente esto.
Y entonces vamos a darle un poco de espacio a esto.
14.
14 margin top margin top del input
a ver me gusta más base 8 o sea que lo vamos a dejar así vale pam pam pam
confeti
can't read property null vale importante ver que todo esto funciona data to skype pack
vale esto yo creo que lo podemos quitar porque ahora no vamos a querer esto no sé si o sea yo
creo que no tiene sentido que se cierre automáticamente yo creo que todo esto ya no hace falta falta que lo
haga yo prefiero que cuando hace esto react sabes que tú puedas añadir ahora una cosa que estaría
interesante es no poder añadir exactamente la misma esa ya sería la bomba pero creo que me quedo un
poco con esta idea no a lo mejor le podría poner aquí una equis igual que tiene bueno en este caso no
tiene x no tiene hostia pero creo que me gusta más al hecho de que se cierra automáticamente que es un
poco es un poco raro así que estaríamos aquí buscamos por ejemplo react y react dom y ya tendríamos esto
aquí ahora sí igual molaría que tuviese aquí una equis para cerrarlo ahí directamente o incluso dándole al mismo botón
también que se pueda cerrar pero bueno por ahora tendríamos que tener así y ya tendríamos ahí el buscador de a ver si
tenemos el de confeti este que canvas confeti confeti confeti
js confeti
js confeti
pues éste no es el de confeti canvas confeti canvas confeti
canvas confeti
he visto qué chulo
cada vez más y de hecho le puedes dar podríamos hacer h1 document punto query selector h1 atv listener click
canvas confeti
canvas confeti
bueno tenemos una nueva versión oye pues al final la idea de skypec chapo quedó brutal brutal es verdad la idea muy buena no sé la idea fue mía no
no me acuerdo si fue tuya feral pero creo que fue tuya
no me acuerdo
pero sí sí no súper bien es súper bien la verdad que no me acuerdo de que fue la idea
que me suena que le dijiste tu feral o no sé si me suena por él
le da un toque genial sí yo creo que es súper súper súper bien bueno aquí además los settings no han quedado mal
gracias feral
a equis segundos de no usarse se cierra oye pues esa tampoco es mala idea poner la descripción en un tooltip de tal si
mira ya que me habláis del tooltip quiero hacer exactamente veis este tooltip que aparece cuando se pone bueno ahora no vais a ver pero
cuando te pones encima de una fíjate que te sale como un tooltip al lado
pues este mismo tooltip lo quiero hacer de hecho no debería ser muy difícil tenemos un popper js o algo así
pues utilizando esto hacer algo así
a ver joven lo que pasa es que claro como cómo funcionaría el popper con el joven
joven joven joven
esto sólo queremos esto esto esto fue de feral
que estaba bromeando hombre que sí que ya sabía que era de feral que se ha dicho que quedó muy bien el
yutgón muchas gracias por la pr de verdad creo que que estaba muy chula
así que muchísimas gracias por participar y te ha quedado súper súper bien de verdad te ha quedado
te ha quedado brutal en muchas felicidades se lo voy a decir sabes a quién se lo voy a decir se voy a decir al creador
el creador de skype
cómo se llama este hombre
skype
frito
como se llamaba joder armas sale el nombre
fred scott fred scott o algo así
astro creator
ya me saldrá
joder astro build creator es no sé qué scott pero es que ahora no me sale el nombre
bueno entiendo que aquí no deben seguir mucha gente a míralo este fks fred k scott
que rabia bueno pues este hombre mira me sigue fijaos me sigue es increíble me sigue porque cuando él
empezó no con astro signo con skype con snow pack con con rat pack no me acuerdo tuvo uno de los primeros
uno de los primeros que sacó fue rat pack o ratipack o yo que será una cosa así extraña fks midudev
y le hice un vídeo porque me pareció súper interesante
y me lo retúteo y me escribió me dijo oye muchas gracias lo puso hasta en el github
cuando en lugar de snow pack se llamaba de otra forma
que era una ratilla es que ahora no me acuerdo cómo se llamaba y le hice un vídeo y estaba encantado
que le encantó que muchas gracias por el apoyo y estuvo súper bien así que le escribiré pica pica web exacto pica
ahí está pica pica pica pica pues se lo comentaré le escribiré le diré oye mira a ver qué te parece lo que estoy haciendo por aquí
hemos integrado skype
para qué crees esto y todo esto a ver qué tal
y skype cómo funciona exactamente porque creo que entiendo la idea pero no mucho bueno skype a que en realidad
no tiene mucha historia o sea skype lo que es es un es un registro como lo puede ser en pie en la única diferencia
es que skype es también un cdn donde tú puedes importar directamente un paquete y utilizarlo
qué es lo mejor de esto a ver lo mejor de esto es que estos paquetes están construidos con en max script modules
qué quiere decir esto
porque son compatibles a que tú hagas utilices esta sintaxis de aquí de import confeti from tal
así que tú puedes buscar paquetes que sean compatibles por ejemplo buscar ríac
y vas a ver aquí que te dice skype a discover bueno pues las recomendaciones que no sé qué
y aquí te indica cuando le das le da una puntuación y te dice mira el package score te dice si es
compatible con en más script modules que ya ves que no
y si tiene tipos de typescript y te dice cómo lo deberías utilizar en este caso hace alguna cosa especial para que ríac lo puedas utilizar o sea de forma nativa no tiene más
script modules pero creo que se puede utilizar gracias a que skype a que hace algún tipo de magia extraña
y lo mismo aquí con un montón o sea si por ejemplo aquí buscamos
o sea es que es cuestión jquery
yo que sé jquery vale pues te dice mira
mira te dice esto seguramente lo que estás buscando
está súper genial este buscador porque fíjate que te pone links relacionados está bastante chulo
está bastante bien
yo que sé alguna así que el otro día estuvimos utilizando solid 10 pues mira solid 10
lo bueno de esto es eso que puedes utilizar solid 10 y aquí te dice open in code pen le das aquí y te abre un code pen
que ahora le podría decir que en lugar de un code pen pues que
porque es mucho mejor sabes
utilizarlo con con nuestro editor
porque es que además esto es que no me es que no me no me lo siento no me gusta code pen que me pone de los nervios code pen
ah
bueno total que ahora podríamos utilizar esto y hacer una demo directamente con esto de hecho
pero a ver si
a ver si
examples
a ver si hay un ejemplo sin
no es que es todo con jcx
pero seguro que hay un ejemplo por ahí solid 10
solid 10
seguro que hay un ejemplo por ahí con en más script modules
sm
no
sm
no sé alguien me lo enseñó el otro día
lo estuvimos viendo por ahí
cómo se podía ejecutar con html y todo esto
bueno es una
una dependencia se llama html
bueno total que se lo enseñaré
que el creador de astro que me sigue en twitter
así que se lo enseñaré a ver qué le parece
es como si estuvieran almacenados los códigos de las dependencias
en las tres de internet directamente o como
es que es así como funcionan pricksark
pricksark
así como funciona en más script modules
o sea
no es un tema de que están mencionados los códigos de las dependencias
en las tres de internet
o sea
es que así es como funciona en más script modules
o sea nosotros lo estamos haciendo exactamente igual aquí
mira este código
ves que estoy haciendo import de bounce from
utils
no sé qué
qué pasa
que los en más script modules
son compatibles también con
con direcciones de internet
yo puedo hacer esto
por ejemplo
y si este archivo existe
se lo descarga
lo que pasa es que este archivo tendría que exportar
este de bounce
mira para que lo vean más claro
esto que vamos a hacer
esto sería compatible
si este archivo existe
que no
no existe
pensaba que iba a existir
como será esto
assets
no
public
no
bueno esto puede ser
a ver como lo estamos importando
es que igual lo está
por la ruta
a ver
js
script
panel fuente
no fuente no
perdón
assets
assets
no
es que aquí ya lo están
es que está dando un 404
ya al no encontrarlo
me está enseñando el index html
pero queda igual
que si cualquier
cualquier javascript
si exporta un módulo
tú lo puedes importar
este donde esté
mira por ejemplo este
¿no?
pues yo podría hacer aquí
podríamos copiarlo
y podrías hacer esto
podrías importarlo directamente
ahora necesitas que ese javascript
obviamente exporte algo
si no
no funcionará
pero esto lo que va a hacer
es descargarse
ese archivo
y pasearlo
y ver si tiene un módulo
y cuando tenga el módulo
pues ejecutarlo y tal
lo que hay que tener en cuenta
es que estos imports
son en paralelo
o sea
esto es totalmente asíncrono
o sea
el de arriba
este import
no debería depender
de lo que haga el de arriba
con el segundo
porque entonces
puedes tener una risk condition
el cómo se descargan
sí
es que
los emascript modules
son una cosa bastante nueva
o sea
bueno
bastante nueva
ya son parte del aspecto
hace tiempo
pero no se suele utilizar
todavía mucho
a día de hoy
yo por ejemplo
utilizo mi web
o lo estamos utilizando aquí
utilizar el import
pero se ve más en empaquetadores
que los empaquetadores
son los que lo hacen
pero al final
es una cosa que es nativa
ahora de la plataforma
y es súper interesante
prueba esto
midu con codilink
dialog box
qué es esto
qué quieres
que pongamos
este dialog box
de windows
para qué
es horrible
la leche
7.css
es uno de estos css
de
cuál es
o era la alternativa
al import export
la alternativa
era common.js
o requires
o sea
en no.js
tendríamos
por ejemplo
era
const
the bounce
require
y hacías esto
utils
the bounce
.js
y para exportar
pues hacías esto
the bounce
esto sería
cjs
aparte de esto
había otras alternativas
que ya no se utilizan tanto
por ejemplo
amd
que se utilizaba
con require
js
esto ya está
súper deprecated
esto no deberías utilizar
ni en broma
pero a ver si os veo
mira
esto sería un poco
common.js
y amd
era así
definías
las dependencias
que tenías
y una vez que se cargaban
la podías ejecutar
y aquí podías ponerle
la lista de dependencias
que tenía
eso se descargaba
y entonces ya lo podías utilizar
pero ya os digo
que esto es súper antiguo
esto ya
no se tiene que utilizar
no guay
cómo te va a gustar
si esto es windows
o sea es horrible
para que lo pongamos
ahí en medio
va a quedar muy feo
a ver
para hacer una aplicación
puede estar gracioso
pero para ahí en medio
claro
el require tiene diferencias
son similares
pero tienen diferencias
tienen diferencias
de funcionamiento
no son exactamente
lo mismo
por ejemplo
tú no puedes
hacer un require
de una url externa
eso solo te lo hacen
los imports
luego también tienes
algunas diferencias
con el import
tú no puedes hacer
un json
así directamente
con el require
sí que lo puedes hacer
con el para el json
tendrías que utilizar
un assert
no sé qué
no sé cuánto
para decirle
cuál es el formato
luego los imports
son asíncronos
por defecto
lo que quiere decir
es que tú no sabes
cuál es el orden
que el navegador
va a utilizar
para descargar
estas dos dependencias
en cambio
aquí
en no jes
estos requires
son síncronos
se suele hacer
uno detrás del otro
luego también tienes
más diferencias
aparte que tienes
los import dinámicos
los import dinámicos
devuelven una promesa
y puedes descargar eso
bajo demanda
con
pues promise
en cambio
los requires
bueno tenías
el require
punto
ensur
no
require
sí creo que era
require ensur
pero esto era
un tema más de webpack
y no tenía mucho sentido
sí
dentro de poco
vamos a hacer
un react.new
pero de codilink
a ver
vamos a ver
view
en codilink
mira
aquí tenemos
nuestro primer
view
en codilink
pues súper guay
súper genial
visto
mira
y esto es importándolo
desde skypack
ah mira
es que esta es la versión antigua
pero buscáis view
y podéis utilizar view
y tenerlo aquí
en codilink
súper fácil
y súper rápido
muy bien
nicolín
gente ya terminó
el bootcamp
sí
el bootcamp de los domingos
sí
pero todavía tengo que subir
algunas clases
a youtube
que estoy en ello
vale
bueno me queda el popper
el popper
popper
vamos a darle un momento
al popper
va
venga
vamos a
concentrarnos con el popper
mucho confeti
vamos a instalarlo
y mira
es que esto es genial
o sea
es que esto es el futuro
de javascript
veis que aquí pone cdn
si esto fuera un enmascript module
pues podría
darle un clic aquí
copiarlo
y directamente
ir a mi proyecto
bueno
esto lo voy a quitar
que es lo que estaba mal
y directamente
pues hacer
import
popper
from
y poner el cd
la cdn
y ya está
y con esto
ya tendría popper
esto lo descargaría
desde la cdn
que normalmente
no es la mejor opción
obvio
pero no
no está mal
o sea
no necesitas
npm
no necesitas
absolutamente nada
es el futuro
del desarrollo
web
o sea
que va a ser genial
uy he dejado
un json
popper
from
popper
jscore
esto por aquí
a ver
que se me está quejando
de algo
porque he dejado
en skype.js
dejo que el json
vale
pitch reload
a ver
pues algo no me gusta
aquí
vamos a ver
que es
popper
donde se
provide
an export
name
default
vale
tiene sentido
soy yo
que me lo estoy inventando
script popper
popper
tooltip
create
placement
right
vale
y el popper
de donde
sabes
que es lo que
recupera
el title
que es lo que lee
del pop con este
vamos a ver
el tutorial
este
tutorial
popper
porque no puro css
ya sabemos
que no funciona muy bien
usage
create popper
area described by
rule
tooltip
vale
o sea
que habría que poner
de cada botón
vale
a ver
vamos a probar con uno
por ejemplo
con el editor
vale
aquí pone que tiene un botón
esto tendría que tener un
area described by
el tooltip
lo que no entiendo
si tiene que estar
justamente al lado
sabes
si esto puede estar
en cualquier sitio
o tiene que estar
justamente ahí
yo entiendo que podría estar
en cualquier sitio
o sea que lo va a mover
o sea yo por ejemplo
si lo pongo aquí
que esto debería
funcionar
exactamente igual
no sé qué
no sé cuánto
vale
vamos a poner esto
el popper
vamos a poner
el botón
el botón era
header button
header button
vamos a probar
a ver si
si esto funciona
left
ahí se ve
pero me imagino
que esto le faltan
unos estilos
o algo
css
popperlite
popperlite
ah mira
es que esto
vamos a poner por aquí
esto
bueno
esta es un tooltip
pero queremos
que solo funcione
en el hover
vale
display none
this show
joder
madre mía
ya estaría bien
que todo esto
estuviese
de gratis
o sea que estuviese
dentro del
tooltip
tooltip
esto cambiamos
tooltip
popper instance
esto
y el botón
vamos a utilizar
este botón
al menos
para tener uno
para ver
que todo funciona
luego ya
lo
bueno
no está mal
la verdad es que
viendo
todo lo que hace
esto
no sé hasta qué punto
tiene mucho sentido
que utilicemos
el popper este
porque tampoco
creo que sea
muy necesario
creo que vamos a utilizar
css
no tiene mucho sentido
el popper este
utilizarlo
me da la sensación
me da la sensación
midu las drojas
yo que he hecho
con las drojas
me da la sensación
me da la sensación
las drojas
muchas cosas
berries
tahu
me da la sensación
que
me da la sensación
hacer
y
todo lo queит
Gonzaga
ella
me da la sensación
me da la sensación
o
no í
la sensación
que