This Component Could Have Been A Class

Hola, ¿qué tal? Mi nombre es Scott. Voy a hablar sobre por qué este componente podría haber sido un div. Ese título es definitivamente un poco ridículo y no del todo preciso, pero pensé que era gracioso.

Así que primero, como dijo CJ, soy el productor ejecutivo de Syntax. Puedes encontrarme en las redes sociales aquí. Si necesitas desarrollo web, solo cosas divertidas que están pasando, hacemos todo tipo de cosas locas en YouTube desde competencias de codificación hasta cosas extravagantes en general. Y también estoy en Sentry donde puedo trabajar en Syntax a tiempo completo. Así que revisa Sentry. Sé que son un patrocinador aquí, pero un gran servicio.

Y voy a ir muy rápido porque tengo demasiadas demostraciones, hice demasiadas diapositivas, y en lugar de cortar cosas, voy a ir rápido. Así que hice un montón de código y demostraciones en mi sitio aquí. Tendré este código QR disponible al final de la charla si encontraste algo que sea interesante. Pero solo para que lo sepas. Y aunque voy rápido, quiero mostrarte que esto es realmente todo partículas individuales aquí. ¿Dónde está mi ratón? Así que esto es React 3 Fiber. Así que no ejecuto mucho React, pero React 3 Fiber es increíble. Y hombre, fue un placer trabajar en ello. Y en realidad solo descarga un SVG aquí. Así que bastante genial. Nuevamente, tendré la diapositiva aquí al final para que puedas copiar eso.

Voy a entrar directamente en ello. Y el primero... Bueno, antes de hacer eso, en realidad, estamos en burbujas todo el tiempo. Y sé que hay potencial crítica alrededor del ecosistema de React por estar demasiado en una burbuja de React, ¿verdad? Estás haciendo las cosas a la manera de React todo el tiempo. Y estoy aquí para sacarte de esa burbuja solo un poco y mostrarte lo que es posible con APIs web. Algunas de las cuales han existido en el navegador por un tiempo. Algunas de las cuales aún están llegando. Algunas de las cuales estarán disponibles este año en todos los navegadores. Y algunas que estarán disponibles en el futuro. Y con suerte te sacaremos de esa burbuja y solo verás lo que está disponible en el ecosistema web más amplio aquí y tal vez por qué importa.

Así que el primero no es emocionante, pero creo que establece un poco las cosas. Así que diálogos y cajones. Hemos visto el elemento de diálogo. Esto está disponible en todos los navegadores. Ha estado aquí por un tiempo. Así que ha estado en Chrome desde la versión 37. Safari desde 15.4. Firefox 98, ¿verdad? Puedes usar esto, obviamente, en React con un show modal en un ref o algo así. Pero por alguna razón, muchos de nosotros todavía estamos haciendo el ampersand, ampersand, ocultar un div, fijar la posición de ese div, o absoluto, inset, lo que sea, ¿verdad? El diálogo existe, y es genial.

Y creo que lo realmente genial del diálogo es que simplemente al usarlo, automáticamente obtienes atajos de teclado para cerrarlo, obtienes captura de enfoque, obtienes todas estas cosas integradas en el navegador, lo que significa que no tienes que escribirlo tú mismo. Y en última instancia, en un microcosmos, esto es mucho de lo que trata esta charla, es que estas cosas están siendo cuidadas por ti en el navegador cuando muchos de nosotros estamos teniendo que escribir eventos clave para todas nuestras cosas como esta. Y luego eso solo lleva a situaciones donde, bueno, perdemos cosas o la IA pierde cosas o las cosas no se vuelven tan fluidas como podrían ser, y eso va a ser un tema común a través de esto.

