Olet ehkä huomannut maalin. Jokaiseen sivuston musteen reunaan kasvaa valumia, jotka täyttyvät, raskastuvat, venyvät langaksi ja irtoavat – ja samoin käy jokaiselle logolle siinä rivissä brändejä, joille teemme töitä. Pisarat putoavat sen päälle, mitä niiden alla on (kuvan, kortin, napin), ja läiskähtävät. Tasaisella pinnalla ne pysyvät paikallaan. Kaltevalla ne liukuvat, valuvat reunan yli, juoksevat kylkeä alas ja tippuvat taas. Lopulta kaikki päätyy lammikoksi alatunnisteen päälle, ja lammikko nousee niin kauan kuin pysyt sivulla.
Logomme on valuma, joten sivustonkin piti valua. Ei loopattava video vaan oikeaa maalia, laskettuna livenä selaimessasi. Se rakennettiin Claude Codella, kuten toimistolta, joka on laittanut tekoälyn kylttiinsä, voi odottaakin. Valumien saaminen ruudulle oli helppo osa. Oikea duuni oli tehdä niistä niin hyviä, että ne kehtaa jättää pyörimään julkaistulle sivustolle, ja siitä tämä kirjoitus kertoo.
Maali tietää, missä se on
Jokainen valuma on pieni fysiikkalelu. Maali kertyy pisaraan, pisara raskastuu, ja mitä raskaampi se on, sitä nopeammin valuma etenee, kunnes se kuroutuu ja irtoaa. Putoava pisara lukee osumakohtansa todelliset ääriviivat pyöristettyjä kulmia ja kallistettuja kuvia myöten, joten pyöreän napin päällä maali myötäilee nappia. Se tuntee myös sivun. Heilauta sivua skrollatessa, niin roikkuvat pisarat irtoavat. Vie hiiri etusivulla logon päälle, niin logo nousee – ja sen päällä oleva maali nousee mukana.
Ennen kuin mikään tästä pääsi julkaistulle sivustolle, sen piti noudattaa neljää sääntöä:
- Ei koskaan tiellä. Se ei saa estää klikkausta, peittää tekstiä eikä hidastaa sivua.
- Paikallaan pyydettäessä. Jos laitteesi pyytää vähennettyä liikettä tai JavaScript on pois päältä, saat levossa olevan sivun, johon valumat on maalattu valmiiksi.
- Tasaista maalia. Terävät reunat ja sama pieni kiilto kuin logossa. Ei sumennusta, ei liukuvärejä.
- Unessa, kun mikään ei liiku.
Mikä teki tiukkaa
Ensin pyöreät muodot. Useimmat noista logoista istuvat pillerinmuotoisissa napeissa, ja maali tykkää hiipiä niiden pyöreiden päiden ympäri. Juuri siellä valumiin alkoi kasvaa teräviä piikkejä, kuin joku olisi leikannut ne saksilla. Roikkuvan pisaran piirtävä koodi oletti, että pinta pisaran yläpuolella on tasainen. Pillerin pohjassa se onkin. Kaarteessa koodi piirsi kiilan rinnettä ylös ja ohuen suikaleen maalia itse napin päälle. Korjaus oli antaa maalin kohdata todellinen kaari molemmin puolin, samaan tapaan kuin pisaran ja pinnan väliin vieritetty pallo koskettaisi kumpaakin.
Sitten tuli kohta, jossa selain melkein suli. Mitä pidempään sivulla viipyi, sitä raskaammaksi se kävi. Maalia kertyi jokaiseen kuvaan ja korttiin, jonka ohi skrollasit, ja hiiren vieminen logon päälle sai nauhan nykimään. Ensimmäinen versio noudatti ajatusta, jolle useimmat kehittäjät nyökkäisivät: piirrä maali moneen pieneen canvas-elementtiin ja piirrä uudelleen vain ne pienet palat, jotka muuttuvat. Se osoittautui täsmälleen väärinpäin. Jokainen canvas maksaa näytönohjaimelle jotain jo pelkästä olemassaolostaan ja uudelleenpiirtämisestä, oli se kuinka pieni tahansa, ja pitkän vierailun jälkeen niitä oli noin 250. Kun canvaksia oli vähemmän ja ne olivat isompia, eikä maalia piirretty sinne, missä kukaan ei sitä näe, määrä putosi noin 80:een. Testissä, joka skrollaa koko sivun ja vie hiiren tusinan logon päälle, grafiikkatyö väheni 39 % ja pitkät nykäykset putosivat yhdestätoista yhteen.
Mittaamisessakin oli oma ansansa. Ensimmäinen lukema väitti, että sivulta putoaa 19 ruutua joka sekunti. Ei pudonnut. Valumat pyörivät tarkoituksella 60 ruutua sekunnissa näytöllä, joka päivittyy 120 kertaa sekunnissa, ja selain laski jokaisen väliin jättämämme ruudun epäonnistumiseksi. Olisimme helposti voineet polttaa päivän sen luvun optimointiin. Tarkista, mitä luku tarkoittaa, ennen kuin lähdet jahtaamaan sitä.
Verkkosivulla voi olla persoonallisuutta, ja se voi silti olla nopea. Konsti on kohdella leikkisää osaa samalla kurilla kuin tylsiä osia: testaa se oikeassa selaimessa, kunnioita niitä, jotka eivät halua liikettä, äläkä anna sen olla tiellä, kun kävijä tekee sitä, mitä varten tuli.
Haluatko, että omat verkkosivusi tuntuvat vähän elävämmiltä?