Sisselogimisleht ONGI demo

GeekBye v1.7.5 on ühe nädala väljalase lõhestunud isiksusega: 37 commitit, millest 28 on sisselogimislehe ümberdisain — ja 25 neist on style(login) mikrotimmimised, kõik maandunud ühelsamal päeval. See on ka väljalase, mis parandas ühe õpetlikuma võidujooksu kogu koodibaasis. Mõlemat lugu tasub rääkida ja need kohtuvad samas ideed: sisselogimisleht on esimene asi, mida autentimata kasutaja näeb, nii et parem, kui see on toode, mitte pilt tootest.

Kuvatõmmis, umbes viieks tunniks

Ümberdisain algas tavapäraselt. Struktureeri ümber kahte veergu, pane sisselogimine vasakule ja näita toodet paremal — pildina. Hiliste hommikutundide commitid teevad täpselt seda: kell 11:57 maandub repos päris eelvaate-kuvatõmmis, 114 KB PNG, ja saab kuus minutit hiljem korra uuendatud.

Kell 17:04 oli see läinud. Pöördecommit asendab staatilise pildi 344 rea päris komponentidega — LoginDemo paneeliga, mis on kokku pandud kaheksast väikesest tükist, mis kordavad tegelikku overlay-UI-d: salvestuse navipill pulseerivate EQ-tulpade ja stoppnupuga, vestluspaneel Chat/Transcript vahelehtedega, renderdatud assistendivastus (mis seletab, kohaselt, Reacti useEffect-i), "Tell me more / Simplify / Show example" kiirtegevused, live-prompti rida ja ⌘⏎ Assist sisend.

Olgem sõnaga "demo" täpsed, sest siin on lihtne üle lubada: nuppudel on päris hover-olekud — kumad, virvendused, üleminekud —, aga miski pole klõpsuks ühendatud ja sisendiväli on kirjutuskaitstud. See pole liivakast. See on toote tegelik UI-sõnavara, elusalt renderdatuna: seesama logofail, seesama gradient-border ja backdrop-blur käsitlus, seesama productName import, mida white-label süsteem kasutab — nii et demo brändib end automaatselt ümber iga toote jaoks, mis sellest koodibaasist ehitatakse. Kuvatõmmis ei suuda sellest midagi. Kuvatõmmis on aegunud päeval, mil selle teed, udune valel ekraanil ja jäädavalt selle toote brändiga, mida sattusid parasjagu püüdma. Komponendid on teravad igal DPI-l, alati ajakohased ja õiged iga brändi jaoks — sest need pole disainisüsteemi pilt, need ongi disainisüsteem.

Kustutatud PNG, muuseas, on väljalasketag'i juures endiselt repos — orb, millele ei viita miski. Iga koodibaas kannab kaasas paari fossiili lähenemisest, mis kaotas.

Kuidas näevad välja 25 stiilicommitit ühe päevaga

Selle ühe päeva commitilogi on disaineri visandivihik, säilitatud ebatavalise aususega. Veergude suhe käis 40/60, siis 45/55. "Works with" (töötab koos) silt platvormilogode kohal lisati keskpäeval, paigutati ümber ja eemaldati — see elas umbes pool päeva. Platvormilogode rida ise (Google Meet, Teams, Zoom, Slack, Webex), lisatud hommikul kell 10:59, kustutati täielikult samal õhtul kell 22:08. Ja jaluse joondamine nõudis nelja lähenemise saagat: üks wrapper-konteiner, siis tsentreerimisklasside eemaldamine, siis flexbox-tsentreerimine, siis lihtsalt selle nihutamine allservale lähemale.

Seda oleks lihtne lugeda tühikäiguna. Meie loeme seda disainitöö tegeliku kujuna: koondud renderdades, vaadates ja kohendades — ja selle tegemine 25 väikese commitiga ühe kokkupressitud "redesign login page" asemel tähendab, et otsing ise on jäädvustatud. Kui keegi küsib "kas me kunagi ei proovinud logorida?", on vastus ajaloos, koos ajatemplitega.

Kasutaja, kes oli OCR-ist kiirem

