Innloggingssiden ER demoen

GeekBye v1.7.5 er en én-ukes release med splittet personlighet: 37 commits, hvorav 28 er et innloggingsside-redesign — og 25 av dem er style(login)-mikrojusteringer, alle landet på én enkelt dag. Det er også releasen som fikset et av de mest lærerike racene i kodebasen. Begge historiene er verdt å fortelle, og de møtes i samme idé: innloggingssiden er det første en uautentisert bruker ser, så den bør helst være produktet, ikke et bilde av det.

Et skjermbilde, i omtrent fem timer

Redesignet begynte konvensjonelt. Omstrukturer til to kolonner, legg innloggingen til venstre, og vis produktet til høyre — som et bilde. Formiddagens commits gjør akkurat det: klokken 11:57 lander et ekte forhåndsvisningsskjermbilde i repoet, en PNG på 114 KB, og blir oppdatert én gang seks minutter senere.

Klokken 17:04 var det borte. Pivot-committen erstatter det statiske bildet med 344 linjer ekte komponenter — et LoginDemo-panel satt sammen av åtte små deler som replikerer det faktiske overlay-UI-et: opptakets nav-pille med sine pulserende EQ-søyler og stoppknapp, chatpanelet med Chat/Transcript-faner, et rendret assistentsvar (som, passende nok, forklarer Reacts useEffect), hurtighandlingene "Tell me more / Simplify / Show example", live-prompt-raden og ⌘⏎ Assist-inputen.

La oss være presise med ordet "demo", for det er lett å love for mye: knappene har ekte hover-states — glød, skimmer, transitions — men ingenting er koblet til klikk, og inputfeltet er skrivebeskyttet. Det er ingen sandkasse. Det det er, er produktets faktiske UI-vokabular rendret live: samme logofil, samme gradient-border- og backdrop-blur-behandling, samme productName-import som white-label-systemet bruker — så demoen rebrander seg automatisk for hvert produkt som bygges fra denne kodebasen. Et skjermbilde klarer ingenting av det. Et skjermbilde er utdatert den dagen du tar det, uskarpt på feil skjerm og permanent brandet som det produktet du tilfeldigvis fanget. Komponenter er skarpe ved enhver DPI, alltid oppdaterte og korrekte for hvert brand — for de er ikke et bilde av designsystemet, de er designsystemet.

Den slettede PNG-en ligger forresten fortsatt i repoet ved release-taggen — foreldreløs, referert av ingenting. Enhver kodebase bærer på noen fossiler av tilnærmingen som tapte.

Hvordan 25 style-commits på én dag ser ut

Commit-loggen fra den ene dagen er en designers skissebok, bevart med uvanlig ærlighet. Kolonneforholdet gikk 40/60, så 45/55. En "Works with"-label (fungerer med) over plattformlogoene ble lagt til midt på dagen, flyttet og fjernet — den levde omtrent en halv dag. Selve plattformlogo-raden (Google Meet, Teams, Zoom, Slack, Webex), lagt til 10:59 om formiddagen, ble slettet fullstendig 22:08 samme kveld. Og footeren krevde en saga i fire tilnærminger for å komme på plass: én wrapper-container, så fjerning av sentreringsklassene, så flexbox-sentrering, så bare å dytte den nærmere bunnen.

Det ville vært lett å lese det som tomgang. Vi leser det som designarbeidets faktiske form: du konvergerer ved å rendre, se og justere — og å gjøre det i 25 små commits i stedet for én squashet "redesign login page" betyr at selve søket er dokumentert. Når noen spør "prøvde vi ikke en logorad en gang?", ligger svaret i historikken, med tidsstempler.

Brukeren som var raskere enn OCR-en

Releasens engineering-historie skjedde fem dager tidligere, i en fiks-kjede på tre commits. Siden v1.5.12 køer et trykk på Cmd+H et skjermbilde med umiddelbar tilbakemelding: thumbnailen dukker opp i køen med en gang, og tekstuttrekkingen — lokal Apple Vision-OCR, omtrent ~1-2 sekunder — kjører i bakgrunnen. Kø-eventet shippes bokstavelig talt med ocrText: '' og en kommentar som lover at den fylles inn senere.

Det er en god optimalisering, og den myntet et race. En rask bruker trykker Cmd+H og sender spørsmålet sitt umiddelbart. Skjermbildets tekstfelt er fortsatt tomt. Requesten går ut uten skjerminnhold, og modellen svarer — sannferdig, rasende irriterende — "I cannot see images" (jeg kan ikke se bilder). Den naive stien feilet ikke med en feil; den feilet med et korrekt svar på feil spørsmål, som er den mest forvirrende måten programvare kan feile på.

Fiksen sperrer send-stien på async-arbeidet optimaliseringen utsatte: hvis et skjermbilde i køen fortsatt har tom OCR-tekst, parkeres requesten, og UI-et viser en "Reading screen..."-indikator (leser skjermen); en useEffect fyrer i det øyeblikket teksten lander, og sender requesten med det fulle uttrukne innholdet. To React-spesifikke detaljer i diffen er verdt å stjele: skjermbildekøen speiles inn i en ref som synkes under render, fordi event-handlernes closure-kjede fanget utdatert state; og den parkerte requesten sendes direkte i stedet for gjennom den generiske queued-request-hooken, av samme stale-closure-grunn.

Og det er en ærlig krøll dokumentert rett i commit-meldingen: tracing-loggene som ble lagt til for å jakte på dette racet, avslørte en andre bug på backend — prompt-sammenstillingen droppet skjermbildeteksten fullstendig i én kodesti. Ett symptom, to bugs, funnet ved å instrumentere hele kjeden og se hvor teksten forsvant. Kjeden endte med en produktbeslutning, ni minutter etter race-fiksen: Cmd+H køer skjermbilder for batch-analyse, mens Cmd+Enter alltid tar et ferskt opptak av den gjeldende skjermen — to distinkte arbeidsflyter i stedet for én tvetydig. (Hva Cmd+Enters Assist faktisk gjør, er sitt eget innlegg: umiddelbar AI-hjelp til hva enn du ser på.)

En liten koda fra samme uke, for lesere av white-label-kapittelet: Product/version (platform)-User-Agenten fikk en dev-modus-fiks, fordi app.getVersion() i upakket Electron returnerer Electrons versjon, ikke produktets. Identitetsstrenger lekker, som alltid, i rørleggingen.

Tre ting denne releasen lærte oss

1. Render produktet, ikke fotografer det. En innloggingsside-demo bygget av ekte komponenter auto-rebrander seg, overlever enhver skjermtetthet og kan ikke drive ut av dato. Skjermbilde-tilnærmingen ble prøvd og slettet innenfor én arbeidsdag — billig eksperiment, klar dom.
2. Enhver async-optimalisering trenger en sperre ved bruksstedet. "Umiddelbar tilbakemelding med tom OCR-tekst" var riktig UX-valg, men send-stien måtte lære å vente på det optimaliseringen utsatte. Hvis du utsetter arbeid, finn hver konsument av resultatet og lær den forskjellen mellom "tom" og "ikke klar ennå".
3. Instrumenter kjeden, ikke den mistenkte. Tracing-loggene fulgte skjermbildeteksten fra ende til ende — snarveishandler til IPC til API-klient — og det er derfor én etterforskning lukket to bugs, hvorav den ene lå på den andre siden av nettverket.

For det forrige kapittelet i v1-historien, møter du faktisk finner igjen (v1.7.3); og for hele buen, anatomien i å shippe programvare til perfeksjon.