Auto-prefix URL – detaliu care economisește minute

În formularul de scurtare a link-ului vei introduce allegro.pl. Majoritatea serviciilor de scurtare îți vor spune că acesta nu este un URL valid și îți vor cere să îl introduci din nou, adăugând https:// la început. cutty.dev va adăuga automat https:// și va continua procesul.

Asta sună ca o funcționalitate care abia merită menționată. În practică, este diferența dintre:

• "am lipit, am un link scurt, închid fereastra" (2 secunde)
• "am lipit, eroare, citesc mesajul, adaug https, din nou, am link-ul" (15-20 secunde)

Înmulțește cu numărul de ori pe lună când lipești URL-ul, plus frustrarea de a citi eroarea, plus momentul „ah, da, protocolul”. Detaliu care se măsoară în minute pe lună per persoană.

Ce face exact cutty.dev

Ai lipit textul în formular. Înainte de a trimite către server, JavaScript verifică dacă începe cu un anumit protocol (http://, https://, ftp://, mailto: etc.). Dacă nu începe astfel — sistemul presupune că este doar o domeniu fără protocol și adaugă https:// la început.

Adică:

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

I dacă ceva are deja un protocol (chiar și unul incorect), sistemul lasă lucrurile așa cum sunt și continuă verificarea:

• http://example.com → rămâne http://example.com (permis)
• ftp://example.com → respins (doar http/https)
• javascript:alert(1) → respins (protecție XSS)

De ce am eu asta, iar alții nu?

Majoritatea scurtătoarelor au o validare standard a URL-ului prin new URL(string). Constructorul URL din browser/JavaScript este strict — dacă lipsește protocolul, aruncă o eroare. Output-ul implicit pentru new URL("allegro.pl") este TypeError.

Acesta este un comportament corect pentru majoritatea aplicațiilor. Dar pentru un formular de scurtare a link-urilor, unde utilizatorul lipește un URL copiat din bara de adresă sau din altă aplicație, această rigiditate este o obstacol în loc de ajutor.

Soluția ocupă cinci linii de 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)
}

Cinci linii de cod, câteva secunde mai puțin de frustrare per utilizator pe zi. Nu știu de ce majoritatea pieței nu face asta. Poate pentru că „standard” înseamnă „așa funcționează constructorul URL”.

Detaliile din UX sunt disproporționat de importante

cutty.dev are câteva astfel de lucruri care nu sunt în niciun lista de funcționalități, deoarece fiecare luată individual sună insignifiant:

• Elimină spațiile albe înainte de validare — un URL lipit cu spațiu la final nu provoacă eroare
• Hash păstrat — https://example.com/page#section păstrează #section după scurtare
• Șirurile de interogare păstrate — ?utm_source=test trece fără a fi tăiat
• Actualizare automată a protocolului — http:// devine https:// când URL-ul sursă suportă TLS (planificat, încă nu LIVE)
• Domenii IDN — źdźbło.pl este convertit automat în punycode
• Caractere poloneze în slug — convertite automat în ASCII la crearea unui sufix personalizat (różowy-link → rozowy-link)
• Detectează protocoalele periculoase — javascript:, data:, file:, mailto: sunt respinse cu un mesaj specific

Fiecare dintre aceste detalii economisește cuiva între 5 și 30 de secunde și un moment de irritare. Împreună, aceasta face diferența între „îmi place această aplicație” și „funcționează OK”.

Ce urmează pentru detaliile UX

Lista lucrurilor pe care vreau să le fac în viitor:

• Lipire inteligentă — detectează când utilizatorul lipește text care conține un URL între alte cuvinte și extrage doar URL-ul
• Lipire în masă — o listă de URL-uri lipite (câte unul pe linie) generează simultan mai multe linkuri scurte
• Sugestii de slug-uri — pe baza titlului paginii țintă, propune 3 sufixe personalizate dintre care utilizatorul poate alege
• Previzualizare automată OG — afișează previzualizarea cardurilor Open Graph imediat după lipirea URL-ului, înainte de a face clic pentru a crea linkul scurt

Fiecare dintre acestea este, de asemenea, o „funcție pe cinci linii care arată ca nimic”. Împreună, diferența constă între un instrument care este OK și unul pe care vrei să îl folosești zilnic.

Încearcă singur

Inserează ceva — allegro.pl sau github.com sau news.ycombinator.com. Sistemul va adăuga automat protocolul și va continua. Fără așteptare, fără eroare, fără „încearcă din nou".

Dacă acest tip de detaliu UX te interesează – anunță-mă în ce direcție să merg mai departe. hello@cutty.dev.