DEV Community: Tuomo Kankaanpää

Dump the mouse

Tuomo Kankaanpää — Fri, 20 Dec 2024 10:52:30 +0000

When I started to use keyboard shortcuts, instead of relying on the mouse, everything changed.

I got faster and more efficient in writing code plus I actually have to remember less things now. In today's email I want to show you my top 3 keyboard shortcuts that I use every day all the time:

1. CMD + TAB (ALT + TAB) - Change between open windows

This is by far the most important and most used shortcut for me. I am amazed how many times I run into people who don't use this. I could not live without this! If you don't use it yet, START NOW!

2. CMD + S (CTRL + S) - Save

If you are using your mouse to save your code, I am sorry but you are doing it wrong. I save my code hundreds of times a day and doing it without a shortcut would not only be a lot more work but it would be much slower too.

3. CMD + SPACE (WIN) - Search / open any app

I don't use mouse for opening up apps and files. I always open up the spotlight search (Start menu in Windows) and type in the app name. Opening everything this way is first of all faster, but it also saves you from having to remember where everything is.

Start using them

The problem with keyboard shortcuts is that you don't know that you need them until you use them.

Learning to remember new keyboard shortcuts might feel like harder thing to do than just keep using your mouse. I have been coding for the better part of 10 years and using computers daily over 20 years and if there is one tip I would give, it is to start using keyboard shortcuts. It is one of those things that you need to try out yourself to realise how handy they are.

Try to adopt one of the shortcuts above and I promise, you won't go back using your mouse for that function.

Cheers, Tuomo

PS. If you’re looking to grow as a developer, then my newsletter is for you.

I will show you how to:

Speak confidently in meetings & presentations
Reduce stress
Become a developer everybody wants on their team

Join hundreds other subscribers here!

4 Caching Mechanisms Next.js Uses to Optimize Application Performance

Tuomo Kankaanpää — Thu, 04 Apr 2024 16:09:11 +0000

Caching in Next.js is hard to understand, but it doesn't have to be.

Next.js does a lot of caching under the hood to improve app performance. It does this by using different kind of caching mechanisms that all have their differences and use cases. Once you know the mechanisms you can better and easier understand how the caching as a whole works.

In this post I'll go through all four mechanisms and explain their differences. This will give you a deeper understanding of Next.js and help you make better decisions when designing your application.

Let's dive in!

1. Request Memoization

Common problem we have in React is that we need same data in multiple components of our app.

To solve this problem we can pass the data as props, add some kind of global state to store our data in or we can just fetch the data from an api in every component we need it. In my experience this can get complicated pretty fast and it is not efficient. So we need a better solution for this kind of situations.

Enter Fetch Memoization.

In Next.js we can indeed make a fetch request in each component that needs the data, without worrying about efficiency. This is because the fetch requests are memoized (=cached) inside server components. So whenever you make a fetch request inside a server component, the return value of it is cached.

For example

1st fetch to /products -> hits the api endpoint and returns the data which is then cached
2nd fetch to /products -> does not hit the api endpoint and data is returned from the cache
3rd fetch to /products -> does not hit the api endpoint and data is returned from the cache

The fetch request memoization lasts the lifetime of a request, so the cache won’t be persisted over requests.

Even though it might rise red flags at first, seeing same fetch request in multiple components, it is actually very good and efficient way to utilise data in your Next.js app.

2. Data Cache

Where fetch memoization cached the fetch requests per request, data cache persists the results of data fetches across incoming server requests and deployments.

When we make a fetch request in a server component, Next.js first checks if the fetch request is memoized. If not, it checks the data cache if the request is cached there. If not, only then will it make the request to the actual api.

GET /products -> is fetch memoized: false -> is in data cache: false -> hit the api

Data cache persists the cache across server requests and even deployments. This means that we have to define or explicitly tell it when to revalidate or clear the cache. Data cache can be revalidated using either time-based revalidation or on-demand revalidation.

Data cache shines when you have a page which data rarely changes e.g. blog post. Whereas for a comment block, using data cache is not ideal because the data changes more often.

We can opt out using data cache by giving cache: 'no-store' setting for the fetch request. This means the data will be fetched whenever the fetch is called.

3. Full Route Cache

This mechanism revolves around rendering and caching static pages during the build time rather than during runtime.

When you build your application, Next.js identifies pages that are static, pages that don’t use any dynamic data such as user-specific information or query parameters. These static pages will then be cached to full route cache. When a user then requests this kind of page, it will be served directly from the cache instead of it being rendered when request arrives, making the page much faster.

