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.

Flexbox vs. Grid

At first glance, 'flexbox' and 'grid' in CSS appear to solve similar problems in different ways. They are both suited to very different layouts however.

Flexbox vs. Grid.

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.

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?

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.

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.

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.

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.

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.

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.

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.

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().

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.

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.