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.
Articles
Guides, page 15 of 20
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.
Image Optimisation with next/image. Image Optimisation with
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.js`GetStaticPaths` in 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.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.
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.
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`.
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. 301 vs. 307 Redirects
Compare 301 and 307 redirects clearly, including permanence, browser behaviour, SEO impact, cache handling, temporary moves, and when each status code fits.
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.
Class vs. Functional Components in React. Class vs. Functional Components in React
Class and functional components are key to React development. In this article I explore differences, advantages, and when to use each in modern React apps.
Advanced Techniques for Responsive Web Design. Advanced Techniques for Responsive Web Design
Discover advanced responsive web design techniques with CSS Grid, `clamp()`, container queries, and JS enhancements for performance‑optimised, adaptive sites.
