Η Σελίδα Login ΕΙΝΑΙ το Demo

Το GeekBye v1.7.5 είναι μια έκδοση μίας εβδομάδας με διχασμένη προσωπικότητα: 37 commits, εκ των οποίων τα 28 είναι ανασχεδιασμός της σελίδας login — και τα 25 από αυτά είναι μικρο-ρυθμίσεις style(login), όλες προσγειωμένες σε μία και μόνη μέρα. Είναι επίσης η έκδοση που διόρθωσε μία από τις πιο διδακτικές κούρσες στο codebase. Και οι δύο ιστορίες αξίζουν να ειπωθούν, και συναντιούνται στην ίδια ιδέα: η σελίδα login είναι το πρώτο πράγμα που βλέπει ένας μη συνδεδεμένος χρήστης, οπότε καλά θα κάνει να είναι το προϊόν, όχι μια φωτογραφία του.

Ένα screenshot, για περίπου πέντε ώρες

Ο ανασχεδιασμός ξεκίνησε συμβατικά. Αναδιάρθρωση σε δύο στήλες, η σύνδεση αριστερά, και το προϊόν να φαίνεται δεξιά — ως εικόνα. Τα commits του αργότερου πρωινού κάνουν ακριβώς αυτό: στις 11:57 προσγειώνεται στο repo ένα πραγματικό preview screenshot, ένα PNG 114 KB, και ενημερώνεται μία φορά έξι λεπτά αργότερα.

Στις 17:04 είχε χαθεί. Το commit της στροφής αντικαθιστά τη στατική εικόνα με 344 γραμμές πραγματικών components — ένα πάνελ LoginDemo συναρμολογημένο από οκτώ μικρά κομμάτια που αναπαράγουν το πραγματικό overlay UI: το pill πλοήγησης της ηχογράφησης με τις παλλόμενες μπάρες EQ και το κουμπί διακοπής, το πάνελ chat με τις καρτέλες Chat/Transcript, μια αποδοσμένη απάντηση του βοηθού (που εξηγεί, ταιριαστά, το useEffect του React), τις γρήγορες ενέργειες «Tell me more / Simplify / Show example» (πες μου περισσότερα / απλοποίησε / δείξε παράδειγμα), τη σειρά με τα live prompts, και το πεδίο Assist με ⌘⏎.

Ας είμαστε ακριβείς με τη λέξη «demo», γιατί είναι εύκολο να υποσχεθείς παραπάνω: τα κουμπιά έχουν πραγματικά hover states — λάμψεις, shimmers, transitions — αλλά τίποτα δεν είναι συνδεδεμένο σε κλικ, και το πεδίο εισαγωγής είναι read-only. Δεν είναι sandbox. Αυτό που είναι, είναι το πραγματικό UI λεξιλόγιο του προϊόντος αποδοσμένο ζωντανά: το ίδιο asset του λογότυπου, η ίδια επεξεργασία gradient-border και backdrop-blur, το ίδιο import του productName που χρησιμοποιεί το white-label σύστημα — ώστε το demo να αλλάζει brand μόνο του για κάθε προϊόν που χτίζεται από αυτό το codebase. Ένα screenshot δεν μπορεί να κάνει τίποτα από αυτά. Ένα screenshot είναι μπαγιάτικο από τη μέρα που το τραβάς, θολό στη λάθος οθόνη, και μόνιμα μαρκαρισμένο ως όποιο προϊόν έτυχε να αποτυπώσεις. Τα components είναι καθαρά σε κάθε DPI, πάντα επίκαιρα, και σωστά για κάθε brand — επειδή δεν είναι μια φωτογραφία του design system, είναι το design system.

Το διαγραμμένο PNG, παρεμπιπτόντως, βρίσκεται ακόμη στο repo στο release tag — ορφανό, χωρίς καμία αναφορά. Κάθε codebase κουβαλά μερικά απολιθώματα της προσέγγισης που έχασε.

Πώς μοιάζουν 25 style commits σε μία μέρα

