Un evento aparte 2022 Denver envuelto ayer. Y aunque esta vez no pude llegar a los tres días, capté la acción de ayer, y fue impresionante. No soy muy sociable ni extrovertida, pero esta fue la primera conferencia a la que asistí en al menos un par de años, y ver a la gente en persona fue increíblemente refrescante.
¡Tomé notas, por supuesto! Pensé en publicarlos aquí porque compartir es solidario. Al menos, eso es lo que mi hijo de seis años me dijo el otro día cuando me pidió un bocado de mi postre anoche.
Desglosaré esto por altavoz. Advertencia justa: Me gustan las notas escritas a mano y soy un tipo bastante visual, por lo que mis notas tienden a ser menos... estructuradas que la mayoría. Y estas notas son solo cosas que me llamaron la atención. Puede que ni siquiera sean la idea principal del presentador, ¡pero me llamaron la atención!
Chris Coyier: Los sitios web son buenos ahora
Chris ha dado esta charla antes (lo vinculamos la semana pasada), pero esta vez lo amplió sustancialmente, particularmente con detalles sobre unidades relativas al contenedor que, cuando se combina con clamp(), hacen que la capacidad de respuesta sea más precisa porque los valores son relativos al contenedor en lugar de a la ventana gráfica. Entonces, ya sabes cómo a menudo usamos el ancho de la ventana gráfica (vh) unidades para el tipo de fluido?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Bueno, podemos usar una unidad relativa al contenedor como consulta de contenedor tamaño en línea (cqi) en cambio, donde 1cqi es igual al 1% del tamaño en línea del contenedor (aquí está el borrador de especificación sobre eso):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris también habló un poco sobre los beneficios de rendimiento de alojamiento en el borde. Probablemente no sea una sorpresa porque él es escrito sobre eso esta página más de unas cuantas veces. Incluso como alguien que ya había leído esos artículos, sinceramente, no me di cuenta del concepto completo de computación en el perímetro.
La idea es engañosamente simple: las CDN globales pueden servir activos rápidamente porque los alojan geográficamente cerca del usuario. Esa es una práctica bastante estándar para servir imágenes rasterizadas. Pero se ha extendido a los archivos estáticos, como los mismos archivos HTML, CSS y JavaScript que alimentan un sitio: créelos con anticipación y sirva los archivos ya compilados y optimizados desde la veloz CDN global. ¡Ese es todo el concepto de Jamstack!
Pero, ¿qué sucede si aún necesita una respuesta del servidor? Eso no es muy arriesgado, ¿verdad? Bueno, ahora tenemos controladores capaces de ejecutarse en una sola URL, obtener datos por adelantado e inyectarlos antes del procesamiento, directamente desde la CDN. Claro, hay trabajo extra en segundo plano. Aún así, el hecho de que podamos obtener datos dinámicamente, inyectarlos, preconstruirlos, servirlos estáticamente en la demanda, y hacer que se ejecute geográficamente más cerca del usuario lo hace increíblemente rápido.
Tolu Adegbite: Cómo ganar en ARIA e influir en la accesibilidad web
¡Dios mío, fue una excelente presentación! Tolu Adegbite me enseñó tanto sobre WAI-ARIA que me costó mucho anotar todas las gemas que compartió: ¡roles! Estados! ¡Etiquetado! Descripciones! Todo estaba extraordinariamente bien cubierto y cosas que sé que volveré a consultar una y otra vez.
Pero una cosa específica que me llamó la atención es la accesibilidad de SVG en línea. Aunque SVG está relacionado con otros tipos de activos de diseño, el hecho de que sea un marcado al final del día lo distingue porque no siempre se identifica como una imagen.
Es más probable que la tecnología de asistencia lea SVG en línea como una imagen al darle una función y una etiqueta accesibles adecuadas:
Miriam Suzanne: Capas en cascada de importancia
¡Hola, otro alumno de CSS-Tricks! Miriam ha estado dedicando mucho tiempo y esfuerzo a la Especificación de capas en cascada. Ella también escribió un gran guía sobre ellos aquí en CSS-Tricks y habló sobre ellos en An Event Apart.
Lo que más me ha llamado la atención es cuán grande es este cambio mental. El concepto no es complicado, per se. Declarar @layer en la parte superior del documento CSS, enumere las capas en orden de especificidad, luego escriba estilos en esas capas. Pero para un viejo dinosaurio como yo que ha estado escribiendo CSS por un tiempo, tendré que acostumbrarme al hecho de que Cascade Layers hace posible que un selector de clase simple supere algo que generalmente tiene una mayor especificidad, como una identificación.
🤯
Miriam también recordó a la sala que las capas en cascada son solo una herramienta que tenemos en nuestro cinturón de herramientas de gestión de especificidad, además de los selectores que afectan la especificidad (p. ej., :is(), :where()y :has()).
Ah, y este es un dato interesante. Mientras Miriam repasaba la historia de la especificidad en CSS, recordó que !important se diseñó inicialmente como una herramienta para que los usuarios anularan los estilos de agente de usuario y autor. Pero en algún momento, lo hemos adoptado para forzar los estilos de autor en la parte superior. Las capas en cascada ayudan a eliminar el excusa necesitará usar !important porque nos dan el poder de “priorizar capas y proteger la herencia."
¡Eso está muy bien dicho, Miriam!
Dave Rupert: Desbloquear su acumulación de accesibilidad
Imagine despertarse un día con cientos de notificaciones de GitHub sobre problemas informados en su sitio. ¿Por dónde empiezas? ¿Tal vez cierre su computadora portátil y obtenga un tratamiento de conducto en su lugar? ¡Eso le pasó a Dave! Una auditoría de accesibilidad automatizada arrojó una gran cantidad de errores y los asignó como tickets para que Dave los corrigiera.
Pero notó un patrón después de tomar una hoja de cálculo de Excel de esos problemas, moverlos a Notion para verlos mejor, ocultar columnas innecesarias, categorizar todo y mostrar los resultados en grupos lógicos. Muchos de los problemas informados eran el mismo problema repetido en varias páginas. El hecho de que una prueba automatizada devuelva un puñado de errores no significa que todos sean únicos. Eso redujo una buena parte de las entradas.
Continuó mostrando cómo, con un esfuerzo relativamente pequeño, la acumulación de problemas se redujo en casi un 50 %.
Hay mucho que aprender allí, especialmente con respecto a cómo procesamos y organizamos nuestro trabajo. La conclusión más importante para mí es cuando Dave dijo que debemos enfatizar a las personas y las interacciones sobre los procesos y las herramientas. Las herramientas como la que busca errores de accesibilidad son útiles, pero es posible que no cuenten toda la historia. En lugar de tomarlos en sus palabras, vale la pena hacer preguntas y obtener más contexto antes de sumergirse en el lío.
Como beneficio adicional, la reorganización de los problemas en Notion le permitió a Dave agrupar los problemas de una manera que muestra claramente qué impedimentos discriminaba activamente su producto, lo que le dio una mayor empatía por esos fallos y cómo priorizarlos.
Una sesión virtual más de Hui Jing Chen culminó el día, pero es cierto que me perdí la mitad porque estaba teniendo una conversación en el pasillo. La conversación valió la pena, aunque estoy desanimado porque me perdí la presentación. ¡Estaré viendo el video cuando se publique!