There are three ways to opt out of the full route cache

Using dynamic functions such as cookies, headers or searchParams
Opt out using data cache. If a page has a fetch request that is not cached, it will also opt out the full route cache.
Using “dynamic = ‘force-dynamic’” or “revalidate = 0” in route segment config options.

Places where full route cache works well is e.g. blog post page. Yes it uses probably data from an api or database, but it rarely changes and it is data that we already have in build time.

Full route cache does persists across requests but not across deployments. This is why if we want to clear the cache, we need to either invalidate the cache or re-build & deploy our application. Invalidating can be done with on-demand revalidation to the data cache.

It's important to note also that the Next.js full route cache is effective only in production environments. During development, requests are dynamically rendered, meaning they are not saved to full route cache, to facilitate rapid iteration and debugging.

4. Router Cache

Router cache is used for caching route segments in the browser, so unlike the previous mechanisms this one saves the cached data to the browser.

Next.js automatically caches visited routes, but also possible future routes by prefetching all the pages that are pointed to by Link components on the given page. If the Link component is in the viewport, page it is pointing to will be pre-fetched and cached to the router cache.

Thanks to router cache, there is no full-page reloads between navigations and we get the instant backward / forward navigation that we are used to with Next.js.

There is no way to opt out using router cache, but we can invalidate it by calling router.refresh, revalidatePath or revalidateTag. Cache will be cleared on a page refresh too.

Conclusion

Next.js uses these four mechanisms under the hood to handle caching of our applications.

As we see it is not super clear and simple on the first glance how they work. Understanding at least the basics of them and how they work together, will in my opinion help you make more informed decisions when faced with design choices with your own applications.

Hopefully this has helped you at least a bit to understand how caching works in Next.js.

Here is an excellent table from Next.js caching docs, summarising the four mechanisms.

If you like posts like this, you might enjoy my exclusive newsletter.

In-depth web dev content I don't talk about anywhere else
Exclusive Q&A videos only for newsletter subscribers
Lessons learned working +10 years as a web developer

Join here: https://bit.ly/tk-signup

Want FASTER build time with Next.js? DO THIS! ⚡

Tuomo Kankaanpää — Tue, 28 Dec 2021 16:53:43 +0000

This article was originally published on my newsletter. If you want to stay up to date and read these as soon as they are published, sign up for the newsletter!

Ahoy,

In my last email I mentioned that I was planning on still making one or two Next.js videos this year. Last week I published one of those.

The video is about reducing your Next.js application build time with Incremental Static Regeneration (ISR).

This Next.js feature is super cool since it allows you, among other things, to render dynamic content on static pages!

Want FASTER build time with Next.js? DO THIS!

I also published another video about how you can use GIT branches to easily test different features or make a demo of a new feature. If your GIT-game is not in a good shape, this video is great refresher / tutorial for you!

Use this GIT trick to test new features fast & easily

That's all for this week!

Cheers,
Tuomo

Underrated Next.js feature 🤯

Tuomo Kankaanpää — Fri, 10 Dec 2021 14:42:16 +0000

This article was originally published on my newsletter. If you want to stay up to date and read these as soon as they are published, sign up for the newsletter!

Ahoy,

Winter has come to Finland. It has been snowing a lot and the temperature has been around -15C for the past week or two. Although I love that there is snow (helps with the darkness) and cold weather in December, I have been mostly staying inside and doing a lot of coding lately.

On top of coding, I have been planning to do one or two Next.js videos before the end of the year. As always, if you have any wishes or suggestions on what kind of videos you would like me to do, let me know (reply this email or hit me up on Twitter)!

Latest Youtube videos

As always, I have been uploading one video per week on my Youtube channel. Here are the latest videos from the channel since my last email.

Need to show DRAFT content in PRODUCTION? THIS IS HOW!

This is part 3 of the unofficial "Building a blog with Next.js" series.

In this part we add possibility to view draft blog posts from the headless CMS in production environment. So there is no need for a preview or staging environment and it enables you (or who ever writes the blog posts) to preview the posts in the environment they will be shown for end users.

This is possible with the Next.js Preview feature. Preview feature is one of the less talked about features in Next.js. I also think it is kind of underrated, even though it makes it possible to easily implement the draft content viewing feature, which is in my opinion crucial for every blog application.

Best VS Code Theme! My HONEST opinion.

