Rendering Contentful Rich Code Snippets in Gatsby
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.
Articles
Development, page 17 of 26
Development is the broadest category in my writing, so it works as the main archive rather than a narrow subject label. It brings together implementation notes and technical decisions, with delivery lessons from across the rest of the site.
Rendering Contentful Rich Code Snippets in Gatsby. 
Why Gatsby and Contentful Work Well Together. Why Gatsby and Contentful Work Well Together
Why Gatsby and Contentful can still work well for static sites, where the pairing becomes strained and when migration pressure is worth reviewing.
What are Array‑Like Objects in JavaScript? What are Array‑Like Objects in JavaScript?
An exploration of array‑like objects in JavaScript. Explanations of their unique characteristics and how to navigate them easily in front‑end development.
Replace Inline Styles in Gatsby with an External CSS File. Replace Inline Styles in Gatsby with an External CSS File
Replace Gatsby's inlined production CSS with an external stylesheet by rewriting headComponents, with performance trade‑offs and historical context.
When to Use Promise.allSettled in JavaScript. When to Use
Promise.allSettledin JavaScriptChoose Promise.allSettled() when every outcome matters. Handle fulfilled values and rejected reasons, preserve input order, and keep fail‑fast work distinct.
Disabling Source Maps in Gatsby for Production. 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!
Image Optimisation with next/image. Image Optimisation with
next/imagenext/imageexplained with responsive sizing, lazy loading, layout shift reduction, and why image optimisation matters in real Next.js applications.
Responsive Images for Faster Front‑End Pages. Responsive Images for Faster Front‑End Pages
How responsive images make front‑end pages faster by serving suitable sizes, preserving quality, reducing wasted bytes, and avoiding layout shifts.
Optimising gatsby‑image Even Further. Optimising
gatsby‑imageEven FurtherOptimise gatsby‑image with sensible maxWidth and quality settings, GraphQL image data, and selective use of the native loading attribute in Gatsby.
Intercepting Clipboard Events with JavaScript. Intercepting Clipboard Events with JavaScript
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. Dynamic Imports and Code Splitting in Next.js
Dynamic imports and code splitting in Next.js explained with
next/dynamic, lazy‑loaded components, SSR trade‑offs, and when splitting really helps.
Accessibility in Reusable Front‑End Components. Accessibility in Reusable Front‑End Components
Build accessibility into reusable front‑end components with names, keyboard behaviour, focus states, form semantics, disabled states, and testing habits.
Adding Static Files to a Gatsby Site. Adding Static Files to a Gatsby Site
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.
CSS Focus Styles for Keyboard Users Only. CSS Focus Styles for Keyboard Users Only
Keep CSS focus styles accessible without showing outlines after every mouse click, using keyboard‑only patterns, :focus‑visible thinking, and UX trade‑offs.
Keeping Gatsby Builds Predictable. Keeping Gatsby Builds Predictable
Keep Gatsby builds predictable by controlling data sources, plugins, image work, environment variables, cache assumptions, and build‑time dependencies.
Parent Selectors in CSS and Sass. Parent Selectors in CSS and Sass
Understand parent selectors in CSS and Sass, including how ampersand nesting works, :has() context, BEM trade‑offs, specificity, and readability.
Automatically Deploy a Static Gatsby Site via FTP. Automatically Deploy a Static Gatsby Site via FTP
Deploy a static Gatsby build over FTP with environment variables, ftp‑deploy, build scripts, and a practical CI flow for conventional or legacy hosting.
Using JavaScript to Avoid Orphans. 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.
