I november laget vi en nettside som har fått navnet Leggdenvekk.no.
Den går ut på én enkel ting: Å legge mobilen vekk!
Vi er tre hyggelige mennesker på 23 og 24 år som liker å gjøre kreative prosjekter. Nå kunne vi endelig få gjort noe sammen.
Philip Balavoine og Ingvild Flåto har bidratt som idémakere og undertegnede har utviklet den tekniske løsningen.
Hvorfor lage noe sånt?
Vi var lei av at mobilen alltid ble dratt opp i sosiale settinger sammen med venner og familie. Problemet er størst når noen tar opp mobilen rett foran deg:
Det gir en følelse av at det som skjer på mobilen er viktigere enn samtalen, noe vi mennesker opplever avvisende.
Det er ikke populært å være den som ber de andre om å legge vekk mobilen. Den personen som sier ifra kan fort bli uglesett.
Så hva om vi kunne gjøre det på en humoristisk måte? Gjerne i settinger hvor flere sitter med mobilen, men også når svigermor trenger ett lite hint uten at noen andre legger merke til det.
Her kommer nettsiden leggdenvekk.no inn:
- Lenken til nettsiden sendes til de som bør legge den vekk, og heller være i nuet.
- Dersom lenken blir sendt på melding eller andre steder som støtter «Open Graph» vil det vises et bilde med teksten «Klarer du å legge den vekk?»
- Brukeren får opp et valg om å sette en av fire forhåndsbestemte varigheter på en nedtelling. 5, 15, 30 og 45 min. Så er det ikke verre enn å trykke «Jeg legger den vekk» og faktisk legge den vekk.
Vi håper jo selvsagt at nettsiden blir tatt imot med smil og selvironi, og ikke oppfattes som passiv aggressivt. Da er vi like langt.
Sånn fungerer det
Løsningen er nå slik:
Brukeren starter nedtellingen og det lagres to cookies i nettleseren. Både for starttid og slutttid. Da vil nedtellingen fortsette selv om nettleservinduet oppdateres.
Det tekniske oppsettet består av følgende:
- Remix. Versjonen med React Router 7 er klar til å pushet ut, men vi venter på at Vercel skal støtte det. Noe som jeg syntes er litt er rart at de ikke gjør ennå.
- Umami brukes for å spore brukeren på en personvernvennlig måte uten å lagre cookies.
- Sanity for annet innhold
- TypeScript
- Tailwind for CSS
- Shadcn for UI-elementer
Remix og React Router er blitt ett – bør du oppgradere?
Framer og React-confetti
Her har vi tatt i bruk Framer Motion (eller nå kun Motion) som bibliotek for animasjoner på forsiden og for smilefjeset.
Opp-ned smilefjeset begynnere å rotere 180 grader fra start til slutt. Det er en av de gøye tingene som er lov i et hobbyprosjekt.
Pakken React Confetti Explosion brukes for konfetti eksplosjon når brukeren har klart nedtellingen. Konfettien trigges av en useEffect i React og skal i utgangspunktet gå av med en gang tiden er ute, men av ukjente årsaker venter Safari med å trigge den til brukeren har åpnet vinduet igjen.
Tror det har med strømsparing å gjøre og er bare positivt for vår del. Firefox trigger derimot med en gang.
Ideene har løpt løpsk
Vi startet med ideen om en lenke som kunne deles og mange ulike «anledninger» som julebord, vors og familietid, men innså fort at vi ikke kom til å klare å dekke alle mulige anledninger.
Etter det var vi innom at brukere kunne spille sammen med hverandre og få opp hverandre sitt kallenavn og se om de hadde startet utfordringen.
Appwrite, som er en konkurrent til Supabase, ble brukt til å sette opp anonym autentisering og database for kallenavn og lenkene. Dette tok i underkant av 30 minutter fordi at Api-et deres er så intuitivt. Dette fungerte greit, men det var ikke Realtime. Nettsiden hentet ny data hvert 5. sekund og etter hvert sjeldnere. Det var ikke godt nok.
Hva om vi kan overvåke skjermen og vise at brukeren har tapt hvis den går ut av nettsiden?
Det ble stoppet av begrensninger i Safari på iPhone som ikke lar oss overvåke om nettsiden har gått i bakgrunnen eller skjermen har blitt låst på en pålitelig måte.
Hva med en app, da?
Muligheten for å lage en React Native app med rammeverket Expo EAS var fristende.
Her fikk vi tilgang til om appen var gått i bakgrunnen, men ikke muligheten til å skille om det var fordi at andre apper ble brukt eller at skjermen hadde blitt låst. For å vite dette prøvde vi å skrive helt native kode i Swift, og koble dette sammen med Expo gjennom deres Expo Modules API.
På det tidspunktet stoppet den tekniske kompetansen min. Copilot var heller ikke særlig god på det området.
Det er grenser for hvor mye tid vi kan legge i et hobbyprosjekt som ikke har noen intensjon til å dra inn cash.
Nettsiden kan også virke mot sin hensikt. Brukeren må dra opp mobilen selv for å kunne sende lenken videre. I tillegg ønskes det at mobilbruken reduseres i sosiale sammenhenger. Vi tenkte derfor at det er mot sin hensikt å be folk om å laste ned en app for å legge vekk mobilen. En nettside er forhåpentligvis midt i blinken og lavterskel nok til å bli brukt.
Planene videre er å leke med ideen og høste feedback for å gjøre den enda bedre. Holder på med å legge til flere motiverende tekster hvis brukeren prøver å gi opp før nedtellingen er ferdig.