Ahora, mucha gente critica esto porque el cajón, bueno, no es tan elegante, ¿verdad? Hay problemas con el elemento de diálogo. Pero hay propiedades y características adicionales de CSS que vienen aquí para salvar el día. Por ejemplo, el estilo inicial nos permite ahora simplemente añadir animaciones a esta cosa usando directamente la propiedad de transición. Así que ahora, de nuevo, no solemos pensar en, quiero decir, pensamos en estos cajones como diálogos y cajones y lo que sea, pero es realmente simple conectar un elemento de diálogo, convertir en un cajón, y de nuevo, obtenemos soporte de teclado, todo listo para usar. Y de igual manera, hay otra propiedad llamada valor, permitir discreto, que puedes establecer en propiedades que no podían ser animadas en el pasado. Así que antes intentabas animar algo, usabas display none, desaparecía del DOM, no había animación, ahora tenemos permitir discreto, lo que te permite esencialmente esperar hasta que la animación se complete antes de eliminar algo del DOM. Así que el diálogo es genial por estas razones, y muestra soporte de Firefox para esto, y eso está un poco mal, porque Firefox, ¿dónde está mi soporte de hover? Así que Firefox, tiene soporte para permitir discreto, pero aún no en display. Esperemos que muy pronto. Diré que incluso con eso, incluso con ese permitir discreto, esto mejora progresivamente muy bien. Así que simplemente al no tener eso en Firefox, simplemente no obtienes animación. Eso no es un problema. Eso no es un problema para mí.

Bien. Scroll snap. Scroll snap es una API que ha existido por un tiempo ahora. Está disponible en muchos navegadores. Chrome 69 nice, Safari 11, Firefox 68, y mucha gente solo piensa en scroll snap como siendo deslizadores de carrusel o lo que sea, pero como la interfaz clásica de deslizar real puede hacerse tan fácilmente sin código, con scroll swipe. Y lo que me encanta de esto es que, como, yo personalmente, cuando busco bibliotecas de animación de toque bibliotecas de animación de arrastre, ya sea motion o cualquiera de estas cosas, son geniales, son fantásticas, te permiten hacer muchas cosas geniales, pero nada se siente tan increíblemente suave como el desplazamiento que es nativo en el navegador. No, como, he usado un montón de bibliotecas de desplazamiento y paneo y lo que sea, y simplemente no se sienten tan bien como esto. Estás descargando mucho de eso a JavaScript, solo estás actualizando propiedades de transición, o traducción cuando en esto, es simplemente desplazamiento directo. Obtienes soporte de toque y desplazamiento sin tener que acomodar ninguno de esos, y simplemente se siente bien. Es súper fácil. Tipo de scroll snap, Y obligatorio, overflow, auto. Así que voy a ir muy rápido a través de algunas de estas cosas, porque tengo que moverme aquí. Este es el swiper clásico. Mucha gente no piensa en esto como si siempre fueras a buscar un componente. He buscado esto cien veces donde estás haciendo los eventos de empujar hacia abajo y arrastrar, y estás rastreando los valores, y estás haciendo la traducción. Esto funciona con scroll snaps súper fácilmente. Y el truco aquí es solo que estás haciendo una cuadrícula, tienes uno en el medio que ocupa el espacio, y estás ajustando al medio. Así que porque siempre estás ajustando al medio, nunca puede alcanzar el medio de el otro, así que simplemente se ajusta de nuevo.

Y un punto clave sobre esto es que, como, podrías estar pensando, como, OK, pero necesito mi JavaScript, necesito mis eventos, y ese es un punto clave, porque, como, esta charla no trata sobre eliminar JavaScript, no se trata de eliminar React, se trata de dejar que el navegador se encargue de las cosas en las que es súper bueno, y luego descargar esas cosas al navegador, el motor de renderizado, de modo que pueda ser súper fluido, y luego obtenemos los eventos y todo eso, todavía puedes rastrearlo con JavaScript, disparar esos eventos, controlar, hacer lo que necesites hacer, y simplemente funciona. De hecho, hay una API futura que permitirá que esto permanezca abierto, para que puedas tener múltiples botones y clics. No puedes hacer eso ahora mismo sin JavaScript. Pero de nuevo, simplemente lanzas un poco de JavaScript en ese chico malo, y funciona.

Muy bien. Carruseles. Los carruseles están obteniendo botones geniales ahora con Scrollsnap. Y esto es realmente interesante, es un marcador de desplazamiento, te da estos pequeños puntos que son incluso interactivos, e incluso tienes el pseudo elemento de botón de desplazamiento, y puedes establecer los botones de desplazamiento que realmente hacen esto, y lo genial aquí es que automáticamente tenemos soporte de deslizamiento y toque, móvil, escritorio y todo. De nuevo, solo Scrollsnap.

