Otomatik ön ek URL - dakikalar kazandıran küçük detay

Bağlantı kısaltma formunda allegro.pl gireceksiniz. Çoğu kısaltıcı bunun geçerli bir URL olmadığını söyleyecek ve başına https:// ekleyip tekrar girmenizi isteyecektir. cutty.dev ise otomatik olarak https:// ekler ve devam eder.

Bu, bahsedilmeye bile değmeyecek bir özellik gibi duyuluyor. Pratikte bu şu fark arasında:

• "yapıştırdım, kısa bir bağlantım var, pencereyi kapatıyorum" (2 saniye)
• "yapıştırdım, hata, mesajı okuyorum, https ekliyorum, tekrar deniyorum, bağlantıya sahibim" (15-20 saniye)

URL’yi yapıştırdığınızda ay içindeki sayıya, hatayı okumanın yarattığı hayal kırıklığına ve “ah evet, protokol” anına çarpın. Kişi başı aylık dakikalarla ölçülen bir detay.

cutty.dev tam olarak ne yapar

Formülde metni yapıştırdınız. Sunucuya gönderilmeden önce JavaScript, metnin herhangi bir protokol (http://, https://, ftp://, mailto: vb.) ile başlayıp başlamadığını kontrol eder. Eğer başlamıyorsa sistem bunu protokol içermeyen bir alan adı olarak kabul eder ve önüne https:// ekler.

Yani:

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

Eğer bir şey zaten bir protokole sahipse (yanlış olsa bile), sistem olduğu gibi bırakır ve devamını kontrol eder:

• http://example.com → http://example.com olarak kalır (allowed)
• ftp://example.com → reddedilir (sadece http/https)
• javascript:alert(1) → reddedilir (XSS koruması)

Neden bunu ben yapıyorum, diğerleri yapmıyor

Çoğu kısaltıcı, new URL(string) aracılığıyla standart URL doğrulaması yapar. Tarayıcıda/Javascript'te URL constructor'ı stricttir — protokol yoksa hata fırlatır. new URL("allegro.pl") için varsayılan çıktı TypeError'dir.

Bu, çoğu uygulama için doğru bir davranıştır. Ancak kullanıcının adres çubuğundan veya başka bir uygulamadan kopyaladığı URL'yi yapıştırdığı kısaltma formu için bu katılık yardım yerine engel teşkil eder.

Çözüm beş satır JavaScript alır:

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

Beş satır kod, kullanıcı başına günde birkaç saniye daha az hayal kırıklığı. Piyasanın çoğunun bunu neden yapmadığını bilmiyorum. Belki de "standart" demek "URL oluşturucu böyle çalışıyor" anlamına geliyor.

UX'de küçük detaylar orantısız derecede önemlidir

cutty.dev'de, her biri tek başına önemsiz göründüğü için hiçbir özellik listesinde yer almayan birkaç tane böyle şey var:

• Boşlukları temizle doğrulama öncesi — sonunda boşluk içeren yapıştırılan URL hata vermez
• Hash korunur — https://example.com/page#section kısaltıldıktan sonra da #section kısmı korunur
• Sorgu dizeleri korunur — ?utm_source=test kesilmeden geçer
• Otomatik protokol yükseltme — kaynak URL TLS desteklediğinde http:// → https:// (planlandı, henüz LIVE değil)
• IDN alan adları — źdźbło.pl otomatik olarak punycode'a dönüştürülür
• Slug içindeki Lehçe karakterler — özel son ek oluşturulurken ASCII'ye otomatik çevrilir (różowy-link → rozowy-link)
• Tehlikeli protokolleri algıla — javascript:, data:, file:, mailto: belirli bir mesajla reddedilir

Bu detayların her biri birine 5-30 saniye ve bir öfke anı kazandırır. Birlikte bu, "bu uygulamayı seviyorum" ile "tamam çalışıyor" arasındaki farktır.

UX detayları ile ilgili olarak bundan sonra ne olacak?

Gelecekte yapmak istediğim şeylerin listesi:

• Akıllı yapıştırma — kullanıcının başka kelimeler arasında URL içeren bir metni yapıştırdığında URL'yi algıla ve yalnızca URL'yi çıkar
• Toplu yapıştırma — yapıştırılan URL listesi (her satıra bir tane) aynı anda birçok kısa link oluşturur
• Önerilen slug'lar — hedef sayfanın başlığına dayanarak, seçim için 3 marka son eki öner
• Otomatik OG önizlemesi — URL yapıştırıldıktan hemen sonra ve kısaltmadan önce Open Graph kartlarının önizlemesini göster

Bunların her biri de "hiçbir şey gibi görünen beş satırlık bir fonksiyon". Hepsi birlikte, tamam olan araç ile günlük olarak kullanmak istediğiniz araç arasındaki farkı oluşturur.

Kendin dene

Bir şey yapıştırın — allegro.pl veya github.com veya news.ycombinator.com. Sistem protokolü otomatik olarak ekleyecek ve devam edecektir. Bekleme yok, hata yok, "yeniden deneyin" mesajı yok.

Bu tür bir UX detayı seni ilgilendiriyorsa — ileride hangi yöne gitmemiz gerektiğini belirt. hello@cutty.dev.