PARKSIDE-käyttöohjeetKatalogi, jota ei ollut olemassa

Rajapinta, jota ei voi selata

Lidlin manuaalihaku palauttaa enintään kolme tulosta kyselyä kohden. Sivutusparametrit se jättää huomiotta, eikä listausreittiä ole lainkaan.

Tämä ratkaisi aika pitkälti koko suunnittelun. Haku olettaa että tiedät jo mitä etsit: syötä tuotenumero, saat manuaalin. Mutta jos kysymys on mitä tuotteita ylipäätään on, mikä näistä on uusin tai mikä akku tähän käy, siihen ei pysty vastaamaan millään. Ei ole mitään mitä selata.

Sama rajoite antoi myös keinon saada katalogi ulos. Haku täsmää etuliitteisiin, myös tuotenumerossa: 4687 löytää numeron 46876, mutta 6876 ei löydä mitään, koska pääte ei ole etuliite. Jokaisella manuaalilla on numeerinen IAN, joten koko luettelon saa käytyä läpi rekursoimalla numeroetuliitteitä. Kysely joka palauttaa enintään kolme on valmis. Tyhjä kysely katkaisee haaransa. Kaikki muut pilkotaan kymmeneen pidempään kyselyyn. Aakkosittain sama ei onnistu, koska läpikäynti näkee joka kerta vain ne samat kolme ensimmäistä.

Kaksi asiaa tästä kannattaa pitää mielessä loppusivun ajan, koska ne rajaavat käyttöliittymää enemmän kuin mikään makuvalinta. Ensinnäkin lopputulos on koko joukko, ei otos. Siksi laskurit saavat luvata täsmällisiä lukuja, eikä ruudukon tarvitse varautua siihen että jotain jäisi piiloon. Toiseksi tuotenumero on ainoa kenttä johon rajapinta oikeasti tarttuu, joten nimet ja luokat jouduin johtamaan itse manuaaleista. Siitä seuraa myöhemmin sekin, että haku tunnistaa pelkät tuotenumerot ja ohittaa silloin suodattimet (osio 5).

Käyttöliittymän tehtävä ei siis ollut nopeuttaa hakua vaan näyttää mitä on olemassa. Siitä lähdin liikkeelle.

Kenelle

Käyttäjä on työkalun omistaja tai sellaista harkitseva. Käytännössä kuka tahansa 20 V akkuekosysteemissä, joka yrittää selvittää mikä sopii mihin. Samat kysymykset toistuivat:

• Mikä akku tähän käy? Alustaa ei lue tuotteen nimestä. Ja 40 V ei ole oma alustansa vaan kaksi 20 V kennostoa.
• Onko tämä uudempi kuin minun? Revisio (A1 → B2 → C4) kertoo sen, mutta vain saman mallin sisällä.
• Mitä laatikossa on? Nimi ei kerro. “Akkuiskuporakone­sarja” ei paljasta sisältyykö akku ja laturi vai ei.

Sivun tehtävä ei ole hakeminen. Sen tehtävä on näyttää mitä on olemassa.

Mikä on yksi rivi ruudulla?

Ennen kuin ruudukkoa voi piirtää, pitää päättää mitä yksi kortti tarkoittaa. Datassa on kolme eri identiteettiä, ja pienin niistä on alle kolmasosa suurimmasta.

Sama akku esiintyy 29 eri tuotenumerolla: paljaana, laturin kanssa, osana sarjaa. Ja jokaisella markkinalla on vielä oma listauksensa. Jos kortti olisi listaus, sama työkalu täyttäisi ruudun kolmeen kertaan. Jos kortti olisi tuotenumero, akkuja olisi 29.

Valitsin siis, että kortti on tuote. Yksi kortti purkaa molemmat päällekkäisyydet kerralla. Mutta yhdistäminen on aina väite jostakin, joten kortin pitää kertoa myös se mitä se ei väitä.

Ryhmittely ei ole puhdas sääntö, enkä saanut siitä sellaista. Mallikoodi ratkaisee valtaosan, mutta viisi poikkeusta jouduin kirjaamaan käsin: kaksi listausta yhdistin vaikka mikään koodi ei liitä niitä toisiinsa, yhdeksän pidin erillään vaikka koodi on sama (PARS 4 A1 on sekä auton puhdistussetti että 4 V ruuvinväännin), lisävarusteet sain omille korteilleen, monen työkalun sarjat purin työkaluikseen, ja malli piti tunnistaa yli markkinarajojen. Käytännössä tuote on siis malli ja revisio, paitsi silloin kun olen itse sanonut toisin.

