Hvordan siden er laget

Fotografiet ligger i bunnen av hele siden, i farger, og alt innhold står på ruter av frostet glass over det. Det er ikke en stiløvelse. Det er en regel som avgjør hver enkelt avgjørelse under.

Tre setninger er hele regelen. Ingenting er ugjennomsiktig uten grunn: har en flate innhold, slipper den bunnen igjennom. Skillet mellom to lag er lys, ikke strek — en hvit kant med lav dekning, aldri en svart linjal. Og uskarpheten er alltid den samme mengden: ett glass, ikke syv forskjellige.

En regel som denne er verdt mer enn smaken til den som tegner. Den svarer på spørsmål ingen har stilt ennå, og den svarer likt hver gang.

Siden var noe annet før: en sesongkatalog trykt i to dekkende farger på ubestrøket ark, uten gjennomsiktighet noe sted. Punktene under er skrevet om fordi flatene ble byttet. Det som står igjen fra den utgaven, står igjen fordi det fortsatt er sant.

Begge gangene av samme grunn, og ingen av dem var smak.

Første gang: okeren var en lys og fin oransje som ga 2,83:1 mot papiret, under kravet på 4,5:1. Den ble mørknet til 4,85:1 og satt der så lenge bunnen var lys.

Andre gang: bunnen ble mørk. Den samme mørke okeren gir 2,70:1 mot glasset og faller under kravet der — den var jo valgt for å holde mot et lyst papir. Aksenten måtte løftes tilbake omtrent dit den startet.

Lys oker på papir, forkastet

2,83:1

Mørk oker på papir, trykkutgaven

4,85:1

Mørk oker på glass, under kravet

2,70:1

Aksenten nå, på glass

6,13:1

Poenget er ikke hvilken farge som vant. Det er at fargen aldri ble valgt for seg selv — den ble valgt av bunnen den skulle stå på, og da bunnen byttet, måtte den flytte seg igjen.

Én regel snudde med bunnen. På en full aksentflate var papiret satsen i trykkutgaven; nå må det være feltet. Lys sats på aksent gir 2,52:1, og den siste raden under er med for å vise nettopp hvor dårlig det er.

Aa

Lys sats mot glasset

15,44:1

Aa

Aksent mot glasset

6,13:1

Aa

Feltet som sats på aksentflate

6,20:1

Aa

Lys sats på aksentflate

2,52:1

Prøvelappen står ved siden av tallet fordi en tabell om kontrast som bare oppgir tall, ber leseren tro på dem. Regn etter før du rører en av fargene.

Det er den ene tekniske betingelsen hele omleggingen hviler på. «backdrop-filter» gjør ingenting synlig over en flat flate — den slører det som ligger bak, og ligger det en ensfarget bunn bak, ser sløret nøyaktig ut som bunnen. Glass på et papirark er bare et lysere papirark.

Derfor ligger fotografiet fast bak hele siden, i farger. Duotonen som lå på bildene før var en trykkregel, og det er ikke et trykk lenger.

Over fotografiet ligger et mørkt slør, og det er ikke pynt: uten det står satsen på motivet, og kontrasten blir det bildet tilfeldigvis gir akkurat der. Sløret gjør bunnen til et felt med kjent valør, og da kan tallene i punktet over faktisk regnes ut.

Har nettleseren ikke «backdrop-filter», lukkes rutene i stedet — de blir tette flater i feltfargen. Halvgjennomsiktig uten uskarphet er det ene som ikke virker: da står satsen på fotografiet uten noe imellom.

Første versjon byttet språk med JavaScript på samme adresse. Det gir tre problemer som ikke lar seg fikse uten å bygge: den engelske teksten finnes ikke for søkemotorer, ingen kan lenke til den, og valget forsvinner ved neste sidelasting.

Nå er norsk på «/» og engelsk på «/en/», med hreflang mellom seg. Det koster et byggesteg og løser alle tre.

