Twee families van vijf

Vijf pagina's op onze site hadden geen illustratie: de documentatie-index, de tutorial-index, de partnerpagina, de blogindex en de contactpagina. Al het andere had er een. De opdracht was vijf platen tekenen die eruitzien alsof ze erbij horen.

Waar ze dan precies bij horen is de vraag, en die is niet met kijken te beantwoorden. Tien bestaande afbeeldingen, één voor één bekeken op tien verschillende pagina's over enkele maanden, leveren een stellige indruk van een huisstijl op. Die indruk is niets waard, en we hebben de telling om dat te bewijzen.

De stijl bestond niet

Een kort script liep alle tien de afbeeldingen op een canvas af en telde de donkere pixels: luminantie op of onder 110, alfa op of boven 200, gekwantiseerd naar zestien niveaus zodat anti-aliasing niet duizend bijna gelijke kleuren oplevert.

Het resultaat waren twee groepen van vijf, zonder enige overlap.

Vijf om vijf. Er is geen meerderheid. Had iemand het op het oog gedaan, dan had hij de groep gekozen waar hij het laatst naar gekeken had en een zesde afbeelding gemaakt die bij de helft van de site paste.

De nieuwe vijf volgen de eerste groep, en de reden is niet de telling. De vergelijkingsafbeeldingen zijn een deelfamilie met een eigen component, een eigen beeldverhouding en een eigen plek in het product; het is een ander soort pagina met ander werk. De nieuwe illustraties staan naast de eerste groep, dus tekenen ze als de eerste groep. De meting nam de beslissing niet. Ze maakte de beslissing mogelijk, door een gevoel over een huisstijl te vervangen door twee feiten over twee verzamelingen.

Een kleur die niet in het stijlblad staat is een verzonnen kleur

Het marineblauw dat de eerste groep domineert komt nergens in ons stijlblad voor. Het is een kleur die met die afbeeldingen is meegekomen en die in het designsysteem geen naam heeft.

Hem in vijf nieuwe bestanden overnemen zou precies zijn wat deze ronde moest vermijden: een waarde die alleen bestaat omdat iemand een pixel geprikt heeft. De nieuwe afbeeldingen gebruiken daarom het token waarvan de waarde er het dichtst bij ligt en dat in dezelfde familie zit als de merkkleur. Hij is niet identiek. Hij is verdedigbaar, en hij beweegt mee als het systeem beweegt.

Het eerste concept had ook een oranje leeslint op de documentatieafbeelding, in de accentkleur, want een lint is oranje. Een tweede telling besliste ook dat: van de tien bestaande illustraties, over 1,79 miljoen ondoorzichtige pixels, is het aantal met ook maar één warme pixel nul. Niet weinig, nul. Eén oranje element had de nieuwe tekening tot het enige warme ding op de site gemaakt, en dat is een beslissing die iemand op een dag misschien bewust wil nemen en geen beslissing die een lint in zijn eentje hoort te nemen.

Wit is waar het oog landt

De laatste gedeelde eigenschap is er een die niemand had opgeschreven en die alle tien gehoorzamen: elke afbeelding heeft precies één wit vlak, en dat is waar het oog heen gaat. De voorkant van een kluis, de binnenkant van een schild, de tegels rond een knooppunt.

Vier van de vijf nieuwe tekeningen namen dat vanzelf over, want een vel papier, een artikel, een brief en een afspeelknop zijn witte dingen. De partnerafbeelding niet: twee tinten blauw, nergens wit.

Op de partnerpagina zag het er prima uit. Op een contactvel was het overduidelijk fout, en dat is één gegenereerde pagina die alle vijftien afbeeldingen naast elkaar op de echte achtergrondkleur zet. Eén tekening in een rij van vijftien die geen focusvlak heeft leest meteen als vlakker dan de rest, en leest als helemaal niets zodra je er alleen naar kijkt. De linker zeshoek staat nu op de oppervlaktekleur.

Ga je een verzameling maken, kijk dan naar de verzameling. Losse pagina's zijn het verkeerde beoordelingsvlak voor een eigenschap die alleen in vergelijking bestaat.

