Teknologi - Nuxt.js, TinaCMS
Verktøy - TypeScript, Sass, React
Prinsipper - Responsivt Design, UU, Dataintegritet
- Implementerte en fullskjerm transparent hamburger-meny for små enheter for å forbedre mobilnavigasjon.
- Standardiserte alle brytningspunkter (XS til 5XL) i prosjektet for å følge moderne industristandarder.
- Refaktorerte Sass-mixins for dynamisk håndtering av medieforespørsler og moderniserte fargefunksjoner.
- Utviklet et gjenbrukbart system for betingede felt i TinaCMS, som automatisk håndterer Alt-tekst og bildebeskrivelser.
- Implementerte dynamisk validering som sikrer at kritiske felt er påkrevd kun når de er relevante for innholdet.
- Løste kritiske TypeScript-feil i datakartleggingen for å sikre stabil drift og korrekt URL-generering.
- Optimaliserte visningen av styremedlemmer ved å innføre faste bildeformater og fjerne visningsfeil på mobil.
- Gjennomførte en omfattende "Kristoffer-style" refaktorering for å øke lesbarheten og modulariteten i koden.
Utrolig tilfredsstillende å se arkitekturen falle på plass med så rene løsninger!
Utfordring & Løsning
Dagens arbeid fokuserte på å tette tekniske gap i nettsidens visuelle og redaksjonelle struktur. Det eksisterende responsive systemet bar preg av vilkårlige verdier, og redaktørpanelet manglet logikk for å veilede brukerne gjennom universell utforming. Hovedmålet var å transformere disse svakhetene til styrker gjennom en konsekvent anvendelse av moderne utviklingsprinsipper og en ryddig, modulær arkitektur.
- Jeg startet med å redesigne navigasjonen for små skjermer. Ved å implementere en transparent hamburger-meny som trigger et fullskjerm-overlay, har jeg sikret en moderne brukeropplevelse uten å kompromittere det klassiske desktop-oppsettet. Dette ble støttet av en totalrenovering av prosjektets brytningspunkter, som nå følger etablerte standarder fra 320px til 2560px.
- For å fremtidssikre CSS-koden, erstattet jeg utdaterte funksjoner med det moderne 'sass:color'-modulen. Jeg refaktorerte også sentrale mixins til å bruke dynamisk nøkkeloppslag i stedet for hardkodede betingelser, noe som gjør det responsive rammeverket langt mer vedlikeholdsvennlig.
- I redaktørpanelet (TinaCMS) utviklet jeg en intelligent hjelpefunksjon for betingede felt. Denne funksjonen overvåker bildevalg og bringer automatisk frem felt for Alt-tekst og bildetekst når de trengs. Ved å integrere sanntidsvalidering sørget jeg for at disse feltene også blir obligatoriske når bildet er til stede, noe som sikrer at nettsiden alltid etterlever krav til universell utforming.
- Jeg ryddet opp i en kritisk feil i navigasjonskomponenten der layout-klasser ble feilaktig flatet ut, noe som førte til visningsfeil på desktop. Ved å korrigere denne logikken og samtidig fikse TypeScript-mismatch i artikkelkartleggingen, har jeg stabilisert både frontend-visningen og systemets interne databehandling.
- Visuelt optimaliserte jeg "Om oss"-siden ved å tvinge faste størrelsesforhold på styrebilder og fjerne overlapp-feil på mindre telefoner, noe som resulteterte i et langt mer profesjonelt og ryddig uttrykk.
Arbeidet har resultert i en feilfri oppstart av hjemsiden der alle de gamle feilmeldingene i bakgrunnen er fjernet. Ved å flytte kartleggingen til hentingsfasen og rydde i den visuelle strukturen, har jeg forbedret ytelsen og forbedret flyten på nettsiden. Den forbedrede semantikken og universelle utformingen gjør siden pålitelig for både søkemotorer og brukere med hjelpemidler. Viktigst av alt har jeg snudd en utfordrende situasjon til en mulighet for modernisering og læring – en del av koden er nå så logisk organisert at kunden har en plattform som er trygg, rask og enkel å videreutvikle.
Gjennom denne prosessen har jeg sett verdien av å bygge "hjelpe-arkitektur" fremfor bare å legge til felt. Ved å sentralisere logikken for betingede felt, har jeg spart fremtidig utviklingstid og sikret en Single Source of Truth for skjemaoppførsel. Erfaringen med å integrere React-logikk direkte i CMS-konfigurasjonen har også åpnet nye muligheter for hvordan vi kan skreddersy redaktøropplevelsen fremover uten å miste den tekniske integriteten.