Una Mirada al Futuro del Desarrollo Web en 2025

Gracias. {{^}}Gracias. Muy bien. Tengo mucha curiosidad por ver cómo se ven mis diapositivas en este monitor enorme. Santo. Pensé en hacer 20 minutos de hacking y mostrarlo allí, pero creo que eso se ve ... Sí.

Muy bien. ¿Qué tal, todos? Mi nombre es Wes Boss. Soy canadiense, como acabamos de decir. Y hago un par de cosas. Hago cursos de desarrollo web, y tengo un podcast y canal de YouTube llamado Syntax. ¿Alguien ha oído hablar de Syntax aquí? Woo. Sí.

Así que hoy, estoy aquí para contarles lo increíble que es la web. Se siente como HTML, CSS, JavaScript. Se siente como los últimos años, y tal vez ni siquiera lo hayas escuchado, pero hay muchas cosas que han llegado. Está mejorando rápidamente. Las cosas se están moviendo extremadamente rápido ahora mismo. Así que hoy, vamos a ver algunas de las nuevas características que puedes empezar a usar o esperar usar en 2025.

Así que la primera que tenemos aquí es select personalizable. Así que lo genial de las entradas integradas en el navegador es que están integradas, y eso es todo. El resto de ellas, apestan. Nadie usa las entradas integradas o las cosas de UI integradas en el navegador porque no puedes estilarlas. No puedes hacer que hagan lo que quieres. Y eso está empezando a cambiar. Una de las primeras que tenemos es este select personalizable, que te permitirá poner cualquier HTML, CSS y JavaScript dentro de un select, y puedes construir cualquier caja de select que desees. Y es totalmente compatible hacia atrás, y sigue siendo un elemento select al final del día.

La siguiente que tenemos es temporal. Temporal es una API estandarizada para trabajar con fechas, tiempo y duración.

Aquí hay un par de problemas que tenemos con la API de fecha actual en JavaScript. Entonces, haces un – digamos que quieres decirle a tus empleados, oye, tienes el 22 de enero libre, ¿verdad? Creas una nueva fecha, 22 de enero. Le dices a la oficina de Nueva York, oye, recuerda que tienes el 22 de enero libre. Y luego vas a esos perdedores en la costa oeste, y les dices que el – ellos tienen el – solo bromeo, solo bromeo, solo bromeo. Vas a la oficina de San Francisco, y oye, lo analizas a una fecha, y ellos – oh, de repente tienen el 21 libre porque te olvidaste de las zonas horarias, ¿verdad? ¿Quién aquí ha sido afectado por un error de zona horaria antes, verdad? Eso es realmente molesto. Así que con temporal, puedes – hay toda una API de zona horaria. Es realmente flexible. Pero puedes crear fechas en temporal sin una zona horaria adjunta. Así que simplemente dices 22 de enero, 2025, y eso no está específicamente adjunto a ninguna zona horaria. Otro es que puedes especificar fechas sin un año, ¿verdad? O puedes ir y añadir un año. Así que si quieres decir que naciste el 15 de diciembre, y quieres averiguar qué día es tu cumpleaños en 2023, te dirá qué día es realmente. O si quieres crear duraciones, ahora mismo si queremos crear duraciones que no están adjuntas a una fecha, simplemente usamos milisegundos, ¿verdad? Así que las duraciones temporales nos permitirán hacer cosas como un minuto y 30 segundos. Hay una buena API para añadirlas. Y luego también hay una API realmente buena para encontrar la diferencia entre dos fechas, ¿verdad? Así que puedes tomar ahora. Puedes tomar tu cumpleaños, y puedes decir cuál es el tiempo desde ese cumpleaños. API realmente genial.

El siguiente que tenemos aquí se llama invokers. Esto es algo así como manejadores de clics declarativos, lo que significa que tenemos estas APIs realmente geniales en el navegador, como popover y dialogue. Y si quieres abrirlos y cerrarlos, hay algunos comandos para hacerlo.

Pero luego, si miras algo como un reproductor de video, si quieres tener un botón conectado a un comando en tu reproductor de video, tienes que seleccionar el elemento, adjuntar un listener de eventos, o verificar si el elemento está allí, luego adjuntar un listener de eventos. Es todo un proceso, ¿verdad? Esta API nos permitirá decir que este es un comando para este elemento, y este es el comando que quiero ejecutar cuando realmente hagas clic en el elemento. No hay JavaScript involucrado. Lo siento, esta es una conferencia de JavaScript, pero no hay JavaScript involucrado en eso.