Een lijn die vóór de vormen getekend is, zie je niet

De eerste versie van de partnerafbeelding had een verbindingslijn tussen de twee zeshoeken: één horizontale streek, 433 pixels breed, gedeclareerd vóór de twee vormen.

De schildersvolgorde deed de rest. De zeshoeken bedekten het midden ervan, zodat er aan de zijkanten twee stompjes uitstaken, en doordat de rechter zeshoek een vuldekking net onder één had, scheen het bedekte deel er als een spookstreep doorheen. Twee defecten uit één volgordefout, en ze zien er allebei uit als een renderprobleem in plaats van een bronprobleem.

De verbinding is nu de overlap zelf, bijgesneden tot de doorsnede van de twee vormen, en er is nergens in het bestand nog gedeeltelijke doorzichtigheid. Dat is een betere tekening en tegelijk een werkende: het gedeelde gebied tussen twee partners is het idee, en een lijn ertussen was een zwakkere manier om dat te zeggen.

Twee koppeltekens beëindigen een XML-commentaar

Elk van deze bestanden draagt commentaar dat de meetkunde uitlegt, en commentaar in een SVG reist mee naar de browser. Gemeten op de eerste versie: van de 10.160 bytes in de vijf bestanden was 5789 commentaar. Zevenenvijftig procent van wat we zouden hebben uitgeleverd was een uitleg van wat we uitleverden.

De uitleg staat nu in het component dat naar de afbeeldingen verwijst, waar hij minstens zo nuttig is en niemands browser bereikt. Dat is een algemeen punt over het verschil tussen commentaar in de bron en commentaar in een asset: het ene is gratis en het andere is vracht.

Het tweede punt is een regel en geen meting, en het is het soort regel dat je maar één keer nodig hebt. Een dubbel koppelteken beëindigt een XML-commentaar. Naar een CSS-custom-property verwijzen met zijn naam binnen een SVG-commentaar sluit dat commentaar dus vroegtijdig af, midden in een zin, en de rest van die zin wordt markup. Het bestand parseert dan niet meer, en een SVG die niet parseert levert geen foutmelding op. Hij levert een antwoord met status 200 op en een lege afbeelding.

De huidige vijf bevatten in geen enkel commentaar een dubbel koppelteken en alle vijf parseren ze als geldige XML. De faalvorm is echt; voor het specifieke voorval kan ik je geen meting overhandigen, want die toestand is nooit gecommit.

Alt-tekst is geen ontwerpbeslissing

Een illustratie die niets zegt wat de kop ernaast niet al zegt is decoratie, en het toegankelijkheidsantwoord voor decoratie is een leeg alt-attribuut, zodat een schermlezer niet "kluis met sleutel" voorleest naast een kop over inloggegevens die op je eigen host blijven. Die redenering klopt en we hebben hem lang gevolgd.

Het is ook niet het hele verhaal, want een crawler kan decoratie niet van inhoud onderscheiden. Een SEO-audit telt een lege alt als een ontbrekende alt, en een rapport vol ontbrekende alt-attributen is een rapport dat niemand leest.

Elke illustratie draagt daarom nu een korte beschrijving uit de vertaalcatalogus, één beschrijving per afbeelding en niet per plaatsing, want dezelfde tekening betekent op twee verschillende pagina's hetzelfde. De bewaking eist op elke illustratie een niet-lege alt, wat betekent dat er een uit de toegankelijkheidsboom verbergen geen keuze is die iemand stilletjes kan maken. Een nieuwe illustratie heeft een beschrijving in alle negen talen nodig voordat hij live kan.

Nul verschuiving, en het tegenbewijs

De breedte en hoogte op elke afbeelding zijn de afmetingen van de eigen view box van het bestand, en ze staan er om precies één reden: zodat de browser de ruimte reserveert voordat de bytes aankomen. De zichtbare breedte komt uit klassen en heeft niets met die getallen te maken.

