Kirjautumissivu ON se demo

GeekBye v1.7.5 on yhden viikon julkaisu, jolla on jakautunut persoonallisuus: 37 commitia, joista 28 on kirjautumissivun uudistus — ja 25 niistä on style(login)-mikrosäätöjä, kaikki laskeutuneet yhtenä ainoana päivänä. Se on myös julkaisu, joka korjasi yhden koodipohjan opettavaisimmista kilpailutilanteista. Molemmat tarinat kannattaa kertoa, ja ne kohtaavat samassa ideassa: kirjautumissivu on ensimmäinen asia, jonka kirjautumaton käyttäjä näkee, joten sen on parasta olla tuote eikä kuva siitä.

Kuvakaappaus, noin viiden tunnin ajan

Uudistus alkoi tavanomaisesti. Rakenna kahteen sarakkeeseen, laita kirjautuminen vasemmalle ja näytä tuote oikealla — kuvana. Myöhäisaamun commitit tekevät juuri niin: kello 11:57 repoon laskeutuu oikea esikatselukuvakaappaus, 114 KB:n PNG, ja se päivitetään kerran kuusi minuuttia myöhemmin.

Kello 17:04 se oli poissa. Käännecommit korvaa staattisen kuvan 344 rivillä oikeita komponentteja — LoginDemo-paneelilla, joka on koottu kahdeksasta pienestä palasta, jotka toistavat oikean overlay-UI:n: nauhoituksen navipilleri sykkivine EQ-palkkeineen ja stop-nappeineen, chat-paneeli Chat/Transcript-välilehdillä, renderöity assistentin vastaus (joka selittää, sopivasti, Reactin useEffect-hookia), "Tell me more / Simplify / Show example" -pikatoiminnot, live-prompt-rivi ja ⌘⏎ Assist -syöte.

Ollaan tarkkoja sanasta "demo", koska siinä on helppo luvata liikaa: napeilla on oikeat hover-tilat — hehkut, kimallukset, siirtymät — mutta mitään ei ole kytketty klikattavaksi, ja syötekenttä on vain luku -tilassa. Se ei ole hiekkalaatikko. Se on tuotteen oikea UI-sanasto renderöitynä elävänä: sama logotiedosto, sama gradient-border- ja backdrop-blur-käsittely, sama productName-importti jota white-label-järjestelmä käyttää — joten demo uudelleenbrändää itsensä automaattisesti jokaiselle tästä koodipohjasta rakennetulle tuotteelle. Kuvakaappaus ei pysty mihinkään näistä. Kuvakaappaus on vanhentunut sinä päivänä kun sen otat, sumea väärällä näytöllä ja pysyvästi brändätty siksi tuotteeksi, jonka satuit kaappaamaan. Komponentit ovat teräviä kaikilla DPI-arvoilla, aina ajan tasalla ja oikein jokaiselle brändille — koska ne eivät ole kuva design-systeemistä, ne ovat design-systeemi.

Poistettu PNG on muuten yhä reposssa julkaisutagin kohdalla — orpona, ilman yhtään viittausta. Jokainen koodipohja kantaa mukanaan muutaman fossiilin hävinneestä lähestymistavasta.

Miltä 25 tyylicommitia yhdessä päivässä näyttävät

Sen yhden päivän commitiloki on suunnittelijan luonnoskirja, säilytettynä epätavallisen rehellisesti. Sarakesuhde kävi 40/60, sitten 45/55. "Works with" (toimii yhdessä näiden kanssa) -teksti alustalogojen yläpuolelle lisättiin keskipäivällä, siirrettiin ja poistettiin — se eli noin puoli päivää. Itse alustalogorivi (Google Meet, Teams, Zoom, Slack, Webex), lisätty aamulla kello 10:59, poistettiin kokonaan samana iltana kello 22:08. Ja footerin kohdistus vaati neljän lähestymistavan saagan: yksi wrapper-kontti, sitten keskitysluokkien poisto, sitten flexbox-keskitys, sitten sen vain nykäiseminen lähemmäs alareunaa.

Sen voisi helposti lukea tyhjäkäyntinä. Me luemme sen design-työn todellisena muotona: konvergoit renderöimällä, katsomalla ja säätämällä — ja sen tekeminen 25 pienenä commitina yhden squashatun "redesign login page" -commitin sijaan tarkoittaa, että itse etsintä on tallennettu. Kun joku kysyy "eikös me joskus kokeiltu logoriviä?", vastaus on historiassa, aikaleimoineen.

Käyttäjä, joka oli OCR:ää nopeampi

