Muy buenas, bienvenidos, bienvenidas
Espero que estéis todos súper, súper, súper bien
Porque hoy tenemos programazo
Tenemos un pedazo de programa
Y yo estoy súper encantado de estar tan bien acompañado
Porque no podría ser de otra forma
Para hablar de State of CSS necesitamos gente experta
Gente que sepa de lo que hable
Y yo no voy a ser esa persona, obviamente
Así que tenemos que pillar referente
Gente que de verdad sepa de qué trata esto de State of CSS
Y de verdad, me he traído a las mejores
A las mejores directamente
Yo he buscado en Google
Las mejores personas que saben de CSS
Y me han salido estas tres
Y así de directo y así de claro
No hombre, yo las conozco
Sé de lo que son capaces
Me gusta mucho su trabajo
Y he decidido invitarlas
Que estén aquí un ratito con todos nosotros
Justamente para comentarlo
Vamos a darle la bienvenida una a una
A nuestras invitadas
Y vamos a empezar con Stephanie
Stephanie Aguilar
Que es desarrolladora frontend
Y no en un trabajo, no
Porque un trabajo sería demasiado fácil
Tenemos dos trabajos
Trabaja en la Startup Inhouse y en Platzi
Y además apasionada del CSS
Stephanie, bienvenida
¿Cómo estás?
Hola Miguel, muchas gracias por la invitación
Estoy súper feliz de estar aquí contigo
Con toda tu comunidad
De verdad que súper fan de todo tu contenido
Me ha servido
Mejor dicho, no te imaginas
Así que súper agradecida
Y también felicitaciones
Por este espectacular contenido que creas
Y el blog también espectacular
Así que no puedo estar más honrada
De estar aquí contigo
Y con toda tu comunidad
Mira, o sea
Para decir la verdad
Para mí es un verdadero honor
Tener aquí
Porque recuerdo perfectamente
La CSS Conf de 2019
Creo
Que esta es una charla
Que a mí me encantó
Era de propiedades lógicas
Creo de CSS
¿Puede ser, Stephanie?
Ahora es cuando Stephanie
Me deja fatal
Y dice
Yo nunca di esa charla
No, pero sí
No, era de CSS
De propiedades lógicas
De CSS Conf
De hecho, Miguel
Soy la más
Mejor dicho
Aquí tengo la camiseta
De una conferencia
¡Ojo!
¡Qué grande!
Muy bien
Me la traje
¡Qué grande!
Sí, fue una gran experiencia
Y como tú dices
De CSS
Es algo que
Mejor dicho
Impacta en el desarrollo
De todos nosotros
Y esas conferencias
Tan maravillosas
Esa fue la última de ese año
Así que bueno
También
A la espera
De que hayan otras también
Por eso
Claro
¿Tienes ganas
O tienes vista
Alguna conferencia
Hacia el futuro
Presente y futuro?
La verdad
Con ese tema de pandemia
No
Hicimos uno
De aquí en Colombia
De hecho
Estamos en el tema
De organización también
De CSS Conf
Que también nos estuvo
Acompañando
Una de las invitadas
Que ahorita más adelante
Vamos a ver
Pero nada
La víspera
Ojalá
Ojalá
Ya próximamente
Bueno
Pues vamos a seguir
Con más gente
Que tenemos por aquí
Gente que es fabulosa
Maravillosa
Como lo es Tamara
Así que vamos a darle
La bienvenida
A Tamara
¿Qué tal?
Tamara
Bienvenida
Tamara
From the Z1
Digital Studio
Muchas gracias
Por estar aquí Tamara
¿Cómo estás?
A ti por invitarme
Un honor
Estar con gente tan guay
Hoy
Muchas gracias
Y tú eres parte
De esa gente guay
También
Que estás aquí
Gracias
Claro que sí
Hombre
Y vamos a estar ahí
Viendo el State of CSS
Y a ver qué nos cuenta
También Tamara
Gracias
Las cosas que más
Le interesan
Tamara
¿Con qué te has peleado
¿Con qué te has peleado
Últimamente?
Que digas
Madre mía
TSS
En el Grids
Complicado siempre
Me hacen la vida
Infernal
La verdad
Pero bueno
Poco a poco
Bueno pues hoy justamente
En este 12
CSS 2021
Vamos a ver también
El tema de Grids
Y un poco
La evolución
Que ha tenido
En los últimos
Los últimos años
Pero para hablar
De esto también
Por supuesto
Tengo que invitar
Y dar paso
A mi colega
Carmen
Ansio
Ex-Engineer
En Mango
Y encima
Google Developer Expert
En Web Technologies
Nada
Con un color de pelo
Fantástico
Fuego
¿Qué tal?
Muy bien
Pues ¿Cómo estás Carmen?
Muy bien
Encantadísima de estar aquí
Como siempre
Una vez más
Cosa que me invites
Me lío la manta
A la cabeza rápido
Para mí encantadísimo
Que estéis
Bueno que estéis las tres
De verdad
O sea
A las tres
Os admiro
Cada una
Por cosas
De que habéis hablado
En algún momento
Tamara
Recuerdo en los Weekends
Que me gustó muchísimo
También Stephanie
Por la charla
Y bueno Carmen
Que voy a contar
Que aparte de todas
Las charlas que ha dado
Pues también
Todas las cosas que comparte
Y encima
UX Engineer
Me gustaría
Que explicases rápidamente
A ver si eres capaz de esto
Porque siempre me lo preguntan
Me lo preguntan muy rápido
O sea
Lo de titulitis
Yo
Me la pela un poco
Pero quiero decir
Que al final
Google
Puso nombre
A esa posición
Que es
Entre diseño
Y desarrollo
Entonces
Como soy un perfil
Bastante híbrido
En ese sentido
Pues puedo estar
Desde el inicio
De bajar
Necesidad
De eso
UX
O llegar a implementarlo
Entonces
Es un poco
Que bueno
O sea
No solo lo piensas
Lo diseñas y tal
Sino que lo puedes implementar
Bueno
Con mi equipo
Claro
Las cosas
Nunca salen así guays
Pero sí
Todos se hacen equipo
Todos se hacen equipo
Si no sería muy triste
Hombre
Mira
Caima78
Ya dice por aquí
Acabo de hacer
Un par de cursos
De Stephanie
Muy buenos
Porque es verdad
Stephanie además
Tiene un montón de cursos
En Platzi
Que momento promoción
Aparte de los cursos
De Stephanie
Que si los queréis hacer
Que sepáis que en Platzi
Tienen una oferta
Ahora que duran
Dos días y medio
Me parece que tienes
El plan expert plus
Super barato
Así que queréis hacer
Los cursos de Stephanie
Para aprender desarrollo web
¿Qué cursos tienes?
Aparte
Creo que hay uno de CSS
Pero tienes unos cuantos
Stephanie
Sí
Tengo varios
Son como 9 o 10
Creo que son 10 cursos
10 cursos
Madre mía Stephanie
O sea la mitad de Platzi es tuyo
La mitad de Platzi
Lo has hecho tú
O sea estás entre Freddy y tú
Vais mano a mano
¿No?
Bueno está Oscar Barajas
Stephanie Aguilar
Y Freddy
Que habrá hecho alguno también
Están ahí de esos tres
Mano a mano
Una experiencia espectacular
Tengo cursos de animaciones
Con CSS
De transiciones
Con el tema de animaciones
Con el tema de layout
CSS Grid
De Flexbox
De incluso ahorita
Hace poquito
Creamos uno
Sobre cómo conseguir trabajo
Como frontendivelo
Y varios así como
De frontend
En general
Como hay tecnología
Sobre todo de HTML
Y CSS
Que bueno
Mejor dicho
Ahí sí que demuestro
Que soy fan
A morir de CSS
Muy bien
Que bueno
Oye genial
Mira dicen por aquí
Cómo mola este stream
Pura personas top
La verdad que sí
La verdad que
Personas muy top
Pues bueno
Si os parece
Vamos a empezar ya
Con el CSS
Con State of CSS
Vamos a hablar un poquito
Primero de todo
A mí una cosa que me gusta mucho
De State of CSS
Justamente para que la gente
Pues sepa de
De qué
De qué se trata
Y todo esto
State of CSS
Es una encuesta
Que se hace todos los años
Bueno
No todos los años
Desde hace 20 años
Pero creo que lleva
3 o 4 años
Que se está haciendo
De hecho veremos
Los resultados anteriores
Porque también los comparan
Y
Ahí
Que había puesto
Algo encima de Carmen
A por él no se veía
Te había puesto un chat
Y estaba como ahí escondida
Bueno
Pues el tema
State of CSS
Una encuesta que se hace
Una encuesta que se hace
Todos los años
Donde participa gente
De todo el mundo
Aunque ahora
Una de las cosas
Que me gustaría
Que empezásemos
Es justamente hablar un poco
De la demografía
¿Por qué?
¿Por qué siempre hablo
De la demografía?
¿No?
Porque bueno
Hoy creo que tenemos
Como un panel
Aquí una mesa redonda
Donde somos gente
Bastante diversa
¿No?
Creo que estamos
Carmen y Tamara
Creo que estamos viviendo
En España
Tamara está en Madrid
Carmen si no me equivoco
Está en Barcelona
Yo estoy en Barcelona
Nosotros tres
Estamos en España
Aunque Tamara
No es de aquí
Pero está viviendo aquí
Y Stephanie
Si no me equivoco
Estás en Colombia
Así es
De Medellín, Colombia
Qué bonito
Yo quiero ir a Medellín
Me han hablado súper bien
De Medellín
Por aquí
Cuando quieras
Pues no me digas dos veces
Que voy
Que voy
Bueno
Cuando estén mejor las cosas
Pues el tema
El tema es que bueno
Que nosotros aquí
Más o menos
Estamos diversos
Pero es que la diversidad
De este site of CSS
Veremos que son dos cosas
Es diverso
De que son mucha gente
Participando
Pero por otro lado
Creo que se nota
Que especialmente
Participa la gente
De Estados Unidos
O también hay bastante
De Rusia
Pero aquí ya podemos ver
Un poquito
Que el 14%
De la gente
Que ha contestado
La encuesta
Es de Estados Unidos
Por ejemplo
España
Solo es un 2,6
Solo 225 personas
O por ejemplo
A ver si soy capaz
De darle a Colombia
Colombia
Solo 60 personas
No sé si Stephanie
Ha sido una de ellas
Desafortunadamente no
Y esto
Esto es muy interesante
Stephanie
¿Por qué no lo has hecho?
¿Por qué no te has enterado?
¿Por qué te dio palo?
O sea
¿No te interesaba?
Creo que fueron dos cosas
Una me enteré
Pero la otra
Fue que la encuesta
Desafortunadamente
Es muy larga
Y tal vez en ese momento
No contaba con el tiempo
Y bueno
Desafortunadamente no lo hice
Totalmente
Es un rollo
Porque es súper súper larga
Yo también no la hice
O sea
Sabía que la debía hacer
Y no la hice
Justamente por eso
Porque era súper larga
Y en España
¿Habéis participado?
Carmen
Tamara
¿Habéis participado vosotras?
No
La verdad
Muy bien Carmen
Se me ha rellenado
Alguien lo ha hecho
Alguien lo ha hecho
Hice los deberes
Sí pero
Creo que la rellené
En inglés
Me parece
Ah
Pero Carmen
Acabo de caer
Mira tenemos aquí gente
Que sí que participó
Como Bulltag
Soy yo
Dice
Yo participé
A ver en el chat
Que diga
La gente
Hay gente que dice
Yo creo que la hice
Hay gente que lo ha olvidado
Ya muy rápidamente
Pues esto también
Aquí tenemos justamente
También el idioma
Que es un 72%
De la gente
Es como la han respondido
La han contestado
En inglés
Y Carmen es una de estas personas
Creo que soy una
De esas
Sí
Solo el 5%
En español
Y mira que en castellano
Mira que somos gente
En el mundo
O sea
Me sorprende mucho
Esta diferencia
Y a lo mejor
Es lo que le pasa
Un poco a Carmen
¿Por qué lo hiciste en inglés?
¿Porque te sentías más cómoda?
No
Creo que alguien
Lo compartió por Twitter
Entonces ya le di a la URL
Y también
La verdad
Todo tema técnico
Normalmente es todo en inglés
Entonces ya no
Creo que lo único
Que he hecho
De temas técnicos
Que no han sido en inglés
Han sido en la universidad
De
Estoy en Barcelona
Entonces
Hay estudios que son en catalán
Y en catalán
Es como que se traduce en todo
Entonces sí que se dice
En vez de software
Se dice programar
Y cosas así
Creo que todo el resto
He hecho siempre en inglés
Entonces yo creo que ya es inercia
Claro
Aquí hay gente que dice
Que hay gente que la hizo en inglés
Porque le llegó en inglés
Y
¿De qué es la encuesta?
Me pregunto por aquí
La encuesta
Como vais a ver
Todas las preguntas
O sea
Todas las respuestas
Todos los tantos porcentes
Que vamos a ver
Ya son preguntas
Por ejemplo
Este lenguaje
De que ha respondido la encuesta
Ya es
Pero es sobre el CSS
Sobre el estado
En el que se encuentra CSS
Lo que más nos gusta del CSS
El futuro del CSS
Las tecnologías que más nos gustan
Y este tipo de cosas
Siguiendo con esto
Está la edad
Que no sé
A ver
No quiero preguntar edades
¿Vale?
No quiero preguntar edades
Porque esto normalmente es un poco
Pero yo voy a decir solo una cosa
Yo no estoy
Yo no estoy en el más grande
¿Vale?
En el más grande
Que es de 24-34 años
Que es el 37%
De los que han votado
Yo no estoy aquí
Yo tampoco
Ahora la gente puede pensar
Si es que tengo 23 años
Puede ser
No sé si he puesto caso
Entonces solo voy a preguntar eso
¿Estáis en el trozo más grande o no?
No
Yo sí
Ah, Stephanie sí
Porque tiene 24 años
Justo Stephanie
Ha llegado ahí a los 24
Tamara que tiene que tener 23
Así que tampoco
Correcto, sí
Y Carmen otros 23
Le pasa como a mí
O sea, estamos todos aquí
Sí, igual que tú
O sea, Stephanie
Que sería la mayor
¿No?
Con 24
Y todos los demás
Nada, yo tengo que reconocer
Que yo estoy en este
Básicamente
Yo estoy en el de 57
Ahora estoy en este
En este
Pero bueno
Sí que me sorprende
Yo pensaba
Que íbamos a ver
Poco a poco
Como a lo mejor
No sé
Que la gente
Dice esto de hecho a 24
Pero me sorprende
Como está la campana de Gauss
Pero está la incidencia
Bastante en 24 a 34
No sé si es porque
También el rango
Es más grande
No sé por qué hacen este rango
De 10 años aquí
Y de aquí 6
Pero bueno
Que me sorprendió
Que realmente hay una diferencia
Muy bestia
Muy bestia
Total
Años de experiencia
Bueno, aquí también
Una campaña de Gauss
Aquí ya
Yo estas cosas
Ya no me parecen tan interesantes
Sí que me parece interesante
Aquí el sueldo anual
Que podemos ver
Lo que más típico es
Pero esto lo podemos entender
Porque es en dólares
Y en Estados Unidos
Que es de 50.000 a 100.000
Pero hay gente
Que está por encima
De los 200.000
Aquí
Vaya
¿Por qué no?
Y afortunadamente
Lo que he visto
Este año
Es que se puede hacer
Como match
De varios datos
¿Sabes?
Ah
¿Cómo se puede hacer eso?
Es verdad
Sí, es verdad
Sí, lo que se puede hacer es
Es verdad
Es verdad
Yo lo que he visto
Es que puedes hacer aquí
Como también por ver por país
Lo cual está bastante bien
Porque aquí podemos ver
La diferencia
Entre Estados Unidos
Que el 53%
Está entre 100.000 y 200.000 euros
Y por ejemplo España
Que está bastante abajo
Aquí estaba
Aquí podemos ver la diferencia
Que el grueso
Está entre 30.000 y 50.000 dólares
O sea
Se ve un poco la diferencia
Y creo que Colombia
Aquí puede ser que no salga
Porque a lo mejor
No tenía suficientes datos
Creo que
Claro
A lo mejor con 60
60 personas
Que han contestado
No lo han hecho
Y también se puede ver
Un poco relacionado
Con la educación
Y por experiencias
Y tal
Pero como siempre
Lo más típico también
Es el género
Aquí tenemos el
Que aquí tengo que
Decir que está al revés
Hoy
La mesa
Hoy es al revés
¿Por qué creéis
Que pasa esto?
Es porque la gente
O sea
¿Refleja creéis realmente
Cómo está el sector?
¿O creéis que es que
Las chicas
Las mujeres
No se enteran
De la encuesta
O les da vergüenza
O les da palo
Como me ha pasado a mí?
Cero sorpresa
Quiero decir
Creo que es un reflejo
O sea
Es un reflejo
De cómo está el sector
Más o menos
Yo creo que sí
¿Qué crees tú Stephanie?
Yo sí he notado
Un poquito
El incremento
Del área
Tecnológica
En las mujeres
Por supuesto
Y aquí en Colombia
Sí que hemos hecho
Una gran labor
En temas de comunidades
En temas de conferencias
Mejor dicho
Hemos hecho
Un gran esfuerzo
Para que existan
Más mujeres
En tecnología
Y lo he sentido
Desafortunadamente
Lo que puede estar pasando
Es que en las comunidades
No estemos dando
A conocer
Tanto este tema
De state of CSS
O la importancia
Que esto tiene
También
El impacto
Que puede generar
También en nosotros
Como desarrolladores
Creería yo
Que es más eso
He visto el incremento
Por supuesto
Nos falta mucho
Pero ahí vamos
Ahí vamos
Claro
8,3
La verdad es que
Estaría genial
Poder ver
Justamente
Lo del año pasado
Y ver un poco
Cuál ha sido
La evolución
Creo que ha estado
Bastante bien
Pero fíjate
España
Esto es una cosa
Que sí que me ha sorprendido
Mucho
España está aquí
El número uno
Donde podemos ver
Que son un 21%
De mujeres
Yo creo que en España
A lo mejor se ha hecho
Un buen trabajo
A la hora de las
Pues no sé
De las
Government in Tech
A lo mejor grupos
Que le han dado
Bastante visibilidad
Porque es el país
Que está por delante
De todos
Como el 21%
Mujeres
O sea bastante
Representativo
No está nada mal
O es Carmen
Que ha estado
Haciéndolo unas cuantas veces
Claro
Que ha dicho
Que la ha hecho una vez
Pero no sabemos
Entra en diferentes
Si la ha hecho
Si la ha hecho
Unas cuantas veces
Vale
Bueno luego
Raza
Obviamente
Pues blanco descendiente
Y luego hispanos
Esto es un poco
Para que tomemos
Un poco el contexto
Creo que este
No sé si este es nuevo
Que han puesto
Este no estaba
Este es guay
Este no estaba
Este es nuevo
Y que dice justamente
Cuál es
Si tienes algún tipo
De discapacidad
Y pone no listada
O sea que
Tienes una discapacidad
Pero no aparece en la lista
Que sería esta
Deteriorio cognitivo
Como ansiedad
Dislexia
Visuales
Que pone que un 3%
Y esto recordemos
Son las personas
Que son desarrolladoras
Vale
O sea no es
Los usuarios
Son la gente
Que ha contestado
En la encuesta
Y auditivas
Un poco 4
Y de movilidad
También
Y no listada
Un 20%
Yo he alucinado
Con esto
Estamos muy hecho polvos
Estamos muy mal
De lo nuestro
Una de cada 5 personas
Tiene alguna
O sea de las que han contestado
¿Cómo estáis?
¿Estáis bien?
O sea me he preocupado
Porque he dicho
Significa que hoy
Que somos 4
Uno de los 4
Tenemos hoy
Yo tengo varias cosas
Yo tengo COVID
¿Qué tengo COVID?
¿Eso cuenta?
¿Cómo no he listado?
Ostras
Ostras
Me tenía que haber puesto
La mascarilla
Haber avisado
Así es
Así es
Ah y pues espero que
Nada pues ponte buena
Espero que te recuperes pronto
A ver yo de la cabeza
No estoy muy bien
¿Tú qué tienes Carmen?
Que decías que
También te das unas cuantas cosas
Ah no yo estoy aquí
Muy guay sin gafas
Pero no veo nada
¿Sabes?
Esto es la misma que aquí
La guay sin gafas
Pero no pasa
Como hagas leer algo
Eh
Sí
Pero no veo bien
No está mal
No está mal
Bueno
Esto es un poco
Para ponerlo todo en contexto
¿Vale?
Porque lo importante
Empieza ahora
Esto sería un poco
Para que lo tengamos en contexto
Porque muchas veces
La gente toma estas encuestas
Como si fuese la verdad
La verdad absoluta
De lo que pasa en su pueblo
En su ciudad
Y no
O sea
Es demasiado grande el mundo
Como para que esto sea representativa
De lo que pasa
Por ejemplo en Medellín
A lo mejor en Medellín
Las cosas que vemos
Por ejemplo
El grid
¿No?
Pues vemos que la gente en Medellín
Sabe mucho de grid
¿No?
Y a lo mejor aquí nos sorprende
Que hay 50% de la gente
No lo sabe
Bueno
Que lo tengamos en cuenta
¿No?
Y también
Pues a qué representa esto
Es interesante ver estos datos
Creo que la demografía
Siempre es súper interesante
Para partir de esto
Pero que bueno
Que ahora vamos con lo
Vamos con lo realmente interesante
Las características
Porque bueno
Entre Houdini
Las CSS Properties
Que ahí Stephanie
Le da cañita
Y todo esto
Vamos a echarle un vistazo
Con el tema del diseño
El CSS Grid
¿Qué os parece esto?
La evolución desde el 2019
Stephanie contenta
Bueno
Es que solo el 16,4%
Lo dice que sé lo que es
Pero nunca lo ha usado
Y un 83% lo ha usado
O sea
Ya todo el mundo sabe lo que es
Ha cambiado un montón
¿Creéis que realmente?
Sí Stephanie
Cuenta
Yo soy fan de CSS Grid
Pero impresionante
Y sobre todo
Me gustan dos cosas de CSS Grid
Uno la tecnología
Y dos
Toda la historia que tiene también
Y me parece increíble
Que hoy en día
Ya más personas lo conozcan
Y sobre todo
Porque cuando lo lanzaron
Inclusive en 2017
Que fue como
Ey ya tenemos esto
¿Cómo fue también
Decir como
Esto es Grid
Sino como
Esto es realmente CSS
Esto es lo que nosotros queremos
Con CSS en general
Entonces como que
Me ha parecido una cosa espectacular
Toda la historia que tiene
Y me encanta
Porque inclusive
Centrar un tip
Horizontal y verticalmente
Que para todos
Ha sido como tan complejo
Siempre ¿No?
Porque busquemos en Google
Cómo se hace
Y con Grid
Con dos propiedades
Lo podemos lograr
Súper sencillo
Entonces me encanta
Este sistema de layout
Que nos ayuda
A un montón de cosas
Entonces feliz de la vida
De que estoy cobrando
Tanta fuerza
Sobre esto
¿Qué opináis
Sobre el hecho
Porque hay mucha pelea
¿No?
Mucha gente
En los chats
En directos
Me comenta
Midu
Grid o Flex
Entonces
¿Qué opináis
De esa pregunta?
¿Qué le diríais?
¿Ves?
Mira
La acaban de decir en el chat
Mira
Es mejor
Es mejor Grid o Flexbox
Ya está
¿Eh?
O sea
Pam
Bueno
Esa es literal
Pregunta súper común
Sí, sí
Demasiado común
Pero bueno
Flexbox y si
Esas son dos cosas
Completamente diferentes
Tienen similitudes
Por supuesto
Pero Flexbox es unidimensional
Y si es el Grid
Es bidimensional
Y ambos también
Pueden trabajar en conjunto
Entonces es bastante
Interesante tenerlo en cuenta
El uno nos puede ayudar
A ubicar elementos
Por ejemplo
Uno al lado del otro
O en columna
En fila
Lo que sea
Pero el otro
También nos ayuda
Que si es el Grid
A un sistema de layout
A construir páginas
Completas
A no solamente
Centrar elementos
Sino ubicar
Que el header está acá
Que el footer esté acá
Que el sidebar esté acá al lado
Entonces como
Se pueden también
Complementar el uno
Con el otro
Yo siento que
No es cuál es mejor
Sino qué necesito
En ese momento
Y cómo ambos
Pueden funcionar juntos
O cuál de los dos
Me puede servir
Para determinados casos
Exacto
Eso hay muy breve
Porque obviamente
La explicación es
Aquí me quedo
Pero es más o menos
Tamara
¿Has utilizado Grid
Este año
O todavía no?
Sí
Sí
Lamentablemente
No sé
Y es lo típico
Lamentablemente
Lamentablemente
En principio
Cuando tienes que hacer
Cosas más complicadas
Y como que lamentablemente
Es porque la has pasado mal
Tamara
¿Qué ha pasado con eso?
Aló
Ah sí
Es que se te ha cortado
Aló
Sí
Se te escucha
Sí
Perdona
Perdona
No pasa nada
Ya se escucha
Ah guay
Sí
Ahora sí que se te escucha
Que decías
Que lamentablemente
¿Por qué te ha pasado lamentablemente?
No sé
O sea
Hay veces que tienes que ser
Cosas muy complicadas
O cosas que ya
No sé
Como que la curva de aprendizaje
Todavía no estoy en ese nivel
Y tiendo a utilizar
Flex
Box más
La verdad
Si puedo escaparme
Sí
Si puedo escaparme
Claro
No, no
Está bien
Está bien
¿Y tú Carmen?
¿Qué tal con Grid?
Pues muy bien
O sea
Quiero decir
No podría montar
Layouts
O Layouts
Complejas
O me quita
De meter muchas
Media Queries
También para
Posicionar
Porque
Tienes
Como
Definición de áreas
Donde tú puedes decirle
Pues el header
Tal cual
O sea
Header
Main Footer
O lo que le quieras
Poner de nombre
Y entonces
El contenido que tengas ahí
Es lo que se muestra
En el Grid
Así que me ayuda bastante
A tener
Layouts más complejas
Sobre todo
Pasar de Mobile
A Desktop
O así
Sin tener que meter
Media Queries
Entonces
La verdad
Que a nivel
De montar
Layouts
Muy guay
Da un poco de pena
Porque Subgrid
Que no sé
Si es lo siguiente
Aún no
Lo podemos utilizar
Solo
Si no me equivoco
Firefox
Me parece
Entonces
Bueno
Poco a poco
Yo la verdad
Que lo de Subgrid
No sé si
Alguna de vosotras
Lo ha utilizado
Sabe exactamente
Mira Estefany
Es que Estefany
Ya está ahí
A la vanguardia
Yo la verdad
No he sido capaz
¿Qué es esto de Subgrid?
¿Nos puedes explicar un poco
Estefany?
Sí
Bueno
Afortunadamente
Lo que hablamos
Al principio
De la conferencia
Que en 2019
Tuve la gran fortuna
De estar ahí
Presente con Rachel Andrew
Contándonos
Sobre que era Subgrid
Y desde ese momento
Me entró como esa chispa
De yo también quiero saber
Sobre esto
Y qué es lo que están haciendo
Y también como en el tema educativo
Por ahí tengo
En mi Twitter
Tengo un link
Ahí hay varios retos
Y así todo eso
De hecho hice uno
Hace
Creo que este año
Hace algunos meses
Sobre cómo construir un menú coreano
A partir de si es
Es el grid
Y subgrid
Entonces por ahí
Por si lo quieren
En la vía real
Les confieso
Nunca lo he utilizado
Pero de qué trata
Básicamente
Cómo nosotros
También podemos
Entre comillas
Heredar
Como esas columnas
O filas
De nuestros elementos padres
Entonces es bastante interesante
Muy chévere
También poderlo trabajar
Y manipular
Saber de qué trata
Entonces
Me ha parecido
Súper interesante
Este tema
Muy bueno
Luego
Por supuesto
Teníamos Flexbox
Que bueno
Esto ya lo conocí
Una cosita
Ah sí
Dale
Dale
No tiene
No tiene
Tiene support
¿No?
O sea
Según entiendo
Creo que solo
Firefox
Tiene support
De su script
Puede ser que por eso
La mayoría de la gente
Lo podemos ver aquí
Que no tiene mucho
Mucho soporte
Ahora mismo
Subgrid
Y lleva mucho tiempo así
O sea
Realmente
Da la sensación
Que nadie
Nadie quiere implementar
Subgrid
Y a lo mejor
Es por lo que dice Stephanie
Que no queda muy claro
A veces el tema de
Cuál es la utilidad real
Que a lo mejor
Seguro lo tiene
Pero que a lo mejor
La gente
Pues como no lo ve
O no le tiene la necesidad
Pues no
Pero si un 3%
Solo de los navegadores
3,5
Son los Firefox
Así que complicado
Complicado
Luego Flexbox
Que aquí sí que estamos
Todos de acuerdo
Que ya creo que ya
Ni hace falta comentarlo
Porque claro
Ya está demasiado
Demasiado
No sé
No sé si el año que viene
Subirá un poco más
Es que ya
Está difícil
Está difícil
Y luego multicolumna
En CSS
Esto no sé si
Sabéis un poco
Lo que es
A mí me ha costado
Cuando lo he leído
En castellano
Me ha costado
Y todo
Sí
Porque no has trabajado
Con InDesign
En Editorial
Ah
Claro
Entiendo que Editorial
Pero
Yo creo que para noticias
Y periódicos digitales
Tiene que ir muy guay
Porque al final
Lo que te hace
Es que te coge el texto
Y te va rellenando
Te pone tres párrafos
Y te lo rellena
Con las columnas
Y párrafos
Algo así
El column count
La verdad es que queda
Súper bonito
Al rollo periódico
De Editorial
Yo creo que el mayor uso
Que tiene
Al menos
Desde no se me ocurre
Otro ejemplo
Ahora mismo
Es para esto
Es maravilla
Sí, sí
Queda brutal
Es curioso
Como en el 2019
Nunca había escuchado
41%
Y luego un 43%
O sea, la gente lo olvidó
Dijo
Lo voy a olvidar
Y luego
Y ahora es como que
Están volviendo otra vez
Se lo olviden
Y después un mal año
Sí
Luego modos de escritura
La verdad es que
Sí que veo que
Está evolucionando
No sé si habéis tenido que trabajar
Con modos de escritura
Es un percal
En la vida real
No
Por ejemplo
Yo trabajo para Latinoamérica
Entonces no me ha tocado
Tener ese target
De hey, necesito que otra persona
Que escriba de izquierda a derecha
Lea mi contenido
Pero sería interesante
Y es bueno también saber
Para qué funciona
Y también es interesante
Saber que nosotros somos
De izquierda a derecha
De derecha a izquierda
Solo con eso también
Nos conocemos a nosotros mismos
Entonces
Ha sido interesante
En la vida real
No me ha tocado trabajarlo
La verdad
¿Tú Carmen?
Que a lo mejor en Mango
Que es mucho más internacional
En Mango no
Pero en Desigual sí
Para Israel
Claro
Porque sí que es verdad
Que muchas veces
Se hace en inglés
Pero Israel es como muy
A nivel de temas legales
De accesibilidad
Y de
Y hemos estado poniendo
Como las pilas
Y entonces
Sí que tuvimos que utilizarlo
Además de una tipografía
Que aceptara
Claro
Hebreo
Pero hacerlo bien
Es complicadísimo
No solo es girar
Y ya está
Porque si giras
Piensa que en el layout
También
Hay diseños que no tienen sentido
Y entonces
Es bastante complejo
Hakon dice
Ni idea
¿Qué son los modos de escritura?
Bueno básicamente
Carmen lo ha explicado bastante bien
Y es que
Y es bastante complejo
La verdad es que uno
No se hace la idea
De lo difícil que es esto
Porque bueno
Hay que tener en cuenta
Que hay algunos idiomas
Que se escriben
De derecha a izquierda
Pero también
De abajo a arriba
A lo mejor no de arriba a abajo
O se hace
O no se hace horizontal
Sino que se hace vertical
¿Sabes?
O sea
En los modos de escritura
Pueden ser muy diferentes
Por ejemplo
En Japón
Si no ir más lejos
Se puede escribir
De las dos formas también
O sea
Se puede escribir
Creo que de izquierda a derecha
Pero también de arriba a abajo
O sea
Tanto horizontal como vertical
Y claro
Por eso
No solo tenemos aquí
Tenemos la dirección
El modo de escritura
El text orientation
Hay un montón de propiedades en CSS
Que justamente
¿Veis?
Aquí podemos ver
Como se contaría al revés
Pero no porque estén en reversa
Estos números
Sino porque esto es
La dirección sería
Left to right
Y luego tendrías
Right to left
Y esto no es que esté al revés
No es que ha hecho una reversa
Es que lo estás leyendo al revés
O sea, está bien
Está ordenado
Solo que estás leyéndolo
Hacia el modo antinatural
Para nosotros
¿No?
Claro
Pero es muy interesante esto
Y una cosa que
Mira, aquí tenemos
Por ejemplo
Lo que comentaba
¿No?
Esto sería
Horizontal
De top to bottom
¿Vale?
El TV significa eso
Vertical left right
Pero claro
Vertical left right
O vertical right left
Es un locurón
Esto es una caja de Pandora
Que nadie quiere trabajar con esto nunca
¿Eh?
Porque el diseño también cambia
Claro, en este ejemplo
Lo vemos muy fácil
¿No?
Sí
Pero luego locurón
Luego locurón
¿Te costó mucho, Carmen?
¿Cuándo hiciste esto?
Bueno
Suerte, entre comillas
Porque al final era una franquicia
Entonces tienes que darle las herramientas
Para que puedan
No se les monte nada
Pero
Entre comillas
Vas un poco a mínimos
A la hora de hacer los layouts
¿No?
Claro
Que no hay nada que se rompa
Que se pueda
Pero si quieres hacerlo realmente bien
Tienes que tener otro diseño
Concreto para esa casuística
Que en este caso
Pues hebreo
O japonés
La mayoría de comillas
Lo que se hace es
O directamente en inglés
O sea, no contemplas
Ni japonés
Ni hebreo
O árabe
Y si quieres hacerlo bien
Deberíamos hacer un diseño diferente
Porque no tiene sentido
O sea, una cart
Depende de cómo hayas diseñado
No tiene por qué funcionar al revés
O sea
Girando
¿Sabes?
Entonces
Es bastante complejo
Claro, es que a veces
Nosotros diseñamos justamente
Pensando en
De izquierda a derecha
Arriba a abajo
¿No?
Escanear la información así
Tenemos más
Position Sticky
Me encanta a mí esta
No sé si la habéis podido utilizar
Sí
Pero está un poco rota
¿No?
La de Position Sticky
No sé si os ha pasado
Mucha gente se queja
Hay muchas quejas
De Position Sticky
Sí
Lo que pienso yo
Que es porque es un Position
Completamente diferente
A todos los Positions
Es como que funciona así
Y ya como que
Le doy un top
Listo, funciona
Y que ya tiene un posicionamiento
Sino que como él funciona
¿No?
Que si él es un hijo
Y necesita tener un padre
Y que también necesita tener hermanos
Entonces como que eso ha sido
Un poquitico más complejo
Para este Position en particular
Claro
Mira, a ver si sale aquí
Mira, aquí tenemos el Position Sticky
Claro, que he visto así
Parece un fix
Sí, en este caso parece como un fix
Dice
Alguien que lo vea así
Dice, ah, como un fix
Pero no
Porque la gracia está aquí
En la magia esta que hace aquí
Que lo empuja
Y ahí está
Que dices, ostras, qué bonito
La verdad
Pero un montón de gente la ha usado
Yo la verdad
Que me he quedado bastante sorprendido
Pensaba que no
Mira, Cami dice
Hay un bug súper raro
Con Position Sticky en Chrome
No, es que es verdad
Hay un montón de pequeños bugs
Y mucha gente se queja
De que no funciona con ciertas cosas
Mira, Estefan
Estefaní
Los unidades lógicas
Aquí lo tenemos
Sí, mi favorito
Aunque literalmente
Ha sido muy polémico también
Por la misma razón
De lo que hablamos ahorita
De Grady Modes
Que es bastante complejo
Y ya tenemos otro modelo de caja
Entonces si antes teníamos
Un modelo de caja pequeño
Ahorita es pensar el otro
Entonces claro
Se complejiza bastante
Claro
Veo que como que sí que
Ahora ya sí que tiene
Bastante soporte
Recientemente
Bueno, recientemente
No, veo que tiene bastante soporte
O sea, ya no
¿Para qué lo podría utilizar?
¿Cómo podrías?
Porque yo la verdad
Tampoco, no sé
Con qué
O sea
Nunca
Como estoy tan acostumbrado
A lo que dices tú
A lo mejor estamos tan acostumbrados
En nuestro día a día
A utilizarlo de siempre
¿Tú ya siempre escribes de esta forma?
Porque me parece brutal
O sea
O no
O si es con lo clásico
De siempre
La verdad
Sigo con lo clásico
Ahora que muestras
De la documentación
Cuando hice la charla
Sobre este tema
Me tomé la tarea
De traducir toda esa documentación
¡Qué bueno!
Literalmente
Ahí debo estar
Bueno
Esta traducción
La ha hecho Stephanie
Y literalmente
Es algo de comunidad
De cómo nosotros
Como comunidad
Tratamos de hacer
Que
Mejor dicho
Llegue a varias partes
Y no
Realmente
En la vida real
En producción
Nunca lo he tenido
Que trabajar
Pero sí me parece
Bastante interesante
Primero que lo conozcamos
Y que también
Seamos empáticos
Porque yo creo
Que esto
También trabaja
Un poquitito
De cómo pensamos
En el otro
Y cómo ve el otro
El contenido
Entonces
Me parece interesante
No lo he trabajado
Pero hay que
Hay que seguirle dando fuerza
También como comunidad
A que tratemos
De verle otros lados
Y otras características
Y otras funcionalidades
Para que se pueda
También empezar a utilizar
E implementar
Buenísimo
Esto
Al final
Para que la gente
Por si no sabe
Lo que es
Es como pensar
Justamente
En bloques
O en líneas
Porque claro
Si tú cambias
El modo de escritura
Que hemos visto antes
Si tú pones
Por ejemplo
Margin top
Margin right
Y todo esto
Claro
Margin top
Estás hablando
De arriba
Pero en realidad
Deberíamos estar hablando
Más de
Si es en línea
O es en bloque
Son términos más abstractos
Para que independientemente
Del modo de escritura
Y de cómo se vea
A la hora del usuario
Esa información
Pues pueda
De alguna forma
Tener el diseño correcto
Lo que pasa
Es que a mí
A mí personalmente
Me cuesta una vida
¿Sabes?
Nunca
Aunque lo sé
Nunca
Nunca lo he
Nunca lo he utilizado
La verdad
Tengo que reconocer
¿La habéis utilizado
Tamara, Carmen o...?
No, no
Es que...
No
Pues no
Tranquilas
Estáis en el 46,4%
No pasa nada
El aspect ratio
Aquí sí que por fin
Esto me parece
Súper interesante
Que...
Bien
Increíble
Increíble
Esto ha cambiado muchísimo
¿Os acordáis del hack
Ese de padding?
Ay, sí
Sí
¿Cómo le damos ese tamaño de alto
A una imagen?
Por ejemplo
Eso es muy común en Heroes
Como si tienes una landing page
Por ejemplo
Y tienes esa imagen grandota
Del inicio
Y cómo hacemos para que
Esa dimensión de esa imagen
Se pueda sostener
A lo largo del redimensionamiento
¿No?
Entonces antes lo que hacíamos
Era eso
Ese hack
Esto
Es horrible
O sea, esto es 16,9
Que dices
¿Pero por qué?
¿No?
Entonces tienes que decir
No, claro
Porque si tú
Haces esto
No, esto no
9 entre 16
No, es que es complicado
Es al revés
Claro
Esto es 9 por 16
Por 100
Pues entonces tienes 56,25
Esto era una locura
Esto era una locura
Encima tenías que poner
Position Absolute
No sé qué
Bueno, bueno
Una locura
No se ha cambiado la vida
Y la verdad es que
Muy bien
Que creo que tiene ya
Un soporte bastante grande
Todavía falta
Bueno, Internet Explorer
Ya nunca lo va a tener
Pero bastante bien
Lo habéis usado
Yo lo uso mucho
Con obviamente los embeds
Pero comentabas
Los Heroes también
Sí
Ahí es donde lo he usado
No sé si de pronto
Carmen ha usado
En otro lado
De Tamara
Tamara
¿Lo has usado tú
Aspect Ratio
O no?
Estás en 16,9
Estoy en 16,9
Realmente
No pasa nada
Tamara
Te lo vamos a explicar
Carmen
Explícale el Aspect Ratio
Vale
Las imágenes tienen
Bueno, imágenes, vídeo
Todo
Media tiene una proporción
Y tú cuando la haces crecer
Pues tiene esa proporción
Entonces
Esta propiedad
Lo que te deja decirle
Es que
Que tenga tal cual
La que tiene
O 16,9
O veis
Aquí es
1,1
16,9
Entonces al final
Esa imagen va a ir creciendo
Con la proporción correcta
Con lo que ni se va a cortar
Ni vas a tener que hacer un cover
Ni vas a cortar cabezas
Principalmente a mí me va muy bien
El tema
E-commerce
Que no cortas cabezas
Ni tienes que hacer hacks raros
Entonces es como mucho más fácil
Y ya sabes la proporción
De esa imagen
Es lo típico
Que tienes así
Y va creciendo
En proporción
Tú estiras de la esquina
Que los SVGs
No se dimensionan así
Pero bueno
En el caso de
Media sí
De imágenes sí
Entonces
¿Ves?
Te mantiene esa proporción
Entonces
Claro
Está bien
Porque hay veces
Que no puedes saber
Las dos dimensiones
Por ejemplo
Sí que puedes saber a lo mejor
El width
Que sea del 100%
Claro
Y dices
Claro
Quiero que el width sea del 100%
Pero ¿Cómo voy a saber
Cuál es la altura?
Lo que sí que tengo claro
Es la relación de aspecto
Que tiene justamente
Este bloque
Que esto puede ser una imagen
Como decía Carmen
O puede ser un iframe
O puede ser una imagen
De Instagram
Claro
Si es una imagen de Instagram
Dice
Vale
Pues la Asper ratio
Es 1-1-1
Porque es cuadrada
O si es la tele antigua
Pues 3 segundos
No sé cómo se dice esto
Pero bueno
Que es súper interesante
Es súper interesante
Interesante porque siempre
Mantiene la relación de aspecto
Y ya está
No te tienes que preocupar más
Nunca más
Qué bueno
Gracias
Nada, nada
Aquí
Nunca te acostarás
En saber una cosa más
Así que ahora
16,8
Ah, 4 tercios
Es verdad
4 tercios
4 tercios
No veas
La gente está atenta
Con estas cosas
¿Ves?
Dice no, no
Las teles viejas
¿Sabéis qué pasa?
Que yo soy muy joven
Que yo tengo 23 años
Yo no recuerdo
Cómo eran las teles viejas
Es que
Content visibility
La habéis usado
Yo lo he intentado usar
Y no he visto absolutamente
Ninguna mejora
No he visto nada
¿Sabéis lo que es más o menos?
Sí, tiene más que todo
Que ver con el tema
De performance
Cómo hacemos para que
Si la página renderiza
Y todavía no quiero mostrar
Cierto contenido
Entonces espero
Guardo como dice
En caché
Y luego cuando lo tengo
Que mostrar
Ahí sí
Que se renderiza
Por completo
Entonces
Sé que es para eso
En la vida real
Tampoco voy a utilizar
Pero es interesante
Como también podemos
A partir de CSS
Y de propiedades
También jugar con el tema
De performance
Y ayudar a nuestros sitios
Sobre esto
Si a alguien le interesa
Lo que
Creo que el que mejor lo explica
Es un artículo de web dev
Que
O sea
Porque ves una demo
Básicamente
Y que habla de esto
Que comentaba Stephanie
Y ves la diferencia
Incluso
De la mejora de rendimiento
Se supone
Porque yo ya os digo
Que yo lo he estado probando
¿Dónde está
Lo interesante
Del content visibility?
Está en footers
Cosas que están muy
Muy lejos
Del viewport
Y lo que
Es interesante
Es que justamente
Pues te quita ese trabajo
Que comentaba Stephanie
Pero ya os digo
Yo sí que lo conozco
Lo he intentado usar
Pero yo estaría
Entre estos dos
Porque aunque lo he intentado usar
Yo no le he visto
Ningún tipo de
De
De ventaja
Vale más
Gap property for flexbox
Creo que
Que sí
Que bien ¿No?
Y black rules
Container
Este puede ser uno
De los más interesantes
¿No?
Eso es muy guay
A ver Carmen
Coméntanos
¿Qué son los container queries?
Bueno
No sé si
Ayer o antes de ayer
Safari ya
Creo que
Creo que se puede utilizar
Puede que me equivoque
Yo solo lo he utilizado
Con flag en Canary
Para poder utilizarlo
Entonces
Pensad que una media query
Puedes hacer
A nivel de viewport
Que se comporte
Dependiendo del tamaño
En este caso
Es a nivel de elemento
Puedes tener
Varias cards
En el layout
Y dependiendo del viewport
Del tamaño que tiene
Pues puedes hacer que
Se vean tres
Que una baje
Y así
Pero no a nivel de contenido
¿Vale?
Entonces con esto
Puedes hacer que a nivel de contenido
Se comporte dentro
Los elementos
¿Vale?
Que vayan
Vayan modificándose
¿Sabes?
Entonces es a nivel del padre
Elemento
No a nivel de viewport
La podéis utilizar ya
Yo a nivel personal
De probar
Con todo lo que explicó
Google
En el Summit
Estuve probando
Cosas que
Yuna Kravitz
Fue diciendo
Pero a nivel de Canary
Que es el de desarrollo
De Chrome
Y con un flag
Para poder activarlo
Pero más allá de eso
No
Pero sí que es verdad
Que hay como mucha hype
¿No?
Del poder
Yo creo que
A ver qué opináis
¿Puede ser que esta sea
Una de las grandes evoluciones
Que nos espera en el CSS?
Para mí sí
A ver Stephanie dice
Bueno
Yo soy feliz
Con las media queries
A ver
¿Sí no?
Yo siento que
Está muy interesante
El tema de
Micro layouts
Como esos layouts
Pequeñitos
Y me parece súper interesante
Pero también puede ser
Un retrabajo
¿No?
Porque si ya tengo
Un media query
Para toda mi página
¿Para qué voy a hacer?
Para la CAD
Para el CURRE
Para el NAP
Para...
No sé
Creo que todavía tengo
Mi idea
Sí, yo entiendo
Yo entiendo que
Yo entiendo que el propósito
Es como
Claro que
O sea
Es más relacionado
Con un componente
Para que si quieres usar
Un componente
En otra cosa
Pues se mantenga eso
En lugar de estar
Dependiendo de media query
Entiendo yo que
Más o menos
Ese es el problema
Que intenta solucionar
¿No?
Claro
Para Design Systems
Puede tener sentido
¿No?
Porque tú no sabes
Creo que
Entiendo
Claro
Es que yo estoy haciendo
Design Systems
Entonces
Para ver
Como
Depende del contexto
De cada uno
Claro
Porque no te
O sea
Entiendo que esto es útil
Porque tú no sabes
Cuando
O sea
Dónde se va a utilizar
Este elemento
¿No?
Si por ejemplo
Tienes un botón
Y se va a comportar así
En base al contenido
Que tiene
Claro
Igual ahí es donde
Si que
Es verdad
Yo creo que
Siempre que se pueda
Yo lo evitaría
¿No?
Yo ya lo haría
Sería Team Stephanie
Para el tema
Sí
No
O sea
Sería para intentar
Hacer media query
Para no
Porque lo complicaría mucho
Pero claro
Un Design System
Entiendo que
Una card
Que no sabes
En qué layout va a estar
Y no puedes depender
Del ancho de la ventana
¿No?
Pues sí que digas
Vale
Pues voy a utilizar
Este tipo de
Nuevas containers
Yo te digo
Lo he probado
A título personal
Porque aquí
En la survey
No hay un check
De
¿Lo has probado
En tu casa?
¿Lo has probado
Producción?
No hay un check
De eso
Entonces
Yo lo he probado
A título personal
Con una card
Porque además
El ejemplo que ponían
Era con una card
Y no sé
Como mucho hype
Es una función
Un poco experimental
Ya veremos
A lo mejor
Luego es un bluff
Sí
Y nos vendrá
Estefani
Yo lo dije
Yo lo dije
Yo lo dije
Es que ya
La veo
La veo
Venir
Por eso Carmen
Está poniendo
En el minuto
Aquí tendríamos
Este ejemplo
El típico de la card
¿No?
Que básicamente
No sabrían
¿No?
Contender queries
La verdad
La verdad
Que yo no
Me hubiera gustado
Cacharrear más
Se parece
Para si alguien
No ha visto
La sintaxis
Sería esta
Y es eso
Decir el contenedor
Que cuando el contenedor
En lugar de ser toda la ventana
Sino que cuando el contenedor
Sea así
Pues entonces
Hago esto
Muy parecido a media queries
Pero a nivel de contenedor
Lo cual está
Bastante
Bastante bien
Creo que ha habido cambios
De la última vez
Al menos que yo lo he visto
Porque
¿No?
Ha habido cambios
Creo que ha habido cambio
De sintaxis
Pero como no sabe
En qué momento está
De draft
Como hay varias fases
No sé en qué está ahora
Mira y aquí tendremos
Esto también
Esto sería como para indicar
El tipo del contenedor
El nombre del contenedor
¿Ves?
Aquí le ponemos
Cyber
Y aquí sería utilizando
¿No?
En la media query
El contenedor
O sea
Container query
Del cyber
Cuando pase esta
Pues entonces
Tendremos que aplicar
Este estilo
Pero yo entiendo
Lo que decís
Pero lo que pasa
Es que como
Todo
Todo súper poder
Lleva una gran responsabilidad
¿No?
Entonces hay que
Con cabeza
Pero creo que hay
Casuísticas
Que pueden solucionarte
Bastante
Pero también
Para ser algo
Tan experimental
Mucha gente
Ya
O sea
Lo conocía
O sea
Hay hype
Hay hype
Por esta propiedad
Hay hype
Siempre hay hype
A ver
Esto es programación
Web
Es desarrollo
Creo que
Vemos algo
Que está ahora
Ahí
Que no es ni beta
Y estamos ya
Ahí un nuevo
A probarlo
Totalmente
Totalmente
Bueno
Tenemos ahora
Las formas
Este vamos a intentar
Un poco más
Raudos
Porque
Al menos a mí
Me parece un poco
Por encima
Que tampoco es
O sea
Son cosas muy
Object fit
Shapes
Esto que pone
Formas en CSS
Estos son los
CSS shapes
Clip path
Máscaras en CSS
Entonces lo que
Si queréis
Lo que podemos hacer
Es más
Que me comentéis
De todos estos
Si hay alguno
Que queráis
O sea
Que queráis destacar
Yo por ejemplo
El que quiero destacar
Es el de accent color
Pero no sé
Si habéis utilizado
Por ejemplo
Los con el gradient
Que quedan súper bien
O habéis utilizado
Backdrop filters
No sé
Si queréis destacar
Alguno
Alguno de estos
De formas
Que digáis
Ostras
Yo con este
Me encanta
Yo soy fan
De object fit
Para imágenes
Desde que la descubrí
Mi vida cambió
Porque literalmente
Para el tema
De imágenes
Es súper poderoso
Como no dañamos
La imagen
A la hora
De hacer ese
Resize
De lo que hemos
Hablado ya
A lo largo
De toda esta sesión
Pero yo creo
Que me quedaría
Con esa
Propiedad favorita
De esta sección
Object fit
¿Eres del team
Cover
O del team
Contain
Es porque hay dos
Del cover
Yo también soy
Equipo cover
Para que la gente
Entienda un poco
Object fit
Al final lo que puedes hacer
Si tú tienes una imagen
Puedes hacer el fill
Pero el fill
Es el que no le gusta
Estefany
Este es el que no le gusta
Porque obviamente
Se rompe la imagen
Y queda un poco
Las flores ya están
Un poco como que
Ha pasado navidades
Y se ha comido
Unos cuantos turrones
La pobre flor
Luego está el contain
Que es la que está bien
Y luego está la cover
Que lo que hace
Es que
Ocupa todo el espacio
Pero corta la imagen
Pero claro
Ocupa todo el espacio
El contain lo malo
Es que ves toda la imagen
Pero dejas unos huecos
Aquí blancos
O sea que tú eres equipo
Cover
Cover
Tamara
¿Qué equipo eres?
Cover
Cover
Siempre
Cover
Cover
Siempre
Carmen
Sí
Pero a veces
Hay casuísticas
Que también utilizo
El otro
Pero sí
Sí
Súper potente
Cover
Object fit
Vale
Tamara
¿Cuál te gusta a ti?
Bueno
Hay una clip pad
Y mask
Y he de destacar
Que Carmen
Tiene una charla
Muy muy guay
De SVGs
Que recomiendo
Que vean
Y que bicheen
Porque
Gracias
A ti
A ti
Es que está muy guay
La verdad
La verdad es que
Clip pad
Es súper súper súper potente
Y
Y
¿Con cuál es con el otro
Que puedes hacer además
Que el texto
Es con mask
¿Es el de mask
El que
Porque puedes hacer
Tú puedes tener
Uno es el clip
Para la imagen
Pero luego además
Lo que puedes hacer
Es que el texto
Rodee la imagen
Puede ser
Sí ¿No?
Sí
Ah no recuerdo cuál es
Ah que rabia
Carmen ¿Sabes cuál es?
Que es una crack en esto
Pero estamos hablando
De
De
De SVG
O de CSS
Porque aquí lo que he visto
Es que clip pad
También estaba dando soporte
A nivel de
De HTML
O sea a nivel de
De SVG lo tiene
Como SVG básico
Pero
Es que con el clip pad
Una vez que tú haces esto
También lo que puedes hacer
Es que el texto
Que vemos aquí
No sé si es mask pad
O algo así
¿No será mask?
Ah no recuerdo
¿Path outside?
Bueno
Veo que no funciona
Me estoy inventando
El CSS del futuro
Me estoy inventando aquí
Bueno pues hay una propiedad
Que lo que hace
Es que
Esto sería visualmente
Pero lo que puedes hacer también
Es que le afecte
De alguna forma
Para que la sección
También el texto
Note que esta forma
Es redonda
Y entonces
Es con mask
Es con mask
Sí
Sí
Me suena que es con mask
Pero no
Ah no sé
Bueno
Luego lo
A ver si lo podemos buscar después
Y os lo enseñamos
Bueno aquí pone
Máscara CSS
Igual sí que es este
Vamos a abrirlo un momento
Porque más
Yo creo que es más
¿Puede ser ese?
Sí sí
Yo creo que es más
Sí
Puedes decirle que
Que tenga
Yo sé que en el
De labs
De Jim Simmons
Hay un ejemplo con eso
No le cuela
No le cuela
Bueno igual es que no puedo poner aquí
Lo que me dé la gana
También es verdad
Que yo estoy aquí poniendo
Yo estoy reinventando MDN aquí
Con lo que me da la gana
Pero no
Ya veo que no funciona
Bueno no pasa nada
No pasa nada
Ya lo encontraremos
Ya lo encontraremos
Es que es una pena
Porque es que queda muy bonito
Y lo he visto
Lo he visto en algunos sitios
Clip path
Mask
Tesc
Lo he visto en algunos sitios
Que lo hacen
Mira
Clipping and mask
In CSS
A ver si lo vemos
Solo porque
Mira esto sería el clip path
Que además
Os recomiendo un montón
Clippy
Que es un sitio súper chulo
Para justamente hacer estas cosas
Lo podéis cambiar
Y sí sí
Y tiene cosas muy chulas
Hasta como con forma
Bueno estoy a lo mejor
Un poco católico
De
Diceano y tal
Igual para una iglesia
Puede estar súper chulo
Clothes
Bueno que hay un montón
No que está bien
Lo digo en serio
Una iglesia
Luego puedes hacer esto
Que puede ser
Que te dé una cosa chunga
Aquí con transformaciones
Y todo
Pero
Ah no pero esto ves
No tampoco
Bueno pues no lo encuentro
No encuentro lo del texto
Qué rabia
Es como que el texto
Se adecua
A la forma
Que tienes
Lo he visto
Pero no
Tampoco me acuerdo
Sí
Bueno
Pero sí
Vete al laboratorio
De Jen Simmons
Labs
Entonces Jen Simmons
Ella tiene
Ejemplos con este
Con este tema
A ver si
Mira ya está
Alguien me lo ha chivado
Shape outside
Ah
Shape outside
Ah muy bien
La demo es súper chula
Me encanta la demo
Porque lo podemos ver
Perfecto
Sí eh
La demo
La demo
Igual
Bueno claro
Esto a lo mejor es el zoom
Vale pero es esto
Es esto
Que esto
Hay veces que puedes hacer
El clip path
Y utilizas el shape outside
Y utilizando las dos cosas
Puedes hacer estos efectos
Súper chulos
En los que
Claro bueno
Este no está bien del todo
Porque al final puedes hacer
Un polígono
O con la url
Le puedes indicar
La url de la imagen
Y también lo detecta
O puedes decirle
O puedes decirle
Show up outside
Utilizando el mismo clip path
Y entonces
El texto
Como se ve
Pues se adecua justamente
Al espacio
Que le deja
Lo cual
O sea
Esto yo cuando lo vi
Me quedé como
Wow
Esto está muy chulo
Está muy guapo
Y lo he visto ya
En alguna web
Que lo utilizan
Y la verdad es que
Queda muy bonito
Lo hacen así
Con una raya
Así como diagonal
Y queda muy bien
Pues eso
Blend modes
Filtros
Carmen
Cuéntanos
Filtros
Bueno
Ya han dicho
De ellas
Un par
Que son para mí
Como los más guays
A nivel de filtros
De CSS
Son los que cogen
De SVG
Que en SVG
Son mucho más potentes
Pero
Del resto
El
Action color
También lo has dicho tú
Me parece
Bueno
Con el
Conic gradient
Puedes hacer cosas muy guays
Ya sé que es
Algo más visual
Que no es tan tal
Pero puedes centrar
El punto
Y hacer
Transiciones con los colores
Y bueno
Todo eso que me gusta
Que me gusta tanto
Se lo puedes aplicar a imágenes
Entonces puedes hacer cosas más artísticas
Y
Y el
Otro que
Este está
Este está súper chulo
La verdad es que este
Sí
Se mola en puña
Este está muy chulo
Me gusta mucho
Sí
Además
Claro
Estos ejemplos
Además puedes llegar a hacer
Puedes llegar a hacer
Luego
Ejemplos
Que cojan un trozo
De lo que
¿Sabes?
Del degradado que haces
Entonces tampoco tiene por qué verse
Hay como un hack
Para que no se vea justo el centro
De donde empieza
Entonces puedes tener unos degradados
Muy guays
Exacto
Sí porque aquí se nota mucho
Pero hay como una forma
Que no se vea
O sea que haga un degradado
Más natural
Y queda muy bonito
A mí
Uno que me sorprende
Que no habéis comentado
Y creo que está aquí
Creo que es el
No sé si es el backdrop filter
Bueno
Es el drop shadow
El drop shadow
Igual sale en otra
Pero no estaba ahí
Creo ¿no?
Drop shadow es muy
Puede ser que sean
Imágenes y tal
Es verdad
Pero como no
Debería ser formas y gráficos
Me sorprende que no salga
Aquí
Porque debería estar aquí
No sé si saldrá en otro sitio
Pero el drop shadow
Espectacular
O sea el drop shadow
Ah bueno
Es que es un filter
O sea que
Claro
Ya se cuenta directamente
O sea que
El drop shadow este
Increíble
O sea increíble
Y el accent color
Que es el que yo destacaría
Bueno
No sé si lo habéis podido utilizar ya
Aunque sea
En algún sitio
Tamara ¿Sabes lo que se hace en color?
Estás en el 62%
Tamara
Tamara está pensando
Perdón
Me he caído
Perdón
Es que me he caído
Otra vez
¿Qué has dicho?
Perdón
No te estoy ignorando
No, no, no pasa nada
Tamara estaba como diciendo
No, no quiero que se enteren
No pasa nada Tamara
No
Te está
Te estábamos comentando
Si sabías del accent color
Si lo conocías o algo
Pues la verdad que no
No
No tengo ni idea
Que nunca lo he usado
¿Tú lo has podido utilizar Stephanie?
Para nada
Entonces yo creo que
Mejor dicho
¿Cómo es?
Misión o Objetivo 2022
La verdad que
Lo están adoptando súper rápido
Ahora está Safari
El que más le cuesta
A lo mejor
Que no lo tiene
Para el que
¿Tú sabes lo que es Carmen?
Sí
Para formularios
O elementos
Que te coja ese color
Por ejemplo
Un radio
Un check
Y le pones
Le indicas el color que quieres
Y ya te lo
Te pintan los elementos
Con ese color
Con el que especificas
Efectivamente
Vamos a hacerle
Vamos a hacer una pequeña demo
Para que lo veamos
Aquí con este pedazo de editor
Aquí tendríamos
Yo que sé
Checkbox
Vamos así
Deep
Vamos a poner aquí también
El radio
Lo ponemos por aquí
No es el mejor diseño del mundo
Espero que nadie
Me juzgue por ello
¿Vale?
Claro
Normalmente
Los colores que tenemos aquí
Pues bueno
Son los del sistema
Los típicos del sistema
Y ya está
Ahora lo que puedes hacer
Es decirle
No sé si aquí
Ya lo pillará automáticamente
Puede ser que sí
A ver
Purple
¿Vale?
Y ahora con el accent color
Simplemente haces esto
Claro
Es muy sencillo
Pero es súper potente
Porque para marca personal
Por ejemplo
Pues se me ocurre
Que Stephanie estará contenta
Platzi
¿No?
Platzi tiene un color muy
Pues verde ¿No?
Y claro
Le da un toque
Muy de marca personal
Si puedes tener
Los formularios
Directamente así
Sin hacer ningún hack
Raro
Es que es horrible
Formatear formulario
Es horrible
Es horrible
¿Por qué hay que hacerlo?
No
La primera pregunta
Es por qué lo queremos hacer
Exacto
Exacto
Yo siempre
Esto es una cosa
Los UX
¿Son una cosa, Carmen?
De la suelo peor
Pero luego
Te encuentras con radios
Que está mirando para allá
¿Sabes?
En vez de estar centrado
O depende de cómo
Rederice el navegador
Claro
Y al no ser nativo
Muchas veces se nota la diferencia
¿No?
De que le das
Y fatal
Luego ves un píxel
Que está hacia la izquierda
Y de hecho
Se da toque
Exacto
Es verdad
Además una cosa
Que tiene súper genial
El accent color
Si os fijáis
Esto que está como oscuro
Está como oscurito
Y es porque
Se adapta el color
O sea
Tiene ya
La accesibilidad
La tiene gratis
Por ejemplo
Si le pongo uno muy clarito
Se pone oscuro
Pero si le pongo uno
Que es muy oscuro
Por ejemplo
Se va a poner
Ah bueno
En este caso
Me he pasado de oscuro
¿Vale?
Pero bueno
Veis que es
Se nota que es verde
Pero como podéis ver
La ha puesto blanco
O sea que
Además es un tema
De que
De tema de accesibilidad
Está genial
Porque así
Es lo que decía Carmen
Que muchas veces
Hacemos cosas así
Muy a saco
Y no somos capaces
De hacerlo en condiciones
Ni en broma
Vale
Temas de
De interacciones
Así en general
A mí el que me parece
Más interesante
No sé si la puedo utilizar
Es el tema del scroll snap
Sí
Total
Y trabajáis
Tenéis que dar soporte a Safari
Y todo bien
Con los scrolls en Safari
Hostia Carmen
Ahí ha sonado muy enfadada
Carmen
¿Qué ha pasado con Safari?
Luego
Pues que hay varias propiedades
De scroll
Y con dos líneas de CSS
Puedes hacer incluso
Parallax
Y así
Que no puedo hacerlo
Porque Safari
Pues ahí está
Es el explorer
Es el explorer
Ay no digas esas cosas
Que gente se enfada
Con esas cosillas
Que dice
No es el explorer
Hay una batalla
No es el explorer
No es verdad que hay cosas
Que están como muy in
Y están como
Van más rápido
Pero hay otras que dices
Ya vale
Esas
Un poco deprisa
Pero sí
En general
Safari tiene problemas
Con el scroll
Estefani
¿Qué tal el scroll snap?
Genial
Yo creo que
El mejor invento
Del universo
Porque lo que se hacía antes
Era colocar por ejemplo
Display flex
Y ya le colocas ahí
Como el overflow x
Y bueno
Uno con el dedito
Puede estar haciendo así
Como el swipe
Y se mueve
Pero obviamente
El tema de experiencia
Es súper feo
¿Por qué?
Porque no le toca
Estar moviendo mucho el dedito
Para cambiar de una imagen
A otra por ejemplo
Y la idea es que solamente
Con hacer un swipe
Pues ya te cambie
De una imagen a otra
En un momentito
Entonces
Esta propiedad
Es una maravilla
Indiscutiblemente
Para todo el tema
De swipe
Totalmente
Mira
Una cosa
Yo
Esto no lo he hecho aposta
No lo he hecho aposta
Yo he buscado CSS scroll snap
Y lo primero que ha salido
Ha sido un artículo
De este chico
Que yo no conozco de nada
Pero me ha salido el primero
¿Yo qué voy a hacer?
Porque hay gente
Que me está diciendo
Ejemplo del scroll snap
Bueno
Vamos con el ejemplo
Del scroll snap
Porque creo que tengo
Bueno
Esto sería el scroll snap
Porque scroll snap
Es para hacer
Sobre todo sliders
¿Vale?
Que es genial
Pero los scroll snap
Al final son como puntos
De captura del scroll
Y puede ser horizontal
O vertical
En este caso
Aquí tendríamos
Uno mandatorio
En el eje
Que sería vertical
Entonces si tú vas bajando
Aquí
Pues podemos ver
Que automáticamente
Cuando yo suelto
Pues se queda
De forma mandatoria
En el sitio
En el siguiente
No se puede quedar en el medio
¿Vale?
O sea no lo puedes dejar en medio
Porque siempre va a llegar al siguiente
Esto significa
Que con esto justamente
Lo que puedes hacer
Pues serían slides
Sliders
De hecho
Creo que tenía otro ejemplo
Que veo que no está aquí
No es en este
Porque es la parte 1
Pero en la parte 2
Aquí
Tengo un ejemplo
Mira tengo hasta un vídeo
Tengo un ejemplo
De un scroll
Con un slider
Súper fácil
Con solo CSS
Que está hecho
Con este
Uy
Sí es mío
Claro
¿Qué pasa?
No me vas a dejar verlo
O algo
Es que le das ahí a Resolve
Y te dice
Ah
Creo que sí
Bueno
Aquí se puede ver
Que si haces así
Y te vas al siguiente
Pues ya tendrías como un slider
Lo mejor de esto
En realidad
No sería tanto aquí
Es que aquí se ve un poco
Vamos
Vámonos a Codilink
Vámonos a Codilink
Vamos a traer el HTML aquí
Para que la gente
Lo vea abajo aquí
Y aquí el slider
Lo mejor de esto
En realidad
Está en el móvil
Que ahí es donde está la magia
Porque en el móvil
Cuando tú
Haces así
Tienes un efecto
Nativo
Genial
Sin necesidad de escribir
O sea
Sin escribir a JavaScript
Y tienes un slider
Gratis
Casi
Entre esto
El Asper Ratio
Que antes
Le estábamos comentando
Que hemos visto antes
De hecho
A ver si lo podríamos
Mira aquí
Asper Ratio
Podríamos poner 16.9
No sé si
Va a colar
No va a colar
Que he roto ya Carmen
Algo he hecho
Que no me ha gustado
Creo que es el tema
Del Display Flex
Ah mira ya está
Vale ya está
Pues eso
Tienes el Asper Ratio
Tienes aquí un slider
Que hemos hecho
Nada con HTML y CSS
Y ya está
Este es brutal
Increíble
Súper genial
Muy bien
Pues scroll snap
Overscroll
Behavior
¿Este lo conocéis?
¿Lo habéis usado?
Sí
Ese es el que Safari
No me ha dejado
Tirita
Sabrías comentar
Un poco
Qué es lo que hace
Qué es lo que hace
Sí
Le puedes decir
A ver cómo lo explico
Imaginaos que tenéis
Una imagen
Y un texto
Y queréis que esa imagen
Pase por un parallax
Es lo que estaba diciendo antes
Tienes la imagen
Puedes controlar
El comportamiento
Cuando haces el scroll
De esa posición
De ese contenedor
Llega
Al punto del scroll
Me estoy explicando fatal
Imaginaos dos imágenes
Y queréis que una de las imágenes
Se quede por debajo
Del texto
Y que no cambie
La siguiente imagen
Hasta que el texto
Pase por encima
¿Vale?
Entonces puedes hacer parallax
Súper fácil
Con dos líneas
De una de ellas
Con esta propiedad
Tengo un ejemplo hecho
Sí
Lo podría buscar
Pero básicamente
Safari no lo coge
Yo es que solo lo he usado
Porque yo utilizo
El overscroll behavior
Porque Safari
Tiene dos cosas
Que a mí me ponen dos nervios
Cuando terminas el scroll
De un contenedor
Sigue scrolleando
En el de abajo
Y eso lo puedes como que
Con esto
Tiene un doble scroll
Exacto
Y como que eso
Lo puedes desactivar
Gracias a esto
Y el otro es el bounce effect
Que cuando en Safari
Llegas arriba del todo
Como que puedes seguir scrolleando
Que es una cosa muy extraña
A ver si
Lo que pasa es que con el ratón
Igual no se puede
Igual con el trappad sí
¿Sabes cuando vais arriba del todo?
Y entonces como que
Sigue como que dices
A ver que no hay más páginas
Pero no
Como que intenta hacer algo raro
Pues eso también
Ahí también se puede hacer
Pero para otras cosas
Por ejemplo
No he utilizado
De hecho
No sé si vosotras
Conocéis el overflow
Anchor este
Yo no lo he conocido nunca
No sé
Sí
Este es para
El tema de carga
De información
Entonces si por ejemplo
Tú utilizas esa propiedad
Y todavía no ha cargado
Tu sitio por completo
Y tú ya has hecho scroll
Pues cuando carga tu sitio
Él ya no te lleva al top
Otra vez de la página
Sino que te deja justamente
Donde ya habías hecho scroll
Entonces
Súper poderosa
Qué bueno Stephanie
Ostras
No tenía idea
Qué chulo
Oye pues tiene todo el sentido
El mundo
Claro para quitar sobre todo
El content shift este
Los saltos de contenido
Vale
Qué bueno
Ostras
Pues mira
Stephanie está
En el 7,8%
O sea
La leche Stephanie
Oye súper interesante
Me imagino que esto
No tendrá mucho
Ostras
Pues lo
Lo reportan bastante
Mira
Menos Safari
Carmen la pobre
Con una lagrimita
No no
Una lagrimita
Qué bueno
Touch actions
Y pointer events
Pointer events
Sí que lo conozco más
Pero touch actions
Ni idea
No lo he usado tampoco nunca
Creo que es como para mapas
Que uno no puede como
Hacer zoom
O por ejemplo
Con el click
Es muy difícil
Entonces como que te ayuda
A hacer ese tipo de cositas
Me doy cuenta que
Menos mal que Stephanie
No le
No ha contestado la encuesta
Pero las sabe todas
Estaría todas siempre aquí
Pues mira
Nunca la había utilizado
Pointer events
Sí pero yo solo lo utilizo
Justamente para quitar
El pointer events
No
Pointer events
Exacto
Pointer events
Yo
Tendría que preguntar
Tendría que preguntar
La encuesta
¿Conoces pointer events?
Y yo diría
No
Non
Non
Diría non
Pointer events non
Es el único que conozco
Yo no sé si existe otro
No tengo ni puñetera idea
Si existe otro
Porque no tengo ni idea
Auto
Que me imagino que este es el por defecto
Non
Stroke y Feel
Mira esto es SVG
No tenía ni idea
Que esto existía
O sea
Vale
Voy a seguir con el non
Directamente
Y ya está
Y el scroll timeline
No sé ni qué es
O sea
Creo que es para temas
De animaciones
Entonces ya te da como
Cuánto tienes que recorrer
Para terminar esa animación
Por ejemplo
Si tenemos esos
¿Cómo se llaman?
Esos barritas que van
Como el progreso
¿No?
Es bien como se llaman
Esos barras de progreso
Entonces ya le vas diciendo
Como hey
Te vas a desplazar
Tanta cantidad
Entonces como que te duda
Ahí con ese tema
Pero Stephanie
¿Cómo sabes esto?
Si ni siquiera está en el MDN
Si ni siquiera tiene un MDN creado
Mira fíjate
No han puesto
No han puesto ni el enlace
Es que 83,7% de la gente no lo sabe
Pero si es que no lo saben ni ellos
Si en el MDN no existe
No le han puesto ni el enlace
El MDN todavía
O sea
Increíble
Vaya tela
Bueno
Tipografías
Yo lo que destacaría
Un poco
Más que
Porque hay aquí un font display
Y tal
Yo el que destacaría
No sé si la habéis podido utilizar
Y que os parece
Es el font variant
O sea
Tener
Esto de poder tener
Como diferentes variaciones
De la misma fuente
Cargar una fuente
Y tener diferentes grosores
Esto la habéis probado
La habéis podido utilizar
Es que yo en mi empresa
No podemos utilizar
Porque no sé si es que tienen
Un contrato
O algo
Con la Open Sans
Pero con una Open Sans
En concreto
No sé si es que
No hay forma de cambiarla
Ni nada
Es una cosa
Bueno
Depende de la tipografía
Si tiene todos los glifos
Entonces tú puedes acceder
Hay un montón de propiedades
De CSS
Respecto a tipografías
Que ni sabemos que existen
Y son una pasada
O sea
Creo que eso lo utilizamos
Que nunca me acuerdo
Del nombre
Cuando le pones
Un numerito en pequeño
O Thinmark
En pequeño
Que lo puedes poner arriba
Y así
Pero de variaciones
Hay un montón
De numéricos
De todo lo que os podáis imaginar
Y variable fonts
Sí que lo he utilizado
Sobre todo para hacer cosas
De animaciones
A título personal
Y luego a nivel de curro
También
Pero necesitas una fuente
Que tenga todos los glifos
Para poder hacer
Todas las posibilidades
Que tiene esa fuente
Entonces
Con una única fuente
Una única carga
No tienes que estar cargando
Ni la bold
Ni la italic
Ni la regular
Tienes todo
En un único archivo
Todas las fuentes
Directamente
Hay una página
Que es
¿Cómo es?
Variant
No, si buscas
Variable fonts
Hay una página
Que te muestra
Todas las posibilidades
Que tienen
X fuentes
Y para poder ver
Las propiedades
Se llama
V fonts
Me parece
Sí, esa
Vale
Tú puedes acceder
A todas esas propiedades
Dependiendo de la fuente
O la mayoría
De gratis
No tienen
Todos esos glifos
Pero si es una fuente
Que has pagado
Sí
Star Wars
Ah, no
Skyward
Entonces
Para temas de animaciones
O incluso
Con la SAP
Del navegador
Puedes hacer cosas
O sea, puedes llegar
A hacer que
Aplaudiendo
O haciendo ruido
Se anime la fuente
Con su grosor
O no sé
Cosas más así
Y más
Claro que
Mira, es Lant
Y todo
Para
Qué pasada
Es mega
Es mega potente
El desformato
Es muy chulo
Muy, muy chulo
Me encanta
Y es que
El grosor es infinito
Encima
Sí, claro
Tienes todo ahí
O sea, no tienes que estar cargando
Diferentes archivos
Tienes una sola fuente
Y tal
O sea, brutal
Brutal
Accesibilidad
Aquí vamos a preguntar
Una cosita
Habéis utilizado
Tenéis en vuestras empresas
Donde trabajéis
Por ejemplo
Tú, Tamara
Utilizáis el
Prefers
Reduce Motion
O
Lo conoces
Sí, sí, sí
Sí, sí
Está guay
Está guay
Evitáis el tema
De las animaciones
O
¿Cómo lo hacéis?
A ver, tampoco hacemos muchas
Me ha tocado el trabajo
En la mayoría de animaciones
Que suelo hacer
Son como
Por fun
¿No?
Para
Fuera del trabajo
Pero
Pero sí que está bastante guay
Cuando la gente se acuerda
De ponerla
Mola
Al menos
La verdad es que
Es una media query
Que es bastante sencilla
Y la verdad es que
Cada vez
Pues tampoco cuesta tanto
Evitar
Todas las animaciones
Y ya está
Tú, Stephanie
La utilizáis
Junto con otras
Por ejemplo
Por el modo oscuro
Sí que es lo que
Todo el mundo conoce
Pero
Utilizas esta
La del modo oscuro
Cuéntanos
Actualmente
En producción
No
Pero
Me pasó
Que en un curso
Hice una clase
Sobre
Prefers
Reduce Motion
Y yo no
Pero eso es súper fácil
De hecho
Ni practiqué
La clase
Pre
Y la embolatada
Que me pegué
Porque quería hacer
Como una
De esas
Que hacen así
Como que
Que giran
Pero
En ese
Prefers
Reduce Motion
No quería que hicieras
De giro
Sino cuando
El usuario tuviera
Esa preferencia
Anulada
De
La reducción
De movimiento
Pues que
Te mostrara
La de atrás
Pero con un cierto
Como efectico
Entonces bueno
Por supuesto
Súper intuitiva
De utilizar
Y todo eso
Pero a la hora
Cuando uno la va a trabajar
Eso es lo interesante
También de empezar
A practicarla
Como funcione
Para empezar
También a trabajar
En el día a día
Entonces ha sido
Como cositas
Varias
De ahí
Por molestar
Pero en producción
Nada
Y la otra
De Dark Mode
Súper interesante
Colocarla y tal
Bueno
Súper bueno
Pero también
Que tiene que ver
Con las preferencias
Del usuario
En producción
Nada
Espera algún día
Tener la fortuna
A mí ahora
La que me gusta mucho
Que me parece una idea
Buenísima
Es esta nueva
Media Query
La de justamente
Si prefiere tener
Un modo de datos
Más reducido
Y le puedes poner
Pues imágenes
Súper básicas
Os recomiendo
Si a alguien
Interesa este tema
Creo que Twitter
Tiene la aplicación
Móvil
O sea la aplicación
La aplicación
No la web móvil
Que podéis
Activarle el modo
Este
De datos bajos
Y vais a ver
Un poco la diferencia
A nivel de CSS
E incluso
De interacción
Con la página
Porque por ejemplo
Las imágenes
En lugar de cargar
Nada más entrar
Lo que hace
Es que tengas que darle
Un clic
Para ver la imagen
Tiene un montón
De cosillas
Que dices
Ostras
Que buena idea
Y bueno
Es tan fácil
Como tener aquí
Una media query
Y ya está
O sea que
Nada
Súper genial
No sé si habéis
Utilizado alguna
Media query
O alguna idea
Que habéis tenido
Que habéis hecho
Sobre accesibilidad
Con las media queries
Que hay disponibles
Aparte del modo oscuro
El modo oscuro
Es como lo que más
Lo reventó
Que es increíble
El modo oscuro
Si el modo oscuro
Todo el mundo sí
Hasta GitHub
Y de hecho
Ahora la gente
Cuando ve una página
En blanco
Como no
Mis ojos
Mis ojos
Nos hemos vuelto
Todos vampiros
De golpe
Es una cosa
Nada
O sea no
Yo al menos
Si que en la empresa
Si que moví
El tema de las animaciones
Reduce motion
Pero poca cosa más
La verdad
Y del contraste
De los colores
Porque también
De eso hablan aquí
Y parece ser
Que un 74%
No lo conocen
Pero está bastante bien
Este hecho
De tener una función
Como para comparar
Los colores
No sé si lo habéis visto
Lo conocíais
Yo la verdad
Que lo descubrí hace poco
Parece que tampoco tiene
Creo que no tenía
Muy buen soporte todavía
Pero me parece
Que también
O sea
0%
Que es soporte
No tiene
O sea solo está en Safari
Ahora mismo
O sea soporte
Experimental
Bueno
Estos son los peligros
De Twitter
¿No?
A veces que
No sé si os pasa esto
De que vais a Twitter
Y entonces
Un poco lo que le pasó
A Carmen
Me imagino
Que dices
Ah que cool esto
Me encanta
Y luego dices
Ah no
Hay que activar un flag
Es imposible utilizarlo
O te dice
O ni te avisan
Y ni siquiera está en el spec
No
Eso fue culpa mía
Totalmente
O sea lo propuse
Lo estaba ya
Implementando
Tenía una landing
Montada así
Y
Y no tuve en cuenta
Cuando miré
Hice la comprobación
En iOS
Vi que iOS
No se lo tragaba
Y que Safari
No lo podía
Utilizar aún
Entonces
Haciendo hacks
Para que se pueda utilizar
Pero
Muy bien
Las variables CSS
Custom properties
A ver
Aquí sí que parece
Que cada vez
Se está utilizando más
¿Ya la estáis utilizando
En producción
En vuestro caso?
¿Alguna de vosotras?
Todas que sí
Tamara
¿Tú lo usas o qué?
¿Estás animado en tu empresa?
En producción
No lo he usado
Pero sí está guay
Lo único que no me encanta
Es la
La sintaxis
Y no me ha parecido
Muy bonita
Pero
Podemos abrir un melón
Abrimos un melón
Abrimos un melón
Aquí
Estefani
¿Te gusta a ti la sintaxis?
Me encanta
Yo soy fan
De hecho en proyectos personales
Me encanta
Pero
Está bien
Bien
Bien
Está perdido
Sí, sí
Está bien
Está bien
Sí que en proyectos personales
Yo lo utilizo
De hecho
Es muy chistoso
Porque no a veces
En proyectos personales
Como que a veces
No trabaja con las mejores prácticas
Ni con las propiedades super
Sino que quiere ya llegar a granos
Y en este tipo de cosas
Así
Indispensable
El root
Las variables
No he dicho
Eso es mi fan de cada día
Hoy en día
Mejor de Dios
Me encantan
Esas sintaxis
Yo imagino que Tamara
Va por el hecho
De que
A la hora de utilizarlas
Hay que utilizar
Bar para utilizarlas
Que eso a lo mejor
Es un poco
De hecho mucha gente
Puede ser
No sé
No parece bonito
Lo siento
Pero útil
O por el nombrado
Sí, sí
Guión, guión
Carmen, desempate
Sí, me pongo nerviosa
El guión, guión
No, no
Yo estoy encantada
O sea, poder tener una propiedad
Que puede ir mutando
Dependiendo de lo que necesite
Y que la variable
Le va a ir cambiando
En función
Y para hacer cálculos
Y todo
Bueno
Eso es increíble
O sea, el hecho de que sea en runtime
Eso es increíble
Sobre todo para la gente
Que venimos de SAS
Pero es verdad
Que la gente venido de SAS
O de otros preprocesadores
La sintaxis
Yo voy a estar un poco
Voy a estar contigo
Tamara
Vamos a estar contigo
En el hecho de que
Claro
El hecho de tener que poner
El guión, guión
O sea, la sintaxis
No la utilidad
La utilidad está clara
Creo que estamos todos de acuerdo
Pero es verdad
Que tener que poner
Los dos guiones
O el hecho de que para utilizarla
Tienes que poner par
A lo mejor ahí
Ya que podían
No sé si
Ya han puesto
Ya han puesto
Lo podían haber hecho
Mira, hay gente que está
Ojo, ojo
Hay Tintamara
Hay gente que es Tintamara
Mira, Edgar dice
El uso es magnífico
Pero la sintaxis
Dark
Subnova dice
Muchos guión
Muchos guiones
Parecido a BEM
Bueno, a ver
Parecido a BEM
A mí BEM tampoco me gusta mucho
Pero
Vamos a quitar melones de aquí
A ver, dicen por aquí
Lo que no me gusta
Es que si no estás
En el mismo archivo
Que las declaraste
No tienes autocompletado
Bueno, ya estamos pidiendo
Un poco
Inteligencia artificial
Ahí, eh
O sea
Creo que sí que hay
Formas de conseguir
Autocompletado con esto
Yo estoy acostumbrado
A usar var para declararlas
Pero usarlo en CSS
Para llamarla
Me destanteo
No sé qué destanteo
Pero claro
Eso lo dice Bernese
Para eso está el dios Sass
¿Seguís utilizando Sass?
¿Vosotras?
Creo que se habla más adelante
Pero
Sí
¿Y qué?
¿Estáis pensando en...?
Bueno, ahora se puede anidar
Entonces
Sí, ahora CSS en Steam
Va a llegar directamente
Cierto es
Entonces
¿Estáis trabajando todavía con Sass?
¿Vuestros proyectos
Están con Sass?
En mi caso sí
Hablan de preprocesadores
Sass
Ahí está Sass
Creo que lo vamos a ver ahora
En un momentito
Justo después de esto
Tenemos, por ejemplo
Tenemos ya
Para terminar con esta sección
Porque ya abajo las tecnologías
Que ahí es donde
Corre la sangre
A ver
Ya tenemos
Machete
Ya ves
El support
Que este es súper interesante
Que creo que también
Le pasó un poco lo mismo
Que es para detectar
Si el navegador
Soporta algo
Una declaración
Una propiedad
¿Esto lo utilizáis?
No
Yo lo conozco
Pero tampoco lo he utilizado nunca
La verdad
Sí, igual
Suena guay
Pero
Claro
No os pasa a veces
Que claro
Si no lo soporta
Pues lo ignora
Y ya está
Sí, tal cual
Entonces
Así que bueno
No sé si a lo mejor
Puede ser interesante
Para intentar hacer
Algún tipo de
Por ejemplo
Si no soportas
Display Grid
Pues te voy a intentar
Hacer con Flex
Una cosa diferente
No sé
No sé
La verdad es que nunca
Sí que sé que existe
Pero nunca se me ha ocurrido
Para qué utilizarlo
CSS Containment
Esto
No sé ni qué es
Tampoco
No sé
Mira
Estoy aquí en el 72%
Pero literal
Ah, Containment
Sí, no tengo ni idea
Qué es
Sí, efectivamente
Creo que está
Creo que está
Containment
Sí
Pero eso es como renderiza
El navegador
Sí, creo que está
En qué momento
Lo tiene que renderizar
Para que no bloquee
O me lo estoy inventando
Totalmente
Estaba buscando
Las propiedades que hay
Estaba buscando
La traducción de Stephanie
Pero esta no
Sí
Esto
Esto creo que
Tiene que ver
Con también
El
La otra que hemos visto antes
La de
La
La de
Content Visibility
Visibility
Sí
Porque claro
Tú aquí le puedes decir
Como que
Pueda hacer
Alguno de los pasos
Sin hacerlos todos
Como por ejemplo
Claro, si tú le dices
Claro, en este caso
Si este content
Por ejemplo
Pues le dices
No, es que este content
No tienes que pintar
O puedes pintarlo y tal
No vas a saber
Cuál es el tamaño que tiene
Y por lo tanto
La caja se puede romper
Supongo que tiene
Este tipo de cosas
Fixing with content
Content, content
O igual no
Igual me he inventado
Todo lo que acabo de decir
Que también puede ser
Vale, vamos a esperar
El año que viene
Porque veo
Veo que estoy aquí
Pero muy aquí
O sea, muy aquí
Muy aquí
Vale
A ver
¿Qué más tenemos?
Will Change
Este sí que lo he utilizado
Para el tema de animaciones
¿No?
Para avisarle
De ojo que
Esto que dices aquí
Va a ser
Pero yo lo he utilizado
Y nunca me
Sinceramente
Nunca he sido capaz
De calcular
Si realmente está mejorando
De alguna forma
El rendimiento
¿Sabéis?
¿Tenéis datos?
Fe ciega
Fe ciega
Es algo que hacemos
Muchas veces
Carmen
Pero no sé
Yo es verdad
Que lo utilizo
Digo sí
Esto básicamente
Es una propiedad
Para indicarle
O para
Como chivarle
Al navegador
Y decirle
Oye
Esta propiedad
La voy a animar
¿No?
Y es como que
El navegador
Pues se prepara
Y hace algún tipo
De optimización
Pero yo la verdad
Es que nunca
Yo lo hago
Como un buen
Una buena práctica
Pero no lo
Y Calc
Esta es la que le encanta
A Carmen
A la hora de calcular cosas
Con Custom Properties
Sí
Esto está muy bien
Que se pueda utilizar
La verdad es que veo
Que todo el mundo la utiliza
Pero no sé
Si la utiliza realmente
Porque yo en mi empresa
Por ejemplo
Tampoco la utilizan tanto
¿Cuál es una de las cosas
Que diríais
Que más uso tendría
Con Calc?
¿Sabes?
Alguien que dirías
¿Para qué puedo utilizar Calc?
Para
Yo que sé
Es que ahora
Para decirle
La altura que tiene
La Navbar
Yo que sé
Claro
Calcular
¿No?
Por ejemplo
Quiero la altura total
Del Windows
Menos la Navbar
¿No?
Por ejemplo
Sí
Preguntan por aquí
¿En rendimiento
Es bueno usarla?
Yo creo que sí
O sea
Tampoco
Mientras sea un cálculo
Que se hace una vez
Tampoco
No sé Stephanie
Si tú la has utilizado
La utilizas
¿Tienes algún ejemplo
Que se te ocurra?
Sí
Sí la he usado muchas veces
Pero así como que
Ejemplo puntual
Sí ¿Verdad?
Como que cuesta
Siempre es como que
Lo que tú decías
Como el 100%
Menos el tanto
Entonces
Dale
Este tamaño
Pero
No recuerdo puntualmente
Queda algunos ejemplos
Vamos a ver
Dice alguien
Crea una foto
Y anima la foto
Te evita reflows
Para calcular el tamaño
De un body
Y que no colapse
Con el footer
Para un drop down menu
Para responsive
Bueno
Bien
Curioso
Hay alguien que lo utiliza
Y dice calc
3 más 5
Guay
Creo que no era la idea
Bueno
Pueden hacer cálculos
También entre
Entre variables
Que tengas
Definidas
Mira
Esa también
Es verdad
Una buena utilidad
Es guay
Tiene otro
Sintaxis
Le tienes que poner
El hashtag
Pero también
Es verdad
Es verdad
Por ejemplo
Puede ser útil
Si por lo que sea
Tienes una custom property
Tienes un margen
Y dices
Quiero que este margen
Esté dos veces
Por X motivo
Entonces puedes utilizarlo
Y multiplicarlo por dos
Este tipo de cosas
Muy bien
Pues vamos por las tecnologías
Porque bueno
Aquí está Houdini
No sé si habéis utilizado Houdini
Más allá de experimentar
Yo es que por ejemplo
No le veo un uso
En producción
O tú Stephanie
Le das
Ojo, ojo
Carmen
Ojo Carmen
Dice
Pero Safari no me deja
No, no
A lo mejor
Joan me mata
Pero no
O sea
Para hacer temas
De gráficos
Y pintar
Y así sí
Pero si o no
Y tú Stephanie
Que también
Experimentación
Sí, ¿no?
Es que con experimentos
Súper bien
Pero
Buah
Aquí sí que viene
Aquí viene el pescado
Amigos y amigas
Las tecnologías
Aquí está
Aquí está la cosa
Las tecnologías
Básicamente tenemos aquí
Un cuadrante
Donde tenemos
La satisfacción
Por un lado
Y por otro lado
El número de gente
Que lo está utilizando
Ah, no sé
Por si me ha quedado
El foundation ese
Ahora
Ahí
Tenemos el número
De usuarios
Por ejemplo
La satisfacción
Tendríamos
Arriba a la derecha
Tendríamos
SAS
Donde un 84%
De la gente
Está bastante satisfecha
Y además lo utiliza
Bastante gente
En cambio
Bootstrap
Que es algo
Que utiliza
Bastante gente
Donde la gente
No está tan satisfecha
Y aquí viene
Y aquí viene
El salseo
Vaya
Oh vaya
Vamos un poco
De derecha a izquierda
Porque ya ves tú
Tendríamos como
Tres categorías
Tendríamos los pre
Y los post procesadores
Los framework CSS
Y CSS en JS
Ya el spoiler ha sido
De que le dais cañita
A SAS
¿Estáis contentas?
Bien con SAS
¿Tú también Tamara
Utilizas SAS?
Muy poco la verdad
Lo que más uso
Son Style Components
Esa es mi main
Ah
Estás utilizando
Tú estás utilizando
Style Components
Pues Style Components
Tiene una satisfacción
Del 80%
Está cerca de SAS
Está un poco más abajo de SAS
Pero está cerca de SAS
Está muy guay la verdad
Está muy mantenida
Está muy guay
No tengo quejas
Está muy mantenida
Pero te facilita la vida
Tamara
Yo creo que sí
O le chillas a veces
Le dices
¿Qué estás haciendo?
Yo a veces le chillo
No
O sea
Tampoco tanto
¿Por qué le chillas?
¿Qué pasa?
No, no, no
Hombre, no
Porque no se pueden hacer
Todas las cosas
Que yo hacía antes
¿Sabes?
O cuando intento hacerlo
Por ejemplo
El nesting
Es un rollazo
¿En serio?
Sí
O se me rompe
El color syntaxer
Eso también me pone
Muy nervioso
Pero no
La verdad es que
He dejado
La verdad es que
Estoy dejando de utilizarlo
Mucho está el Components
Antes lo utilizaba
Más que ahora
Entonces sois
Dos teams Sash
Un team
Están Components
Yo creo que
Sash
Con
PosiS
Tal vez
Mezclando ambos
Hay un gran poder
Por ejemplo
Sash
Con un otro
Prefixer
O algo así
Interesante
¿Y tú Carmen?
¿Qué?
¿Sash?
Pues
Bastante parecido
A lo que estaba diciendo
Porque al final
Sash sí
Lo que pasa que
Claro
Con post CSS
Tienes
Al alcance
Un montón de
Deplines
Con funcionalidades
Que son como
Vitaminar a un CSS
Que a lo mejor
Aún no puedes hacer
O no sé
Como traer un
CSS del futuro
Y utilizarlo ahora
Sí
De hecho
Y lo puedes configurar
Con
Como
Con
Sash
O sea
Lo puedes hacer
De precompilador
También
Entonces
Claro
De hecho
Habláis de
Post CSS
Post CSS
Es justamente
La tecnología
Del preprocesador
Bueno
Post procesador
Que tiene la satisfacción
Más alta
No tiene tantos usuarios
A día de hoy
Que Sash
Que va por la mitad
Según la encuesta
Obviamente
Pero
La satisfacción
Está en el 91%
O sea
Está lo más arriba
Posible
Al final
Claro
Pero
No es un poco
O sea
La comparación de Post CSS
Con Sash
A mí personalmente
Me parece como un poco
Rara
Porque claro
Sash sí que está opinionado
Digamos que ya está preparado
Todo el framework
Y al final
Yo creo que la satisfacción
Que viene de Post CSS
Es que al final
Tú puedes utilizar
Lo que tú quieras
Por ejemplo
Quiero utilizar el nesting
Que sí que es del futuro
Y quiero tener
Yo que sé
El color contract
Esta función
Vale
Pues la añado
Y ya está
Y como solo necesito eso
Pues ya lo tengo
Entonces claro
Está satisfecho
Porque no tienes una opinión
Sash al final
Es como un framework
Que está opinionado
Bueno un framework
Es como un preprocesador
Que ya está opinionado
Entonces ya
Lo tienes que utilizar
Con los mixings
Con todo eso
Y es lo que decís vosotras
Además lo utilizáis
Con Post CSS
Porque queréis justamente
Las cosas
Me parece
Si pudierais darle un botón
Aquí va el tema
Si pudierais darle un botón
Y hacer que
Joder
Que me equivoco de escena
Si pudierais darle un botón
Es que he pasado
Por todas las escenas posibles
Hasta que llega la buena
Si pudierais darle un botón
Y desaparece Sash
De vuestro código
Y se migra automáticamente
A Post CSS
¿Lo haríais
O echaríais de menos a Sash
Y no lo haríais?
A ver Stephanie
Empiezas tú
Lo echaría mucho de menos
Pero es porque
Llevo mucho tiempo
Trabajando con Sash
Entonces posiblemente
Solo Post CSS
No
Y no sé
Creo que ambos
Hacen un muy buen match
No sé si
Cómo me sentiría
Solamente con Post CSS
Pero bueno
¿Qué es lo que más
Echarías de menos
De Sash?
La sintaxis
Sobre todo
Y lo fácil
Que es trabajar
Y mejor dicho
La cantidad de reducción
De código
Que te permite
El código heredado
No
O sea
Lo que varias cositas
Y tú Carmen
¿Qué?
Hay un plugin
De Sash
Que podemos poner
En Post CSS
Sí
Y la verdad
Que sí que lo había
Sí que lo había
Sí que lo había
Lo que pasa es que
A ver
Es un poco
Creo que no
Lo digo por el botón
De eliminar
Pues sí
Lo eliminamos
No pasa nada
Pues lo tenemos
En Post CSS
No sé
Estoy acostumbrada
A trabajar con Sash
Entonces
Sería bastante raro
La verdad
Mira
Aquí lo tenemos
Post CSS
Sash
Usa Sash
Como un plugin
De Post CSS
Pues ya está
Ya lo tenemos
Ya está
A ver
Creo que tiene
Un poco de trampa
Porque creo que
Esto por debajo
Utiliza Sash
Me parece
Puede ser
Mira
Claro
Utiliza Sash
Lo cual
Entonces
Es como darle la vuelta
Es como
No, no
No utilizo
En realidad
No utilizo
No utilizo Sash
No utilizo Sash
Y en realidad
Como que le dan la vuelta
Y tal
Es un poco
Es un poco trampa
Pero
A ver
Sería raro
Pero Post CSS
En ese sentido
Es más potente
De poder poner
Todo el proyecto
Con todo lo que
Quieras
A mí un problema
Que estamos teniendo
En mi empresa
Con el tema de Sash
Nosotros lo tenemos
Todo, todo, todo
Con Sash
Y un problema
Que estamos teniendo
Está con el tema
Cuando empaquetamos
La aplicación
Y es que Sash
Es absurdamente lento
Es absurdamente lento
Comparado con Post CSS
Es muy lento
Muy, muy, muy lento
Tanto que nos tarda
O sea
Si tuviera que poner
Un tanto por ciento
¿Y cuánto tiempo nos tarda
Al empaquetar la aplicación?
JavaScript
CSS
Sash
Porque primero hace Sash
Luego CSS
Yo diría que un 75%
Solo es Sash
Es una pasada
Y si yo pudiera darle un botón
Hasta luego Sash
Al final
Una cosa que me gusta
Que no sé cómo lo veis
Es el hecho de que
Bueno, esto es una cosa
Mía personal
Que me gusta que
Estar lo más cerca
De la plataforma posible
De
Porque esto siempre
Pues ya no
Te tienes que preocupar tanto
De si estoy haciendo
Algo nativo
Y nada
Y o no
Y lo malo de Sash
Es que claro
Si piensas que tienes
Todos tus estilos
En algo que
Que no es nativo
Nos da un poco de vértigo
A ver
Que lleva muchos años Sash
Que no va a desaparecer
De un día para el otro
Claro
Pero no sé
Igual no
Es mojado
Entonces es que
Como tener agnóstico
Que se desagnóstico
O lo más cercano
Al estándar
Sí
O sea
Un post CSS
Con todos los plugins
Que haga falta
Pero que sean plugins
Como Babel
¿No?
¿Sabes que Babel
Tú haces
Exacto
Pues algo más parecido a Babel
Que digas
Vale
Yo tengo JavaScript
Pero
El JavaScript que tengo
Es con plugins
Que me permiten
Utilizar el JavaScript
Que sé que va a llegar
En la plataforma
Pero es el del futuro
Me estás convenciendo
Ah
Ojo
Carmen
Poco a poco
Sigamos hablando
Bueno Carmen
El libro de Sash
No sé
No sé
A ver
Yo es una cosa
Que he ido
Que he ido cambiando
En mi opinión
Yo era un Sash fan
Total
Pero poco a poco
Como
No
Yo recuerdo una charla
De Nayara Barua
Que fue la primera persona
Que vi que decía
Sash ha muerto
O el compost CSS
Y estamos
Te estoy diciendo
Hace años
Y era como
La chica
Sash
Sash girl
¿Sabes?
Y que ella dijese
Sash ha muerto
O sea
Yo creo que ese día
Dije
¿Qué?
No
Sí, sí
Y hace ya
Hace ya años
Que lo dijo
Entonces
Yo
Si Nayara lo dijo
Que lo estoy recordando ahora
Así que
Dice
Gscode
Dice
Yo programando in situ
Con Sash
A ver
Está bien
Que creo que aquí estamos todos
Que hemos trabajado
Menos Tamara
Que tiene suerte
Que utiliza Style Components
O no
Tiene suerte o no
Estefany
Sigue trabajando con Sash
Y tenemos a Carmen
También con Sash
Y yo también estoy con Sash
Dice aquí
Tony va a la ciudad
Dice
¿En qué proyectos
Habéis trabajado?
A ver
Es un poco difícil ahora
Que te respondamos
Con todos los proyectos
Que estamos trabajando
Pero igual podemos poner un ejemplo
Que estamos trabajando
Con tema de Sash
No sé si
¿Cómo trabajáis un poco
Con Sash?
Carmen
¿Ahora mismo?
Sí
Ahora mismo
O sea
Algo
Pues
Ahora mismo
Estoy trabajando
En Mango
En la librería
De componentes
Pasando el sistema
De diseño
De diseño
A los componentes
De desarrollo
Y con toda la arquitectura
Pero todo montado
En Sash
¿Vale?
Entonces
Ese repositorio
Luego
De los diferentes squads
Se nutren de
Lo que sea global
Estamos hablando
De global
Que luego hay componentes
Que cada equipo
Tiene
De su casuística propia
Pero
Pero sí que
En la librería
Del sistema de diseño
Digamos
Que estoy trabajando
¿En tu caso?
Estefany
Muy parecido al de Carmen
Estoy trabajando en la house
Con el proyecto principal
En Sash
Pero algo interesante
Es el tema
De design system
Que sí nos ha ayudado
Muchísimo
El tema de Sash
Sobre todo
Porque
Queremos
Que el botón
Sea azul
Y verde
Y amarillo
Y que el contraste
Sea tal
Y mejor dicho
Es un botón
Con 80.000 variables
Y como Sash
Es tan poderoso
En ese tipo de casos
Entonces
En esos dos
Los he utilizado
Y por eso
Yo creo que también
Soy Sash lover
Dice por aquí alguien
Si Sash muere
Nos vamos a Les
Pues
Pues me parece
Que lo tienes muy crudo
Aquí tenemos Les
Les está
Les satis
Tiene Les satisfaction
Y Les user count
O sea
Les
Empiezan a odiarlo
Ya la gente
Stylus
Está al mismo nivel
Lo que pasa es que no usa nadie
Y bueno
Esto ya
Assembler CSS
Esto
La satisfacción está por los suelos
Pero es que
Ya con el nombre
No sé si esto es hacer
Con lenguaje ensamblador CSS
Pero si es así
No me extraña
¿Vale?
O sea
No me extraña que tenga satisfacción
Así por los suelos
Vamos con los CSS frameworks
Que esto también
Te leíta
CSS frameworks
¿Tenéis algún favorito?
No os gusta ninguno
No utilicéis CSS frameworks
¿Qué opináis de los frameworks?
Porque aquí la gente
Me están preguntando
En el chat está todo el mundo
¿Pero qué opinan de Tailwind?
¿Pero qué opinan?
Pero basta
Que no hablen de más cosas
Que digan de Tailwind
Que me da igual
Bueno, basta
Basta, tranquila
Al cuello ya
Venga
Vamos con los CSS frameworks
No hace falta que sea Tailwind
Mira, gente ya aquí
Tailwind
Vamos Tailwind
Vamos Tailwind
Bueno, la gente está aquí
¿Qué opináis?
No de Tailwind
Si de los frameworks en CSS
En general
¿Hay alguno que os guste más que otro?
¿Cómo lo veis?
Bueno, yo utilizo en producción
Tailwind
Soy fan
No tengo ningún inconveniente
Que se vea el larguero
De las clases
Pero a pesar de que me gusta mucho Tailwind
Por la rapidez
Porque como trabajo en startup
Necesitamos hacer cosas de ya para ya
Y encima del ya para ya
Necesitamos estar cambiando el producto constantemente
Entonces hacer cosas así tan rápido
Tailwind ha sido una maravilla
Pero si he notado algunas inconsistencias
Como por ejemplo
Él hace como ciertas abreviaturas
Entonces por ejemplo
Align Item Center
Y uno pensaría que es Align Center
Como la abreviatura
Y no, es Item Center
Y pasa a otro caso
Con Verical Align
En Middle
Que uno pensaría que es Verical Middle entonces
Y no
Ahí sí es Align Middle
Entonces
Entonces hay como ciertas cositas
Que no me terminan de cuadrar
Aún así
Soy fan de Tailwind
Y de otros frameworks en particular
Siento yo
Que muchas personas
Se pegan más de aprender un framework
Que de aprender CSS
Entonces siento que puede ser
Un contraste también interesante
Pero
Primero
Tener muy buenas bases de CSS
Y luego
Al fin emigrar a un tema de frameworks
Porque ahí de pronto
Muchos desarrolladores
Se pueden quedar en CSS
Frameworks
Entonces
Estoy tan de acuerdo
Con lo que has dicho
Del Align este
De hecho
Lo vamos a buscar
Porque es que es
Es insultante esto
Da mucha rabia
Y es lo malo de las opiniones
Que normalmente
Las opiniones son como los culos
Cada uno tiene uno
Pero
En este caso
El que tuvo la opinión en Tailwind
De decir
Bueno
Vamos a ver
Dice
Align Content
Ah
Pues vamos a poner que es
Ahora
Es Content Center
Que dices
Pero porque es Content Center
O sea Content Center
Y entonces no pone la Align
Pero el Justify Content
Sí que
Justify Center
Entonces quita el Content
Pero no deja
O sea
Pero el Justify Item
Sí que lo pone entero
Y el Justify Self
También
Pero Align Content
Quita la Align
El Align Items
Le quita la Align
O sea
Es muy raro
Es lo que dice
Estefani
Estoy tan de acuerdo con esto
Estoy súper de acuerdo
Estoy súper de acuerdo
Y ver si tiene la Align
Exacto
Para eso deja la Align en todos
Y ya está
Que esto es una poco tontería
Porque no tiene sentido
Además el Justify
Le quitas el Content
Que en el otro
Sí que lo dejas
Locurón
Estoy súper de acuerdo
Que no
No mola nada
Y luego está
Que dicen
No
Es que
No tiene Tech Shadow
No puedes hacer Tech Shadow
Con Tailwind
Bueno lo puedes hacer
Pero tienes que hacerlo a mano
No tienen Tech Shadow
Y dices
Pero por qué
Y luego está el tema del Text
Que a mí me ponen los nervios
Porque el Text
Algunos se llaman Text
Porque dirías
Vale es Text
Pero luego hay otros
Por ejemplo
Text opacity
Vale es Text
Font es Font Family
Font Size
Claro
Font Size dirías
Es Font Size
Pero no es Text
Que dices
Pero por qué es Text
Y no es Font
Horrible
Horrible
¿Qué estás haciendo aquí?
Luego
Si dices
Bueno voy a hacer
El Font Smoothing
No
Ya le llamas directamente
Y ahora leas
Que dices
Hostia
Pero por qué no
Claro
Tú no intentas buscar
Y dices
Ostras
Voy a buscarlo como Font
No puedes
Tienes que saberte
Que es anti-alias
Y dices
¿Por qué?
Luego el Style
Italic
Y dices
Pero
¡Ah!
Ayuda
Ayuda
Tiene cosas
Que dices
¡Ah!
Mira
Lo mismo con las variantes
Dices
Normal
Ordinal
No sé qué
Pero dices
Claro
Te cuesta mucho
Buscarlo
Later Spaces
Hay algunos que me cuesta mucho
Buscarlos
Sabes que dices
No sigues una lógica
Me estás engañando
Me estás volviendo
¿Por qué el text align
Se llama text left
Y el text decoration
No es text underline
Y es directamente underline
¿Sabes qué pasa?
Que no puedes
No sé
Tiene estas cosas
Que
Hostia
Carmen
Ahora está poniendo
Una cara a Carmen
De
¿Por qué hacéis estas?
¿Por qué usáis esto?
¿Qué os pasa?
A ver Carmen
¡Suéltate!
No
Yo creo que
Deberíamos dejarlo
De Time Rubin
A un lado
Y es
Utility Classes
O sea
Sí o no
Sí
Siempre son necesarias
No
Es necesaria
Poner tantas
Y que te quede
Tan tan atado
Ese HTML
A lo que estás
Ostras
No sé
No digo que no
Quiero decir
Todo lo que son
frameworks
Y justamente
Lo que comentaba
Del contexto
De trabajo para
Tengo diferentes clientes
O diferentes proyectos
Entonces
Necesito algo
Que
Que
Que
Que de rapidez
Que de consistencia
Que
No
Y que me ayude
Al final
Ni todo es blanco
Ni todo es negro
Lo que pasa
Que yo
No veo necesario
Ese
Churro chorizo
De tantas
Utility Classes
¿Sabes?
Entonces
Y luego
¿Qué es eso?
Que te tienes que
Quedar con las soluciones
Que otra persona
Ha decidido
¿No?
Que comentabais
¿No?
El nombrado
De las clases
Entonces
No sé
Oye
Que
Que
Hay para todo
Que en su día
Utilicen
Bootstrap
Trabajando una consultora
Cara cliente
Entonces necesitabas
Claro
Si ya tienes un producto
Que
Y tienes tiempo
Y tienes manos
Es que
Hay muchos contextos
Yo me iría
Tanto de
Tailwind
Si es mejor o peor
Si no
Utility Classes
Siempre son necesarias
Tanto
Cuando tengo un display
Flex
Align Items
Ya lo tengo ahí
O sea
No tengo que estar
Como era la clase
Que dice así
Además tiene inconsistencias
En nombrados
Con lo que te cuesta
Más encontrarla
Pero
No todo es blanco o negro
¿Sabes?
Ahí gris
A ese medio
Aquí en el chat
Dicen
Se viene framework
De Carmen
No
No
Que hace su
O sea
Quiero decir
Y que ayuda a un montón de gente
Pero también estoy de acuerdo
Con que
Si utilizas
Un framework
Sin tener las bases
Pero pasa como con
Javascript
Si utilizas un framework
Sin tener bases
Pues entonces luego
Creo que es más complejo
Que entiendas
El qué
Y vienen preguntas
Como lo de
Lo de
Flexbox o Grid
¿Sabes?
Cuando dices
No es que en conjunto
¿Sabes?
Pero ya está
O sea
Yo no odio nada
O sea
Todo ayuda a todo el mundo
Y dependiendo del contexto
Y las necesidades
Al final todo es
Es mirar
Qué es lo que más te encaja
Pero los Grid y clases
Sí que
Creo que se pasan
No creo que sean
Necesarias tantas
Oscar Barajas dice
Yo odio a Telwin
Ahora lo amo
Gracias a
Tev Code
Es muy curioso
Es muy curioso
Porque Oscar y yo
Trabajamos juntos
En un programa
Que se llama
Platzi Master
Y tenemos los mismos estudiantes
Entonces a veces
Llegan a mis clases
Como
Pero Oscar dijo
Que Telwin no
Entonces es muy curioso
Y claro
Por supuesto también
Es el tema educativo
De cómo hacemos también
Para que las personas
Tengan su propia opinión
Basada en X o Y
Claro
Totalmente
Es súper importante
Que la gente sepa
Formarse de su opinión
Por ejemplo la de Carmen
Me parece súper interesante
La de Stephanie también
También tengo que decirte
Que ahora
¿Has leído algún comentario
De cómo compilaba el CSS?
No sé si me lo he inventado
Pero una de las cosas
Que Telwin sí que hace guay
Es que no necesitas luego
Tener un CSS enano
O un Purge CSS
Que te hace purga
De lo que no estás utilizando
Y no te lo compila
Y eso creo que Telwin
Sí que lo hace muy bien
Entonces
Una cosa que tiene muy interesante
Es lo que dices
Que Telwin te optimiza
Súper bien
El output del CSS
Yo tengo que reconocer
A ver
Yo
Es que estoy muy de acuerdo
Contigo Carmen
De que
No es blanco o negro
Por ejemplo
Telwin lo utilicé
En el proyecto de
AdventGS
Y
Me permitió hacerlo
Si no
No me hubiera dado tiempo
Porque
Pude desarrollar súper rápido
Ahora
Si eso tuviera que
Vivir años y años
Hubiera decidido Telwin
Pues igual no
Porque tengo algunas cosas
Que me dan cierta vergüenza
Y todo
O sea
Tengo
Tres líneas de CSS
O sea
Tres líneas de classnames
En algunos sitios
Que
Sí, sí
Vaya
¿Tú has probado
Tamara?
¿Has probado Tailwind?
Sí
Lo he probado
Y no
La verdad es que no me gustó
Para nada
O sea
Pero porque
No estoy acostumbrada
A lo que
Al inline CSS
No me encanta
Pero por lo que dices
De que al final
Terminas a veces
Teniendo tres líneas
De CSS
Y me parece
Difícil de mantener
No lo sé
A mi opinión
Pero mi experiencia
Pero sí coincido
Con lo que dice Carmen
De que depende
Para qué necesitas
Cada cosa
Y creo que
Una cosa que tiene
Tailwind
Es que tiene como
Un fanbase
Muy eufórico
Hay mucha gente
Que o lo ama
O lo odia
Y creo que es más
De la herramienta
Que encaje
Con lo que necesitas hacer
Es que no hay término medio
Eso es verdad
Totalmente
No hay término medio
Aquí tenemos a Stephanie
Que lo ama
Bueno Carmen
Se ha puesto ahí
Como en gris
Pero en realidad
Pues lo primero
Que va a hacer
Cuando cuelgue
Es
Asesinar a alguien
No porque yo no puedo decir
Que no
Pero
Al final
Si hago un proyecto personal
Pues a lo mejor lo utilizo
No lo sé
Para
Mi trabajo ahora mismo
No lo utilizaría
¿Vale?
Pero es que
Depende mucho
¿Sabes?
Seguro que hay un montón
De gente
Que le ayuda
Cada día
¿Sabes?
Al final cada uno
Dependiendo del contexto
Y de
No me gusta mucho
La frase de
Hago lo que puedo
Con lo que tengo
Seguramente
No tengas tiempo
De diseñar
Y de implementarlo
Y de tener que montarte
Tu propio sistema
Y arquitectura
De CSS
¿Sabes?
Entonces
No me parece mal
Pero sí que
Utility classes
Un poco siguiendo así
Con la encuesta
Vemos el ranking
De satisfacción
Post CSS
Lo más arriba
Poco a poco
SAS
Ha ido perdiendo satisfacción
Yo me imagino
Que también
Ha tenido que ver
Con el cambio
De los módulos
Los cambios
De los impos
El use
Y todo esto
También
La migración
A Dart
No ha ido
Decían que iba a ir
Más rápido
Y lo que yo decía
Que iba más lento
Esta luz
Se está hundiendo
Les se va hundiendo
También
Este assembly CSS
Como que ha salido
Este año
Pero no va a durar mucho
Me da la sensación
Porque no ha empezado
Muy bien
Es muy raro
Que nazca algo
Y que tenga tan poca satisfacción
Porque normalmente
Las cosas que nacen
Son como para mejorar
Lo anterior
Lo mismo con SAS
También vemos que el interés
Va bajando
En cambio
Post CSS
Pues va bajando
Pero ahora se ha mantenido arriba
Porque yo me imagino
Que esta bajada
De Post CSS
SAS
Y todo esto
Creo que tiene que ver
A lo mejor
Con la subida
Que ha tenido Telvín
Porque a lo mejor
La gente ya no está tan interesada
O sea
Todavía hay gente
Pero a lo mejor
Hay alguna de esta gente
Que dice
Ya no me interesa tanto
Post CSS
Porque total
Si puedo utilizar Telvín
Y ya me quito esto de en medio
Y ya no me tengo que preocupar
Pues es un poco interesante
Y aquí tendría un poco
La experiencia
A lo largo del tiempo
De si lo volvería a utilizar
Si lo dejaría utilizar
Pero bueno
Ya podemos ver
Que SAS
Está bajando
Bueno
Es que no sé si voy a ser capaz
Pero está bajando un poquito
¿Sabes?
Lo volvería a utilizar
Está arriba
Pero va bajando poco a poco
Y yo creo que esto
Ya va a ser la tendencia
No sé si
Vamos a ver
O sea
Veo muy difícil
Que ahora
Más gente
Se vaya a apuntar a SAS
Eso creo que estamos todos
De acuerdo
Que no vamos a ver
No sé qué será
No sé si
Bueno
Post CSS
Obviamente sí que está subiendo
Mucho más
Pero nada
Y luego aquí
Cómo está el split
Entre opinión negativa
O no negativa
SAS y Post CSS
Bastante positivo
Pero
Les Stylus
Fatal
Y este Assemble
No lo conozco
Pero no me ha quedado
Con ganas
De
De probarlo
Está el Components
Tamara
Aquí estás tú
Que es lo más usado
Y el segundo sería
Tailwind
Así que
Ya ves
Muy guay
Ahí está
Pero vamos con los CSS frameworks
A ver aquí
Aquí
Ranking
Tailwind
Fijaos que
La satisfacción ha bajado
Con Tailwind
Pero sigue el primero
Porque luego de los otros
No sé si hay alguno
Que habéis utilizado
Que os interesa
O que recomendéis
Por ejemplo
Bulma
A mí uno que me gustaba mucho
Era Bulma
Pero veo que también
La bajada está siendo espectacular
¿Sabes?
Bulma
Se está como
Desinflando
No sé si habéis utilizado alguno
O
No, ¿no?
Porque
Total
Yo he trabajado con varios
De hecho me acuerdo mucho
De Andesign
Mi primera prueba técnica
Para empresa
La hice con eso
Y me hicieron una pregunta
Súper matadora
Porque creo que tenía un lenguaje
Como chino
Mandarín
Bueno
Y resulta que me preguntaron
¿Cómo hacía para cambiar eso?
No sé qué
Y la cochada de la vida
Me acuerdo mucho
De ese
Andesign
Es de
Alibaba
Puede ser
Que es una empresa
Creo que sí
Creo que es una
Andesign
Creo que es de Alibaba
Es
Es
China
La empresa
Es muy extraño
Este claim
Este claim
Es muy raro
Ojo
El segundo
¿Cómo era?
¿Cómo pone el título?
The worst
Second most popular
Se la colabó a alguien
El meta
El meta
Creo que
O sea
Esto es muy
Es muy lamentable
O sea
No me imagino
Os imagináis
Un
Yo que sé
Un equipo de fútbol
El segundo mejor equipo de fútbol del mundo
O
Queda muy raro
¿No?
El tener este
Este claim
O algo de venta de cursos
El segundo mejor sitio
En el que puedes aprender
Con cursos
Es
Es muy raro
Es como
Sí, sí
Dice gente aquí
Está bien
Es honesto
Sí, está bien
Pero
Pero
Pero igual no hace falta
O sea
Ya que sabes que es el segundo
No hace falta que lo pongas
¿Sabes?
Y bueno
Si aquí tienes
Estefani
No sé si te
No, pobre Dios
Aquí tienes los recuerdos
¿No?
Sí
Recuerda
Ay, qué bueno
Qué bueno
Pues
Nada
Aquí tendríamos un poco
Tailwind
Que ya veis
Aunque
Aquí sí que es bastante curioso
Y a lo mejor
Aquí tenéis
No sé
Alguna opinión
Por qué pasa esto
El hecho de que
No
No hay como una bala de plata
Con los frameworks CSS
¿No?
Aquí podemos ver un poco
El sentimiento de la gente
Y aunque Tailwind
Es verdad
Que hay gente más a la derecha
Pero también hay bastante gente en contra
¿No?
Esto es lo que decíamos
Que o lo quieres o lo amas
Pero pasa con todos
¿Sabes?
No hay ninguno que digas
Bueno, hay alguno que lo odian más que otra cosa
Pero
Sí, no
El Foundation este
Pobre
No se recupera ya
O Materialize
Mira
Undesign
Por ejemplo
Este
Este es Estefani
Que dijo
Sí, sí, malditos
Que te haya documentación
Pero
Pero
Realmente
No sé
¿Por qué pensáis
Que puede pasar este tipo de cosas?
¿No?
De que no hay un framework
Que aune a todo el mundo
¿No?
Que todo el mundo esté contento
¿Por qué creéis que puede pasar?
En parte me agrada
No sabría decirte por qué pasa
Pero me agrada
Porque de una u otra forma
Como que nuestra web
A lo largo de los años
Se ha visto muy igual
Gracias a frameworks
Como Bootstrap
Y Foundation
Entonces me alegra mucho también
Que haya esos sentimientos
De amor y odio
Porque también empezamos a ver
Diseños diferentes
Layouts diferentes
Entonces
Claro
Me gusta que haya más diversidad
Y que no haya un amor
Solo por uno
Porque no me imagino
Todas las webs
Igualitas
Ay, sí
Eso pasó durante una temporada
Con Bootstrap
Sí
Sí, verdad
Que entrabas a un sitio
Y decías
Te ha hecho con Bootstrap
Era tal cual
Ahora sabéis
Qué está pasando con Tailwind
Ahora entras a un sitio
Y dices
Ostras
Te ha hecho con Tailwind
Y lo has dejado
Todo por default
¿Sabes?
No has cambiado nada
Y está pasando un poco
Por esto
Pero lo de Bootstrap
Fue criminal
La mitad de la página web
Que entraba
Serán Bootstrap
Era un poco chungo
Sí, sí
Mira Tamara
Ahora tu momento
Tu momento de CS en JS
¿Por qué?
Porque aquí tienes
Tu Style Components
Que el pobre
Ojo, cuidado
Style Components
Ojo, cuidado
Oh, no
Pobre
Emotion
Que al final
Pues también era una copia
Un poco de
Style Components
No sé cuál fue antes
O no sé cuál fue primero
Pero bueno
Que son muy parecidos ambos
Y bueno
El que sigue es interesante
Son los CSS Modules
Que se supone
Que van a llegar
De forma nativa
O alguna cosa parecida
Al CSS
Y la verdad es que
Teniendo en cuenta
Que es algo nativo
O sea
No es exactamente
Esto nativo
Pero que
Pues está bastante arriba
Y la verdad es que
Es una cosa
Que se ha quedado
Bastante arriba
¿Habéis utilizado
CSS Modules
En vuestros desarrollos
Alguna vez?
No
Personalmente no
Yo la verdad es que
Sí que lo he utilizado
Y tengo que decir
Que es una idea
Que me gusta bastante
Porque al final
Lo que
El problema que tienes
A veces en CSS
De hecho
Mira alguien lo decía
Que eso es por
Next.js fijo
Y es verdad
Next.js
Que es el framework de React
Es la forma por defecto
Y lo que es muy interesante
Es justamente
El hecho de que
Tú importas
Desde tu archivo JavaScript
El CSS
Que necesitas
En ese archivo
Y entonces
La importación del archivo
Como que tienes ahí
Las clases
Y es a nivel de
Como que
Solo funciona a nivel
De ese archivo
Por eso nunca vas a tener
Ningún tipo de colisión
Con las clases
Y hombre
Eso está súper bien
Está escopado
Exacto
Exacto
Está solo
Tienes el scope
Solo para ese
Fichero
Y claro
Te quita mucho
De los problemas
Que tienes con CSS
Y luego además
Te optimiza mucho
La clase
Porque te crea
Un hash único
Y está
Bastante
Bien
O sea que
Genial
Pero hay un montón
Está el JSX
Este poco a poco
Pum
Ha ido bajando
JSS
También
Pum
Bajando
Al final
Bueno
Tamara
Aquí tienes
Tu style components
Que está bien
No tienes pensado
Si dices
Si tú pudieses elegir
Tamara
Que dices
Ostras
Style components
Está bien
Pero si le pudiera
Dar un botón
Me encantan los botones
Que le puedes dar
Me gusta pulsar botones
Como podéis ver
Si pudieras darle un botón
Y decir
Bueno
Cambio todo lo que tengo
Style components
A otra cosa
O incluso a otra librería
O lo que sea
¿Lo harías o no?
O estás mega contenta
Con Style components
No hay nada
Es que creo que he ido
Mucho tiempo
Mucho tiempo trabajando
Con eso
Y pues no te sabría decir
No he tenido tantas experiencias
Con otras cosas
Como para decirte
Pues esto
¿Sabes?
De repente
Prueba otra cosa
Y estoy de acuerdo contigo
Y digo
Es terrible
¿Sabes?
No
Pero no sé
Y entonces
¿Tú te sientes súper cómoda?
¿Qué sientes con los style components?
Que ya te lo dan todo
¿Te ha costado encontrar
Por ejemplo
Documentación
O te has sentido bien?
No
A ver
Yo creo que
Lo guay es que tiene
Una comunidad muy grande
Está bien mantenido
Tiene bastante documentación
O sea
Es como que fácil
Para mí fue fácil
Empezar con
Y pues no
No sentí que fuera
Como muy complicado
Es que estoy muy acostumbrada
Creo que es eso
Y precisamente
Por eso no me gusta tanto
Tailwind
Porque es algo tan diferente
Que es como complicado
Muchas veces
Más que la tooling
Es más como
Que tú pases
De una a otra
Como la transición
Es dolorosa
Pero bueno
Tal vez el tema
De escalabilidad
Puede ser un poquito
Lo molesto
En temas de style
Es de style component
O de style
En general
¿No?
Como que te crea un wrapper
Y qué tan escalable
Puede ser este wrapper
Tal vez lo puedo ver por ahí
El resto también
Soy fan
De style component
O de style component
En particular
Pero creo que solamente
Ese pequeño
Cositito
De escalabilidad
Lo veo como un poquito
Difícil
Igual el problema
Sí que puede ser
Es el hecho
De que está muy acoplado
Al sistema de componentes
De React
Eso sí que
Claro
Cuando hablamos mucho
De CSS
Y tal
¿No?
Muchos a veces
Style components
Es creo
Como unos componentes
Bueno
Se llama style component
Por algo
Crea el componente
Que al final
Lo que te deja
Es un componente
En realidad
Que es de React
Y entonces a veces
Yo lo que
De hecho en el curso
De Platzi
Lo enseñamos
Tengo un curso
De React avanzado
De Platzi
Donde vemos los style components
Que es el hecho
De que hay gente
Que no
Ni siquiera separa
Los style components
En ficheros aparte
Y que
Bueno
Pues es lo mínimo
Para justamente
Para evitar
¿Lo hacéis en vuestra
No?
¿Lo hacéis en vuestra empresa?
No?
¿Tamara?
Sí
¿Cómo?
¿Cómo?
Es que me corté
¿Qué hago?
Vale, vale
No, que separáis
Los style components
Los separáis
En otros archivos
No los dejáis
En mitad de vuestro
Claro, claro
No, no, no
Todo en un mismo archivo
No, por favor
Eso me parece
Horrible
Muy bien
Así me gusta
Así me gusta
Vale
Pues tenemos ya
Other tools
Que tenemos utilidades
Bueno, Prettier
Que está súper arriba
Autoprefixer
Que al final
Esto es un poquito
De PostSS
Esto es un poco raro
El preguntar
Sobre utilidades
Y mezclarlas todas
Pero bueno
El más interesante
Es el de los navegadores
Que yo estoy súper sorprendido
Con esto
Que dice que
¿Cuál es el navegador
Que utilizáis
Normalmente?
O sea
De forma primaria
Mientras estáis
En el desarrollo inicial
Y vale
Chrome me lo esperaba
Que está bastante arriba
Pero un 46% Firefox
¿Dónde está esta gente?
¿Y dónde se esconde?
Es que me he hecho cosas muy guays
Sí, la verdad es que Firefox
Funciona muy bien
Muy bien
Los de tools
Son
¿Qué utilizáis vosotras?
Todos los paneles
Que ahora Chrome
Se ha puesto también
Las pilas con los paneles nuevos
Pero los paneles
Que tienen de tipografía
De animación
De grid
De flex
Sí, sí
Ahora
Sí que
Las developer tools
De Chrome
Sí que
Tienen panels más
Pero
Fueron los primeros
Temas de tipografía
De animaciones
De grid
Hay un montón de gente
En el chat
¿Eh?
De repente
Porque digo
Bueno
¿Y dónde está esta gente?
Y todo
¡Viva Firefox!
¡Eme aquí!
¡Firefox Developer Edition is God!
¡Firefox Developer Edition!
¡Aquí un Firefox!
¡Joder!
La leche
Los veo
Sí
Desde Firefox
Aquí
Yo
¡Joder!
Yo uso Firefox 100%
Me encanta
Y tuvo que salir
El típico
Safari
Safari
Estefanny
¿Tú qué utilizas normalmente
Para desarrollar?
Chrome
Siempre lo he utilizado
De hecho me da mucha alivia
Tener Firefox
Para probar cosas
Casi no me gusta
No me siento como tan
Amigable
Con ese entorno
Aunque me encantan muchísimo
Esas funcionalidades
Que han hecho
Y bueno
Pero no
Chrome definitivamente
La verdad es que
Menos mal que existe Firefox
A mí me daría mucha pena
Que al final
Tuviera que desaparecer
Porque muchas de las mejoras
Que han venido
De las herramientas de desarrollo
Como decía Carmen
Te he llamado Chrome
Imagínate Carmen
Perdón
Perdón
Como decía Chrome
Como decía Chrome
Aquí
Yo soy el señor Edge
Soy el señor Edge
Tenemos aquí a Chrome
Que en realidad
Carmen decía
Tenía que ser Firefox
Porque le queda
Que ni pintado
Que fuese Firefox
Pero bueno
El tema
Que menos mal
Que existe Firefox
Porque muchas de las mejoras
Que hemos tenido últimamente
En las herramientas de desarrollo
Son obviamente
Copiadas
Literalmente
De Firefox
O sea que
Menos mal
Y espero que jamás
Pues desaparezca Firefox
¿Tú utilizas Firefox
Principalmente Carmen?
No, no
Chrome
Claro, no
Chrome
No, no
Pero
Pero sí que es verdad
Que es lo que digo
Que todos esos paneles
Que ahora están
En las DevTools
Han venido
Por la presión
Un poco
De tener a Firefox
Desarrollándolo
Entonces
Que no se acabe
El monopolio
Este
¿No?
Pero para desarrollarlo
¿Lo usas o no?
Firefox
Digo
Sí, sí
Claro
Al final
Por eso me quejaba
Antes de Safari
Porque al final
Tienes que
Hacerte este
En asegurarte
Que al menos
No se rompa nada
Entonces
Y tú Tamara
¿Qué?
¿Solo Chrome?
Chrome también
Sí, lo siento
¿Y Firefox nada?
Lo siento
No, no pasa nada
Que yo no tengo
Que yo no tengo
Acciones de Firefox
Ni de nada
Ni de ópera
Que me gustaría
Sí, pero
¿Solo Chrome?
¿O sí que dices
Bueno, voy a echarle
Un último vistazo
En Firefox
A ver si funciona
No pasa nada
Hay que sobre esto
Yo muchas veces
Sí, más que Firefox
Igual que Carmen Safari
Es el que tiende a romperse
A hacer cositas más raras
Sobre todo
Es el que tiende a romperse
Eso es verdad
Eso es verdad
Da mucha rabia
Cuando se rompe Safari
Porque además
Hay muchas veces
Sobre todo cuando es
En iOS Safari
Porque Safari de Stop
Aún
Normalmente tiene fácilmente
La
Acceso
Pues algún Mac
O alguien
De algún compañero
O compañera
Pero
Ostras
iOS Safari
A veces es un rollo
Y además cuando te dicen
No, es que
Es
iOS Safari
En iPhone 12
La versión tal
Por eso tienes
El Xcode
Para Mac
Que te puedes bajar todo
Al final
El motor de renderizado
Te puedes fiar bastante
Y te puedes bajar
Cualquier versión
Pero así es una jodienda
Totalmente
Totalmente
Vamos a ver
¿Qué más dice?
Bueno, aquí tienes
Un poco la misma pregunta
Esta gente siempre hace
Preguntas
La de
Los browsers
Testing environments
Bueno, casi todo el mundo
Esto es curioso
Porque aunque mucho tiempo
Ya hemos visto
Que los usuarios
Realmente están en móvil
Pues casi todo el mundo
Lo que hace es
¿Dónde lo vas a hacer?
Testing environments
Desktop applications
Directamente
También nos pasa esto
A vosotras
Que testeáis directamente
En desktop
Esteban y dice
Así es
Es verdad
A mí también me pasa
¿Por qué nos pasa esto?
Costumbre
Pereza
Sí, ¿verdad?
Ahora Carmen dice
No, no
Yo lo hago todo en móvil
Entonces ya me deja
No, en
Ahora es que estoy trabajando
Para
Más para
Aplicaciones
Internas
Sí que alguna parte
De la web
Pero no estoy
En el e-commerce
En Mango
Pero en Desigual
Sí, en Desigual
El grosso de pasta
Entraba por iOS
En iOS
Se tiene que ver
Perfecto
Entonces ahí sí
Teníamos el Apple Store
Prácticamente
Un armario
Con todo el Apple Store
Desde iPad
iPhones
Cualquier versión
Y a testear
Cuando había Cuba
O hubiera menos Cuba
Así que toca un poco
Hacer el testing
Y hacer
O sea
Puedes directamente
Mirar
Con el iPad
Enchufado
Al navegador
En el ordenador
Y puedes ir mirándolo
Directamente
Como un debugging
Ahí
Para comprobar
Pero sí
Ahí sí
Era casi todo
iOS
Y tú Tamara
Realmente levantas
Dices
Voy a mirar en móvil
A ver si funciona esto
O no miras nada
Dices
A ver
Me fío
De lo que me dicen
Las DevTools
Pero sí que me ha pasado
Que tengo que hacer
Cosas raras
Cosas que solo pasan
En un iPhone
Y que no pasan
En otra cosa
Me ha pasado bastante
O luego hay una actualización
De iPhone
Y te pone la
Navbar
Y te la pone abajo
No me hable
Por favor
Por defecto
Por defecto
Tienes la Navbar abajo
Entonces es como
Todo lo que tengas
Sticky
En el bottom
Terrible
Gracias
Qué bueno
Entiendo
Sí, sí
Entiendes
Gracias
Vale
Tenemos aquí ya
Lo que serían
Los awards
Que vamos a
Cada una
Pues me gustaría
Que dijese
Ahora os preguntaré
Cada una de estas tres cosas
A ver
Para vosotros
Lo que sean
Los premios
Pero antes
También en
Resources
Está el hecho
De dónde la gente
Aprende
Cómo aprende
Y todo esto
Entonces me gustaría
Que cada una de vosotras
A ver si podéis
Compartir
Un sitio
Que digáis
Yo os recomiendo
Este sitio
Porque es donde más
Aprendo
Donde más veo
Ya sea
Una cuenta de Twitter
Una página web
Lo que sea
¿Sabes?
Lo que sea
No sé
Que recomendéis
Que digáis
Si te quieres estar al día
Lo que te recomiendo
Aquí por ejemplo
Dicen
CSS Tricks
Y tal
Entonces
Sin spoilers
El que
A ver
Que al final
Decís
No
Yo es que lo miro todo aquí
O una persona
Que digas
Mira
Es que esta persona
La verdad
Es que yo la sigo
Y me entero
De todo
Pues
Si tuvieras que decir una
Estefan
Estefan
Hay un chico
Que no me le he podido
Aprender el nombre
Completo
Pero es como
Adam
Y es como
Shadow
El este es como
Shadow
No sé qué
Adam
El de Google
Bueno
Hay dos Adams
A ver si estamos diciendo
El bueno
El Adam
Es el que tiene
Un buen peinado
Bastante jovencito
Rubio
Rubio con los ojos azules
Este chico es
Ah no
El no
Es otro
No es este
Ah pues el de los patrones
De
No
Tiene un blog
Espectacular
A ver
Será Adam Watan
Como un
Muñequito
Como si fuese un Playmobil
Ah no
El Josh Comeao
Ese es Josh Comeao
Sí
Josh
Josh
Josh
Josh Comeao
Es peor para los nombres
Tío soy horrible
Josh Comeao
A mí lo que me encanta
Es el Josh Comeao
O sea
Si
A saber cómo se pronuncia
A saber cómo se pronuncia
Yo no tengo ni idea
Mira
Oscar dice
Yo aprendo mucho
De Tef Code
Sus cursos
Sus retos
Y contenido
Ahora luego
Hombre
Ahora compartiremos
Las redes
Por supuesto
De nuestras invitadas
Para que las tengáis ahí
Salía por ahí
Un Midudev
Sí
Pero eso yo que
Aquí lo dicen en el chat
¿Cuántas redes lo has hecho tú?
Josh me preguntas
Con pistola
En 100
Midudev
Dicen por aquí
¿Sabes?
Gente que
Jaja
Yo tuve que decir
Que aprendo con Midudev
Porque me dio 20 euros
¿Ves?
Es que
Gente que
Unos troles
Vale
Aquí tenemos
El que decía
Stephanie
Josh come out
Y la verdad es que
Brutal
Tenía este último artículo
De CSS
Reset
Está muy interesante
Una cosa que me gusta mucho
Es este
Tiene unas demos
Increíbles
Este chico
Increíbles
Mira este es el
Luchado
Es muy buen nivel
Es que es increíble
¿Unas demos?
Sí es que
Es brutal
Y si te suscribes
A la newsletter
Sale confetti
Y cosas así
O sea
Tiene como
Interacciones
Maravilloso
Además tiene audio
Ah bueno
No se si se escucha
Pero
Ah mira
Es que tiene un montón
De detallitos
Tiene un montón
De detallitos
Muy detallista
Pues dejamos
Este recurso
Lo dejamos por ahí
En el chat
Para la gente
Ahí es donde
O sea
Si realmente
Stephanie
Aprende algo
De Josh come out
¿Cómo será Josh come out?
Yo lo dejo ahí
Yo solo lo dejo ahí
Carmen
Dime
¿Dónde?
¿Quién recomiendas?
¿Qué recomiendas?
¿Un libro?
¿Un artículo?
¿Un podcast?
Lo que tú quieras
Oye
O una charla tuya
También te puede ser
Es que hay un montón
O sea
Hay un montón
De verdad
Es una pasada
Estamos en un momento
Súper guay
Aparte de las que salen ahí
Google
Con su afán
De enseñar mil cosas
Ha puesto
Una
O sea
Como un apartado nuevo
Que es el de
Learn
De Aprender
Y el de Patterns
Que ahora no recuerdo
La url
Ah
Patterns.de
Patterns.de
Si yo
Sin mis bookmarks
No soy nadie
No, no, no
Este
Mira
Justo
Este es el libro nuevo
De patrones
Que han hecho
Pero no
No es este
Es
Learn
Aprender.de
¿Lo de
Aprender
CSS?
Es que mal
Sí
Tienen este curso
Que es increíble
Este curso es brutal
Y en cada
En cada apartado
Que van incluyendo
Yuna Kravitz
Y Ada Marjail
Que yo pensaba
Que decías antes
Este chico
Tienen el podcast
De CSS
Y nada
Son como 10 minutos
De podcast
Te explica
Lo que se
Habla
En ese
En ese apartado
Y además
Hay ejemplos
En CodePen
Y todo
Y van
Incluyendo
O sea
Hace unas semanas
Por ejemplo
El de Grid
No estaba
¿Sabes?
Van incluyendo
Nuevos apartados
Y me parece
Que está súper guay
Gratis
Y eso es muy guay
Muy guay
Y luego hay otro
De patrones
Que también es
De ellos
Pero
No recuerdo
No recuerdo
Que la gente
Lo busque
Tamara
Pues
Iba a decir
Josh también
Porque me encanta
Josh
Pero
Para decir algo
Diferente
Learn with Jason
¿Saben cuáles
Les suenan?
Este lo va a pasar
Por aquí
Es un señor
Muy guay
Que lo que hace
Es traer invitados
Y se trae
Al creador
De una librería
Y le pide
Que le explique
Cómo funciona
Esa librería
Entonces
Son episodios
En Twitch
No me acuerdo
Su apellido
No lo puedo pronunciar
Yo sí que te lo puedo decir
Jason Langstorff
Wow
Increíble
Es muy guay
Pero sí
Es muy guay
Es muy guay
Porque es muy guay
Porque
Hace eso
De que alguien
Que lo haya creado
Te lo explique
Pues es como
No sé
Me parece muy curioso
Una idea muy guay
Y está siempre
En Twitch
En Youtube
Es súper activo
Y siempre
Está haciendo cosas
O sea
Siempre
Tiene
A este hombre
Yo no sabía eso
Hola
A ver
Jason y yo
Somos colegas
Hostia
Ves
Con esta cara
La cara
Le hago la mirada
Del tigre
Y el pobre hombre
Dice
Pero a este chico
¿Qué le pasa?
A este chico
Este chico
Está poseído
Este chico
Bueno pues
Yo
Yo
Yo aquí triste
El triste
También
Estamos aquí
Es increíble
Bueno pues
Bueno
Aquí ya un poquito
Más feliz
Él no tanto
Bueno
Si me quiero ir a mi casa
Está bien
El tema es
Que
Has pedido pegatinas
O
Es muy crack
Sí, sí
Totalmente
Muy muy crack
Yo ya
Yo ya encontré
El
El
El
El chico
No se llama
Adam
Sino
Amad
Es
A-H-M-A-D
Mira ya está
Ya
Si la has pasado
En el chat privado
Lo voy a enseñar
Que lo vea la gente
Es
Esta persona
Amad
Shadid
Shadid
Muy interesante
Ah
Defensive CSS
Esto estuvo de moda
Hace poco
Muy interesante
Este artículo
Buenísimo
Buenísimo
Defensive CSS
¿Quién no ha hecho
Defensive CSS?
CSS muchas veces
La verdad
Todo el tiempo
CSS a la defensiva
Y además tiene un montón
De ejemplos
Muy muy muy chulo
Muy chulo
Muy muy recomendable
Muy bien
Muy bien visto
Muy bien
Pues nada
Vamos a ponernos
Con las redes
De
De estas pedazos
De cracks
Para que no os lo perdáis
Porque la verdad
Es que
Son increíbles
Como habéis podido ver
Tenemos a
Stephanie Aguilar
¿Vale?
Que aquí la tenéis
Os dejo también en el chat
El enlace
La podéis encontrar
En Twitter
Además que es verdad
Que hacías unos retos
Súper chulos
No sé si últimamente
Has hecho alguno
Pero cada dos por tres
Estaba haciendo retos
De
¿Cómo lo harías así?
¿Cómo lo harías así?
Es que
Brutal
Stephanie
Están súper chulas
Gracias
Gracias
No quiero retomar
Habían unos quizzes
Que yo hacía
No sé si esos son
Los que tú dices
Sí
Los quizzes
Quiero retomarlos
El próximo año
Y retos
Y estamos haciendo
Con Plat
Y contenido
Ahí en el blog
Ahí tengo un link
En toda la
¿Cómo se llama?
En la información
De Twitter
Ahí hay un link
Y está todo el contenido
Que creamos
Para Plat
Que son reticos
Tutoriales
Pues aquí tenéis
A Stephanie
Mira aquí
Con la pedazo de charla
En la CSS
Con Europa
Si no
Encima
No no
Una crack
Si yo he visto esta charla
Que ni me
Tamara
Gerig
La tenéis por aquí
La dejo en el chat
También
Que también
Pues el ageto
Departen
De asuntos guays
Me encanta ese
Y aquí tenemos
Una animación
Que hizo
Mira
Mira
Mira
Mira
Mira
Mira
Mira
La pedazo de animación
Que hizo aquí
Una animación
Con Sash
Además
Por descubrir
La propiedad
Me acordaba
Que era con Sash
Así es
Con Sash
Y luego
Diciendo
Ah no
Pues
No quiero estar
Compones
Verdad
Y mira
Y bueno
Mi perrita
Mi perrita
Que perrita
Más bonita
Ya ha crecido
No estamos contentas
Tampoco
O sea
Tengo que decir
Que
No quería salir
Ese día
Estaba un poco amargada
Pero ya ha crecido mucho
Ya es como
Un triple de tamaño
Tamara
Me vas a obligar
A utilizar Tailwind
Otra vez
Qué bueno
Bueno pues tenéis a Tamara también
Y por supuesto
Tenéis a Carmen
Ansio
Que os la dejo también
Por el chat
Ay
Sí
Os he dejado la de Tamal
Y aquí tenéis a Carmen
Una verdadera crack también
Que además comparte un montón
De cositas
Mira esto
Ah no
Esto está fijado
Soy muy pesada
Sí
Lo que voy compartiendo
Lo voy poniendo en el repo
Sí
Además tienes
Es que hiciste una charla
Muy guay
De SVG
Es que me pareció
Tan guay
Que era una animación
Así toda guay
Era como
Un alien
Con un
Pues fue
Fue en la CSS
Conf
Fue en la CSS
Conf
De Medellín
Anda
Sí
En Medellín
Mira
Claro
Qué bueno
Pues tiene este repositorio también
Carmen
Donde tiene un montón de
Bueno
Artículos interesantes
Enlaces
Utilidades
Juegos
De CSS
Para aprender
Cosas de SVG
Y también va compartiendo
Sus cositas
Y mira
Aparte ha retuiteado también esto
Pero bueno
Que es súper interesante
Así que
Os recomiendo
Mucho
Muchísimo
Sus
Sus enlaces
En las redes sociales
Que las sigan
Que aprendan de ellas
Como tanto
O más
De lo que he aprendido yo
Porque yo sigo aprendiendo de ellas
Así que
Ya saben
Y para terminar
Ya terminamos
Con lo último
Los awards
Solo
En este caso
Hacen tres
Yo voy a pedir
Una
¿Vale?
Que digáis
Cuál sería para vosotros
Vamos a hacer el spoiler aquí
El adoptive feature
Los comparison functions
No tengo idea
Lo que es
Sí, sí
Una bastante sorprendente
Post CSS
Mayor satisfacción
Y el mayor interés
Los CSS modules
Pero si tuvieran
Que decir
Una cosa
De CSS
Del mundo de CSS
Que le han motivado más este año
Que le tienen más ganas
Que le ha sorprendido más
Lo que más utilizan
Lo que sea
¿Qué es lo que dirían?
A ver
Empezamos contigo
Stephanie
Dios
Estuvo en tantas cosas
Tal vez me iría por el tema
De animaciones
Todo el tema que vimos
De Interactions
Me iría por todo ese tema
Muy bien
Indiscutiblemente
Y del 2022
¿Qué es lo que le tiene más ganas
Que llegue?
Algo que digas
Buah
Tuvo muchas ganas
Que llegue esto
A CSS
Me encantaría
Que llegue
El Mystic
Mejor dicho
Si eso llega
Ya
Ya
Ya
No hace falta nada más
No más
Muy bien
Carmen
Vamos contigo
Bueno yo todo tema
Animaciones también
Porque bueno
Es lo que más me gusta
Aunque no sale el curro
Pero luego como
Proyectillos míos
La media query
Del contenedor
Y el hash
Que eso no sé si lo hemos comentado
Es verdad
No hemos comentado
El selector de hash
El selector padre
Sí, sí
Así que
Oh
Cierto
Muy bien
O sea
Que ya tenemos las dos
Vamos con Tamara
Lo que
Lo siento
Voy a tener que copiar respuestas
Y voy a tener que decir
Animaciones también
Porque
Las animaciones molan
Y son muy divertidas
Y para el 2022
Pues lo del content
Este que hablamos antes
De
Que coja el lugar
De las media queries
Que coja el container
Padre
Pues eso está muy guay
Eso estaría muy guay
Sobre todo porque
Suele usar storybook
Para hacer
Componentes y tal
Y pues la verdad
Es que está muy chulo
Para
Podría ser interesante
Claro
Totalmente
Pues para mí
El 2022
Es que
Pueda absorber
Más
El conocimiento
De Stephanie
Carmen
Y Tamara
Y por fin
Haga CSS
En condiciones
Así que
Muchísimas gracias
A las tres
Por haber estado aquí
Está claro que
El CSS
Que vamos a escribir
En el futuro
Va a evolucionar bastante
Pero bueno
Con gente como
Ustedes
Para que nos enseñen
En las redes sociales
Seguro que nos
Defendemos
Así que
Oye
Un verdadero placer
Haberos tenido a las tres
Aquí
Y compartir este
Estito CSS 2021
Con ustedes
Muchas gracias Stephanie
Te mando un abrazo enorme
Que a ver si llega a Medellín
Te vemos en Platzi
En sus cursos
Ahí
Corazoncito
Carmen
Un placer como siempre
Muchas gracias
A ti por invitarme
Y muchas gracias Tamara
Muchas gracias a todos los que habéis estado
Muchas gracias
A la gente que se ha suscrito
Oscar ha estado on fire
Oscar Barajas
Ha estado on fire
Hay súper fan
De todas
Especialmente Stephanie
La verdad
Estaba ahí
Este es lo máximo
Este es lo máximo
Porque me ha enseñado mucho
Y tal
Me suscribo otra vez
Y ha estado regalando suscripciones
Y tal
Así que
Muchas gracias a todos
Y a todas
Por haber estado aquí
Y nos vemos en la siguiente
Gracias a las tres
Sois una verdadera cracks
Y una referente
Así que muchas gracias
Hasta luego
Chao
Adiós