Перейти к основному содержимому
cutty.dev
All posts

Auto-prefix URL — мелочь, которая экономит минуты

cutty.dev распознает, когда вы вставляете адрес без https://, и сам его добавляет. Звучит пустяково. На практике это разница между двумя секундами и нажатием кнопки «попробовать еще раз».

В форме сокращения ссылки вы введете 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 — если протокол отсутствует, он выбрасывает ошибку. Дефолтный output для 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 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.