Layout

Yksi näkymä, ei reittejä. Suodattimet ylhäällä pysyvinä riveinä, ruudukko niiden alla. Kysymys “mitä on olemassa” vaatii, että vaihtoehdot näkyvät samaan aikaan tuloksen kanssa.

Yhdeksän päätöstä

Päätös josta puuttuu hylätty vaihtoehto on oikeastaan vain mielipide. Kirjasin nämä siinä muodossa, että vuoden päästä näen itsekin mitä mittasin ennen kuin valitsin.

Suodatus on sivun varsinainen käyttöliittymä

Ruudukko ei tee päätöksiä. Se vain piirtää sen mitä jää jäljelle. Kaikki kiinnostava tapahtuu suodatinriveillä, ja niihin meni myös selvästi enemmän aikaa kuin mihinkään muuhun osaan sivua.

Kuusi riviä, kussakin yksi kysymys

Rivi ei ole datakenttä vaan kysymys. Saman tiedon olisi voinut jakaa monella tapaa, mutta jaoin sen sen mukaan mitä ihmiset oikeasti tulevat kysymään.

Kannattaa katsoa Käyttövoima-rivin sanamuotoa. Se ei kysy “mikä tämän tekniikka on” vaan “mitä minun täytyy omistaa”. Siksi 40 V on oma nappinsa vaikkei se ole oma alustansa. Se on kaksi 20 V kennostoa, ja nappi sanoo sen ääneen. Samasta syystä painepesu ja puutarha ovat ryhmiä eivätkä käyttövoimia.

Rivin sisällä TAI, rivien välillä JA

Yhden rivin napit ovat vaihtoehtoja samaan kysymykseen, joten useampi valinta laajentaa tulosta. Eri rivien valinnat ovat eri kysymyksiä, joten ne kaventavat sitä. Tämä on ainoa sääntö joka käyttäjän täytyy oppia, eikä sitä kerrota sivulla missään. Sen oppii katsomalla mitä luvut tekevät.

Laskuri jättää oman rivinsä laskematta

Tämä on koko suodatuksen tärkein yksityiskohta ja samalla helpoin tehdä väärin. Kun lasken mitä Käyttövoima-rivin nappi tuottaisi, kaikki muut rivit ovat voimassa, mutta käyttövoimavalintaa itseään en huomioi. Muuten yhden napin valitseminen nollaisi saman rivin muut vaihtoehdot, ja käyttäjä olisi umpikujassa josta pääsee vain perumalla valintansa.

Mitkä ehdot ovat voimassa, kun kunkin rivin nappien luvut lasketaan

Laskettava rivi	Markk.	Käyttöv.	Pakk.	Sarja	Rev.	Vuosi	Haku
Markkina	—	✓	✓	✓	✓	✓	✓
Käyttövoima	✓	—	✓	✓	✓	✓	✓
Pakkaus	✓	✓	—	✓	✓	✓	✓
Sarja	✓	✓	✓	—	✓	✓	✓
Revisio	✓	✓	✓	✓	—	✓	✓
Vuosi	✓	✓	✓	✓	✓	—	✓

Neljä kohtaa, joissa rikoin symmetrian

Puhdas fasettimalli olisi siistimpi, mutta se antaisi väärän kuvan datasta. Tein siis neljä poikkeusta tarkoituksella:

