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
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.fiSaavutettavuutta 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 saavutettavuusvaatimukset. Ihmisten on pakko ostaa liikennevakuutus ajaakseen moottoriajoneuvolla, 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
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:
Haluttu syötteen muoto siirtyy kentän nimen perään kentän ollessa kohdistettu Kohdistuksen näyttäminen
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ä oletusarvoisesti 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ä:
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ä.
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:
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:
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
jaaria-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.)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ä saavutettavuuskorjauksia, 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:
-
Popular Git options by Julia Evans. This came out already a year ago but I was “too busy” to read it then.
-
How Core Git Developers Configure Git by Scott Chacon.
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? →