Două familii de câte cinci

Cinci pagini de pe site-ul nostru nu aveau nicio ilustrație: cuprinsul documentației, cuprinsul tutorialelor, pagina de parteneri, cuprinsul blogului și pagina de contact. Toate celelalte aveau. Sarcina era să desenăm cinci imagini care să pară că sunt de-ale casei.

De-ale cui, mai exact, aceasta este întrebarea, și nu este una la care se poate răspunde privind. Zece imagini existente, văzute una câte una pe zece pagini diferite de-a lungul mai multor luni, produc o impresie sigură despre un stil al casei. Acea impresie nu valorează nimic, iar noi avem numărătoarea care o dovedește.

Stilul nu exista

Un script scurt a parcurs toate cele zece imagini pe o pânză și a numărat pixelii întunecați: luminanță la sau sub 110, alfa la sau peste 200, cuantificat pe șaisprezece trepte, ca netezirea marginilor să nu producă o mie de culori aproape identice.

Rezultatul au fost două grupuri de câte cinci, fără nicio suprapunere.

Cinci la cinci. Nu există majoritate. Dacă cineva ar fi apreciat cu ochiul, ar fi ales grupul la care se uitase mai de curând și ar fi produs o a șasea imagine care se potrivea cu jumătate din site.

Cele cinci noi urmează primul grup, iar motivul nu este numărătoarea. Imaginile de comparație sunt o subfamilie cu propria componentă, propriul raport de aspect și propriul loc în produs; sunt un alt fel de pagină care face o altă treabă. Ilustrațiile noi stau lângă primul grup, deci desenează ca primul grup. Măsurătoarea nu a luat hotărârea. A făcut hotărârea posibilă, înlocuind un sentiment despre un stil al casei cu două fapte despre două mulțimi.

O culoare care nu este în foaia de stil este o culoare inventată

Bleumarinul care domină primul grup nu apare nicăieri în foaia noastră de stil. Este o culoare care a sosit odată cu acele imagini și care nu are nume în sistemul de design.

Copierea lui în cinci fișiere noi ar fi fost exact lucrul pe care runda aceasta trebuia să îl evite: o valoare care există numai fiindcă cineva a luat un pixel ca mostră. Așa că imaginile noi folosesc token-ul a cărui valoare este cea mai apropiată de el și care stă în aceeași familie cu culoarea de marcă. Nu este identic. Este de apărat și se mișcă dacă se mișcă sistemul.

Prima ciornă avea și o panglică de citire portocalie pe imaginea documentației, folosind culoarea de accent, fiindcă o panglică este portocalie. O a doua numărătoare a lămurit și asta: dintre cele zece ilustrații existente, pe 1,79 milioane de pixeli opaci, numărul celor cu vreun pixel cald este zero. Nu puțini, zero. Un singur element portocaliu ar fi făcut din desenul nou singurul lucru cald de pe site, ceea ce este o hotărâre pe care cineva poate vrea să o ia dinadins într-o zi și nu este o hotărâre pe care să o ia o panglică de una singură.

Albul este locul unde aterizează ochiul

Ultima însușire împărtășită este una pe care nu o consemnase nimeni și pe care o respectă toate zece: fiecare imagine are exact un plan alb, iar acolo se duce ochiul. Fața unui seif, interiorul unui scut, plăcile din jurul unui nod central.

Patru dintre cele cinci desene noi au preluat asta firesc, fiindcă o foaie de hârtie, un articol, o scrisoare și un buton de redare sunt lucruri albe. Imaginea de parteneri nu: două nuanțe de albastru, alb nicăieri.

Pe pagina de parteneri arăta bine. Era evident greșită pe o planșă de contact, adică pe o singură pagină generată care pune toate cele cincisprezece imagini una lângă alta, pe culoarea de fundal adevărată. Un desen dintr-un rând de cincisprezece care nu are plan de focalizare se citește ca fiind mai plat decât restul, imediat, și nu se citește deloc atunci când te uiți la el singur. Hexagonul din stânga stă acum pe culoarea de suprafață.

Dacă faceți o mulțime, uitați-vă la mulțime. Paginile individuale sunt suprafața greșită de recenzie pentru o însușire care există numai prin comparație.