El siguiente del que estamos hablando se llama speculation. Esto es para pre-renderizar y pre-cargar tus páginas. Tuve este video que se hizo bastante popular en las últimas semanas sobre por qué el sitio web de McMasterCar era tan rápido. Una gran razón por la que el sitio web de McMasterCar es tan rápido es que simplemente están pre-cargando mucho del HTML en las páginas. Es algo que ha sido posible durante bastante tiempo.

La Speculation API ahora te permitirá hacer algo como esto. script type="speculation rules". Dentro de eso, básicamente puedes darle un montón de regexes para cosas que quieres encontrar en la página que deberían coincidir. También puedes usar selectores CSS. Eso es realmente genial porque puedes decirle, oye, si encuentras enlaces en la página que coincidan con estas cosas, tal vez adelante y pre-rendérizalos o pre-fetchealos. Harry Roberts, CSS Wizardry, ya tiene esto en su sitio web. Puedes echar un vistazo. Puedes especificar diferentes niveles de interés. Puedes especificar si va a ser pre-fetcheado, lo que significa que solo va y descarga el HTML para esa página. O puedes especificar si será pre-renderizado, lo que significa que descargará todo el HTML, CSS imágenes y realmente lo renderizará en una pestaña separada. Cuando haces clic en el enlace, se mueve instantáneamente. Hay algunas herramientas de desarrollo realmente geniales que te mostrarán. El navegador está en control de si lo hará o no. Cosas como datos, batería y dónde está el enlace en la página. El navegador tomará la decisión de si debería hacerlo o no, para que no estés simplemente descargando 14 gigas de HTML en cada página.

La CSS Anchor API. Esto es realmente genial. La CSS Anchor API te permitirá posicionar elementos basados en la ubicación de otro elemento.

No tienen que estar en el mismo padre. O no tienen que ser position relative o algo así. Así que simplemente dices price, anchor name, y le das una variable.

Así que ahora has nombrado el price. Ese es el $5.99 en el video aquí. Y luego tienes un call to action que dice great deal. Y estoy diciendo position anchor, anclarse basado en el price. Entonces puedes ponerlos en el top center. Y luego cuando se sale de la pantalla, ya no cabe allí. Hemos tenido esto con tooltips mucho. ¿Dónde aparece el tooltip? Donde haya espacio.

Así que puedes decirle cuando ya no tengas espacio en la parte superior, flip block. Simplemente voltea hacia abajo. Y simplemente lo hace automáticamente por ti. También puedes especificar posicionamientos personalizados aquí. Así que puedes nombrar posiciones personalizadas con esta at position try API. Y luego cuando lo uses, la última línea aquí, position try fallbacks, puedes decir intenta lo que te dije primero. Si eso no funciona, no puedes ajustarlo, entonces intenta custom. Y si eso no funciona, entonces flip a block. Básicamente puedes darle una lista completa de posiciones para intentar.

Esto va a ser enorme para tooltips y enorme para context menus.

Web components. Así que estoy aquí para decirte hoy que no tienes que amar escribir web components, probablemente realmente disfrutarás usando web components. Así que los web components están encapsulados. Pueden tomar HTML, CSS, y mucha lógica de JavaScript y encapsularlos todos juntos. Son agnósticos al framework. Funcionan en cualquier framework que quieras. Son fáciles de estilizar. Es un enfoque un poco diferente para algunos casos de uso. Son muy fáciles de usar y están estandarizados, lo que significa que un web component que escribas hoy estará disponible dentro de 10 años, a diferencia de muchos de los frameworks que tenemos.

Y apenas puedo tomarme un fin de semana libre sin que las cosas se rompan. Ahora, este ejemplo aquí es algo llamado Media Chrome, que una de las piezas más difíciles de UI de medios de construir es un reproductor de video, ¿verdad? Y un reproductor de video tiene muchas cosas. Tienes botones de salto, tienes miniaturas cuando pasas el cursor sobre la barra de desplazamiento. Tienes diferentes, como 1080p, 1440p, pantalla completa, Apple Play, Chromecast, todas estas cosas diferentes.

