Tenga en cuenta lo siguiente:
- El enrutamiento es más fácil con
URLPattern
integrado en el navegador. - La API de Eye Dropper proporciona una herramienta integrada para seleccionar colores.
- Hay una nueva prueba de origen que te permite habilitar la recepción de la cadena de UA reducida ahora.
- Los videos de la Cumbre de AWP están todos en línea.
- Además, hay mucho más.
Soy Pete LePage, trabajando y disparando desde casa. Veamos las novedades para desarrolladores en Chrome 95.
Enrutamiento con URLPattern
Casi todas las apps web dependen del enrutamiento de alguna manera, ya sea que se trate de un código que se ejecuta en un servidor que asigna una ruta a los archivos del disco o de la lógica en una app de una sola página que actualiza el DOM cuando cambia la URL. URLPattern
es una nueva API de plataforma web que estandariza la sintaxis de patrones de enrutamiento.
Se basa en los frameworks existentes, lo que facilita las tareas comunes de enrutamiento. Por ejemplo, hacer coincidir con URL completas o con un nombre de ruta de URL y, luego, mostrar información sobre la coincidencia del token y el grupo.
Si ya conoces la sintaxis de enrutamiento que se usa en Express, Ruby on Rails o path-to-regexp, es probable que te parezca familiar.
Para usarla, crea un nuevo URLPattern()
y proporciona los detalles con los que deseas establecer coincidencias de patrones. Los patrones pueden contener comodines, grupos de tokens con nombre, grupos de expresiones regulares y modificadores de grupo.
const p = new URLPattern({
protocol: 'https',
hostname: 'example.com',
pathname: '/:folder/*/:fileName.jpg',
search: '*',
hash: '*',
});
Por ejemplo, veamos el elemento URLPattern
que podría usar Documentos de Google.
Especificaremos el kind
del archivo, el archivo ID
y el mode
en el que se abrirá.
Luego, para usar el patrón, podemos llamar a test()
o exec()
.
const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';
const pattern = new URLPattern({
pathname: '/:kind/d/:fileID/:mode',
hash: '*',
});
const r = pattern.exec(url);
// {
// "pathname": {"groups": {
// "fileID": "1s...5c",
// "kind": "document",
// "mode": "edit"
// }, ...},
// "hash": {"groups": {"0":"heading=h.8...c"}, ...},
// ...
// }
URLPattern
está habilitado de forma predeterminada en Chrome y Edge 95 y versiones posteriores.
Para los navegadores o entornos como Node, que aún no lo admiten, puedes usar la biblioteca urlpattern-polyfill.
Para obtener más información, consulta el artículo de Jeff URLPattern acerca el enrutamiento a la plataforma web.
Cómo elegir colores con la API de Eye Dropper
Casi todas las apps de diseño que he usado tienen una herramienta de cuentagotas, lo que
facilita la identificación del color de algo. Algunos navegadores tienen la función de cuentagotas
integrada en <input type=color>
, pero no es la opción ideal.
La API de cuentagotas, que implementaron algunas personas de Microsoft, incorpora esa funcionalidad a la Web. Para usarlo, crea una instancia de EyeDropper()
nueva y, luego, llama a open()
en ella.
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}
Al igual que muchas otras APIs web modernas, funciona de forma asíncrona para que no bloquee el subproceso principal. Cuando el usuario haga clic en el color que desea, se resolverá con el color en el que hizo clic.
Puedes probar una demostración rápida y ver el código en Glitch.
Cumbre de AWP
¿Ya viste la Cumbre de AWP a principios de este mes?
Fue estupendo ver a tantas personas hablar sobre las AWP y compartir sus experiencias. Si te lo perdiste, verás todos los videos, así que asegúrate de verlos en PWASummit.org o en el canal de YouTube de la Cumbre de AWP.
Prueba de origen de la reducción de usuario-agente
La reducción de usuario-agente es un esfuerzo por reducir la información de la string de usuario-agente a fin de reducir la información de la string de usuario-agente solo a la marca y la versión significativa del navegador, a su distinción de computadora de escritorio o dispositivo móvil, y a la plataforma en la que se ejecuta.
A partir de Chrome 95, hay una nueva prueba de origen que permite aceptar recibir la cadena de UA reducida ahora mismo. Esto te permitirá descubrir y solucionar problemas antes de que la UA reducida se convierta en el comportamiento predeterminado en Chrome.
Los cambios se aplicarán de forma incremental en varias versiones, pero todo lo que necesitas para prepararte y probar ya está listo.
Todos los detalles y el cronograma se encuentran en la publicación de la prueba de origen de la reducción de usuario-agente en developer.chrome.com.
Y mucho más.
Por supuesto que hay mucho más.
- Si seguiste el trabajo de la API de Storage Foundation, hay una nueva prueba de origen para los identificadores de acceso.
- WebAssembly ahora proporciona compatibilidad con el control de excepciones, que permite que el código interrumpa el flujo de control cuando se arroja una excepción.
- Chrome 100 estará disponible el próximo año. Lo que significa que es momento de asegurarte de que tu código pueda manejar más de dos dígitos.
Lecturas adicionales
Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 95.
- Novedades de las Herramientas para desarrolladores de Chrome (95)
- Bajas y eliminaciones de Chrome 95
- Actualizaciones de ChromeStatus.com para Chrome 95
- Novedades de JavaScript en Chrome 95
- Lista de cambios del repositorio de código fuente de Chromium
- Calendario de lanzamientos de Chrome
Suscribirse
Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.
Soy Pete LePage, y en cuanto se lance Chrome 96, estaré aquí para contarte las novedades de Chrome.