If you know JavaScript, then there is nothing stopping you from creating your own Chrome Extension. It can be useful to create tools that expand what you can do with Chrome, whether that is building something for yourself to automate a process, building something for your team or company that allows easy debugging of a product, or something you think anyone would like.

I'm going to take you through some basic steps to get you started and set everything that you need to get started with developing a Chrome Extension.

Callout option will go here and we need to make sure it is good. 

Create your first Chrome Extension

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

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.

Category: Javascript.