Siirry sisältöön
cutty.dev
All posts

Auto-prefix URL — pieni asia, joka säästää minuutteja

cutty.dev tunnistaa, kun liität osoitteen ilman https://-etuliitettä, ja lisää sen automaattisesti. Kuulostaa vähäpätöiseltä. Käytännössä se on ero kahden sekunnin ja ”yritä uudelleen” -painikkeen klikkaamisen välillä.

Kirjoitat lomakkeeseen allegro.pl. Klikkaat. Ja mitä sitten?

Useimmissa lyhentimissä saat tällä hetkellä virheilmoituksen. Jotain tyyliin "tämä ei ole oikea URL-osoite". Koska alussa ei ole https://. Joten palaat takaisin, lisäät protokollan, klikkaat uudelleen, ja vasta nyt sinulla on lyhyt linkkisi.

cutty.dev ei tee sitä. Se vain liittää itse https:// ja jatkaa matkaa, aivan kuin mitään ei olisi tapahtunut.

Tiedän miltä se kuulostaa. Kuin ominaisuus, joka tuskin ansaitsee oman kappaleen, saati koko kirjoituksen. Silti istun ja kirjoitan tästä, koska juuri tämä pieni yksityiskohta on minulle pieni manifesti siitä, miten ajattelen yleisesti auto-prefix URL -työkalun rakentamista ja kaikkea muuta näitä näkymättömiä helpotuksia.

Kaksi sekuntia vastaan kaksikymmentä

Lasketaanpa. Todella, luvuilla, koska muuten se on vain puhetta.

Ensimmäinen reitti: liität, sinulla on linkki, suljet ikkunan. Kaksi sekuntia. Ehkä kolme.

Toinen reitti: liität, virhe, luet viestin (sekunti tai kaksi ymmärtääksesi mistä on kyse), lisäät protokollan, klikkaat uudelleen, vasta nyt linkki. Viisitoista, kaksikymmentä sekuntia. Plus se pieni hetki turhautumista, se hiljainen "aa niin totta, protokolla", joka ei yksittäisenä mitään maksa, mutta kasvaa kertymällä.

Kerro nyt tämä sillä, kuinka monta kertaa kuukaudessa liität jonkin osoitteen. Minulla se on kymmeniä. Jollakulla, joka hallinnoi linkkejä ammattimaisesti — satoja. Yhtäkkiä tämä "tuskin maininnan arvoinen" pieni asia kertyy minuuteiksi kuukaudessa. Per henkilö.

Tämä on juuri se aritmetiikka, jonka useimmat ihmiset jättävät huomiotta, koska jokainen yksittäinen tapaus näyttää liian pieneltä välittämiseen.

Mitä siellä oikeastaan on alla

Mekanismi on yksinkertainen, enkä todellakaan piilottele sitä. Liität tekstin kenttään. Ennen kuin mitään lähetetään palvelimelle, JavaScript-pätkä tarkistaa, alkaako kirjoittamasi teksti jollakin protokollalla — http://, https://, ftp://, mailto:, mitä tahansa. Jos se ei ala näin, järjestelmä olettaa, että tarkoitat tavallista verkkotunnusta, ja lisää https:// eteen.

Käytännössä:

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

Ja jos protokolla on jo siellä, vaikka se olisi outo, järjestelmä ei kirjoita sitä päälle. Se jättää sen ja tarkistaa jatkoksi, mitä sille tehdään. http://example.com menee läpi (sallittu). ftp://example.com päätyy roskakoriin, koska hyväksymme vain http:n ja https:n. Ja javascript:alert(1) poistuu välittömästi, koska se ei ole osoite, vaan yritys injektoida jotain ilkeää (klassinen XSS, kiitos, ei).

Miksi minulla on tämä, mutta puolella markkinoista ei

Tässä alkaa tapahtua mielenkiintoista, sillä vastaus on hieman naurettava.

Standardi tapa validoida osoite selaimessa on konstruktori new URL(string). Ja tämä konstruktori on tiukka. Kompromissiton. Jos protokolla puuttuu — se heittää virheen. new URL("allegro.pl") palauttaa sinulle vain TypeErrorin ja siinä se.

Tiedätkö mitä? Tämä on oikeaa käytöstä. Valtaosalle sovelluksista juuri tätä haluat. Mutta linkkien lyhentämiseen tarkoitetussa lomakkeessa, jossa ihminen kopioi osoitteen selaimen osoitepalkista tai jonkun viestistä, tämä ankaruus muuttuu edusta esteeksi. Yhtäkkiä työkalu, jonka pitäisi säästää aikaasi, pakottaa sinut korjaamaan jotain, minkä se itse asiassa ymmärtää täydellisesti.

Tämän kiertotie on kirjaimellisesti muutaman rivin mittainen:

function sanitizeUrl(input) {
  const trimmed = input.trim();
  const hasProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed);
  const normalized = hasProtocol ? trimmed : "https://" + trimmed;
  // dalej leci normalna walidacja przez new URL(normalized)
}

Viisi riviä. Muutama sekunti vähemmän kitkaa päivässä jokaiselle, joka liittää osoitteita. En rehellisesti tiedä, miksi tämä ei ole standardi kaikkialla. Epäilen, että kyse on siitä, että "URL-konstruktori toimii vain niin" eikä kukaan ole halunnut koskea siihen. Inertia, ei pahan tahto.

