Varbūt pamanīji krāsu. Katrai tintes malai šajā mājaslapā izaug lāses, kas piepildās, kļūst smagas, izstiepjas pavedienā un atraujas, un tāpat notiek ar katru logo zīmolu joslā, kuriem strādājam. Pilieni nokrīt uz visa, kas atrodas zem tiem (fotogrāfijas, kartītes, pogas), un pašķīst. Uz līdzenas virsmas tie paliek uz vietas. Uz slīpas tie slīd, pārlīst pāri malai, notek gar sānu un pil tālāk. Galu galā viss sakrājas peļķē virs kājenes, un tā ceļas augstāk tik ilgi, kamēr esi lapā.
Mūsu logo ir lāse, tāpēc arī mājaslapai bija jāpil. Nevis video cilpā, bet īsta krāsa, ko tavs pārlūks aprēķina uz vietas. To uzbūvējām ar Claude Code, kā jau var gaidīt no aģentūras, kas AI liek uz izkārtnes. Dabūt lāses ekrānā bija vieglākā daļa. Īstais darbs bija padarīt tās tik labas, lai tās drīkstētu atstāt darbojamies publiski pieejamā mājaslapā, un par to ir šī piezīme.
Krāsa, kas zina, kur atrodas
Katra lāse ir maza fizikas rotaļlieta. Krāsa krājas pilienā, piliens kļūst smagāks, un jo smagāks tas kļūst, jo ātrāk lāse tek, līdz sašaurinās un atraujas. Krītošs piliens nolasa īsto kontūru visam, kam trāpa, arī noapaļotiem stūriem un sašķiebtām fotogrāfijām, tāpēc krāsa uz apaļas pogas apskauj pogu. Tā jūt arī lapu. Strauji paskrollē, un karājošās lāses nokratās. Uzbrauc ar kursoru uz kāda logo sākumlapā, un tas paceļas, bet krāsa uz tā – līdzi.
Pirms to laida publiskajā mājaslapā, tai bija jāievēro četri noteikumi:
- Nekad netraucē. Tā nedrīkst bloķēt klikšķi, aizsegt tekstu vai palēnināt lapu.
- Nekustas, ja palūdz. Ja tava ierīce prasa samazinātu kustību vai JavaScript ir izslēgts, tu redzi lapu miera stāvoklī ar uzzīmētām lāsēm.
- Plakana krāsa. Asas malas un tāds pats neliels spīdums kā logo. Bez izplūdumiem, bez gradientiem.
- Guļ, kad nekas nekustas.
Kur kļuva sarežģīti
Vispirms – apaļas lietas. Lielākā daļa logo atrodas tablešu formas pogās, un krāsa ļoti grib aplīst ap to apaļajiem galiem. Tieši tur lāsēm sāka augt asi dzeloņi, it kā kāds tās būtu apgriezis ar šķērēm. Kods, kas zīmēja karājošo pilienu, pieņēma, ka virsma virs tā ir līdzena. Pogas apakšā tā arī ir. Uz izliekuma tas zīmēja ķīli augšup pa nogāzi un krāsas strēmeli pāri pašai pogai. Risinājums bija ļaut krāsai satikt īsto izliekumu abās pusēs – tā, kā abām pieskartos bumbiņa, kas ieripināta starp pilienu un virsmu.
Tad pienāca brīdis, kad pārlūks gandrīz izkusa. Jo ilgāk biji lapā, jo smagāka tā kļuva. Krāsa krājās uz katras fotogrāfijas un kartītes, kurām paskrollēji garām, un, uzbraucot uz logo, josla raustījās. Pirmā versija sekoja idejai, kurai piekristu lielākā daļa izstrādātāju: zīmēt krāsu uz daudziem maziem audekliem (canvas) un pārzīmēt tikai tos gabaliņus, kas mainās. Izrādījās, ka ir tieši otrādi. Katrs audekls grafikas čipam kaut ko maksā jau ar to vien, ka eksistē un tiek pārzīmēts, lai cik mazs tas būtu, un pēc ilgas vizītes to bija ap 250. Mazāk, bet lielāki audekli un tas, ka nezīmējam neko, ko neviens neredz, šo skaitu samazināja līdz aptuveni 80. Testā, kas noskrollē visu lapu un uzbrauc uz duča logo, grafikas darbs saruka par 39 %, bet garo aizķeršanos skaits – no vienpadsmit līdz vienai.
Arī mērīšanai bija savs slazds. Pirmais rādījums teica, ka lapa katru sekundi zaudē 19 kadrus. Tā nebija. Lāses apzināti darbojas ar 60 kadriem sekundē uz ekrāna, kas atsvaidzinās 120 reizes sekundē, un pārlūks katru izlaisto kadru ieskaitīja kā kļūdu. Mēs viegli varējām nosist veselu dienu, optimizējot pret šo skaitli. Pirms dzenies pakaļ skaitlim, pārbaudi, ko tas nozīmē.
Mājaslapai var būt raksturs, un tā joprojām var būt ātra. Viss triks – izturēties pret rotaļīgo daļu ar tādu pašu disciplīnu kā pret garlaicīgajām: testēt to īstā pārlūkā, cienīt tos, kas negrib kustību, un neļaut tai traucēt tam, kā dēļ apmeklētājs atnācis.
Gribi, lai arī tava mājaslapa būtu mazliet dzīvāka?