Actualización mensual de desarrollo web 11⁄2018: diseño justo a tiempo y respaldos de fuentes variables

¿Cuánto afecta el diseño a la percepción de nuestros productos y de los usuarios que interactúan con ellos? Para mí, cada vez es más claro que el diseño marca la diferencia y que unificar los diseños en un modelo estándar como el Material Design Kit de Google no funciona bien. Al usarlo, obtendrá un diseño decente que funciona desde una perspectiva técnica, por supuesto. Pero no crearás con él una experiencia única, una experiencia que perdure o que llegue a las personas a nivel personal.

Ahora piense en qué sitios web visita y si le gusta estar allí, leer o incluso aportar contenido al servicio. En mi opinión, eso es algo que Instagram logra hacer muy bien. Un buen diseño se ajusta al propósito de su empresa y se ajusta a lo que esperan los visitantes, haciéndolos sentir cómodos donde están y permitiéndoles conectarse con el producto. Sin embargo, las soluciones estándar pueden ser agradables y convenientes, pero siempre tendrán esa sensación de anonimato que impide que las personas realmente se preocupen por su producto. Está en nuestras manos dar forma a una mejor experiencia.

Noticias

• Sí, Firefox 63 ya está aquí, pero ¿qué trae? Compatibilidad con componentes web, incluidos elementos personalizados con extensiones integradas y Shadow DOM. La compatibilidad con consultas de medios prefers-reduced-motion también está disponible ahora, Developer Tools ha obtenido un editor de fuentes para facilitar el juego con la tipografía web, y el inspector de accesibilidad está habilitado de forma predeterminada. El elemento img ahora es compatible con el atributo de decoding que puede obtener valores de sync , async o auto para sugerir el tiempo de decodificación preferido para el navegador. Flexbox también obtuvo algunas mejoras, ahora admite propiedades de gap ( row-gap , column-gap ). Y por último, pero no menos importante, también se han agregado la API de capacidades de medios, la API del portapapeles asíncrono y la interfaz SecurityPolicyViolationEvent que nos permite enviar violaciones de CSP. ¡Vaya, qué liberación!
• Ya salió React 16.6, eso no parece una gran noticia, ¿verdad? Bueno, esta actualización menor trae React.lazy() , un método que puede usar para dividir el código envolviendo una importación dinámica en una llamada a React.lazy() . Un gran paso para un mejor rendimiento. También hay un par de otras cosas nuevas útiles en la actualización.
• El último Safari Tech Preview 68 brinda soporte para <input type="color"> y cambia el comportamiento predeterminado de los enlaces que tienen target="_blank" para obtener el rel="noopener" como atributo implícito. También incluye la nueva consulta de medios prefers-color-scheme preferido que permite a los desarrolladores adaptar los sitios web a la configuración de modo claro u oscuro de macOS.
• A partir de ahora, PageSpeed ​​Insights, probablemente todavía la herramienta de análisis de rendimiento más utilizada por Google, ahora cuenta con la tecnología del proyecto Lighthouse, que muchos de ustedes ya han utilizado. Una buena iteración de su herramienta que la hace mucho más precisa que antes.
  

General

• Explore rutas de aprendizaje estructuradas para descubrir todo lo que necesita saber sobre cómo crear para la web moderna. web.dev es el nuevo recurso del equipo web de Google para desarrolladores.
• No importa cómo te sientas con Apple Maps (supongo que la mayoría de nosotros hemos experimentado momentos de frustración con él), pero esta comparación entre los datos de mapas que usaban hasta ahora y los datos que recopilan actualmente para sus mapas renovados es fascinante. Estoy seguro de que el mayor nivel de detalle ayudará a muchas personas en todo el mundo. Imagine cómo los arquitectos paisajistas podrían hacer uso de esto o cómo los socorristas podrían beneficiarse de ese nivel de detalle después de un terremoto, por ejemplo.

HTML y SVG