• Monijännitteinen työkalu näkyy jokaisessa perheessä jonka se hyväksyy. 20 V radio, joka käy myös 12 V kennostolla, löytyy kummallakin napilla eikä vain napilla “monijännitteinen”. Kysymykseen “mitä minun täytyy omistaa” on tässä kaksi oikeaa vastausta.
• “Ei vuotta” istuu vuosirivissä eikä erillisenä valintana. Sen voi pyytää vuoden 2019 rinnalla ja saa molemmat, koska vuosinappi on TAI ja vuoden puuttuminen on vain yksi vastaus lisää samaan kysymykseen.
• Ryhmäliput eivät ole poissulkevia. Puutarha, painepesu ja kompressori kertovat mihin työkalu on tarkoitettu. Ne eivät väitä, että kyseessä olisi jotain muuta kuin työkalu, joten ne eivät kilpaile pakkaustyyppien kanssa vaan elävät niiden rinnalla.
• “Tarvitsee tarkistuksen” on oma nappinsa käyttövoimarivissä, vaikkei se ole käyttövoima. Se kertoo tiedon laadusta eikä tuotteesta, mutta kuuluu silti samaan riviin: se on vastaus kysymykseen “mikä tätä käyttää”, ja vastaus kuuluu “en tiedä varmasti”.

Haku ei ole suodatin

Hakukenttä ja suodatinrivit näyttävät samalta työkalulta, mutta käyttäytyvät eri tavalla. Ero on tarkoituksellinen: suodatin rajaa, haku nimeää.

• Pelkistä tuotenumeroista koostuva haku ohittaa suodattimet. Jos kirjoitat numeroita jotka arkisto tuntee, saat täsmälleen ne, vaikka aktiivinen suodatin sanoisi muuta. Numeron kirjoittaminen on selvempi aikomus kuin selailu.
• Jokaisen osan on oltava tunnettu tuotenumero. Muuten 2015 tulkittaisiin ohitukseksi eikä vuosiluvuksi, jonka joku kirjoitti. Arkiston oma numeroalue 35391–550492 ratkaisee kummasta on kyse, joten sääntö tulee datasta eikä arvauksesta.
• Kaksi tai useampi tuotenumero tarkoittaa vertailua. Kortit pidetään silloin tarkoituksella erillään sen sijaan että ne ryhmiteltäisiin, koska useamman numeron kirjoittaminen on pyyntö nähdä ne rinnakkain.
• Mallikoodit ovat hakukelpoista tekstiä. Suomenkielinen nimi on usein pelkkä “Akkuporakone”, joten koodi on ainoa tapa pyytää tiettyä työkalua. Ja koska sarja nimeää osansa, akku + laturi -paketti löytyy myös laturin koodilla.
• Vähintään kaksi merkkiä. Yksi merkki osuu tuhansiin tuotteisiin eikä kerro mitään siitä mitä haettiin. Sama raja on alkuperäisessä rajapinnassakin, ja samasta syystä.

Poissaolo on tuotteen ominaisuus eikä listauksen

“Vain ilman manuaalia olevat” kuulosti yksinkertaiselta ehdolta ja osoittautui kolmiportaiseksi. IAN 300098 menetti saksalaisen tiedostonsa, mutta suomalainen ja englantilainen ovat levyllä, joten se ei ole tuote ilman manuaalia. Eikä tarkistus pysähdy siihen: jos saman tuotteen toinen listaus tarjoaa saman dokumentin, se on jo samalla kortilla. Tuote on ilman manuaalia vasta kun yksikään sen listaus ei tarjoa sellaista.

Paljonko sääntöjä tässä lopulta on

Kuudella rivillä on yhteensä 56 nappia, ja niiden lisäksi neljä kytkintä: yhdistä revisiot, vain limited-erät, vain uniikit ja saatavuus. Jokainen niistä on päällä tai pois, joten käyttäjä voi olla 2⁶⁰ eri tilassa. Se on noin 1,15 triljoonaa yhdistelmää, eikä yhdessäkään niistä saa näkyä ruudulla väärää lukua.

Sääntöjä on silti vähän. Koko suodatus on yksitoista pientä sääntöä ja 59 riviä koodia: kieli, käyttövoima, sarja, pakkaus, tyyppi, revisio, vuosi, haku, saatavuus, limited ja uniikit. Rivi kysyy yhden asian, yksi sääntö vastaa siihen, ja rivien välinen JA ketjuttaa ne.

Se pysyy pienenä, koska monimutkaisuus istuu kysymyksissä eikä koodissa. Ainoat kohdat joissa sääntö tarvitsee muutakin kuin “kuuluuko tuote tähän arvoon” ovat ne neljä poikkeusta jotka luettelin yllä. Kaikki muu on samaa kaavaa.