Väljalaske arenduslugu juhtus viis päeva varem, kolme commiti parandusketis. Alates v1.5.12-st paneb Cmd+H vajutamine kuvatõmmise järjekorda hetkelise tagasisidega: pisipilt ilmub järjekorda kohe ja tekstituvastus — kohalik Apple Visioni OCR, umbes ~1-2 sekundit — jookseb taustal. Järjekorrasündmus tarnitakse sõna otseses mõttes koos ocrText: ''-ga ja kommentaariga, mis lubab, et see täitub hiljem.

See on hea optimeering ja see vermis võidujooksu. Kiire kasutaja vajutab Cmd+H ja saadab kohe oma küsimuse. Kuvatõmmise tekstiväli on ikka veel tühi. Päring läheb välja ilma ekraanisisuta ja mudel vastab — tõeselt, marruajavalt — "I cannot see images" (ma ei näe pilte). Naiivne tee ei kukkunud läbi veaga; see kukkus läbi õige vastusega valele küsimusele, mis on kõige segadusseajavam viis, kuidas tarkvara ebaõnnestuda saab.

Parandus blokeerib saatmistee asünkroonse töö peal, mille optimeering edasi lükkas: kui mõnel järjekorras oleval kuvatõmmisel on OCR-tekst endiselt tühi, jääb päring ootele ja UI näitab "Reading screen..." (loeb ekraani) indikaatorit; useEffect käivitub hetkel, mil tekst kohale jõuab, ja saadab päringu koos täieliku tuvastatud sisuga. Kaks React-spetsiifilist detaili diffis on varastamist väärt: kuvatõmmiste järjekord peegeldatakse ref'i, mida sünkroonitakse renderduse ajal, sest sündmusekäsitlejate closure-kett püüdis aegunud olekut; ja ootel päring saadetakse otse, mitte läbi üldise queued-request hoogi — samal stale-closure põhjusel.

Ja otse commitisõnumis on jäädvustatud aus konks: selle võidujooksu jahtimiseks lisatud jälituslogid paljastasid teise vea backendis — prompti kokkupanek viskas ühel kooditeel kuvatõmmise teksti täielikult minema. Üks sümptom, kaks viga, leitud kogu keti instrumenteerimise ja teksti kadumiskoha jälgimise teel. Kett lõppes tootmisotsusega üheksa minutit pärast võidujooksu parandust: Cmd+H paneb kuvatõmmised järjekorda pakkanalüüsiks, samas kui Cmd+Enter teeb alati värske tõmmise praegusest ekraanist — kaks selget töövoogu ühe mitmetimõistetava asemel. (Mida Cmd+Enteri Assist tegelikult teeb, on omaette postitus: kohene AI-abi selle kohta, mida parasjagu vaatad.)

Üks väike lisalugu samast nädalast white-label peatüki lugejatele: Product/version (platform) User-Agent sai dev-režiimi paranduse, sest app.getVersion() pakendamata Electronis tagastab Electroni versiooni, mitte toote oma. Identiteedistringid, nagu ikka, lekivad torustikus.

Kolm asja, mida see väljalase meile õpetas

1. Renderda toode, ära pildista seda. Päris komponentidest ehitatud sisselogimislehe demo brändib end automaatselt ümber, elab üle iga ekraanitiheduse ega saa ajast maha jääda. Kuvatõmmise lähenemist prooviti ja see kustutati ühe tööpäeva jooksul — odav eksperiment, selge otsus.
2. Iga asünkroonne optimeering vajab väravat kasutuskohas. "Hetkeline tagasiside tühja OCR-tekstiga" oli õige UX-otsus, aga saatmistee pidi õppima ootama seda, mille optimeering edasi lükkas. Kui lükkad töö edasi, leia üles iga selle tulemuse tarbija ja õpeta talle vahet "tühja" ja "pole veel valmis" vahel.
3. Instrumenteeri kett, mitte kahtlusalune. Jälituslogid järgisid kuvatõmmise teksti otsast lõpuni — kiirklahvikäsitlejast IPC-sse ja API-klienti — ja just seepärast sulges üks uurimine kaks viga, neist ühe teisel pool võrku.

Eelmise peatüki jaoks v1 loos — koosolekud, mille päriselt üles leiad (v1.7.3); ja kogu kaare jaoks tarkvara täiuslikkuseni tarnimise anatoomia.