Muy buenas, ¿qué tal? Buenas tardes, bienvenido, bienvenida al State of CSS 2023,
los resultados de la encuesta más importante del año, donde un montón de gente,
y lo vamos a estar comentando, que gente le ha contestado, están ahí pues diciendo
qué es lo mejor, lo peor, lo que más odio, lo que sigo usando, qué es lo que he aprendido,
qué es lo nuevo, pues todo esto y mucho más lo vamos a comentar hoy aquí en este programa.
Un programa muy especial porque además, ¿sabes qué? Que estoy increíblemente bien acompañado
así que vamos a empezar a darle paso a nuestras invitadas de hoy, vamos con Carmen.
Carmen, muy buenas, ¿cómo estás? Muy bien, muy buenas, buenas tardes.
¿Cuántas veces has venido ya al State of CSS? No lo sé, ¿cinco?
¿Cinco? Creo que cinco, creo que es el quinto año.
Me parecería muy bonito que sea como una tradición que hagamos que no falles nunca.
No, no, yo sabes que tienes mi sí para todo lo que me propongas, así que yo no fallo, no fallo.
Muy bonito. Bueno, Carmen, pues nada, muchas gracias por venir, un año más, un año más.
Sí, a ti por la invitación, o sea, de verdad, me hace tremendamente feliz, la verdad,
de promover sobre todo la encuesta, el que se rellene, que se rellene en español también.
A ver si realmente a nivel de demografía y eso se han visto cambios este año, así que...
Se han visto.
Muy, muy feliz, muy feliz.
Y bueno, que luego lo comentaremos, pero que tu nombre sale en la encuesta.
Sí.
¡Oh, eh!
Muy bien, felicidades.
No, y joder, y a ti, ¿sabes?
Que mérito, porque en realidad, estadísticamente, para la gente que la rellena en español, está genial poder aparecer.
Obviamente, no en primera plana con el resto, ¿no?
De Peña, que a nivel de inglés, pues ya sabemos que hay gente súper crack que ocupan siempre esas posiciones,
pero el simple hecho de aparecer, pues, hostia, se agradece y sobre todo me alegro, ¿no?
Porque haya gente que piensa en nosotros cuando piensa en la manera en que está aprendiendo
o de dónde se nutre a la hora de aprender CSS.
Así que yo, más que feliz, la verdad.
Enhorabuena, y vamos a darle paso también a nuestra otra invitada, la crack de Rita, Rita Coates.
Hola, ¿qué tal?
Vengo un poco infiltrada, porque yo no soy como tan crema como Carmen, ¿no?
De CSS, no es mi main expertise.
Ganaste a Manz.
Pero me gusta.
Bueno, pero era hacer un...
O sea, yo sé CSS nivel maquetar cosas, en plan maquetar apps,
pero no sé hacer como cosas fancy, en plan, ¿no?
Que sí, animación...
Pues, amigas, 2023, State of CSS, un año bastante interesante para el mundo de programación web en general.
Mucha evolución, muchas cosas muy interesantes.
Y mi primera pregunta, antes de empezar ahí con la encuesta,
lo que me gustaría es el año en general, sin entrar en detalles.
¿Estáis contentas con lo que ha pasado del 2022 al 2023 respecto al CSS?
A lo mejor no de hacia afuera, sino hacia adentro.
O sea, que hayáis aprendido, que realmente os ha sorprendido de,
ostras, cuántas cosas se pueden hacer, o lo habéis visto que se ha estancado, no sé.
¿Cuáles son vuestras sensaciones, Carmen?
Yo muy contenta.
Primero porque han habido varias propiedades o funcionalidades que llevaba mucho tiempo esperando,
al igual que mucha otra gente.
Y además este año he tenido la oportunidad, desde enero,
o sea, dejé el trabajo en noviembre y así, entonces estoy por mi cuenta, estoy freelance,
y he tenido la oportunidad de hacer consultoría y de formación a empresas,
a equipos de frontend, y he podido estar rascando mucho en cosas modernas de CSS.
Entonces he ido viendo como mes a mes cosas que se iban implementando,
que a lo mejor no estaban aún en el navegador, cuando daba la formación decía,
vale, eso tenéis que usar Canary, y luego, yo que sé, a los dos meses decía,
vale, es que ya está soportada en todos los navegadores.
Entonces he ido viendo la evolución muy de cerca, en ese sentido,
porque tiene la oportunidad de poder trastear más con funcionalidades o propiedades más nuevas.
Entonces, creo que ha sido un año espectacular.
Y piensa que el año pasado normalmente los resultados salen a final de año,
y este año como que se han avanzado bastante.
Entonces como que tres meses incluso antes,
ya tenemos un montón de cosas que bueno, ahora iremos comentando y desgranando,
pero muy muy contenta, muy feliz la verdad, con el estado del CSS,
y sobre todo de los navegadores.
Y en tu caso, Rita, ¿cómo has visto este año?
Pues hay cosas que creo que están muy guays, por ejemplo, he visto que se han mejorado,
bueno, no sé si fue este año o el año pasado, para mí es como nuevo, ¿vale?
Yo si algo lo descubro, para mí es nuevo, no sé de cuándo es.
También está bien, claro, también está bien, que a lo mejor lo has descubierto tú ahora,
y dices, bueno, pues ya está, lo he descubierto yo ahora, pues es nuevo para mí, punto.
Todo el rollo de que están metiendo como cositas en el inspector.
Yo tenía una compañera que cuando yo empecé a hacer cosas,
porque yo entré en mi primer puesto, fue de front-end y un poco enfocada a la maquetación,
y yo no tenía ni papa, ¿sabes? Yo aprendí a golpes.
Y me decía siempre, el inspector es tu amigo.
Y eso se convirtió en mi biblia, y yo ya, por ejemplo, maqueto mucho en el inspector,
hago tal, tal, tal, lo maqueto todo ahí, y luego me lo llevo para allá,
en vez de ir comprobando todo el rato.
Pues he visto que han metido como un montón de ayudas visuales,
porque creo que también pasa mucho que la gente como que le da mucha pereza al inspector, ¿no?
Porque es como mucha letra, y estamos como muy acostumbrados a las cosas visuales.
Entonces creo que eso, como que se han ido metiendo casi las propiedades de Flex con dibujitos, ¿sabes?
Como que esas tonterías que ayudan a que la gente lo utilice más.
Hay otra que además la puedes enchufar con Puppeteer, que es la de Record.
¿Record? ¿O Record?
Sí, Recorder.
Recorder, te graba toda la navegación que hagas a nivel de usuario y de eventos y de interacciones.
Entonces luego puedes darle al play y ver el usuario que ahí va haciendo.
Sí, sí, puedes hacer una navegación, lo haces así, y le das a Replay,
y puedes ver cómo hace exactamente lo mismo.
Entra la página.
Esto está muy chulo para hacer o automatizar tareas,
porque encima lo mejor de esto es que se puede exportar en código.
Aquí lo tenemos de JSON, pero también para Puppeteer, que es lo que comentabas.
Y está súper chulo, porque ves, te copias este código, lo ejecutas y ya lo tienes.
O sea, tremendo.
El que comentabas de Coverage, que es súper interesante, que este es la bomba.
El de Coverage lo que tiene además es que, además de JavaScript,
también el de CSS que comentaba Carmen, que te dice lo que usas y no usas.
O sea, si por ejemplo, claro, aquí hay extensiones.
Pero, por ejemplo, a ver, tipo, no sé si es que no tienen CSS.
¿La gente de Twitter no tiene CSS?
Aquí, aquí hay un CSS.
Bueno, pero muy poco.
Pero puedes ver...
Ah, pues no, no tienen CSS.
Ya no tienen developers.
¿Quién lo va a ver?
Claro.
No, porque lo tienen todo en el propio JavaScript.
Bueno, pero a lo mejor Elon Musk está aprendiendo CSS para hacerlo él.
¿Quién sabe?
¿Te imaginas?
Sí que me imagino.
Sí que me imagino capaz de eso.
Sí, capaz de eso.
Pero está muy chula esta herramienta también para el JavaScript,
porque puedes ver, y esto ya es locurón,
que puedes ver a este nivel que línea a línea.
Aquí no se ve porque estará seguramente todo junto.
Pero puedes ver línea a línea qué línea es la que se ejecuta
y qué línea es la que no se ejecuta.
Y eso es una pasada, porque ves, pone Coverage 37%.
Como que ese 37% es lo único que se utiliza de todo el archivo.
Está bastante chulo.
Muy interesante.
Este entonces es el 2003.
Habéis visto que también las herramientas de desarrollo han ido evolucionando.
Y bueno, lo que vamos a leer un poquito esto para poner en contexto a todo el mundo.
CSS está en un periodo de un progreso sin precedentes entre el pseudo selector hash,
container queries, subgrid, que yo no he usado una subgrid en mi vida,
y muchas más features que están llegando a los navegadores cada mes.
Y en consecuencia, claro, este crecimiento está siendo un poquito que se nos va un poco de las manos.
No sé si habéis tenido esta sensación este año de,
ostras, basta ya, que no para de salir cosas de CSS.
De no me da la vida.
Sí, sí.
De no me da la vida para abarcar todo lo que está saliendo.
Sí, sí, es verdad.
O sea, es que prácticamente cada semana o dos semanas hay algo que está implementado ya,
que se puede utilizar.
A mí me ha pasado un montón de veces de ver pull requests de compañeros,
además, claro, al estar haciendo, yo ahora estoy haciendo backend y front, estoy haciendo todo,
entonces no estoy como tan centrada en el front, por lo tanto me entero,
no se puede abarcar todo.
No se puede.
Y corrijo pull requests y es como, ¿esto qué es?
Esto, esto.
¿Te lo estás inventando?
Claro, y me digo, pero esto está soportado, es todo y es que no existe.
El intern no.
Eso me ha pasado a mí con alguna herramienta como code sandbox.
Code sandbox hay propiedades que me dicen que están mal.
O sea, en el linter me avisa que están mal, en plan de text balance, el grab,
el de text grab balance, perdón, disfecha, me dice que, o sea, no lo aplica el navegador,
pero el code sandbox no lo entiende.
Entonces me dice que está mal.
O, por ejemplo, el nesting, el anidado nativo CSS, también me lo marca como que está incorrecto,
pero luego funciona.
El editor de Visual Studio Code es muy, muy famoso porque al final es de código abierto
y tal.
Y justo lo que dice es, Carmen, porque me imagino que utiliza en Bonaco Editor también
la gente de Code sandbox.
Mira que pone aquí en amarillo el text grab, dice, no conozco esta propiedad.
El scroll timeline, que también esta es nueva, que es para las animaciones a base de scroll
con CSS, también tampoco la conoce.
Y claro, es un poco molesto, ¿no?
Que tengas ese error porque dices, yo sé que no es un error.
Exacto.
Yo lo sé.
Y encima no se pueden desactivar fácil, ¿sabes?
No se puede decir, desactivaste solo este error o añade esta propiedad.
Yo no he sabido.
Tienes que, al menos yo, lo he conseguido activando como que en lugar de ser CSS, es post-CSS.
¿Sabes?
Como si fuese un archivo de post-CSS.
Vale, vale, vale.
Es la única forma que yo lo he conseguido solucionar y así pues se lo come todo, me
imagino, con patatas fritas.
Las consecuencias, esto de que no nos da la vida para todo.
Hablando de la encuesta, ¿sabías que los navegadores utilizan esta encuesta para la
iniciativa Interop?
¿Sabéis lo que es lo Interop?
A ver, Carmen está súper enterada.
Básicamente que es como si fuesen product owners que van tomando las necesidades en
base a las peticiones o el conocimiento que tiene la gente de esa propiedad.
Básicamente priorizan en base a los resultados de la encuesta.
Así que rellenan la encuesta.
Claro, es importante eso, que pidan, que pidan, que lo van a tener en cuenta, ¿ves?
Y así priorizan qué feature en la cámara.
Empezamos con la demografía con alguna sorpresa interesante, porque bueno, Estados Unidos
ya sabíamos que iba a ser el número uno, pero tampoco mucha gente de Estados Unidos
la ha rellenado comparado con otras cosas.
Puede ser que a la gente no le importa CSS en Estados Unidos.
Hombre, con lo grande que es Estados Unidos, sí me extraña que no sea como todavía más,
¿no?
Sí, verdad, porque fíjate que solo le saca a Alemania 400, tampoco le saca tantos,
que en otras encuestas seguro que le saca mucho más, le saca miles, pues en general.
No tengo los datos de la de JavaScript, al menos no me acuerdo, el año pasado sí que
los revisé, pero sí que me sorprende, la verdad.
En valores absolutos, el número, me parece poco.
Mira, estos serían los datos del State of JavaScript, que le sacó 2.600.
Es que también se ve en el número de resultados, ¿no?
Como que en el número de resultados también, en JavaScript, como que hay un montón, pero
en CSS como que ha contestado súper poca gente.
No sé, la verdad, me sorprende que haya tan poco, que haya como mucho interés en JavaScript,
como sí, JavaScript tal, pero luego en el mundo de la programación web, yo no sé,
no sé si es una cosa que notáis, o si veis que ha cambiado, si sigue igual, si va peor,
de que a la gente menosprecia un poco el CSS.
Facts.
O sea, yo lo veo everyday, no lo entiendo.
O sea, yo no tenía esa sensación, pero es como, esto no es programar de verdad, ¿sabes?
De verdad, la ves.
Claro, es un poco, también pasa con el frontend y el backend, ¿no?
Al final, como que hay el rollo de, no, backend es programar, en serio, los frontenders son
ahí unos pintapis, ¿no?
O lo que sea.
Y en realidad, luego, yo te lo juro, ahora que estoy haciendo más backend, cada vez que
vuelvo al backend digo, ¡ah, qué paz, qué bien!
Como que me sufro mucho más en el frontend, porque me parece como que todo está más,
o sea, todo es más difícil de controlar.
Es más fragmentado, claro.
Claro, entonces en el backend como que es más fácil testear las cosas, está todo como
más controladito.
O sea, no es una cuestión de dificultad porque creo que son súper diferentes y al
final, si tú sabes programar, es como los lenguajes, si tú sabes programar, sabes programar.
Da igual el lenguaje, te aprendes uno nuevo y te aprendes otro, ¿sabes?
No pasa nada.
Pero sí que hay como un rollo de menosprecio a CSS, al frontend en general, no sé por qué.
Sí, como yo esto no lo toco.
¿Tú qué piensas, Carmen?
No me gusta.
Yo pienso que si lo comparo con compañeras o amigas que también ponen código de forma
pública o ejemplos de frontend o de proyectos que les dan, quiero decir, les critican,
critican el código o tal, a mí me dejan muy en paz normalmente.
Entonces pienso que es, uno, porque no consideran que programo, entonces se considera menos.
Es como, bueno, ya diseña y hace cuatro animaciones.
Y además que creo también que lo que toco normalmente son, lo que pongo al menos públicamente,
luego cuando hago proyectos para empresas y así, pues obviamente muchas veces ya sabéis
que hay requerimientos, hay que dar un montón de soportes y a lo mejor no hay tanto tiempo
de ser tan creativo, ¿no?
En ese sentido.
A lo mejor no me pongo tan creativa, entonces no hago ejemplos tan locos.
Y los ejemplos que suelo compartir son bastante exprimiendo la tecnología en el sentido de
vamos a ver hasta dónde llega CSS.
Creo que entre que consideran que no programo y que es como menos CSS y que lo que publico
suelen ser cosas bastante locas o artísticas o así y tal, es como que me dejan bastante
en paz en ese sentido, ¿sabes?
No me dan mucho los ejemplos que pongo y creo que es por eso.
La entrada web es con HTML y CSS.
Te voy a poner un ejemplo.
Como cuando en el cole te dan para dibujar lápices de colores y rotuladores y los rotuladores
es lo primero que te dan.
Entonces tú cuando creces y pintas con rotulador dices, madre mía, qué mal lo hago,
lo hago fatal.
Spoiler, yo me gasto una pasta en cada rotulador cuando pinto porque pintar con rotulador es
lo más difícil que hay.
Es mucho más difícil que con pintura, que con acuarela o así.
El rotulador es jodidísimo.
Pero como te lo dan al inicio de tu etapa escolar o a de pintar, pues tú lo catalogas
como algo sencillo.
CSS y de entrar es como coger un rotulador.
Pero tú controlar la técnica es muy difícil porque puedes hacerlo de muchas maneras diferentes.
Es lo que decía Rita, no está tan controlado o no está tan pautado.
Y el hecho de que parezca que la curva es sencilla de entrar hace como que se menosprecie
con cómo se trata luego.
Y luego también el hecho de que haya tantos frameworks, de que todo esté un poco automatizado
y no sepas lo que hay detrás.
Todo el mundo tiene muy claro que tienes que saber qué hace Git.
Y Git por detrás, los comandos y trabajar en consola para saber luego trabajar con una
interfaz gráfica.
Y qué estás haciendo cuando estás subiendo, cuando estás comiteando.
Si quieres hacer un cherry pick.
O sea, todo eso está muy claro.
Pero en CSS no está tan claro.
Entonces se menosprecia bastante.
Y además, claro que hay cosas.
O sea, nosotros hemos estado haciendo entrevistas para Frontender Senior, gente de más de 10
años de experiencia.
Y luego gente así que patinaba un montón en HTML y CSS.
Y es como, vamos a ver.
O sea, no tiene sentido porque da igual tú la cosa fancy.
O sea, ya no te digo a nivel algo más artístico como lo que hace Carmen, sino de montar aplicaciones
web formularios accesibles.
Y claro, cosas como más básicas y usables, ¿no?
Si tú, el HTML al final, tú te puedes leer las buenas prácticas, amigo, ¿sabes?
Y hacerlo bien.
Y si tú, vale, sí, eso funciona, pero luego eso no es accesible.
Y una persona, por ejemplo, que tenga que navegar con el teclado o lo que sea, es que tienes
un amasijo de divs, sí, eso se ve bien y ok, pero eso no está correcto.
Y es el esqueleto de tu aplicación.
Es una pena, ¿no?
Que se menosprecie y por más años de experiencia que tengas.
De hecho, yo creo que, por ejemplo, el directo de hoy es un ejemplo.
Porque a lo mejor si hacemos un JavaScript Noticias y tal, pues a lo mejor tenemos más gente.
Pero hablamos de CSS y la gente como, ah, CSS no me interesa y tal.
Y a mí me sorprende porque hay mucha gente que dice, no, es que quiero ser frontend.
Es que cada vez es más complicado el frontend.
Pero cosas tan básicas como CSS, que es sin ningún tipo de duda, uno de las patas más
centrales del desarrollo web y que tiene un impacto directo en la experiencia de usuario,
lo menosprecian totalmente.
Y a mí me parece un error porque justamente en eso de marcar la diferencia, CSS es súper
importante.
O sea, HTML, CSS y JavaScript.
Esa es la base del desarrollo web.
Que luego lo que pasa es que hacen unas soluciones muy malas con JavaScript, con mal rendimiento,
mala experiencia de usuario.
Cosas que podrían ser mucho más fáciles de hacer.
Tardan horas, líneas de código.
Es que, por ejemplo, hasta hacer un slider.
Es que hoy en día puedes hacer un slider con tres líneas de CSS.
Entonces, y hay gente que no lo sabe o ni tiene ganas ni tal, ¿no?
Y se creen incluso, no, yo con Tailwind ya está.
Y mira, fíjate, en el chat me están comentando, oye, pero en Tailwind se soporta esto, en Tailwind
se soporta esto y eso.
Pero es que en Tailwind se soporta todo CSS porque la base de Tailwind es CSS.
Tailwind no existiría.
Por más que sepas Tailwind, es interesante que sepas CSS porque al final lo que estás
escribiendo de alguna forma se traduce a CSS, ¿no?
A mí me ha pasado que yo he trabajado en sitios en el que teníamos cada, o sea, como
que el diseño era muy importante y las aplicaciones eran muy bonitas y tenían su propio design
system.
Entonces, cuando tú estás montando cosas más pequeñas o tuyas o lo que sea, pues ese tipo
de librerías te vienen súper bien.
O para cosas concretas, por ejemplo, para modales.
Yo solía usar mucho material guay porque, bueno, era lo que usábamos allí, pero te facilita.
Hay algunas cosas que las usas y te facilita.
Pero, por ejemplo, decir, vale, pues lo voy a meter todo con una librería.
Pero, al final, pasas más tiempo reescribiendo cosas.
Si quieres un estilo muy específico, pasas más tiempo reescribiendo cosas e intentando
descubrir qué está haciendo eso por detrás sin que tú lo sepas.
Que si lo hubieras hecho de cero, acabarías antes, te quedaría más limpio y sería más
fácil.
Pero es como que esto ya está hecho, lo modifico y al final tardas más.
No sé yo si te compensa a largo plazo.
Sí, además es interesante.
A ver, es que todo tiene su sitio y su espacio.
El catálogo de componentes es súper útil, súper interesante, no reinventar la rueda.
Pero muchas empresas no van a utilizar un catálogo de componentes por diferentes motivos.
Porque te ata el catálogo, porque lo que dices tú, la personalización y la marca de
empresa es súper importante y no puedes dedicarte a que se vea como cualquier otra página.
Y marcar la diferencia es súper, súper importante.
Ojo España.
España en la encuesta, 195 personas aquí en Spain.
Octavo puesto, ¿eh?
Muy bien.
Vamos a darle un tirón de orejas a toda la gente de LATAM.
Toda la gente de LATAM porque es Argentina.
Bueno, Brasil también, pero tenemos aquí Argentina.
81 personas solo, Colombia 69.
¿Dónde están la gente de México?
Tan grande que en México.
¿Dónde están?
México aparecía en algún momento, perdón porque no recuerdo, pero era la segunda pestaña.
Sabes que hay todo el rato.
Porque este año puedes ver como lo más utilizado, o sea, lo más votado y luego los siguientes.
Entonces te deja verlo ahí.
En algún momento México ha aparecido porque yo lo he visto.
Ahora no recuerdo en qué parte era, pero sí que aparecía México.
Luego aquí tenemos el lenguaje.
Esto es automático, pero un 5,4% en tercer lugar tenemos el español.
Aquí las edades.
No voy a deciros en cuál estáis porque, bueno, yo estoy en esta.
Yo en la tuya.
Yo en la misma que en la tuya estoy.
¿Ah, sí?
18 a 24, ¿no?
Bueno, Carmen y yo estamos 18 a 24.
Y Rita me imagino que también a lo mejor 18 a 24.
Perfecto.
Ay, mira, están comentando aquí en el chat que hay programas de diseño que te hacen
lo de sacarte de Figma las cosas y te portan como el HTML y CSS.
Yo usé hace poco una cosa que dije yo, uh, esto me va a solucionar la vida.
Mentira.
O sea, me pareció guay, pero dije, vale, esto le queda mucho camino.
Que es, nosotros usamos para la web, tenemos web porque la idea es que nosotros montemos
eso y la gente de marketing pues se mete ahí, mete a los blogs y hagan todo solitos sin
necesitarnos a nosotros.
Hay un plugin que se llama From Figma to Webflow que supuestamente si tú montas, claro, tú
tienes que montar en Figma de X manera que ellos te dicen siguiendo una serie de requisitos
la web y luego con un clic, haces así y te lo monta en Webflow.
Y yo dije, vale, voy a probar esto tan fantástico.
Primero necesité que la diseñadora me modificara todo porque no estaba hecho pues como ellos
necesitan que esté.
Y luego cuando lo saqué, eran todo un montón de divs, o sea, eran como 750 millones de
divs y todos tenían los nombres de las clases prácticamente únicos.
Entonces, claro, yo ya tenía toda la web montada como de una manera metódica, todo
bien hecho y rehusando clases y de pronto tenía una página nueva en la que todos los
nombres eran inventados.
Entonces, claro, si modificas una cosa, ya, o sea, al final vas a tener que como que
renombrar, o sea, me parece como una idea guay, pero por ejemplo, ese concreto que lo
probé yo, dije uff.
Yo no soy nada fan de las herramientas que te autogeneran código, vale, vengo de la época
de Dreamweaver, sé que no estamos en esa época ya, pero no soy nada fan.
Sí que es verdad que como punto a favor de Figma, he de decir que si tú montas la estructura
con el flujo normal que tiene la web, que es como se comporta ahora mismo Figma con
AutoLayout y con Grab, que los objetos, los elementos saltan de líneas y ya no caben,
ya es responsive de por sí, no tienes que hacer nada más.
Si lo montas bien con contenedores y pensando en el modelo de caja, te lo pinta clavado,
en tanto en Figma a React, que es un plugin, como el de Figma a Webflow.
Aquí el hándicap es que los perfiles de diseño digital sepan cómo se comporta la
web, que eso es mi lucha continua, o sea, es mi lucha a diaria.
Que ese es el problema normalmente, que falta esa sensibilidad, es que siempre, muchas
veces estas cosas lo que te hacen es llegar antes, pero no llegar más lejos, o sea, el
día de mañana cuando tienes que mantener esto, si ha habido algún tipo de problema y
ya no se ha hecho exactamente bien, pues le pasa lo que dice Rita, que luego hay más
trabajo ahí.
Claro, al principio, oye, qué rápido se ha hecho esto, pues ya no necesitamos desarrolladores,
y luego cuando quieres cambiar algo, ay, ¿dónde estaban los desarrolladores?
Cambiar a mano todo, 750 clases.
Tal cual, exacto, tal cual.
Tenemos aquí también los resultados del género, y en CSS tenemos 61,3% de hombres, 7,7 mujeres,
30% que prefieren no contestar, pero bueno, es mejor que el de JavaScript, que era un 70
contra 4.
Es que normalmente es verdad que hay como más mujeres o que contestan o que están interesadas
en este mundo. No sé si es por un tema más del diseño, que siempre ha sido como un poco
más femenino, no sé. Todavía queda, ojalá que esto suba al tanto por ciento porque se
necesita.
En el de JavaScript, ¿cómo está este? También tiene de esto, ¿no?
Sí.
Es que claro, yo veo eso y me da depresión, y luego pienso, ah, no, pero hay más, y es
como, Dios mío.
Sí, hay más, ha mejorado, pero todavía no están dos cifras, la verdad. Yo desde aquí
hago un llamamiento, siempre lo digo, de que las chicas, las mujeres, se tienen que animar
a contestar esto para justamente que se haga notar su opinión, que es súper importante.
No sé si es un reflejo real de que realmente solo hay un 7% en la comunidad de CSS, pero
a mí, mi sensación es que no, mi sensación es que hay más.
No, la mía también, ¿eh? O sea, si tengo que decir, dentro de front, back y así, diría
que hay muchas más tías en el front. Al menos por mi experiencia en los trabajos donde
he estado, en los equipos y así, era más fácil encontrarte a mujeres más en el front
que no en backend.
Y además que estos son todos los países. Es que yo creo que, por ejemplo, nosotros
aquí estamos medio bien y aún así, en fin. Pero a mí me pasa que, por ejemplo, uno
de los comentarios que yo en los vídeos uso a Tamara como un personaje, ¿no? Que me
escribe y me habla. Y tú no sabes la cantidad de gente que me ha puesto de comentario en
plan, más de una mujer en un equipo de ingenieros. No me lo creo. Es mentira. ¿Sabes? Gente
de otros países. En plan, que la mayor parte de la gente dice, o estoy yo sola o no hay
nadie, ¿sabes? En plan, que la gente muy loca, en plan, hay tías programando.
Oh, sí, como si fuese un zoo esto, ¿eh?
Oh, una chica, una chica, una mujer programando.
¿Qué hace?
Tirando fotos, ¿no? Cacahuetes.
Guállate. Es que guállatela.
Bueno, tenemos aquí las fuentes de donde se ha enterado la gente a la encuesta, porque
ya tenemos gente aquí en el chat con las excusas de, yo no me he enterado en ningún
sitio. Decía por aquí, yo tengo la excusa de que, carajo, es que yo no me he enterado
por ningún sitio, creo, de contenido y tal. Un 10% de la gente ya sabe que existía, o
sea, que esta excusa, claro, la podéis usar una vez, pero ahora es imposible que la
uséis una segunda, porque ya sabes de dónde sale. Kevin Powell, que este tío,
claro, tiene un canal de YouTube que tiene 80.000 millones de seguidores, pues claro,
es muy crack, 8,6. En YouTube, en general, un 4,7. Twitter, caras X. Y ojo, ojo, ¿quién
se ha colado aquí?
Oh, ¿quién se ha colado?
¡Guau!
¿Quién se ha colado aquí?
Un 1,4% de la gente, o sea, me parece increíble. Dice que se ha enterado de la encuesta,
o sea, que no tenéis excusa, porque hay un montón de gente aquí diciendo, es que el
Midu, el Midu no me avisó. Oye, pues aquí hay cuánta gente? Un 1,4%, pero no ponen
los resultados. Pero mucha gente se ha enterado, ¿eh? Y más, más gente se ha enterado
aquí, que por ejemplo, Mastodon, o sea, que me hace muy feliz, no sé, pensaba que Mastodon
había desaparecido. Webstandards, que esto no sé si es una página web, pero lo que sea,
pero sí que me ha sorprendido que es de Josh Comeau.
No, pero es una pasada, ¿eh?
Sí, sí, ¿no? O sea...
Y de CSS Weekly, que para mí es la newsletter de referencia de CSS, o sea, que madre mía.
Pero bueno, luego veremos que también tenemos...
¿Y Slack qué es? O sea, Slack, me refiero, que se enteran por Slack, ¿por qué? ¿Por
dónde? ¿Que ha tenido un mensaje por Slack o que Slack ha mandado un comunicado?
Como algo general, como alguien me ha escrito en Slack y me lo ha dicho, o lo ha compartido
y ya está. Bueno, hablando de características, ha habido un montón de cosas nuevas que han
sacado aquí en características de CSS. Aquí las podemos ver un poquito agrupadas, pero
bueno, vamos a ir a cada una de ellas un poco por encima, porque son demasiadas, es que
hay demasiadas. Entonces, vamos a ir un poco por encima, así en general, veremos un poco
evoluciones. Y especialmente me gustaría si hay alguna que habéis utilizado, porque
me diga, ostras, pues esta la he utilizado y madre mía, me ha cambiado la vida. A mí,
por ejemplo, su grid, yo no la he usado y jamás voy a ser capaz de saber para qué la
podría utilizar. O sea, es que no entiendo, porque yo siempre digo, bueno, pues dentro
de un grid hago otro grid y tal. Que seguro que tiene un uso, pero igual es culpa mía,
que no pasa nada.
Es que en teoría se supone que como que te coge la referencia del padre, ¿no? Pero yo no
termino de, como no lo he usado, no termino de entender cuál es el point.
Que los nietos también sean, en vez de ser normal, que sean grid también. Que no solo
los hijos directos lo sean, pero es como, y que la haya un monto para que, que tiene
su uso seguro y hay mucha gente que la quería, ¿eh? O sea, ojo.
Sí, sí. Claro, por ejemplo, una, me imagino que, por ejemplo, pues car, una car que normalmente
tienes que hacer que sea display flex y tal, si la haces subgrid, ¿no? Pues ya puedes decir
que dentro de la grid, que es todos los resultados, la car, sea una subgrid donde ya puedas utilizar
también este tipo de cosas, ¿no?
Claro, aquí dicen si es un grid dentro de otro grid. Es que esa es la cosa, que no es
un grid dentro de otro grid. O sea, tú puedes hacer un grid dentro de otro grid, sino que
en teoría, al ser subgrid, como que ya te coge de referencia el padre. Como las mismas,
no sé muy bien para qué...
Es que es eso, que no hace falta definir entonces en el medio cómo quieres que sea
la grid, claro, porque ya estás haciendo que sea una subgrid. Entonces, ya lo está
como heredando, que es lo que dice.
Es como toda la familia, ¿sabes? En vez de padre a hijos, espíritu santo. O sea, todos
los elementos se convierten en grid items, no solo los directos.
Sí, es bastante complicado, la verdad. Y una de las razones por las que además yo nunca
lo usé es porque al principio hubo como muchos problemas de que cada navegador lo hizo
de una forma, había problemas. Y te decían, no lo utilices o se te va a romper, no sé
qué. Modos de explotar.
La gente, que el grid es confuso. El grid, cuando... Yo soy de la gente que antes decía
yo siempre flexo el grid, no sé qué. O sea, el grid tienes que amarlo, tienes que aprenderlo
bien y luego de pronto lo amas.
Yo lo que puedo recomendarle a la gente, porque es verdad que la gente dice que el grid
es confuso, jueguen a este juego.
Uy, sí.
Ay, me encanta.
Juegan a este juego y es que van a entender ahora sí por qué es interesante. Grid y mira,
tiene 28 niveles, además está en español y está muy chulo y van a aprender realmente
por qué la grid es tan poderosa. Así que...
Y yo creo que grid tiene como dos cosas que lo hacen, bueno, superior, para ciertas cosas
mejor que usar flex, ¿no? Que tendremos que usarlo porque parece como más intuitivo, que
es el rollo de que no se te estiran las cosas con el contenido, sino que se te mantienen
iguales y eso en muchos casos te viene maravilloso. Y lo otro que era... Ah, lo del... Que con
el flex tienes que estar súper pendiente del shrink para cuando pones iconos que no
te queden así, como todos chuecos, que te das cuenta cuando ya está en producción y
alguien puso una frase más larga. Ay, qué coraje me da eso.
Propiedades lógicas. Bueno, esto, lo del margin block, start, padding in line, esto para
la gente que no lo sepa, es básicamente la idea es que CSS deje de utilizar el margin
left y el margin right porque básicamente eso no es left para todo el mundo. Por igual,
el left para nosotros sí que es left, pero a lo mejor en otro país no es left. Es la parte
contraria. Claro. Entonces, ¿habéis empezado a utilizar esto? Es que a mí me cuesta todavía
habituarme. Yo empecé a usar eso el año pasado. No,
el año pasado no, antes de entrar en topi. O sea, yo llevo usando eso como unos dos años.
Y al principio era como... Pero ahora ya siempre lo uso y como que me he acostumbrado y ya para
mí es como natural. Y parece una tontería, pero a lo mejor... Bueno, es que no es una tontería.
Pensar que es una tontería es europeo-centrista, ¿sabéis? Claro. Totalmente. En Japón la gente
lea de derecha a izquierda. Pobres japoneses. Si tú vas a montar, estás trabajando, por ejemplo,
en un sitio súper grande, tiene acceso a la aplicación todo el mundo, tendrás que tener
estas cosas en cuenta, si no. Lo más fácil de pensar es que el inline es que va en línea con el texto. O sea,
que para nosotros, por ejemplo, sería el horizontal. Pero en hebreo, por ejemplo, o en árabe, o es derecha
a izquierda, o es de arriba a abajo. Claro. Entonces, el paradigma cambia muchísimo porque dejas de tener
luego que estar pensando todo el rato y hacer conversiones. Es como en el sentido que vaya
el texto. Fin. Claro, hay gente que... Ayuda mucho. Es más como un tema de accesibilidad, entonces.
Claro. Es para que tu web no se vea rota en otro... No, no. El layout en sí también. O sea, es para que...
Porque tú no es que digas cuando haces un diseño... Por ejemplo, eso me pasó cuando trabajaba para
e-commerce, que eran internacionales. Tienes que facilitar que eso se vea bien en todos los
idiomas. Y no es que digas, hago un transform, o sea, hago un rotate y ya está el diseño. No, no.
Tú haces diseños, aposta para esos idiomas. Entonces, el poder tener esas propiedades definidas
desde el inicio, sin pensar tanto izquierda a derecha, sino en el sentido que tenga el texto,
es igual que en flex. Tú puedes cambiar el eje central también, o sea, el eje principal. Entonces,
todo eso te ayuda luego a que sea mucho más sencillo y que se adapte de verdad al idioma que
esté utilizando. Me encanta ese comentario que dice Rafa, porque dice Rafa, pero lef es una palabra
inglesa con significado inglés, ¿no? Debería ser igual para todos. El problema no es que lef no
signifique izquierda. El problema es que según tu situación, para tu izquierda es diferente según desde
donde lo mires, ¿entiendes? El sentido de escritura. Tienes que pensar en el sentido de la escritura.
Claro. Exacto. O sea, izquierda, para todo el mundo significa izquierda, pero no es la misma. La
izquierda que me estás viendo aquí, ¿no? Dices aquí a la izquierda a una persona que estará en otro
sitio y ahí a su izquierda, a lo mejor en mi derecha, ¿entiendes? O sea, la izquierda es la misma para todos.
Mi izquierda no es tu izquierda. Resumen.
Soy disléxica. O sea, no os paséis, ¿vale? Me estoy liando mucho.
La derecha.
Bueno, vamos con Asperger Ratio. Asperger Ratio, bueno, yo creo que este está superadísimo ya y la verdad es que es súper importante. Cada vez se utiliza más. De hecho, lo he usado ya un 65% para imágenes. Bueno, no solo para imágenes. Por ejemplo, Instagram, pues podría tener también este Asperger Ratio de obligar a que sus cards sean 1 a 1. Pues también sería bastante interesante, ¿no?
Sí.
¿Habéis tenido algún uso así que digas, ostras, pues para esto me ha venido súper bien?
Para hacer un masonry y definir qué clases tenía cada imagen, la proporción. O sea, la proporción de cada imagen y además sí que hay un masonry que va a ser nativo, que ahora mismo no recuerdo el estado, creo que estaba bastante aún lejos, pero va a haber un masonry nativo.
Pero hasta que esté, había una manera de poder hacerlo con CSS sin necesidad de tirarle ninguna librería y así. El masonry puede ser como Pinterest y así.
Sí, sí. Masonry es este sistema de columnas que está bastante chulo. Desde el 2020 se iba a añadir de forma nativa en CSS, que iba a ser así, grid template rows masonry, pero nada, que todavía no llega. Parece que lo han dejado un poquito aparte.
Sí.
No han tenido ganas de darle. Content visibility. Madre mía.
Esto es de las cosas que me sorprende de cuando pasan años y se usa menos.
Sí, ¿verdad?
Sí.
Es como que cada vez lo ha escuchado menos gente.
Es como sospechoso.
¿Por qué? Porque hay otras maneras de hacerlo. Están tirando de los frameworks o de JavaScript que ya te va haciendo un easy loading y no lo quieres hacer a nivel de CSS o te da igual la performance o el pintado del navegador da igual.
Entonces, no lo sé, me sorprenden estas cosas cuando te saben menos al año siguiente.
Mi sensación es que a lo mejor en 2020 salió un artículo que parecía interesante la idea. La idea era espectacular y al final es lo que te dices tú.
La ejecución, ¿no?
Sí, que a lo mejor lo haces de otra forma, que ha tenido más sentido o algo así. Porque si me suena que antes Google le dio bastante, no sé, como mucha importancia y luego no ha terminado de...
Sí, también es que eso con las queries web vitals cuando salió todo lo del crux y eso. Puede que sí, ¿eh? Que fuese en esa época y que luego como que se ha desinflado.
Y que todas las cosas de performance son como feature problems, ¿no?
La gente tiende a...
Claro, a cuando ya está todo que eso no carga.
Hacia dos.
Claro, es como mierda, tenemos que mejorar esto y entonces te pones a investigar. Pero como que en el día a día no pensamos mucho en eso.
Mira, tenemos, por ejemplo, container queries, que es bastante importante. La de object view box, que yo esta no tengo ni puñetera idea. Ni idea, ¿eh?
Sí, sí. Cuenta, cuenta.
No, dos cosas solo. Rápido. La de container queries me sorprende que tanta gente la haya utilizado y me alegro mucho.
Porque ya nos dejamos un poco el paradigma de bootstrap de hace 10 años de vamos a basarnos en el viewport y tal, sino que vamos a basarnos en componentes y en...
Cada componente, el espacio que tiene en su contenedor, que haga ahí lo que quiera, ¿no? A nivel de estilos.
Y luego la que decías que no sabías mucho, al final es utilizar la manera que tiene de hacer un zoom en un SVG, pero en una imagen.
O sea, es coger la misma técnica.
Es la misma técnica de, tú sabes que en un SVG al final no dejas de tener el canvas y luego tienes una ventana que tú puedes mover.
Y hacer un zoom a una parte, exacto, como coordenadas, ¿no?
Sí.
Entonces tú haces zoom a esa parte.
Pues es la misma técnica.
Incluso imagínate que quieres hacer una transición de un hover que haga una card que se haga más grande o una imagen que se haga más grande.
Pues podrías llegar a hacer de forma mucho más, digamos, clavada el trocito que quieres que se haga zoom de esa manera.
Bueno, es la técnica de SVG a una imagen.
Container queries que alguien ha preguntado en el chat es como media queries.
La media queries es a nivel de toda la ventana y las container queries, como muy bien ha explicado Carmen, es a nivel de contenedor.
Claro, esto es algo que necesitamos hace mucho tiempo.
Y esto lo que significa es que puedes hacer que un componente, según el contenedor, no la ventana, el contenedor en el que está, se vea de una forma o hay otra.
Y esto porque es interesante, aparte de lo obvio, por catálogo de componentes.
Durante mucho tiempo, los catálogos de componentes, por ejemplo, un botón, tú no sabes dónde lo va a utilizar la gente.
Una card o una modal, tú no sabes cómo lo va a utilizar.
Pero sí que puedes controlar el container donde está, ¿no?
Y si el contenedor tiene diferente ancho, vas a hacer que se vea de una forma diferente.
Es muy parecida a una media query, pero simplemente es más a nivel del contenedor.
Muy potente y muy interesante, la verdad.
A mí esta me encanta, que esta justamente el otro día estuve comentando.
Pero esta yo creo que es muy importante.
En el chat decía que además de una persona le ha salvado la vida.
No sé si alguna vez habéis tenido este problema.
¿Con el móvil?
Sí, con el móvil.
Sí, con la barrita del navegador o de las acciones del teclado.
Sí.
Exacto.
Estamos hablando de lo de que te tapa y...
Exacto.
Ahí está.
Sí, qué ruina.
Un formulario, por ejemplo, a la hora de rellenarlo.
Está el teclado, la barrita, no sé qué.
Aquí está, teníamos el 100VH, que era como el 100% del viewport, de la altura que tenía
el viewport.
Pero el problema es que dependiendo del navegador, pues esto azul estaba por aquí debajo, esto
aquí, esto acá.
Y ahora por fin han sacado una que es el DVH.
Bueno, tenés el SVH y el LVH, que sería el mínimo y el pequeño.
Y el DVH, que es el dinámico.
Entonces ahora ya, si sale el teclado, si sale esto, pues por suerte ya lo tenemos correctamente.
Lo único malo, a ver, está bastante soportado y a las malas lo bueno que puedes hacer es
utilizar los dos.
¿Sabes?
Puedes poner un...
Ya, por serás.
Claro, puedes poner el que sí que se soporta siempre y este por si...
Yo creo que ya tiene bastante...
Bueno, Firefox, Chrome, Edge y Safari.
Ya lo tienen todos.
O sea que, muy bien.
Media Queries, Range Context.
Esto, no sé, Carmen, ¿tú cómo lo llevabas?
Porque siempre me dices, soy dilésica.
Pues yo, yo no soy dilésico y me siento dilésico con esto.
¿Te funciona mejor o peor?
Porque hay mucha gente, yo no sé si ya es porque nos habíamos acostumbrado a decir
entre medias o, digamos, la sintaxis a la hora de definir entre píxeles y así.
Hay mucha gente que se ha quejado por la sintaxis.
Sí.
Ostras.
Sí, sí.
Y a mí me va mejor.
Esta será la nueva forma, la Media Query con la sintaxis de rango.
Mira, todo el mundo dice, es mucho mejor.
Yo lo leería ahora cuando el viewport tiene un ancho mayor o igual a 300, pues haz tal.
Para mí se lee mejor.
Yo antes me liaba y hace ya muchos más años también, o sea, cuando utilizábamos las grids
de bootstrap y eso.
Recuerdo que a veces hacía algo y me iba al navegador y ponía la ventana a ese tamaño
y era como, ¿por qué no se está aplicando este estilo?
¿Sabes?
Y era volver a la Media Query y decir, es que soy imbécil, tío.
O sea, lo estoy poniendo al revés.
¿Sabes?
Sí, sí.
Sí, yo lo he sufrido mucho el tema de las Media Queries.
Y para mí esta sintaxis me facilita.
Pero sí que es verdad que hace unos meses hubo gente que se quejó de la sintaxis.
Yo nunca las uso directas.
Siempre las tengo como una cosa en medio, que le llamo el from.
Porque como lo hacemos todo como Mobile First, es para obligar a la gente a que la Media
Query siempre sea minwith, ¿sabes?
Y vayas como de abajo a arriba.
Entonces tú nunca escribes la Media Query en sí, sino que pones from punto y ahora tenemos
sml y xl, ¿sabes?
Entonces ya así nadie te va a poner un minwith o maxwith porque yo creo que una de las Media
Queries es cuando empiezas a, en plan, bueno, aquí me hace falta esto, le voy a poner
un maxwith y al final ya no sabes dónde sale eso y tienes ahí una puchina.
Sí, a ver, lo que hacías tú era mejor idea, ¿eh?
El hecho de siempre ir con el minwith era lo mejor, ¿eh?
Es lo que se debería hacer porque te he sentido.
Pero es verdad que a veces, pues quedas o no, tenías que hacer algo.
Y bueno, cuando tenías que hacer esta, la tercera, la de minwith y maxwith, bueno, yo
esto era como...
Eso huele a que va a haber un bug dentro de poco.
Eso huele a que alguien de negocio tiene un portátil en concreto y que tienes que
verse bien ahí, porque si no cuando entra en la web se asusta.
Yo tengo una historia, no voy a decir el producto porque ya no trabajo en Fotocasa, pero el tema
es que nos vino el CEO y nos dijo que en el iPad, no, en el iPad no, en la tablet de su
hija se veía mal la página web.
¿Cómo me suena?
Y el tema es que era como una tablet, yo que sé de qué marca, y eran, no sé, 832 píxeles.
Y entonces se veía nada, una cosita.
Y me acuerdo que tuvimos que hacer una cosa así, ¿no?
Una mierda de estas.
¡Qué rabia da eso!
O cuando nos dicen, no, es que en 320, ¿qué tiene?
¿Un iPhone 4?
No se merece ver la web.
Claro.
Yo se me digo, no se merece esta web tan bonita.
No se merece la web.
Ostras.
No se merece ni verla ni nada, ¿no?
Ni se lo merece.
Que se aguante.
Me encanta, me encanta.
A ver, tenemos también de formas, diseños, colores, interacciones, la verdad es que hay
un montón.
No sé si hay alguna que queráis destacar, de todas las que, pero yo destacaría esta,
la View Transitions API, que me sorprende que la han puesto en CSS.
Yo pensaba que era, a ver, sí que es de CSS, pero me ha sorprendido que la han puesto
aquí porque se supone que era, bueno, es verdad que es parte CSS, parte de JavaScript.
¿Qué opináis de la View Transitions API?
Porque ya estoy leyendo como también feedback negativo.
Esta no la he mirado, a ver.
La verdad no he oído quejas, la verdad.
A ver, aquí lo vas a ver claramente.
Mira, esto es un clon de Spotify, ¿vale?
Y fíjate que cuando le damos un clic aquí, hace este efecto, ¿no?
Entonces cualquier persona diría, bueno, pues no sé, no ha pasado nada del otro mundo,
simplemente una animación con CSS y tal.
Pero lo que está ocurriendo aquí es que está entrando aquí el View Transition API,
que es algo totalmente nuevo que te permite hacer transiciones de las vistas
entre dos páginas diferentes.
O sea, que tengo aquí esta página y aquí tengo esta página.
Fíjate que son dos URLs distintas.
Y esto no es una SPA ni nada, ¿eh?
Esto simplemente lo que está pasando es que el navegador está detectando
que este elemento está relacionado con esta imagen, este título.
Y entonces es capaz de hacer el antes y el después entre las dos páginas
y hacer una transición como nativa, como hacen muchas aplicaciones móviles.
Es que eso te iba a decir, es como una imitación del behavior que tienen los móviles, ¿no?
Que yo creo que todo el mundo está tan acostumbrado que ahora están buscando
que la web se parezca lo máximo posible a eso.
El tema del CSS lo tenemos en el View Transition Name, ¿ves?
Aquí tendríamos el View Transition Name, esto CSS, porque claro, tienes que decirle
este elemento de aquí corresponde a este elemento de aquí.
Tiene que haber como un nexo entre las dos páginas.
¿Ves aquí? View Transition Name, Playlist 1, Image.
Y aquí lo mismo, si miramos esta imagen de la otra página, ¿ves?
Tiene el mismo nombre y así crea el nexo entre los dos.
Y la transición se hace automáticamente.
Y las transiciones, o sea, las redes de modificar.
Sí, sí, sí.
Eso es guay y peligroso a la vez, ¿no?
No te vas a adentrar en esas webs que te mareas,
porque se quieren poner como tantas cosas que dan vueltas,
todo lleno de animaciones.
Y me parece la web de Homer.
Sí, la verdad es que un gran poder conlleva una gran responsabilidad.
Menos es más, menos es más.
Bueno, de colores me lo he saltado porque, a ver...
Y te has pasado el backdrop filter ese, me encanta.
Todo el mundo lo quería.
O sea, ¿por qué tanto lo...?
O sea, sinceramente, ¿por qué es una locura?
Siempre es una ruina para los modales,
que siempre quieren como el Blurry ese y es un rollo.
Venga, puedes poner Sepia ahora al modal también, si quieres.
Sepia es siempre una mala opción.
No, pues siempre dan la opción de Sepia, tío.
En todos los Mixed Blends Modes y todo, siempre Sepia.
Porque alguien lo usa.
Y aquí también.
Alguien lo está pidiendo.
Algún product manager ahí ahí fuera que lo está pidiendo.
El curre en color no es lo de los SVG.
Es típico para que se...
Para un icono, por ejemplo.
Para coger color del texto.
Pero yo llevo haciendo eso desde que empecé a programar.
Quiero decir, ¿eso es nuevo?
No, no es nuevo.
Pero ¿sabes qué pasa?
Que preguntan por ello porque hay muy...
Bueno, ahora veo que ya al menos un...
O sea, que sé lo que...
Pero nunca lo he usado.
Vale.
O sea, ya hay un 54% de la gente que lo ha usado.
O sea, ya al menos más de la mitad.
Pero sí es sorprendente.
Te sorprendería la de gente que no hace eso con los SVG porque no sabe.
Claro, pero...
Entonces, ¿cómo hace para, por ejemplo,
si tienes un SVG que es un botón para cambiarle el color en over o lo que sea?
Pues a mano.
Le cambia el color a mano.
A mano.
Claro.
O sea, por ejemplo, lo que...
Pero que tienes un SVG de cada color y los vas ocultando.
¿Cómo es que no comprendo?
No, tienen el color base del SVG que toda la librería o como lo gestionen
y luego le fuerzan a que tenga ese feel en cada uno de los estados.
Ya, ya.
O sea, no tiene sentido.
Pero hay mucha gente que no lo hace.
O sea, que no utiliza Corren Color.
Vale.
Habrá gente que no sabe lo que es.
Entonces, les voy a explicar un poquito, ¿vale?
Una maravilla.
Chavales.
Esto es lo mejor.
Porque ya os vais a encontrar.
El SVG se convierte en un texto y tú le cambias con color el color.
Y eres feliz.
Y tu vida ha cambiado.
Totalmente.
Estoy haciéndolo un poco rápido, ¿eh?
O sea, que la gente no...
Nadie te juzga.
Nadie te juzga.
Yo de vez en cuando me voy a la carpeta de assets de nuestro front y revirio todos los SVGs para ver si hay algún width o height fijo.
Para que solo tengan el view box.
Y si hay algún color fijo y los voy modificando todos.
La locura esa.
Voy a hacer que sea un botón para que la gente esté emocionada.
Bueno, pues esto es un botón.
Claro, lo que muchas veces lo que comenta Rita, lo que ocurre en color.
Claro, en este caso...
Mira, si es que además ya se utiliza aquí.
Stroke ocurre en color.
Lo que pasa es que, claro, a veces como te copias el de su VG y a lo mejor ya viene, pues a lo mejor hay gente que ni siquiera se da cuenta.
¿Sabes? Que esto está aquí.
No lo sé.
A lo mejor.
No lo sé.
No sé si vamos por aquí los tiros.
No sé.
No tengo ni idea.
Pero el tema es que este current color, en realidad, es la primera variable de CSS.
De hecho.
Antes de las custom properties y todo esto.
Y lo que hace es tomar el color, si le ponemos aquí el color rojo, el hecho de que este su VG ahora de repente sea rojo, de arte y gracia.
No es que haya magia, sino que es este current color de aquí.
Este de aquí.
Entonces, ¿qué es lo que, Rita? ¿Qué es lo que hace la gente?
Pues la gente que es muy bruta hace esto.
Dicen, no, ahora lo quiero así.
Pues entonces lo ponen aquí a mano.
¿Sabes?
Ponen el color en todos los lados y ya está.
Rita no lo hace.
No la prueba.
Sal, me gusta.
Sí, sí.
No la prueba, no la prueba.
Nada, con razón que no la prueba.
O sea, esto sí que está muy chulo, ¿eh?
Los colores relativos.
Pero en Safari solo.
Ah, ahora solo está en Safari.
Solo está en Safari.
Sí, o sea, puedes ver esa demo que la ha hecho Bramus y tiene otra de toda la escala
cambiando únicamente el último valor, que creo que es lo de abajo, si no me equivoco.
Sí, abajo pone todos los ejemplos del 90, 80, 70%, ta, ta, ta, ta.
Qué chulo esto.
En CodePen tiene todo el ejemplo hecho y es, pues eso, es todo una paleta del mismo color,
que puede ser el color de marca, con todas las variaciones.
Claro.
Y además los puedes convertir a otros modos de color, porque han entrado modos de color nuevos.
¿Qué dices?
¿Para qué?
Pues si hay monitores de alta definición con densidades diferentes y así, puedes llegar
a colores de un espectro de color que antes no podías.
O sea, colores más luminosos.
Si haces un neón, puedes hacer un neón súper potente.
Eso no se conseguía antes y ahora sí.
Antes no se podía hacer.
Qué chulo.
La verdad es que eso sí que tiene muy buena pinta del tema de los colores, que ya falta
nos hacía.
Que se nos estaba quedando...
Sí, o el color mix, que puedes hacer un mix directamente entre dos colores y está
muy guay.
La nueva función de RGB, ¿no?
Lo voy a decir mal porque giro letras, pero el OKCLH o algo así.
Oclahoma.
O-K-L-C-H.
O-K-L-C-H.
Es ese.
O-L-K-C-H.
Sí, sí.
Colores a ese encuentro.
O-K-L-C-H.
Vale, vale.
Es como Oklahoma.
No sé, no sé.
Me lío.
Este es interesante porque dicen que esta es la mejor forma de hacer colores.
Sí.
¿Sabes?
Para definirlo, sí.
O sea, a la hora de crear paletas y así, si no tiras de un gestor o un generador de
paletas, si lo tienes que hacer a nivel de diseño, es el que es más intuitivo también
para el humano, ¿vale?
A la hora de poder crearlos.
Porque hay una teoría del color, ¿vale?
Entonces, si tú aplicas la teoría del color, este modo de color es el que más te ayuda
porque al final tú modificas valores, ¿no?
Ya sean de luminosidad, de ganancia, de saturación.
Entonces, este para el humano es como el más sencillo de poder modificar y que tenga
sentido.
Está muy guapo, ¿eh?
Tenemos como esto sería el brillo, luminosidad sería, el croma sería este y luego tendríamos
la saturación.
Y la saturación.
Saturación, sí.
Claro, está chulo porque al final tú puedes ir cambiando simplemente con este, ¿no?
Otro rato, pa, pa, pa, pa.
Bueno, claro.
Hay un...
Claro, ahí no puedes cambiar siempre porque depende de donde haya caído, claro.
Hay un...
Este es el generador, pero si a alguien le interesa más información, hay un artículo,
los del artículo hicieron este generador y es de por qué dejé HSL en favor de...
Este.
Este.
Articulado, además.
Es que esta gente...
Sin favor de...
La verdad que el nombre no está pensado para humanos.
Pero sí, está muy chulo porque aquí te explica justamente de que tienes la posibilidad
de mostrar más colores, de que está mejor, está muy chulo.
Sí, sí.
Es el creador, para que lo sepa, la persona que ha escrito este artículo es el creador
de Poz CSS.
Mira, lo tenéis aquí.
Andrew Siknik.
Es el creador de Poz CSS y Autoprefixer, que mucha gente utiliza y no lo sabe.
Y ya estás soportado hablando de colores, Carmen, te pregunto, porque a mí me pasó,
me solucionó el otro día, que hay como los X, creo que lo puedes usar ya.
No, digo los que son X, pero que le puedes meter la opacidad.
Entonces le metes como dos letritas extra al final, pero cuando yo me quise detangar con
eso, todavía no estaba como muy bien soportado.
Y me dijeron ya.
Sí, a nivel de colores, menos el de los relativos, creo que el resto ya están.
Y los relativos están en Safari, por si alguien los quiere probar.
Vamos a por la sangre.
Vamos a por la sangre, porque aquí veo palabras clave.
Bootstrap, Tailwind, Bulma.
Venga, que se vienen curvas.
Se vienen curvas.
Vamos a hablar de Framework CSS, vamos a ver Tailwind, vamos a ver si esta vez Carmen
ya está contenta con Tailwind o no.
El tema.
Aquí tenemos como retención, interés y uso a lo largo del tiempo de los diferentes
años de, por ejemplo, Bootstrap, que podemos ver que poco a poco se está cayendo.
Antes se estaba preguntando aquí a alguien, ¿qué opináis de Bootstrap?
¿Qué opináis de Bootstrap?
¿Qué opinamos de Bootstrap?
Yo hace muchos más años que no tocó.
O sea, en su momento tenía sentido porque habían tres pantallas de esto, tablet y mobile
y nos ayudó muchísimo con las columnas antes de que tuviéramos grid y todo esto.
Pero ya dejó de tener sentido para mí a la hora de crear layouts.
Entonces, ahora mismo no sé en qué estado está.
Hace muchísimo que no lo toco.
Pero si no ha cambiado y a favor de lo que vienen siendo los componentes en sí o los
contenedores, como veíamos antes con las container queries, para mí se ha quedado atrás.
Pero si no tiene un enfoque más hacia componentes, como por ejemplo Tailwind sí que hace, pues
creo que se queda atrás.
Yo las pocas veces que lo he usado, solo me ha traído ruina.
No, a ver, entiendo que hay cosas que, yo qué sé, te montas algo así y tal y necesitas
como eso, no tienes como unos requerimientos de diseño súper específicos, que nunca ha
sido mi caso.
Siempre he tenido como unos requerimientos muy, muy, muy específicos.
Entonces, tienes que hacerlo todo súper pixel perfecto.
Y yo, la verdad que cuando yo empecé, claro, yo no llevo tantos años.
O sea, yo tengo cuatro años y medio.
No, no me refiero que yo llevo programando, aunque soy vieja.
Nos han dicho viejos en la cara.
En la cara.
Yo soy, en la cara.
Yo no tengo tantos años.
Yo tengo 32.
Tengo 32, pero si yo hubiera empezado a trabajar a los 22, pues tendría 10 años.
Ah, no, no, 32 tienes.
Ah, pues eres mayor que yo, entonces.
Pues claro, lo que pasa que yo, cuando tú empezaste a programar, yo estaba haciendo teatro
por ahí.
Entiendo.
Esa es la cosa.
O sea, cuando yo empecé a programar, que fue hace cuatro años y medio por ahí, yo
ya empecé, o sea, ya asistía grid, ya asistía flex, ya el mundo era bien, ¿sabes?
Las tablas no, las tablas no tuviste el gusto de...
Claro, claro.
Yo no sufrí eso.
Y yo empecé del tiro, o sea, yo empecé con Style Components.
En el equipo que estaba yo, había gente muy buena maquetando.
Y había gente como muy buena en temas de accesibilidad y de HTML, CSS, entonces como
que esa gente me formó en esa cosa y solo tirábamos de este tipo de librerías para
cosas muy específicas de, vale, esto me soluciona, yo que sé, un modal, ¿sabes?
Me soluciona un montón de JavaScript que tengo que meter aquí y que tengo que estar controlando
un montón de casos.
Y al final como que para mí me resulta más sencillo hacerlo yo, ¿sabes?
Porque ya una vez que sabes cómo hacerlo, ya es como vas a tiro hecho.
Y cada vez que tenía que usar una librería, me pasaba mucho con Material Y, cada vez que
tenía que modificar algo de Material Y, me quería matar.
O sea, horrible.
Y era como, pero por favor, si esto es de Google, ¿no?
O sea, no entiendo, no compiendo.
Y como que me resulta muy difícil modificar y ahora te tienes que poner a ver bien la
documentación, es complicado.
La buena noticia es que Bootstrap, su uso, si vamos viendo su uso, todavía, claro,
obviamente, hay bastante gente que lo ha usado, se queda en el 80% en el interés, el interés
es el que menos, o sea, es el que menos interés da, pero es el que más se ha usado.
Y el más legacy es, ¿no?
Y mira la satisfacción, mira la satisfacción.
No, la satisfacción está también por los suelos, obviamente.
Madre mía.
Yo creo que, a ver, la gente que utiliza Bootstrap y no se escuche, obviamente, pues sigue funcionando.
Muerte a Bootstrap, la gente.
Sí, sí, la gente ahí a saco, ¿no?
Pero si te sigue funcionando, pues bien, pero tampoco hay una comparativa, hay gente
que lo está comparando con Tailwind y yo creo que son como dos cosas totalmente diferentes
que no creo que tengan nada que ver porque Bootstrap es más también un, es un framework
de CSS que tienes catálogo de componentes que te puedes copiar, que simplemente tienes
aquí, tienes la alerta, te la copias.
Lo malo es que luego todas las páginas se veían igual, pero bueno.
Que al final es como todo, que también cualquier librería que vayas a tirar, la cosa es que
tú no digas, vale, es que esta librería me lo hace solo, entonces yo no tengo que saber
nada de CSS ni nada de, ¿sabes?
Porque ya esto va solo, sino que todo está montado sobre eso, entonces si tú entiendes
la base, take advantage, ¿sabes?
De las cosas que te interesan o lo que no y lo usas de manera más inteligente porque
es que si no al final te crees que es más sencillo y luego te quieres matar.
Yo creo que hay, quiero decir, que hay, igual que para gustos colores, creo que hay
casuísticas y casuísticas, yo por ejemplo también, últimamente en los últimos años
sí que he trabajado mucho en producto, entonces si trabajas en producto con un equipo, con
diseño, con desarrollo, con todo integrado en el mismo equipo, tiene poco sentido que
si es un producto que tienes que mantener e iterar y clavar el diseño estirando de frameworks,
pero si es una prueba de concepto, si trabajas para algo más consultoría y así, pues tiene
más sentido o si tienes menos conocimientos de CSS y te tienes que pelear porque tu perfil
es más de, no sé, de backend o no sé, hay muchas casuísticas que me he encontrado con
equipos que sí que tiene más sentido, pero yo si trabajas en un equipo donde es un producto,
donde se tiene que iterar y eres tú quien tiene que hacerse cargo y hay perfiles de diseño
que te van a estar definiendo, que se tiene que diseñar y a nivel de negocio, qué componentes
se necesitan, qué lógica y todo, no tiene sentido, no tiene sentido porque es lo que
decías, tienes que estar reescribiendo y además cuando eliges un, esto es como un
Pokémon, ¿no?
Te elijo a ti, eliges a Pikachu, lo tienes luego que evolucionar, ¿no?
Pues si te casas con un framework, te tienes que casar con las decisiones que haya tomado
la persona que lo ha creado.
Bueno, yo tengo que decir que de gente que conozco que controla CSS, Tailwind me han
hablado siempre bien.
Yo no soy muy fan, pero por eso lo que tú dices, si me tengo que poner yo a hacerlo o
aprenderlo, de verdad que sé que es rápido, pero como ya tengo mis cosas montadas, digamos,
mis scaffoldings y todo, es como pues empiezo a tirar ya desde ahí, pero que...
Y al final dependes de algo externo también.
No es que odie los frameworks, ni que diga eso en el mal o que quien los use no sabe lo que
hace, no, o sea, hay, o sea, seguramente que hay muchas casuísticas, muchas necesidades y
muchos las cubran con el que elijan, entonces...
Claro.
Desde luego además tienes que saber, porque si luego tienes que debuguear algo, a mí
me parece como más complejo debuguear algo que no estás como, digamos, controlando.
¿Sabes dónde sufrí yo mucho el uso de un framework?
Y fue con Bootstrap, fue con Prime Engine.
Y me tenía que basar en...
Me tenía que basar en esto, entonces son componentes que están en Bootstrap, con clases
de Bootstrap, hay algunos componentes extra que no están en Bootstrap de saque, sino
que están desarrollados para esta librería, biblioteca, no sé ni cómo llamarle, y tienen
funcionalidad ya.
Entonces, ¿qué pasa?
Si elijas esto, un date picker, por ejemplo, y luego te decían, no, es que el date picker
tienes que poder hacer esto, esto, esto y esto.
Decías, ¡ah!
Es que no puede, obvio.
Es que ya no es solo una capa visual, es que es la funcionalidad también.
Y en Angular, ¿sabes qué?
Lo siento, pero Angular es con lo que peor me llevo.
Entonces, es como, lo pasé bastante mal.
O un acordeón, claro, es que tienes toda la funcionalidad ya aquí dentro.
Entonces, yo lo pasé realmente mal.
Y la misma cara que ha puesto Miguel de, ¿qué?
¿Frame qué?
Claro, documentación.
Sí, está, ya está, en fin.
Volviendo a los frameworks CSS.
Una cosa interesante de la encuesta es que en satisfacción, si os fijáis, están bajando
todas.
O sea, todos están bajando en satisfacción, pero, pero, hay dos que son nuevas, que están
llamando bastante atención.
Una es Open Props y otra es 1CSS, que mucha gente, 1CSS, están diciendo que es el Tailwind
Killer.
Vamos a ver, vamos a darle tiempo.
O sea, ya lo están matando, no hemos dado tiempo casi ni a pillarle rabia a Tailwind.
O sea, ya lo están matando.
Hombre, yo sí tengo que elegir Open Props, primero que está Damage Gile detrás, si
no me equivoco, y luego que son variables.
O sea, son custom properties para que te hagan todo.
Entonces, en realidad mola.
A mí esto me gusta mucho.
Claro, está muy chulo porque puedes pillar lo que necesites.
Tienes hasta animaciones, bueno, todos los colores, obviamente.
A ver, gradientes, gradientes súper chulos.
Además, este Noisy Example, estos son súper chulos.
Claro, es que a mí esto me gana.
Es súper bonito todo.
Y esto es más de utilizarlo con CSS directo de forma nativa y con custom properties.
O sea, que te está poniendo todo el rato bar y tal.
¿Sabes lo que sería chulo?
Que alguien utilizase Open Props para crear su propio Tailwind.
¿Sabes?
Como con Utility Clases para no tener que poner todas las custom properties.
Entonces ya sería...
Pues sabes que en dos semanas, dos, tres semanas, voy a San Francisco y le voy a ver.
Así que...
Pues díselo, susurra la idea.
Me lo apunto y se lo digo así.
Pero la verdad es que sí, que he visto un montón de gente que habla súper bien.
Porque al final son propiedades y son mucho más fáciles de personalizar y es totalmente nativo.
Y eso está muy, muy, muy, muy bien.
Y uno CSS, pues la idea es también Atomic CSS, lo mismo que Tailwind.
Pero parece ser que es bastante fácil de personalizar también.
Que tienes diferentes presets en los que tienes como ya configuraciones preestablecidas.
Y que va súper rápido también.
O sea, súper personalizable, instantáneo, muy rápido, cero dependencias.
Y hablan que la experiencia de desarrollo es brutal.
Así que, bueno, está...
Habrá que probarlo.
Habrá que probarlo, eh.
Sí, sí.
Pues son los dos únicos en satisfacción.
Están por aquí arriba.
Tendríamos Open Props el que más, uno CSS.
Tailwind sería el tercero en satisfacción, que no está mal, aunque ha bajado ligeramente.
Y luego tendríamos Pure CSS bastante cerquita.
¿Has escuchado hablar bien de ese también?
También son como los más nuevos, ¿no?
No ha dado tiempo a cogerle rabia.
Yo este creo que es bastante igual.
Yo creo que es eso.
Este tiene bastante tiempo, creo, ¿eh?
Sí, cinco, siete años.
Y yo recuerdo que pesa como muy, muy poquito.
Sí, como que es muy pequeño.
Es como chiquito, chiquito.
Como un bootstrap, pero mucho más pequeño.
Y bastante sencillito, la verdad.
Pero me ha sorprendido verlo tan arriba.
Claro, luego cuando ves que sí que tiene satisfacción, pero luego ves el uso.
Y si buscamos el Pure CSS, vemos que no se usa casi.
No lo usa nadie.
Claro, el que lo usa es muy fan.
Está muy contento.
Por eso está muy satisfecho, claro.
Es el creador.
Para muerte.
Está convencidísimo.
Es el creador, básicamente.
Va a top.
Aquí tenemos un poco la división entre positiva y negativa.
Aquí podemos ver que en Foundation, la gente casi que lo odia, que si lo ven, pues le van
a prender fuego.
Pero el que más, Bootstrap.
¡Ostras!
Bootstrap.
¡Wow!
Y Tailwind, pues para ser el más usado, sí que se ve aquí que...
Bueno, el más usado.
De los más usados, creo que era el segundo.
Sí que está por aquí bastante...
O sea, que tiene bastante gente que sí que le está gustando.
Otras herramientas.
Material UI, que la habéis comentado.
SaaS.
¿Seguís utilizando SaaS?
¿Cómo va esto?
Yo dije un día en Twitter que he dejado de utilizar SaaS por el Nesting nativo y no
veas.
Ahí sí que me cayó chorreo.
¿Ah, sí?
¡Ay, madre pobre!
Sí, bueno, porque empezaron a decirme que claro, que si los mixings, que si no sé qué.
Y es como que yo no digo que el resto esté mal si lo hace.
Y digo que yo, para mí, para lo que yo hago, para mis ejemplos, para todo, lo único
que me faltaba era poder deshacerme de esa parte, ¿no?
Del Nesting.
Porque además el Nesting nativo, bueno, no lo hemos comentado, no sé si está en alguna
parte, pero es parecido a SCSS, o sea, a SaaS, pero en la sintaxis de SCSS es parecido
a la ampersand, pero no es igual, o sea, puedes hacer otras cosas.
Entonces, es bastante interesante.
Está bastante chulo.
Aquí tenemos un ejemplo, por ejemplo.
Esto es ahora totalmente nativo y tiene un soporte bastante bueno ya.
Todo, hoy, ya, en todos los navegadores, creo que desde ayer o desde hoy, ya están todos
los navegadores.
Sí, porque Firefox lo ha 76% ya, y eso que es bastante nuevo.
Es porque Firefox justamente lo añadió hace unas pocas versiones, o sea que...
Muy bien.
Sí, sí, sí.
¿Tú sí que utilizas, Rita, SaaS todavía?
Para alguna cosa.
Porque comentabas para alguna cosa.
Sí, pero tampoco no Strong Opinions.
No lo echarías de menos, ¿no?
No veo aquí como...
Yo he hecho en falta un poco catálogo de componentes.
Sí que hay una mezcla, porque veo que aquí tienen Undesign, como que lo mezclan todo.
Yo la verdad es que los separaría, porque para mí no es lo mismo Undesign, que es un catálogo
de componentes, que Tailwind CSS.
Me parecen como dos cosas totalmente distintas.
Y lo tienen como un poquito mezclado, así en general también ponen por aquí Panda, Daisy,
que es un catálogo de componentes de Tailwind.
Pero bueno, veo que la gente está bastante contenta con el estado actual.
No sé.
Y el CSS en JS, ¿cómo lo veis?
Porque parece que está de capa caída.
Carmen está contenta con esto.
Yo me alegro mucho.
¡Y punto!
Ya está.
Se alegra.
Bueno, pues yo diría que ha muerto.
O sea, ha muerto no, pero que ya sí que no veo que la gente esté...
O sea, se ha ido a Tailwind.
A ver, lo positivo ahora mismo, es verdad que no recuerdo bien si Scope está en todos
los navegadores ya, pero teniendo capas en cascada, teniendo Scope, podemos tener un manejo
de la especificidad mucho más a nivel de componente únicamente con CSS que con un framework
o con JavaScript, que si utilizáis React o así, pues sí que está muy escopado cada
estilo al componente.
Pero ahora también vamos a poder hacerlo.
Que por ejemplo, no sé si ya habéis estado utilizando capas en cascada, que sí que ayuda
a solventar algunos problemas de la especificidad, pero también genera otros.
Claro, nuevos.
Exacto, nuevos.
Pero sí que se está remando muy hacia esa parte de que puedas tener escopados todos
los estilos dentro de los componentes y que independientemente de si quieres traer un
tercero, es decir, imaginaos que quisierais cargar solo una parte de Bootstrap, que antes
pasaba.
Cuando cargabas Bootstrap, tenías que sobreescribir un botón porque hay diferentes niveles, ¿no?
Desde donde cargas el CSS, desde el User Agent, que es el navegador, a estilos de usuario,
incluso de terceros.
Pues con una capa en cascada tú puedes importar cualquier CSS de terceros y decidir en qué
orden va a ganar esa especificidad, ¿no?
Entonces tenemos un manejo como mucho más consciente de cómo se están cargando los
estilos, en qué orden y aquí se le está dando prioridad.
Pero es verdad que yo aún no lo he utilizado a nivel muy global, tan grande, en un proyecto
muy bestia como para decirte a nivel de arquitectura qué problemas me puedo encontrar.
¿Llegaste a utilizar tú, Rita, algún CSS en JS o te lo saltaste en tu vida?
Aquí entra Style Components.
¿No?
Style Components.
Yo soy Style Components fan a muerte.
¡Ojo!
¿Ah, sí?
¿Y eso?
A ver, a ver, cuéntanos.
Yo he usado Style Components en todos los proyectos.
Todos, todos, todos.
También, claro, estoy un poco biased.
Claro.
Bueno, pero está bien.
Claro, es lo que más controlo y para mí en mi cabeza es como, yo sé cómo montarlo
para que eso, aunque se haga un monstruo, no me dé problemas, ¿sabes?
Yo me monto así como mi especie, mis componentes todos reutilizables y luego eso me da como
mucha flexibilidad a la hora de importarlos y modificarles solo X cosita y que se te
queda ahí y no me tengo que preocupar si está heredando de no sé quién, ¿sabes?
Como que todo eso son problemas que no tengo.
Claro, usando React para mí Style Components es muy cómodo.
Sí, no, la verdad es que sí que es cómodo el hecho de tener separado con toda la potencia
de JavaScript.
O sea, siempre CSS en JS ha estado bien.
O sea, lo que te vendía, ¿no?
El hecho de que tenías autocompletado el linter, o sea, la experiencia de desarrollo,
separar los estilos ahí en otro archivo.
Eso, la verdad es que sí, pero siempre ha tenido problemas, aunque eso es una cosa que
Vanilla Extract sí que ha solucionado bastante bien.
Lo malo de Style Components es que necesitas el JavaScript para ejecutar el CSS.
Y eso es bastante jodido.
Pero Vanilla Extract, por ejemplo, sí que lo arreglaba, pero nada, es que viendo también
un poco esta encuesta, como podéis ver, la satisfacción de todos.
Style Components también ha bajado casi 10 puntos en un año.
Emotion también se ha desplomado.
Vanilla Extract, pues también casi 10 puntos.
Es bastante sorprendente, ¿no?
Sí.
Porque todos CSS en JS, como que la gente no ha terminado, no sé, es como que ha habido
un sorpaso, ¿no?
De Tailwind.
Excepto Rita.
Rita, ¿Hiciste la encuesta?
No, por eso ha bajado.
Si la hubiera hecho yo...
Efectivamente, efectivamente.
Igual la tenías que haber hecho, ¿eh?
Yo creo que la tenías que haber hecho.
Soy de esas personas que la tenía que haber hecho.
Ríñeme.
Ríñeme.
No, hombre, no.
No te has ríñido.
Ríñeme.
Es que no me da la vida, no me entero de la mitad.
Hay las cosas que pasan, de verdad te lo digo.
Aquí tenemos esto de quién utiliza pre, post, procesadores.
Y esto siempre me sorprende porque Sass, obviamente, está en número uno.
4.746 personas.
Post CSS solo han contestado 3.000.
Y mi sensación...
Bueno, ya lees y estilos, ya ni comentar.
Pero mi sensación es que mucha gente no sabe que está utilizando realmente el Post CSS.
Seguramente.
¿Sabes?
O sea, que no lo sabe.
Que lo está utilizando y no lo sabe.
Autoprefixer, todas las cosas que por debajo realmente se están utilizando.
Hay gente que yo creo que no lo sabe que los tiene por ahí.
Y ojo aquí con los navegadores.
Esto siempre me sorprende porque aquí podéis ver que Chrome tiene 5.427 y Firefox 3.780.
Ostras.
Pues me da mucha pena lo de Firefox.
No que la gente esté votando, sino el estado en el que está ahora mismo Firefox y Mozilla en general.
Da pena porque había un montón de developers que eran la hostia y que estaban haciendo cosas muy guays.
Y a nivel de experiencia de desarrollo, ¿no?
Con todo lo que decíamos de funcionalidades que ahora tienen las DevTools de Chrome, por ejemplo.
Que esa era copiada de Chrome por parte de Chrome de Firefox totalmente.
Entonces, da pena que se vea que se está como desinflando bastante, ¿no?
Creo que el único que le estaba plantando cara era Firefox y para la desgracia para el sector.
Que únicamente haya un player, pues no mola nada.
Yo que soy new school, siempre he usado Chrome.
Y claro, abro Firefox y es que me da igual lo que tenga porque hablo el inspector.
O sea, en mi cerebro explota.
Es como cuando eres Safari, ¿no?
O sea, ¿dónde están las cosas?
Y lo cierro y me estreso.
Al final uso Safari porque sé que Safari es como el nuevo Internet Explorer.
Entonces, si algo falla, vas en el Safari.
Entonces, chequeo en Safari.
Ojo que yo no paré de decir eso.
El año pasado y el anterior y este, Safari se han puesto las pilas.
Sí, total.
Pero impresionante.
Ya no pasan cosas raras.
Ha entrado gente.
A mí eso me pone enero.
Ha entrado gente.
La de Firefox.
Top ahí, básicamente.
Sí, sí, sí.
No lo quería decir, pero se va a la mierda.
Pensaba que era una broma.
No, no, no.
Que Firefox se va un poco a la mierda porque, mira, esta señora está detrás ahora.
Y claro, esta tía es diosa, faraona, todo.
De hecho, de Jen Simon, si tú buscas vídeos en YouTube, seguramente vamos a encontrar que
es la precursora de Flex y YouTube y Grit.
¿Ves?
Modern layouts getting out of rats.
O sea, layout.
Sí, sí, o sea, esta mujer es la que movió mucho el tema de Flex y Grit.
Y ahora la ha contratado Apple y le están dando bastante caña a Safari, que por eso podéis
ver, o sea, todos los anuncios que hacen de...
Es que están al día.
Safari ahora mismo es sorprendente.
Parece mentira.
Entonces, ¿quién va a ser el nuevo Internet Explorer?
¿Quién va a ser la ruina?
Internet Explorer.
No, Internet Explorer no.
Pues, a ver, por desgracia, sinceramente, parece que está quedándose Firefox con esa...
Sí, da penilla, ¿eh?
Le está costando ponerse al día.
Es que es normal, es un tema también de recursos, ¿sabes?
O sea, es que no tienen recursos para estar desarrollando a la velocidad de las novedades
que saca CSS, HTML y JavaScript, pero además también Chrome.
O sea, Chrome porque Google, de forma totalmente independiente y autónoma y fuera de muchas
especificaciones, lo que hace es inventarse cosas que a veces tiene mucho sentido y la gente
al final, por un tema de presión, lo tienen que añadir, como por ejemplo a View Transitions
API.
Ahora, después de sacarlas, es que están trabajando para meterlas en la especificación para que
veas, claro, pero lo hacen mal.
Porque pueden.
Claro, porque pueden.
Sí, claro, porque pueden.
Fácilamente me han dicho esto porque puedo.
Y yo lo voy a hacer y tú lo vas a tener que hacer.
¿Por qué?
Porque totalmente.
Sí, sí.
Bueno, aquí tendríamos CSS, uso de CSS.
Bueno, la gente obviamente...
Me encanta que todavía...
Bueno, tiene sentido que escritorio sea el número uno, ¿no?
De que la gente prueba sus CSS, o sea, su diseño web, desarrollo en escritorio.
¿Vosotras realmente utilizáis el móvil para probar o al menos hacéis el modo este...?
Cuando trabajaba en una tienda, que sí que su mayor tráfico venía por parte de iPhone,
de iOS, sí que testeaba directamente enchufando el iPhone, conectándolo con Xcode y con las
developer tools de Safari, tú puedes directamente debuggeando ese dispositivo.
Ahí sí.
Si no, no sé, por ejemplo, el motor de...
Si tienes Mac, sí que es muy similar a lo que puede llevarte la experiencia en iOS.
Si no lo haces en Mac y necesitas dar soporte a ellos y lo haces emulando desde el navegador,
estás vendido.
Porque temas de scroll, o sea, iOS siempre tiene problemas de dobles scrolls, sobre todo
cuando aparecen modales, de renderizado con SVG, o sea, hay cosas como muy típicas de
iOS que, lo digo porque si no lo hacen, deberían hacerlo porque si no, luego se llevarán sorpresas.
Había un producto que yo ya no sé ni si se usa, que se llamaba como browser, no sé qué.
Ah, sí, browser stack.
Exacto.
Que te levantaba, te emulaba, era una máquina virtual que te emulaba el renderizado de esos
sistemas, ¿no?
Ahí era bastante fiable, pero también era muy caro.
Sí, muy caro.
Al menos cuando...
Sí, yo lo intenté usar y de pronto me dijeron, paga.
Y también tienes que tener máquina que aguante porque al final te está emulando diferentes,
¿sabes?
Entonces a lo mejor tu ordenador no aguanta emular eso.
Yo soy lo peor y lo pruebo en el navegador como buena ruina y ya cuando está en staging
cojo mi móvil y digo, vale, y lo miro y lo chequeo.
Pero, claro, la cosa es que, por ejemplo, el producto que nosotros hacemos supuestamente
es un B2B, o sea, que lo van a usar empresas para comprar equipo para tal que dices tú,
vale, lo harán, es un portátil, ¿no?
Es como lo normal, lo lógico, en plan, nice to have, then it's responsive.
Y luego hicimos un chequeo y resulta que hay un montón de gente que debe ser un poco
workaholic porque había un montón de usuarios de móvil y digo, en serio, usan esto y resulta
que todo el mundo ve todo en el móvil.
Bueno, es que te sorprendería y donde usas el móvil para revisar las cosas también te
sorprendería.
Nosotros montamos una vez una aplicación que era para público japonés.
Nosotros tendemos como desarrolladores y diseñadores web a tener nuestro pantallote enorme, ¿no?
Y te hacen estos diseños que se llevan ahora, que son gigantescos.
Y ahora nos vino el tío y nos dijo, mira, es que en Japón la gente usa los mini portátiles
estos chiquititos porque no tiene espacio normalmente para tener un pantallote grande.
Entonces, como que la mayor parte de usuarios tenían unos tamaños de pantallas súper raros
para ser, por ejemplo, Europa, ¿sabes?
Entonces, como ver el público que tienes de tu aplicación también es una cosa que
te va a...
Bueno, nosotros tuvimos que rehacer un montón del diseño porque es que se veía mal.
Está guay, ¿eh?
Sí, de hecho, eso lo había escuchado alguna vez, el tema de Japón, pero no había tenido
nunca la...
Todo es pequeñito.
Sí, la oportunidad de escucharlo.
Y sí que es verdad que una vez he visto esto, que por ejemplo, pues Alemania, pues bueno,
aquí pone 1080 por 1920, entiendo que es al revés, 1920 por 1080.
Pero sí, mira, Japón tiene como más pequeño que lo normal.
O sea, curioso.
Interesante, eso del 2020.
Pero sí, estas cosas a veces pasan, que por eso es interesante a veces ver los datos reales
de los usuarios que tenemos porque igual estamos desarrollando para a veces saber quién y luego
si no sabes de dónde vienen los usuarios, la puedes estar liando.
Browser incompatibilities.
¿Hay alguna feature de CSS que tienes dificultades usando porque hay falta de soporte?
Me sorprende que, bueno, CSS Nesting, yo hubiera dicho el primero CSS Nesting.
Y a ver, Hash está interesante, pero, ostras, no es más importante CSS Nesting.
Es que creo que había mucho hype con Hash y seguramente sea la que más demandada o que
la gente más estaba deseando que llegase.
Así que supongo que por eso, ¿no?
Que el poder hacer, utilizar este selector, supongo que querían que estuviese soportado
y como hasta hace relativamente poco no lo estaba soportado en todos.
La Inclam no está soportado.
Yo llevo usando la Inclam, soy súper fan de la Inclam.
Eso no está soportado.
¿Cuál?
La Inclam.
Esa me encanta.
Sí, es para que te pongan los tres puntitos que te, como se llama, no sé cómo se dice
eso en español.
Elipsis.
Sí, la elipsis.
Pero tú le dices, vale, pues yo quiero que esto sean tres líneas.
Por ejemplo, si tú estás diseñando un blog, ¿sabes?
Pues dice, vale, como mucho tres líneas o cuatro líneas y ya no tienes como que ponerle
el width fijo, sino que le dices tres líneas.
Y ya eso es listo y lo haces todo solo.
Yo tengo un mixing que es Inclam y tú le pasas el número y eso lo pongo yo en todos
los proyectos.
Lo voy llevando de uno a otro.
Me encanta.
No está bien soportado, maldito sea.
Este es interesante porque fíjate, es que Inclam, antes lo he comentado, ¿no?
De cómo Google se inventa cosas y tal.
Pues mira, lo que pone aquí.
Nota.
Esta propiedad fue originalmente implementada en WebKit y tiene algunos problemas.
Luego, luego se estandarizó para tener un soporte legacy.
O sea, es muy fuerte.
El tema es que se ha quedado con lo de WebKit y tienes que utilizar lo de WebKit porque
es como se ha soportado por un tema de legacy.
Pero sí, al final sí que está la especificación que define el line cam property, pero que algún
día se supone que debería reemplazar esta, pero todavía no se está soportando correctamente.
Por eso la tienes por aquí.
Container, bueno, container queries, pero yo entiendo que muchas de estas al final, pues
es cuestión de utilizar post CSS y ya está.
Pero es verdad que la de hash es un poco problemática porque creo que la de hash no es fácil
hacerla, ¿no?
Porque esto es algo que no podíamos hacer antes.
No, no se podía.
Claro.
Claro, tú no podías ir al, ¿sabes?
Seleccionar el...
El padre.
El padre.
Yo creo que, claro, eso es lo que todo el mundo quería, ¿no?
Claro.
Por favor, necesito coger el padre.
Igual por eso.
Claro, por eso igual la gente es que le tiene tantas ganas.
El hecho de poder decir, no, en los H1 que tenga esto, entonces, claro, ya es una forma
de poder...
Y puedes hacer cosas en plan.
Coger todos los forms que tengan inputs que sean inválidos, ¿sabes?
Así que te puedes poner muy...
O hacer estilos para una card que tenga imagen o no, oye, cosas así, ¿sabes?
Está guay.
Mira, aquí tenemos las features que están faltando, ¿vale?
Anime, anime tu auto.
Ah, animar las dimensiones de un...
Anime.
Anime One Piece.
Sí, por favor, One Piece.
Yo venía a hablar de One Piece, pero nadie me dio voz.
Por favor.
No, la One Piece.
Luego cerramos con comentarios sobre One Piece.
Venga, continuamos.
Animar las dimensiones de un elemento a auto.
Hostia, esta sí que, la verdad, animar el ancho o el alto de un elemento automáticamente,
¿sabes?
Es decir, le tengo cero.
De cero a auto, ¿no?
Y que automáticamente se lo haga.
Siempre hay que hacer como hacks y cosas raras.
Eso es una mierda.
No entiendo por qué no se puede todavía.
Masonry.
Mira, Carmen.
Masonry.
SvGN CSS.
¿Hay alguna que vosotras que digáis, ostras, me falta esta?
¿Hay alguna feature?
No sé.
Para quitárselas del todo, mixings.
Mixings.
Claro, algún tipo de funciones.
Es verdad que no hay...
Yo una que me da mucha rabia es la de, sin ser custom properties, reutilizar bloques.
Claro, mixings sería casi eso, pero mixings es funciones.
A mí me gustaría poder guardar en una custom property como un bloque de CSS que se pudiera
reutilizar.
Como si fuese un extenso o algo así.
Exacto.
Exacto.
No es tan...
Claro, yo sé cómo está el componerlo todo el rato aquí.
Lo siento.
Vale, pues sí, estoy con Miguel.
Eso está guay.
Eso estaría muy guay.
Y en tu caso, Rita, alguna que en CSS, yo que sé, que digas, ostras, pues me gustaría
que añadan esto.
O te da igual porque cuando está el componer ya...
Es que tengo todo lo que necesito.
No, hombre, no.
No caigo ahora mismo algo así que haya dicho yo, Dios mío, esto.
Pero sí que, a ver, el tema de lo de poder coger cosas de lo del hash, o sea, que eso
esté bien soportado de poder coger cosas de los padres, estirar para arriba.
Estirar para arriba yo creo que es como lo que todo el mundo...
Porque con eso hemos sufrido todos.
La verdad es que ahora hay tantas cosas.
Yo ahora lo que le pido es, porque una de las cosas que no ha puesto en la encuesta, porque
no ha dado tiempo, porque fíjate lo rápido que va, es las scroll-driven animations, que
esto también es CSS, las animaciones a partir del scroll.
El timeline animation, para poderme quitar el scroll-trigger de GSAP, de GreenShock, estaría
muy guay.
Quiero hacer un matiz, porque han dicho por el chat, vaya, vaya, no quieren utilizar
Sass, pero quieren que CSS sea como Sass.
No, no quiero que CSS sea como Sass, quiero que sea nativo, quiero que sea estándar.
Carmen, quiero que sea estándar, ¿vale?
Puñetado a la mesa.
No, es que nos olvidamos de los estándares y yo soy muy pesada con esto.
O sea, algo que funciona y que utilizamos mucho debería ser un estándar, porque si
no, eso es lo que va a perdurar.
Si no, el resto se puede diluir.
Entonces, todo lo que se acerque al estándar y al navegador, por eso lo digo, entonces,
matizar estándar es bien.
Mira este comentario, vaya, vaya, no quiero usar Sass, pero quieren que CSS sea como Sass.
Pero la verdad, no sé, o sea, no me parece polémico, ¿no?
Tiene sentido no querer utilizar algo, pero es algo positivo para Sass.
O sea, Sass ha perdurado durante mucho tiempo.
Creo que aquí, al menos Carmen y yo, Rita creo que se la ha podido saltar, por suerte,
y ha vivido con estar con Pones, la felicidad.
Pero hemos usado Sass durante mucho tiempo y yo creo que nos ha gustado durante mucho tiempo.
Lo hemos disfrutado.
Yo empecé con LES, o sea, y al principio utilizaba LES y luego te vas acomodando a los, a la sintaxis.
Entonces, cosas que estamos como ya muy interiorizadas, igual que hay principios y igual que ahora tú entras a cualquier e-commerce
y hay un buscador y quieres que se comporte como se ha comportado Amazon, porque al final ya se integra a como utilizas tú el medio, ¿no?
La web, pues quiero que esas funcionalidades estén de forma nativa, que sea un estándar web, para que perduren,
porque realmente son, joder, que te solucionan la vida.
Entonces, era el matiz, ¿eh?
No, no, no es hater ni nada.
No, no, no.
No quiero ni troleo ni nada, ni mucho menos.
Al revés, es que me mola el comentario que has hecho porque es que lo que queremos es que eso perdure.
Que no pase como con LES, que luego se quede ahí alguna cosa chula que tenía y que nos integre en Sass
y luego a que viene otro ahora.
No, pues lo que funciona, lo que nos gusta, lo que nos ayuda a diseñar y a desarrollar mejor,
que sea un estándar.
El claim es ese.
Bueno, recursos.
Ya antes de ver los premios finales.
Los recursos, vamos a darle aquí la enhorabuena porque si no me acuerdo mal,
aquí entre la gente, podcast, no.
Personas, personas.
Entre todas las personas, Kevin Power, Chris Coyer, Josh Comeao.
Bueno, con razón, Josh.
Wes Boss.
A ver, la verdad es que Wes Boss, como de CSS, me ha sorprendido mucha gente.
Wes Boss, que alguna cosa sí que ha dicho, pero me parece como a Gama, a Gai.
Creo que se hacen muy virales los pocos ejemplos que pone en comparación a Adam o a Jay o...
O una, ¿sabes?
O una, por ejemplo.
¿Sabes?
None, séptimo.
Pues quien quiera.
¿Quién soy yo?
No, no lo sabíais.
Puede ser tú, puede ser cualquier persona del chat, quien quiera puede ser None.
Qué ansiedad.
La verdad es que sí que me sorprende porque digo, ostras, a ver, que Wes Boss es un crack,
pero de CSS hay una referente de Google, además, que tiene un montón de visibilidad, ¿no?
Y aquí, pues, si vamos a la siguiente página, otras respuestas, pues resulta gente...
¡Ojo! Estoy yo aquí, pero también te vas a Carmen, así que felicidades, Carmen.
¡Felicidades, Carmen!
No, muchas gracias a la gente, de verdad.
Me ha hecho ilusión por lo pesada que soy con la encuesta.
Digo, bien, está calando.
La gente se acuerda de que Carmen es una pesada y ha dicho que la rellenemos.
Así que, guay.
Y mérito, el tuyo, que no sé cuántos años llevas ya apareciendo.
O sea, llevas varios años, llevas apareciendo.
Aquí eres el Google, ¿no?
De esta...
Estás ahí como monopolizando.
Bueno, pero a nivel de estadística es eso.
¿Cuánta gente ha rellenado la encuesta?
Y consume el contenido en inglés y cuánto lo consume en español.
Entonces, genial que la representación hispanohablante, ¿no?
Pues que se acuerde Miguel al rellenarlo, porque, joder, la verdad.
Eso lo dejé el otro día.
Es referencia para todos nosotros, así que...
Gente, que jaldas aquí.
Mildu no enseña CSS.
¿Cómo que no?
La madre que lo parió.
A ver, a lo mejor no he hecho un curso de CSS, pero, hombre, sí que enseño.
Y hablamos...
¿Y hoy qué estamos haciendo?
Hablar de CSS, justamente.
Bueno, pues nada.
Enhorabuena, Carmen, porque me parece genial que salgas.
Además, me parece que es un reflejo también de la comunidad hispanohablante.
Ojalá, yo que sé.
Muchas veces, estas respuestas principales, además, es porque cuando haces la encuesta,
te dan la pos...
Ah, yo te voté, por cierto, Carmen.
Pues yo te voté a ti, así que gracias.
Amor.
No, pero lo que dices es verdad.
Hay gente predefinida y hay otra de espacio en blanco de nombres.
Así que tiene mucho más mérito que te nombres.
Claro, claro.
Esta gente que veis aquí, esta gente realmente es porque la podías seleccionar directamente.
Había una selección, un combo box, y podías seleccionarlos.
Estas respuestas es gente que la ha puesto a mano.
O sea, que la otra gente seguro que hay alguno que ha puesto...
Sí, este que me suena.
Y no lo había visto.
Básicamente.
Así que, bueno, ojalá pongan a Carmen ahí y la votemos directamente y que tenga su avatar en condiciones.
Como debe ser.
Ah, mira, salía por aquí.
Blogs y revistas.
Bueno, la gente me encanta.
Gracias a la gente que me ha votado en cualquier sitio.
Gracias.
Es verdad.
¿Dónde debería salir Manz, no?
Que también hace muchísimas cosas de CSS.
Totalmente.
Totalmente.
Y también sé que ha compartido...
Lo están diciendo por aquí por el...
Sí, sí.
Totalmente.
Creo que Manz también ha estado compartiendo un montón la encuesta y ojalá también aparezca.
De hecho, a Manz también le voté.
¿Y a quién más voté?
A Estefania Aguilar.
También la voté.
A Estefania.
Los premios finales.
A ver, premios finales.
Característica más adoptada.
Me tienen que decir la que creen que es.
¿Quién creen que ha ganado?
O ¿Quién le gustaría que hubiera ganado?
La característica de CSS más adoptada según la progresión interanual.
Yo no lo he mirado a posta para no saber el resultado.
¿Yo?
No he mirado esto.
No pasa nada, pero a ver si mejor.
De verdad.
Entiendo que GAP como que ya está superado.
Quiero decir, sería GAP.
Vale.
No sé si sería Haas o Subgrid, pero yo Subgrid no lo utilizo.
Entonces.
¿Tú qué dices, Rita?
La más adoptada respecto al año pasado.
La más adoptada.
Pero tiene que ser nueva de este año.
O sea, de las que hemos visto antes.
No.
Es la característica que ha tenido mejor progresión.
¿Sabes?
O sea, la característica que ha mejorado respecto al año pasado.
O sea, que no tiene por qué ser nueva, pero sí que haya mejorado.
Puede que sea Haas.
¿Haas?
¿Rita?
Hombre, era la que tenía más.
Dicen color red por aquí.
Bueno, pues le doy Haas.
Aunque The Gap Property for Flexbox ha mejorado también 16,4.
No sé si.
El Gap.
El Gap es...
Estaba ahí.
Es que tienen que ser esas.
Sí, sí, sí, sí.
Hostia, pero me sorprende que pongan aquí Haas.
Pero en realidad este comentario tiene que ver con Gap.
Curioso, ¿no?
O sea, si ha ganado Haas.
Ojo.
¿Por qué habla aquí de...
No, Ne.
Muchos problemas aquí veo.
No, Ne.
No, Ne.
Efectivamente.
La feature más comentada.
O sea, la que la gente ha recibido, ha hecho más comentarios sobre una feature en concreto.
O la que vosotras creéis.
Feature...
Yo me la voy a jugar aquí.
La del Dropback este.
Que no sé por qué.
El Dropback Filter.
Ese.
Ese lo diría Rita.
Ese lo diría Rita, seguro.
Yo de verdad no lo entiendo, ¿eh?
Pero sí, sí.
Hay mucho hype con eso.
Lo necesitamos.
Pues...
Subgrid.
531 comentarios.
¿Me?
531.
Pero ¿sabes por qué?
Porque la gente estará preguntando ¿para qué?
Exacto.
Me imagino los comentarios.
Pero esto ¿para qué sirve, no?
Vale.
La tecnología con mayor satisfacción.
Porcentaje de usuarios satisfechos.
Open Props.
Open Props.
Open Props.
Bueno, yo voy a decir uno CSS.
Aunque creo que era Open Props.
Ah.
Creo que es Open Props, ¿no?
Ah, no, de acuerdo.
Será Open Props.
Creo que sí.
Ya, ya, ya.
Quiero saberlo.
Quiero saberlo.
Open Props.
Muy bien.
Qué bien.
Jo, me alegro un montón.
Porque hemos la visto.
CSS Modules.
Muy bien.
Y con más respuestas escritas.
A ver.
Con más menciones.
Puede ser tecnología.
Puede ser cualquier cosa.
Aquí podríamos poner Carmen también.
Sí, ¿no?
Te iba a decir.
Carmen.
No sería Miguel en todo caso.
O Miguel.
Pero no, creo que no somos.
¿Qué es lo que creéis que más ha escrito la gente a mano?
Yo creo que ahí...
Tailwind.
No lo sé.
Tailwind.
No.
Si es a mano, tiene que ser algo que no hubieran votado.
Podría ser...
Tiene que ser algún framework que sea conocido, pero tampoco tanto.
Saber, algo que no haya salido en seleccionar, pero la gente lo ha puesto a mano.
Bueno, Panda, que ha salido hace poco.
O puede ser este de Zik.
Zik.
Ah, Zik.
Ah, no.
Por ejemplo.
Sí, ¿no?
¿Cómo era?
Salió...
Sí, es el de Chakra.
O Panda CSS también que ha salido hace poco, si no me equivoco.
Panda CSS.
Puede ser uno de estos.
Porque justamente estas cosas que salen, pero que han salido hace poco...
Bueno, no tienen idea de este, ¿eh?
Mira al Panda.
¿Con su verdadera?
¿Cómo es?
Ah, CSS en JavaScript también.
Es una mezcla CSS en JavaScript, pero también con Utility Classes, Atomic Classes.
Es un poco...
Bueno, han cogido todo, han dicho todo lo que mola de cada uno y lo metemos en uno nuevo.
Tal cual.
Pues igual es Panda, ¿eh?
Vamos a ver.
Pues ni idea.
¿Cómo?
¿Cómo lo haces?
Mira.
No, bueno, porque me lo he imaginado.
Me lo he imaginado.
Porque tenía que ser algo que hubiera salido hace poco y tenía que ser un framework
que esté mencionado porque la gente lo ha votado bastante.
Panda, Panda.
Pues mola mucho el logo, la verdad.
Esta, hombre, Panda.
El personaje yo, Panda, mola.
Panda son adorables.
Pues Rita y Carmen, últimas palabras para el CSS de este año.
¿Alguna cosa que quieran comentar, destacar?
¿Alguna frase final para el público?
Qué presión, ¿no?
Porque tiene que ser como algo importante.
Tiene que ser épico.
Últimas palabras.
Que la gente recuerde por la posteridad.
Carmen.
La Insclam mola, ¿eh?
Vamos a poner la música a cámar.
Así con música épica y todo, ¿no?
Las palabras de Carmen.
Bueno, como titular final, que es la mejor época en la que podemos trabajar en esto,
la verdad.
Porque es cuando más soporte hay y cuando más propiedades y funcionalidades tenemos para hacer diseños como más locos en el sentido de poder, pues eso, hacer diseños que sean mucho más atractivos, mejorar la experiencia de usuario y que la interactividad pues se lleve a otro nivel en ese sentido, ¿no?
Que antes, pues si veníamos de los floats, pues vernos ahora en este punto, pues es una pasada.
Es un momento muy guay, es un momento muy chulo.
Y yo lo estoy disfrutando muchísimo.
Así que animo al resto a que también, que si se interesan, pues que escarpen un poco más y sobre todo que le den cariño a CSS, que se lo merece, que al final es todo, es lo que vemos, es lo que el usuario se encuentra.
Entonces que le demos esa importancia que tiene.
Totalmente. Pues Rita, tus palabras finales.
Yo no puedo hablar ahora. Yo no puedo hablar ahora después de este pedazo de discurso maravilloso. Es una gran época. A no ser que tengas que maquetar un email, que es como por a esta época.
Yo sueño con el día que eso cambie. Ese es mi sueño. Es un sueño muy difícil de cumplir, pero sí.
Que tengas que maquetar un CSS en un email y sea fácil, ¿verdad?
Ostras. Cierto, cierto.
Y que los frameworks molan, pero si aprendes a usar CSS guay, te va a ser más fácil hasta usar los frameworks.
Hasta el CSS en JS.
No querer el CSS. CSS mola.
Pues Carmen, Rita, muchas gracias a las dos. Muchas gracias a todos y todas las que os habéis pasado por este State of CSS 2023.
Terminamos con la frase de la posteridad de Carmen y Rita.
Y yo lo que os digo es que no infravaloreis el CSS, que es una parte fundamental, importantísima y central del desarrollo web.
Y si quieres marcar la diferencia, si quieres crear experiencias de usuario, ya sabes que tienes que mover las manitas y aprender CSS.
Así que muchas gracias, Carmen, Rita y a todos. Nos vemos en la siguiente. Hasta mañana.
Muchas gracias.
Hasta luego.
Hasta luego.
Hasta luego.