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.

Specificity in CSS

Specificity in CSS can trip up even the most seasoned of front-end web developers. I've often joined projects where stylesheets are littered with !important.

Specificity in CSS.

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?

Do Websites Need to Look the Same in Every Browser?

Progressive enhancement in web development is often misunderstood: it allows us to take advantage of more modern browsers, without penalising the older ones.

Do Websites Need to Look the Same in Every Browser?

Adaptive vs. Responsive Design & Development

Now used as almost trivial marketing buzz words, there really are significant differences between responsive and adaptive design and development techniques.

Adaptive vs. Responsive Design & Development.

What Is an HTML Entity?

In HTML, entities are short encoded strings that represent reserved or invisible characters. For example, simple icons or graphics or even just white space.

What Is an HTML Entity?

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.

The Quirks of Z-Index

In CSS, Z-index is one of those properties that seems so simple and straightforward. However, there are a number of quirks and gotchas that you need to know.

The Quirks of Z-Index.

Life as a Freelance Developer in Brighton

A brief look at what life is really like as a freelance developer in Brighton, and whether moving here for work is really a good idea...

Life as a Freelance Developer in Brighton.

Ethical Web Development - Part II

The second - and final - instalment in explaining the responsibility we - as web developers - have in making the web a better and safer place.

Ethical Web Development - Part II.

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.

Ethical Web Development - Part I

As a developer (and especially perhaps as a front end developer) we have a unique responsibility to our users, and to remove unethical practices from the web.

Ethical Web Development - Part I.

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.

Block Bad Bots Using .htaccess

By 2012 bot and spider traffic on the web had exceeded human traffic. Not all bots are bad, but you should know how to block those you don't want on your site.

Block Bad Bots Using .htaccess.

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?

Access CSS Variables From a Database via db-connect

In CSS, db-connect is a misunderstood but immensely useful technique for connecting to databases directly from vanilla CSS in order to access stored properties.

Access CSS Variables From a Database via db-connect.

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.

How to Find a Programmer Job

It is fair to say that the programming and technology job markets are fairly buoyant, and now has never been a better time to make a career change.

How to Find a Programmer Job.

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.

Disabling Gatsby Telemetry

By default Gatsby collects anonymous usage data to understand of how the platform is being used. This does raise privacy concerns but can be disabled easily.

Disabling Gatsby Telemetry.

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.

Using External Gatsby Stylesheets Rather than Inline

By default Gatsby will generate one - potentially huge - inline stylesheet in the head of your document. It is also possible to load this externally instead.

Using External Gatsby Stylesheets Rather than Inline.

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.

CSS Focus Styles for Keyboard Users Only

Overriding :focus outline without providing a viable alternative should never be an option. Here I discuss implementing alternatives that keep UI and UX happy.

CSS Focus Styles for Keyboard Users Only.

Parent Selectors in CSS and Sass

The omission of a parent selector within CSS has been a long-standing weakness within the spec. Sass does provide a sort-of answer though.

Parent Selectors in CSS and Sass.

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.

Using CSS to Deal with Widows

In typography, a 'widow' is the last line of a paragraph, which falls alone on the following page or column. On the web, this can be easily tackled with CSS.

Using CSS to Deal with Widows.

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.

Reducing Image Brightness with CSS

The brightness filter is a very straightforward and easy way to edit the appearance of an image (or other HTML elements) directly via CSS.

Reducing Image Brightness with CSS.

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.

Creating a Discernible Name for Icon Links

A common issue I come across when auditing sites with Lighthouse is the "Links do not have a discernible name" error where links don't contain text.

Creating a Discernible Name for Icon Links.

Interpolation: Sass Variables Inside Calc()

One of the most common pitfalls for developers new to Sass is string interpolation: why isn't their var behaving as they expect when inside a calc() function?

Interpolation: Sass Variables Inside Calc().

What Is a Static Site Generator?

Static site generation has continued to grow and grow in popularity. I try and explain what one is, and why it might be suitable to you or your project.

What Is a Static Site Generator?

Redirect a Default Netlify Subdomain to Your Custom Domain

When you set up a custom domain in Netlify, the default netlify.com subdomain still returns your app, which can lead to duplicate content. It is an easy fix.

Redirect a Default Netlify Subdomain to Your Custom Domain.

Break Out of CSS Nesting with Sass

On the occasion that you need to break a single (or several) CSS rules out of the nested structure of your CSS, the Sass @at-root rule is exactly what you need.

Break Out of CSS Nesting with Sass.

Advanced SASS: Loops

SASS is an incredibly powerful tool for enhancing and automating your CSS development. Today, I discuss using loops to programmatically generate styles.

Advanced SASS: Loops.

Hiding Empty Elements with CSS

A very brief tip about using the CSS :empty pseudo-class to hide elements when they contain no content.

Hiding Empty Elements with CSS.

Disabling Text Selection Highlighting with CSS

User-select makes stopping visitors from selecting items on-page easy, and can be combined with ::selection to capture the browsers where user-select is absent.

Disabling Text Selection Highlighting with CSS.

Prepending PHP to a Page in Gatsby

Whilst many Jamstack developers would consider it absolute sacrilege, there are still occasions where you need PHP functionality, within your Gatsby site...

Prepending PHP to a Page in Gatsby.

If Not Internet Explorer Conditional HTML

Conditional comments allow us to target specific versions of Internet Explorer. However there is a distinct different between IE and !IE selectors...

If Not Internet Explorer Conditional HTML.

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.

Setting CSS Blur Filter to Zero on a Retina Screen

A bug in the WebKit engine that only affects website Retina screen devices means that setting a zero-blur filter in CSS isn't as easy as it should be.

Setting CSS Blur Filter to Zero on a Retina Screen.