Prisijungimo puslapis IR YRA demo

GeekBye v1.7.5 — vienos savaitės leidimas su suskilusia asmenybe: 37 commitai, iš kurių 28 — prisijungimo puslapio perdizainavimas, o 25 iš jų — style(login) mikropataisymai, visi nusileidę per vieną dieną. Tai kartu leidimas, pataisęs vienas pamokančiausių lenktynių visoje kodo bazėje. Abi istorijas verta papasakoti, ir jos susitinka toje pačioje idėjoje: prisijungimo puslapis yra pirmas dalykas, kurį mato neprisijungęs naudotojas, tad geriau jau jis būtų produktas, o ne jo paveikslėlis.

Ekrano nuotrauka — maždaug penkioms valandoms

Perdizainavimas prasidėjo įprastai. Perstatyti į dvi skiltis, prisijungimą — kairėje, o produktą parodyti dešinėje — kaip paveikslėlį. Vėlyvo ryto commitai daro būtent tai: 11:57 repozitorijoje nusileidžia tikra peržiūros ekrano nuotrauka, 114 KB PNG, ir po šešių minučių ji kartą atnaujinama.

17:04 jos nebebuvo. Posūkio commit pakeičia statinį paveikslėlį 344 eilutėmis tikrų komponentų — LoginDemo skydeliu, surinktu iš aštuonių mažų gabalėlių, atkartojančių tikrą perdangos UI: įrašymo piliulė naršymo juostoje su pulsuojančiais EQ stulpeliais ir sustabdymo mygtuku, pokalbio skydelis su Chat/Transcript skirtukais, atvaizduotas asistento atsakymas (aiškinantis React useEffect — kaip tinkama), greitieji veiksmai "Tell me more / Simplify / Show example" (papasakok daugiau / supaprastink / parodyk pavyzdį), gyvų raginimų eilutė ir Assist įvestis su ⌘⏎.

Būkime tikslūs dėl žodžio „demo", nes čia lengva pažadėti per daug: mygtukai turi tikras hover būsenas — švytėjimus, mirgesius, perėjimus — bet niekas neprijungta prie paspaudimo, o įvesties laukas tik skaitomas. Tai ne smėlio dėžė. Tai — tikras produkto UI žodynas, atvaizduotas gyvai: tas pats logotipo resursas, tas pats gradientinis rėmelis ir backdrop-blur, tas pats productName importas, kurį naudoja white-label sistema — todėl demo automatiškai persibrenduoja kiekvienam produktui, statomam iš šios kodo bazės. Ekrano nuotrauka nieko iš to nesugeba. Ekrano nuotrauka pasensta tą dieną, kai ją padarai, susilieja netinkamame ekrane ir amžiams lieka paženklinta tuo produktu, kurį atsitiktinai užfiksavai. Komponentai ryškūs bet kokiame DPI, visada aktualūs ir teisingi kiekvienam prekės ženklui — nes jie ne dizaino sistemos nuotrauka, jie ir yra dizaino sistema.

Ištrintas PNG, beje, vis dar guli repozitorijoje ties leidimo žyma — našlaitis, į kurį niekas nesiremia. Kiekviena kodo bazė nešiojasi kelias pralaimėjusio požiūrio fosilijas.

Kaip atrodo 25 stiliaus commitai per vieną dieną

Tos vienintelės dienos commit logas — dizainerio eskizų knygelė, išsaugota su neįprastu sąžiningumu. Skilčių santykis ėjo 40/60, paskui 45/55. Etiketė "Works with" (veikia su) virš platformų logotipų buvo pridėta vidurdienį, perkelta ir pašalinta — ji gyveno apie pusę dienos. Pati platformų logotipų eilutė (Google Meet, Teams, Zoom, Slack, Webex), pridėta 10:59 ryte, tą naktį 22:08 buvo ištrinta visa. O poraštė perėjo keturių bandymų lygiavimo sagą: vienas apgaubiantis konteineris, paskui centravimo klasių pašalinimas, paskui centravimas flexbox, paskui tiesiog pastūmimas arčiau apačios.

Būtų lengva tai perskaityti kaip bergždžią sukimąsi. Mes tai skaitome kaip tikrą dizaino darbo formą: prie sprendimo artėji atvaizduodamas, žiūrėdamas ir taisydamas — o darant tai 25 mažais commitais vietoj vieno suspausto „redesign login page" pati paieška lieka užfiksuota. Kai kas nors paklaus „ar mes kartą nebandėme logotipų eilutės?", atsakymas yra istorijoje, su laiko žymomis.

Naudotojas, kuris buvo greitesnis už OCR

