Te damos la bienvenida a la segunda edición de Chrome Dev Insider, donde compartimos actualizaciones sobre las novedades emocionantes de la comunidad y de Chrome. Este es un nuevo episodio de historias internas sobre cómo abordamos nuestro trabajo y un resumen rápido de 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, y formo parte del equipo de Relaciones con Desarrolladores de Chrome. Trabajo en la Web desde hace más de veinte años, con un enfoque en estándares de la Web abierta y CSS, y soy miembro del Grupo de Trabajo de CSS.
Hace dos meses, finalizamos Google I/O, en el que compartimos algunas de las actualizaciones más importantes sobre cómo apoyamos a los desarrolladores para que la Web sea más rápida y potente, a la vez que mantenemos la seguridad y la privacidad de la información de los usuarios.
Uno de los aspectos que se destacó (y nos alegra que la comunidad haya tomado nota de ello) es la gran cantidad de trabajo que está haciendo el equipo para admitir más funciones de IU y CSS en la Web. En esta edición de Chrome Dev Insider, te mostraremos quién está detrás de este trabajo, cómo trabajamos para brindar asistencia a los desarrolladores de IU y CSS, y lo que depara el futuro. Por este motivo, me complace organizar esta edición de The Insider.
En las noticias
En el primer Chrome Dev Insider, compartimos algunas actualizaciones sobre las iniciativas Compat 2021 e Interop 2022, en las que los proveedores de navegadores y los participantes del ecosistema se asociaron para ofrecer más funciones a la Web compatibles con todos los navegadores. La iniciativa tiene un fuerte enfoque en CSS, ya que la incompatibilidad de los navegadores es uno de los mayores desafíos para los desarrolladores de CSS.
Aunque es posible que esto no sea una novedad para la mayoría de los usuarios, resulta emocionante ver el progreso que ya hicimos en los diferentes navegadores.
A principios del mes pasado, Safari anunció un lanzamiento de bumpers publicitarios con Safari 16.0 Beta y funciones interesantes como Container Queries, una subcuadrícula y un Inspector de flexbox. Las versiones recientes de Firefox y Chrome han incluido una serie de funciones y correcciones interesantes. Abarco los aspectos clave de los navegadores estables y beta todos los meses en mi serie de publicaciones sobre novedades en la plataforma web.
Información privilegiada: Apoyo a los desarrolladores de IU y CSS
Como 2022 se está convirtiendo en un año emocionante para las funciones de CSS, pensamos que es un buen momento para mostrarte lo que ocurre tras bambalinas. Me reuní con Una Kravets, líder de DevRel para IU web y herramientas para desarrolladores, y con Nicole Sullivan, nuestra gerente de producto de IU web que se enfoca en las APIs de CSS y HTML, para hablar sobre el recorrido de Chrome para brindar asistencia a los desarrolladores de IU.
Comencemos con ustedes. Cuéntanos un poco más sobre ti.
Nicole: Soy el administrador de producto de la IU web en Chrome. Me centro específicamente en nuevas APIs de CSS y HTML, y en desarrolladores y diseñadores que crean IU. Es un espacio emocionante en el que están surgiendo algunas APIs muy importantes, como Container Queries, Scope y, con suerte, el ritmo vertical.
Una: Lidero los equipos de IU web y de DevRel de Herramientas para desarrolladores. Nos enfocamos en asistir 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 comentarios.
La compatibilidad de Chrome con los desarrolladores de IU ha aumentado su ritmo en los últimos años. ¿Por qué crees que tardó tanto tiempo en llegar hasta aquí? ¿cuáles fueron los desafíos más grandes?
Una: Tuvimos que hacer algo de trabajo para demostrar cuán importante era y por qué debía ser una prioridad. Comenzamos con la encuesta de ADN de MDN en 2019, en la que se identificó la IU como algunos de los principales problemas de la plataforma. Desde entonces, continuamos usando los datos como guía a través del MDN y nuestras propias encuestas de satisfacción de los desarrolladores internas. El resultado de todo esto es que logramos una mayor aceptación del liderazgo y pudimos 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 forman la mayor parte del enfoque para iniciativas como Interop 2022 y Compat 2021.
Nicole: Además de conseguir la aprobación de los líderes, tuvimos que encontrar la manera correcta de hacer llegar estas APIs a los desarrolladores. Cuando me uní a Chrome por primera vez, me equivoqué en un proyecto llamado APIs en capas (o LAPI para abreviar). Los LAPIs destinados a brindarles a los desarrolladores una experiencia directa de los componentes. Aún creo que este fue un buen resultado, pero cometimos muchos errores. Primero, nos enfocamos en las notificaciones y una lista virtual. Los avisos son casi imposibles de hacer accesibles, y una lista virtual es uno de los componentes más difíciles de hacer bien. Nuestras intenciones eran buenas, pero no ayudaban a los desarrolladores, por lo que descontinuamos el proyecto. Es difícil aprender por el método duro, pero cada error alimenta el renacimiento actual de CSS y HTML.
Hablemos un poco más sobre LAPIs. ¿Qué pasó allí?
Nicole: En el caso de las LAPIs, sabíamos que la Web necesitaba una experiencia de desarrollador de componentes directos más cercana a la compilación de IU nativa. Y era evidente que reinventar la rueda impedía a los desarrolladores. ¡No puedo contar la cantidad de pestañas que he creado en mi carrera! Dicho esto, intentamos resolverlo enviando JavaScript con el navegador, lo que era muy difícil. Nadie había enviado JavaScript en el navegador anteriormente, 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 aprovechamos HTML y CSS, obtenemos soluciones flexibles y declarativas. Debido a que es declarativa, podemos integrar la accesibilidad de una manera que no habría sido tan fácil de hacer con JavaScript. Estoy muy entusiasmado por el futuro. Estamos trabajando para admitir el menú selecto, la ventana emergente, la información sobre la herramienta, la navegación, el acordeón, las pestañas, el carrusel y el botón de activación, que son patrones de diseño de IU esenciales.
Aprendimos mucho. Sé que había otras iniciativas en este ámbito, como CSS Houdini. ¿Cuál es la historia?
Una: Sí, CSS Houdini es otro lugar en el que aprendimos de la comunidad. Existen muchas funciones útiles de Houdini, pero muchas eran de un nivel demasiado bajo como para lograr una mayor adopción y asistencia. Nos dimos cuenta de que la implementación de APIs de bajo nivel no reducía necesariamente la fricción para los desarrolladores. En cambio, centrarse en las soluciones y necesidades de más alto nivel ha ayudado a obtener el soporte entre navegadores y los aterrizajes necesarios para mover la aguja en el ecosistema. Actualmente, estamos realizando un seguimiento del progreso en https://ishoudinireadyyet.com/.
Hablando de compatibilidad en varios navegadores, iniciativas como Interop 2022 y Open UI parecen estar entregando resultados significativos y positivos para la comunidad. ¿Qué opinan los desarrolladores?
Una: Una de las dificultades principales que nos dicen los desarrolladores es "hacer que el diseño funcione igual en todos los navegadores". Para solucionarlo, trabajamos con otros proveedores de navegadores para priorizar y presentar algunas de las funciones para desarrolladores más solicitadas. Los comentarios que recibimos de la comunidad fueron inmensamente positivos. Además, gracias a un gran esfuerzo de rediseño de la arquitectura llamado RenderingNG, es posible implementar algunas de estas funciones con mayor rendimiento. A los desarrolladores les entusiasma que finalmente se esté trabajando en estas funciones tan esperadas y que tanto han pedido que se hayan solicitado durante años.
Nicole: La emoción en la comunidad es evidente. Puedes verlo en Twitter. :)
Trabajar con el ecosistema ha demostrado ser fundamental para cualquier éxito que hayamos tenido en lograr que los desarrolladores vida más fácil. Sé que tu equipo ha estado haciendo mucho trabajo allí. ¿Podrías indicarme algunos detalles?
Nicole: En primer lugar, estoy constantemente asombrada con los proyectos que los desarrolladores crean en la Web. Desde la biblioteca más pequeña hasta la más completa de frameworks, los desarrolladores están creando contenidos asombrosos. Es una comunidad fantástica de creadores. Chrome está tomando muchos pasos para estar más conectado con estos proyectos.
Por ejemplo, hace unos años empezamos a trabajar con frameworks de JavaScript como React y Angular. y metaframeworks, como Next, Nuxt y Gatsby. El año pasado, empezamos a hacer lo mismo con herramientas de IU y frameworks como Sass, Bootstrap y Material. Espero que el próximo año podamos colaborar con GreenSock y otras herramientas vida más fácil. Acabo de ver a Cassie Evans de GreenSock hablar en Smashing Conference y me entusiasmó mucho trabajar con personas en el espacio de la animación.
¿Dónde vemos la mayor oportunidad para el ecosistema de IU web?
Una: En cuanto a las grandes oportunidades, siento que solo estamos analizando lo que es posible personalizar las experiencias web. Las nuevas APIs, como las consultas de contenedores y las funciones multimedia 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 en conjunto con los usuarios que visitan sus sitios web.
Y Nicole, ¿cuál es el siguiente paso en la hoja de ruta de tu equipo?
Nicole: No todas las exploraciones se convierten en productos que se pueden enviar, pero hay muchos aspectos que me entusiasman mucho en este momento:
En primer lugar, estamos habilitando un diseño adaptable basado en componentes. Incluye herramientas para diseñar sistemas de color para que los diseñadores puedan responder a las preferencias del usuario, como el modo oscuro. Por ejemplo, el espacio de color OKLCH mantiene el brillo coherente en todos los tonos. Los diseñadores pueden pasar de elegir colores a diseñar relaciones entre colores, sin terminar con paletas de aspecto lodos.
También estamos trabajando en algunas de las APIs más solicitadas, como las consultas de contenedores, las capas en cascada, el selector superior (:has), los estilos con alcance y la anidación. Los desarrolladores los necesitan para poder crear sistemas de diseño flexibles llenos de componentes reutilizables.
Las animaciones vinculadas con desplazamiento son otra área divertida. Me gusta mucho la demostración de Steve Gardner. Tiene un desplazamiento fluido y genial con animaciones de avión activadas durante el desplazamiento. Si bien son divertidas, puede ser difícil identificarlas bien, en especial si se tiene en cuenta la accesibilidad. Así que ahora estamos ejecutando pruebas de usuario para la accesibilidad en la función.
Lo que más me entusiasma son los controles de IU web integrados. Los desarrolladores siguen creando el mismo conjunto de pestañas una y otra vez, creo que el navegador puede ayudar. En Open UI, trabajamos en componentes como el menú de selección, la ventana emergente, la información sobre la herramienta, las pestañas, la navegación, el acordeón y el botón de activación. Estamos explorando cómo sería integrar la accesibilidad en estas primitivas del navegador para que, con el tiempo, la Web pueda volverse accesible de forma predeterminada. Los desarrolladores pueden entonces enfocarse en los problemas más complejos y con más matices, mientras que los conceptos básicos, como la pestaña Cómo funciona, pueden ser compatibles con el navegador. Es probable que esto necesite su propia publicación, así que me detendré allí por ahora.
Por último, seguiremos invirtiendo en la interoperabilidad entre navegadores. Fue estupendo trabajar con los miembros de WebKit y Gecko para aportar coherencia a la experiencia de los desarrolladores. Comprendimos bien a los desarrolladores que quieren esto.
Ah, y si aún no lo has probado, la API de Shared Element Transitions del equipo de Smooth Web cambiará la forma en que los usuarios diseñan 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 van bien, es posible que incluso analicemos el ritmo vertical este año. Podemos compilar sobre LayoutNG, que desbloquea muchas funciones.
Gracias a ambos. Estoy seguro de que toda la comunidad, como nosotros, está ansiosa por ver el ritmo renovado de las mejoras y funciones que llegarán al mundo de las IU web. Todavía hay mucho por aprender, así que ¿dónde dirían que se debería comenzar su recorrido?
Una: Nuestra sesión Novedades para la plataforma web en I/O abarca los aspectos más destacados de muchas de las funciones que llegarán este año. Adam Argyle también escribió un excelente artículo sobre todos los nuevos y próximos aterrizajes de los CSS. Por el momento, me gustaría enfocarme en versiones estables y estar al tanto del resto del trabajo que se avecina en el proceso. Tu increíble serie New to the web platform es genial para ti. Suscribirse al boletín informativo web.dev también brindará este contenido a los desarrolladores Recibidos. Para los desarrolladores que buscan involucrarse y ayudar con todo esto, unirse a Open UI es una de las mejores formas en las que pueden contribuir con este trabajo.
Próximas actualizaciones clave
Seguimos manteniendo nuestra tradición para avisarte sobre un próximo cambio que debes tener en cuenta cuando creas tus experiencias en la Web.
Limita la antigüedad máxima de las cookies a 400 días
- Actualización: Cuando se configuren cookies con un atributo
Expires/Max-Ageexplícito, el valor se limitará a no más de 400 días en el futuro. Anteriormente, no había límite y las cookies podían caducar varios milenios en el futuro. 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 una frecuencia mayor que cada 400 días puede actualizar las cookies para garantizar la continuidad del servicio y los usuarios pueden estar seguros de que las cookies no permanecerán en su navegador durante miles de años sin que se utilicen. - Cronograma estimado: Envío en Chrome 104 (estará estable a partir del 2 de agosto de 2022).
- CTA del desarrollador: Es posible que los desarrolladores deban actualizar las cookies de forma proactiva con más frecuencia que antes cuando los usuarios visitan sus sitios web. De lo contrario, es posible que los usuarios salgan de su cuenta 400 días después de que se configure inicialmente la cookie.
Espero que hayas disfrutado de esta edición de Chrome Dev Insider. Si te lo perdiste, esta es la primera. Esperamos ofrecerle más información el próximo trimestre.
Hasta entonces, cuéntanos qué opinas de esta edición de Chrome Dev Insider y qué podemos hacer para mejorarla.
¿Qué te pareció esta edición de Chrome Dev Insider? Comparte tus comentarios.