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.
Articles
JavaScript, page 12 of 18
JavaScript is probably one of the most‑used programming languages in the world, and a cornerstone of front‑end (and more general) web development. It enables the development of interactivity and features that HTML and CSS alone simply cannot, and includes more advanced concepts like closures, callbacks, and asynchronous programming.
Below you will find a subset of articles from my blog specifically about JavaScript. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are three hundred twenty‑one articles collected together for you below.
Automatically Deploy a Static Gatsby Site via FTP. 
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 while 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.
React Hooks: Modern State Management. React Hooks: Modern State Management
React Hooks, introduced in React 16.8, bring state and lifecycle features to functional components. Here, I explore how they work and why they matter.