Pieni sivuhuomautus siitä, mitä "standardillinen" tarkoittaa

Sillä tämä tarina new URL() on erinomainen esimerkki jostain laajemmasta. Monet asiat, jotka ohjelmistossa katsotaan olevan "sellaista kuin pitääkin", ovat todellisuudessa "tällaisia kuin jostakin kirjastosta tuli oletusasetuksistaan, jota kukaan ei kyseenalaistanut". Konstruktorin strict mode ei ole cutty-suunnittelijoiden tai kilpailijoiden tekemä päätös — se on URL-spesifikaation kirjoittajien tekemä päätös, joka tehtiin aivan eri kontekstissa ja aivan eri käyttötarkoituksia varten.

Ja sitten koko markkina perii tämän oletusvalinnan ja kutsuu sitä "standardiksi". Minulla on tunne, että parhaat tuotteet syntyvät juuri niissä paikoissa, joissa joku pysähtyy ja kysyy: hetkinen, palveleeko tämä käyttäytyminen todella käyttäjääni vai vain kirjastoni? Yleensä vastaus on: kirjastoani. Ja silloin on vaivan arvoista siirtyä viidellä rivillä ihmisen puolelle.

Näitä pieniä asioita on enemmän kuin näkyy


Auto-prefix on vain yksi monista sellaisista elementeistä, joita et löydä mistään ominaisuusluettelosta. Sillä jos ne kirjoitettaisiin sinne, jokainen niistä näyttäisi yksinään naurettavan pieneltä:

  • välilyöntien poistaminen ennen validointia, jotta liitetyn osoitteen lopussa oleva vahinkovälilyönti ei pila kaikkea
  • ankkurin säilyttäminen, eli #section osoitteessa https://example.com/page#section ei kato lyhentämisen jälkeen
  • kyselyparametrit (?utm_source=test) siirtyvät kokonaisuudessaan, mitään ei katkea matkan varrella
  • verkkotunnukset puolalaisilla merkeillä, źdźbło.pl, muunnetaan automaattisesti punycode-muotoon
  • puolalaiset kirjaimet omassa pääteosassa muutetaan ASCII-muotoon (różowy-link muuttuu muotoon rozowy-link)
  • vaaralliset protokollat — javascript:, data:, file: — estetään selkeällä, ymmärrettävällä ilmoituksella

(Suunnitelmissa on vielä automaattinen http:// muuttaminen muotoon https://, kun kohdepalvelin tukee salausta. Tämä ei toimi vielä suorassa käytössä, joten en teeskentele muuta.)

Jokainen näistä yksityiskohdista säästää joltain viisi, kymmenen, kolmekymmentä sekuntia ja yhden huokauksen. Erillään ei mitään. Yhdessä ne ovat ero välillä "toimii OK" ja "pidän tämän käyttämisestä".

Mitä haluaisin vielä tehdä lisää

Toivelista tulevaisuutta varten, koska sen ajatteleminen tuo minulle vain iloa:

  • älykäs liittäminen — tunnista lauseen sisällä oleva osoite ja poimi pelkkä URL sanojen välistä
  • massaliittäminen — lista osoitteita, yksi per rivi, ja jokaisesta luodaan välittömästi oma lyhyt linkki
  • ehdotetut päätteet — ehdota kolmea brändättyä slugia valittavaksi kohdesivun otsikon perusteella
  • Open Graph -esikatselu heti liittämisen jälkeen, jo ennen kuin klikkaat "lyhennä"

Jokainen näistä on jälleen "viisirivinen funktio, joka ei näytä miltään". Ja kaikki yhdessä? Se on juuri se raja työkalun välillä, joka on ihan ok, ja sellaisen välillä, jota käytät päivittäin miettimättä. Jos haluat nähdä, miten se toimii nyt, liitä cutty.dev mikä tahansa ilman protokollaa — allegro.pl, github.com, news.ycombinator.com — ja huomaa, ettei se aseta sinulle esteitä.

Lopuksi, hieman henkilökohtaisesti

Ajattelin pitkään, että tuotteet voittavat suurilla ominaisuuksilla. Tuolla yhdellä näyttävällä asialla, joka voidaan esittää diassa ja josta ihmiset kirjoittavat. Ja kyllä, joskus niin on.

Mitä pidempään rakennan cuttya, sitä vahvemmin tunnen, että käyttäjän uskollisuus syntyy muualla — noissa sadoissa mikrosekunneissa, joita kukaan ei tietoisesti huomaa. Et muista, että työkalu lisäsi itse https://. Muistat vain yleisen vaikutelman siitä, että "tätä on hyvä käyttää", "se ei ärsytä". Tämä vaikutelma ei tule tyhjästä. Se koostuu kymmenistä viisirivisiä päätöksiä, joita kukaan ei yksittäin puolustaisi itsensä edessä "aikaa arvoisina".

Ehkä juuri siinä piilee ammattitaito. Ei siinä yhdessä suuressa liikkeessä, vaan sinnikkyydessä seistä kerta toisensa jälkeen ihmisen puolella lomakkeen äärellä — vaikka kyse olisi vain surkeista kahdesta sekunnista. Entä sinä? Mikä jokin työkaluun liittyvä asia on viime aikoina ärsyttänyt sinua niin pienellä tavalla, että sitä on melkein häpeä myöntää? Koska yleensä juuri siellä paras työ tehtäväksi.