Como, me encanta Scrollsnap, y siento que la gente no lo usa lo suficiente. Muy bien. Pasemos de Scrollsnap. Impulsado por desplazamiento. Así que las animaciones impulsadas por desplazamiento son realmente geniales por muchas razones. Esta es una nueva API que está disponible en todo y detrás de una bandera en Firefox. Así que si has visto que estas animaciones impulsadas por desplazamiento son, como, cosas del futuro, están llegando. Están llegando muy pronto. Y lo genial aquí es que solo estás especificando una línea de tiempo de animación, estás asignando una animación a ella, y esto también usa Scrollsnap, pero échale un vistazo. Así que este es el tipo de interfaz que verás mucho, y estos tipos de cosas, de nuevo, se sienten súper fluidas porque estás usando el desplazamiento nativo del navegador, y ahora podemos controlar las animaciones con él. Siento que muchas veces vemos demostraciones de líneas de tiempo de animación, es como, ooh, parallax, ¿verdad? Pero realmente hay una interfaz de usuario utilizable que sale de algunas de estas cosas. Esta es una que hacemos todo el tiempo, un encabezado pegajoso, y esta usa un tipo de contenedor de estado de desplazamiento. Así que estamos definiendo el tipo de contenedor de estado de desplazamiento y luego podemos usar una consulta de contenedor para verificar cuándo la parte superior está pegada y luego cambiar el CSS en consecuencia. No hay JavaScript en este chico malo, y creo que, como, esto es algo que hemos hecho con JavaScript desde siempre. No sé, ¿qué era? Headroom o había todos estos diferentes plugins que solíamos usar para cambiar el encabezado cuando te desplazabas, pero ahora puedes hacerlo en un par de líneas de CSS. Genial. Bien. Valores.

¿Alguien sabía que podías hacer esto con CSS? Puedes contar ese valor hacia arriba y hacia abajo. Ahora, esto utiliza un par de cosas en la propiedad que te permite especificar un tipo en CSS. {{^}}¿Alguien sabía que CSS tenía tipos ahora? Sí. Y no son eso, no son como, son geniales, pero muchas veces cuando la gente habla sobre tipos en CSS, dicen, oh, puedes animar gradientes con ellos. Como, oh, está bien, genial. Pero también puedes hacer cosas como contar, y puedes usar estos valores para calcular y usar estas propiedades y todo tipo de cosas más allá de contar un número hacia arriba y hacia abajo. Pero esto usa una cosa llamada counter reset donde estás asignando al contador un nombre, en este caso, el nombre es n, y luego lo estás asignando a una variable, y esto solo lo está mostrando aquí, pero lo real, todo está sucediendo desde un key frames de CSS. Solo estábamos diciendo contar hasta n igual a 1 millón, y simplemente funciona. Es increíble. Esto es compatible en casi todo. No estoy obteniendo mi hover aquí, pero buen soporte para eso.

Índice de hermanos, esta es una API increíble, y este ejemplo es un poco trivial, pero usamos esto todo el tiempo en sintaxis. ¿Cuántas veces cuando estás trabajando con JavaScript o algo así, lo que terminas escribiendo es nth child 1, nth child 2, nth child 3, pero tantas veces añadimos algo a la lista y luego todo ese CSS se desordena, así que tienes que escribir JavaScript para acomodar eso, o añadir un índice para pasarlo como un prop para luego actualizar el CSS para que el CSS sea dinámico, pero esto es una línea directa donde solo puedes decir cuál es el índice de hermanos? ¿El índice de hermanos es este? Puedo hacer matemáticas, puedo hacer retrasos de animación para animaciones escalonadas. Animaciones escalonadas con una línea de CSS usando índice de hermanos. Esto está llegando a Firefox, pero está disponible en todo ahora mismo. API realmente increíble. Realmente simple también.

Bien, ¿dónde estoy? Siete minutos, de acuerdo. Voy a necesitar apresurarme aquí. De acuerdo. La gente habla de menús de anclaje como solo un ancla que te permite anclar algo a otra cosa, eso es genial, pero lo que la gente no suele pensar es que obtienes intentos de posición integrados. Así que mira esto. A medida que esto se alinea en línea o en bloque en cualquier dimensión, automáticamente se voltea, y esto se está haciendo solo con esta línea de intentos de posición, voltear bloque o voltear en línea. Este tweet fue hecho el 7 de junio diciendo que las herramientas de CSS funcionan hasta que tienes que acercarlas a un borde. Como hermano, puedes hacer esto hoy en todos los navegadores. Así que no necesitas JavaScript para hacer esto, y no estoy criticando a este tipo, pero la gente simplemente no sabe sobre estas cosas, que puedes hacer esto.

