Auto-prefix URL — дреболия, която спестява минути

В полето за съкращаване на линк ще въведете allegro.pl. Повечето съкращатели ще ви кажат, че това не е правилен URL и ще ви поискат да го въведете отново с https:// отпред. cutty.dev просто сам добавя https:// и продължава.

Това звучи като функционалност, която едва заслужава споменаване. На практика това е разликата между:

• "залепих, имам кратък линк, затварям прозореца" (2 секунди)
• "залепих, грешка, чета съобщението, добавям https, още веднъж, имам линка" (15-20 секунди)

Умножете по броя пъти на месец, когато поставяте URL, плюс фрустрацията от четенето на грешката, плюс момента „ах да, така, протоколът“. Дрибане, което се измерва в минути на месец на човек.

Какво точно прави cutty.dev

Поставили сте текст във формата. Преди да бъде изпратен до сървъра, JavaScript проверява дали започва с някакъв протокол (http://, https://, ftp://, mailto: и т.н.). Ако не започва така — системата приема, че това е просто домейн без протокол и добавя 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 (allowed)
• ftp://example.com → отхвърлено (само http/https)
• javascript:alert(1) → отхвърлено (XSS protection)

Защо аз го имам, а другите не

Повечето съкращатели имат стандартна валидация на 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 преминава без прекъсване
• Automatic protocol upgrade — от http:// на https://, когато изходният URL поддържа TLS (планирано, все още не е LIVE)
• IDN domains — źdźbło.pl се конвертира автоматично в punycode
• Полски знаци в slug — автоматично се заменят с ASCII при създаване на собствено завършване (różowy-link → rozowy-link)
• Detect dangerous protocols — javascript:, data:, file:, mailto: се отхвърлят с конкретно съобщение

Всеки от тези детайли спестява на някого 5-30 секунди и момент на раздразнение. Заедно това е разликата между „харесвам това приложение“ и „работи ОК“.

Какво следва с UX на детайлите

Списък с неща, които искам да направя в бъдеще:

• Smart paste — открийте, когато потребителят постави текст, съдържащ URL между други думи, и извлечете само самия URL
• Bulk paste — поставеният списък с URL адреси (по един на ред) създава множество кратки линкове едновременно
• Suggested slugs — въз основа на заглавието на целевата страница, предложете 3 брандирани завършека за избор
• Auto-OG preview — покажете преглед на Open Graph картини веднага след поставяне на URL, преди да кликнете върху съкращенията

Всяко от тези също е „петредочна функция, която не изглежда като нищо“. Всичко заедно прави разликата между инструмента, който е ОК, и инструмента, който искаш да използваш всеки ден.

Опитай сам

Постави нещо — allegro.pl или github.com или news.ycombinator.com. Системата сама ще добави протокола и ще продължи напред. Без чакане, без грешка, без "опитай отново".

Ако този тип детайл в UX ви интересува — дайте знак в коя посока да продължа. hello@cutty.dev.