Many people will be going through the process of converting their Javascript projects to TypeScript. This can range from being a straightforward task to an arduous one, depending on the complexity and size of the project.

If you are taking on the challenge of converting a bigger project over to TypeScript, you might want to be able to keep track of your progress.

I am part of a team that is converting JavaScript files to TypeScript when we can, and I recently had a session where I converted a large directory of files.

I wanted to chart my team's progress in converting these files so we could see we were making progress, and how much further we needed to go.

Finding out the TypeScript coverage of a project

When you get started with NextJS, especially when it comes to loading items from data or somewhere else, you'll start to come across functions like 

It'll probably not be that massively clear as to what they do or, more importantly, which ones you should be using and when.

Luckily, there are some easy ways to decide which ones you should be using

These are the two that you'll be using the most. If you need them at all.

When to use getStaticProps, getServerSideProps and getStaticPaths in NextJS

I recently noticed that the Syntax Highlighting when using `react-syntax-highlighter` was failing in production build. 

This was odd since everything seemed to work perfectly in development. 

After some investigations, I noticed the following error which linked to a React error 425 indicating that the 

Text content does not match server-rendered HTML.

It seems that this error can happen for a few things, and for a couple of different syntax highlighters which seemed odd. Maybe they share a package.

No syntax highlighting with React error #425 and server side rendering fix

Before you say anything, yes I know Styled Components are not the fancy new way to style applications. They're not great with Server Rendered components and increase what the browser has to download and do.

But if you are stuck with a NextJS application that you've built with Styled Components, and are using NextJS v13 or over, and want to use the `next/font` option to better handle fonts, then this short guide is for you.

This is exactly what I had to do and some things that the guides miss out.

Originally I loaded in the Google fonts via an import and then referenced them within the global CSS like I used to do.

Google Fonts with NextJS and Styled Components

Projects are always growing and evolving as new items are added, and keeping that `package.json` file under control has several parts to it. 

One of those parts is making sure that you are running the latest versions of all those packages. While some of those updates are small, minor updates, large updates can be included in them.

Now, while each update itself will be down to you to decide if you need to make further updates to your code as you update them, the first part is finding out which packages need updating and by how much.

 will come in handy to give you that information. 

Simple way to find out what NPM packages need updating

Recently I wrote up a list of 10 web developer tips for the 

 on Instagram and their 67 thousand followers. You can find that 

 on Instagram while you are there, as they are both great accounts.

Having reached out recently to a few other social accounts to see what I could offer, Ben, who is the awesome guy behind the account, suggested a way to help him focus on providing info to the vast number of followers he had, and this was his idea.

The tips on that post are the same as below, but they go into a little more detail than an Instagram picture description allows.

Running your own site, and keeping it up to date, forces you to be the user. It’ll force you to learn new skills, like analytics, browser issues, server management etc. Not only that, it’s great to have a portfolio.

10 Web Developer Tips

Most people on their way to work carry some sort of bag. I, as a developer, am no different. Some of the stuff I carry around will be common things you’d expect someone spending most days at a 9-to-5.

But I believe I carry around a few things that only a techie or nerd would carry around. I thought it would be a good idea to share some of the things I have kept in there. You can compare with me and see if I’m doing something different, or maybe you have some suggestions as to what I can add?

So, without further ado, let’s get it all out on the table.

I thought I should actually start with the bag because it’s more important than you think. It needs to be comfortable when it gets heavy. It needs to be able to fit all your gear. Compartments are important, and it also needs to look half-decent. I nearly said cool, but I don’t think I ever look cool.

What does a developer carry around in a bag?

Have you ever seen those card-flipping games where either clicking or hovering over them would display the underside of that card? I’m going to show you how to create that same card-flipping animation in 

This tutorial will introduce you to the clip-path attribute while showing you how to use the transform attribute to flip in 3D.

Below is the final animation we will be creating. I have given crass colours to each side so it is clear which side is being flipped.

Pure CSS card flipping animation

Images can make forms more intuitive for users when they are filling them out. Most forms can’t be adjusted to have images but choosing from a list of options can make the whole process more user-friendly. We are going to use User Profiles as an example.

I’m talking about radio buttons, checkboxes, dropdowns and lists. Items that require the user to choose from a selection of options. Adding animation into all of that can take it that one step further.

 to toggled active states when clicked. But the animation is done in CSS and with SVG’s.

Animated profile tick selector

There is an abundance of loading spinners out there for you to download or use, but how easy are they to implement, or even write yourself? This one is really easy, although you can build on it to make it more flashy.

This one has a two-tone colour, which spins one way, before slowing down and spinning the other, then repeat. See, nice and easy. All created with only 

First, you’ll need to actually create the spinner, which is easily done with the following code.

My programming musings that nobody else reads