Muy bien. Lista de Slack. Así que vamos a poder estilizar la lista de Slack en cada navegador este año. Y esto es simplemente una lista de Slack directa. Hay dos cosas geniales aquí. Una, hay un nuevo elemento de contenido seleccionado en HTML que te da el elemento actualmente seleccionado. La otra es que puedes poner lo que quieras dentro de una lista de Slack, y ahora tiene la apariencia de lo que quieras solo usando appearance, base Select, puedes estilizarlo con CSS. En la superficie, esto es genial. Tenemos muchos componentes para hacer listas de Slack y todo eso, pero ahora no necesitamos eso. Lo genial es que, nuevamente, en móvil, aparecerá con la lista Select nativa por defecto. No más falsificar entradas para hacer lo que queremos con la lista Select y todo eso. Y puedes animarlo, ya que es solo un popover. Así que nuevamente, puedes tener control total de cómo quieres que se vea esto. Ahora, lo genial de esto es que la gente a menudo piensa en eso como, oh, está bien, ahora podemos hacer que nuestra lista Select se vea bonita. Ya no son feas. Pero Una hizo una demostración realmente genial de un selector de emojis usando una lista Select. Este chico malo es solo una lista Select. Nunca he visto una lista Select que se vea así. Pero usamos este tipo de componente todo el tiempo, y es tan genial que esto pueda ser el elemento de formulario nativo sin falsificarlo, sin hacer un montón de divs y todo eso genial.

Muy bien. Muy bien. Bien. Estoy moviendo el tiempo. De acuerdo. Así que apuesto a que no sabías que HTML está obteniendo actualizaciones parciales declarativas y transmisión fuera de orden directamente en HTML. Esto es realmente increíble. Y esto podría ser el futuro de cómo usamos los marcos web en general, o podría ser el futuro de simplemente cómo estás escribiendo código. Porque esto está inspirado en la arquitectura de islas de Astro. Vas a poder tener transmisión fuera de orden directamente en HTML. Y esto, aunque solo está en Chrome hoy detrás de una bandera, hay un polyfill que funciona para esto en todos los principales navegadores.

Puedes probar esto hoy mismo. Es una locura. ¿Ves esta nueva cosa de signo de interrogación al inicio? Esa es una etiqueta XML antigua. Creo que se llama instrucciones de procesamiento. No me tomes la palabra. Pero están reutilizando eso como una etiqueta válida que ha existido por un tiempo, y puedes ver el estado de respaldo aquí. Esto es una locura.

Otra API loca que quizás hayas visto porque ha recibido mucho bombo es la HTML en Canvas API. Esta nuevamente está detrás de una bandera en Chrome. Esta es una locura porque estás tomando DOM y dibujándolo con Canvas. Construyes tantas interfaces con Canvas, y pierdes mucho, porque las personas que no son usuarios 3D, no tienen WebGNL, simplemente no van a obtener una experiencia o tal vez la accesibilidad, esos tipos de cosas.

Puedes ver que esto es... El texto es un poco pequeño, pero diré, hola, y esto claramente se renderiza como un Canvas. Esto es genial. Simplemente insertas tu mismo DOM en un Canvas y luego lo pintas con Canvas, le pones algunos shaders a ese chico malo, obtienes todo tipo de cosas en marcha. Y puedes ver que el DOM, simplemente lo dejé caer en medio del universo aquí. Esta cosa es bastante impresionante. Diré, esto usualmente sobrecarga mi CPU.

Al dar esta charla, esta charla es tan intensiva en procesador, que mi computadora llegó al 50% de batería mientras preparaba esto, así que tengo que asegurarme de que no se apague. Este es un pequeño proyecto en el que he estado trabajando. Si esto te interesa, puedes echarle un vistazo. Se llama graffiti-ui.com. Es solo un puñado de elementos que muestran lo que puedes hacer sin JavaScript. Y no está necesariamente destinado a ser usado como un reemplazo de JavaScript, pero es como una muestra de aquí está todo lo genial que puedes hacer solo con CSS.

