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

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

Have you ever needed to create a bunch of random file names to test something like 

? Well, recently I did, and I didn’t have a collection of files to hand that would test the regular expression in the way I required.

So what do programmers do when they have a need? They fill a need, to paraphrase from the animated film 

. We are going to write a script that creates a chosen number of random file names. We’ll allow it to select from an approved list of extensions, and a collection of words to make it look like actual file names.

This creates file names that will realistically match the ones that will appear in a live environment. Having better data, to begin with, will improve your code because it will allow you to deal with unexpected file names that you might not have tested normally. This will allow you to put code to handle these issues at dev time is always better than just before making a project live.

Create realistic random file names

 error that I was getting from my preprocessor tools.

If you happen to create you own script for WordPress, either Plugin, or Theme, you may also use preprocessor tools to build those scripts.

During one recent build, I happened to be running 

 to verify the quality of the Javascript that I was writing.

I recently came across a problem where JShint refused to validate perfectly valid script. The problem seemed to be that it wasn’t aware of a WordPress global JavaScript variable: 

Fixing ‘wp’ not defined using jshint

Recently I needed to find out the element index of a List element when clicked.

I managed to come up with the code that enabled me to do that using 

First, you need to set up your HTML code with an id of ‘bourne’. You don’t have to use bourne, use whatever you like.

You can see above that I have created an 

Get a <li> elements index value on click with jQuery

A website that I recently found very useful was the 

It basically sets up a test area for you to try out simple bits of code, saving you the time or creating a test area.

It also has the nice feature of being able to set up as different versions of HTML, and also include different versions of Jquery, saving you the time of setting up a head section of a page, uploading to a server, or inserting the include scripts for the javascript.

Online Testing With jsfiddle.net

Ok, so the title may not explain what this post is about, but hopefully it covers the basics.

Recently I have been rewriting a website, adding smarted code and classes. One of the new features I have added is 

. While this in itself is not new, it was new to this project.

One page contained a form with a collection of Checkboxes. They were converted to use the Jquery UI format, as shown in the code below:

Hopefully, you can understand the above, it’s not doing much, basically, it’s part of a PHP loop which is looping through some results and creating a checkbox for each one. 

 is a PHP variable which contains a unique name for each one.

Toggle Jquery UI Checkbox Array

Below is a script to allows you to run a precheck function in Javascript, preventing the form from being submitted if you detect a problem.

First, in a separate, external Javascript file, copy the below script:

The above code is checking a checkbox value in the sent form to see if it has been selected. If it has, then we are okay to submit the form, otherwise, it displays the message box.

Now we need to tell the form to run this function instead of the normal submit.

Category: Javascript.