Acabo de escribir lo que parece ser HTML aquí, y tengo un elemento de video completamente funcional. Y hay alguna pobre alma que escribió este web component para mí que tomó mucho trabajo duro y yo solo tengo que ir y usarlo. Esto es realmente emocionante cuando comienzas a mirar los componentes de UI. Así que hay este proyecto llamado Shoelace, que está haciendo muchos web components realmente geniales, cosas que necesitamos, porque probablemente no tiene sentido que todos reconstruyamos los mismos web components. No tiene sentido que todos construyamos los mismos componentes de UI una y otra vez, porque tienes que pensar en móvil y asegurarte de que sean accesibles. Tienes que asegurarte de que se vean bien.

Así que Shoelace, en realidad ahora se llama web awesome, y van a lanzar un montón de web components, componentes estandarizados. IA, hablemos de IA, ¿verdad? Estoy seguro de que todos están un poco hartos de esto, pero estas son cosas bastante geniales. Hay una biblioteca llamada Transformers JS, y esto te permite usar los modelos que se utilizan en IA, pero ejecutarlos e interactuar con ellos en el mundo de JavaScript, tanto en el servidor como en el cliente.

Así que un par de ejemplos que tenemos aquí es la detección de emociones. Así que lo que hice fue tomar algo como, no sé, 500 miniaturas de una imagen y las pasé todas por un modelo de detección de emociones. Y luego me dijo cuáles son las más felices, y necesitamos esto para las miniaturas de nuestros podcasts. Necesito encontrar donde me veo más sonriente para que podamos poner esa en la miniatura en YouTube. También tenemos detección de profundidad del lado del cliente. Esto es realmente genial. Así que lo que hace esto es, de nuevo, estoy haciendo todo esto en el navegador. Solo tomé una foto de mí mismo, y basado en lo que sabe sobre la detección de profundidad, esto es en realidad cómo lo hace Tesla. Es como conducción autónoma. Te dará un mapa. Puedes verlo en la esquina superior izquierda. Se llama un mapa de profundidad, y luego puedes alimentar eso a algo como Three.js y realmente tener una experiencia 3D completa. Y funciona muy bien, ¿verdad? Oh, mi hija me está llamando. No ahora. Eliminación de fondo.

Podrías pensar, sí, estas cosas están destinadas a hacerse en Python, pero ¿sabes dónde no se ejecuta Python? En el navegador. JavaScript se ejecuta allí. Así que si necesitas hacer algo en el navegador, como la eliminación de fondos, hazlo en el navegador. No tienes que enviarlo a un servidor, procesarlo, pagar por eso, y luego enviarlo de vuelta. Simplemente puedes hacerlo de inmediato en el navegador si tiene sentido para la aplicación que estás construyendo.

Ahora estos modelos, ¿por qué querríamos siquiera hacer esto? Porque estos modelos pequeños son, bueno, no todos son pequeños, pero son relativamente pequeños en comparación con la sobrecarga de tal vez enviarlo a un servidor. Así que este modnet, que se usó para detectar mis sonrisas, 6 megas, 6.5 megas, ¿verdad? Es bastante grande para cargar en el cliente, pero dependiendo de la aplicación, tal vez no sea tan grande. Y además, es más rápido. Así que la razón por la que esto es, es realmente rápido para eliminar un fondo. Esto está sucediendo en tiempo real. Solo estoy haciendo uno y luego el siguiente, ¿verdad? Así que la razón por la que es tan rápido es esta nueva API llamada WebGPU, que te permitirá acceder a la GPU de tu usuario en el navegador.

Window.ai. Así que este tal vez no venga. Esto es más un experimento de Chrome, pero pensé en hablarte de ello. Hay un impulso para permitirte simplemente acceder a los modelos desde el navegador. Así que imagina que estás construyendo una aplicación y dices, quiero usar IA, bueno, imagina que podrías simplemente llamar a window.ai y puedes usar el modelo que ya está en el dispositivo del usuario. En este caso, Chrome tiene esto.

Siguiente, calc size. Este es probablemente el problema que todos hemos querido resolver, y es simplemente animar la altura automática como lo hacíamos en jQuery hace 27 años. Así que un ejemplo muy simple, altura, 100 píxeles, transición de altura en 0.2 segundos. Y luego, cuando pasas el ratón, quiero establecer la altura en auto porque no sé cuán grande va a ser esta cosa. Y en este caso, simplemente decimos calc size auto, y luego podrás hacer la transición de uno a otro.

