Egy CSS-változó, öt átnézési kör és egy Swift eszközlánc, ami hazudott

Az „tedd áttetszővé az overlay-t" az a fajta feladat, ami egy csúszkának és egy CSS opacity tulajdonságnak hangzik. A GeekBye v2.0.7 pontosan ezt a felhasználó által látott eredményt szállította — egyetlen állítható „világos mód", amely engedi, hogy az asszisztens paneljein keresztül lásd, ami mögöttük van. De ennek a kiadásnak nem a funkció az érdekes része. Hanem az az öt átnézési kör, ami kellett, hogy jól sikerüljön, és egy harci történet egy fordított binárisról, amely azért változtatott méretet, mert a saját dokumentációnk hazudott egy átnézőnek.

A helyes módja egy egész UI áttetszővé tételének

Ennek a naiv változata az, hogy szórsz egy átlátszósági értéket minden panelkomponensre, és késznek nyilvánítod. Ez karbantartási csapda: egy tucat beégetett érték, amelyek szétcsúsznak abban a pillanatban, amikor bárki hozzányúl az egyikhez.

Ehelyett a v2.0.7 egyetlen megosztott CSS-segédosztályt és felületenkénti tokent használ. Van egyetlen overlay-surface osztály, amely egy panel hátterét két egyedi tulajdonságból számítja ki: egy alap átlátszóságból, amelyet minden felület saját magának deklarál (a vezérlősáv, a chat, az átirat-buborékok, a kódblokkok és így tovább, mindegyik a sajátját választja), és egy globális alfa-szorzóból, amely az overlay gyökerén ül, és a felhasználó csúszkabeállítását képviseli. Minden felület ugyanazt a szorzót olvassa; mindegyik megtartja a saját jellegét. Kritikus, hogy csak a panel háttere skálázódik — a szöveg, az ikonok és a backdrop-blur teljesen renderelve maradnak, így az „áttetsző" soha nem jelent „olvashatatlant".

Ebben a tervezésben két döntést érdemes kiemelni, mert ez a különbség egy segítő funkció és egy támogatási jegyeket generáló között:

• Az alapértelmezés teljesen átlátszatlan. Az átlátszósági beállítás 100%-on érkezik — egy no-op. Senki overlay-e nem lett hirtelen átlátszó frissítéskor; az áttetszőség ott van, amikor nyúlsz érte, és addig láthatatlan.
• A beállítás védekezően validált. Egyetlen igazságforrás van a minimumra, maximumra, alapértelmezésre és lépésközre, plusz egy normalizáló, amely őrzi az üres/hiányzó esetet. Ez azért számít egy JavaScript-csapda miatt: a Number(null) az 0, így egy hiányzó, naivan konvertált beállítás az overlay-t a legátlátszóbb állapotába rögzítené az alapértelmezés helyett. A normalizáló ezt elkapja, mielőtt megtörténhetne.

Húzd a csúszkát, és az egész overlay élőben újraszíneződik, felvétel közben, mert minden felület ugyanarra a beállításra van feliratkozva. Nincs újraindítás, nincs újratöltés.

Amit az átnézés elkapott (és amit egy egymonitoros teszt sosem tett volna)

Itt szűnt meg az „egyetlen CSS-változó" egyszerűnek lenni. Három hiba bukkant fel az átnézésben, és kettő közülük ugyanaz a lecke más-más kalapban.

Egy panel, amely nem akart elhalványulni. A billentyűparancs-overlay makacsul tömör maradt, miközben minden más áttetszővé vált. Az ok: az overlay gyökeret hordozó DOM-részfán kívül renderelődik, így soha nem örökölte az overlay gyökeréről lefelé kaszkádolódó értéket. A CSS egyedi tulajdonságok a DOM-fán át öröklődnek — és ha egy csomópont valójában nem leszármazottja annak, ahol a változót beállítod, csendben semmit sem kap. A javítás az volt, hogy a változót helyileg, azon a panelen is beállítottuk.

Egy hover-árnyalat, amely eltűnt. Az Fn/Assist gombok elvesztették a ciánkék hover-ragyogásukat. Az áttetszőség-segédosztály !important-tal állította be a hátteret (le kell győznie a felület alapértelmezéseit), és ez legázolta a hover: hátteres árnyalatot ugyanazon az elemen. Specifikusságütközés. A javítás az volt, hogy a hover-árnyalatot ugyanolyan nyomatékossá tettük, hogy hovernél visszanyerhesse a győzelmet.

Mindkettő ugyanaz az alapigazság: egy CSS-változó kaszkádja valódi helyességhatár, nem stílusrészlet. Az öröklődés és a specifikusság dönti el, hogy az értéked egyáltalán eléri-e az elemet, és egyik sem jelenik meg egy képernyőképen, amíg el nem romlik.

