Vamos a intentar hacer un proyecto que te puede servir a ti para dejarlo en el porfolio.
Yo lo voy a utilizar para libros, pero luego vamos a hacer una animación entre páginas.
Y ahora te enseñaré un poco la de mí.
Lo podéis hacer con React, lo podéis hacer con lo que queráis.
Yo voy a intentar hacerlo lo más fácil posible, ¿vale?
O sea, lo voy a hacer con Astro seguramente porque es que es lo mejor.
Esta es la página que ha hecho él.
Yo no la voy a hacer exactamente... A ver, la voy a hacer similar porque va a ser simple.
Pero, ¿dónde está la clave? ¿Dónde está la dificultad? ¿Dónde está lo interesante de esto?
Lo interesante está en... Y mira lo que hace.
¿Habéis visto esa animación? ¿Vale?
Lo que está ocurriendo aquí es que hay una animación a nivel de toda la página.
El tema es que cuando haces clic, hace esta animación entre una página y otra.
Sin JavaScript esto no funcionará, pero a ver, no pasa nada. Es que es normal.
Pero sí que va a funcionar la página, que eso es lo importante.
Si tú quitas JavaScript, no funcionará el diseñito ese, pero las páginas van a funcionar sin problema.
Lo interesante de esto justamente es que es retrocompatible.
Si no tiene soporte tu navegador, si está desactivado JavaScript, pues no se ve, ya está.
¿Veis esta animación? Pues eso es lo que vamos a hacer hoy.
Y vamos a empezar pues haciendo la página desde cero, mostrando los libros.
Vamos a hacer la navegación y vamos a hacer la animación entre páginas.
Y vamos a hacer diferentes animaciones.
Para empezar el proyecto de Astro, lo que vamos a hacer es npm create astrolatest.
Así que copiamos esto y con eso ya empezamos el proyectito.
Vale, creamos con Astro.
Mira, encima que bonito, pero fíjate que cara de este muñeco que te está hablando.
Pero que es una maravilla esto.
Vale, vamos a llamarle midubux.
Yo y mi originalidad.
Pregunta, ¿cómo quieres empezar el proyecto?
Incluyendo archivos, usando block template.
Yo le voy a decir con el sample files, para que veáis un poquito.
Instalamos dependencias, le voy a decir que no, porque voy a utilizar pnpm.
¿Planeas escribir TypeScript? La verdad es que no.
Igualmente, aunque le digáis que no, ¿ves que te pone aquí?
No te preocupes, TypeScript está soportado en Astro por defecto.
O sea, que si tú en algún momento quieres escribir TypeScript, no vas a tener ningún problema.
¿Inicializa el repositorio? Le decimos que sí.
Pues vamos aquí y nuestro midubux, ¿vale?
Hacemos un pnpm install.
Pnpm, para el que no lo sepa, es una alternativa a npm para más rápida.
Ya tenemos el proyecto.
A ver, me da mucha pereza, me da mucha pereza configurar el linter.
Me encantaría que hubiese una forma de poder hacer npx astro add slint o algo así.
Pero creo que no existe esto, para mi desgracia.
No es oficial, pero si le das yes, yo creo que no.
¿Ves? No existe.
Me da mucha rabia que no exista esto, porque es un poco rollo.
Porque solo existe una integración, lint, creo que solo existe una integración que es la de ROM.
No sé por qué no existe una de slint, la verdad, me sorprende.
Sí que hay un plugin de slint, que es este que tenemos aquí, ¿vale?
Y aquí, pues si lo instaláis todo esto, pues se supone que debería funcionar.
¿Veis? Aquí tendríamos toda la instalación.
Lo puedo intentar hacer rápido, para ver si cuela.
A ver si lo hace rápido.
Pnpm install con slint, slint plugin astro.
Y aquí el type script slint parser, también por si acaso hacemos type script.
Y le ponemos el "-d", que es de modo desarrollo.
Aquí ya nos va diciendo que utilizamos slint.rc.
Vamos a crear aquí un fichero.
Le vamos a llamar .slintrc.cjs.
Y aquí vamos a copiarnos todo esto.
A ver si cuela.
Dice, define la configuración para los filos astro, ¿vale?
Que aquí utilice el astro slint parser.
¿Pero esto lo instala automáticamente?
Vale, imagino que sí.
Dice, si no utilizas configuración, es la misma configuración que está aquí.
No sé si utilizaría todo esto.
Igual me lo podría copiar de la miduconf.
Porque la miduconf, si os acordáis, ¿veis?
Aquí tenía ya un slintrc, que ya esto lo tengo totalmente bien configurado,
que debería funcionar.
Pues lo vamos a utilizar, ¿no?
Y así, mira, eso que nos simplificamos y no perdamos mucho tiempo con esto.
Me gustaría que fuese un comando para no perder tiempo en estas cosas.
Venga, aquí vamos a tener pretier, que es pretierc.js, ¿vale?
.pretierc.js.
Y ahora lo que necesitaremos serán todas las dependencias.
¿Veis aquí?
Slint, config pretier, ¿vale?
Vamos a ir poniéndolas todas.
Pnp install.
Ahora que lo pienso, esto me lo puedo copiar aquí.
Lo ponemos en el package.json.
Y así nos olvidamos.
Así esto lo hacemos una vez, ¿vale?
Tenemos algunas duplicadas.
Vale, esto por aquí.
A ver si nos falta alguna.
Este astro, slint parser.
Voy a hacer estas dos y así ya salimos de esto.
No sé, creo que un día voy a hacer el plugin de astro para instalar las dependencias de slint
y que te lo haga todo automáticamente porque es que me da mucha pereza hacer esto.
El hacerlo del plugin, aunque no sea el oficial, pero hacerlo.
Con esto yo creo que ya tendríamos...
Vamos a ver.
Se supone que deberíamos tener el pretier, esto.
Y si vamos a un componente...
Ah, sí, sí.
Al menos me ha funcionado el de slint.
No parece que me funcione, pero el pretier sí que me funciona.
O sea, no sé por qué nos sale el error este, porque esto claramente aquí con slint debería fallar.
Pero quitarlo quita.
Igual los tengo desactivados porque a lo mejor hice algún vídeo o lo que sea, ¿vale?
Pretier es con doble R.
Ah, sí, tienes razón, porque mira, no funcionaba, no se veía el iconito.
Bien visto, muchas gracias.
Vamos a ver cómo sale este proyecto.
Si hacemos un pnpm ramdev, esto nos debería levantar el servidor y veremos cómo está la cosa.
Esto es por defecto.
Esto es por defecto.
¿Para qué era slint? Para lintar tu código, para asegurarte que ves los errores estáticos de tu código.
Bueno, pues esto es el welcome.
Este es lo que nos ha dejado por defecto los componentes.
¿Veis? Este componente de aquí, esta card.
Sería esta card de aquí.
La verdad es que está bonito.
Uy, qué bonito el efectillo, ¿eh?
Está súper chulo, me gusta.
Y aquí tendríamos los layouts, que sería lo que envuelven nuestras páginas, las páginas y este es el index.
De hecho, esto si ya lo quitamos...
Vamos a quitarlo, pues total, no vamos a utilizar esto.
Voy a poner aquí midu books.
¿Ves? Midu books.
Ya lo tenemos aquí.
Yo voy a utilizar Tailwind.
Ya sabéis que a mí me encanta utilizar Tailwind.
No por nada, sino porque vamos bastante más rápido si utilizamos Tailwind.
Para instalar Tailwind en Astro, esto sí que es súper fácil.
Que simplemente es pnpm astro at Tailwind.
Creo que es así de fácil.
Pnpm astro at Tailwind.
¿Ves? Y entonces ya empieza a preguntarte, ¿esto es lo que quieres añadir?
Le dices que sí.
Instala las dependencias y ya está.
Tailwind, para el que no sepa, framework CSS, para estilar utilizando utilidades de clase.
Ya lo tendríamos añadido.
Ahora ya podemos utilizarlo aquí.
Por ejemplo, aquí en el class le podemos poner text6xl.
Estos estilos que tenemos aquí los vamos a quitar.
Ya no necesitamos.
Estos son los estilos que tiene por defecto Tailwind.
Mirando aquí, ¿vale?
Veis que tenemos aquí el midu books.
Si le pongo que esto sería más pequeño, pues sale más pequeño.
Si lo ponemos más grande, pues más grande.
Font, bold, ¿vale?
Y ya tenemos Tailwind.
Bueno, vamos a hacer la parte de arriba, el título, ¿no?
El principio.
Vamos a poner aquí font black.
Vamos a hacer que esto sea bastante grande.
Text, un poquito más grande.
Y ponemos aquí, no sé, libros de programación.
Libros de span, programación.
Porque el span este, verás, será un poquito más pequeño para que quepa bien.
Este será el título.
Solución, ¿vale?
A ver, esto más que un span.
Bueno, sí, podemos hacer un span.
Y esto, pues hacemos que esto sea un bloque.
Porque hacer un salto de línea me parece un poco rata.
Vamos a hacer que sea block.
Que esto sea display block.
Y aquí ponemos un texto que sea de un tamaño que sea más o menos como los 8 píxeles.
A ver, esto es 96, pero esto es más largo que libros de...
Vale, libro, joder, clavao.
Clavao, me gusta.
¿Vale?
Ya tenemos aquí el título.
Vamos a hacer aquí mauto.
Y le vamos a poner un tamaño máximo al ancho.
De 4XL.
¿Vale?
Y esto lo vamos a centrar.
Text center.
Y ya lo tenemos centrado.
¡Pum!
Lo importante no es tanto el diseño.
Si aquí queréis poner lo que queráis.
Yo me he basado en el de Adion Man y que me ha gustado.
Pero bueno, haced lo que queráis.
Si lo queréis hacer de otra forma, pues lo hacéis.
Vamos a dejarle un poquito de separación.
¿Vale?
Padding ahí.
Y ya está.
Esto sería el título.
Una cosa muy chula que tiene Astro es que podéis crear componentes sin necesidad de crear, de utilizar React, PRIAC, Angular, nada de esto.
Y eso está muy chulo.
Porque fijaos, creáis un archivo title.astro.
Y lo que tenéis aquí ya lo podéis sacar.
Lo ponéis aquí en title.astro.
Es como HTML.
O sea, es que es HTML.
Es que se ve igual.
Es que eso es lo que me encanta.
Y aquí ya podéis utilizar el title este.
Lo podéis importar.
¿Ves?
Importamos el componente title.
Y lo utilizáis aquí.
Y ya está.
Ya tenéis un componente reutilizable.
Y no habéis tenido que aprender React ni nada.
Y es tan fácil el separar un componente visual en un archivo y utilizarlo.
Y además luego veremos que también podéis utilizar props.
¿Vale?
¿Qué podemos hacer ahora?
La lista.
¿Vale?
Vamos a hacer la lista.
Ya os digo que yo no me voy a complicar mucho.
O sea, yo voy a hacer una grid de dos columnas.
Podemos hacer que cuando tenga mucho espacio sea de tres columnas.
Vamos a dejarle un espacio de tres.
Y aquí podemos tener...
Bueno, realmente esto podría ser una lista desordenada.
¿Vale?
UL es lista desordenada.
O sea, que no está numerada.
Y dentro podríamos tener el I.
Y en cada I, pues decir HRF.
Vamos a ver.
CleanCode.
¿Vale?
Este sería el primer libro.
CleanCode.
Y dentro vamos a tener la imagen de CleanCode.
Alt portada del libro CleanCode.
¿Ok?
Y esto sería como lo más básico.
Ahora luego nos preocupamos un poco de los estilos.
Programming Books.
Aquí saldrán todos los Popular Programming Books.
Vale.
Vamos a ver.
Este.
Aquí sí que tienen las portadas.
Muy buena nota tiene este libro.
Soy un poco rata.
Lo siento.
250 por 300.
Bueno, 389 por 500.
Lo que vamos a hacer es, para asegurarnos que todos seguimos la misma estructura,
vamos a utilizar un Asper Ratio, un Asper Ratio, que sea como esto, ¿no?
389, 389 entre 500.
Así nos aseguramos que todos sean con el Asper Ratio, o sea, la relación de aspecto de esta imagen que tenemos aquí.
Que ocupe todo esto.
Le hacemos un Object Cover que ocupe todo el ancho y todo el alto.
De hecho, también el máximo.
Creo que esto da igual, pero bueno.
Lo redondeamos un poquito, ¿vale?
Un borde radius.
Y yo creo que ya está, ¿no?
Con esto.
¿Vale?
Bueno, lo hemos redondeado un poco.
Igual con el Rounded ya es suficiente, ¿no?
Y lo que podemos hacer aquí, esto lo vamos a hacer con todos.
Hover, con una escala del 105.
Esto es que a mí me gusta particularmente.
Inline Block, por si hay problemas de la escala.
Le hacemos que tenga todas las transiciones.
Esto es porque no tengo tiempo de preocuparme de optimizar cada una de las transiciones.
Le subimos un poco el contraste para hacer el efecto wow.
Y también le ponemos un poquito de sombrita, ¿vale?
Para cuando hagamos esto, ¿ves?
Haga esta cosita.
Pum, pum, pum, pum.
Vamos a poner aquí en Components, vamos a crear un componente que vaya a ser listofbooks.astro.
Y vamos a poner bookitem.astro.
Ya separamos en componentes.
Vamos a poner, yo creo que separaría, sí, separaríamos esto, ¿no?
El bookitem.
Lo vamos a poner aquí.
Y aquí está una cosa muy chula de Astro.
Y es el hecho de cómo se le pueden pasar props.
Vamos a pasarle aquí a Astro.props y vamos a recuperar el título del libro, la imagen.
Y yo creo que ya está.
Es que no tiene mucha historia.
Esto sea la imagen.
Y esta portada de, aquí sería el título, ¿vale?
Y en el list of books vamos a hacer todo lo demás.
Así que esto lo vamos a poner aquí.
Solo que aquí, en realidad, vamos a iterar esto y vamos a poner, vamos a pasarle todos los libros.
Bueno, que en este caso podemos crear los libros aquí.
O sea, aquí vamos a tener un array con los libros.
Por ejemplo, title, clean code.
Vamos a ponerle la idea, también importante.
Clean code, ¿vale?
El título, que es clean code, manual de desarrollo ágil de software.
El título y la imagen.
Y entonces ahora ya será más fácil que podamos repetir esto.
Es que esto es lo bueno que tiene Astro.
Que sin necesidad de aprender React, puedas hacer una UI componentizada.
Esto me parece espectacular.
Entonces, aquí lo que hacemos entre llavas es evaluar el books.
Y aquí lo que hacemos es mapear.
Esto es muy parecido a React.
Es que si sabes, React te va a costar cero esto.
Y para cada libro vamos a renderizar un lead.
Y dentro del lead renderizamos el bookItem.
BookItem desde Astro.
Y ahora utilizamos este componente.
Y le podemos pasar todo el book.
Que el book, esto debería tener la idea, el título y la imagen.
Pues le pasamos aquí la idea, título, imagen.
A ver.
¡Ay, qué raro!
Pensaba que se me quejaría con la idea.
Pensaba que la idea se quejaría.
Esto es porque hay una cosa.
Esto os lo explico, pero esto es opcional, ¿eh?
Para que no os rayéis.
Pero una cosa muy chula que tenemos en Astro es que podéis exportar, si no me equivoco,
Export Interface, ¿sabes?
Interface Astro Props.
No me acuerdo si es Astro Props.
¿Puede ser?
O Props.
A lo mejor es Props solo.
Haciendo esto, Export Interface Props.
Al hacer esto, que esto es TypeScript, pero fíjate que esto es un punto Astro.
Pero bueno, lo soporta TypeScript.
Ya aquí se queja y te dice, oye, que estás utilizando la idea y en el tipo no lo tienes.
O sea, que si queréis utilizar TypeScript, fijaos lo fácil que es.
Y podéis decirle que es opcional, lo que sea.
Yo le voy a poner que es un string, ¿vale?
Esto sería la idea.
Y así ya podemos aprovechar que esto sea con la idea, ¿vale?
Esto así, para que sea un template string.
Y aquí en Source, pues vamos a utilizar la imagen.
Y aquí en el Alt este, vamos a utilizar del libro.
Vamos a poner aquí el title.
Con esto, al menos ya podríamos tener una lista de libros.
Quitamos esto.
List of books.
¿Vale?
Nos debería seguir apareciendo un libro.
Perfecto.
Ya tenemos el libro.
Y ahora podríamos empezar a añadir más libros súper fácil.
O sea, ahora ya se supone que deberíamos poner aquí The Clean Coder, que también es del mismo hombre.
¿Vale?
Y esta imagen se la he inventado.
¡Qué cabrón!
¿Llega a salir?
Me cago encima, ¿eh?
Este me parece mejor libro.
El de Pragmatic Programmer me parece mejor libro que Clean Code, sinceramente.
The Clean Coder.
Otro que tal.
Que no está mal, ¿eh?
Que están bien estos libros.
Tampoco os quiero decir que estén mal.
Pero bueno, luego os explico un poco mi opinión.
Hostia, ha estado bastante cerca, ¿eh?
O sea, lo que ha cambiado es la idea.
Pero esta idea de aquí sí que era correcta.
Fijaos que lo he pegado.
Mira, ya tenemos dos.
Vamos a poner dos más, ¿vale?
Solo para tener unos cuantos.
A ver, alguno así que me haya leído.
De JavaScript Good Pass.
Este es otro libro que ahora, a día de hoy, en 2023, no recomiendo.
¿Vale?
No recomiendo ni en broma.
Hay libros que han sido buenos, pero ya no lo son.
O ya no son recomendables.
O no son recomendables para según qué gente.
Por ejemplo, este de JavaScript The Good Pass.
O sea, no está mal, pero está un poco desactualizado.
Tampoco estoy muy de acuerdo con cosas que habla.
En otra época tenía mejor pinta, la verdad.
Pero a día de hoy yo no creo que sea mejor opción.
Eloquent JavaScript sí que me gusta bastante.
Aunque también hay cosas que no han envejecido tan bien.
Pero además es desde otro prisma.
Eloquent.
Y es más para la gente que empieza.
Bueno, ya tenemos aquí unos cuantos, ¿vale?
Y a ver, debería ser...
Ojo.
Bueno, vamos a ponerle ahí un padding.
Solo para que no pase eso que hemos visto.
Padding pequeñito.
Y así ya mejor.
Y lo vamos a hacer también con el título.
Title.
Vamos a ponerle aquí px...
No, recuerdo que he puesto.
Px4.
¿Vale?
¿Ves?
Que esto salta.
Esto es porque vamos a tener que hacer que esto sea en MD.
Text6xl para que sea un poquito más pequeño.
Libros de...
¿Vale?
Y ahora haremos el programación también más pequeño.
Esto a partir de MD.
Esto es una media query.
Y le ponemos text...
No sé.
32 píxeles.
¡Uy!
Antes lo he echado a primera, ¿eh?
Que...
Bueno, 36.
Libros de programación.
Esto no es importante.
Lo que quiero es hacer la animación.
Luego añadimos más libros si queréis.
Ahora vamos a hacer la otra página.
Vamos a hacer la otra página.
Nos vamos a pages.
Y vamos a hacer aquí book.astro.
Ojo con esto.
¿Veis que he puesto aquí como unos corchetes?
Estos corchetes que he puesto...
Esto es porque...
Esto es una página dinámica.
O sea, cuando le damos aquí a clean code...
¿Veis que esto va a la URL clean code?
Esta es la ID.
Bueno, aquí se me queja porque tendría que ser un...
Un path estático.
Esto por ahora no lo tenemos.
Ya nos da aquí la solución que tenemos que poner el output como si fuese un servidor.
Por ahora lo vamos a hacer, pero seguramente después vamos a...
Esto lo quitaremos y lo haremos en condiciones, ¿vale?
Pero por ahora vamos a poner output server para que tenga un servidor.
Si no, lo tenemos que hacer estático.
Y ahora pues se queda la página en blanco porque aquí no hay nada.
Pero si aquí ponemos hola, pues ahora ya sí que aparecerá esto.
¿Ves?
Aquí tenemos el hola.
Si queremos recuperar este segmento dinámico, lo que tendríamos que hacer aquí es recuperar aquí book de astro.params.
Y ahora ese book lo podemos recuperar aquí y escribirlo.
Book.
Vamos a poner aquí class text9xl para que lo veamos, ¿no?
¿Veis?
Ya estamos recuperando lo de la URL.
Es que Astro me gusta mucho.
Me gusta mucho, de verdad.
Primero vamos a utilizar el layout, igual que hemos hecho con la página esta.
El layout es lo que envuelve toda nuestra aplicación.
¿Veis que aquí pone title?
Aquí le podéis poner el título que quieres que tenga la página.
Libros de programación recomendados por Medudep.
Estoy pensando que estos books que tenemos aquí, ¿veis estos books?
Los voy a sacar a una carpeta.
Le podemos llamar aquí data, ¿vale?
Vamos a poner books.js y esto lo vamos a exportar porque así podremos aprovechar y traernos los books, ¿vale?
Desde data books.
Así podemos reutilizar esto.
Y aquí también nos traeremos los books.
Y así, a través de la id, podremos sacar info y buscamos books.find donde el b.id sea igual al book.
Creo que aquí se puede hacer un redirect.
O sea, si no tenemos info, aquí se puede hacer un astro.redirect.
No sé si 404, no sé si se le puede pasar.
Ah, sí, se le puede pasar aquí el 404, si no me equivoco.
O sea, que si no he encontrado la info, de esta forma.
A ver, ¿esto lo he puesto bien?
Ah, sí, sí, lo he puesto bien.
Lo que pasa es que todavía no he hecho esto, ¿vale?
Vamos a escribir aquí cositas, title, libro.
Ahora arreglamos esto, libro.
¿Vale?
Vale.
Aquí tenemos el libro, pero...
¿Ves?
Aquí tenemos el libro.
Pero imagínate que yo ahora me invento aquí una URL, la que sea, no encuentra el libro, ¿ves?
Y ahora me da un 404.
O sea, ya hemos hecho en un momento un 404.
¿Cómo lo hacemos?
Recuperamos el parámetro de la URL con el nombre de la id del libro.
Buscamos entre toda la lista de libros las id y si no lo encuentra, decimos, vale, si no he encontrado una info, lo que hago es una redirección al 404.
Vale, aquí pone que no se puede asignar a esto.
Igual me lo estoy inventando, ¿eh?
Es que esto, status, valid, redirect, status.
Igual no es un número y hay que hacer alguna cosa, ¿eh?
404, custom, 404.
Ah, es que además puedes hacer esto.
O sea, puedes hacer directamente esto de...
A ver, astro, 404, o astro.redirect.
Bueno, esto no está en redirect mode, obviamente, ¿no?
Solo está en server-share rendering.
En fin.
Lo podemos dejar así y hacer la página 404.
Bueno, y aquí vamos a hacer esto.
Un momento.
Vale, copiar dirección de la imagen.
Image source.
Ta, ta, ta.
Oh, vaya.
Lo ha roto.
A ver.
Se supone que ahora con esto...
Ah, pues no.
Puedes crear un 404.astro en source barra pages.
Source barra pages.
Pues os he puesto aquí el 404.
O sea, eso ya lo tenemos bien.
Sin el segundo parámetro.
O sea, lo que estoy probando...
Ah, mira, sí.
Oño.
Mira.
Mira, mira, ya lo tenemos.
Vale, perfecto.
Sin el segundo parámetro.
Curioso, ¿eh?
Pues ya está.
Ya sabemos cuál era el problema.
Vale, aquí lo tenemos.
No sé por qué no sale la imagen, el GIF, pero está ahí.
Aquí podemos poner el mismo...
Lo del ancho este que habíamos puesto.
4xl, mdauto, minh screen.
Vamos a poner grid, place center, place content center.
Y así centraremos todo esto.
¿Vale?
Esto lo vamos a poner aquí.
Text font black.
Vaya, lo ha roto.
Tenemos el layout.
¿Sabéis por qué sale mal eso?
¿Veis esto que sale mal?
Eso sale mal por la codificación.
O sea, que tenemos que asegurarnos que tiene el chart set correcto.
Y eso lo traemos del layout.
Si miramos ahora el layout, que ahora os lo enseño, vais a ver que tiene el chart set correcto.
Y aquí el title.
Vamos a poner 4xl.
No lo he encontrado.
Vale.
Y ya está.
Vaya, lo ha roto.
¿Veis que ahora está arreglado?
Eso es porque el layout sí que está haciendo esto correctamente.
Si lo miramos...
Vale.
Esto...
Bueno, esto era solo para que sepáis cómo hacer un 404 en un momento.
Lo hemos hecho un momento.
El tema es el layout.
Veréis.
¿Veis este chart set u etf 8?
Esto es clave porque esto es lo que está haciendo es asegurarse que estáis utilizando la codificación correcta.
Si esto no lo tuviese, ¿veis?
Lo que son acentos, algunas exclamaciones que son más...
Que no están en inglés.
O podéis tener como cosas raras.
Esto es una cabecera que o devuelve el servidor o lo tenéis que tener en el HTML.
Por si no sabíais, ¿alguna vez os ha pasado?
En WordPress muchas veces ha pasado, ¿verdad?
Además, ¿veis? Aquí ya podéis hacer todo el tema del title, el tema de...
Bueno, el generador este lo podéis quitar.
Pero aquí podéis utilizar el description también, lo del Twitter card, todo lo que queráis.
Y más, pues lo podéis hacer.
Mira, aquí vamos a poner mi UD.
Muy bien.
Dicho esto, vamos a hacer la página del libro para que podamos avanzar con el tema de la animación.
Aquí, en la info, libro, el title, libro, info.title.
¿Vale?
¿Vale?
Y aquí esto lo hacemos así.
Libro, info.title.
O sea, ahora ya en la... ¿Vale?
Veis que pone libro, clean code.
Ya tenemos eso bien.
Entonces, aquí también tendríamos que poner info.title.
Debajo deberíamos poner nuestra opinión, que no la he puesto, pero yo qué sé.
A ver.
Podríamos poner nuestra opinión de cada libro.
Opinión.
Y podríamos poner el author, ¿no?
Que esto sería Robert C. Martin.
Este también es de Robert C. Martin.
Este no me acuerdo de quién es.
Ah, sí.
Este es de nuestro amigo.
De nuestro amigo.
Douglas.
Douglas Crockford, el que odia ahora JavaScript.
Qué risa.
Y este es verdad que es de una persona...
Creo que es de Sueco, me parece.
Porque tiene un nombre así bastante del norte de Europa.
Y también de cada uno vamos a tener nuestra opinión.
Aquí la opinión.
Aquí también la opinión.
Y la opinión.
Como explicando cada libro.
Vale.
Opinión del libro.
Vamos a poner mi opinión del libro.
Mi opinión polémica del libro, ¿eh?
Venga.
Un clásico entre los clásicos del mundo de la programación.
Aunque en pleno 2023...
Ojo, polémica.
Ah, yo tengo una opinión un poco polémica, ¿eh?
Polémica.
No me parece un libro que recomendaría a todo el mundo, ¿vale?
El mundo.
Especialmente a aquellas personas que están aprendiendo.
Aprendiendo.
Además, tiene un tono muy dogmático.
Dogmático.
Que no me gusta nada.
Es verdad que no me gusta nada, pero tampoco voy a poner eso.
Y existe gente que se lo toma peligrosamente como la Biblia del desarrollo.
Pero si eres capaz de leerlo tomando perspectiva, hay cosas interesantes que todavía están vigentes.
Ojo, que todos los ejemplos de código están basados en Java.
Y mucha programación orientada a objetos.
Que esto también muy pocas veces se dice.
¿Vale?
Bueno, esa es mi opinión polémica.
Mi opinión polémica.
Info.opinion y vamos a poner aquí también otro P con autor.
Autor.
Y ponemos aquí info.author, ¿vale?
Vale.
Esto sería una parte del libro, pero vamos a tener como dos grids, ¿no?
Donde vamos a tener en un lado el libro y en otro lado vamos a tener toda esta información.
Vamos a separar esto.
Vamos a tener un grid aquí dentro.
Bueno, vamos a poner el mismo main que teníamos aquí.
¿Vale?
Este main que hemos utilizado aquí.
Vamos a utilizar el mismo aquí.
Esto también lo podríamos poner en el layout, pero por ahora lo vamos a dejar aquí.
Para asegurarnos que tengan exactamente la misma anchura.
Que es un poco raro, ¿no?
Y aquí pues tenemos un div con grid, grid calls, dos.
Van a ser dos columnas.
Donde una columna sea todo esto.
¿Vale?
Así que vamos a ponerle aside por poner algo.
¿Vale?
Vale.
Esto por un lado y por otro lado pues vamos a tener flex, flex call, picture, ¿vale?
Aquí vamos a tener el book cover.
Voy a crear...
Bueno, por ahora vamos a hacerlo así.
Source, image punto...
No, info punto image, alt...
Luego lo arreglamos, ¿eh?
Portada del libro, info punto title, más o menos, más o menos.
Ahora lo arreglamos.
Cuatro, ¿vale?
Para separar.
Yo creo que con esto...
Vale.
Más o menos.
Ahora le damos un poquito más de cariño.
De hecho, voy a añadir dos botones que alguien me ha preguntado antes y así le contesto también lo que me ha comentado, ¿no?
Porque alguien...
El signo de dólar...
Ah, gracias.
Se me ha olvidado el signo de dólar aquí.
Gracias.
Vale.
Alguien me ha preguntado antes, ¿se puede copiar y pegar cosas de Flowbyte?
Para el que no conozca, Flowbyte es un proyecto muy interesante que tienes componentes de Tailwind de UI, ¿vale?
Tienes desde partes enteras, que de hecho no podríamos haber copiado alguna, hasta componentes.
Y sí que lo puedes hacer.
Por ejemplo, los componentes...
Me voy a copiar los botones.
Imaginad que queremos poner un botón de compra.
Creo que hay unos con iconos aquí.
Mira, View by now.
Este, este, este.
Este me gusta, ¿vale?
Pues este me lo voy a copiar y lo vamos a poner debajo de la imagen.
Vamos a poner dos, aunque solo utilizaremos uno de los dos.
Aquí podríamos comprar ahora y aquí podríamos poner previsualizar libro o leer libro.
Entonces, si miramos aquí, ¿veis?
Ya los tenemos aquí.
Ahora habría que ajustar un poquito esto porque no está del todo bien.
Ahora ajustamos paddings y todo esto, que le falta cosita.
Pero bueno, que ya puedes ver que aquí al menos lo tenemos funcionando.
Tenemos que ajustar alguna cosa, pero ha sido copiar y pegar todo este código de aquí y ha funcionado de una.
Porque al final estos componentes están hechos con Tailwind.
Y esto es una de las cosas que se infravalora mucho de Tailwind.
Y es la facilidad de replicar la UI.
Eso está muy chulo.
Obviamente esto no vamos a querer que sea un botón.
Esto sea un href.
Así que por ahora vamos a poner esto.
Voy a quitar este por ahora.
Un problema que veo que tiene es que esto no tiene el texto Justify Center.
No lo tenía centrado.
Esto también debería tener un class para separar mejor los botones.
Y la imagen, ojo que la imagen, he visto algo de la imagen.
La imagen, este picture, le faltaría que pille todo el contenido.
Le voy a dejar un relative porque luego vamos a poner cosas interesantes dentro de la imagen.
Y esto de la imagen debería ser parecido a como lo hemos hecho aquí en el book item este.
Por ahora me lo voy a copiar, ¿vale?
Y luego si veo que se queda exactamente igual, lo sacamos a un componente.
Bueno, veis que ocupa mucho espacio, pero bueno, ya tenemos el comprar y tal.
Ocupa como demasiado espacio.
Vamos a hacer unas cuantas cosas.
Lo primero, arreglamos esto.
El título.
Le ponemos aquí un buen título bien grande.
Que tenga una separación.
Vamos a hacer que esto sea un poquito más grande también.
Con LG.
Este, vamos a poner que esto sea mejor Strong.
Aunque esto deberíamos ponerlo, no sé.
Estoy pensando si poner esto en realidad más que un Strong.
Vamos a ponerlo como una P.
Que esto sea el Strong.
¿Vale?
El autor.
Y esto en todo caso podríamos poner Semibolt.
Y que sea más bien como un Gray, ¿vale?
Algo más, menos fuerte.
Va pillando forma.
También aquí, la separación más para arriba.
Vamos a darle más separación aquí.
¿Qué es lo que pasa?
Que hemos hecho dos columnas.
Entonces, las dos columnas pillan exactamente el mismo espacio.
Vamos a hacer que esta columna pille como menos espacio.
Entonces, en el Grid Calls, que le hemos dicho dos y que automáticamente hace esto,
le podríamos decir que este sea, pues, 384 píxels.
Ah, miramos si queda bien, si queda mal.
¿Vale?
Vale.
Igual un poquito menos.
350.
Algo así.
Y aquí en el este también separamos un poquito más esto.
Bueno, no tanto.
Dejadme que separe esto un poquito más.
Entonces, ya la idea es que estamos aquí.
Vamos a Clean Code.
Va a Clean Code.
Clean Coder.
Va a Clean Coder.
Le falta la opinión.
Pero bueno, ahora no tengo ganas de escribir la opinión de todos.
Vamos a centrarnos en el de Clean Code.
Vamos a hacer esto un poquito más pequeño.
A ver, mi idea no era hacer el mejor diseño del mundo, ¿vale?
Que no me da la vida.
Pero al menos un poco para hacerlo, para ir haciendo, ¿vale?
Os aviso una cosa de animación entre páginas para que no se me asuste nadie.
La animación entre páginas es bastante sencilla, pero lo vamos a hacer desde cero.
¿Qué significa eso?
Que vamos a tener que interceptar las navegaciones.
No te asustes.
No tengas miedo.
Quédate conmigo.
De verdad.
Te lo voy a explicar todo.
Cada una de las líneas vas a aprender un montón de la plataforma web y no te asustes.
De verdad, no te asustes.
Porque veo que la gente, en cuanto ven que son más de dos líneas CSS, se asusta.
No te asustes.
Te digo una cosa.
Lo que vamos a ver ahora es el futuro del desarrollo web.
Te lo juro.
O sea, no es hype.
No es hype.
Es que es increíble.
Hay una pequeña...
Al principio hay una cosa que es un poco, no complicada, sino laboriosa.
Vamos a hacer una cosa muy compleja.
Y es que vamos a animar que cuando yo le dé aquí un clic y vayamos a la otra página, va a haber una animación.
Y por lo tanto, tenemos que capturar la navegación.
Y ese es el problema.
Que al tener que capturar la navegación...
Pero no te me asustes que yo te lo voy a explicar todo y te va a quedar clarísimo.
Si fuese una SPA, una Single Page Application, no sería tan necesario lo que vamos a hacer.
Vamos a cerrar todo esto.
Nos vamos a Layout.
Normalmente lo que pasa es que esto...
Lo voy a poner, pero yo creo que nosotros no lo vamos a necesitar.
Hay una etiqueta meta que se llama New View Transition.
View Transition.
¿Vale?
Y le dices que el contenido es del Same Origin.
Esto lo que significa es que esto es para activar las transiciones siempre que sean dentro del mismo dominio.
¿Por qué? Porque quieres evitar que cuando el usuario se vaya a otra página e intentara animar lo que sea.
Aquí lo que estamos diciendo es para ver las transiciones siempre que sean dentro del mismo origen, del mismo dominio.
Pero creo que con lo que vamos a hacer nosotros, esto no es necesario.
Lo vamos a poner por si acaso.
Vamos a poner aquí un script.
Lo primero es, queremos hacer una transición visual de esta página de la home a esta de aquí.
Fíjate que ahora no hace ninguna transición.
Para poder capturar y saber cuándo realmente queremos navegar, vamos a utilizar la window.navigation.
Window.navigation es porque dice que no lo encuentra.
Pues, esta gente...
Bueno, add the listener, navigate...
Vale.
¿Qué es lo que hace esto?
Esto lo que hace es que cada vez que navegamos entre una página u otra, o sea, cada vez que queramos hacer...
Cuando le damos un click, esto va a hacer un console log.
De hecho, si le damos aquí, ¿ves? Aquí me ha hecho ya un console log.
Si volvemos ahí para atrás, pues, este no lo ha capturado, pero ¿ves? Le doy otra vez.
Dos console logs.
Si aquí, en el inspeccionar, ves la consola, al principio no verás nada.
Lo ves, durante un momento se ve, pero muy poquito.
¿Por qué? Porque se pierde.
Si queréis preservar el log, podéis ejecutar esto, mantener registro.
Y ahora sí que veréis, ¿veis? El navigate ahí, ¿vale?
Ya lo veis ahí, navigate.
Y ahora sí que lo estamos viendo.
Entonces, ya tenemos un evento en el que podemos capturar cada vez que queramos navegar.
Vamos a mirar este evento para saber hacia dónde quiere ir.
Y así, aquí en el console log, podemos hacer un event.destination.url, ¿vale?
Ahora estamos llevándolo un poco más allá.
No solo ahora miramos un console log, sino que vamos a ver...
¡Tía! ¿Qué ha pasado aquí? A ver si es que ha roto.
¿Qué ha pasado? ¿Qué ha pasado con el estilo?
Se le ha ido la olla, ¿no?
No sé qué había pasado a los estilos.
Entonces, una vez que hemos navegado, fíjate que me ha detectado aquí hacia dónde quería ir.
¿Vale? Pues ya sé que soy capaz de determinar hacia dónde voy a ir.
¿Vale? Hasta aquí bien, ¿no?
Ahora que ya sé cuál va a ser la destinación, voy a crear un objeto.
Vamos a darle to.url.
Vamos a crear new URL utilizando el event.destination.url.
Porque con este objeto, to.url, vamos a poder ver el path name, vamos a poder mirar un montón de cosas.
Entre ellas, vamos a revisar si es una página externa.
Porque, claro, si es una página externa, si el location.origin, esto lo que es, el location.origin, es la URL actual.
Si la actual que tiene, o sea, para que lo veamos, ¿eh?
Si nos vamos aquí a la consola, aquí tú pones location.origin, esto es nativo, ¿eh?
Entonces te está diciendo cuál es el origen actual de esta URL.
¿Ves? Me está poniendo el origen.
O sea, es solo el dominio, no el path name.
Si vais a midu.dev, midu.dev, y esto lo abrís.
Y ponéis location.origin, vais a ver que te pone HTTPS midu.dev.
¿Para qué vamos a hacer esto?
Porque solo nos interesa capturar las navegaciones que son internas dentro de nuestro dominio.
Así que, si el location.origin, o sea, la página en la que estamos, es diferente a tu URL.origin, o sea, la página de destino, entonces hacemos un return.
¿Por qué?
Porque si la navegación va a ser a una página externa, no queremos hacer nada con eso.
Simplemente pasamos, decimos, si estamos en una página y nos queremos ir a otra página de otro dominio, hacemos un return y nos olvidamos de todo, ¿vale?
Miramos si es una página externa, si es así, lo ignoramos.
Hacemos un return, lo ignoramos y ya está.
Ahora, en el caso de que no sea, o sea, es una navegación, si es una navegación en el mismo dominio, entonces lo que vamos a hacer es interceptar el evento.
Así que hacemos un event.intercept, ¿vale?
Interceptamos el evento y le decimos, vale, ahora que hemos interceptado este evento, el de la navegación, o sea, este event es el evento de navegación, lo podemos interceptar,
y aquí le podemos cambiar totalmente el comportamiento por defecto a la navegación.
Vamos a decir, un método asíncron, handler, y aquí podemos hacer lo que nos dé la gana, aquí podríamos hacer lo que queramos, o sea, podríamos, como si queremos renderizar una página en blanco.
No sé si lo sabías, pero puedes hacer estas cosas en JavaScript, tiene bastante peligro.
Pero bueno, en nuestro caso, lo que queremos hacer es interceptarlo porque vamos a cargar la página de destino utilizando un fetch para obtener el HTML, ¿vale?
O sea, vamos a hacer un fetch de la siguiente página.
O sea, que imagínate que tú estás en la home.
Pues lo que vamos a hacer es, vale, cuando el usuario quiera navegar a la siguiente página, en lugar de navegar, lo que voy a hacer es un fetch de la página esta.
Vamos a hacer un fetch y vas a ver que un fetch es como cuando haces esto.
Tú haces un curve, ¿ves?
Y hemos traído el HTML.
¿Ves como puedes acceder y traerte el HTML?
Pues eso vamos a hacer.
Lo que vamos a decir es, oye, pues vamos a hacer la response de await fetch de la...
Y aquí tenemos el toURL punto pathname.
Y esto debería ser algo como así, ¿no?
CleanCode.
Esto sería el pathname.
O sea, lo que queremos traer es un fetch de esto, cleanCode, ¿vale?
Lo hacemos así porque tiene que ser un segmento dinámico.
Ya hemos hecho el fetch.
Ahora, el fetch, cuando tú haces un fetching de datos, normalmente vosotros lo que hacéis es esto.
JSON await response punto JSON.
Pero os voy a volar la cabeza.
No solo podéis hacer esto, ¿vale?
Esto muchas veces cuando llamáis a una API, normalmente es porque devuelve JSON.
Pero no siempre devuelve JSON una API.
Puede devolver un texto.
En nuestro caso, lo que queremos, nos interesa el texto.
Así que vamos a hacer text.
Porque lo que queremos es el texto plano.
O sea, simplemente lo que queremos es esto.
Y esto es texto plano.
Lo queremos leer como texto plano.
No es un JSON, por lo tanto, hacemos un punto text.
Y esto es aceptable.
De hecho, hay más.
No solo tenéis el text.
Tendríais también el array buffer, que también sería una forma de hacerlo.
Pero que no sea el texto plano.
El contenido del HTML.
Y ahora aquí, podríamos hacer aquí un montón de cosas.
Pero lo más importante que queremos es quedarnos solo con el contenido del HTML dentro de la etiqueta body.
Usamos un regex para extraerlo.
A ver, antes de que os asustéis.
Esto, seguramente, esto lo estamos haciendo así porque a día de hoy Astro no tiene, por desgracia, soporte nativo a Vue Transitions.
Pero os digo una cosa.
Lo que estamos haciendo aquí, seguro, seguro que Astro y todos los frameworks, todos, lo van a hacer de forma automática.
Por ti.
Para que tú no te tengas que preocupar y tengas que ver esto.
Pero es interesante, uno, porque todavía no lo están haciendo.
Y dos, porque así ves como lo harían por debajo.
Y lo que van a hacer es simplificarte esto.
Te darán una forma bonita de hacerlo y es genial.
Pero por detrás harán algo muy parecido a esto.
Y entonces lo que vamos a hacer aquí es decir.
Oye, voy a extraer los datos.
Que vamos a extraer es del texto.
Vamos a machear, ¿vale?
Oye.
Qué buena pinta.
Yo creo que es este.
Vamos a hacer una cosa que esto os va a gustar.
Lo que podéis hacer, si os pasa como a mí, podéis hacer esto.
Explícame esta regex de JavaScript.
Que justamente para esto es tachaje.
Esta expresión regular de JavaScript se utiliza para buscar y capturar el contenido que se encuentra entre las escrituras body y body.
Claro, yo esto no lo hubiera puesto.
Pero claro, entiendo que si el body tiene alguna clase, ¿ves?
Ya la hubiera liado.
O sea, que gracias Copilot por haberme ayudado.
Esto te permite encerrar la expresión regular.
Bueno, esto ya sabéis que es para la expresión regular.
Aquí lo que nos interesa es recuperar el contenido que tendríamos aquí en medio, ¿no?
Entonces, esto busca literalmente la cadena body.
O sea, nos interesa.
Si miramos aquí este código, lo que nos interesa es lo que va aquí.
¿Veis este body?
Yo es que lo hubiera puesto más fácil.
Todo este contenido que va aquí, este contenido es lo que nos interesa.
Y este regex lo que está haciendo es capturar lo que hay entre las dos etiquetas body.
Parece un poco complicado, pero no es tan raro.
Lo que pasa es que aquí lo que deja abierta la puerta es que el body pueda tener class names.
Aquí lo que está haciendo es capturar, básicamente, cualquier carácter y saltos de línea.
Aquí no importa si hay saltos de línea, texto, que haya HTML por ahí.
Lo que hay en estas etiquetas entre body y tal, esto lo va a capturar.
Y esto, que tiene aquí una contrabarra, es para escapar la barra esta de body.
Y ya está.
O sea, simplemente.
Yo hubiera hecho algo así.
Pero porque pensaba, daba por supuesto, a lo mejor ni siquiera hubiera hecho esto tan bien.
Sinceramente.
Ah, y la i, porque es case insensitive.
Y esto es porque el text match, lo que te devuelves en la segunda posición, también lo podéis hacer de otra forma.
Podéis hacer esto, que también queda bastante bien.
Y así en data ya deberíamos tener los datos.
Voy a poner un console.log para ver si esto funciona.
Aunque ahora podríamos ver que deja de funcionar nuestra página.
O sea, si ahora nos vamos aquí a localhostal y le doy aquí, ¿vale?
Fíjate qué ha pasado.
Que le he dado clic, le doy clic, cambia la URL, pero no cambia el contenido de nuestra página.
En cambio, si me vamos a la consola, fíjate que tengo ya aquí todo el contenido de la siguiente página.
Aquí ya veis cómo está funcionando la intercepción de la navegación.
Luego os explicaré cuándo tendríamos que hacer esto para no hacerlo siempre, ¿vale?
Pero al menos tenemos ya esto, ya tenemos el data, ya lo que nos interesa.
Ahora que ya tenemos el contenido de la siguiente página y a la hora de transformarlo, lo que vamos a hacer aquí es utilizar la API de View Transition API.
Para hacer esto, tenemos que hacer document.startView...
StartView, no me acuerdo si era StartView o Start...
Sí, StartView o Views.
Yo creo que es StartView.
Es que claro, como no lo encuentra porque dice que la propiedad no existe, por eso me da miedo.
StartView Transition, ¿vale?
Aquí lo que tenemos que decirle es cómo tiene que hacer la transición.
O sea, lo que le estamos informando al navegador es, oye, yo lo que quiero es pasar de una página a la otra.
Y en el callback le vamos a decir cómo tiene que causar esa transición.
Y lo que va a hacer el navegador por nosotros es muy sencillo.
Lo que va a hacer es una foto de las dos páginas.
Va a decir, cuando tú ejecutas este StartView Transition, voy a hacer una cosa.
Voy a hacer una foto de esto, ¿vale?
Una foto de esto y voy a hacer una foto de cuando termine.
Entonces vamos a tener dos fotos, la antigua y la nueva.
Esto automático por nosotros.
Nosotros no le tenemos que decir cuándo tiene que hacer la foto.
Simplemente cuando ejecutamos, hace una foto de esto.
Cuando termina, hace una foto de cómo ha terminado.
Entonces aquí lo que tenemos que decir es cómo tiene que actualizar la vista.
O sea, qué es lo que tiene que actualizar la vista para pasar de una foto a la otra.
Así que, ¿qué le decimos aquí?
Bueno, vamos a recuperar document get element, ¿vale?
Element by ID.
Y le tenemos que decir qué es lo que tenemos que...
Vale, vamos a poner aquí un div y de content.
Y aquí lo ponemos aquí.
Aquí un slot.
Aquí dentro del body es donde vamos a tener todo el contenido siempre.
Y entonces lo que le decimos en el document get element by ID,
lo que vamos a decir es recuperar el content
y nos vamos a machacarlo con el innerHTML, con el nuevo data, ¿vale?
Con el nuevo data le pasamos el content y ya lo tendríamos.
Con esto lo estamos actualizando.
Bueno, a veces puede ser que queramos hacer el scroll hacia arriba del todo, ¿no?
Cuando estamos navegando una página y otra.
Entonces hacemos un document.document element.scrolltop0 para que vuelva arriba del todo.
Lo podemos hacer incluso con una animación.
Por ahora lo vamos a hacer así.
Bueno, es que estoy pensando.
Más que hacer esto, ¿cómo tengo que actualizar la lista?
Vamos a hacerlo de otra forma porque es que si no, no pararía de incluirse el content todo el rato, ¿eh?
Vamos a hacer document.body.innerHTML con el data, ¿vale?
Más a saco con el data.
Lo hacemos justo antes y ya está.
Con esto, en principio, si no hemos roto nada, deberíamos tener ya nuestra animación sencilla.
Vale, vale.
Ya tenemos nuestra primera View Transition API.
¿Veis que está haciendo un fade in, fade out?
Esto automáticamente.
La verdad es que no empeora la funcionalidad de la web porque este fetch que hacéis vosotros aquí
es exactamente lo mismo que hacía internamente el navegador por vosotros cuando hacéis la navegación.
Es lo mismo.
O sea, es lo mismo realmente.
¿Qué haces si tienes una red lenta?
Buena pregunta.
¿Qué es lo que pasa si tienes una red lenta?
Pues pasa algo muy parecido a si tienes una red lenta y navegas normalmente.
O sea, si tú tienes un 3G lento y le das un clic, no pasa nada y espera hasta que tenga el resultado para poder navegar.
Lo único que estamos cambiando es la experiencia del usuario a la hora de navegar dentro.
Os lo voy a decir como más claro.
Lo que estamos haciendo es simular una single page application donde no tenemos una single page application, ¿vale?
O sea, estamos simulando una transición entre páginas navegando cuando en realidad no es una single page application,
pero ahora lo parece realmente.
La verdad no hay ningún problema porque es que ya os digo, la URL funciona perfectamente.
O sea, podéis entrar directamente a cualquier URL.
No pasa nada.
Podéis abrir en diferentes pestañas.
Lo que hemos hecho solo funcionará en navegaciones internas.
Cosa importante.
Una cosa que podéis hacer es que esto solo pase si document.startViewTransition existe, ¿no?
¿Por qué?
Porque así lo que estamos haciendo es vamos a capturar el evento solo si el navegador realmente soporta esta API.
Ahora, si por ejemplo yo me voy a otro navegador, voy a abrir Firefox, funciona perfectamente.
O sea, no hay ningún problema.
Bueno, funciona, no hay animación, ¿vale?
No hay animación, pero veis que funciona perfectamente.
O sea, no está habiendo ningún problema de que no sea compatible ni nada de esto.
Simplemente al que funcione bien, al que no funcione, pues ¿qué le vamos a hacer?
Todo funciona de forma transparente.
Vamos a continuar porque esto va más.
Esto va más, ¿vale?
Bueno, esto lo podríamos mejorar, ¿vale?
Que es que esto yo lo he echado un poco así, pero podríamos separarlo en diferentes ficheros, tenerlo fuera incluso.
Yo que sé, podríamos tener aquí utilidades.
Vamos a poner útiles, ¿vale?
Y vamos a poner aquí navigation.js.
Todo esto que hemos hecho aquí, pues lo podríamos poner por aquí.
A ver, podríamos tener export const startViewTransition.
Podemos todo esto por aquí.
Y, ¿vale?
Podríamos entonces separar check is supported, ¿no?
Pues esto, ¿vale?
Bueno, esta podría ser navigation.
No, esta no.
Lo que podemos mirar es esto, ¿no?
Si esto, return, tu, tu, tu, tu, bolean de esto.
Podríamos hacer bolean de esto.
Check is supported, ¿no?
Y decir, si no, check is not supported, pues entonces return.
Entonces ya nos quitaríamos un poquito esto.
Empezaríamos a ir aplanando, ¿vale?
Esto ya lo tendríamos en un sitio.
Luego tendríamos, yo que sé, el transformar la URL, si no es el origen.
Eso también lo podríamos separar, interceptar.
Vale, podríamos traernos fetch, fetch page.
Todo esto que hemos hecho de la página.
Esto lo podríamos sacar por aquí.
Esto lo sacamos de aquí, ¿vale?
O sea, a ver, no lo voy a hacer, pero que os podréis hacer para que os hagáis una idea, básicamente.
Y esto, pues ya lo podríamos sacar const data await fetch page y le pasamos esto, ¿vale?
Y el URL, esto lo sacamos de aquí y esto devolveríamos aquí el data y ya lo tendríamos.
Y podríamos continuar, esto también lo podríamos sacar y podríamos continuar y esa sea un poco la idea.
Si queréis ahora lo que podemos hacer es ver diferentes, de hecho lo podemos mirar, en web transitions API, aquí en este artículo tenéis un montón de transiciones que podéis hacer, ¿eh?
O sea, podéis, por ejemplo, tú, tú, tú, mira aquí, ¿veis?
El ejemplo que he hecho lo he sacado un poco de esta idea.
Aquí no lo explican mucho, la verdad, pero bueno, la idea que hemos hecho es un poco el tema.
¿Veis?
Aquí, solo con esto, imaginad que la transición que estamos viendo aquí como que es muy grande, o sea, muy rápida, ¿vale?
Esta transición es muy rápida.
Esto es la transición que hay por defecto, pero vosotros lo que podéis hacer, por ejemplo, aquí, si aquí tendríamos los pseudo elementos, ¿no?
Donde le decimos el View Transition Alt, este sería la foto antigua y esta sería la foto, la foto nueva.
Lo que estamos diciendo aquí es, oye, de la foto antigua de toda la página y la foto nueva, ¿ves?
Alt, New, de toda la página, vamos a cambiarle la duración de la animación.
Y al hacer esto, ya le estaría, con esto, solo con esto, ya estaríamos cambiando, fíjate, ¿ves?
Cinco segundos.
Pero claro, una vez que sabes esto, ya aquí el límite es tu imaginación.
Porque aquí puedes hacer animaciones, mira, vamos a hacer esta animación que se ve espectacular también.
Que esto, bueno, lo vamos a copiar y pegar.
Ahora os lo explico más o menos que es lo que hace, pero para que lo veáis primero.
Lo que tenemos aquí, estamos creando unas animaciones con keyframes, ¿vale?
En las que tenemos un fade in, fade out y además, mientras se hace un slide a la derecha y a la izquierda de las dos páginas.
Y esto es una animación muy parecida a la animación nativa que hace Android.
Si esto lo guardamos y nos vamos aquí, no queda muy fino.
O sea, queda bien, pero tampoco, o sea, hace como...
Todavía le quedaría el tema de la imagen, que eso ahora lo podríamos arreglar.
Mi sensación es que va demasiado rápida, ¿no?
No sé si a lo mejor habría que hacer que fuese un poquito más lenta.
¿Cientos?
A ver.
Y creo que la otra también es demasiado rápida.
¿Ves?
Creo que aquí también, esta de 90, yo la pondría 300.
Pero ¿veis?
Que joder, la verdad que está bien, bastante chula.
Lo importante, lo importante que tenéis aquí son dos cosas.
El selector, donde lo que estáis diciendo esto es, de la foto antigua, ¿ves?
Y esto es toda la página, pero aquí vosotros podríais seleccionar partes.
O sea, podríais poner el título, una imagen, lo que sea, ¿vale?
Aquí vosotros podéis seleccionar lo que os dé la gana.
Una sección, el aside, lo que sea, ¿vale?
Y esto de lo mismo con la nueva.
Y lo podéis mover una y otra.
Fijaos, aquí tenéis este ejemplo, ¿no?
De cómo se llaman las declaraciones CSS.
Y como podéis ver, pues tenéis los grupos, el tema de las imágenes, el viejo, el nuevo.
Y además podéis seleccionar, ¿veis?
Como animaciones concretas, de elementos concretos.
Una vez que le dais un nombre, por ejemplo, en esto, ¿no?
MindHeader, le dices, este es el nombre de la transición MindHeader.
Entonces ya lo podéis seleccionar directamente utilizando este pseudoelemento.
Y dices, de la animación MindHeader de la foto antigua, quiero que haga esto.
Y del otro, quiero que haga lo otro.
Os voy a enseñar la que yo creo que es la animación más sencilla y más efecto wow que podéis hacer en muy poca línea de código.
Lo vamos a dejar como estaba, o sea, lo vamos a quitar.
Lo que quiero hacer es que cuando yo haga clic a esta imagen, me haga una animación de esta imagen a esta imagen.
En lugar de hacer un fade in, fade out, quiero que esta imagen viaje a la siguiente imagen.
Y es tan fácil y tan increíble que es que te va a volar la cabeza.
Mira, tenemos aquí el list of books.
Aquí tenemos la lista de todos los libros.
En el book item, aquí tenemos esta imagen, ¿no?
Con esta clase y con este source.
Lo vamos a poner aquí un poco mejor.
Entonces, aquí lo que le podemos decir en el style, le podríamos dar un nombre a la transición de esta imagen.
Le podemos decir, oye, aquí tenemos el view transition name.
Le podemos decir image.
¿Image? ¿Vale?
Image.
Vamos a decirle que esta es la imagen.
Lo que pasa es que aquí vamos a encontrar un problema ya.
Pero bueno, por ahora vamos a hacer esto, ¿no?
Style view transition name image.
Si yo guardo ahora mismo, bueno, pues sigue exactamente igual.
Pero fíjate que ha pasado una cosa.
Que no sé por qué ha desaparecido todas las animaciones que ha hecho.
Como puedes ver, ya no hace el fade in, fade out.
Bueno, lo que está pasando es que ya, como nosotros estamos añadiendo aquí un view transition,
name y le estamos diciendo una animación, lo que está diciendo, está entendiendo el navegador,
es que ya no quiere la animación por defecto, sino que realmente tú quieres algún tipo de animación.
Lo que pasa es que no está encontrando cómo hacer este nexo.
Porque yo ahora mismo solo le estoy diciendo que esta imagen tiene el view transition name image.
Pero no sabe cómo tiene que hacer esta transición, ¿no?
¿Por qué?
Porque esto es solo la foto antigua, ¿no?
Donde tenemos esto.
Cuando estamos en la foto nueva, ¿dónde tiene que hacer este nexo?
Bueno, pues lo que vamos a hacer es ir a la página donde teníamos los libros,
que aquí teníamos esta imagen de aquí, esta imagen que tenemos aquí,
pues también queremos que tenga este estilo con este image.
¿Vale?
Guardamos los cambios, nos vamos para atrás y le damos.
¿Qué es lo que está pasando?
¿Qué ves?
Me está diciendo, oye, es que no me esperaba tener imágenes, las transiciones duplicadas.
Y por lo tanto me estoy haciendo un lío.
Tienes aquí las animaciones, este tiene la misma animación, este tiene la misma animación,
todos tienen la misma animación.
¿Cuál es el problema?
Que las animaciones no pueden estar duplicadas,
porque si no, no sabe qué es lo que tiene que animar.
Así que el estilo que vamos a darle en el book item no va a ser image.
No vamos a poder hacer animaciones duplicadas, solo puede haber un elemento.
¿Qué vamos a hacer?
Vamos a aprovechar que tenemos la ID de cada libro y le vamos a decir,
oye, pues mira, esta es la ID del libro.
De hecho podemos poner book, tal.
O sea, el view transition name es específicamente de esta imagen,
el view transition name book con su ID.
¿Vale?
Y aquí ya tenemos una imagen que lo tenemos totalmente único.
¿Ves?
Ahora podemos ver que sí que está haciendo bien el fade in, fade out,
ya está haciendo la que es por defecto,
pero todavía no está enlazando las imágenes.
¿Por qué?
Porque esto mismo que hemos hecho aquí lo tenemos que hacer con cada libro,
con cada detalle.
Y ahora sí que va a entender cuál es la animación que tiene que hacer entre una y otra.
Ahora sí que vamos a enlazar cada una de las páginas,
de forma que cuando le demos a clean code,
hace esta cosa tan maravillosa.
Ahora hemos enlazado cada una de las imágenes con la foto antigua y la foto nueva,
y hacemos esta animación entre las imágenes.
Lo que estamos haciendo es que, como sabemos, le estamos diciendo al navegador,
oye, esta imagen de aquí tiene la transición en la foto nueva hacia aquí.
Por lo tanto, tienes que mover este elemento en la siguiente página.
Y así es como lo conseguimos.
Simplemente lo que hemos hecho es un enlace.
¿Qué os parece?
Espectacular, ¿eh?
¿Espectacular o qué?
Increíble, increíble.
O sea, tremendo.
Además, es que esto lo podéis llevar no solo con imágenes,
con títulos, con lo que sea.
Lo que es súper importante es tener en cuenta que la animación tiene que ser única.
O sea, claro, porque si no, no sabe que esta imagen tiene que ser para este en concreto.
Y no importa dónde esté la imagen, porque una vez que lo mueves va a encontrar su sitio, ¿sabes?
O sea, sabe exactamente y te hace todo el trabajo.
O sea, es espectacular.
Os lo vuelvo a explicar, ¿vale?
Para la gente que no lo ha entendido.
Para poder hacer esta animación necesitamos...
Tenemos dos fotos siempre, ¿no?
Para que nos hagamos una idea.
Estas son las dos páginas que queremos mover.
Esta, a la izquierda, tenemos la foto de antes.
Y a la derecha tendríamos la foto del después.
Tenemos dos fotos.
Lo que queremos es decirle que, cuando el usuario haga clic aquí,
¿vale?
Aquí.
Cuando hace clic aquí, lo que le decimos es, oye, quiero pasar de la vieja a la nueva.
Y esta imagen de aquí me la tienes que mover aquí.
Por lo tanto, lo que tenemos que hacer es crear un nexo.
Para crear el nexo, lo que estamos utilizando es utilizar el View Transition Name.
El View Transition Name, estamos nombrando que el View Transition Name de este Clean Code
tiene que encajar con este.
O sea, que el View Transition Name tiene que ser único.
Así que le ponemos que es Book Clean Code, ¿vale?
¿Qué es lo que hace el navegador?
Pues que el navegador, cuando estamos navegando de esta página alt a la nueva,
busca en la foto antigua esta transición y en la foto nueva esta transición también.
¿Vale?
Y entonces sabe que tiene que hacer ese movimiento.
¿Cómo lo hemos logrado con código?
Súper fácil.
Lo único que hemos hecho es crear un nexo, como un link.
Lo único que hemos tenido que hacer para crear este link es indicar este View Transition
en cada elemento, en la página anterior y en la página nueva.
En la página anterior lo hemos hecho aquí en el Book Item, porque como estamos renderizando
una lista de libros, lo que en el Book Item hemos dicho es, esta imagen de la Home tiene
un estilo con el View Transition Name de Book y el ID.
Y entonces, en la página nueva, que es justamente esta del Book, que es el detalle de todo el libro,
lo que le hemos dicho es, este estilo tiene el mismo Transition Name.
Y ahí hemos creado el enlace, ¿vale?
Hemos creado el enlace de la página de la Home a la página del detalle.
Y también funciona al revés.
Una vez que tú estás en la Home, vas hacia adelante.
Ahora, si vas hacia atrás, también hace el efecto contrario.
Porque el nexo es bidireccional.
Es de la Home al detalle, el detalle a la Home.
O incluso una tercera página.
Quiero decir, no hace falta que sea Home detalle, sino a lo mejor del detalle te vas a la búsqueda,
también podrías llegar a hacer esto.
Para que veamos otro ejemplo, todavía más potente, también lo podéis hacer con títulos.
Aquí no lo hemos hecho, pero imaginad que en la lista, cuando estamos aquí en el Index,
¿vale?
El Title.
Mira, el Title.
¿Veis que tenemos este Title aquí?
Puede pasar exactamente lo mismo.
Tenemos aquí un Title y decimos, hostia, pues el Title, el Style que tiene este Title,
vamos a ponerle que es el View Transition.
¿Vale?
View Transition Name.
Y lo bueno es que este solo podemos utilizar Title directamente, ¿no?
Este es el título.
Ahora, esto, vamos a crear un nexo con un título que vamos a poner aquí en un header.
Vamos a tener aquí un header.
Vamos a tener un título, pero aquí este va a ser un poco más pequeño, claro,
porque no tiene tanto sentido que sea tan grande.
Entonces, vamos a poner tres, no sé qué.
Vale, View Transitions, ¿vale?
Aquí pone libros de programación.
Vamos a hacerlo un poquito más grande.
Tampoco mucho.
H1.
O sea, este.
¿Por qué este no se me está haciendo más pequeño?
Sí, MD.
Ah, porque no es MD el cabrón.
Ah, sí, sí, sí.
O sea, es que estoy intentando hacer este más pequeño.
¿Ves?
Ahora, es que no sé, hay algún error en Tailwind que no hace el...
Automáticamente, cuando cambio, ¿ves?
No hace correctamente eso.
Ahora sí.
¿Vale?
Ahora sí, vale.
Y esto, vamos a poner aquí Leading.
Vamos a cambiar el Leading aquí.
Leading.
A ver si hace la animación.
Leading 3.
No sé.
Ahora no me está haciendo el Leading.
O sea, es que quiero juntarlos un poco.
Bueno, a ver.
No pasa nada.
Ahora la idea es...
Vale.
En este caso, veo que no lo está haciendo...
¿Veis que no me está haciendo la animación?
O sea, no está moviendo el View Transition Title.
No me lo está moviendo.
View Transition Name Title.
View Transition Name Title.
No sé si es porque cuando es un título y no es exactamente igual...
Si a lo mejor solo lo moviésemos, igual sí que sería capaz de mover el elemento.
Pero claro, a lo mejor no es capaz de mover exactamente el título.
Porque esperaba que el título sí que me lo moviese, pero me sigue haciendo básicamente el...
¿Sabes?
A lo mejor decía, hostias, igual sí que lo mueve el título y lo pone ahí, pero no lo mueve.
Directamente a lo mejor con las imágenes sí que puede ser capaz de hacerlo, pero a lo mejor con el texto, si no es exactamente igual, no va a ser capaz de hacerlo.
Hay una demo que es espectacular.
Esta es una, por ejemplo.
Esta es una, pero sí, ya veis que en este caso sí que se anima lo que es la imagen.
¿Veis que la imagen sí que se mueve?
Se mueve también el fondo.
A lo mejor lo del fondo, el color, eso sí que es animable.
Pero aquí podéis ver un ejemplo.
Esto está hecho con justamente lo mismo.
Y aquí tendríais el ejemplo.
Y ahí se ve como la imagen se mueve, que eso sí que se puede animar la posición.
Y también el fondo del color también se está haciendo.
Hay una.
Esta.
Vale, gracias.
¿Qué me lo han pasado?
Andev, mirad, mirad.
Esta va a volar la cabeza.
Para que veáis las posibilidades que tenéis y también haciéndolo con Astro.
Y aquí veréis el código y está muy chulo.
Esto que vais a ver ahora está hecho exactamente con lo mismo que hemos hecho hoy.
Fíjate, le damos al click.
Es espectacular.
O sea, además lo bien que va.
También cambia la URL.
Como podéis ver, pues la animación que hace aquí al pasar entre una y otra.
Esto está hecho con exactamente la misma tecnología.
¿Vale?
Si le damos aquí, ¿veis?
Encima con un vídeo funciona totalmente.
El vídeo funciona igual.
Hace esta animación.
¿Veis?
O sea, es increíble.
No se nota absolutamente nada el hecho que se mueve el scroll.
O sea, es como súper nativo.
Y en este caso sí que anima el texto.
¿Veis que aquí sí que está animando el texto?
Pues eso lo quiero hacer yo también.
A ver, vamos a ver qué está haciendo aquí.
Playlist.
Claro, aquí a lo mejor es que ahí está el tema.
Porque veo que aquí pone View Transitions Name, Playlist Title.
Y aquí también tiene el Playlist Title.
¿Ves?
Aquí sí que está haciendo exactamente lo mismo.
¿Ves que está haciendo View Transitions, Playlist Title?
Vamos a ver.
Aquí en nuestro playlist.
A ver, voy a ponerle Book Title.
Book Title.
A ver si es que a lo mejor necesito aquí el nombre.
No creo, ¿eh?
Book Title.
Vamos a ver si tenemos algún error.
Pero no sé si es que hay algo que estoy intentando animar que no puedo.
Vamos a intentar utilizar exactamente lo mismo.
¿Vale?
Exactamente lo mismo.
Pero vamos a ponerle una escala.
A ver si así...
Solo para ver si se anima.
¿Vale?
Vale.
¿Veis que ahora sí que se anima?
Claro, ¿qué es lo que pasa?
Que se puede animar ciertas cosas.
Ahora sí que funciona.
Porque se puede animar ciertas cosas.
No tiene...
Claro, si intentas cambiar la fuente, el tamaño de la fuente, creo que el tamaño de la fuente no es animable.
Y seguramente ellos lo que deben estar haciendo, si no me equivoco, o a lo mejor sí que están animando solo la fuente.
A lo mejor es que han intentado animar alguna cosa que no podía.
Porque aquí sí que veo que pone 30 píxeles y aquí después tiene como más.
A ver, vamos a hacer una prueba rápida.
Si aquí le ponemos simplemente esto, solo cambiar el tamaño de la fuente.
Igual es que he cambiado otra cosa que no debía ser.
No, ¿veis que no hace...?
Sí que lo hace, pero no lo hace del todo.
¿Veis que no hace muy bien la animación?
Pensaba que haría mejor la animación.
Pero con el Scale sí que funciona bien.
O sea, el Scale sí que funciona...
Ahora sí que hace...
Sí que funciona bien.
Ahora sí que funciona bien.
Y lo que está chulo de esto es que podéis utilizar aquí el Scale este.
Y entonces, a lo mejor, al lado, podemos hacer esto.
Podemos poner aquí un botón, Flow Byte, Flow Byte, Button, Go Back, por ejemplo.
Hay botones aquí que son solo el icono.
Mira aquí, por ejemplo.
Debería ser el segundo.
Vamos a expandir esto.
Hacemos esto aquí, esto aquí.
Esto lo ponemos aquí.
Y esto deberíamos hacer un Class, Flex, Gap, X, 4, Justify, Center, Items, Center, Blue.
Bueno, vamos a dejarlo blue.
Esto lo vamos a rotar porque si está para allí tenemos que rotarlo.
¿90?
¿90, no?
Ahora tengo dudas.
A ver.
¿No?
¿45?
No.
No.
¿90 no?
¿180 yo también?
Vale.
Y esto, en lugar de hacer un Justify, Center, lo que tenemos que hacer es un Space Around.
Space Around o Justify Around.
Y aquí, cuando le hacemos un click, lo que...
Bueno, a ver.
Esto, en realidad, deberíamos hacerlo con un Button.
Estaría bien.
Lo que pasa es que no tenemos interactividad con Astro por defecto.
Vamos a poner esto, ¿vale?
Para que al menos tenga esto.
Y ya tendríamos al menos esto.
Pew, pew.
Ahora lo hace un poco raro, ¿no?
Porque ahora, como, claro, como al haberlo puesto aquí, a lo mejor queda un poco extraño.
Con el flex y a lo mejor no lo detecta el todo bien.
Lo que podemos hacer, si no, es poner esto por acá.
¿Vale?
Vamos a ponerle el header.
Class Relative.
Vale.
Ahora lo arreglamos, ¿eh?
¿Ves?
Porque ahí queda finito.
Bueno, a ver.
No pasa nada.
Tampoco lo quería...
No quería hacerlo...
Lo que quiero poner encima, lo que pasa es que estaría un ratillo.
Lo voy a dejar ahí solo para que veamos este efecto y ya está.
Si no, lo quería mover justamente encima.
Pero bueno, no pasa nada.
El tema, que esta sería un poco la animación.
Que tampoco está nada mal, ¿no?
Y ahora sí que tenemos el tema de que se está animando el título también.
Súper rápido.
Me sorprende un montón.
Bueno, de hecho, estoy pensando que esto...
Podemos poner Fix Left 2, Top 2.
Y lo vamos a dejar ahí como en el...
Ahí.
Y ya está.
Y así lo tenemos más fácil.
Creo que quedaría mejor con el Black.
Black.
Aquí podemos poner un Blue 950 para que se note un poquito.
Dark Black 950.
Pero la verdad es que queda chulo, ¿eh?
Para ser un proyectito que hemos hecho en un momento.
¿Y qué pasa en Mobile?
Pues no pasa nada.
A ver, no he hecho Responsive.
También es verdad.
Aquí sí que lo he hecho un poquito.
Aquí no lo he hecho.
Pues nada.
¿Qué pasa en Mobile?
Pues en Mobile no pasa nada.
En Mobile también sigue haciendo el mismo efecto.
Lo importante, obviamente, es que...
Joder, qué chulo, ¿eh?
Está súper chulo.
Es que está súper chulo como queda.
A ver, lo malo de todo esto es el soporte.
A día de hoy no está mal.
Que tiene un 65% de soporte.
No está mal.
Pero es que el soporte viene solo y justamente de todo lo que tiene que ver con Chrome, ¿no?
Chrome, Edge, Opera, que está basado todo en Chrome.
65 es un montón.
Pero, por ejemplo, en Safari, Firefox, no funciona.
Le estamos dando una mejor experiencia a los usuarios que sigo que lo puedan ver.
Y la verdad es que queda súper bien.
Hace que tus páginas web cobren vida.
Esto, amigos, es el futuro de la programación web.
Os lo digo en serio.
Esto es que el día de mañana nos vamos a cansar de ver esto por todos los sitios.
Lo vais a tener que entender, que dominar, porque esto va a marcar la diferencia.
Va a marcar la diferencia entre un diseño chulo o un diseño que no está mal.
Gracias por ver el video.