सामग्री पर जाएँ
cutty.dev
All posts

ऑटो-प्रीफिक्स यूआरएल - एक छोटी सी बात जो मिनट बचाती है

cutty.dev pehle se hi https:// jod deta hai jab aap bina iske URL paste karte hain. Yeh sunne mein chhota sa lagta hai, lekin prakritik mein yeh do second ke antar aur 'phir se koshish karein' button dabane ke beech ka antar hai.

लिंक शॉर्टनर फॉर्म में आप allegro.pl दर्ज करेंगे। अधिकांश शॉर्टनर आपको बताएंगे कि यह एक मान्य URL नहीं है और आपको आगे https:// के साथ फिर से दर्ज करने को कहेंगे। cutty.dev स्वयं https:// जोड़ देता है और आगे बढ़ता है।

यह एक ऐसे फीचर की तरह लगता है जिसका ज़िक्र करने के योग्य भी नहीं है। व्यावहारिक रूप से, यह इस बात का अंतर है:

  • "मैंने पेस्ट किया, मेरे पास एक छोटा लिंक है, मैं विंडो बंद कर देता हूँ" (2 सेकंड)
  • "मैंने पेस्ट किया, त्रुटि, संदेश पढ़ा, https जोड़ा, फिर से कोशिश की, अब मेरे पास लिंक है" (15-20 सेकंड)

URL को महीने में कितनी बार पेस्ट करते हैं, उसकी संख्या से गुणा करें, साथ ही त्रुटि पढ़ने की निराशा और "अरे हाँ, प्रोटोकॉल" वाले क्षण को जोड़ें। यह एक सूक्ष्म मुद्दा है जिसे व्यक्ति प्रति महीने में मिनटों में मापा जाता है।

cutty.dev ठीक से क्या करता है

आपने फॉर्म में टेक्स्ट पेस्ट किया है। सर्वर को भेजने से पहले, जावास्क्रिप्ट यह जांचता है कि क्या यह किसी प्रोटोकॉल (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 बना रहता है (अनुमत)
  • ftp://example.com → अस्वीकृत (केवल http/https)
  • javascript:alert(1) → अस्वीकृत (XSS सुरक्षा)

मुझे यह क्यों है, और दूसरों को नहीं

अधिकांश URL शॉर्टनर new URL(string) के माध्यम से मानक URL सत्यापन का उपयोग करते हैं। ब्राउज़र/JavaScript में URL कन्स्ट्रक्टर 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 कन्स्ट्रक्टर कैसे काम करता है"।

UX में छोटी-छोटी बातें असमानुपाती रूप से महत्वपूर्ण हैं

cutty.dev में कई ऐसी चीज़ें हैं जो किसी फीचर लिस्ट में नहीं हैं, क्योंकि हर एक अलग-अलग लेने पर वे महत्वहीन लगती हैं:

  • सफाई के लिए अतिरिक्त स्थान हटाएं सत्यापन से पहले — अंत में खाली जगह वाले URL को पेस्ट करने पर कोई त्रुटि नहीं होती
  • हैश सुरक्षित रहता है — https://example.com/page#section संक्षिप्त करने के बाद भी #section को बनाए रखता है
  • क्वेरी स्ट्रिंग्स सुरक्षित रहती हैं — ?utm_source=test बिना काटे गुजर जाता है
  • स्वचालित प्रोटोकॉल अपग्रेड — जब स्रोत URL TLS को संभालता है तो http:// को https:// में बदल देता है (योजनाबद्ध, अभी LIVE नहीं)
  • IDN डोमेन — źdźbło.pl स्वचालित रूप से प्यूनिकोड में परिवर्तित हो जाता है
  • स्लग में पोलिश अक्षर — अपनी अंतिम श्रृंखला बनाते समय स्वचालित रूप से ASCII में बदल दिए जाते हैं (różowy-link → rozowy-link)
  • खतरनाक प्रोटोकॉल का पता लगाएं — javascript:, data:, file:, mailto: को विशिष्ट संदेश के साथ अस्वीकार कर दिया गया है

इन प्रत्येक विवरणों से किसी को 5-30 सेकंड और एक क्षण की परेशानी बचती है। मिलकर यह अंतर लाता है "मुझे यह ऐप पसंद है" और "यह ठीक चल रहा है" के बीच।

UX विवरण के साथ आगे क्या

भविष्य में करने की चीज़ों की सूची:

  • स्मार्ट पेस्ट — पता लगाएं जब उपयोगकर्ता किसी अन्य शब्दों के बीच एक URL वाला टेक्स्ट पेस्ट करता है, केवल URL निकालें
  • बल्क पेस्ट — पेस्ट की गई URL की सूची (प्रति पंक्ति एक) एक साथ कई छोटे लिंक बनाती है
  • सुझाए गए स्लग — लक्ष्य पृष्ठ के शीर्षक के आधार पर, चयन के लिए 3 ब्रांडेड अंत तक सुझाव दें
  • ऑटो-OG पूर्वावलोकन — URL पेस्ट करने के तुरंत बाद और क्लिक करने से पहले Open Graph कार्ड का पूर्वावलोकन दिखाएं

ये सभी "पाँच-पंक्तियों वाला फ़ंक्शन है जो कुछ भी नहीं लगता"। सब मिलाकर, यह उस टूल के बीच अंतर करता है जो ठीक है और वह टूल जिसे आप रोज़ाना उपयोग करना चाहते हैं।

खुद से कोशिश करें

कुछ चिपकाएं — allegro.pl या github.com या news.ycombinator.com. सिस्टम स्वयं प्रोटोकॉल जोड़ देगा और आगे बढ़ेगा। बिना किसी विलंबता के, बिना किसी त्रुटि के, बिना "पुनः प्रयास करें" के संदेश के।

यदि आपको इस प्रकार के UX विवरण में रुचि है, तो बताएं कि आगे किस दिशा में जाना है। hello@cutty.dev।