Cumulatieve layoutverschuiving over vijfenveertig paginastanden mat 0,00000, en dat is een getal dat op zichzelf niets betekent. Elke meting die een perfecte nul rapporteert moet de vraag beantwoorden of ze wel keek.

Dezelfde run is daarom herhaald met de afmetingen eruit gehaald en een vertraging van 1500 milliseconden vóór de afbeeldingen geïnjecteerd. Dertien van de vijftien standen verschoven. De twee die dat niet deden staan in de laagste cel van een raster, waar de afbeelding de rijhoogte niet kan veranderen wat ze ook doet, dus hun nul is structureel en niet toevallig. Dat is stuk voor stuk nagekeken en niet weggewuifd, want twee onverklaarde nullen in een tegenbewijs zijn precies de plek waar een echt gat zich zou verstoppen.

Er is nog één mechanisch detail dat het vermelden waard is, omdat het makkelijk de andere kant op fout gaat: deze afbeeldingen gaan volledig langs de beeldoptimalisator van het framework heen. Dat is geen luiheid. De optimalisator weigert SVG tenzij een uitgesproken gevaarlijke vlag aanstaat, dus ze er wel doorheen sturen zou een kapotte afbeelding opleveren in plaats van een kleinere.

Een bevinding die niet bij de ronde hoorde

Bij het meten van breedtes bleek één hulpklasse op een niet-verwante pagina helemaal niets te doen. Ze zet een maximumbreedte die overschreven wordt door een klasse die later in het stijlblad gedeclareerd is, dus de waarde is inert sinds ze geschreven is.

Niemand had het gemerkt, want het element ziet er op zijn werkelijke breedte redelijk uit. Dat is de gewone manier waarop dode opmaak blijft leven: het is op het scherm niet fout, het is alleen niet het ding dat het werk doet, en de enige manier om het te vinden is een eigenschap meten die je toch al om een andere reden aan het meten was.

Wat we zouden opschrijven

1. 01Een huisstijl die je nooit geteld hebt bestaat misschien niet. Tien afbeeldingen, twee families, elk vijf, en elke indruk van een meerderheid was fout.
2. 02Een meting maakt een beslissing mogelijk; ze neemt hem niet. Geen van beide groepen was groter; de nieuwe afbeeldingen volgen de functie-illustraties vanwege het soort pagina waarop ze staan.
3. 03Een kleur die uit een pixel geprikt is, is een verzonnen kleur. Gebruik het dichtstbijzijnde token en accepteer dat het niet identiek is.
4. 04Nul is een sterk antwoord. Geen warme pixel in 1,79 miljoen beslecht een discussie over een oranje lint sneller dan smaak dat doet.
5. 05Beoordeel een verzameling als verzameling. Eigenschappen die alleen in vergelijking bestaan zijn op een losse pagina onzichtbaar.
6. 06Declareer een verbinder ná de dingen die hij verbindt, anders wordt hij bedekt, en gedeeltelijke doorzichtigheid laat de fout op een renderfout lijken.
7. 07Commentaar in een asset is vracht. Meer dan de helft van wat we bijna uitleverden was uitleg.
8. 08Ongeldige XML in een SVG is een lege afbeelding, geen fout. Er is geen melding om op te zoeken.
9. 09Een lege alt is juist voor een mens en ontbrekend voor een crawler. Kies de afweging bewust en dwing hem in een test af.
10. 10Een perfecte nul heeft een tegenbewijs nodig. Breek het ding met opzet en controleer dat het getal beweegt.

Voor de duidelijkheid over wat dit is: de vijf afbeeldingen staan live in negen talen met beschrijvingen, de tellingen komen uit een canvasrun op de echte bestanden, en alles is gemeten tegen een ontwikkelserver en niet tegen een productiebuild. Er is geen donker thema om tegen te controleren, en dat is geverifieerd en niet aangenomen: met donker geëmuleerd is de opname byte voor byte gelijk aan de lichte.

Uit het platformwerk aan Provibr. Een layoutdefect dat nul pixels uitloop opleverde staat in een balk smaller dan zijn venster, en wat negen talen met een verzameling vaste knoppen doen staat in zestienduizend sleutels, negen talen.