Auto-prefix URL — sīkākais detaljs, kas ietaupa minūtes

Saite skraves formulā jūs ierakstīsiet allegro.pl. Lielākā daļa saite skraves pavērsīs jums, ka tas nav pareizs URL, un lūgs ierakstīt vēlreiz ar https:// priekšā. cutty.dev vienkārši pats pievienos https:// un turpinās.

Tas izklausās pēc funkcijas, kas tik ilgi varētu neieskaitīt. Praktiski tas ir atšķirība starp:

• "ieliku, man ir īss saite, aizveru logu" (2 sekundes)
• "ieliku, kļūda, lasu ziņojumu, pievienoju https, vēlreiz, man ir saite" (15-20 sekundas)

Multiplikējiet ar reizēm mēnesī, kad ̦pievietojat URL, plus frustrāciju no kļūdreadšanas, plus momentu "ah, jā, protokols". Sīkr细节s, kas tiek mērīts ar minutēm mēnesī uz vienu personu.

Ko tieši dara cutty.dev

Jūs esat ievietojis tekstu veidlaukā. Pirms nosūtīšanas uz serveri, JavaScript pārbauda, vai tas sākas ar kādu protokolu (http://, https://, ftp://, mailto: utt). Ja tas nesākas ar to — sistēma pieņem, ka tā ir vienkārši domēns bez protokola, un pievieno https:// priekšā.

Tātad:

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

A ja kaut kas jau ir protokolā (pat ja nepareizs), sistēma atstāj tā, kā ir, un pārbauda tālāk:

• http://example.com → paliek http://example.com (atļauts)
• ftp://example.com → noraidīts (tikai http/https)
• javascript:alert(1) → noraidīts (XSS aizsardzība)

Kāpēc man tas ir, bet citi nē

Lielākā daļa saīsinātāju izmanto standarta URL validāciju caur new URL(string). Konstruktors URL pārlūkā/JavaScript ir strict — ja nav protokola, tas izrauca kļūdu. Noklusējais outputs new URL("allegro.pl") ir TypeError.

Tas ir pareizs uzvedums lielākajai daļai lietotņu. Bet saite sk shortenēšanas veidlodam, kur lietotājs ievieto URL, kas kopēts no adreses joslas vai no citas lietotnes, šī stingrība ir šķērslis, nevis palīgs.

Risinājums aizņem piecas JavaScript rindiņas:

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)
}

Piecas koda rindiņas, dažas sekundēm mazāk frustrācijas uz lietotāju dienā. Es nezinu, kāpēc lielākā daļa tirgus to nedara. Varbūt tāpēc, ka "standarta" nozīmē "tā darbojas URL konstruktors".

UX sīkumi ir nesamērणीयīgi svarīgi

cutty.dev ir desmitiem šādu lietu, kas nav nevienā funkciju sarakstā, jo katra atsevišķi izklausās nevairīga:

• Trim whitespace pirms validācijas — ieliktā URL ar dobi beigās neizraisīs kļūdu
• Hash saglabāts — https://example.com/page#section saglabā #section pēc saīsināšanas
• Query strings saglabāti — ?utm_source=test tiek iet kā pats, neatskurot
• Automatic protocol upgrade — no http:// uz https://, ja avota URL atbalsta TLS (plānots, vēl nav LIVE)
• IDN domains — źdźbło.pl tiek automātiski konvertēts uz punycode
• Polskie znaki w slug — automātiski aizstāti ar ASCII izveidojot savu galfiniju (różowy-link → rozowy-link)
• Detect dangerous protocols — javascript:, data:, file:, mailto: tiek noraidīti ar konkrētu ziņojumu

Katrs no šiem detaļiem kādam ietaupa 5-30 sekundas un brīdī nepatiku. Kopā tas ir atšķirība starp "man patīk šī lietotne" un "strādā OK".

Kas tālāk ar UX detaļām

Lista lietu, ko es vēlos izdarīt nākotnē:

• Smart paste — atrod, ja lietotājs ieliek tekstu, kas satur URL starp citiem vārdiem, un izvil URL
• Bulk paste — ielietā URL saraksts (viens rindā) vienlaikus izveido vairākas īsas saites
• Suggested slugs — pamatojoties uz mērķlapas virsrakstu, piedāvāj 3 zīmolam atbilstošus galīgās daļas variantus
• Auto-OG preview — rādīt Open Graph karšu priekšskatījumu uzreiz pēc URL ielielšanas, pirms saites saīsināšanas

Katrs no šiem ir arī "piecslinieku funkcija, kas izskatās pēc nekas". Kopumā atšķirība ir starp rīku, kas ir OK, un rīku, kuru vēlies izmantot katday.

Pamēcini pats

Ievietoj kaut ko — allegro.pl vai github.com vai news.ycombinator.com. Sistēma pati pievienos protokolu un turpinās. Bez gaidīšanas, bez kļūdas, bez "mēģiniet vēlreiz".

Ja šis UX detaļu veids tevi interesē — dod ziņu, kurā virzienā virzīties tālāk. hello@cutty.dev.