Te damos la bienvenida a la segunda edición de Chrome Dev Insider, en la que compartimos actualizaciones sobre las novedades y lo más interesante de la comunidad y de Chrome. Este es un nuevo episodio de historias exclusivas 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, 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 los estándares web abiertos 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 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 destacó (y nos alegra que la comunidad haya tomado nota) es la gran cantidad de trabajo que el equipo realiza para admitir más funciones de CSS y la IU en la Web. En esta edición de Chrome Dev Insider, te llevaremos detrás de escena para mostrarte quiénes están detrás de este trabajo, cómo trabajamos para brindar asistencia a los desarrolladores de CSS y la IU, y qué nos espera en el futuro. Por eso, me complace mucho presentar esta edición de Insider.
En las noticias
En el primer Chrome Dev Insider, compartimos algunas actualizaciones sobre las iniciativas Compatibilidad 2021 y Interoperabilidad 2022, en las que los proveedores de navegadores y los actores del ecosistema se asociaron para llevar más funciones a la Web que sean compatibles con todos los navegadores. La iniciativa se enfoca en CSS porque la incompatibilidad de navegadores es uno de los mayores desafíos para los desarrolladores de CSS.
Si bien esto puede no ser una novedad para la mayoría, es emocionante ver el progreso que ya logramos en todos los navegadores.
A principios del mes pasado, Safari anunció una gran actualización con la versión beta 16.0, que incluye funciones interesantes, como consultas de contenedor, subred de cuadrícula y un inspector de flexbox. Las versiones recientes de Firefox y Chrome incluyeron varias funciones y correcciones interesantes. Cada mes, analizo los aspectos clave de los navegadores estables y beta en mi serie de publicaciones Nuevo en la plataforma web.
Información privilegiada: Asistencia a desarrolladores de CSS y IU
Dado que 2022 resultó ser un año emocionante para las funciones de CSS, pensamos que era un buen momento para mostrarte los entresijos. Me senté con Una Kravets, líder de DevRel para la IU web y DevTools, y Nicole Sullivan, nuestra gerente de producto de la 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 por ustedes dos. ¿Puedes contarnos un poco más sobre ti?
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 realmente importantes, como las consultas de contenedores, Scope y, con suerte, ritmo vertical.
Una: Dirijo los equipos de DevRel de la IU web y de DevTools. Nos enfocamos en brindar asistencia a los ingenieros de IU en la plataforma web y asegurarnos de que tengan las herramientas que necesitan para tener éxito. Esto incluye las APIs de CSS y los componentes HTML, junto con las funciones de DevTools para ver los cambios y los comentarios activos.
La compatibilidad de Chrome con los desarrolladores de IU se ha acelerado en los últimos años. ¿Por qué crees que tardó tanto en llegar? ¿Cuáles fueron los mayores desafíos?
Una: Necesitábamos hacer un trabajo para demostrar lo importante que era este trabajo y por qué debería ser una prioridad. Comenzamos con la encuesta de ADN de MDN en 2019, que identificó a la IU como uno de los principales problemas de la plataforma. Desde entonces, seguimos usando los datos como guía en el MDN y en nuestras propias encuestas internas de satisfacción de los desarrolladores. El resultado de todo esto es que pudimos obtener un mayor compromiso de la dirección 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 forman la mayor parte del enfoque de iniciativas como Compatibilidad 2021 y Interoperabilidad 2022.
Nicole: Además de obtener la aceptación de los líderes, también tuvimos que encontrar la forma correcta de llevar estas APIs a los desarrolladores. Cuando me uní a Chrome por primera vez, me equivoqué en un proyecto llamado APIs en capas (o LAPIs). El objetivo de las LAPI era brindarles a los desarrolladores una experiencia de componentes de inserción. Aún creo que este fue un gran resultado al que apuntar, pero cometimos muchos errores. Primero, nos enfocamos en las notificaciones emergentes y una lista virtual. Los avisos emergentes 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 de la manera difícil, pero cada error alimenta el renacimiento de CSS y HTML que está ocurriendo ahora.
Hablemos un poco más sobre las LAPI. ¿Qué sucedió allí?
Nicole: En el caso de las LAPI, sabíamos que la Web necesitaba una experiencia de desarrollador de componentes insertables que estuviera más cerca de la compilación de una IU nativa. Y estaba claro que reinventar la rueda frenaba 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 enviado JavaScript en el navegador antes, y no estaba claro cómo debería interactuar con el código C++ que potencia el motor de renderización del navegador. Escuchamos a otros proveedores de navegadores (gracias, Mozilla) y abandonamos ese enfoque, por lo que pudimos encontrar algo mucho mejor con la IU abierta. Si nos apoyamos en HTML y CSS, obtenemos soluciones flexibles y declarativas. Debido a que es declarativo, podemos incorporar la accesibilidad de una manera que no sería tan fácil de hacer con JavaScript. Me entusiasma el futuro. Estamos trabajando para admitir menús desplegables, ventanas emergentes, cuadros de herramientas, navegación, acordeones, pestañas, carruseles y botones de activación, que son patrones de diseño de IU realmente esenciales.
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 útiles de Houdini, pero muchas eran demasiado de bajo nivel 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 con varios navegadores y las páginas de destino necesarias para generar un cambio en el ecosistema. Actualmente, estamos haciendo un seguimiento del progreso en https://ishoudinireadyyet.com/.
En cuanto a la compatibilidad con varios navegadores, iniciativas como Interop 2022 y Open UI parecen estar generando resultados positivos significativos para la comunidad. ¿Qué dicen los desarrolladores?
Una: Uno de los principales problemas que escuchamos de 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 más solicitadas por los desarrolladores. Los comentarios que recibimos de la comunidad fueron muy positivos. Además, a través de un gran esfuerzo de rearquitectura llamado RenderingNG, es posible implementar algunas de estas funciones con mucho más rendimiento. Los desarrolladores están entusiasmados con que estas funciones que tanto tiempo llevan esperando y que solicitaron durante años por fin se estén implementando y estén disponibles en todos los navegadores.
Nicole: El entusiasmo en la comunidad es palpable. Puedes verlo en Twitter. :)
Trabajar con el ecosistema demostró ser fundamental para el éxito que tuvimos en facilitar la vida de los desarrolladores. Sé que tu equipo ha estado trabajando mucho en eso. ¿Puedes compartir algunos detalles?
Nicole: En primer lugar, me sorprenden constantemente los proyectos que los desarrolladores crean en la Web. Desde la biblioteca más pequeña hasta los frameworks completos, los desarrolladores crean cosas increíbles. Es una comunidad fantástica de creadores. Y Chrome está tomando muchas medidas para estar más conectado a estos proyectos.
Por ejemplo, hace algunos 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 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 hablar en la Smashing Conference y me emocionó mucho trabajar con personas del espacio de la animación.
Entonces, ¿dónde vemos la mayor oportunidad para el ecosistema de la IU web?
Una: En términos de grandes oportunidades, creo que solo estamos viendo la superficie de 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 en conjunto con los usuarios que visitan sus sitios web.
Nicole, ¿cuál es el siguiente paso en la hoja de ruta de tu equipo?
Nicole: No todas las exploraciones se convierten en algo que se pueda enviar, pero hay muchas cosas que me entusiasman en este momento:
Una mencionó lo primero, que habilitamos el diseño responsivo basado en componentes. Incluye herramientas para diseñar sistemas de colores 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 uniforme 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 contenedor, las capas en cascada, el selector superior (:has), los estilos centrados y el anidado. Los desarrolladores los necesitan para poder crear sistemas de diseño flexibles llenos de componentes reutilizables.
Desplazar animaciones vinculadas es otra área divertida. Me gusta mucho la demo de Steve Gardner. Tiene un desplazamiento muy fluido y animaciones geniales de aviones que se activan cuando se desplaza el contenido. Si bien son divertidos, puede ser complicado hacerlos bien, en especial si se tiene en cuenta la accesibilidad. Por lo tanto, ahora estamos realizando pruebas de accesibilidad para usuarios en la función.
Lo que más me entusiasma personalmente son los controles integrados de la IU web. Los desarrolladores siguen compilando el mismo conjunto de pestañas una y otra vez. Creo que el navegador puede ayudar. En Open UI, trabajamos en componentes como menús de selección, ventanas emergentes, cuadros de herramientas, pestañas, navegación, acordeones y botones de activación. Estamos explorando cómo sería integrar la accesibilidad en estas primitivas del navegador para que, con el tiempo, la Web sea accesible de forma predeterminada. Luego, los desarrolladores pueden enfocarse en los problemas más complejos y matizados, mientras que el navegador puede admitir los conceptos básicos, como cómo abrir una pestaña. Es probable que 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 el equipo de WebKit y Gecko para brindar coherencia a la experiencia de los desarrolladores. Escuchamos alto y claro que los desarrolladores quieren esta función.
Además, si aún no lo has hecho, 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 demostración excelente.
Si los estándares funcionan bien, es posible que incluso analicemos el ritmo vertical este año. Podemos compilar en LayoutNG, lo que desbloquea muchas funciones.
Gracias a ambos. Estoy seguro de que toda la comunidad, al igual que nosotros, está entusiasmada con el ritmo renovado de mejoras y funciones que llegarán al mundo de la IU web. Aún queda mucho por entender, así que ¿por dónde dirías que se debe comenzar?
Una: En nuestra sesión Novedades de la plataforma web en I/O, se incluyen los aspectos más destacados de muchas de las funciones que se lanzarán este año. Adam Argyle también escribió un excelente artículo sobre todas las nuevas y próximas versiones de destino de CSS. De forma continua, me enfocaría en las versiones estables por ahora y estaría al tanto del otro trabajo que se encuentra en la canalización. La serie Nuevo en la plataforma web es una excelente opción para eso. Si te suscribes al boletín informativo de web.dev, también recibirás este contenido en tu bandeja de entrada. Y para los desarrolladores que quieran participar y ayudar con todo esto, unirse a Open UI es una de las mejores formas de respaldar este trabajo.
Próximos cambios clave
Mantenemos nuestra tradición de avisarte sobre un próximo cambio que debes tener en cuenta a la hora de crear tus experiencias web.
Limita el atributo max-age de las cookies a 400 días
- Actualización: Cuando se configuren las 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 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 estar seguros de que las cookies no permanecerán en su navegador durante milenios sin uso. - 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 sus cuentas 400 días después de que se configuró la cookie inicialmente.
Espero que hayas disfrutado de esta edición de Chrome Dev Insider. Si te lo perdiste, aquí tienes el primero. Esperamos poder ofrecerte más 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 Chrome Dev Insider? Comparte tus comentarios.