Estilo inicial, este es realmente genial. ¿Cuántos de ustedes han hecho alguna vez animación en React o Vue o algo así donde quieren animar algo al entrar o al salir? Esas cosas pueden ser un poco complicadas porque a menudo tienes que añadir una clase, y luego 10 milisegundos después, añades una segunda clase, y de esa manera puedes hacer la transición de A a B. Con el estilo inicial, lo que ahora puedes hacer es decir que cuando un elemento se añade al DOM, aplica estos estilos al inicio y luego inmediatamente aplica los estilos CSS regulares a los que estás acostumbrado. Y lo que nos permite hacer en este caso, simplemente estoy diciendo que cuando comiences, traduce X negativo 100%, así que simplemente muévelo fuera de la página por defecto. Y luego, cuando aplicas los estilos, traduce X cero. Y luego simplemente se acercan justo como los necesitas.

Vue transition. Así que este es realmente genial donde es tanto una API de CSS como de JavaScript. Así que aquí hay una pequeña demostración que hice donde hay 16 elementos de video en una cuadrícula. Y lo que estoy haciendo es desplazar la posición del elemento de video en cada uno de ellos, así que 16 videos diferentes. Y cuando hago clic en ese botón de aleatorizar, estoy sacando los 16 de esos elementos del DOM, barajándolos, y luego volviéndolos a poner en el DOM en un orden aleatorio. Simplemente estoy actualizando el orden de 16 elementos en el DOM. Así que lo que parece es que cada uno de esos divs tiene un nombre de Vue transition que es único para ese elemento. Y luego uso un poco de CSS para decir que cuando te transiciones, añade esta función de temporización de animación a ello. Puedes rotarlos, puedes acercarlos, puedes desvanecerlos dentro y fuera. Lo que sea que quieras. Luego simplemente necesito, antes de hacerlo, como barajo los elementos y antes de que realmente actualice el DOM, aviso al navegador para decir, oye, comienza Vue transition. Y lo que hará es decir, bueno, parece que vas a cambiar el DOM de alguna manera. Y después de que hayas cambiado el DOM de alguna manera, voy a averiguar dónde estaba y dónde va a estar. Y simplemente los voy a transformar de uno a otro. Así que de nuevo, si volvemos a mi demostración que tengo aquí mismo, de nuevo, simplemente estoy sacando los elementos del DOM, mezclándolos, y volviéndolos a poner. Porque estoy usando Vue transitions, el navegador es capaz de averiguar que estaba allí, ahora está allí, puedo entonces animarlo de un lugar a otro. No hay duplicación de elementos, no hay técnica flip o algo así. Simplemente funciona muy bien. Y esa es la API de JavaScript, pero también funciona solo con CSS.

Este es el sitio web de Syntax donde en la vista de tarjeta, eso es un H4 con un nombre de Vue transition. Y luego, cuando haces clic en una de las páginas, hay un H1 con un nombre de Vue transition. Ni siquiera tiene que ser el mismo elemento. Son dos páginas totalmente separadas. Y cuando pasas de una página a otra, el navegador dice, oh, hay algo con el mismo nombre, y estaba aquí, va hacia allá, averiguaré cómo transformarlo de uno a otro.

Colores relativos de CSS. Esto es realmente genial. Si vienes del mundo de SaaS, probablemente una de las cosas que extrañas en CSS es la capacidad de simplemente hacer algo un poco más claro o más oscuro, ¿verdad? Y ahora puedes hacer eso en CSS. Así que la forma en que funciona es que tomas HSL o RGB o cualquiera de las funciones de color que estás acostumbrado a usar, y usas la palabra clave from. Y dices from, en este caso estoy tomando un hex, y luego te da tres variables. La H, la S y la L. También te dará un valor alfa si lo tienes. Y puedes tomar esas variables, HSL, y hacer lo que quieras con ellas, ¿verdad? En este caso, simplemente estoy tomando la luminosidad y aumentándola un 40% o reduciéndola un 20%.

