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.

HTML

Easily create your own CSS loading spinner

You’ve arrived at the same place I had a few months ago, trying to improve your 

 (or any other) site. Let me tell you what I had to do to get fairly decent scores, and show you the plugins and changes you’ll need. But first…

Back in March, Google announced that they were rolling out their 

 search algorithm. This means that Google will be using what your website looks like on mobile as the starting point of how they index your site, instead of the desktop version, which is what they used to use. A good explanation of this has already been written by 

This leads to a lot of people scrambling over to 

, in order to get their site ready for, or take advantage of, the upcoming changes. You ultimately end up at the PageSpeed Insight page for developers. This allows you to input a URL and see what your website is scoring for both mobile and desktop. What makes this tool extra vital, is that it clearly points out what needs adjusting or improving, and why. Then directs you to documentation to help you make the changes. Awesome, right?

Get top Pagespeed insight scoring on your WordPress site

 as a programmer to list either URL paths, or file paths, some of those might start with a forward slash. In excel, if you enter a forward slash as the first character in a cell, it’ll prompt you with a the Keyboard Shortcut Menu key list.

What that means is that all the buttons within the toolbar will appear with the shortcut character next to it. This is great, if you don’t want to use a mouse to navigate the Excel Toolbar, but if you are like me, and want to list some web pages that need checking, then this can become restrictive, and become annoying very quickly.

Luckily, there is a simple solution, although hard to find if you are not sure what this current action is called.

My programming musings that nobody else reads