Si esto te interesa, esto de ninguna manera es un producto terminado, pero hay mucho material interesante aquí, y si estás interesado, échale un vistazo. Hay muchas cosas divertidas. Menús de usuario, deslizamientos, todo ese tipo de cosas que mostramos aquí. Así que obviamente la IA es el elefante en la habitación aquí. Es como, ¿por qué importa siquiera esto? Bueno, los agentes pueden escribir esto. Es menos código. Cada vez que le das alguna biblioteca de API, ¿qué estás haciendo? Estás yendo al contexto 7. El contexto 7 tiene que obtener la última documentación, o hay una actualización, y ahora el contexto 7 está usando la documentación antigua incorrecta. O tal vez no el contexto 7, pero tu IA ha recibido entrenamiento en documentación antigua, usa algunas APIs antiguas y malas.

Yo escribo Svelte, y tuvieron un gran cambio de API, y la IA es como, bueno, déjame usar esta API antigua. Y es como, por favor no, te lo ruego. Te lo he pedido varias veces. Pero cuando tienes menos código y menos APIs y cosas que están integradas en el navegador y cosas que, lo más importante, no van a cambiar porque están en el navegador, los agentes que lo escriben, es una ventaja, y realmente solo tienes que pedirles muy amablemente. Y así, de nuevo, sin desmerecer a floating UI. Floating UI es genial. Pero imagina escribir dos líneas de CSS en lugar de importar una biblioteca que importa otras 10 bibliotecas que tienen este ecosistema masivo de paquetes conectados donde uno se compromete y te infectas, como ves.

Intenté mucho hacer que este gusano se viera genial, y estoy solicitando a Claude, estoy como, por favor haz que el gusano sea más impresionante. Haz que mi gusano sea impresionante, por favor. Y esto es lo que obtengo. Este es el gusano más impresionante que esta cosa pudo idear. Así que supongo que es lo mejor que puede hacer. Aún no estamos acabados.

Sin embargo, escucho a menudo, hoy en día la gente está hablando de, como, ahora puedo construir todos mis propios componentes porque es fácil hacerlo. El costo de construir todos tus propios componentes ahora es mucho menor porque simplemente dices, oye, IA, esto es lo que necesito. Ahora no te estás yendo a algún otro posible vector de ataque aquí. Y no estoy diciendo que no haya desventajas en eso. Permítanme ser muy claro. Definitivamente hay desventajas en cualquier enfoque aquí. Pero creo que el navegador haciendo tanto por ti hace que esta parte sea mucho más fácil.

Muy bien. De nuevo, cosas fáciles. Solo di, usa dialog en lugar de una línea modal. Y de hecho, encontré que con los modelos estando tan actualizados, sabe cómo usar dialog, sabe cómo usar has, sabe cómo usar anchor perfectamente. Estas no son cosas que tengas que pasarle documentos para hacer. Y me encanta esta dependencia de node sin preguntar primero. Porque le encanta ser como, ¿sabes qué? Hace diez años, 10,000 bibliotecas usaban este paquete en particular. Eso significa que eso es lo que tengo que usar. Pero tienes control sobre lo que usa. Tienes control sobre las bibliotecas, el código, todo eso que traes a nuestro proyecto. Y tal vez ahora más que nunca, la gente está como, dame la app. El código entra, y tú dices, lo que sea, funciona. Creo que hay un estándar más alto que eso, ¿verdad?

Estoy un poco pasado de tiempo. Así que la sesión de preguntas y respuestas se extenderá solo un par de minutos. Pero el código y las demostraciones están aquí. Y de nuevo, está en mi sitio web, tolin.ski, si quieres echarle un vistazo. Ahora es el momento de ir más despacio. Sí. Échame un vistazo en Syntax. Hacemos cosas como esta. Si esto te resultó interesante en lo más mínimo, hablamos sobre nuevas APIs todo el tiempo aquí. Y las estamos explorando, nos estamos sumergiendo en ellas, estamos haciendo desafíos con ellas, y estamos haciendo todo tipo de cosas. Gracias. Muchas gracias.

