Auto-Prefix-URL – ein Detail, das Minuten spart

Im Formularz zur Linkverkürzung gibst du allegro.pl ein. Die meisten Verkürzer werden dir mitteilen, dass dies keine gültige URL ist und dich auffordern, sie erneut mit https:// am Anfang einzugeben. cutty.dev fügt https:// einfach automatisch hinzu und fährt fort.

Das klingt nach einem Feature, das kaum einer Erwähnung wert ist. In der Praxis ist es der Unterschied zwischen:

• "eingefügt, kurzer Link, Fenster schließen" (2 Sekunden)
• "eingefügt, Fehler, Nachricht lesen, https hinzufügen, nochmal, habe Link" (15-20 Sekunden)

Multipliziere mit der Anzahl der Male im Monat, an denen du die URL einfügst, plus die Frustration beim Lesen des Fehlers, plus den Moment „Ah, ja, das Protokoll“. Ein Detail, das sich auf Minuten pro Person und Monat beläuft.

Was genau macht cutty.dev

Du hast Text in das Formular eingefügt. Vor dem Senden an den Server prüft JavaScript, ob der Text mit einem Protokoll beginnt (http://, https://, ftp://, mailto: usw.). Wenn nicht — geht das System davon aus, dass es sich lediglich um eine Domain ohne Protokoll handelt und fügt https:// am Anfang hinzu.

Also:

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

Und wenn etwas bereits ein Protokoll hat (auch wenn es falsch ist), lässt das System es unverändert und prüft weiter:

• http://example.com → bleibt http://example.com (erlaubt)
• ftp://example.com → abgelehnt (nur http/https)
• javascript:alert(1) → abgelehnt (XSS-Schutz)

Warum habe ich das und andere nicht?

Die meisten URL-Kürzer verwenden eine standardmäßige URL-Validierung durch new URL(string). Der Konstruktor URL im Browser/JavaScript ist strict — wenn kein Protokoll vorhanden ist, wirft er einen Fehler. Die Standardausgabe für new URL("allegro.pl") ist TypeError.

Dies ist das korrekte Verhalten für die meisten Anwendungen. Aber für einen Link-Kürzungs-Formular, wo der Benutzer eine URL aus der Adressleiste oder einer anderen Anwendung einfügt, ist diese Strenge ein Hindernis statt einer Hilfe.

Die Lösung benötigt fünf Zeilen 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)
}

Fünf Codezeilen, ein paar Sekunden weniger Frustration pro Benutzer pro Tag. Ich weiß nicht, warum die meisten Anbieter des Marktes das nicht tun. Vielleicht, weil „standardmäßig“ bedeutet: „So funktioniert der URL-Konstruktor“.

Kleinigkeiten im UX sind unverhältnismäßig wichtig

cutty.dev hat einige solcher Dinge, die nicht in einer Feature-Liste stehen, weil jede einzelne für sich belanglos klingt:

• Leerzeichen entfernen vor der Validierung — eine eingefügte URL mit einem Leerzeichen am Ende verursacht keinen Fehler
• Hash erhalten — https://example.com/page#section behält #section nach der Kürzung
• Query-Strings erhalten — ?utm_source=test wird ohne Abschneiden durchgereicht
• Automatisches Protokoll-Upgrade — http:// wird zu https://, wenn die Quell-URL TLS unterstützt (geplant, noch nicht LIVE)
• IDN-Domains — źdźbło.pl wird automatisch in Punycode konvertiert
• Polnische Zeichen im Slug — werden beim Erstellen eines eigenen Endteils automatisch in ASCII umgewandelt (różowy-link → rozowy-link)
• Gefährliche Protokolle erkennen — javascript:, data:, file:, mailto: werden mit einer spezifischen Meldung abgelehnt

Jeder dieser Details spart jemandem 5–30 Sekunden und einen Moment der Irritation. Zusammen macht das den Unterschied zwischen „Ich mag diese App“ und „Sie funktioniert okay“.

Was passiert mit den UX-Details?

Liste der Dinge, die ich in der Zukunft tun möchte:

• Smart Paste — erkennt, wenn ein Benutzer Text mit einer URL zwischen anderen Wörtern einfügt, und extrahiert die URL allein
• Bulk Paste — eine eingefügte Liste von URLs (eine pro Zeile) erstellt mehrere kurze Links gleichzeitig
• Vorgeschlagene Slugs — basierend auf dem Titel der Zielseite werden 3 markenkonforme Endungen zur Auswahl vorgeschlagen
• Auto-OG-Vorschau — zeigt die Vorschau der Open Graph-Karten sofort nach dem Einfügen der URL an, bevor der Link gekürzt wird

Jede davon ist auch eine „fünzeilige Funktion, die wie nichts aussieht“. Zusammen genommen unterscheidet sich das Werkzeug, das in Ordnung ist, von dem Werkzeug, das du täglich verwenden möchtest.

Versuche es selbst

Etwas einfügen — allegro.pl oder github.com oder news.ycombinator.com. Das System fügt automatisch das Protokoll hinzu und fährt fort. Ohne Warten, ohne Fehler, ohne „Versuchen Sie es erneut“.

Wenn dich dieser Typ an UX-Details interessiert, lass es mich wissen und sag mir, in welche Richtung wir weitergehen sollen. hello@cutty.dev.