Το commit log εκείνης της μίας μέρας είναι το τετράδιο σκίτσων ενός designer, διατηρημένο με ασυνήθιστη ειλικρίνεια. Η αναλογία των στηλών πήγε 40/60, μετά 45/55. Μια ετικέτα «Works with» (λειτουργεί με) πάνω από τα λογότυπα των πλατφορμών προστέθηκε το μεσημέρι, μετακινήθηκε και αφαιρέθηκε — έζησε περίπου μισή μέρα. Η ίδια η σειρά με τα λογότυπα πλατφορμών (Google Meet, Teams, Zoom, Slack, Webex), που προστέθηκε στις 10:59 το πρωί, διαγράφηκε ολοκληρωτικά στις 22:08 εκείνο το βράδυ. Και το footer χρειάστηκε ένα έπος τεσσάρων προσεγγίσεων για να ευθυγραμμιστεί: ένα ενιαίο wrapper container, μετά αφαίρεση των κλάσεων κεντραρίσματος, μετά κεντράρισμα με flexbox, μετά απλώς ένα σπρώξιμο πιο κοντά στο κάτω μέρος.

Θα ήταν εύκολο να το διαβάσεις ως σπατάλη. Εμείς το διαβάζουμε ως το πραγματικό σχήμα της σχεδιαστικής δουλειάς: συγκλίνεις αποδίδοντας, κοιτάζοντας και προσαρμόζοντας — και το να το κάνεις αυτό σε 25 μικρά commits αντί για ένα squashed «redesign login page» σημαίνει ότι η ίδια η αναζήτηση έχει καταγραφεί. Όταν κάποιος ρωτήσει «δεν είχαμε δοκιμάσει κάποτε μια σειρά με λογότυπα;», η απάντηση βρίσκεται στο ιστορικό, με timestamps.

Ο χρήστης που ήταν πιο γρήγορος από το OCR

Η μηχανική ιστορία της έκδοσης συνέβη πέντε μέρες νωρίτερα, σε μια αλυσίδα διορθώσεων τριών commits. Από το v1.5.12, το πάτημα του Cmd+H βάζει ένα screenshot στην ουρά με ακαριαία ανάδραση: η μικρογραφία εμφανίζεται στην ουρά αμέσως, και η εξαγωγή κειμένου — τοπικό OCR με Apple Vision, περίπου ~1-2 δευτερόλεπτα — τρέχει στο παρασκήνιο. Το συμβάν της ουράς φεύγει κυριολεκτικά με ocrText: '' και ένα σχόλιο που υπόσχεται ότι θα συμπληρωθεί αργότερα.

Είναι μια καλή βελτιστοποίηση, και έκοψε μια κούρσα. Ένας γρήγορος χρήστης πατά Cmd+H και υποβάλλει αμέσως την ερώτησή του. Το πεδίο κειμένου του screenshot είναι ακόμη κενό. Το αίτημα φεύγει χωρίς κανένα περιεχόμενο οθόνης, και το μοντέλο απαντά — αληθινά, εξοργιστικά — «I cannot see images» (δεν μπορώ να δω εικόνες). Η αφελής διαδρομή δεν απέτυχε με σφάλμα· απέτυχε με μια σωστή απάντηση στη λάθος ερώτηση, που είναι ο πιο μπερδεμένος τρόπος με τον οποίο μπορεί να αποτύχει το λογισμικό.

Η διόρθωση μπλοκάρει τη διαδρομή υποβολής πάνω στην async εργασία που ανέβαλε η βελτιστοποίηση: αν οποιοδήποτε screenshot στην ουρά έχει ακόμη κενό κείμενο OCR, το αίτημα παρκάρει και το UI δείχνει έναν δείκτη «Reading screen...» (διαβάζει την οθόνη...)· ένα useEffect πυροδοτείται τη στιγμή που φτάνει το κείμενο και στέλνει το αίτημα με το πλήρες εξαγμένο περιεχόμενο. Δύο λεπτομέρειες ειδικές του React στο diff αξίζει να τις κλέψεις: η ουρά screenshots αντικατοπτρίζεται σε ένα ref που συγχρονίζεται κατά το render, επειδή η αλυσίδα closures των event handlers αιχμαλώτιζε μπαγιάτικη κατάσταση· και το παρκαρισμένο αίτημα στέλνεται απευθείας αντί μέσω του γενικού hook αιτημάτων ουράς, για τον ίδιο λόγο stale closure.

