رفتن به محتوا
cutty.dev
All posts

Auto-prefix URL — جزئیاتی که دقیقه‌ها را ذخیره می‌کند

cutty.dev تشخیص می‌دهد که وقتی آدرسی را بدون https:// می‌چسبانید، خودش آن را اضافه می‌کند. شاید ناچیز به نظر برسد، اما در عمل تفاوت بین دو ثانیه و کلیک کردن روی «دوباره تلاش کن» است.

در فرم کوتاه‌کننده لینک، allegro.pl را وارد خواهید کرد. اکثر کوتاه‌کننده‌ها به شما خواهند گفت که این یک URL صحیح نیست و از شما می‌خواهند دوباره آن را با https:// در ابتدا وارد کنید. cutty.dev به سادگی خودش https:// را اضافه کرده و ادامه می‌دهد.

این شبیه به ویژگی‌ای است که به سختی ارزش ذکر شدن دارد. در عمل، این تفاوت بین موارد زیر است:

  • «چسباندم، لینک کوتاه دارم، پنجره را می‌بندم» (۲ ثانیه)
  • «چسباندم، خطا، پیام را می‌خوانم، https را اضافه می‌کنم، دوباره، لینک را دارم» (۱۵-۲۰ ثانیه)

تعداد دفعاتی که در ماه یک 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 است — اگر پروتکل وجود نداشته باشد، خطا می‌دهد. خروجی پیش‌فرض برای new URL("allegro.pl") یک TypeError است.

این رفتار برای اکثر اپلیکیشن‌ها صحیح است. اما برای فرم کوتاه‌کننده لینک، جایی که کاربر یک URL کپی شده از نوار آدرس یا از اپلیکیشن دیگری را می‌چسباند، این سخت‌گیری به جای کمک، یک مانع است.

راه حل پنج خط جاوااسکریپت را اشغال می‌کند:

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 constructor این‌گونه کار می‌کند».

جزئیات در UX به طور نامتناسبی مهم هستند

cutty.dev دارای ده ها مورد از این دست است که در هیچ لیست ویژگی‌ای (feature list) وجود ندارند، زیرا هر کدام به تنهایی بی‌اهمیت به نظر می‌رسند:

  • حذف فاصله‌های اضافی (Trim whitespace) قبل از اعتبارسنجی — URL چسبانده شده با فاصله در انتها باعث خطا نمی‌شود
  • حفظ هش (Hash zachowany) — https://example.com/page#section بخش #section را پس از کوتاه شدن حفظ می‌کند
  • حفظ رشته‌های پرس‌وجو (Query strings zachowane) — ?utm_source=test بدون قطع شدن عبور می‌کند
  • ارتقای خودکار پروتکل (Automatic protocol upgrade) — تغییر http:// به https:// زمانی که URL منبع از TLS پشتیبانی می‌کند (برنامه‌ریزی شده، هنوز LIVE نیست)
  • دامنه‌های IDN — źdźbło.pl به‌طور خودکار به punycode تبدیل می‌شود
  • کاراکترهای خاص در اسلاگ (Polskie znaki w slug) — هنگام ایجاد انتهای سفارشی، به‌طور خودکار به ASCII تبدیل می‌شوند (różowy-link → rozowy-link)
  • تشخیص پروتکل‌های خطرناک (Detect dangerous protocols) — javascript:, data:, file:, mailto: با یک پیام مشخص رد می‌شوند

هر یک از این جزئیات، ۵ تا ۳۰ ثانیه و لحظه‌ای از کلافگی را برای کسی ذخیره می‌کند. در مجموع، این تفاوت بین «این اپلیکیشن را دوست دارم» و «کارش خوب است» است.

در ادامه با تجربه کاربری (UX) جزئیات چه کنیم؟

لیست کارهایی که می‌خواهم در آینده انجام دهم:

  • Smart paste — تشخیص زمانی که کاربر متنی حاوی URL را در میان کلمات دیگر پیست می‌کند، استخراج خودِ URL
  • Bulk paste — لیست پیست شده از URLها (یک مورد در هر خط) به طور همزمان چندین لینک کوتاه ایجاد می‌کند
  • Suggested slugs — بر اساس عنوان صفحه مقصد، ۳ انتهای اختصاصی (slug) برای انتخاب پیشنهاد دهید
  • Auto-OG preview — نمایش پیش‌نمایش کارت‌های Open Graph بلافاصله پس از پیست کردن URL، پیش از کلیک روی لینک کوتاه شده

هر یک از این‌ها نیز «یک تابع پنج‌خطی است که هیچ شباهتی به هیچ چیز ندارد». همه این‌ها با هم تفاوت دارند بین ابزاری که خوب است و ابزاری که می‌خواهید هر روز از آن استفاده کنید.

خودتان امتحان کنید

چیزی را اینجا بچسبانید — allegro.pl یا github.com یا news.ycombinator.com. سیستم خودش پروتکل را اضافه می‌کند و ادامه می‌دهد. بدون انتظار، بدون خطا، بدون "دوباره تلاش کنید".

اگر این نوع از جزئیات UX برای شما جالب است — به من اطلاع دهید که در چه جهتی ادامه دهم. hello@cutty.dev.