Actualización mensual de desarrollo web 5⁄2018: rendimiento del navegador, iteración cero y autenticación web
Publicado: 2022-03-10Como desarrolladores, a menudo hablamos sobre el rendimiento y solicitamos a los navegadores que rendericen las cosas más rápido. Pero cuando finalmente lo hacen, exigimos aún más rendimiento.
Alex Russel del equipo de Chrome compartió ahora algunos pensamientos sobre los desarrolladores que abusan del rendimiento del navegador y explica por qué los sitios web siguen siendo lentos a pesar de que los navegadores se reinventaron con motores de renderizado increíblemente rápidos. Esto está en consonancia con un artículo de Oliver Williams en el que afirma que nos estamos centrando en las cosas equivocadas y, en lugar de ofrecer las soluciones más rápidas para máquinas y navegadores más lentos, ofrecemos paquetes aún más grandes con polyfills y código transpilado para cada navegador.
Ciertamente no es fácil salir de este patrón y mantener el tamaño del paquete al mínimo en interés del usuario, pero tenemos las tecnologías para lograrlo. Entonces , exploremos formas no tradicionales y pensemos en la experiencia real del usuario con más frecuencia, antes de definir el flujo de trabajo de un proyecto en lugar de después.
Lista de verificación de rendimiento de front-end 2021
Para ayudarlo a brindar experiencias rápidas y fluidas, Vitaly Friedman resumió todo lo que necesita saber para optimizar el rendimiento de su sitio en una práctica lista de verificación.
Saltar a un artículo relacionado ↬
Noticias
- Firefox 60 ya está disponible y trae módulos ECMAScript, así como la API de autenticación web.
- Chrome 66 ahora es estable y presenta algunas actualizaciones importantes con respecto al audio. Después de que se reveló un error causado por la protección del usuario recientemente introducida contra la reproducción automática en segundo plano que causó problemas graves con los clientes de WebRTC, Chrome ha anunciado que revertirá el bloqueo automático y lo retrasará hasta Chrome 70 (que llegará en otoño), para que los desarrolladores tienen más tiempo para adaptar su base de código.
- Con Chrome 66 ya lanzado y la versión más reciente de Firefox próximamente, dos de los principales navegadores ahora desconfían de todos los certificados de Symantec que se emitieron antes de junio de 2016, y créanme cuando les digo que hay muchos sitios que aún no han cambiado. sus certificados afectados y, por lo tanto, estarán fuera del alcance de los usuarios ahora (Chrome) o muy pronto (Firefox).
- Github Pages ahora ofrece soporte HTTPS para dominios personalizados. Anteriormente, HTTPS solo estaba disponible para los subdominios
*.github.io
o a través de proveedores externos como Cloudflare. - Chrome 67 llegará pronto y dejará de usar algunas cosas antes de eliminar la compatibilidad por completo dos versiones más tarde, entre ellas la fijación de clave pública basada en HTTP (HPKP) y AppCache en contextos no seguros.
- La actualización de abril de Windows 10 trajo EdgeHTML 17 con pestañas silenciadas, formularios de autocompletar, un nuevo modo de "imprimir sitio web" para ahorrar recursos, Service Workers y notificaciones push. También se han agregado fuentes variables, captura de pantalla en RTC a través de Media Capture API, integridad de subrecursos (SRI) y soporte para el encabezado
Upgrade-Insecure-Requests
. ¡Todo un paso adelante! - La versión 6 de npm está aquí con algunas mejoras de seguridad importantes. A partir de ahora, no solo tiene un nuevo comando de auditoría
npm audit
para auditar sus dependencias en busca de vulnerabilidades, sino que npm lo hará automáticamente e informará durante las instalaciones de dependencia. La nueva versión también viene connpm ci
para hacer que las tareas de CI sean más rápidas y un par de otras mejoras. - Node 10 está disponible con generadores y compatibilidad con funciones asíncronas, compatibilidad total con N-API y compatibilidad con el protocolo Inspector. Se convertirá en la próxima versión de soporte a largo plazo en octubre.
- La herramienta de mejores prácticas de codificación de Microsoft, sonarwhal, ahora está disponible en la primera versión estable.
General
- Oliver Williams escribió sobre lo importante que es que reconsideremos cómo estamos creando sitios web e implementando "mejoras progresivas" para que la web funcione bien para todos. Después de todo, somos nosotros los que empeoramos la experiencia de nuestros usuarios cuando transpilamos a ciegas todo nuestro código ECMAScript o entregamos toneladas de polyfills de JavaScript a aquellos que ya usan máquinas lentas y software antiguo.
- Ian Feather revela que alrededor del 1 % de todas las solicitudes de JavaScript en BuzzFeed se agotan. Eso es alrededor de 13 millones de solicitudes por mes. Un buen recordatorio de lo importante que es proporcionar una alternativa sólida, una mejora progresiva y soluciones alternativas.
- La nueva directiva GDPR (Reglamento general de protección de datos) llegará muy pronto, y aunque nuestras bandejas de entrada están llenas de actualizaciones de políticas de privacidad, una cosa que aún no está muy clara es qué servicios ya pueden proporcionar los llamados DPA (Acuerdos de procesamiento de datos). Joschi Kuphal recopila servicios que ofrecen un DPA, para que podamos buscarlos fácilmente y ver cómo podemos obtener una copia para continuar usando sus servicios. Puede ayudar contribuyendo a este recurso a través de solicitudes de extracción.
- Jared M. Spool resumió por qué los usuarios a veces odian las elecciones de diseño que hacemos, pero no cambiamos o rediseñamos en general.
- Llegan grandes noticias de Adobe con respecto a su producto de creación de prototipos Xd: a partir de ahora, el software será gratuito para cualquier persona con el nuevo plan de inicio. Las únicas diferencias con los planes pagos son el almacenamiento limitado, solo un prototipo compartido (pero tantos no compartidos como desee) y solo la biblioteca gratuita de Typekit. El equipo de Xd también mejoró las integraciones de Sketch y Photoshop, y ahora también puede intercambiar símbolos, pegar en varias mesas de trabajo y proteger las especificaciones de diseño con una contraseña.
- Mei Zhang nos enseña mejores principios de diseño de productos con una sola tarjeta de producto.
- Este mes, un secuestro de partes del servicio DNS Route 53 de Amazon permitió a los atacantes controlar y potencialmente interceptar el tráfico de los clientes que usan el servicio. Esto demuestra una vez más cuán vulnerable es la parte vital de Internet, el DNS.
- La última versión de Firefox viene con compatibilidad con la API de autenticación web, un gran paso hacia la eliminación de las contraseñas. La API le permite iniciar sesión a través de una clave de hardware como YubiKey si el navegador y el servicio web son compatibles con la nueva tecnología. En particular, Chrome 67 beta ya está enviando la API. Su equipo ha escrito una guía de implementación técnica.
- A partir de Firefox 60, podremos especificar el
same-site
para las Cookies. Esto permitirá que una aplicación web informe al navegador que las cookies solo deben enviarse si la solicitud se origina en el sitio web del que proviene la cookie. Lea más detalles en la publicación del blog del anuncio.
- La lista de verificación de GDPR es otro recurso útil para que las personas verifiquen si un sitio web cumple con la próxima directiva de la UE.
- Bloomberg publicó una historia sobre el pi-hole del proyecto de protección de la privacidad de código abierto, por qué existe y qué quiere lograr. Utilizo el software a diario para mantener toda mi red doméstica y laboral libre de seguimiento.
- Postgres 10 ya ha estado aquí por bastante tiempo, pero personalmente luché para encontrar buena información sobre cómo usar todas estas características increíbles que trae consigo. Gabriel Enslein ahora comparte las actualizaciones de rendimiento de Postgres 10 en una presentación de diapositivas, arrojando luz sobre cómo usar la compatibilidad con JSON integrada, la partición nativa para grandes conjuntos de datos, la resiliencia del índice hash y más.
- Andrew Betts descubrió que muchos sitios web utilizan encabezados obsoletos. Ahora comparte por qué deberíamos eliminar los encabezados antiguos y cuáles mostrar en su lugar.
- Marcy Sutton comparte cómo Wikipedia creó su nueva función de vista previa de enlaces de una manera accesible para que las personas puedan usar fácilmente el teclado y el mouse para activar la superposición. También puede leer más sobre cómo se creó esta función en esta publicación del diseñador de Wikipedia Nirzar Pangarkar.
- Scott O'Hara explica las diferencias entre las palabras clave
hidden
ynone
en ARIA y cuándo debemos usar cuál.
- Raramente mencionado durante años, las tablas CSS todavía se usan en la mayoría de los sitios web para mostrar (y esa es la forma totalmente correcta de hacerlo) datos en tablas. Pero como no responden de manera predeterminada, siempre tuvimos problemas para hacerlos receptivos y la mayoría de nosotros usamos JavaScript para que funcionen en pantallas móviles. Lea Verou ahora encontró dos nuevas formas de lograr tablas receptivas usando CSS: una es usar
text-shadow
para copiar texto a otras filas, la otra usaelement()
para copiar todo el<thead>
a otras filas. Todavía intento para entender cómo Lea encontró estas soluciones, ¡pero esto es increíble! - Rachel Andrew escribió un artículo sobre cómo crear y proporcionar hojas de estilo de impresión en 2018 y por qué son tan importantes para los usuarios, incluso si ya no tienen una impresora.
- Osvaldas Valutis comparte cómo implementar el llamado patrón de navegación “Priority Plus” principalmente con CSS, al menos en los navegadores modernos. Si necesita admitir navegadores más antiguos, deberá ampliar aún más esta solución, pero es un gran comienzo para implementar un patrón de este tipo sin demasiado JavaScript.
- Rachel Andrew comparte lo que se avecina en las especificaciones de CSS Grid Level 2 y Subgrid y explica qué es, qué puede resolver y cómo usarlo una vez que esté disponible en los navegadores.
- Chris Ashton “usó la web por un día con JavaScript desactivado”. Este artículo destaca la importancia de pensar en las posibles fallas de JavaScript en los sitios web y por qué es importante si proporciona respaldos o no.
- Sam Thorogood comparte cómo podemos crear un "deshacer y rehacer nativo para la web", como se usa en muchos editores de texto, juegos, software gráfico o de planificación y otras ocasiones, como un reordenamiento de arrastrar y soltar. Y aunque no es fácil de construir, el artículo explica los conceptos y aspectos técnicos para ayudarnos a entender este complicado asunto.
- Hay una nueva forma de implementar consultas de elementos/contenedores en su aplicación: eqio es una pequeña biblioteca que utiliza IntersectionObserver.
- Johannes Seitz comparte sus pensamientos sobre la gestión de proyectos al inicio de los proyectos. Él llama al método "Iteración Cero". Un concepto interesante para comprender mejor el alcance y los riesgos de un proyecto en un momento en que aún no tiene suficiente experiencia con el proyecto en sí, pero necesita crear una hoja de ruta para comenzar.
- Arestia Rosenberg comparte por qué su principal consejo para los freelancers es "aprovechar el momento". Se trata de hacer el trabajo cuando pueda y aprovechar su oportunidad para hacer otra cosa cuando sienta que no puede trabajar de manera productiva. Al final, el resumen da como resultado una vida feliz y más productividad. Personalmente extendería esto a todas las personas que pueden hacer eso, pero, por supuesto, se aplica mejor a los trabajadores independientes.
- Sam Altman comparte un par de útiles consejos de productividad que no son solo una lista de "diez cosas por hacer", sino pensamientos realmente útiles sobre cómo pensar en ser productivo.
- Ethan Marcotte explica los problemas éticos de Google Duplex, que está diseñado para imitar la voz humana tan bien que las personas no se dan cuenta si se trata de una máquina o de un ser humano. Si bien esto suena bastante interesante desde un punto de vista técnico, impulsará mucho más el debate sobre las noticias falsas y causará más dificultades para diferenciar entre algo que dijo un humano o lo que imitó una máquina.
- Nuestro mundo en realidad se basa en promesas, y he aquí por qué es tan importante cumplir tus promesas, incluso si a veces es difícil.
- Apuesto a que la mayoría de ustedes aún no han oído hablar de Palantir. La empresa está financiada por Peter Thiel y es una empresa de minería de datos que tiene la intención de recopilar la mayor cantidad de datos posible sobre todas las personas del mundo. Se sabe que colabora con varias autoridades policiales e incluso tiene conexiones con los servicios militares. No se sabe qué hacen con los datos y qué datos tienen de nosotros. Mi única esperanza en este momento es que esta empresa sufra mucho por la directiva GDPR de la UE y que la Unión Europea intente detener su recopilación de datos incontrolada. Parece que las prácticas de datos de Facebook no son nada en comparación con Palantir.
- Los investigadores hacen sonar la alarma después de que un análisis mostró que comprar un nuevo teléfono inteligente consume tanta energía como usar un teléfono existente durante toda una década. Supongo que no reemplazaré mi iPhone 7 en el corto plazo; sigue siendo un dispositivo absolutamente excelente y suficiente para lo que hago con él.
- Anton Sten comparte sus pensamientos sobre Vanity Metrics, una forma común de compartir números y estadísticas fuera de contexto. Y como se dio cuenta de la relevancia que tienen, ahora piensa de manera diferente sobre la mayoría de los datos comúnmente legibles, como las inversiones o los datos de uso de los servicios. Leer un número sin tener un contexto para compararlo no importa en absoluto. Deberíamos tener eso en cuenta.
Esperamos que haya disfrutado de esta actualización de desarrollo web. El próximo está programado para el viernes 15 de junio. Manténganse al tanto.