I have been looking for a nice new theme for my VS Code and I think I've finally found one that I really like. You might have seen me using it already in some of the previous videos since I've been testing it out for some time now.

So in this video I want to share with you this theme I currently use in my VS Code. Even though I really love this theme, I reserve the right to change my opinion in the future if I come across an even more awesome theme 😂

That's all for this week!

Cheers,
Tuomo

If you use React, DO THIS!

Tuomo Kankaanpää — Fri, 26 Nov 2021 16:41:14 +0000

This article was originally published on my newsletter last week. I publish previous week's newsletter here on the blog. If you want to read these as soon as they are published, sign up for the newsletter!

Ahoy,

Are you using React? If your answer is YES then you need to keep reading!

When using React, browsing the React docs is something that at least I do frequently. So I was super excited when I learned that the React team is rewriting the documentation and we can actually already access the new docs!

The new React.js docs are still in beta and a work in progress but by going to beta.reactjs.org you can already take them for a spin!

So what's new in the docs?

One of the things that I really like in the new docs is the fact that all the explanations are written using Hooks and functional components rather than classes and class based components.

For me I'm nowadays always using hooks + functional components and the only time I use class based components is when I'm working with an older codebase and modify existing components.

I uploaded a video this week talking about all my thoughts on the new docs and I also go more in depth on what's new in them. You can watch the video on the Youtube channel.

That's all for this week!

Cheers,
Tuomo

Working on my Next.js Crash Course 📚

Tuomo Kankaanpää — Fri, 12 Nov 2021 08:01:13 +0000

Ahoy,

If last email was a bit long, this one will be a shorter one.

I didn't upload any videos last week because since the week before was so hectic with Next.js conf and uploading three different videos on the channel, I felt like taking a bit time off from making videos was sufficient.

I wasn't sitting on my hands though! I was working on planning my next couple of videos. One of which will be the next part of my Next.js Crash Course.

Next.js Crash Course

If you didn't know, I have a Next.js Crash Course on my Youtube channel. I was contemplating on making the course a Skillshare course, but decided to make it free and available on Youtube. You can find the course from here.

The course is "work in progress" because instead of making the full course and then publishing it, I decided to publish the videos one by one. That said, I don't have all the videos made yet, so if there is something you would like me to cover, let me know by replying to this email!

Wrapping up

As I said, this week's email was a shorter one. I want to respect your time and I don't want to make the email a longer one just for the sake of it. Hope you have a great rest of the week!

That's all for this week!

Cheers,
Tuomo

Week full of Next.js

Tuomo Kankaanpää — Sat, 06 Nov 2021 09:56:30 +0000

Ahoy,

Past week was full of web development and Next.js!

Next.js + Headless CMS + GraphQL - Next.js tutorial for beginners

I released an extensive Next.js tutorial which was almost an hour long. I have never done a tutorial this extensive before. It was great to be able to finally release it because I had been working on it quite a lot.

The tutorial teaches you how to integrate a headless CMS to a Next.js blog application. This was a part 2 for the "Building a blog with Next.js - Next.js tutorial for beginners" tutorial I mentioned in the newsletter couple of weeks ago.

You can find the tutorial (both part 1 and part 2) from the Youtube channel.

Next.js Conf

Next.js conf 2021 was held on 26.10.2021. I watched the conference live and was really excited about all the new things that were announced. Here are some highlights.

Next.js 12

First of all Next.js 12 was announced which is their biggest release ever. With Next.js 12 we get faster build and fast refresh times, URL imports, Native ES Modules support and Next.js Middleware just to mention few.

If you want to learn more about Next.js 12, I made a video detailing and explaining all the new features and improvements of Next.js 12. You can watch it on the Youtube channel.

Vercel edge functions

Another thing that was announced in the Next.js conf was Vercel Edge functions.

This is how edge functions are described by the docs: To achieve both speed and dynamism, you can use Edge Functions. They allow you to deliver content to your sites visitors with speed and personalization, are deployed globally by default on Vercel's Edge Network, and have zero cold starts. They enable you to move server-side logic to the Edge, close to your visitors origin.

These were a bit hard for me to first understand at first when watching the conference. After the conference I started to study them in more in depth. After some hours spent drinking coffee and reading docs and testing different things, I finally was able to wrap my head around them.

At this point I felt that I wanted to make a video sharing what I had learned. So I published my third video of the week: Next.js 12 - Middleware & Edge functions explained.

