Lanjut ke konten utama
cutty.dev
All posts

Auto-prefix URL — hal kecil yang menghemat waktu menit demi menit

cutty.dev mengenali saat Anda menempelkan alamat tanpa https:// dan menambahkannya secara otomatis. Terdengar sepele. Dalam praktiknya, ini adalah perbedaan antara dua detik dengan harus mengeklik 'coba lagi'.

Anda mengetik allegro.pl di formulir. Anda klik. Lalu apa?

Di sebagian besar pemendek URL, Anda akan menerima pesan kesalahan pada saat ini. Sesuatu seperti "ini bukan URL yang valid". Karena tidak ada https:// di depannya. Jadi Anda kembali, menambahkan protokol, mengklik lagi, dan baru sekarang Anda memiliki tautan pendek Anda.

cutty.dev tidak melakukan itu. Ia hanya menempelkan https:// dan lanjut begitu saja, seolah-olah tidak terjadi apa-apa.

Saya tahu bagaimana kedengarannya. Seperti sebuah fitur yang nyaris tidak layak mendapatkan satu paragraf, apalagi seluruh postingan. Namun, saya tetap duduk dan menulis tentang ini, karena detail kecil ini bagi saya adalah manifesto kecil tentang bagaimana cara saya berpikir dalam membangun alat auto-prefix URL dan seluruh kemudahan tak terlihat lainnya.

Dua detik melawan dua puluh

Mari kita hitung. Benar-benar, berdasarkan angka, karena jika tidak, ini hanya sekadar omong kosong.

Jalur pertama: Anda tempel, Anda dapat tautan, tutup jendela. Dua detik. Mungkin tiga.

Jalur kedua: kamu tempel, error, baca pesan (satu atau dua detik untuk memahami apa yang terjadi), tambahkan protokol, klik lagi, baru sekarang link. Lima belas, dua puluh detik. Ditambah momen kecil rasa kesal itu, gumaman pelan "oh iya, protokol", yang jika sendirian tidak memakan biaya, tetapi terus menumpuk.

Dan sekarang kalikan dengan seberapa sering Anda menempelkan sebuah alamat dalam sebulan. Bagi saya, itu puluhan kali. Bagi seseorang yang mengelola tautan secara profesional — ratusan kali. Tiba-tiba detail yang "nyaris tidak berharga" ini terakumulasi menjadi menit setiap bulannya. Per orang.

Inilah aritmetika yang sering dilewatkan oleh kebanyakan orang, karena setiap kasus tunggal tampak terlalu kecil untuk dipedulikan.

Apa sebenarnya yang ada di bawah sana

Mekanismenya sangat sederhana dan saya tidak menyembunyikannya sama sekali. Anda menempelkan teks ke dalam kolom. Sebelum apa pun dikirim ke server, sebuah potongan JavaScript memeriksa apakah apa yang Anda ketik dimulai dengan protokol tertentu — http://, https://, ftp://, mailto:, atau apa pun. Jika tidak dimulai dengan itu, sistem mengasumsikan bahwa yang Anda maksud adalah domain biasa dan menambahkan https:// di depannya.

Dalam praktiknya:

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

Dan jika protokol sudah ada di sana, meskipun aneh, sistem tidak menimpanya. Sistem membiarkannya dan terus memeriksa apa yang harus dilakukan dengan hal tersebut. http://example.com lolos (diizinkan). ftp://example.com dibuang ke tempat sampah, karena kami hanya menerima http dan https. Dan javascript:alert(1) langsung dikeluarkan, karena itu bukan alamat, melainkan upaya untuk menyuntikkan sesuatu yang buruk (klasik XSS, terima kasih, tidak perlu).

Mengapa saya memiliki ini, sementara separuh pasar tidak

Di sini menjadi menarik, karena jawabannya agak lucu.

Cara standar untuk validasi alamat di browser adalah konstruktor new URL(string). Dan konstruktor ini sangat kaku. Tanpa kompromi. Jika tidak ada protokol — ia akan melempar error. new URL("allegro.pl") hanya akan mengembalikan TypeError kepada Anda dan selesai.

Dan tahukah Anda? Ini adalah perilaku yang benar. Untuk sebagian besar aplikasi, inilah yang Anda inginkan. Namun dalam formulir pemendek tautan, di mana seseorang menyalin alamat dari bilah peramban atau dari pesan seseorang, kekakuan ini berubah dari keuntungan menjadi hambatan. Tiba-tiba alat yang seharusnya menghemat waktu Anda justru memaksa Anda untuk memperbaiki sesuatu yang sebenarnya sudah ia pahami dengan sangat baik.

Solusi untuk ini secara harfiah hanya beberapa baris:

function sanitizeUrl(input) {
  const trimmed = input.trim();
  const hasProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed);
  const normalized = hasProtocol ? trimmed : "https://" + trimmed;
  // dalej leci normalna walidacja przez new URL(normalized)
}

Lima baris. Belasan detik lebih sedikit gesekan, setiap hari, bagi siapa saja yang menempelkan alamat. Sejujurnya saya tidak tahu mengapa ini bukan menjadi standar di mana-mana. Saya curiga masalahnya adalah karena "URL constructor memang bekerja seperti itu" dan tidak ada yang mau menyentuhnya. Inersia, bukan niat buruk.

