Prihlasovacia stránka JE demo

GeekBye v1.7.5 je týždňové vydanie s rozdvojenou osobnosťou: 37 commitov, z ktorých 28 je redizajn prihlasovacej stránky — a 25 z nich sú mikroúpravy style(login), všetky pristáli v jeden jediný deň. Je to zároveň vydanie, ktoré opravilo jeden z najpoučnejších race conditionov v kódovej základni. Oba príbehy stoja za rozprávanie a stretávajú sa v tej istej myšlienke: prihlasovacia stránka je prvá vec, ktorú neprihlásený používateľ vidí, takže by radšej mala byť produktom, nie jeho obrázkom.

Screenshot, asi na päť hodín

Redizajn začal konvenčne. Prestavať na dva stĺpce, prihlásenie doľava a produkt ukázať vpravo — ako obrázok. Neskoro dopoludňajšie commity robia presne to: o 11:57 pristáva v repe skutočný preview screenshot, PNG so 114 KB, a o šesť minút neskôr sa raz aktualizuje.

O 17:04 bol preč. Pivotný commit nahrádza statický obrázok 344 riadkami skutočných komponentov — panelom LoginDemo poskladaným z ôsmich malých kúskov, ktoré replikujú skutočné UI overlayu: nahrávacia pilulka v navbare s pulzujúcimi EQ stĺpcami a stop tlačidlom, panel chatu so záložkami Chat/Transcript, vykreslená odpoveď asistenta (vysvetľujúca Reactový useEffect, ako príhodne), rýchle akcie "Tell me more / Simplify / Show example" (povedz mi viac / zjednoduš / ukáž príklad), riadok živých promptov a Assist vstup s ⌘⏎.

Buďme presní pri slove „demo", pretože je ľahké presľubovať: tlačidlá majú skutočné hover stavy — žiary, shimmery, prechody — ale nič nie je zapojené na klik a vstup je len na čítanie. Nie je to sandbox. Je to však skutočný UI slovník produktu vykreslený naživo: ten istý asset loga, to isté gradientové orámovanie a backdrop-blur, ten istý import productName, ktorý používa white-label systém — takže demo sa samo rebranduje pre každý produkt postavený z tejto kódovej základne. Screenshot nič z toho nedokáže. Screenshot je zastaraný v deň, keď ho urobíš, rozmazaný na nesprávnom displeji a natrvalo obrandovaný tým produktom, ktorý si náhodou zachytil. Komponenty sú ostré pri každom DPI, vždy aktuálne a správne pre každú značku — pretože nie sú fotografiou dizajnového systému, ony sú dizajnový systém.

Zmazané PNG mimochodom stále sedí v repe na tagu vydania — osirotené, nič naň neodkazuje. Každá kódová základňa nosí zopár skamenelín prístupu, ktorý prehral.

Ako vyzerá 25 štýlových commitov za jeden deň

Commit log toho jediného dňa je skicár dizajnéra, zachovaný s nezvyčajnou poctivosťou. Pomer stĺpcov išiel 40/60, potom 45/55. Label "Works with" (funguje s) nad logami platforiem pribudol napoludnie, presunul sa a zmizol — žil asi pol dňa. Samotný rad log platforiem (Google Meet, Teams, Zoom, Slack, Webex), pridaný o 10:59 ráno, bol o 22:08 v ten večer celý zmazaný. A footer si prešiel ságou zarovnávania na štyri pokusy: jeden wrapper kontajner, potom odstránenie centrovacích tried, potom centrovanie flexboxom, potom už len prisunutie bližšie k spodku.

Bolo by ľahké čítať to ako churn. My to čítame ako skutočný tvar dizajnérskej práce: konverguješ vykresľovaním, pozeraním a upravovaním — a robiť to v 25 malých commitoch namiesto jedného squashnutého „redesign login page" znamená, že samotné hľadanie zostáva zaznamenané. Keď sa niekto spýta „neskúšali sme raz rad s logami?", odpoveď je v histórii, s časovými pečiatkami.

Používateľ, ktorý bol rýchlejší než OCR

