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.
Articles
JavaScript, page 12 of 18
JavaScript is the working language behind most of my front‑end writing, from small browser behaviours to application state and asynchronous code. These articles favour the mechanism behind a feature over a clever trick, whether the subject is callbacks, async code, or a language edge that only becomes obvious in production.
Adding Static Files to a Gatsby Site. 
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.
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.
Commenting in JSX. Commenting in JSX
Comment in JSX without breaking React parsing, including curly‑brace block comments, why HTML comments fail, and gotchas around rendered output clearly.
GetStaticProps vs. getServerSideProps in Next.js. getStaticPropsvs.getServerSidePropsin Next.js`GetStaticProps` vs. `getServerSideProps` in 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.
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.
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.
How to Replace All Instances of a String in JavaScript. How to Replace All Instances of a String in JavaScript
Replacing every instance of a string in JavaScript depends on what you are matching. This guide covers replaceAll(), regexes, and older fallbacks.
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.
UseReducer in React. useReducerin React`UseReducer` in React explained clearly, including reducer functions, action objects, complex state updates, and when it is a better fit than `useState`.
Check If Three Values are Equal in JavaScript. Check If Three Values are Equal in JavaScript
A brief explanation of how to check if three variables are equal in JavaScript using the equality operators, ternary operator and Array.prototype.every method.
Toggle a Boolean in JavaScript. Toggle a Boolean in JavaScript
A brief explanation of how to toggle a variable in JavaScript by inverting its value. Learn how to switch a variable from true to false and vice versa.
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.
JavaScript’s Math.random(). JavaScript's
Math.random()JavaScript Math.random() explained beyond the basics, including pseudo‑random generation, browser history, ranges, array indexes, and randomness limits.
UseRef in React. useRefin ReactUse useRef in React for DOM access, focus management, mutable values, previous values, integration work, and cases where refs should not replace state.
