Halaman Login ADALAH Demonya
GeekBye v1.7.5 menambahkan screenshot produk ke halaman login dan menghapusnya di hari yang sama — lalu membangunnya ulang sebagai komponen sungguhan. Plus: user yang lebih cepat dari OCR, dan seperti apa sebenarnya 25 commit style dalam satu hari.
GeekBye v1.7.5 adalah rilis satu minggu dengan kepribadian ganda: 37 commit, 28 di antaranya adalah desain ulang halaman login — dan 25 dari yang itu adalah utak-atik mikro style(login), semuanya mendarat di satu hari yang sama. Ini juga rilis yang memperbaiki salah satu race paling mendidik di codebase. Kedua ceritanya layak diceritakan, dan keduanya bertemu di ide yang sama: halaman login adalah hal pertama yang dilihat user yang belum terautentikasi, jadi sebaiknya ia adalah produknya, bukan gambar produknya.
Sebuah screenshot, selama kira-kira lima jam
Desain ulangnya dimulai secara konvensional. Restrukturisasi ke dua kolom, taruh sign-in di kiri, dan tampilkan produk di kanan — sebagai gambar. Commit menjelang siang melakukan persis itu: pukul 11:57 sebuah screenshot preview sungguhan mendarat di repo, PNG 114 KB, dan diperbarui sekali enam menit kemudian.
Pukul 17:04 ia sudah hilang. Commit pivotnya mengganti gambar statis dengan 344 baris komponen sungguhan — panel LoginDemo yang dirakit dari delapan potongan kecil yang mereplikasi UI overlay yang asli: pil navigasi rekaman dengan bar EQ yang berdenyut dan tombol stop, panel chat dengan tab Chat/Transcript, jawaban asisten yang dirender (menjelaskan useEffect milik React, pas sekali), aksi cepat "Tell me more / Simplify / Show example", barisan prompt live, dan input Assist ⌘⏎.
Mari kita presisi soal kata "demo", karena gampang sekali mengklaim berlebihan: tombol-tombolnya punya hover state sungguhan — glow, kilau, transisi — tapi tidak ada yang tersambung untuk diklik, dan inputnya read-only. Ini bukan sandbox. Yang ia benar-benar adalah kosakata UI asli produk yang dirender live: aset logo yang sama, perlakuan gradient-border dan backdrop-blur yang sama, import productName yang sama yang dipakai sistem white-label — sehingga demonya me-rebrand dirinya sendiri secara otomatis untuk setiap produk yang dibangun dari codebase ini. Screenshot tidak bisa melakukan satu pun dari itu. Screenshot sudah basi di hari kamu mengambilnya, buram di layar yang salah, dan permanen ber-brand produk mana pun yang kebetulan kamu tangkap. Komponen tajam di DPI berapa pun, selalu terkini, dan benar untuk setiap brand — karena mereka bukan gambar dari design system, mereka adalah design system itu sendiri.
PNG yang dihapus itu, omong-omong, masih ada di repo pada tag rilis — yatim piatu, tidak direferensikan apa pun. Setiap codebase membawa beberapa fosil dari pendekatan yang kalah.
Seperti apa 25 commit style dalam satu hari
Log commit hari itu adalah buku sketsa seorang desainer, diawetkan dengan kejujuran yang tidak biasa. Rasio kolom berubah jadi 40/60, lalu 45/55. Label "Works with" di atas logo-logo platform ditambahkan tengah hari, dipindah posisinya, lalu dihapus — hidupnya sekitar setengah hari. Barisan logo platformnya sendiri (Google Meet, Teams, Zoom, Slack, Webex), ditambahkan pukul 10:59 pagi, dihapus seluruhnya pukul 22:08 malam itu. Dan footer butuh saga empat pendekatan untuk sejajar: satu container wrapper, lalu menghapus kelas-kelas pemusatan, lalu pemusatan flexbox, lalu sekadar mendorongnya sedikit lebih dekat ke bawah.
Gampang saja membacanya sebagai churn. Kami membacanya sebagai bentuk sebenarnya dari kerja desain: kamu konvergen dengan me-render, melihat, dan menyesuaikan — dan melakukannya dalam 25 commit kecil alih-alih satu "redesign login page" yang di-squash berarti pencariannya sendiri terekam. Saat ada yang bertanya "bukannya kita pernah coba barisan logo?", jawabannya ada di history, lengkap dengan timestamp.
User yang lebih cepat dari OCR
Cerita engineering rilis ini terjadi lima hari sebelumnya, dalam rantai perbaikan tiga commit. Sejak v1.5.12, menekan Cmd+H mengantrekan screenshot dengan umpan balik instan: thumbnail muncul di antrean seketika, dan ekstraksi teksnya — OCR Apple Vision lokal, kira-kira satu sampai dua detik — berjalan di latar belakang. Event antreannya benar-benar dikirim dengan ocrText: '' dan sebuah komentar yang berjanji akan terisi nanti.
Itu optimasi yang bagus, dan ia mencetak sebuah race. User yang cepat menekan Cmd+H dan langsung men-submit pertanyaannya. Field teks screenshot-nya masih kosong. Request-nya berangkat tanpa konten layar, dan modelnya menjawab — dengan jujur, dengan cara yang bikin frustrasi — "I cannot see images." Jalur naifnya tidak gagal dengan error; ia gagal dengan jawaban benar untuk pertanyaan yang salah, yang merupakan cara paling membingungkan bagi software untuk gagal.
Perbaikannya memagari jalur submit dengan pekerjaan async yang ditunda optimasinya: kalau ada screenshot di antrean yang teks OCR-nya masih kosong, request-nya diparkir dan UI menampilkan indikator "Reading screen..."; sebuah useEffect menyala begitu teksnya mendarat dan mengirim request dengan konten hasil ekstraksi yang lengkap. Dua detail spesifik React di diff-nya layak dicuri: antrean screenshot dicerminkan ke sebuah ref yang disinkronkan saat render, karena rantai closure event-handler-nya menangkap state basi; dan request yang diparkir dikirim langsung, bukan lewat hook queued-request generik, karena alasan stale-closure yang sama.
Dan ada kerutan jujur yang terekam langsung di pesan commit-nya: log penelusuran yang ditambahkan untuk memburu race ini menyingkap bug kedua di backend — perakitan prompt menjatuhkan teks screenshot sepenuhnya di salah satu jalur kode. Satu gejala, dua bug, ditemukan dengan menginstrumentasi seluruh rantai dan mengamati di mana teksnya menghilang. Rantainya berakhir dengan keputusan produk, sembilan menit setelah perbaikan race: Cmd+H mengantrekan screenshot untuk analisis batch, sementara Cmd+Enter selalu mengambil tangkapan segar dari layar saat ini — dua alur kerja yang berbeda alih-alih satu yang ambigu. (Apa yang sebenarnya dilakukan Assist milik Cmd+Enter adalah tulisan tersendiri: bantuan AI instan untuk apa pun yang sedang kamu lihat.)
Satu koda kecil dari minggu yang sama, untuk pembaca bab white-label: User-Agent Product/version (platform) mendapat perbaikan mode dev, karena app.getVersion() di Electron yang belum dikemas mengembalikan versi Electron, bukan versi produknya. String identitas, seperti biasa, bocor lewat perpipaan.
Tiga hal yang diajarkan rilis ini
- Render produknya, jangan memotretnya. Demo halaman login yang dibangun dari komponen sungguhan me-rebrand otomatis, bertahan di setiap kepadatan layar, dan tidak bisa melenceng jadi usang. Pendekatan screenshot dicoba dan dihapus dalam satu hari kerja — eksperimen murah, vonis jelas.
- Setiap optimasi async butuh pagar di titik penggunaan. "Umpan balik instan dengan teks OCR kosong" adalah keputusan UX yang tepat, tapi jalur submit-nya harus belajar menunggu apa yang ditunda optimasinya. Kalau kamu menunda pekerjaan, temukan setiap konsumen hasilnya dan ajari mereka perbedaan antara "kosong" dan "belum siap".
- Instrumentasi rantainya, bukan tersangkanya. Log penelusurannya mengikuti teks screenshot dari ujung ke ujung — handler shortcut ke IPC ke klien API — dan itulah kenapa satu investigasi menutup dua bug, salah satunya di sisi lain jaringan.
Untuk bab sebelumnya dalam kisah v1, rapat yang benar-benar bisa kamu temukan lagi (v1.7.3); dan untuk keseluruhan alurnya, anatomi merilis software sampai sempurna.
