To enable any component to trigger a notification, I created a Pinia store called “notification”. The store holds state for the notification array and an action to add notifications to the store. After 2.5 seconds, the notification is removed, as we only want it to be visible for a short period.

In my component, after saving data in the database, I can run the action with the code below. This adds a notification with the text “New description has been saved” and a type of “success”.

To display the notifications in the UI, I created a component that imports and lists the notifications from the store in a transition-group. This way, they animate in and then fade out after 2.5 seconds. In the project that would look something like this:

Now, when the action is used, a notification is added to the array and the UI updates. After 2.5 seconds, the notification is removed from the array and the UI updates again. This isn't an advanced system, but it is simple and suited this project perfectly.

Building a simple notification solution with Nuxt 3

In January we went on a ski trip to Kläppen, we were there for a week with my fiancé’s family and I had a blast snowboarding and seeing the others that are just getting into skiing learning, and progressing. We are going back in January next year and I’m counting down the days.

During the spring we found out we were having another baby which is a major change in all of our lives, especially for our daughter.

In the summer I spent time at the flying club working towards my glider pilot license and even though I was not able to get all the flying done, I did end up finishing all the theoretical tests and got my radio license for both Swedish and English. In total, I spent over 11 hours in the air with 30 starts during the season.

During my vacation, we went on a road trip for a few days staying at a few different places in Dalsland and Dalarna. We stayed two nights in Kläppen where we went on a ski trip earlier in the year. Everything looked very different in the summer. We also went to Mora and looked at how they make the classic “dalahäst”-figurines as well went on a half-day cruise up “Dalslands Kanal”.

In the fall I started work on the new website for the flying club. Due to all the other things going on at work and home in preparation for having our second child things moved at a slow but steady pace until we finally published version 1.0 in early December.

In late November our second daughter was born and since then I think all of us have been just trying to get into new routines.

It has been an intense year with things happening both at work and home and I’m very excited to see what 2023 will bring.

Reflection of 2022

Here is an example of where things have gone wrong. Inter is loaded via @font-face and assigned to a font family called 

, this is a weight 900 font. But later on for the 

-class, the font is used but ‘transformed’ into a weight 300 which manipulates the font to look thinner.

Instead what would have been better is to define all weights needed to a collective font family called 

 and then grab the correct font file based on the assigned weight.

Use the right font for the job

In practice, this means that if I publish a new blog post the first visitor that visits my page after that will not see the new post but in the background the server will check and regenerate the page for the next visitor. In some cases, this wouldn’t be a good approach as the content isn’t always up to date and you can end up with different versions of pages for different visitors depending on caching strategy used by the framework and host.

Next.js makes using ISR incredibly simple, using the getStaticProps hook you can return a revalidate key with a value for how quickly content should be regarded as stale.

I use it on the pages containing data grabbed from my CMS like the front page, blog, and game-shelf. I do not publish any content that is critical for my visitors to get right away and generally I make sure to check how everything looks once I publish a new post which means the only one visiting the page and seeing an old version is me. The reason I didn’t go the static generated route is that I do not want to have to trigger a redeploy of my code to build the latest blog posts.

For anyone considering using ISR I would suggest thinking about how critical it is for the content to be completely up-to-date at all times and weigh that against the performance benefits of having the pages served statically instead of generated on demand by the server. It all comes down to the use case.

Some thoughts on ISR, and why I use it

When I decided to re-make my website I first thought about building it in a vue.js framework like Nuxt or Gridsome depending on how I wanted it to be hosted, but in the end I chose a different route. I realized that this would be the perfect time to not only build something new but also learn something new so I went with a front-end framework and a CMS I hadn’t worked with on a real project before. I decided to go with 

 as the headless CMS. As always I also used 

I’ve enjoyed the workflow of building the site in Next.js and I do like the ease of customizing the Sanity Studio (administration panel) to fit my needs with post types and fields. I will hopefully write a more comprehensive post on my thoughts on working with these projects soon. If you have any questions feel free to 

Blog

Building a simple notification solution with Nuxt 3

Reflection of 2022

Use the right font for the job

Some thoughts on ISR, and why I use it

New year, new website