Er du som meg og blir ekstremt forvirret av tidssoner? Har du irritert deg over hvor vanskelig det er å finne tidspunktet for neste F1-løp? Har du noen gang feilaktig sett på F1-løpets "track time" og åpnet F1-strømmetjenesten tre timer for sent? Da er whenisthefuckingrace noe for deg.
Hva er Whenisthefuckingrace, og hva inspirerte deg til å lage det?
Whenisthefuckingrace.com er en enkel nettside som viser tidspunktet for neste F1-event, enten det er trening, kvalifisering, sprint eller løp. Hensikten er å formidle denne informasjonen på en mest mulig konsis og direkte måte. Nettsiden er inspirert av gullklumpen "Just fucking google it" (eller eventuelt "Let me GPT that for you" hvis du er født i en nyere generasjon) som formidler informasjon til brukeren på en litt passiv-aggressiv måte. Whenisthefuckingrace er derimot ikke irritert på brukeren, men heller på den offisielle nettsiden til F1, www.formula1.com. Kall det brukerfeil, men jeg har nemlig alltid slitt med å finne tiden for neste F1-løp på den offisielle siden. Flere ganger i 2021 åpnet jeg F1 TV for å se et F1-løp, bare for å oppdage at løpet var ferdig for over tre timer siden, og bli møtt av en thumbnail som avslørte at Hamilton hadde vunnet og Latifi krasjet i første sving. Grunnen til dette var at jeg sleit med å navigere det offisielle F1-nettstedet for å finne tiden for neste løp.
La meg demonstrere med et konkret eksempel. Fremgangsmåten for å finne tiden for neste F1-løp i din lokale tidssone er som følger:
- Du googler "f1 race time"
- Klikker på "f1 schedule 2024"
- Klikker på "Next round"
- Her ser du faktisk tiden for neste løp, men ikke la deg lure: tiden er ikke i din lokale tidssone. Mer enn ett løp ble spoilet for meg før jeg lærte dette.
- Klikker på overskriften til løpet
...og vipps, så har du kommet til siden som viser rett dato og klokkeslett for neste løp. Enkelt, ikke sant?
Nei.
Situasjonen er faktisk så ille at Google har tatt grep og nå viser en infoboks med tidspunktet for neste F1-løp i din lokale tidssone når du søker etter “f1 race time”. Dessverre inkluderer infoboksen verken treninger, kvalifiseringer eller sprinter. Når man allerede betaler rundt 300 kroner i måneden for F1 TV, forventer man kanskje litt mer valuta for pengene enn bare å se søndagsløpene.
Behovet var dermed tydelig identifisert, og etterspørselen etter en løsning var åpenbart enorm. Tiden var kommet for å adressere et reelt samfunnsproblem. Den 31. juli 2022 ble whenisthefuckingrace lansert.
Hva er tech-stacken, og hvilke tekniske utfordringer har du møtt?
Den første versjonen av prosjektet var en Single-Page App (SPA) skrevet i React og TypeScript. Nettsiden sendte en forespørsel til F1-API-et fra ergast.com, som returnerte tidsplanen for den aktuelle F1-sesongen. Applikasjonen gikk gjennom dataene, identifiserte tidspunkt og lokasjon for neste F1-event, og presenterte denne informasjonen på nettsiden.
Den opprinnelige applikasjonen fungerte teknisk sett som en proxy til Ergast-API-et, som bare presenterte informasjon på en mer brukervennlig måte. Dessverre var API-et svært ustabilt og hadde en tendens til å (tilfeldigvis) krasje på søndager. Etter introduksjonen av sprint-helger, tok det lang tid før API-et ble oppdatert til å støtte den nye helgestrukturen. Da tidspunkt for sprinter omsider ble lagt til, manglet API-et fortsatt tidspunktene for sprint-kvalifiseringer; en feil som fremdeles ikke er rettet. Et annet problem var at API-et sluttet å svare en stund etter at sesongen var ferdig, som om det hadde oppstått en feil. For en klientside-applikasjon uten tilstandslagring var det dermed umulig å vite om dette skyldtes at sesongen faktisk var over, eller om API-et bare hadde krasjet, med mindre jeg hardkodet datoer for sesong-start og -slutt. Nylig kom også nyheten om at Ergast-API-et vil bli slått av etter 2024-sesongen.
På grunn av disse utfordringene ble appen nylig skrevet om med en ny tech-stack basert på Next.js, Tailwind CSS, og Redis for caching. Next.js ble valgt på grunn av fordelene som rammeverket tilbyr, som server-side rendering (SSR). Fetch-requests gjøres nå på serveren, noe som gir bedre stabilitet og sikrer at brukeren ser en komplett side med innhold ved første innlasting, uten behov for en spinner eller ekstra ventetid. Dette gir også en raskere og mer pålitelig brukeropplevelse, da serveren har en høyere garanti for stabil nettverkstilkobling enn klienten, og kan hente og filtrere data, mens klienten bare trenger å laste ned sluttinnholdet som skal vises på siden.
Alle vellykkede forespørsler til API-et lagres i et Redis-lager. Hvis API-et slutter å svare, kan applikasjonen hente data direkte fra Redis. Selv når API-et slutter å svare mot slutten av sesongen, vil siden nå kunne skille mellom at sesongen er over og at API-et faktisk har krasjet.
Siden Ergast-API-et snart fases ut, bruker applikasjonen nå en erstatning, Jolpica F1, som er utviklet for å overta funksjonaliteten til Ergast.
Hva er noen ting du har lært?
For det første har jeg oppdaget hvor overraskende mye vedlikehold som kreves, selv for en tilsynelatende liten applikasjon. Man kan tro at alle brukerbehov og edge-caser er håndtert, men plutselig får man en melding fra en venn som klager over at det er uinteressant å se tiden for FP1, og at det er irriterende at nettsiden ikke alltid viser når selve løpet starter på søndagen.
Det har også vært svært lærerikt å implementere det samme prosjektet med to ulike tech-stacker, først som en SPA og deretter som en applikasjon med SSR. Hver av de krever at man tar helt forskjellige tekniske hensyn. For eksempel behøvde jeg ikke å tenke på tidssoner i SPA-versjonen. API-et leverte datoer i UTC, og Date-objektet på klienten konverterte dem automatisk til brukerens lokale tid. Med SSR derimot, kan serveren befinne seg i en annen tidssone enn klienten, noe som gjør håndtering av tidssoner mer komplekst. I den nye løsningen blir dermed alt utenom datoen rendret på serveren.
Hvis noe av dette hørtes interessant ut, vil jeg anbefale at du sjekker ut whenisthefuckingrace.com. Kildekoden finner du på Github-profilen min.
God jul! 🎄