Μηχανική 80/20: Πώς Αναδόμησα τον Ιστότοπό μου μέσα σε ένα Σαββατοκύριακο

Ας σας αποκαλύψω ένα μυστικό: δεν ξαναέγραψα τον προσωπικό μου ιστότοπο μέσα σε ένα σαββατοκύριακο επειδή είμαι εξαιρετικά γρήγορος στην κωδικοποίηση. Το έκανα επειδή σχεδόν δεν κωδικοποίησα καθόλου.

Αντίθετα, πέρασα το μεγαλύτερο μέρος του χρόνου μου κάνοντας αυτό που οι περισσότεροι προγραμματιστές απέφευγαν σαν την πανούκλα—προετοιμασία. Τεκμηρίωση. Καταγραφή. Και όταν τελικά άνοιξα τον επεξεργαστή μου και άρχισα να δουλεύω με το Codex της OpenAI, η υλοποίηση κυλούσε σαν μια καλά σκηνοθετημένη μαγική παράσταση.

Αυτή είναι η ιστορία του να κάνεις το 80% της δουλειάς πριν γράψεις μια γραμμή κώδικα και πώς αυτό άλλαξε τα πάντα.

Γιατί να Ξαναγράψω τον Ιστότοπο;

Ο ιστότοπός μου λειτουργούσε με Qwik v3. Στερεή τεχνολογία, καλές προθέσεις, αλλά ήθελα περισσότερη ευελιξία — ειδικά στη δρομολόγηση. Έκανα τη μετάβαση σε React Router σε λειτουργία framework. Μια πλήρης ανακατασκευή, όχι απλά μια αναδόμηση. Νέα αρχιτεκτονική, καθαρή δομή αρχείων, ενημερωμένο styling (γεια σου Tailwind v4) και μια καθαρή αρχή.

Αλλά αυτό που με εξέπληξε ήταν: η πραγματική κωδικοποίηση πήρε περίπου 2–3 ώρες. Από την αρχή μέχρι το τέλος. Και λειτούργησε με την πρώτη προσπάθεια.

Τι συνέβη λοιπόν τις υπόλοιπες 5 ώρες;

Το 80%: Προετοιμασία του Codex Σαν Σύμβουλος που Ετοιμάζει μια Παρουσίαση

Το μεγαλύτερο μέρος της προσπάθειας αφιερώθηκε στην κατασκευή ενός "μεγάλου συστήματος prompt" — όχι σε fancy UI, αλλά απευθείας στον φάκελο του έργου. Αυτό έκανα πριν ζητήσω από το Codex να γράψει ακόμα και ένα συστατικό:

• Κατέβασα ολόκληρη την τεκμηρίωση του React Router και την αποθήκευσα σε έναν φάκελο /guides.

• Έκανα το ίδιο για Tailwind CSS v4, μετατρέποντας τις πιο σχετικές σελίδες σε Markdown με το Firecrawl.

• Έγραψα ένα αρχείο PROMPT.md που περιείχε μια επισκόπηση του έργου:

  • "Ο legacy κώδικας βρίσκεται στο /, ο νέος κώδικας πηγαίνει στο /app."
  • "Ελάχιστο UI, εστίαση στη λογική επιχειρήσεων."
  • "Χρήση Tailwind v4. Τήρηση του framework mode στο React Router."
  • Και ούτω καθεξής.

Αυτό δεν ήταν παραπάνω αέρας. Ήταν λειτουργικό πλαίσιο — το είδος λεπτομερούς briefing που θα έδινες σε έναν νέο συνεργάτη την πρώτη μέρα. Το Codex δεν μάντευε απλώς τι ήθελα. Είχε τεκμηρίωση στο repo. Είχε ακριβείς οδηγίες σε απλή αγγλική γλώσσα. Είχε περιορισμούς.

Όταν τελικά πληκτρολόγησα:

"Διάβασε το PROMPT.md. Πρώτα, μετανάστευσε όλες τις διαδρομές στη νέα εφαρμογή."

Το Codex ανταποκρίθηκε σαν να περίμενε αυτήν την αποστολή όλη του τη ζωή.

Μεγάλα Prompts, Ελάχιστες Παράλληλες Παρανοήσεις

Τα αποτελέσματα ήταν ασυνήθιστα. Το Codex τηρούσε τις οδηγίες. Δεν παρέκκλινε. Δεν προσπάθησε να εφευρέσει πράγματα. Σεβάστηκε την οδηγία "μην εστιάζεις στο UI". Η λογική του server μεταφέρθηκε με ακρίβεια. Η διαμόρφωση των διαδρομών φαινόταν σαν να την είχα γράψει εγώ—αν είχα την υπομονή ενός compiler.

