Um evento à parte 2022 Denver encerrado ontem. E embora eu não tenha conseguido ir aos três dias desta vez, eu peguei a ação de ontem - e foi impressionante. Não sou muito sociável ou extrovertida, mas esta foi a primeira conferência a que participei em pelo menos dois anos, e ver as pessoas pessoalmente foi incrivelmente revigorante.
Eu anotei, é claro! Eu pensei em postá-los aqui porque compartilhar é cuidar. Pelo menos, foi o que meu filho de seis anos me disse outro dia quando pediu uma mordida na minha sobremesa ontem à noite.
Vou dividir isso por alto-falante. Aviso justo: Eu gosto de anotações manuscritas e um cara muito visual, então minhas anotações tendem a ser menos... estruturadas do que a maioria. E essas notas são apenas coisas que se destacaram para mim. Podem até não ser a ideia principal do apresentador, mas me chamaram a atenção!
Chris Coyier: os sites são bons agora
Chris já deu essa palestra antes (nós o ligamos semana passada), mas desta vez o expandiu substancialmente, particularmente com detalhes sobre unidades relativas do recipiente que, quando combinado com clamp(), proporcionam uma capacidade de resposta mais precisa porque os valores são relativos ao contêiner e não à janela de visualização. Então, você sabe como costumamos usar a largura da janela de visualização (vh) unidades para o tipo de fluido?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Bem, podemos usar uma unidade relativa de contêiner como tamanho inline da consulta do contêiner (cqi) em vez disso, onde 1cqi é igual a 1% do tamanho embutido do contêiner (aqui está a especificação do rascunho sobre isso):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris também falou bastante sobre os benefícios de desempenho de hospedagem na ponta. Provavelmente nenhuma surpresa porque ele é escrito sobre isso SUA PARTICIPAÇÃO FAZ A DIFERENÇA mais do que algumas vezes. Mesmo como alguém que já tinha lido esses artigos, eu honestamente não percebi o conceito completo de computação na borda.
A ideia é enganosamente simples: CDNs globais podem servir ativos rapidamente porque eles os hospedam geograficamente próximos ao usuário. Essa é uma prática bastante padrão para servir imagens raster. Mas ele se estendeu a arquivos estáticos, como os mesmos arquivos HTML, CSS e JavaScript que alimentam um site — construa-os antecipadamente e sirva os arquivos já compilados e otimizados da rápida CDN global. Esse é todo o conceito do Jamstack!
Mas e se você ainda precisar de uma resposta do servidor? Isso não é muito ousado, é? Bem, agora temos manipuladores capazes de executar em uma única URL buscando dados antecipadamente e injetando-os antes da renderização — diretamente do CDN. Claro, há trabalho extra acontecendo em segundo plano. Ainda assim, o fato de podermos buscar dados dinamicamente, injetá-los, pré-construí-los, servi-los estaticamente na demanda, e executá-lo geograficamente mais próximo do usuário torna isso incrivelmente rápido.
Tolu Adegbite: Como vencer no ARIA e influenciar a acessibilidade da Web
Meu Deus foi esta uma excelente apresentação! Tolu Adegbite me ensinou tanto em WAI-ARIA que eu tive dificuldade em anotar todas as joias que ela compartilhou – Papéis! Estados! Marcação! Descrições! Tudo estava extraordinariamente bem coberto, e coisas que eu sei que vou voltar uma e outra vez.
Mas uma coisa específica que me chamou a atenção é a acessibilidade do SVG inline. Embora o SVG esteja relacionado a outros tipos de ativos de design, o fato de ser markup no final do dia o diferencia porque nem sempre é identificado como uma imagem.
É mais provável que a tecnologia assistiva leia o SVG embutido como uma imagem, dando a ele uma função e um rótulo acessíveis adequados:
Miriam Suzanne: camadas em cascata de importância
Ei, outro ex-aluno do CSS-Tricks! Miriam tem gastado muito tempo e esforço no Especificação de camadas em cascata. Ela também escreveu um grande guia sobre eles aqui no CSS-Tricks e falei sobre eles no An Event Apart.
O que mais me marcou é o quão grande é essa mudança mental. O conceito não é complicado, por si só. Declarar @layer na parte superior do documento CSS, liste as camadas em ordem de especificidade e, em seguida, escreva estilos nessas camadas. Mas para um dinossauro velho como eu, que escreve CSS há algum tempo, vou ter que me acostumar com o fato de que as Camadas em Cascata permitem que um simples seletor de classe supere algo que geralmente possui uma especificidade mais alta, como uma identificação.
🤯
Miriam também lembrou à sala que Cascade Layers são apenas uma ferramenta que temos em nosso toolbelt de gerenciamento de especificidade, além de seletores que afetam a especificidade (por exemplo, :is(), :where() e :has()).
Ah, e essa é uma dica interessante. Ao percorrer a história da especificidade em CSS, Miriam lembrou que !important foi inicialmente projetado como uma ferramenta para os usuários substituirem os estilos de agente de usuário e autor. Mas em algum momento, nós o adotamos para forçar os estilos de autor ao topo. Camadas em cascata ajudam a remover desculpa precisa usar !important porque eles nos fornecem o poder de “priorizar camadas e proteger herança. "
Muito bem dito, Miriam!
Dave Rupert: Desbloqueando sua lista de pendências de acessibilidade
Imagine acordar um dia com centenas de notificações do GitHub sobre problemas relatados em seu site. Onde você começa mesmo? Talvez feche seu laptop e faça um tratamento de canal? Isso aconteceu com Davi! Uma auditoria de acessibilidade automatizada retornou uma pilha enorme de erros e os atribuiu como tickets para Dave corrigir.
Mas ele notou um padrão depois de pegar uma planilha do Excel desses problemas, movendo-os para o Notion para uma melhor visualização, ocultando colunas desnecessárias, categorizando tudo e exibindo os resultados em grupos lógicos. Muitos dos problemas relatados eram o mesmo problema repetido em várias páginas. Só porque um teste automatizado retorna um punhado de erros não significa que todos sejam únicos. Isso reduziu uma boa parte dos ingressos.
Ele passou a mostrar como - com relativamente pouco esforço - o acúmulo de problemas diminuiu em quase 50%.
Há muito o que aprender lá, especialmente em relação à forma como processamos e organizamos nosso trabalho. A maior lição para mim é quando Dave disse que temos que enfatizar indivíduos e interações sobre processos e ferramentas. Ferramentas como a verificação de erros de acessibilidade são úteis, mas podem não contar toda a história. Ao invés de levá-los em suas palavras, vale a pena fazer perguntas e ganhar mais contexto antes de mergulhar na bagunça.
Como bônus, reorganizar os problemas no Notion permitiu que Dave agrupasse os problemas de uma maneira que mostrasse claramente quais deficiências seu produto estava discriminando ativamente, dando a ele maior empatia por essas falhas e como priorizá-las.
Mais uma sessão virtual de Hui Jing Chen encerrou o dia, mas admito que perdi metade dela porque estava conversando no corredor. A conversa valeu a pena, embora eu esteja chateado por ter perdido a apresentação. Estarei assistindo o vídeo dele quando for publicado!