Šio leidimo inžinerinė istorija įvyko penkiomis dienomis anksčiau, trijų commitų pataisų grandinėje. Nuo v1.5.12 paspaudus Cmd+H ekrano nuotrauka dedama į eilę su akimirksniu grįžtamuoju ryšiu: miniatiūra eilėje pasirodo iš karto, o teksto ištraukimas — lokalus Apple Vision OCR, maždaug ~1-2 sekundės — sukasi fone. Eilės įvykis tiesiogine prasme išeina su ocrText: '' ir komentaru, žadančiu, kad tekstas užsipildys vėliau.

Tai gera optimizacija — ir ji nukalė lenktynes. Greitas naudotojas spaudžia Cmd+H ir iškart išsiunčia savo klausimą. Ekrano nuotraukos teksto laukas vis dar tuščias. Užklausa iškeliauja be ekrano turinio, ir modelis atsako — teisingai, iki pasiutimo — "I cannot see images" (nematau vaizdų). Naivusis kelias nesulūžo su klaida; jis sulūžo teisingu atsakymu į neteisingą klausimą — labiausiai klaidinantis būdas, kuriuo programinė įranga gali sugesti.

Pataisa blokuoja siuntimo kelią ties ta asinchronine užduotimi, kurią optimizacija atidėjo: jei bet kuri eilėje esanti ekrano nuotrauka vis dar turi tuščią OCR tekstą, užklausa pastatoma laukti, o UI rodo indikatorių "Reading screen..." (skaitau ekraną); useEffect suveikia tą akimirką, kai tekstas nusileidžia, ir išsiunčia užklausą su visu ištrauktu turiniu. Dvi React specifines detales iš diff verta pasivogti: ekrano nuotraukų eilė atspindima į ref, sinchronizuojamą atvaizdavimo metu, nes įvykių tvarkyklių closure grandinė gaudydavo pasenusią būseną; o laukusi užklausa siunčiama tiesiogiai, o ne per bendrinį eilės užklausų hook — dėl tos pačios stale closure priežasties.

Ir tiesiai commit žinutėje užfiksuota sąžininga raukšlė: trasavimo logai, pridėti šioms lenktynėms sumedžioti, atskleidė antrą klaidą backend pusėje — rašto surinkimas viename kodo kelyje visiškai pamesdavo ekrano nuotraukos tekstą. Vienas simptomas, dvi klaidos, rastos instrumentuojant visą grandinę ir stebint, kur tekstas dingsta. Grandinė baigėsi produkto sprendimu, devynios minutės po lenktynių pataisos: Cmd+H deda ekrano nuotraukas į eilę paketinei analizei, o Cmd+Enter visada padaro šviežią dabartinio ekrano kadrą — du atskiri darbo srautai vietoj vieno dviprasmiško. (Ką iš tikrųjų daro Assist per Cmd+Enter — atskiro įrašo tema: akimirksninė AI pagalba tam, į ką žiūri.)

Maža koda iš tos pačios savaitės white-label skyriaus skaitytojams: User-Agent Product/version (platform) gavo pataisą dev režimui, nes app.getVersion() nesupakuotame Electron grąžina Electron versiją, o ne produkto. Tapatybės eilutės, kaip visada, prateka vamzdyne.

Trys dalykai, kurių mus išmokė šis leidimas

1. Atvaizduok produktą, o ne fotografuok jį. Prisijungimo puslapio demo, pastatytas iš tikrų komponentų, pats persibrenduoja, išgyvena bet kokį ekrano tankį ir negali pasenti. Ekrano nuotraukos požiūris buvo išbandytas ir ištrintas per vieną darbo dieną — pigus eksperimentas, aiškus verdiktas.
2. Kiekvienai asinchroninei optimizacijai reikia užkardo naudojimo vietoje. „Akimirksninis grįžtamasis ryšys su tuščiu OCR tekstu" buvo teisingas UX sprendimas, bet siuntimo kelias turėjo išmokti laukti to, ką optimizacija atidėjo. Jei atidedi darbą — surask kiekvieną jo rezultato vartotoją ir išmokyk jį skirtumo tarp „tuščia" ir „dar neparuošta".
3. Instrumentuok grandinę, o ne įtariamąjį. Trasavimo logai sekė ekrano nuotraukos tekstą nuo pradžios iki galo — nuo sparčiojo klavišo tvarkyklės per IPC iki API kliento — ir būtent todėl vienas tyrimas uždarė dvi klaidas, vieną iš jų — kitoje tinklo pusėje.

Ankstesniam v1 istorijos skyriui — susitikimai, kuriuos tikrai galima vėl rasti (v1.7.3); o visai istorijos linijai — programinės įrangos tobulybės pristatymo anatomija.