Te damos la bienvenida a la segunda edición de Chrome Dev Insider, donde compartimos actualizaciones sobre las novedades emocionantes en la comunidad y aquí en Chrome. Este es un nuevo episodio de historias internas sobre cómo abordamos nuestro trabajo y un resumen de algunas de las actualizaciones más importantes a las que debes prestarles 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. He trabajado en la Web durante más de veinte años, con un enfoque en los estándares web abiertos y los CSS, y soy miembro del grupo de trabajo de CSS.
Hace dos meses, concluimos Google I/O, en el que 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 mientras se mantiene segura y privada la información de los usuarios.
Uno de los aspectos que se destacaron (y nos alegra que la comunidad lo haya notado) es la gran cantidad de trabajo que realiza el equipo para admitir más funciones de IU y CSS en la Web. En esta edición de Chrome Dev Insider, te mostraremos el detrás de escena de quién está detrás de este trabajo, cómo trabajamos para asistir a los desarrolladores de IU y CSS, y lo que tenemos por delante. Por ello, me complace ser el anfitrión de esta edición de Insider.
En las noticias
En el primer Chrome Dev Insider, compartimos algunas actualizaciones sobre las iniciativas de Compat 2021 e Interoperabilidad 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 se enfoca principalmente en CSS porque la incompatibilidad con los navegadores es uno de los mayores desafíos para los desarrolladores de CSS.
Aunque esto no sea una novedad para la mayoría, nos emociona ver el progreso que hemos logrado en los diferentes navegadores.
A principios del mes pasado, Safari anunció un lanzamiento de bumper con Safari 16.0 Beta que incluye funciones interesantes como Container Queries, Subgrid y un Inspector de Flexbox. Las actualizaciones recientes de Firefox y Chrome incluyeron una serie de funciones y correcciones interesantes. Cada mes, hablaremos sobre los aspectos clave de los navegadores estables y beta en mi serie de publicaciones sobre la nueva versión de la plataforma web.
Novedades con información privilegiada: Compatibilidad con desarrolladores de IU y CSS
Como 2022 será un año emocionante para las funciones de CSS, pensamos que es un buen momento para llevarte tras bambalinas. Me reuní con Una Kravets, líder de DevRel para IU web y Herramientas para desarrolladores, y con Nicole Sullivan, nuestro 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 ambos. ¿Cuéntanos un poco más sobre ti?
Nicole: Soy 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 en el que estarán disponibles algunas APIs muy importantes, como Container Queries, Scope y, con suerte, el ritmo vertical.
Una: Dirijo 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 cuenten con las herramientas que necesitan para tener éxito. Esto incluye las APIs de CSS y los componentes HTML, junto con las funciones de Herramientas para desarrolladores para ver los cambios activos y recibir comentarios.
La asistencia de Chrome para los desarrolladores de IU ha aumentado su ritmo en los últimos años. ¿Por qué crees que tardó tanto tiempo hasta aquí? ¿Cuáles fueron los desafíos más grandes?
Una: Tuvimos que hacer un poco para demostrar la importancia de este trabajo y por qué debería ser una prioridad. En 2019, comenzamos con la encuesta de ADN de la MDN, que identificó la IU como algunos de los principales problemas de la plataforma. Desde entonces, hemos seguido usando los datos como guía en la MDN y nuestras propias encuestas internas de satisfacción de desarrolladores. Como resultado de todo esto, obtuvimos una mayor aceptación del equipo de 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 IU, que también forman la mayor parte del enfoque de iniciativas como Compat 2021 e Interoperabilidad 2022.
Nicole: Además de obtener la aprobación del equipo de liderazgo, tuvimos que encontrar la forma correcta de hacer llegar estas APIs a los desarrolladores. Cuando me uní a Chrome por primera vez, arruiné esto en un proyecto llamado API en capas (o LAPIs para abreviar). LAPIs diseñadas para brindarles a los desarrolladores una experiencia directa de componentes. Sigo pensando que fue un gran resultado, pero cometimos muchos errores. Primero, nos enfocamos en las notificaciones de avisos y una lista virtual. Es casi imposible hacer accesibles los avisos, 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, así que descontinuamos el proyecto. Es difícil aprender de la manera difícil, pero cada error impulsa el renacimiento de CSS y HTML que está ocurriendo ahora.
Hablemos un poco más sobre las LAPIs. ¿Qué sucedió?
Nicole: Para las LAPIs, sabíamos que la Web necesitaba una experiencia de desarrollo de componentes directos que estuviera más cerca de crear una IU nativa. Y era evidente que reinventar la rueda retenía a los desarrolladores. ¡No puedo contar la cantidad de pestañas que he creado a lo largo de mi carrera! Dicho esto, intentamos resolverlo enviando JavaScript con el navegador, lo cual era muy difícil. Nadie había enviado JavaScript al navegador antes, y no estaba claro cómo debía interactuar con el código C++ que impulsa el motor de procesamiento 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. Cuando nos apoyamos en HTML y CSS, obtenemos soluciones flexibles y declarativas. Debido a que es declarativa, podemos integrar la accesibilidad de una manera que no hubiera sido tan fácil con JavaScript. Estoy muy entusiasmado por lo que va a suceder. Estamos trabajando para admitir el menú de selección, las ventanas emergentes, 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 realmente esenciales.
Aprendimos mucho. Sé que también hubo 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 de Houdini útiles, pero muchas eran de nivel demasiado bajo como para lograr una adopción y asistencia más amplias. Nos dimos cuenta de que la implementación de APIs de bajo nivel no necesariamente redujo la fricción para los desarrolladores. En cambio, enfocarse en soluciones y necesidades de mayor nivel ayudó a obtener asistencia entre navegadores y los aterrizajes necesarios para cambiar el panorama del ecosistema. Actualmente, estamos realizando un seguimiento del progreso en https://ishoudinireadyyet.com/.
Hablando de compatibilidad con varios navegadores, algunas iniciativas como Interoperabilidad 2022 y Open UI parecen generar resultados positivos significativos para la comunidad. ¿Qué escuchan 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 solucionar este problema, trabajamos con otros proveedores de navegadores a fin de priorizar y obtener algunas de las funciones más solicitadas para los desarrolladores. Los comentarios que recibimos de la comunidad fueron totalmente positivos. Además, gracias a un esfuerzo de rediseño de arquitectura llamado RenderingNG, es posible obtener algunos de estos atributos con un mejor rendimiento. Los desarrolladores están entusiasmados porque se están trabajando en estas funciones tan esperadas que han estado solicitando y en la implementación en diferentes navegadores.
Nicole: El entusiasmo en la comunidad es palpable. Puedes verlo en Twitter. :)
Trabajar con el ecosistema demostró ser fundamental para el éxito que hemos tenido en facilitar la vida de los desarrolladores. Sé que tu equipo ha trabajado mucho allí. ¿Podrías compartir algunos detalles?
Nicole: En primer lugar, estoy constantemente asombrada por los proyectos que los desarrolladores crean en la Web. Los desarrolladores crean contenido asombroso, desde la biblioteca más pequeña hasta los frameworks más completos. Es una comunidad fantástica de creadores. Y Chrome está tomando muchas 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 metaframeworks, por ejemplo, Next, Nuxt y Gatsby. El año pasado, comenzamos a hacer lo mismo con herramientas de IU y frameworks como Sass, Bootstrap y Material. Espero que, durante 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 hablar en Smashing Conference y me entusiasmó mucho trabajar con colegas del área de la animación.
Entonces, ¿dónde vemos la mayor oportunidad para el ecosistema de IU web?
Una: En cuanto a las grandes oportunidades, creo que estamos arrancando la superficie de lo que es posible para las experiencias web personalizables. Las nuevas APIs, como las consultas de contenedores y las funciones multimedia de preferencias de los usuarios 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 próximo paso en la hoja de ruta de tu equipo?
Nicole: No todas las exploraciones se pueden enviar, pero hay muchas cosas que me entusiasman en este momento:
Sin mencionar lo primero, habilitaremos el diseño responsivo basado en componentes. Incluye herramientas para diseñar sistemas de color para que los diseñadores puedan responder a las preferencias de los usuarios, 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 lodo!
También estamos trabajando en algunas de las APIs más solicitadas, como las consultas de contenedores, las capas de 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.
Otra área divertida con las animaciones con desplazamiento vinculado es otra cosa. Me gusta mucho la demostración de Steve Gardner. Tiene un desplazamiento fluido y geniales animaciones de aviones que se activan con el desplazamiento. Si bien estas opciones son divertidas, puede ser difícil hacerlas bien, especialmente si se tiene en cuenta la accesibilidad. Por lo tanto, ahora estamos realizando pruebas de accesibilidad de usuarios 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, estamos trabajando 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 la Web pueda, con el tiempo, volverse accesible de forma predeterminada. Luego, los desarrolladores pueden enfocarse en los problemas más complejos y matizados, mientras que los aspectos básicos, como la pestaña “Cómo hacer una pestaña”, pueden ser compatibles con el navegador. Probablemente esto necesite su propia publicación, así que me detendré aquí por ahora.
Por último, seguiremos invirtiendo en la interoperabilidad entre navegadores. Fue genial trabajar con los miembros de WebKit y Gecko para aportar coherencia a la experiencia de los desarrolladores. Escuchamos a los desarrolladores claramente que quieren esto.
Además, si aún no lo has visto, la API de Shared Element Transitions del equipo de Smooth Web cambiará la forma en que las personas diseñan para la Web. Todas esas pequeñas transiciones sutiles que permitan a los diseñadores orientar sus diseños en el espacio físico no solo serán posibles, sino que serán sencillas. Jake Archibald tiene una excelente demostración.
Si los estándares van bien, podríamos incluso mirar el ritmo vertical este año. Podemos desarrollar elementos a partir de 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 las funciones que llegarán al mundo de la IU web. Todavía hay mucho que explorar, entonces, ¿dónde diría que uno 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 redactó un excelente artículo sobre todos los desembarcos nuevos y futuros relacionados con los CSS. De forma continua, me enfocaría en las versiones estables por ahora y solo estaría al tanto del otro trabajo que vendrá en el proceso. Tu serie impresionante Nuevo en la plataforma web es ideal para eso. Si te suscribes al boletín informativo web.dev, este contenido también llegará a la bandeja Recibidos de los desarrolladores. Para los desarrolladores que buscan participar y ayudar en todo esto, unirse a Open UI es una de las mejores formas de respaldar este trabajo.
Próximas actualizaciones clave
Mantenemos nuestra tradición de avisarte sobre un próximo cambio que debes tener en cuenta cuando crees tus experiencias en la Web.
Limita la antigüedad máxima de las cookies a 400 días.
- Actualización: Cuando se configuran 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 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 de los usuarios. Cualquier sitio que se visite con una frecuencia superior a 400 días puede actualizar las cookies para garantizar la continuidad del servicio, y los usuarios pueden tener la seguridad de que las cookies no permanecerán en su navegador durante milenios sin uso. - Cronograma estimado: Envío de Chrome 104 (estable al 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 cierren la sesión 400 días después de que se haya establecido la cookie inicialmente.
Espero que hayas disfrutado esta edición de Chrome Dev Insider. Si te lo perdiste, aquí está la primera. Esperamos poder contar con usted más en el próximo trimestre.
Hasta entonces, 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 Chrome Dev Insider? Comparte tus comentarios.