
Disabling Gatsby Telemetry
Disable Gatsby telemetry cleanly, with context on what anonymous analytics collect, why teams opt out, and how the setting affects local and CI work.
Articles from more than two decades of building, rebuilding, debugging, and leading web projects.

Disable Gatsby telemetry cleanly, with context on what anonymous analytics collect, why teams opt out, and how the setting affects local and CI work.

p Tags from Contentful List ItemsOne 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.

Render CMS rich text safely in Gatsby and React with node mapping, link handling, embeds, headings, validation, and failure‑safe fallbacks.

Contentful rich text and Gatsby work well together until code snippets enter the picture. This guide shows how to render inline and block code cleanly.

Why Gatsby and Contentful can still work well for static sites, where the pairing becomes strained and when migration pressure is worth reviewing.

An exploration of array‑like objects in JavaScript. Explanations of their unique characteristics and how to navigate them easily in front‑end development.

Replace Gatsby's inlined production CSS with an external stylesheet by rewriting headComponents, with performance trade‑offs and historical context.

Based in Brighton, I bring more than 23 years of web development experience, clear communication, performance‑focused delivery and ongoing support.

Promise.allSettled in JavaScriptChoose Promise.allSettled() when every outcome matters. Handle fulfilled values and rejected reasons, preserve input order, and keep fail‑fast work distinct.

Disable production source maps in Gatsby with webpack, understand external versus inline maps, and clear old map files without changing development builds.

next/imagenext/image explained with responsive sizing, lazy loading, layout shift reduction, and why image optimisation matters in real Next.js applications.

How responsive images make front‑end pages faster by serving suitable sizes, preserving quality, reducing wasted bytes, and avoiding layout shifts.

gatsby-image Even FurtherOptimise gatsby‑image with sensible maxWidth and quality settings, GraphQL image data, and selective use of the native loading attribute in Gatsby.

Finding and replacing numbers in a string with JavaScript is a relatively straightforward task, although which regex you use (and how) can impact readability.

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

Dynamic imports and code splitting in Next.js explained with next/dynamic, lazy‑loaded components, SSR trade‑offs, and when splitting really helps.

Build accessibility into reusable front‑end components with names, keyboard behaviour, focus states, form semantics, disabled states, and testing habits.

Add static files to a Gatsby site using the static folder, with notes on build output, verification files, legacy assets, and when not to process files.

Keep CSS focus styles accessible without showing outlines after every mouse click, using keyboard‑only patterns, :focus‑visible thinking, and UX trade‑offs.

Keep Gatsby builds predictable by controlling data sources, plugins, image work, environment variables, cache assumptions, and build‑time dependencies.

Understand parent selectors in CSS and Sass, including how ampersand nesting works, :has() context, BEM trade‑offs, specificity, and readability.