O linie desenată înaintea formelor este o linie pe care nu o vedeți

Prima versiune a imaginii de parteneri avea o linie de legătură între cele două hexagoane: o singură trăsătură orizontală, lată de 433 de pixeli, declarată înaintea celor două forme.

Ordinea pictorilor a făcut restul. Hexagoanele i-au acoperit mijlocul, lăsând două cioturi să iasă în lături, iar fiindcă hexagonul din dreapta avea o opacitate de umplere puțin sub unu, partea acoperită se vedea prin el ca o dungă-fantomă. Două defecte dintr-o singură greșeală de ordine, și amândouă seamănă cu o problemă de desenare și nu cu una de sursă.

Legătura este acum suprapunerea însăși, decupată la intersecția celor două forme, iar în fișier nu mai există transparență parțială nicăieri. Acesta este un desen mai bun și totodată unul care funcționează: aria comună a doi parteneri este ideea, iar o linie între ei era un fel mai slab de a o spune.

Două cratime încheie un comentariu XML

Fiecare dintre aceste fișiere poartă comentarii care explică geometria, iar comentariile dintr-un SVG călătoresc până la browser. Măsurat pe prima versiune: din 10.160 de octeți peste cele cinci fișiere, 5789 erau comentariu. Cincizeci și șapte la sută din ce am fi livrat era o explicație a ceea ce livram.

Explicația trăiește acum în componenta care face trimitere la imagini, unde este cel puțin la fel de folositoare și nu ajunge în browserul nimănui. Aceasta este o observație generală despre deosebirea dintre comentariile din sursă și comentariile dintr-un fișier livrat: unele sunt gratuite, celelalte sunt încărcătură utilă.

A doua observație este o regulă și nu o măsurătoare, și este genul de regulă de care aveți nevoie o singură dată. O cratimă dublă încheie un comentariu XML. Trimiterea la o proprietate CSS personalizată după numele ei dinăuntrul unui comentariu SVG încheie deci comentariul prea devreme, în mijlocul unei propoziții, iar restul acelei propoziții devine marcaj. Fișierul nu se mai analizează, iar un SVG care nu se analizează nu produce un mesaj de eroare. Produce un răspuns 200 și o imagine goală.

Cele cinci de acum nu conțin nicio cratimă dublă în vreun comentariu, iar toate cinci se analizează ca XML valid. Modul de eșec este real; pentru incidentul anume nu vă pot da o măsurătoare, fiindcă acea stare nu a ajuns niciodată într-un commit.

Textul alternativ nu este o hotărâre de design

O ilustrație care nu spune nimic din ce nu spune deja titlul de alături este decor, iar răspunsul de accesibilitate pentru decor este un atribut alternativ gol, ca un cititor de ecran să nu citească „seif cu cheie” lângă un titlu despre datele de autentificare care rămân pe propria gazdă. Acel raționament este corect și l-am urmat multă vreme.

El nu este însă tabloul întreg, fiindcă un crawler nu poate deosebi decorul de conținut. Un audit SEO numără un atribut alternativ gol drept unul lipsă, iar un raport plin de atribute alternative lipsă este un raport pe care nu îl citește nimeni.

Așa că fiecare ilustrație poartă acum o descriere scurtă din catalogul de traduceri, câte o descriere pe imagine și nu pe amplasare, fiindcă același desen înseamnă același lucru pe două pagini diferite. Garda cere un atribut alternativ nevid pe fiecare ilustrație, ceea ce înseamnă că ascunderea uneia din arborele de accesibilitate nu este o opțiune pe care cineva o poate lua în tăcere. O ilustrație nouă are nevoie de o descriere în toate cele nouă limbi înainte să poată intra în producție.

Deplasare zero, și contraproba

Lățimea și înălțimea de pe fiecare imagine sunt dimensiunile propriei ei casete de vizualizare și sunt acolo dintr-un singur motiv: ca browserul să rezerve spațiul înainte să sosească octeții. Lățimea vizibilă vine din clase și nu are nicio legătură cu acele numere.