Julkaisun engineering-tarina tapahtui viisi päivää aiemmin, kolmen commitin korjausketjussa. Versiosta v1.5.12 lähtien Cmd+H:n painaminen lisää kuvakaappauksen jonoon välittömällä palautteella: pikkukuva ilmestyy jonoon heti, ja tekstintunnistus — paikallinen Apple Vision OCR, noin ~1-2 sekuntia — pyörii taustalla. Jonotapahtuma lähtee kirjaimellisesti ocrText: '' mukanaan ja kommentilla, joka lupaa sen täyttyvän myöhemmin.

Se on hyvä optimointi, ja se löi kilpailutilanteen. Nopea käyttäjä painaa Cmd+H ja lähettää kysymyksensä heti. Kuvakaappauksen tekstikenttä on yhä tyhjä. Pyyntö lähtee ilman ruudun sisältöä, ja malli vastaa — totuudenmukaisesti, raivostuttavasti — "I cannot see images" (en näe kuvia). Naiivi polku ei kaatunut virheeseen; se kaatui oikeaan vastaukseen väärään kysymykseen, mikä on hämmentävin tapa, jolla ohjelmisto voi epäonnistua.

Korjaus laittaa lähetyspolulle portin sen asynkronisen työn kohdalle, jonka optimointi lykkäsi: jos jollakin jonossa olevalla kuvakaappauksella on yhä tyhjä OCR-teksti, pyyntö jää odottamaan ja UI näyttää "Reading screen..." (lukee ruutua) -indikaattorin; useEffect laukeaa sillä hetkellä kun teksti saapuu ja lähettää pyynnön täydellä poimitulla sisällöllä. Kaksi React-spesifiä yksityiskohtaa diffissä kannattaa varastaa: kuvakaappausjono peilataan refiin, joka synkronoidaan renderöinnin aikana, koska tapahtumakäsittelijöiden closure-ketju nappasi vanhentunutta tilaa; ja odottamaan jäänyt pyyntö lähetetään suoraan eikä geneerisen queued-request-hookin kautta — samasta stale-closure-syystä.

Ja suoraan commit-viestiin on tallennettu rehellinen mutka: tämän kilpailutilanteen jahtaamiseen lisätyt jäljityslokit paljastivat toisen bugin backendissa — promptin kokoaminen pudotti kuvakaappaustekstin kokonaan yhdellä koodipolulla. Yksi oire, kaksi bugia, löydetty instrumentoimalla koko ketju ja katsomalla missä teksti katosi. Ketju päättyi tuotepäätökseen yhdeksän minuuttia kilpailutilannekorjauksen jälkeen: Cmd+H lisää kuvakaappaukset jonoon eräanalyysiä varten, kun taas Cmd+Enter ottaa aina tuoreen kaappauksen nykyisestä ruudusta — kaksi erillistä työnkulkua yhden monitulkintaisen sijaan. (Mitä Cmd+Enterin Assist oikeasti tekee, on oma postauksensa: välitön AI-apu siihen mitä juuri katsot.)

Yksi pieni jälkikirjoitus samalta viikolta white-label-luvun lukijoille: Product/version (platform) User-Agent sai dev-tilan korjauksen, koska app.getVersion() paketoimattomassa Electronissa palauttaa Electronin version, ei tuotteen. Identiteettimerkkijonot vuotavat putkistossa, kuten aina.

Kolme asiaa, jotka tämä julkaisu opetti meille

1. Renderöi tuote, älä valokuvaa sitä. Oikeista komponenteista rakennettu kirjautumissivun demo uudelleenbrändää itsensä automaattisesti, selviää kaikista näyttötiheyksistä eikä voi ajautua vanhaksi. Kuvakaappauslähestymistapa kokeiltiin ja poistettiin yhden työpäivän sisällä — halpa kokeilu, selkeä tuomio.
2. Jokainen asynkroninen optimointi tarvitsee portin käyttöpisteessä. "Välitön palaute tyhjällä OCR-tekstillä" oli oikea UX-ratkaisu, mutta lähetyspolun piti oppia odottamaan sitä, minkä optimointi lykkäsi. Jos lykkäät työtä, etsi jokainen sen tuloksen kuluttaja ja opeta sille ero "tyhjän" ja "ei vielä valmis" välillä.
3. Instrumentoi ketju, älä epäiltyä. Jäljityslokit seurasivat kuvakaappaustekstiä päästä päähän — pikanäppäinkäsittelijästä IPC:hen ja API-clientiin — ja siksi yksi tutkinta sulki kaksi bugia, joista toinen oli verkon toisella puolella.

Edellinen luku v1-tarinassa: palaverit, jotka oikeasti löydät (v1.7.3); ja koko kaarelle, ohjelmiston toimittamisen anatomia täydellisyyteen asti.