Duas famílias de cinco

Cinco páginas do nosso sítio não tinham ilustração: o índice da documentação, o índice dos tutoriais, a página de parceiros, o índice do blogue e a página de contacto. Todas as outras tinham uma. A tarefa era desenhar cinco imagens que parecessem pertencer ali.

Pertencer a quê, exatamente, é a questão, e não é das que se respondem a olhar. Dez imagens existentes, vistas uma de cada vez em dez páginas diferentes ao longo de vários meses, produzem uma impressão confiante de um estilo da casa. Essa impressão não vale nada, e temos a contagem que o prova.

O estilo não existia

Um pequeno script percorreu as dez imagens numa tela e contou os píxeis escuros: luminância igual ou inferior a 110, alfa igual ou superior a 200, quantizados em dezasseis níveis para que a suavização de contornos não produza mil cores quase idênticas.

O resultado foram dois grupos de cinco, sem sobreposição nenhuma.

Cinco contra cinco. Não há maioria. Se alguém tivesse decidido a olho, teria escolhido o grupo que tivesse visto mais recentemente e produzido uma sexta imagem que combinava com metade do sítio.

As cinco novas seguem o primeiro grupo, e a razão não é a contagem. As imagens de comparação são uma subfamília com o seu próprio componente, a sua própria proporção e o seu próprio lugar no produto; são um tipo diferente de página a fazer um trabalho diferente. As novas ilustrações ficam ao lado do primeiro grupo, portanto desenham-se como o primeiro grupo. A medição não tomou a decisão. Tornou a decisão possível, substituindo uma sensação sobre um estilo da casa por dois factos sobre dois conjuntos.

Uma cor que não está na folha de estilos é uma cor inventada

O azul-marinho que domina o primeiro grupo não aparece em lado nenhum da nossa folha de estilos. É uma cor que chegou com essas imagens e não tem nome no sistema de desenho.

Copiá-la para cinco ficheiros novos teria sido exatamente aquilo que esta ronda devia evitar: um valor que só existe porque alguém recolheu um píxel. As novas imagens usam portanto o token cujo valor lhe está mais próximo e que fica na mesma família da cor da marca. Não é idêntico. É defensável, e mexe-se se o sistema se mexer.

O primeiro rascunho tinha também uma fita de leitura cor de laranja na imagem da documentação, com a cor de destaque, porque uma fita é cor de laranja. Uma segunda contagem também resolveu isso: das dez ilustrações existentes, ao longo de 1,79 milhões de píxeis opacos, o número com algum píxel quente é zero. Não poucos, zero. Um elemento cor de laranja teria feito do novo desenho a única coisa quente do sítio, o que é uma decisão que alguém pode querer tomar deliberadamente um dia e não é uma decisão que uma fita deva tomar sozinha.

O branco é onde o olhar pousa

A última propriedade partilhada é uma que ninguém tinha registado e que as dez cumprem: cada imagem tem exatamente um plano branco, e é para ali que o olhar vai. A frente de um cofre, o interior de um escudo, os ladrilhos à volta de um centro.

Quatro dos cinco novos desenhos apanharam isso naturalmente, porque uma folha de papel, um artigo, uma carta e um botão de reprodução são coisas brancas. A imagem dos parceiros não: dois tons de azul, branco em lado nenhum.

Na página de parceiros parecia bem. Estava obviamente errada numa folha de contacto, que é uma única página gerada que põe as quinze imagens lado a lado sobre a verdadeira cor de fundo. Um desenho numa fila de quinze que não tem plano focal lê-se, de imediato, como mais achatado do que os outros, e não se lê como nada quando se olha para ele sozinho. O hexágono da esquerda assenta agora na cor de superfície.

Se vai fazer um conjunto, olhe para o conjunto. As páginas individuais são a superfície de revisão errada para uma propriedade que só existe em comparação.

Uma linha desenhada antes das formas é uma linha que não se vê

A primeira versão da imagem dos parceiros tinha uma linha de ligação entre os dois hexágonos: um único traço horizontal, com 433 píxeis de largura, declarado antes das duas formas.

A ordem do pintor fez o resto. Os hexágonos taparam o meio dela, deixando dois cotos a espreitar dos lados e, como o hexágono da direita tinha uma opacidade de preenchimento ligeiramente abaixo de um, a parte tapada transparecia como uma risca fantasma a atravessá-lo. Dois defeitos de um erro de ordenação, e ambos parecem um problema de desenho no navegador e não um problema de código.

A ligação passa a ser a própria sobreposição, recortada à interseção das duas formas, e não há transparência parcial em parte nenhuma do ficheiro. É também um desenho melhor além de funcionar: a área partilhada entre dois parceiros é a ideia, e uma linha entre eles era uma maneira mais fraca de a dizer.

Dois hífenes terminam um comentário XML

Todos estes ficheiros levam comentários a explicar a geometria, e os comentários num SVG viajam até ao navegador. Medido na primeira versão: de 10 160 bytes nos cinco ficheiros, 5789 eram comentário. Cinquenta e sete por cento do que teríamos publicado era uma explicação daquilo que publicámos.

A explicação vive agora no componente que referencia as imagens, onde é pelo menos igualmente útil e não chega ao navegador de ninguém. É um ponto geral sobre a diferença entre comentários de código e comentários de recurso: uns são gratuitos e os outros são carga.

O segundo ponto é uma regra e não uma medição, e é do tipo de regra de que só se precisa uma vez. Um hífen duplo termina um comentário XML. Referir uma propriedade personalizada de CSS pelo seu nome dentro de um comentário de SVG termina portanto o comentário mais cedo, a meio de uma frase, e o resto dessa frase passa a ser marcação. O ficheiro deixa então de ser analisável, e um SVG que não é analisável não produz mensagem de erro. Produz uma resposta 200 e uma imagem vazia.

