Auto-prefix URL – apró részlet, amely perceket spórol

A linkrövidítő űrlapban beírod, hogy allegro.pl. A legtöbb rövidítő azt fogja mondani, hogy ez nem érvényes URL, és arra kér, hogy írd be újra https:// előtaggal. A cutty.dev egyszerűen automatikusan hozzáadja a https://-t, és folytatja.

Ez olyan funkció, ami alig érdemel említést. A gyakorlatban ez a különbség a következők között van:

• "beillesztettem, van egy rövid linkem, becsukom az ablakot" (2 másodperc)
• "beillesztettem, hibaüzenet, elolvasom az üzenetet, hozzáadom a https-t, újra beillesztem, megvan a link" (15-20 másodperc)

Szorozd meg azzal a számmal, ahányszor egy hónapban bemásolod az URL-t, plusz a hibaüzenet olvasásából fakadó frusztrációval, plusz az „ah, igen, ez a protokoll” pillanattal. Apróság, amelyet személyenként és hónaponként percekben mérünk.

Mit csinál pontosan a cutty.dev

Beillesztettél egy szöveget egy űrlapba. A kiszolgálónak történő elküldés előtt a JavaScript ellenőrzi, hogy egy protokollal (http://, https://, ftp://, mailto: stb.) kezdődik-e. Ha nem kezdődik — a rendszer feltételezi, hogy ez egyszerűen egy domain név protokoll nélkül, és elé teszi az https:// prefixet.

Tehát:

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

Ha egy protokoll már megvan (akár helytelen is), a rendszer hagyja, ahogy van, és tovább ellenőriz:

• http://example.com → marad http://example.com (engedélyezett)
• ftp://example.com → elutasítva (csak http/https)
• javascript:alert(1) → elutasítva (XSS védelem)

Miért ez van meg nekem, és másoknak nem?

A legtöbb URL-rövidítő standard URL-érvényesítést használ a new URL(string) segítségével. A böngészőben/JavaScriptben a URL konstruktor szigorú — ha nincs protokoll, hibát dob. A new URL("allegro.pl") alapértelmezett kimenete TypeError.

Ez a viselkedés a legtöbb alkalmazásnál helyes. De egy linkrövidítő űrlap esetén, ahol a felhasználó egy URL-t illeszt be a címsorból vagy egy másik alkalmazásból, ez a szigorúság akadályt jelent, nem segítséget.

A megoldás öt sor JavaScript-ből áll:

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)
}

Öt sor kód, tizenkét másodperccel kevesebb frusztráció felhasználónként naponta. Nem tudom, miért nem csinálja ezt a piac többsége. Talán mert „szabványos” azt jelenti: „így működik az URL-készítő”.

A részletek a UX-ben aránytalanul fontosak

A cutty.dev-nek több olyan funkciója is van, amelyek nem szerepelnek egyetlen funkciólistában sem, mert külön-külön mindegyik elhanyagolónak tűnik:

• Whitespace levágása a validálás előtt – a végén szóközzel ellátott URL beillesztése nem okoz hibát
• Hash megőrzése — https://example.com/page#section esetén a #section megmarad a rövidítés után is
• Query stringek megőrzése — ?utm_source=test vágás nélkül továbbítódik
• Automatikus protokollfrissítés — http:// átkonvertálódik https-re, ha a forrás URL támogatja a TLS-t (tervezett, még nem LIVE)
• IDN domainek — źdźbło.pl automatikusan punycode-ra konvertálódik
• Lengyel karakterek a slugban — a saját végződés létrehozásakor automatikusan ASCII-ra cserélődnek (różowy-link → rozowy-link)
• Veszélyes protokollok észlelése — javascript:, data:, file:, mailto: konkrét üzenettel elutasítva

Minden egyes részlet 5-30 másodpercet és egy pillanatnyi bosszúságot spórol meg valakinek. Együtt ez a különbség az „tetszik ez az alkalmazás” és a „működik, rendben van” között.

Mi a teendő a UX részletekkel

A jövőben megtenni kívánt dolgok listája:

• Smart paste — érzékeli, ha a felhasználó szöveget illeszt be, amely URL-t tartalmaz más szavak között, és kinyeri az URL-t
• Bulk paste — a beillesztett URL-lista (egy soronként) egyszerre több rövid linket hoz létre
• Suggested slugs — a céloldal címe alapján javasoljon 3 márkás végződést a kiválasztáshoz
• Auto-OG preview — az Open Graph kártyák előnézetét azonnal megjeleníti az URL beillesztése után, a link létrehozása előtt

Mindhárom ezek közül egy „öt soros funkció, amely semminek nem tűnik”. Együttesen ez a különbség az között az eszköz között, ami jó, és az között, amit nap mint nap szeretnél használni.

Próbáld ki magad

Valami beillesztése — allegro.pl vagy github.com vagy news.ycombinator.com. A rendszer automatikusan hozzáadja a protokollt, és továbbhalad. Várakozás nélkül, hiba nélkül, „próbálja újra” üzenet nélkül.

Ha ez a részletes UX-típus érdekel, jelezd, melyik irányba haladjunk tovább. hello@cutty.dev.