Azonos átlátszóság, eltérő megjelenés. A legfinomabb: a felvételi sáv és a tétlen sáv pontosan azonos alap-átlátszóságra volt állítva, mégis láthatóan másképp néztek ki. Miért? A felvételi pirula erősebb backdrop-blurt használt, és egy erős blur sötét háttéren sötétebb eredmény felé átlagol — így az azonos alfa egyenlőtlen megjelenést produkált. Ott is volt egy halvány kerete, ahol a tétlen sávnak fényes gradiensgyűrű-éle. A javítás egyeztette a blur-szintet és a gyűrűt. A lecke megragadt: az azonos alfa nem azonos megjelenés, ha a blur belép a képbe. Az áttetszőség kölcsönhatásban lévő effektek rendszere, nem egyetlen szám.

A bináris, amely azért változtatott méretet, mert a dokumentáció hazudott

Most a harci történet, és ez a kedvenc fajtám — az, ahol az eszközök és a dokumentáció nem ért egyet, és egy gondos átnéző kerül a kereszttűzbe.

A GeekBye szállít néhány előre fordított Swift binárist (natív segédeket olyan dolgokhoz, mint a megbeszélés-észlelés). Mivel egy fordított bináris a repóba van commitolva, minden fejlesztőnek pontosan ugyanazzal a Swift-verzióval kell fordítania — a különböző eszközláncok különböző bájtokat állítanak elő azonos forrásból, és ez fantom git-konfliktust jelentene minden alkalommal, amikor valaki újrafordít. Ezért van egy szkript, amely egy konkrét verziót kényszerít ki: Swift 6.3.x, buildeléskor ellenőrizve.

E kiadás átnézése során egy átnéző jelezte, hogy egy binárist újra kellene fordítani, hogy illeszkedjen „a repó által előírt eszközlánchoz". A fejlesztő pontosan ezt tette — és a bináris mérete 89,184 bájtról 88,512-re változott. A commit-üzenet még azt is állította, hogy „bájtstabil kimenetet állít vissza" a Swift 6.2.1-gyel, „a repó által előírt eszközlánccal" való újrafordítással.

Csakhogy a 6.2.1 volt a rossz verzió. A build kikényszerítő szkript 6.3.x-et követelt meg. A gond az volt, hogy a prózai dokumentáció — a README és a közreműködői útmutató — még pár helyen 6.2.1-et mondott. Így egy lelkiismeretes átnéző és egy lelkiismeretes fejlesztő, mindketten helyesen próbálva cselekedni, a dokumentációt követték egyenesen abba, hogy pontosan azt a műterméket commitolják, amelynek elutasítására a kikényszerítő szkript létezik. Egy 6.2.1 bináris egy 6.3.x repóban pontosan az az elcsúszás, amely minden más fejlesztő tiszta újrafordítását eltörné.

A következő commit megjavította — és a javítás a lényeg. Nem csupán visszafordította a binárist a 6.3.x formájára (méret visszaállítva 89,184-re, pontosan oda, ahol elkezdte). Kijavította a dokumentációban lévő elavult „6.2.1" hivatkozásokat is, hogy a csapdát ne lehessen újra felállítani. A bináris 672 bájtot ingadozott oda-vissza két commit alatt, és a valódi hiba soha nem a bináris volt. Hanem az, hogy két igazságforrás — a kikényszerítő szkript és az írott dokumentáció — nem értett egyet, és egy ember a rosszban bízott.

Három dolog, amit ez a kiadás megtanított

1. Egy CSS-változó kaszkádja helyességhatár. A három átnézési hibából kettő egy változóra futott ki, amely nem öröklődött, és egy !important-ra, amely legázolt egy hover-állapotot. Ha egy értéknek öröklődéssel kell elérnie egy elemet vagy specifikussággal kell győznie, az az útvonal logika — ellenőrizd logikaként, ne stílusként.
2. Azonos paraméterek egyenlőtlen eredményeket adhatnak. A felvételi sáv és a tétlen sáv megosztott egy átlátszóságot, mégis másképp néztek ki, mert egy eltérő blur megváltoztatta a kimenetet. Amikor egy vizuális rendszert egyetlen számra egységesítesz, ellenőrizd, hogy a többi változó az egyes felületek körül nem változtatja-e csendben azt, amit az a szám jelent.
3. Amikor a dokumentáció és a kikényszerítés nem ért egyet, javítsd az egyet nem értést — ne csak a tünetet. A hiba nem egy rossz bináris volt; egy dokumentáció, amely a rossz eszközláncot nevezte meg, és egy kikényszerítő szkript, amely mást mondott. A bináris újrafordítása a tünetet kezeli. Minden igazságforrás egyetértésre bírása a valódi javítás, mert a következő átnéző is a dokumentációban fog bízni.

A GeekBye v2.0.7 leszállította az egységes áttetszőséget, minden peremesettel átnézve és az eszközlánc-dokumentációval rendbe téve. Ez az utolsó a „csendes mesterség" kiadások közül a rá következő megbízhatósági sprint előtt. Az alatta lévő alaphoz lásd mit igényel valójában egy 2-es verzió (v2.0.0); a testvér-csiszolókiadáshoz nyugodt szoftver: a villódzásjavítás és a válaszmód-chip (v2.0.3 + v2.0.5); és ahhoz, hogyan marad rejtve az overlay egy híváson, hogyan maradj láthatatlan képernyőmegosztás közben.