Hello there. I'm this guy and this is my home page. Below are all blog posts I have written since 2007. Some of them are silly, but self-censorship would be worse I guess.

Blog Posts

  • Cube Longtail: pika-arvio

    Vihreänharmaa Cube Longtail Hybrid sähköpolkupyörä. Pyörässä on tavanomaista pyörää pitempi tavarateline. Renkaat ovat hieman tavallista pienemmät, 26-tuumaiset, mutta paksut. Runko on jykevä.

    Hankin työsuhdepyöräksi Cube Longtail Hybrid -pitkäperäpyörän, jossa on sähkömoottori. Tämä on tosi hyvä pyörä, ja sähköpyöräily on kätevää—minkä kaikki muut tiesivätkin jo.

    Työsuhdepolkupyörä maksetaan osamaksulla palkasta, mutta ennen veroja, joten hinnassa säästää jopa 20–30 %. Meillä on ollut tämä etu töissä jo pitemmän aikaa, mutta sain nyt aikaiseksi hankkia pyörän.

    Olen kuskannut ensimmäistä lasta (4v) cyclocrossilla lastenistuimessa, mikä on ollut molemmille tosi hauskaa. Mutta nyt on tarpeen saada toinenkin lapsi (1v) kyytiin ja pohdin pitkään eri vaihtoehtojen välillä: peräkärry olisi halvin ja helpoin vaihtoehto, mutta sen säilytys olisi meillä hankalaa. Lisäksi pelkäsin, että lapset ovat kärryssä liian kaukana, jotta heidän kanssaan voisi jutella matkan aikana. (Bugi, ominaisuus?)

    Laatikkopyörä olisi luultavasti kaikista mukavin lapselle matkustaa, mutta pyörät ovat yleensä aika pitkiä tai leveitä, ja yhtä lailla hankala säilyttää.

    Pitkäperäpyörät ovat vähän lyhkäisempiä ja jossain määrin helpompia säilyttää. Mutta perä on sen verran pitkä, että kyytiin saa kaksikin lastenistuinta—teoriassa. Tämä on vielä kokeilematta. Vähän vanhemmille lapsille voi ostaa taakse penkin ja kaiteen, jolloin pyörän kyytiin hyppääminen on vielä helpompaa.

    Ensivaikutelmat sähköpyöräilystä

    Tämä on ensimmäinen oma sähköpyöräni, mutta olen kokeillut aikaisemmin muutamaa muuta sähköpyörää. Havainnot ovat luultavasti hyvinkin tuttuja sähköpyörien omistajille.

    Sähköpyörän ajettavuus on nykyään tosi hyvä. Neljännen sukupolven Bosch-moottori avustaa pehmeästi ja usein huomaamattomasti. Avustuksen loppuminen 25 km/h vauhdissa tapahtuu hyvin pehmeästi. Aikaisemmin kokeilemissani sähköpyörissä avustus oli huomattavasti äkkinäisempi ja enemmän “erillään” polkemisesta.

    Boschilla on moottorissa kattavasti eri ajomoodeja ja puhelimella voi säätää kunkin avustuksen tehoa ja herkkyyttä.

    Sähkömoottori mahdollistaa painavan pyörän. Vanha cyclocrossarini painoin n. 10 kg ja Cube Longtail itsessään noin 35 kg. Lisäksi pari lastenistuinta ja lasta, niin pyörällä ja kuormalla on painoa jo 70 kg. Haaveissani ajaisin tällaistakin kuormaa lihasvoimalla (nuorena rikšakuskina ajoinkin!), mutta nykyään realistisesti en. Sähkömoottori mahdollistaa paljon isomman skaalan pyöriä ja pyörän kuormausta, ja siten erilaisia käyttötapoja.

    Haluaisin ajaa kovempaa! Cyclocrossarilla ja maantiepyörällä luontainen vauhti tasaisella on usein päälle 25 km/h. Sähköpyörällä avustus tippuu pois ja kauheasti kovempaa ajaminen ei ainakaan näillä jaloilla vielä onnistu. Tähän on tosi vaikea suhtautua! En ole oikein ikinä osannut ajaa rauhallista vauhtia pienillä tehoilla.

    Toisaalta olen ihan tyytyväinen, että muut sähköpyöräilijät ei paahda 30+ km/h ruuhkaisilla väylillä.

    Sähköpyörähäpeä istuu vielä tiukassa. En oikein kehtaa ajaa täysillä avustuksilla ja ohitella ylämäessä! Sähköllä pyöräileminen tuntuu huijaamiselta, vaikka sitä pitäisi ajatella vastaavasti kuin bensan polttamista autolla.

    Ensivaikutelmat Cube Longtailista

    Kokoaminen oli helppoa ja kaikki osat vaikuttavat laadukkailta. Vaihteet olivat suoraan laatikosta kohdillaan, mutta jarrut ovat oletuksena hieman tunnottomat. Pienellä säädöllä saisi varmaan kohdilleen. Valot eteen ja taakse ovat hyvät ja kätevät verrattuna vanhoihin dynamolla toimiviin tai ladattaviin valoihin.

    Seisontatuki on kätevä. Pyörä pysyy hyvin pystyssä ja lasten lastaaminen istuimeen on helppoa. Netissä jotkut valittelevat, että seisontatuen kiinnitys löystyy ja tuki pyörii sivusuunnassa. En tiedä onko tätä korjattu, mutta ei ole vielä osunut kohdalleni.

    Ajoasento on todella pysty—toinen asia mihin on hankala suhtautua! Haluaisin ajaa vähän virtaviivaisemmin, mutta ohjaustanko ja kannatin ovat matalimmassakin asennossa todella korkealla, ja lähellä.

    Välityksiä riittää kovempaankin vauhtiin. Muissa kokeilemissani sähköpyörissä vaihteet loppuivat 25 km/h kohdalla, jolloin edes lihasvoimalla ei päässyt kovempaa. Longtailissa välityksiä riittää ja 30 km/h ajaa mukavasti, jos jaksaa.

    Lisävarusteet ovat kattavia ja kalliita 💸. Pyörään saa penkkiä, matkustajien jalkatukea, tarakan kaidetta ja etutarakkaa. Kaikkea löytyy, mutta jokainen osa maksaa päälle 100 €, jolloin hintaa rupeaa kertymään aika paljon. Näitä ei saa mukaan työsuhdepyörän hintaan, koska verottajalla on lyhyt lista sallituista lisävarusteista mitä pyörän mukana saa tilata.

    Hamaxin Caress -lastenistuin meni tarakalle helposti erillisen tarakka-adapterin avulla.

    Pyörän säilöntä on hankalaa jos pyörävarastoon joutuu kulkemaan portaita, ylittämään korkeita kynnyksiä, tai kääntymään tiukassa paikassa. 35 kg pyörän tunkkaaminen portaita ylös tai alas on nihkeää.

    Akun toimintamatka on vielä kysymysmerkki, mutta en ole sitä juuri murehtinut. Olen ajanut pyörällä lyhyttä pätkää päiväkotiin ja kaupoille. Nykyisellä tahdilla yhdellä latauksella ajaa ehkä 100 kilometriä?

    Pyörällä on ollut näppärä ajaa muutaman kilometrin matkoja, joita aikaisemmin olisin kulkenut kävellen, bussilla, tai autolla. Aihetta sen enempää politisoimatta minusta on pöhköä esimerkiksi viedä lapsi autolla kilometrin päähän päiväkotiin (meillä 2 × 1,5 km). Mutta ymmärrän miksi sitä tehdään ja olen itsekin tehnyt sitä. Sähköpyörällä pystyn poistamaan itseltäni kuviosta ainakin pari tekosyytä: matka on täsmälleen yhtä nopea autolla ja pyörällä, pyöräilyä varten ei tarvitse enää etsiä kypärän lisäksi muita kamppeita (valotkin on valmiina), ja lapsen saa pyörän selkään nopeammin kuin auton istuimeen.

    Yhtälö muuttuu syksyllä kun palaan töihin ja toimistolle, mutta uskoisin, että pyörä on sinnekin lähes yhtä nopea kuin auto.


  • Esimerkkejä syötekentän saavutettavuudesta

    Verkkosivujen saavutettavuus voi tuntua vähän hähmäiseltä käsitteeltä. Mitä kaikkea siihen kuuluu? Mitä pitää oikeasti tehdä että on saavutettava?

    Kirjoitin tämän artikkelin näyttääkseni muutaman esimerkin, miten saavutettavuutta voi huomioida yksittäisen syötekentän suunnittelussa ja toteutuksessa. Syötekentät eli <input>-elementit ovat verkkolomakkeiden peruskauraa. Miten vaikeaa niistä on tehdä saavutettavia?

    Huom: Tämä ei ole varsinaisesti opas siihen, mitä saavutettavuus ylätasolla on – muut tekevät sen paremmin.

    Nopea kertaus saavutettavuuden määritelmästä

    Saavutettavuus tosi lyhyesti:

    Saavutettavuus tarkoittaa sitä, että mahdollisimman moni erilainen ihminen voi käyttää verkkosivuja ja mobiilisovelluksia mahdollisimman helposti. Saavutettavuus on ihmisten erilaisuuden ja moninaisuuden huomiointia verkkosivujen ja mobiilisovelluksien suunnittelussa ja toteutuksessa.
    saavutettavuusvaatimukset.fi

    Saavutettavuutta lähestytään usein henkilöiden rajoitteiden kautta. Esimerkiksi värisokean ihmisen on pystyttävä erottamaan eri toimintojen tarkoitus, jolloin eroa ei voi kommunikoida pelkällä värillä. Sokean ihmisen pitää pystyä käyttämään verkkosivuja ruudunlukijalla.

    Mutta rajoite voi olla myös väliaikainen ja huomattavasti yleisempi. Esimerkiksi verkkolomakkeen täyttäminen vauva sylissä, tai vaikka vain väsyneenä on vaikeampaa kuin “optimiolosuhteissa”. Kaikki ihmiset hyötyvät, jos lomakkeen kognitiivista kuormaa pienennetään, eli suomeksi täyttäminen ei vaadi niin paljon ajattelua.

    Taustaa

    Olen töissä vakuutusyhtiössä, jota koskevat tiukennetut saavutettavuus­vaatimukset. Ihmisten on pakko ostaa liikenne­vakuutus ajaakseen moottori­ajoneuvolla, joten vakuutusverkkokaupan pitää olla saavutettava.

    Käytännössä teimme verkkopalvelumme saavutettavuuteen yhden isomman korjauskierroksen ennen vaatimusten voimaanastumista. Mutta itsekkäästi yritämme myös jatkuvasti tehdä vakuutusten ostamisesta helpompaa, koska se lisää myyntiä.

    Tässä artikkelissa tarkastellaan POP Vakuutuksen ajoneuvovakuutuksen ostopolulta löytyvää henkilötunnuksen syötekenttää. Kyseinen kenttä voi muuttua jatkossa, mutta tässä on tähän mennessä syntyneitä huomioita.

    Hypätään matkaan!

    Haluttu syötteen muoto placeholderissa

    Syötekenttä, jonka yllä kentän nimi 'Henkilötunnus'. Kentän sisällä on placeholder ppkkvv-xxxx, eli päivä päivä kuukausi kuukausi vuosi vuosi, henkilötunnuksen loppuosa.

    Henkilötunnus on useimmille tuttu konsepti, mutta joskus henkilötunnus menee sekaisin syntymäajan kanssa, tai ihmiselle ei heti muistu mieleen mistä tunnuksesta puhutaan. (Olemme törmänneet tähän ihan oikeasti!)

    Syötekentässä on muistutuksena haluttu muoto vastaukselle, eli niin sanottu placeholder: ppkkvv-XXXX.

    Placeholder-teksti on hieman hailakka harmaa. Luettavuuden kannalta tekstin ja taustan välinen kontrasti pitäisi olla isompi, mutta toisaalta liian tumma teksti antaa vaikutelman siitä, että kentässä on jo vastaus. Tämä voi johtaa siihen, että asiakas ei itse kirjoita vastausta, eikä siksi pääse etenemään ostossa.

    Placeholder koko ajan näkyvillä

    Placeholder-tekstien ongelmana on, että ne katoavat kun kenttään alkaa kirjoittamaan tekstiä. Asiakkaan pitäisi vastausta kirjoittaessaan muistaa mitä placeholderissa luki, mikä ei yleisesti ottaen ole mahdotonta, mutta voi olla haastavaa.

    Tämä on meillä ratkaistu niin, että kun kenttä on kohdistettuna (focus), siirtyy kentän placeholder kentän nimen perään. Tällä tavalla haluttu muoto säilyy näkyvillä koko ajan, eikä sitä tarvitse muistaa:

    Sama syötekenttä kuin edellisessä kuvassa, mutta kentässä on tekstiä ja kentän placeholder on siirretty kentän otsikkoon (label). Otsikossa lukee 'Henkilötunnuksesi suluissa pee pee koo koo vee vee viiva x x x x'
    Haluttu syötteen muoto siirtyy kentän nimen perään kentän ollessa kohdistettu

    Kohdistuksen näyttäminen

    Henkilötunnuskenttä, jonka ympärillä on paksuhko keltainen ääriviiva
    Kohdistin kentän sisällä. Kohdistin on siirretty kenttään tab-näppäimellä.

    Lomaketta täyttäessä on tärkeä tietää mihin kenttään on kirjoittamassa tekstiä. Ohut tekstikohdistin voi olla vaikea huomata (varsinkin näkö­rajoiteisella) tai huomion herpaantuessa. Selain näyttää kohdistetun kentän ympärillä oletus­arvoisesti sinisen ääriviivan, mikä toimi huonosti meidän sinisen taustavärin kanssa.

    Päädyimme designerin kanssa käyttämään keltaista ääriviivaa. Ääriviiva on paksumpi jos kenttään siirtyy näppäimistöllä. Tässä oli ajatuksena, että klikatessaan kenttää hiirellä asiakas on paremmin tietoinen missä kohdistin menee.

    Pelkällä näppäimistöllä navigoidessa on lähtökohtaisesti vaikeampi seurata mihin kohdistin seuraavaksi hyppää. Paksu ääriviiva näyttää selvästi missä kohdistin on. (Paksumpi ääriviiva oli ehkä designerin mielestä liikaa käytettäväksi koko ajan ja sen takia vain näppäimistökäytössä? – en muista.)

    Myös kaikki ohjetekstit ovat avattavissa näppäimistöllä:

    Kentän yläpuolella oleva kysymysmerkki kohdistettuna, paksu keltainen ääriviiva ikonin ympärillä
    Ohjetekstin näyttävä kysymysmerkki kohdistettuna näppäimistöllä

    Virhetilanteet

    Asiakkaan antaessa virheellisen syötteen näytetään kentän ympärillä punainen ääriviiva ja kentän alapuolella virheviesti. Virhe näytetään vasta kun kohdistin siirretään pois kentästä, jotta asiakas voi rauhassa muokata henkilötunnusta ilman virheen välkkymistä.

    Henkilötunnuskenttä jonka ympärillä on punainen ääriviiva. Kentän alapuolella on virheviesti 'Tarkista henkilötunnuksesi'
    Virheellinen vastaus

    Virheviestistä on yritetty tehdä tarpeeksi näkyvä, jotta asiakas huomaisi virhetilanteen. Mobiililaitteilla selain vierittää automaattisesti ensimmäiseen virheelliseen kenttään, jos asiakas yrittää jatkaa ostossa eteenpäin virheellisin tiedoin.

    Virheviestissä lukee aina mistä tiedosta on kyse eikä esimerkiksi “Tarkista tieto”. Jos mahdollista, yritetään käyttää tarkkaa virheilmoitusta, esimerkiksi alaikäiselle vakuutuksenottajalle kerrotaan tarkemmin miksi annettu henkilötunnus ei kelpaa:

    Henkilötunnuskenttä jossa on oikeanmuotoinen henkilötunnus. Kentän alapuolella on virheviesti 'Vakuutuksenottajan oltava täysi-ikäinen'
    Alaikäinen vakuutuksenottaja saa oman virheviestin

    Virheviestejä voisi meilläkin vielä parantaa, esimerkiksi henkilö­tunnuksen tapauksessa voisi kertoa onko virhe henkilö­tunnuksen päivämäärässä vai loppuosassa.

    Ruudunlukijavastine placeholderille

    Ruudunlukijavastineella tarkoitetaan ruudunlukijan lukemaa käyttöliittymätekstiä. Tietyissä tilanteissa pelkkä ruudulla näkyvä teksti ei auta ruudunlukijan lukemana, vaan ruudunlukijalle pitää välittää ruudulla näkyvä informaatio eri tavalla.

    Esimerkiksi ruudulla voi nähdä helposti, että tietyt napit muodostavat nappiryhmän, mutta ruudunlukijalle suhde pitää kuvailla kertomalla mihin asiaan tietty nappi liittyy.

    Henkilötunnuskentän placeholderin tapauksessa pelkät kirjaimet ppkkvv… eivät kuulosta järkevältä ruudunlukijan lukemana. Siksi ruudunlukijalle välitetään syötteen muoto auki kirjoitettuna:

    Henkilötunnuskentän otsikossa olevan placeholderin ruudunlukijavastine (aria-label): kirjaimet p, p, k, k... on kirjoitettu aria-labeliin auki muodossa 'päivä päivä kuukausi kuukausi vuosi vuosi viiva, henkilötunnuksen loppuosa.'
    ppkkvv merkitys välitettynä ruudunlukijalle

    Virheviestien välittäminen ruudunlukijalle

    Ruudunlukijaa käyttävän asiakkaan on yhtä lailla saatava tietää, jos jonkun kentän sisältö on virheellinen. Myös ruudulla näkyvä virheviesti pitää kertoa ruudunlukijalle. Näihin on muutamia tapoja, mutta nyt mennään hieman teknisiin yksityiskohtiin.

    Syötekenttä itsessään pitää merkitä koodissa virheelliseksi. Tämä tapahtuu kentän invalid ja aria-invalid -attribuuteilla:

    <input invalid="true" aria-invalid="true" aria-describedby="root_ssn-error">

    Lisäksi kentässä on viittaus virheviestiin (aria-describedby="root_ssn-error"). Tämä kertoo ruudunlukijalle, että kentän kuvaus löytyy elementistä <li id="root_ssn-error">, jolloin ruudunlukija lukee sieltä löytyvän virheviestin.

    Lisäksi itse virheviesti luodaan elementin sisälle, jolla on aria-live-attribuutti. Tämä itsessään vinkkaa ruudunlukijan lukemaan virheviestin heti kun se ilmestyy ruudulle. (Tämä tosin toimii hieman vaihtelevasti eri ruudunlukuohjelmistoilla.)

    Virheviestielementin lähdekoodi. Virheviesti on div-elementin sisällä, jolla on aria-live ja aria-relevan -attribuutit. Lisäksi virheviestin id-attribuutti on 'root_ssn-error', mikä oli sidottu syötekentän 'described by' -attribuuttiin.
    Virheviesti `aria-live` elementin sisällä

    Näillä keinoin ruudunlukija lukee virheviestin heti kun se ilmestyy, ja joka kerta kun asiakas siirtyy virheelliseen syötekenttään.

    Sekalaiset

    Näiden mainittujen juttujen lisäksi on olemassa yleisempiä saavutettavuus­korjauksia, mitkä koskevat kaikkia kenttiä. Esimerkiksi tekstin värin pitää erottua taustasta, ja tekstien pitäisi olla luettavissa jos asiakas suurentaa tekstikokoa huomattavasti. Lomakkeen on oltava käytettävissä pelkällä näppäimistöllä, jne.

    Lopuksi vielä humio, että osa tässä nostetuista esimerkeistä koskee vain nykyisin suosittuja “Single Page Application”-tyylisiä sivuja, joilla lomakkeen validointi tehdään ilman sivunlatausta. Selaimet osaavat aika hyvin itsekin hoitaa esimerkiksi virhetilanteiden esille nostamisen, mutta osan näistä joutuu tekemään itse saavutettavaksi, kun lomaketta validoidaan lennossa.

    Toivottavasti nämä esimerkit auttavat hahmottamaan miten saavutettavuutta voi parantaa!


  • Useful Git options

    Here are two articles about useful Git options that most people should probably use:

    These two lists are largely overlapping but Julia’s has a grab bag of smaller, yet useful options. I like Scott’s categorization of options, including options that “Clearly Makes Git Better”:

    This first group of settings clearly makes Git better by default. There are generally zero downsides to enabling any of them.


  • R.I.P. Back to Work

    A podcast ended

  • Projekti-ideoita

    Muutamia projekti-ideoita mitä pyörii päässä

  • TV Series Costs Are Bananas

    This tidbit about Apple TV+'s ‘Severance’ caught my eye: From Hollywood Reporter (via MacRumors):

  • Hacker News Bots

    In 2011 I created a few Twitter bots that would find posts from Hacker News and post them to Twitter. The bots would only post links that had over 200, 250, or 500 points, so that you could follow the bot and only see the good (most upvoted) stuf...

  • Everyday Carry

    I discovered “Slash Pages” somewhere and while I don’t think these are very discoverable, some of them are good writing prompts.

    I started by documenting what I /carry everyday.


  • Simulennon Airbus A321 -simulaattori

  • There are no simple videos

    I sometimes watch train videos on YouTube. They seem simple: strap a camera in front of a train and shoot the train running its route. For example:

  • Storytel Readerin korvaaminen Onyx Boox tabletilla

    Storytel-lukulaitteen valmistus on lopetettu, mutta sen voi korvata Onyx Boox-tabletilla

  • Mastodon vs. Threads vs. Bluesky

    Vikasietotila-podcastissa oli hyvä jakso Twitterin korvaajien eroista

  • Youtube recommendations

    Some youtube videos I've like recently

  • Technical learnings from InfoToggle

    Technical aspects of InfoToggle

  • InfoToggle

    I'm creating a SaaS called InfoToggle

  • A Winter Mountain Bike

    After some unfortunate bike-thieving-events half a year ago I was left with only one bike: a White road bike. It’s a good bike, I even scored a pair of carbon wheels for it.

  • Stories about switching to Fuji

    Some experiences from folks who’ve switched to from Nikon to Fuji systems, something I might be doing as well. Many of these talk about Fuji’s X-T1 which is the big brother of the X-T10 I’m interested in but also about the reasons for switching.

  • Next camera: Nikon vs. Fujifilm

    Buying a camera in 2016 is hard. What kind of camera should you buy?