Hoy vamos a hablar del CSS, del State of CSS, de esa encuesta que hacen año tras año para ver
cómo son las tendencias del CSS, sobre todo la de los encuestados, obviamente.
Y nos van dando su opinión para ver hacia dónde va un poquito el mundillo,
si se está utilizando una propiedad más que otra, qué opinión es la que tenemos,
qué entorno estamos utilizando, los recursos que consultamos, las tecnologías.
Y bueno, pues hoy me gustaba tener una mesa redonda con gente que yo considero que son cracks
o para mí son referentes que me gusta hablar con ellos sobre esto, leer lo que dicen sobre esto
y me apetecía invitarlos y que tuviésemos la ocasión de poder charlar sobre esto con ellos,
a ver cuál era su opinión y las ideas que tenían al respecto.
Así que antes de darle paso a esta gente maravillosa que os puedo decir que es una encantadora,
vamos a saludar a la gente que viene en el chat.
Vamos a Juan Cruz que dice hola Midu, estamos a Guillermo que dice Henry,
no sé quién es Henry pero también debe ser importante.
Tenemos a gente desde Colombia, dicen por aquí Fernando Méndez que va a ser interesante,
ya te lo digo yo que va a ser interesante, te lo puedo asegurar.
También tenemos por aquí a Sergio Duarte que también saluda a Guillermo que estaba por aquí,
que dice que yo vengo de fan de Carmen.
Bueno, si vamos a empezar ya viniendo gente de fans, madre mía,
porque con esta gente tan crack estoy seguro que va a haber fans por todo el mundo.
Así que antes de empezar a deciros quiénes son, que seguro que los conocéis,
y dándole al like porque vamos a ir uno a uno a conocerlos.
Así que empezamos con Nuria Soriano.
Nuria, bienvenida, muchas gracias por estar aquí.
¿Qué tal? Gracias.
¿Cómo estás?
¿Qué tal?
Muy bien.
Encantada de hablar del CSS.
Sí, me encanta CSS.
Puedo hablar horas de CSS.
Pues Nuria, para quien no te conozca, comenta un poquito quién eres,
quién es esta Nuria, sé que te han dado videojuegos y que haces videojuegos,
¿qué más podemos saber de ti, Nuria?
Bueno, yo soy Frontend, básicamente, y ahora estoy trabajando en Codelic,
que si no lo conocéis es una plataforma de cursos de programación online.
Y bueno, estoy yo llevando la parte de cursos Frontend,
he entrado hace poquito y ya hemos hecho unos cuantos cursos,
un par de cursos de CSS, que está mal que lo diga,
pero creo que está bastante bien.
Y bueno.
Buenísimo.
Pues Nuria, muchísimas gracias por pasarte hoy por aquí,
por hablar con nosotros sobre el CSS.
No sé, también está bien que digas cuál es tu Twitter,
para que la gente empiece un poco a chafardear.
¿Quién es esta Nuria?
A ver qué cosas dice, a ver qué comenta.
Sí, mi Twitter es Nuria barra baja codes.
O sea, que ya queda claro a qué se dedica, Nuria.
Genial, pues tenemos a Nuria Soriano.
¿Y a quién más tenemos aquí?
Pues tenemos a Carmen.
Carmen Anzio.
¿Cómo estás, Carmen?
¿Qué tal?
Muy buenas, corazón, a Guillermo.
Bueno, tengo que decir que hay gente que viene fan de un montón de...
Ahora hay gente que viene fan de Adrià.
También había gente que venía fan de Nuria.
Eso no lo has sacado, eh, muy mal.
A ver, porque va muy rápido.
Es que no para.
A ver, que alguien escriba ahí que es fan de Nuria, que lo saca ahora mismo.
Que alguien lo ponga, que lo saca ahora mismo.
Bueno, vamos a dejar de presentar a Carmen.
Carmen, cuéntanos un poquito de ti.
¿Qué tal?
Bueno, sí, Carmen Anzio.
Actualmente soy Product Designer en La Luz.
Llevo un añito.
Ahora recién se ha cumplido.
Así que mi perfil es de UI, UX, Designer.
También toco parte de códigos, sobre todo CSS, animaciones y todo.
Píxeles también.
Me encanta el pixel art.
Y, bueno, mi Twitter es Carmen Anzio.
Tal cual.
Solo veréis videojuegos, gatitos y CSS.
Veo que nos unen a los tres los videojuegos, eh.
Nuria hasta los hace, que lo suyo ya es otro nivel.
Bueno, de esa manera, pero sí.
Bueno, de esa manera, sí.
No, están muy chulos, están muy chulos.
Ojalá yo los dices, de esa manera, ¿sabes?
Eso es como cuando Messi dice, no, yo juego al fútbol.
De esa manera.
A ver, claro, de esa manera.
Esta gente ya tan sobrada.
Vamos a ver, ¿quién más tenemos aquí?
Pues mira, aquí dice Joan León que es fan de los cuatro.
Este no se moja con ninguno.
Pues vamos a ver, ¿cuál de los cuatro?
O sea, si somos tres, aquí nos tiene que faltar alguien.
¿Quién nos falta?
¡Pam!
¡Adriá!
¡Adriá Velardos!
¿Cómo estás, Adriá?
Muy bien.
Encantado de estar aquí con vosotros.
Encantados estamos nosotros.
Muchísimas gracias por pasarte por aquí.
Adriá, para quien no te conozca, yo hago un pequeño spoiler.
Adriá es compañero mío de la empresa y le tengo mucha estima porque es un pedazo de crack.
Pero para quien no te conozca, como te conozco yo, cuéntales un poquito sobre ti.
Bueno, pues básicamente estoy como frontend en una devinta y aparte doy clases también en la salle y todo conectado, todo frontend.
Madre mía, tenemos un pedazo, o sea, alguien que está creando videojuegos, una artista del pixel, el pixel art, un profesor de la salle.
Ahora yo me siento como de barrio, ¿sabes? Me siento como que, bueno, este es el chico, este que hace frontend.
Y de vez en cuando juega la PlayStation 5 y hace videos sobre eso, pero más o menos.
Vale, bueno, sin intimidación, estoy un poco cagado ahora mismo, estar sabiendo un poquito esto.
Ay, voy a quitar, ha salido esto de mi dev encima de la pobreza.
Mira, me lo voy a poner aquí, lo voy a quitar.
¡Pum! Sí, sí, sí, que parecía que Carmen es el...
Es la que tengo top, ¿sabes? Me lo pones ahí.
Podría ponerlo como encima, ¿no? Para que no, cada uno que, si quieres decir alguna opinión, que sea chunga para que no se vea quiénes sois en ese momento.
Bueno, pues aquí estamos todos en esta mesa redonda que viene a hablar del State of CSS 2020.
Una de las primeras cosas que yo creo que es interesante que comentemos, y tengo por aquí ya la página, la tengo preparada,
es un poquito el contexto para que la gente entienda, ¿no? Qué es el State of CSS 2020, por qué vamos a hablar de ello,
y sobre todo, de dónde salen estos datos, ¿vale?
Esta encuesta es bastante importante a nivel de desarrollo web, porque se hace todos los años y tiene una muestra bastante grande.
Ahora, esa muestra no es perfecta, por supuesto, cuando vemos la demografía, para que nos hagamos un poco la idea,
y si queréis, vamos comentando también si os sorprende esto, si creéis que es un reflejo de la realidad, ¿vale?
Primero, los países, que obviamente tenemos que, solo de Estados Unidos, el 20% de los encuestados son de Estados Unidos,
y de España tenemos 393, solo. ¿Cómo lo veis? Estamos bien representados ahí, 393 de 12.000 personas que se han hecho la encuesta, o nos quedan.
Y cuatro ya estamos aquí, ¿no?
Sí, sí, o sea, son 389, son los encuestados encontrados a nosotros.
Bueno, la muestra, la verdad, obviamente, por ejemplo, Algeria y tal, tiene tres personas, Marruecos dos,
pero sí que veo que a lo mejor hay mucha representación de Estados Unidos, ¿no?
Y por ejemplo China, que es un... o Rusia, pero China especialmente solo tiene 60.
O sea, que ya lo primero que tenemos que tener en cuenta, a lo mejor es eso, ¿no?
Que es un muestreo más de las cosas que se están haciendo en Occidente y especialmente en países que están bastante desarrollados,
como por ejemplo Estados Unidos, ¿no?
Un quinto ya vienen por ahí las cosas.
¿Creéis que esto hace que sea menos válida o que es interesante igualmente?
¿Cómo lo veis vosotros?
A ver, yo pienso que es interesante.
Lo que pasa es que estos datos, pues, pienso que están, ¿no?
Hay un sesgo muy grande.
Porque ya no solo a nivel de país, sino a nivel de... ¿Cuánto era? ¿Un 80 y algo por ciento eran hombres?
Sí, efectivamente, Carmen.
Porque además de que el lenguaje, que esto es el lenguaje que se ha respondido a la encuesta, que es el 80%,
aunque esto puede ser que una persona que es española, pues, la haya hecho también en inglés,
como bien decías, tenemos también el género aquí y el 85% de los encuestados son hombres.
Respecto al 11% que son mujeres, luego tenemos no binario, que no aparece por poco,
pero voy a aventurarme que debe ser bastante poco, no sé, un 1% o menos.
Y algunos que prefieren no decirlo.
Entonces, ¿creéis que esto es un reflejo de la realidad?
¿Que realmente estamos así actualmente en el sector, sobre todo que trabaja con el CSS?
¿85 contra 11?
Yo creo que esto está muy sesgado porque al venir del State of JS,
porque si no recuerdo mal empezaron solo haciendo el State of JS y luego hicieron el CSS.
Entonces, claro, todo el público que tienen ya era bastante orientado a JavaScript,
entonces yo creo que esto sesga.
Y además de los canales por los que publicitan esto, que hay mucho Reddit y cosas así, que eso afecta.
Claro, porque yo estoy totalmente de acuerdo contigo, que realmente creo que es esto,
que de cómo la gente consume la información y le llega a esta encuesta.
Y creo que sería interesante, no sé si a través de trabajo en grupos, yo que sé,
Women in Tech, por ejemplo, y el pasar esta encuesta de una forma más activa,
pues para intentar conseguir una muestra más interesante, porque queda demasiado bestia.
Y yo, aunque es verdad, yo al menos reconozco que obviamente todavía está dominado por hombres,
pero no sabría decir ahora si es un 85%, me parece muy bestia.
No sé, ¿qué opináis?
A mí me ha sorprendido mucho, porque siempre se ha visto un poco el CSS como algo más de diseño,
el diseño como algo más de mujeres, aunque no me gusta mucho eso,
pero por eso me sorprende aún más que sea ese 85% hombres blancos.
Blancos.
Totalmente.
Otra cosa ahí ya.
También, cierto.
Tenemos la raza y la etnia y blanco o desc, no sé qué es, descendiente de europeos, 76,6%.
La siguiente sería hispano o latino.
Y luego ya los asiáticos del este.
Pero es verdad que a partir de ahí casi todos son blancos o descendientes de europeos.
Es curioso eso de blanco o descendiente de europeo,
porque me pregunto dónde hemos terminado un poco los hispanos.
No sé si hispanos se refieren más a la parte de América
o nosotros españoles somos descendientes de europeos
y entonces nos han dejado ahí.
Es un poco raro esto.
Bueno, al final es de lo que hayas contestado, ¿no?
O cómo tú te califiques.
Exacto.
Interesante.
Es súper interesante eso lo que dices, ¿eh?
Cómo te sientes tú, porque igual tú mismo no te ves como hispano,
te ves como descendiente europeo, totalmente.
Igualmente, creo que es muy interesante de que compartan también los datos demográficos
justamente para esto que estamos haciendo ahora, ¿no?
Para poner en contexto los resultados, ¿no?
Si no, si nos dieran los resultados directamente, pues estarían distorsionados.
Exacto.
Creo que es súper importante empezar con esto, por eso que comentáis,
porque las cosas que vamos a comentar aquí, pues hay que ponerlas en el contexto de,
por ejemplo, a lo mejor podemos ver una tecnología que se utiliza mucho y de repente decimos,
pues a mí no me da esa sensación, o al menos en mis empresas que tengo alrededor no lo hacen.
Y por eso creo que es interesante que lo entendamos así.
Vale, pues un poco ahora que ya sabemos esta demografía, un poquito tendríamos el tema de las características, ¿vale?
Y en las características, pues bueno, tenemos las propiedades que más se están utilizando,
las que han evolucionado más y todo esto.
Y hay algunas que ya este año parece que han dado un salto y en 2019, cuando ya se hizo esta encuesta,
teníamos que un 54,7% de la gente hablaba de GRID y decía que ya lo había usado, ¿vale?
Que lo estaba usando.
Y había un 43% que lo sabía, pero que nunca lo había usado.
Y en cambio este año, este año 2020, tenemos que un 73,3% ha dicho que ahora sí lo ha usado
y además que la conoce un 25,6.
O sea, ha aumentado tanto la gente que de alguna forma lo conoce y ha aumentado bastante la gente que lo ha utilizado,
que realmente lo ha llevado a producción.
¿Qué os parece esto?
¿Esperabais que GRID subiese tanto?
Hombre, si ya era hora, ¿no?
A ver, Nuria, cuéntanos.
Ya era hora, por fin, ¿no?
Por fin.
Hombre, es que, bueno, supongo, no sé realmente a qué se ha debido.
Supongo que la introducción en frameworks populares de que ya han pasado a usar el sistema de columnas en GRID y tal.
Y supongo que también el ir dejando atrás Explorer, que era el que tenía problemas para soportar GRID.
Pero es que vamos ya a la hora porque...
O sea, hacer layouts, incluso con Flex.
O sea, Flex estaba bien para muchas cosas, pero según qué cosas, GRID es que lo haces en un PLIS.
O sea, que me alegro que la gente ya, no sé, viva más tranquila usando GRID porque mola mucho.
Es interesante eso que dice Flexbox porque este año Flexbox ya en 2019 tenía un 94,7% de gente que lo sabía y lo usaba.
Y en 2020 ha subido.
O sea, pese a que GRID ha subido muchísimo, Flex también ha subido y se ha quedado el 97,5%.
O sea, digamos que para los encuestados casi en cualquier proyecto que utilizan, en todos han utilizado GRID, Flex en algún momento.
Es bastante sorprendente.
Pese a que sube GRID, la gente utiliza todavía más Flex.
Bastante curioso.
Adrià, ¿tú qué crees esto de GRID?
¿A qué crees que puede haberse debido?
Bueno, yo lo primero que voy a decir, que lo has comentado tú, es que tenemos una cosa a celebrar,
que es que ha parado el soporte, o sea, Microsoft ha parado de dar soporte a Internet Explorer.
Con lo cual, pues esto abre, sí, sí, hay que celebrarlo.
Una cosa buena, ¿no?
De este año.
Madre mía.
Sí, sí.
Yo estoy súper contento también y totalmente de acuerdo con lo que comentaba Nuria.
Al final, es súper útil y con Flex solo tienes una dimensión, ¿no?
Pues con GRID puedes hacer cosas mucho más complejas a nivel de layout.
O sea, que tiene sentido de que vaya creciendo.
¿Y tú qué dices, Carmen, al respecto de GRID?
Yo creo que ha subido y ha subido en España gracias a la labor de Diana Cebes.
Así, Diana.
Corazoncito.
Sí.
No, estoy muy contenta, la verdad.
Con tres líneas puedes hacer un layout súper fácil.
Te quitas de tener que añadir partes de frameworks que utilizabas solo por el layout.
Además, creo que lo más importante que ha hecho que esto cambie ha sido que,
como decían, la compatibilidad con los navegadores y que por fin hayamos tirado Explorer.
Porque Explorer fue el primer navegador que implementó GRID,
pero se quedó con propiedades antiguas que no fueron evolucionando.
Entonces, era como que hacks para todo y además que no era capaz de representarlo.
Hay un tema y es que SubGrid solo está para Firefox actualmente y creo que con SubGrid ya será la hostia.
Entonces, ya lo acabará de petar.
Muy interesante que mencione SubGrid porque vemos que SubGrid solo un 6% de los encuestados lo ha utilizado,
aunque un 43,3% lo conoce y un 50% no lo conoce.
¿Vosotros tres, alguno o alguna ha utilizado SubGrid?
Porque yo la verdad reconozco que lo conozco, pero no lo he usado.
Por un poco lo que comentas, Carmen, que la compatibilidad que tiene es bastante reducida.
¿Pero lo habéis probado un poquito?
No, más allá de probar el típico ejemplo de MDN, de probar cómo va y cruzar los dedos para que eso esté pronto en todos los navegadores.
No, soy parte de ese 40 y pico que está ahí esperando.
Vale, yo estoy en casi el 50% que casi no lo conozco y ya veo que me voy a tener que poner las pilas antes que sea demasiado tarde.
Vale, pues algo que esperéis, algún mensaje para la gente que no esté utilizando Grid o alguna recomendación.
Por ejemplo, Carmen, comentabas lo de Diana Cebes que me parece súper interesante y además está muy bien.
Y a mí, por ejemplo, yo sí que sabía en aquel momento, pero me ayudó a terminar de entender y estuvo muy bien.
No sé si tenéis algún mensaje de utilizarlo o alguna estrategia, que a lo mejor hay gente que no se atreve por el hecho de la compatibilidad con navegadores o alguna cosa.
¿Alguien tiene alguna idea sobre alguna estrategia?
Yo, para motivar a la gente, más que estrategia, diría que es que mola mucho Grid porque puedes hacer layout responsive sin necesidad de media queries.
Con lo que esto te facilita a nivel de implementación, de que el código escale bien, porque le quitas complejidad.
Y es que es lo que no ha pasado.
Totalmente, totalmente. Tenemos aquí una pregunta que dice Alex Zamora, pregunta, ¿es compatible con Edge?
¿Es recomendable para un sitio con mucho tráfico y es utilizado en diferentes navegadores?
Hombre, yo creo que no hay duda, ¿no?
Sí que es compatible con Edge y es recomendablísimo, ¿no?
Como dice Nuria, facilita un montón la vida y te tienes que pelar menos con media queries.
Así que, sí, y es utilizado por diferentes navegadores.
Pero como dice Carmen, es verdad que Internet Explorer, aunque es raro esto, ¿eh?
Internet Explorer fue como el que empezó el camino, dijo, sí, sí, no, vamos a hacer Grid.
Y luego dijo, ah, pero ya, hasta aquí.
Y lo dejó ahí como medio muerto.
Y es, por un lado, está bien porque de alguna forma tiene como una mínima compatibilidad
y tienes que convertirlo con Autopefrix o lo que sea.
Pero es verdad que te dejó como la miel en los labios, ¿no?
Te dice, sí, sí, sí.
No, esto va a molar mucho, ¿eh?
Y, adiós.
Mira, y por aquí Joan León comenta las cuentas de Twitter, que alguien la había pedido,
la voy a dejar aquí en medio.
Dice Joan León, cuentas de Twitter, Carmen Ansio, Nuria Coates y Adri Doz, ¿vale?
Ahí tenéis sus cuentas de Twitter.
Más apañado, Joan.
Sí, sí, sí, bien mandado, muy bien mandado, perfecto.
Vale, pues vamos con otra característica, si os parece, que es el tema de las interacciones.
Y a mí, personalmente, es una de las que más me gusta, que es la de Scroll Snap.
Y en este caso, también estamos viendo una evolución brutal que va del 11% y pasa al 21% ahí de golpe, pam.
Aunque parece que tampoco, aunque sí que hay gente que ha empezado a utilizarlo, veo que tampoco se ha popularizado sobre lo que es, ¿no?
Todavía le queda como bastante trecho, ¿no? De gente que no lo ha escuchado nunca.
¿Habéis escuchado a vosotros de Scroll Snap? ¿Lo habéis utilizado?
Adri, ¿tú lo has utilizado?
Sí, hicimos una pequeña prueba y por cosas del negocio no nos servía, al menos en nuestra empresa, pero va muy bien.
Realmente es una pasada la cantidad de Javascript que te puedes ahorrar con Scroll Snap para hacer una galería o cualquier slider, sí, sí.
¿En tu caso, Carmen, la has probado?
Bueno, pues hicimos el año pasado un proyecto en Holaluz, tipo el resumen anual de Spotify, pero con tu consumo.
Y a la hora de implementar slides y así, sí que nos habría ido genial.
Lo vi después, ¿vale? No lo conocía y lo vi justo después.
Entonces, cada vez que se tienen que hacer slides o así, tiramos de esto.
Entonces, está muy guay, la verdad. Es eso, te ayuda a hacer transiciones, incluso las animaciones entre transiciones son súper smooth, ¿sabes?
Y te ahorras eso, tener que meter Javascript.
Yo lo que, cuando utilizo Scroll Snap, lo que pienso es, ¿cómo hacíamos antes sliders?
¡Qué magia oscura! ¡Qué magia negra! Teníamos que hacer para hacer sliders, ¿sabes?
Aparte de alguno que fuese muy sencillo, que lo podrías hacer ahí solo con CSS, pero algo que pareciese como nativo de arrastrar el dedo y que hiciese tal, era como, ¿what? ¿sabes?
Tenía como un Javascript a hacer esto. O sea, me parece un locurón.
No sé, Nuria, si tú lo has podido probar.
Lo probé un día casi sin darme cuenta. Lo típico que haces es un poco de copy-paste, porque vas con prisas.
Y era como, estaba probando y digo, hostia, ¿qué es esta magia? Solo CSS.
Y entonces descubrí que era eso.
No lo he usado mucho porque últimamente no he hecho muchos sliders.
Bueno, supongo que también te puede servir para típico página de scroll o de secciones y tal, pero no lo he usado aún.
Os recomiendo mucho un tutorial que tiene un chaval súper majo, pero súper majo, ¿eh? Es súper majo.
Que creo que se llama Midudev o algo así.
Y tiene un artículo y lo explica.
Y no, la verdad es que mola mucho la magia esa porque, sobre todo en dispositivos móviles, el ver como no laguea absolutamente nada.
Como dice Carmen, esa sensación de que esto es nativo y que siempre, no sé, que son seis líneas de CSS.
Es maravilloso.
Es brutal.
Brutal.
Muy bien, pues lo siguiente, lo siguiente que queríamos comentar, tipografías.
Y aquí viene un poco sorpresa, ¿vale?
De tipografías porque el año pasado el 93,4% utilizaba Fontface, que por supuesto Fontface es como para utilizar una fuente personalizada que no tienes en el sistema.
Y en 2020 la gente dice que la usa menos.
¿Cómo puede ser esto?
Qué raro, ¿no?
¿Qué opináis?
¿Qué dices, Carmen, sobre esto?
Aunque solo es un 1%.
Tengo una hipótesis.
Pues suéltala, cuéntala.
La he estado comentando con Elena.
Anda.
Pensábamos lo mismo porque Elena, si no lo habéis visto, tiene una charla brutal de Frontfest del año pasado.
Es que ya con la pandemia ya me lío de años.
Creo que fue el año pasado o el anterior, no lo sé ya.
Bueno, pero de tipografía para desarrolladores y es brutal.
O sea, tenéis que verla.
Volviendo al survey.
Lo primero que he pensado es, ¿la gente está usando más fuentes del sistema?
Y he dicho, no, no puede ser, sería muy raro.
Entonces, puede ser que la gente esté utilizando más servicios FDN tipo Google Fonts.
Y lo que esté haciendo es que, como cogen el código que te genera, lo copias y lo pegas, no seas consciente de que lo estás usando.
Claro.
De que tienes el phone face por detrás.
Porque tú, como haces un muy importante ahí, pues copias, pegas y a lo mejor no es consciente la gente que lo está usando.
Y por eso ha puesto que no lo usa.
Es una hipótesis, ¿eh?
Puede ser.
No, no, la verdad es que sí.
A ver, cuidado con esto, para la gente que nos escucha, que justamente el tema de las cachés de CDN es una de las cosas que eran más interesantes de utilizar phone face de Google, que dentro de poco no va a servir.
Entonces, la gran ventaja que era utilizar una CDN y que si ya se había descargado esta fuente de la web A e ibas a la web B, pues reutilizabas esa caché, eso va a dejar de funcionar.
Así que igual es un buen momento de revisar esto en este caso.
Hay otro problema.
Cuenta, cuenta.
De Google Font.
Ahí, ahí.
Que es que también lo ha salido hablando con Elena, que es que es muy crack de tipografías, de verdad.
Seguida.
Y es que lo que utilizas ese CDN de Google Fonts no te da acceso a todos los glifos de esa tipografía.
Que va muy relacionado con que tampoco utilicen font variant.
Porque claro, si no tienes acceso a todos los glifos, ¿para qué vas a utilizar font variant para retocar ligaduras o temas así que no tienes acceso?
Entonces, tendrías que descargarte la fuente, convertirla y utilizarla desde el local.
Claro.
Creo que es otra limitación dependiendo de lo que necesites.
Y en vuestro caso, Nuria y Adrián, no creéis, porque Carmen dice, bueno, no confío que sea que la gente está utilizando fuentes del sistema.
¿Vosotros qué opináis sobre esto?
Yo comparto 100% la teoría de que es porque la gente tira de Google Fonts y hace el import y no se da cuenta de que está usando Fontface.
Porque es que, o sea, tú has visto alguna web últimamente que sea con Arial o Verdana.
Es que ya no se ven.
Es todo roboto y open-sans y cosas así.
O sea, seguro que sí.
Pero, di, di, Adrián.
Dale, dale.
Sí, yo ojalá la hipótesis sea la de que más gente está usando la del sistema.
Porque al final, a nivel de performance, te ahorras bajarte puentes, no hay swap en el delay de cargar la fuente.
Y además, el usuario ya está acostumbrado a leer de esa fuente, con lo cual es más familiar a nivel de user experience.
Con lo cual, yo, las dos hipótesis para mí tienen sentido, ¿no?
Porque seguramente hay mucha gente que está usándolo y no sabe, no es consciente.
Pero ojalá sea la otra.
Que más gente está usando la fuente del sistema.
Totalmente, totalmente.
Yo tengo que decir que, aunque creo que tenéis razón, o sea, comparto un poco lo que dice Adrián, ¿no?
Pero creo que sí que hay algo de lo de la fuente del sistema, porque cada vez más grandes players, por ejemplo, GitHub, sin ir más lejos, o no sé, Vercel, por ejemplo, o midu.dev.
No, pero, en serio, cada vez hay más páginas que realmente están utilizando el sistema.
Y yo no fui consciente de hasta cuánto, cuando hubo una versión de Chrome que introdujo un bug, no sé si os acordaréis de esto, pero fue un bug que fue súper tonto.
El caso es que cuando tú utilizas el PhoneFamily y utilizabas el churro este de las fuentes del sistema para utilizar la de Apple, la de Blink, la de, pues todas, ¿no?
La de Microsoft y tal, las que son buenas, digamos, para el sistema, que no es la típica Arial, sino que son como las que están mejor preparadas para el sistema.
Pues Chrome introdujo en una de sus versiones como un bug en la que se veía mal la de Apple.
El grosor se veía mal.
Y de repente entrabas en un montón de páginas y yo me di cuenta, porque en mi web me pasó, y digo, ¿por qué se ve esto tan mal?
¿Sabes? Y todos se veían, las negritas no se veían, se veían todas como todo plano.
Y entrabas en un montón de páginas y le pasaba.
Y yo, ostras, pues no es un error mío, ¿no?
Y pensaba que era un problema de mi sistema, que me había machacado la fuente, que me había hecho algo raro.
Y vengo a buscar, a buscar, resulta en Twitter, vi un hilo súper interesante donde un montón de gente se quejaba de esto, ¿no?
Y entonces te decían un montón de páginas que podías ir a ver que les estaba pasando este problema.
Y era bastante curioso.
Apple, por ejemplo, también en su página web utilizaban las fuentes del sistema.
Entonces, creo que tenéis razón, por más que me duela, pero me sorprende que hay cada vez más gente que sí que realmente está tirando de fuentes del sistema.
Que a lo mejor lo están poniendo como algo más secundario.
Creo que a lo mejor esta manía de utilizar PhoneFace, tengo que cargar una fuente hasta en mi blog.
Creo que a lo mejor, quiero pensar, ojalá, esté pasando.
No sé, pero igual tenéis razón y soy yo aquí deseando cosas, como le pasa con Adrián, que estamos deseando que las cosas cambien.
Vale, pues vamos a pasar ahora, si os parece, a las media queries.
Porque aquí va una que a mí me parece bastante sorprendente.
Y está el tema de que ahí, bueno, tenemos diferentes media queries bastante nuevas que nos ayudan sobre todo con el tema de la accesibilidad de nuestra página web.
Y una de ellas es el Prefers Reduce Motion y el otro es el Prefers Color Scheme.
La segunda yo creo que se utiliza más y lo veremos por el tema este del Dark Theme y que ha habido 10.000 millones de artículos sobre esto.
Pero me resulta curioso que con lo fácil que es utilizar estas dos media queries no se utilicen más.
Entonces, no sé, Carmen, ¿tú qué opinas sobre este poco uso del Prefers Reduce Motion?
Y si puedes explicar un poquito a qué se refiere este Prefers Reduce Motion.
Vale, a ver si lo explico más o menos bien que se entienda.
Bueno, si no tiene preferencia, ¿vale?
La propiedad, bueno, digo lo que es la propiedad, ¿vale?
Lo que hace es que te detecta si el usuario ha pedido que el sistema minimice todo lo que son motions, ¿no?
O sea, transiciones y así.
Entonces, puedes dejarlo como no preference, ¿vale?
Y es que no ha hecho ninguna preferencia conocida por el sistema o que sea reduce, que es este caso.
Entonces, puede ser que sea por desconocimiento y no lo sepamos porque a nivel de usabilidad o de la experiencia que tiene el usuario sí que afecta muchísimo.
Porque si tú estás diciendo, no, no, es que no quiero que haya ningún trigger que lance un bounce en un botón o cosas así.
Entonces, si el usuario lo pide explícitamente es porque realmente le afecta o le molesta.
Entonces, creo que no cuesta nada ponerlo.
Y creo que es por desconocimiento que no se pone.
Sí, porque son, a ver, se puede hacer un control más granular de esto, ¿no?
Pero el hacer un arreglo rápido de, bueno, pues voy a quitar todas las animaciones de mi web para no marear a un usuario que a lo mejor a la mínima pues le sienta mal o yo qué sé, o le cuesta enfocar la vista o lo que sea.
Pues estos son cuatro líneas de código.
¿Qué pensáis vosotros?
Adrián, ¿qué piensas de Preferred Reduce Motion?
¿O si tienes un mensaje para que la gente lo haga?
A lo mejor es que no muchas webs tienen animaciones.
Entonces, no se plantean usarlo.
Esa es mi hipótesis.
Ah, exacto.
Porque realmente yo creo que es muy interesante usarlo.
Porque hay gente que sufre, ¿no?
Pero claro, si tampoco tienes muchas animaciones, ¿no?
Estoy pensando en páginas que haya hecho y como mucho tenemos alguna animación en algún botón, pero nada muy fuerte, ¿no?
Oye, pues esa es una buena hipótesis y yo la verdad no había...
¿Ves?
Sabía que tenía que traer a Cracks porque seguro que estaba equivocado en las cosas que pensaba.
No, pero me parece súper interesante.
No había pensado en eso de que, bueno, puede ser.
Por ejemplo, yo no lo uso...
Claro, estaba pensando, yo no lo uso en mi web porque tampoco tengo animaciones.
Bueno, a lo mejor sí que tengo alguna.
No, no, caca.
Muy mal.
Sí que tengo animaciones.
Debería estar utilizándolo.
Entonces deberías usarlo.
O sea, que crees que a lo mejor es que un 50% de estos encuestados ni siquiera lo han necesitado, ni se han tenido que informar, ni nada.
Seguramente.
¿Tú qué opinas, Nuria?
Bueno, pues un poco lo mismo, ¿no?
Porque yo tampoco lo he usado, la verdad.
Porque normalmente no añado muchas animaciones, pero desconozco si la más mínima animación de, yo qué sé,
que haces hover y el botón se mueve como 3 píxeles.
Eso también se debería considerar o no, porque no he leído mucho sobre el tema.
Pero bueno, es que todo el tema de accesibilidad muchas veces se, bueno, se olvida de, no por mala fe, sino porque es como secundario.
Todo el mundo lo ve como secundario y no le prestamos la atención que deberíamos.
Y esto está mal y deberíamos prestarle más atención.
Porque muchas veces es que es esto, no es tanto trabajo extra, es pensarlo.
Totalmente.
Mira, Bautista dice, ¿cómo se utiliza?
Y Jorge Ocha dice, ¿pueden dar ejemplos?
Saludos desde Colombia.
A ver, rápidamente, es una media query, por lo tanto tú lo que dices, vale, media query,
y si el usuario prefiere reduce motion, ¿vale?
Que no quiere que haya cosas que se estén moviendo.
Entonces, dentro de ese scope, tú puedes utilizar las clases, ideas, elementos, los selectores, CSS, que quieras,
y decirle, vale, pues este elemento que estaba haciendo una animación, que hacía un fade in o lo que sea,
pues voy a sobreescribirlo para estos usuarios para que no haga esa animación.
A ver, realmente, mal usado, puedes hacer cualquier cosa.
O sea, mal usado, podrías decir, voy a intentar matar gente.
Entonces, la gente que me diga que quiere prefer reduce motion,
pues dentro lo que voy a hacer es que la animación sea más bestia.
A ver cuántos ataques de epilepsia soy capaz de conseguir.
Obviamente, con maldad se puede hacer cualquier cosa.
No, lo digo para que la gente no piense que es automático, ¿sabes?
De que lo utilizas y lo arreglas.
No, no, tú tienes que poner el CSS correcto dentro de esta media query en los elementos que lo necesitan.
Y alguien muy espabilado puede hacer mucho daño con esto.
Va un poquito alineado con la otra, ¿no?
La de Prefers Color Scheme, que también me sorprende.
Esto me ha sorprendido bastante porque la reduce motion, vale, es verdad que a lo mejor, pues lo que decía Adrián,
pues tanta gente a lo mejor no tiene animaciones y tal, pero de Prefers Color Scheme,
yo no sé vosotros o vosotras, pero yo he visto 10.000 millones de artículos y vídeos sobre esto.
Si es imposible, ¿quién no se ha enterado de esto?
De hacer tu versión en oscuro, el dark theme este.
No sé.
Bueno, pero igual la gente hace el dark theme y pone el toggle,
pero no lo hace según preferencia de usuario, no sé, por pensar algo.
Puede ser, sin utilizar la media query, ¿no?
Que utilizan el dark theme con un botón y dicen, bueno, pero me da igual su preferencia.
Sí, igual se lo guardan en una cookie o un local storage y ya está, no sé.
Totalmente, pues tiene sentido.
¿La habéis probado el Prefers Color Scheme vosotros?
Sí.
Yo no he hecho ninguna web con dos themes, o sea, con light theme, dark theme.
No, todavía no.
Y todavía sí.
A lo mejor ese es un poco el motivo, ¿no?
Porque no, no, sí que está muy de moda, ¿no?
Y a lo mejor para tu blog, pues es más fácil, ¿no?
Porque tienes pocos estilos, pero según qué negocios, de repente,
ponerte a estirar o hacer cambios según cómo tengas el CSS creado
y si es legacy, sobre todo, hacer grandes cambios
que impliquen un cambio de color de muchos estilos, puede ser complicado.
Entonces, y aparte, a nivel de producto, no sé si muchas empresas
lo tendrán como algo prioritario, ¿no?
Habrá muchas otras cosas porque al final, entre desarrolladores,
es muy conocido, pero no tanto a nivel de usuario de a pie, ¿no?
Claro.
¿Creéis que tampoco los usuarios que estén ahí pendientes?
Ah, sí, no, por favor, necesito que...
Pues tenga sentido, ¿no?
Al final, no sé si conocéis, pero ha habido un artículo
que es bastante famoso de esto del dark theme, que es este,
que básicamente te dice cómo hacer el dark theme o el dark mode este
en una línea de CSS.
Dices, filter, invertir todo, 100%, loco.
Y tus ojos ahí, ¡ah!
Negativo.
Mira qué bien funciona.
A ver, hay un...
La verdad, a ver, dentro de lo que cabe, tengo que decir que está bien pensado
porque luego lo que puedes hacer es decir, vale, el dark mode hace esto,
pero luego puedes hacer, por ejemplo, que las imágenes, ¿ves?
Aquí tenemos...
Las imágenes también las inviertes, pero lo que puedes hacer es que las imágenes
sean excepciones y a partir de ahí puedes empezar a ajustar ciertas cosas.
Pero bueno, me parece bastante...
¡Qué peligro!
Sí, no, esto es mucho peligro.
Pero ahí queda la idea, ahí queda la idea, que no se diga que no está la idea.
Pues pasamos, si os parece, unidades y selectores, porque este tiene sorpresa.
Estamos en 2020 y vemos que las...
Bueno, tenemos aquí la lista de las unidades que se están utilizando.
¿Cuáles son las siguientes unidades?
Las unidades que has utilizado.
Y aquí podemos ver que la primera es Pixel.
La que más está utilizando con el 99,1% es Pixel en 2020.
Vamos a ver, Carmen, ¿qué mensaje tienes para este 99,1%?
No, no, no, yo no juzgo a nadie, ¿eh?
A juzgar, no, es un consejo.
Dios me libre, Dios me libre.
No, no, me gustaría realmente...
Los mayores...
La juventud.
Lo digo por milagres mayores.
Que me gustaría saber realmente el por qué.
O sea, he hecho falta un poco, ¿no?, el poner la selección y por qué he dicho eso.
Que también sería un poco jauja, ¿no?
Luego todos los insights y toda la información que saldría de ahí.
Pero sí que me gustaría, ¿no?
Porque creo que a no ser que tengas un sistema que te venga heredado,
un proyecto que es que te lo tengas que comer, o sea, si haces algo desde cero,
tenerlo que poner en Pixel, estar viendo unidades de medidas como REM o E...
No sé.
O a lo mejor es también por desconocimiento o pensar que es complicado o es complejo.
Pero no tiene sentido teniendo 50.000 tamaños de pantallas,
de densidad de Pixel, de ventanas de navegador.
Lo veo un poco contraproducente porque luego vas a tener 50.000 media queries
para que se vea bien en todos los sitios.
Entonces, no sé.
Es un consejo, ¿eh?
Mejor que no se utiliza en Pixel.
Di que sí.
Ahí está.
Hay que hacer consejos, hay que hacer consejos.
Adrià, tú también estás riendo como diciendo...
A ver, como profesor, profesor Adrià, por favor, profesor Adrià,
cuéntanos, ¿cuál es su opinión en esta materia, tal, como experto?
Yo es que soy de buscar un poco las tres patas al gato, ¿eh?
Pero fijaros, ¿puedes poner la pregunta otra vez?
Por supuesto.
¿Cuál es...?
Bueno, la puedo poner directamente.
¿Cuáles de las siguientes unidades has utilizado?
Claro, no te dice durante el 2020, ¿no?
¿Por qué?
Por ejemplo, de los que estamos aquí, ¿cuántos han marcado Pixel?
Claro.
Sí.
Claro, claro.
Alguna vez lo hacemos.
Ya está haciendo así la pregunta.
O sea, no está...
Claro, estás condicionando un poco la respuesta.
Sí.
La verdad es que creo que tienes toda la razón, Adrià.
Y, de hecho, yo cuando leí esta pregunta, dije, ¿qué pregunta más desaprovechada?
Porque, ¿cuáles de las siguientes unidades has utilizado?
Es como si preguntas, ¿cuál método de array has utilizado en tu vida, ¿sabes?
Pues vale, pues for each.
Pues ganará seguro el for each.
Es imposible, gane otro.
Pero creo que la pregunta tenía que haber sido, ¿qué unidad consideras que es la más idónea
en X motivos, ¿sabes?
Para fuentes.
O para hacer unos...
¿Sabes?
Y entonces dices, ostras, pues la gente sigue considerando que Pixel es buena solución.
Que aún así me ha sorprendido bastante que esté tan, tan, tan, tan, tan, tan arriba, ¿vale?
Porque digo, bueno, pues igual ha habido un vuelco, ¿no?
Pero no.
Pero tienes razón, Adrià.
A mí me parece una pregunta que deberían...
De hecho, os juro esto que cuando la leí pensé, tengo que escribirles a la gente de la encuesta
para darle feedback y decirles que pregunten mejor sobre esta.
Porque me parece desaprovechada y es súper interesante en el mundo del CSS.
Y todo esto, Adrià, para decirnos que sigo utilizando Pixel, en realidad, ¿no?
Sí, yo utilizo bastantes unidades de las que salen ahí.
Sí, sí.
Es que depende de para qué a mí Pixel me gusta.
Pero en casos muy concretos.
Prefiero relativas, siempre.
Vale, vamos a ver lo que dice la gente, ¿eh?
Porque aquí a la gente le ha tocado un poco la fibra sensible, ¿eh?
Mira.
Ya, ya, ya, está claro.
Vamos a ver, aquí está la gente y dice...
No, no, solo hizo que me gustaría saber.
Pero claro, es que hay muchas casuísticas.
O sea, también REM y EM, para lo que lo quieras, pues te va a ir mejor.
O sea, incluso puede llegar a ser un coñazo utilizar EM.
Si tienes que estar perdiendo el rato de tu madre o, ¿sabes?
Es que depende del caso.
No te preocupes, Carmen, que están contigo.
O sea, no pasa nada.
Por ahora no hay equipo, no hay Team Pixel.
Hay Team REM.
José Hidalgo estaba aquí.
Team REM.
Estamos también por aquí Team REM 100%.
O sea, que ya ves.
Xavi Conejo dice, cough, cough.
En Ademinta hay mucho Pixel.
Lloro, cough, cough.
Dice Xavi Conejo.
Xavi Conejo, no sé si es amigo tuyo, Adrià.
Yo no conozco a esta persona de nada, ¿eh?
Sí, es del equipo.
No, no.
Vale.
Justin Stefano Osorio Macazana.
Tela, ¿eh?
Es un nuevo nombre.
Luego, es que no cabe casi ahí para leerlo.
Dice, EM es en base al font size del contexto y REM es en base al font size del root.
Es porque alguien estaba preguntando cuál era la diferencia.
Beethoven dice, a veces no se puede, hay que usar Pixel.
Me han tirado un muerto en mi antiguo laburo, que es trabajo, a puro Pixel.
Dice, Egoiz González, dice, ¿qué unidades recomendáis?
¿Podéis profundizar?
¿Qué?
Nuria, anímate.
¿Qué unidades le recomiendas?
¿En qué contexto?
Cada uno, claro.
Todo depende.
Claro.
Todas tienen su uso, ¿no?
Yo, o sea, yo casi por defecto, o sea, cuando no quiero pensar, uso REM, porque es lo que creo que es más fácil de manejar, porque es eso, no te cambia el valor según el font size del parent como en EM.
Entonces, para mí REM sería el por defecto.
Luego, yo qué sé, pues si es algo relativo al viewport, pues el VW o VH o la que se desconoce bastante y va súper bien es el Character Unit, el CH, que creo que está súper abajo.
Es buenísima el CH, buenísima, me encanta.
Y va súper bien para, o sea, el CH, quien no lo sepa, es el width del carácter cero, creo.
Entonces, va súper bien como para decir, pues yo creo, o sea, el ancho de línea que es ideal para leer, pues no sé, que son 70 caracteres o así, pues entonces pones 70.
Y entonces es independiente del tamaño de, o sea, cambian funciones del tamaño de la tipografía.
Y esto va súper bien para hacer cosas legibles a distintos tamaños.
Los contadores de números va súper bien el CH.
Cuando no quieres que al incrementar un número de un salto, o se va haciendo cada vez más grande, más pequeño, haces que tenga CH y entonces siempre se mantenga.
Sí, sí, súper interesante. Muy buen apunte lo del CH.
¿Alguna, Carmen o Adrián, que veáis aquí y que digáis, pues esta es poco conocida y yo también la recomiendo o yo la utilizo?
No hay ninguna. Por ejemplo, la del ex, esa es muy chunga, ¿eh? Ya el nombre, yo no utilizaría nada de mi ex.
O sea, la última, ¿sabes? Ex.
¿Te imaginas tú, o sea, programando? Dices, sí, voy a utilizar dos exes.
¿Dos exes? No sé, suenan muy creepy, suenan muy creepy y yo no la recomiendo.
Ya vemos que es la menos usada. Así que, bueno, ¿qué más por aquí? Dice PIMP, PX y Media Queries.
Mura, Kami, Kioto. A ver, vamos a ver, Media Queries es normal utilizar. Tampoco nos pongamos lo que yo creo que, sobre todo Carmen, creo que se refiere al hecho de tener que hacer demasiados Media Queries, ¿vale?
O sea, Media Queries al final llega un momento que tienes que hacer, pero una cosa es hacer los necesarios, otro vivir de Media Queries.
Diego Artiles usa REM, mayormente Betomen, tanto por ciento y REM, TIM, tanto por ciento, Viewport y VH.
¿Fuentes en pixel o REM? Pues creo que esto ya lo ha comentado Nuria y Carmen, que REM, siempre que podáis.
De los raros que usa M. Es un gustazo editar los tamaños de componentes enteros tocando solo el font size.
Bueno, es que ha escrito un montón de gente.
TIMPixel, REM, M, W y VH. Yo uso REM, algo pixel.
REM rules. Bueno, ya ves, Carmen, que casi todo el mundo estaba aquí con REM, REM.
REM, REM, REM. Parece un villancico.
Mira, José Hidalgo dice que SH no la conocía, voy a tener que ir corrigiendo a Google.
Manuel dice que ha pecado y que a veces sigo usando PX. No te preocupes. Nosotros, cuando no nos ve nadie, también utilizamos pixel.
Pero no lo vamos a decir aquí.
Vale, pues ahora que ya hemos tenido una sorpresa de las unidades y los selectores, creo que vamos a por, yo creo, el más interesante de los temas.
Y creo que aquí, pues, puede haber sangre. Y a mí me gusta que haya sangre. A mí me gusta.
Vamos a ver, aquí hay un cuadrante súper interesante que es sobre las tecnologías del mundillo, del ecosistema CSS.
Y se divide dependiendo de la satisfacción y el uso que tiene el usuario.
O sea, digamos que la Y sería la satisfacción y el eje de las X sería el número de usuarios que están utilizando esa funcionalidad.
Hay un montón de nombres aquí, nombres propios súper interesantes.
Pero vamos a ver, a hablar de algunos en concreto.
Por ejemplo, en el cuadrante de adoptar, ¿vale?
Que serían los que más satisfacción tiene y los que más se usan.
Tenemos cuatro tecnologías que cada una de más, bueno, POS CSS y SASSI que son similares.
Pero tendríamos la que más satisfacción tiene los usuarios es POS CSS.
¿Qué tal? POS CSS.
Es hora de aportar por POS CSS y darle una patada.
Queridos expertos, ¿qué hacemos?
¿Cómo lo veis? ¿Estáis de acuerdo?
Nadie se quiere mojar. A ver quién tira la primera piedra.
Yo no voy a decir.
Venga, pues Nuria, lánzate.
Bueno, yo no he entrado aún, o sea, no he entrado mucho en POS CSS.
Uso los dos, pero sobre todo SASS porque lo que me mola de SASS es que ya no tienes que configurar nada.
Que con POS CSS pues tienes que pensar, pues qué quiero, anidar, no sé qué.
Y te tienes que ir instalando los módulos uno a uno.
Entonces yo aún uso SASS.
Creo que aún estará aquí con nosotros algunos añitos más.
Pero vaya, que POS CSS también es muy interesante y a la larga sí que pinta que va a ganar más terreno.
Pero vaya, por ahora se pueden usar los dos conjuntamente.
Adrián, Carmen, ¿cómo lo veis esto? POS CSS.
Yo creo que a SASS le queda poco.
Porque, a ver, yo soy pro POS CSS, aunque por ejemplo en la compañía todavía seguimos en SASS.
Y estamos teniendo estas discusiones.
Pero creo que es muy interesante el hecho de que POS CSS te acerca a la plataforma.
Y al final acabas usando cosas que en algún momento van a estar implementadas por los navegadores.
Con lo cual creo que tiene sentido tirar hacia allí.
Y más cuando lo que te puede aportar SASS ahora mismo ya lo tienes.
Me estaba riendo del comentario que estaba aquí.
Perdón.
Es que es un troll.
Yo estoy de acuerdo, ¿no?
Y alguien preguntaba por aquí, Manuel, decía, no conozco POS CSS.
Básicamente la idea de POS CSS es un poco la idea que tiene Babel con JavaScript.
O sea, POS CSS es un transpilador de CSS.
Y tú escribes CSS, a veces algo parecido a CSS que no tiene por qué ser.
Porque aunque la idea sería utilizar el CSS del futuro, que como dice Adrián, te acerca a la plataforma.
Y eso te lo compila en algo que sea compatible para todos los navegadores.
Sin importar si soporta esa característica o no.
También es verdad que en POS CSS puedes utilizar cualquier plugin que hace verdaderas locuras.
Que no tiene nada que ver con lo que se supone que debería hacer CSS.
Y se puede convertir en algo mucho más peligroso que a lo mejor lo que es, digamos, SASS.
En el sentido de que es un lenguaje que no es CSS, que no es la plataforma.
Así que POS CSS al final, a mí esto me ha sorprendido.
Porque hay que ver un poco a qué se refiere exactamente con la satisfacción de POS CSS.
Si es como herramienta en sí.
Por ejemplo, mucha gente lo utiliza solo para añadir los autoprefix de forma automática.
O si realmente le están dando el uso que comenta Adrián.
Más de, no, no, es que realmente quiero utilizar el CSS del futuro.
Utilizo el POS CSS ENV, que es el que me da las características que van a estar en CSS.
Y me las compila para que mis usuarios lo puedan ver, sin importar si lo soportan.
Y eso ahí me deja un poco la duda, ¿no?
Pero bueno, que igualmente me parece interesante.
¿Cómo lo ves, Carmen?
Esto...
Pues, a ver, yo en el curro utilizamos, o sea, no hemos utilizado POS CSS, ¿vale?
Pero yo hace como cuatro años o así, no sé si fue en Call of Motion o no recuerdo bien...
Nayara Baroa dio una charla y lo primero que dijo fue tirar Sass o la POS CSS.
Y ella era Sass Girl, ¿sabes?
Entonces me dio un poco de miedo, lo veía muy claro ella ya.
Y creo que vamos hacia ahí.
Muy bien.
Hay gente por aquí que dice que sí, que Sass está muerto.
POS CSS Presetemps dice Joan León que es magia.
Sass dice Álvaro Goede que trae funciones que te salvan, como Lighten o Darken.
Juan Carlos invita también a Joan León.
Dice que para que él le va a convencer a que se pase a CSS en JS.
Hay aquí invitaciones cruzadas, ¿eh?
Ojo, ojo, cuidado, ¿eh?
Esto que se está poniendo...
Hay aquí que ya se está llevando un montón de cosas para estudiar.
Tani Paredes dice, confirmado, Sass está muerto, Adrián.
¿La ha matado a Adrián?
Pues ya está, muerto.
No, no.
Pues ahí tenemos también Sass.
Que en el cambio, en el punto de Sass, que se ve justamente aquí, justo debajo,
donde está Nuria, entre Nuria y Carmen, está Sass.
Entre Nuria y Carmen.
Pues Sass...
Sabe que le quiero.
Se acerca, se acerca a vosotras.
No se acerca tanto a Adrián, ¿sabes?
No, Adrián ha dicho que me quito de al lado a Adrián, que me quiere matar.
Me quiere matar.
Vale, pues Sass, digamos que esta desatisfacción no está tan mal.
O sea, no está mal, porque está en un 87%, Poses está en un 91%.
Es poca la diferencia.
Y es el más usado.
O sea, es la herramienta actualmente, por los resultados que está dando esta encuesta,
más usada.
O sea, aquí estaría un poco lo que comentáis, ¿no?
Que todavía como de vigente sigue, ya sea por proyectos anteriores,
e incluso por decisiones más actuales, ¿no?
Decir, oye, es que domino mucho Sass y a lo mejor es la forma como la quiero hacer, ¿no?
Y no sé yo si esto va a cambiar pronto, porque, ¿cómo lo veis?
¿Va a cambiar esto?
O todavía el año que viene veremos Sass bastante a la derecha, arriba a la derecha.
Yo creo que va a estar.
Vale, o sea, sigo los tres a la vez, encima, ¿eh?
No sé si os habéis puesto acuerdo en el chat.
Venga, los tres a la vez.
Sí, va a estar, va a estar.
Pues sí, yo creo que sí, que va a estar.
Y es que cuesta, cuesta que estas cosas puedan salir.
El que ha salido del cuadrante es Bootstrap.
No se ve porque está justo ahí en...
A ver, voy a hacer esto aquí, así.
Y aquí, aquí estamos.
Bootstrap se ha quedado, claro, la satisfacción...
Se utiliza mucho Bootstrap, pero la gente como que no está contenta, ¿eh?
Está por debajo del 50%.
Y en cambio, BEM, ¿sois fans de BEM?
Yo sí.
Sí, sí, sí.
Muy bien, pues BEM ahí está.
Habéis votado bien por su satisfacción, pero no lo usa tanta gente como Sass.
Lo cual me hace preguntarme qué utiliza la gente con Sass.
¿Sabes?
O sea, qué utilizan para controlar que no colisionen sus clases.
Van a lo loco, utilizan otro sistema que no se ve aquí.
O sea, puede estar Suite, pero Suite no es muy usado.
Y de hecho, aquí creo que no aparece o está muy oculto.
O sea, que no sé.
Me sorprende, ¿no?
Que mucha gente dice Sass, pero luego las clases a lo loco, ¿no?
O sea, no hay ningún tipo de...
No sé qué utilizará esta gente.
Está el Components.
Ese es el otro que tenemos, el cuadrante.
Está el Components.
La gente está contentilla y ya parece que la usa más gente que PostSS.
¿Os gusta?
Está el Components.
Es una cosa a considerar.
Es una cosa que usaríais, que no usaríais.
A ver, Nuria, ¿qué estás pensando?
A mí, bueno, es que yo tampoco soy muy de React.
O sea, mi opinión no vale aquí.
Pero, o sea, le veo alguna ventaja, pero en general no me gusta mucho el tema de mezclar CSS y JavaScript.
No sé.
Una cosa, me encantan las caras que habéis puesto cada uno.
¿Sabes?
He dicho esto y cada uno como que uno así, otro...
¿Sabes?
Como que se leía en vuestra cara un poco la opinión.
A ver, Carmen.
A ver.
Yo es que no quiero contradecir a Juan Carlos, que está por ahí así.
Dale, dale, de nada.
Y así es.
Dale.
Pero tampoco estoy muy a favor o de...
Para mí no me funciona bien en mi cabeza el hecho de mezclar tantos JavaScript con CSS.
Pero en mi cabeza, ¿eh?
Pues, quiero decir que no es que no sea válida la opción.
No seáis políticamente correctos.
Dale caña.
O sea, le vais a hacer una obra a mucha gente.
Pero luego me va a dar todo Dios, ¿sabes?
O sea, si digo que no, que está mal caca, que la herencia qué, y especificidad y todo el rollo, pues me van a dar.
Pero mi opinión para mí no me acaba de funcionar.
¿Tú qué dices, Adrià?
Que también estabas poniendo cara de...
Sí, es que, no, yo estaba pensando que la próxima vez alguien de SoundCompones tienes que invitar, porque si no, estamos muy de acuerdo, ¿no?
Los tres o los cuatro.
Ah, no, yo no he dicho nada todavía.
Ojo.
No he dicho nada, pero sé que también prefieres ir hacia la plataforma, ¿no?
Y a mí tampoco mezclar lenguajes no me acaba de gustar.
Spoiler.
O sea, que sí.
Igualmente, es que cuando veo esta encuesta me pongo un poco filosófico.
Y os tengo que decir que es súper guay ver la cantidad de frameworks y opciones que hay, ¿no?
Esto quiere decir que a lo mejor CSS evoluciona como lento y entonces la comunidad es la que va empujando a estos cambios y los vamos probando.
Y seguramente los que mejor funcionan son los que luego siempre acaban como estándar, ¿no?
O sea, que, no sé, que a mí me gusta que haya mucha diversidad en todos los ámbitos, de hecho, pero en este también, ¿no?
Creo que es interesante, ¿no?
Ver cómo vamos pensando distinto y vamos buscándonos la vida, ¿no?
Como desarrolladores.
Total.
Así que quiero decir que he amado Sass durante mucho tiempo, ¿no?
Y cumplía unas funciones, pero, bueno, la plataforma va evolucionando y vamos prosiguiendo.
Yo tengo que decir sobre Start Components, Adriana me ha hecho un spoiler un poco, ¿eh?
De lo que iba a decir, pero yo creo que todo, y un poco al hilo de lo que comentaba Adriana, creo que todo tiene su uso.
Yo no creo que las cosas puedan ser siempre de blanco o negro y todo tiene como su momento, su mercado y sus historias.
Por ejemplo, a mí Start Components en realidad me gusta bastante, me gusta mucho.
Me gusta mucho, pero en un proyecto serio, por ejemplo, que tenga que asegurarme que es un producto que tiene que vivir durante a lo largo de los tiempos,
que tiene que ser escalable, que tiene que evolucionar y tal, seguramente no lo usaría.
Porque Start Components creo que da una forma de fungible, le veo como un tufo a que puede ser Start Components, luego será Emotion, luego será tal, ¿no?
Y le veo como que fácilmente se puede quedar en algo que voy a tener que tirar.
Entonces, en un proyecto yo muy serio, seguramente, en una empresa como está Carmen, ¿no?
Que comentaba no la luz y tal, pues utilizaría una tecnología bastante más contrastada.
Y intentaría estar lo más cerca de la plataforma porque sé que la plataforma justamente es la que ofrece ese tipo de garantía en el tiempo, ¿no?
De que es lo más fiable, demostrado empíricamente durante 25 años, ¿no?
De que es lo que evoluciona pero no te rompe mucho los esquemas.
Pero para un proyecto pequeño, por ejemplo, lo que digo, a mí Start Components me gusta, a lo mejor para un proyecto pequeño sí que lo haría.
Pero en mi empresa yo jamás aconsejaría utilizar Start Components, nunca.
O sea, y de hecho me chocaría mucho.
Y he visto proyectos que han tenido problemas justamente por apostar en este tipo de cosas, ¿no?
Bueno, como haces Start Components, pues ahora resulta que no puedes actualizar la versión de React.
O es que tienes que subir la versión de Start Components porque si no te peta esto y lo otro.
Y la librería que estoy utilizando.
Y te da muchos problemas.
Cuanto más grande, más quieres que escale, más quieres que dure en el tiempo, pues más difícil.
Por eso siempre apuesta por la plataforma.
Eso sería un poco la razón.
Mucha gente ya está nerviosa, está súper nerviosa y nos está preguntando con Tailwind CSS, ¿vale?
Tailwind CSS que además no sale en este cuadrante, ¿vale?
Esto es una cosa que es bastante interesante.
Tailwind no está en el cuadrante de adoptar, ¿vale?
No está entre SaaS, BEM, Start Components, Post, CSS, sino que está en el de evaluar.
Porque tiene pocos usuarios, pero la satisfacción es bastante alta.
Esto también es bastante curioso con CSS Modules y Atomic CSS.
Entonces, ya que mucha gente lo está preguntando, me gustaría que exploráramos vuestras opiniones.
Así que empezamos, si os parece, con Carmen.
A ver qué opina.
No pasa nada, Carmen.
¿Quieres que me dé hoy?
Tailwind CSS.
Vale.
No puedo opinar a nivel profesional, digamos, porque no lo he utilizado en un proyecto grande.
Me instalé un feed en mi casa y estuve probando.
Entonces, su paradigma principal que se basa en Utility Classes, pues no soy muy fan de las Utility Classes.
O sea, Utility Classes sí, para cosas que tengas detectadas o casuísticas o problemas que te encuentres y dices, siempre me pasa esto, pues quiero anidar este hijo aquí y hacer así y tal, pues vale.
Pero tener megachurros de Utility Classes en el HTML enganchados, no me gusta.
Y ahí lo he dicho, ya está, y punto.
Y quien vaya a decirle algo a Carmen, que me diga a mí algo.
O sea, que le voy a defender a muerte.
Pero sí que es verdad que mucha gente que conozco y desarrolladores y gente crack, pues está contenta con Tailwind, así que...
A ver, Nuria, ¿tú qué opinas? ¿Tailwind CSS?
Odio Tailwind, o sea, es odio.
Bueno, no puedo.
No pillo yo, va a pillar a Nuria.
Es odio, directamente.
Me encanta porque has estado buscando...
No lo entiendo, ¿eh?
Lo he intentado, pero no puedo con él.
Pero me encanta que estabas buscando las palabras, como digo yo, que odio esta cosa, pero que no parezca que es odio.
No pasa nada.
Muy bien.
Es que, o sea, lo he intentado, ¿eh?
Y esta semana pasada estuve dos días metiéndole caña a Tailwind.
Y es que no entiendo, o sea, entiendo los motivos que razonan ellos de tal, pero no entiendo que realmente solucionen los problemas que dice.
Y es eso, o sea, el tema de utility, sí, totalmente, hay muchas clases que, o sea, muchas ocasiones que tienes que usar una clase utility es lo mejor que puedes hacer.
Pero hacer un utility only es que no lo veo, o sea, por la lectura del HTML, porque el tema de nomenclatura al final es que no te lo ahorras, porque si tú haces un componente y tienes que, yo que sé, en Ben, pues haríamos un modifier, ¿no?
Para pintar el botón rojo o primary o default o lo que sea.
Y esto igualmente es que le vas a tener que poner un nombre, ¿sabes?
Es que no te ahorras nombres, pensar nombres.
Sí, te ahorras el caso de meterle una clase para ponerle margin, pero que eso ya lo podrías hacer en cualquier caso.
Y no sé, tío, no puedo con Tailwind.
Yo la verdad es que cuando veo, yo me acuerdo, estuve en una empresa, bueno, en mi empresa me mandaron al Reino Unido y me acuerdo cuando estaba allí que me decían,
madre mía, es que estamos haciendo una cosa brutal con Atomic CSS.
Y yo, madre mía, vamos a ver.
Y me encontraba estas class names, así de class, fix, inset, cero, flex, items, nada, plum, pam.
Y luego se repetían otra vez, o sea, a mejor alguien, el fix, le había puesto el primero y al final tuvo que cambiar el dedo del fix.
Entonces, le añadí al final uno que cambiaba el fix por un relative y decías, o sea, ya no sabes ni lo que está haciendo esto.
Es que lo tienes que aprender, o sea, quiero decir, primero que dejemos a un lado que no sea semántico, ¿vale?
Pero es que además es que te lo tienes que aprender.
Y yo, poner un text center cuando puedo y decirle text center a lo que a mí me dé la gana y que no quede atado en HTML, pues.
O sea, bueno, es curioso cuanto menos.
Es verdad que tiene como ciertos componentes ya hechos, ¿vale?
Que se supone que ya no tienes que utilizar estas clases porque ya tiene el componente y tal.
Pero, bueno, este es Tailwind.
Aprovechad, podéis hacer una foto ahora porque creo que es la única vez que vais a ver a Carmen y a Nuria al lado del logo de Tailwind.
Haced la foto ahora mismo, aprovechad.
Luego nos podéis trolear.
Adrián, a ver, cuéntanos tú.
A ver, no tengo una opinión muy fundada.
Lo he probado muy poco.
Lo que sí que os puedo decir es que igualmente se puede usar con clases.
Puedes hacer con la directiva Apply, aplicar todos los estilos, con lo cual, bueno, puedes utilizar, si no te gustan las clases de utilidad,
pues podrías hacer clases, ¿no?
Que aplicaran varios estilos a la vez y ahorrarte estos párrafotes ahí en el HTML.
Igualmente, a mí, para eso ya casi abre Style, el atributo Style y escribes ahí los estilos directamente.
Porque tampoco no te aporta mucho a mi manera de verlo, ¿eh?
A veces me da la sensación de que algunos frameworks están hechos para que no aprendas realmente CSS, ¿no?
Y para que no sé, para ahorrarte, ¿no?
Pensar en especificidad, pensar en la cascada, etc.
A ver, yo creo que Tailwind, y lo voy a decir esto de verdad, creo que es la hostia.
Es la hostia si estás prototipando un proyecto, si quieres hacer cosas muy rápido, lo mismo.
Yo diría que es el bootstrap que nos espera en este nuevo decenio, en mi opinión.
Creo que a la larga es lo típico que te da un montón de problemas, de que esto no escala, de que quieres hacer lo que contamos, ¿no?
Que tiene un montón de problemas.
Lo que dices del Apply es verdad.
Y claro, es que al final dices, bueno, pero si supieses CSS, si te pones a hacer applies de clases y tal, y de estas cosas, no lo podrías hacer tú mismo.
Y al final, a veces me da miedo que es esta sensación de que dices, Tailwind es la hostia, porque realmente, sin tener ni puñetera idea, soy capaz de hacer cosas muy potentes.
Y por eso creo que es lo mejor de Tailwind, ¿no?
Pero por otro lado, en realidad, tiene ese peligro que ya vimos en su día, que pasaba con Bootstrap, y me da la sensación de que en Tailwind va a pasar un poco lo mismo.
De hecho, ya no sé si a ustedes os pasa, pero a mí ya me pasa que entro a webs y sé que están hechas con Tailwind, que es lo mismo que me pasaba en ese día con Bootstrap, de que veías webs que decías Bootstrap, Bootstrap.
Y ya empiezo a ver algunas y digo, Tailwind, Tailwind, porque empiezo a ver justamente esos componentes que están reutilizando, que empieza a ser un poco, todavía no es muy bestia, pero creo que poco a poco va a ir a más, ¿no?
Porque la verdad es que lo está petando y va a tener que convivir con nosotros.
Así que creo que esa es un poco nuestra opinión en general, creo que coincidimos bastante con esto.
Tailwind, no sé, mucha gente estaba por aquí, había gente que sí que le gustaba, hay gente que le gusta Bulma, que al final es algo parecido también a lo que puede ser Tailwind,
solo que me has pensado en componentes que ya puedes usar directamente. Todos estos, Bulma, muchas de estas cosas, al final lo que haces es evitar lo que comenta un poco Adrián,
que es para ir súper rápido al principio. Y creo que por eso para prototipar puede ser guay. Tenemos aquí gente que dice, Roby dice, Adri guapo, o sea, ya directamente, o sea, guapo.
Tenemos a David y Mario dicen, Tailwind CSS solo aporta para realizar proyectos que necesitan un MVP rápido.
¿Ves? Yo estoy por ahí. Dice Cristian, dice, Tailwind no tiene componentes definidos. Lo cierto es que ahora sí que hay como componentes que están hechos con Tailwind,
o sea, tienes un CSS framework con componentes. Mira, lo vamos a ver aquí en un momento.
Tailwind UI, ¿no? Se llama.
Sí, Tailwind UI. O sea, que al final utiliza Tailwind. Claro, Tailwind como per se no, pero sí que tenemos Tailwind UI y que van un poco por ahí.
¿Qué más? Mira, hay más que, o sea, es que Tailwind es una cosa que, que lo mejor es CSS a pelo y punto. Dice Manuel.
Y que Luis dice que no, con Tailwind puedes hacer los componentes a tu gusto, de manera más fácil.
Claro, una persona que sepa CSS...
Es que depende mucho, o sea, no es blanco o negro y, claro, una cosa es lo que yo opine bajo mi experiencia y mis necesidades,
necesidades y luego están las necesidades o en caso de proyectos, pues, cuántas manos tienes, cuánto tiempo tienes, cuánto dinero tienes.
Entonces, Bootstrap en su momento ya lo que hizo fue acercar el poder hacer páginas como churros y gente que tuviese menos conocimiento en este caso
y con una documentación muy heavy, que si te lo leías, podías estar en media hora, pues, montando grids, responsive, layouts de todas maneras.
Súper fácil. Entonces, claro, si tu proyecto no tiene que ser mega personalizado ni un producto, ¿no?, ni una marca detrás y tal, pues, sí, pues, puede ser una opción buena.
Si tú tienes una imagen de marca detrás y con componentes súper personalizados y tal, pues, para mí no tiene sentido que tengas que atarte a algo que no sea agnóstico, ¿no?,
que tengas que atarte a eso cuando luego posiblemente la versión siguiente te machaquen cosas que ya no vas a poder reutilizar.
Totalmente. Decía por aquí Horacio algo interesante, decía que no olviden que no es lo mismo un diseñador que un programador,
por eso igual no les gusta Tailwind, guiño.
Sí, soy diseñadora.
¡Pasca!
No, pero puede ser, pero puede ser, o sea, es verdad que es posible que hay gente que dice, bueno, yo no quiero, es lo que decimos, ¿no?
No quiero aprender CSS, no tengo tiempo o lo que sea, con Tailwind lo tengo. O sea, que claro que tiene un mercado y se debe de...
Sí, sí, dale, Nuria.
Es que me parece muy curioso, ya no es por rajar de Tailwind, ¿eh? Pero me parece curioso esto de, es que no quiero aprender CSS, entonces uso Tailwind, pero, o sea, Tailwind,
o sea, si es Bootstrap te compro el argumento, pero si es Tailwind tienes que saber lo que hace Flex, porque la clase es que es Flex,
y el Plays y el Align Items o Items Sender, tal. O sea, te tienes que aprender... O sea, básicamente las clases tienen una propiedad,
entonces te tienes que aprender qué hace cada propiedad, ¿no?
A lo mejor es un poco como aprendo Vue o aprendo JavaScript.
Mira, Martín Racana dice, pero esta no es la idea de los frameworks, lo que haces el 80% de las veces lo automatizas con librerías y frameworks,
y el 20% que diferencia tu producto lo haces desde cero. Pero claro, ¿justamente quieres quemar el cartucho del framework en esta parte?
Es que piensa que a nivel de performance también te afecta, estás cargando cosas que a lo mejor no necesitas, ¿sabes?
Con Bootstrap al principio cuando no podías hacer una grid como ahora con Grid Layout, pues empezaron con módulos, ¿vale?
Pues te ibas cargando módulos o cargabas a lo mejor solo el del layout, entonces a lo mejor ahí tenía un poco de sentido,
pero ahora con tres líneas de CSS, que es el estándar de la SPEC, o sea, es que lo puedes hacer.
Y que si sobrevalento o no, que eso también lo he estado leyendo, hay propiedades que la gente no conoce que son de hace 10 años.
Efectivamente.
La verdad es que está habiendo un debate con esto de Tailwind, súper interesante el chat, esta gente es que es una tecnología que viene con mucha fuerza,
que tiene un subidón brutal y vamos a ver con el tiempo dónde queda, pero creo que sí que tiene su mercado,
que lo vamos a ver bastante y que tiene todo el sentido del mundo.
Bueno, solo que habrá en otros casos, como bien lo ha dicho Nuria, por si nos ha quedado claro, que no tiene tanto...
Pero que está bien, o sea, yo creo que lo bueno es lo que dice Adrià, ¿no?
Que lo rico que es el ecosistema de CSS.
No creo que pase nada porque odies Tailwind, porque siempre vas a tener un montón de opciones,
o al revés, ¿sabes? Que te enamore Tailwind.
Es que lo bueno es que tienes la opción de hacer eso.
Y yo creo que eso es lo bonito, ¿no? De lo que nos demuestra esta riqueza en el ecosistema del CSS.
Eso es lo importante.
Pues, si os parece, vamos con la última...
Voy a cerrar aquí las cosas que tenía de Tailwind.
Y básicamente vamos a saltar al tema de las opiniones.
Que son opiniones que tiene la gente, ¿no?
Que es, uno, si CSS es fácil de aprender, vamos a ver.
De uno a uno, rápidamente.
Porque dice, ha bajado, parece que la gente está viendo que cada vez está...
No, no, o sea, está menos de acuerdo. Antes estaba más de acuerdo.
O sea, que ahora lo vemos.
A ver, no, no.
Sí, sí, ya no están tan fuertemente de acuerdo.
O sea, la gente cree que se ha hecho un poquito más difícil CSS.
Hay un 50% que está de acuerdo, o sea, que está casi binario.
El hecho de que sea fácil de aprender.
Vamos a decir, ¿es que es fácil de aprender?
¿Tú qué crees, Carmen?
Que no.
Que puede que tenga una curva de entrada más suave que un lenguaje de programación como JS.
Como otro lenguaje de programación como JavaScript, ¿vale?
Pero que si quieres utilizarlo bien y con cabeza y no estar mirando el renderizado en el navegador y cambiando propiedades para ver cuándo está como tú quieres.
No, no, no, no es sencillo.
No es sencillo.
Nuria, es fácil lo que es.
Hombre, si ves los vídeos de Nuria seguro que es fácil, ¿eh?
Porque lo explicas súper bien.
Lo explicas súper bien.
No, yo creo que lo que dice Carmen es como fácil de entrar, pero es difícil de dominar.
Es que es, o sea, es que nunca se acaba.
Bueno, es que todo el tema front, ¿no?
Es eso, siempre hay como cosas nuevas y es como nunca vas a ser un crack absoluto porque siempre hay cosas a aprender.
Entonces, no creo que sea para nada fácil ser experto en CSS.
¿Tú, Adrián, qué comentas?
Concuerdo totalmente, sobre todo porque es infinito, ¿no?
Cada día hay cosas nuevas, hay librerías nuevas y hay nuevas propiedades CSS, pero también es parte de la gracia, ¿no?
Que va evolucionando.
Pero sí, sí que es verdad que la curva, lo que comentaba Carmen, ¿no?
Que al principio es bastante fácil, pero empieza a complicarse a medida que me quedas regresando.
Lo que pasa es que tenemos un montón de documentación y esto es mucha suerte.
Hay un montón de cursos, o sea, realmente es fácil al final obtener esa información.
Vale.
Pero hay que ponerle ganas.
Y también se pregunta sobre si evoluciona rápido o despacio CSS.
¿Creéis que está evolucionando despacio o que realmente está evolucionando al ritmo que se espera?
Que CSS se está poniendo al día rápidamente, lo que necesitáis.
Yo no lo tengo claro del todo, porque sí que es verdad que decía que hay propiedades que hace 10 años que están,
pero luego creo que hicieron un intento cuando CSS3 que lo modularizaron.
Entonces, por ejemplo, ahora Grid, ¿no?
Pues el primer nivel era GridLayout, con el segundo nivel será SubGrid.
Entonces, pueden ir modularmente haciendo updates sin tener que hacer el bundle entero, ¿no?
De CSS5, ¿sabes?
Entonces, creo que sí que hay un intento por avanzar más rápido ahora.
Me parece, me pasa a mí un poco como a ti, ¿no?
De que tengo el corazón dividido cuando leo estas cosas.
Porque por un lado digo, vamos, si evoluciona súper rápido.
Y por otro pienso, sí, evoluciona tan rápido.
Porque hay cosas que todavía o hace poco que podemos hacer que realmente como lo de centrar fácilmente algo verticalmente.
¿Sabes?
Dices, ¿cómo hemos tardado tanto en hacerlo de una forma tan fácil, que es algo tan sencillo, no?
Y me pasa también como, por ejemplo, cosas que se han quedado como en el tintero, ¿no?
¿Por qué no se ha matado a Sass ya?
Pues por el tema del ampersand, ¿no?
De cómo hacer el parent selector súper fácil en CSS.
Y me sorprende, ¿no?
Que han pasado no sé cuántos años desde que está en Sass y que no haya llegado.
Hay una proposal para hacerlo que creo que está en Stage 2, pero que todavía no está.
Y dices, ¿cómo esto tarda tanto?
Si es evidente, está contrastadísimo que esto funciona.
O sea, en Sass lo tienen...
No creo que haya que volver a abrir el melón.
O sea, creo que hay que copiárselo a algo que funciona.
Ya está.
Y no sé, ese es esto, ¿no?
Te tengo el corazón como partido.
Y luego, de repente, entro en Twitter y resulta que han abierto una nueva propiedad, que es la leche, que te hace mil millones de historias, ¿no?
Como, por ejemplo, pues lo del Funvariant cuando salió.
Que yo no sabía que eso iba a salir.
Y de repente, pues toma, aquí tienes el Funvariant y ahora puedes utilizar una fuente como quieras.
Y dices, vale, pues que rápido, ¿no?
Entonces, no sé, si esto lo compartís, Nuria, ¿cómo lo ves tú?
Yo creo que va...
Que va el ritmo que tiene que ir.
Es decir, que es que cuando hablamos de tecnologías web, es que no puedes ir muy alegremente añadiendo cosas al lenguaje, así como así, porque entonces te lo comes para siempre, porque no puedes quitar cosas porque se te rompe la web.
Entonces, hay que ir con cuidado y creo que en los últimos años, pues está yendo a un ritmo bastante bueno.
Y creo que, o sea, no me quejo.
Así también tenemos tiempo de aprender las cosas nuevas.
Esa es una buena.
¿Tú qué dices, Adrián?
Tengo sentimientos encontrados.
Por una parte, me gustaría tener los datos para saber cuántas recomendaciones ha sacado la V3C cada año, ¿no?
Y compararlas con la implementación que ha hecho cada uno de esos navegadores.
Porque muchas de las propiedades que nos preguntan en esta encuesta, luego entras y a lo mejor es una que propuso Google y solo Google ha implementado, ¿no?
Entonces, para tener un poco más de datos, porque a mi parecer va lento.
Le cuesta, ¿no?
A Grid le ha costado, a Flex le costó muchísimo y entran aquí varias cosas, ¿no?
También al final, si los developers lo acaban usando.
Más allá de si los navegadores también lo implementan.
Claro, porque aquí como que tenemos dos problemas, ¿no?
Que de hecho lo están diciendo mucho en el chat.
Está por un lado el problema de cómo evoluciona el lenguaje en sí y luego cómo evoluciona el soporte en los navegadores.
De hecho, una de seguramente las mejores funcionalidades que tiene CSS hoy en día, que son las custom properties, que son variables dinámicas con toda la potencia que tiene eso, en realidad es una funcionalidad que muchas empresas, por ejemplo, la nuestra, Adrià y yo lo sabemos por experiencia, no podemos utilizar porque necesitamos soportar toda Internet Explorer 11.
Entonces, claro, a lo mejor esta sensación de que evoluciona muy despacio es porque no podemos rápidamente utilizar lo que nos gustaría de CSS y nos vemos de alguna forma todavía estancados en muchas cosas que no nos permiten dar el paso hacia adelante.
No lo sé, es una reflexión que veo que mucha gente está diciendo por aquí, dice el problema no eran los browsers, mucha gente webpunk dice cough, cough, safari.
Oh, el nuevo Explorer.
El nuevo Explorer, totalmente.
Qué error.
La madre que los trajo esto de Apple.
Vale, pues os invito a que hagáis vuestras últimas conclusiones, opiniones un poco sobre la encuesta, sobre CSS en general, qué creéis que lo va a petar el año que viene o lo que os más ha gustado de este año, un poquito que hagáis un poco de retrospectiva y también pues lo llevéis hacia el futuro también esta reflexión.
¿Vale?
¿Quién quiere empezar?
¿Quién se anima?
Y también invito a todo el mundo que está en el chat, por supuesto, lo primero, que si os ha gustado esta pedazo de charla, que hemos tenido verdaderos expertos, que me parece que se han mojado, dando su opinión más honesta.
Que yo, por ejemplo, a mí me encanta que la gente se moje y diga, pues yo odio esto.
Pues ya está, no pasa nada.
Y nos queremos todos igual, que no pasa nada.
Y os invito a que le deis un like, hombre, por haber estado aquí una hora y algo, bueno, sobre todo, yo les voy a dar un like, seguro, porque no les he pagado por esto y deben estar pensando, bueno, oye, que son las once y media y mañana es fiesta, pero quiero ir a dormir.
Eso para empezar.
Y luego, porque eso, que le deis un like, que se lo merecen.
¿Vale?
Vamos a empezar con Carmen.
Venga, voy a dar así un poco mi resumen de este año de CSS y lo voy a enfocar en el sentido de que veo que cada vez más el paradigma de desarrollo y de CSS se está aplicando a herramientas de diseño, de UI, que eso es lo que más me gusta.
Tenemos Figma, que está web y está también para inspeccionar desde la propia aplicación y tiene todas las propiedades que hace CSS en tanto temas de fuentes, de boleanos, de entonces ver que las herramientas cada vez se acercan más y sobre todo que se piensa en el tema de hacer el traspaso de diseño a desarrollo es lo que más me está molando de todo esto.
Bueno, súper interesante.
Muy contenta.
Va a ser brutal, ¿no? El hecho de que va a desaparecer cada vez más esa pared del diseño y la programación y cada vez lo va a tener más en cuenta. Genial.
Vamos con Nuria.
Bueno, yo la sensación que he tenido, sobre todo este último año, igual y el anterior un poco, es que cada vez más se está empezando a valorar realmente CSS como lo que es.
Aún sigue habiendo mucha gente que dice que está mal hecho, que basura tal, pero no sé, hay muchas más voces ahora que veo que se está empezando a defender CSS como un lenguaje serio, que ya no es ese juguete mal hecho que antes era como la opinión mayoritaria.
Y creo que está guay que empezamos a valorar eso como lo que es.
Muy bien. Y de cara al año que viene, ¿qué es lo que más estás esperando? Que digas, ostras, pues me gustaría...
Que pase de moda Tailwind.
De repente, que desaparezca.
No, ahora, coño, aparte, lo que me mola de que esté de moda Tailwind es que, bueno, es lo que decía, ¿no?
Que antes era bootstrap para pensar cero y ahora por lo menos ya estamos intentando desarrollar un poquito más el tema de preocuparse para cómo son los estilos de tu web.
Sí que puedes usar Tailwind UI y entonces va a volver a ser tu web igual que todas, pero por lo menos si le echas caña a Tailwind sin los componentes, por lo menos empezamos a tener un poco más de personalidad otra vez en las páginas.
Muy bien.
Espero.
Genial.
Pues vamos con Adrià.
Bueno, yo insisto que creo que la diversidad es muy buena y hay que mejorarla en muchos ámbitos a nivel laboral también.
Y nos aporta un montón y, de hecho, que podamos estar hoy aquí, pues es eso, ¿no?
Que CSS, ahora dicen, es magnífico, ¿no?
Por el chat, pues justamente, ¿no?
Toda esa variedad nos aporta y nos da soluciones y cada una de ellas, pues soluciona unas necesidades, con lo cual todas son bienvenidas.
Y de cara al año que viene, yo lo que estoy esperando, y lo puse el otro día en un tweet, es que pase de stage el nesting en CSS nativo, ¿vale?
Para que ya Sass empiece a morir un poco.
Un poco, al menos, ¿no?
Un poco.
Y podamos olvidarlo.
Que nos ha traído muchas cosas buenas durante muchos años, ¿eh?
Pero creo que this is the way.
Totalmente.
Estoy súper de acuerdo.
Pues yo suelo decir que ha sido un verdadero placer aprender de estos tres pedazos de cracks.
Ha sido súper interesante.
Hemos hablado de cosas, bueno, hemos visto odios, amores, hemos visto preferencias, problemas con algunos píxeles y cosas así.
Yo lo que le, la retrospectiva que veo es que este año ha sido, ha sido como un reflejo, yo creo, lo que ha pasado en CSS con lo que ha pasado en el mundo entero.
En el sentido de que, por desgracia, creo que se han paralizado muchos cambios por no sé por qué.
Pero en CSS, yo en 2020 como que veía que era el momento en el que íbamos a asestarle el golpe definitivo a Internet Explorer 11 en un montón de ámbitos, ¿no?
Y que íbamos a tener ese paso adelante en el lenguaje.
Y eso es lo que les deseo a 2021, que terminemos de terminar esa faena de matar a este navegador infastuoso que nos ha dejado tanto drama y tantas horas de desolación.
Para que, justo lo que, bueno, coincidiendo un poco con vosotros tres, ¿no?
Que por un lado veamos esa congregación de diseñadores y programadores que me parece súper interesante.
Que por fin podamos dejar atrás, tener que utilizar SAS, que nos ha dejado ideas buenísimas para CSS.
Pero creo que ahora le toca a CSS pasar al next level.
Y nada, muchísimas gracias a todos los del chat, que es brutal, que ha habido como más de 300 personas conectadas a la vez aquí.
350 veces, ahora hay 300.
Pues a estos 310 que estáis ahora, muchísimas gracias.
Dadle like si os ha gustado esta pedazo de charla con estos pedazos de cracks.
Pues os dejo, os dejo, decían por aquí que dejéis vuestros Instagrams y tal, os dejo y pongo aquí el Twitter de Nuria, de Adri y de Carmen.
Que de verdad os recomiendo muchísimo que los sigáis, sobre todo si os gusta el tema del CSS porque, bueno, aparte de que hablan de otras cosas.
A veces de videojuegos, a veces pues hablan de cómo matarían a Tywin, quiero decir, hablan de un montón de cosas súper interesantes.
Así que os recomiendo muchísimo y os lo pongo otra vez, por si a alguien se le ha pasado.
Os pongo otra vez ahí sus Twitters, que no os los perdáis.
Nuria barra baja coach, Adri 2, no hay un Adri 1, solo es ese.
Hay un Adri 2 con Z final y Carmen Ansio.
Muchas gracias, hay gente, tenemos aquí a Jesús Gómez que ha hecho un súper chat que básicamente es una donación
que voy a poner por aquí en medio, de 50 pesos mexicanos, que dice, excelente esta charla, todos son unos grandes referentes
y también Uriel ha dado 50 pesos mexicanos.
Pues muchísimas gracias a los dos, aunque ya os digo que esto ha sido muchas gracias a esta gente.
Muy buen live, repetible, repetible este cuarteto.
Bueno, pues nada, ya repetiremos. Yo si esta gente se deja, siempre, todas las veces que se puedan y más.
Muchas gracias, Nuria, por haberte pasado por aquí, te lo agradezco un montón.
El miércoles, si no me equivoco, o el jueves, ¿haces un directo también para hablar de esto? ¿Puede ser?
El jueves, sí, también hablaremos de Tailwind y cositas. Va a ser divertido.
En el canal de Codely y TV tenéis la oportunidad de ver a Nuria, que va a hablar de... ¿De verdad vas a hablar de Tailwind?
Sí, no sé qué voy a decir, pero...
Ok, no sé si... Bueno, no os lo perdáis, porque puede ser muy interesante ver cómo asesinará algo en directo en YouTube.
No sé si le van a permitir a YouTube dejar ahí el vídeo, pero bueno, que sepáis.
Adrián, muchísimas gracias por haberte pasado. Aunque te veo mucho, ha sido un verdadero placer tenerte aquí hoy en este formato más diferente.
Adrián, puedes decir algo, si te ha gustado.
Un placer.
Sí, sí, he estado encantado.
Si no te ha gustado, lo puedes decir también, ya sabes que a mí no eres tú.
Y la compañía genial también, ha estado muy bien.
Totalmente. Y Carmen, he aprendido muchísimo de ti, no solo hoy, sino en muchas ocasiones.
Así que bueno, te lo agradezco y te agradezco que te hayas pasado también por aquí, que ha sido súper interesante.
No, a ti por contar con nosotros, porque la verdad me he reído mucho, me lo he pasado muy bien.
Y está guay siempre echar el ratillo hablando de CSS sobre todo.
Así que...
Muchas gracias.
Pues os mando un abrazo enorme, un besazo a todas y a todos.
Muchas gracias a todos los del chat, gracias a vosotros tres.
Y cuidaos mucho.
Y sobre todo, sobre todo, dadle caña al CSS, que es la hostia, joder, que ya no sabemos cómo decirlo.
Hemos estado aquí una hora y media para convenceros de que es la leche.
Dadle cañita, ¿vale?
Hasta luego, nos vemos en la siguiente.
Chao.
Chao.
Chao.
Chao.
Chao.