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.
Articles
Guides, page 16 of 22
The guides are the practical part of this archive: working explanations for a specific web development problem, written to show the decision as well as the answer. The subject varies, but the aim is consistent: enough context to use the technique sensibly rather than copy it blindly.
Replace Inline Styles in Gatsby with an External CSS File. 
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.
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
Disable production source maps in Gatsby with webpack, understand external versus inline maps, and clear old map files without changing development builds.
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.
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.
Understanding getStaticPaths in Next.js. Understanding
getStaticPathsin Next.jsgetStaticPathsin Next.js explained with dynamic routes, pre‑rendered paths, fallback behaviour, and how static generation works for slug‑based pages.
getStaticProps vs. getServerSideProps in Next.js. getStaticPropsvs.getServerSidePropsin Next.jsgetStaticPropsvs.getServerSidePropsin Next.js explained with build‑time and request‑time data fetching, trade‑offs, and practical page examples.
Building Custom Hooks in React. Building Custom Hooks in React
Building custom hooks in React explained with reusable stateful logic, naming rules, composition examples, and why hooks share logic rather than state.
What is a Static Site Generator? What is a Static Site Generator?
Static site generators explained in plain English, including how they compare with SSR, ISR and modern framework rendering choices.
Static Generation vs. Server‑Side Rendering in Next.js. Static Generation vs. Server‑Side Rendering in Next.js
Compare static generation and server‑side rendering in Next.js through freshness, request‑time data, performance, SEO, operational cost, and page intent.
Automatically Generate urllist.txt from sitemap.xml. Automatically Generate
urllist.txtfromsitemap.xmlUsing PHP it is quick and easy to automatically generate your urllist.txt sitemap from your sitemap.xml file (for example, using gatsby‑plugin‑sitemap).
Throttling vs. Debouncing in JavaScript: Managing Event Frequency. Throttling vs. Debouncing in JavaScript: Managing Event Frequency
The differences between throttling and debouncing in JavaScript, including practical TypeScript code examples. Optimise event handling and improve performance.
Understanding Element Dimensions in JavaScript: Width and Height. Understanding Element Dimensions in JavaScript: Width and Height
Measure element dimensions in JavaScript with clientWidth, offsetWidth, getBoundingClientRect(), innerWidth, outerWidth, and responsive layout cautions.
Using CSS Custom Properties for Shared Design Values. Using CSS Custom Properties for Shared Design Values
useReducer in React. useReducerin ReactuseReducerin React explained clearly, including reducer functions, action objects, complex state updates, and when it is a better fit thanuseState.
Dynamic Routes in Next.js. Dynamic Routes in Next.js
Dynamic routes in Next.js explained with
[slug]pages, route params, nested segments, and why file‑based dynamic routing simplifies content‑driven sites.
301 vs. 307 Redirects. 301vs.307RedirectsCompare 301 and 307 redirects clearly, including permanence, browser behaviour, SEO impact, cache handling, temporary moves, and when each status code fits.