Esta primera pregunta viene de Isaac. Y sé que has pensado mucho en esto y estás trabajando en algunas herramientas para ayudar con esto también. ¿Cuáles son tus tácticas para que la IA escriba CSS de calidad y moderno? Oh, sí. ¿Sabes qué es difícil? La IA tiene una serie de herramientas que le encanta usar con CSS. Y la parte más difícil es que incluso cuando le das un sistema, lograr que se adhiera a ese sistema o lo entienda sin que recaiga en esos patrones. Para mí, personalmente, tengo un conjunto de reglas a las que me gusta adherirme en cómo manejo mi CSS. Y esa biblioteca graffiti que te mostré nació de eso, donde estaba cansado de escribir el mismo tipo de patrones una y otra vez, ¿verdad?

Y luego dices, está bien, necesito una biblioteca que sea variables CSS y esto o aquello. Así que lo clave es realmente tener un buen sistema y adherirse a ese sistema. Tenemos un miembro del equipo en el equipo de Syntax y su nombre es Wes. Y Wes es como una IA en el sentido de que le encanta como, oh, ¿veo tu sistema? Déjame simplemente derribar tu sistema y hacer lo mío. Voy a añadir nuevos colores aquí y allá. Y así he tenido un poco de práctica preparándome para desarrollar un buen sistema, ¿verdad? Así que sí, realmente creo que se trata de sistemas. Se trata de sistemas, tener esos sistemas definidos y poder expresar esos sistemas de una manera que la IA pueda consumir. Definitivamente. ¿Dirías que estás trabajando en una herramienta CLI para linting CSS?

¿Es esa una forma en que puedes ayudar a la IA a hacer las cosas mejor también? Sí, eso es un buen... Gracias por mencionarlo. Aquí con la asistencia.

Aquí con la asistencia. Como muchos de ustedes, la naturaleza no determinista de la IA hace que a veces sea difícil trabajar con ella o simplemente estás yendo y viniendo. He estado tratando de reducir ese ciclo y he notado que, al igual que las herramientas deterministas, una de las que realmente me gusta se llama Fallow para la calidad del código, duplicados de código y ese tipo de cosas. Si le das esa salida a la IA, hace un trabajo mucho mejor porque es como, oh, aquí están las cosas que necesito arreglar. Así que he estado tomando ese enfoque para todo en mi base de código. Así que ya sea graffiti donde tengo un CLI que lo verifica y genera informes, o simplemente, de nuevo, añadiendo linting de CSS. Style lint es una gran biblioteca para esto. ES lint hace linting de CSS. Hay uno llamado CSS kit que es mucho mejor que el que estaba trabajando. Así que voy a usar ese en su lugar. Y sí, el linting es bueno para la IA. Funciona.

Definitivamente. Muy bien, este siguiente. ¿Cómo podemos mantenernos mejor informados sobre estas características nativas del navegador sin necesidad de revisar MDN todos los días? ¿Qué fuentes recomiendas? Sabes, recomendaría syntax dot FM o syntax en YouTube. Pero no, MDN tiene tal vez una página poco conocida que solo son actualizaciones donde es como, aquí están todas las cosas añadidas esta semana. Y podrías simplemente revisarla, desplazarte por ella, y es JavaScript, HTML, CSS, y solo ver, ¿hay algo interesante aquí, algo que llame mi atención? El blog de desarrolladores de Chrome es genial. Ahí es donde descubrí, no sabía sobre la API de transmisión de HTML fuera de orden, y luego lo vi en el blog de desarrolladores de Chrome, y pensé, esto va a permitir todo tipo de cosas como HTML, como parciales nativos de HTML que se cargan de la manera más eficiente posible y tiene un polyfill? Es como, sí, el blog de desarrolladores de Chrome también es genial. Sí.

Definitivamente. Y creo que todos esos tienen feeds RSS si solo quieres recibirlos en tu lector de noticias también. ¿Qué es un feed RSS? Este es tu momento para brillar. Sí, no el mío. Veamos.

De Bes Was, ¿cuál es tu nueva API de CSS favorita? Muy bien, Bes Was. Mi nueva API de CSS favorita, es difícil porque tengo muchas favoritas. Creo que es bastante evidente por esto que realmente me gusta ScrollSnap. Creo que ScrollSnap fue una de esas que salió y todos estaban como, existe, ¿verdad? Y todos estaban como, pero puedes hacer, como dije, reels o swipers, puedes hacer todo esto con ella que, como, siento que realmente pasó desapercibido.

