Halaman Log Masuk ITULAH Demonya

GeekBye v1.7.5 ialah keluaran seminggu dengan personaliti terbelah: 37 commit, 28 daripadanya ialah reka bentuk semula halaman log masuk — dan 25 daripada yang itu ialah pelarasan mikro style(login), semuanya mendarat pada satu hari yang sama. Ia juga keluaran yang membetulkan salah satu perlumbaan paling mendidik dalam codebase. Kedua-dua kisahnya patut diceritakan, dan kedua-duanya bertemu pada idea yang sama: halaman log masuk ialah perkara pertama yang dilihat pengguna yang belum disahkan, jadi lebih baik ia menjadi produk itu, bukan gambar produk.

Sebuah tangkapan skrin, selama lebih kurang lima jam

Reka bentuk semulanya bermula secara konvensional. Struktur semula kepada dua lajur, letakkan log masuk di kiri, dan tunjukkan produk di kanan — sebagai imej. Commit lewat pagi melakukan tepat itu: pada 11:57 sebuah tangkapan skrin pratonton sebenar mendarat dalam repo, PNG 114 KB, dan dikemas kini sekali enam minit kemudian.

Pada 17:04 ia sudah tiada. Commit peralihannya menggantikan imej statik dengan 344 baris komponen sebenar — panel LoginDemo yang dipasang daripada lapan cebisan kecil yang mereplikakan UI overlay sebenar: pil navigasi rakaman dengan bar EQ berdenyut dan butang henti, panel sembang dengan tab Chat/Transcript, jawapan pembantu yang dipaparkan (menerangkan useEffect React, sungguh kena pada tempatnya), tindakan pantas "Tell me more / Simplify / Show example", barisan prompt langsung, dan input Assist ⌘⏎.

Mari kita berhati-hati dengan perkataan "demo", kerana mudah sahaja menuntut lebih daripada yang sepatutnya: butang-butangnya mempunyai hover state sebenar — sinaran, kilauan, peralihan — tetapi tiada satu pun berwayar untuk diklik, dan inputnya baca sahaja. Ia bukan sandbox. Apa yang ia benar-benar ialah perbendaharaan UI sebenar produk yang dipaparkan secara langsung: aset logo yang sama, olahan gradient-border dan backdrop-blur yang sama, import productName yang sama yang digunakan oleh sistem white-label — supaya demo itu menjenamakan semula dirinya secara automatik bagi setiap produk yang dibina daripada codebase ini. Tangkapan skrin tidak mampu melakukan satu pun daripadanya. Tangkapan skrin sudah basi pada hari anda mengambilnya, kabur pada paparan yang salah, dan berjenama kekal sebagai produk mana-mana yang kebetulan anda tangkap. Komponen tajam pada sebarang DPI, sentiasa terkini, dan betul bagi setiap jenama — kerana ia bukan gambar design system, ia ialah design system itu sendiri.

PNG yang dipadamkan itu, sebagai catatan sampingan, masih ada dalam repo pada tag keluaran — yatim, tidak dirujuk oleh apa-apa. Setiap codebase membawa beberapa fosil pendekatan yang tewas.

Rupa sebenar 25 commit gaya dalam satu hari

Log commit hari tunggal itu ialah buku lakaran seorang pereka, dipelihara dengan kejujuran yang luar biasa. Nisbah lajur bertukar kepada 40/60, kemudian 45/55. Label "Works with" di atas logo-logo platform ditambah pada tengah hari, dialihkan kedudukannya, dan dibuang — hayatnya lebih kurang setengah hari. Barisan logo platform itu sendiri (Google Meet, Teams, Zoom, Slack, Webex), ditambah pada 10:59 pagi, dipadamkan sepenuhnya pada 22:08 malam itu. Dan footer memerlukan saga empat pendekatan untuk dijajarkan: satu bekas wrapper, kemudian membuang kelas-kelas pemusatan, kemudian pemusatan flexbox, kemudian sekadar menolaknya sedikit lebih dekat ke bawah.

Mudah sahaja membacanya sebagai kekacauan. Kami membacanya sebagai bentuk sebenar kerja reka bentuk: anda menumpu dengan memaparkan, melihat dan melaraskan — dan melakukannya dalam 25 commit kecil dan bukannya satu "redesign login page" yang di-squash bermakna pencarian itu sendiri terakam. Apabila seseorang bertanya "bukankah kita pernah mencuba barisan logo?", jawapannya ada dalam sejarah, lengkap dengan cap masa.

Pengguna yang lebih pantas daripada OCR