Digresi kecil tentang apa arti "secara standar"

Karena kisah tentang new URL() ini adalah contoh bagus untuk sesuatu yang lebih luas. Banyak hal dalam perangkat lunak yang dianggap sebagai "begitulah cara melakukannya", sebenarnya adalah "begitulah hasil dari pengaturan default suatu pustaka yang tidak pernah dipertanyakan oleh siapa pun". Strict mode konstruktor bukanlah keputusan dari desainer cutty maupun kompetitor — itu adalah keputusan para penulis spesifikasi URL, yang dibuat dalam konteks yang sama sekali berbeda, untuk kegunaan yang sama sekali berbeda.

Dan kemudian seluruh pasar mewarisi pilihan default ini dan menyebutnya sebagai "standar". Saya merasa bahwa produk-produk terbaik lahir tepat di tempat-tempat di mana seseorang berhenti sejenak dan bertanya: tunggu sebentar, apakah perilaku ini benar-benar melayani pengguna saya, atau hanya melayani library saya? Seringkali jawabannya adalah: library. Dan saat itulah layak untuk beralih ke sisi manusia dengan lima baris kode.

Hal-hal kecil ini lebih banyak daripada yang terlihat

Auto-prefix hanyalah salah satu dari banyak elemen seperti itu yang tidak akan Anda temukan di daftar fitur mana pun. Karena jika semuanya dituliskan di sana, masing-masing akan terlihat sangat kecil:

  • pemangkasan spasi sebelum validasi, agar spasi yang tidak sengaja di akhir alamat yang ditempel tidak merusak segalanya
  • mempertahankan jangkar, yaitu #section dalam https://example.com/page#section tidak hilang setelah dipersingkat
  • parameter kueri (?utm_source=test) diteruskan secara utuh, tidak ada yang terpotong di tengah jalan
  • domain dengan karakter Polandia, źdźbło.pl, otomatis dikonversi ke punycode
  • huruf Polandia pada slug kustom diubah menjadi ASCII (różowy-link menjadi rozowy-link)
  • protokol berbahaya — javascript:, data:, file: — ditolak dengan pesan yang spesifik dan mudah dimengerti

(Masih direncanakan untuk peningkatan otomatis http:// ke https:// secara otomatis, ketika server tujuan mendukung enkripsi. Ini saat ini belum berfungsi secara langsung, jadi saya tidak akan berpura-pura.)

Setiap detail ini menghemat lima, sepuluh, tiga puluh detik dan satu helaan napas bagi seseorang. Secara individual tidak ada artinya. Bersama-sama, ini adalah perbedaan antara "berjalan OK" dan "saya suka menggunakannya".

Apa lagi yang ingin saya tambahkan

Daftar keinginan untuk masa depan, karena memikirkannya memberikan saya kegembiraan:

  • tempel cerdas — mendeteksi alamat yang tersembunyi di tengah kalimat dan mengekstrak URL saja dari antara kata-kata
  • tempel massal — daftar alamat, satu per baris, dan setiap alamat langsung menjadi link pendek terpisah
  • saran akhiran — berdasarkan judul halaman tujuan, menyarankan tiga slug bermerek untuk dipilih
  • pratinjau Open Graph segera setelah ditempel, bahkan sebelum Anda mengklik "perpendek"

Setiap bagian dari ini kembali menjadi "fungsi lima baris yang tampak tidak berarti". Dan semuanya bersama-sama? Itulah batas antara alat yang sekadar lumayan, dengan alat yang Anda gunakan setiap hari tanpa berpikir panjang. Jika Anda ingin melihat cara kerjanya sekarang, tempelkan apa pun tanpa protokol di cutty.devallegro.pl, github.com, news.ycombinator.com — dan lihat bahwa tidak ada yang menghambat Anda.

Akhir kata, sedikit secara pribadi

Lama saya berpikir bahwa produk menang karena fitur-fitur besar. Satu hal yang mencolok itu, yang dapat ditampilkan di slide dan akan ditulis oleh orang-orang. Dan ya, terkadang memang begitu.

Semakin lama saya membangun cutty, semakin kuat saya merasa bahwa loyalitas pengguna lahir di tempat lain — dalam ratusan mikrodetik yang tidak disadari oleh siapa pun secara sadar. Anda tidak ingat bahwa alat tersebut secara otomatis menambahkan https:// untuk Anda. Anda hanya mengingat kesan umum bahwa "penggunaannya terasa nyaman", "tidak menyebalkan". Kesan ini tidak muncul begitu saja. Ini terdiri dari puluhan keputusan lima baris yang, jika berdiri sendiri, tidak akan ada yang membela sebagai sesuatu yang "layak membuang waktu".

Mungkin justru di situlah letak keahliannya. Bukan pada satu gerakan besar, melainkan pada kegigihan untuk terus-menerus membela pengguna saat mengisi formulir — bahkan jika itu hanya soal dua detik yang tidak berarti. Dan kamu? Apa hal kecil yang baru-baru ini membuatmu kesal pada sebuah alat, sampai-sampai rasanya malu untuk mengakuinya? Karena biasanya, justru di sanalah pekerjaan terbaik menanti untuk diselesaikan.