Lasku tulee toisaalta. Jokainen muutos laskee kaikkien 56 napin luvut uudelleen, ja koska luku lasketaan koko aineistosta, se on 574 392 tarkistusta. Siitä syntyy updateCounts(), joka on osion 6 mittausten jälkeen sivun suurin yksittäinen nykäys.

Kokeile itse

Alla on sama logiikka 18 aidolla suomalaisella listauksella. Vaihda laskutapaa oikealta ja katso mitä väärä laskutapa tekee saman rivin muille vaihtoehdoille.

Yliviivattu rivi kortissa on katalogin alkuperäinen nimi. Oikeassa arkistossa se näkyy hoverilla.

Kolmetuhatta korttia ilman kehystä

Sivu ei valitse oletusmarkkinaa, joten ensimmäinen näkymä on koko arkisto: 2 932 tuotetta. Suomen katalogi on vain pienempi tapaus (1 105), ei oletus. Kehyksettömyys ei poista suorituskykytyötä mihinkään, se vain siirtää sen minun tehtäväkseni.

Yksi oire, kaksi eri syytä

Puhelimella ensimmäinen painallus tuntui katoavan. Oletin että ruudukko pitää pääsäiettä varattuna, ja se pitikin osittain paikkansa. Loput selvisivät vasta profiloimalla: oireita oli yksi, syitä useampi, eikä se jonka korjasin ensimmäisenä ollut niistä suurin.

• Ruudukkoa ei voinut keskeyttää. Erän koko mitataan nyt ajassa eikä korttimääränä, jolloin hidas puhelin saa pienemmän erän kuin työpöytä ilman että kumpaakaan säädetään käsin. Ja pointerdown pysäyttää täytön, jotta kosketus saa vastauksen heti eikä jonon perässä.
• Käynnistys oli aidosti hidas, muttei siitä syystä kuin luulin. 5,7 MB:n JSON.parse vie 28 ms, eli se ei ollut ongelma lainkaan. Sen sijaan kaksi apufunktiota kävi läpi kaikki 10 257 listausta jokaista korttia kohden kysyäkseen mitä muuta samalla tuotenumerolla on. Yhdestä 1 104 ms:n tehtävästä ne veivät 945 ms ja 620 ms. Nyt ne lukevat indeksiä.

Kolmas kierros: paloittelu oli hoitanut väärää asiaa

Nuo kaksi korjausta eivät riittäneet. Puhelin jäätyi yhä, jos avasi asetusvalikon kesken ensimmäistä täyttöä, ja palautui itsestään juuri kun täyttö valmistui. Se ajoitus nimesi syyllisen, koska sen jälkeen ei rakenneta enää mitään.

Paloittelu oli levittänyt kustannuksen useaan tehtävään mutta ei vähentänyt sitä. Kyse ei ollut työn ajoituksesta vaan määrästä: puhelimessa näkyy noin kaksi korttia, ja sivu rakensi 2 932 korttia ja 87 636 DOM-solmua ennen kuin vastasi mihinkään.

Nyt täyttö pysähtyy 48 korttiin. Ruudukon alle jää sentinel, jota IntersectionObserver tarkkailee 1 400 px:n ennakolla ja joka pyytää 96 korttia lisää ennen kuin lukija ehtii perille. Yhteenvetorivi kertoo yhä todellisen kokonaismäärän: mitään ei piiloteta, vain DOM on lykätty. Ensimmäinen täyttö on 48 korttia ja 1 674 solmua, ja skriptiaika putosi 974 ms:stä 371 ms:iin.

Enkä väitä tätä valmiiksi. Jäljellä olevasta noin 450 ms:n blokkauksesta updateCounts() on 230 ms ja ajaa yhtenä tehtävänä, koska se käy jokaisen tietueen läpi kerran nappia kohden. Se on nyt suurin yksittäinen nykäys.

Näkymän ulkopuoliset kortit eivät maksa mitään

Teeman vaihto ja hakukentän näppäinpainallus paranivat samasta muutoksesta: content-visibility ja mitattu contain-intrinsic-size 430 px. Ilman mitattua arviota vierityspalkki hyppii. Mitatun kanssa selain ohittaa näkymän ulkopuolisten korttien tyylityksen ja asettelun kokonaan. Kansikuvat ladataan laiskasti, joten ensimmäisellä maalauksella niitä haetaan 245 kappaletta 6 153:sta.