Kisah kejuruteraan keluaran ini berlaku lima hari lebih awal, dalam rantaian pembetulan tiga commit. Sejak v1.5.12, menekan Cmd+H membariskan tangkapan skrin dengan maklum balas serta-merta: imej kecil muncul dalam barisan dengan segera, dan pengekstrakan teks — OCR Apple Vision tempatan, lebih kurang satu hingga dua saat — berjalan di latar belakang. Peristiwa barisan itu betul-betul dihantar dengan ocrText: '' dan komen yang berjanji ia akan diisi kemudian.

Itu pengoptimuman yang baik, dan ia menempa satu perlumbaan. Pengguna yang pantas menekan Cmd+H dan terus menghantar soalannya. Medan teks tangkapan skrin itu masih kosong. Permintaan keluar tanpa kandungan skrin, dan model menjawab — dengan benar, dengan cara yang menyakitkan hati — "I cannot see images." Laluan naif itu tidak gagal dengan ralat; ia gagal dengan jawapan yang betul kepada soalan yang salah, iaitu cara paling mengelirukan bagi perisian untuk gagal.

Pembetulannya memagari laluan penghantaran dengan kerja async yang ditangguhkan oleh pengoptimuman itu: jika mana-mana tangkapan skrin dalam barisan masih mempunyai teks OCR kosong, permintaan itu ditahan dan UI memaparkan penunjuk "Reading screen..."; sebuah useEffect menyala sebaik sahaja teks itu tiba dan menghantar permintaan dengan kandungan penuh yang diekstrak. Dua perincian khusus React dalam diff itu patut dicuri: barisan tangkapan skrin dicerminkan ke dalam ref yang disegerakkan semasa render, kerana rantaian closure pengendali peristiwa menangkap keadaan basi; dan permintaan yang ditahan dihantar terus dan bukannya melalui hook permintaan-berbaris generik, atas sebab stale-closure yang sama.

Dan ada kedutan jujur yang terakam terus dalam mesej commit: log penjejakan yang ditambah untuk memburu perlumbaan ini mendedahkan pepijat kedua di backend — pemasangan prompt menggugurkan teks tangkapan skrin sepenuhnya dalam salah satu laluan kod. Satu gejala, dua pepijat, ditemui dengan menginstrumen keseluruhan rantaian dan memerhatikan di mana teks itu lenyap. Rantaian itu berakhir dengan keputusan produk, sembilan minit selepas pembetulan perlumbaan: Cmd+H membariskan tangkapan skrin untuk analisis kelompok, manakala Cmd+Enter sentiasa mengambil tangkapan segar skrin semasa — dua aliran kerja yang berbeza dan bukannya satu yang samar. (Apa yang sebenarnya dilakukan oleh Assist Cmd+Enter ialah tulisan tersendiri: bantuan AI serta-merta untuk apa sahaja yang anda sedang lihat.)

Satu koda kecil daripada minggu yang sama, untuk pembaca bab white-label: User-Agent Product/version (platform) menerima pembetulan mod dev, kerana app.getVersion() dalam Electron yang belum dibungkus memulangkan versi Electron, bukan versi produk. Rentetan identiti, seperti biasa, bocor melalui saluran paip.

Tiga perkara yang diajarkan keluaran ini

1. Paparkan produk, jangan memotretnya. Demo halaman log masuk yang dibina daripada komponen sebenar menjenamakan semula secara automatik, bertahan pada setiap ketumpatan paparan, dan tidak boleh menjadi lapuk. Pendekatan tangkapan skrin dicuba dan dipadamkan dalam satu hari bekerja — eksperimen murah, keputusan jelas.
2. Setiap pengoptimuman async memerlukan pagar di titik penggunaan. "Maklum balas serta-merta dengan teks OCR kosong" ialah keputusan UX yang betul, tetapi laluan penghantaran perlu belajar menunggu apa yang ditangguhkan oleh pengoptimuman itu. Jika anda menangguhkan kerja, cari setiap pengguna hasilnya dan ajarkan mereka perbezaan antara "kosong" dan "belum sedia".
3. Instrumenkan rantaian, bukan suspek. Log penjejakan mengikuti teks tangkapan skrin dari hujung ke hujung — pengendali pintasan ke IPC ke klien API — dan itulah sebabnya satu siasatan menutup dua pepijat, salah satunya di seberang rangkaian.

Untuk bab sebelumnya dalam kisah v1, mesyuarat yang benar-benar boleh anda temui semula (v1.7.3); dan untuk keseluruhan lengkungnya, anatomi mengeluarkan perisian hingga ke kesempurnaan.