Pieteikšanās lapa IR demo

GeekBye v1.7.5 ir vienas nedēļas laidiens ar šķeltu personību: 37 komiti, no kuriem 28 ir pieteikšanās lapas pārveide — un 25 no tiem ir style(login) mikropieskaņojumi, visi nolaisti vienā dienā. Tas ir arī laidiens, kas izlaboja vienu no pamācošākajām sacensībām koda bāzē. Abi stāsti ir vērti izstāstīšanas, un tie satiekas vienā idejā: pieteikšanās lapa ir pirmais, ko redz neautentificēts lietotājs, tāpēc labāk lai tā ir produkts, nevis tā bilde.

Ekrānuzņēmums — apmēram piecas stundas

Pārveide sākās konvencionāli. Pārstrukturēt uz divām kolonnām, pierakstīšanos likt pa kreisi un produktu rādīt pa labi — kā attēlu. Vēlā rīta komiti dara tieši to: 11:57 repozitorijā nolaižas īsts priekšskatījuma ekrānuzņēmums, 114 KB PNG, un pēc sešām minūtēm tiek vienreiz atjaunināts.

17:04 tas bija prom. Pagrieziena komits statisko attēlu aizstāj ar 344 rindām īstu komponentu — LoginDemo paneli, kas salikts no astoņiem maziem gabaliem, kuri atdarina īsto pārklājuma UI: ierakstīšanas navigācijas pilulu ar pulsējošām EQ joslām un stop pogu, čata paneli ar Chat/Transcript cilnēm, renderētu asistenta atbildi (kas, zīmīgi, skaidro React useEffect), "Tell me more / Simplify / Show example" ātrās darbības, dzīvo promptu rindu un ⌘⏎ Assist ievadi.

Būsim precīzi par vārdu "demo", jo šeit ir viegli pārspīlēt: pogām ir īsti hover stāvokļi — mirdzumi, vizmojumi, pārejas —, bet nekas nav pieslēgts klikšķiem, un ievades lauks ir tikai lasāms. Tas nav sandbox. Tas ir produkta īstais UI vārdu krājums, renderēts dzīvajā: tas pats logo resurss, tā pati gradient-border un backdrop-blur apstrāde, tas pats productName imports, ko izmanto white-label sistēma — tāpēc demo katram produktam, kas būvēts no šīs koda bāzes, pārzīmolojas automātiski. Ekrānuzņēmums neko no tā nevar. Ekrānuzņēmums ir novecojis tajā dienā, kad to uzņem, izplūdis uz nepareizā displeja un uz mūžu zīmolots kā tas produkts, kuru sanāca notvert. Komponenti ir asi jebkurā DPI, vienmēr aktuāli un pareizi katram zīmolam — jo tie nav dizaina sistēmas bilde, tie ir dizaina sistēma.

Izdzēstais PNG, starp citu, laidiena tagā joprojām ir repozitorijā — bārenis, uz kuru nekas neatsaucas. Katra koda bāze nes līdzi dažas fosilijas no pieejas, kas zaudēja.

Kā izskatās 25 stila komiti vienā dienā

Tās vienas dienas komitu žurnāls ir dizainera skiču burtnīca, saglabāta ar neparastu godīgumu. Kolonnu attiecība gāja 40/60, tad 45/55. "Works with" (darbojas ar) uzraksts virs platformu logotipiem tika pievienots pusdienlaikā, pārvietots un noņemts — tas nodzīvoja apmēram pusdienu. Pati platformu logotipu rinda (Google Meet, Teams, Zoom, Slack, Webex), pievienota 10:59 no rīta, tika pilnībā izdzēsta 22:08 tajā pašā vakarā. Un kājenes nolīdzināšana prasīja četru pieeju sāgu: viens wrapper konteiners, tad centrēšanas klašu noņemšana, tad flexbox centrēšana, tad vienkārši pabīdīšana tuvāk apakšai.

Būtu viegli to nolasīt kā tukšgaitu. Mēs to lasām kā dizaina darba īsto formu: tu konverģē renderējot, skatoties un pielabojot — un darīt to 25 mazos komitos, nevis vienā saspiestā "redesign login page" nozīmē, ka pati meklēšana ir ierakstīta. Kad kāds jautā "vai mēs kādreiz nemēģinājām logo rindu?", atbilde ir vēsturē, ar laika zīmogiem.

Lietotājs, kurš bija ātrāks par OCR

