Bueno amigos y amigas, estoy encantado de estar aquí un año más, porque esto va a ser, y antes lo estábamos comentando, tradición navideña.
Vamos a tener nuestros jerseys feos frikis de Navidad, vamos a tener turrones y polvorones, sobre todo en España, si no sabes lo que te estás perdiendo.
Vamos a tener un montón de tradiciones, también el arbolito, y todos los años vamos a tener la suerte de invitar a tanto Estefania Aguilar como Carmen Anzio para poder hablar del State of CSS 2022.
Bueno, el de año pasado fue el 2021 y todos los años la tenemos aquí, porque además de que son dos pedazos de frontend developers que animo un montón, que me encantan, que me chiflan, que lo hacen súper bien,
que en Twitter están compartiendo un montón de contenido, que hacen cursos, que saben un montón, pues es que además son bellísimas personas, porque tengo la suerte de conocerlas a las dos y son bellísimas personas.
Así que me las he traído aquí, porque qué mejor que para hablar del State of CSS que dos verdaderas cracks, a mí no se me ocurre.
De hecho, voy a hacer yo, que yo voy a sobrar, casi que las voy a poner a ellas, una a cada lado, y yo voy a estar aquí de espectador.
Porque de verdad que este año me lo he mirado un poco en diagonal y he dicho, oye, que es que no me entero de la mitad, que no, o sea, de verdad,
es que la mitad de las cosas no las conozco. Hay un montón de nuevas propiedades que son disruptivas, hay un montón de nuevas tecnologías,
pero bueno, os preocupéis, que lo que sí que hay también es mucho salseo para hablar de Tailwind, de Bootstrap, si CSS en JS está muerto, y un montón de cositas más.
Así que, antes de estar yo aquí todo el rato, y que seguro que ya la gente ya veo en el chat, sí, sí, está muy bien, pero Midu, deja de hablar y empieza a dar paso ya a la gente que es la protagonista de todo esto.
Bueno, pues vamos a empezar con Carmen Ansio. ¿Qué tal, Carmen? ¿Cómo estás?
¿Qué tal? Muy bien, muy bien. Jo, pedazo de presentación. Tengo que reconocer que tenía un jersey navideño preparado, pero de hecho, no, que vas a estar muy friki, y al final no me lo he puesto.
Me hubiera encantado. ¿Me llegas a decir qué de CSS y ya lucir?
No, de los Gremlins, casi.
Me encantan los Gremlins igualmente. Bueno, oye, bienvenida por estar aquí un año más, encantadísimo de que estés.
Muchísimas gracias.
¿Cuántos años llevas viniendo ya con la tontería?
Tres o cuatro, creo.
Tres o cuatro. ¿Cómo pasa el tiempo, Carmen? ¿Cómo pasa el tiempo?
Tres o cuatro. Es que estaba pensando antes y digo, ostras, es que el año pasado me suena. O sea, el año pasado seguro.
Pero es que me suena el anterior y me suena del anterior también.
Diría que también, sí. Sí, sí, sí, diría que sí. Por eso digo, es tradición navideña ya. O sea, ya no va a ser Navidad si no hacemos esto.
Totalmente. Oye, pues ojalá esta sea la tradición que podamos repetir durante muchísimo tiempo y que estemos aquí con buena salud para hacerlo y disfrutarlo.
Bueno, pues Carmen, vamos a darle paso también a nuestra compañera también, que vamos a ser tres hoy.
Ah, Estefania Aguilar, bienvenida. ¿Cómo estás?
Hello, súper bien. Por aquí comía la carrera.
Porque aquí en Medellín son las doce y nosotros, oye, yo acostumbro a comer a las doce. Entonces estaba ahí como ya, rápido.
Pero bueno, por fin logramos estar aquí. Yo feliz de la vida, por supuesto, de acompañarlos. Gracias a mí por esta súper invitación.
Y nada, un honor por a mí también compartir este stage, por supuesto, con Carmen, que el año pasado aprendí muchísimo de ello.
Mejor dicho, salí de todo esto y fue como que voy a buscar todo lo que ella dijo.
Entonces fue maravilloso. Así que muchas gracias nuevamente por estar aquí.
Qué bueno. Estefania, ¿en tu caso este es el segundo o el tercero ya?
El segundo.
El segundo.
Claro. Es que, Estefania, ya tuvimos el AmiduConf, entonces yo ya voy mezclando aquí.
Voy a tener que decir ficha, salario y todo, me parece. O sea, voy a tener que pagar dinero.
Cabe en la leche.
Bueno, pues muchísimas gracias a las dos por estar aquí, por volver.
Esta tradición navideña que hacemos todos juntos.
Hay un montón de gente aquí que está súper, súper contenta de veros por aquí.
O sea, que nada, yo también. Encantado de teneros.
Y nada, antes de entrar al State of CSS, de ver los resultados y un montón de datos y comentarlos y criticarlos y esto y lo otro.
Y además de que podamos disfrutar la máquina recreativa de Carmen, que me da mucha envidia.
Cada vez que la veo, voy a ponerme la mano así para no verla, porque me da mucha envidia.
Te has invitado, ¿eh? Cuando quieras venir a jugar.
Ah, hostia, encima es Super Mario Bros. 3. Madre mía.
Es que yo he perdido vista en ese juego.
Pues antes de empezar con todo esto, lo que quería comentaros es, ¿cómo habéis visto este año a nivel de CSS?
¿Qué es lo que más destacaríais en general así?
Que lo primero que se os venga a la cabeza de, ostras, esto me ha encantado, o a esto le tengo muchas ganas, o he descubierto algo, o todo lo contrario.
O qué aburrido has ido este año.
No sé, empezamos contigo, Carmen.
Lo primero que se te viene a la cabeza en el mundo de CSS este año.
Vale. Además de containers y un montón de propiedades que estaban en flag y que ya empiezan a estar bastante soportadas en los navegadores,
ha habido bastantes propiedades que hacen hincapié en la accesibilidad y en todo el tema de cómo se tratan los colores,
y de los rangos de colores, y colores relativos, y hacen colores y así.
Que a mí, que soy bastante friki de todo el tema de diseño, colores y etcétera, me han gustado mucho.
Porque podía hacer como ejemplos muy locos con animaciones y con colores que antes no hubiese podido hacer.
De hecho, esto de los colores es una nueva unidad, una unidad, no, una nueva forma de hacer colores que parece que es súper interesante porque es mucho más entendible.
Sí, es más fácil de entender y hay unas cuantas propiedades que no solo están el accent color y el current color.
El current color, si quieres luego lo comentamos, ¿no?
Pero yo sobre todo para esos VGs y conos y así, pues los utilizo muchísimo porque te coge la propiedad del padre y entonces ya tienes ahí el color.
Pero también han aparecido como color mix y como que puedes hacer degradados y así como más potentes también.
Entonces hay un conjunto de herramientas alrededor del color y de accesibilidad que la verdad que está súper guay.
Y hay una que es como un rango entero del gamut, de lo que tú le permites a la pantalla que te muestre a nivel de píxeles de colores.
Y bueno, ya te digo, muy sorprendida por la caña que le estaban dando a esto.
Porque yo pensé que no le darían tanta caña como podía ser un subgrid, un container, un...
¿Sabes? Que eso como que ya lo esperaba ya, ¿no?
Que ya se pudiera hacer porque venían diciéndolo.
Esas me han sorprendido más porque no los tenía en el radar de que iban a aparecer.
Un año lleno de color, entonces, a nivel de CSS para Carmen.
¿Y para ti, Tef?
Bueno, mi duda, tengo como un montón de sentimientos encontrados.
Uno, felicidad por una parte de todo el tema de accesibilidad principalmente,
que hay un montón de propiedades y cosas súper interesantes para las preferencias del usuario.
Aunque por ahí me encontré un par que todavía ni los sistemas operativos como que tienen como permitidas ciertas cosas.
Entonces es muy interesante que ya incluso la web se esté adelantando un poquitico a lo que ya tienen los sistemas operativos.
Y por otro lado, el otro sentimiento encontrado es que este año esperé también mucho más de la comunidad.
¿A qué me refiero?
Que, por ejemplo, ver las respuestas de las personas es como, no lo conozco, o lo he escuchado pero no lo he usado, o ta, ta, ta, ¿cierto?
Entonces me causa mucha curiosidad el hecho de, ok, ¿qué está pasando también en la comunidad de CSS?
¿Será que nos hace falta comunicar más, mostrar más ejemplos?
No sé, como que entre nosotros mismos poder apoyar esto porque esto finalmente es un tema de comunidad.
Entonces tengo como esos dos sentimientos.
Como hay un montón de cosas súper interesantes, pero por el otro lado es como, ok, mucha gente no las conoce
y qué estamos haciendo también en la comunidad de CSS para que no se conozca.
Y bueno, también es como tarea próximo año de lo que tenemos que hacer.
La verdad es que me parece una buena reflexión porque, bueno, ahora lo iremos viendo, pero yo hay muchas propiedades que he dicho,
¿esto qué es? ¿Esto qué es? Me he quedado como loco.
Y bueno, por un lado está bien porque también uno siente como, ah, menos mal, tengo un montón de cosas para aprender todavía, qué divertido.
Pero por otro lado dices, ostras, ¿yo qué pensaba? ¿Que este año CSS?
Pues no sé, a lo mejor mi sensación era que no había avanzado mucho, más allá de que muchos navegadores sí que habían adoptado,
por ejemplo, sobre todo Safari, que se ha puesto las pilas, que me alegro muchísimo.
Pero, ostras, hay mucho más de lo que pensaba.
Así que nada, yo contentísimo.
Pues vamos a darle, venga, vamos a echarle un vistazo a esta encuesta maravillosa,
el State of CSS un año más.
Entonces, ya en la introducción, la Sasha Grief habla de que ya el año pasado hablaban, ¿no?,
de que íbamos a estar escribiendo de una forma diferente.
Tenemos ahora el parent selector, native nesting, container queries, cascade layers,
que yo no he hecho nada y espero que vosotras sí que hayáis hecho y me lo podáis explicar bien.
Pues vamos a ver ya el Data Explorer.
Este año han hecho esto, que es una cosa nueva, que es un explorador de datos,
que tiene como diferentes cosas que puedes como cambiar totalmente.
Y no vamos a jugar mucho, porque a mí me ha parecido ya muy brutal,
pero a la gente que le interesa el tema de datos, que sepan que aquí pueden jugar un montón.
Y no solo eso, sino que además he visto que pueden recuperar los datos.
Si por lo que sea quieren hacer alguna cosa con el JSON o incluso hacer una consulta a un GraphQL,
o sea, tienen la API abierta, lo pueden utilizar con la API pública,
pueden mostrar los datos como quieran.
Nosotros nos lo vamos a saltar y vamos a ir directamente a la ajo,
pero aquí pueden ver los datos de un montón de formas diferentes.
Empecemos con la demografía, como siempre.
Siempre hay una demografía que siempre hay un montón de polémica con esto.
Pero bueno, con el país o región, así viendo un poco los datos por encima,
¿qué les parece? ¿Es sorprendente lo de siempre?
¿Hay alguna cosa a destacar, Stephanie?
Triste. Me siento muy triste por mí misma también.
Porque el año pasado, que estuvimos justamente hablando del State of Ciencias del año pasado,
fue como, no, el próximo año sí la llenamos, no sé qué.
Y este año estaba súper pendiente.
Ojo aquí, ¿eh?
Colombia, al menos.
Al menos está aquí.
No sé si el año pasado salía en el top.
No me acuerdo.
No, también estaba ya súper abajo.
Bueno, pero al menos salir en el top sale.
Hay que tener en cuenta que aquí no salen todos los países.
O sea, que igual...
¿Pero no la has completado la encuesta?
No, entonces me di cuenta.
Y lo peor es que lo puse en Twitter, en Instagram, para que la gente la llenara.
Y no sé si fue que me fui a vacaciones o qué.
Y otro año más sin llenar la encuesta.
Entonces me siento triste por mí, por mi país.
Mejor dicho, el otro año voy a hacer un en vivo.
Para que todos los colombianos nos reunamos y la llenemos.
Claro.
Mira, si no, yo te invito y la rellenamos juntos.
Para que no se nos olvide ninguno de los dos.
Así no se os pasa.
Ahí está.
Así no se nos pasa seguro.
¿Vale?
Está prometido.
Está prometido.
Por tu lado, Carmen, ¿algo que destacarías?
Bueno, que hay datos sorprendentes, pero que no me sorprenden con el contexto de la demografía
que han rellenado.
En el sentido de siempre el porcentaje de hombres versus mujeres versus etnias y tal.
Pues nos sorprende, pero tampoco nos sorprende por eso.
Porque mucha gente que conozco no la rellena.
Así que vamos a tener que hacer algo para que todos nos acordemos de rellenarla.
Que luego nos siento que no me puedo quejar.
En plan de, ah, sí.
Mucha gente no la rellena.
Se le pasa.
Se le pasa.
Sí, nos pasa.
Pero yo aquí voy a tirar de los pelos o de las orejas, quien quiera, a todos nosotros.
A Stephanie ya nos lo ha dicho que no lo ha hecho.
Carmen, ¿tú la hiciste?
Sí.
Es más, esta vez, no recuerdo si el año pasado eran todas las preguntas obligatorias,
pero este año te las podía saltar.
Te las podía saltar.
Hay preguntas que te podía saltar.
Sí.
Este año eso era nuevo.
Te podía saltar preguntas.
Y con State of JavaScript también lo han hecho.
Lo cual se agradece bastante.
Yo tengo que decir que no la terminé, la de State of CSS, pero algo hice.
Al menos.
Bueno.
Algo hice.
Pues a mí, yo, una cosa, lo que iba a decir de estirar de los pelos o de las orejas a
la gente, no puede ser, amigos y amigas, no puede ser que tengamos aquí Estados Unidos,
que bueno, Estados Unidos lo puede entender por entre el idioma, donde se mueve esto, pero
siendo la comunidad que somos, lo que no puede ser es que tengamos Alemania y Francia
por delante.
España, al menos, está aquí en su puesto 3, 4, 5, 6, 7.
España, al menos, en el 7.
Pero tenemos países como puede ser México o Colombia, que hay tanta gente que no puede
ser que no aparezcan de forma fácil, hombre.
Que tenemos, lo que voy a decir está feo, pero es que Ucrania está en guerra y ha rellenado
la encuesta.
Hombre, Noruega, que están congelados con las manos y han rellenado la encuesta.
Argentina, que está viendo el fútbol, mira, al menos, pues ahí han estado, ¿no?
Pero, hombre, México sale, fíjate, no puede ser que México tenga menos que España.
Así que desde aquí, toda la gente que sea de México, el año que viene, tenéis que
estar arriba.
Esto no puede ser.
Sí, tenemos que hacer algo, ¿eh?
Porque no hay una barrera de entrada de decir, es que me tengo que registrar.
Es que no hace falta, quiero decir, no le hace falta.
Es súper fácil.
Y además estará, estará Stephanie recordándoos que ya la podéis rellenar, aunque ya no la
rellene.
Ahí está.
Yo os avisaré a todos y a todas para que la hagamos, pero de verdad, lo tenemos que
hacer.
Porque luego, lo que decimos, ¿no?
Tanto lo que decía Carmen de mujeres.
Oye, pues si hay mujeres que se tienen que animar, porque es súper interesante el ver
esta sensibilidad que puedan tener, las características que tengan.
Esta información es súper interesante y que si no, luego no se reflejan nuestros países
y nuestras opiniones.
Así que...
Cuanta más gente responda, esto es estadística.
Más respuestas diversas habrá.
Exacto.
Ahí está.
A tope.
Lenguaje, pues nada, lo que nos esperamos, ¿no?
El inglés a tope, 65%.
El español al menos sale el cuarto.
Pero bueno, es que el alemán, ¿cómo va a ser esto?
Que somos la también España y van los alemanes y salen segundos y los franceses
terceros.
No puede ser, ¿eh?
Esto me niego.
Me niego.
La próxima vez tenemos que darle cañita a esto.
¿Y qué más?
Ah, bueno, la gente que ha completado.
Esto es lo que comentabas, Carmen, ¿no?
Que ahora está bien esto, porque podemos ver que 66% de la gente ha dejado entre un
80 y un 90.
¿Tú dónde lo dejaste, más o menos?
Yo creo que respondí todo, incluso dejé algún comentario.
Es que me suena que podías comentar cosas.
Sí, sí, puedes comentar.
Sí, sí.
Luego lo veremos, porque creo que hay un botón para ver los comentarios.
A ver si hemos comentado tuyo por ahí.
Yo creo que lo dejé.
Tengo que reconocer que lo dejé a lo mejor un 40 o 50.
Lo dejé por la mitad.
Mal por mí.
Mal por mí.
Vale.
¿Edades?
¿Cuántos años tienes?
Bueno, yo voy a decir...
No me voy a aventurar a la de las invitadas, ¿vale?
Pero yo estoy en esta franja.
Yo estoy en la franja del 20%.
Las invitadas estarán seguro por debajo.
No, estoy ahí yo también, ¿eh?
Ay, Dios.
Es la crema.
Es la crema, es la crema, que es muy buena la crema.
La verdad que sí.
Bueno, y Stephanie también está abajo.
Stephanie sí que está abajo.
Están en el 31%.
Ah, vale.
Por sí.
Muy bien.
Pero, bueno, sorprendente el 0,3% de los 65 años pensando todavía ahí en CSS, ¿eh?
Me encanta.
Me encanta también.
Bueno, un montón.
Aquí sí que creo que ha cambiado bastante respecto al año pasado porque sí que voy viendo,
claro, conforme va pasando el tiempo, como que la gráfica hacia la derecha como que va aumentando.
Y me ha sorprendido porque normalmente, sobre todo en el de JavaScript, sí que se ve que la gente que tiene poca experiencia está al principio.
¿Sabes?
O sea, como que hay mucha, o sea, no hay tanta gente en el medio.
Pero CSS, en cambio, si quitamos el de 20 años, pero en CSS sí que parece bastante incremental.
Y está bastante interesante.
¿En qué franja estaríais vosotras?
La del 18.
La del 18%.
De 5 a 10 años.
¿Y tú, Stephanie?
También.
Más 1, sí.
Muy bien, muy bien.
Muy bien.
Hay gente que dice, no, no, no voy a responder.
El 28% que no quiere.
Tamaño de la compañía, compañía grande, grado de educación, bueno.
Sueldo anual, venga, me gusta el dinero.
Lo malo, mira, por país.
Esto está interesante, ¿eh?
Por país.
Vamos a ver España.
Vamos a buscar España.
España.
El 21% está entre los 10.000 y 30.000 dólares al año.
Hostia.
Claro, esta franja es muy rara, ¿no?
De 10.000 a 30.000 es muy poco en España.
Muy poco.
Me sorprende.
Me imagino que de esta gente, o sea, del 21% esta, mucha gente estará más cerca de los 30.000 que de los 10.000.
Porque 10.000 es ilegal, directamente.
O sea, no puede ser.
Y del 40% está de 30.000 a 50.000 y un 27% de 50.000 a 100.000.
Joder, yo quiero estar aquí.
Joder, y hay gente de...
¡Oh!
¿Quién es esta gente?
Yo no conozco a esta gente, Carmen.
Yo tampoco.
Esa gente, seguro que la ha rellenado entera.
Porque...
Sí, sí.
Solo para chulear, ¿no?
Han dicho, solo para chulear.
Y Colombia no sale.
Colombia ni siquiera sale.
Ay, cae.
Ah, mira, y en Estados Unidos, en Estados Unidos son de los pocos que tienen gente de más de 200.000, ¿eh?
Con CSS.
Joder.
Yo también quiero, ¿eh?
Yo también quiero.
¿Cómo se enteraron de la encuesta?
Mira, aquí tienen que salir, dentro de poco, tendría que salir Stephanie Aylard, por ejemplo.
Mira, una Kravitz.
Súper bien, ¿eh?
Una.
Que es de Google.
Muy bien.
Y género, 6,5%.
Creo que ha mejorado.
Creo que ha mejorado respecto a...
Estaría bien que saliese lo del año pasado también, ¿no?
Sí.
Bueno, todavía aquí queda la vida, ¿no?
No recuerdo, la verdad, el año pasado cuánto fue.
Recuerdo que era bajito.
Espero a ver que se haya mejorado, pero...
Pero, no sé, todavía queda aquí también.
Mira, menos mal, hispano, latino, 5%.
Menos mal, ya me hubiera asustado y todo si los hispanos y los latinos no salen los segundos.
Pero sí, blanco, descendiente de europeos, 48.
Ahí está.
Bueno, discapacidades.
Que es interesante porque muchas veces uno...
Antes comentaba el tema de accesibilidad, Carmen.
Y, joder, cuando ves estas encuestas y dices, ostras, que hay más gente que tiene una discapacidad de lo que pensamos, ¿eh?
Que es muy...
Lo curioso es que ponga a otros, ¿no?
Pero, ostras, dificultades visuales un 5% de la gente.
Es tremendo, ¿eh?
Es un montón.
Madre mía.
Bueno, vamos con las características, que esto aquí sí que va a estar bastante interesante.
Aquí ya hay un montón de cosas que yo cuando vi esto dije, ¿esto qué es?
¿Font palette?
¿Qué es esto de font palette?
¿Esto de font palette?
Yo no tengo ni idea lo que es.
Luego es...
Tú ya sabes.
No, no lo sé.
Ah, vale, vale.
Digo, ostras, Carmen, si...
O sea, no lo sé.
Y he sido buena persona en plan de, no voy a mirarlo para qué explicar si font palette, no sé qué.
No, porque no sé lo que es.
Primera, yo lo he visto aquí, lo primero arriba, y digo, ostras, ¿esto qué es?
Luego este pseudoelemento también, marker.
Yo creo que no he usado nunca.
No sé, un montón de cosas.
Sí, este es para los dotsitos de las listas.
Ah, de las listas.
Ah, mira, mira.
Vale, vale, interesante.
Vale, vamos a ver cómo son los elementos del diseño.
Subgrid.
Subgrid, yo tengo que decir que lo conozco, pero no lo he usado nunca, y no sé si lo usaré nunca,
porque jamás he entendido exactamente cuál es la utilidad.
¿Alguien sabría explicármelo?
A ver, es útil.
O sea, subgrid lo que te permite a un elemento que ya tenga grid es utilizar esa cuadrícula, ¿vale?
Puedes utilizar la cuadrícula del elemento padre en vez de tener que definir la tuya propia.
Interesante.
¿Sí?
Sí, entiendo que sería algo interesante para utilizar como unos resultados de búsqueda
y dentro de la card que sea una subgrid.
Hostia, es complicado imaginárselo, ¿no?
Porque, claro, como queda tan atado al contenedor, ¿no?
Es como...
Hostia.
Claro, si tú defines una grid a un contenedor que tenga, ya que sé, tres columnas y tres filas,
pues elijo de forma...
Es una forma de anidar también cuadrículas dentro del diseño.
Ahora no te sé decir ningún ejemplo así visual, ¿eh?
Pero estás diciendo lo de las cards y me cuadraría dentro de un layout más grande,
luego secciones y cards dentro que también cojan la misma estructura.
Claro.
Y en tu caso, Estefania, ¿y la has usado alguna vez?
Sí, lo usé, pero literal el año pasado para un workshop.
Ah, para el workshop, vale, vale.
Sí.
Pero no está mal, no está mal.
En la vida real, así como que me toque una cuadrícula de tanto por tanto
y que sea igual al padre, pues, que hereden filas y columnas...
No.
No, no, pero joder, al menos las has usado, ¿eh?
Algo es algo, algo es algo.
Muy bien.
Writing modes, writing modes.
Modos de escritura, bueno, esto sí, pero entiendo que esto es de izquierda a derecha,
de izquierda a izquierda y todo esto, ¿no?
Y de arriba a abajo, si es japonés o hebreo, sí.
La verdad es que esto muchas veces tiene sentido, sobre todo en empresas que son multinacionales,
que tienen un montón de idiomas y cosas así.
Ah, por cierto, aquí está el tema de los comentarios que no hemos visto.
Mira, el subgrid, aquí, si le damos a 121.
Mira la gente, I love subgrid.
No te inventes cosas que seguro que no has utilizado, ¿eh?
Esperando por el waiting process support.
No globally supported yet.
Claro, claro, o sea, y la gente...
Me encantaría, aquí le decía alguien, me encantaría saber usarlo.
Ah, que todavía no tiene muy buen soporte, claro.
Ah, mira, hay gente en español y todo, ¿eh?
Muy bien.
¿Quién ha sido esa persona?
No lo he usado por falta de soporte en todos los navegadores.
Ah, no, tampoco.
Hubiera pensado que era Stephanie, pero me ha dicho antes que no había contestado, así que...
SS Logical Properties.
SS Logical Properties.
Yo creo que no he escuchado.
¿Sabéis lo que es?
Es que hay cosas que digo, creo que es esto, pero no estoy segura.
Claro, yo es que por el nombre no caigo, pero creo que sé lo que es, creo que sé lo que es.
Creo que es lo de utilizar el blog o el inline, ¿sabes?
Ah, con el padding, en plan padding inline empieza aquí.
Sí, o margin o padding, sí, es verdad.
Mira que lo quiero utilizar porque digo, ostras, que tiene todo el sentido del mundo, pero luego se me olvida.
Se me olvida.
Esto, básicamente, para el que no sepa lo que es, esto es que en lugar de utilizar margin left y margin right, o margin top, margin bottom, lo que utilizas es margin block y margin inline, creo que es.
Ah, no me acuerdo.
Sí, creo que es margin block y margin inline.
Y claro, es como para referirte, claro, como lo que decía Carmen antes, en japonés, pues es de arriba a abajo, de derecha a izquierda.
Claro, llamar margin right a Japón no tiene mucho sentido porque a lo mejor le daría la vuelta.
Es un poco raro.
Vale, pues eso, ese sería.
Bueno, aspect ratio, sí, ¿no?
Este, a tope.
Este, joder, yo lo uso un montón.
Aquí, además, se ve como la gente ya empieza a utilizarlo un montón, 55%, o sea, que cada vez se ve como más gente lo utiliza.
Content visibility, interesante.
¿Este lo utilizáis? ¿Lo habéis usado?
No.
¿No? Yo lo lo he usado una vez.
Solo usado una vez para mejorar el rendimiento de una página, pero nunca he terminado de entenderlo del todo.
Es como el content visibility como para evitar que se renderice contenido de la página.
Creo que podéis indicarle, en plan, que sea un contenido que esté contenido y que si se desborda o sale, que no se muestre.
Exacto.
Algo así.
Sí.
Y lo más complicado, dices, claro, visible es el por defecto, ¿no?
El hidden es eso, el elemento esquipea el contenido.
Claro, lo que puedes hacer es, tú pones content visibility, le pones hidden a, por ejemplo, imagínate que algo que está fuera del viewport,
le pones el content visibility, le pones todo a hidden, y eso se supone que no lo renderiza y como que va más rápida la página,
porque no termina de renderizar eso.
Lo difícil es que si no lo renderiza, el scroll, claro, el scroll es como que no tiene ese alto.
Y entonces lo tienes que poner tú manualmente, le tienes que intentar poner como, ¿ves esto?
El content intrinsic size.
Le tienes que decir tú cuál es el tamaño que debería tener ese contenido en el caso de que se renderizase.
¡Oh!
Es una locura, es una locura.
Pero claro, tiene sentido, por ejemplo, a ver, si se me ocurre alguna página.
Claro, es que eso se me ocurre en Fotocasa, pero es que ya no trabajo aquí, ya tengo que dejar de hacerle publicidad.
Claro, imaginad que estamos en esta página, que es una página de búsqueda,
y abajo de esto se están renderizando un montón de estos resultados.
En lugar de hacer esto, podrías decir, bueno, pues no renderices, pero me dejan los espacios que, joder, madre mía, modales, basta.
Y para eso es, para eso es, básicamente.
Pero bueno, solo usé una vez porque vi un artículo de Google, no os creáis yo, que aquí yo sé mucho.
Y por lo que veo además, ¿cómo es esto?
O sea, la gente cada vez sabe menos de esto.
O sea, es como que lo quiero olvidar.
Es como que lo quiero olvidar.
2020 un 40%, 2021 un 42% y 2022 un 50% cada vez.
Yo os digo que esto es porque en 2020 hizo un artículo Google, porque me suena, que lo petaría.
Y a partir de ahí se ha olvidado la gente. Estoy bastante seguro de esto.
Flexbox Gap, hombre, este, ¿qué tal?
Súper útil.
Sí, desde que salió fue como, jeje, por fin, ya no voy a utilizar ni margins, ni padding, ya, como que el gap y fin.
¿Por qué hay mucha gente que cree que el gap solo se puede utilizar con grid? No entiendo esto.
Pero pasa, ¿eh? No sé si a lo mejor porque te imaginas una retícula que tiene el gutter, ese, que sé, como la tubería del medio y no lo sé.
Pero vamos, que es súper útil.
Sí, igual, igual, inicial, dale, dale miedo.
No, no, perdona, Stephanie, dale, dale.
No, no, que igual, como salió inicialmente en ciertos gris, salió como grid gap y luego le quitaron el gris como la palabrita clave.
Me imagino que las personas habrán cogido como ese concepto por siempre y ahorita pues el término del gap sigue latente para gris, pero bueno.
Sí, yo creo que es eso, es verdad, porque al principio salió como grid gap y entonces luego lo deprecaron y yo creo que sí que puede ser por eso.
Pero hay mucha gente, el otro día hice un vídeo, un short, donde decía, si queréis separar elementos, botones, por ejemplo, un header, no utilicéis margin, que luego la gente se me volvió loca.
O sea, pues yo voy a usar margin si me da la gana, yo bueno, todo lo que quiera.
Bueno, a mí no me cuente el editor.
Convénceme.
Sí, sí, o sea, bueno, nada, no voy a ir a tu casa a pegarte ni nada.
Container. Este, por ejemplo, yo no lo he usado.
Yo lo utilicé porque justamente Juna Kravitz hizo un artículo de Google y eran con unas cards y con imágenes y con el contenido que había en esas cards.
Entonces estuve trasteando un code pen, pero muchas de estas cosas en producción real yo no las he usado.
Pero el de container es la media query a nivel, sí, el container queries.
Hostia, este está muy chulo, ¿eh?
Yo no lo he usado porque me imagino que no debe tener mucho soporte todavía.
Pero esto para la gente que nos ve y que a lo mejor no sabe lo que es, ¿qué pasa?
Que las media queries a día de hoy son solo a nivel de pantalla.
Claro, las container queries tienen todo el sentido del mundo porque son como a nivel de un contenedor.
O sea, que en lugar de mirar cuánto ocupa la pantalla, miras cuánto ocupa ese contenedor.
Será como una media query a nivel del contenedor.
Tremendo, me encanta.
La verdad es que esto tiene un montón de sentido para design systems, ¿no?
Sí, un montón.
Eso es el mejor uso.
Object Viewbox, ¿qué es esto?
Yo pensé en SOBG cuando vi el Viewbox, pero no sé lo que es.
No tengo ni idea.
O sea, fíjate que no tiene ni enlace a MDN.
O sea que...
No habrá un huevo de Pascua, de alguna propiedad no existe.
Para ver si la gente vota.
Hostia, sería buenísimo.
Viewport percentage length units.
Esto tampoco sé qué es.
Es que por el nombre a veces no, porque me suena como cuando es medida que le dices el 50 del viewport, del ancho o del alto, pero no sé si se llama así.
Claro, tienes razón, porque yo con este nombre digo, será el viewport, el poner 100 de viewport, el de viewport width, será este.
Pero claro, como pone este nombre, estaría bien que pusiesen ejemplos, ¿no?
Sería buenísimo.
A ver qué pone por aquí.
Bramus HTTP 203.
Vale, muy bien.
Esperando también un soporte.
¿Cómo?
Pero esta persona...
¿What?
Madre mía.
Si está soportado por Internet Explorer 7.
Internet Explorer 7 no está soportada ni la respiración.
O sea...
O sea, madre mía.
Media queries range context.
Esto sí que sé lo que es.
No lo he usado nunca.
No sabía que CSS iba a llegar esto.
¿Sabéis de qué trata este?
Este está muy chulo.
Este, si no me equivoco, es el de poner mayor esto, esto.
Uf, esto.
Oh, Dios mío.
Qué palamerlo esto, ¿eh?
Esto es poder utilizar a media queries y utilizarlo con una forma mucho más legible que no esta.
Porque que levante la mano en el chat quien se equivoca siempre haciendo esto.
Yo no estoy en el chat, pero...
A mí siempre me vuela la cabeza porque pienso, a ver, el min era...
Ah, no, no, otra vez, no.
Nunca me acuerdo, nunca me acuerdo.
Imagínate si tienes asolexia.
Porque yo giro las cosas.
Entonces, nunca me acuerdo cuál es el min...
O sea, es hacerlo y hacer debugging de a ver si funciona o no.
Sí, es que esa es la pregunta siempre.
¿Es min?
Y entonces lo tienes que probar, no sé qué.
Pero bueno, aquí...
Joder, es que este se entiende muchísimo mejor.
Espero que...
Además, poderlo poner en un mismo paréntesis, mucho más legible que cuando tenías que hacer esto, que esto es horrible.
Pues no tienes mal soporte, con la tontería, estoy flipando.
Esto es lo que os decía.
Es que hay un montón de cosas que no me he dado cuenta, ni siquiera que han llegado.
Esto ni siquiera sabía que estaba llegando, que ya estaba soportado y que tiene un 72% de...
O sea, ¿esto qué es?
Carmen, necesitamos más contenido en Twitter de estas cosas.
Síganme.
Síganme.
Se viene.
Se vienen cositas, se vienen cositas.
Me encanta, me encanta.
Bueno, formas y gráficos.
Blend Mode.
Bueno, esto sí que he utilizado.
Esto está muy chulo, la verdad.
El Blend Mode.
¿Habéis utilizado el Blend Mode o la habéis visto alguna utilidad así interesante?
En la vida real, no.
Pero es como literal hacer un mix entre colores, ¿no?
Como que uno puede decirle como el color de abajo más el de arriba, o que se quede el de abajo, o que se quede el de arriba.
Como una mezcla ahí.
Muy interesante.
Está súper, súper chulo.
Mira, es que entre eso, los filtros y los efectos.
El Backdrop Filter, que este yo lo he utilizado sobre todo solo por el Blur.
Pero bueno.
Sí.
Esas tres cosas, es que acerca Photoshop a nivel de CSS.
Es increíble.
Me encanta.
Y encima como esas tendencias de diseño tipo Glass Morphys, que como que salen y uno dice, pero Dios mío, salen tendencias de diseño.
No las puedo hacer con CSS, pero con este tipo de propiedades y valores, literalmente uno dice, yes, puedo hacer esas tendencias de diseño en la web.
Totalmente, totalmente.
Luego tenemos un montón de Intrinsic Size, el Conic Gradient, que este es espectacular.
Me encanta lo bonito que queda.
Nunca soy capaz de hacerlo sin mirar la documentación, o sea...
Yo hay cosas que hago yendo a otros ejemplos que tengo en CodePay, ¿sabes?
Sí, verdad.
Y me canto de ahí porque...
Porque es que es imposible.
Y recordarte de desde dónde los grados, los colores, hacia dónde.
Hay muchas cosas que es imposible que te acuerdes.
Aquí tenemos el tema de los colores que comentaba antes Carmen.
¿Qué es esto de color? Así como una función.
Sí.
Es que hay un montón de funciones nuevas.
A ver, vamos a estrenarlo.
¿Qué es esto de color?
¿Qué es esto? ¿Qué es esto? ¿Esto qué es?
Ese es el... ¿Cómo se llama? El White... Ah, no me acuerdo. El Gamut.
White Gamut Color.
Sí.
Estos son los... No habéis entrado nunca a Photoshop y os ha dicho, no tenéis el modo de color tal.
Este archivo estaba en tal otro modo de color.
Pues ahora lo vamos a poder poner.
¡Ah!
Esa es una locura.
¡Ostras!
O sea, te da un abanico de un montón de colores que antes no podías reflejar.
Claro, no... ¡Ostras! ¡Qué bueno!
Color Gamut.
El color profile. Este sería el perfil de color, ¿no?
Y lo que no entiendo muy bien son estos valores, la verdad.
O sea, uno, cero y medio, cero.
Bueno, esto debe ser la opacidad. Esto seguramente es la opacidad, el alfa.
Pero esto pone indent, dashent indent...
Bueno, o sea, no soporta a nadie esto todavía.
Es experimental, vale. Buenísimo.
El accent color, este sí. Este me encanta.
Este me chifla.
¿La habéis usado ya en alguna página?
En algún sitio que habéis dicho...
Como el... Es el aprendizoso de Carmen el año pasado.
Que en un radio, ¿no? Lo has usado o algo así.
Este está muy chulo, la verdad.
Y es que es tan fácil.
Y además, este es el típico que me encanta.
A ver.
¿Te encanta esto?
Check.
Pues me encanta porque, uno, es súper fácil de utilizar.
Dos, es como retrocompatible.
Porque al final, total, si no se puede utilizar, pues bueno, no pasa nada.
No pasa nada.
Y ya le dais aquí.
Y ahí lo tenéis.
De color lila.
Solo con este botón accent color.
Está bastante chulo porque además también lo puedes utilizar como para indicar si algo está mal.
O lo que sea.
Y para temas de colores de marca.
Funciona con el checkbox con todos los inputs.
Básicamente.
Excepto el de text, que creo que no tiene ningún tipo de relevancia.
Pero también funcionaría con el radio y todos estos.
Pero muy, muy, muy bien.
Me encanta.
Curren color.
Pero Curren color.
Esto es más viejo que el andar para adelante.
Sí.
Pero mucha gente no lo utiliza.
O no sabe que...
Sí.
A ver.
¿Le puedes comentar a la gente que no sepa qué es el current color?
¿Le puedes comentar, Carmen?
Bueno, yo lo utilizo sobre todo para iconos.
Imaginaos, tenéis un texto que ya tiene definido un color.
Pues el icono que le acompaña o que está anidado dentro o compartiendo espacio con ese elemento.
Coge ese color.
Muy buen ejemplo.
Coge el color del elemento.
Entonces, sobre todo para iconos lo utilizo muchísimo.
Sí.
El caso más típico es que, de hecho, es la única...
Mira, vamos a decir una cosa bestia.
Es la única forma de hacerlo bien.
Si lo estáis haciendo de otra forma, lo estáis haciendo mal.
Bueno, esta es mi opinión.
Igual Carmen ahora me dice esta.
Bueno, a ver, no te pases.
Sí, sí.
Sobre todo me refiero con los botones, ¿no?
Que es lo que decía...
Bueno, con los botones.
Es que esto es tan típico el hecho de que tienes aquí esto...
Bueno, lo voy a hacer hasta bien, ¿eh?
Para que la gente vea.
Pero lo que comentaba Carmen, ¿no?
Tú tienes un texto...
Hostia, no me lo estaba haciendo, pero bueno, pasa nada.
Más o menos.
Para que la gente...
Bueno, tienes aquí como un texto y tal.
Y si ponéis que el botón, pues yo que sé, sea...
Vamos a ponerlo black.
Y le ponemos que esto sea white.
Claro.
Pues esto que te pille el mismo color que tendrías.
¿Veis aquí el stroke?
Que lo tienen en current color.
Si se lo quitamos, lo podríamos quitar.
Para que no se vea.
¿Veis?
Se ha quedado el SVG por defecto en negro.
Pero si le decís que el SVG lo podéis hacer o en línea o lo podéis hacer con los estilos.
Le decís, el stroke tiene que pillar el current color.
Y así recupera el color del texto.
No hay otra forma...
Bueno, sí que hay otra forma.
No sé.
Pero yo...
Pero serían hacks o un poco guarradas, ¿sabes?
Exacto.
Para mí...
A no ser que quieras que por lo que sea, quieres que el color sea diferente.
Que no sé si es muy buena idea normalmente.
A no ser que sea eso, si quieres que siempre tenga el mismo color del texto,
lo que tendrías que hacer es poner el color a nivel del botón
y el SVG que sea current color.
Y esto sería como una de las primeras custom properties que existieron.
Una variable, en realidad.
Así que...
Pero bueno...
Que a lo mejor ahora tiene menos sentido a nivel global utilizar teniendo ya las variables CSS.
Pero igualmente, para este caso concreto del icono, perfecto.
Perfecto.
Sí, sí, totalmente.
O sea, siempre que penséis en un botón, ¿sabes?
Que tenéis el SVG al lado y el texto al final, al lado, es que yo creo que es perfecto para esto.
Y dice, ¿solo sirve para SVG o para todos los iconos?
A ver, claro.
Para una imagen...
Claro, un icono que no sea SVG.
O sea, puede ser una fuente y...
Exacto.
Pero sí que sirve, por ejemplo, lo podéis hacer incluso...
O sea, lo podéis utilizar para un montón de cosas.
Por ejemplo, para el borde.
Aquí no tiene sentido porque...
Bueno, podría tener sentido.
Imaginad que tenéis...
Vamos a poner border.
Podéis poner el current color.
Creo que debería salir un pixel solid current color.
Imaginad que el body tiene un fondo...
Vamos a poner...
También se puede hacer para esto.
Bueno, aquí yo también he puesto un fondo que casi no sé.
Claro, pero veis, aquí tenéis el borde utilizando el current.
O sea, no solo es para los SVG.
También tiene otros casos de uso que son interesantes.
Por ejemplo, para el marker, que decía antes Stephanie,
lo podéis utilizar para que el marker tenga el mismo color que el texto,
por ejemplo.
Podría ser una buena idea.
Que no sé si se puede, ¿eh?
Pero, o sea, a mí en mi cabeza suena espectacular.
No sé si se puede.
Espectacular.
Vale, color mix.
No tengo ni idea.
Literal, es como hacer un mix.
O sea, como colocar dos colorcitos y antes hacer la combinación y tal.
Ah, oye.
Color mix azul-rojo 50% y ya.
Ah, qué chulo esto, ¿no?
Oye, pues me gusta un montón la idea.
Eso hace un degradado, pero que no necesites un background, ¿sabes?
Que pueda ser un color.
Quiero decir, ¿sabes?
Sin tener que hacer...
Ah, qué chulo.
Oye, pues me gusta.
Esto también acerca un poco a Photoshop.
White gamut colors.
Ni idea.
Esto debe ser lo que has explicado antes, ¿no, Carmen?
Sí.
Relative colors.
Ni idea.
¿Esto qué es?
El color que está más cerca...
En mi primo.
El color primo del amarillo es...
¿Qué es esto de colores relativos?
Primera vez que lo escucho.
Y gradient color spaces.
Yo estoy muy, muy pez con esto.
O sea, lo reconozco.
Lo reconozco.
Interacciones.
Bueno, scroll snap.
Ya este sí que lleva bastante tiempo.
¿Lo habéis utilizado últimamente?
¿Lo habéis utilizado para algo más que no sea un slider?
Porque eso sí que sería interesante, ¿eh?
Que alguien me diga, hostia, ¿lo he usado para algo que es diferente a un slider?
¿Cuenta una presentación en plan utilizarlo como slide?
No, no.
Sería un slider igual.
Bueno.
A ver, al menos.
Sí que lo he visto.
Que hay gente que lo ha utilizado como un slider de página entera.
Como, por ejemplo, Apple.
Apple, alguna vez he visto alguna página suya que utiliza claramente el scroll snap.
Y me parece súper bonito como lo hace.
Pero, hostia, más allá de esa idea del slider, no se me ha ocurrido nada, la verdad.
Overscroll behavior.
Esta, ¿qué tal?
¿La habéis usado?
Sí, pues, o sea, como para, si uno tiene de pronto un hijo con un scroll y que uno no quiere que patine ahí o que siga derecho, bueno, ahí, como para controlar el scroll entre padres e hijos, sí.
Sí, esto está muy interesante porque, sobre todo, creo que pasa con los trackpad, ¿no?
Que tú estás con los trackpad ahí a saco, ¿no?
Y entonces, de repente, sigue scrolleando.
O sea, tú tienes una caja que termina el scroll y lo que hace es seguir el scroll con el contenedor de la caja.
Y es muy molesto.
Sí.
Está interesante el overscroll.
Ta-ta-ta.
Touch action.
Bueno.
Scroll behavior.
Bueno, este sí.
Este se ha puesto una de moda.
Este, no sé si lo usáis.
¿Lo habéis usado?
¿Lo utilizáis?
¿Es donde habéis trabajado?
Sí, sí.
Es que está, de hecho, yo creo que lo utilizo en el Avengers y todos también.
Pero aquí tengo una recomendación para la gente que lo utilice.
Ah, pues no, no lo utilizo.
Muy mal, muy mal por mí, ¿eh?
Muy mal por mí.
¿Qué está pasando?
Estoy perdiendo por ti.
Ah, no, sí, sí.
Sí está, sí está.
Habéis visto que lo ha hecho.
Lo ha hecho, lo ha hecho.
Lo ha hecho.
All right.
Bueno, mi recomendación es que este efecto lo desactivéis con una media query para la gente que no quiere transiciones.
Porque cuando se hace un scroll muy bestia,
voy a decir una salvajada.
Pero, no, voy a decir una salvajada de que te puede dar un ataque de epilepsia.
Pero es que te puedes reír.
Pero como el scroll sea muy bestia, de que empieza a pasar por fondos de diferentes colores.
Y he visto porfolios que la gente le encanta poner colores llamativos y tal.
Pues ríete.
Pero te puede pasar, te puede pasar.
Scrollbar, Guter.
¿Qué opináis?
A ver, vamos a ver aquí.
Vamos a meternos el ajo.
A ver.
Estamos pasando ya, creo.
¿Qué opináis de estilar el scrollbar?
A veces lo siento bueno cuando es, por ejemplo, Mac.
Porque en Mac no se ve el scroll.
Y me ha pasado a veces en features que es como, hago scroll, no hago scroll, ¿qué pasa?
Hay más información abajo.
Entonces, a veces, digamos que en ese tipo de casos sí me parecería muy importante como al menos indicar que existe una barrita de scroll y que hay más contenido.
Pero de resto, no sé.
A ver, Carmen.
Carmen, se está como que lo quiere decir, pero no sé.
No, porque es como lo de un gran poder que conlleva una gran responsabilidad.
Totalmente.
Cuantas más opciones des, más página de Homer Simpson puede quedar.
¿Sabéis la página de Homer Simpson?
Que todo baila y gira.
Entonces, es un poco peligroso.
Pero sí que hay casuísticas que pueden ayudar o que puedas hacer que aparezca la scrollbar o que se separe un poco más del contenido.
Porque a lo mejor, no sé, quieres que haya una imagen que esté a full y quieras separar un poco la scrollbar.
Seguro que tiene sentido.
Pero cuantas más opciones des, si no hay unas guías que seguir a nivel de diseño, pues aquello puede quedar común.
Totalmente.
De hecho, alguien lo decía en el chat, que era interesante, por ejemplo, estilar scrolls internos a nivel de una caja, pero no la página entera.
Sí, la verdad es que la página entera es polémico.
Es polémico.
Lo que pasa es que a la gente muchas veces le gusta como, no, quiero que se vea igual.
Esto, sobre todo a veces, diseñadores, ¿no?
Esto tiene que ser perfecto.
Tiene que ver igual en todos los sitios.
Y, ostras, es polémico, ¿eh?
Porque lo nativo, el usuario, lo percibe mejor que normalmente lo que uno puede intentar hacer.
Si no tienes un tema muy específico de por qué lo haces, mejor no hacerlo.
Eso es lo que diría yo.
Total, sí.
Scrolls internos es el caso más común.
Dice, por scrollbar, Guten no soporta Safari.
Bueno, Safari, bueno, este año, otra cosa polémica.
Ojo que yo decía que Safari era el nuevo intento de Explorer.
Sí, sí.
Totalmente, ¿no?
¿Cómo habéis visto este año Safari?
Yo no sé cómo lo han hecho.
No sé.
Sí, ¿no?
Por ahí vi un tuit.
Sí, sí, sí.
Por ahí vi un tuit de Jen Simmons diciendo justamente eso.
Como, bueno, la gente habla mucho de que Safari es el nuevo internet a Explorer.
A ver, díganme cuáles son las cosas que hay que mejorar.
Y entre los comentarios era como, no, pues.
No sabemos.
O sea, sabemos que es el nuevo internet.
Internet Explorer, pues no sabemos que hay que mejorar.
Sí, sí, no.
No, totalmente.
De hecho, yo también lo vi y es súper interesante porque es que no para.
O sea, es que Safari le está dando mucha caña al tema de, al menos al tema de CSS.
De que cada 2x3 están poniendo aquí, ya estamos soportando esto.
Hay cosas que incluso las han soportado antes.
Antes.
Y el otro día vi justamente esta cosita que habían llegado a los diferentes navegadores como para las funcionalidades que tenían que incorporar en cada año.
Safari.
Y fijaos que el que tiene mejor puntuación en las áreas que se tengan que enfocar en este 2022 es Safari.
Sí.
Safari está muy por delante de cualquiera.
O sea, es que a Chrome le saca un 10%.
Por ejemplo, la de Subgrid lo tiene ya al 98%.
Mira que el scrolling también.
No sé, que nos reíamos muchas veces con el tema de Safari y Safari en el nuevo Internet Explorer.
Ojo, cuidado, ¿eh?
Ojo, cuidado.
No, no, muy bien, muy bien.
Me alegro un montón.
Menos mal, así no tengo que sufrir tanto.
Vale.
Phone Display.
Otro que tal.
Bueno, veo que la gente no ha cambiado mucho su conocimiento.
Phone Display, ¿lo utilizáis o tampoco...?
Sí, sobre todo por tema de performance.
De cómo carga la fuente o cómo se muestra esa fuente mientras está cargando.
¿Cuál es tu favorita, Carmen?
Porque, mira, de Phone Display tenemos diferentes, ¿no?
Para la gente que no sepa, tienes diferentes estrategias.
La auto sería esa la que...
Bueno, la auto creo que la define el navegador.
Pero tendrías la de bloquear, que era la que era por defecto, que se bloqueaba directamente...
Creo que...
La fuente.
O sea, no se veía la fuente ni siquiera.
Se quedaba en blanco hasta que estuviese la fuente, ¿no?
Luego estaba el swap, el fallback y el optional.
Y tú dices que la tuya de la favorita es swap.
Sí.
Que le da un corto bloque.
O sea, lo bloquea un poquito y...
Lo justo para...
Sí, lo justo.
Para que en principio no te des cuenta de...
Claro.
¿Sabes?
Porque lo peor es cuando o no estás a info o la carga de golpe.
O que bloquee la carga del navegador.
O sea, que con todo el tema de Core Web Vitals, pues hay más penalización aún.
Y sobre todo porque está penalizando la experiencia de la persona que esté utilizando esa página.
Entonces...
¿Y en tu caso, Stephanie?
Nunca la he usado.
No sé qué es literalmente para lo que acabamos de mencionar.
Pero así como que tiene algo favorito.
Para que cargue lento.
Para que...
No.
Así como en vida real, no.
Y más que siempre entras como proyectos que ya están y ya ese tema está.
Entonces es como...
Tiene que tocarlo, ¿no?
Sí, ya está.
Sí.
Yo voy a decir una cosa muy polémica sobre esto.
Yo la verdad es que las fuentes las odio.
Las odio bastante.
Así.
Es polémico.
A ver.
Odio sobre todo las fuentes que son un poco...
Esas que no marcan la diferencia.
Porque obviamente si hay una fuente en concreto que es súper importante para tu marca, pues
tiene sentido.
Pero por ejemplo, a mí lo que es la fuente de texto, la que tiene como casi todo el contenido,
yo la odio muy fuerte porque esperaría...
Yo estoy más por el optional, como mucho fallback.
Que básicamente el fallback es que le da muy poco tiempo a que esté cargado.
¿Por qué?
Porque mira, si la primera vez que se carga, pues mira, si tienes que enseñar el fallback
o si tienes que enseñar la normal, pues la enseñas y ya está.
Que si vuelve otra vez, oye, pues si vuelve otra vez ya le enseñaré otra que esté más
bonita y ya está.
Esto con las fuentes ya os digo que sean como del cuerpo de texto.
Si es un título, que el título sí que es necesario, sí que le pondría otra estrategia.
Pero sobre todo lo digo porque mucha gente me ha encontrado como que es, no, solo font display swap.
Y esto nos pasaba a nosotros en Fotocasa.
Y yo decía, joder, pues si esta fuente no es muy importante.
Y era la Open Sans, que se parece un montón a la del sistema, ¿sabes?
Claro, depende también de, claro, si es muy parecida o es una, o sea, un serif.
O sea, quiero decir, no, pero pensando en marca o tal, sí que interesa que se vea.
Claro, en marca entiendo que pongan la swap y que sea una fuente en concreto.
Pero claro, cuando es cuerpo del texto, que normalmente es la típica que se lea bien,
que no tiene muchas florituras.
O sea, que yo lo que le diría a la gente es que se las estudie.
Porque no siempre tiene por qué ser la swap y la verdad es que sí que se diferencia un montón.
Line, clamp, ¿esto es para los puntos suspensivos o me lo estoy imaginando?
Pues algo así, es como para bajarlas el texto.
Pero pues como que si quieres un texto que tenga tres líneas, le dices como quiero que tenga tres y ya.
Tipo un giro que hay como un texto pequeñito al lado izquierdo.
Bueno, tal vez para eso.
Interesante.
Fuentes variables.
Buah, ¿qué tal esto?
Porque esto es un temazo.
Yo no lo he usado, pero...
Es la pasada.
Sí, ¿verdad?
Sí, pero eso es brutal.
A todos los niveles.
Quiero decir, me sorprende que la gente conozca menos que el año pasado.
Sí, ¿verdad?
A mí eso también me extraña.
Es un...
Para que os imaginéis, es como lo más disruptivo a nivel de fuente digital que ha salido siempre.
Sí, sí.
O sea, es que es increíble.
Sí, sí, sí.
Es como con una fuente, o sea, con una fuente tienes todas.
Y tienes todos los grosores, pero también incluso la altura, la anchura.
Todo.
Si la tipografía está bien diseñada, que quiere decir que normalmente las que pagas están muy bien diseñadas porque tienen todos los glifos, todos los carácteres, incluso carácteres como puntos de decimal, ¿sabes?
Todos los carácteres que son más así.
Todo eso, si entráis en... creo que era la página de MetaBiteable.
Bueno, si buscáis en MetaBiteable Fonts, ahí tenéis los ejemplos de las fuentes y podéis tocar y, ¿sabes?
Mira, esa de Grash era un ejemplo que crecía la hierba.
Esta, qué buena.
Yo hice un ejemplo que con la API del navegador de audio, tú le dabas permiso al micro para que te escuchara y, tocando las palmas, dando golpecitos en las palmas, la tipografía bailaba.
Porque podía cambiar de... claro, estás cargando un único archivo y esa fuente tiene todos los estilos de...
O sea, todos.
No necesitas cargar y, además, se ajusta mucho más al diseño porque normalmente cuando tienes un...
Imaginaos que tenéis la fuente X y necesitáis la X Vault y o no se ha comprado o no está o lo que sea y en el diseño viene Vault.
¿Qué vais a hacer? Le vais a meter, le vais a forzar que el Vault Wave sea Vault cuando esa tipografía no tiene ese peso.
¿Qué estáis haciendo? No es realmente esa tipografía en Vault.
Y eso visualmente se nota.
Pues bueno, Variable Fonts es una pasada todo lo que se puede hacer con una única fuente, teniendo todos los pesos, estilos y glifos de...
Ya no sé, es una pasada.
Claro, es que con una sola fuente tienes todos los grosores. Es que es espectacular. Con un solo archivo.
Y, además, claro, en tema de rendimiento es brutal, pero es que también en tema de diseño, todas las posibilidades que te ofrece.
Y, además, que puedas animar. Que eso es una cosa que no se podía hacer antes.
Claro, tú ahora esta fuente la puedes animar. Esto es una cosa que antes no podíamos hacer.
No podías animar el grosor. Ahora sí que podemos animar el grosor.
Claro, eso es como un ejemplo que... Estos, por ejemplo, son fuentes. Y ahí tienes una animación.
Y la de Grass, que decía, esto también es otra fuente y es otra animación.
O sea, eso está muy chulo. Muy, muy chulo.
Pero sí, todavía le está costando...
Mira, aquí está, por ejemplo, la animación que está haciendo con el PhoneWave.
Y se puede ver cómo se va animando conforme se va haciendo.
O sea, muy, muy chulo. Muy interesante.
El variable fonts.
A ver, y ya Google Fonts tiene algunas. Yo creo que en Google Fonts...
Sí, hay un par o tres, si no recuerdo mal, que ya eran...
Google Variable Fonts.
Estaba la de Roboto Flex. Esa es una.
Y nada, tenéis un montón. Mira, ya tenéis todas estas.
O sea, no está nada mal.
No está nada mal.
Y con esto, pues nada, tenéis con una fuente, las tenéis todas.
Súper bien, súper chulo.
Fontpalette.
Aquí, esta es la del Fontpalette. Otra vez no.
Yo estoy siguiendo con la idea.
Ni idea.
Tengo que reconocer que ni idea, ni idea.
Ni idea. O sea, es que no tiene ni MDN.
Si no tiene MDN, no existe directamente.
Esa yo la conozco solo porque he tenido mal genio.
Porque literal, no sé si les ha pasado, como que uno tiene...
En mi celular, por ejemplo, es Dark Mode.
Y no sé por qué, pero muchas fuentes no las toma del color que debería.
O sea, muchas las tiene del mismo color del fondo.
Y es porque él no detecta como el tema del Dark Mode, ¿no?
Y el Light Mode.
Entonces, literal, este tema de Fontpalette es para decir, hey, si el usuario tiene Dark Mode,
ponle, pues, otra tipografía para que él sí la pueda leer, la pueda entender.
Ah, vale.
Porque me ha dado mal genio.
Vale.
¿Y no estarías en accesibilidad más que en fuente?
Sí, están como ligaditas, como en las preferencias del usuario más en Fontpalette.
Sí, o de nuevo, vamos, aplauso a Stephanie, que de nuevo vuelve a saberse algo que solo el uno,
por ciento de la gente conoce.
Me encanta, me encanta, Stephanie siempre viene...
Es una super skill.
Lo peor es que yo había pasado la página como diciendo, bueno, no la sabemos, chicos, chicas,
lo sentimos, y Stephanie, bueno, bueno, déjenme que les cuente una cosa.
En realidad, sí que lo sé, sí que lo sé.
Os voy a contar.
Oye, qué interesante, la verdad es que, pues, ahora que lo sé, muchas gracias por la explicación de Stephanie,
me parece muy interesante, la verdad.
Muy bien, gracias por comentarlo.
Gracias por comentarlo.
Preferred Reduce Motion.
Este me encanta y voy a tirarme de las orejas, porque este siempre lo quiero utilizar
y no lo he usado en el App in Gs, y el App in Gs tiene un montón de animaciones.
Y ya tengo gente que se me ha quejado de, oye, ¿puedo desactivar las animaciones?
Y yo, perdón, perdón.
Pero esta es una media query que tenéis que utilizar siempre,
estoy dando orejas para mí, que no lo hago,
para justamente la gente que no quiere las animaciones.
Lo que pasa es que sabéis por qué no lo hago.
Y esto es muy friki.
O sea, porque yo tengo desactivadas las animaciones.
Yo tengo desactivadas las animaciones.
¿Y qué pasa?
Que cuando desarrollo, quiero ver las animaciones.
Entonces no hago la media query de quitar las animaciones,
porque yo tengo el Preferred Reduce Motion, la tengo activado.
Yo tengo las animaciones todas desactivadas.
Es que me dan mucha grima.
Mucha grima.
Pues nada, gracias.
No, no.
Pero, por ejemplo, la de, la del, mira, si os enseño esta,
la de hacer grande, ¿veis?
La tengo desactivada.
La de hacer grande o pequeño en la ventana.
La tengo desactivada.
Tengo desactivadas todas las animaciones.
Y esto es una cosa de mí, o sea, que tengo yo de hace mucho tiempo.
Y, ¿qué pasa?
Que cuando desarrollo animaciones, pues se me olvida.
Siempre pienso, vale, tengo que hacer luego la media query porque,
pero, ¿qué pasa?
Que es que las dejaré de ver.
Entonces, por eso me cuesta.
Es un poco raro.
Lo sé, lo sé.
Soy un poco frikazo.
¿Lo soléis utilizar?
¿Qué buenas prácticas utilizáis en este aspecto?
¿Lo utilizáis?
¿Lo hacéis mejor que yo?
¿Cómo lo hacéis?
Yo solo lo usé para un curso.
Lo puse en un curso, pues, para enseñar.
Pero así como que en la vida real nunca lo he tenido que utilizar.
Ni así como tu tipo de usuaria, ni como es.
Pero, bueno, hay que aplicarlo en algún momento.
Si utilizas el scroll behavior, ese es uno muy bueno para poner en la media query.
De poner, y además es muy fácil, pues, eso y scroll behavior normal para que no haga el smooth ese y ya está.
¿Y en tu caso, Carmen?
Sí, lo utilizo, pero la verdad que debería currármelo un poco más y utilizarlo bien.
Porque directamente lo que hago es deshabilitar las animaciones.
Y tú tienes la posibilidad de deshabilitarlas totalmente o no, o parcialmente.
Entonces, debería mirarme un poco más eso, ¿no?
De decir, vale, en vez de decir, las quito del todo, pues, si hay información que sí que me gustaría que fuese animada, pero sutil, pues, sí que dejarlo.
Si es que, al final las animaciones lo que tienen que ayudar es a entender el contexto y las cosas que pasan en la página y darte foco a donde quieres que vaya el usuario.
El resto, florituras y tal, pues, pues, mejor desactivarlas.
Sí, totalmente.
Y es interesante lo que comentas porque es verdad que una cosa que puedes hacer es directamente poner animation non important en todos los sitios y ya está.
Pero claro, lo que comenta Carmen es súper interesante.
El hecho de decir, bueno, no hace falta que quite la animación, pero a lo mejor hacemos que se vea un poquito menos y ya está.
Que sea más sutil y se puede hacer con esta media query, así que...
Totalmente.
Prefers color skin.
Esto, yo lo conozco y todavía me vuela la cabeza porque no he terminado de entender todavía cómo funciona esta magia.
¿La habéis utilizado alguna vez?
Es para el modo light y dark, ¿no?
Por ejemplo.
Sí.
Sí.
Lo que es esto de...
A ver si lo encuentro.
Es este...
Ah, no.
Este es...
Ah, vale, no.
Este no es lo que decía yo.
Esta es la media query normal.
Esta es la media query normal.
No es que hay otra que me vuela la cabeza siempre que la veo.
Vale, luego a ver si sale.
Me imagino que sí.
Este es el modo dark.
Ahora todo el mundo ya...
Esto está muy de moda.
Esto es para reducir datos.
Que, bueno, yo no lo he usado.
¿La habéis usado alguna vez?
Nada, ¿no?
Muy mal por nosotros porque la verdad es que me parece...
El hecho de tener una media query súper chula como esta
y no la usamos, ¿sabes?
De decir, ah, pues esta imagen voy a hacer que se ocupe menos.
Esta, esta es la que decía.
La de color skin.
¿La habéis visto?
¿La habéis usado alguna vez?
No.
Bueno, pues a ver.
Yo la he usado tres veces, pero...
O sea, es que me vuela la cabeza directamente.
Porque lo que puedes hacer es que tú pones, yo qué sé, aquí.
¿Color skin dark?
Pues no.
Ahora me ha dejado...
Ah, no me acuerdo cómo era.
Sí, es color skin y es dark.
Pero creo que es dark a secas, ¿no?
Bueno, intentaba secas.
Dark y light.
Pues se supone que haces esto...
Coño, y se pone todo ahora, ¿ves?
Y te cambias.
Pero es que esto me parece una salvajada, porque es que te hace casi el...
¿Ves?
Me ha puesto todos los colores, el color en blanco del texto...
No sé, ¿esto es magia?
Me ha puesto el botón también en modo...
O sea, no sé...
Vale.
¿Cómo he usado esto?
Sí, sí, es súper chulo.
Tienes el normal, el dark y el light.
Es un poco como el Kindle, ¿no?
Para cuando lees, dependiendo de...
Sí, sí.
Es como que le pone los colores que son como más suaves para poder ser leídos.
Y lo hace automáticamente.
Los valores por defecto, los cambia todos.
Es muy interesante.
Yo me quedé como...
Pero esto cómo funciona, ¿sabes?
Porque este botón ahora me sale de color gris.
O sea, que genial, súper bien, pero...
No sé.
Muy interesante, muy interesante.
Por si alguien quiere hacer un modo oscuro rápido, pues mira, ahí lo tienen.
Y, Midu, ¿sabes si de pronto hay forma de cambiarle los colores?
Tipo, quedarse a un negro más clarito.
Sí, sí, sí, claro.
Tú puedes luego...
O sea, yo podría aquí hacer lo que yo quiera.
O sea, puedo hacer esto y cambiarle el color que yo quiera.
Pero por defecto le pone...
O sea, digamos que el color que hereda por defecto el default value que tendría sería blanco.
Pero tú ya a partir de aquí le puedes poner el color que tú quieras.
Ya sea con esto o con una media query, claro.
Pero tipo ese dark, si yo le quiero cambiar los valores por defecto a ese dark, ¿se podrá...?
No, no, porque claro, se entiende que ya se lo puedes cambiar así.
Y ya está.
No, pero tipo no tanto como el color, sino como el fondo.
Ah, el fondo.
El fondo de...
Bueno, claro, el fondo es que te...
Es lo mismo.
Sabes el fondo...
Ya te entiendo.
Toma.
Sí.
O sea, el tema es como que el color que está utilizando por defecto el navegador,
porque claro, el navegador tiene como colores por defecto para todo,
pues claro, al utilizar el color skin dark, digamos que el color de ciertas cosas,
pues por defecto ya son colores preparados.
Pero ya está.
O sea, no es que luego tú lo modificas con CSS normal y corriente y ya está.
Vale, pero los valores que llevan son esos y si no se pueden modificar.
Exacto.
Son esos y ya está.
Con una variable o así no se puede.
No.
Vale.
Una vez que los quieras modificar, ya los tendrías que modificar a mano,
como harías con CSS de toda la vida, utilizando la media query de prefers y tal.
Que yo sepa, ¿eh?
Que yo sepa...
Pero es eso, sí.
¿Ves?
Los valores son normal, light, dark y only.
No sé si en algún momento, pues a lo mejor se lo piensan.
No sé.
Estaría...
Bueno, aquí pone custom indent.
Ojo, ojo.
Adapting to color schemes.
Bueno, aquí no veo que tenga...
No veo que tenga ningún...
No lo veo.
No veo que...
No, me parece que no.
No sé, aquí pone custom indent, pero me parece a mí que no.
Al menos por ahora.
Igual es algo que tienen pensado.
Lo cual sería increíble.
La verdad es que estaría increíble.
Pero sí, estos son como los valores que puede y no...
A ver, que aún así está bien como para empezar.
Imagínate que quieres hacer una página oscura.
Dices, ostras, pues en lugar de empezar desde el light, que es todo blanco, que no sé qué.
Ostras, pues puedes empezar a partir de lo oscuro y ir haciendo los estilos a partir de esto.
No sé, como interesante.
Está curioso.
Bueno, otra media query, la del contraste.
Forced colors.
Todo lo que sea forzar me parece polémico.
Todo lo que sea forzar...
No, pero es porque tú puedes forzar en tu sistema operativo también a ciertos colores.
No lo he utilizado nunca, pero como que la teoría es que si yo defino que un verde es un verde más oscuro porque yo el verde más claro no soy capaz de distinguirlo, pues que sea ese verde que yo he elegido.
Ah, interesante.
Bueno, claro, tiene sentido por temas de accesibilidad.
Claro, claro, claro.
Claro, así puedes ver algún color que te cueste, pues ya lo puedes cambiar por otro para identificarlo mejor.
Interesante.
Focus visible. Mira, yo este pseudoselector, yo no lo entiendo.
¿Lo entendéis?
¿Lo habéis usado?
No.
Ah, será para algún design system que tiene como el focus literalmente visible.
Es para esto, ¿no?
Pero básicamente, sí, sí, es eso.
Pero es que no sé, no entiendo del todo la diferencia del focus y por eso nunca, nunca lo he llevado a hacer.
Dice, pseudoclase aplica al elemento que machea con el focus y que el user agent determina vía heuristics que el focus tiene que ser hecho evidente para el elemento.
Esto de verdad nunca lo he llevado a entender.
Sé que es por un tema de accesibilidad, pero es que nunca lo he determinado de entender.
¿Pero será que es como más cambiarle el color del focus, como siempre es tipo azulito?
Sí, es para cambiar el outline, que puedes poner otro color.
Pero...
Sí, es para cambiarle el outline, pero ves, aquí pone focus only focus. Focus visible only focus visible.
Sí, pues eso no lo tengo claro.
Este es el valor por defecto, ¿vale? Este es el focus de toda la vida y este es focus visible y vale, sale más grande, más estilo, o sea, no sé, para estirarlo más fuerte.
Nunca he terminado de entenderlo y no sé, a lo mejor es eso, es como para hacerlo más visible, que es un tema de accesibilidad, de decir, bueno, por si te cuesta mucho, pero es que no lo entiendo.
Sí, pero no sé qué diferencia con el focus, claro, o sea, obviamente cuando navegas con un tabulador y tal, sí, pero con el visible no sé.
Es que antes pensaba que, digo, ostras, es que será solo cuando...
Ah...
Digo, pensaba, igual es solo cuando es el teclado, pero bueno, es verdad que ahora veo que cuando le doy a este botón no hace el focus, pero cuando le doy clic sí que hace el focus.
En cambio en este, cuando le doy aquí, sí que hace aquí este focus, aquí.
No sé, no sé, mira, no tengo ni idea.
Como no sé, ahora ahí tienes dos elementos, uno que es el click, ¿no? Que le estás haciendo y el otro es el input, el interior.
Sí, sí.
A lo mejor es exclusivo para el tabulador, no lo sé.
Mira, la verdad es que me gustaría entenderlo, pero no entiendo.
Bueno, vamos a ver interesantes. El marker que ya nos ha comentado antes Stephanie, que es de los puntitos de las listas, ¿vale?
El hash, este, ostras, este lo conoce todo el mundo ya, ¿eh?
Este está muy chulo, ¿eh? Muy chulo.
¿Lo habéis utilizado? ¿Nos sabríais explicar más o menos?
¿Quién se anima?
Si es como, literal, tiene un, no sé, hijo o tal cosa, tiene un hermano que está, si por ejemplo tenemos un H1 y un H2 adyacente, uno le puede decir como, un H1 que tenga un H2 adyacente, ponle tal cosa.
O igual, con hijos, lo que sea.
A ver, si entiendo, si pones el H1 que tenga un span y le ponemos color text, hay color text, anda yo también, el rojo, claro, sería algo así, ¿no?
Si tiene un span, el H1 que tiene un span, claro, es una forma de poder estilar el, a partir del padre, ¿no?
Porque dices, los H1 que tengan un span, y en cambio los H1 que no tengan span, pues se caería como un blue.
La verdad es que está interesante, porque así es como que seleccionas el padre.
Y funciona también con atributos, quiero decir, que también le podrías indicar, pues que la URL, tal, o así.
Claro, súper, súper chulo.
La verdad es que este está, es bastante potente, ¿eh? Es un pseudo, un pseudo selector bastante, bastante potente.
Me gusta, me gusta.
Lo que me falta es utilizarlo o tenerlo como más de la mano, igual que el Word.
O sea, el Word, igual.
Mira, aquí tenemos Word, NotApply, selector lista de argumentos.
Ah, ostras, madre mía, la leche.
Sí, le puedes ver varias condiciones.
El CSS se está empezando, luego la gente dice, no es un lenguaje de programación.
Bueno, bueno, dale un tiempo, vas a ver.
Porque como sea, ya aparece más SQL que CSS, como esto sigue así.
Lo bueno de este es el tema de la especificidad.
Porque, pues, cuando yo oí eso, yo dije, no, pues es que es lo mismo que uno normalmente hace.
O sea, no, como que el hijo, el hijo, donde él está, o sea, uno lo puede hacer normalmente.
Pero acá el tema es que especificidad cero.
O sea, no es como que te tome todo el arbolito y todos los electores, no.
Entonces, una súper buena ventaja.
Qué bueno.
La diferencia entre Word y Is es que Word siempre tiene especificidad cero.
Ah, qué interesante.
Ostras, muy chulo, ¿eh?
Incluso podrías decirle que si hay el lenguaje, si está en hebreo, pues que aplique tal tipografía.
O si no, que aplique otra.
Qué chulo.
Muy bien.
Pues, vamos al ajo.
Vamos al salseo.
Vamos al salseo ya.
¿Por qué?
Porque, bueno, y aquí os tenéis que mojar porque tenemos a Bustra, Bulma, Primer, Materialize,
Foundation, Tailwind.
Y ojo, Tailwind, que ha bajado, ha bajado, bueno, ha recuperado un poco respecto al año
pasado.
Pero aquí vemos que, bueno, Tailwind está de lejos el número uno.
Y luego tenemos a Pure CSS.
Esto sería, ah, la experiencia, retención, interés y uso.
Entiendo que esto sería la satisfacción.
Luego tendríamos el interés y el uso.
Y en cambio el uso, el más usado es Bustra, pero de lejos, que todavía alucino que se siga
utilizando tanto, pero a satisfacción es Tailwind.
Carmen, cuéntanos, ¿qué opinas de esto?
A ver.
A ver, vamos por partes.
Si no recuerdo mal, ¿a ti Tailwind no te gustaba?
No, no me gusta.
Pero porque no funciona conmigo.
O sea, a mí no me sirve Tailwind, quiero decir.
Luego hay casuísticas en las que dices, vale, pues.
Lo acepto.
Lo acepto o utilízalo.
O obviamente cuando, pero cualquier framework que es CSS, no solo Tailwind.
Si tú tienes un producto que es muy, muy, muy custom, que necesitas algo muy concreto,
pues no tiene sentido con toda la potencia que tiene ahora mismo CSS que estés, porque
sí, trayéndote estilos de otra cosa que no te interesa.
Pero lo que no me gusta de Tailwind, y por eso para mí no funciona, a pesar de que mucha
gente habla muy bien del framework, y que a nivel de colores sí que tiene un sistema
de diseño y todo que está muy guay hecho, es todo el tema de las clases, los churros
que pone de clases de toda utilidad, que dices, me tengo que aprender a saber la clase que
es gigante cuando si pongo display flex en CSS ya me está haciendo un contenedor con
flexbox y no tengo que estar poniendo toda la superclase.
Pero bueno, ya te digo que para mí no funciona, porque la curva de entrada es como mucho
más compleja.
¿Quiere el público ver cómo pongo nerviosa a Carmen?
Tío, es que ¿quién entiende eso?
Venga, va.
No quiero poner hater, pero es que ¿quién lo entiende?
Si es que la curva de entrada es que vas a tardar más en entender eso que en entender
CSS.
¿Qué es eso?
¿Qué es esto?
¿Pero esto qué es?
Mira este.
Claro.
¿Esto qué es?
Son cinco líneas.
No me mates, Carmen, no me mates.
No me mates.
A ver, Stephanie, ¿tú qué dices?
Yo soy fan de Tailwind.
Está bien, está bien.
A mí me encanta, pues yo sé que tiene, es que, a ver, son muchas cosas.
El tema de las clases, indiscutiblemente, he visto que normalmente en la comunidad no
es tan fácil crear nombres de clases.
Y bueno, ya sabemos, nombres de variables, nombres de todo, no es fácil.
Y ahorita con todo el tema de metodologías de CSS, normalmente no se conoce bien cómo
utilizarlas.
Por ejemplo, en mi equipo actual utilizamos BEM, pero hay muchas personas que no saben
utilizar BEM, o solamente piensan que es colocar el guioncito y el guioncito abajo, o el
ta-ta-ta, y a la hora el T.
No, hay mucha, mucha más cosa detrás de todo eso.
Entonces, siento que esto puede también facilitar mucho al desarrollador, ¿no?
Como no pensar en una arquitectura, o en una metodología, o que es que este es el
padre, o sea, creo que puede ser una ventaja muy grande a la hora, pues, de escribir
estilos, a nivel de nombramientos.
Y lo otro, pues sí, Carmen tiene toda la razón, se ve muy feo.
Pero es muy fácil, la verdad.
Para mí, la curva de aprendizaje es así, rapidísima.
¿Por qué?
Porque literalmente tiene mucho como los mismos nombrecitos de las clases y propiedades
que ya conocemos.
Bueno, en fin, yo amo el güey.
Y cómo, es que claro, a lo mejor es desconocimiento mío porque no lo he utilizado mucho, pero
¿cómo desacoplas luego cualquier cosa del HTML?
¿Cómo mueves cosas de sitio?
¿Cómo reutilizas?
A ver, sí, tiene sentido lo que dices.
La idea, esto por ejemplo, es un mal ejemplo.
Que también te digo que es desconocimiento mío porque yo no lo he utilizado tan a fondo,
sí que lo he probado, pero...
¿Qué es lo que se supone que se tendría que hacer para trabajar más o menos bien con Tailwind?
Lo que se tiene que hacer es componetizar.
Por ejemplo, esto es una car y sí, se ve horrible esto, pero lo tienes como en un sitio en concreto.
Lo que tendríamos que hacer es como componetizar.
Esto está mal.
Esto soy yo porque lo bueno que tiene Tailwind es que puedes hacer cosas muy rápido.
Pero lo malo, y tienes toda razón, es que si no componetizas bien, se hace inmantenible.
Y ya no sabes dónde tocar las cosas.
Puede ser un Frankenstein bastante rápido y es justo lo que no quieres tener.
Quieres tenerlo todo escopado al componente que tengas hecho y que luego pueda ser reutilizable.
También te digo que a lo mejor los que he visto es que están hechos así muy rápido o están muy bien definidos desde el inicio.
Se presta, se presta.
Pero bueno, en este caso, mira, aquí tienes un componente button.
Bueno, y tienes diferentes tipos y tal, de tamaño.
Bueno, pero sí, lo importante es que los separes.
O sea, si empiezas a hacer lo que he hecho aquí, pero claro, yo salgo de aquí.
Aquí tengo hasta código repetido.
Pero porque este soy yo que, claro, he dado muy a saco para este proyecto.
Al final, lo que tendrías que hacer es separarlo en componentes.
En un sistema que no funciona con componentes, es imposible utilizar Tailwind.
Para mí, en mi opinión.
Tiene que ser un sistema de componentes con Vue, con RIA, con lo que sea, y componentizar correctamente y no utilizarlo como un template de engine.
Porque si no, al final lo que pasa es que es un monstruo.
O sea, que te doy la razón.
Te doy la razón.
Creo que tiene cosas interesantes para, o sea, yo tengo que decir que estoy de acuerdo con Carmen de que si yo tuviese una empresa y tengo un producto que creo que tenga como un design system propio, una marca, una entidad, y que tuviese que durar mucho en el tiempo, yo lo haría con lo más cercano a CSS.
CSS modules, con el CSS más puro posible.
Pero bueno, para landings rápidas o proyectos que, por ejemplo, el AppVent.js, que al final dura un mes, pues se hace tan rápido.
Y no tienes que iterarlo, o sea, no es algo que tengo que mantener y el año que viene lo haré desde cero otra vez.
Entonces, claro, ahí sí que...
Pero bueno, no sé, Tef, ¿tú qué dices respecto a esto?
Porque igual lo usáis en un proyecto más grande y es interesante conocer esa opinión también.
Sí, no, pues yo llevo trabajando con ello más de dos años y medio.
Yo creo en producción y nunca nos ha pasado, pues, el tema de la complejidad a nivel de cantidad de clases o desacoplar, acoplar.
Entonces, no, no hemos tenido ningún problema.
Y ahorita también tenemos un design system que también está construido con Tailwind y nos ha ido bastante bien.
O sea, como que no hemos tenido, hasta el momento, después de un design system de un año y dos años y medio de producción,
con un montón de, pues, por lo que conlleva un producto, no hemos tenido así como problemas de ese tipo.
Súper interesante.
A ver, lo bueno, y la verdad es que esto es lo bonito, yo creo.
Yo de alguna forma me alegro del tema de Tailwind porque, aunque entiendo a la gente que no le guste,
lo bueno es que es una opción más a gente, o sea, con toda la potencia que tiene CSS ahora nativo y tal,
pero está guay que Tailwind, que a mí al menos sí que me gusta más que Bootstrap,
y que de alguna forma está acercando a mucha gente que si no de otra forma no se hubieran acercado al CSS.
Que eso, pues mira, si es una puerta de entrada, pues bienvenido sea.
Carmen, si tuvieras que elegir uno, imagínate que te he elegido uno.
¿Hay alguno de la lista que dirías, mira, este lo puedo tolerar?
O lo conozco y me gusta, o no, mira, no conozco a ninguno, me dan asco, los odio.
Es que ahora vais a decir que no tiene sentido lo que voy a decir, pero como yo no tengo suficiente experiencia trabajando con Tailwind
y conozco gente que sí que sabe CSS y habla muy bien de Tailwind, ¿vale?
Entonces, pues supongo que ganaría Tailwind porque el resto los veo peor.
Claro.
Entonces, y Bootstrap, pues más allá de que nos sirvió mucho hace muchos años,
cuando tenía una grid que te ayudaba muchísimo a hacer grids rápidas,
pues ahora ya no le veo el sentido tampoco.
Seguramente todo el tema que veis de que aún se esté utilizando Bootstrap,
posiblemente sea porque gente esté manteniendo cosas, en plan de,
pues hay una template de Bootstrap en no sé qué página, o WordPress tira de Bootstrap,
y entonces no sé qué porcentaje de WordPress hay en la web, pero es muy alto.
Entonces, posiblemente vaya por ahí, pero no tanto porque haya interés, sino que intereses justamente con Tailwind.
Está claro que Tailwind es el nuevo Bootstrap, ¿eh?
Porque la, o sea, en cuanto a crecimiento, Bootstrap, pues ha perdido un 4% en un año,
que ha sido su mayor caída, y en cambio Tailwind ha subido, pues un 7%, o sea,
claramente no el año que viene a lo mejor, pero poco a poco parece que se van a cruzar.
Aquí tenemos, pues, esta sería Stephanie, que dice Tailwind CSS, lo volvería a usar y lo volvería a crear y tal.
De hecho, parece que la gente que lo volvería a usar no para de crecer, o sea, que realmente está convenciendo a la gente.
En cambio, parece que se mantiene el no estoy interesado y nunca lo he oído, ya casi no hay nadie,
pero vamos, que se nota que es positiva.
¿Hay algún otro que, bueno, Bootstrap, en cambio, lo volvería a usar, pues va declinando,
pero bueno, todavía es increíble que Bootstrap, quitando a Tailwind, yo diría que es,
como de hecho, o sea, quitando a Tailwind es el único que tiene, que lo volvería a usar,
de forma, que es un tercio de la gente que lo ha usado.
¿Lo volverías a usar, Stephanie?
Sí. Ah, ¿cuál? ¿El de Bootstrap?
Bootstrap, Bootstrap.
Perdón.
Tal vez sí, es que creo que también satanizamos.
Un poquito en los otros, como que, ay, no, Tailwind, entonces Tailwind por siempre,
pero supongamos que necesitamos hacer algo rápido, que no tenemos diseño, que, no sé,
necesitamos vender algo ya, bueno, en fin, cualquier interés, Bootstrap puede ser muy bueno,
ya tiene componentes listos, tiene cosas listas, entonces, maybe, why not.
Sí, ¿no? Se hace la faena. Bueno, además a la Bootstrap le han puesto este degradado así moderno,
que entonces ya, pues, ya se ha vuelto ya moderno otra vez.
Ahora sí.
Ahora sí que lo utiliza. La verdad es que Bootstrap, a ver, ha hecho su faena durante mucho tiempo y tal,
lo que pasa es que hoy en día como tenemos tantos, yo qué sé, se me ocurre chakra UI, pero yo qué sé,
hay tantos design systems con componentes que se me haría muy difícil utilizar Bootstrap directamente que es como más manual, ¿sabes?
No sé, no me lo imagino como que me va a acelerar.
Yo acabo de pensar en componentes que tengan funcionalidad, que tengan Bootstrap,
y creo que mi cabeza ha ido a Prime Engine, o sea, imagínate.
Sí, sí, sí. Pero es que tienen Material UI, chakra UI, hay un montón, y hay unos que ahora cada vez están más de moda,
que son los de Headless UI, que son componentes visuales, pero sin estilos, lo cual son geniales.
Estos, lo siento Carmen, lo que te voy a enseñar, porque están estilados con Tailwind, ¿vale?
Y si te enseñan el código, pues seguramente te dan algo, pero lo que es interesante es que cada vez más hay como,
y de hecho el creador de chakra ha hecho esto también, ha creado como un catálogo de componentes
que solo tienes la parte funcional y no los estilos, ¿sabes? O sea, por ejemplo, la lógica del estado,
cómo renderizar la lista, ¿sabes? Cosas así. Y está interesante.
Pues tenemos la otra parte que son Open Props, que son las variables.
Sí, Open Props con Custom Properties.
Los dos.
Sí, sí. Este, que también tiene bastante buena pinta.
Sí, sí, sí.
Sería como un Tailwind.
Eso sí que lo usaría. Creo que está la Margeite por detrás. Es que está la Margeite por detrás.
Sí, sí.
No, no, está bien porque tiene como ciertas cosas de Tailwind en el sentido de que tienes como,
pues como, no un design system, pero tendrías como unos tokens ya establecidos que tienen unos buenos valores por defecto.
Porque eso es una de las mejores cosas que tiene Tailwind, que tiene unos buenos valores por defecto.
Porque yo no sé de colores, pero digo, bueno, un azul 400.
Y entonces Tailwind te dice, toma, este es el azul que necesitas.
Y en este caso igual, ¿no? Pues en lugar de poner tú el radius que no sabes qué poner,
pues bueno, tienes ahí unos valores y, joder, yo estuve viendo esto.
Mira, aquí te ves todos los colores. Muy Tailwind. Esto es muy Tailwind.
Que me encanta. O sea, no digo como algo negativo, lo digo como algo positivo.
Los gradientes. Mira, a mí me costa la vida los gradientes.
Y todo esto que tienes ya que ir preparados, pues, lo he visto. Es muy bonito.
Sí. Es que hay cosas muy bonitas visuales aquí. Es una pasada.
Hay animaciones también.
Sí, sí, ¿no? Es genial.
Está muy apañado.
Uy, ¿esta animación?
Tienes que ponerte encima, creo, del...
Ah.
¿No? Si no me equivoco, es que el otro día hizo una charla explicando cómo iba.
Pues la he liado.
Ah, pues no funciona. Puede ser porque tienes las animaciones quitadas.
Porque al darle al play, los elementos de la lista tienen que moverse.
Y no se te están moviendo.
Pues sí, sí. Pues tiene pinta de ser de eso.
Ah, pero mira, que hay más. Ah, qué chulo, ¿eh?
Muy bien. La verdad es que está muy bien esta idea.
Si hay alguna persona que no le gusta Tailwind, pues esta es una muy buena opción.
Porque al final, mira, tiene un montón.
Tiene más que Tailwind, ¿eh? Las cosas como son.
Oye, pues muy bonito. Este proyecto está muy chulo y muy interesante.
Pues a ver, ¿qué más dicen? División positiva o negativa.
Bueno, ya vemos que Tailwind, digamos, que es el que está en la parte más positiva.
Bootstrap sería el que está en la más negativa, pero yo creo que más por el número de gente que lo utiliza.
Foundation. Pues esto es... que Foundation es muy antiguo.
¿Y qué más tenemos por aquí?
Otras herramientas. Mira, Open Props está en el número uno, Carmen.
Yo la voté.
Ah, ahí está.
Uno CSS.
Uno CSS. Me suena, pero no lo...
Ah, mira, es de Antfu.
¿Y esto cómo es?
¿Esto qué es? Ah, también son como utility classes, parece, ¿no?
Son como...
Es un poco Tailwind esto, ¿eh?
Me parece.
Me da sensación.
Un poco Tailwind.
Es como para... parece que está como bastante pensado.
Pero, de hecho, creo que es o Mantainer o algo de View, este chico.
Colores...
Ah, pero bueno.
Ah, mira.
Bastante...
Bastante interesante.
Luego Material UI, Chakra UI, que hemos hablado.
SAS. ¡Ojo SAS!
A ver, SAS.
¿Cómo va SAS?
Yo lo sigo utilizando, la verdad.
¿Pero crees que vas a seguir utilizándolo?
¿O ves que cada vez lo necesitas menos?
¿O que le estás sacando menos provecho?
¿O lo ves igual?
No sé.
No, hay cosas que utilizo menos porque, yo qué sé, ya están nativas de CSS.
Entonces, yo pienso que lo seguiré utilizando, pero que iré utilizando más las propiedades nativas que ya sean estándar y que se puedan utilizar.
Y iré dejando de utilizar las de SAS seguro.
¿Te ves en algún momento dejando de utilizar SAS o lo ves imposible?
Yo creo que sí, por el camino que va a CSS, que estamos en un momento como muy guay, ¿sabes?
Porque yo recuerdo hace años que siempre quejándonos, es que esto aún no está compatible, es que todo...
Pues ahora es como, mira todo lo que ha salido este año.
Hay algunas que aún están con flags o están en desarrollo, pero que no es que sea un draft primero y que vaya a cambiar muchísimo, ¿no?
Es que se van a implementar así, entonces creo que es un momento súper chulo.
Sobre todo a mí que me gusta hacer como cosas muy locas artísticas y así, todo el potencial que te da es una pasada.
Así que sí que creo que dejaré de utilizar SAS y creo que va a ser bastante pronto, ¿no?
Pronto.
Sí, sí. Yo creo que en cuanto esté el nesting con muy buen soporte, yo creo que ahí va a perder bastante SAS.
Porque yo sobre todo, mira, aquí en el chal lo estaba diciendo la gente, aquí está cancelado SAS, porque yo siempre digo,
yo si tuviese que crear un proyecto desde cero ahora, no usaría SAS.
En cuanto se pueda anidar, o sea, nesting, yo creo que ya no dejaré de utilizarlo.
Dice, CSS ya va a soportar anidaciones. Sí, sí, lo sabemos. Lo que pasa es que todavía no hay un soporte muy amplio,
porque de hecho creo que hace muy poquito que se han puesto de acuerdo en la sintaxis.
Hace, bueno, que, o sea, este es el soporte, ahora bien.
No es eso.
Entonces, hasta que esto no esté en verde,
ya no digo un noventa y pico, digo un verde, pues nada, hay que esperar.
¿Y tú, Stephanie, qué? SAS, bueno, tú con Tailwind, que SAS ni que le eches.
Tú ya hace tiempo que te has descanchado de SAS.
Justo hace poquito empecé un proyecto y dije, no voy a utilizar SAS.
Y literal, yo dije, no puedo, como que no puedo trabajar sin el nesting,
entonces sí, sí, sí, seguí utilizando SAS, pero literal dije, como no, o sea, el momento en el que ya no puedo heredar
o pueda meter cosas dentro de otras, ese día, hasta ese día seguiré utilizando SAS,
porque sí me parece más útil.
Creo que ya tengo como esa mentalidad SAS,
que a veces es un poquito compleja ya para switchar a CSS purito,
como que te hacen falta ciertas funcionalidades,
pero yo creo que después de eso, 100% sin SAS.
Te voy a contar una cosa.
Tienes, tienes en tu mano el poder.
Imagínate, imagínate, Tailwind, SAS, solo puede quedar uno.
Solo puede quedar uno y está en tu mano decidir cuál sobrevive,
con cuál te queda, Stephanie.
A tomar tus sacos.
Y la anidación.
A tomar tus sacos.
Adiós, anidaciones.
Adiós, fue genial.
Te echaré de menos, pero adiós.
Bueno, Carmen con la lágrima, ¿eh?
Carmen está con la lágrima.
Ya, bueno, a escribir más, no pasa nada.
Ay, qué bueno.
Bueno, bueno, Tailwind ahí en el corazón a tope.
Hostia, Pico CSS a mí me encanta.
Me encanta este.
Es un framework muy pequeñito,
porque de hecho no tiene ni siquiera clases.
Tiene muy pocas.
Pero lo que está chulo es que tú lo cargas en cualquier proyecto
y con esto ya, pues mira, fíjate, tú solo con HTML,
ya te lo estila.
Que está bien para demos o cosas rápidas.
Por ejemplo, este proyectillo que hice,
este proyectillo lo hice con Pico,
pero no tiene clases esto.
Ni una clase.
Y, hombre, pues está bien porque queda bastante curioso.
Que te saca de un aprieto en el caso de que tengas que hacer alguna cosa.
Así que a mí me gusta mucho Pico CSS.
Mira, Tailwind CSS.
O sea, a ver, a ver.
¿Otras herramientas?
¿Se han puesto aquí Tailwind CSS otra vez?
¿O esto es otro Tailwind?
Porque a este lo han votado solo 16 veces.
No tiene mucho sentido este.
Increíble.
Haciendo trampa.
Sí, sí.
Mira, ¿cómo de satisfecho estás con el estado de frameworks?
Vale, la gente está contenta.
¿Estamos contentos nosotros?
¿Cómo estamos?
Uy.
No sé.
Carmen, a ti es que te da igual.
O sea, no es que estés contenta.
Yo prefiero tirar de CSS.
Ni frameworks ni hostias.
O sea, tú lo que estás contenta es con CSS y punto.
Pero digo que esta es mi casuística.
Y como yo he trabajado,
y obviamente también ha habido tiempo que he estado trabajando en consultoría,
y tenías clientes cada dos semanas,
pues obviamente tenías que prepararte un scaffolding rápido.
Y en aquella época utilizábamos Bootstrap con Siemens diferentes.
Cada empresa un tema, porque no eran,
claro, eran proyectos que no demandaban de una complejidad visual
o customización muy bestia.
No eran empresas de producto.
En una empresa de producto, que es mi último recorrido,
es en ellas, pues no le da tanto sentido.
Pero para hacer cosas rápidas o que no necesites eso,
pues joder, te salvan la vida, la verdad.
Hay mucho Team Carmen, no te creas.
En el chat hay mucho Team Carmen, ¿eh?
Están ahí Team Carmen.
Yo soy Carmen.
Telwin, como me encuentra Telwin por la calle,
no sé qué le hago.
Hay gente de todo.
Y tú, bueno, Estefani, ¿qué te voy a preguntar?
Tú estás muy satisfecha.
Ha existido Telwin, ¿no?
Pues estamos súper contentos con Telwin.
¿Qué más queremos?
Claro, bastante.
Y el año pasado también, este también.
Vamos que vamos.
No, súper bien.
¿Crees que, o sea, claro, es que Telwin,
yo, al menos, la erupción que le he visto a Telwin,
hostia, hacía mucho tiempo que no veía algo así.
En el mundo del CSS.
¿Te imaginas qué será lo siguiente, Estefani?
¿O crees que hay algo que pueda desbancar a Telwin?
A nivel de framework.
Difícil, ¿no?
Que exista, no, ¿no?
Sí, sí.
Sé que hay uno, hay uno que está, bueno, lo sé porque Feralp,
que es moderador, no sé si estará por aquí,
pero cada dos por tres me lo recuerda.
Ah, no me acuerdo.
Feralp, si estás ahí, recuérdamelo.
Master CSS, ya está, ya lo han dicho.
Ya lo han dicho.
Hay uno que, no sé, no sé si es Feralp, que me lo dice cada dos por tres
y entonces lo tengo ya aquí, o si realmente se está haciendo famoso,
pero bueno, no estaba en la encuesta.
Es muy bonito, no la web, sino que las cosas que se pueden hacer y tal.
Y tiene algo que le podría gustar un poco más a Carmen,
porque es lo mismo que Telwin.
Iba a decir la misma mierda, pero bueno, es lo mismo.
Pero es todavía más corto.
Es todavía más cortito.
Porque algunas cosas que en Telwin serían como muchas líneas,
aquí las puedes hacer en menos.
Pero es lo mismo, o sea, es la misma idea, por ejemplo.
Pero para que veáis la diferencia, bueno, ves, esto es con blog, fix, no sé qué.
Esto es lo mismo.
Pero esto, esto sí que no está en Telwin, el hacer esto corto,
que está bastante interesante.
Esto, por ejemplo, tampoco se podría hacer en Telwin y queda bastante corto.
De hecho, hay una comparativa aquí.
¿Ves? Esto sería más en Telwin, ¿no?
Que queda esto aquí súper largo.
Y aquí, ojo, eh, queda bastante animation, dos puntos.
Esto se lee mejor, eh.
Ojo, ojo, Carmen.
Ojo, Carmen.
No, sí que me gustaría decir algo y es que elijas lo que elijas,
habrá alguien que ya haya tomado decisiones por ti.
Ah, eso sí.
Y luego, esas decisiones tienes que estar de acuerdo porque si no, luego te las tienes que comer.
Entonces, que antes de elegir uno que se mire muy bien cómo está construido
o el cómo funciona a nivel lógico o de cómo es estructura o la arquitectura
o cómo se han decidido ciertas cosas de cómo se aplican porque a lo mejor no te encajan
y dices, Telwin, mola mucho, lo cojo y luego a lo mejor, por ejemplo, hay algo que no te encaja,
pues vas a tener que hacerlo así porque ya está decidido.
Porque alguien la ha decidido ya por ti.
Así, entonces, es lo bonito.
Mira, Carmen for president.
Estás diciendo por aquí, eh.
Qué bueno.
Pero, a ver, no sé, este tengo que decir que tiene sus cosas chulas respecto a Telwin
porque, por ejemplo, en Telwin cuando tienes que hacer este tipo de cosas, los hovers y tal,
aquí los puedes agrupar.
Puedes decirle, todo este CSS es para cuando haces el hover.
Que esto es una cosa que no tiene Telwin que a mí me pone muy de los nervios
porque tienes que hacer hover, dos puntos, tal, hover, dos puntos, tal.
Y es verdad que eso, todo lo que sea repetir, a mí me molesta mucho.
Pero, bueno, ahí lo dejo, eh.
¿Quién sabe si Carmen, un día de estos, muy aburrida en casa,
dice, oye, voy a probar esta cosa que me dijeron.
Y, quién sabe, si el año que viene...
Mira, lo voy a probar.
Ahí lo dejamos, ahí lo dejamos.
Bueno, otro peor todavía, me parece.
CSS en JS.
Uy, Dios mío.
CSS en JS, aquí se puede ver, yo creo que en general, un poco,
excepto este verde que ha quedado...
Ah, estos CSS en modules.
Pero a ver, CSS en JS, CSS en modules.
Pero excepto CSS en modules, que parece el nativo,
fijaos que todos los demás bajan, eh.
Todos.
¿Es el fin del CSS en JS?
Stephanie, ¿qué opinas?
Tal vez sí.
Tal vez sí.
Pero sobre todo por temas de sobrecarga.
Por el tema de escalabilidad que hablábamos el año pasado.
Siento que por esos detallitos puede ir decayendo cada vez más.
Lo dijimos aquí en exclusiva, eh.
En exclusiva.
La verdad es que ha habido un terremoto, justamente, a ver si lo encuentro...
Este.
Ha habido un terremoto con este artículo, que es uno de los maintainers de Emotion, que es uno de los CSS en JS, una librería para React, una de las más famosas.
Y en su empresa han quitado CSS en JS.
Es muy bestia, eh.
Porque uno de los grandes mantenedores de Emotion te dice, te mete aquí el pedazo de artículo y te explica por qué es una mierda.
Bueno, una mierda.
¿Por qué lo van a dejar de utilizar?
Y además súper bien explicado y tal.
Oh, da miedo, eh.
Bueno, da miedo para la gente que utilice CSS en JS.
Rectificar es de sabios, ¿no?
Dicen.
Muy bien, totalmente.
Estoy totalmente de acuerdo.
Totalmente de acuerdo.
Pero es como, imagínate ese momento en el que tu empresa decidió tomar Emotion por un artículo que escribió este hombre hace un año.
Es una putada eso.
Es una putada, eh.
Porque una migración de ese estilo...
No, es una putada.
Yo por eso es una de las cosas que más odio de cualquier framework o CSS en JS.
El CSS es tan importante a nivel de arquitectura del frontend que tomar una decisión a nivel de framework o CSS en JS y equivocarte es muy costosa.
Y lo peor es que ninguna de estas librerías que vemos aquí, está el Components, Stitches, JSS, ninguna de estas, por muy buena idea que parecía, va a durar más que CSS.
Y eso hay que tenerlo claro.
Hay que tenerlo claro.
Porque el día de mañana cuando tenéis que cambiarlo todo, tela.
CSS en JS, ¿has hecho, Carmen?
Bueno, me he encontrado proyectos ya hechos.
Sobre todo con Style Components.
Qué bueno, está el Components al final.
Aquí eso puede ver también.
Cómo poco a poco la gente...
Es que todo, eh.
No hay ni uno que diga, ostras, no, Emotion igual, CSS Modules.
Pero claro, esto es algo nativo.
O sea, bueno, no es nativo, pero de hecho sí que están trabajando en qué...
Stitches ha subido un pelín, pero...
¿Y Style Components qué?
¿Ya hay or nigh?
A mí me gusta Style Components.
Pero Tef, ¿a ti te gusta todo?
O sea, hemos visto que está claro...
A ti mientras sea de CSS te ha gustado.
Obviamente te gusta más Tailwind que ya matarías a Sass por ello.
Pero no le haces asco a nada.
Me parece muy bien, ¿eh?
Todo lo que tenga que ver con CSS a tus brazos.
Me parece bien.
Me parece fantástico.
Sí.
Hay algo que me gusta y es el tema de las variables.
Pues como meterle como Javascript, inyectarle que dependiendo de X o Y te pinta de uno u otro.
Eso me parece fantástico el Style Components.
Eso es lo mejor.
Esperar amanecer ahí, veréis.
Eso es lo mejor.
El tema de...
Joder.
El dinamismo que le da es que eso es increíble.
Eso totalmente.
Y división positiva-negativa.
Bueno, CSS Modules está muy por encima, que sería la versión más nativa y te da un sentido.
Está el Component de segundo, pero bueno, ya ha empezado a tener más rojo.
Y otras herramientas, bueno, Chakra UI.
Esta es una mezcla un poco rara, ¿no?
Porque veo Vue.js, o sea, vale, ok.
CSS en JDS, Vue.js.
¿Ok?
Tel-Win CSS.
O sea, aquí hay alguien que dijo, yo voy a votar a Tel-Win CSS en todos los sitios que pueda.
O sea, no me importa.
Menos mal, yo no sé en esa encuesta.
Igual Stephanie sí que votó y no nos lo ha dicho.
Sí.
Igual sí que votó y no nos lo ha dicho.
Bueno, pre-post-procesos tenemos SAS, que aquí vemos que SAS está muy por encima del resto.
Post-SS se está acercando.
Les y Stylos.
El otro día alguien me decía, porque yo decía, yo no usaría SAS.
Y me dice, ¿les?
Y digo, ¿les?
Todavía les.
Todavía menos.
Porque es que...
Es un chiste muy malo.
Mi tipo de humor, sí.
Por eso me he reído.
Es horrible, es horrible, lo sé.
Pero no, en serio.
O sea, es que no tiene sentido.
Ni lees ni Stylos.
Ya para usar esas cosas, mejor utilizas SAS.
O sea, que estás.
No tiene sentido utilizar cosas raras.
Bueno, Prettier, Autoprefixes, Styling, Prettier.
¿Prettier utilizáis para CSS?
Sí.
¿Sí?
Para formatear.
Configuración de...
Sí, configuracióncitas que se vea lindo.
Sí.
La verdad es que súper bien poder trabajar con Prettier.
Y navegadores.
¿Lo probáis todo con Chrome o utilizáis Firefox?
¿Cómo lo hacéis?
Yo siempre con Chrome.
Ay, ay, ay.
Bueno, está bien.
Soy fan de Chrome.
¿Pero sueles probar en Firefox después o dices, bah, ya funcionará?
Sí.
Sí.
No sé, yo soy ese.
Yo pruebo en Chrome y pienso, bah, ya funcionará.
Yo soy ese, yo soy ese.
Sí, pero he probado más es como en Safari.
Tipo, el tema de los altos es el que más miedo me da.
Más problemático.
Más problemático el tema de los altos, pero ya de resto casi siempre Chrome.
¿Y tú, Carmen, cómo lo haces?
¿Cuál es tu workflow?
Chrome, Safari y Firefox.
Hostia, pero si no recuerdo mal, ¿tú antes usabas Firefox o me lo he imaginado?
Utilizaba mucho Firefox.
Eso te voy a decir.
Tiene un porqué.
Y eran por las developer tools.
Porque eran espectacularmente superiores a cualquier otra que tuviese, cualquier navegador.
Sobre todo a nivel de, tanto de visualmente poder entender propiedades y verlo súper rápido.
Una grid, podías verla súper rápida con toda la retícula, todos los espaciados.
A nivel de tipografía, a nivel de animaciones.
Todo, todo.
O sea, había unos paneles que eran espectaculares.
¿Qué ha pasado?
Chrome ahora se ha puesto las pilas y a nivel de tiptooth hay un montón de paneles guapísimos.
Incluso puedes debuguear una animación ahora mismo.
Entonces, por eso ya no lo utilizo tanto.
¿Se han copiado Chrome lo mejor de Firefox?
Totalmente.
Todo.
O sea, todo lo que le faltaba se lo han copiado todo.
O sea, no vamos a engañar a nadie.
Yo creo que hasta la gente de Google lo sabe.
Así que no les vamos a engañar.
Y a la hora de probar, porque también hay aquí en la encuesta, dice factor de forma.
¿En qué tamaño y formato de pantalla hacéis pruebas?
¿Cómo lo hacéis?
¿Desarrolláis en desktop o en móvil?
¿Cómo lo probáis?
¿Probáis en desktop y móvil?
¿Tableta lo miráis o eso da igual?
¿Cómo lo hacéis?
En mi caso sí, me toca todo.
Me toca probar en todo lado.
Entonces, no.
Solamente en Chrome es como el tema de cambiar el size de la pantalla y listo.
Pero sí o sí siempre en todos los tamaños.
En mobile, desktop y tablet, sí o sí.
Y en tu caso, Carmen, también, ¿no?
A todo.
Sí.
Sí que es verdad que cuando he trabajado en algún sitio que se tenía muy claro
el target que era, porque por Analytics, imagínate, el 90% entraba con iPhone, ¿vale?
Pues hacíamos mucho hincapié en todas las versiones de iOS que habían.
Incluso dábamos soporte a algunas que ya estaban bastante...
Básicamente había un armario que aquello parecía el Apple Store.
Si llegabas, abrías y tiras todos los dispositivos allí.
Qué bien, qué maravilla.
Sí, sí.
Pero sí, más allá, a lo mejor alguna vez, alguna herramienta que no recuerdo bien
ni cómo se llama, browser y browser file, no, no sé.
Hay una herramienta que te levanta máquinas virtuales emulando los navegadores.
¿Browser Stack, creo?
Browser Stack, gracias.
Pues eso también lo he utilizado para que fuese realmente...
Pues eso, el rendimiento real de...
Sí.
Ahí está.
Pues vamos a los premios porque si no estaríamos aquí todo el día,
pero me he saltado los recursos que, bueno, básicamente donde la gente se es autoridad y todo esto,
blogs y revistas.
Aquí nos falta Carmen y Stephanie, así que si alguna vez quieren,
pues tenemos una, Jen, tenemos Libero, tenemos Kevin Powell, que también, pues muchos, muchos cracks,
Sarah, Susan, la verdad es que hay Miriam, Susanne, mucho, mucho crack, la verdad.
¡Ojo! Estoy aquí, eh, ojo.
¡Hombre!
Aquí, aquí.
¡Olé, olé!
¡Ojo, ojo!
No sabía que aparecía.
No sabía que aparecía.
La verdad, voy a decir una cosa, bastante inmerecido, o sea, a nivel de CSS tampoco es que haga tanto contenido.
Debería hacer más, así que, pero bueno, gracias a la gente que...
Además, un poco inmorecido al lado de Ana Tudor, o sea, no me lo merezco, no me lo merezco para nada.
Y, bueno, otras encuestas, bueno, total, vamos a los premios, que está lo interesante.
Y voten a Carmen y a Stephanie para el año que viene, por supuesto, porque hacen un montón de contenido de CSS.
Si es que van a sus cuentas de Twitter y van a alucinar de todo lo que aprenden y todo lo que comparten.
Y, joder, Carmen hace unas pedazos de cosas con SVG y con CSS que son increíbles, da charlas.
Y a Stephanie que tiene unos cursos increíbles, así que ya saben, voten.
Vale, vamos aquí con los premios.
¿Cuál creen, rápidamente, cuál creen que es la característica más adoptada?
Concedí a la característica con la mejor progresión interanual, la que más ha evolucionado de un año para el otro.
¿Cuál dirían que es?
De todas las que hemos visto.
¿O las que hay?
¿Cuál?
Has.
Has, vale, puede ser.
Algunas autoclases.
Sí, yo creo que es Gap.
Gap, seguro.
Tiene que ser Gap, ¿no?
Porque, a ver.
Es Gap.
Ah, sí, sí.
Tiene que ser Gap porque...
Ah, bueno, hostia, Asper Ratio es verdad que también habíamos visto que había crecido un montón.
Pero bueno, sí, Gap es que...
Por lo que hemos visto.
La más comentada.
Yo creo que la más comentada va a ser Subgrid, porque todo el mundo se estaba quejando de que nada soportaban.
¿Cuál creéis que es la que tiene más comentarios?
La característica de CSS con más comentarios.
Puede ser, porque serían comentarios también de no se soporta y no se entiende.
Sí.
Yo hubiera dicho las dos, o sea, que me veo representado.
Vamos a ver.
Es Subgrid.
Total.
Mayor satisfacción.
Concedida la tecnología con el mayor porcentaje de usuarios contentos.
A ver, Estefany, esta creo que es bastante fácil, ¿eh?
A la tecnología.
Esta es de Astro.
Tailwind, a ver.
Tailwind, ¿no?
¿Tú qué dices, Carmen?
¿Será Tailwind o no?
Sí, seguro.
A ver, a ver, a ver.
¡Ojo!
¿Cómo?
¡No se ha dejado fatal!
¡No se ha dejado fatal!
¡No se ha dejado fatal!
CSS Modules.
¡Ostras, mira que lo hemos visto y lo hemos comentado!
¡Toma!
Nos ha dado en toda la boca, ¿eh?
En toda la boca.
Dios mío, qué fuerte.
Pues bueno, ahí tenemos.
CSS Modules.
¡Felicidades a CSS Modules!
Oye, pues Vanilla's Track estaba muy cerca de Tailwind CSS.
Vanilla's Track es un CSS en JS con cero coste de runtime.
Que tiene muy buena pinta.
Para la gente que todavía le gusta CSS en JS.
Y además te da tipos con TypeScript.
Así que es como la evolución.
Y el hecho de que tenga cero coste de runtime lo hace muy, muy interesante.
Con más respuestas escritas.
Al item que tiene más respuestas.
Hostia, no entiendo ni la pregunta.
No entiendo ni el premio.
Así que no sé.
¿Cuál dicen?
Más respuestas escritas.
Ah, que hayan contestado más.
¿Sabes?
Ah, que hayan seleccionado más.
No.
No, que hayan votado más, me imagino.
La que ya sea que la conoces o no la conoces.
Pero que más hayas dicho.
Ah, vale, sí.
Es la más usada.
Yo qué sé.
No lo sé.
No tengo ni idea.
Vale, le voy a dar.
¿Qué?
Qué rándome es esto.
Con 113 menciones.
El navegador Arc ha sido la herramienta más...
Pero aquí no dice nada de herramienta.
La herramienta más mencionada...
Mira, no sé ni qué es.
¿Qué es esto de Arc?
Sí.
Es un navegador.
Sí.
Bueno, yo me lo descargé el otro día.
Me dieron una invitación para probarlo.
¿Y qué tal?
Pues, a ver.
Tampoco...
Quiero decir, no hay nada destacable que yo haya visto de momento.
Que digas...
Hostia.
Es que me da la sensación más que un premio parece una publicidad que nos han colado.
O sea...
Es que no sé.
No sé.
A no ser que tenga unas herramientas de desarrollo espectaculares que no veo que estén aquí.
O sea, en imagen.
No sé.
Me he quedado con ganas de probarlo.
Pues, conclusiones, amigas.
Conclusiones.
Carmen.
¿Qué conclusiones sacamos de este año del State of CSS y del año en general?
Para el CSS.
Para ti.
Carmen, Carmen.
Tú.
Ah, perdona, perdona.
Pensé que me hubieras dicho que se me ha ido la pinza.
No, no pasa nada.
No, es que te he visto así y digo...
Hostia, no sé si es cara al...
Ya no me escucha.
No me escucha, Carmen.
No, no.
Sí, sí, sí.
Perdóname por lo del Tailwind.
Perdóname.
Perdóname.
¿Te imaginas?
Ya no vuelvo el año que viene.
A pesar de que hay muchas que no he podido probar aún en...
¿Sabes?
Darle mucha caña.
Sí que hay un montón de propiedades y de funcionalidades nuevas.
Que la verdad que bastante emocionada.
Porque por fin he visto un año que dices...
Hostia, se han puesto las pilas por lo típico, ¿no?
The winter is coming.
Sí, pero va cuando.
Entonces, estoy viendo resultados este año.
Y está siendo muy emocionante poder probarlas.
Qué bueno.
¿Tienes un deseo para el año que viene cuando estemos aquí con nuestro nuevo rito navideño?
Pues que os pueda decir que no estoy utilizando Sars ya.
Oh, por un momento pensaba que me encanta Tailwind.
Y yo, no.
No, eso no va a pasar, ya te lo digo.
Bueno, que he dejado de utilizar Sars.
Vale, me parece un buen deseo para el año que viene.
¿Y en tu caso, Tev?
Bueno, creo que tengo los mismos sentimientos que comenté al principio de necesitamos visibilizar más este tema de CSS, las nuevas funcionalidades, cuáles son, cuáles se vienen.
Sin embargo, siento que el tema del State of CSS es una gran herramienta para poder mostrar también todo lo que se ha trabajado.
Y me encanta la evolución que tuvimos literalmente desde la vez pasada que estuvimos aquí charlando sobre estas cosas.
A hoy, ya ver varias.
Recuerdo que el año pasado yo dije que quería ver el Misty.
Todavía no, espero el próximo año.
Pero indiscutiblemente necesitamos que uno, personalmente en Colombia, que más personas puedan contestar esto, sean personas que estén comenzando o que ya tengan experiencia.
Mejor dicho, tarea número uno para el próximo año.
Y tarea número dos, poder visibilizar mucho más estas cosas tan interesantes que ya hay muchas que se pueden hacer.
Incluso tantas tan viejitas que también vimos que hay mucha gente que no conoce y que son súper útiles.
Entonces, bueno, muchas cositas por hacer el otro año.
¿Tienes algún deseo para el año que viene?
Aparte de que Carmen utilice Telwin.
¿Tienes algún deseo para el año que viene?
Que viene, no sé, algo que desees que llegue al CSS.
No sé, ¿algún deseo, Stephanie?
Lo del Misty sería maravilloso.
Y qué otra cosa.
Yo creo que, ¿qué otra cosa que recuerde?
¿Algún cambio que le pidas a Telwin o es perfecto ya llegar tal y como es?
A lo mejor le falta alguna cosa que te gustaría que tuviese.
Pues hasta ahorita súper bien.
Creo que nos quejamos el año pasado también un poco de los nombramientos que como que no coincidían unos con otros.
Sí, se me da mucha roya.
Bien, con este que tú mostraste ahorita, tengo como mis conflictos, sobre todo porque me parece que Telwin tiene una curva de aprendizaje muy corta.
Es precisamente por eso, por los nombres, ¿no?
Pero como que aprendes la rayita, aquel punto, aquel leste.
Bueno, puede ser interesante ese otro framework, pero tengo mis cosas.
Bueno, pues amigos y amigas que sepan que pueden seguir a Carmen Anzio en Twitter como Carmen Anzio.
Le vais a buscar como Cosmic Red, pero aquí tenéis su handle, ¿vale?
Que habla pues de SVG, se ha visto últimamente también, pero de CSS, de desarrollo web, de JavaScript.
Así que si quieren seguirla, mira, CSS, Love, SVG.
Hace magia, literalmente, con CSS y SVG.
Así que no se la pierdan, van para allá.
Mira, además ha retitado lo del directo y lo hace súper bien.
Además tienes también como un curso, ¿no?
Una clase, o sea, un tutorial o un curso de firma para desarrolladores.
Curso, curso.
Curso, sí, sí, sí.
Muy bien.
Pues nada, es que tiene un montón de cosas, así que no se lo pierdan.
Que su Twitter es una delicia.
Y también, por supuesto, pues tiene la Tefcode, la puede encontrar Stephanie Aguilar como Tefcode.
Y, pues nada, también un montón de CSS, un montón de cosas chulas.
Mira, un taller de Flexbox y CSS Grid, que a mí me iría súper bien también.
Yo es que no tengo el certificado, así que me da tiempo todavía, hasta el 20 de diciembre.
Pues igual, o hago el pantallazo y le digo en Inteligencia Artificial que lo cambie, a ver si cuela.
Bueno, pues Carmen, Stephanie, muchas gracias a las dos por pasaros un año más.
Mi deseo para el año que viene es que podamos repetir aquí y nada, que sigamos disfrutando del CSS, haciendo la magia que hacéis.
Y nada, que se hagan cosas para que las podamos seguir comentando, que me encanta.
Muchísimas gracias.
Bueno, pues muchas gracias a las dos.
Gracias a mí.
Nada, gracias por venir.
Os mando un abrazo enorme.
Muchas gracias a todos por estar.
A los argentinos, mucha suerte, que sé que está ahora justamente jugando Argentina.
Mucha suerte.
Y nada, nos vemos en la siguiente y en el Estudio 12SS para el año que viene.
Así que hasta luego.
Gracias, Carmen.
Gracias.
Chao.
Chao.
Chao a todos.
Chao.