Auto-přidání URL – maličkost, která šetří minuty

V formuláři pro zkracování odkazu zadáš allegro.pl. Většina zkracovačů ti řekne, že to není platná URL, a požádá tě o zadání znovu s https:// na začátku. cutty.dev si https:// přidá sám a pokračuje dál.

To zní jako funkce, která sotva stojí za zmínku. V praxi je to rozdíl mezi:

• "vložil jsem, mám krátký odkaz, zavírám okno" (2 sekundy)
• "vložil jsem, chyba, čtu zprávu, přidávám https, znovu, mám odkaz" (15–20 sekund)

Vynásobte počtem případů za měsíc, kdy vkládáte URL, plus frustrací z čtení chyby a momentem „aha, jo, ten protokol“. Detail, který se měří minutami za měsíc na osobu.

Co přesně dělá cutty.dev

Vložil jsi text do formuláře. Před odesláním na server JavaScript kontroluje, zda začíná nějakým protokolem (http://, https://, ftp://, mailto: atd.). Pokud nezačíná — systém předpokládá, že jde pouze o doménu bez protokolu, a přidává https:// na začátek.

Tedy:

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

A pokud má protokol už něco (i když nesprávně), systém ponechá vše tak, jak je, a pokračuje v kontrole:

• http://example.com → zůstane http://example.com (povoleno)
• ftp://example.com → odmítnuto (pouze http/https)
• javascript:alert(1) → odmítnuto (ochrana proti XSS)

Proč mám tohle, ale ostatní ne

Většina zkracovačů má standardní validaci URL pomocí new URL(string). Konstruktor URL v prohlížeči/JavaScriptu je strict — pokud chybí protokol, vyhodí chybu. Výchozí výstup pro new URL("allegro.pl") je TypeError.

To je správné chování pro většinu aplikací. Ale u formuláře na zkracování odkazů, kde uživatel vloží URL zkopírovanou z adresního řádku nebo z jiné aplikace, je tato přísnost překážkou místo pomoci.

Řešení zabere pět řádků JavaScriptu:

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

Pět řádků kódu, o několik sekund méně frustrace na uživatele za den. Nevím, proč to většina trhu nedělá. Možná proto, že „standardně“ znamená „tak funguje konstruktor URL“.

Detaily v UX jsou neúměrně důležité

cutty.dev má několik takových věcí, které nejsou v žádném seznamu funkcí, protože každá zvlášť zní zanedbatelně:

• Oříznout bílé znaky před validací – vložená URL s mezerou na konci nezpůsobí chybu
• Hash zachován — https://example.com/page#section zachovává #section po zkrácení
• Query stringy zachovány — ?utm_source=test prochází bez oříznutí
• Automatický upgrade protokolu — http:// na https://, když zdrojová URL podporuje TLS (plánováno, ještě není LIVE)
• IDN domény — źdźbło.pl se automaticky převede na punycode
• Polské znaky v slugu — automaticky nahrazovány ASCII při vytváření vlastní koncovky (różowy-link → rozowy-link)
• Detekce nebezpečných protokolů — javascript:, data:, file:, mailto: zamítnuty s konkrétním zprávu

Každý z těchto detailů ušetří někomu 5–30 sekund a okamžik podráždění. Dohromady je to rozdíl mezi „líbí se mi tato aplikace“ a „funguje to OK“.

Co dál s detaily UX

Seznam věcí, které chci v budoucnu udělat:

• Smart paste — detekujte, když uživatel vloží text obsahující URL mezi jinými slovy, extrahujte samotnou URL
• Bulk paste — vložený seznam URL (jedna na řádek) vytvoří mnoho krátkých odkazů najednou
• Suggested slugs — na základě názvu cílové stránky navrhněte 3 značkové koncovky k výběru
• Auto-OG preview — zobrazte náhled karet Open Graph ihned po vložení URL, před zkrácením

Každá z nich je také „pětiřádková funkce, která vypadá jako nic“. Celkově se liší mezi nástrojem, který je v pořádku, a nástrojem, který chcete používat každý den.

Zkuste to sami

Vložte něco — allegro.pl nebo github.com nebo news.ycombinator.com. Systém sám přidá protokol a pokračuje dál. Bez čekání, bez chyby, bez „zkuste to znovu“.

Pokud tě zajímá tento typ detailu UX, dej vědět, kterým směrem se vydat dál. hello@cutty.dev.