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?

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.