Προσθήκη αυτόματου προθέματος στο URL — μια λεπτομέρεια που γλιτώνει λεπτά

Στο φόρμα συντομεύσεως συνδέσμου θα εισάγετε allegro.pl. Οι περισσότερες υπηρεσίες συντομεύσεως θα σας πουν ότι αυτό δεν είναι έγκυρο URL και θα σας ζητήσουν να το ξαναγράψετε με https:// στην αρχή. Το cutty.dev απλώς προσθέτει μόνο του το https:// και συνεχίζει.

Αυτό ακούγεται σαν μια λειτουργία που barely αξίζει να αναφερθεί. Στην πράξη, είναι η διαφορά μεταξύ:

• "έκανα επικόλληση, έχω σύντομο link, κλείνω το παράθυρο" (2 δευτερόλεπτα)
• "έκανα επικόλληση, λάθος, διαβάζω μήνυμα, προσθέτω https, ξανά, έχω link" (15-20 δευτερόλεπτα)

Πολλαπλασίασε με τον αριθμό των φορών το μήνα που επικολλάς το URL, συν τη δυσφορία από την ανάγνωση του σφάλματος, συν τη στιγμή «αχ, ναι, πρωτόκολλο». Μια λεπτομέρεια που μετριέται σε λεπτά ανά άτομο το μήνα.

Τι ακριβώς κάνει το cutty.dev

Εισήγαγες κείμενο στο φόρμα. Πριν την αποστολή στον διακομιστή, το JavaScript ελέγχει αν ξεκινά με κάποιο πρωτόκολλο (http://, https://, ftp://, mailto: κ.λπ.). Αν δεν ξεκινά — το σύστημα υποθέτει ότι πρόκειται απλώς για ένα domain χωρίς πρωτόκολλο και προσθέτει https:// στην αρχή.

Δηλαδή:

• allegro.pl → https://allegro.pl
• github.com/twoj-profil/projekt → https://github.com/twoj-profil/projekt
• www.gazeta.pl → https://www.gazeta.pl

Και αν κάτι έχει ήδη πρωτόκολλο (ακόμη και αν είναι λανθασμένο), το σύστημα το αφήνει ως έχει και ελέγχει περαιτέρω:

• http://example.com → παραμένει http://example.com (επιτρέπεται)
• ftp://example.com → απορρίπτεται (μόνο http/https)
• javascript:alert(1) → απορρίπτεται (προστασία XSS)

Γιατί εγώ το έχω και οι άλλοι όχι;

Οι περισσότεροι συντομευτές διευθύνσεων (URL shorteners) έχουν τυπική επικύρωση URL μέσω του new URL(string). Ο κατασκευαστής URL στον περιηγητή/JavaScript είναι strict — αν δεν υπάρχει πρωτόκολλο, πετάει σφάλμα. Η προεπιλεγμένη έξοδος για το new URL("allegro.pl") είναι TypeError.

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

Η λύση απαιτεί πέντε γραμμές JavaScript:

function sanitizeUrl(input) {
  const trimmed = input.trim();
  const hasProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed);
  const normalized = hasProtocol ? trimmed : "https://" + trimmed;
  // dalsza walidacja przez new URL(normalized)
}

Πέντε γραμμές κώδικα, δεκάδες δευτερόλεπτα λιγότερης απογοήτευσης ανά χρήστη την ημέρα. Δεν ξέρω γιατί η πλειοψηφία της αγοράς δεν το κάνει. Ίσως επειδή «κατά κανόνα» σημαίνει «έτσι λειτουργεί ο κατασκευαστής URL».

Τα μικροπράγματα στο UX είναι ασύμφωνα σημαντικά

Το cutty.dev έχει μερικά από αυτά τα πράγματα που δεν εμφανίζονται σε κανένα λίστα χαρακτηριστικών, γιατί το καθένα από μόνο του φαίνεται ασήμαντο:

• Καθαρισμός κενών πριν την επικύρωση — το επικολλημένο URL με κενό στο τέλος δεν προκαλεί σφάλμα
• Διατήρηση hash — https://example.com/page#section διατηρεί το #section μετά τη συρρίκνωση
• Διατήρηση query strings — ?utm_source=test περνάει χωρίς κοπή
• Αυτόματη αναβάθμιση πρωτοκόλλου — http:// σε https:// όταν το πηγαίο URL υποστηρίζει TLS (σε σχεδιασμό, όχι ακόμη LIVE)
• IDN domains — źdźbło.pl μετατρέπεται αυτόματα σε punycode
• Πολωνικοί χαρακτήρες στο slug — μετατρέπονται αυτόματα σε ASCII κατά τη δημιουργία του δικού σας καταλήξεως (różowy-link → rozowy-link)
• Ανίχνευση επικίνδυνων πρωτοκόλλων — javascript:, data:, file:, mailto: απορρίπτονται με συγκεκριμένο μήνυμα

Κάθε ένα από αυτά τα λεπτομερή στοιχεία εξοικονομεί σε κάποιον 5-30 δευτερόλεπτα και μια στιγμή ενοχλησης. Μαζί, αυτό αποτελεί τη διαφορά μεταξύ «μου αρέσει αυτή η εφαρμογή» και «λειτουργεί εντάξει».

Τι γίνεται με τις λεπτομέρειες UX

Λίστα με πράγματα που θέλω να κάνω στο μέλλον:

• Έξυπνη επικόλληση — ανιχνεύστε πότε ο χρήστης επικολλά κείμενο που περιέχει URL ανάμεσα σε άλλες λέξεις και εξάγετε μόνο το URL
• Ομαδική επικόλληση — μια λίστα με URL (ένα ανά γραμμή) που έχει επικολληθεί δημιουργεί πολλούς σύντομους συνδέσμους ταυτόχρονα
• Προτεινόμενα slugs — με βάση τον τίτλο της σελίδας προορισμού, προτείνετε 3 εμπορικά καταλήξεις για επιλογή
• Προεπισκόπηση Auto-OG — δείξτε την προεπισκόπηση των καρτών Open Graph αμέσως μετά την επικόλληση του URL, πριν από το κλικ

Κάθε ένα από αυτά είναι επίσης μια «πεντάγραμμη συνάρτηση που μοιάζει με τίποτα». Το σύνολο διαφέρει μεταξύ ενός εργαλείου που είναι εντάξει και ενός εργαλείου που θέλεις να χρησιμοποιείς καθημερινά.

Δοκιμάστε μόνοι σας

Εισάγετε κάτι — allegro.pl ή github.com ή news.ycombinator.com. Το σύστημα θα προσθέσει αυτόματα το πρωτόκολλο και θα προχωρήσει. Χωρίς αναμονή, χωρίς σφάλμα, χωρίς «δοκιμάστε ξανά».

Αν σε ενδιαφέρει αυτός ο τύπος λεπτομέρειας UX, πες μου προς τα πού να προχωρήσω. hello@cutty.dev.