Δεν ήταν απλώς θέμα "prompt engineering". Ήταν θέμα της εδραίωσης του Codex στα πραγματικά και τρέχοντα specs. Όχι αόριστη λίστα εργασιών. Όχι λίστα επιθυμιών. Αλλά δομημένη είσοδος, σαφή παραδείγματα και τοπική πρόσβαση στα πραγματικά docs που χρειαζόταν.

Τι Χρειάστηκε Χρόνο; Όχι ο Κώδικας

Μόλις μπήκε το θεμέλιο, η δουλειά χωρίστηκε σε δύο φάσεις:

1. Codex mode – Γρήγορη, δομημένη, επαναλαμβανόμενη εκτέλεση. Εργάστηκε στη μετανάστευση, λογική και ακόμα και στον σκελετό κάποιου layout με σχεδόν τέλεια ακρίβεια.
2. Design exploration mode – Αργή, χειροκίνητη και ανοιχτού τέλους. Αυτό ήταν το ανθρώπινο μέρος: επιλογή εμφάνισης, δοκιμή layouts, πειραματισμός με στοιχεία. Μόλις είχα ένα λειτουργικό οπτικό στυλ, το Codex επανήλθε για να διαδοθεί το μοτίβο σχεδιασμού.

Ο μόνος πραγματικός λόγος καθυστέρησης ήταν επειδή εγώ δεν ήξερα πώς ήθελα να φαίνεται κάτι — όχι πώς θα έπρεπε να λειτουργεί.

Το Πραγματικό Μάθημα: Το Codex Είναι Τόσο Καλό Όσο η Προετοιμασία σου

Αυτό το σαββατοκύριακο ενίσχυσε μια αλλαγή που παρατηρώ στη δουλειά μου:

Η κωδικοποίηση γίνεται το εύκολο μέρος.
Ο σχεδιασμός είναι το δύσκολο — και το πιο σημαντικό.

Για έργα μικρού έως μεσαίου μεγέθους, τώρα θεωρώ την υλοποίηση ως εργασία 20%. Το 80% είναι μπροστά: συγκέντρωση τεκμηρίωσης, συγγραφή στοχευμένων εργασιών, δημιουργία περιβαλλοντικών prompts.

Το Codex ανθίζει με αυτό το είδος δομής. Αν του δώσεις ασάφεια, θα σου δώσει ασάφεια. Αν χτίσεις το περιβάλλον σου με πρόθεση — docs, περιορισμοί, σαφείς περιγραφές — αποδίδει σαν έμπειρος προγραμματιστής με τέλεια μνήμη και χωρίς εγωισμό.

Μετέπειτα: Αντιμετώπισε το AI Σαν Συνεργάτη, Όχι Σαν Τζίνι

Το συμπέρασμα είναι απλό: μεταχειρίσου τα εργαλεία κωδικοποίησης AI σαν συνεργάτες. Δώσε τους τα ίδια υλικά που θα έδινες σε έναν πραγματικό μηχανικό. Προετοίμασε το πλαίσιο. Να είσαι συγκεκριμένος. Να είσαι πλήρης.

Την επόμενη φορά, για ένα μεγαλύτερο έργο, θα πάω ακόμα πιο μακριά:

• Ένα κύριο πλάνο που ορίζει ολόκληρο το πεδίο του έργου.
• Επιμέρους προδιαγραφές εργασιών ανά υποσύστημα ή συστατικό.
• Ένα λειτουργικό σετ αρχείων markdown και παραδειγμάτων ως τοπική αναφορά.

Το Codex δεν χρειάζεται μαγικές λέξεις—χρειάζεται δομή.

Θέλετε να χτίσετε πιο γρήγορα; Ξεκινήστε μην χτίζοντας. Σχεδιάστε πρώτα. Και μετά δώστε prompts με νόημα.

Η Εξέλιξη του Σχεδιασμού: Ένα Οπτικό Ταξίδι

Με το πέρασμα του χρόνου, ο ιστότοπός μου έχει περάσει από αρκετές μεταμορφώσεις—καθεμία μια αντανάκλαση νέων ιδεών, εργαλείων και μαθημάτων. Ακολουθεί μια σύντομη οπτική περιήγηση στην εξέλιξη:

Έκδοση 1: Το Σημείο Εκκίνησης

Έκδοση 2: Μια Πιο Καθορισμένη Φωνή

Έκδοση 2.1: Τροποποιήσεις και Βελτιώσεις

Έκδοση 3: Η Εποχή Qwik

Έκδοση 4: Εστιασμένη Απλότητα με Remix

Κάθε έκδοση έφερε νέες γνώσεις για το τι κάνει έναν ιστότοπο αποτελεσματικό — όχι μόνο σε αισθητική, αλλά σε σαφήνεια, χρηστικότητα και συντηρησιμότητα. Το ταξίδι του σχεδιασμού ακολούθησε το ταξίδι της ανάπτυξης: σκόπιμο, επαναληπτικό και πάντα με βλέμμα στο μέλλον.