Автопрефікс 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 (дозволено)
• ftp://example.com → відхилено (тільки http/https)
• javascript:alert(1) → відхилено (захист від XSS)

Чому це є у мене, а в інших ні

Більшість скорочувачів URL мають стандартну валідацію через new URL(string). Конструктор URL у браузері/JavaScript є суворим — якщо немає протоколу, він видає помилку. Типовий результат для 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 із пробілом у кінці не викликає помилки
• Хеш збережено — https://example.com/page#section зберігає #section після скорочення
• Query-рядки збережено — ?utm_source=test проходить без обрізання
• Автоматичне оновлення протоколу — http:// на https://, коли вихідний URL підтримує TLS (заплановано, ще не LIVE)
• IDN домени — źdźbło.pl автоматично конвертується в punycode
• Польські символи у slug — автоматично замінюються на ASCII при створенні власного закінчення (różowy-link → rozowy-link)
• Виявлення небезпечних протоколів — 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.