Login Sayfası Demonun TA KENDİSİ

GeekBye v1.7.5, kişiliği ikiye bölünmüş bir haftalık sürüm: 37 commit, bunların 28'i bir login sayfası yeniden tasarımı — ve onların da 25'i, hepsi tek bir günde inen style(login) mikro ayarları. Aynı zamanda kod tabanındaki en öğretici yarışlardan birini düzelten sürüm. İki hikâye de anlatılmaya değer ve aynı fikirde buluşuyorlar: login sayfası, oturum açmamış bir kullanıcının gördüğü ilk şeydir; o hâlde ürünün resmi değil, ürünün ta kendisi olsa iyi olur.

Bir ekran görüntüsü, aşağı yukarı beş saatliğine

Yeniden tasarım geleneksel başladı. İki sütuna yeniden yapılandır, oturum açmayı sola koy, ürünü sağda göster — bir görsel olarak. Öğlene doğru gelen commitler tam olarak bunu yapıyor: 11:57'de repoya gerçek bir önizleme ekran görüntüsü iniyor, 114 KB'lık bir PNG, ve altı dakika sonra bir kez güncelleniyor.

17:04'te ortada yoktu. Dönüş commiti statik görseli 344 satır gerçek bileşenle değiştiriyor — gerçek overlay arayüzünü kopyalayan sekiz küçük parçadan derlenmiş bir LoginDemo paneli: nabız gibi atan EQ çubukları ve durdurma düğmesiyle kayıt nav hapı, Chat/Transcript sekmeli sohbet paneli, render edilmiş bir asistan yanıtı (yakışır biçimde React'in useEffect'ini anlatıyor), "Tell me more / Simplify / Show example" hızlı aksiyonları, canlı prompt satırı ve ⌘⏎ Assist girişi.

"Demo" kelimesinde hassas olalım, çünkü abartmak kolay: düğmelerin gerçek hover state'leri var — parlamalar, ışıltılar, geçişler — ama hiçbir şey tıklamaya bağlı değil ve giriş salt okunur. Bu bir sandbox değil. Olduğu şey, ürünün gerçek UI sözlüğünün canlı render edilmesi: aynı logo asset'i, aynı gradient-border ve backdrop-blur işlemesi, white-label sisteminin kullandığı aynı productName importu — böylece demo, bu kod tabanından inşa edilen her ürün için kendini otomatik olarak yeniden markalıyor. Bir ekran görüntüsü bunların hiçbirini yapamaz. Ekran görüntüsü çekildiği gün eskimiştir, yanlış ekranda bulanıktır ve hangi ürünü yakaladıysanız kalıcı olarak onun markasını taşır. Bileşenler her DPI'da keskin, her zaman güncel ve her marka için doğrudur — çünkü tasarım sisteminin resmi değiller, tasarım sisteminin ta kendisiler.

Silinen PNG bu arada hâlâ release tag'inde, repoda duruyor — öksüz, hiçbir şey tarafından referans edilmiyor. Her kod tabanı, kaybeden yaklaşımın birkaç fosilini taşır.

Bir günde 25 stil commiti neye benzer

O tek günün commit logu, alışılmadık bir dürüstlükle korunmuş bir tasarımcı eskiz defteri. Sütun oranı 40/60 oldu, sonra 45/55. Platform logolarının üstündeki bir "Works with" etiketi öğlen eklendi, yeri değiştirildi ve kaldırıldı — yaklaşık yarım gün yaşadı. Platform logosu satırının kendisi (Google Meet, Teams, Zoom, Slack, Webex), sabah 10:59'da eklenmişti, o gece 22:08'de tamamen silindi. Footer'ın hizalanması ise dört yaklaşımlık bir destan gerektirdi: tek bir wrapper konteyner, sonra ortalama sınıflarını kaldırmak, sonra flexbox ile ortalamak, sonra onu sadece alta biraz daha yaklaştırmak.

Bunu çalkantı diye okumak kolay olurdu. Biz tasarım işinin gerçek biçimi diye okuyoruz: render ederek, bakarak ve ayarlayarak yakınsarsınız — ve bunu tek bir ezilmiş "redesign login page" yerine 25 küçük commitle yapmak, arayışın kendisinin kayda geçmesi demek. Biri "bir ara logo satırı denememiş miydik?" diye sorduğunda cevap, zaman damgalarıyla birlikte geçmişte duruyor.

OCR'den hızlı olan kullanıcı