Kaksi asiaa, jotka näyttivät halvoilta mutta eivät olleet

Profilointi nosti esiin kaksi kohtaa, joita en olisi arvannut koodia lukemalla. String.localeCompare rakentaa uuden vertailijan jokaista vertailua kohden, joten 2 935 tuotteen lajittelu nimen mukaan maksoi 155 ms. Jaettuna Intl.Collator-oliona sama on 2 ms. Ja fasettiluvut käyvät jokaisen listauksen läpi kerran nappia kohden, yhteensä 164 ms.

Fasettiluvuissa korjaus ei ollut tehdä työtä nopeammin vaan tehdä se eri järjestyksessä. Kukaan ei lue napin lukua sillä sekunnilla kun ensimmäiset kortit vasta ilmestyvät, joten lasken luvut nyt ruudukon jälkeen enkä ennen sitä. Mitattu kokonaisaika ei muuttunut lainkaan.

Kolme teemaa, yksi token-joukko

Värit luin PARKSIDEn omista design-tokeneista heidän tyylitiedostostaan, en poiminut niitä silmämääräisesti kuvakaappauksesta. Vihreä #1e4b32, power-vihreä #00ff99, punainen #cd2828.

Oletus: Parkside · valinta muistetaan localStoragessa

Kolme asiaa, jotka teemat pakottivat ratkaisemaan

• Otsake on kokonaan brändivihreä, joten kaikki sen päällä tarvitsee oman kontrastinsa. --header-bg, --header-ink, --header-muted ja --header-line muodostavat oman token-joukkonsa, ja napit pitävät vaalean pintansa.
• Valittu nappi ottaa power-vihreän #00ff99, koska brändivihreä brändivihreän päällä katoaisi kokonaan. Sama sääntö toistuu tälläkin sivulla, jonne lainasin valitun napin värin suoraan.
• Teema asetetaan <head>:ssä ennen tyylitiedostoa. Muuten sivu välähtäisi joka käynnillä edellisen teeman värit ennen oikeita.

Käyttöliittymän kieli ei ole katalogin kieli

Ylhäällä oikealla on FI / EN. Alempana suodatinriveissä on Markkina. Ne ovat eri asioita, ja niiden yhdistäminen olisi ollut houkutteleva mutta väärä yksinkertaistus.

• FI / EN vaihtaa sivun tekstit. Oletuksena on suomi vain jos selain pyytää suomea, muuten englanti.
• Markkina valitsee selattavan katalogin. Suomenkielinen käyttöliittymä voi hyvin listata englantilaisia manuaaleja, ja se on täysin kelvollinen tilanne.
• Englanti on lähdeteksti, suomi on päällyste. Puuttuva avain putoaa englantiin eikä näytä avaimen nimeä, joten käyttäjä ei koskaan näe facet.power.label-tyylistä vuotoa.

Mikä on yhä kesken

Arkisto on käytössä ja julkaistu, mutta kolme asiaa on yhä kesken. Kirjasin ne ylös, koska tunnettu puute on eri asia kuin tuntematon.

• Lidl poistaa manuaaleja, ja se jatkuu. Lähteestä on jo kadonnut 24 tuotenumeron PDF, ja sama voi tapahtua isoille tuotekuville. Yksiselitteistä ratkaisua tähän ei ole: säilyttäminen ja uudelleenjulkaisu ovat eri kysymyksiä, enkä ole vastannut jälkimmäiseen. Siksi pidän tässä vaiheessa kaiken tallessa paikallisesti, 19 GB manuaaleja ja 127 MB täysikokoisia tuotekuvia, vaikka julkaistu sivu linkittää manuaalit valmistajalle eikä levitä yhtäkään niistä.
• Tuotekuvia on 1 356 / 2 935. Lopuissa näkyy manuaalin ensimmäinen sivu, joka on mitä sattuu olemaan. Neljää Lidlin verkkokauppaa (BE / PL / NL / ES) en ole vielä käynyt läpi.
• Hyväksytty listaus ei enää parane säännöllä. Merkitsin kaikki 10 257 varmaksi, joten myöhemmin lisätty luokka ei tavoita niitä. Vain merkinnän poistaminen tavoittaa.