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