If you have ever faced an issue where importing a library from npm that throws `window is undefined` in NextJS using the global object `window` that gives access to the browser window, you could have that in a `useEffect` and assign it to a ref


A quick fix to when NextJS return window is undefined when you import a lib that isn't a react library rather one that requires window

NextJS: Window returns undefined

Basic understanding of the Canvas API supported on all modern browsers

Create a canvas element in your HTML file or panel if using an online editor

How to add background gradient to canvas circle

Basic understanding of the Canvas API supported on all modern browsers.

Create a canvas element in your HTML file or panel if using an online editor.

Create or open a javascript panel so we can draw our triangle

Left comments on each line that describes what each line does but for some further reading checkout this 

A simple way that enables you to create a rounded triangle with the Canvas API.

How to create a rounded triangle with Canvas in Javascript, [The easy way]

Check for your fonts locally, only download them as a fallback.

A list of tips to make your CSS life easier.

CSS Pro Tips

In this article, I am assuming a couple of things that you have already done:

You already have a domain pointing to your VPS this can be on

Vultr --> Basically any platform that enables you to spin up your own Linux server

You already have Caddy installed and it's running on port 

The port you want to point the domain to is currently running in the background, use something like 

Update your Caddyfile to add a new entry something like this


A short description on how to update a new entry in your Caddyfile and load the changes with caddy

How to update caddy's new reverse proxy items

I have been working on a Saas product, it's a 

. I decided to use Nextjs for its frontend. 

I wanted to protect some routes like the dashboard unlike SPA React where you can write up a quick HOC and wrap your component and redirect if the token in local storage or wherever you are saving has expired, not valid or non-existent redirects to login to generate a new one. 

you can do the same in Next but I did not want that approach.

Basically what I wanted to achieve was to make all API reads in the 

, meaning I get everything I want before the page is loaded, which makes me avoid having spinners and stuff.

I was able to achieve that by making a profile API call based on the token I saved in the cookie but that meant I will have to replicate the same logic to always get a profile on each page so I wrote up this HOF(High order function) to handle that and here it is:

Basically create a file to house our HOF this can be 

update your getServerSideProps lifecycle to this

And that's it future me or someone out there that might need this.

How to implement route protection in Next.JS with getServerSideProps

How to protect Next.js routes  with getServerSideProps

So I recently changed laptops, from being a 

user for the past 2.5 years. I was running Parrot during that time, great os by the way if you are into cyber security stuff or just another full-stack developer like me.

I switch over to Mac, and all my ssh keys were in my previous laptop, they access all of my servers in Digital Ocean and AWS, to cloning and pushing to Github and so much more. I could not convince myself to update all servers with the new ssh keys and I had some issues with Github SSH cloning. So here are the steps I took, enabling me to move all my keys to my new laptop.

Copy over the ssh keys from your old laptop to the new one, they should be located in the 

folder. You can use a flash drive or a cloud platform, whatever works for you.

Paste the files in your new laptop in the same directory.

If you do that you will get an error like this:

A simple step-by-step process on how to transfer your ssh keys from one Unix-based os to another.

NextJS: Window returns undefined

How to add background gradient to canvas circle

How to create a rounded triangle with Canvas in Javascript, [The easy way]

CSS Pro Tips

How to update caddy's new reverse proxy items

How to protect Next.js routes with getServerSideProps

How to move your .ssh generated keys to a new laptop.