Fui a Chrome Web Dev Summit un par de veces (en
2016 y
2018 ), y siempre me gustó escribir un artículo de revisión con las ideas y proyectos más interesantes de la conferencia. ¡Intentemos hacer esto de acuerdo con los resultados del último foro!
Finalmente llamó la atención sobre HTML
Parece que el diseño y la funcionalidad de casi todos los controles no han cambiado desde la invención de los navegadores, aunque comenzaron a usarlo de manera muy diferente, por ejemplo, con la transición a dispositivos móviles. ¡Ahora finalmente se nota! En su presentación,
"HTML aún no ha terminado", Nicole y Greg discutieron varias innovaciones que aparecerán en Chrome pronto.
Elementos <form> reciclados
¡Finalmente cambie la apariencia de algunas formas! No solo se han vuelto más modernos, sino que han sido optimizados para dispositivos móviles y acceso sin barreras. Por ejemplo, hizo valores más grandes al elegir una fecha.
Extensibilidad de elementos <form>
¡Los formularios también se están volviendo más flexibles! Tome el elemento
<select> . Muchas personas tienen que usar componentes personalizados para las cosas más simples, como agregar un ícono a una opción, o para algo complicado, como buscar opciones. En futuras versiones de Chrome, ¡todo esto podrá hacer
<select> nativo!
Nuevos articulos?
En un futuro más lejano, los desarrolladores de Chrome quieren implementar elementos completamente nuevos en HTML. Los planes incluyen una vista tabular, como UITableView de iOS, y un interruptor de palanca.
¡CSS también está mejorando!
CSS recibirá los refinamientos necesarios. En una rica conferencia
sobre el futuro de los estilos, Una y Adam hablaron sobre una docena de nuevas características de CSS. Aunque hay muchas características completamente nuevas como Houdini, lo que realmente me entusiasmó fueron las mejoras para hacer que CSS sea más simple y eficiente.
Selector: is ()
El selector
:is() permite agrupar varios selectores idénticos. Esto se explica mejor con un ejemplo.
Como regla general, si queremos aplicar el mismo estilo a varios elementos que comparten parte del selector, todavía tenemos que ingresar el selector completo cada vez.
body.theme--light button, body.theme--light a, body.theme--light p, body.theme--light h1 { }
Con
:is () puede agrupar diferentes partes de los selectores.
body.theme--light :is(button, a, p, h1) { }
Genial, ¿verdad?
Propiedades lógicas
Las propiedades lógicas son una transición de la escritura de izquierda a derecha a un enfoque más agnóstico. En lugar de los conceptos de la izquierda, a la derecha, la parte superior e inferior del modelo de bloque utilizarán las características inicio de bloque, final de línea, final de bloque, inicio de línea.
Figura: Una KravetsPuede ser difícil de entender al principio, pero si lo piensas un poco, entonces todo tiene sentido. A menudo, cuando especificamos sangrar a la izquierda, de hecho, queremos sangrar no a la izquierda, sino al comienzo del bloque incorporado. Con la ayuda de nuevas propiedades lógicas, los estilos se adaptarán al idioma del usuario. Bueno, si izquierda significa izquierda, entonces esta opción también permanecerá.
Web persiguiendo aplicaciones nativas
En el nuevo proyecto
Fugu , el equipo de Chromium está tratando de cerrar la brecha entre las aplicaciones nativas y web. Dos discursos en la conferencia discutieron los detalles de las nuevas API web.
En su
charla sobre las innovaciones de
registro y autorización , Eldjay habló sobre las nuevas API de receptor de SMS, que le dan al navegador acceso a mensajes de texto en el dispositivo para ingresar automáticamente el código durante la autenticación.
También habló sobre las API de autenticación web a través de las cuales el navegador accede a mecanismos locales de almacenamiento de credenciales como FaceID. A continuación se muestra cómo se verifica la disponibilidad de los mecanismos de autenticación en el dispositivo (quizás este es el nombre de método más largo que he encontrado):
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() .then((available) => {
En un discurso,
"Poniéndose al día con las aplicaciones nativas", Sam discutió varias otras API que estarán disponibles pronto en la web, incluyendo:
- API de web share
- API de destino de recurso compartido web
- API de selector de contactos
- API del sistema de archivos nativo
En la zona de demostración, pude ver algunas presentaciones API increíbles como WebXR, Web Bluetooth y Web NFC.
El video de demostración WebAR.
Descarga adaptativa
Siempre me ha interesado el tema de ajustar el contenido a las capacidades del dispositivo terminal. Eddie Osmani introdujo el
concepto de "descarga adaptativa" : adaptación para el usuario en función de las capacidades de su dispositivo / red / navegador.
Hay varias API para esto, a través de las cuales puede averiguar el tipo de dispositivo, red y navegador del usuario.
Por ejemplo, utilizando la API de información de red, podemos determinar si un usuario está conectado a través de 4G y si la configuración para guardar el tráfico está habilitada.
const network = navigator.connection.effectiveType;
Vale la pena señalar que el soporte para estas funciones aún no está muy extendido. Sin embargo, todavía se pueden usar para obtener información adicional donde esté disponible.
¡Esto completa mi pequeña reseña! Todos los videos de la conferencia se pueden ver en YouTube en la
lista de reproducción Chrome Dev Summit 2019 . ¿Qué actuaciones te gustaron más?