• Andrea Giammarchi escribió una biblioteca de polyfill para elementos personalizados que nos permite ampliar los elementos integrados en Safari. Esto es muy bueno, ya que nos permite ampliar los elementos nativos con nuestras propias características personalizadas, algo que ya funciona en Chrome y Firefox, y ahora también existe este pequeño polyfill para otros navegadores.
• Los elementos personalizados aún son muy nuevos y el soporte del navegador varía. Es por eso que este proyecto de elementos analizados en html es útil, ya que proporciona una clase de elemento personalizada básica con un método confiable de parsedCallback de llamada analizada.

JavaScript

• Leonardo Maldonado compiló una colección de conceptos de JavaScript que son muy útiles para los desarrolladores. La lista incluye videos y artículos para que pueda elegir su forma preferida de aprendizaje.
• Cuando un video ya no funciona en un sitio web y está utilizando Service Workers, el problema podría ser la solicitud de rango. Phil Nash solucionó este extraño problema en su página y explica cómo puedes hacerlo tú también.

interfaz de usuario/experiencia de usuario

• ¿Cómo se construye una paleta de colores? Steve Schoger de RefactoringUI comparte un excelente enfoque que satisface las necesidades de la vida real.
• El artículo de Matthew Strom “Diseño justo a tiempo” menciona una solución para minimizar la desconexión entre el diseño y la ingeniería del producto. Se trata de adoptar el método Just-in-time para el diseño. Algo por lo que mi equipo actual estaba muy entusiasmado y estoy feliz de intentarlo.
• HolaBrief parece prometedor. Es una herramienta que mejora la forma en que creamos resúmenes de diseño, manteniendo a todos en la misma página durante el proceso.
• Los modelos mentales son explicaciones de cómo vemos el mundo. Teresa Man escribió sobre cómo podemos aplicar modelos mentales al diseño de productos y por qué es importante.
• Shelby Rogers comparte cómo podemos crear mejores páginas de error 404.

Estampación

• El generador de paleta de colores Palx le permite ingresar un valor hexadecimal base y genera una paleta de colores completa basada en él.

Seguridad

• Esta ordenada herramienta de Python es una gran utilidad de detección de XSS.
• Svetlin Nakov escribió un libro sobre criptografía práctica para desarrolladores que está disponible de forma gratuita. Si alguna vez quiso comprender o saber más sobre cómo funcionan las claves privadas/públicas, el hashing, los cifrados o las firmas, este es un excelente lugar para comenzar.
• Facebook afirmó que revelaría quién paga los anuncios políticos. Ahora, VICE investigó esta nueva característica y se hizo pasar por cada uno de los 100 senadores estadounidenses actuales para publicar anuncios 'pagados por ellos'. Es bastante aterrador ver cómo una falla de seguridad que otorga a los usuarios más poder según lo previsto puede cambiar la política mundial.

Intimidad

• No me gustan los enlaces a artículos restringidos y de pago, pero este me hizo pensar y no necesitas la historia completa para seguirme. Cuando Tesla anunció que aumentaría la producción del modelo 3 a ²⁴ ⁄ ₇ , muchas personas querían verificar esto, y una empresa que gana dinero al proporcionar datos de geolocalización capturó datos de ubicación de teléfonos inteligentes de los trabajadores de las fábricas de Tesla para confirmar si esto podría ser cierto. Otra triste historia de lo fácil que es rastrear a alguien sin consentimiento, aunque se trata más de un caso de vigilancia masiva que de rastreo individual.

Rendimiento web

• Addy Osmani comparte un estudio de caso de rendimiento de Netflix para mejorar el tiempo de interacción del servicio de transmisión. Esto incluye cambiar de React y otras bibliotecas a JavaScript simple, precargar HTML, CSS y (React) JavaScript y el uso de React.js en el lado del servidor. Muy interesante ver tantos enfoques no convencionales y sus beneficios. Pero recuerda que lo que funciona para otros no tiene por qué ser el enfoque perfecto para tu proyecto, así que tómalo más como inspiración que como una copia ciega.
• Harry Roberts explica todos los detalles que es importante saber sobre CSS y Network Performance. Una colección completa que también brinda algunos consejos muy interesantes para cuando tiene scripts async en su código.
• Me encanta la diminuta aplicación ImageOptim para optimizar por lotes mis imágenes para su distribución web. Pero ahora hay una aplicación web impresionante llamada "Squoosh" que le permite optimizar imágenes perfectamente en su navegador web y, como beneficio adicional, también puede cambiar el tamaño de la imagen y elegir qué compresión usar, incluidos mozJPEG y WebP. Realizado por el equipo de Google Chrome.

