JavaScript’s Math.random()

JavaScript's Math.random() is a Pseudo-Random Number Generator (PRNG) which programmatically generates not-quite-random values. Usually, that's all you need.

JavaScript’s Math.random().

React vs Vue vs Angular

The front-end development landscape and JavaScript frameworks move quickly. React, Vue, and Angular stand out as leaders, deserving a comparative discussion.

React vs Vue vs Angular.

Static Site Generators

Whilst they have been around for quite some time, static site generators have really increased in popularity over the past two or three years..

Static Site Generators.

All About Headless CMSes

Websites have not been set-and-forget for a long time now, and without the technical know-how to update a static site, CMSes are a key part of web development.

All About Headless CMSes.

What Makes a Great JavaScript Developer?

Web development, and JavaScript is one of those great skills that - with enough time and patience - you can teach yourself, in your home. Here are my tips..

What Makes a Great JavaScript Developer?

Renaming and Destructuring Variables in ES6

Perhaps one of the most-used but misunderstood features of ES6, destructuring data is easy to use and leads to cleaner, simpler code and happier developers!

Renaming and Destructuring Variables in ES6.

How to Choose a React Developer

React has become one of the main cornerstones of any web development project. It can be a struggle to find just the right one for your team...

How to Choose a React Developer.

Create Arrays of Any Size with Placeholder Content in JavaScript

There are many different ways of creating placeholder arrays in JavaScript - whether the array itself is a placeholder, or simply the content within it.

Create Arrays of Any Size with Placeholder Content in JavaScript.

How to Hire a JavaScript Developer

Hiring a JavaScript developer can be a taunting task. Once you know a JavaScript developer is what you need, there are some steps you can follow to find one..

How to Hire a JavaScript Developer.

ReferenceError: Window Is Not Defined in GatsbyJS

Debugging why your GatsbyJS (or NextJS) build is failing when you receive the message 'window is not defined'.

ReferenceError: Window Is Not Defined in GatsbyJS.

Hiring a Freelance Front End Developer - An Ultimate Guide

A key part of your web development team will be your front-end developers: those tasked with building the interactive areas of your site.

Hiring a Freelance Front End Developer - An Ultimate Guide.

The Differences Between Lead and Senior Roles in Front-End Development

'Lead' and 'Senior' roles are the two seniorities of front-end development that I see most commonly confused. Here is where I feel the differences lie..

The Differences Between Lead and Senior Roles in Front-End Development.

What Is Front-End Development?

For something that I have been doing for years, it is still difficult to explain 'front-end web development' to someone else.

What Is Front-End Development?

React: Functional, Class and Pure Components

React components come in three succinct flavours: 'functional', 'class', and 'pure'. Here I try and offer guidance into the differences and uses of each.

React: Functional, Class and Pure Components.

Detecting and Dealing with Website Theft

Web development by its nature is difficult to protect from copyright theft. There are a few things you can do to protect yourself and your ownership though..

Detecting and Dealing with Website Theft.

Removing <p> Tags From Contentful List Items

One of the quirks of rendering Rich Text from Contentful is that list items come wrapped in paragraph 'p' tags. Fortunately this is a simple one to resolve.

Removing <p> Tags From Contentful List Items.

Rendering Contentful Rich Code Snippets in Gatsby

Gatsby + Contentful is a powerful and formidable combination. However, the inability to render code blocks is a real issue with a not-straightforward solution..

Rendering Contentful Rich Code Snippets in Gatsby.

Disabling Source Maps in Gatsby for Production

Although an extremely useful aspect of Gatsby, source maps cause a performance hit as well as leaving your source exposed. Here is how to turn them off!

Disabling Source Maps in Gatsby for Production.

Optimising gatsby-image Even Further

gatsby-image delivers highly-optimised images using some very clever, advanced loading techniques. There are a few tricks to speed it up yet further though...

Optimising gatsby-image Even Further.

Intercepting Clipboard Events with JavaScript

Browsers now support the 'copy' element event, which allows developers to intercept and modify content placed onto a clipboard, when copied from their site.

Intercepting Clipboard Events with JavaScript.

Adding Static Files to a GatsbyJS Site

Gatsby does an excellent job of optimising assets, but sometimes you just need a way to add specific files into the site without being processed by Webpack..

Adding Static Files to a GatsbyJS Site.

Automatically Deploy a Static Gatsby Site via FTP

Gatsby is a static website generator, the output from which you can host more-or-less wherever you wish. You can add FTP to your CI pipeline to automate this.

Automatically Deploy a Static Gatsby Site via FTP.

Using JavaScript to Avoid Orphans

Orphans are annoying single-word lines of text that hang at the end of a paragraph. It is straightforward using React and JS to banish them from your site.

Using JavaScript to Avoid Orphans.

Use Greater-than and Less-than Symbols in JSX

In React, it is not as straightforward as you might think to include less-than or more-than symbols within your JSX..

Use Greater-than and Less-than Symbols in JSX.

Commenting in JSX

Although there are limited situations where you may still need to place HTML comments into the rendered output from React, it is still sometimes necessary..!

Commenting in JSX.

Looping in Javascript ES5 and ES6: for and For/of

With the introduction of the new JavaScript standard ES6, there are some new and interesting ways to loop through data, which I discuss here today.

Looping in Javascript ES5 and ES6: for and For/of.

Accessing a Random Element From an Array Using JavaScript

There are many times you might wish to use randomisation within your web app. JavaScript makes accessing a random item from an array easy.

Accessing a Random Element From an Array Using JavaScript.

Get the Number of Years Between Two Dates with PHP and JavaScript

A common web development task: get the number of years between two dates. Today, we discuss how to do this with PHP in the backend, or frontend with JavaScript.

Get the Number of Years Between Two Dates with PHP and JavaScript.

DOM Traversal: Closest() in Vanilla JavaScript and jQuery

Mastering traversing the DOM tree is an essential skill in front-end development. Here I discuss the options available via jQuery and vanilla JavaScript.

DOM Traversal: Closest() in Vanilla JavaScript and jQuery.

Handling Click Events in JavaScript

One of the things jQuery is very good for is handling click events. However, it isn't much more difficult in vanilla JavaScript either!

Handling Click Events in JavaScript.

How to Check an Element Exists with and without jQuery

There are many easy ways to detect whether or not an element exists on-page, using either jQuery or just vanilla JavaScript

How to Check an Element Exists with and without jQuery.

A Simple Popup Window Using jQuery

Opening a new browser window programmatically on-click is very simple to achieve with jQuery, and no more complex to achieve with vanilla JavaScript too!

A Simple Popup Window Using jQuery.