Hoy vamos a desarrollar un plugin de Tailwind desde cero
Y es muy interesante, yo estoy muy emocionado
Primero, porque yo al menos no he visto mucho contenido de cómo hacerlo desde cero
O sea, no he visto ningún sitio... Bueno, yo qué sé, podemos buscar
Ahora me calla la boca, es que me puede callar la boca esto muy fuerte
Yo qué sé, si buscamos Tailwind, Tailwind, plugin desde cero
O desde cero, o crear
Mira, sale Tailwind, curso desde cero, curso, cómo instalar correctamente
¡Nada! No hay nada de esto
Nada, nada, nada de esto
Vamos a aprender a crear un plugin de Tailwind desde cero
Para añadir animaciones CSS en tu web súper fácil
Así que vais a ver, vais a ver porque va a estar muy chulo
¿Y cómo lo vamos a hacer?
Esta es la documentación y os voy a enseñar el tema de las animaciones
Ya sabéis que Tailwind podéis crear vuestros plugins
De hecho tienen un montón de plugins disponibles
Aquí lo podéis tener, veis, Official Plugins
Tenéis estos plugins que lo que te hacen es añadirte funcionalidades a Tailwind
Lo cual está bastante bien
Entonces, ¿qué pasa?
Que de animaciones no hay, no hay en ningún sitio
¿Animaciones? ¿Dónde están animaciones?
Sí que hay de terceros, que ahora os mostraré las referencias
¿Vale?
Y ahora veremos esto
Nosotros lo haremos desde cero
Y veremos cómo lo vamos a hacer
Qué animaciones vamos a sacar
Pero en principio os voy a leer
¿Va a funcionar con VIT?
Por supuesto
Con VIT, con Astro, con cualquier cosa
Sería genial también un plugin de Visual Studio Code
Lo haremos también
Y una extensión también
Lo vamos a hacer, lo vamos a hacer
Tailwind CSS Animated es una
Y ahora la enseñaré porque está bastante chula
Vamos a dar cañita
Os voy a contar
Tailwind
Tailwind es el framework CSS más utilizado o conocido del mundo
Y funciona con Utility Clases
¿No?
Que tú tienes una clase
Y esta clase significa algo
Pues que te hace un background
Que te redondea una imagen
Que le pone un tamaño y tal
Pero, ¿no sería genial con una clase
También poder animar tus elementos de Tailwind?
Bueno, poder se puede
Porque el propio Tailwind ya tiene algunas clases específicas para hacer esto
Por ejemplo, Animate None
Para quitar la animación
Animate Spin
Pues para añadir esta animación de Spinner
La del ping y la del pulse
Pero no tiene muchas
Le faltan animaciones
Le faltan
Estaría genial que tuviese más
¿Por qué?
Porque esto haría que pudieras hacer un fade in
Un fade out
Un slide in
Un montón de cosas
Poniendo una sola clase
Entonces, ¿qué pasa con esto?
Pues lo que pasa es que ya existe una forma
Ya hay un plugin que lo hace
Que es este de aquí
¿Vale?
Que se llama Tailwind CSS Animated
Que yo lo uso un montón
Y me encanta, ¿eh?
Está súper chulo
Está genial
Tiene un montón de cosas
A mí me gusta bastante
Pero hay otras cosas que no me gustan
Uno, que creo que le faltan animaciones
Le faltan algunas animaciones
Y le faltan algunas preferencias
Pero me parece maravillosa esta biblioteca
Yo la he usado un montón
En un montón de mis proyectos
La habrás visto
Que la he utilizado un montón
Y no tengo ninguna queja
Pero me gustaría crear un plugin desde cero
De Tailwind
Que sea como este
Pero además
Que se puedan añadir más animaciones
Y más configuraciones
Y entre las animaciones
Que tiene estas
Pero imaginad
Que vamos a buscar
Las mejores animaciones del mundo
Del universo
¿Vale?
Que son estas de aquí
Y Belic
Que tiene un montón de recursos interesantes
También tiene una galería
De animaciones de Tailwind
Que son estas
Fijaos que tiene un montón
Pero un montón
Por ejemplo
¿Ves?
Pues el Fade In
Fade Out
El Fade In
Up
¿Ves?
Para arriba, para abajo
¿Cuál es el problema
Que tenemos aquí
Con esta galería?
Esta galería está muy
Muy muy chula
Pero
El problema es que
Las tienes que copiar a mano
Si tú quieras esta animación
Tienes que venir aquí
Copiarla
En la configuración de Tailwind
Y entonces utilizarla
Que no está mal
No está mal per se
Pero es un poco rollo
Es un poco rollo
Porque al menos a mí
Me molesta tener que estar
Todo el día a copiar y pegar
Sé que está de moda ahora mucho
Pero yo a veces
Si por ejemplo
Si quieres utilizar
Cuatro animaciones
Cuatro animaciones
Tienes que copiar las cuatro
Tienes que ir a la configuración
A mí me parece un rollo
Me parece un rollo
Y yo no
No tengo tiempo que perder
No tengo tiempo que perder
Tengo que hacer demasiadas cosas
Así que lo que vamos a hacer
En esta clase
¿Vale?
Lo que vamos a hacer
Es un plugin
Que nos añada
Todas esas animaciones
Todas
Todas las que vemos aquí
Todas las vamos a tener disponibles
Y sabes lo que es lo mejor
Lo mejor que tiene Tailwind
Es que si tú no utilizas
Ninguna animación
Ninguna clase
Oye pues no pasa nada
No se cargará
Es CSS
Y ya está
Y fijaos que hay algunas muy bonitas
Esta de Blur Fading
Esta es buenísima
Con vibraciones
Mira
Rotational Wave
Es que hay muchas muy bonitas
O sea que son un montón
De animaciones más
¿Vale?
Así que
Esto es lo que vamos a hacer
Un plugin
De Tailwind
CSS
Para añadir
Estas animaciones
CSS
En nuestros proyectos
Añadiendo una sola clase
Una sola clase
En nuestros elementos
Pero además
También vamos a poder
Configurar
La duración
El delay
Y lo que nos dé tiempo
Y además
Vamos a publicarlo
En un paquete en Pien
Para que cualquier persona
La pueda utilizar
En sus proyectos
Y además
Le vamos a hacer
Una web rápida
Para poder ver
Que todo está funcionando
Y todo esto
Lo vamos a hacer hoy
Y lo vamos a hacer
Con Javascript
Y vas a ver
Que no es difícil
Para nada
Así que
Con todo esto
Y con toda la documentación
Que tenemos aquí
¿Vale?
De cómo se crean
No te preocupes
Que yo te voy a enseñar
Desde cero
Cómo se crean
Plugins de Tailwind
Y eso
O sea con todas
Estas cositas
Lo vamos a hacer
Lo vamos a empezar
Y lo único que tenemos que hacer
Es pensar en un nombre
Súper original
Para nuestro proyecto
¿Cuál puede ser?
Pues yo que sé
Tailwind Animations
Vamos a poner
Tailwind Animations
Ya está
Nombre perfecto
Para nuestro proyecto
Y lo siguiente
¿Qué es lo que tenemos que hacer?
Pues iniciar el proyecto
Así que hacemos
Pnpm init
Menos i
Para inicializar
¿Vale?
No le gusta el menos i
Pues nada
Pnpm init
Y ya nos ha creado
El package.json
Con todo esto
Así que ya podemos ir
A nuestro proyecto
¿Veis?
Aquí tenemos el package.json
Y ya podemos crear
Pues nuestra carpeta source
Y todo esto
Vamos a crear
Una carpeta source
Y vamos a copiar aquí
Un index.js
Y también vamos a necesitar
Un theme.js
Lo primerísimo
Yo he creado ya
Los archivos vacíos
Lo primerísimo
Que vamos a tener que tener
En cuenta
Para que no se me olvide
Luego
Primero el nombre del paquete
Lo voy a llamar
Midudev
Barra
Tailwind Animations
La versión 1.0.0
Bueno
Es un poquito aventurado
Vamos a empezar
Por la 0.0.1
Que es la primera versión
De prueba
Descripción
Tailwind
CSS
Plugin
To add animations
To your website
¿Vale?
Ok
Y ahora el main
Sería
¿Cuál es el archivo principal?
Que cuando se importe
Este paquete
Va a servir
De punto de entrada
Esto es importante
Porque si lo dejo
En index.js
Fíjate que este archivo
En realidad
No existe
En la raíz
Sino que está dentro del source
Así que vamos a poner
Punto barra source
Barra index
O sea que cuando importemos
Este paquete
Va a ir a buscar
El index.js
Vale
Luego en scripts
Por ahora dejamos esto así
La licencia
El autor
Vamos a poner
Miguel Ángel Durán
Vamos a poner aquí
Midudev
An
Su
Maravillosa
Más su madre
Más su madre
Y su madre
Hostia
Ahora viene mi madre
¿Te imaginas?
Mi madre
Y se pone
Ay que risa
Ay que risa
Y su mami
Y su equipo
Y su maravillosa
Comunidad
Ay que risa
Ahora entra mi madre
Y se pone a programar conmigo
Sería increíble
Si
Durán lleva tilde
No sé por qué no lo he puesto
Bueno pues ahí
Ahí tendríamos esto
¿Vale?
Vamos a iniciar
Oye muchas gracias a todos
Por haber dejado
El tren del hype
Y el nivel 4
Muchas gracias por vuestras subs
Amigos
Muchas muchas muchas gracias
Gracias Cristian
Por esas 5 subs
Gracias
Bueno
Lo primero que vamos a hacer
Para asegurarnos
Que todo funciona
Muy bien
¿Vale?
Que nuestro código está buenísimo
Es instalar un linter
Yo ya sabéis que me encanta
Standard
Es mi linter favorito
Porque se instala rápido
Se configura poco
Y se pierde poco tiempo
Y además
Funciona sin
Sin punto y coma
O sea lo tiene todo
Para mí
Así que por ahora
Vamos a utilizar este
Más adelante veremos
Si tenemos algún problema al respecto
Porque cuando creemos la web
Pues igual tenemos que hacer algún cambio
¿Vale?
Pero por ahora
Ya tenemos esto
Obviamente
Una dependencia importante
Que vamos a necesitar
Es el propio Tailwind
¿Vale?
Así que instalamos
Tailwind CSS
Creo que CSS
Creo que CSS
Sí, es CSS
Vamos a ponerlo como dependencia de desarrollo
¿Vale?
Veis el menos D
Que también lo he puesto con el de Standard
Esto significa que es una dependencia de desarrollo
¿Ok?
Por eso se pone en Dev Dependencies
De desarrollo quiere decir
Que no la necesita para funcionar
Aunque la verdad es que Tailwind
No es una dependencia de desarrollo
Sino que sería una Pier Dependency
Luego os comento esto
Pero una Pier Dependency
Querría decir que es una dependencia
Con la que esperas que el proyecto
Ya venga
¿Vale?
Y en nuestro caso
Pues nada
Deberíamos funcionar
Con cualquier versión
Que sea la 3 y algo
Eso es importante
Que nuestro plugin
Va a funcionar
Con cualquier versión de Tailwind
Que sea superior a la 3
A la 3.0
Podría ser la 3.1
3.2
3.3
3.4
¿Sabes?
Esa es la idea
Cuando utilizamos las Pier Dependencies
Estamos diciendo justamente eso
Que esperamos que el proyecto
Que esté utilizando esto
Pues ya venga con Tailwind
¿Ok?
Esto muchas veces justamente
También lo haces con React
Por ejemplo
Un componente en sí
Ya tiene de Pier Dependency
Tendría React
Porque espera
Un componente React
Espera ser utilizado
En un proyecto que se utiliza React
¿Vale?
Ese es el tema
¿Por qué?
Porque si lo pones como dependencia
Puede ser problemático
Si pones aquí en React
Y pones 17.02
Y resulta que en el proyecto
Utiliza la 18.00
Se van a instalar dos versiones de React
Y la cagaste
La cagaste
¡Pam!
Entonces
Venga
Vamos con más cositas
¿Hay algún comando para agregar Pier Dependencies?
Hostia
Buena pregunta
Bueno
Yo digo Pier
Y es Pier
Creo que es Pier Dependencies
Pero no
Creo que no
Por ahora lo dejamos así
Voy a dejar este de Pier
Y este sí que es importante aquí
Dejarlo con el caret
Porque aquí sí que es verdad
Que no tenemos que ser
Muy cerrados en la versión
¿Ok?
Esto sí que es importante
No sabía de eso
Ahora todo tiene sentido
Joder Secio
¿Cuántos meses llevas aquí?
Llevas
Treinta y
No sé
Treinta y ocho mil
Once meses suscrito
Nunca te acostará
Sin aprender una cosa a más
En este caso
No hay que sacarlo
De Pier Dependencies
Se podría
Se podría
Porque ahora sí que las instala
Pero
Esto puede ser interesante
Porque en la dependencia de desarrollo
Justamente a lo mejor
Quieres instalar una versión específica
¿Sabes?
Entonces dices
La pongo en Pier Dependencies
Para instalar
La versión específica
Y en Pier Dependencies
Las que voy a soportar en general
Por eso puede ser interesante
Poner en Pier Dependencies
Y además porque muchas veces
Hay formas de evitar
Que existan en las Pier Dependencies
Y claro
Aún así vas a querer
Que las Dependencies
Sí que existan
Ahora que ya tenemos esto
Vamos con lo importante
Que es el Theme
¿Vale?
En el Theme
Básicamente tenemos que exportar
Un objeto
El Theme
Sería el tema
Donde vamos a tener
Nuestras animaciones
Normalmente
Seguro que tú ya lo has visto
Cuando tienes un Theme
De Tailwind
Ahí puedes extender
Animaciones
Colores
Un montón de cosas
Nosotros vamos a añadir
Aquí en un archivo Theme
Todas las animaciones
Que necesitamos
De hecho
Que son estas animaciones
Maravillosas
Es que están muy chulas
Es que me encantan
Es que tengo ganas
De utilizarlas ya
Ya las quiero utilizar
Vale
Pues me voy a ir
Al proyecto este
Que son las animaciones
Que ya están preparadas
Para copiar y pegar
Pero no
De utilizar fácilmente
Y creo que
Si no me equivoco
Vamos a buscar aquí
Su Theme
¿No?
No tiene un Theme
No tiene un Theme
A ver
Tailwind Config
A ver
¿Dónde está?
Aquí
Vale
¿Veis aquí que tiene
Extend
No sé qué
No sé cuánto
Me lo voy a copiar todo
Copiar
Robar
Copiar y robar
He avisado al creador
Os digo una cosa
He avisado al creador
De que iba a hacer esto
Y le ha aparecido
Una idea maravillosa
Que lo sepáis
Que no
Que muchas veces
Ah es que te lo estás robando
Me lo estoy robando
Llama a la policía
Si quieres
Llama a la policía
No pero he hablado
Con el creador
Y dice que le gustaba
Mucho la idea
Así que
Lo hacemos por él
Pues ya tendríamos aquí
Todas las animaciones
Aquí lo que estamos haciendo
Básicamente fijaos
Que él lo que tiene aquí
Es una configuración
De Tailwind
Pero claro
El rollo
De lo que tiene él
Que no está mal
Es que te tienes que copiar
La configuración a mano
Y pegarlo en tu proyecto
Esto lo vamos a mejorar
Con nuestro plugin
Para hacer mejor
La experiencia de desarrollo
Y lo bueno
Es que él
En su tailwind.conf
Y .ts
Fíjate que ya tiene aquí
Todas las animaciones
Así que estas animaciones
Ya las vamos a poder tener aquí
Maravillosas
Nos las copiamos
Y nosotros ahora
Haremos la magia
De cómo utilizarla
Con nuestro plugin
¿Dónde lo hacemos nosotros?
Bueno
Pues aquí tenemos el theme
Y en el theme
Hemos copiado
Tanto las animaciones
Como los keyframes
¿Vale?
Ya tenemos aquí
El primer paso
El archivo theme
Con las animaciones
Y los keyframes
Ahora
Tenemos que crear
Nuestro plugin
¿Vale?
Aquí empieza la magia
La magia básicamente
Porque crear un plugin
No es difícil
Pero
Pero hay que crear el plugin
Así que vamos a importar
Create plugin
De tailwind.css
Barra
Plugin
¿Vale?
Esto como veis
Es una importación
Por defecto
O sea le podéis poner
El nombre que queráis
Yo con create plugin
Ya me parece que
Que está bien
Que fácil
Y vamos a importar
El theme
Que acabamos de crear
¿Vale?
Este
Y ahora tenemos que
Pues básicamente
Exportar por defecto
Export
Default
El create plugin
Pero
Hostia
Se me ha olvidado aquel from
¿Vale?
El create plugin
¿Vale?
Aquí
Necesita dos cosas
Uno
El plugin
Plugin creator
Y el plugin config
¿Vale?
Dos cositas
La creación del plugin
Y la configuración del plugin
¿Vale?
Pues para el plugin creator
¿Vale?
Por ahora
Vamos a poner esto vacío
Y el plugin config
Esto es un objeto
¿Vale?
Esto es lo que necesitamos
Para crear un plugin
Creamos un plugin
Y le pasamos dos cositas
El creador del plugin
Que ahora
Explicaré lo que necesita
Y la configuración del plugin
Para la configuración del plugin
Lo único que tenemos que pasar
En este caso
Es el tema
¿Por qué?
Porque así
Le vamos a proporcionar
Al plugin
Toda esta información
Toda esta información
Así que cuando queramos acceder
Y decirle
Quiero que utilices
La animación del fade in
¿Vale?
Pues ya saber
Que CSS es el que tiene que aplicar
Donde lo tiene que buscar
Que valores se pueden acceder
Luego vamos a añadir más valores
Estos son los del principio
Luego veréis que vamos a añadir
Para el delay
Para la duración
Y todo esto
Entonces
Aquí tenemos la configuración
Y ahora vamos a crear
El creator
¿Vale?
Una cosa
Truco del almendruco
Vamos a ver un truquillo
Vamos a ver un truquillo
¿Vale?
Porque el tema es
Ah es verdad
Mira muy bien
Jackson
Jackson es la primera intervención
Del chat
Y tienes toda razón
Se me ha olvidado poner aquí
Que esto es del tipo
Módulo
¿Vale?
¿Por qué?
Porque como estoy utilizando
Los imports
Y los exports
¿Vale?
En no.js
Por defecto
Esto es
Common.js
Y tenemos que poner
Que es de tipo módulo
Bien visto
Muchas gracias
¿Eh?
El icono de micro
En visual studio code
Está encendido
Ok code
Hey code
No funciona
Esto es mentira
No funciona
En mi portátil
Funciona perfectamente
Hey code
Que va
No funciona
No sé por qué no funciona
Es que se puede manejar
Con la voz
A ver
GitHub speech
A ver si soy capaz
Speech
A ver si soy capaz
Speech
Speech
Este
Cambiar a la versión
No sé
Voy a instalar esta
Un momento
A ver si funciona
A mi me funcionaba
Hey code
A ver
A ver si ahora recargando
A ver
A ver
A ver si sale
Hey code
Hey code
Hey code
Ah si si
Ha salido
Ha salido
Hey code
Habéis visto
Ahora si
Ahora si
Le puedes decir
Hey code
Create here
A plugin
For tailwind
To add animations
For my website
Oh
Locurón
¿Eh?
Que os parece
Sin manos
Si si
Muy bien
Me ha entendido perfectamente
Pero no me ha
No me ha funcionado
No me ha arreglado nada
Una mierda
Sin manos
Buenísimo
Que os parece
Está chulo
Está chulo
Bueno igual luego lo utilizamos
Bueno no el trucazo
El trucazo que quería enseñar
Es tipar esto
Porque claro
Tenemos aquí el plugin creator
Y el plugin config
Pero no sabemos muy bien
Cual es el contrato que tiene
Entonces
Como no vamos a utilizar
TypeScript
Para simplificar esto
Vamos a utilizar
JS doc
Que esto
Está muy chulo
Porque
Como Visual Studio Code
En realidad utiliza TypeScript
Cuando tú utilizas
JS Code
Automáticamente
Ya pilla los tipos
Entonces le podemos decir
Que importe los tipos
De Tailwind CSS
Barra
Types
Barra
Config
Y aquí sacamos
El plugin creator
¿Vale?
Y aquí ahora
Ya tenemos
Importados los tipos
Y esto mismo
Lo hacemos para la configuración
Y hombre
Esto está bien
Porque así
Pues cualquier cosa
Ya por ejemplo
Aquí
Si intentas escribir
Ves que ya me pone aquí
Las cosas que pueda acceder
Pues el theme
Ya detecta que está bien
Y ya
Ah no
Pues me ha dejado fatal
A ver
Punto
Plugin config
Ah es que es plugins config
Perdón
Es plugins config
Ahora sí
Ahora sí
Ahora sí
Vale vale
Ahora sí
Ahora
Ahora no sé yo
Ahora no sé yo
No me está saliendo los
Yo creo que no
No sé si es que he puesto esto mal
A ver
Plugin
Utils
Plugins config
¿Tira este?
Plugins config
Puede ser
Lo que pasa es que no lo está pillando
Handler config
No
Igual no es este
A ver
Create plugin
Aquí lo deberíamos ver
Plugin config
Partial config
Ah es que es un
Partial config
Undefined
O sea es punto config
Debería ser así
Vale vale
Ahora ya
Ahora sí
Ahora sí
Vale ahora sí
Ahora sí
Ahora sí
Ahora sí
O sea que no es plugin config
Me lo he inventado yo
Pero bueno
Al menos ahora lo tenemos tipado
Y ahora tiene bastante sentido
Porque ahora podremos empezar a escribir
Aquí otra vez
A ver
A ver
Debería decirnos que esto es un plugin creator
A ver
Sí
Nos dice que es un plugin creator
Vale
Entonces el plugin creator
Básicamente necesita
Aquí lo que accede
Lo que le llega
Es la API
Vale
Tenemos aquí la API
¿Ves?
Plugin API
Por ahora aquí no necesitamos hacer nada
O sea que plugin creator
Ahora esto lo arreglaremos
Solo
Simplemente
Así
Ya tendríamos
Una parte hecha
¿Vale?
Porque ya estamos creando el plugin
Con el plugin creator
Y ya le estamos pasando aquí
El plugin config
Toda la configuración del theme
Y tal
Solo con esto
Ya hemos creado nuestro plugin
Y ahora lo vamos a probar
¿Vale?
Vamos a probar si realmente esto funciona para algo
Porque a lo mejor no funciona para nada
¿Por qué funciona?
Porque como ya le estamos pasando
Una extensión
De la configuración de las animaciones
Y el tema
Se lo estamos pasando
En la configuración del plugin
Esto lo que debería hacer
Es hacer que añada
Toda esta configuración
Sin que el usuario lo vea
Y ya debería tener todas las animaciones
Pero para probarlo
Para asegurarnos y tal
Lo que vamos a hacer
Es crear una carpeta test
¿Vale?
Y voy a crear aquí un
Generate css.js
Y esto es muy chulo
Porque vas a aprender una cosa
Que muchas veces no
Estas cosas no se suelen ver
En nuestro día a día
¿Vale?
Que es el hecho de
¿Cómo podríamos llamar
Nosotros a Tailwind?
Claro
Normalmente vemos a Tailwind funcionar
Pero no vemos realmente
Cómo funciona
O sea, cómo se llamaría
A Tailwind
¿Sabes?
Cómo realmente
Si yo quiero manualmente
Programáticamente
Llamar a Tailwind
¿Cómo lo haríamos?
Voy a llamarle utils
¿Vale?
Para que estemos
Por si necesitamos más cosas
Aquí vamos a crear
Una función
Que se llama
Generate css
¿Vale?
Generate css
O generate plugin css
Donde lo que vamos a hacer
Es pasarle unas opciones
Voy a crear esto
Como una función
¿Vale?
Function
Function
Generate plugins
Pasándole unas opciones
Como el contenido y tal
Lo que quiero es que me devuelva
El css
Que produciría
O sea, yo le voy a pasar
Como el Tailwind
O sea, el css
El html
Con las clases
Y quiero que me devuelva
El css
Vamos a necesitar aquí
Por lo tanto
Tailwind
¿Vale?
Tailwind
From Tailwind
Tailwind css
Y vamos a necesitar también
Post css
Porque seguro que lo habéis visto
Que cuando instaláis
Cuando instaláis Tailwind
Veis aquí que install
Tailwind no sé qué
Vale
En las instalaciones de Tailwind
Ves que pone
Using post css
¿Qué es lo que necesita dependencias?
Tailwind
Post css
Porque Tailwind
No deja de ser un plugin
De post css
Esto es un mundo
Esto es un mundo muy interesante
Post css
Es una herramienta
Que lo que hace es transformar css
Utilizando javascript
Y Tailwind
Es un plugin
De esta biblioteca
Que es una de las bibliotecas
Más utilizadas
A la hora de manejar
Hoy en día css
De hecho
Tiene plugins muy famosos
Como autoprefixer
Que es el que le pone
Los prefijos automáticamente
O los que
O de lintar el código
De css
Este es style lint
También utiliza
Post css
Y en el caso de Tailwind
Fíjate que ese sponsor principal
También lo utiliza
Así que
Vamos a necesitar también
Utilizar post css
Vamos a instalar
Post css
Menos d
Porque es una
Una dependencia de desarrollo
¿Vale?
Y la importamos aquí
Post css
From post css
Vale
Importante este no es
Que no me la líe
Que esa no es
Es este
Tiene que instalarnos css
El otro es porque
Tiene una dependencia
Tailwind interna
Que se llama post css
Se llama exactamente igual
Pero no es la que queremos
Vamos a importar también
La que
El plugin
¿Vale?
Así que vamos a poner
Animation
Plugin
From
Source
Barra
Index
Porque le vamos a indicar
A Tailwind
Oye quiero que utilices
Este plugin
Para asegurarme
Que realmente funciona
Y vamos a tener
El css base
Que queremos utilizar
Va a ser el de
Tailwind
Utilities
¿De dónde sale esto?
Esto es porque
Tailwind
Fijaos que cuando lo instaláis
Fijaos que aquí
Cuando os dice
Añade las directivas
De Tailwind
Esto lo que hace
Tailwind
Es detectarlo en tu css
Y cambiarlo
Por el css
Que ha compilado
El base
Sería como el reset
Esto si quieres
Luego te lo enseño
Y vas a ver
Cómo funciona
Pero el base
Sería el reset
Que hace con todo
El css
Por defecto
Los componentes
Son eso
Componentes css
Y las utilidades
Sería pl0
MR0
Y todo esto
De hecho
Ahora lo verás
Cómo funciona esto
Las utilidades
Y además
Nuestras utilidades
Que vamos a añadir
También funcionarán
Gracias a esta línea
De aquí
Así que esta línea
De aquí
La tenemos que cargar
Sí o sí
Para que realmente
Detecte y nos genere
Correctamente
Nuestro contenido
¿Vale?
Y aquí lo que vamos a hacer
Es devuélvernos
Compilando con
Post css
Y le decimos
Los plugins
Que queremos utilizar
Por ejemplo
Tailwind css
Bueno pues mira
Maravilloso
Casi
Casi
Aquí
Le vamos a decir
Que queremos utilizar
Tailwind css
Y entre los plugins
Vamos a utilizar
El que yo he creado
Animations plugins
¿Vale?
Aquí todavía
Necesitamos más cosas
Por ejemplo
Le tendríamos que decir
Qué es lo que queremos
Que procese
Así que aquí
En el post css
Vamos a poner
Process
¿Vale?
Y ves que pone
Tailwind base
¿Vale?
Vamos a poner
Que procese
Tailwind base
Y además
Vamos a poner
Yo que sé
.content
Barra
Apply
PL0
Solo para que veamos
Si realmente está funcionando
Esto ¿Vale?
O sea le vamos a decir
Oye post css
Utilizando
Tailwind css
Que a su vez
Va a utilizar
Mi plugin de animaciones
Que nosotros
Cuando lo utilicemos
Y cuando lo publiquemos
Va a ser mucho más fácil
No te preocupes
Que va a ser mucho más fácil
De utilizar
Pero esto es para nosotros
Básicamente
Para poder probarlo
Con nuestro
Para probarlo fácilmente
Con nuestros test
Y así generamos
El css
Al vuelo
Entonces
Yo voy a probar
Primero esto
Para ver que realmente
Se está generando el código
Y luego ya veremos
A lo mejor ahora sale
Algún warning
Pero lo importante
Es que
Veamos como funciona
Entonces
Por ahora
Voy a hacer esto
Generate plugin
Y por ahora
No me estoy pasando opciones
Vamos a poner un console.log
A ver si esto genera algo
¿Vale?
Así que
Vamos a ejecutar
Node.test
Barra
Utils.js
Y nos dice
Que no puede encontrar
El módulo
Este
Este módulo
Que estamos exportando
Ah
Porque no le he puesto
Porque no le he puesto
La extensión
Importante
Es que hay que poner
La extensión
Ah
Pues mira
Me ha dejado otra vez
Fatal
No modus
Tailwind CSS
Barra plugin
Vale
Tailwind CSS
A ver
Tailwind CSS
Me dice que no encuentra esto
Barra plugin
Barra plugin
Pues estás ahí
Hijo
No puedo encontrar el módulo
Puede ser que no he instalado
Tailwind
Sí que lo he instalado
¿No?
Sí que lo he instalado
¿Lo he instalado o no he instalado?
A ver
A lo mejor estoy ahora flipando
¿Puede ser que necesitemos?
No
No creo
Porque
Ah
Espérate
Es que fíjate que aquí me pone esto
Pero no creo que sea
Tailwind CSS
Source
¿Sabes?
Porque no me está encontrando
El plugin este
Pero este plugin
Sí que está ahí
¿No?
Tailwind
Tailwind
Tailwind
Aquí
Puede ser que esté dentro de lib
Debería estar en el package JSON
Veis que aquí
Debería
Ah
Pues no está
Me ha dejado aquí fatal
Lo del plugin
Me ha dejado fatal
Lo del plugin
A ver
Source
Barra
Plugin
Está en source
Y el lib también tiene que estar
Lib
Vale
Pero pensaba que
Que no íbamos a tener que hacer nada raro
O sea yo pensaba que esto
Pues
¿Será que tenemos que hacer esto?
A ver
Un momento
Me extraña
No
A ver
A ver
Que la estoy liando
¿Por qué esto no funciona?
¿Por qué esto no funciona?
A ver
Que igual la estoy liando con algo
Estás importando
Barra theme
En barra de theme
Ah
Hostia
Es esto
Pero este no es el problema que está dando
Es verdad que estaba importando mal eso
Pero el problema que está dando es
Importa
Tailwind
Plugin.js
A ver
Puede ser que sea así
Puede ser que sea así
Ah
Vale
Vamos por partes
Es que
¿Sabéis lo que pasa?
Vale
Vale
Aquí ha dado unos errores
Pero ahora sí que ha funcionado
¿Vale?
Fijaos que lo que tenga que poner es el .js
¿Sabéis lo que pasa?
Que estoy utilizando una versión de Node
Que es la versión 18.17
En la última versión LTS
La última versión de Node
Que creo que es la 20
La LTS
¿Ves?
La 20
Yo tengo la 18
En la versión 20
Ahora sí que
Si es en Node
Creo que automáticamente
Importa sin la extensión
Y creo que también aquí
O sea
Las extensiones las han hecho optatorias
O sea optativas
Opcionales
Así que claro
Por eso estaba flipando
De que no funcionaba
Voy a hacer una cosa
Vamos a instalar
Mira tengo la 20
Ah amigo
Es que creo que es eso
Creo que es eso
A ver si podemos instalarla así
Install 20
Vamos a instalar la versión 20
La última
Y ese es el problema
Mira nunca te acostará
Sin saber una cosa más
11.0
Ya veréis
Que ahora si lo quito
Yo creo que funciona
Ya veréis
Ya veréis
Que si lo quito
Ahora sí que funciona
¿Veis?
Que ahora sí que
Me ha dejado fatal
No funciona
Pues no funciona
Pues nada
Me callo
Me ha dejado
Me ha dejado loco
Pues nada
¿Puede ser que sea una configuración?
Puede ser
Bueno
Pues nada
Lo importante es que ya sabemos
Por qué no funcionaba
¿Vale?
Lo dejamos así
¿Vale?
Apply is no supported
With nested at rules
Like tailwind
You can fix
No sé qué
No sé cuánto
¿Vale?
Esto es porque seguramente
Aquí
No le he puesto un punto y coma
¿Vale?
Necesitamos un punto y coma
Para separar
Ahora
Una vez que ya tenemos esto arreglado
¿Vale?
Fijaos
Que ahora sí que me ha generado
El CSS
Con el padding left 0
O sea
Ahora al menos ya estamos generando
Ya estamos generando el código
Como queríamos
¿Vale?
No se confunde con la carpeta plugin
Y el archivo plugin.js
No se confunde
Porque
Claro
Aquí
En tailwind CSS
En el package JSON
Debería tener una cosa
A ver si la encuentro
Aquí
¿Ves?
Tiene una opción que se llama files
Y por lo tanto lo que hace
Es buscar el archivo
Que estás intentando importar
Entre estos
Entre estas carpetas
Y por eso
Lo está encontrando sin problemas
Está intentando buscar
Dentro de la carpeta
Lib barra
Plugin punto js
Y por eso lo está encontrando
Ahí es donde está haciendo
La magia negra
Si no tuviese este files
De hecho
Mira
Lo voy a quitar
Y seguramente
Sí que nos va a petar
Ah bueno
Pues no me ha petado tampoco
No sé si ahora
Porque está flipando
O porque
Por lo que sea
Pero debería
Debería fallar por esto
Porque claro
Es que esto lo que te hace
Es que cuando lo resuelve
Lo resuelva correctamente
Lo que está diciendo
Es que los archivos
Están dentro de source
Todos los archivos de source
Todos los de click
Los de lib
No sé por qué no peta
Una vez que lo tengo
No sé si por qué tal
Pero fíjate que aquí
Si miras la
Si miramos un poco
La
Como
Ah no
Es que está aquí
Ah es que está aquí
Míralo
Es que sí que está
Un archivo barra plugin
Pensaba que lo buscaban lib
Pero es que claro
No lo necesita
Porque fíjate
Es que está aquí
Está en la raíz
Claro
Está en la raíz
Por lo tanto no va a tener
Ningún problema
Que básicamente es el mismo
Que está
Que tienen lib
Public
Create plugin
O sea que por eso
O sea que está correcto
No necesita ni siquiera
Lo del package
JSON que te comentaba
Lo está buscando de una
Porque está en la raíz
¿Vale?
Vale
Entonces ya estamos generando
El CSS
Ya lo estamos viendo
Pero todavía no estamos viendo
Lo interesante
Que es si tiene CSS
Nuestro
¿No?
Si podemos aplicar
Nuestras animaciones
Lo que podemos hacer
Es básicamente
Pues añadir unas animaciones
¿No?
Es decirle
Bueno
Vamos a ver si
Aquí
Si en lugar de aplicar esto
Decimos
Animate
Fade in
Para que aplique
Esta de aquí
Vamos a ver si la aplica
¿Vale?
Ok
Nos vamos aquí
Y ya la está aplicando
¿Veis?
Esta animación
Se la estamos añadiendo
Nosotros
Obviamente
No solo la vamos a querer utilizar
Con el apply
Pero sí que es interesante
Que tengamos esta posibilidad
Por si queremos ver
Cómo se aplica esto
Directamente
¿No?
Entonces
En las opciones
Vamos a pasarle
Un objeto
Donde podamos pasarle
El inline
O sea
CSS
O el contenido
O sea
HTML
Para ver
Si
Tanto si se lo pasamos
En línea
O si le pasamos HTML
O sea si le hacemos
Un apply de CSS
O si le pasamos el HTML
Con el dip y tal
Si genera realmente
Lo que esperamos
¿No?
Entonces
Aquí lo que haríamos
Sería aplicar
El inline
¿Vale?
Y para el content
Se lo tenemos que pasar
En este caso
Al telwin
¿Vale?
A telwin
Aquí tenemos content
Y aquí
Si no me equivoco
Esto es un array
Que le tenemos que pasar
Row
¿Ves?
Y aquí tendríamos
Nuestro content
Vamos a poner que por defecto
Esto sea un string vacío
Y esto
Un string vacío
Y con esto
Ya tenemos aquí
Un método
Que va a generar CSS
Y que vamos a estar viendo
Si funciona o no funciona
Lo que hacemos
Por ejemplo
Aquí ya podríamos probar
Un contenido
Que sea
Deep
Class
Y aquí
Pues nuestra
Nuestro por ejemplo
Vamos a probar
El zoom in
¿Vale?
Animate
Zoom in
Y con esto
Pues nos vamos aquí
Y veis
Ya tenemos el zoom in
Ya tenemos la animación
Y esto
Está funcionando correctamente
Y lo está añadiendo
Porque tenemos aquí
Justamente un dip
Con el animate zoom in
Nosotros podríamos utilizar
Más dips
Para ver todas nuestras animaciones
Obviamente esta no es la forma
Que vamos a hacer
Vamos a añadir test
Que me parece interesante
Pero aquí podemos poner también
El rotate
Y ahora deberíamos ver
Tanto el rotate
Como el del zoom in
¿Vale?
90
Y ahora
Si aplicamos
¿Vale?
Pues ya tenemos
Tanto el del rotate
Y el zoom in
Pero lo interesante de esto
Es que aunque nuestro plugin
Aunque tengamos
Porque antes alguien
Preguntaba
Pero esto no va a hacer
Que cargue demasiado
Pero fíjate
Que solo va a cargar
Las animaciones que utilicemos
Esto ya está haciendo
Automáticamente
Está mirando
Y está mirando
Justamente
Lo que necesitamos
O sea
Si solo utilizamos
Las dos clases
Pues ya lo tenemos
¿Vale?
Esto es solo el principio
¿No?
Esto sería solo el principio
Ya estamos utilizando dos clases
Y ya lo tendríamos
¿Vale?
Entonces
Claro que se solaparía
Si hay una igual
Lo que pasa es que sabemos
Que esta no hay ninguna igual
O sea
Si existe una igual
Se solapa
Pero creo
Bueno
La de Pulse
Si no me equivoco
Si que existe en Tailwind
Creo que si que existe aquí
Ah no
Es ping
Si que hay una de Pulse
Entonces se podría poner
Se podría poner otro nombre
Justamente para evitar
Para dejar la nativa
Y evitar
Por ejemplo
No sé si hay un ping
No hay un ping
Mira voy a revisar
A ver si está
Ping
Es ping
Es ping
¿Ves?
Aquí hay
Es ping clockwise
Es ping counter
O sea que estas no son las mismas
¿Vale?
Vamos a ver
La de Pulse
Esta si que estaba aquí
Pulse fading
Y Pulse normal
¿Vale?
Esta de Pulse
¿Cómo le podríamos llamar?
Vamos a ver como es exactamente
Pulse
Vale
Pulsar
Vamos a llamarle Pulsar
Yo que sé
Pulsar
Pulsar
Por poner otra
Por poner otro nombre
Ya se nos ocurrirá otro nombre
Pero básicamente
Para no perder el otro
¿Vale?
¿Y cuál es la otra
Que tendríamos aquí?
La otra animación
Bounce
Creo que de Bounce
Si que no tenemos
Vertical Bounce
Bounce
Fade in
Si que hay un Bounce
Bouncing
Vamos a llamarle
Bouncing
Bounce
Las otras se llaman
Vertical Bounce
Y Bouncing
Que debe ser muy parecida
Pero bueno
Básicamente para evitar
Porque aquí se ve
Está un poquito más trabajada
¿Vale?
Entonces así que
La nativa de Tailwind
Y la nuestra
Por si la quieres utilizar
Vale
Entonces
Para automatizar esto
Porque si no sería un poco rollo
Vamos a añadir unos pequeños test
Muy rápido
¿Vale?
Para facilitarlo
Ah
Pero antes voy a hacer una cosa
Porque fijaos que cuando genero el CSS
Claro
Me lo pone con espacios
Tabuladores
Y todo esto
Voy a instalar una
Un plugin
De post CSS
Que creo se llama
Minify
A ver si lo encuentro
Que no me acuerdo
Como se llama
Este no es
Porque este es del 2021
Podría utilizar
Nano
Vamos a utilizar este
Este este
Post CSS Minify
Este que parece del 2023
Parece que es de hace poco
Vamos a utilizar este
Para que básicamente
Cuando generemos el CSS
Al menos para nuestros test
Lo hagamos siempre
Utilizando
El código minificado
Que será más fácil de comparar
Porque si lo utilizamos
Con saltos de línea
Y todo
Va a ser un poco rollo
Y tenemos que
Encajarlo perfectamente
Entonces aquí
Vamos a utilizar este
Nuevo
Post CSS
Vamos a llamarle Minify
Minify
From
CSS Tools
Minify
Y esto
Lo vamos a poner
En plugins
¿Vale?
Entre los plugins
Vamos a poner este de aquí
Bueno no sé si los plugins
Ay perdón
Esto lo he puesto aquí
Y esto debería ir aquí
¿Vale?
No sé si se tiene que ejecutar
Creo que se tiene que ejecutar esto
Y se tendría que pasarle
Aquí a configuración
Pero bueno
Es indiferente
¿Vale?
Y vamos a ver
Si ahora esto
Está funcionando
¿Vale?
¿Veis que ahora
Está minificado
Sin saltos de línea
Y tal?
Esto nos va a facilitar
A la hora de hacer el test
Para ver
Lo que esperamos
Y tal
Mucho más fácil
Que tener saltos de línea
Y tal
Vale aquí
Tenemos un warning
Que dice
Sin el from
La opción post CSS
Puede generar mal
Los source maps
Y no encontrar
No sé qué
No sé cuánto
Dice
Pon el CSS
Para prevenir
Vale
Creo que post CSS
Aquí
Nos está diciendo
Que le falta
Esta opción
De from
Dice que si la ponemos
Undefined
Ya nos dejará tranquilos
Ya nos ha dejado tranquilos
¿Vale?
Pues eso hacemos
Esto básicamente
El from
Es como el archivo
Original de CSS
Porque dice
Siempre tienes que poner from
Para generar el source map
Pero a nosotros
Esto nos da
Exactamente lo mismo
¿Vale?
Así que eso
Lo podemos quitar
Y ser felices
Y punto
Muy bien
Lo que queríamos
Ya tenemos aquí
Generando cositas
Vamos a crear nuestro
Index.test.js
Y para crear nuestro test
Que además
Mira, vas a aprender
Testing también
Me parece increíble
O sea
Mira
Vas a crear
Vamos a utilizar
Vtest
¿Vale?
Vtest
Hola Midu
Llegando un poco tarde
Hoy tuve una entrevista
Para trabajar en front
Pero creo que no me fui muy bien
Porque me puse un poco nervioso
¿Algún consejo?
Bueno
Pues que no te rayes
Ya lo pasado pasado está
Todos nos hemos puesto nerviosos
En alguna entrevista
Pues ojalá
No te hubieras puesto nervioso
Te pusiste nervioso
Pues ya está
A otra cosa
Ya
No te carcomas
Y no te hagas
Mala sangre
Por lo que pudo ser
Y no fue
Al final
A todos nos ha pasado alguna vez
Que nos ha ido regular
Una entrevista
Que no nos ha salido del todo bien
Bueno
Al final
De todo se aprende
También incluso
De las cosas que nos van mal
Y sobre todo
De las cosas que nos van mal
¿Vale?
Así que no te preocupes
Ya te irá
Mejor la siguiente
Piensa en las cosas
Que te han hecho estar nervioso
¿Por qué es tan nervioso?
¿Estabas poco preparado?
Prepárate mejor
¿Es porque has llegado
Con poco tiempo?
Llega antes
Es que
No sé
No sabía nada
De la empresa
Estudiaba la próxima vez
Sobre la empresa
Esas cosas
Pues al final
Muchas veces
Nos ponen nervioso
Por la falta de
De certidumbre
O sea
Por la incertidumbre
Por lo tanto
Si puedes minificar
La incertidumbre al máximo
Pues ya lo tienes
Ya lo tendrás ganado
Y al final
Pues ya te digo
Nerviosos
Siempre nos vamos a poner nerviosos
Es imposible
No ponerse nervioso
Lo que no puedes hacer
Es ahora
Arrayarte
Y estar ahí
Ah no
Lo que pudo ser
Y no fue
Bueno
Vamos a añadir
Usage predefined animation
Lo que vamos a hacer
Básicamente es
Vamos a generar el CSS
Utilizando esta utilidad maravillosa
Generate plugin
Y le vamos a pasar
Oye
Cuando yo en el contenido
Estoy generando
Para no tener que hacer
Esta cosa rara
Aquí a mano
Y esto lo que nos va a permitir
Es que más gente participe
En nuestro proyecto
Y asegurarnos
Que todo sigue funcionando bien
Porque si no
Puede entrar gente en el proyecto
Y de repente
Pues lo peta
Y esperamos
Que esto
Too much
Y le podemos decir
Que esto tenga un CSS
El CSS que esperamos
Es justamente
Si no me equivoco
Creo que este de aquí
Así que lo que esperamos
Es esto
Que este div
Genere
Este CSS
Ok
Esto es lo que esperamos
Una vez que tenemos esto
Ya
Y con vtest
Nos vamos al package.json
Y ves que teníamos aquí
Un script test
Que no estaba haciendo nada
Pues vamos a ejecutar vtest
Vale
Guardamos todos los cambios
Y aquí
Pues nada
Podemos ejecutar
Nuestros test
Run test
A ver que tal
Ha pasado
Pero
Que decimos de los test
Hay que verlos en rojo
Porque uno no sabe
Si tu lo ves en
El test
Lo ves siempre en verde
Tú no sabes
Si realmente funciona
Entonces
Siempre el test
Hay que verlo en rojo
¿Por qué?
Porque justamente
Temos que asegurarnos
Que está funcionando
Imagínate que ahora borro esto
Y sigue estando en verde
Pues menudo test
Así que
Lo vamos a ver
¿Ves?
Aquí ahora mismo
Lo estoy guardando
Y sigue pasando
Pues como puedes ver
No nos ha funcionado
Absolutamente
Para nada
O sea
No está haciendo lo que esperaba
Porque yo esperaba
Que esto realmente
Estuviese haciendo los test
Y no los está haciendo
Vamos a ver aquí
Qué es lo que está pasando
A ver
Si ponemos aquí
A ver
Si juntamos esto
¿Ves?
Está pasando
Y está poniendo aquí
Zoom in
Esto es lo que esperábamos
Y el expect CSS
Too much
Esto
Pues no
Esto no está funcionando
Esto debería petar
No sé por qué no peta
Porque aquí tenemos el async
Aquí tenemos el await
Aquí
Ah
Puede ser por este async
Que es innecesario
¿Ves?
Pues fíjate
¿Ves cómo es importante
Ver los test que están en rojo
Alguna vez?
Porque si no
Podríamos haber hecho aquí
Todo el rato
Un montón de test
Todo en verde
Todo contento
Ay que bien
Y ni nos hubiéramos enterado
Así que siempre tienes que ver
Los test en rojo
Al menos una vez
¿Vale amigos?
Venga
Pues ahora sí
Vamos a volver con esto
Y voy a quitar este async
Que se me ha escapado
Lo he puesto de más
Porque parece ser que no era necesario
Y ahora sí que está pasando
Y si pongo esto
¿Vale?
Ahora sí que está petando
¿Vale?
Ahora sí que ya tenemos esto
Perfectamente
Que está comprobando
Lo que debería comprobar
De hecho
Con el too much
Perfecto
Bueno
Ya tenemos nuestro primer test
Pero obviamente
Esto no tiene mucho sentido
O sea
No tiene sentido
Sí que tiene sentido el test
El test está maravilloso
Lo que digo que no tiene sentido
Es que seguramente
Vamos a querer
Que nuestras animaciones
Pues vayan un poco más lentas
Claro
Fijaos que aquí
Tiene esta animación
Que va siempre a la misma velocidad
Pero estoy seguro
Y si no
Decídmelo en el chat
Que muchas veces
Me vais a decir
Ya pero yo quiero cambiarle
La duración
De la animación
Quiero que la animación
Vaya más lenta
Ay amigo
Pues te voy a descubrir
La magia
De cómo funciona Tailwind
Y esto está muy chulo
Muy chulo
¿Y cómo funciona Tailwind?
Bueno
Tailwind funciona
Con una cosita
Que se llama
Match Utilities
¿Vale?
La posibilidad
De pasarle parámetros
A través del nombre
De la clase
Mira
En el theme
Aquí tendríamos
Las animaciones
Los keyframes
Y también vamos a añadir ahora
Animation Delay
Vamos a poner
Pues por ejemplo
None será 0
El 0 será 0
Y aquí podemos poner
Pues 100
Serán 100.000 segundos
200
300
400
500
Bueno
Esto me parece un poco
Ya a pasarse
No hace falta que estén todos
Ahí se le ha ido
De hecho
No sé si
No sé si poner aquí
150
Que creo que tendría más
Bueno
Esto es el delay
No he puesto la duración
He puesto el delay
Bueno
Este tiene sentido
Vamos a poner aquí también
250
Porque el delay
Puede tener sentido
¿Vale?
Hasta 1000
Yo creo que ya está bien
Y luego
También el usuario
Le podrá pasar
Las suyas propias
Y te enseñaré cómo
¿Vale?
Pero vamos a ponerle
Todos estos delays
Estos son los valores
Que le vamos a poder pasar
Por la clase
Para retrasar la animación
Entonces
Ahora en el index
Aquí empieza la magia
Lo que vamos a poder utilizar
Es la API
¿Veis aquí que pone API?
¿Vale?
¿Qué API?
Bueno
Vamos a poder sacar
El theme
De la API
Y vamos a poder sacar también
El match utilities
¿Vale?
Match utilities
¿Para qué sirve el match utilities?
El match utilities
Lo que nos va a permitir
Es crear nuestras propias clases
Dinámicas
De Tailwind
Y le vamos a poder decir
Oye
Quiero que me crees
Un animation delay
100
Y esto
Se transforme
En un animation delay
100 milisegundos
¿Vale?
Gracias a que tenemos aquí los valores
Este 100
Es el que tenemos aquí
Y este valor
Es el que va a poner
Justamente aquí
¿Vale?
Pero es que además
También el usuario
Podrá hacer esto
Esto lo podrá hacer también
Ahora veremos cómo
Gracias al match utilities
El match utilities
Es para los valores
Es para los valores que puedan ser dinámicos
Por ejemplo
Esto es lo que utiliza internamente
Tailwind
Para los PLL
Para la PR
Para los padding
Los padding
Los margin
Y todo esto
¿Vale?
Entonces
Match utilities
¿Qué tenemos que pasarle al match utilities?
Pues le vamos a decir
Oye
Cuando el usuario
Utilice el class name
Animate delay
Le tenemos que pasar el valor
Y cuando le pasemos el valor
Lo que quiero
Es que
Lo que tienes que escribir en el CSS
Es la propiedad
Animation delay
Utilizando
El valor
Que te estoy pasando
¿Y de dónde tienes que sacar los valores?
¿Vale?
Pues para sacar los valores
Le vamos a pasar
Con otra
Con otra
Con otro
En otro parámetro
¿Vale?
El match utilities
Fijaos
Que tendríamos aquí
Por un lado
Los utilities
Y por otro lado
Las opciones
¿Veis aquí?
Options
Y estas opciones
Es donde le vamos a inyectar
Digamos
Todos nuestros valores
Y los valores
Se los vamos a pasar del theme
Y le decimos
Animation delay
Ojo
Cuidado con esto
Porque
Fijaos que este theme
Es un método
¿Vale?
¿Veis que es un método?
Porque lo he sacado de aquí
Este theme
Viene de la API
No es el theme
Que he importado aquí
¿Vale?
No es el mismo
Porque esto es
De parte de la API
De Tailwind
Para poder extraer
Los valores
Y esto internamente
Lo que hace es buscarla aquí
Y transformarle los valores
En lo que necesitamos
¿Vale?
No hay que pasarle directamente
El objeto así de una
Sino que hay que utilizar
Este theme
De la API
No el theme
Del objeto
¿Ok?
Por eso veréis que esto es un método
Y por eso ahí tiene
Esa diferencia
Y esto lo que va a hacer es
Automáticamente
Sacar
Todos los valores
Que hemos puesto aquí
Automáticamente
Nosotros no tenemos que hacer nada
Y va a entender
Que cada vez
Que tú intentes hacer esto
Esto
Esto
Va a ponerle el valor correcto
Y para comprobar
Que esto realmente funciona
Lo que vamos a hacer es
Un pequeño test
Así que
Ahora que ya tendríamos esto
Vámonos aquí
Y esto mismo
Nos lo pegamos para acá
Y aquí vamos a decirle
Use a
Predefinning
Animation
Delay
¿Vale?
Imagínate que aquí
Lo que quiero es
Poner un delay
De 100 milisegundos
¿Vale?
Pues aquí
Yo lo que esperaría
Es que el punto
Animation
Delay
Delay
Haga esto
¿No?
Esto es lo que debería renderizar
Vamos a ver si esto lo renderiza
O no lo renderiza
Vale
Parece que sí que pasa
Vamos a ver
Si le pongo aquí 5
¿Vale?
Fíjate que peta
Porque me dice
Oye
Esperaba esto
E incluía esto
O sea
Que sí que estaba funcionando
Correctamente
Con esto ya estamos viendo
Que sí que está funcionando
Nuestro plugin
Y ya estamos inyectando
Los delays
Con los valores
Que le hemos puesto en el theme
Y esto también
Y esto es importante
Porque también
Así es como funciona Tailwind
Esto que estás viendo
Es como funciona por dentro Tailwind
Tailwind por dentro
Utiliza esta API
Para crear todos los paddings
Todos los margins
Todos los width
Y todo esto
O sea
Le estamos quitando magia
¿Vale?
Porque muchas veces
A lo mejor la gente se pensaba
Que lo hacían a mano
¿Sabes?
Que lo hacían ML
Es margin left
No
No lo hacen así
Lo hacen utilizando
Justamente lo mismo
Que estamos viendo aquí
¿Vale?
También
Lo interesante
Al utilizar el match utilities
Porque hay otro
Que se llama
Add utilities
La diferencia
Entre el match utilities
Y el add utilities
Es que el add utilities
Es para
Utilidades
O sea
Es que esto
Se le llaman utilidades
Esto
Esta es una utilidad
El animate delay
Es un class name
Que es una utilidad
El add utilities
Es para utilidades
Que son estáticas
Y el match utilities
Para las que son dinámicas
¿Qué quiere decir esto?
Pues que claro
Match utilities
Son dinámicas
Por dos razones
Una
Porque tenemos
Una lista
De valores
Y dos
Porque el usuario
Le puede pasar
La que él quiera
Por ejemplo
Vamos a añadir
A otro test
Para que lo veas
Aquí
Aquí lo que pone
Use a custom animation delay
O sea
Si el usuario
Aquí
Le pasa
Por ejemplo
666 milisegundos
Bueno
Vamos a poner 777
Para que nadie
Se sienta ofendido
¿Vale?
Animated delay
777
Claro
No me acuerdo aquí
Cómo lo va a renderizar
Seguramente le va a poner
Ahí unos
Como unos
Contrabarra
¿Vale?
Pero
Ahora miraremos
Esperaríamos
Que se renderice esto
Esto es un valor
Dinámico
Que no lo tenemos aquí
Pero que el usuario
Se lo puede pasar
¿Vale?
Vamos a ver
¿Ves?
Ahora está petando
Pero está petando
Por esto
Las contrabarras
Que os decía
Esto lo hacen
Justamente
Para escapar esto
Y a ver
Guardamos aquí
Y tampoco
¿Por qué?
Porque lo he puesto
Ah
Porque es sin el
Porque
Aquí
Está renderizando
Con
Animated delay
7
O sea
Está poniendo esto
¿Vale?
Estaba poniendo eso
Bueno
Pero ya vemos
Que está funcionando
Lo mejor de esto
¿Sabéis qué es?
Lo mejor de esto
Es que ya
A una vez que tenemos
El delay
Ya la duración
Es un momento
Ahora
En lugar de duration
De delay
Cambiamos aquí
Me he copiado
Los dos test
Vamos a poner
Movemos todo esto
Ponemos duration
¿Vale?
Obviamente
Ahora va a petar
Pero
Nos vamos al theme
Copiamos todo esto
Lo pegamos aquí
Ponemos aquí
Duration
Nos vamos aquí
Nos vamos acá
Ponemos aquí
En lugar de delay
Delay
Ponemos duration
Aquí
Camel case
Guardamos los cambios
Y ya tenemos
La duración
Con esto
Lo que hemos hecho
Es que ahora
Las animaciones
También son configurables
Del tiempo
Que duran
Y tan fácil
Que de hecho
Lo que he hecho
Es copiar y pegar
Lo que he hecho
Es básicamente
Le he dicho
Oye
He añadido el test
Para que se le pueda
Cambiar la duración
En el theme
Le he puesto los valores
Y ahora vas a ver
Por qué es interesante
Aquí poner los valores
Y luego en el index
Lo único que he hecho
Aquí es el match utilities
Obviamente
Como hemos hecho
Un copy paste
Una cosa que aquí
Puede ser interesante
Podría ser
Automatizar esto
O sea
Podríamos decir
Y además
Esto es lo bueno
De tener test
Porque amigo
Si hay una cosa
Que tienes que tener
Muy en cuenta
Y esto
Me da mucha pena
Que muchas veces
¿Por qué no duplicar los test?
Pues si los hemos duplicado
¿No?
Justamente los hemos duplicado
Me da mucha pena
Que este tipo de directos
Pues la gente no ve
Porque a quien quiere
¿A quién le importa
Hacer un plugin
De Telgwin?
Esto no me va a dar trabajo
Bueno
Pues sabes que
Lo que es interesante
Esto es que aquí
Se puede ver una buena práctica
De para qué sirve
Justamente un buen test
Porque ahora que tenemos
Un test
Lo que nos va a servir
Es que vamos a poder
Refactorizarlo
Por ejemplo
Aquí vemos claramente
Que tenemos
Estamos duplicando código
No hay ninguna cosa mala
De duplicar código
De hecho esto podría funcionar
Perfectamente
Y quedarse así
Por siempre
Pero es posible
Que tengamos que añadir
Nuevas propiedades
Y tengamos que duplicar
Más código y tal
Entonces una cosa
Que podríamos hacer interesante
Y como tenemos los tests
Que ya sabemos
Que todo no funciona
Esto es lo bueno
Cuando tienes los tests
Hacer un refactor
Es muy sencillo
Podemos tener aquí
Un objeto
Donde podamos poner
Yo que sé
Animate delay
Que sea un objeto
Donde tengamos
El tss
Animation delay
Y de donde
Tiene que sacar
Los valores
¿Vale?
Y lo mismo aquí
Con el animation duration
Y los valores
¿De dónde tienes que sacar?
Pues lo tienes que sacar
De aquí
Y una vez que tienes
Los dynamic utils
Esto
Pues ya lo que puedes hacer
Aquí es
Un object keys
Donde
El
Joder
Madre mía
Con Guija Copa
Elote está calentito
Pero básicamente
Un object keys
Del dynamic utils
Bueno
No me gusta
Vamos a utilizar
El entries
Mejor
El entries
Que está más interesante
Muy bien
Vale
El object entries
Lo que hacemos con el entries
Es tener por un lado
La key
Que sería esto
O sea
El name
Sería esto
Y luego tendríamos
Como segunda posición
Del array
Tendríamos el css
Y los valores
El object entries
Mira para que veáis esto
Que esto es bastante interesante
Y muchas veces
La gente con estas cosas
Se pierde
Que no sabe manejar objetos
Y tal
Pues mirad
A ver
Vamos a ver
Si lo puedo enseñar aquí
Ajá
Theme
Porque ahí me falla el theme
Vale
Esto lo quitamos
Esto lo quitamos
Solo para que lo veamos
Vale
Como es esto
Pero básicamente
Lo que tenemos con el object
El object keys
Lo que hace es devolverte
Solo las keys de un objeto
Por ejemplo
Del objeto
Deny my utils
Tendríamos la key
Animate delay
Y animate duration
Y esto te lo hace
En un array
Los object keys
Lo que te hace
Es devolverte siempre
Un array
Imagínate que lo que quieres
Son los valores
Del objeto
Por ejemplo
Tú no quieres las keys
Sino que lo que quieres
Son los objetos
Si ya sabes esto
Tené un poquito de paciencia
Para la gente que no lo sabe
Vale
Que no todo el mundo
Es tan listo como tú
Entonces
Con las object keys
Tendríamos las llaves
Del objeto
En un array
Con object values
Tendríamos los valores
De un objeto
En un array
Vale
En este objeto
Dynamic utils
Los valores
Uy
Perdón
Los valores
Sería el objeto este
Y el objeto este
¿Veis?
Y aquí los tenemos
En el objeto
Pero también tenemos
El object entries
Object entries
Es muy interesante
Porque te da las dos cosas
Te da
Un array de arrays
Donde en cada posición
Del array
Tienes un array
De dos posiciones
Donde en la primera posición
Tienes la llave
Que en este caso
Es animate delay
Y en la segunda posición
Tienes el objeto
Donde tendríamos
El objeto
¿Y por qué es interesante esto?
Porque esto lo que te permite
Es iterar
Muy fácilmente
Un objeto
¿Por qué?
Porque lo transformas
En un array
Y ahora con esto
Ya tendríamos justamente
Una forma iterable
Súper fácil
De decir
Vale
Pues voy a mirar primero
La primera información del objeto
Y luego la segunda información del objeto
Tanto la llave
Como el valor
Y eso es lo que estamos haciendo aquí
Lo que hacemos aquí
Interesante es justamente
Lo que antes estamos haciendo aquí a mano
¿No?
Porque tenemos
El animate delay
Sería la key
El value
Que se le está pasando
Esto lo pasa al usuario
El animation delay
Sería el CSS
Que esto lo tenemos que poner aquí
Y los valores
Que recuperamos del theme
Se lo estamos pasando aquí
¿Vale?
Que es esto de aquí
Y lo estaríamos inyectando
Directamente aquí
Y lo bueno es que ahora
Podemos borrar esto
Para ver si realmente
Esto funciona
Y ver que aquí
Todo sigue funcionando
Correctamente
Podríamos ver fácilmente
Si nuestro refactor
La hemos liado parda
Por ejemplo
Si por ejemplo
Aquí el key
La ponemos mal
¿Veis?
Ya los test
Nos estaría avisando
Oye
Esto no funciona
¿Qué está pasando?
¿Qué has hecho?
¿Qué has roto?
Te bajo el sueldo
¿Vale?
Bueno
Pues este tipo de cosas
Por eso son importantes
Muchas veces los test
Que sinceramente
A veces alucino
De que
De que la gente
No le dé importancia
De hecho antes he visto
Un comentario por ahí
Que decía
Pero ¿Por qué vamos a perder
El tiempo haciendo test?
Hombre
Hay que hacer test
Hay que hacer test
Amigos
Hay que hacer test
Y en este caso
Que no nos cuesta mucho
Y te evita tantos problemas
Tantos problemas
Y habéis visto
Que lo hemos hecho
De una forma súper natural
Que tampoco
Que nos ha costado tanto
Bueno
Dicho esto
Estos serán los dynamics
Y quizás más adelante
Añadimos otros
Pero
Para ver otros
Vamos a añadir también
Los
Los de
Add utilities
Vamos a poner
Add utilities
¿Vale?
Los que son estáticos
Porque claro
También vamos a querer
Que nuestras animaciones
Tengan diferentes
Animaciones
O sea
Timings
¿Vale?
Por ejemplo
Animation
Timing
Function
Mira te explico
¿Qué pasa?
Las animaciones
Podemos tener
Que sean lineales
Como esta
Es lineal
Porque la animación
Siempre tiene
La misma aceleración
También podemos
Hacer que sea
Is
In
In
In
Out
Is
In
Out
Que al principio
Va un poquito más rápido
Luego más lento
Y luego más rápido
O podemos hacer que vaya por pasos
¿Veis?
Por steps
O podemos hacerle
Nosotros
Una curva
Totalmente
Personalizada
Y en este caso
Incluso va para atrás
La animación
Hay diferentes
Pero nosotros vamos a querer
Que esto
Por desgracia
No sé por qué
En Tailwind
No hay una forma
De que vosotros le digáis
La
La timing
Functions
O sea
No podéis decirle que sea
Is y tal
Sí que lo podéis hacer
Con las transiciones
¿Vale?
Con las transiciones
¿Veis?
Sí que lo podéis hacer
Pero con las animaciones
No
Por lo tanto
Vamos a hacer que de alguna forma
Los usuarios lo puedan hacer
Con nuestras animaciones
O con las animaciones
También de Tailwind
Entonces
¿Qué vamos a hacer aquí?
Vamos a añadir unas utilidades
Que van a ser estáticas
O sea
No van a poder
Pasarle lo que quieran
Los usuarios
Vamos a poner
Animate
Is
Y aquí pues
Utilizamos
Animate
Timing Function
Animate no
Animation
Perdón
Animation
Timing Function
Y aquí le pasamos
El valor de
Is
Y esto es lo mismo
Con el
Is in
Esto voy a esperar
Que Jack O'Paylon
Los hago a todos
Porque no tengo ganas
De mirarlos
¿Vale?
El lineal
También tendríamos
Vale
El ping
Bueno
El ping no es interesante
Porque creo que ya lo tiene
Ya lo está utilizando
Así que esto lo vamos a evitar
Creo que ya tiene un ping
Si no me equivoco aquí
¿Ves?
Ya hay un ping
Entonces no tiene mucho sentido
Pero estos sean los más importantes
Y de nuevo
Pues aquí también
Podríamos repetir
Con esto ya tendríamos
Lo más importante
Use a custom
Use a
Timing
Function
Animation
Ta ta ta
¿Vale?
Y aquí pues podríamos poner
Por ejemplo
Podríamos poner
Linear
Linear
Animate
Linear
Y aquí esperaríamos
Que esto
Renderice
Eh
Renderice
Animation
Esto
¿Vale?
Esto con el linear
¿Vale?
Con esto ya tendríamos
No toda nuestra
¿Vale?
Parece que funciona
Vamos a ver aquí
Pepito
Y peta
¿Vale?
Justo lo que esperábamos
Ya está nuestro paquete
Funcionando correctamente
Le faltan más cosas
Que deberíamos añadir
¿Vale?
Deberíamos añadir
Deberíamos añadir
Por ejemplo
Lo de los steps
Si está pausada
O está ejecutándose
Los añadiremos
Más adelante
Hay más configuraciones
Que deberíamos añadir
Pero no tiene mucho sentido
Porque estamos repitiendo
Todo el rato lo mismo
Y total
Esto lo vamos a hacer
De código abierto
O sea que al final
Lo podéis añadir vosotros
Y así también podéis ver
Como funciona
Añadir los tests
Y participar en el proyecto
Que creo que es bastante interesante
Entonces
Lo que sí que voy a hacer
Para no estar repitiendo esto
Es que te voy a enseñar
Un recurso muy interesante
De UX
¿Vale?
Y es este
Este artículo
Está para lamerlo
¿Vale?
Este artículo es tremendo
Y os lo recomiendo
Muchísimo
Es un artículo
Que básicamente
Os cuentan
Como las animaciones
Las buenas prácticas
Para hacer animaciones
De UX
Y aquí os dicen
Cómo se hacen bien
Cómo se hacen mal
Y todo esto
¿No?
Por ejemplo
Aquí esto está muy chulo
Porque os dice
La duración de las animaciones
Desde 100 milisegundos
A 500 milisegundos
¿No?
Y es un artículo
Que es muy
Muy potente
Está lleno de información
Es muy interesante
Está genial
¿Vale?
Entonces
El tema es
Aquí
Tenemos las duraciones
Y me parece bastante
Genial
Porque fijaos
Que pone
Very fast
Fast
Normal
Slow
Very slow
Pues una cosa
Que también se puede hacer
Es que aquí
Le podéis poner nombres
O sea
Por ejemplo
Podéis poner aquí
Slow
Y aquí ponerle
Slow
Le podemos poner
500
Joder
No sé por qué
500 milisegundos
¿No?
Fast
Pues 100 milisegundos
Y podéis poner normal
Pues 300 milisegundos
De hecho
Estoy pensando
Mira
El slow
Lo vamos a utilizar aquí
Slow
Con 400 milisegundos
Y una cosa que hace
Tailwind
Es utilizar nombres así
Por lo tanto
Vamos a hacerlo exactamente igual
Vamos a poner fast
Y faster
¿Vale?
Que es un poco como lo hace
Tailwind
Y así también podemos utilizarlo
Con nombres
Que me parece bastante interesante
Así que
Vamos a poner este
Predefined
Name
Animation
Duration
Y así si alguien utiliza el faster
Debería
El faster
Debería
Faster
Deberían ser los 100 milisegundos
¿Vale?
Que es justamente ese
Y ya lo tenemos así
Y así pues le damos un poquito de semántica
Que es interesante
Pues ahora que ya tenemos nuestro plugin
Que pinta bastante bien
Vamos a hacerle
Vale
No da tiempo a hacerle la página web
Así que le vamos a hacer la página web
Vamos a hacerle una página web
Para ver todas las animaciones
Porque hasta ahora
Estábamos viendo como la parte más estática
Con test
Y tal
Y a ver
No está mal
Pero la verdad es que a mí me gustaría ver
Todas las animaciones en funcionamiento
Así que
Vámonos aquí a la terminal
Y voy a crear una web
Aquí
Ay mira
Voy a hacerlo con
Voy a quitar la web
¿Vale?
Vamos a crear
Un proyecto con Astro
Tan tan tan
Sé que lo estabas esperando
No pero es que
Que Astro es la leche
Y
Vamos a hacerlo menos de 100 líneas de código
Te prometo
Bueno igual un poco más
No sé
Pero 100 líneas
100 líneas más o menos
Porque
Ya ves tú
Es que voy a hacer una página muy sencilla
Donde podamos ver
Todas nuestras animaciones funcionando
Cuando pasemos el ratón por encima
Y
Y así pues
Vemos si está funcionando
Nuestro plugin perfectamente
Antes de publicarlo
No nos vayamos a
A tener problemas
¿Vale?
Y además es una web
Que iremos mejorando
Y que además la publicaremos
Para que la gente vea
Que puede instalar este plugin
Porque este plugin
Espero utilizarlo
En todos mis proyectos de Tailwind
Eso ya lo digo yo
Pásame el ratón por encima
Ahora te las paso
Ahora te voy a pasar todo el ratón
Te voy a pasar el ratón
Vamos
Que te van a entrar ganas de jugar con el ratón
Vale
Pues cdweb
Pnp install
Hostia no sé si he hecho
Creo que lo he hecho
Vale
Perfecto
Vale
Entonces he creado
Entonces he creado ahí la web
Ya puedo eliminar todo esto
Todo esto
Y aquí ahora tengo web
Perfecto
Lo bueno de esta web
Es que si entramos
Pnpm run dev
Aquí lo abrimos en el puerto
4.3.2.1
Vale
Vamos a eliminar
Todas las cosas que no nos interesan
Por ejemplo
Todos los estilos
Esto fuera
Estilos fuera
Vale
Estos estilos fuera
Y en el pages
Todos estos estilos fuera
Puede ser que de errores
Porque lo hemos utilizado
Como una subcarpeta
Y el linter
Igual se está volviendo un poco loco
Pero no nos dejamos
Amedrentar
No nos dejamos
Sorprender por esto
Porque lo vamos a hacer
Aquí en un momentito
Vale
Y aquí vamos a poner
El main
Y aquí vamos a poner
Nuestra
Yo que sé
Tailwind
CSS
Animations
Vale
H1
Va a ser muy sencilla
La página
No
No va a ser nada
Del otro mundo
Pero sí que vamos a poder ver
The best
Animation
Bueno
The best
Plugin
O the plugin
The plugin
That you need
Vale
Entonces
Vale
Vale
Aquí viene
Lo que más me gusta
Del mundo de la programación
Que es el scripting
A ver
El scripting
¿Qué quiere decir?
El hecho de
Vamos a intentar
Importar
Toda la información
Que tenemos
Y mostrarla en otro sitio
O sea
Vamos a tener que estar
Tratando con objetos
Y historias
Vamos a recuperar
El theme
Theme
Mira
Importamos el theme
Del plugin
Vamos a traernoslo
Porque
Aquí en el source
Vamos al
No
Aquí este source
No
Barra
En source
Barra
Theme
Punto
JS
Vale
Nos traemos el theme
Este archivo
Es este donde tenemos
Las animaciones y tal
Entonces
Vamos a traer aquí
Animation
Del theme
Ahora que tenemos
La animación
Que ese es un objeto
Este objeto
Que tiene todas las animaciones
Lo que podemos hacer con esto
Es
La maravilla de iterarlo
Así que lo vamos a iterar
¿Vale?
Vamos a poner aquí también otra clase
Que sea
Npm install
Barra
Midudeb
Barra
Tailwind
CSS
Barra
Animations
¿Vale?
Para que luego quede esto bastante bien
Y aquí
Vamos a iterar
Este en el main
Mira el main
Había puesto
Aquí
Esto
Bueno da igual
Vamos a poner aquí un section
¿Vale?
Vale
Vamos con el section
¿Qué tenemos que hacer aquí?
Vamos a poner
Max
5XL
Grid
Grid
Calls
3
3
3 columnas
Donde se vea todo
¿Vale?
Y una separación de 4
Luego lo arreglamos
Y aquí
Vamos a iterar
Este objeto
Animation
Y vamos a crear
Todos los
Todos los archivos
Que necesitamos
Así que
Single
Animation
Y aquí
Vamos a hacer un return
Con un article
¿Vale?
Aquí tenemos el article
Dice
Animation
Punto map
No existe en el tipo
Ah vale
Buena
Buena
Está bien
Está bien eso
Está bien porque aquí
Necesitamos un object keys
Que justo lo he enseñado antes
Claro es que no es un array
Es un objeto
¿Vale?
Ajá
Ahí está
Entonces
Aquí vamos a mostrar
Cada una de nuestras
De nuestras
Animaciones
¿Vale?
Le vamos a decir
Que tenga
Un
Un span
Vamos a poner
Border
Vamos a poner
El borde
De un color
Ah
Vamos a añadir
Tailwind
Vamos a añadir
Tailwind
Que si no
No lo vamos a poder probar
Sin Tailwind
No lo probamos
Así que vamos a instalar
Aquí
Tailwind
En astro
¿Vale?
Pnpx
Astro
At
Tailwind
Y así
Podremos probar
Nuestro plugin
En nuestra propia página
Porque si no
No va a funcionar
Nada
Y tampoco va a funcionar
Todos los estilos
Que estoy haciendo
Así que
Vale
Vamos a poner
At Tailwind
Y esto
Debería instalar
Nos va a decir
Voy a instalar esto
Le decimos que sí
Y ahora la configuración
Le decimos que sí
Que también
Por cierto
¿Os habéis dado cuenta
Que hemos hecho test
Sin necesidad de
Configurar absolutamente nada?
Lo cual es súper interesante
No hemos tenido que configurar
Nada de bit test
Nada, nada de nada
Es tremendo
Que muchas veces
No, es que es muy difícil
Hacer test y tal
Y en un momento
Lo hemos hecho
O sea, no nos ha costado
Absolutamente nada de nada
Vale
Entonces
Por ahora voy a poner
Aquí en el data class
Voy a poner
La animación
¿Vale?
Single animation
O no sé cómo llamarla aquí
Animation key
¿Vale?
Vamos a llamarle animation key
Animation key
¿Vale?
Por ahí era
Hostia
Animation key
¿Vale?
Vale
Y aquí dentro
Vamos a querer dos cosas
¿Vale?
Vamos a hacer un dip
Que es lo típico
Que va a ser un flex
Ahora
En mi cabeza suena espectacular
¿Eh?
Que igual luego
Igual luego no
No lo hace
No queda bien
¿Eh?
Pero
Quédate
Y a ver
Y a ver cómo sale
Y a ver cómo sale esto
Básicamente lo que quiero es
Mostrar un cuadrito
Donde
Se pueda ver la animación
Cuando se está encima
¿Vale?
Entonces
Dentro
La idea es que aquí tendemos
Pues nada
Un dip
Aquí tenemos
Estoy mirando a ver si tiene sentido
Todo lo que está poniendo por aquí
A ver
No tiene mucho sentido
O sea
Por ejemplo
Creo que esto sí que me lo voy a quedar
Esto sí que me lo voy a quedar
Y aquí lo que podemos hacer
Es poner el animation key
¿Vale?
Yo creo que con esto
Al menos
Deberíamos ver algo
¿Vale?
Vamos a ver
Cómo se ve
Bueno
No está mal
No está mal
No está mal
Está mejor de lo que esperaba
Está mejor de lo que esperaba
Está mejor de lo que esperaba
Vale
Problemas
Esto no puede ser una redonda
Esto no puede ser una redonda
Porque si no
Las animaciones que son de rotación
No las vemos
Entonces
Paso a paso
Uno
Este max
No lo ha hecho bien
Esto
Lo vamos a tener que
Centrar horizontalmente
Y además
Aquí este rounded
No puede ser full
¿Vale?
Vale
Esto ya tiene un poquito
De mejor pinta
Quizás
No hace falta
Que sean tan grandes
¿Vale?
Vale
Vale
Y el rounded
Rounded
Vale
Pues yo creo que con esto
Ya nos da
Yo creo que con esto
Más o menos
Voy a hacer algún detallito
Menor
Pero yo creo que ya nos da
Para hacer la magia
Que queremos hacer
Yo creo que sí
Voy a hacer esto
Un poquito más pequeño
Con el semi-ball
Le ponemos un poquito
De opacidad
Opacity
De 80
Esto es
Para nota
Esto ya para nota
No es nada de
No es que lo necesitemos
Vale
Vamos a poner aquí el header
El header
Vamos a poner también
Esto para centrarlo
Básicamente
También esto
Esto
Ok
Aquí necesitamos que esto sea
Flex
Justify
Center
10
Y flex call
Vale
Y
Me falta el item center
Y esto
Ahora le ponemos aquí
Un poquito de font
Semiball
Esto es solo para que se vea
Un pelín bonito
Tampoco es nada
Del otro mundo
Tailwind
The plugin that you need
Esto lo vamos a poner
Medium
Opacity
70
Esto es que está
Demasiado separado
Vale
Este sí que
Le vamos a poner aquí
Un 10
Vale
Más o menos
Más o menos
Más o menos
De plugin that you need
MpM install
Medium
Detail
Animations
Vale
Lo que quiero ahora
Es que cada vez
Que nos ponemos encima de uno
Pues que obviamente
Funcione correctamente
Lo que he hecho
Es que cuando estás
Si te fijas
He puesto una clase aquí
En el article
¿Ves?
El article
He puesto el data class
Fade in
Vale
En lugar de poner
Data class
Fade in
Lo que voy a hacer ya
Bueno sí
Me parece bien
Está bien
Está bien
Está perfecto
Sí, sí, sí
Ya está bien
Ya tenemos ahí
El fade in
Lo que nos faltaría
Es cuando estás
Encima de un article
Vamos a hacer
Una magia
Así que
Vamos aquí a script
Script
Y vamos a recuperar
Todos los articles
Document
Punto
Query selector
Todos los articles
¿Vale?
Y todos los articles
Hacemos un for each
Y para cada artículo
¿Vale?
Dice para cada artículo
Joder
Es que está maravilloso
Y jacopailon
Tío
No está mal
A ver
No está bien del todo
Pero al menos
Vamos a ver
La animación
Funcionando
Dice para cada artículo
¿Vale?
Lo que hacemos aquí
Es primero
Recuperar el atributo
Data class
Que es el que hemos puesto aquí
Donde tiene la animación
Y vamos a crear
La animación de la clase
Hay que concatenarle
El animate delante
Y lo que hacemos
Es añadirlo
Al artículo
Esto no hace exactamente
Lo que quiero
Porque lo que quiero
Es cuando hagamos
Hover que funcione
Pero al menos
Deberíamos ver las animaciones
Aunque vamos a ver
Que no funciona
Y ahora te explicaré por qué
¿Ves?
No funciona
Y entonces
¿Por qué no funciona?
Si aquí
Aquí está mi clase
Ahí está el animate fade in
Si está ahí
¿Por qué no funciona?
Que no funciona
Porque Tailwind
No lo está detectando
De primeras
¿Vale?
El tema es que no lo detecta
De primeras
O sea
Tailwind no está detectando
La clase
Y por lo tanto
Dice
Bueno
Pero es que
¿Dónde está?
¿Dónde está?
Que no lo veo
Y pasan más cosas
Es que además
No estamos utilizando
Nuestro plugin
Lo hemos creado
Pero no lo estamos utilizando
Así que primero
Animations
From
Y lo vamos a traer
¿Vale?
Nos traemos nuestro querido plugin
Que para eso lo hemos hecho
Source
Barra
Index
.js
Y este animations
Lo ponemos aquí
¿Vale?
Eso es lo primero
Ahora ya tenemos el plugin
Pero aún así
Con el plugin
Aunque tengamos ahí el plugin
Vamos a ver
Que sigue sin funcionar
El otro problema
Es que
No están funcionando
Porque no está detectando
Las clases
Si yo pusiera aquí a mano
Animate
Fade in
Ahí podemos ver
Que está funcionando
Todo perfectamente
¿Vale?
Veis que el animate fade in
Esto es uno de las animaciones
De mi plugin
Y aquí podemos ver
Que está funcionando
Y si le añado
El animate duration
De un segundo
Podéis ver que está funcionando
O sea
Que
Funciona
Funcionar funciona
Pero la demo
No funciona del todo bien
O sea que
Ahí está muy bien
Frederick
Muy bien
Safe list
Lo que tenemos que hacer
Es obligarle a Tailwind
Que nos meta
En el CSS
Pues esas clases
Para que funcionen
Desde el principio
Esto es interesante
Aunque en el día a día
Normalmente
No lo vais a necesitar
En vuestras páginas
Normalmente
Pero imagínate
Que por lo que sea
Hay una clase dinámica
Que quieres que esté
Sí o sí
Pues para eso
Lo que puedes utilizar
Es una opción
Que se llama
Safe list
Y aquí puedes añadir
Por ejemplo
Podríamos poner
Animate
Fade in
Y podríamos estar ahí
Añadiéndolas
A mano
Pero claro
A mano
Aquí no se hace nada
Que para eso
Somos programadores
Así que a mano
Nada
A mano
Nada
¿Qué vamos a hacer?
Pues lo mismo
Que hemos hecho antes
Lo mismo
Que hemos hecho antes
Vamos a importar aquí
El theme
Que teníamos por acá
¿Vale?
Y nos vamos a traer
El animation
Del
Del theme
Del theme
¿Vale?
Y ahora que tenemos
El animation del theme
Lo que tenemos que hacer
Pues es crear
Las
O puedo crear
El safe list
Ya directamente
Del object keys
Tenemos el animation
Perfecto
Y para cada uno
De los keys
Le concatenamos
El anime delante
Y ya tenemos
Nuestro safe list
Y para esto
Existe la programación
Amigos
Para eso existe
¿Vale?
Y entonces
Vale
Ahora vemos
Un montón de cosas raras
Pero al menos
Ya vemos que
Las animaciones
Cada una
Hace una cosa diferente
No está haciendo exactamente
Lo que yo quiero
Pero al menos
Si que vemos
Que funcionar funciona
Esto es porque
Uno
Esto sobra
Luego
El data class
Que esto está chulo
Que lo habíamos hecho aquí
Pero esto está
A medio camino
Yo lo que quiero realmente
Es recuperar
De cada uno
El
Digamos
El box
Que el box
El deep
No sé si es un deep
A ver
Solo para cambiar
Voy a poner aquí un span
Porque así podré buscar
Directamente el span
Y me simplifica un poco
La vida
¿Vale?
Entonces buscamos el span
Voy a asegurarme
Que esto es un block
Para que no me dé problemitas
Ah
Porque ya flex
Vale
Perfecto
Y ahora que tenemos el span
Lo que vamos a decirle es
Vale
Cuando en el article
Entremos
Cuando hagamos un mouse
Enter
Entonces
Es que le añadimos la clase
Y cuando salimos
¿Vale?
Es que le quitamos la clase
Esto lo podríamos llevar
Podríamos pausar la animación
También
Podríamos hacer
Lo que pasa es que
Pausar la animación
Es un poco rollo
Yo creo que mejor así
Porque así
Cada vez que sales
Pues lo ves desde el principio
Y ya está
A ver si no tienes que hacer nada más
Entonces aquí hacemos un remove
Y si no me he equivocado
Ah sí
Si me he equivocado
Porque aquí nos faltaría
Este box
¿Vale?
Este box aquí
¿Vale?
Dice que posiblemente es null
¿Vale?
Pues si no
Si box
Es null
Pues no hagas nada
Y estate quieto
Y ya está
Y ahora con esto
Deberíamos estar aquí
Y ahora pues
¿Vale?
¿Vale?
¿Vale?
¿Vale?
Y hemos hecho un plugin
Que funciona esto ya
Como una maravilla
¿Vale?
Ya tenemos aquí todas las
Vale
Para que se vea un poquito mejor
Como
¿Cuál es el que estamos haciendo?
Y todo esto
Voy a poner aquí
Border
Es que el border grey
Este me ha dejado un poco
Ah es que lo he dejado media
¿No?
El border grey
Me parece
Border grey
800
Transition
Cursor
Cross
Vale
Un poquito bestia
A ver
Ya me lo imaginaba
¿Eh?
Que me había pasado un poquito
Hover
Shadow
A ver
Vale
Pues
Este no sé qué hace
Background shine
No sé qué hace
Me lo tendría que mirar
Pero todos los demás
Todos los demás
Bien
¿No?
De hecho ahora
Lo que podríamos hacer también
Lo haremos
Es que cuando le des clic
Que se copie el texto
¿Vale?
Pero bueno
Ya podemos ver
Que tenemos las animaciones
¿Qué os parece?
¿Qué os parece?
Joder
Está súper bien
¿No?
Está súper bien
Está chulísimo
En un momento lo hemos hecho ahí
Yo creo que 3 minutos de duration
Es una locura
Pero mi novia no está de acuerdo conmigo
Bueno
3 minutos no hemos hecho
No hemos hecho ninguno de 3 minutos
Pero bueno
Ya tendríamos todo esto
Y además
Lo más fácil es que
Lo podéis utilizar
Simplemente añadiendo
Una clase
Y además
Pues podéis hacer un montón de cosas
Vale
Vamos a poner aquí
Todavía
Ahora nos falta publicar el paquete
Pero al menos
Funcionar funciona
Ahora nos falta
Publicar el paquete
Para que cualquiera
Pueda utilizar esto
Vale
Pues para publicar el paquete
Ah vale
Digo hostia
Porque están petando los test
Hemos hecho la web
Hemos hecho los test
Hemos hecho
Vale
Nos falta publicar el paquete
Y ya está
Ya está
Bueno falta el Ritmi también
Esto lo voy a dejar
Para vuestros deberes
O estos deberes
Vale
Crear un Ritmi
Increíble
Vale
Y esto
Vamos a crear
He creado aquí
Una
Un repositorio
Pues vamos a añadir
El repositorio
Y ahora publicamos
El paquete
En Pien
Para que todo el mundo
Lo pueda utilizar
Vale
Esto por aquí
Esto
This is on fire
Bueno
Está chulo
La verdad
Midu
¿Te falta funcionalidad?
Bueno
Pasa nada
Vamos a publicar
Primero el paquete
Que está interesante
¿No?
Que está interesante
Publicar el paquete
Vale
Cosas que faltan
Yo creo
Bueno
Lo de copiar
Código
Al hacer click
Eso sería una
Faltaría también
A ver
Nos falta
El
Post
Play
Animation
Es que no me acuerdo
Como se llama
¿Qué más nos faltaría?
Los steps
De las animaciones
También
Steps
De las animations
Que también se puede hacer
Las veces
Que se ejecuta
¿Vale?
Ejecuta
Pues none
Once
Infinite
Twice
Thrice
Es lo que sea
¿Vale?
¿Qué más?
Las animaciones
Tienen más cositas
Pero ahora
El fill mode
¿Vale?
Esto si va para adelante
Esto
None
Forward
Extracto
Si va hacia adelante
O hacia atrás
A ver si me dice otra
A ver si me ayuda
El direction
¿Vale?
Este también falta
El timing function
No
Este ya lo tenemos
Pero bueno
Lo voy a poner
El iteration count
Este es el que
El que he puesto antes
Este
Este también falta
Iteration count
Y
A ver si me dice otro
Pero yo creo que ahora
Ya sí que estamos
El delay ya lo hemos hecho
El duration lo hemos hecho
¿Vale?
El animation name
No es necesario
Y
Este yo creo que tampoco
El play state
Este es el play state
Play state
¿Vale?
Entonces todos estos ya están
Faltarían estos que aparecen ahí
¿Vale?
Y hacer
Hacer un readme
Increíble
Eso es lo que nos faltaría
Y publicar el paquete
Que lo hacemos ahora
Tailwind CSS
Animations
¿Vale?
Publicar el paquete
¿Vale?
Aquí tenemos
Mudev
Tailwind Animation
001
Bueno
Lo primero
Obviamente
Necesitamos
Una cuenta
De NPM
NPM
Newly Picket
Mangoes
Bueno
Cada vez que le hacen
Nachos pillaje
Milwaukee
Se lo inventan
Tendríamos que iniciar sesión
Que yo lo voy a intentar
A ver si soy capaz
A ver si me acuerdo
A ver si
Me va a pedir
Sí
Authenticator Device
¿Vale?
Vamos a buscar aquí
Importante que utilicéis esto
Del
Bueno
Creo que es obligatorio
O sea que
Os iba a decir que es importante
Pero creo que es obligatorio ahora
O sea que
005628
Total
¿Vale?
¿Cómo?
Ah bueno
Ha iniciado sesión
Pero me ha llevado a donde le ha dado la gana
¿Vale?
Bueno
Aquí tenemos mi profile
Con mis packages
Y mil millones de historias
Entonces
En principio
En principio
Si
Nos vamos a NPM
Aquí
Deberíais hacer un login
¿Vale?
Hacéis el login
Iniciáis sesión
Os pide
El
El correo
Os pide vuestra contraseña
Y luego
Os pedirá también
A lo mejor que hagáis
El
Multifactor Authentication
Y todo esto
¿Vale?
Luego si
Ya habéis iniciado sesión
Podéis hacer un Home AI
Para aseguraros
Que estáis en vuestra cuenta
Y no la de la empresa
Que esto lo he visto muchas veces
Que la gente
Se pone en un montón de sitios
A publicar paquetes de la empresa
Y tal
Y luego locurón
¿Vale?
Entonces
Vamos a utilizar
El mío
Miduga
Miduga es mi cuenta de toda la vida
Y ya está
¿Por qué Midudef en ocasiones
Usa PNPM
Y otras PNPX?
PNPM
Es para instalar paquetes
¿Vale?
O para ejecutar scripts
PNPM
Sería como lo mismo de NPM
Pero PNPX
Es para ejecutar paquetes
Para ejecutar paquetes
Que sería lo mismo que NPX
Y PNPX
Se utiliza por ejemplo
Para ejecutar el comando
De astro
Y así que puedas añadir
Dependencias como las de spelt
Y todo esto
Miduga me suena a un gabunga
No, Miduga es de Miguel Ángel
Durán García
Y ya está
Ese es Miduga
Miduga
Es lo que utilizaba
Hace mil millones de años
Mil millones de años
Bueno
Pensad que la X
Es de ejecutar
Execute
Y ya está
Ya se es mucho más fácil de pensarlo
Pues ahora que tenemos esto
Lo primero que nos queremos asegurar
Es el acceso
Entonces
Normalmente
Vale, primero vamos a ver
Dependencias
¿Ves?
Esta dependencia se me ha colado aquí
Y esta dependencia
No es necesaria
Así que
Antes de publicar nada
También vamos a arreglar aquí
Los carets
Que tampoco necesitamos
Dependencias
No tiene
Solo tiene
Pies dependencies
Vale
Y ya lo tendríamos
El source
Está bien
Perfecto
Pues lo que vamos a hacer
Es ejecutar
NP en publish
Y le vamos a decir
Que el acceso
El access
Access
Es así, ¿no?
Sí
Es public
¿Vale?
Que es público
Esto creo que es una cosa
Que han cambiado
Pero antiguamente
Cuando utilizabas
Una organización
Por defecto
El acceso
Era privado
Creo que lo han cambiado
No estoy seguro
Pero por si acaso
Podéis hacer esto
Publicar el paquete
Con acceso público
Para que cualquier persona
Pueda instalarse este paquete
Y no solo los que estén
Dentro de tu organización
Porque antiguamente
Entendían
Que como utilizabas
Una organización
Es que querías
Que fuese privado
Solo para la gente
De organización
Pero creo que lo han cambiado
Pero no estoy seguro
Entonces con esto
Ah
Con esto
Ojo cuidado
Es importante
Que esto
Lo ejecutéis
No dentro de la web
Sino
Donde tenéis
El package.json
Que queréis publicar
Que es aquí
¿Vale?
Es en la raíz
Así que nada
Le damos
Y como podéis ver
Pues ya está ejecutando
Aquí hay cositas interesantes
Vale, mira
Fíjate
Dice
Tienes que autentificar
No sé qué
Tienes que abrir el navegador
Vale
Pues le damos
Y aquí me va a decir
Oye
Tienes que volver a poner
No sé qué
Le voy a
Ah, no
No, tío
No
La madre que los parió
Tío
La madre que los parió
La madre que los parió
No, tío
No
No, no, no
No, Dios
Otra vez
No, me voy a tener que cambiar
Otra vez
Me voy a tener que cambiar
Otra vez
Me cago en la noche
Me cago en la leche
Ay
Bueno
Ya hemos iniciado sesión
La madre que lo trajo
Bueno
Pues ahora ya se ha publicado
Se ha publicado la primera versión
Para saber si se ha publicado
La primera versión
Vale
Podéis hacer un info
Y aquí tendríais
Toda la información
¿Veis?
Ya tenemos la información
De quién la ha publicado
Cuando la ha publicado
Podéis ver los maintainers
Y todo esto
Una cosa interesante
Es que si os fijáis
Veis que
Todo lo que hemos publicado aquí
Es como demasiado
Lo interesante es que podéis ir aquí
Y hacer un
NPM ignore
Y decirle que ignore ciertas carpetas
Por ejemplo
Pues yo no quiero que publique
Los tests
¿Vale?
Que los tests
¿Para qué quieres que estén publicados?
Es que no tiene ningún tipo de sentido
Tampoco tiene sentido
Que publique la web
¿Vale?
Pues nada
Ponemos la web
Ah no me acuerdo
Si era así o era así
Pero bueno
Lo importante
Es que lo podemos probar
En un momento
Hacemos esto así
Publicamos una segunda versión
Y si no
Podéis utilizar
Una cosa que se llama
Dry Run
Para que
Simule
Que lo va a publicar
¿Ves?
Parece que lo ha publicado
Pero no lo ha publicado
Dry Run
Lo que hace es como
Simular
Que lo publica
Que estés viendo aquí
Lo que publicaría
La versión que publicaría
Pero no lo está publicando
¿Vale?
Es muy interesante esto
De hacer muchas veces esto
De el Dry Run
Para ver
Cómo funcionaría
Si es que va a funcionar
Y tal
Y así evitáis que se publique
Si lo queréis publicar de verdad
Pues nada
Hacéis el publish
Ya no hace falta
Que pongáis otra vez
Lo del access
Porque una vez que habéis publicado
Una versión pública
Ya las siguientes son públicas
O sea, si ya ponéis publish
Vais a ver que ya lo publica
Sin ningún problema
¿Vale?
Y ya tendríamos la versión 2
¿Vale?
Ya tendréis la versión 002
Con el readme
El package
¿Vale?
El source
Y...
Ah, mira
Me ha dejado el readme
Vale
Esto es porque por defecto
Los readme
No sé por qué
Se los guarda todos
Es muy rata
Es muy rata
Es muy rata
Y eso a mí me ha dado mucha rabia
¿Veis esto?
Que aunque esté en el ignore
Lo está publicando
Eso es porque detecta los readme
Y dice, no, no
Los readme
Hay que publicarlos seguro
¿Vale?
No voy a hacer que esto
No se publique
Porque es información
Que puede ser interesante
Para los desarrolladores
A mí siempre me daba
Un poco de rabia
Porque a veces teníamos readme
De 50k
100
150k
Se da una locura
Y daba rabia
Pero bueno
Una vez que ya tenemos esto
Deberíamos ser capaces
De irnos a
NPMJS
¿Vale?
Y aquí
Buscar nuestro
Midudev
Vamos a ver
Midudev
Midudev
Midudev
Barra
Tailwind
A lo mejor no
Aquí ya tenemos
Tailwind Animations
¿Vale?
Aquí aparecerá
El readme que hagamos
Que todavía pues no está muy bonito
Pero lo tendremos bonito
Y lo más interesante
Es que ya tendríamos
Este Tailwind Animations
¿Vale?
Que ya deberíamos ser capaces
De ir a cualquier proyecto
Por ejemplo
Vamos a ir a
¿Qué proyecto?
Ah mira
Mars Coach
Mars Coach
Mars.coach
Joder
No tengo el D de Mars Coach
A ver
Mars Coach
¿Puede ser que sea así?
Vale
Me voy a publicar este
Voy a utilizar
La dependencia nueva
Que hemos hecho
¿Vale?
Pnpm install
Pnpm run dep
Estoy instalando las dependencias
Y voy a instalar ya
Mi paquete
¿Vale?
Pnpm install
Arroba midudev
Barra Tailwind Animations
Con mis animaciones maravillosas
¿Vale?
Joder
Si quiero instalar las dependencias
La leche
Y eso que eso lo ha instalado
¿Vale?
Ah, pero instalar
Ah, mira
Fíjate aquí que dice
No he encontrado el peer
Pensaba que el peer
Si le hemos puesto el caret
¿No?
Se lo he quitado
Se lo he quitado
Bueno, mira
¿Ves?
Por eso es importante
Ir publicando
Por eso es importante
Ir publicando versiones
Vale, vale
Pues ya tenemos la versión 3
0.03
Poco a poco
Poco a poco
Está bien
Poco a poco
Bueno
Pues vamos a probar
Si funciona nuestro paquetillo
¿Vale?
Tailwind Animations
0.03
Quita
Pnpm install
Que se instale la nueva versión
Que sí que no debería ahora dar el problema de las peer dependencies
¿Vale?
¿Veis?
Ya no he dado problemas de las peer dependencies
Pnpm run dev
Nos vamos a tailwind
¿Veis que yo utilizaba este tailwind CSS animated?
Que está súper bien, ¿eh?
La dependencia esa
Que os la recomiendo un montón
Sin ningún tipo de duda
Vale, pues la vamos a quitar
No por nada
Sino porque vamos a ver
Si todo lo que hemos hecho aquí nosotros
A ver si nuestras animaciones funcionan
Básicamente
¿Vale?
Pues no funcionan
Vamos a ver
Vamos a ver
Fade in
¿Puede ser?
Vale
Animate fade in
Pues no están funcionando
Las animaciones
¿Por qué no funcionan las animaciones?
A ver
Animate fade in
No están funcionando
A ver
Ah, pero sí
Sí que está
Ahí está funcionando esa
Pero
Pero está funcionando mal
Porque está empezando mal
Está empezando mal
Eso igual lo teníamos que mirar
Porque
Como al principio
Claro
Como al principio
Ah, pues mira
Como le estoy haciendo un delay
Claro
Ves que no está
Está empezando mal
Porque no tiene la opacidad a cero
Y tendría que tener la opacidad a cero
O sea, tendría que empezar con la opacidad a cero
Pues eso tendríamos que estudiarlo
¿Eh?
Tendríamos que verlo
Pero
El problema que en realidad
O sea, sí que están funcionando
El problema
Está que este
Animate fade in
O sea, que no existe esa clase en la mía
En la mía
Se llama de otra forma
Por eso no funciona
Entonces
Vamos a ver cómo se llama
Vamos a ver aquí en theme
¿Ves?
Se llaman fade in
Fade out
Slide in
No sé qué
Slide in
A ver qué más hay
Fade in up
Se llamaría
Fade in up
Esa sería como la que tendríamos nosotros
En lugar de
Animate fade up
Debería ser
Animate fade in
Este sería el tema
¿No?
Y a ver
Y ahora
¿Ves?
Ahí tendríamos la animación
Esta ahora sí que está funcionando correctamente
Lo mismo
Pues tendríamos que buscar las animaciones
Que no son las mismas
Esta no existe
Por ejemplo
Esta no existe
Y el problema
Lo tenemos ahí
¿No?
Que no está iniciando
Con la opacidad cero
Que eso es interesante
Que tenemos que tenerlo en cuenta
¿Vale?
Así que lo tendríamos que
Lo tendríamos que mirar
¿Eh?
Para probar localmente
Sí, ya sé
Nibaldo
Que podemos utilizar
NPM Pack
Pero es un poco rollo
O sea
Para probar localmente
Está bien
Pero yo no te recomiendo
Utilizar NPM Pack
Lo que tienes que utilizar
Es NPM Link
NPM Pack
Es un rollazo
Hombre
Tener que generar el paquete
Cada dos por tres
Es un rollo
Lo que quieres utilizar
Es NPM Link
Que lo que haces
Es enlazar
Y cada cambio que haces
Lo detecta automáticamente
Lo cual es bastante
Bastante tremendo
¿Vale?
Vale
Pues ya vemos que
Esta animación funciona
Algún problema que veo
Que tenemos
Es el tema este
De que no está empezando
Con la opacidad cero
Y por lo tanto
Cuando le añades el delay
¿Veis?
No funciona correctamente
Pero bueno
Estamos en una versión 0.0.1
No pasa nada
Lo vamos a arreglar
No os preocupéis
Y poco a poco
Lo solucionamos
Lo importante
Es que ya tenemos ahí
Por ejemplo
A ver
Animate
Fading
A ver
Que podríamos empezar
Por ejemplo
Para arreglarlo por ahora
Para arreglarlo por ahora
Hacemos así
Y ya está
Ay
No claro
Porque luego se quita
La madre que lo parió
Claro claro
Pues nada
No lo vamos a arreglar
No lo vamos a arreglar
Así tan fácil
No lo vamos a arreglar
Poniendo opacity a cero
¿Cómo lo tendríamos que hacer?
Claro
Empezando opacity a cero
Claro
Es que aquí
Cuando la animation
Es fade in
Tendríamos que empezar
Con opacidad cero
¿No?
Para que aparezca justo después
Y a ver
¿Qué más?
A ver
Vamos a quitar
Los animation delays
Delay
Delay
Cada uno ahí
Tiene una duración diferente
Y ya está
Eso sería un poco la idea
Vale
Al final
Al menos
Funcionar funciona
¿No debería ser
Animation fill mode
Forward?
Ahí si le puedes poner
Opacidad cero
Sí
Pero no sé si
Claro
Es que no le quiero poner
No quiero tener que ponerle
La opacidad a mano
En todos los sitios
¿Vale?
Porque si le ponemos
La opacidad a mano
En todos los sitios
Es un poco rollo
Es un poco rollo
Lo que vamos a querer
En realidad
Es que empiece
Con la animación correcta
¿Sabes?
Que no tenga que
O sea
Y además
A lo mejor
No debería ser
A ver
Más que
Un momento
Mira
Y así voy a probar
A hacer una cosa
Voy a probar
A hacer una cosa
Que esto está
Súper interesante
El hecho de
Linkar un paquete
A ver si nos sale con esto
Mirad
Tendríamos aquí
Claro
Aquí
Que pone esto
Vamos a probar
Un momento
Solo con el fading
Yo creo que aquí
Si le ponemos
Both
Si le ponemos
Both
Vamos a ver
Si con el both
Funciona
¿Vale?
Solo en el fading
Y fade
A ver había otro
Por aquí
Fading
Vamos a ponerle aquí
Both
Antes decía
Alguien de utilizar
NPM Pack
NPM Pack
Lo que hace
Es que tú puedes
Empaquetar
El paquete
Es como si lo publicases
Y puedes instalarlo
Localmente
Está bastante bien
Pero es un poco rollo
Lo que muchas veces
Es interesante
Es utilizar
NPM Link
Lo malo
Que con PNPM
No sé si funciona
Pero lo vamos a probar
La idea es que tú haces
En PNPM Link
En el paquete
Que quieres linkar
Linkar es que va a crear
Un
Como
Un
Un puntero
¿Vale?
Y allí donde
Se lo estás utilizando
Instalado
Lo puedas linkar
O sea
Va a estar enlazado
Con el que tienes
En tu local
¿Vale?
Tienes que hacer un
Con PNPM
No es utilizar
Normalmente
Normalmente
Porque vale
Deer global
Make the current
Local package
Accessible
System wide
Vale
PNPM
PNPM
Link global
En NPM
No es así
Ya lo digo yo
¿Vale?
Entonces
La idea de esto
Ahora
Se supone
Es que
Default current
Working directory
¿Vale?
PNPM
Detecta
Diferencia
Ahora se supone
Que lo que deberíamos hacer
Global
Link
To my
Project
¿Vale?
Global
Link
Flow
Vale
Se supone que aquí
Deberíamos hacer
PNPM
Link
Y le deberíamos decir
Cuál es el proyecto
O sea
El paquete
Que el paquete
Porque aquí decía
Vale
Aquí
El paquete
Que queremos utilizar
Es este
¿Y por qué esto es?
Si funciona
Porque ya te digo yo
Que así no lo he hecho nunca
Vale
Esto lo que debería hacer
Es que ahora
Cuando levantemos
Nuestro proyecto
De Mars Codes
Va a estar linkado
Va a estar atado
A nuestra dependencia
A nuestro paquete
Que tenemos local
Sin necesidad de hacer
Nada más
Esta es la teoría
Luego vamos a ver
La práctica
¿Vale?
Funcionar funciona
Pero vamos a ver
Si
Si cambiamos aquí
En Mars Codes
¿Vale?
Nos vamos aquí
Y para ver si funciona
Deberíamos ponerle
Un delay
Por ejemplo
Aquí
Animate
Delay
De 500
¿Esto a qué se lo ha puesto?
Ah, esto sale un serney
Animate
Fade in
Animate
Fade
Animate
Fade in
Código Marte
Este
Animate
Delay
De 500
Vale
Ahora sí que ha funcionado
Ahora sí que funciona
Funciona
Porque
Fijaos que
Hostia
Esto está muy chulo
Esto está muy chulo
Porque lo de npm link
Está muy chulo
Está muy muy muy chulo
Básicamente
Lo que hacemos con esto
Es linkar
Nuestro proyecto local
En otro proyecto local
¿Vale?
¿Qué es lo que teníamos que hacer
Para arreglarlo?
Lo que teníamos que hacer
Para arreglarlo
Básicamente
Es utilizar el both
Que la dirección
Es que tanto el de inicio
Como el de final
Lo tuviésemos ahí
Esto lo hemos puesto
Aquí
El fill mode
Cómo se tiene que rellenar
La animación
¿Vale?
Esto por defecto
Como podéis ver
No es el both
Por defecto
¿Veis?
Cuando termina la animación
Cuando tenemos este
Cuando termina la animación
Empieza
Donde está al principio
Pero hay diferentes formas
En las que se puede hacer
Que se quede
Por ejemplo
Forwards
Es que cuando termina la animación
Se queda
El frame
El final
Por lo tanto
Esto sería por defecto
Cuando termina la animación
Vuelve al inicio
Que esto muchas veces
No es lo que queremos
El forwards
Es que termina la animación
Se queda en el final
El backwards
Es justamente
Que se fuerza
Y que termina
Y se queda con el primer frame
Y el both
Es que se queda tanto
Como al final
Y al principio
Y esto es importante
El both
Porque claro
Puede ser hacia adelante
Y hacia atrás
Porque a veces
Las animaciones
Queremos reproducirlas
Hacia adelante
O hacia atrás
Puede ser que quieras
Hacer que una animación
Por ejemplo
Una animación que bota
Puede ir al inicio
Y al final
Al inicio y al final
Así que en este caso
Lo hacemos con both
Y así nos aseguramos
Que se está rellenando
La animación del final
Y del principio
Y así
Aunque haya un delay
Ya se ve correctamente
¿Vale?
¿Veis?
Ahora sí que está haciendo
La animación
Como esperamos
Podemos utilizar
Mira
Y para que veamos esto
Que está bastante chulo
Por ejemplo
No sé si funcionará
A ver
Mmm
Qué pena
Porque hay veces
Que
Vale
¿Ves?
No funciona
No funciona
Hay veces
Que lo que se puede hacer
Es que
Bit
Detecte los cambios
Que estás haciendo
También
En el archivo
Que tiene el linkado
Claro
En este caso
No se puede hacer
Bit
Watch
Mode
A ver si se puede hacer
Porque sería brutal
Si se puede hacer
Ya es brutal
Bit
Config
Me imagino que se puede
Watch
Watch
Watch
Watch
Bit
Click
Watch
Sería brutal
Que se pueda hacer
Que le puedas decir
Vale
Quiero que también veas
No
No se puede
Qué pena
Porque esto
Muchas veces
Pues es muy interesante
El hecho de poder hacer
Ah mira
Watch
Rebuilds
WebModules
Vale
Esta sería un poco la idea
Rebuilds
WebModules
Have changed
Pero esto es boleano
Esto es boleano
Claro
Lo interesante sería
Justamente
Poder hacer un watch
De algo que tenemos fuera
Y decirle
Oye
No solo tienes que hacer
De nuestro proyecto
Sino también
Tienes que hacer un watch
De un módulo
Que tengo externo
Y eso sería tremendo
Pero no lo hace
No lo hace
Por desgracia
Y por más que tú
Haces cambios aquí
Aunque lo has linkado
No se está reseteando
Ya sería tremendo
De hecho
Poder se puede hacer
Porque ya os digo yo
Que esto
Lo hace mucha gente
Vale
Lo que vamos a hacer
Para arreglar esto
Vamos a poner
Todas nuestras animaciones
Le añadimos el both
Aquí al final
Vale
Y así
Pues tendíamos
Hola
¿Por qué no me
¿Por qué no me aparece
Mi cambio?
¿Por qué no puedo?
¿Por qué no puedo?
¿Por qué no me dejas?
Ay no me digas
No me digas
Que lo he hecho mal
He hecho mal
Lo de GitHub
He publicado lo que no era
¿Ves?
This is on fire
Me he equivocado
Y no he publicado lo que no era
Git remote at origin
Git init
Git remote at origin
Vale
En la web
Vamos a eliminar
El punto
Punto git
Vale
Y claro
Ahora git
At
Git at punto
Claro
Ahora
Ahora esto
Se va a volver
Un poco tarumba
Vamos a ver
Git ignore
Primero git ignore
Claro
Es que
La he liado
Porque
No modules
La hemos liado
La hemos liado ahí
Porque he publicado
Solo la web
He publicado solo la web
Pero bueno
El tema es que encima
Que te calles
Que te calles
Que te calles
Que lo publiques
Y punto
Vale ahora si
Ahora si
This is on fire
Vale ahora si que está
Todo el código
Vale
Ahora si que está todo el código
Vale amigos
Pues nada
Os dejo
Ya tenéis ahí
El paquete publicado
Y todo
Con todo el código
Por si queréis contribuir
Queréis pasar
Que está bastante bien
Está super interesante
Espero que os haya gustado
A mi me pareció
Que es tremendo
El contenido
Porque no he visto
Ningún contenido
De español
De crear un plugin
De Tailwind
Además lo hemos hecho
En dos horas
Además lo hemos hecho
Hasta con una web
Y tal
Publicaremos la web
En algún sitio
Que estaba bien
Y espero que hayáis aprendido
Algo nuevo
Y que os haya gustado
Un montón
Así que
Ahora si
Ahora voy a resetear
La API
Para que no me den cañita
Que no me den cañita