Deplasarea cumulativă de așezare în pagină pe patruzeci și cinci de stări de pagină a măsurat 0,00000, care este un număr ce nu înseamnă nimic de unul singur. Orice măsurătoare care raportează un zero perfect trebuie să răspundă la întrebarea dacă se uita.

Așa că aceeași rulare a fost repetată cu dimensiunile scoase și cu o întârziere de 1500 de milisecunde băgată înaintea imaginilor. Treisprezece din cincisprezece stări s-au deplasat. Cele două care nu s-au deplasat stau în cea mai scurtă celulă a unei grile, unde imaginea nu poate schimba înălțimea rândului orice ar face, deci zeroul lor este structural și nu întâmplător. Asta a fost verificat pe fiecare în parte și nu dat la o parte cu mâna, fiindcă două zerouri neexplicate într-o contraprobă sunt exact locul unde s-ar ascunde o gaură adevărată.

Mai există un amănunt mecanic care merită spus, fiindcă este ușor de greșit în cealaltă direcție: aceste imagini ocolesc cu totul optimizatorul de imagini al cadrului de lucru. Aceasta nu este lene. Optimizatorul refuză SVG-ul dacă nu este activat un semnalizator anume periculos, deci trecerea lor prin el ar produce o imagine stricată și nu una mai mică.

O constatare care nu făcea parte din rundă

În timp ce măsuram lățimi, o clasă utilitară de pe o pagină fără legătură s-a dovedit că nu face absolut nimic. Ea pune o lățime maximă care este suprascrisă de o clasă declarată mai târziu în foaia de stil, deci valoarea a fost inertă de când a fost scrisă.

Nu observase nimeni, fiindcă elementul arată rezonabil la lățimea lui adevărată. Acesta este felul obișnuit în care supraviețuiește un stil mort: nu este greșit pe ecran, pur și simplu nu este el cel care face treaba, iar singurul fel de a-l găsi este să măsori o însușire pe care oricum o măsurai din alt motiv.

Ce am consemna

1. 01Un stil al casei pe care nu l-ați numărat niciodată s-ar putea să nu existe. Zece imagini, două familii, câte cinci, iar orice impresie de majoritate era greșită.
2. 02O măsurătoare face o hotărâre posibilă; nu o ia ea. Niciunul dintre cele două grupuri nu era mai mare; imaginile noi urmează ilustrațiile de funcții din pricina felului de pagină pe care se află.
3. 03O culoare luată ca mostră dintr-un pixel este o culoare inventată. Folosiți token-ul cel mai apropiat și acceptați că nu este identic.
4. 04Zero este un răspuns puternic. Niciun pixel cald în 1,79 milioane lămurește o ceartă despre o panglică portocalie mai repede decât o face gustul.
5. 05Recenzați o mulțime ca mulțime. Însușirile care există numai prin comparație sunt invizibile pe o pagină individuală.
6. 06Declarați un conector după lucrurile pe care le leagă, altfel va fi acoperit, iar transparența parțială va face greșeala să pară o defecțiune de desenare.
7. 07Comentariile dintr-un fișier livrat sunt încărcătură utilă. Mai mult de jumătate din ce era să livrăm era explicație.
8. 08Un XML nevalid într-un SVG este o imagine goală, nu o eroare. Nu există niciun mesaj după care să căutați.
9. 09Un atribut alternativ gol este corect pentru un om și lipsă pentru un crawler. Alegeți compromisul dinadins și impuneți-l într-un test.
10. 10Un zero perfect are nevoie de o contraprobă. Stricați lucrul dinadins și verificați că numărul se mișcă.

Ca să fie limpede ce este aceasta: cele cinci imagini sunt în producție în nouă limbi, cu descrieri, numărătorile vin dintr-o rulare pe pânză peste fișierele adevărate, iar totul a fost măsurat față de un server de dezvoltare și nu față de o construcție de producție. Nu există o temă întunecată de verificat, iar asta a fost dovedit și nu presupus: cu întunericul emulat, captura este identică octet cu octet cu cea luminoasă.

Din munca de platformă la Provibr. Un defect de așezare în pagină care a produs zero pixeli de revărsare se află în o bară mai îngustă decât fereastra, iar ce fac nouă limbi unui set de comenzi fixe se află în șaisprezece mii de chei, nouă limbi.