Así que esta pequeña demostración que hice aquí es, siempre he tenido esta pregunta de si puedes programar un buen diseño. La respuesta a eso es no. Pero hay algunas cosas para encontrar colores complementarios. Y hay algoritmos para girar los grados de los colores en su espacio de color para encontrar cosas que se vean decentes. Así que aquí tengo un código hex. Y literalmente cada otra variable en esto se calcula en base a ese único código hex. Así que es algo así como 40 o 50 diferentes funciones HSL from. Scope CSS. Así que Scope CSS es realmente genial. Está aquí, está en todos los navegadores.

Así que el primero es el alcance implícito. Literalmente puedes poner una etiqueta de estilo dentro de un div y decir, at scope, y el CSS se limitará a ese div que es el padre de la etiqueta de estilo. No escapará en Cascade ni se aplicará a otras cosas que estén en la página. Y es algo genial. Así que usas at scope y luego usas colon scope para acceder al contenedor de alcance. Y luego puedes seleccionar cualquier otra cosa dentro de ese div solo con selectores CSS regulares.

Luego también está el alcance explícito. Así que si quieres ponerlo en un archivo CSS separado, podrías decir at scope.card. Y eso te permitirá acceder o escribir CSS que solo se aplique a algo con una clase de card. Y luego, por supuesto, puedes incluir consultas de contenedor y consultas de medios. Puedes incluir cualquier otra cosa que estés acostumbrado a hacer dentro de ese alcance y no se filtrará. Y luego también está esta cosa llamada donut scope, que es, como muchas personas, ¿quién aquí usa Tailwind? ¿Verdad? Muchos de ustedes. Y la razón por la que a la gente, incluyéndome a mí, le gusta Tailwind, es que no hace tanto cascade. Y con donut scope, puedes detener el cascade. Así que puedes decir, comienza el alcance aquí, pero si hay algo anidado o estás tratando de delimitar algo a un nivel muy alto, si tienes una card dentro de una card, puedes detener que el alcance se aplique. Y es realmente genial. Básicamente estás diciendo, comienza el CSS aquí y luego no hagas cascade más allá de esto.

¿Cuánto tiempo tenemos aquí? Oh, vamos bien. Muy bien. Web primitives. Esto es realmente interesante. Así que ahora tenemos todos estos diferentes entornos de ejecución de JavaScript, ¿verdad? Como tenemos Node, Deno, Bun, Cloudflare workers. Creo que hay siete u ocho diferentes entornos de ejecución de JavaScript en el servidor. Y luego también tenemos como tres principales entornos de ejecución de JavaScript en el navegador. Y es como, wow, eso es bastante. Así que la respuesta para escribir código moderno de JavaScript es usar web primitives tanto como sea posible. Y un ejemplo de esto es fetch, web requests y web response.

Pero lo que realmente está sucediendo es que estás creando un web request. Y luego la respuesta a ese web request cuando lo pasas a fetch es un web response.

Y en realidad funciona exactamente de la misma manera en el servidor. Así que si escribes un handler para cuando algo llega, obtienes el request. Puedes acceder a toda la información sobre las cosas que se han get o post a él. Puedes acceder a cookies y headers y cosas así. ¿Y luego qué envías de vuelta desde un handler? Una response.

Somos bastante afortunados si usas JavaScript en el servidor también. Tienes suerte de que uses los mismos primitives tanto en el cliente como en el servidor. Y lo que eso nos permite hacer es que puedes escribir el mismo handler y ejecutarlo en Dino, Node, Bun, y en Cloudflare workers. Y en realidad se ejecutará en web workers en el navegador también. Y ese no es el único. Ese es probablemente uno que has tocado antes. Hay un montón de estos nuevos estándares en los que deberías construir tus cosas porque funcionarán absolutamente en todas partes. Y gran parte de Remix y cosas están construidas sobre esto.

De hecho, estamos empezando a ver cosas como Hano y Nitro que son frameworks completos destinados a reemplazar Express.js con estos estándares web. Y eso es todo lo que tengo hoy. Eso fue mucho de mí simplemente repasando un montón de cosas nuevas. Probablemente podría hacer unas cuatro horas más sobre todas las cosas nuevas en la plataforma web. Pero es un momento bastante emocionante ahora mismo. Muchos cambios. Sí, vamos a pasar el rato después. Haremos cuatro horas más. Pero la web es bastante increíble. Bastante emocionado al respecto. Y muchas gracias por venir. Supongo que esto es como algunos de tus primeros ejemplos. Supongo que el styleable select. Estos son logros para la UI en general. Sí, es enorme que gran parte de la cosa de la UI, popover, dialog, mucho de lo de CSS, anula la necesidad de anchors.

