Auto-prefix URL – pieni yksityiskohta, joka säästää minuutteja

Linkin lyhentämislomakkeeseen syötät allegro.pl. Useimmat linkinlyhentäjät sanovat, että tämä ei ole kelvollinen URL-osoite ja pyytävät sinua syöttämään sen uudelleen https://-etuliitteen kanssa. cutty.dev lisää https:// automaattisesti ja jatkaa.

Tämä kuulostaa ominaisuudelta, joka tuskin ansaitsee mainintaa. Käytännössä kyse on erosta seuraavien välillä:

• "liitin, minulla on lyhyt linkki, suljen ikkunan" (2 sekuntia)
• "liitin, virhe, luen viestin, lisään https:n, vielä kerran, saan linkin" (15–20 sekuntia)

Kerro kertaluvulla, kuinka monta kertaa kuukaudessa liität URL-osoitteen, lisää virheen lukemisen aiheuttama turhautuminen ja hetki “ah, joo, protokolla”. Pienyhteys, joka mitataan minuutteina henkilöä kohti kuukaudessa.

Mitä cutty.dev tarkalleen ottaen tekee

Liitit tekstin lomakkeeseen. Ennen lähettämistä palvelimelle JavaScript tarkistaa, alkaako se jollakin protokollalla (http://, https://, ftp://, mailto: jne). Jos ei ala — järjestelmä olettaa, että kyseessä on pelkkä verkkotunnus ilman protokollaa ja lisää https:// eteen.

Eli:

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

Mitä jos jo on protokolla (vaikka virheellinen), järjestelmä jättää asian ennalleen ja jatkaa tarkistusta:

• http://example.com → jää http://example.com (sallittu)
• ftp://example.com → hylätty (vain http/https)
• javascript:alert(1) → hylätty (XSS-suojaus)

Miksi minulla on tämä, mutta muilla ei

Useimmat lyhentäjät käyttävät standardia URL-validointia new URL(string):n kautta. URL-konstruktori selaimessa/JavaScriptissä on tiukka — jos protokollaa ei ole, se heittää virheen. new URL("allegro.pl"):n oletustuotos on TypeError.

Tämä on oikea toiminta useimmille sovelluksille. Mutta linkin lyhentämislomakkeessa, jossa käyttäjä liittää URL-osoitteen osoitepalkista tai jostakin muusta sovelluksesta, tämä tiukkuus on este eikä apu.

Ratkaisu vie viisi riviä JavaScriptiä:

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

Viisi koodiriviä, kymmenen sekuntia vähemmän turhautumista käyttäjää kohti päivässä. En tiedä miksi suurin osa markkinoista ei tee tät. Ehkä koska "vakiona" tarkoittaa "URL-rakentaja toimii näin".

Pienet yksityiskohdat UX:ssä ovat suhteettoman tärkeitä

cutty.devissa on useita tällaisia asioita, joita ei ole missään ominaisluettelossa, koska kukin erikseen kuulostaa merkityksettömältä:

• Tyhjennä välilyönnit ennen validointia — liitetty URL, jossa on välilyönti lopussa, ei aiheuta virhettä
• Hash säilytetään — https://example.com/page#section säilyttää #section lyhentämisen jälkeen
• Query-stringit säilytetään — ?utm_source=test kulkee leikkaamatta
• Automaattinen protokollan päivitys — http:// muuttuu muotoon https://, kun lähde-URL tukee TLS:ää (suunniteltu, ei vielä LIVE-käytössä)
• IDN-domenet — źdźbło.pl muutetaan automaattisesti punycode-muotoon
• Puolalaiset merkit slugissa — muunnetaan automaattisesti ASCII:ksi luotaessa omaa päätteettä (różowy-link → rozowy-link)
• Vaarallisten protokollien havaitseminen — javascript:, data:, file:, mailto: hylätään tarkalla viestillä

Jokainen näistä yksityiskohdista säästää joltakulta 5–30 sekuntia ja hetken ärsytystä. Yhdessä ne tekevät eron “pidän tästä sovelluksesta” ja “toimii OK” välillä.

Mitä UX-detaileille tapahtuu jatkossa

Luettelo asioista, jotka haluan tehdä tulevaisuudessa:

• Smart paste — havaitse, kun käyttäjä liittää tekstin, joka sisältää URL:n muiden sanojen välissä, ja ota vain URL irti
• Bulk paste — liitetty lista URL-osoitteita (yksi per rivi) luo useita lyhyitä linkkejä samanaikaisesti
• Suggested slugs — kohdesivun otsikon perusteella ehdota 3 valittavaa merkkijonoa
• Auto-OG preview — näytä Open Graph -korttien esikatselu välittömästi URL:n liittämisen jälkeen, ennen linkin lyhentämistä

Jokainen näistä on myös “viisirivinen funktio, joka näyttää mitättömältä”. Kaiken kaikkiaan ero on sen työkalun välillä, joka on OK, ja sen työkalun välillä, jota haluaa käyttää päivittäin.

Kokeile itse

Jotain — allegro.pl tai github.com tai news.ycombinator.com. Järjestelmä lisää automaattisesti protokollan ja jatkaa eteenpäin. Ei odottelua, ei virheitä, ei "yritä uudelleen".

Jos tämä tyylinen yksityiskohta kiinnostaa sinua, kerro minulle, mihin suuntaan haluaisit jatkaa. hello@cutty.dev.