Auto-prefiks URL - detail kecil yang menghemat waktu

Dalam formulir pemendek tautan, Anda akan memasukkan allegro.pl. Sebagian besar layanan pemendek tautan akan memberi tahu Anda bahwa itu bukan URL yang valid dan meminta Anda memasukkannya lagi dengan menambahkan https:// di depannya. cutty.dev secara otomatis akan menambahkan https:// dan melanjutkan.

Ini terdengar seperti fitur yang hampir tidak layak untuk disebutkan. Dalam praktiknya, ini adalah perbedaan antara:

• "saya menempelkan, saya mendapatkan tautan pendek, saya menutup jendela" (2 detik)
• "saya menempelkan, kesalahan, saya membaca pesan, menambahkan https, lagi-lagi, saya mendapatkan tautan" (15-20 detik)

Kalikan dengan jumlah kali dalam sebulan saat Anda menempelkan URL, ditambah frustrasi membaca pesan kesalahan, ditambah momen “ah ya begitu protokolnya”. Detail kecil yang diukur dalam hitungan menit per orang per bulan.

Apa yang sebenarnya dilakukan oleh cutty.dev

Anda telah menempelkan teks ke dalam formulir. Sebelum dikirim ke server, JavaScript memeriksa apakah teks tersebut dimulai dengan protokol tertentu (http://, https://, ftp://, mailto: dll.). Jika tidak dimulai dengan salah satunya — sistem menganggapnya sebagai domain tanpa protokol dan menambahkan https:// di depannya.

Jadi:

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

Dan jika sudah ada protokol (bahkan jika tidak tepat), sistem membiarkannya apa adanya dan melanjutkan pemeriksaan:

• http://example.com → tetap http://example.com (diperbolehkan)
• ftp://example.com → ditolak (hanya http/https)
• javascript:alert(1) → ditolak (perlindungan XSS)

Kenapa ini terjadi padaku, tapi tidak pada orang lain?

Kebanyakan pemendek URL memiliki validasi URL standar melalui new URL(string). Konstruktor URL di browser/JavaScript bersifat strict — jika tidak ada protokol, ia akan melempar kesalahan. Output default untuk new URL("allegro.pl") adalah TypeError.

Ini adalah perilaku yang benar untuk sebagian besar aplikasi. Namun, untuk formulir pemendek tautan, di mana pengguna menempelkan URL yang disalin dari bilah alamat atau aplikasi lain, ketatness ini menjadi hambatan daripada bantuan.

Solusi ini membutuhkan lima baris kode 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)
}

Lima baris kode, belasan detik lebih sedikit frustrasi per pengguna per hari. Saya tidak tahu mengapa sebagian besar pasar tidak melakukannya. Mungkin karena “standar” berarti “begitulah cara kerja konstruktor URL”.

Detail kecil dalam UX sangat penting

cutty.dev memiliki beberapa hal yang tidak ada dalam daftar fitur apa pun, karena masing-masing terdengar sepele jika dilihat secara terpisah:

• Trim whitespace sebelum validasi — URL yang disalin dengan spasi di akhir tidak menyebabkan kesalahan
• Hash tetap dipertahankan — https://example.com/page#section mempertahankan #section setelah pemendekan
• Query strings tetap dipertahankan — ?utm_source=test melewati tanpa dipotong
• Peningkatan protokol otomatis — http:// menjadi https:// ketika URL sumber mendukung TLS (direncanakan, belum LIVE)
• Domain IDN — źdźbło.pl dikonversi secara otomatis ke punycode
• Karakter Polandia dalam slug — secara otomatis diubah menjadi ASCII saat membuat akhiran kustom (różowy-link → rozowy-link)
• Deteksi protokol berbahaya — javascript:, data:, file:, mailto: ditolak dengan pesan spesifik

Setiap detail tersebut menghemat waktu 5–30 detik dan momen frustrasi bagi seseorang. Bersama-sama, hal itu menjadi perbedaan antara “saya suka aplikasi ini” dengan “berjalan baik-baik saja”.

Apa selanjutnya dengan detail UX

Daftar hal-hal yang ingin saya lakukan di masa depan:

• Smart paste — deteksi ketika pengguna menempelkan teks yang berisi URL di antara kata-kata lain, ekstrak hanya URL tersebut
• Bulk paste — daftar URL yang ditempelkan (satu per baris) membuat banyak tautan pendek secara bersamaan
• Suggested slugs — berdasarkan judul halaman tujuan, usulkan 3 akhiran slug merek untuk dipilih
• Auto-OG preview — tampilkan pratinjau kartu Open Graph segera setelah URL ditempelkan, sebelum klik

Setiap dari ini juga merupakan "fungsi lima baris yang tampak seperti tidak ada apa-apanya". Secara keseluruhan, perbedaannya terletak antara alat yang hanya cukup baik dan alat yang ingin Anda gunakan setiap hari.

Coba sendiri

Tempelkan sesuatu — allegro.pl atau github.com atau news.ycombinator.com. Sistem akan menambahkan protokol secara otomatis dan melanjutkan. Tanpa menunggu, tanpa error, tanpa "coba lagi".

Jika detail UX ini menarik minat Anda — beri tahu kami ke arah mana harus melanjutkan. hello@cutty.dev.