Automatisk språkvalg er også ute, og det er verdt en advarsel: et norsk system melder «nb-NO», ikke «no». Den gamle testen sammenlignet de to første bokstavene mot «no» og sendte dermed hver eneste norske besøkende til den engelske utgaven.

Bildet som vises når noen deler lenken, ble tegnet i ren Python og lagt tilfeldig korn over for å ligne trykk. Det så riktig ut. Det veide 507 kB — mer enn resten av siden til sammen.

Støy har ingen gjentakelse, så komprimeringen får ikke tak i den. Og WhatsApp henter ikke delebilder over rundt 300 kB, så forhåndsvisningen falt stille ut der. Ingen feilmelding; bare ingen bilde.

Med tilfeldig korn

507 kB

Med radfiltrering i tillegg

656 kB — verre

Med rasterskjerm i stedet

16 kB

Radfiltrering er triksene man leser om, og her gjorde den vondt verre: filteret lagrer differansen mot nabopikselen, og differansen mellom to tilfeldige tall er like tilfeldig.

Løsningen ble et raster i stedet: et mønster som gjentar seg per definisjon og derfor pakkes nesten gratis. Delebildet er den ene flaten på hele siden som fortsatt tegnes etter trykkregelen, og det er med vilje — et delebilde blir skalert ned til en miniatyr i en samtale, og et raster tåler den nedskaleringen bedre enn glass og forløpninger gjør.

Ingen npm, ingen byggeverktøy, ingen rammeverk, ingen CDN-er, ingen informasjonskapsler, ingen analyse, ingen sporing. Skriftene ligger i repoet. Nettleseren din snakker med ett domene mens du er her.

Avhengigheter

0

Python-kilde

3 300 linjer, bare stdlib

Forsiden over nettet

27 kB pakket

Skriftene, tre familier

104 kB

Det er ikke en påstand man skal måtte tro på. En Content-Security-Policy sperrer alt utenfra, så påstanden kan ikke bli usann uten at noen skrur den av først.

• «1fr» har min-content som gulv. Ett langt ord i versaler var bredere enn spalten sin, og hele rutenettet vokste ut av arket på 280 px. «minmax(0,1fr)» løser det, og det er verdt å lete etter hver gang noe stikker ut på smal skjerm.
• Geometri i CSS er ikke geometri i SVG. Pinnene på kartet skaleres med transform, ikke ved å sette «r» — geometriattributter som CSS er ustøttet i eldre WebKit.
• Kystlinjen måtte tegnes som en åpen strek, atskilt fra den fylte landformen. Streker man den lukkede formen, streker man opp kantene langs viewBox-en også, og kartet får en ramme rundt seg.
• requestAnimationFrame strupes i bakgrunnsfaner, så en talltelling kan bli avbrutt midt i. Riktig verdi står i HTML-en fra før, og en timeout faller tilbake til den. Et halvferdig tall skal aldri bli stående.
• På iPhone ga et fast lag med blending, uskarphet i toppen og et opacity-skriv per frame hakking under scroll. Blendingen er borte, og opasiteten kvantiseres til trinn av 0,02.

Fanene over dag-for-dag-planene er en forbedring, ikke en forutsetning: slår du av JavaScript, står alle fire planene under hverandre og er fullt lesbare. Kartet er en tegning, ikke en applikasjon. Avgangene er skrevet inn i HTML-en.

Skjemaet er det eneste som trenger skript, og det lagrer ingenting — det åpner e-postprogrammet ditt med teksten ferdig utfylt, og du sender den selv.

Avgangene er oppgitt med måned og dag, uten årstall. Bygget legger på året ut fra når det kjører, og viser bare avganger som ligger foran i tid. Sesongen regnes november–mars, så et bygg i februar plukker resten av inneværende sesong og fortsetter inn i neste.

Det er den slags detalj ingen legger merke til når den virker, og alle legger merke til når en side står med fjorårets datoer i mars.