In the video I also explain what the new Next.js 12 feature Middleware is because it is actually something that works together with Edge functions.

Wrapping it up

So as you can see, it was a pretty busy but exciting week! I am super excited that I was able to make the videos about Next.js 12 and Edge functions + Middleware this week, on top of my regular Tuesday video.

It is also encouraging that the videos got a really good response and you guys have really liked them! So I want to say thank you for all the comments and likes you have sent!

That's all for this week!

Cheers,
Tuomo

React state management: Context API vs Recoil 🎯

Tuomo Kankaanpää — Mon, 01 Nov 2021 17:49:08 +0000

Ahoy,

For the past week I have been diving more into React state management. Especially I have learned more about Recoil and the Context API. I also published a new video on the Youtube channel listing some of my favourite Github repos for developers.

React Context API vs Recoil

I found myself needing some sort of state management for a small React application. I have previously worked with Redux, but in this case I felt like it would just be overkill to use Redux and I would be better off with something a bit lighter.

So even though there is bunch of different state management options available when it comes to React applications, I decided to test the Context API and Recoil.

I was able to create a working "Redux-like" solution using the Context API based on this blog post by Kent C Dodds. It worked well but it still had some boilerplate code that could probably be avoided. So it was Recoil's turn.

Recoil turned out to be super handy and easy to understand. The learning curve was super shallow and I was able to get the hang of it pretty quickly.

With Recoil it was easy to create a new piece of state and then just use it across the application. I'm not going to go any deeper right now on how Recoil works. Let me know if you would like to see Recoil demo or tutorial video and I shall do that.

The downside with Recoil is that it is still "an experimental set of utilities for state management with React.". So using it in production might be a bit sketchy.

I tried to find out if Recoil has some kind of roadmap or information on when they are planning on lifting the experimental status, but with no luck. So I guess time will tell when that is happening.

At first I was a bit sceptical about Recoil, thinking that it might just be "another state management library" but I am happy to be proven wrong.

Regardless of Recoil's experimental status, I am definitely going to keep using Recoil on smaller apps in the future. Given that it is developed by Facebook, it has over 14k stars on Github and bunch of contributors and users, chances are it is not going anywhere and it will keep getting better over time.

I would love to hear your experiences on state management with React apps, what are you using and why? You can tweet your answer to me.

Top Github repos for Web developers

As usual, I published one video on the Youtube channel this week.

There are bunch of different repos that I use and that have helped me over the time. So in this video I share 7 amazing repositories that will help you as a developer!

You can watch the video below. If you are not yet subscribed to the Youtube channel you can do it from this link. By subscribing you get notified on all the latest videos and it is a great way to show your support for me!

That's it for this week!

Cheers,
Tuomo

How to build a blog with Next.js 👨‍💻

Tuomo Kankaanpää — Fri, 22 Oct 2021 14:18:38 +0000

Ahoy,

Couple of weeks ago I wrote that I was working on a Next.js blog application and planning on making a video about it. I finally got the video done and I published it on the Youtube channel last week.

I ended up making it a two part video. In the first part, that is now published, I teach how to create a basic blog application with Next.js and in the process I will go through some basic concepts of Next.js, that are important to know especially for Next.js beginners.

The second part I am planning on publishing in the near future (maybe next week). That will be about integrating a headless CMS with the blog. So after that the blog will basically be ready to use in production.

Ok to be honest, it could use some styling before production, so I might also do another video about styling the blog and making it look a bit more nice. Let me know if this is something you would be interested in!

Design is really a part that I probably struggle the most. If I have a design ready and I only need to implement it, that's easy. But making the actual design is not my strong suit. So it will be fun to try to implement that to the application and I am sure that I will learn a ton while working on it.

Top picks for this week 🎯

⚡ 14 Rules That Will Make You A Better Developer

⚡ How to Improve as a Programmer?

⚡ Github Universe (Oct 27-28)

That's it for this week!

Cheers,
Tuomo

How to deploy Next.js app to production 🚢

Tuomo Kankaanpää — Sun, 17 Oct 2021 16:47:20 +0000

Ahoy,

This week was pretty Jamstack focused for me. This was because of two reasons.

Jamstack conf

The Jamstack conf was held 6.10-7.10 as a virtual conference. The first day was full of talks and the second day was dedicated to workshops. I wasn't able to participate on the workshops but I got a good dose of Jamstack watching the first day talks.

