Løsningen er updated.email! updated.email er en nyhetsbrev-tjeneste, hvor du som utvikler som liker å holde deg oppdatert på alt det kule som skjer i frontend-verden, kan abonnere på et nyhetsbrev skreddersydd til deg og dine interesser.

updated.email gir deg muligheten til å velge akkurat de npm-pakkene som interesserer deg, og sender deg en ukentlig epost med alle major- og minor-versjoner som har kommet ut den siste uken.

Historien bak

Alt startet egentlig med problemstillingen jeg introduserte i begynnelsen av artikkelen. Hvordan skal en holde seg oppdatert på alt som skjer?

Oppdateringer fra React, Next.js, TailwindCSS, React Router, Vue, Nuxt.js, Oxlint, Biome.js, osv... Å sjekke alle disse på regelmessig basis er jo en fulltidsjobb i seg selv. Men, jeg er jo utvikler, dette må da vel være noe jeg kan automatisere! 💡

Jeg bestemte meg derfor på å lage en proof-of-concept på dette. PoC-en skulle enkelt bare bestå av en cron-jobb i GitHub Actions som sjekket en hardkodet liste med pakker for nye versjoner. Listen over nye versjoner og release notes for de skulle så sendes til meg på epost. Enkelt!

Jeg bega meg derfor ut på en sesjon med vibe coding av typen "ikke se over koden", og endte opp med en fungerende proof-of-concept på en kort kveld 📈

Epostene ser helt forferdelig stygge ut, det er tungvint å legge til flere pakker jeg har lyst å holde meg oppdatert på og den får litt for ofte ikke til å hente ut release notes, men jammen funker det. Dette kan jo faktisk ligne på noe nyttig!

Fra PoC til produkt

Og det var det. Etter å ha brukt PoCen i noen dager bega jeg meg ut på å lage den ekte løsninga. Og etter en litt lengre sesjon, og hakket mindre vibe coding ✨, og litt mer vibe engineering 👷, så lanserte jeg updated.email.

Nå ser epostene profesjonelle ut, det er enkelt å oppdatere pakke-abonnementene sine og release notes... fungerer fortsatt ikke heeele tiden, men ganske mye oftere 😅 Og best av alt: Det er ikke bare jeg som drar nytte av dette lengre. Den er åpen for alle! 🤩

Stacken

updated.email er en Next.js-app med Convex som database. For epost-utsending bruker jeg Resend, og for selve epost-innholdet bruker jeg React Email. Autentisering er en selv-lagd "magic link"-løsning.

Både innlogging og abonnements-bekrefting bruker denne enkle "magic link"-løsningen, hvor det lages en tilfeldig streng, et token, som sendes til brukerne på epost. Når brukerne så besøker denne lenken har vi fått verifisert at de har tilgang til eposten de prøver å "logge inn" med.

React Email hadde jeg ikke tidligere erfaring med, men det viste seg å være en drøm å jobbe med! Hvis du har prøvd å programmatisk lage eposter før, så har du nok kjent på hvor smertefullt det kan være. Epost har støtte for HTML, så du skulle kanskje trodd at du enkelt kan lage ganske snasne eposter, men det du ikke tenker over er at epost-klienter er værre enn Internet Explorer på å holde seg oppdatert på CSS-fronten. I epost-verden er det <table> som må brukes for å lage layout. Ikke noe flex eller grid her, dessverre. Heldigvis abstraherer React Email mye av dette bort for deg, som gjør det uendelig mye diggere å lage eposter du kan være stolte av ❤️

Som om ikke det var nok, så kommer de også med et ganske digg dev-verktøy som lar deg forhåndsvise hvordan epostene dine kommer til å se ut.

React Email vil jeg helt klart anbefale videre om du må lage litt eposter i ditt neste produkt. Jeg kommer i alle fall til å bruke dette igjen!

Vanskeligheter

En ting jeg lærte ved å lage updated.email er at epost er vanskelig. En ting er som nevnt at epost-innholdet er vanskelig å få til å se ut som du vil, men enda værre er hvor lite kontroll du har.

Jeg sleit lenge med at en kjær kollega og venn, Eirik, ikke greide å abonnere på updated.email. Hver gang Eirik prøvde å abonnere eller logge inn fikk han bare beskjed om at tokenet hans var ugyldig. Alle andre som hadde prøvd så langt, meg selv inkludert, hadde seilt gjennom abonnering og innlogging helt problemfritt. Men, noe med Eirik sin epost spilte ikke på lag med løsningen min.

Problemet? "Magic link"-lenkene for abonnements-bekreftelse og innlogging ble scannet av epost-tilbyderen til Eirik, før han fikk tak i eposten. Ikke nok med det, men siden scanningen faktisk besøker lenkene så "bekreftet" det abonnementet hans, og ble videre tatt inn til dashboardet, og scannet videre lenker der også. Og hva finner den der? Jo, selvfølgelig en lenke for å melde Eirik ut av nyhetsbrevet...

Så hver gang Eirik prøvde å abonnere, tok epost-scanningen som var satt opp på Eiriks epost å meldte han inn og rett ut igjen. Og ikke hadde han noen måte å abonnere på selv heller, fordi scanningen hadde brukt opp tokenene i de magiske lenkene, før de i det hele tatt nådde Eirik!

Epost er et vepsebol... Løsningen ble å heller sende brukere til et skjema hvor de nå må eksplisitt gjøre en handling før tokenet blir brukt opp. Litt kjipere brukeropplevelse, men Eirik får i alle fall abonnert på nyhetsbrevet mitt nå!

Gjør som Eirik!

Har du lyst til å holde deg oppdatert på alt det fete som skjer i frontend-verden. Ta en titt innom updated.email og abonner på dine favoritt-pakker, da vel!