Hay una gran biblioteca llamada floating JS o algo así. Y tenemos que escribir mucho JavaScript para hacer que estas cosas funcionen. No es que esté en contra de JavaScript. Me encanta. Pero si puedes hacerlo en HTML o hacerlo con un poco de CSS, quita mucho del dolor de estas cosas.

¿Verdad, verdad? Y hablaste sobre la Speculation API con el prefetching y demás y tu auditoría de McMaster Car. Quiero decir, tuve que verificar, pero acaba de alcanzar un millón. Sí, de hecho, un millón de vistas en YouTube, lo cual es hilarante. Estaba hablando con Stoya y Stefanoff antes, y él es el tipo de rendimiento, y él simplemente dice, hombre, tenemos que llegar a estas personas comunes, porque son quienes están viendo estas cosas.

¿Verdad, verdad? En un mes, amigo. Sí. Porque hoy es el 18, supongo. ¿Hoy es el 18? Sí. Sí. Wow. Sí, en un mes. Increíble. Bien. Para la web. Lo sé, ¿verdad? Tengo una pregunta aquí de Brian, pero no estoy seguro si la entiendo. ¿Notaste diferencias de rendimiento entre los diferentes builds? Los diferentes builds. Sí. No estoy seguro, builds. ¿Vamos a ser específicos? Brian, ¿dónde estás? Tal vez esté viendo en línea. No estoy seguro. Aquí hay otra pregunta para ti. Con algunas de las increíbles capacidades de las UIs y cosas así. Sí.

¿Qué has explorado sobre accesibilidad? Yo he... Bueno, la cosa sobre estas cosas estándar, como el select, es que son accesibles por defecto.

Por defecto, sí. E incluso con Popover, es un poco difícil hacerlo inaccesible. No es que no puedas. Estoy seguro de que muchos idiotas construirán algunas cosas con él, pero sí, son accesibles por defecto, y eso es lo que es tan emocionante.

Y luego, cuando entras en los personalizados, las personas que están construyendo Web Awesome, ellos se preocupan mucho por hacerlo accesible. Y creo que es realmente genial que podamos simplemente usarlo, y si seguimos cómo usarlo, entonces simplemente será accesible. No tienes que pasar mucho tiempo haciéndolo así. Porque todos nos preocupamos por la accesibilidad, pero todos también tenemos tiempo limitado. Y desafortunadamente, a veces esas cosas se olvidan.

Entiendo. Mientras espero que lleguen más preguntas, ¿cuántos de estos están detrás de una bandera? ¿Y cuántos de estos son estables? Sí. No tengo un conteo específico. Starting style ya está en Chrome estable. Las cosas de Popover están ahí. Speculation API está en Chrome estable. La mayoría de estas cosas no están en todos los navegadores todavía, excepto el color relativo. Eso llegó primero a Safari. Ahora está en Chrome. Estoy bastante seguro de que está en Firefox. Pero todo lo que hablé hoy, apuesto a que lo verás, con la excepción de window.ai, apuesto a que lo verás en todos los navegadores en 2025.

Bien. Así que voy a tener que disculparme, porque por alguna razón esto simplemente me desconectó. Voy a volver a entrar. Porque veo preguntas aquí. Pero no estaban apareciendo. ¿Deberíamos simplemente mirar hacia arriba? Bien. Amigo, mi cuello está... Espera.

Me voy a caer. Sí. Así que estoy como... No sé qué está pasando.

¿Qué opinas sobre el futuro del desarrollo web después de 2025 con la llegada de la IA? ¿Cuánto estarán haciendo los desarrolladores web para 2023? ¡Nadie lo sabe! Podemos hablar sobre lo que pensamos y luego tienes a los chicos que dicen, oh, prefiero escribir mi código a mano, porque es mejor. Y yo estoy un poco en el medio. Me encantan estas herramientas. Creo que lo de la IA es realmente emocionante. No creo que nos vaya a reemplazar. Pero sí creo que como desarrolladores web realmente necesitamos averiguar cómo hacer uso de estas herramientas de IA. Porque de lo contrario, serás un desarrollador mucho más lento.