Sürümün mühendislik hikâyesi beş gün önce, üç commitlik bir düzeltme zincirinde yaşandı. v1.5.12'den beri Cmd+H'ye basmak, ekran görüntüsünü anında geri bildirimle kuyruğa atıyor: küçük resim kuyrukta hemen beliriyor, metin çıkarımı — yerel Apple Vision OCR, kabaca bir-iki saniye — arka planda çalışıyor. Kuyruk olayı kelimenin tam anlamıyla ocrText: '' ile ve sonradan dolacağına söz veren bir yorumla gönderiliyor.

Bu iyi bir optimizasyon ve bir yarış bastı. Hızlı bir kullanıcı Cmd+H'ye basıp sorusunu hemen gönderiyor. Ekran görüntüsünün metin alanı hâlâ boş. İstek ekran içeriği olmadan yola çıkıyor ve model — doğru söyleyerek, çileden çıkarırcasına — "I cannot see images." diye yanıtlıyor. Naif yol bir hatayla başarısız olmadı; yanlış soruya doğru bir cevapla başarısız oldu, ki bu yazılımın başarısız olabileceği en kafa karıştırıcı yoldur.

Düzeltme, gönderme yolunu optimizasyonun ertelediği async işe kapıya bağlıyor: kuyruktaki herhangi bir ekran görüntüsünün OCR metni hâlâ boşsa istek park ediyor ve arayüz bir "Reading screen..." göstergesi gösteriyor; metin indiği anda bir useEffect ateşleniyor ve isteği çıkarılmış tam içerikle gönderiyor. Diff'teki React'e özgü iki detay çalınmaya değer: ekran görüntüsü kuyruğu, render sırasında senkronize edilen bir ref'e aynalanıyor, çünkü event-handler closure zinciri bayat state yakalıyordu; ve park edilen istek, aynı stale-closure nedeniyle genel kuyruklu-istek hook'u üzerinden değil, doğrudan gönderiliyor.

Ve commit mesajının içine kaydedilmiş dürüst bir kırışıklık var: bu yarışı avlamak için eklenen izleme logları, backend'de ikinci bir bug ortaya çıkardı — prompt birleştirme, bir kod yolunda ekran görüntüsü metnini tamamen düşürüyordu. Tek belirti, iki bug; tüm zinciri enstrümante edip metnin nerede kaybolduğunu izleyerek bulundu. Zincir, yarış düzeltmesinden dokuz dakika sonra bir ürün kararıyla bitti: Cmd+H ekran görüntülerini toplu analiz için kuyruğa atarken, Cmd+Enter her zaman mevcut ekranın taze bir yakalamasını alıyor — tek bir belirsiz akış yerine iki ayrı iş akışı. (Cmd+Enter'ın Assist'inin gerçekte ne yaptığı kendi yazısının konusu: baktığınız her şey için anında yapay zekâ yardımı.)

Aynı haftadan küçük bir dipnot, white-label bölümünün okurları için: Product/version (platform) User-Agent'ı bir dev-mode düzeltmesi aldı, çünkü paketlenmemiş Electron'da app.getVersion() ürünün değil, Electron'un sürümünü döndürüyor. Kimlik dizeleri, her zamanki gibi, tesisattan sızar.

Bu sürümün bize öğrettiği üç şey

1. Ürünü render edin, fotoğrafını çekmeyin. Gerçek bileşenlerden inşa edilmiş bir login sayfası demosu kendini otomatik yeniden markalar, her ekran yoğunluğunda ayakta kalır ve güncelliğini yitiremez. Ekran görüntüsü yaklaşımı denendi ve bir iş günü içinde silindi — ucuz deney, net hüküm.
2. Her async optimizasyonun kullanım noktasında bir kapıya ihtiyacı vardır. "Boş OCR metniyle anında geri bildirim" doğru UX kararıydı, ama gönderme yolunun optimizasyonun ertelediği şeyi beklemeyi öğrenmesi gerekiyordu. İşi erteliyorsanız, sonucunun her tüketicisini bulun ve onlara "boş" ile "henüz hazır değil" arasındaki farkı öğretin.
3. Şüpheliyi değil, zinciri enstrümante edin. İzleme logları ekran görüntüsü metnini uçtan uca izledi — kısayol işleyicisinden IPC'ye, oradan API istemcisine — ve tek bir soruşturmanın biri ağın öbür tarafında olmak üzere iki bugı kapatmasının nedeni bu.

v1 hikâyesinin bir önceki bölümü için, gerçekten bulabildiğiniz toplantılar (v1.7.3); tüm yay için de yazılımı kusursuzluğa kadar sevk etmenin anatomisi.