Y hablamos de esto en Syntax a veces donde es como los efectos de estas nuevas APIs se sentirán años después cuando la gente realmente descubra qué demonios puedes hacer con ellas. Porque al principio todos estaban como, está bien, pero luego cualquiera que haya sido parte del ecosistema de desarrollo web el tiempo suficiente sabe que, como, nos ponemos realmente creativos con APIs. Cuando teníamos floats y un puñado de colores y lo que sea, lo hicimos funcionar. La gente hizo algunos hacks locos. Y creo que este tipo de cosas solo se descubren con la gente poniéndose curiosa.

Sí. Definitivamente. Muy bien. Sí. Todos lo están pensando, pero ¿qué pasa con la compatibilidad hacia atrás con dispositivos y navegadores más antiguos? Demostración impresionante. Gracias. ¿Cómo manejamos el uso de algunas de estas características más nuevas si sabemos que no están soportadas en todas partes? Sí. Que se fastidien. No. La mejora progresiva es una cosa clave aquí. Así que una de las cosas en las que pienso, y hay otra pregunta sobre Firefox. Firefox tardó mucho en obtener transiciones de vista. Y lo más genial de las transiciones de vista fue que si Firefox no soportaba las transiciones de vista, la única desventaja de eso era que no obtenían la animación. Como, ¿qué tan trivial es eso? Así que puedes mejorar progresivamente, que es una palabra que en un momento fue muy popular para hablar en el ecosistema, donde los navegadores que soportan las características obtienen todas las cosas nuevas y los navegadores más antiguos, bueno, o se soportan a través de polyfills o obtienen una experiencia que está degradada, tal vez un poco, pero aún accesible, funcional, todas las cosas que son importantes y tal vez no tienen una animación de barrido o algo así, ¿verdad? Así que cada una de estas técnicas y cosas diferentes tiene una historia de mejora progresiva diferente. Es mucho para entrar aquí, pero puedes encontrarme en cualquier momento para hablar de esas cosas. Sí.

Hay como polyfills, shims. Oh, sí. Oh, sí. El posicionamiento de anclaje tenía un gran polyfill. Así que la gente ni siquiera estaba usando anclaje durante tanto tiempo, pero tenía un gran polyfill. Usé el posicionamiento de anclaje en level up tutorials hace dos años con un polyfill. Lo puse en syntax. También usé la API temporal en syntax hace dos años con las cosas de polyfill.

Sí. Definitivamente. Creo que tomaré esta. ¿Por qué Firefox está tan atrasado en características? Soy un usuario de Firefox. Recientemente hicimos una transmisión en vivo donde hablé sobre una publicación de blog que alguien escribió que habla sobre por qué Firefox parece estar atrasado, pero realmente Chrome está lanzando y usando APIs no soportadas. Ese es un problema. Firefox tiene mala fama.

Este tipo está tratando de defender a Firefox aquí. Sí. ¿Tienes alguna opinión sobre eso? Sí. No, tuvimos a Jake Archibald en el podcast recientemente. Él trabaja en Firefox ahora y le estábamos preguntando sobre esto y dijo que han cambiado su enfoque a uno, realmente están siguiendo la interoperabilidad y están muy involucrados y están agregando APIs como locos, pero podría parecer que lo están porque una de las cosas que priorizan en las APIs en las que se enfocan es en aquellas que tienen una experiencia significativamente degradada si estás en Firefox y no en otros. Por ejemplo, como esas transiciones de vista. Podrían mirar eso y decir, está bien, si no tienes eso en Firefox, no está rompiendo tu aplicación. Vamos a dedicar nuestro tiempo a enfocarnos en aquellas que romperán tu aplicación si no las tenemos. Haz eso. Aplástalo. Honestamente, como la lista de selección estilizada, la están obteniendo.

Siento que Firefox está en un buen momento ahora mismo. Estaba de acuerdo contigo en esta pregunta. Era una persona gruñona sobre Firefox hace aproximadamente un año y he cambiado mi opinión. Todavía no lo estoy usando, pero sí.

