¿Por qué usas forEach y no map?
Me preguntan en el chat.
¿Por qué utilizo forEach y no map?
¿Aquí?
Pues es muy, muy, muy, muy obvio
por qué no utilizo forEach y por qué...
O sea, ¿por qué utilizo forEach y no map?
JosephBiff. A ver, te lo explico.
ForEach es para iterar. Map
es para transformar.
Transformar significa que tú lo que quieres
es devolver el...
Quieres devolver el mismo número de elementos.
Pero es que aquí no quiero devolver nada.
Entonces utilizo el forEach.
Y no estoy utilizando jQuery.
No sé quién ha dicho que... ¿Por qué usas jQuery?
No estoy utilizando jQuery. Parece jQuery, pero no lo es.
En realidad esto es una...
Una mini librería que he hecho yo.
Estamos utilizando vanilla.js, ¿vale?
No estamos utilizando jQuery.
Sé que lo parece, pero no lo es. Sé que lo parece.
La idea era hacerlo totalmente
con vanilla para no...
No tener que preocuparnos de nada.
Vale, aquí tenemos los
utis, editores...
Claro, es que con el editor este...
Con estos editores que tenemos por aquí...
A ver dónde tenemos los editores...
Como el proyecto lo pillo cada X tiempo...
Pues al final me pasa lo que me pasa.
El main, donde tenemos estos editores, ¿no?
Aquí el HTML...
¿Dónde está? Create editor.
Aquí.
Claro, aquí lo que podríamos hacer...
Sería...
Sería esto.
Escuchar el evento.
Voy a instalarme ya el Meet este...
Por ahora.
Meet y...
Cómo versión exacta.
¿Vale?
Vamos a mirar un poquito la documentación.
De Meet.
Vale.
Save Meet.
Import Meet.
Venga, vamos a importar Meet por aquí.
Bar Meet.
Require Emiter.
Esto es en On On.
¿Vale?
O sea que esto...
Vamos a ponerlo por aquí.
Voy a crear nuevo un archivo Events.
Events.js.
Tenemos aquí el Emiter.
¿Vale?
Y vamos a exportarlo también.
Export.
O sea que podemos hacer Export.
Const.
Pero más que Emiter...
¿Cómo le podemos llamar a esto?
Bus.
O Events.
Sí, Events me parece bien.
Events.Emit.
O On.
On sería para escuchar.
Y Emit sería para emitir.
¿No?
Vale.
Pues lo que podemos hacer aquí, por ejemplo...
Listen to an event.
Aquí podemos escuchar un evento.
Vale.
Pues vamos a importar por ahora esto.
Importar Events from punto Events.
Y estos eventos...
A ver.
Ahora lo vamos a hacer así.
Pero luego tenemos que separar.
Settings.
Change.
Claro.
El tema es que aquí lo que molaría es ya tener Zustan para poder leer todos los eventos.
Claro.
Cuando hacemos un cambio sobre los eventos...
A ver.
En el Event.
Claro.
En el Event aquí podríamos escuchar todo.
Vale.
Vamos a instalar también Zustan.
Vamos a ver qué pasa.
¿Qué es lo peor que puede pasar?
¿Qué es lo peor que puede pasar?
Que luego tengamos que refactorizar.
Pues se refactoriza.
Y ya está.
Vale.
Vamos a instalar Zustan.
Esto es porque no hemos querido utilizar.
Un framework que son más chulos que un 8, ¿eh?
Pero bueno.
No pasa nada.
La verdad es que es un reto cuando haces estas cosas porque normalmente cuando tienes
un framework ya o una biblioteca o puede ser React, ya más o menos ya te sabes unas
buenas prácticas y todo esto.
No entiendo bien para qué es el Meet.
No te preocupes que lo vas a ver súper claro ahora cuando lo veas.
Bueno.
A ver.
Que no es muy difícil.
Son emitir eventos.
Pero vas a ver cómo lo hacemos, ¿vale?
Cuando lo utilicemos lo vas a ver claro.
Vale.
Cuando hacemos el Create este de esto, lo que deberíamos tener aquí en el...
¿Qué es lo que queremos tener aquí en esta Store?
Bueno, que esta Store en realidad, esta Store puede ser la configuración.
Por ahora voy a dejarle como Store, pero esto va a ser la configuración global, ¿no?
Deberíamos ver lo que queríamos tener en el HTML, que en Settings teníamos por un
lado, teníamos...
Bueno, no he puesto ningún nombre.
Vale.
Tendría que buscar en el editor, ¿vale?
En el editor voy a buscar esto.
Vale.
Aquí está.
Vale.
Voy a dejar esto por aquí.
Esto lo quito.
Esto me lo...
No.
State.
¿Vale?
Y tenemos por un lado Automatic Layout.
Esto lo vamos a dejar igual.
Font Size.
Vale.
Font Size lo vamos a dejar con 18.
Que es el que está aquí por defecto.
Esto habrá que mezclarlo mejor, ¿eh?
Porque ahora está el Common Editor aquí y luego al final lo tenemos que ir modificando.
Scroll Beyond Light.
Esto lo vamos a dejar tal cual.
Padding.
Esto lo dejamos igual.
Numbers Off.
Vale.
Este también lo vamos a poner por aquí.
¿Qué más?
El Minimap.
Minimap.
Vale.
Minimap.
Vamos a poner Enable False.
Vale.
Pues no sé si utilizar el objeto.
A ver.
Tenía más sentido hacerlo así.
Pero bueno.
Minimap y el Theme.
¿Vale?
Que el Theme sería un poco lo mismo.
Theme.
Vale.
Theme.
Entonces se supone que ahora que tengo todo esto, tengo el Get State, el Set State,
un Subscribe para cambiar.
¿Vale?
Pues estoy pensando que igual el Emit no lo necesito, ¿eh?
Ahora lo miramos.
Ahora que lo estoy intentando deshacer como un estado global con Vanilla.
A ver qué tal.
¿Qué podríamos hacer aquí?
Podríamos...
Porque si tenemos aquí todo el estado, State, State Beers más uno.
Claro, es que este estado es muy chiquitito.
Este me interesa más.
Overgrading State.
The Set Function has a...
Instead of merging, replace the state model.
Set.
True.
Clear the interior store.
Actions include.
Coño, pero esto se carga a todas las acciones.
Esto no es lo que queremos.
¿Vale?
Vale.
Entonces, lo que...
No sé qué acción hacer, como por ejemplo, Update Settings, ¿no?
Y Update Settings, tenemos aquí el Set, que sería para actualizar.
Y aquí lo que podríamos hacer, en Update Settings, t, t, t, t.
Tengo que...
A ver...
Actions.
Actions.
Vamos a ver las acciones.
¿Cómo se hace esto?
Actions.
Estoy viendo a ver si veo un ejemplo de las actions.
Es que este ejemplo no me sirve.
Pero bueno.
Vale.
¿Ves?
Aquí sería como para actualizar.
Vale.
Tendría que hacer todo el State.
Y esto lo que haría sería State más Font Size, no sé qué, no sé cuánto.
Lo que me gustaría aquí es pasarle justamente tanto la Setting y el New Value.
¿Sabes?
Esto es lo que me gustaría hacer.
Y entonces, del State, yo lo que haría sería más bien algo así.
Ejecuto el Update Settings, sería tener el State y lo que haría sería...
Este, sí.
Esto es lo que me gustaría hacer.
Esto es lo que me gustaría hacer.
Lo que pasa es que esto no se puede hacer así.
Tendría que ser recuperar el Setting.
Setting.
Y esto.
Remove all setting.
Tendré aquí el resto del estado.
Esto es el State.
Rest of State.
Y lo que devolveríamos sería el Rest of State y el Setting con el New Value.
Esto es lo que tendríamos que hacer.
¿Vale?
Y aquí una coma y ya estaría.
Vale, esto está asignado, pero no lo estás utilizando.
¿Vale?
Ya me imagino.
Vamos a hacer un Export Cons de esto.
Y ya está.
¿Vale?
¿Estás haciendo...?
Sí, estoy haciendo algo parecido a lo que haría el Use Context,
pero lo estoy haciendo así, con Vanilla, con Zustan.
¿Vale?
A ver qué tal.
A ver cómo va.
¡Ay!
Esta agüita está buena, ¿eh?
La agüita está suave como a Gin Tonic.
No sé qué tiene.
Vale.
Update Settings.
Pues esto es lo que quiero llamar.
A este Update Settings es justamente el que quiero llamar.
La verdad es que...
Don't build your components.
Fetching everything.
Use Store.
Claro, es que con Vanilla...
Lo que estoy intentando ver es cómo se haría con Vanilla.
Porque aquí hay un ejemplo.
Vanilla.
Pero tampoco es que...
You can make a Zustan Vanilla.
GetState.
SetState.
Subscribe.
Destroy.
O sea, entiendo que lo único que habría que hacer es llamar al GetState y llamar.
Y ya estaría.
GetState.
SetState.
Subscribe.
Vamos a probar esto.
A ver.
Si yo, por ejemplo, en esta...
Hago aquí GetState de la Store.
¿Vale?
Sí, ya sé que este está mal.
Es que está repetido.
GetState.
Test GetState.
Y yo llamo a este test GetState aquí.
¿Esto qué nos da?
¿Esto le gusta?
¿Tendrá ya ahí las acciones?
Me imagino que sí.
Porque al final debe ser algo parecido a lo que hace al inyectar lo otro.
Igual con esto nos quitamos incluso todo el tema de los eventos.
Estoy pensando, ¿eh?
Por ahora voy a dejarlos.
Pero me parece a mí que nos lo vamos a poder quitar.
¿Vale?
FromState.
Y aquí tendríamos el GetState.
Para empezar.
¿Vale?
Ojalá que lo pienso.
Esto lo podría haber hecho utilizando bien el GetState y ya está.
Vamos a hacerlo.
Vamos a hacer esto.
Venga, vamos a ver qué nos da esto.
A ver qué se cuenta este.
Inspeccionar.
¿Qué tienes ahí?
Un objeto.
Vale.
O sea, tiene todo.
Hasta la acción y todo.
Perfecto.
O sea, lo que me esperaba.
Es que, claro, en el Zustand tú puedes utilizar el UseSelector y todo esto.
Pero, claro, me imagino.
Ah, mira.
Si aquí tiene justamente Create.
Sí, o sea, Subscribe.
Pero, claro, como es UseStore.
Pero, claro, al final es que es exactamente esto.
Ya tengo aquí el GetState y el Subscribe y todo esto.
¿Vale?
Esto te pasa por estar acostumbrado a los Custom Hooks.
Uno está acostumbrado a Custom Hooks y ya la lías parda.
Vale.
Pues, entonces, en el editor este, lo bueno es que se supone que, por ejemplo, ¿qué podríamos hacer?
Mira, me voy a copiar ya lo del LocalStorage este que esta chica...
No sé quién es esta chica.
Hanna.
Hanna la ha hecho.
Muchas gracias, Hanna.
Muy amable.
Vamos a copiarnos un poco este código.
Me lo voy a mirar un poco por encima.
Vale, es que le llaman UseStore.
Es un poco raro.
Dice Collection.
Get LocalStorageCollection.
SetCollection.
SetLocalStorageCollection.
Bla, bla, bla.
GetLocalStorage.
SetLocalStorage.
O sea, lo que hace es que al principio esta información de aquí la recupera del LocalStorage.
Lo cual tiene bastante sentido, ¿no?
¿Cómo podemos, en lugar de Collection, a ver, yo le podríamos llamar Codi...
InitialStateCodyLink, ¿no?
¿O cómo le llamamos a esto?
InitialState.
Total.
El InitialState.
Pero esto lo podemos hacer fuera.
Tampoco hace falta...
¿Sabes?
Aquí podríamos poner...
InitialState.
InitialState.
InitialState.
Que sea GetLocalStorage.
Este.
Esto que es lo que ha creado.
Con InitialState.
O le creamos aquí justamente lo que habíamos hecho aquí.
Que sería todo esto.
De esta forma, ahora ya podemos quitar todo esto y tener este InitialState.
Que ya será que lo recupera del LocalStorage o que es el objeto este, ¿no?
Dándole y fuerte a CodiLink.
Sí, sí.
Hoy sí que le estamos dando fuerte.
Hoy le vamos a dar fuerte.
AppInitialState.
Venga.
AppInitialState.
Para que veáis que os hago caso y que os leo en el chaya.
Ojo, chollo.
Está code.link por 10.000 dólares.
Si hacemos...
Mira, si llegamos...
¿Cuántos hay ahora?
¿Cuántos hay aquí?
354.
Si llegamos a 4832, lo compro.
Creo que nos queda, ¿no?
Bueno, a ver.
Entonces, con esto yo entiendo que lo vamos a tener.
Ahora, con el Update Settings sería un poco similar a lo que está haciendo aquí.
Solo que en lugar de ta, ta, ta y en el Return, lo que haríamos sería NewState.
Creamos este nuevo estado.
¿Vale?
Lo guardamos en el SetLocalStorage con el AppInitialState.
y le guardamos el NewState y luego lo devolvemos.
Y ya está.
¿Vale?
Y con esto...
¿Vale?
Y con esto...
¿Vale?
¿Vale?
¿Vale?
¿Vale?
¿Vale?
¿Vale?
¿Vale?
¿Vale?
¿Vale?
¿Vale?
¿Vale?
Pues esto fuera...
Eh...
Y ya.
Y este UseStore, que la llamamos UseStore, no sé por qué.
Pues ya está.
Venga, va.
Vamos a hacerlo en el State.
Va.
Que si me sale, voy a estar muy contento.
Y si no me sale, pues va a ser una...
Puñete.
Bueno, mira.
Vale.
Aquí teníamos ya lo del GetState.
Dicho esto, si ya tengo esta parte...
Claro, es que esto del minimap...
Esto es una putada.
¿Por qué?
¿Por qué esto del minimap?
Bueno, lo bueno es que aquí...
Lo bueno de...
Una cosa buena que tiene UseStore es que tú aquí puedes poner los métodos que te dé la vida.
O sea, te dé la gana.
Puedes poner aquí GetInitialSettings.
Y claro, tú aquí podríamos...
Claro, esto no es mala idea, ¿eh?
Porque aquí al final lo que podríamos hacer sería recuperar el...
Claro, lo malo es que no tienes acceso en una acción al propio...
A ver si hay un Get.
GetState.
TheModifySetGet.
Seguro que se puede.
Dentro de...
ConfigLog...
Joder.
MiddleWars.
Get, get, get.
Yo sé Persist.
Oye, ¿y este Persist?
Ostras, por si esto está súper bien.
En este Persist.
Vale.
El Get es el segundo...
Tiene un segundo parámetro esto.
Aquí parece ser que hay un segundo parámetro, que es el Get.
Vale.
Ahora ya sabía yo que...
Get.
Claro, pero Get sería todo.
Bueno, a ver si lo dejamos para Get.
¿Sabes qué pasa?
Que es que este minimap, que es un boleano, en realidad luego las settings se hace de otra forma.
Pero bueno, da igual, no lo hagamos aquí y ya está.
Vale.
Lo que podríamos hacer es, en el editor, que teníamos todo esto, aquí podríamos importar este State.
State, State, State, GetState.
Lo importamos aquí, el GetState.
Lo importamos de State.
Y aquí, a ver, voy a ir separando las cosas que se supone que se tienen, se pueden...
Esto, esto, esto, esto.
Vamos a ponerlo por aquí arriba.
Vale.
Entonces, recuperamos, por un lado, font size, line numbers, minimap, y el theme, y esto del GetState.
Y entonces aquí ya tendríamos esto, esto, minimap, y el theme.
¿Vale?
Y esto, GetState.
O sea, ya recuperaríamos del estado inicial, al menos lo inicial del...
He puesto como en Editor Options, pero bueno.
Vale.
Vamos a ver si esto sigue funcionando.
Parece que sí.
Vale, parece que sí, que sí que funciona.
Y ya tendríamos esto, ya desde el estado.
Ahora, lo que tiene esto de interesante es que en el main, que yo aquí tenía...
Vale, este ya no lo estoy utilizando, esto fuera.
Aquí tengo los editores.
Este es uno de los problemas.
Que estos editores que yo estoy creando por aquí, HTML Editor, no sé qué, no sé cuánto...
Este Create Editor, lo que le pasamos es el HTML.
Create Editor.
Es que estoy pensando aquí...
Porque aquí tenemos dos opciones.
Una, en lugar del evento, lo que podríamos hacer es...
Yo estaba pensando en los eventos, ¿vale?
Pero al final lo que podríamos hacer mejor es suscribirnos, claro.
Y es que ya tiene eventos.
No vamos a utilizar Meet al final.
Porque aquí con el State, al final, nos suscribimos.
Lo que no termina de encajarme muy bien es el cómo está el tema de los editores y tal.
Esto lo tenemos que repensar, ¿eh?
Entonces, si nos suscribimos, cada vez que haya algo...
Vamos a ver este Zusta en un momento.
Fuera esto.
Subscribe.
Vale.
UseStore.
Subscribe.
Subscribe.
Subscribe.
Se le pasa aquí directamente una función.
Listen to the chain, first and every chain.
Claro.
Lo que me gustaría es ver si te puedes suscribir solo a una parte.
Bueno, claro, pero qué maldad.
Lo que podemos tener es más de una Store.
Una para las settings, otra para lo que sea.
¿Qué he hecho con el GetState?
Eso lo he arreglado, ¿no?
Lo de la E.
Sí, lo he arreglado.
Vale.
En el Subscribe.
En el Subscribe sí que me falta.
Subscribe.
Vale.
Pues aquí deberíamos tener el State.
Y en la suscripción esta, podríamos cambiar lo que serían los...
La configuración de cada editor, ¿no?
Entonces...
Monaco Editor.
Y si no, alguien creo que hizo una PR donde iba cambiando esto, ¿verdad?
Vamos a verlo un momento.
I Shortcast to Switch.
Status Bar.
A ver si este...
A ver si este...
E iba cambiando.
Para ver cómo era la documentación de ir cambiando.
Vale.
Esto.
Edit Creator.
Esto para Short URL.
Y para cambiar, para cambiar.
Row.
No.
Create Editor.
No.
No, no, no.
Esto era el Update.
Creo que esta...
Este no lo hacía.
Esta PR.
Alguien hizo una PR que sí que hacía el tema este de este.
Este.
Así vamos a ver cuál era la API y no la tengo que buscar.
¿Vale?
Esto está bastante bien.
Esta idea está bastante bien.
La verdad.
Igual la recuperamos, ¿eh?
Para generar algunas cosillas.
Por ahora vamos a ver eso.
Update for each.
Para cada editor.
Que eso estaba muy bien también.
Que cómo guardar al editor.
Esto estaba bastante bien pensado.
A ver quién lo hizo.
David.
David lo cerró porque no sé si vio que no lo iba a mergear o vio que tenía conflictos.
Pero David, hiciste buen trabajo, ¿eh?
De verdad.
Me gustó bastante la PR.
Que no la mergeáramos no sé si vio que no me gustase, ¿eh?
De hecho, tiene ideas buenas.
El hecho de tener todo esto.
Está bastante bien, ¿eh?
Esta PR.
Lo de registrar los editores, que es el mismo problema que me estoy encontrando ahora.
O sea, está bastante bien.
Que no la mergeársemos no quiere decir que no estuviese bien.
De hecho, todo lo contrario, ¿eh?
Así que, David, si me estás escuchando, si estás en tu casa, allí donde estés, si estás en el cielo,
donde sea que estés, que sepas que hiciste buen trabajo.
Y que no te estamos juzgando mal.
Vale.
Registra los editores.
Claro.
Esto está haciendo aquí como un singleton brutal.
Pero, a ver, lo que me falta es ver dónde se editan las opciones.
Value Update Options Editor.
Vale.
Para todos los editores, para cada editor, esto está también muy bien pensado, ¿no?
Porque aquí tiene todos los editores.
Básicamente, lo que hace sería Editors.
Que esto él lo tiene separado y me parece muy buena idea.
Igual se la copiamos, ¿vale?
Y a todos los editores, para cada editor, lo que hace es cambiarle la configuración.
Editor.
Hice Option Kimmy.
Claro.
Esto le pasa un poco exactamente lo mismo que...
Aunque esto lo hace, en lugar de suscribirse a un estado global, lo que está haciendo es por el evento, ¿no?
Claro, que está bien.
Vale.
Editor.UpdateOptions.
¿Vale?
¿Vale?
Pues mira.
Lo que podemos hacer con esto, básicamente, sería recuperar.
Voy a mirar el estado.
Pero bueno, ya os puedo decir que las New Options debería ser el...
Es que esto es lo que no me gusta.
Donde se hace este mapeo es lo que no me gusta.
Es lo que me molesta y todo.
Me molesta.
Porque esto, si no, tendría que ser Minimap.
Rest of Options.
Es que...
Creo que lo vamos a hacer en otro sitio.
Creo que lo vamos a hacer en otro sitio.
Es que creo que tiene más sentido, a lo mejor.
En lugar de estar esto...
Bueno, voy a hacer que funcione y luego lo refactorizamos, ¿vale?
State.
Saco el Minimap en Rest of Options.
Lo que pasa es que en el Rest of Options, aquí lo que pasa es que también tenemos justamente las acciones.
Que es el problema.
Que en el Get State este no te separa las acciones con lo otro.
Pero bueno, no pasa nada.
Entonces, en los New Options, lo que tendríamos en el Rest of Options...
Espero que no se cabree porque le pasemos las funciones que no utiliza para nada.
Y el Minimap, lo que le ponemos es Enable y le pasamos el Minimap.
Este es el problema, ¿no?
Que no machea un poco el estado con las opciones.
Pero esto tiene sentido porque no podemos hacer que nuestro estado global tenga que machear cómo se utilizan luego las opciones y tal.
Pero bueno, no pasa nada.
Podríamos crear una función por ahí que lea ese estado y luego construya este objeto.
Que seguramente tiene bastante bien sentido.
Pero bueno, y entonces pondríamos algo así.
Poníamos el Rest of Options, no sé qué.
Cada vez que cambiamos el estado, voy a hacer aquí, voy a poner un Subscribe y vamos a poner el State aquí.
Esto por un lado, pero obviamente esto no es suficiente.
Porque ahora, aunque yo cambio aquí, esto no hace absolutamente nada.
Ahora es donde entra el Set State.
¿Qué es lo que tenemos que hacer?
Pues ahora, en el editor, no.
El Aside, que es donde están los Settings.
No.
No, es que todavía no estamos haciendo nada de los Settings.
Settings.js.
Venga.
Pues aquí empieza un poco la fiesta.
¿Por qué?
Porque en el Index.html debemos tener todo...
Debemos estar escuchando todo esto.
¿Cómo podríamos unificar todo esto?
¿Sabes?
O sea, podríamos ponerle aquí que tuviese, por ejemplo, un DataFor.
DataFor.
Y aquí ponerle, por ejemplo, que esto es para Line Numbers.
¿Sabes?
Que esta es la configuración que estamos tocando.
Esto por aquí igual.
DataFor, que esta es para el WordGrap.
¿Qué WordGrap?
¿Esta opción la teníamos?
Yo creo que no, ¿no?
No.
No.
¿Vale?
A ver.
Mónaco, Mónaco, Editors, WordGrap.
Así lo pondremos también.
WordGrap.
¿Vale?
Parece ser WordGrap on, off.
¿Esto lo habíamos hecho así?
On, off.
Sí.
Vale.
Pues vamos a ponerle aquí.
WordGrap.
Y a mí la que más me gusta es on.
Pues lo vamos a dejar en on.
Y así que siempre ponga esa desde el principio.
Claro, el problema del local storage es que si yo voy añadiendo aquí nuevas configuraciones,
al final esto lo tenemos que actualizar o hacer algo raro.
Eso sí que es un poco...
O sea, a ver si yo voy actualizando las opciones que hay disponibles y te he guardado algo en
el local storage.
Por cierto, voy a ver si se ha guardado algo en el local storage.
Que esto yo lo he dado por...
Tío.
Claro, porque en localhost 3000, claro.
Está todo lo que voy abriendo en localhost 3000.
Pues yo aquí no veo nada que se nos haya guardado.
¿Por qué?
Porque no he llamado nunca al update settings.
Claro.
Y entonces siempre están por ahora las que están por defecto.
Vamos a hacer si...
Voy a ver si esto...
Pues esto, el WordGrap, no está funcionando, ¿no?
WordGrap.
A ver, WordGrap.
Ah, porque no lo estoy sacando, claro.
Tengo que añadirlo aquí.
Y ahora sí que lo tenemos por aquí.
WordGrap.
A ver, ¿ahora?
Ahora sí.
Ahora está haciendo WordGrap.
Vale.
Venga, a ver.
Y vamos por esto del...
Vale, WordGrap, initial stage, el editor, ¿vale?
Lo que me faltaba es el tema de los settings.
Que aquí es donde teníamos un poco el reto.
Y es donde echamos las cosas de menos, las cosas declarativas.
Hola, Shorties, ¿qué tal?
¿Está guapo el comando?
¿Os ha gustado?
Eh...
For line numbers.
Una cosa que podríamos hacer es esto, ¿no?
Escuchar a través de esto.
Select.
Esto sería el theme, si no me equivoco.
Claro, lo importante es que tenemos que tener esto como un...
Que sean exactamente los mismos nombres.
Si no, input.
¿Esto qué es?
¿Esto qué es?
Data for...
Este sería el font size.
Vale.
Minimap enable.
Esto sería data for minimap.
Vale.
¿El comando es el comando ese singleton?
Sí que es singleton.
¿Qué comando es el que dices?
El de decir tres veces la palabra mágica.
Codec Akashi dice que será el midu...
El miduf...
No el midu def.
No.
El miduf de mi país.
Pues el miduf puede serlo mundialmente, si quieres.
Miduf.
Miduf todavía no hay ninguno.
Que yo sepa, claro.
Así que puedes aprovechar.
Data for...
Vale, aquí tenemos todos.
Line number.
Vale.
¿Qué es lo que se me ocurre que podríamos intentar hacer si es que esto se puede hacer?
Que no tengo ni idea.
Porque hace mil años que no intento hacer estas cosas.
A ver.
Bueno, no sé si podríamos en el utils, utils, el DOM, si recuperamos del settings, todo lo que tenga un data for.
Madre mía, esto que vamos a hacer es even listener y que tenga un change y que esto sea así.
Vale.
El main luego lo separaremos porque aquí haremos todo lo que sea importar y ya está.
Y aquí vamos a importar el settings.
Vale.
Settings.
Aquí vamos a importar el console log.
No sé si esto va a funcionar, pero lo vamos a intentar porque estamos ahí haciendo lo que nos da la gana.
Y ya está.
Vale.
Este funciona.
Este no ha funcionado.
El work grab no ha funcionado.
Este sí que ha funcionado.
Ah, porque solo he recuperado el primero.
Es que tenía que ser con dos.
Claro.
Y como es con dos, esto es lo que tendría que ser con todos los elementos.
Esto tiene que ser así.
For each.
Elemento.
El punto add event listener.
Pam, pam, pam, pam, pam, pam.
Vale.
Vamos aquí.
Nos vamos al line number.
Este funciona.
Este también.
Este también.
Este.
Este funciona si hago así.
Pero si cambio, tengo que darle al enter para que funcione.
Y este también funciona.
El menos así es el checkbox.
Pero bueno, de ese podríamos darle una...
O trabajando, ¿eh?
Así que...
Desactivo el linter.
Qué cabrón.
Qué cabrón.
Venga, desactivo el linter.
Lo voy a eliminar de aquí, ¿vale?
Ala, sin linter.
Espero que estés contento.
Importo el estado.
¿Vale?
Importamos el estado, pero le vamos a armar...
SetState.
Esto lo importamos de state.
De forma que aquí, lo que vamos a poder hacer de cada e...
No sé si...
De cada change aquí, esto tendríamos el value.
No.
Es que no tenemos el value.
O sí.
A ver.
EtargetValue.
A ver si esto funciona tal cual.
Y se lo come.
Vamos a poner target.
Y el value.
Value.
Del target.
Hacemos console.log del value.
Y vamos a ver qué nos da esto.
También, ya que estamos, vamos a...
Vamos a...
Setting key.
Vamos a recuperar del target.getAttribute.
El data for.
Y a ver si tenemos aquí el setting key y el nuevo value.
A ver si esto cuela.
Y si no cuela, a ver qué.
A ver qué podemos hacer al respecto.
Vale.
Light.
Vale.
On.
Hostia.
Ah, vale.
Esto es la key y esto es el valor.
Vale, vale.
Hasta ahí bien.
Minimap on.
Se queda en on todo el rato, ¿no?
Claro, porque esto no es así.
O sea, el valor...
En el caso de que sea un checkbox, creo que debería ser checked.
¿No?
Checked.
Vamos a ver si el check este funciona.
Checked.
Pues es raro, ¿no?
O sea, es que es raro eso.
A ver.
Ahora.
¿Ves?
True, false.
Tendría que mirar si es un check para que tenga precedencia.
Aquí podríamos hacer unas cuantas transformaciones.
¿Vale?
Me sale mal cangelar el de la sub.
Preferiría el linter.
Bueno, pues le hemos dado.
Le hemos dado.
Vale.
Faltaría...
Ahora falta uno para desactivar el copilot.
Totalmente, ¿eh?
Totalmente cierto.
Totalmente cierto.
Vale.
Teníamos el check, el value.
Y podríamos hacer también mirar si el target tiene...
Porque este, por ejemplo, es del type...
Claro, es que no se dispara.
Para el...
Un momento.
Voy a dejar el...
El evento en el target.
Podríamos mirar si es number para transformarlo a un número.
Porque si no...
Input, cometa, type, number.
Vale.
Is number.
Pues hacemos un target get attribute type que sea igual a number.
De esta forma, lo que podríamos hacer ahora es un set state.
Que entiendo que el set state...
Se supone que tenía que ser parcial.
Esto es una maravilla.
El copilot funciona solo.
Es justamente casi lo que quería hacer.
Casi.
Casi.
Si es number.
Vale.
Entonces, el valor...
Vale.
New.
Vamos a hacer aquí.
El setting...
Hostia, esto está mal.
Claro, es que no tengo el linter.
Digo, esto está mal.
No está mal...
Está mal lintado.
Setting key.
Esto.
Is number...
Si es number...
Vale.
Pues vamos a tener aquí el valor, ¿no?
Vamos a hacer...
Si...
Setting value.
Vale.
Y esto tiene que ser...
Type of check.
Si type of check es booleano, entonces el check.
Y si no, el value.
Vale.
Esto me gusta.
Pero si es is number, pues setting value, tenemos que transformarlo a...
Exacto.
A un número.
Y de esta forma aquí tendríamos ya el setting value.
Esto entiendo que actualizaría el estado.
Y luego ya volveríamos a main.
Que está en suscripción con este console.log.
Vamos a ver si esto funciona.
Si realmente hace lo que debería hacer.
Voy a poner por aquí la consola.
Ocultar esto.
Pam.
Vale.
Se ha suscrito.
Line numbers off.
Volvemos aquí.
Yes.
Ya está.
Ya está.
Ya está.
Ni gaviotas, ni pelucas, ni hostias.
Ya está.
Vale.
Esto ha funcionado.
¿Vale?
El tema es que le damos aquí.
Volvemos.
On.
Y aquí tenemos el line number.
Pim, pam.
Tenemos aquí el world grab.
Ay.
Está en off.
Por defecto.
Eso está mal.
Eso está mal.
Lo podríamos poner light.
Podríamos poner aquí 32.
Y activar el minimap.
Y bueno.
Ahí está.
Ahí está.
¿No?
O sea.
Ya tenemos aquí.
Ya tenemos aquí unas cuantas cosas.
¿No?
No está mal.
No está mal.
Mira.
El font size además ha crecido un montón.
Me he pasado.
Pero mira.
Se puede cambiar el font size.
Y ahora si refresco.
No funciona.
Pero bueno.
Bueno.
Al menos.
Al menos.
No.
No le pongo el tema en blanco.
Pero al menos.
Al menos.
Pinta bien.
¿No?
O sea.
Un poquito.
Descargar los line numbers.
Esto bien.
El que veo que está mal es el world grab.
Pero esto es un tema de cómo está en el index HTML.
Claro.
Esto al principio también habría que editar lo que sale seleccionado en cada uno.
Importante.
Pero bueno.
Eso igual.
Esto por ahora vamos a dejar así.
Para que salga el primero.
Eso ya lo haremos después.
Color.
Theme.
Entonces que sale muy chiquitito.
Color.
Theme.
Todo esto parece que funciona bien.
El minimap también aparecía bien.
El color.
Theme también funciona bien.
El world grab.
Creo que también funciona bien.
A ver.
Vamos a ver.
World grab.
Ahora tiene el world grab.
Si lo desactivo.
Ahora no lo tiene.
¿Vale?
Y el line numbers ya he visto que también funciona bien.
Perfecto.
Vale.
Pues ya tenemos un poco lo de las settings.
Ya tenemos las settings.
A través de esto.
Para actualizar el estado.
Que te suscribes a un estado.
Y al suscribirte a un estado.
Se refleja.
O sea.
Fantástico.
Fantástico.
Fantástico.
Está bien.
Ahora me falta el tema del local storage.
Que no estaba funcionando.
Se supone que cada vez que cambio un estado.
Aquí con el set state.
Este app initial state.
Este app initial state es el que recupero para que va al principio.
Pero no está funcionando.
No está funcionando.
También yo me he copiado aquí el código de esta señora.
Y no lo he mirado.
Pero bueno.
Me fío.
Me fío.
Tenía buena cara.
Pero es que no me está haciendo nada el local storage.
¿Sabes?
No veo aquí que esté guardando absolutamente nada.
Este set local storage.
Key value.
Stringify del new state.
A ver.
Este new state.
Claro.
Esta es otra.
Este new state.
Cuando se guarda.
Si se guarda.
Si yo le doy aquí.
Le pongo off.
Claro.
Si es que no estoy utilizando el update settings.
Y no me decís nada.
Estáis con las gaviotas.
Con las pelucas.
Y las cosas.
Y no me decís nada.
O sea.
No me decís nada.
No me decís nada.
En lugar de decirme.
Pero midu.
Que estás utilizando el set state.
Y no estás utilizando el update settings.
O sea.
¿Qué estás haciendo con tu vida?
Pues nada.
No me decís nada.
No me decís nada.
A ver.
A ver.
El tema es que aquí en settings.
Estoy haciendo el set state.
Que está muy bien.
Que yo utilice el set state.
Pero la idea.
Es utilizar el update settings.
Porque el update settings.
Es el que hace básicamente algo parecido.
Vale.
Hace algo parecido.
Estoy.
Me da la sensación que este state.
Claro.
Vale.
Vale.
El state.
Este set.
Que vemos aquí.
Es para actualizar parciales.
Por lo que pone aquí.
Vale.
Entonces.
Todo esto que he hecho aquí.
No es necesario.
Yo aquí lo que puedo hacer.
Es básicamente.
A ver.
Porque puede ser state.
Parcial state.
Partial.
Pero esto no puede ser.
O sea.
Esto de TypeScript está mal.
Porque también se puede pasar un callback.
A set.
Vamos a ver.
Esto es con una función.
Esto.
Entiendo que puede ser una.
Vale.
Merge.
De set.
Function.
Merge state.
Vale.
Eso es lo que quería saber.
Por lo tanto.
Entonces.
Si se le pasa.
Lo que devuelve.
Entiendo que también lo mergea.
Entiendo.
Por lo tanto.
Lo que queremos.
Sería esto.
Setting.
Con el new value.
Esto es lo que queremos.
Lo que pasa.
Es que claro.
Necesitamos.
Para el local storage.
Necesitamos guardar.
Todo.
O sea.
Necesitaríamos hacer aquí el get.
El get este del estado.
¿No?
State.
Con el get.
Y aquí.
Hacer esto del set local storage.
Que esto básicamente.
Sería.
El state.
Y el.
El nuevo setting new value.
Esto sí.
Todo esto.
Entiendo que ya no hace falta.
Vamos a ver si esto funciona.
Y utilizando update settings.
Aquí.
Con el update settings.
Settings.
Se pasa.
Setting new value.
Vale.
Eso no es exactamente así.
Porque es lo que le pasa.
Esto no sabemos qué nombre es.
El que se le pasa.
Le podemos poner que la key.
Sea setting key.
Y el value.
O sea.
Setting value.
Porque así podemos tener.
Por un lado.
Aquí la key.
Y el value.
Key.
Y value.
Voy a echar mucho de menos.
Mi linter.
Que me han quitado.
Porque me vendría bien.
Y ya está.
Está entre corchetes.
Porque la propiedad dinámica.
Efectivamente.
Efectivamente.
Vale.
Vámonos a nuestra aplicación.
State has been already declared.
Sí.
Ya ha sido declarada aquí.
Actual state.
Ah.
Coño.
Es que.
Anda que yo también.
Sin linter es más complicado.
Vale.
Update settings is not defined.
Porque el linter no me ha avisado.
Que no lo había importado.
Vale.
Vale.
Ay no.
Es que esto no es así.
Esto es lo que es.
Sería.
Get state.
Y del get state.
Se traería.
El update settings.
Que no sé si hace falta.
Ahora lo miraremos.
Vale.
Esto sí que ha funcionado bien.
Refresco.
Vale.
Ya está.
Ya está.
Que tenemos justamente.
En el local storage.
Ahora.
Ya se está guardando.
Cierta cosa.
Mira.
Vamos a poner light.
Le damos aquí.
Ahora voy a refrescar.
Y.
Se ha quedado con la configuración.
Que hemos puesto antes.
Vale.
Vuelvo aquí.
Color theme.
Ah.
Bueno.
Me falta editar.
Que los settings tengan.
Reflejen bien los cambios.
Eh.
Pero.
Lo que es.
El editor.
Lo refleja todo bien.
Tener el line numbers.
Le ponemos off.
Off.
Eh.
Le vamos a poner 32.
Y con el minimap.
Lo malo es el font size.
Este lo tengo que arreglar también.
Que los inputs.
No detectan el cambio.
El change.
No se ejecuta.
Tendría que ser diferente el evento que le pongas.
Pero bueno.
Ya nos preocuparemos un poco de eso.
El tema.
Que ya tenemos toda la configuración.
Y cuando yo refresco.
Se vuelve a mostrar la misma configuración.
O sea.
Que lo puedes editar como te dé la gana.
Tú lo editas.
Y ya lo tenés.
Pam.
Perfecto.
Eh.
Dicho esto.
Claro.
Una cosa que nos falta con esto.
Es.
El iniciar.
Aquí.
En estos settings.
Tendríamos que inicializarlos correctamente.
O sea.
Tendríamos que.
Eh.
Recuperar.
Del get state este.
El state.
Pues tendríamos que recuperar todo esto.
Solo que no hace falta tener los valores.
Claro.
Y esto tenemos que hacerlo de cada uno.
Vale.
Claro.
No pasaría nada.
Lo complicado es.
Que depende de cada uno.
Puede ser una forma o de otra.
A ver.
Vamos a poner aquí.
Settings.
Vale.
Lo ponemos así.
Vamos a recuperar esto.
Esto.
Esto.
No estoy usando ningún linter.
Y el que aparece ahí.
Eso es TypeScript.
Que por defecto.
Vale.
Esto sería get state.
Y de esto también recuperamos el update settings.
Que esto lo utilizamos más tarde.
Vale.
Entonces.
Ya teníamos todo esto.
Esto.
Lo vamos a tener.
De settings.
Aquí.
Y por un lado tendríamos.
El inicializar.
Los eventos.
Y.
Iniciar.
O.
Reflejar.
En settings.
La configuración.
Inicial.
Vale.
Escuchar.
Eventos.
De cambio.
De settings.
Por un lado.
Y luego reflejar.
Nada más entrar.
Hay que reflejar.
Qué cambios tenemos.
Vale.
Eso sería.
Eso sería.
Una cosa.
Uy.
Que he puesto aquí dos cosas de estas.
Vale.
Entonces.
Con cada setting.
Lo que deberíamos tener aquí.
De cada elemento.
Claro.
Aquí es donde está el tema.
Porque esto no creo que funcione.
A ver.
Set.
Select.
Value.
Dynamically.
Ya.
Apple Script.
Set.
Option.
Selected.
Attribute.
Aquí es donde está el tema.
Vale.
You are overthinking.
Selected index.
No.
Pero esto no es lo que estamos preguntando.
Claro.
Esto es jQuery.
Default selected.
Country.
Selected index.
Es que.
Dependiendo.
Si es un select.
Si es una cosa.
O es otra cosa.
Vamos a tener que pasarlo de una forma.
O sea.
Lo ideal sería.
Poder decirle.
Selected index.
Claro.
Make option.
Default select.
Selected.
¿Esto qué es?
Default selected.
And then.
You build the options dynamically.
Claro.
Pero es eso.
Que.
Hay que buscarlo.
Tenemos diferentes casos.
Vale.
Uno.
En el caso de que sea.
Y select.
¿No?
Entonces.
Que el punto.
Como es.
El elemento.
¿Cómo se le puede hacer esto?
¿Cómo era esto?
¿Cómo era esto?
Node type.
Node type.
Type.
No.
Node name.
Ahí está.
Exacto.
Is select.
Console log.
Is select.
Vamos a ver si esto es.
Si es un select.
A ver.
Si la consola nos dice.
Si esto ha sido.
Vale.
3 true.
2 false.
Está bien.
O sea.
Ha detectado correctamente.
Que tenemos 3 selects.
Y tenemos 2.
Que no son 2 selects.
Que son 2 inputs.
El tema de que si es.
Si es un select.
Claro.
Es un poquito más complicado.
Porque no se le puede poner.
Lo ideal sería poner hacer.
Poder.
A ver.
Es que el select.
Si yo en el select.
Le intento poner un.
Es que tiene que ser en el option.
Ojalá me quedara igual de bien.
Esa camiseta.
Del hat to the fest.
Que pasa eh.
Está súper chula.
Está súper chula.
Y si haces un switch.
De acuerdo al tipo de input.
Bueno a ver.
Vamos a hacer algo.
Similar.
No es tanto por.
O sea.
No es lo que me preocupa.
No es tanto el.
El switch.
O como hacerlo eh.
Lo que.
¿Cuál crees que es el breakpoint?
Para considerar que Codilink.
Necesita Svelte o React.
Muy buena pregunta.
Sergio.
Yo creo que seguramente.
El breakpoint.
Lo estamos superando ya.
A ver.
Lo que pasa es que ahora.
Ya que estamos metidos en la madriguera.
Pues estamos.
Me viene bien también.
Para.
Para.
Practicar un poco.
Vanilla JavaScript.
Porque hace mil años.
Que no lo bajo.
Y creo que.
Vamos a tener un reto.
A la hora de.
Cuando más o menos.
Veamos que todo funciona.
Pues volver a refactorizar.
A ver como lo separaríamos todo.
Creo que el estado global.
Nos puede ayudar bastante.
A simplificar un poco el código.
Como lo habíamos hecho.
Pero.
Bueno a ver.
No sé.
Por ahora igual.
Ahora que estoy viendo.
Que el settings.
Más o menos.
Con el código que hemos hecho.
Si que ha funcionado.
Creo que puede.
No sé.
Podemos aguantar.
Creo que vamos a poder aguantar.
Y me parece interesante.
No utilizar ningún framework.
No.
Que siempre utilizamos algún framework.
Y todo esto.
Ahora lo que necesito.
Es como.
Select.
Select.
Value.
Dynamically.
Porque me gustaría.
Doom drop down.
Me gustaría que no fuese el option.
Pero me parece que sí.
Default select that you used.
Is not setable.
¿Ves?
Lo que tenemos que hacer.
Si es un select.
Tenemos que buscar.
El option.
Que queremos.
Vale.
Venga.
Vamos a hacerlo.
Si es un select.
Lo que hacemos.
El query selector.
Vale.
Buscamos del elemento.
Que es el select.
Que es justamente este.
Vamos a buscar la opción.
Que sea.
Option.
Y que tenga.
De.
Value.
Tenga el value.
Que justamente.
Tenemos seleccionado.
Y ahora vamos a ver.
De este elemento.
Vale.
En lugar de buscar el data for.
Lo estamos sacando aquí.
Vale.
Setting key.
Pues esto ahora lo podemos sacar aquí arriba.
Setting key.
Vale.
Este setting key.
Ahora.
El.
Value.
Setting.
Value.
Actual.
No.
Actual.
Actual.
Sí.
Actual.
Setting.
Value.
Esto debería ser.
Claro.
Esto lo complica.
Pero bueno.
No debería pasar nada.
Si ponemos aquí.
Settings.
Y así.
Podemos poner.
Settings.
Setting key.
Y recuperamos el valor.
Que tenga.
Esa propiedad.
De nuestro estado.
Vale.
El actual.
Setting values.
Debería ser el que tengamos aquí.
Y lo que.
Tenemos.
Una vez que tenemos.
El selector.
Del option.
No sé qué.
Lo que deberíamos ser.
Set attribute.
Selected.
Y aquí.
Creo que podemos poner.
Un stream vacío.
Y con esto.
Con esto.
Que parece una tontería.
Creo que ya estaría.
Creo que ahora.
Esto debería funcionar.
A ver.
Vamos a ver si esto funciona.
Vale.
Peta.
Rest element must be last element.
Perdón.
Tienes toda la razón del mundo.
Perdón.
Vale.
Otra vez.
Pero si ya lo he hecho.
Must be last element.
Pues si se refería a este.
No.
No me digas.
Que es por la coma esta.
Hostia.
Vale.
Target is not defined.
Vale.
No pasa nada.
¿Por qué no es defined?
Porque esto era.
El punto.
El punto target.
No.
Esto es el punto get attribute.
Porque este es el elemento.
Vale.
Recuperamos el atributo.
Del data for.
Perfecto.
Ahora sí.
Ahora.
Tenemos on.
Vale.
Voy a poner relative.
Que es bastante raro.
¿No?
Si voy aquí.
Pone uno.
Uno.
Dos.
No sé qué.
Voy a refrescar.
Me voy a las settings.
Y mira.
Aquí tenemos el relative.
O sea.
Los selects ya parece que funcionan bien.
Ya tenemos bien los valores.
¿No?
Si ahora refresco.
Tiene que ser relative.
WorldGraphColumn.
Y light.
Vale.
Relative.
WorldGraphColumn.
Y light.
O sea.
Esto ya funciona bien.
Con los selects.
Ya funciona bien.
Ya estamos poniendo bien los valores iniciales.
Voy a hacer algo aquí.
Porque esto es bastante problemático.
Porque intentando hacer esto.
Imagínate que no se encuentra el elemento.
¿No?
Voy a poner aquí el option o selected.
Option to select.
Mejor.
To select.
Lo voy a poner aquí.
Y voy a hacer.
Me voy a evitar problemas.
Si no tengo el option to select.
Vamos a poner aquí un console.
Vamos a devolver.
Un console.
World.
Settings.
Option.
To initialize.
Not found.
¿Vale?
Y así lo que nos aseguraremos es que lo haya encontrado.
Es que si por lo que sea no lo encuentra.
Petaría el código.
Y petaría todo el editor.
Y no quiero que lleguemos a esa parte.
¿Vale?
Así que option to select.
Set attribute.
Y ya está.
Con esto sería si es un select.
Y ya lo teníamos.
¿Vale?
Relative.
WorldGraph.
Bueno.
Está genial.
Porque esto lo que tenemos.
Es que ahora sí que se refleja.
On, on, on, dark.
On, on, dark.
¿Vale?
Ahora sí que se refleja.
Me faltan estos dos.
¿Vale?
Porque.
If you select.
Si no.
Voy a intentar.
Pero no va a funcionar.
No va a funcionar.
¿No?
Porque claro.
Is select.
Tengo que mirar si is checkbox.
Y esto tendría que ser.
Input.
And.
El type.
Que sea checkbox.
Así que.
Si es select.
Esto.
Si es checkbox.
Pues lo que vamos a hacer.
Efectivamente.
Lo que pasa.
Sí.
Esto debería funcionar.
También.
Vale.
Vamos a crear al minimap.
Vale.
Ahora está activado.
Si vamos aquí.
Aquí.
No se ve.
Pero está activado.
Esto porque está muy pequeño el editor.
Si no.
Ah.
Pues no.
No es porque esté muy pequeño el editor.
Es que parece que se ve así de pequeño.
Lo ves.
Ahora el font size no está reflejado bien.
Eso lo arreglamos ahora.
Oye.
Pero el minimap.
Cuando decimos que es mini.
Es mini.
Se ve muy chiquitito.
Pero bueno.
Ahí está.
Funcionando.
Vale.
Vale.
Si es checkbox.
Pues sería con el check.
Que esto al final lo podemos hacer así.
Y si es.
Es.
Bueno.
Y al final es que podríamos poner aquí un else.
El punto value.
Que sea el actual setting value.
Y ya estaría.
Si ya sabe que hace esto.
Si checkbox hace esto.
Si no.
Pues es todo lo demás.
Y ya está.
Y esto.
Nos debería funcionar aquí.
Que si ponemos 32.
Refrescamos.
Y aquí tenemos el 32.
Y aquí tenemos la letra gigante.
Bueno.
Bueno.
Bueno.
Bueno.
Bueno.
Bueno.
Bueno.
Bueno.
Bueno.
No está mal.
No está mal.
Al final.
Dentro de lo que cabe.
No me desagrada.
Como ha quedado todo.
A ver.
Teniendo en cuenta que es verdad.
Que tiene bastante código aquí.
Pero es que no estamos utilizando ninguna librería.
O sea.
Estamos haciendo todo con vanilla JS.
Entonces.
Hombre.
No nos podemos quejar.
No nos podemos quejar.
Ahora.
Hay cosas que podríamos separar.
¿No?
Aquí en el DOM.
Por ejemplo.
Podríamos poner.
Is.
Select.
Pues aquí.
Hay cosas aquí.
Que teníamos esto.
El.
No.
Element.
Vale.
Pues.
Si.
El.
Es esto.
Export.
Const.
Is.
Checkbox.
Is.
Element.
O.
Note.
Is.
Note.
Checkbox.
Is.
Note.
Checkbox.
Vale.
Pues.
El.
Punto.
No.
Name.
Igual.
Bueno.
Básicamente.
Es.
Copiar esto.
Un poco para.
Extraer las cosas que son del DOM.
O otro sitio.
Ponemos aquí.
Y aquí.
Y aquí.
Como total.
Estamos aquí.
Is.
Note.
Checkbox.
Is.
Note.
Select.
Pues esto ya lo podríamos escribir aquí.
Is.
Note.
Select.
Pues le pasamos el elemento.
Para que.
Saberlo.
Is.
Note.
Checkbox.
Pues le pasamos el elemento.
Y así no tenemos ahí strings.
Que lo pongan a mano.
¿No?
Vale.
Luego vamos a hacer.
Esto lo vamos a hacer mejor.
Porque esto lo hemos dejado así.
De cualquier forma.
¿Cómo podríamos hacer esto?
Por un lado.
La verdad es que todo esto.
Set.
Form.
Control.
Value.
Me gusta.
Set.
Form.
Control.
Value.
Vale.
Vamos a utilizar esto.
Export.
Const.
Set.
Form.
Control.
Value.
Vale.
Y vamos a pasar todo este código.
Que tenemos por aquí en medio.
Lo vamos a pasar por aquí.
Vale.
Si es select.
Si es un checkbox.
Vale.
Y vamos a hacer aquí.
Algo.
Podríamos hacer.
Const.
Update.
Select.
Vale.
Y este sería el value.
Y este sería el value.
O sea.
Si le quitamos todo el tema de settings.
Entonces lo que podríamos hacer ya aquí.
Y select.
Vale.
Podríamos hacer si es select.
Hacemos esto.
Si no.
A ver.
No soy muy fan.
No soy muy fan.
De hacer esto.
Pero una cosa que podríamos hacer aquí.
Sería esto.
Y quedaríamos.
Quedaríamos bastante fuckers.
Quedaríamos bastante fuckers.
Quedaríamos.
Sí, sí.
Sí, sí.
Fuckers.
Fuckers.
A ver.
Que yo lo entiendo.
Pero es verdad que no todo el mundo lo entiende.
O puede no entenderlo.
Uy.
He puesto actual settings.
Esto está mal.
Porque debería ser value.
Value.
Y value.
Y ya está.
Sí, pero la legibilidad es verdad que no me gusta.
A ver.
Al final podríamos hacer un.
Si es select.
Pues hacemos esto.
Si es checkbox.
De hecho seguramente haría esto.
Yo haría esto.
Y si no.
El value.
Es value.
Yo haría esto.
Porque es verdad que se lee raro.
Pero bueno.
Que no se diga que no se puede hacer con ternarias.
Todo lo que sea por no poner un switch en mi código.
¿Vale?
No pongo un switch.
Miego.
Es que.
Creo que se entiende mejor esto.
O sea.
Al final el switch.
El problema que suele haber.
A ver.
El switch se puede utilizar en algunos casos.
Y tiene sentido.
Pero.
Si yo hubiera usado un switch aquí.
Lo que hubiera hecho.
Es meter la lógica esta.
Dentro del switch.
Cuando en realidad.
Podría.
Como he hecho aquí.
Extraerla.
Y entonces queda bastante más legible.
El hecho de hacerlo así.
Porque con un switch al final.
Lo que tienes es más anidación.
Están metiendo más código.
Y no escala bien.
Entonces.
Si lo puedo evitar.
Que es el título.
Evita usar switch.
Que no significa no usen nunca switch.
Pues lo evito.
Y en este caso.
Creo que no queda mal.
¿Sabes?
De hecho.
Queda bastante legible así.
Eso es lo que.
Lo que creo.
No es que esté súper súper súper.
En contra.
Pero dicho esto.
Voy a volver a activar el.
Voy a volver a activar el inter.
Que creo que.
Que está un buen rato.
Creo que está ya un buen rato.
Creo que me porta bastante bien.
Y además se me está.
Que me ha quedado.
Por los sitios.
Así que.
Vale.
Target.
Me da un poco de toque.
Y todo.
Estar sin inter.
Bueno.
Ahora vamos a ver si esto vuelve a funcionar.
Consola.
Perfecto.
Parece ser que.
Vamos a desactivar este.
Este.
Esto así.
Esto a 32.
Y esto a false.
Refrescamos.
Vale.
Off.
Off.
Light.
32.
Vale.
Funciona todo.
Perfectamente.
¿Qué os parece?
¿Qué tal?
¿Pero ya estáis usando Codilink?
Espero que sí, ¿no?
¿Estáis usando Codilink?
Que no me entere.
Sí.
Ahora.
Mis ojos.
Vale.
Que sí.
Que ya lo arreglo.
Ya lo arreglo.
Ya está.
Vamos a poner.
Vamos a quitar los line numbers.
Voy a poner justamente las preferencias que a mí me gustan.
¿Vale?
16.
Mini enabled.
Vale.
Vale.
Hola mundo.
Desde Codilink.
Creo que estaría genial.
Igual que pasa aquí.
Fíjate que aquí cuando se.
Cuando está.
Bueno.
No sé si se ve.
Pero hay un borde por ahí que está súper guay.
¿Se puede guardar los parámetros de la URL en el local?
Storage como para tener un auto guardado.
Como un auto guardado.
Pero no.
Ah.
Claro.
Por si vuelves.
Hostia.
Pero eso es muy peligroso, ¿no?
Porque.
Claro.
Dices de.
Bueno.
Te vas a localhost 3000.
Y que vuelva a aparecerte toda la.
Bueno.
Me lo pensaré.
Pon una ISU.
Sebas.
Me parece muy bien.
Pon una ISU.
Que no está mal.
Pues vale.
Vamos a hacer que el botón.
Pueda estar.
En el index.
HTML.
Vamos a hacer que el botón pueda estar activo.
¿No?
Pues vamos a poner la clase.
Que sea.
Active.
Why not.
Aside.
Button.
Vale.
Pues es aside.
Button.
Cuando tiene el active.
Vamos a ponerlo así.
Rollo.
Is active.
Que es como se lleva.
Que es como una nomenclatura.
Que cabrón.
Bauti.
Joder.
Que cabrón.
Dejadme.
Dejadme de.
Dejadme del inter.
Venga.
Bueno.
Mejor mal que estamos en los estilos ahora.
Y tampoco.
A lo mejor.
Lo echamos tanto de menos.
Vale.
¿Cómo.
¿Cómo está esto?
Esto tiene un borde a la izquierda.
Además.
El color.
Está un poquito.
Así como el hover.
¿No?
El hover.
Y el activo.
Están igual.
Así que el hover.
Lo ponemos.
Opacidad.
Así.
El border left.
De dos píxeles.
Sí.
Lo que tú digas.
Me fío.
Vale.
No.
Mentira.
Es que has hecho una mierda.
Copilot.
Me engañaste.
Vale.
Es más o menos así.
¿No?
Igual un poquito más.
Yo creo que tiene un.
A lo mejor dos más.
No.
Pues tiene tres.
Justo tres.
Vale.
Pues esto más o menos.
No es tres tres.
Exactamente.
A ver.
Vamos a ver.
El color que tiene el icono.
Pues este color es el que vamos a utilizar.
Sí.
Sí.
Sí.
Te aviso de nuevo que con la reestructuración de archivos te olvidaste de importar el que
controla la grid de los editores y no funciona la redimensión.
Ostras.
Gracias.
Gracias.
Gracias por avisarme.
Muy bien.
Muy bien visto.
Muy, muy, muy bien.
Es de Nicolás.
Muchas gracias.
No lo había visto.
Y vamos a ver dónde estaba esto.
Me he hecho menos gracias.
Menos mal que me has avisado.
El que controla grid de los editores.
Vale.
El grid.js que lo tenía por aquí.
Vale.
Y aquí grid.js.
Bien visto.
Bien, bien visto.
Vale.
Esto por aquí.
Y a ver ahora.
Perfecto.
Muy bien.
Muchas, muchas gracias.
Esto es lo que busco cuando estoy haciendo estos directos.
Que me venga desde Nicolás y se dé cuenta que la estoy cagando.
Y que evite que ocurra.
Y, oye, BirdCode, gracias por suscribirte con Prime.
Bueno, no.
Por suscribirte.
Así que.
Y muchas gracias a todos los que os habéis suscrito.
Que es increíble.
¿Cómo veo qué tema nuevo agregaste sin patearme todo el libro de nuevo?
Esa es una muy buena pregunta.
Y el hecho es que si por lo que sea tenéis las notificaciones, cuando tengáis las notificaciones,
os llegan justamente los cambios que yo he añadido.
¿Vale?
Dice, yo hago como unos cambios.
Pongo, ¿qué añado en esta?
Y pongo, he añadido esto y lo otro.
He añadido esto y lo otro.
¿Sabes?
Entonces, de esta forma, sabes perfectamente lo que se ha añadido.
O sea, es como una release.
Release changes.
Y yo te digo, nuevo capítulo aquí.
Algunos errores ortográficos solucionados.
Pero te digo, nuevo capítulo.
Nueva sección en el capítulo de no sé qué.
No sé qué, no sé cuánto.
Eso sí, tenéis este new version available, ¿eh?
Si no, pues no os vais a enterar.
O sea, tendréis que venir aquí y descargarlo manualmente.
Que claro, es un poco más rollo.
Yo creo que si os llega un mail...
A ver, no os voy a spanear.
O sea, que no os preocupéis.
Si lo activáis, pues a lo mejor os llega dos a la semana.
Al principio sobre todo, que es cuando más cambio va a haber.
¿Vale?
Madre mía, la de cosas que hemos hecho con el Codilink este.
Brutal.
Al final hemos hecho esto y al final no lo hemos terminado.
Bueno, lo terminaremos a lo mejor mañana, va.
Bueno, no va.
Va, va, lo voy a terminar ahora.
¿Qué coño?
Que la gente se ha vuelto loca.
Con los subs.
¿Y tú te vas a ir a cenar?
No.
Joder, vamos a terminar esto.
Vale, vale.
Ya está, ya está.
No te pongas así.
Venga.
¿Cuál es el aside?
El aside es el que hace...
Cuando se da un clic, hace todo esto del view, no sé qué, no sé cuánto.
Lo importante...
Debe ser bastante fácil.
Esto es un momento.
Primero vamos a volver a poner el inter para dormir mejor.
El botón AtmenListener...
Bueno, sí, ya está.
Cuando se da el clic, lo único que tenemos que hacer es de todos los buttons...
Vamos a recuperar todos los que sean...
Sí, vamos a recuperar todos los que sean aquí.
Bueno, de todos los buttons.
Al final es más fácil porque coges todos los buttons y para cada botón...
Para cada botón en el clic, cuando se le da un clic, haces botón.classlist.remove.
El isActive.
¿Vale?
Esto por un lado.
Y luego lo que sí que tenemos que hacer...
Cuando el element to show...
Pa, pa, pa...
Y al que se le ha hecho el clic...
Que al final es este que tenemos aquí...
Bueno, podemos poner aquí el target...
Pues en el target...
Eso.
Se lo quitamos a todos.
Eso lo suponemos a este.
¿Vale?
No funciona, pero yo me he quedado gustísimo.
Vale.
Vamos a ver por qué no funciona.
Quitarlo quita, por lo que veo.
Al menos a este sí que lo quita.
Voy a arreglar...
Ah, mira.
Aquí hace algo raro.
Ahora veremos qué es lo que hace.
Una cosa, para arreglar esto del borde...
Que se mueve el icono...
Lo que vamos a hacer...
Es dejar siempre...
Porque este isActive...
Tiene este border left aquí siempre...
Pues vamos a poner aquí...
Que deja 3 pixels...
Solid...
Transparent...
Del border left.
Vamos a poner primero el border cero.
It's Leos.
Muchas gracias por regalar una suscripción a la comunidad, eh.
Madre mía.
Vaya día, tío.
Vaya...
Vaya día.
Vaya día.
Vaya día.
Qué cracks.
Mira, It's Leos va a devolverle el favor a la comunidad por regalo recibido.
Qué grande.
Qué bonito.
Qué bonito.
Está...
Está bueno eso.
Creo que se va a animar a hacer el 24.
Vale.
Bueno.
Ahora aquí lo que veo es que esto hace lo que le da la gana.
Pero esto es porque...
He hecho algo mal aquí.
Claro, es que esto es el button.
Claro, es que es de este botón.
Y no es de este botón.
Lo que...
Lo ideal sería hacer esto.
Es mostrar este.
Y a este sería quitarle el isactive.
Al que está activo le quitas el isactive.
Eso es lo que queremos.
Lo que...
Pero no sé por qué no se añade después.
Qué es lo que pasa aquí.
¿Es que el target?
O es el current target.
¿Qué está pasando aquí?
Aquí ahora se me está...
Mirad que es sencillo esto.
Vamos a ver.
Vamos a ver.
¿Qué está pasando aquí?
¿Qué está pasando contigo?
Isactive.
Lo quitas.
Y ves la apuesta de su VG.
Eh...
Esto...
¿Target?
¿Current target?
Pues será el current target.
Entiendo que será el current target entonces.
Claro, porque el target se había recibido.
¿Vale?
Ahora sí, ¿vale?
¿Qué pasa con esto?
Este es muy interesante.
Este problema.
No es un problema como tal.
Lo que pasa es que el target es realmente el que recibe el evento.
Que luego puede ser que lo pase a una capa superior, una capa superior y tal.
Ese sea el target, que en este caso, claro, era el SVG.
Y luego es el current target, que el current, lo que quiere decir, es el que realmente está escuchando el evento.
¿Vale?
Entonces tenemos que utilizar el current target.
Y con esto ahora sí, no sé si se ve, pero sí que se ve perfectamente seleccionado el editor, el de arriba y el de abajo.
Y ahora pues creo que queda bastante bien, la verdad.
Y cuando le das, pues no pasa nada.
No pasa nada.
Si le das aquí, pues no se quita.
Perfecto.
Oye, pues ha quedado bastante fino.
Fino mandarino.
Vale, ya tenemos esto.
Los he añadido todos.
Muy mal, Midu.
Muy mal.
Esto no es lo que tú sueles hacer.
Vale.
Vamos a...
Vamos por parte, va.
Style aside button when they are active.
¿Vale?
Esto por un lado.
Luego.
Activate slint config.
Esto porque me lo he activado antes.
Un padding right.
Muy bien pensado.
Muy bien, Madebal.
Muy bien.
Ahora lo añado.
¿Vale?
Y import needed files for grid system.
Vale.
Claro.
Lo que dice y con razón en un Madebal es que dice...
Claro, si te fijas no se ve justamente centrado.
Pues no se ve centrado porque, claro, como tiene el borde a la izquierda de 3 píxeles, pues está 3 píxeles.
Aunque el borde es transparente.
No se ve, pero está ahí.
Entonces lo que podríamos hacer es un padding right justamente.
O un padding...
Podríamos hacer un borde también.
O sea, poner aquí border, right, 3 píxeles, solid, transparent.
Y con esto ya lo tendríamos arreglado también.
¿Ya lo tendríamos arreglado?
No, lo tenemos arreglado un coño ahí.
Vamos a ver por qué no lo tenemos arreglado.
Yo pensaba que con esto lo íbamos arreglado.
Pues no.
A ver con el padding.
O es que igualmente no se ve...
No se ve...
No se ve centrado.
Bueno, primero es que el padding lo he puesto mal.
Eso para empezar.
Luego es que el padding me lo estoy cargando por el otro lado.
O sea, tenía que ser 16 píxeles.
Arriba.
Derecha.
Abajo.
Claro, debería quitarle esto.
¿No?
Tenía que ser 3 menos.
16, 13 y 16.
Que sean los 3 que...
Claro, ahora tiene más sentido.
Ahora sí que se ve centrado.
O parece, ¿no?
No me parece que esté centrado.
Igual me estoy imaginando yo.
Otra opción, si no...
Sería el margin-left de lo mismo que teníamos.
Pero es que lo que estoy viendo...
Es que no está centrado.
O sea, ahora está centrado...
Por culpa...
Lo del margin ahora lo está arreglando.
El tema es que creo que no está centrado.
Porque fíjate, el padding como que...
El icono es un pelín más grande.
Y queda como por encima.
Es un poco raro, ¿no?
¿Puedes usar el margin?
Sí.
Ese sí.
Justamente esa es otra idea.
Pero qué raro, ¿no?
O sea, lo que veo que es raro...
Es que el icono pasa un poco por encima.
No, aquí no le pasa.
Pero ahora aquí sí que...
Sí que está centrado, ¿no?
Y aquí también.
A ver.
Aquí sí que parece que está centrado, ¿eh?
Y aquí...
Aquí parece también ahora.
Hostia, es que no sé si me da un efecto óptico de...
Mira.
Vamos a contar aquí.
Son...
12, más o menos.
¿No es porque border padding capaz tiene box size in border box?
Sí, no.
Tenemos el box size in border box, ¿eh?
Estamos aquí.
O sea que debe contar.
¿Qué estilos tiene el SVG?
Pues lo miramos.
Básicamente que ocupe 40 píxeles por 40 píxeles.
Es verdad que puede ser que este, que tiene 40 píxeles por 40 píxeles, igual no es exactamente...
No, pero sí que está haciendo bien.
Es que es raro esto.
No sé si es un efecto óptico o estoy flipando.
Bueno, a ver.
Ahora está mejor, ¿eh?
Que antes.
La barra sí tiene un ancho específico.
Pero debería quedar...
Debería quedar en el centro.
O sea, la barra tiene...
Tenemos aquí.
72 píxeles.
¿Vale?
Entonces, lo que...
A ver.
No sé por qué...
Ah, el padding.
Claro.
El padding al final era...
Vamos a hacer así.
Vale.
Margin left.
Yo creo que sí que está centrado, ¿eh?
Arriba.
Arriba.
Y podemos hacer esto.
¿Vale?
Yo creo que ahora...
O sea, tiene que estar centrado.
Sí o sí.
No, los iconos no tienen un width de un 10%.
No tiene...
¿Qué valores hay en computed?
A ver.
Aquí...
Vale.
Esto tiene sentido, ¿no?
Porque hemos puesto lo del margin en el border.
Para que justamente sí que quede centrado.
Pero yo creo que ahora sí que está, ¿eh?
Yo creo que ahora sí que está centrado.
Ahora sí que está centrado.
No se puede decir que no.
Yo ahora diría que sí que está centrado.
A ver, estilos.
Esto del width ya no tiene mucho sentido.
Yo lo que haría es esto.
Lo del padding por si acaso.
Side button.
Este le hacemos el margin left.
Mide con la regla.
Con así, con el dedito.
A ver el dedito.
Margin left.
16.
Este es 0.
Y esto...
Si no me he cargado nada.
Vale.
Sí, yo creo que...
Lo que pasa...
Claro, lo que pasa es que el borde, cuando está al borde, parece que está centrado sobre todo.
No sobre después del borde.
Pero tiene sentido, ¿no?
¿Por qué no padding block?
Bueno, a ver.
No es por nada.
No es por nada.
Utilizaría el padding block.
Lo que pasa es que no está tan soportado por todos los navegadores.
Padding block está muy interesante.
Pero todavía le faltan algunas cosillas, ¿no?
De...
A ver.
Lo podríamos utilizar.
Lo que pasa es que Chrome 86 es bastante reciente.
Es 86%.
A ver, no está mal.
No está mal.
Pero...
Es que fíjate.
Safari en iOS no lo soporta el 14.4.
14.4 es del 2000...
Finales de 2020.
O sea, hace un año del navegador ese.
No sé.
Creo que intenté...
Está bien el padding block, pero...
Total, tampoco pasa nada por utilizar ese.
Creo que voy a esperar un poco a utilizar padding blocks.
¿Vale?
Por eso voy a utilizar el padding este, que tampoco cuesta mucho.
Si no, lo que hice es utilizar este, el padding block.
¿Vale?
El padding block, al final, sería hacer esto.
Y dejas así.
El padding block sería el del bloque.
Y luego tendríamos también el inline, ¿no?
El inline sería por los...
Por el otro eje.
Y ya lo tendríamos.
Padding block y padding...
Está el padding block, end, start, ¿no?
Que está interesante porque eso es agnóstico a la dirección.
En lugar de poner top de arriba, derecha, no sé qué.
Claro, es un shorthand.
Y además, dependiendo cómo funcione la lectura y tal, pues puede ser de una forma.
¿Vale?
Pero nada, vamos a utilizar el padding.
Ahí ya saco.
Joder, no está soportado.
Ya he leído que sí...
No, a ver, está bien.
O sea, está bastante soportado.
No está soportado al 100%.
O sea, nunca va a estar nada al 100%.
Eso es normal.
O sea, no pasa nada.
Pero, ¿qué pasa?
Que aunque ponen 86, es que hay algunos que son bastante...
Mira, por ejemplo, Chrome 86 es del 2020.
Safari es del 2020.
Son demasiado recientes, ¿sabes?
Si fuese solo Internet Explorer 11 y tal, pues...
Bueno, aunque no esté al 100%, pues mira.
Pero creo que son navegadores demasiado recientes todavía.
¿Qué es padding block?
Pues básicamente esto.
El padding block es la posibilidad de hacer un shorthand para...
En el eje horizontal sería de tener el padding tanto de izquierda como de derecha, en este caso.
¿Vale?
Y en lugar de tener que utilizar...
¿Ves?
Ahí.
Esto vale corresponde a las propiedades padding top y padding button.
O padding right y padding left.
Dependiendo de los valores definidos por writing mode.
¿Vale?
O sea, dependiendo de cuál es el modo de lectura o de escritura del país, puede ser uno o puede ser otro.
Eso es súper importante.
Porque tienes que pensar que hay sitios donde el bloque es de arriba abajo y no de izquierda a derecha.
En nuestro caso, por ejemplo, el padding block sí que sería de izquierda a derecha.
¿Vale?
En nuestro caso.
A ver.
Coding link.
Local host.
Para que lo veas por aquí.
Entonces, es como un short hand.
¿Vale?
Hasta aquí.
Pam.
Padding block.
Arriba padding block.
Ah, bueno.
En este.
No, no.
Claro.
He dicho...
He dicho izquierda a derecha, pero no.
Padding block para nosotros sería de arriba abajo.
Justamente.
¿Vale?
O sea, sería padding top y padding bottom.
En este caso.
Y el padding block start sería el padding top.
Es un poco raro, pero claro, es que piensa que para sitios donde se lee de arriba abajo,
de izquierda a derecha y tal, esto es súper importante.
Porque así no te tienes que preocupar tanto.
Sino que simplemente con esta propiedad ya lo podrías hacer.
Vale.
Pues venga, vamos a poner esto.
Align center icons on sidebar.
¿Vale?
Pusheamos.
Nos vamos.
Alguien había dicho que eche un vistazo a las...
Ah, mira, el logo.
Quisiera aportar un poco a este proyecto con alguna ansiedad de logos que he creado.
Hostia, y así el...
Que...