As cinco atuais não contêm hífenes duplos dentro de nenhum comentário e as cinco são analisáveis como XML válido. O modo de falha é real; do incidente concreto não lhe posso entregar uma medição, porque esse estado nunca chegou a um commit.

O texto alternativo não é uma decisão de desenho

Uma ilustração que não diz nada que o título ao lado já não diga é decoração, e a resposta de acessibilidade para decoração é um atributo alt vazio, para que um leitor de ecrã não leia «cofre com chave» ao lado de um título sobre credenciais que ficam no seu próprio anfitrião. Esse raciocínio está certo e seguimo-lo durante muito tempo.

Também não é o quadro todo, porque um rastreador não distingue decoração de conteúdo. Uma auditoria de SEO conta um alt vazio como um alt em falta, e um relatório cheio de atributos alt em falta é um relatório que ninguém lê.

Cada ilustração leva portanto agora uma descrição curta vinda do catálogo de traduções, uma descrição por imagem e não por colocação, já que o mesmo desenho significa a mesma coisa em duas páginas diferentes. A guarda exige um alt não vazio em cada ilustração, o que quer dizer que esconder uma da árvore de acessibilidade não é uma opção que alguém possa tomar em silêncio. Uma ilustração nova precisa de uma descrição nas nove línguas antes de poder sair.

Zero deslocamento, e a contraprova

A largura e a altura de cada imagem são as dimensões da própria caixa de visualização do ficheiro, e estão ali por uma única razão: para que o navegador reserve o espaço antes de os bytes chegarem. A largura visível vem das classes e nada tem a ver com esses números.

O deslocamento cumulativo de disposição ao longo de quarenta e cinco estados de página mediu 0,00000, que é um número que por si só não quer dizer nada. Qualquer medição que comunique um zero perfeito tem de responder à pergunta de saber se estava a olhar.

A mesma execução foi por isso repetida com as dimensões retiradas e um atraso de 1500 milissegundos injetado à frente das imagens. Treze de quinze estados deslocaram-se. Os dois que não o fizeram estão na célula mais baixa de uma grelha, onde a imagem não pode alterar a altura da linha faça o que fizer, portanto o seu zero é estrutural e não acidental. Isso foi verificado um a um em vez de ser dispensado com um gesto, porque dois zeros por explicar numa contraprova são exatamente onde uma falha verdadeira se esconderia.

Há mais um pormenor mecânico que vale a pena declarar, já que é fácil errar no sentido contrário: estas imagens contornam por completo o otimizador de imagens da framework. Não é preguiça. O otimizador recusa SVG a não ser que esteja ativo um sinalizador especificamente perigoso, portanto encaminhá-las por ali produziria uma imagem partida e não uma imagem mais pequena.

Um achado que não fazia parte da ronda

Ao medir larguras, uma classe utilitária numa página sem relação com isto revelou não fazer absolutamente nada. Define uma largura máxima que é anulada por uma classe declarada mais tarde na folha de estilos, portanto o valor está inerte desde que foi escrito.

Ninguém tinha reparado, porque o elemento parece razoável na largura que tem de facto. É a maneira comum de o estilo morto sobreviver: não está errado no ecrã, apenas não é ele que está a fazer o trabalho, e a única maneira de o encontrar é medir uma propriedade que já estava a medir por outra razão.

O que registaríamos

1. 01Um estilo da casa que nunca contou pode não existir. Dez imagens, duas famílias, cinco cada, e todas as impressões de uma maioria estavam erradas.
2. 02Uma medição torna uma decisão possível; não a toma. Nenhum dos dois grupos era maior; as novas imagens seguem as ilustrações de funcionalidades por causa do tipo de página em que estão.
3. 03Uma cor recolhida de um píxel é uma cor inventada. Use o token mais próximo e aceite que não é idêntico.
4. 04Zero é uma resposta forte. Nenhum píxel quente em 1,79 milhões resolve uma discussão sobre uma fita cor de laranja mais depressa do que o gosto.
5. 05Reveja um conjunto como conjunto. As propriedades que só existem em comparação são invisíveis numa página individual.
6. 06Declare um conector depois das coisas que ele liga, ou ficará tapado, e a transparência parcial fará o erro parecer uma falha do motor de desenho.
7. 07Os comentários num recurso são carga. Mais de metade do que quase publicámos era explicação.
8. 08XML inválido num SVG é uma imagem vazia, não um erro. Não há mensagem nenhuma para procurar.
9. 09Um alt vazio está certo para uma pessoa e em falta para um rastreador. Escolha o compromisso de propósito e imponha-o num teste.
10. 10Um zero perfeito precisa de uma contraprova. Parta a coisa de propósito e verifique que o número se mexe.

Para que fique claro o que isto é: as cinco imagens estão em produção nas nove línguas com descrições, as contagens vêm de uma execução em tela sobre os ficheiros reais, e tudo foi medido contra um servidor de desenvolvimento e não contra uma compilação de produção. Não há tema escuro contra o qual verificar, o que foi comprovado e não suposto: com o escuro emulado, a captura é idêntica byte a byte à clara.

Do trabalho de plataforma na Provibr. Um defeito de disposição que produziu zero píxeis de excesso está em uma barra mais estreita que a janela, e o que nove línguas fazem a um conjunto de controlos de largura fixa está em dezasseis mil chaves, nove idiomas.