Definitivamente. Muy bien. Esta siguiente, ¿Sass sigue siendo relevante hoy en día? No lo creo. Sass hace algunas cosas geniales, las importaciones y cosas así, pero como usuario de Sass desde hace mucho tiempo, hice los primeros tutoriales de Sass en YouTube allá por 2012. Y he sido un gran fan de Sass durante mucho tiempo. Usé compass. Estaba profundamente en ese ecosistema. Así que amo Sass, pero las variables CSS son mucho mejores que las variables de Sass por mucho porque son reactivas, ¿verdad? Es esencialmente props. Así que ahí está. CSS ahora está obteniendo declaraciones if. Está obteniendo funciones. Está obteniendo cosas un poco locas y eso es genial, pero en gran medida creo que las cosas en las que Sass todavía gana son ideas como mixins porque CSS ha tenido anidamiento nativo durante mucho tiempo. Como mixins y funciones y ese tipo de cosas tal vez, pero tenemos mezcla de colores. Tenemos color relativo. No elegiría Sass hoy. Usaría algo como post CSS para hacer importaciones y cosas así, pero eso es prácticamente todo. Sí. Y entonces, la interfaz de usuario graffiti que escribiste, ¿usaste solo post CSS para eso?

No uso nada más que CSS. No, solo CSS. Sí. Wow. Sí. Solo CSS. Increíble. Esta siguiente, ¿todo esto se ve igual en todos los navegadores o depende de cómo los desarrolladores del navegador implementen cada función? Sí, en gran medida funciona igual en todos los navegadores, pero nuevamente, mucho de esto es CSS.

Así que, si tienes una capa base de CSS, sea lo que sea, ya sea tailwind o lo que sea, se verá igual en todos porque al final del día son solo elementos. Son simplemente elementos. Es un... De hecho, sabes, un elemento que Safari tiene que es genial y que nadie más tiene es un interruptor de palanca nativo. Tiene un interruptor de palanca nativo. Como un ligero... Sí, y se ve genial, y puedes cambiar el color con el color de acento. Y simplemente... ¿Por qué estamos retrasados en eso? Tengo uno en graffiti que usa el viejo truco de la casilla de verificación y cosas así, pero estoy como, ya sabes, solo dame el interruptor. Todos usamos el interruptor.

Definitivamente. Veamos este siguiente. Con tantos avances modernos en CSS, y LLM usándolo para escribir CSS crudo mantenible, ¿sigue importando tailwind? Sí, ¿sabes qué? Creo que tailwind importa porque hay tanto conocimiento comunitario alrededor de tailwind como eso.

Personalmente no uso tailwind porque no quiero un DSL que necesite aprender cuando las propiedades de CSS son a menudo como de una sola línea. Lo que tailwind hace muy bien para mí es que sistematiza todo, está estructurado, lo cual es realmente lo que hace que CSS se desmorone cuando tienes personas escribiendo malos sistemas, malas estructuras. También tiene una forma compartida de hacer las cosas, de modo que si conoces tailwind y yo tengo tailwind, no tenemos que ser introducidos a un nuevo sistema. Así que tailwind hace muy bien ese tipo de cosas, pero no necesariamente veo el valor en escribir br-lo que sea en lugar de border radius.

Simplemente no quiero aprender ese DSL allí. Pero creo que también muchos de los que trabajan con React realmente se aferraron a Tailwind más que cualquier otro porque React no tiene necesariamente una forma incorporada de resolver el CSS con alcance como lo hacen los frameworks de un solo componente o de un solo archivo, como, simplemente escribes tu CSS en el componente, y eso delimita todo ese CSS a ese componente. Vue hace lo mismo. Así que con React, la gente tenía problemas con el alcance, y no creo que mucha gente se dé cuenta de esto, pero Tailwind en realidad termina resolviendo esos problemas de alcance porque no tienen que preocuparse por la cascada en absoluto. Pero sí. Esa es solo mi opinión.

Definitivamente. Es un poco diferente a hace un par de años en tu postura sobre Tailwind. ¡Estoy tratando de ser amable! ¿La accesibilidad es compatible con las APIs de CSS? Sí, quiero decir, creo que es la mejor parte. Especialmente con la lista select personalizada. El hecho de que eso te permita estilizar listas select. Pero es el select de formulario. Así que obtienes todas las cosas del select de formulario que están integradas en los formularios HTML. Pero también, de nuevo, los ejemplos de modales. Te dan captura de enfoque, soporte de teclado, y todas estas cosas que a menudo estamos escribiendo nosotros mismos con eventos de teclas y arrastres y todo ese tipo de cosas. Sí.