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.
Articles, page 18 of 27
Articles from more than two decades of building, rebuilding, debugging, and leading web projects.
Why Gatsby and Contentful Work Well Together. 
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.
Why Choose Me as a Brighton and South East Web Developer. Why Choose Me as a Brighton and South East Web Developer
Based in Brighton, I bring more than 23 years of web development experience, clear communication, performance‑focused delivery and ongoing support.
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/image`next/image` explained 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.
Using Regex to Replace Numbers in a String. Using Regex to Replace Numbers in a String
Finding and replacing numbers in a string with JavaScript is a relatively straightforward task, although which regex you use (and how) can impact readability.
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.
Understanding getStaticPaths in Next.js. Understanding
getStaticPathsin Next.js`GetStaticPaths` in Next.js explained with dynamic routes, pre‑rendered paths, fallback behaviour, and how static generation works for slug‑based pages.
Using CSS to Deal with Widows. 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.
Use Greater‑Than and Less‑Than Symbols in JSX. Use Greater‑Than and Less‑Than Symbols in JSX
Render greater‑than and less‑than symbols in JSX safely, using strings or HTML entities whilst avoiding parser confusion and awkward React output.