Και υπάρχει μια τίμια πτυχή καταγεγραμμένη μέσα στο ίδιο το μήνυμα του commit: τα tracing logs που προστέθηκαν για να κυνηγήσουν αυτή την κούρσα αποκάλυψαν ένα δεύτερο σφάλμα στο backend — η συναρμολόγηση του prompt πετούσε εντελώς το κείμενο του screenshot σε μία από τις διαδρομές κώδικα. Ένα σύμπτωμα, δύο σφάλματα, που βρέθηκαν με το να ενορχηστρωθεί όλη η αλυσίδα με όργανα μέτρησης και να παρακολουθηθεί πού εξαφανιζόταν το κείμενο. Η αλυσίδα έκλεισε με μια απόφαση προϊόντος, εννέα λεπτά μετά τη διόρθωση της κούρσας: το Cmd+H βάζει screenshots στην ουρά για ομαδική ανάλυση, ενώ το Cmd+Enter τραβά πάντα μια φρέσκια λήψη της τρέχουσας οθόνης — δύο διακριτές ροές εργασίας αντί για μία διφορούμενη. (Το τι κάνει στην πράξη το Assist του Cmd+Enter είναι δικό του άρθρο: ακαριαία βοήθεια AI για ό,τι κοιτάζεις.)

Μια μικρή coda από την ίδια εβδομάδα, για τους αναγνώστες του κεφαλαίου για το white-label: το User-Agent Product/version (platform) απέκτησε μια διόρθωση για dev mode, επειδή το app.getVersion() σε μη πακεταρισμένο Electron επιστρέφει την έκδοση του Electron, όχι του προϊόντος. Τα strings ταυτότητας, ως συνήθως, διαρρέουν μέσα από τις σωληνώσεις.

Τρία πράγματα που μας δίδαξε αυτή η έκδοση

1. Απόδωσε το προϊόν, μην το φωτογραφίζεις. Ένα demo σελίδας login χτισμένο από πραγματικά components αλλάζει brand αυτόματα, επιβιώνει σε κάθε πυκνότητα οθόνης και δεν μπορεί να ξεπεραστεί. Η προσέγγιση με το screenshot δοκιμάστηκε και διαγράφηκε μέσα σε μία εργάσιμη μέρα — φτηνό πείραμα, καθαρή ετυμηγορία.
2. Κάθε async βελτιστοποίηση χρειάζεται μια πύλη στο σημείο χρήσης. Η «ακαριαία ανάδραση με κενό κείμενο OCR» ήταν η σωστή απόφαση UX, αλλά η διαδρομή υποβολής έπρεπε να μάθει να περιμένει αυτό που η βελτιστοποίηση ανέβαλε. Αν αναβάλλεις μια εργασία, βρες κάθε καταναλωτή του αποτελέσματός της και μάθε του τη διαφορά ανάμεσα στο «κενό» και στο «όχι έτοιμο ακόμη».
3. Ενορχήστρωσε την αλυσίδα με όργανα, όχι τον ύποπτο. Τα tracing logs ακολούθησαν το κείμενο του screenshot από άκρη σε άκρη — από τον shortcut handler στο IPC στον API client — και γι' αυτό μία έρευνα έκλεισε δύο σφάλματα, το ένα από αυτά στην άλλη πλευρά του δικτύου.

Για το προηγούμενο κεφάλαιο της ιστορίας του v1, συναντήσεις που μπορείς πραγματικά να ξαναβρείς (v1.7.3)· και για ολόκληρη την πορεία, η ανατομία της παράδοσης λογισμικού στην τελειότητα.