Voy a hacer un CodePen desde cero. ¿Qué es un CodePen? ¿Qué es esto de CodePen? ¿Y por qué lo vas a hacer? Pero, Midu, ¿cómo se te ha ido la olla? ¿A qué te dedicas con estas cosas? Yo ahora te lo explico. Voy a abrir unas cositas que tengo por aquí y os lo enseño y os lo explico, ¿vale?
Mira, fíjate. ¡Ey, Sergio Serrano! Gracias por renovar tu suscripción con Prime. Muchísimas gracias, amigo. Muchas, muchas gracias. Te mando un abrazo enorme. Mirad, mirad, mirad. ¡Ay, qué cabrón! Ha perdido... Bueno, no pasa nada.
A mí LiveWave, para que no conozca LiveWave, es un editor de código que tú puedes cambiar aquí. Hola, Twitch. Y funciona bastante bien. Este me gusta. Este editor me gusta porque va rápido, va bastante rápido, responde muy bien.
Y este editor, justamente, es el que yo utilizo, seguro que habéis visto, bueno, o alguno, alguno espero que hayáis visto, estos vídeos que hago yo de este.
Le crea el logo de TikTok entre el asunto. Mucha gente, mucha gente me pregunta, ¿cómo has hecho esto? ¿Qué editor usas? Pues si os fijáis, el editor este que uso, en realidad, este editor que me va dando como la previa aquí, este editor es este de aquí, LiveWave.
Que, como veis, pues, bueno, está oscuro y aquí, pues, tú vas haciendo cosas y vas viendo aquí a la derecha. Pero, ¿qué problema tiene este editor?
Este editor, el problema que tiene es que, como podéis ver, tiene un autocompletado que a mí me pone de los nervios y, de hecho, me molesta tanto que lo tengo que quitar.
O sea, tengo que darle aquí, inspeccionar el elemento y, entonces, pues, me pongo a ocultarlo, ¿vale? Lo oculto, ¿vale? Eso por un lado.
Pero luego también tiene esto que te va indicando los errores. Que en términos normales, si yo fuese normal, pues, estaría genial porque te dice, ah, mira, tienes algo mal en tu código, ¿vale?
Pero en mi caso me molesta también porque no quiero que me diga eso porque, si no, mientras yo voy escribiendo, pues, se va viendo y no quiero que se vea.
Como podéis ver aquí, pues, yo quiero que se vea súper limpio. Todo lo que voy haciendo en el editor quiero que se vea finísimo, ¿vale?
Y, de hecho, ¿veis? Y, mira, se me coló esto el otro día. Se me coló esto porque algo se me tenía que colar y se me coló.
Y, fíjate, es esto de aquí. Esto de aquí que está aquí en medio y me, bueno, es que me molesta, me molesta, me molesta.
Por eso necesito un editor. ¿Qué voy a hacer? ¿Qué voy a hacer? ¿No? Porque alguien me diría, bueno, ¿y por qué no utilizas, por ejemplo, CodePen, no?
CodePen que, bueno, encima yo lo tengo editado para intentar también utilizarlo.
Pero, bueno, pues, el problema que tiene CodePen es que va bastante regular. A mí, al menos, me va fatal.
¿Ves? Yo he escrito ahora aquí este H1 y ha tardado la vida. Yo necesito que esto sea tiempo real. Necesito velocidad.
No necesito, no puede ser que yo tarde, que esto tarde, ¿sabes? No, no, no, no me funciona esto. Que esto vaya tan, tan, tan, tan lento.
¿Ves? Como que tiene un retardo. No puede ser que tenga un retardo.
Que igual el que hago yo también tiene el retardo y me lo como con patatas, ¿eh?
Pero, bueno, LiveWave, yo he visto que este no tiene ese retardo. ¿Ves? Es mucho más rápido, mucho más directo.
Esto es lo que quiero yo. Pero ninguno de los dos me termina de funcionar. Ni me funciona LiveWave, ni me funciona CodePen.
Es como que los dos no me funcionan. LiveWave como que tiene encima demasiadas cosas, demasiados botones, demasiada historia.
Y no hay un modo Zen. Sí que hay aquí formas de cambiar la layout. Que, mira, está bastante bonito.
La verdad es que reconozco que está muy bonito. Pero que hay cosas que me sobran. Me sobran y he dicho, ostras, pues la verdad es que esto no tiene pinta de ser tan difícil.
Estas son las típicas chorradas que dice uno cuando se viene arriba. No tiene pinta de ser tan difícil.
¿No? El hecho de tener un editor de HTML, uno de CSS y uno de JavaScript no parece tan difícil.
Y esto al final, esto se tiene que hacer bastante fácil. Y he pensado, oye, pues como ejercicio podría crear mi propio CodePen.
O sea, que es como este CodePen que tenemos aquí. Pues crear algo similar o como este de aquí.
De hecho, yo creo que lo que más me puede costar, que no creo que a lo mejor hoy lo podamos hacer, es el tema este de cambiar el tamaño de la ventanita.
Eso es lo que creo yo. Imagínate.
Pero yo creo que crear un CodePen, además con algunas ideas que tengo que ya os iré enseñando.
Además tengo hasta un dominio ya para publicarlo. Porque tengo desde hace tiempo que quería hacer esto.
Creo que se llama Codilink. Codilink. No sé si os gusta la URL. Ahora os leo en el chat, ¿vale? Y me decís Codilink.
Esta es mi idea.
¿Usarás CodeMirror o Prims.js? Pues muy buena la primera, porque creo que no voy a utilizar ninguna de las dos.
Creo que voy a intentar utilizar Visual Studio Code. Bueno, Monaco Editor.
Por ahora voy a hacer un Texaria, ¿vale? Lo empezaremos con un Texaria.
Pero mi idea es utilizar Monaco Editor. O Monaco Editor, como le queráis llamar. Este de aquí.
¿Por qué? Uno, porque es el editor de Visual Studio Code, que conoce todo el mundo.
Dos, porque tienes un montón de temas.
Tres, porque tienes soporte para todos los lenguajes. O sea, son todo ventajas.
Entonces yo creo que voy a utilizar esto. No voy a utilizar ni Prims ni nada de esto.
Vamos a utilizar este. El Monaco Editor. No sé si lo conseguiremos, pero le daremos caña.
Bueno, para el que no sabía qué era CodePen, pues es esto. CodePen es esta plataforma en la que la gente va creando sus creaciones, nunca mejor dicho, de HTML con JavaScript y tal.
Y entonces lo que puedes hacer, mira, por ejemplo, este House Transition.
Pues puedes ver HTML aquí, el CSS aquí y el JavaScript si fuese necesario.
Ah, mira qué bonito. Me gusta, me gusta.
Esto tiene muy buena pinta. Bueno, a ver, a ver, ¿eh?
Vamos a empezar desde cero. Vamos a ver hasta dónde.
Sí, la idea es utilizar un iFrame. Por ahora. Ya veremos.
Uy, hay gente que no le gusta el Codilink. Hay que ver.
Idea súper chula, con muchas ganas de ver cómo hacerlo. Venga, eso lo vamos a ver.
Vamos a ver. Tengo una pregunta. ¿Las app móviles necesitan un backend?
Hombre, pues en principio sí. La verdad es que sí.
Vamos a empezar. Tengo un montón de ideas de cómo hacerlo, pero tengo también muchísimas dudas de qué es lo que va a funcionar, lo que no va a funcionar.
Entonces, lo que sí que tengo bastante claro es que lo quiero hacer con Vite. Veremos si esto lo puedo hacer.
Y que lo quiero hacer con Vanilla. Así que vamos a empezar el proyecto con... No sé si tengo por aquí a terminal.
Sí, vale, perfecto. Pues vamos a irnos a Dev y vamos a crear aquí nuestro proyecto.
Y le voy a llamar... Bueno, por ahora le voy a llamar Codilink, ¿vale?
Pero si sabéis mejor en nombres, yo encantado de la vida. Total, un nombre es lo que...
Ah, mira. Ya había creado en su día. Parece ser que ya había creado.
Codilink. Vale. Ahora estará vacío, se supone. Vale. En PM install.
Y empieza la aventura. Aquí empieza la aventura.
Esto es el momento más emocionante cuando empiezas cualquier proyecto en el que tienes ahí un archivo vacío
y te dice... Venga, aquí tienes ya para empezar. Venga, Codilink.
Os voy a explicar un poco las cosas que yo creo que... Mira, sí, ya tiene un query selector.
Y tiene un import del CSS. Ah, qué rico esto. Qué bien. Muy bien. Muy bien pensado.
Vale, con módulos. Lo voy a intentar hacer con tecnologías modernas, ¿eh?
No voy a... No... Voy a dar por sentado que tenemos tecnologías modernas,
que tenemos buenos navegadores y APIs modernas y cosas así, ¿vale?
Así que que lo tengáis en cuenta. Venga. Vamos a ver.
Esto ya está vacío. Pues venga. ¿Qué es lo que se me ocurre?
Yo voy a empezar aquí ya poniendo el Codilink.
La primera cosa que tengo en la cabeza es que para hacer esto vamos a necesitar un iframe.
O sea, esto lo veo bastante claro, ¿no? Así que voy a poner aquí un iframe
y yo creo que el primer, digamos, el primer reto que vamos a tener con el tema del iframe
sería el tema de cómo, ¿sabes? Cómo renderizamos lo que nos dé la gana, ¿sabes?
Aquí. Porque aquí, en este iframe, yo quiero que renderices lo que yo quiera.
O sea, el HTML que yo le pase. No tengo ni idea de cómo hacer esto.
Tengo una posible idea. Primero voy a intentar aquí una cosa, ¿vale?
Voy a poner mi página web para ver si me la renderiza y ahora miro.
Vale. Como veis aquí, esto renderiza el HTML del source que yo le he dicho.
Hay una particularidad que creo que funciona en general con cualquier recurso
como SVG, imágenes y tal, que habréis visto,
que es el hecho de intentar cargar una base 64.
Entonces, lo que creo que se podría hacer es que el iframe, cuando le decimos el source este,
creo que le podríamos decir aquí que renderice un base 64.
Y de hecho, vamos a buscar.
Iframe source load base 64. Vamos a ver si esto...
De hecho, ¿ves? Aquí esto ya tiene...
Esto con un PDF. ¿Cómo podemos mostrar en un HTML?
Vale. Yo no quiero mostrar...
Yo no quiero...
Yo no quiero mostrar un PDF. Yo lo que quiero mostrar es esto.
Mira. Eso, eso es lo que quiero yo.
El text HTML y tal.
Bueno, yo con ver que más o menos veo que sí que es posible,
yo me quedo bastante tranquilo.
Data application PDF 64, no sé qué.
Pero aquí, ¿por qué le pone dos puntos?
O sea, yo creo que aquí en el...
Es que no le pone data.
O sea, yo supongo que esto debería ser text HTML, coma,
y aquí poner todo en lo que sería el HTML.
O sea, que vamos a empezar ya a ver cómo podríamos renderizar esto.
Vamos a ver si tenemos un base 64 en code online.
Y yo voy a hacer aquí el encode.
¿Esto sería decode? No.
Yo necesito el encode. ¿Dónde estás? En code.
Aquí. Vale.
Si yo pongo hola mundo aquí y le doy encode y yo esto lo pego.
¿Quién dice que esto funciona?
Uy, espérate que aquí me ha puesto esto así.
A ver ahora.
Pues ya está. Ya hemos terminado.
Bienvenidos a mi charla TED.
Bueno, con esto lo que ya estamos haciendo, al menos,
es que ya estamos renderizando HTML.
Fíjate, he puesto un iframe, le digo data, text, HTML,
base 64 y esto que ves aquí, que está codificado,
es este hola mundo, es un h1 hola mundo.
Lo he codificado aquí.
Bueno, no sé si se ve, pero he puesto h1 hola mundo.
Esto se codifica en base 64 y lo tendríamos aquí fantásticamente.
Básicamente, base 64 es un formato binario, bueno, binario, no, binario no, base 64.
O sea, base 64 en realidad es justamente lo que dice,
que los números van del 0 al 64.
O sea, el binario sería una base sobre dos números.
El base decimal sería del 0 al 9.
Base 64, pues sería del 0 al 63.
Usa el rango de carácteres, az, claro, para llegar al máximo rango,
por eso es alfanumérico.
Esto lo que hace es transformar cada uno de los símbolos en el que le corresponda.
¿Se supone que esto entiendo que debería ser más corto?
No, creo que es más largo, ¿no?
A ver.
Sí, es bastante más largo.
Claro, porque al ser base 64,
tienes como menos carácteres,
esto es bastante difícil, bueno, difícil.
Lo que quiero decir,
con base 64, lo que quiero decir es que solo tienes 64 carácteres
para reflejar este string.
Por lo tanto, puede ser que este string, por ejemplo,
este, el menor que,
es posible que no esté entre esos 63 carácteres
y por lo tanto, tengas que utilizar dos carácteres
para referirte a este string.
Por eso queda más largo.
No sé si se ha entendido, pero es bastante interesante.
Vale, pues eso.
Bueno, luego necesitaremos algún tipo de librería de base 64.
Por ahora, para hacerlo esto, para ir a saco,
porque tengo muchas ideas de muchas cosas que quiero hacer,
vamos a poner tres text áreas a saco
y le vamos a poner aquí el HTML,
el JS y el CSS.
Vale, y aquí vamos a recuperar el JavaScript document.
Esto, ¿cómo se podía sacar?
Si ponemos aquí el get, get el.
Vamos a poner aquí selector document query selector.
Para no repetir todo el rato el query selector, ¿no?
Get el.
Y aquí recuperamos el JS.
Madre mía, que hack o pilot nos va a hacer la mitad de la aplicación.
Madre mía, vale.
Vale, una vez que tengo esto,
la idea, ¿qué sería?
La idea aquí, ¿qué sería?
O sea, mientras voy escribiendo,
lo que quiero es que haga el set, ¿no?
O sea, lo que quiero es, ¿vale?
¿Cómo?
Bueno, lo tengo por aquí.
Yo me imagino, claro, es que como hace tiempo que estas cosas,
no, el listener, como, ¿cuánto hace que yo no hacéis algo así,
de escuchar el evento de un input?
Yo creo que es así.
Vamos a ver, etarget value, por ejemplo.
¿Es change o es input?
Ahora no recuerdo.
Pero bueno, así me sirve también para...
Pa, pa, pa, pa, pa, codilink.
Aquí.
¿Eh?
¿Qué he hecho aquí?
Que no he cerrado las cosas.
Es que esto no se cierra así.
Se cierra así.
No, no sirve este auto cerrado.
¡Ay, Ria!
Cuánto daño haces en las mentes de la gente.
Vale.
Vamos a poner por aquí esto.
Esto por aquí.
A ver la consola.
No, es que no es lo que he puesto.
No es el change.
Yo creo que es input.
No sé por qué recuerdo que es input.
Tampoco.
No me acuerdo de cómo mirar, ¿eh?
Cómo recuperar.
A ver.
Native event text area change.
Ah, ¿o será?
Evento change.
Pues mirad, aquí pone evento change.
Bla, bla, bla.
Query selector evento change.
Porque aquí está llegando, ¿verdad?
Console.log.main.
Main.
Aquí está llegando esto.
A ver si esto no está refrescando.
No, no está cargando.
No sale este console.log.
Vale.
¿Por qué no sale este?
Pero si tienes aquí este main.js, main.js, y aquí estás pillándolo.
No será que no tiene...
Porque pone page reload.
A ver.
Miro la network.
All.
No, no está pillándolo.
Vale.
Yo creo que es el iframe este que también lo he cerrado mal, ¿eh?
Yo creo que es que tiene que ser así.
HTML es un poco tonto, ¿eh?
Si me dejas.
Es un poco...
Bueno, esto ahora sí que pinta mejor.
Vale.
¿Y este estilo?
Es súper raro.
Vale.
Ahora sí que está esto.
Ahora sí que tengo el main.
Ahora sí que tengo...
Ahora sí que estoy escuchando el evento.
Vale.
Vale.
Esto ya pinta mejor.
Vamos a hacer esto.
Esto.
Pero aquí le vamos a poner el CSS.
Y aquí el HTML.
Vale.
Vale.
A ver.
Que os leo un poco.
Típico.
Y que al mes abandona.
Que no lo voy a abandonar.
Ya veréis.
Justo quería hacer un proyecto replicando a CodePen.
Pues mira.
Fantástico.
Que le den a Internet Explorer.
Ahí está.
¿Vas a usar Shadow DOM?
Por ahora no creo.
Creo que vamos a intentar con el iFrame.
Más adelante ya veremos si utilizamos el Shadow DOM.
¿No sería más viable el frame?
Más viable.
¿A qué te refieres con más viable?
¿En qué sentido de más viable?
Yo creo que un iFrame sería lo suyo en este caso.
A ver.
Que en este...
Que ni siquiera...
Bueno.
Este source ni siquiera hace falta.
Esto lo haremos después.
¿Tiene resizing?
Se puede cambiar el tamaño del iFrame seguro.
El iFrame es para insertar páginas externas.
Con el frame puedes dividir la página en distintas partes.
Bueno.
Pero es que en el iFrame...
Lo que vamos a hacer aquí es renderizar una página como si fuese externa.
¿Con Tailwind se podrá customizar?
No vamos a utilizar Tailwind seguro porque queremos ser bastante nativos.
¿Qué pasa si haces en code de tu blog?
Bueno.
Ahora mismo no...
Bueno.
Que no veríamos nada seguramente.
O sí.
Claro.
No.
O sí.
Claro.
Podríamos codificarlo todo.
Pero tendría un límite.
¿Por qué el desarrollo web y la programación son tan difíciles?
Bueno, Diego Samudio.
Pues ponte a estudiar cirugía.
A ver.
Yo qué sé.
O medicina.
¿Qué me estás contando?
El desarrollo web está tirado con lo bien pagado que está.
Diego.
O sea.
Hay 10.000 millones de profesiones ahí fuera.
Que son mucho más complicadas y están peor pagadas.
Puedes pasarle con este atributo.
SRCDoc.
Anda.
No sabía eso.
Mira.
Sergio Serrano.
A ver.
Que me cuenta que hay un atributo que es SRCDoc.
Hostia.
No lo conocía.
Oye.
Pues fantástico.
Anda.
Fíjate.
SRCDoc.
No, no, no, no, no.
The content of the page that the embedded context is to contain.
Qué raro esto.
To show in the line frame.
Hostia.
Oye.
Pues fantástico, ¿no?
¿Y esto lo soporta a todo el mundo?
Joder.
Pues nos va a facilitar la vida.
¿Cómo le llamamos a esto?
Digo yo que esto lo soportará a todo el mundo.
Ah, bueno.
Internet Explorer 11.
Vaya.
Da igual.
No importa Internet Explorer 11.
Bueno.
Safari.
Bueno.
Que no se sabe.
No se sabe.
O sea.
Que igual sí que lo soporta.
Bueno.
Pues podemos probarlo.
Vamos a probarlo.
O sea.
Que si aquí le ponemos SRCDoc.
Es la primera vez que escucho este hola mundo.
Y le ponemos aquí un H1.
Esto se lo traga con patatas.
Que yo encantado, ¿eh?
Hola SRCDoc.
Fíjate.
Se lo come con patatas.
Muy bien.
Oye.
Pues genial.
Igualmente la base 64 vamos a necesitar, ¿eh?
Pero bueno.
Alguien día entraré a este stream y entenderé todo.
Ni siquiera yo.
Ni siquiera yo.
Busca sobre los frames.
Pero es que de verdad.
Es que no hace falta.
Si el iframe es perfectamente.
Es como una página externa.
La estamos creando al vuelo.
¿No sería mejor usar el evento key app?
Yo creo que hay mejor el change, ¿no?
Le falta el punto al punto JTS.
¿No?
Eso ya funciona bien.
Vale.
¿Por qué no utiliza React en este proyecto?
Porque ¿pa qué?
Sobra.
No sé.
Igual más adelante.
Pero yo creo que no vamos a utilizar React.
Quiero que sea una página muy sencilla.
Y cuanta menos dependencias tenga, pues mejor.
¿Qué tema tengo de Visual Studio Code?
OneDarkPro.
Vale, vale, vale.
Bueno, bueno.
Es que no sería mejor hacerlo con debounce.
Madre mía.
Vamos con calma.
Vamos a hacer primero esto.
Y ya veremos lo del debounce.
En principio, yo creo que da igual.
O sea, es que quiero justamente que sea lo más rápido posible.
Me da igual.
Es que esto no es React.
O sea, ¿qué es un code pen?
Code pen es este proyecto de aquí.
¿Vale?
Que te permite escribir aquí CSS y todo esto.
¿Vale?
¿Por qué usa el carácter?
Es dólar al principio las variables.
Venga.
Os lo explico.
A ver.
Esto.
Esto.
Es una costumbre así de hace de jQuery en su día.
Que lo que te indicaba era cuando guardabas un elemento del DOM, pues le ponías esto.
A ver.
Yo utilizaba esto o utilizaba esto.
¿No?
De element.
Me gusta este porque se lee bastante fácil.
Y como jQuery era así con un dólar, pues se quedó.
¿Vale?
De hecho podemos utilizar el dólar.
Mira.
Ya está.
Ya tenemos jQuery.
¿Vale?
Entonces, no es que esto tenga jQuery, pero es simplemente que es recuperar el elemento del DOM.
Y ya está.
¿Vale?
Venga.
Venga.
Pues vamos a darle y veremos a ver qué va saliendo.
Lo interesante de esto es que una vez que tenemos tanto el JavaScript como el CSS como el HTML,
lo que tenemos que crear, que yo no sé si esto funcionará, pero yo quiero pensar que sí que funciona.
Cuando creamos un HTML deberíamos tener el HTML, deberíamos tener el HTML y todo esto, ¿vale?
O sea, ¿qué deberíamos hacer?
Deberíamos tener aquí un createHTML, una función así, que esto lo que haga sería crear el HTML.
Y este HTML, pues tendría que ser algo así.
¿Vale?
Bueno, esto no, esto no, esto no, no, no, no, no, no, no, no, no, no, no, no, no, no, no.
Esto así, esto así.
Style.
¿Qué es lo que va a renderizar aquí?
Vale, pues aquí se supone, aquí podemos hacer diferentes cosas.
Estoy pensando, cuando creamos el HTML, una de dos, o recuperamos justamente,
claro, es que esto de escuchar el HTML listener, a ver, tiene sentido, pero será más para llamar a la función.
Porque cada vez que llamemos a la función, claro, claro, claro, claro.
O sea, podríamos tener aquí HTML y aquí, pues, hacer el HTML.value.
O sea, el HTML.value entiendo que debería ir aquí, HTML.
¿Vale?
Luego, el CSS.
CSS.value.
Pues el CSS debería ir aquí.
Y aquí es el que me mosquea un poco.
No sé si esto, yo creo que esto nos puede dar problemas.
Pero bueno, vamos a verlo.
Heat barra body.
Vale, Heat.
El de JavaScript.
Vamos a recuperar el JavaScript que hemos escrito.
JS.value.
Y este JS lo tenemos aquí.
¿Vale?
Entonces.
Este create.html lo deberíamos ejecutar también.
Vamos a update.
Vamos a llamar update.
Esto lo que hace es crear el HTML.
Create.html.
Y este HTML es el que deberíamos poner en el iframe.setAttribute.src.doc.html.
Yo no tengo muy claro que esto se lo vaya a comer.
Claro.
Aquí hay un problema.
Aquí creo que es donde vamos a tener el problema.
Aquí es donde vamos a tener el problema.
Sí, no he abierto el body.
Bien visto.
Muy bien.
Estoy atento ahí a vuestros comentarios.
En diagonal voy mirando ahí.
Te faltó el body.
Muy bien, muy bien.
Joder, ¿cómo está?
Gente, aquí de atenta.
A tope.
Muy bien, ¿eh?
Vale.
Uy, mi plantita.
Que la piso.
Pobre.
Pabece04.
Gracias por suscribirte con Prime, amigo.
Muchas gracias.
Y cerrar el HTML.
El HTML no hace falta cerrarlo.
Lo podríamos cerrar, pero es opcional.
No pasa nada.
Venga, lo ponemos.
Head, body.
Y este HTML lo ponemos aquí.
Body, HTML, el head lo hemos cerrado.
CSS, perfecto.
¿Cuál es el problema que creo que puede haber con el srcdoc este que hemos hecho aquí?
Yo lo que creo, mira, esto además podríamos llamar update.
Update.
Y update, ¿no?
Porque esto no hace falta tampoco que, o sea, ya cuando llamas al update,
esto llama al HTML, create HTML, esto recupera el value.
O sea, que da igual porque ya está escuchando el evento.
Vale, pues recuperaré el value.
Y ya está.
Y entonces ya crea aquí el ta, ta, ta.
Ah, y el iframe.
Claro, tengo que recuperar el iframe en condiciones, ¿eh?
Que esto lo he hecho así.
Como solo hay un iframe, vamos a hacerlo así.
Y ya está.
¿Vale?
Lo del dólar es nativo, ¿eh?
No estoy utilizando, mira, lo que he hecho aquí es una constante dólar igual.
Y esto es un método, que le pasas el selector y lo que hace es el document.query selector.
Ya está.
Pero bueno, es que es para tenerlo con un...
Esto, esta es la razón por qué lo usó jQuery.
Para tenerlo en un solo carácter.
Entonces, por eso lo estoy haciendo yo también, para tenerlo en un solo carácter.
Venga, volvamos a nuestra aplicación que estaba por aquí.
Canons Access Update Before Initialization.
Bueno, tiene sentido.
Tiene sentido.
Ahora vamos a poner arriba.
O podríamos crear que esto fuese una función.
Así.
Y se acaban los problemas.
Oh.
Oh.
Asda is not defined.
Vale, porque esto es JavaScript.
A ver, vamos a ponerle aquí al menos unos labels o algo, ¿no?
Vamos a poner label.
Deep.
Para enterarme, porque es que no me entero cuál es cada uno.
HTML.
Deep.
Voy.
Label.
JS.
Deep.
Joder, que me equivoco de botón.
CSS.
Vale.
A ver, ahora.
Bueno, más o menos.
¡Eh!
¿Qué pasa?
¿Qué pasa?
Ya está.
Ya hemos hecho nuestro code pen.
¿Cuál es el problema que creo que podemos tener?
¿Cuál es el problema que creo que podemos tener?
El problema que creo que puede tener esto es que si yo pongo, por ejemplo, h3 y pongo hola con comillas.
Ah, no, se lo ha tragado.
Pensaba que las comillas a lo mejor.
¿No es?
Sí, sí, sí, sí, sí, sí.
H4.
Ah, pues sí, sí, sí, sí, sí.
Ah, se lo ha comido con patadas fritas.
A ver, ¿cómo está poniendo esto?
Pensaba que la comilla a lo mejor le iba a dar algún problemilla, pero ya veo que no.
Perfecto.
Es como este atributo.
Supongo que cuando hace el set attribute lo transforma y no le da ningún problema.
Pero, claro que se podría hacer un ataque XSS, claro que sí.
Pensad que aquí, o sea, se puede ejecutar.
Aquí podéis poner script y poner alert hola.
¿Ves?
Clang.
Pero, a ver, entiendo que esto ocurre exactamente lo mismo aquí.
O sea, yo si pongo aquí alert hola, esto pues hará alert hola, ¿no?
¿O no?
Bueno, ya veo que no.
Pero es que CodePen funciona tan mal que es que ni siquiera me queda claro si está funcionando o no está funcionando.
Pero yo creo que sí, que esto, pues claro que hace...
A ver, la gracia de esto es justamente que...
Oye, no sé por qué no funciona.
No sé si es que los alerts los tienen quitados.
Hola.
¿Qué es lo que tiene CodePen?
Mira, ¿ves?
Hola.
En LiveWave, que es exactamente lo mismo.
A ver, tened en cuenta...
Mira, ahí el prompt.
Tened en cuenta que si estamos creando un editor en el que se puede escribir HTML y JavaScript que se tiene que ejecutar,
es normal.
¿Sabes?
O sea, no es que sea un fallo de seguridad, es que está pensado para eso.
¿Qué cosas podemos hacer para evitar esto?
Pero es que, a ver, yo creo que no hay ningún...
El problema...
A ver, esto va a ser todo estático, todo esto se va a quedar aquí, no va a haber ningún problema, ¿vale?
Entonces, el problema sería que fuese en nuestra página web, que va a la base de datos y se pudiese inyectar código y eso lo cargase algún usuario sin saberlo.
Pero yo creo que aquí, no sé, no le veo ninguna historia, creo yo.
Creo yo, vamos.
Vale, ahora que ya tenemos más o menos esto...
De hecho, a ver, voy a poner aquí H1 Hola Mundo, ¿vale?
Aquí en el CSS vamos a poner que los H1 son de color rojo.
Hostia, fíjate.
¿Qué parece, eh?
¿Estamos haciendo el code P o no lo estamos haciendo?
Lo estamos haciendo.
Estamos haciendo el code P.
Martian Cosmonaut, gracias por suscribirte con Prime, amigo.
Y aquí...
Bueno, y este, el alert que hemos visto antes.
Perfecto.
O sea, ¿está funcionando esto?
Ya está, terminado.
Bueno, chicos, gracias por pasarnos por mi stream.
Ya sabéis, no olvidéis que os podéis suscribir con Prime.
Y nos vemos.
Nah, hombre, seguimos, seguimos.
Seguimos.
Vamos a seguir un poquito.
Un poquito.
Venga, vamos a poner aquí un section.
¿Cómo puedo hacer esto?
Porque hay como tres opciones.
O sea, claro, el layout...
Esto me gusta mucho de LiveWave.
Que esto lo deberíamos hacer.
¿Ves que aquí tiene como cuatro layouts?
Esto está súper chulo.
Esto está súper chulo.
Esto de poder elegir layout.
Lo que no me gusta es que esté todo visible.
Y tal, ¿no?
Yo lo que quiero es que no se pueda ver.
Es que no se pueda ver, ¿sabes?
O sea...
Vale.
Le vamos a llamar.
Tendríamos.
Section.
Esto sería un editor, otro editor, otro editor y el iframe.
Esto lo vamos a dejar aquí.
Este codilink sobra.
Es que ni siquiera quiero que salga ni siquiera.
Sí, muy bien el de SRCDoc que lo dijo Sergio Serrano.
Es que está en todas Sergio Serrano, el crack este.
Yo no lo conocía, ¿eh?
SRCDoc.
Es la primera vez que lo he visto en mi vida.
Así que yo he pensado en lo de Base64 y de hecho lo utilizaremos.
Lo de Base64 seguro.
Porque tengo una idea que os va a encantar.
Que eso yo es lo que echo de menos de todas estas mierdas de editores que...
A ver, tengo que reconocer que lo he visto en algún lado alguna vez.
Pero creo que es lo que va a marcar la diferencia.
De verdad.
Es que creo que tiene potencial esta idea.
Tiene potencial.
Bueno, vamos a ver.
Vamos a ver una cosa.
Ya tengo este estilo, ¿vale?
Entonces, nos vamos aquí al codilink.
Vamos a ver un poco...
Porque lo importante es que el body debería ser 100% siempre.
O sea, esto es 100%, 100%, margin 0, padding 0.
¿Vale?
¿Y por qué?
¿Qué?
¿Qué le ha pasado?
¿Qué pasa aquí?
Ah, y es que la app esta tiene margen ahí porque le da la gana.
Vale, vale.
Es que ya tenía estilo.
Ya decía yo.
Digo, ¿y estos estilos de dónde aparecen?
Está flipando.
Vale.
Body.
Créame...
Vamos a decirle aquí a Copilot.
Créame el body perfecto para mi nuevo codepen.
¿Vale?
¿O qué?
Puede ser.
Me fío.
No lo sé.
Suena un poco raro.
¿Vale?
Si tú lo dices...
Me fío.
Para el build layout se puede usar grid con áreas.
Sí, estoy de acuerdo.
Grid con áreas.
Vale.
Veo que, por un lado...
Me gusta mucho la idea de LiveWave.
¿Veis que sale el iconito?
Eso me gusta mucho.
Eso lo vamos a copiar.
Que nos va a hacer hasta daño el que nos lo copiemos.
Pero bueno.
Por ahora vamos a quitar los labels estos.
Que ya sabemos que esto funciona.
Vale.
Bueno, amigos.
Ahora es el momento de jugar con Display Grid.
Ese momento en el que uno no se entera de lo que está haciendo.
Pero que en algún momento algo funcionará.
Columns.
Fr, fr.
¿Vale?
¿Ok?
Template rows.
Fr, fr.
¿Vale?
Más o menos.
¿Vale?
¿Vale?
¿Por qué no me ha hecho...?
Vale.
En el body vamos a poner 100%.
No.
Viewport height.
Y de width, todo.
¿Vale?
Esto seguro.
Y en el app.
No, en section.
Este.
Por ahora vamos a estilar como a saco ahí con el elemento.
Ya nos preocuparemos después.
¿Vale?
Por ahora voy a hacer el cuadrado.
¿Vale?
El que es una cuadrícula.
Que es básicamente el que tiene aquí.
¿Veis que es una cuadrícula?
Vamos a hacer este por ahora.
Y esto sí que tiene pinta de ser difícil.
Esto lo quiero hacer también.
Pero esto tiene pinta de ser chungo.
Me parece a mí.
Si alguien tiene alguna idea o tiene una librería que avise.
Que lo utilizaremos.
Vale.
Grid.
Template.
Columns.
1fr.
1fr.
Template rows.
1fr.
1fr.
Vale.
Vamos a ver cómo queda esto.
Pan.
Hmm.
Section style.
Bueno.
Vale.
Ya lo tenemos ahí dividido entre 4.
Vale.
Vamos a estilar el iframe este.
Que el pobre está un poco horrible.
Borde 0.
Muy bien.
Podemos poner por defecto que tenga el background en blanqueo.
Vale.
Esto para iframe.
Vale.
Ya tendríamos un poco esto.
Ya va pintando mejor.
Vamos a hacerlo del box sizing también antes de que se me olvide.
Box sizing border box.
Y esto era before y after.
Box sizing.
Inerit.
Vale.
Harrison Kano dice.
Por eso te decía la etiqueta frame.
Te permite de nativo hacer eso.
Pero dejo de ser pesado.
No eres pesado.
Y que igual tienes razón.
Si soy yo que soy un poco calzón.
Puede ser.
Bueno.
A ver.
Vamos a ver cómo lo hace esta gente.
A ver esta gente.
Esto que es un frame o un iframe.
Bueno.
Es un frame.
Y ya.
¿Ves?
Pero utiliza un iframe.
Es que lo del frame.
Es que no tengo claro que un frame nos pueda servir aquí.
No tengo claro.
Lo tengo en cuenta.
¿Vale?
Harrison.
De verdad.
Lo voy a tener en cuenta.
Por ahora vamos a dejarlo así.
El codilink.
Ya tenemos esto así.
Esto habría que continuar.
Los text areas.
Por ahora vamos a poner background.ff.
With border 0.
Vamos a ponerle un colorcito.
Un poquito.
Vamos a ponerlo así.
Por ahora.
Color.
Fff.
Font family.
Le vamos a poner.
Monospace.
Y el height al 100%.
¿Vale?
Oye.
Esto está empezando a pillar.
A tener buena pinta.
Esto empieza a pillar.
Un poquito de gustico.
No sé.
No sé.
Me está gustando.
Es que.
Me va a encantar esto.
Es que estoy cansado de hacer los vídeos y tener que editar cosas.
Y es que me pongo de los nervios y todo.
Me pongo de los nervios.
Tardo más en tunearme las cosillas que.
Vale.
Bueno.
Not bad.
Not bad.
Vale.
Lo que estoy pensando.
¿Qué hace el box sizing?
Pues mira.
A ver.
Puniker.
Tengo un vídeo en mi canal de YouTube.
Tengo un vídeo que.
Mira.
Tú pones mi vídeo.
Box sizing.
Y te lo explico en un minuto.
En un minuto te lo explico.
Lo cual es brutal.
Mira.
Un minuto.
En un minuto.
Hola.
Hoy os quiero hablar.
Esto soy yo.
Pero no te preocupes.
Que yo te lo explico.
El box sizing.
Es que el modelo de la caja en CSS.
Por defecto.
Tú cuando calculas el ancho y el alto de la caja.
Vale.
Lo que estás haciendo es decirle.
El ancho.
Pues el ancho es el client width.
O sea.
Lo que ocupa.
Más.
El padding.
Más.
El borde.
¿Cuál es el problema?
Bueno.
De hecho esto lo podemos ver súper fácil.
Con un ejemplo.
Mira.
Te puedo hacer.
Te voy a hacer un ejemplo.
Te voy a hacer un ejemplo.
Mira.
Te voy a hacer un ejemplo.
En nuestra nueva herramienta.
Ahora no sé cuál es cuál.
Pero.
Vamos a ponerlo un momento.
Playholder.
Playholder.
HTML.
Y ahora lo arreglaremos.
Te voy a hacer un ejemplo.
En nuestra nueva herramienta.
Fíjate.
Que te va a quedar.
Te va a quedar clarísimo.
Clarísimo.
Muy bien.
Vaya por Dios.
Que me he cargado algo.
¿Qué es lo que no he puesto aquí?
¿Qué es lo que no he puesto?
Un momento.
Ha habido.
Ah.
La app.
Tiene que ser.
100%.
Puede ser.
Y ya está.
No.
No.
Es el section.
Ah.
Aquí.
100%.
Pues nada.
Ahora sí.
Vale.
Bueno.
Mira.
¿Ves?
Ahí ya sale.
JS.
Bueno.
No se ve.
No se ve casi.
¿Vale?
Pero está ahí.
Está ahí.
Os lo prometo.
Mira.
Tú pones aquí.
Voy a hacer esto un poco más grande.
Porque si no.
Me vais a odiar.
Texaria.
Ay.
Texaria.
Yo también.
Phone size.
24 píxeles.
Para hacerlo grandecito.
Vale.
Vamos a tener aquí un div.
Vale.
No tiene guión.
El Texaria no tiene guión.
¿Qué guión?
¿Qué he hecho yo con el guión?
No sé.
¿A qué te refieres?
¿Qué he hecho ya?
Que me lo he liado.
Bueno.
El tema.
Oye.
Si esto lo cambias.
Ah.
Vale.
Pero lo otro sí que lo mueve.
Ostras.
Esto estaría de lujo.
A ver.
Esto tenemos que poner resize none.
Pero.
Hostia.
Me sorprende que lo otro sí que lo mueve.
Eso está súper genial.
¿Ves?
Que empuja lo otro.
Buah.
Hacer esto nativo sería la hostia.
También os digo.
Bueno.
Imagínate que tenemos un div.
¿Vale?
Tenemos un div.
Y yo aquí.
Pues pongo div.
Y le pongo que esto es el background.
Le vamos a poner rojo.
Y vamos a decirle que esto es de width.
Vamos a poner que es 200 píx.
Píxeles.
High son 200 píxeles.
¿Vale?
Si yo ahora miro este elemento.
Aquí.
Voy a inspeccionar.
Hostia.
Cuando esto se hace grande.
Ya no queda.
Oye.
Que raro.
Que me ha roto.
Bueno.
Claro.
Porque es que ha roto el textarea ese con el resize.
Ahora lo arreglo.
Si yo miro cuánto ocupa.
¿Vale?
¿Ves?
Me pongo aquí encima.
Y ves que me ha dicho 200.
Lo pone arriba.
No sé si se ve.
Si no lo puedes mirar aquí en computed.
¿Ves?
200.
200.
Si yo ahora le pongo aquí un padding.
Y le digo 20 píxeles.
¿Vale?
Y lo vuelvo a inspeccionar.
Pues ahora me dice que es 200 en lo de dentro.
Pero el padding es lo de fuera.
Y lo está contando aparte.
De hecho.
Si yo me pongo encima.
Igual no lo ves porque se ve muy chiquitito.
Pero ahora.
La caja.
Es de 240 por 240.
De hecho te puedes fijar así de rápido.
Mira.
¿Ves?
Que cuando pongo el padding.
Se hace más grande.
Esto es un rollazo.
¿Por qué?
Porque claro.
Si yo le digo que el ancho es de 200 píxeles.
¿Por qué tiene que hacer esto?
Pues espérate que todavía va peor.
Porque si pones borde.
Y le dices 20 píxeles.
Mira la caja.
Digo solid.
Mira.
¿Qué ha pasado con la caja?
¿Ves?
Lo quito.
Lo pongo.
Si le pongo rojo.
Pues bueno.
Se volverá hasta más grande.
Pues mira.
Fíjate.
¿Vale?
Está creciendo la caja.
Si ahora miramos cuánto ocupa la caja.
Pues resulta que la caja ocupa 280.
Si te pregunta de dónde salen los números.
Vale.
Pues son 200 de ancho.
200 de alto.
O sea 200.
Luego el padding.
Hemos puesto 20 píxeles.
Pero son 20 píxeles por cada uno de los lados.
Lo que significa que por un lado es 20.
Por otro lado es 20.
Ahí tienes 240.
Borde.
20 píxeles.
20 píxeles por todos los lados.
20 píxeles de un lado.
20 píxeles del otro.
Y ahí lo tienes.
¿Qué pasa?
Pues que esto te hace muy difícil trabajar con este elemento.
Porque aunque tú le has puesto que tiene que ocupar 200 píxeles.
Pues ya vemos que no ocupa 200.
Sino que ocupa 200.
Más 20.
Más 20.
Más 20.
Más 20.
Rollazo.
Así que con esto lo que puedes hacer.
Esto es normalmente porque por defecto CSS como cuenta el ancho que ocupa.
Es con el width, el padding y el border.
Pero puedes decirle, vale, box sizing y decirle border box.
Y ves, pum, de repente has visto que chiquiteta se ha hecho la caja.
¿Por qué?
Pues que ahora para calcular el ancho y el alto que tiene esta caja lo que hace es tener en cuenta que tú le has dicho son 200 píxeles.
Pero el padding y el borde no cuentan.
Sino que están incluidos en esos 200 píxeles.
De forma que siempre va a ocupar 200 píxeles.
¿Ves?
Ha hecho que el width y el height de la caja sea 120 para acomodar los 20 de padding y los 20 de borde.
Así que indiferentemente de lo que tú vayas haciendo de padding o de borde.
¿Ves?
Yo le voy a poner aquí borde.
100 píxeles solid.
Y ahora le pongo que es negro.
Pues, bueno, claro.
Es que me he pasado.
Le voy a poner 10.
¿Vale?
Pues siempre ocupa lo mismo.
Siempre ocupa lo mismo.
Siempre ocupa lo mismo.
Así que ese es el tema.
Y esto, este, que sepas que es el primer ejercicio que explicamos con el nuevo editor.
Te has estrenado.
Espero que estés contento.
Qué bien.
Oye, pues ha funcionado bastante bien esto.
Vale.
Ahora que ya teníamos esto.
Aquí le vamos a poner resize none.
Y os voy a explicar la idea, la idea que tengo.
Y por la que creo que la voy a utilizar mucho.
Porque cuál es el problema que yo tengo con code pen y todas estas cosas.
¿Vale?
Para mí el problema que tengo con live wave esta, por ejemplo.
Que para guardarlo me lo guarda en la nube.
Yo tengo que estar registrado.
Es un rollazo.
Este editor es que me pone...
El margin no está incluido en ninguno de los dos.
El margin no está en ninguno de los dos.
Entonces, el tema.
El compartir un pen es muy complicado.
¿Veis?
El code pen.
Yo creo aquí uno.
Le doy a save y vale.
Me guarda.
Me crea un hash.
Eso está bien.
Pero luego el...
Es como que es un poco ortopédico.
Pues fíjate la idea que...
Lo que yo quiero hacer.
Que no sé si podré.
Pero mi idea...
No sé si ponerme primero con los estilos o con esto.
No sé a qué darle primero.
No sé qué queréis que hagamos primero.
Pero mi idea sería...
Mira, me voy a copiar primero lo de poner aquí el icono.
Bueno, es que tengo muchas cosas que hacer.
A ver, decidme lo que hacemos.
Los estilos.
Vale, vamos a hacer los estilos.
A ver, de estilos, ahora mismo lo que podríamos hacer...
A ver, cuando estás aquí en uno o en otro...
Es que no sé.
No sé diferencias.
O sea, solo diferencias por dónde está este...
Dónde está el cursor.
Tampoco es que...
Es que haga nada de diferencia en que estás.
Este online a mí personalmente no me termina de gustar.
Seguramente lo deberíamos hacer de otra forma.
A ver, vamos a poner...
Text area...
Area...
Y vamos a ponerle el focus.
Use online 0.
¿Vale?
Ha pasado exactamente...
Totalmente de...
Ah, es que lo he puesto con 2.
Vale, ahora sí.
Vale.
Luego, también aquí tendríamos que ponerle un poco de padding.
Vamos a ponerle 24 píxeles.
Vamos a ponerle 24 píxeles.
Vale, un poco mejor.
Luego, necesitaríamos que esto tuviese separaciones.
¿No?
O sea, que el borde al menos...
En lugar de 0, vamos a poner 1, solid...
Y vamos a poner que sea...
Ta, ta, ta, ta...
Eh, eh, eh.
Hostia, un montón.
Claro, es que...
Podríamos poner 0, 0 y medio.
Ah, no.
No se lo cuela.
Pensaba que colaría.
No, no cuela.
¿Cómo podemos hacer esto?
¿Cómo lo hace esta gente?
¿Ves que lo hace súper finito?
Es que, de hecho, esto es lo que hacen.
¿Cómo harán esto?
Esto...
¿Cómo lo hacen?
¿Cómo hacen esto?
Esto tiene que ser...
Drag JavaScript Library.
Esto tiene que ser una librería.
Porque tiene pinta de ser...
Change Size.
Tiene pinta de ser...
Complejo, eh.
Ya os lo digo yo.
Ya os lo digo yo.
Eso de hacerlo en Resize.
Porque...
Div Resize Resize.
Resize Both.
Do you say can resize both the height?
Esto sirve así, tal cual.
A ver, a ver.
Esto no me lo creo.
Bueno, claro.
Pero esto ya hemos visto que no funciona.
Esto es lo mismo.
Y además es aquí.
Y ellos no lo tienen ahí.
Ellos lo tienen en...
No, no, no.
Esto caca.
No.
Eso no es.
A ver.
Tenemos dos problemas.
¿Tienes pensado...?
Sí, sí, sí, Joaquín.
Tengo pensado...
No solo que tenga colores.
Es que tengo pensado meter...
Monaco Editor, eh.
Box Shadow.
Muy bien, Eduardo, tío.
Muy bien.
Bien pensado, eh.
Bien pensado.
Box Shadow.
0, 0, 0, 1.
Vamos a hacer RGBA.
Y a esto le vamos a poner...
No, 255, 255, 255, 255.3.
Pero queda todavía demasiado...
Es que queda como demasiado.
No sé si le deberíamos poner...
Ahora no sé si está pintándome mi Box Shadow.
A ver, al menos más o menos se ve...
Ahora está mejor separado, ¿no?
Esto ya me gusta.
JavaScript Interact.
A ver esto.
Drag and drop.
No, esto caca.
No, caca, caca.
Esto no...
Si no, puedo mirar qué clase tiene esto.
Seguro que tiene una clase en concreto.
Disable Select.
No, Disable Select no.
Tip Tip Holder.
Es que estoy bastante seguro que estos...
Esta gente esto no habrá hecho, ¿no?
A ver, a lo mejor han hecho.
Mira, una iframe.
Esta gente utiliza el mismo iframe.
Widget Content Splitter Split Bar.
Vale, esta gente lo que está utilizando es...
Una barra ahí en medio.
Tal cual.
Vale, Splitter Split Bar.
Scroll Mode.
O sea, tiene los...
Los tiene puesto ahí a mano.
Panel Lested.
Split Container.
Split Container.
Resize.
Change.
Panel Resize.
JavaScript.
Sí.
Split Panel.
Panel.
Tiene pinta, ¿no?
Split Panel tiene pinta.
Mira, mira, mira.
Esto, esto, esto, esto, esto, esto, esto, esto, esto, esto, esto, esto lo que queremos.
Bueno, bueno, con JavaScript, vale.
Uh, Split JS.
Vale, vale.
Bazoo, ahí está.
A tope.
Yes.
Y cuál es la diferencia entre Split JS y Split Grid.
Pero esto es justamente lo que queremos, ¿eh?
Me gusta.
Lo que me gusta...
Ah, mira.
Buah, genial.
Mira, dos.
No me gusta mucho el diseño.
Pero es justo, justo lo que queremos.
Es justo lo que queremos, ¿eh?
Muy bien.
Muy bien.
¿Quién le ha pasado esto?
¿Quién le ha pasado?
Bazoo Baraz.
Muy bien, ¿eh?
Esto es justo lo que estábamos buscando.
Justo, justo lo que estábamos buscando.
Mira, es que te lo pone todo.
O sea, es que me encanta.
Me encanta, ¿eh?
Lo que no sé muy bien cuál es la diferencia entre Split JS y Split Grid.
O sea, entiendo que uno utiliza Grid, pero el otro entonces que...
Ah, utiliza Flex.
Hmm.
Interesante.
Bueno, vamos a utilizar el de Split Grid.
Y entiendo, además, que esto nos debería ayudar después a tener los diferentes layouts.
Por ahora vamos a tener este de 4, así.
Y ya está.
Split Grid.
Venga.
Vamos a intentar instalarlo así, a saco.
Nunca he hecho un proyecto con Vite Vanilla, pero algún día había que empezar, así que...
Vamos a ver si podemos importar aquí el Split Grid.
Ah, ya saco.
Vale, Split Grid.
Document Query Selector.
Guter Call 1.
Nos dice que tiene que ser así.
Lo vamos a ir aquí.
Vale.
Vamos a poner esto.
En este div esto, esto...
Hostia, qué raro.
Claro, como lo genera y tal, claro, es súper raro.
Pero ves que tiene aquí un div.
El Guter lo pone aquí.
El Guter básicamente en la barrita.
Y de otra barrita lo pone aquí.
Aquí hay dos elementos.
Es súper raro.
Pero bueno, si funciona, no tengo nada que decir.
Muchas gracias, ¿eh?
Muchas, muchas, muchas gracias.
Vamos a probar esto así.
Esto aquí.
Esto por aquí.
Este Section nos lo cargamos.
Ahora nos sobra uno, ¿no?
¿O no?
¿Cómo está esto?
Ahora.
Vale, vale.
Ahora sí lo veo claro.
No sobra nada aquí.
No sobra nada.
Query Selector, Guter.
A ver, esto lo vamos a poner con nuestro pedazo de jQuery de una línea.
JQuery de una línea.
Perfecto.
Ay, la leche.
Ah, no.
Sí, está bien.
Track 1, track 1.
Qué raro, ¿no?
O sea, es que solo necesita dos.
Vale, vale.
Es que esto es para los Guters, que son las líneas.
Ya está.
Con eso tiene suficiente.
Vale, vale.
Perfecto.
Vale.
Lo que me falta son los CSS.
Venga.
Vamos a poner con esto por aquí.
Y el grid, este Section Grid.
Esto lo quitamos.
Vamos a ponerlo aquí abajo.
Pero me parece, vamos a verlo, ¿eh?
Pero me parece a mí que todavía algo habría que hacer con esto.
Hostia.
No ha quedado muy bien, ¿eh?
No ha quedado muy bien.
No ha quedado eso muy bien.
¿Qué se me ha escapado?
¿Qué he hecho?
Tienes que guardar un Section para guardar tu CSS.
Tengo que guardar un Section para guardar mi CSS.
A ver, este Display Grid.
No sé, pero esto no es lo que esperaba, ¿sabes?
Este ha sido un momento de esos como lo ves en Aliexpress y cuando te llega, ¿eh?
A ver, esto sí que lo esperaba.
Vale.
Esto sí que lo esperaba.
Esto sí.
Pero luego...
Ah, es que el TextArea este...
Es que este DIT, que solo tiene 10...
Esto vale.
O sea, aquí el grid está hecho.
Bueno, se ve que tiene 100...
O sea, en el grid necesitamos poner este...
High 100%.
Ah, espérate que me esté funcionando esto.
Ah, sí, parece que sí.
O sea, esto sí que está importando el Split.
A ver.
Split.
Sí, sí, sí, sí.
Está ahí.
Split.
Funcionando perfectamente.
Vale.
Pues entonces, si no es esto, es verdad que este DIT como tal, a lo mejor...
No, pero yo quiero tener un DIT.
O sea, es que necesito el DIT.
DIT, el Guter, el DIT, otro DIT.
Esto lo he hecho bien, ¿no?
Pero ¿por qué me está ignorando?
Aquí tengo el grid.
Pero el cambio este me lo está poniendo ahí abajo.
Todo chungo.
Grid.
Guter call.
Guter call 1.
Guter call.
¿Ves?
Aquí le queda súper bonito y a mí fatal.
Ah, espérate.
Es que espérate una cosa.
Es que estos estilos, a mí una cosa que me extraña, ¿eh?
De estos estilos.
Split grid.
CSS.
Soporte CSS.
CSS.
CSS.
¿No se extraña que no tenga que cargar nada de CSS?
¿Qué es eso?
No, no estoy cargando, no estoy utilizando ningún bootstrap ni nada, ¿eh?
Display grid.
App.
No tiene nada.
De hecho, lo puedo sacar fuera, ¿eh?
Y me cargo el app.
Y veis, todavía.
El display grid está bien.
El problema es cuando entro en cada uno, este, por ejemplo, no está pillando todo el...
Es que pone 10x10 y me está poniendo aquí una cosa enana.
Enana.
Es súper, súper raro.
Pero el tema que me sorprende, ¿vale?
Tengo aquí los estilos.
Pero es como si no estuviese ejecutando o no estuviese haciendo bien gutter call 1.
Como si no estuviera haciendo el trabajo que tiene que hacer, realmente.
¿No?
Pone 0 devs.
Eso pone.
Pero ya está.
Ya veis que no...
A ver.
Guter call.
Grid column 1.
Split panel.
Con lo bonito que se ve aquí.
Que aquí se ve de lujo.
Yo creo que es que faltan...
No sé si la librería pone algún estilo por defecto.
A ver, vamos a ver si tiene aquí un CSS.
No, es que no tiene CSS.
O sea, está bien.
O sea, ya te está diciendo...
Este split es como que ya te dice, sí, sí.
Con esto es todo lo que necesitas hacer.
Le he dicho, dos rows.
Minim size.
Snap offset.
Drag interval.
Maximum size.
Infinito.
Esto tiene sentido.
A ver, vamos a refrescar esto.
¿Cuánto?
¿El text area?
¿Le tengo text area?
No, por el text area le tengo 100%, 100%, pero esto no debería ser un problema.
El iframe igual.
O sea, es que tiene sentido ese estilo.
Porque lo que queremos justamente es que ocupe el 100%.
Pero veis que me lo está dejando en la tercera parte.
Me lo está dejando...
Y vale, sí, lo puedo mover, pero esto no es lo que me habían prometido.
Lo que me habían prometido es que cada uno quedaría en su sitio.
Y lo que me está haciendo es que quede todo abajo a la derecha.
Es como en el cuarto.
Eso no tiene sentido.
No tiene sentido.
A ver, si no podemos intentarlo con el flex.
A ver.
Que además se ve un poquito más fácil.
Es que hay una cosa que...
A ver, yo quiero pensar...
Me gustaría poder editar esto.
De que estos dos...
Estos splits son dos cosas diferentes.
Y no...
Es como si lo dividido y lo vuelva a dividir.
Sí.
Es como si lo dividido y lo vuelva a dividir.
Punto grid.
Cutter call.
Cutter call.
El grid está bien.
Porque está bien.
O sea, el grid...
Tal y como lo veo aquí.
Se ve.
Porque mira.
Se ve perfectamente.
¿Veis que cuando me pongo encima...
Se ve el grid separado bien?
El app este no afecta para nada.
Porque mira.
Si lo saco y todo.
Y me cargo el app.
Sigue viéndose mal.
El body.
Le puedo quitar todos los estilos.
Le puedo quitar todos los estilos al body.
Pero es que tampoco.
¿Ves?
Tampoco.
El tema es que me está dejando...
El...
Todo me lo está dejando en el cuarto.
En el cuarto sitio.
Y eso es lo que me...
No me termina.
Vamos a hacer una cosa.
Voy a poner.
Uno.
Dos.
Es que...
Ah, estoy mirando.
Cuatro.
¿Ves?
Me los deja aquí.
Están ahí todos.
Estoy mirando.
Split cero.
Como, claro, no me queda clara el ejemplo.
Y aquí hay guter, no sé qué, no sé cuánto.
Dos columnas y dos no sé qué.
Yo entiendo que donde tiene que ir el contenido es aquí dentro, ¿no?
Te lo está renderizando muy chico.
El menos uno del grid raw.
¿Qué menos uno?
Y esto lo he copiado bien.
Column getters, gutters.
Sí, esto lo he copiado bien.
A ver, puedo dejarlo sin el...
Sin lo de jQuery.
A ver si es eso.
Que hace una magia.
No, está igual.
El menos uno del grid raw.
No, pero el estilo me lo he copiado.
O sea, esto...
Esto está...
Esto está...
Está bien.
Porque esto lo hace justamente para que este es esta columna.
Esta de aquí.
Guter call 1.
Vamos a ver.
Deja el textarea sin el dip con lo que contiene.
Sí, pero es que le pasa lo mismo.
O sea, si yo quito los textarea...
Mira, quito los textarea.
Y pongo un 2, 3, 4.
Me lo sigue poniendo aquí abajo.
¿Veis?
Luego, esto del grid lo hace bien.
Lo que es el grid lo está haciendo bien.
De hecho, si yo quito esto...
¿Ves?
Es que lo está haciendo...
Ojo, ojo con esto.
A ver un momento.
Split...
Si yo quito esto...
Es como que no lo está ejecutando, ¿eh?
Lo que estoy viendo yo aquí es como que este split...
Este no lo está ejecutando directamente.
No sé qué se supone que hace este split.
Con los options y tal.
Pero esto es el que...
Bueno, sí que lo está ejecutando, ¿no?
Porque cuando...
Si lo quito...
E intento hacer algo así...
Esto ya no...
Vale.
Sí lo está ejecutando.
Porque cuando lo hago, sí que lo muevo.
Vale, vale.
Bueno, lo estamos entendiendo al menos.
Lo estamos entendiendo.
Vale.
Un ejemplo.
Esto quiero yo.
Un ejemplo.
Menuda mierda de ejemplo.
A ver...
Split...
Grid...
Examples.
Igual es que estamos entendiendo mal dónde hay que meter el código, ¿no?
Split...
Mira, es que esto es lo que quiero.
Dame esto.
Dame eso.
Vamos a ver.
Display Grid.
Div.
Mira, HTML.
Si es que encima es justamente lo que quiero.
Es justo, justo lo que quiero.
Ni más ni menos, ¿eh?
Pero ves, esta persona los ha puesto al final.
O sea, este...
Lo ha puesto aquí.
Esto lo ha puesto aquí.
Bueno, que ya ha llamado horizontal guter o vertical guter.
Pues es que me lo copio, ¿eh?
Me lo copio.
O sea, es que es esto.
Es que es exactamente lo que yo quiero.
Dámelo.
Dámelo.
Vale.
Todavía no hemos copiado bien.
Vamos a ver.
Div.
HTML, CSS, no sé qué, no sé cuánto.
Es que encima, fíjate, el tío me chulea porque con uno solo lo hace todo.
O sea, ¿qué coño?
O sea, este CSS que me ha dado este no funciona para nada.
High.
Bueno, esto ya pinta mejor.
Un poco mejor.
Todavía no está bien del todo.
Pero sí, o sea, al final es todo esto del guter call y la madre que los trajo, ¿eh?
Y este horizontal guter y todo esto.
Este justo es el que necesitamos.
Pues mira, vamos a hacerlo así.
Porque tiene pinta de que ese funciona.
El ejemplo no sé en qué se han basado, si se han fumado algo.
Si es la competencia que se está haciendo pasar por ellos.
Vale.
Venga, venga, venga.
Pues ya está.
Ahora sí.
Yo creo que sí.
Yo creo que es la competencia que se está haciendo pasar.
¿Ves?
Y ahora le faltan los estilos que justamente le he quitado, que necesitamos.
El width 100%, el height 100%.
O sea, estoy flipando de que ejemplo no esté mal.
Pero bueno, lo importante es que ahora está bien.
Vamos a poner esto, que solo sea un pixel.
Y en lugar de ponerlo rojo, lo vamos a poner como...
Vamos a ponerlo blanco por ahora.
Para que...
Bueno, el blanco es demasiado.
Solid.
Borde.
Bueno, ya lo cambiaremos.
Vale.
Bueno.
Vale.
El tema es que ahora no funciona porque aquí en el guter call 1...
Vertical...
Vertical...
Creo que es así.
Horizontal.
Vale.
Está sudando de mí.
Pero esto ya tiene pinta de ser culpa mía.
Es que esto va así.
Copia y pega.
Pero no me lo está pillando.
Bueno, no me lo está pillando, pero igual es porque es muy pequeñito.
No me extrañaría que fuese en realidad el espacio que le he puesto, que es un pixel.
¿Ves?
Que es muy pequeñito un pixel.
Creo que un pixel es demasiado pequeño.
Y por eso, claro, aunque pase por ahí, no...
A ver ahora, con 2...
Joder.
Tampoco.
Súper raro, ¿no?
O sea, hay que ponerle bastante.
Porque cuando le pongo 100, sí que lo pilla.
¿Ves?
También veo...
Vale.
También veo que los estilos...
A lo mejor sí que lo pilla.
Solo que como no tiene aquí un cursor...
¿Cómo era el cursor?
Este sí que lo ponía por aquí.
Ponía cursor, cursor...
Igual es esto.
Igual es esto.
A ver.
Ahora con estos estilos...
No.
¿Qué va?
¿Qué va?
¿Qué va?
Que no, que no.
Que no lo pilla.
Es como que tengo que dar un montón de espacio...
Para que lo pueda pillar.
Hmm.
¿Ves?
Aquí le tengo que poner como...
En el grid...
Template rows.
Si le pongo 50...
25.
¿Ves?
Ahora sí que lo pilla.
¿Este qué es?
Este es el vertical.
¿Ves?
Esto sería...
Column resize.
Colt resize.
Vale.
Y en el grid le vamos a poner un poco más.
Porque es que...
Un pixel por ahora no está pillando.
Vamos a intentar ponerle 5.
Vale.
Vale.
Al menos ya más o menos lo tenemos...
Pero funciona bastante bien.
O sea, estoy sorprendido de lo bien que me funciona...
Y que además...
Yes, yes.
A ver.
Esto lo revisaremos porque me parece que esto se puede mejorar.
O sea, se ve demasiado tochite.
Se ve demasiado grande.
Hmm.
Es que además, lo que no me gusta es esto del borde.
Igual es que debería ser...
Background yellow.
Vamos a probar una cosa.
Porque si le ponen el borde, tiene un efecto un poco raro.
¿Ves?
Que tiene este efecto.
Aunque no se note, tiene un efecto un poco extraño.
Creo que queda mejor si le pones un fondo del mismo color y ya está.
Vamos a ponerle por ahora blanco y ya lo...
Ya lo supondremos diferente.
¿Te abre todavía?
A mí esto no me parece blanco.
Hostia, es que he puesto hide.
La madre que me parió.
La madre que me trajo.
Un hide blanco, por favor.
Ahora sí.
Vale, vale.
Vale, vale.
¡Ay!
Me falta el iframe, ¿eh?
Me falta el iframe.
Me falta el iframe.
Que le he quitado los estilos.
Que es súper raro lo que ha pasado, ¿eh?
Con esto del...
Es que ha sido un fail en toda regla de...
Sí, tú cópiate estos estilos.
Y era mentira totalmente.
Mentira podrida.
Bueno, vamos a copiarnos esto.
Que me gusta.
Esto no lo copiamos.
Venga.
HTML logo.
Mira, encima es un srfile, bla, bla, bla.
Esto está genial para ver si estás en HTML o sea.
Pues nos lo copiamos en un momento.
Vamos a abrir esto en una nueva pestaña.
Joder, vaya pedazo de...
Nueva pestaña.
Vamos a pillar los SVGs.
Ya que los tienen ahí también.
Luego igual le damos una vuelta y lo hacemos de otra forma.
Pero me parece que está bastante bien ya que aparezca.
Ah, este chiquitito, ¿eh?
O sea, porque CSS, ¿verdad?
¿Por qué CSS?
Claro, como CSS...
¿Para qué es el repeat?
Pues ahora lo veremos.
Ahora lo veremos para qué es el repeat.
Guardar como...
Guardar como...
Vamos a ver.
A ver ahora si soy capaz de encontrar mi...
Dev...
¿Cómo le llamamos a esto?
Codilink.
Developer Chrome.
Codi...
Joder.
Dev.
Es que esto se podría ordenar de otra forma, ¿no?
Vale, gracias.
Codilink.
Aquí lo tenemos.
Codilink.
Vamos a crear aquí una carpeta.
Le vamos a llamar...
Resources.
Resources.
CSS3.
Vamos a poner también JavaScript.
Y vamos a poner también HTML5.
Vamos a ver estos...
Estos resources.
A ver cómo están.
Vamos a...
SV...
Este.
Vamos a optimizarlos un poquito, ¿vale?
Sí, lo subiremos a Vercell.
Seguro.
Mira, para que ocupe la mitad.
¡Pum!
A tomar por saco.
A ver, HTML5.
Igual.
Lo pegamos aquí.
Paste.
Bueno.
Casi lo mismo, pero un poquito más.
Todo lo que...
Bueno, este sí que parece que está bastante bien, ¿eh?
Vale, vale, vale.
Bueno.
Creamos los logos con CSS.
¿Te imaginas?
Venga, que ya los tenemos.
Tenemos esta imagen por aquí.
Ahora sí que podríamos el textarea, que tiene IDE HTML5.
Tendríamos.
Js.
Lo que en el textarea se puede poner un...
Vamos a probarlo.
Background URL.
No sé si se puede...
A ver.
Vite.
Static Images.
JavaScript.
Vanilla.
No sé cómo hace esto.
No sé cómo...
Static Asset Handling.
Esto es lo que quiero.
Importando un Static Will Return...
Vale.
Vale.
O sea que...
Vale.
Le vamos a llamar Assets.
Que veo que es lo que le llama la gente.
Y en Assets, ahora sí que podemos hacer aquí, entonces...
Barra.
Assets.
Barra.
Y podemos utilizar aquí, por ejemplo, el JS.
Le ponemos el...
Vamos a dejarlo con el Repeat para que lo veáis.
Y...
Y en principio esto estaría, ¿no?
Vamos a ver cómo se ve esto.
Mira, qué bonito.
El fondo.
Te imaginas un editor que tenga el fondo así a saco.
JavaScript, JavaScript, JavaScript.
A tope.
Pues...
Pues no lo vamos a hacer así.
No Repeat.
¿Vale?
Lo ponemos así.
Ahora, deberíamos...
Background Size, me imagino.
Bueno.
Igual un poquito más grande.
Vamos a hacer que todos sean iguales.
Y el Background Position...
Esto...
No sé si se podían poner negativos.
No.
0, 0.
Será ahí, claro.
Pues, por ejemplo, 0, 100%.
A ver.
Bottom Right, ¿no?
Bottom Right.
De esto debería dejarlo aquí abajo a la derecha.
Lo que pasa es que cómo puedo hacer que...
¿Sabes?
O sea, no quiero Bottom Right.
Lo quiero un poquito...
Rollo...
95%.
Algo así, ¿no?
Ahora mejor.
Y...
A lo mejor 98%.
98%.
¿Y este por qué se lee?
Bueno, algo así está bien, ¿no?
Más o menos.
Ah, mira, calculando.
Cierto.
Muy bien.
69 Mr. Creeper.
Por eso estáis aquí.
Claro que sí.
Para echarme una manita.
Podría hacerlo con el Calc.
Venga, hagámoslo con el Calc.
Calc...
100% menos...
32 píxeles.
Aunque a ver, que si lo hacemos con tanto por ciento, tampoco pasa nada.
A ver...
A ver si esto funciona.
Sí.
Sí, sí, sí.
Vamos a ponerle 16...
16...
Vale.
Y el color...
Tiene que ser...
Esto sería la imagen.
Le vamos a poner un...
No repeat.
Background.
Se lo vamos a poner así.
Y ya está.
De esta forma, además...
Todo esto...
Esto puede estar aquí.
Esto puede estar aquí.
Esto lo vamos a poner como background color.
Esto fuera.
Esto...
Y esto también lo podemos poner en el otro.
Así solo cambiamos lo que es necesario.
Y ahora aquí tendríamos el HTML.
Si lo haces con solo el tanto por ciento, al cambiar de tamaño se descolocará.
Vale.
Y el CSS...
Vale.
Ha sudado.
No está funcionando.
Pensaba que esto iba a funcionar ya de una.
El de JavaScript ha funcionado de lujo.
Vale.
A ver que se me ha olvidado por aquí.
JS.
Es que esto es CSS3.
Y esto es HTML5.
Bueno.
Pues ya lo tenemos.
Ya lo tenemos.
Ahí está.
Ya tenemos al menos eso.
Ya empieza a ir pintando un poquito mejor.
Venga.
Vale.
Voy a hacer ahora lo que quería hacer.
La idea que tenía en mente de...
Oye.
Esto está de lujo, ¿eh?
O sea, es que voy a hacer todos mis vídeos ahora aquí.
Solo me falta el Monaco Editor y la idea que tenía súper chula de hacer lo del base 64.
Es más pequeño que el CSS.
Es verdad.
Es más pequeño.
No sé.
¿Qué podemos hacer?
Vamos a ver el HTML este.
Viewbox 512.
A ver si le bajamos...
Si hacemos el Viewbox un poco más pequeño...
No.
Sí.
Estaba funcionando.
Lo que pasa es que igual no lo cargamos.
Efectivamente.
Claro.
Es que esto...
Ya.
Molaría que fuese el mismo.
Pero ya lo buscaremos.
Ya está.
Vale.
Lo que quería hacer.
La idea que tenía...
Que es una putada.
Porque es que podría hablar...
Ah.
¿Cómo se llama?
A ver si lo sabéis.
A ver si los que estáis aquí lo sabéis.
¿Vale?
Amigos.
Oye.
Muchas gracias por vuestra ayuda.
Esto está quedando de lujo.
Estoy súper contento.
Lo que quiero hacer es que conforme voy escribiendo en los editores.
La URL va a cambiar.
Y lo que quiero es que la URL contenga el HTML, el CSS y el JavaScript.
En base 64.
Lo que quiero es que cualquier persona pueda acceder a la URL.
Es copiar y pegar sin ninguna base de datos ni nada.
Sino que la URL esté con todo el código que vamos generando.
Lo que quiero decir es que si yo voy poniendo aquí cosas, pues la URL irá cambiando.
¿Vale?
Esto con base 64.
Entonces, tengo algunas dudas.
Por ejemplo, how maximum size URL location.
Según esto, 2048.
2048 carácteres es bastante poco.
Pero yo no me lo creo.
Entonces, como no me lo creo, lo que podemos hacer es probarlo.
Save length.
Es que yo no me lo creo.
Yo creo que debe ser un montón.
Mira, un K.
Bueno, un K puede ser.
Chrome, 2 megas.
Firefox máximo unlimited.
80.000 carácteres en Safari.
Pues vamos a probar.
2048 en base 64.
2048 en base 64.
¿Qué quiere decir?
Siempre en tiempo real.
Sí, lo haremos en tiempo real.
La URL tiene límites.
Sí, pero bueno.
¿Por qué en un token?
No un token.
Vamos a crear un token.
O sea, lo que...
A ver, para que lo...
Para que entendamos.
¿Vale?
Para que...
A ver.
Base 64.
JavaScript native.
Es que no sé si tiene una...
Creo que sí que tiene una...
El bloat y el bloat este, ¿no?
Botao y esto.
El tt atop.
Yo creo que con esto lo podemos hacer.
Tenemos que utilizar el botao este.
Para hacer botao...
Vale.
La idea sería...
Cada vez que cambia y hacemos el update este, cuando ejecutamos el update, además de crear el HTML, aquí deberíamos tener...
Mira, de hecho aquí le vamos a pasar el HTML, JS y CSS.
Y esto me lo voy a traer para aquí, porque está útil.
Así lo recupero.
Muy bien.
Perfecto.
Con esto creo el HTML.
Pero vamos a crear aquí el botao este.
Lo vamos a hacer con un string, que bueno, claro, esta es otra, ¿no?
Bueno.
A ver.
Tiene sentido.
Lo puedo hacer tres veces.
Y ya está.
Vamos a hacerlo así.
Vamos a probarlo, yo que sé.
Igual me encuentro que no funciona.
Esto es la idea loca que tengo.
Que funcione o no, lo veremos ahora.
Por un lado tendríamos el HTML.
Por otro lado deberíamos tener el CSS.
Y por otro lado tenemos el JavaScript.
Lo separamos aquí con esto.
Y esto es lo que quiero que esté en la URL.
Claro.
El tema es cómo podemos actualizar la URL.
¿Cómo hacemos con un...?
A ver, donde tengo la documentación.
Aquí.
mtn change url.
Con el history push.
Tendríamos que hacer, pero eso, con un replace.
Coño, no sabía el nombre.
Con el replace.
No, pero no con este replace.
History replace.
Replace state.
Vale.
Replace state.
Push state.
Lo que quiero es que vaya cambiando la URL, pero no que navegue a ningún sitio.
¿Vale?
¿Qué hace el batao?
El batao lo que hace es convertir el string en base 64, que debería funcionar bien.
Luego tienes otro método que es atop, que justamente hace lo contrario.
Que descodifica una cadena de datos que ha sido codificada utilizando la codificación en base 64.
El problema es que esa URL la copias y se la pegas a alguien y la petas el chat con el pedazo de URL que tiene.
Pero es que ahí es donde está el doble truco, Alex.
Porque solo os estoy explicando la mitad del truco.
El tema de ese truco es que, es verdad, la URL quedará demasiado larga para copiarla en cualquier sitio.
Pero lo que puedes hacer es pasarla por el midulink, ¿no?
Ya hicimos un servicio de acortador de URL, si os acordáis.
Pues la puedo pasar por el midulink y entonces lo que conseguimos es una URL acortada.
Y entonces, ya está.
Ya lo tendríamos.
Pero bueno, primero vamos a generar la URL, vamos a ver que somos capaces, que todo funciona bien.
Y luego ya no nos preocuparemos de...
Vamos con un problema a la vez.
Un problema a la vez.
Vale.
Vamos con el replaceState a ver si funciona.
O sea, yo lo que quiero es history.replaceState.
En el replaceState creo que esto...
El primero es data, que es nada...
Joder.
Fijaos el copilot.
Fijaos, ¿eh?
Como se lo huele ya y todo, más o menos.
Y aquí se supone que debería crear, pues algo...
A ver.
Hashed code.
Y el hashed code, esto lo vamos a poner aquí...
Bueno, de hecho lo podríamos poner de una, ¿no?
O sea, así y así.
Hashed code.
A ver, primero vamos a ver si esto funciona.
Luego ya nos preocupamos.
¿Qué ha pasado?
¿Qué ha pasado con mis estilos súper chulos?
¿Qué he hecho?
Vale, que ya había declarado el HTML.
Si es que también me ayudaría un linter, ¿eh?
Base64.
Base64.
Cuatreas la concatenación de los bases 64.
Cuatreados, HTML, CSS, JS y así quizás no hace falta cortador.
El problema, fijaos, ¿eh?
El problema es que es todo lo contrario.
Cada vez que haces un Base64 queda más largo.
Es un poco raro.
Entonces, aplícale el Midulink automáticamente y ofrécele la URL directamente a cortada.
No.
No, porque entonces empezaría a generar constantemente.
O sea, lo que vamos a hacer es...
La URL irá cambiando y sí, habrá un botón aquí que lo que hará es que cuando le dé, te dé la URL a cortada.
Pero esto lo va a hacer solo cuando le da el botón, no mientras va cambiando.
No tiene mucho sentido, ¿sabes?
Porque si no, sería una locura por mi parte.
Me van a reventar el servidor en nadie menos.
O sea, solo cuando realmente esté seguro que lo quiere compartir, entonces lo tendrá.
JSON.
Esto por aquí.
Vale.
Y aquí es donde está el HTML este.
HTML, HTML.
Vale.
HTML for preview.
Lo llamamos así.
Este lo dejamos por aquí.
Guardamos los cambios.
History.
Esto pinto, pinto, history.
Bueno.
Vale.
H1.
Hola, mundo.
Bueno, bueno.
O sea, funciona, funciona.
No sé si lo estáis viendo, pero aquí conforme estoy escribiendo, bueno, mientras estoy escribiendo, pues ahí está la deep, deep.
Y aquí con los estilos.
A ver aquí, por ejemplo, h1 color red.
Vale.
Vale, yo tengo esto.
Yo tengo esto.
Que, a ver, se le podrían dar unas cuantas vueltas, ¿eh?
Eh, ¿pondrás un cuadrito para un mensaje de consola?
Vale.
Le daremos.
A ver, si este proyecto pinta bien, que ya os digo yo que lo vamos a hacer que pinte bien,
lo vamos a poner de código abierto y utilizaremos projects.
Me dio una idea para hacer una extensión para Chrome.
Ah, pues qué buena idea, Adrián.
Me parece súper bien, ¿eh?
Si vas a poner un botón, ¿para qué lo pasas por el link?
Si vas a poner un botón.
A ver, porque una cosa es este enlace, que es tener, bueno, por tener la URL, porque esto lo que quiero es que si alguien lo copia y lo pega, funcione.
O sea, yo lo que quiero es que funcione la URL.
La URL va a ser como el estado donde vas a guardar y tal.
Pero otra cosa es cuando quieras compartir en una red social o lo que sea, ¿vale?
Pero yo creo que la URL funcione.
Es como que tiene que funcionar.
Porque, claro, me dices, es que si lo vas a pasar por un...
Me dices, si lo vas a pasar por un shorter URL, ¿para qué lo haces?
Pero es que el shorter URL, ¿no?
El link acortado tiene que apuntar algún enlace.
¿Entiendes?
Es el tema.
Por lo tanto, necesito que esta URL funcione.
Porque la URL acortada va a esta URL más larga.
Vale.
Entonces, vale, ya está haciendo esto.
El tema es cuando yo entro, que esto tiene que hacer algo.
Cuando yo entro, ¿qué deberíamos hacer?
Ahora, deberíamos leer la URL.
Window.location.pathname.
Esto lo debería hacer desde el principio, ¿vale?
Y debería añadirle el value a cada uno de ellos.
Vamos a poner aquí un...
Initialize.
O Init.
Init.
Vale.
Si la URL se comparte al darle al botón, ¿tendría acaso mostrar el cambio?
Cada vez que hagas el cambio, tendrías que volver a...
Luego lo integramos con Veneade, Filtro y Blue, ya.
Ahí está.
Cada vez que hagas un cambio, tendrías que generar un nuevo botón.
O sea, digamos que las URLs que generas son únicas.
Y va a ser la gracia.
Es verdad que es totalmente diferente a como funciona hasta ahora, ¿no?
Que la gente hace una URL, la deja una vez y ahí va guardando.
Y esto es diferente.
Conforme tú vas cambiando...
A ver, lo que puedes hacer si haces un short URL, podría ser poder modificar la URL acortada.
Eso sí que se podría hacer.
Pathname.windowlocation.
Porque, a ver, el windowlocation este...
Ya tampoco utilizo el windowlocation.
Windowlocation.pathname.
Vale, ya lo tenemos ahí.
Esto se supone...
Pero aquí no veo yo que me ha puesto...
Esta barrita.
¿Verdad que no?
O sea, yo cuando he generado esto, este hashet code...
Ah, porque el hash...
Esa barra a lo mejor tiene...
A lo mejor es esta.
Tiene pinta...
Tiene pinta que es este símbolo.
Vale.
Vale.
Claro.
Claro.
Entonces...
Tendríamos que buscar con el C.
Pero ¿cuántos son?
Según esto, son solo uno.
A ver.
Con la consola.
Si hacemos un console...
Console...
Aquí.
Encode.jury.component.
De esto...
Es esto.
Pero qué casualidad que me salen con los iguales.
Porque es que el base64 deberá acabar con un igual.
Seguramente.
O sea, que lo que tengo que buscar es esto.
¿Vale?
Vale.
Entonces, con el pathname.
Pathname.
Punto.
Split.
Y lo que hacemos es splitear por esto.
Porque yo entiendo que este pathname...
Bueno, sí.
Me lo va a devolver.
Y ahora que spliteamos aquí, lo que tendríamos en el primero sería el HTML, CSS y el JavaScript.
Y ahora que tenemos esto, pues HTML.value es el HTML, el JS, CSS.value.
CSS y CSS.
Esto cuando inicializamos.
Y una vez que cambiamos esto, también deberíamos renderizar.
¿No?
Que esto es un poco lo que hacemos aquí.
En lugar de hashear, tendríamos que crear esto también de aquí.
¿Vale?
Por ahora lo voy a dejar así, más o menos, para function update, init, createHTML.
Voy a poner aquí el init.
Vamos a ver qué problemas nos da esto, si es que nos da alguno.
¡Hostia!
Claro, claro.
Espérate.
Que entonces, ahora cuando tenemos esto a top, es lo que tenemos que hacer, ¿no?
Tenemos que decodificar lo que tenemos en la URL.
It's not currently updated.
No le ha gustado, ¿eh?
Vamos a poner aquí HTML, CSS, JS.
Vamos a ver qué nos devuelve esto.
Ah, coño.
Vale, vale.
Es que justamente, además del HTML, HTML to normalize, porque ese HTML hay que quitarle.
A ver, que también lo podría quitar desde el principio.
Es que yo también.
Yo también.
Slice.
Estoy pensando cómo quitar.
Quizás queda más claro declarar una variable splitter.
Y cuando haga hacer split, el encode URI de splitter.
Me parece buena idea.
¿Hace alguna prueba de rendimiento pegando HTML de Amazon, por ejemplo?
Vale.
Ahora lo haremos.
Primero hacemos que funcione y luego ya.
A ver, tampoco es que esté pensado para poner, o sea, es para hacer grandes desarrollos, ¿sabes?
Está más pensado para hacer cosas pequeñas, como code pen, no sé.
Y ya está.
Bueno, un replace no podemos hacer.
Remove first letter string.
Creo que es slice, ¿no?
Slice.
Ah, o substring, coño.
Yo también.
Yo también.
Ah, sí.
Slice sí que lo hace.
Claro.
Slice 1.
Slice 1.
Esto.
Ahí está.
Hay code pen muy tochos.
Sobre todo si hace dibujo.
Bueno, pues no se podrán hacer con muy tochas.
Lo probaremos igual, ¿eh?
Ojo.
Mira.
Ya me está pillando.
Lo que no me está pillando es esto.
No sé qué es esto.
Pero ya me...
Mira.
Estoy entrando esta URL y esta URL me está pintando correctamente mi HTML y mi CSS.
Lo que HTML for preview, lo que no me está pintando bien.
No sé por qué este...
No sé, no sé qué está haciendo aquí.
¿Por qué está pintando PGR?
A ver.
Vamos a ver una cosa.
HTML.
Vale.
Luego.
En el HTML, en el value...
¿Ves?
De hecho, ahora sí que está bien.
Cuando entro es que está mal.
Ay.
Claro, claro, claro.
No, no.
Es que está...
Claro, es normal que esté mal.
Está bien, está bien.
From...
Vale, vale, vale.
Coded...
¿Cómo le damos a esto?
Vale.
Lo que está pasando...
Claro, es que estoy utilizando mal las variables.
Pero ya está.
¡Wow!
Es que ya está funcionando esto.
¡Dios mío!
Está funcionando.
¿Cómo le llamamos a esto?
Coded...
Uf, joder.
Con el naming.
Row HTML.
Row CSS.
Row JS.
Row HTML.
Y esto es lo que vamos a transformar con el HTML.
Que le vamos a poner el Windows Atop, este.
Con el Row HTML.
Ahora, el CSS.
Window Atop.
CSS.
Row CSS.
Y el JS.
Window Atop.
Row JS.
Vale.
Y ahora esto.
Esto...
Se lo vamos a...
Esto ahora sí.
Esto es HTML.
Esto es CSS.
Esto es JS.
Nintendo 64.
Lo he pensado, ¿eh?
He pensado poner HTML 64.
Pero he pensado en Nintendo 64.
It's a me, Mario.
Vale.
HTML.
CSS.
JS.
Os he contado alguna vez...
Os voy a contar una anécdota.
Os voy a contar una anécdota, amigos míos.
¿Sabéis quién hace la voz de Super Mario Bros?
Se llama Charles Martinet.
Es un actor de doblaje.
Que es famoso porque hace la voz de Mario, de Yoshi, de Wario, de unos cuantos.
Pues...
Pues me hice una foto con él y lo conocí en persona hace muchos años en Alemania.
Cuando yo tenía un blog de videojuegos.
Tengo que tener por ahí el vídeo.
Donde dice...
Un saludo para mis amigos de Wild Games.
Y eso.
Que lo conocí.
Súper majo.
Más majo.
Se parece a Mario.
Pero con pelo blanco en todos lados.
Pero brutal.
Brutal.
Y tengo que tener el vídeo por ahí.
Si lo encuentro algún día, os lo enseño.
Vale.
Ya tenemos HTML.
No sé cuánto.
Nos ponemos aquí.
Y amigos míos.
Esto está funcionando.
Esto está funcionando.
Mira.
Esto está funcionando.
Y yo si copio y pego esto.
Me está funcionando esto correctamente.
No me digáis que no está chulísimo esto.
Porque vamos.
O sea.
Vale.
Aquí vamos a hacer un console.log.
Document.
Query.
Selector.
Del h1.
A ver si esto funciona.
Aunque esto debería estar dentro del console.log.
Unexpected token.
Missing argument.
Ah bueno.
Pero eso puede ser normal.
Claro.
Porque.
Vale.
Al principio es normal.
Pero ahora sí que funciona bien.
Ahora lo que podríamos entrar es en el iframe este.
Op.
Query selector h1.
Me está devolviendo null.
No está encontrando el elemento este.
Vale.
¿Por qué no está encontrando el elemento este?
Si miramos el main.js.
El script lo estamos cargando antes.
Muy mal.
Muy mal.
Hay que cargarlo después.
Ya está.
Ahí está.
Tiene acceso al html.
Buenísimo.
Buenísimo.
Vale.
Ya está.
Ya está.
O sea.
Mira.
Este console.log.
Esto está funcionando perfectamente.
¿Ves?
Está accediendo al h1 del iframe.
O sea.
Este javascript que vemos aquí.
Está ejecutando aquí esto.
O sea.
Estoy pensando en una cosa.
A ver.
¿Ahora que tenemos esto?
No.
No puede ser.
¿No?
O sea.
No puede tener mucho sentido lo que voy a decir.
No.
No puede.
Claro.
No puede.
No puede.
Porque tiene.
Porque tiene estas dependencias.
¿Qué estaba pensando?
Que podríamos ejecutar el mismo editor dentro del editor.
O sea.
Podríamos pillar todo esto.
Pues igual.
A ver.
Yo creo que no se puede.
Tendríamos que quitar este script.
Pero podríamos tener este HTML.
Todo este.
Lo del body.
Pillamos esto.
Lo ponemos aquí.
Esto es el editor.
¿Vale?
Ahora.
Pillamos los estilos.
Los estilos.
Sí que los podemos poner tal cual.
Hostia.
Qué bueno.
Qué bueno.
Bueno.
Y lo mejor de esto es que podríamos ejecutar esto aquí.
Esto aquí.
Bueno.
Esto ya.
Claro.
Me falta el JavaScript.
Espérate.
Espérate.
¿Por qué?
Si pillamos este JavaScript.
El problema de este JavaScript es el split este.
Vamos a ver.
Vamos a intentarlo.
¿Cómo podemos parchear esto?
A ver.
En el network.
Si pillamos el CSS.
¿Dónde está el CSS?
CSS este.
Vamos a copiarnos.
El link address.
Lo vamos a poner por aquí.
Link rel.
Ah, no, no.
El link.
No, claro.
Los estilos no hace falta.
Hostia, claro.
Fíjate cada vez que lo cambio.
Los estilos no hace falta.
Lo que me hace falta es este.
El split grid.
Entonces lo que voy a hacer es copiarme el link address de esto.
Hago un script SRC de esto.
No sé si esto va a funcionar.
Vale.
Ahora estoy cargando el split grid en el sitio que le corresponde.
Voy a copiarme todo esto.
Me lo voy a poner aquí.
Uy.
Casi.
Split.
No, esto tiene que funcionar.
Lo vamos a hacer funcionar.
Lo vamos a hacer funcionar.
Espérate.
¿Qué me está fallando?
Token export.
Claro, es que...
Ah, es porque el CDN...
No, es porque este split...
Mira, esto lo...
Claro, claro, claro.
Que esto funciona.
Sí, sí, sí, sí.
A ver.
Split grid.
CDN.
Esto lo cargamos de un CDN.
¿Dónde se carga un CDN?
¿Dónde está CDN?
Split grid.
Vamos a entrar aquí.
CDN.
Pero bueno, ¿cómo no lo tienen un CDN?
No me lo puedo creer.
Instalación.
Aquí.
Esto es lo que quiero.
Esto es lo que quiero.
Madre mía.
¿Quién me iba a decir?
Yo cuando me he levantado esta mañana, que iba a estar haciendo estas cosas.
Ay, qué lástima.
Enough input.
¿Por qué?
Porque este script está terminando antes.
¿Qué le pasa a esto?
Esto termina...
Aquí le pasa algo.
Este script, create HTML, no sé qué, no sé cuánto.
Bla, bla, bla.
Es que claro, este script...
¡Claro!
¡Hostia!
¡Qué bueno!
¡Qué bueno!
¡Ay, Dios mío!
¡Qué emoción!
Ya sé lo que pasa.
Es este script de aquí, que cuando intenta renderizar este script, no lo pilla.
Y está cerrando el script.
Madre mía, esto es una fricada.
Esto es una fricada.
Claro, lo que tendría que hacer es esto.
Y casi...
Yo creo que es este script.
O es el original.
¿Cuál de los dos es el que me está fallando?
Pero veis que...
A ver.
Ah, no.
Ahora, mira.
Fade to Excel on Windows.
The string to be the code is not currently encode.
Bueno, pero me voy acercando.
Yo creo que esto lo podemos lograr.
Escapar la comilla.
Solo confía...
Madre mía.
Bueno, lo hemos intentado.
Hemos estado bastante cerca.
Oye, sí que está funcionando.
Mira, mira, mira, mira.
Es que está funcionando.
O sea, este HT, esto, está funcionando.
No funciona bien.
No sé por qué.
Pero fíjate.
He fallado en ejecutar el ReplaceState de History.
Porque no puede crear.
Y es que está funcionando.
Lo que pasa es que no puede crear el ReplaceState.
Este ReplaceState.
Mira, si yo le quito aquí el ReplaceState...
¿Dónde está el ReplaceState?
Claro, es que en el iFrame no puede cambiar esto.
Pero si yo le quito el ReplaceState...
Aquí lo tenéis.
Aquí lo tenéis.
Mira.
Ahí lo tenéis.
Esto es un editor que está ejecutándose dentro de otro editor.
¿Veis?
Este es el editor.
Esta es la preview.
Y este es el otro editor.
Estoy poniendo aquí Hola Editor.
Y aquí tenéis el editor.
¡Qué bueno!
¡Qué bueno!
¡Qué bueno!
¡Qué bueno!
¡Dios!
¡Qué experimento más chulo!
¡Qué experimento más chulo!
Mira.
Y ahora sí podríamos volver a hacer otro dentro del otro editor.
Otro dentro de otro editor.
Otro editor dentro de otro editor.
Y así ad infinitum.
¡Qué chulo!
¡Qué chulo!
¡Qué bien!
Y además, lo mejor de esto...
Claro, cuando ahora copie la URL...
La URL, al copiarla, seguramente perderé el contenido de las previews.
Pero la primera sí que debería aparecer.
Y la transmisión se corta.
Claro, me imagino que esto debe estar flipando.
Debe estar flipando.
Ya está.
¿Qué está pasando en la Matrix?
Es que me he cargado la Matrix.
No hay chance que Guija Copilot haga esto.
Lo reventaste.
Ahora bien, ¿no?
Ahora funciona mejor el stream.
¿Sí?
¡Ay!
¡Qué bueno!
¡Qué bueno!
Bueno, parece que...
Bueno, este error que aparece aquí en realidad es culpa de este...
O sea, es culpa de que este no puede cambiar la URL.
Y ya está.
Pero bueno, quitamos esto, quitamos esto, quitamos esto.
Y ahora, pues, h1, la mundo...
Bueno, de hecho, alguien me había dicho...
A ver si puedes pegar tu blog.
Reto aceptado.
¡Uy!
No, esto no lo ha pillado, ¿no?
Claro, es que esto...
¡Hostia!
Ah, claro, porque al pegar, además no lo pilla.
No, sí.
¿Cuál es el string to becorded con...
Fuera del rango de latín 1?
Algo hay aquí que no le gusta.
De todo el estilo hay algo que no le gusta.
A ver, vamos a intentar otra cosa.
Claro, ¿cuál...?
Estaría bien que te dijese cuál es el que ha fallado, ¿no?
Del rango.
Ya, es que sí, le he pegado todo el...
Todo, todo, todo.
A ver.
Claro, el problema es que yo no tengo separados los estilos y todo esto.
A ver, si pongo el body...
Voy a intentar aquí...
Voy a pillar el body.
Body.
Copy.
Element.
¿Vale?
Vamos a intentar copiar este elemento aquí.
No, pero otra vez el mismo problema.
El batoa ese.
A ver, voy a intentar ir borrando.
No, pero no son las metas, ¿eh?
Es que a lo mejor...
Vete a saber si es el...
El SOEG...
Vete a saber.
Sabes, a lo mejor es que el SOEG tiene demasiada historia.
No.
Hay algún...
Ah, los emojis.
No me jodas que podrían ser los emojis.
Pues sí.
Los emojis.
Mira, fíjate.
Ahí está funcionando, ¿eh?
Son los emojis.
Hostia, ¿y cómo hacemos eso?
¿Cómo evitamos los emojis?
¿Sabes cómo hacemos que...?
O sea, entiendo entonces que si yo pongo H1 y yo pongo aquí un emoji...
Esto peta.
Sí.
Los emojis.
Emoji.
Problem...
A ver, no iba a ser todo tan fácil, ¿vale?
Va a ser 64 emojis.
Qué pena.
A ver, pues tendremos que buscar otra forma de codificar, ¿eh?
No pasa nada, realmente.
El tema de que no soporte los emojis, hombre, es un problema.
Pero esto lo único que significa es que tenemos que decodificar de otra forma.
¿Cómo se llama esto?
¿Turbo String?
¿Cómo era esto?
No, Turbo String no.
How to codify URL in JavaScript better than base 64.
Hay una forma...
No.
URL en code no.
No.
Datos URI no.
Hay una forma de codificar y que además comprime mejor.
Que ahora no me acuerdo cómo se llama.
¿JSON URL?
Nah.
No, ¿cómo se llama?
Los emojis ocupan más.
Ya.
Es por el tema de codificación, Midu.
Ya.
Pero hay una...
Hay un ofuscador, ¿no?
Es...
¿Cómo se...?
A ver.
Optimize, Sending, String, Backend, Compressor, JavaScript.
¿Cómo se llama esto?
Qué rabia que no me acuerdo.
No sé si alguien se acuerda.
Pero hay una tecnología...
Es que no sé por qué me sale Turbo String.
De verdad.
No sé por qué me sale.
Hombre, con Gzip igual podría ser una forma, ¿eh?
No, Glyphine no.
UTF-8 no.
Esa es la codificación.
Bueno, ya me saldrá.
Ya me saldrá.
Si no, pues otro día seguro me sale.
LZ-String.
Ojo.
LZ-String.
Este...
No es este, pero por aquí van los tiros, ¿eh?
Por aquí van los tiros.
Alternativas.
Este...
Por aquí van los tiros, ¿eh?
No es LZ-String.
Ya os lo digo.
Pero es algo similar.
IDM-Zip.
JS-Zip.
Compression, Pixelmatch.
Snappy.
No.
Brodly tampoco.
Ey, S. García.
Muchas gracias por tu suscripción.
Dos meses ya.
TurboBase.
Ahí.
DragonDev.
TurboBase.
Sí, sí.
Me suena un montón.
TurboBase.
Joder.
¿Qué estoy buscando?
¿Qué estoy mirando?
¿Qué es esto?
¿Qué es lo que me está buscando?
No, pero aquí no sale.
No.
Pero me suena un montón.
TurboBase.
TurboBase.
TurboPascal.
No, pero TurboParser.
Turbo.
String.
Compression.
Ah, pues no.
Es Turbo.
TurboBase 64.
Igual es este.
A ver.
No.
Esto es una implementación de la codificación de Base64.
Creo que esto no es.
TurboEncoder.
A ver.
TurboEncoder.
Bueno, lo encontraremos.
TurboEncoder.
JavaScript.
Qué rabia, ¿eh?
Porque mira que lo he usado yo esto.
Ah, mira este.
No, este no es.
Mira que lo he usado.
Mira que lo he usado.
Le preguntaré, porque tengo un colega que sé que lo ha usado hace poco.
Y seguro que él lo sabe.
Turbo AutoEncoder.
Ah, mira.
HootEncode.
Ya, pero esto es súper difícil.
Tendría que empezar a buscar en el string que todo está y tal.
Ah, mira.
JSB64 Library.
Hombre, esto tiene mejor pinta, ¿eh?
Ojo esto, ¿eh?
JSB64.
Es que ¿sabes lo que pasa?
Que la implementación del votado este igual no es la idónea.
Y si esto no lo hace, pues mira, mejor que mejor.
Pues igual con este ya funciona correctamente.
Mira, y lo codifica todo.
Así que...
Pues mira, vamos a utilizar este.
Vamos a utilizar esta librería.
Y perfecto, porque tiene más scriptmodules.
O sea, perfecto.
Muy bien.
Creo que eres Marcos.
Con ese nombre.
Creo yo.
Vale.
Oye, ¿qué he hecho aquí?
Vale.
He dejado esto aquí, esto acá.
Vamos a hacer el import de esta librería.
Base64.
Mat.
Vale, perdón.
Mat.
Claro, es que como pones mat.
Mat.
Vale.
Base64.
Perdón, perdón.
Base64.
Import.
Vale.
Base64.
From.
JS va a ser 64.
Vale.
Mat para los midudevs.
Ah, no.
Es que hay que importarlo así.
Bueno.
Code.
Vamos a traernos directamente.
Code.
Code.
Que yo entiendo que con esto...
Encode.
Code.
Betoa.
Ah, mira.
Entonces quitaremos esto.
Encode Uri.
Claro, igual necesitamos a Encode Uri, ¿no?
Ah, no.
Mira.
Encode y ya está.
Encode decode.
Perfecto.
Perfecto.
Pues eso es lo que queremos.
Encode decode.
Encode decode.
Betoa.
Betoa.
Encode.
Aquí vamos a poner el encode.
Encode.
Y aquí vamos a...
En el...
Decode.
Vale.
Hola, mundo.
H2.
Hola.
Lo que ahora el path name ya no pone la barra del principio, me parece.
¿Veis que ahora no pone...?
Ah, sí, sí, sí, sí.
No.
Claro, claro.
Se me la va a devolver igual.
Vale.
Pues parece que funciona bien.
Eh...
A ver.
Y...
Muy bien, Matt.
Ahí estás.
Mira, ya tenemos emojis.
Vale, pues ahora que tenemos emojis...
Pues aquí tenéis mi blog.
Mi blog.
Aquí tenéis mi blog.
A ver, sin imágenes, porque son relativas.
Pero aquí está mi blog funcionando.
Mira.
Este es mi blog.
Ya está.
Muy bien, Matt.
Muchísimas gracias.
Gracias por la ayuda, eh.
Ese es el espíritu.
Eh...
Claro, las imágenes no cargan.
Pero...
Espérate.
Estoy pensando una cosa.
Estoy pensando una cosa.
¿Por qué no funcionan las imágenes?
Las imágenes no funcionan porque están relativas.
Pero tengo JavaScript.
Podría aquí hacer un document query selector all de todas las imágenes.
Y para cada una de estas imágenes vamos a recuperar el source de image.getAttributeSource.
Y entonces si el source starts with HTTP, si no empieza por HTTP...
Bueno, y más fácil.
Si empieza por barra, entonces lo que vamos a hacer es imageSetAttributeSource.
Y lo que hacemos aquí es HTTPS midvDev barra source.
Uy, hubiera sido demasiado bonito.
Va a ser verdad, ¿verdad?
Estas no sé cuánto.
Uf, un montón de errores.
Oye, pero sí que...
Ah, no.
Pensaba que lo estaba intentando de verdad.
Pero no.
Eh...
Lo he cerrado todo bien, ¿no?
Aquí...
Image, selector, query, image...
Es que es difícil sin tener...
Sin tener highlighting es complicado.
¿Veis?
Se me ha olvidado aquí esto.
Bueno, no os preocupéis que eso lo vamos a arreglar.
Ja, ja, mira.
Ya está.
Ya está arreglado.
Muy bien, que os habéis fijado.
Ahí, Migue.
Pues mira, aquí tenéis mi blog.
¿Qué os parece?
Mi blog funcionando perfectamente en el editor.
Lo mejor de esto es que se supone que os podría pasar esta URL, ¿eh?
Venga, vamos a...
Vamos a deployarlo, va.
Vamos a deployarlo.
Es que estoy súper...
Joder, llevo dos horas.
Se me han pasado volando, ¿eh?
Pero volando.
No me puedo creer que llevo dos horas.
No me puedo creer, Dios.
No me puedo creer.
Bueno, espero que ya hayas estado tan entretenidos como yo.
Porque, madre mía, lo que acabamos de hacer.
Y es que me parece espectacular.
Me parece espectacular la que hemos montado aquí en un momento.
Inruko, muchas gracias por suscribirte con Prime.
Muchas, muchas gracias.
Hostia, qué grande.
Qué chulo.
Es brutal, ¿eh?
Es que me parece brutal.
A ver, me imagino que esto también se puede hacer aquí.
¿Veis?
O sea, no es que quiera quitarle mérito a lo que he hecho.
Pero que sí, que me imagino que es un poco el mismo principio.
Pero que me parece genial que hemos conseguido lo del split.
Que pensaba que me iba a costar mucho más.
Muchas gracias por toda vuestra ayuda.
Que eso es tremendo.
O sea, hemos desbloqueado ahí cosillas.
Vamos a deployarlo, va.
Vamos a desplegarlo.
Desplegarlo, perdón.
Para que nadie se me enfade.
Que si no...
Codilink.
Vale, no tengo todavía un repositorio.
Qué guay.
Qué chulo.
Qué chévere.
Vamos a crear el repo.
Codilink.
El Monaco Editor lo añadiremos.
Seguramente otro día.
No te voy a engañar.
Porque lo desplegamos.
Lo tenemos ahí.
Y luego ya...
Cámbiale el favicon.
¿Qué le pasa al favicon?
¿Qué he hecho en el favicon?
¿Fabicon?
¿Y qué le ponemos de favicon?
Bueno, no sé.
Dadme ideas.
¿Qué le ponemos de favicon?
Que no se me ocurre.
Es que este...
Bueno, le podemos poner el de HTML mismo, ¿no?
Por ahora.
Por ponerle algo.
Ya le cambiaremos.
Le pondremos otro.
Una cadena.
Exception de favicon.
El de midu.
¿Yo tengo favicon?
Tengo tantas abiertas ahora mismo.
Fabicon.
Venga, pues le pongo mi logo, va.
¿Mi logo?
¿Qué sé?
Podría poner svg también.
Yo también.
Midu dev.
Dev.
Covilink.
Assets.
Pium.
Vale.
Fabicon.
Assets.
.png.
Ah, no.
Ico.
Hostia, es que es un Ico.
La madre que me trajo.
¿Qué hago con un Icono?
¿Cuándo hice yo eso?
No sé ni cuándo he hecho yo eso.
Assets.
Esto con el barra.
Fabicon.
.png, ¿no?
Es .ico.
No sé por qué hago eso.
Claro, tengo otros que son el PNG que se verán mejor.
Claro.
Vale.
Bueno, por ahora le ponemos el del Icono y ya está.
Vale.
Vale.
El del Icono.
Vámonos a Github, Kodi Link, editor, create, HTML, CSS, JS, sandbox.
Ya se me ocurrirá algo mejor.
Creamos el repositorio.
Pium.
Vale.
Git branch main.
Creo que esto...
Ay, mierda.
Bueno, al principio no pasó nada.
Como todavía no he hecho el push.
No.
Qué pacho.
¿Qué le ha pasado?
¿Qué ha pachado?
Ahora.
Claro, es que si no hago el commit...
Es que pensaba que había hecho el commit y estaba alucinando.
Vale.
Ya haremos mejores commits.
Es malo que sea Ico.
Hombre, se puede hacer con PNG mejor y SVG.
El commit midu.
Sí, ya lo habéis visto.
First commit.
Nah, sí.
En este caso ya lo haremos mejor.
Le pondremos reglas, conventional chainlock y lo que sea.
Por ahora.
Vamos a hacerlo así.
Vale.
Ahora es que ya tenemos esto.
Ay, se me ha olvidado.
Bueno, no.
Bueno, total, como no había nada que...
Me encanta porque es totalmente estática la página.
Nos vamos a Vercell.
Vercell.
Venga.
Integrations.
No.
Domains.
Projects.
Eso.
Projects.
Nuevo proyecto.
Import git repository.
Codilink.
Vite.
Pero no es necesario que hace Vite.
Build.
Ah, hace un Vite build.
Claro, tiene que hacer un Vite build.
Obvio.
Vale.
Empie un run build.
Y el empie un run build nos lo deja en una carpeta dist.
Qué rápido Vite, joder.
Vale.
Dist.
Environment variables.
No hace falta.
Podemos hacer el deploy ya.
Sí, eh.
Tengo un montón de pestañas abiertas.
Es que...
A ver.
Vamos a ir quitando.
Fuera, fuera, fuera, fuera.
Bueno, nos...
A partir de ahora, todos los vídeos que veáis así de logo, los voy a hacer en el nuevo
editor.
En cuanto tenga Monaco Editor.
En cuanto lo tenga...
Que, por cierto, si no habéis visto el vídeo este, tenéis que verlo y darle like.
A tope, eh.
Y compartirlo.
Que hago el logo de TikTok en...
En ahí menos.
Y esto es lo siguiente que haremos.
Con todo lo...
Con themes.
Con soporte para los lenguajes.
O sea, que se verá...
Tiene autocompletado.
Que seguramente lo podremos activar y desactivar.
Y...
Y...
O sea, o sea, el Monaco Editor.
Vale.
Mira, ya está.
Congratulations.
Ahora, nos vamos al dashboard.
Codilink Deployment Settings.
Nos vamos a Domains.
Codilink Berser.
Vamos a poner Codi.link.
Add.
Add.
3W Codilink en redirecto Codilink.
Vale.
Lo añadimos.
Qué bien esto.
Hacía tiempo que no añadía un dominio.
Me parece súper bien.
Vale.
Y vamos a hacer esta configuración.
Nos vamos a PorkBand.
Y lo que hacemos es añadir este record.
Vamos aquí al SyncGin.
Login.
Codi.link.
Detalles.
Vale.
Bueno, no os preocupéis que esta es mi...
Bueno, el teléfono sí que es el mío.
La verdad.
Pero bueno, con lo que lo uso.
Pero la dirección no es mi casa, ¿eh?
Ya me lo han dicho más cuantas veces.
No es mi casa.
Es un coworking que hay en...
Que uso por ahí.
No os preocupéis.
No es mi casa.
No vivo...
No vivo ahí.
Pero...
Pero...
DNS Records.
Vale.
Aquí tenemos.
¿Veis?
Tenemos tipo A.
Pues este es el que vamos a añadir.
Tipo A.
Siempre tengo dudas con el aim.
O sea.
El value es el answer.
Y aquí...
Dice...
Dice...
Leave a blank o...
Use...
Asterisco to create a wheel card.
Yo creo que...
Cuando es esto...
Yo creo que es un asterisco.
Si no, lo puedo mirar.
Y si no, lo puedo...
Dejar...
Leave a blank to create a record for...
Bueno, me imagino que si lo dejo en blanco ya...
Vamos a tener suficiente.
No hace falta que le pongamos la arroba.
Porque total...
Ahora mismo es Codi.link.
Y ya está.
Vale.
Que responda con esto.
Esto y ya está.
Y ahora tenemos que añadir uno más.
Que es el de CNAME.
Para los tres W.
Que es este.
Vale.
CNAME.
Tres W.
Y CNAME.
Versed.
Tal.
Este...
CNAME.
Tres W.
CNAME.
Tres W.
Y responde con esto.
Oh.
Another record type.
Ah.
Fíjate.
Hostia.
Este alias.
Súper raro.
Entiendo que deberíamos quitar este.
Ah.
Pero no me deja...
No me deja ponerle aquí...
Lo que me dé la gana.
Bueno.
A ver.
No pasa nada.
O sea.
Ay.
Claro.
Ahora igual tarda un rato.
Pero la A sí que la he hecho.
¿No?
Sí.
Lo tenemos aquí bien.
No.
Lo que estamos haciendo es un...
Es más fácil.
Sí.
Lo que dice Sergio.
Lo más fácil es venirte aquí.
CNAME servers.
Y a tomar por saco.
De hecho.
Creo que es lo que voy a hacer.
Para que sea más fácil.
Aquí veis.
Authorative.
CNAME servers.
Estas son las DNS.
Que son las direcciones.
En las que al final va a entender.
Dónde tiene que ir.
Cuando tú vas al dominio.
¿Qué pasa?
Pues que los récords de las DNS.
Es mucho más rápido.
Y por lo tanto suele ser a veces.
A lo mejor.
Incluso puede ser que sea inmediato a veces.
Ahora veo que no está siendo inmediato.
Y lo otro puede tardar.
También puede ser inmediato.
Depende.
Pero tarda más.
Normalmente.
Entonces aquí tenemos los nombres de los servidores.
Que ahora mismo está resolviendo.
Que serían estos.
Y los que necesita.
Pues los podemos pillar.
Y ponerlos también.
Porque total.
¿Ves?
Estos son los que está utilizando.
Vamos a copiar estos.
Los vamos a poner aquí.
Y más fácil.
Así.
Resuelve directamente a versel.
Y ya está.
Pero los récords del DNS.
Suelen ser más rápidos.
En cambio.
Que se propague.
Los cambios de los servidores.
Suele ser un poco más lento.
Suele.
Igual nos sorprendemos.
Pero ¿veis?
Te dará.
Todavía.
Ojo.
¿Veis?
Ahora ya esto tiene mejor pinta.
Lo que el SSL.
Tengo que pedir el SSL.
Pero bueno.
Ya tenía mejor pinta.
Bueno.
Bueno.
Pues igual no tarda tanto.
A ver si tenemos suerte.
¿Hay HTTP?
Claro.
El problema es eso.
Que el HTTPS que te da uno y el que te da otro.
Ahora va a ser diferente.
Bueno.
Que dentro de un rato.
No sé cuándo.
Estará disponible.
Que no os preocupéis.
Que ya está arreglado.
Solo que.
Tarda un rato.
Yo creo que.
O unas horas.
O mañana.
Bueno.
Depende de donde estéis.
Igual si probáis.
Kodi Link.
Igual.
Os sorprende.
Y a vosotros sí que os funciona.
Y a mí no.
Que puede ser la caché.
De mi navegador.
Cristo Rey.
Que es la primera vez que participa en el chat.
La primera vez.
Cristo Rey.
Que es la primera vez que participa en el chat.
Está preocupado por mis hemorroides.
¿Vale?
O sea.
Dice.
A ver.
Yo voy a participar en el chat.
Pero la primera vez que voy a participar.
¿Cómo lo hago?
Pues le voy a preguntar por las hemorroides.
Que puede tener esta persona.
Cristo Rey.
Rey.
No te preocupes por mis hemorroides.
La verdad es que suelo andar bastante.
O sea.
Me gusta pasear.
Y alguna vez he hecho caminatas hasta 25 kilómetros.
Es verdad que estar sentado todos los días es un poco rollo.
Me gustaría ponerme una mesa de estas que te pones de pie.
Lo que pasa es que le tengo mucho cariño a esta mesa.
Pero.
Tengo que decir que he tenido mucha suerte en mi vida.
No he tenido hemorroides nunca en mi vida.
Ahora.
Eso sí.
Algún peo atravesado.
Que dices.
Hostia.
Este es un peo.
Sabes que tiene una fuerza.
Que si pilla a alguien por medio.
Lo revienta.
Lo parte por la mitad.
Eso alguna vez sí que me ha pasado.
Hemorroides no.
Por ahora.
Toquemos madera.
Pero peo asesino.
Sí, sí, sí.
Peo de...
Joder.
Un Rasengan.
Una onda vital.
Que...
Joder.
Flipas.
Pero bueno.
No vamos a hablar de peos ahora.
Pero gracias por preocuparte por mis hemorroides.
Bueno.
No está el Codilink.
Pero sí que debe estar la otra URL.
Ojo.
Ij.
Eso le tarda.
Eso está pensando.
Sí que debería estar la de Codil...
Bueno.
Vamos a verla.
Os la paso ahora.
Mientras.
General.
Pa, pa, pa.
Domains.
Ta, ta, ta.
Esta.
Esta sí que debe funcionar.
Codilink.
Vercell.
Refresca en Vercell.
Refrescamos.
Refresh.
Refresh.
Ojo.
Mira.
Esta.
Esta ya está.
¿Eh?
Porque dice Codilink.
Pero esta no.
Pero esta no.
Esta sí porque esta la he podido poner.
Pero la otra esta no porque cuando redirige...
Que por cierto es que no me gusta que redirija.
No.
O sea.
Yo lo que quiero...
Que mierda esta.
No.
A mí me gusta sin redirección.
Y que sea en tres W la que redirija aquí.
Vamos a dejarlo así.
Y esta es la que quiero que redirija Codilink.
Y quiero que sea permanente.
¿Vale?
Esto es lo que quiero.
Y esto es lo que debería añadir.
Pero bueno.
Total.
Que no.
Codi.link.
Bueno.
Todavía no funciona con eso.
No genero el Let's Sense.
Es que tarda un montón.
Tarda un montón.
No os preocupéis.
Que el dominio funcionará.
Por ahora os paso el dominio.
Que es como...
Tú buscas Codilink y ya te funciona.
¿Ves?
Hay gente que ya le funciona.
Es que es normal.
Que tarda.
Pero que lo iréis viendo que funciona.
Bueno.
En esta.
Aquí sí que debería funcionar.
Y aquí.
Si ahora ponemos.
Por ejemplo.
El HTML.
El HTML.
Joder.
¿Cuántos tengo aquí abiertos?
Esto.
Cerrar.
Cerrar.
Cerrar.
Cerrar.
Cerrar.
Cerrar.
Cerrar.
Este.
Cerrar.
Cerrar.
¿Cuántas cosas tengo aquí abiertas?
Esto es el que quería.
Si este.
Lo pongo aquí.
Lo pego.
Y lo pongo aquí.
Y lo pego.
Y este enlace.
Lo abro aquí.
Vaya.
Me la he cargado.
Me la he cargado.
No pilla.
No.
O sea.
La URL esta.
Me da la sensación.
Que no la pilla.
Es demasiado larga.
Pero bueno.
Es que es una página entera.
O sea.
Es que es normal.
Pero esto.
Lo vamos a trabajar.
Bueno.
Aparte de que podríamos hacerlo.
Al menos.
Con el tema este.
Bueno.
Pero igualmente.
Igual no funciona.
Sí.
Estoy pensando que igual no funciona.
Pero bueno.
Para lo que yo lo quiero.
Me va a servir.
¿Vale?
Que lo queremos para cosas más pequeñas.
No funciona lo de pegar la URL en otra pestaña.
O sea.
Ponemos aquí.
H1.
Hola mundo.
H1.
Vale.
Hostia.
Aquí encima.
No.
Ah.
Claro.
Pero esto es un tema más de Vercell.
Espérate.
Espérate.
Que esto es culpa de Vercell.
Como.
No.
A ver.
Esto lo tenemos que hacer en el Vercell config.
Sí.
No os preocupéis.
Que lo arreglamos ahora.
Lo arreglamos ahora.
Client.
CPA.
Vercell.
Vamos a ver aquí.
Vercell configuration.
SPA.
SPA.
Custom.
No.
Configuration.
Esto.
Rutas.
Upgrading.
Bueno.
Eso es lo que necesitamos.
Necesitamos aquí un archivo.
Vercell.json.
Y.
SPA.
Fallback.
Esto es lo que queremos.
Básicamente.
Es.
En las rutas.
Que.
Handle the file system.
Y.
Que.
Haga el fallback al index.html.
Aunque no sé si es el index.html.
Que debería ser.
Creo que sí.
Creo que sí.
Bueno.
Lo podemos probar.
Upgrade.
Bueno.
Add support.
To.
SPA.
Bueno.
To.
Any.
Route.
Vale.
Ya funciona.
Ya funciona.
Codilink.
A ver.
De verdad.
No.
A mí no me funciona.
Algún día.
Harías un curso.
De cómo.
Funciona realmente.
JavaScript.
De trasfondo.
Hostia.
Difícil.
De trasfondo.
No sé a qué te refieres.
Exactamente.
De trasfondo.
Bueno.
Ahora.
Probamos.
A ver un rato.
A ver si funciona.
El.
Vercell.json.
Ya está.
Puede ser.
Puede ser mi caché.
Pero puede ser la caché de los servidores de la DNS.
O sea.
Puede ser cualquier cosa.
Bueno.
De hecho.
Puedo probar en Firefox.
Kodi.link.
Mira.
Aquí funciona.
Aquí funciona.
Ciertamente.
Aquí.
Funciona.
Hola mundo.
Mira.
Ay.
Funciona.
Pero no me ha pillado el path.
O sea.
Ahora funciona.
Entrar con esta URL.
Pero no ha funcionado el recuperar el path.
El título es el mismo que la URL.
Sí.
Pero no funciona.
Ah.
Aquí sí que funciona.
O sea.
No funciona en Firefox.
En Firefox.
Vale.
Lo tenemos que mirar.
Pero veis.
Aquí no me funciona lo de recuperar el hola mundo y tal.
Lo miraremos.
T es undefined.
Hmm.
Tendré que mirar ahí porque no funciona.
Pero sí.
El dominio ya funciona también en Chrome.
Ya funciona en Chrome también.
Sí.
No.
Cuidado con las URLs.
O sea.
No abro vuestras URLs así a saco.
Ni en broma.
Vamos.
No me fío.
No me fío.
A ver.
Le voy a dar a una.
La voy a abrir sin cámara.
Va.
Ah.
Vale.
Esta está bien.
Mi dudez es el dios de la programación.
Qué bueno.
¿A ti te funciona en Firefox lo de copiar URL?
A ver.
Uy.
Perdón.
Que he cambiado.
Hostia.
No sé.
A mí no me ha funcionado.
Firefox.
Firefox.
¿A ti te funciona en Firefox?
Ah.
Sí.
Ahora sí que me funciona.
Hmm.
Sí.
Podéis poner miners de bitcoins y cosas así.
¿Cómo se llama el app launcher que usas en macos?
¿Este?
Spotlight.
En Chrome me da error 404.
Bueno.
Darle un tiempecito.
Que a lo mejor es un...
¿Ves?
O sea.
Es que a veces le cuesta.
Pero porque está la cacheada o lo que sea.
Pero funcionar ya se supone que funciona.
¿Eh?
Vale, amigos.
Pues muchas gracias por vuestra ayuda.
Espero que os haya gustado el proyecto.
Creo que ha estado muy chulo, muy interesante.
Hemos aprendido cosas nuevas.
Yo he aprendido un montón de cosas nuevas.
Gracias por vuestra ayuda.
Me ha gustado un montón.
Es que se me ha pasado el tiempo volando.
O sea.
Ha sido increíble.
Ha sido increíble.
Y a ver qué me pone.
Qué grande.
Nos falta hacerlo en Monaco Editor.
Lo haremos en un directo.
¿Vale?
Para que veamos cómo lo hacemos entre todos también.
A ver qué retos tenemos.
Y bueno.
A partir de ahí iremos mejorando.
Iremos haciendo iteraciones.
Pero ya lo podéis utilizar.
Compartirlo.
Haremos el tema este de que tenga la URL corta.
No sé.
Iré viendo.
Cambiarle el layout con un botón también.
Estoy pensando en tener accesos directos también.
¿Sabes?
Que eso también es algo muy interesante.
Pues que cuando le des a un botón aparezcan todos los accesos directos.
En lugar de poner botones en la UI.
Pues en lugar de poner botones.
Lo que me gustaría es que todo fuese con teclado.
¿Sabes?
Y poner accesos directos.
Eso es lo que le tengo muchas ganas.
De no poner nada en la UI.
Nada.
Intentar poner cero.
Lo mínimo.
Gracias.
Gracias.
Gracias.