אוטו-פריקס URL - פרט קטן שחוסך דקות

בטופס לקיצור הקישור תזין allegro.pl. רוב משרתי קיצור הקישורים יאמרו לך שזהו אינו כתובת URL תקינה ויבקשו ממך להזין אותה שוב עם https:// בתחילתה. cutty.dev פשוט תוסיף את https:// בעצמה ותמשיך הלאה.

זה נשמע כמו תכונה שכמעט לא ראוייה להזכרה. בפועל, ההבדל הוא בין:

• "הדבקתי, יש לי קישור קצר, אני סוגר את החלון" (2 שניות)
• "הדבקתי, שגיאה, אני קורא את ההודעה, מוסיף https, שוב, יש לי קישור" (15-20 שניות)

כפול את מספר הפעמים בחודש שבהן אתה מדביק כתובת 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 (מוותר)
• ftp://example.com → נדחה (רק http/https)
• javascript:alert(1) → נדחה (הגנה מפני XSS)

למה שיש לי את זה ואחרים לא

רוב מקצרי הקישורים מבצעים תוקפנות (validation) סטנדרטית של כתובות URL באמצעות new URL(string). הקונסטרוקטור URL בדפדפן/ב-JavaScript הוא strict — אם אין פרוטוקול, הוא זורק שגיאה. הפלט המובנה עבור new URL("allegro.pl") הוא TypeError.

זהו התנהגות תקונה עבור רוב האפליקציות. אך עבור טופס קיצור קישורים, שבו המשתמש מדביק כתובת URL שהועתקה משורת הכתובת או מאפליקציה אחרת, הקפדנות הזו היא מכשול במקום עזרה.

הפתרון דורש חמישה שורות קוד ב-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)
}

חמישה שורות קוד, עשרות שניות פחות תסכול למשתמש ביום. אני לא יודע למה רוב השוק לא עושה את זה. אולי כי "סטנדרטי" משמעו "הקונסטרוקטור של URL עובד כך".

הפרטים הקטנים ב-UX חשובים באופן לא פרופורציונלי

cutty.dev כוללת מספר דברים כאלה שאינם מופיעים ברשימת התכונות, כי כל אחד מהם בנפרד נשמע טריוויאלי:

• ניקוי רווחים לפני אימות – קישור עם רווח בסוף לא יגרום לשגיאה
• שמירה על חלק ה-hash — https://example.com/page#section שומר את #section לאחר הקיצור
• שמירה על פרמטרי שאילתה — ?utm_source=test עובר ללא גזירה
• שדרוג אוטומטי של פרוטוקול — http:// הופך ל-https:// כאשר המקור תומך ב-TLS (מתוכנן, עדיין לא LIVE)
• דומיינים IDN — źdźbło.pl מומר אוטומטית לפוניקוד
• תווים פולניים ב-slug — מוחלפים ל-ASCII באופן אוטומטי בעת יצירת סיומת אישית (różowy-link → rozowy-link)
• זיהוי פרוטוקולים מסוכנים — javascript:, data:, file:, mailto: נדחים עם הודעה ספציפית

כל אחד מהפרטים הללו חוסך למישהו 5–30 שניות ורגע של תסכול. יחד, זה ההבדל בין "אני אוהב את האפליקציה הזו" לבין "זה עובד בסדר".

מה קורה הלאה עם פרטי חוויית המשתמש (UX)

רשימת הדברים שאני רוצה לעשות בעתיד:

• הדבקה חכמה — זיהוי כאשר משתמש מדביק טקסט המכיל כתובת URL בתוך מילים אחרות, וחילוץ כתובת ה-URL בלבד
• הדבקה בכמות גדולה — הדבקת רשימת כתובות URL (אחת לכל שורה) יוצרת מספר קישורים קצרים בו זמנית
• סלוגנים מומלצים — בהתבסס על כותרת הדף היעד, הצע 3 סיומות ממותגות לבחירה
• תצוגה מקדימה אוטומטית של Open Graph — הצג תצוגה מקדימה של כרטיסי Open Graph מיד לאחר הדבקת כתובת ה-URL, לפני לחיצה על הקישור

גם כל אחת מהן היא "פונקציה חמש-שורותית שנראית כמו כלום". ההבדל בין כלי שהוא בסדר לבין כלי שאתה רוצה להשתמש בו מדי יום נובע מהשילוב של כולם יחד.

נסה בעצמך

הדבק משהו — allegro.pl או github.com או news.ycombinator.com. המערכת תוסיף את הפרוטוקול ותמשיך הלאה. בלי המתנה, בלי שגיאה, בלי "נסה שוב".

אם סוג זה של פרט UX מעניין אותך – תן לי לדעת לאיזה כיוון להמשיך. שלח הודעה ל-hello@cutty.dev.