Laidiena inženierijas stāsts notika piecas dienas agrāk, trīs komitu labojumu ķēdē. Kopš v1.5.12 Cmd+H nospiešana ekrānuzņēmumu ierindo ar tūlītēju atgriezenisko saiti: sīktēls rindā parādās uzreiz, un teksta izvilkšana — lokālais Apple Vision OCR, aptuveni ~1-2 sekundes — darbojas fonā. Rindas notikums burtiski tiek nosūtīts ar ocrText: '' un komentāru, kas sola, ka teksts aizpildīsies vēlāk.

Tā ir laba optimizācija, un tā izkala sacensību. Ātrs lietotājs nospiež Cmd+H un uzreiz iesniedz savu jautājumu. Ekrānuzņēmuma teksta lauks joprojām ir tukšs. Pieprasījums aiziet bez ekrāna satura, un modelis atbild — patiesi un kaitinoši — "I cannot see images" (es nevaru redzēt attēlus). Naivā taka nekrita ar kļūdu; tā krita ar pareizu atbildi uz nepareizo jautājumu, kas ir mulsinošākais veids, kā programmatūra var izgāzties.

Labojums iesniegšanas taku aizšķērso uz asinhrono darbu, ko optimizācija atlika: ja kādam ierindotam ekrānuzņēmumam OCR teksts joprojām ir tukšs, pieprasījums nostājas malā, un UI rāda "Reading screen..." (nolasa ekrānu) indikatoru; useEffect nostrādā tajā mirklī, kad teksts pienāk, un nosūta pieprasījumu ar pilnu izvilkto saturu. Divas React specifiskas detaļas diffā ir vērts nozagt: ekrānuzņēmumu rinda tiek spoguļota ref, ko sinhronizē renderēšanas laikā, jo notikumu apstrādātāju closure ķēde tvēra novecojušu stāvokli; un malā noliktais pieprasījums tiek nosūtīts tieši, nevis caur vispārīgo queued-request hook — tā paša stale-closure iemesla dēļ.

Un tieši komita ziņojumā ir ierakstīta godīga kroka: trasēšanas logi, kas pievienoti šīs sacensības medībām, atklāja otru kļūdu backendā — prompta salikšana vienā koda takā ekrānuzņēmuma tekstu izmeta pilnībā. Viens simptoms, divas kļūdas, atrastas, instrumentējot visu ķēdi un skatoties, kur teksts pazūd. Ķēde beidzās ar produkta lēmumu deviņas minūtes pēc sacensības labojuma: Cmd+H ekrānuzņēmumus ierindo pakešu analīzei, kamēr Cmd+Enter vienmēr uzņem svaigu pašreizējā ekrāna tvērumu — divas atšķirīgas darba plūsmas vienas divdomīgas vietā. (Ko Cmd+Enter Assist īsti dara, ir atsevišķs raksts: tūlītēja AI palīdzība par to, uz ko skaties.)

Viena maza koda no tās pašas nedēļas white-label nodaļas lasītājiem: Product/version (platform) User-Agent dabūja dev režīma labojumu, jo app.getVersion() nepakotā Electron atgriež Electron versiju, nevis produkta. Identitātes virknes, kā vienmēr, sūcas cauri cauruļvadiem.

Trīs lietas, ko šis laidiens mums iemācīja

1. Renderē produktu, nefotografē to. Pieteikšanās lapas demo, kas būvēts no īstiem komponentiem, pārzīmolojas automātiski, pārdzīvo jebkuru displeja blīvumu un nevar noklīst pagātnē. Ekrānuzņēmuma pieeja tika izmēģināta un izdzēsta vienas darba dienas laikā — lēts eksperiments, skaidrs spriedums.
2. Katrai asinhronai optimizācijai vajag vārtus lietošanas punktā. "Tūlītēja atgriezeniskā saite ar tukšu OCR tekstu" bija pareizais UX lēmums, bet iesniegšanas takai bija jāiemācās gaidīt to, ko optimizācija atlika. Ja atliec darbu, atrodi katru tā rezultāta patērētāju un iemāci tam atšķirību starp "tukšs" un "vēl nav gatavs".
3. Instrumentē ķēdi, nevis aizdomās turēto. Trasēšanas logi ekrānuzņēmuma tekstam sekoja no gala līdz galam — no īsceļa apstrādātāja uz IPC uz API klientu — un tāpēc viena izmeklēšana aizvēra divas kļūdas, vienu no tām tīkla otrā pusē.

Par iepriekšējo nodaļu v1 stāstā — sanāksmes, ko tiešām var atkal atrast (v1.7.3); un visai lokai — programmatūras piegādes līdz pilnībai anatomiju.