The first question you might ask is why you would want to copy something across a repository when you could easily Fork it.

And that is a very valid question. There are a few reasons why you might want to do this. Although I wanted to copy a large amount of the repository, including branches and tags, I didn't want everything.

Forks are publicly visible on GitHub, which might not be ideal if you want to keep your work entirely separate or private.

I had an original personal project that I then used for a work thing. I wanted to keep some of the bug fixes I'd found but remove some of the specific work items I'd added and be able to go down my original path for the project.

I wanted them to fully separate from each other.

Duplicating a Github repository without forking it

Working with Sanity.io as a headless backend, for the most part, is a joy. It has so many features and is as flexible as I need it to be for a backend. Whilst also making changes and improvements easy and efficient.

Within the setup of my site, I created my own code input field type for storing code snippets to be displayed on my site.

You may have seen some across a few of my articles already

During some research for modifying a different area, I came across this 

 option. It seemed like it gave me a few options that I didn't currently have. The main one is code highlighting and line numbers when entering in the code.

How to fix the 'No matching export' issue with @lezer and @sanity/code-input

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.

My programming musings that nobody else reads