Te damos la bienvenida a la segunda edición de Chrome Dev Insider, en la que compartimos novedades sobre lo que sucede en la comunidad y en Chrome. Este es un nuevo episodio de historias internas sobre cómo abordamos nuestro trabajo y un vistazo rápido a algunas de las actualizaciones más importantes a las que debes prestar atención.
Soy Rachel Andrew, líder de contenido de web.dev y developer.chrome.com, como parte del equipo de Relaciones con Desarrolladores de Chrome. Trabajo en la Web desde hace más de veinte años, me enfoco en los estándares web abiertos y CSS, y soy miembro del equipo de trabajo de CSS.
Hace dos meses, concluimos Google I/O, donde compartimos algunas de las actualizaciones más importantes sobre cómo ayudamos a los desarrolladores a hacer que la Web sea más rápida y potente, a la vez que mantenemos la información del usuario segura y privada.
Una de las cosas que se destacaron (y nos complace que la comunidad lo haya notado) es la gran cantidad de trabajo que realiza el equipo para admitir más funciones de CSS y de IU en la Web. En esta edición de Chrome Dev Insider, te mostraremos quiénes están detrás de este trabajo, cómo trabajamos para brindar asistencia a los desarrolladores de CSS y de IU, y qué nos depara el futuro. Por eso, me complace presentar esta edición de Insider.
En las noticias
En el primer Chrome Dev Insider, compartimos algunas actualizaciones sobre las iniciativas Compat 2021 y Interop 2022, en las que los proveedores de navegadores y los participantes del ecosistema se asociaron para ofrecer más funciones en la Web que sean compatibles con todos los navegadores. La iniciativa se centra principalmente en CSS porque la incompatibilidad del navegador es uno de los mayores desafíos para los desarrolladores de CSS.
Si bien esto no es una novedad para la mayoría, es emocionante ver el progreso que ya hemos logrado en todos los navegadores.
A principios del mes pasado, vimos que Safari anunció un lanzamiento importante con la versión beta de Safari 16.0, que incluye funciones interesantes como Container Queries, subgrid y un inspector de flexbox. Las versiones recientes de Firefox y Chrome incluyen varias funciones y correcciones interesantes. Todos los meses, en mi serie de publicaciones Novedades de la plataforma web, abordo los aspectos clave de los navegadores estables y beta.
Información privilegiada: Asistencia para desarrolladores de CSS y de IU
Dado que el 2022 fue un año emocionante para las funciones de CSS, pensamos que sería un buen momento para mostrarte lo que sucede detrás de escena. Me reuní con Una Kravets, líder de DevRel para la IU web y las Herramientas para desarrolladores, y con Nicole Sullivan, nuestra administradora de productos para la IU web que se enfoca en las APIs de CSS y HTML, para hablar sobre el recorrido de Chrome en la compatibilidad con los desarrolladores de IU.
Comencemos con ustedes dos. ¿Pueden contarnos un poco más sobre ustedes?
Nicole: Soy la gerente de producto de la IU web en Chrome. Me enfoco específicamente en las nuevas APIs de CSS y HTML, y en los desarrolladores y diseñadores que compilan IU. Es un espacio emocionante con algunas APIs muy importantes, como Container Queries, Scope y (con suerte) vertical rhythm.
Una: Dirijo los equipos de DevRel de IU web y Herramientas para desarrolladores. Nos enfocamos en brindar asistencia a los ingenieros de IU en la plataforma web y nos aseguramos de que tengan las herramientas que necesitan para tener éxito. Esto incluye APIs de CSS y componentes HTML, junto con funciones de Herramientas para desarrolladores para ver los cambios activos y los comentarios.
La compatibilidad de Chrome con los desarrolladores de IU se ha acelerado en los últimos años. ¿Por qué crees que tardamos tanto en llegar? ¿Cuáles fueron los mayores desafíos?
Una: Necesitábamos demostrar la importancia de este trabajo y por qué debería ser una prioridad. Comenzamos con la encuesta del ADN de MDN en 2019, que identificó la IU como uno de los principales problemas de la plataforma. Desde entonces, seguimos utilizando los datos como guía a través de MDN y nuestras propias encuestas internas de satisfacción de los desarrolladores. El resultado de todo esto es que pudimos obtener una mayor aceptación del liderazgo y priorizar el trabajo de ingeniería en torno a algunas de las funciones para desarrolladores más solicitadas en el espacio de la IU, que también constituyen la mayor parte del enfoque de iniciativas como Compat 2021 y Interop 2022.
Nicole: Además de obtener la aprobación de la dirección, también tuvimos que encontrar la manera correcta de poner estas APIs a disposición de los desarrolladores. Cuando me uní a Chrome, cometí este error en un proyecto llamado APIs en capas (o LAPIs, para abreviar). Las LAPIs tenían como objetivo brindar a los desarrolladores una experiencia de componentes listos para usar. Aun así, creo que fue un gran objetivo, pero cometimos muchos errores. Primero, nos enfocamos en las notificaciones emergentes y una lista virtual. Los mensajes emergentes son casi imposibles de hacer accesibles, y las listas virtuales son uno de los componentes más difíciles de implementar correctamente. Nuestras intenciones eran buenas, pero no ayudaba a los desarrolladores, por lo que descontinuamos el proyecto. Es difícil aprender de los errores, pero cada uno de ellos impulsa el renacimiento de CSS y HTML que está ocurriendo ahora.
Hablemos un poco más sobre las LAPIs. ¿Qué sucedió?
Nicole: En el caso de las LAPIs, sabíamos que la Web necesitaba una experiencia de desarrollador de componentes integrados que se acercara más a la creación de IU nativas. Y era evidente que reinventar la rueda estaba frenando a los desarrolladores. No puedo contar la cantidad de pestañas que creé en mi carrera. Dicho esto, intentamos resolverlo enviando JavaScript con el navegador, lo que fue muy difícil. Nadie había lanzado JavaScript en el navegador antes, y no estaba claro cómo debería interactuar con el código C++ que impulsa el motor de renderización del navegador. Escuchamos a otros proveedores de navegadores (¡gracias, Mozilla!) y nos alejamos de ese enfoque, por lo que pudimos encontrar algo mucho mejor con Open UI. Si nos enfocamos en HTML y CSS, obtenemos soluciones flexibles y declarativas. Como es declarativo, podemos incorporar la accesibilidad de una manera que no habría sido tan fácil de hacer con JavaScript. Me entusiasma el rumbo que está tomando. Estamos trabajando para admitir selectmenu, popup, tooltip, nav, accordion, tabs, carousel y toggle, que son patrones de diseño de IU realmente esenciales.
Así que aprendimos mucho. Y sé que hubo otras iniciativas en este espacio, como CSS Houdini. ¿Cuál es la historia?
Una: Sí, CSS Houdini es otro lugar en el que aprendimos de la comunidad. Hay muchas funciones de Houdini útiles, pero muchas eran de nivel demasiado bajo para lograr una adopción y compatibilidad más amplias. Nos dimos cuenta de que implementar APIs de bajo nivel no necesariamente reducía las dificultades de los desarrolladores. En cambio, enfocarse en soluciones y necesidades de nivel superior ayudó a obtener compatibilidad entre navegadores y los lanzamientos necesarios para cambiar el ecosistema. Actualmente, hacemos un seguimiento del progreso en https://ishoudinireadyyet.com/.
Hablando de la compatibilidad entre navegadores, iniciativas como Interop 2022 y Open UI parecen estar generando resultados positivos significativos para la comunidad. ¿Qué te dicen los desarrolladores?
Una: Uno de los principales problemas que nos comentan los desarrolladores es "hacer que el diseño funcione de la misma manera en todos los navegadores". Para abordar este problema, trabajamos con otros proveedores de navegadores para priorizar y lanzar algunas de las funciones para desarrolladores más solicitadas. Además, los comentarios que recibimos de la comunidad fueron muy positivos. Además, gracias a un gran esfuerzo de reestructuración llamado RenderingNG, se hizo posible implementar algunas de estas funciones con un rendimiento mucho mayor. Los desarrolladores están entusiasmados con el hecho de que estas funciones tan esperadas que han solicitado durante años finalmente se estén desarrollando y estén disponibles en todos los navegadores.
Nicole: El entusiasmo en la comunidad es palpable. Puedes verlo en Twitter. :)
Trabajar con el ecosistema resultó fundamental para el éxito que tuvimos en facilitar la vida de los desarrolladores. Sé que tu equipo ha estado trabajando mucho en eso. ¿Quieres compartir algunos detalles?
Nicole: Primero, me asombran constantemente los proyectos que los desarrolladores crean en la Web. Desde la biblioteca más pequeña hasta los frameworks completos, los desarrolladores están creando cosas increíbles. Es una comunidad fantástica de creadores. Además, Chrome está tomando varias medidas para conectarse más con estos proyectos.
Por ejemplo, hace unos años, comenzamos a trabajar con frameworks de JavaScript, como React y Angular. Y los metaframeworks, como Next, Nuxt y Gatsby. El año pasado, comenzamos a hacer lo mismo con herramientas y frameworks de IU, como Sass, Bootstrap y Material. Espero que el próximo año podamos colaborar con GreenSock y otras herramientas que faciliten la vida de los desarrolladores. Acabo de ver a Cassie Evans de GreenSock en la Smashing Conference y me entusiasmé mucho con la idea de trabajar con personas del mundo de la animación.
Entonces, ¿dónde vemos la mayor oportunidad para el ecosistema de la IU web?
Una: En cuanto a las grandes oportunidades, siento que solo estamos viendo de forma superficial lo que es posible para las experiencias web personalizables. Las nuevas APIs, como las consultas de contenedores y las funciones de medios de preferencias del usuario de CSS, están redefiniendo la forma en que los desarrolladores ven el diseño responsivo. También me entusiasman las experiencias de diseño colaborativo que permiten a los desarrolladores y diseñadores trabajar al unísono con los usuarios que visitan sus sitios web.
Y Nicole, ¿qué sigue en la hoja de ruta de tu equipo?
Nicole: No todas las exploraciones se convierten en algo que se pueda lanzar, pero hay muchas cosas que me entusiasman en este momento:
Una mencionó lo primero: habilitaremos el diseño adaptable basado en componentes. Incluye herramientas para diseñar sistemas de color, de modo que los diseñadores puedan responder a las preferencias del usuario, como el modo oscuro. Por ejemplo, el espacio de color OKLCH mantiene la coherencia del brillo en todos los tonos. Los diseñadores pueden pasar de elegir colores a diseñar relaciones entre ellos, sin terminar con paletas de aspecto turbio.
También estamos trabajando en algunas de las APIs más solicitadas, como las consultas de contenedores, las capas en cascada, el selector principal (:has), los estilos con alcance y el anidamiento. Los desarrolladores los necesitan para poder crear sistemas de diseño flexibles llenos de componentes reutilizables.
Las animaciones vinculadas al desplazamiento son otra área divertida. Me gusta mucho la demostración de Steve Gardner. Tiene un desplazamiento muy fluido y animaciones de aviones geniales que se activan al desplazarse. Si bien son divertidos, puede ser difícil hacerlos bien, especialmente teniendo en cuenta la accesibilidad. Por lo tanto, ahora estamos realizando pruebas de accesibilidad para usuarios en la función.
Personalmente, lo que más me entusiasma son los controles integrados de la IU web. Los desarrolladores siguen creando el mismo conjunto de pestañas una y otra vez, y creo que el navegador puede ayudar. En Open UI, trabajamos en componentes como selectmenu, popup, tooltip, tabs, nav, accordion y toggle. Estamos explorando cómo incorporar la accesibilidad en estos elementos básicos del navegador para que la Web, con el tiempo, pueda ser accesible de forma predeterminada. Luego, los desarrolladores pueden enfocarse en los problemas más complejos y sutiles, mientras que el navegador puede brindar asistencia para los aspectos básicos, como la forma en que se tabulan las pestañas. Probablemente, esto necesite su propia publicación, así que me detendré aquí por ahora.
Por último, seguiremos invirtiendo en la interoperabilidad entre navegadores. Fue un placer trabajar con los equipos de WebKit y Gecko para brindar coherencia a la experiencia del desarrollador. Los desarrolladores nos dijeron claramente que querían esta función.
Ah, y si no la has probado, la API de Shared Element Transitions del equipo de Seamless Web cambiará la forma en que las personas diseñan para la Web. Todas esas pequeñas transiciones sutiles que permiten a los diseñadores orientar sus diseños en el espacio físico no solo serán posibles, sino también fáciles. Jake Archibald tiene una excelente demostración.
Si los estándares avanzan bien, es posible que incluso veamos el ritmo vertical este año. Podemos crear sobre LayoutNG, lo que desbloquea muchas funciones.
Gracias a ambos. Seguramente, toda la comunidad, al igual que nosotros, está entusiasmada por ver el ritmo renovado de las mejoras y las funciones que llegarán al mundo de la IU web. Aún hay mucho por comprender, así que, ¿por dónde dirías que se debería comenzar el recorrido?
Una: En nuestra sesión Novedades de la plataforma web en I/O, se destacan muchas de las funciones que se lanzarán este año. Adam Argyle también escribió un artículo excelente sobre todos los nuevos y próximos destinos de CSS. Por ahora, me enfocaría en las versiones estables y solo tendría en cuenta el resto del trabajo que se está realizando. Tu increíble serie New to the web platform es ideal para eso. Si te suscribes al boletín informativo de web.dev, los desarrolladores también recibirán este contenido en su bandeja de entrada. Y para los desarrolladores que desean participar y ayudar con todo esto, unirse a Open UI es una de las mejores formas de respaldar este trabajo.
Próximas actualizaciones clave
Continuamos con nuestra tradición de informarte sobre un próximo cambio que debes tener en cuenta a medida que creas tus experiencias web.
Limita max-age para las cookies a 400 días
- La actualización: Cuando se configuren cookies con un atributo
Expires/Max-Ageexplícito, el valor ahora se limitará a no más de 400 días en el futuro. Anteriormente, no había límite y las cookies podían vencer dentro de varios milenios. El objetivo de este límite es lograr un equilibrio entre los patrones de uso comunes y el respeto por la privacidad del usuario. Cualquier sitio que se visite con más frecuencia que cada 400 días puede actualizar las cookies para garantizar la continuidad del servicio, y los usuarios pueden tener la certeza de que las cookies no permanecerán en su navegador durante milenios sin usarse. - Cronograma estimado: Se lanzará en Chrome 104 (estable el 2 de agosto de 2022).
- CTA para desarrolladores: Es posible que los desarrolladores deban actualizar las cookies de forma proactiva con más frecuencia que antes cuando los usuarios visiten sus sitios web. De lo contrario, es posible que los usuarios salgan de su cuenta 400 días después de que se haya establecido la cookie inicialmente.
Espero que hayas disfrutado de esta edición de Chrome Dev Insider. Si te lo perdiste, aquí tienes el primero. Esperamos brindarte más novedades en el próximo trimestre.
Mientras tanto, cuéntanos qué opinas sobre esta edición de Chrome Dev Insider y qué podemos hacer para mejorarla.
¿Qué te pareció esta edición de The Chrome Dev Insider? Comparte tus comentarios.