Bien. Estamos bien. Estamos de vuelta. Lo siento.

¿El CSS implícito realiza una carga diferida, solo cuando ese div se renderiza, digamos renderizado condicional en React? Sí. Creo que la pregunta era sobre el tema del pre-rendering. ¿Lo hará...? Entonces hay prefetching, que solo descargará el HTML. No... No analizará ninguna etiqueta CSS o lo que sea. Y luego está el pre-rendering, que hará absolutamente todo. Así que eso puede ser costoso. Eso todavía utiliza recursos del servidor, utiliza ancho de banda de tu servidor, utiliza ancho de banda del teléfono de tu usuario. Así que utiliza ciclos de CPU para realmente renderizarlo detrás de escena.

Así que ciertamente no es algo que debas hacer a la ligera, porque podrías despertarte con una factura de ancho de banda muy grande, especialmente si estás... Si es como un caché CDN, es casi gratis. Pero si es como cada usuario, estás re-renderizando 20 páginas adicionales, porque podrían hacer clic en ellas, entonces podrías tener un problema allí. Así que pedí el tema de McMasterCar, construyeron una versión de Next.js, y yo estaba como, publica la factura de Vercel, quiero ver. Y lo hicieron, así que puedes ir a ver la factura de Vercel y ver.

Estábamos hablando de eso en el fondo. La siguiente pregunta es de Mr. Moose. Jajaja. ¿Qué característica específica que cubriste te entusiasma más? Creo que starting style, calc auto, y luego hay una más que es allowed discrete, que es cuando quieres animar de display none a display block. Si quieres animar eso, pero quieres pasar de 0% de opacidad a 100%, anteriormente eso no era posible, porque display none a display block es algo discreto, no sabe cómo hacer eso. Así que hay otra cosa de la que no hablé hoy llamada allowed discrete, y creo que eso va a eliminar mucho de este JavaScript fuera de clase, fuera de clase, dos segundos después, es molesto. Así que estoy bastante emocionado por esa área de CSS. Bien.

Realmente me encanta esta pregunta, de hecho, Mr. Morales. ¿Cuál es tu forma preferida de mantenerte informado sobre nuevos descubrimientos en el desarrollo web? ¿Seguirme en Blue Sky? No, mi forma favorita, es un poco complicado, pero obviamente lo hago para ganarme la vida, así que tengo una lista completa de cosas que mantengo en, sí, ¿qué está pasando? Monitoreo registros de lanzamientos y cosas así. Pero honestamente, solo siendo parte de la comunidad y manteniendo el oído en el suelo, escuchando podcasts, viendo videos de YouTube, entrando en Twitter, cosas así, es bastante bueno. Te enterarás. Y siempre le digo a la gente, no te preocupes por saberlo de inmediato, pero si escuchas a alguien hablar de ello seis veces, esa es tu señal para decir, debería revisar eso. He oído hablar de eso unas cuantas veces más. ¿Alguna vez lees las notas de las reuniones de W3C y cosas así? Sí, generalmente reviso las notas de las reuniones de W3C, notas de reuniones de TT39, propuestas. Sí, muchas cosas buenas como esa. Hay una cuenta de Twitter realmente buena llamada Intent2Ship, y esa será como, está bien, esto se está poniendo serio. Significa que Chrome va a comenzar a implementar esta característica de CSS, lo que significa que han tenido años de discusiones sobre estas cosas, y ahora realmente van a construirlo y ponerlo en el navegador. Sí, sí, no, esa es una buena cuenta para seguir. Creo que esta puede ser la última pregunta, pero veremos.

¿Cómo crees que la nueva característica Scope CSS influirá en la forma en que los desarrolladores gestionan los estilos? Esa es una buena pregunta. No sé si ... Veremos cómo se ve realmente al abrirse camino en frameworks y cosas así. Esa es la forma en que Svelte hace su CSS ahora mismo, pero luego se procesa y demás. ¿Será otra cosa como ESM, donde eventualmente simplemente envían Scope CSS al navegador? Veremos. Muy bien, muchas gracias por eso. Y eso será todo por las preguntas, así que aplaudan para Wes Boss. Gracias a todos.