Lista de lectura de desarrollo web n.° 144: Errores de CSP, depuración de JS y pruebas de fallas

Cada semana es una semana de aprendizaje y esta semana me recordaron que no todas las unidades de ventana gráfica son buenas para usar. Además, elegir el código de estado HTTP correcto puede ser difícil y es posible que ni siquiera sea compatible con la versión de Apache que se ejecuta en su servidor. También aprendí cómo se puede ampliar el registro de errores de JavaScript para que finalmente pueda obtener informes útiles y fáciles de leer.

Como si eso no fuera suficiente, aprendí mucho sobre accesibilidad y mejora progresiva nuevamente, y descubrí una presentación de diapositivas sobre cómo puede omitir CSP y por qué los navegadores pueden representar elementos con límites conocidos y limitaciones de diseño increíblemente más rápido que desconocido. ¿Estás listo? Ahora es tu turno de aprender todo esto también.

Lectura adicional en SmashingMag:

• Errores de diseño de aplicaciones para iPhone: imágenes exageradas
• Historia de una de las 10 mejores aplicaciones, parte 1: idea y diseño
• Cómo tener éxito con su aplicación móvil
• Los componentes básicos de las aplicaciones web progresivas

Genérico

• Estos hermosos diagramas de flujo lo ayudarán a decidir con qué código de estado HTTP adecuado debe responder su aplicación.

Herramientas y flujos de trabajo

• WebPageTest es una gran herramienta para probar su sitio web en busca de problemas de rendimiento. Sin embargo, la herramienta puede hacer mucho más de lo que posiblemente piensas. Puede simular un único punto de falla (por ejemplo, un tiempo de espera de biblioteca de terceros) con él, inicios de sesión de secuencias de comandos para páginas autenticadas por el usuario e integrarlo en su CI o ejecutar su propia instancia. Dean Hume ha recopilado un par de estos trucos en su artículo.
  

Seguridad

• La política de seguridad de contenido [CSP] tiene excelentes funciones, pero también trae sus propios problemas y riesgos. Michele Spagnuolo y Lukas Weichselbaum presentan los problemas más comunes, los errores de implementación, algunas omisiones y cómo hacer que la CSP vuelva a ser excelente en su presentación de diapositivas.
  

Rendimiento web

• PerfTool de la gente de devbridge es un excelente paquete npm para mostrar estadísticas sobre sus páginas web, incluida la puntuación de Google PageSpeed ​​Insights, el recuento de recursos, recomendaciones sobre cómo solucionar problemas de rendimiento, errores de HTML y mucho más en una página web personalizada.

HTML y SVG

• A veces, los diseñadores simplifican demasiado un formulario eliminando las etiquetas. El problema es que mínimo no siempre significa que sea simple, lo que ciertamente es el caso de las etiquetas. Las etiquetas, de hecho, son una parte esencial del diseño de formularios fáciles de usar.

Accesibilidad

• Heydon Pickering está escribiendo un libro sobre "Patrones de diseño inclusivos" y puede reservarlo ahora. Ya he podido obtener algunas ideas y estoy bastante impresionado por los diferentes ángulos sobre la semántica, la mejora progresiva y la accesibilidad en el libro y puedo recomendarlo si está interesado en estos temas.
• Heather Migliorisi escribió un gran compendio sobre la creación de archivos SVG accesibles que definitivamente deberías leer si usas archivos SVG en tus proyectos (¿y quién no?).

JavaScript

• Daniel Reis publicó algunos trucos prácticos de consola que te ayudan a depurar tus aplicaciones mucho más fácilmente. Y si quiere ir más allá, logerr es una biblioteca experimental de ayuda para errores que puede brindarle muchas ideas.

CSS/Sass

• La composición del diseño CSS suele ser bastante lenta en los navegadores debido al comportamiento desconocido de los elementos. Ahora, si tiene un elemento que, por ejemplo, tiene un overflow: hidden set ya y es opaco, puede ayudar al navegador a renderizar mucho más rápido al proporcionar información de contención CSS. Una optimización similar a will-change y probablemente solo sea algo temporal que, con suerte, no necesitaremos usar por mucho tiempo o en absoluto.
• Si está utilizando vw u otras unidades de ventana gráfica para el tamaño de los elementos, tenga siempre en cuenta que los elementos del tamaño de la unidad de ventana gráfica no son ampliables por el usuario. Puedes probarlo por tu cuenta con esta demostración. Una alternativa podría ser usar calc(1em + 0.25vw) o cálculos similares que no dependan completamente de las unidades de la ventana gráfica y, por lo tanto, sean escalables.
• Firefox 49 llega la próxima semana y, con él, se admitirán colores alfatransparentes-hexadecimales de ⁶ ⁄ ₈ dígitos y, por lo tanto, debe verificar sus sitios si tiene alguno de esos valores por accidente porque ¡de repente serán evaluados!

Y con eso, voy a cerrar por esta semana. Si te gusta lo que escribo cada semana, apóyame con una donación o comparte este recurso con otras personas. Puede obtener más información sobre los costos del proyecto aquí. Está disponible por correo electrónico, RSS y en línea.