If you missed the conference, no worries! You can find the videos of the talks from this playlist: https://www.youtube.com/playlist?list=PL58Wk5g77lF-XaNacKxWk7yOKgeCMveAS.

How to deploy Next.js app to production

This week's video on the Youtube channel was also about Jamstack, well Next.js to be more specific.

In the video I show you how to deploy your Next.js application to production (using Vercel) and setup the deploy in a way that it automatically deploys your app when ever there is updated code in your Github main branch.

Setting it up is one of the easiest setups I know, because Vercel does all the heavy lifting and all you pretty much have to do is point Vercel to your Github repo and you are good to go.

📹 View on Youtube

Non-coding stuff

While not working on coding stuff, I did some reading and actually read one whole book this week (rocking the Kindle!). The book I read was Take Your Shot by Robin Waite.

I liked the book a lot because it teaches business skills but in an interesting and captivating way. The book uses storytelling as a way of teaching which in my opinion is a great. You are entertained by the story but at the same time you learn a bunch. One other book that uses this kind of approach marvellously is The Wealthy Barber.

I warmly recommend reading Take your shot and Wealthy Barber if you haven't already!

That's it for this week!

Cheers,
Tuomo

Working with Next.js + Headless CMS 👨‍💻

Tuomo Kankaanpää — Fri, 08 Oct 2021 09:27:46 +0000

Ahoy,

Last week I talked about my top 5 features in Visual Studio Code. After publishing that video, I actually ran into a website that lists a bunch (35 to be exact) of useful, but kind of unknown, features in VS Code.

The website is vscodecandothat.com. I highly recommend checking it out if you use VS Code.

This weeks Youtube video is also about vscodecandothat website. In the video I go over some of the features they have listed, that I found really helpful and cool!

📹 View on Youtube

What I worked on / learned this week?

One of the things was the Next.js blog application I mentioned last week. I tried to make it look a bit better, but I still think that it needs some work on that front 🙈

Other thing I did was working on setting up a headless CMS as a datasource for the application. I started the application off with just static data in a Javascript file, but the goal is to have it use a headless CMS as a datasource.

Implementing a headless CMS was pretty interesting and cool thing to explore. While working on it, I realised in practice how great it is to use technologies like Jamstack and Next.js.

Swapping the datasource required some modifications on the existing application, like renaming few variables and adding the data as props instead of just direct import statement, but other than that it didn't require much work and it was surprisingly easy to swap the datasource.

So at the end, I got a raw version of the blog with headless CMS working.

As I mentioned in the last week's email, I am planning on shooting a video about the whole process. I think I will do two part video. First part showing how to code the blog and second part to show how to add headless CMS to the mix.

What do you think? Hit the reply button and let me know if that is something you'd like to see.

That's it for this week!

Cheers,
Tuomo

Best VS Code features & Learning Material UI ✏️

Tuomo Kankaanpää — Thu, 30 Sep 2021 20:37:04 +0000

Ahoy,

I use Visual Studio Code as my main code editor. To be honest it is pretty much the only editor I use. There is bunch of great features in VS Code that I use daily. Features that honestly make my life a lot easier and productive.

So I thought that it might be helpful to share those features in case you are not yet using them or leveraging them fully in your own workflow. You can find the features from the latest video on my Youtube channel.

Or if you just want to know the list, here it is

Timeline
Integrated Terminal
Multiline editing
Command palette
Extensions

What I learned this week?

I worked on a Next.js project where I decided to use Material UI as a component library. At first it was kind of hard to know and find what components I should use but after a while, I got actually something good looking on the screen.

The project is actually a simple Next.js blog application. I plan on shooting a video about it, teaching how to code one by yourself. I'm not yet sure when I'll be making that video but it might be in the near future so stay tuned for that!

I have used Material UI for the past couple of weeks on couple of projects in addition to the Next.js blog application. I am quite excited about Material UI, now that I have a bit better understanding on how the whole thing works and what kind of components should I use for certain situations and what kind of components they actually have!

I have some time now thought that I need to learn something that I can use to make my apps and UIs look even half decent (I am terrible at designing and styling in general). So I was thinking of learning TailwindCSS next but now that I have worked with Material UI a bit, I'm thinking of giving Material UI a chance and learning that first. Of course they are not / don't do "the same thing" but Material UI serves the need that I have and there is only so much one can be learning simultaneously.

Have you used Material UI or TailwindCSS? If you have, let me know what you think about them!

That's it for this week!

Cheers,
Tuomo