CSS

• Oliver Schondorfer muestra cómo podemos servir una fuente variable a los navegadores modernos mientras proporcionamos una fuente web alternativa para los navegadores más antiguos. Esto es especialmente interesante ya que Oliver profundiza en la optimización de la fuente alternativa y la ajusta a través de CSS para que coincida lo más posible con la fuente variable en caso de que se produzca un intercambio de fuentes durante la carga de la página.
• Andy Clarke muestra lo que se necesita para rediseñar un producto y un sitio web para admitir los modos claro y oscuro que se introdujeron recientemente en varios sistemas operativos y pronto serán admitidos a través de consultas de medios de varios navegadores.
• Si bien background-clip no es muy nuevo, no ha sido muy útil debido a la falta de compatibilidad con el navegador. Pero como muestra Sime Vidas, CSS Background Clip ahora es ampliamente compatible, lo que nos brinda grandes oportunidades para mejorar el estilo del texto en nuestros sitios web.

Vida laboral

• Stig Brautaset escribió sobre por qué estuvo a punto de fracasar en su trabajo como operador de sonar submarino debido a una regla de contratación tonta y cómo aprovechó al máximo la situación y tuvo éxito. Una lección valiosa que muestra que no debe apegarse demasiado a las pautas y reglas cuando se trata de contratar personas, sino que debe confiar en su instinto y escuchar sus historias.
• En "Personas, no robots: devolver la humanidad a la atención al cliente", Kristin Aardsma comparte por qué es importante repensar cómo funciona la atención al cliente.
• Marcus Wermuth reflexiona sobre por qué convertirse en gerente no es una promoción sino un cambio de carrera.

Ir más allá…

• Neil Stevenson sobre Steve Jobs, la creatividad y la muerte y por qué esta es una buena historia para la vida. Aunque copiar a Steve Jobs probablemente no sea una buena idea, Neil ofrece algunos ángulos diferentes sobre cómo nos gustaría trabajar, qué hacer con nuestras vidas y por qué el propósito es importante para muchos de nosotros.
• Ryan Broderick reflexiona sobre lo que hicimos al inventar Internet. Concluye que todo ese radicalismo en el mundo, esas extrañas opiniones políticas se deben a la invención de las redes sociales, el software de chat y la (no tan sub) cultura de promover y aceptar todas las cosas malas que suceden en nuestra sociedad. ¿Recuerdas 4chan, Reddit y servicios similares, pero también Facebook y otros? Contribuyen y adoptan no solo buenas ideas, sino también a menudo estúpidas o incluso dañinas. “Así es como radicalizamos el mundo” es una historia triste de leer pero bien escrita y con muchos pensamientos inspiradores sobre cómo damos forma a la sociedad a través de la tecnología.
• Lo siento, este es otro enlace sobre el consumo de energía de Bitcoin, pero muestra que la minería de Bitcoin por sí sola podría elevar las temperaturas globales por encima del límite crítico (2 °C) para 2033. Es hora de abandonar este tipo de criptomoneda ineficiente. Ahora.
• El desierto es algo especial. Y nuestro planeta tiene cada vez menos, como describe este artículo. El mapa revela que solo muy pocos países tienen mucha naturaleza en estos días, lo que brinda a animales y especies raros un lugar para vivir, brinda a los humanos una forma de explorar la naturaleza, relajarse y emprender aventuras.
• Definitivamente vivimos tiempos emocionantes, pero me entristece cuando leo que en los últimos cuarenta años, la población de vida silvestre disminuyó en un 60%. Esa es una escala bastante masiva, y si esto continúa, el mundo será otro lugar cuando sea viejo. Sí , cuando sea viejo, muchos de los animales que conocí y vi en la naturaleza ya no existirán, y la próxima generación de humanos no podrá verlos más que en un museo. No está del todo claro cuáles son las razones, pero el cambio climático podría ser una cosa, y la expansión cada vez mayor de los humanos en las áreas de vida silvestre probablemente también contribuya en gran medida.