Fiks ferdig julekalender på 6 dagar 🎁

Av Eirin Sognnes og Elena Andrés

Bilde av Eirin og Elena

For første gang har Kraftlauget offentleggjort si interne, faglege julekalender, der tilsette har delt eit fagleg innlegg kvar dag i desember. Dette er historia om korleis den blei til på berre 6 dagar.

 
 

Før 2022 var julekalenderen intern og lukene blei delt på Slack. I november 2022 begynte idéen til ein offisiell julekalender å spire og 24. november blei eit kodelager for julekalenderen oppretta på Github. Kunne vi klare det på berre 6 dagar?

Spoiler alert: Ja, det kunne vi! Les alle lukene på https://julekalender.kraftlauget.no.

Hobbyprosjektet

I utgangspunktet starta julekalenderen som eit hobbyprosjekt for å oversette ord og setningar for dei som er interessert i å lære seg nye språk. Målet var at kvar luke skulle innehalde eit nytt ord og ein ny setning ein skulle oversette. Med fagjulekalenderen litt i tankane, blei kalenderen utvikla for å vere mogeleg å gjenbruke. Prosjektet blei satt opp med Preact + Typescript som frontend og Vite som byggeverktøy. Firebase blei brukt for å lagre luker og data frå lukene. Nokre av høgdepunkta frå kalenderen, er animerte luker og den dekorative snøen som kan få kvar og ein Grinch i julestemning. Lukeanimasjonen er snasen CSS-kode, medan snøen kjem frå biblioteket react-snowfall.

 
Ein animasjon som visar julekalendaren til kraftlauget. Det faller snø over 24 raude luker. Musepeikaren klikker på og åpnar luke ein og to.

Slik blei julekalenderen sjåande ut til slutt

 

Berre ein dag igjen

30. november begynte arbeidet med å videreutvikle den generelle kalenderen til ein som passa Kraftlauget sin visuelle profil og fagjulekalenderen sitt format. Modalen for å vise innhaldet i lukene var allereie på plass, men vi trengde også eit dataformat. Vi bestemte oss for å bruke Markdown, sidan det er relativt enkelt å lære seg, og er godt støtta av skriveverktøy. For å lagre lukene satt vi opp Firebase Storage, der lukefilene vart lasta opp etter kvart som dei var klare til publisering. Vi brukte markdown-to-js, som var kompatibelt med Preact, for å vise lukene i kalenderen.

 
Eg vil anbefale å bruke meir enn 6 dagar på å utvikle ein julekalender
— Eirin Sognnes
 

Før lansering måtte designet også oppdaterast, noko som raskt viste seg å vere den mest utfordrande jobben for oss utviklarar. Spesielt vanskeleg var det å finne ein farge som både fekk folk i julestemning og som passa med Kraftlauget sin knallgule kontrastfarge. Her måtte det mykje eksperimentering til, og til det var CSS-rammeverket Tailwind nyttig. Vi brukte ein config der vi kunne navngi ulike fargar og deretter endre dei rett i konfigen for å sjå resultatet. Det utnytta vi masse. Dei to beste julefargane er grønt og rødt, men gult og grønt kan fort minne om ein kjent, jordbruksbasert merkevare, og rødt og gult var vanskeleg å kombinere. Til slutt måtte vi hente inn eksperthjelp og enda opp med ein designergodkjent fargekombinasjon.

Lansering

På dette tidspunktet var det allereie 1. desember og målet var lansering i løpet av morgonen. Det meste var klart og vi mangla berre å laste opp den første luka og sette opp domenet. I tillegg hadde vi, naturleg nok, ein backlog med småting vi ønska å fikse. Men først var det tid for litt søvn!

 
 

Klokka 08:30 om morgonen, ramla det inn ei melding om at domenet var klart. No kunne alle gå inn på https://julekalender.kraftlauget.no for å lese dagens post! 🥳

Kva lærte vi?

Først og fremst kan vi anbefale å bruke meir enn 6 dagar på å utvikle ein julekalender! Vi kan også anbefale å få alle deltakarane til å skriva ferdig lukene før 1. desember, slik at ein slepp å laste opp nye luker kvar dag.

Teknisk er det alltid element vi har lyst å forbetre. Vi planlegg for eksempel å forbetre tilgangskontrollen på lukene. Alle sjekker på om du fekk lese neste luke låg i frontend-koden. Sida vi hadde lesetilgang på lukene var det derfor mogeleg å snike på neste luke dersom ein hadde lyst til det frå og med når den vart publisert.

Likevel er vi veldig fornøgde med det vi utretta på så kort tid. Kalenderen kan skilte med kule css-animasjonar, snø, modal, opplasting og framvising av luker fra Markdown. Visinga blei også forbetra underveis, då lukeforfattarar ønska seg funksjonalitet som som quotes og tabellar. I tillegg blei enkelte designelement forbetra etter fleire dytt fra designerane våre.

Om du framleis har julestemning, eller berre ønskjer å lese knallgode fagartiklar frå Kraftlaugets flinke handverkarar, så ta turen innom https://julekalender.kraftlauget.no og les alle lukene!

 
Forrige
Forrige

Våre spådommer for front-end i 2023

Neste
Neste

Bergens mest populære design- og konsulentselskap🎉