Inžiniersky príbeh vydania sa odohral o päť dní skôr, v trojcommitovej reťazi opráv. Od v1.5.12 stlačenie Cmd+H zaradí screenshot do fronty s okamžitou spätnou väzbou: miniatúra sa vo fronte objaví hneď a extrakcia textu — lokálne OCR Apple Vision, zhruba ~1-2 sekundy — beží na pozadí. Udalosť fronty doslova odchádza s ocrText: '' a komentárom sľubujúcim, že sa doplní neskôr.

Je to dobrá optimalizácia — a vyrazila race condition. Rýchly používateľ stlačí Cmd+H a okamžite odošle svoju otázku. Textové pole screenshotu je stále prázdne. Request odíde bez obsahu obrazovky a model odpovie — pravdivo, k zúreniu — "I cannot see images" (nevidím obrázky). Naivná cesta nezlyhala chybou; zlyhala správnou odpoveďou na nesprávnu otázku, čo je najmätúcejší spôsob, akým softvér môže zlyhať.

Oprava blokuje cestu odoslania na asynchrónnej práci, ktorú optimalizácia odložila: ak má ktorýkoľvek screenshot vo fronte stále prázdny text OCR, request zaparkuje a UI ukáže indikátor "Reading screen..." (čítam obrazovku); useEffect vystrelí v okamihu, keď text pristane, a odošle request s plným extrahovaným obsahom. Dva reactové detaily z diffu stoja za ukradnutie: fronta screenshotov sa zrkadlí do refu synchronizovaného počas renderu, pretože reťaz closurov v event handleroch zachytávala zastaraný stav; a zaparkovaný request sa odosiela priamo, nie cez generický hook frontovaných requestov — z toho istého stale-closure dôvodu.

A priamo v commit message je zaznamenaná poctivá vráska: trasovacie logy pridané na ulovenie tohto race conditionu odhalili druhý bug na backende — skladanie promptu v jednej z ciest kódu úplne strácalo text screenshotu. Jeden symptóm, dva bugy, nájdené oprístrojovaním celej reťaze a sledovaním, kde text mizne. Reťaz skončila produktovým rozhodnutím, deväť minút po oprave race conditionu: Cmd+H zaraďuje screenshoty do fronty na dávkovú analýzu, zatiaľ čo Cmd+Enter vždy urobí čerstvý záber aktuálnej obrazovky — dva odlišné workflow namiesto jedného nejednoznačného. (Čo Assist pod Cmd+Enter naozaj robí, je téma na vlastný článok: okamžitá pomoc AI s tým, na čo sa práve pozeráš.)

Jedna malá kóda z toho istého týždňa pre čitateľov white-label kapitoly: User-Agent Product/version (platform) dostal opravu pre dev režim, pretože app.getVersion() v nezabalenom Electrone vracia verziu Electronu, nie produktu. Reťazce identity, ako vždy, presakujú v inštalatérstve.

Tri veci, ktoré nás toto vydanie naučilo

1. Vykresli produkt, nefotografuj ho. Demo prihlasovacej stránky postavené zo skutočných komponentov sa samo rebranduje, prežije každú hustotu displeja a nemôže zastarať. Screenshotový prístup bol vyskúšaný a zmazaný v rámci jedného pracovného dňa — lacný experiment, jasný verdikt.
2. Každá asynchrónna optimalizácia potrebuje bránu v mieste použitia. „Okamžitá spätná väzba s prázdnym textom OCR" bolo správne UX rozhodnutie, ale cesta odoslania sa musela naučiť čakať na to, čo optimalizácia odložila. Ak odkladáš prácu, nájdi každého konzumenta jej výsledku a nauč ho rozdielu medzi „prázdne" a „ešte nie hotové".
3. Oprístrojuj reťaz, nie podozrivého. Trasovacie logy sledovali text screenshotu od začiatku do konca — od handlera skratky cez IPC po API klienta — a práve preto jedno vyšetrovanie zavrelo dva bugy, jeden z nich na druhej strane siete.

Pre predchádzajúcu kapitolu príbehu v1 — porady, ktoré sa dajú znova nájsť (v1.7.3); a pre celý oblúk, anatómiu dodávania softvéru do dokonalosti.