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.
Articles, page 16 of 22
Practical notes and articles on React, Next.js and web platform work.
Throttling vs. Debouncing in JavaScript: Managing Event Frequency. 
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.
How to Use and Clear the CSS float Property. How to Use and Clear the CSS
floatPropertyUse and clear the CSS float property in legacy layouts, including text wrapping, clearing behaviour, layout examples, and when modern tools are better.
Using display in CSS. Using
displayin CSSUnderstand the CSS display property, including block, inline, inline‑block, none, flex, and grid, plus how defaults affect front‑end layout decisions.
How to Use grid in CSS. How to Use
gridin CSSStart using CSS Grid with containers, columns, rows, item placement, gaps, track sizing, flexible layouts, and practical two‑dimensional examples.
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.
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.
Exploring the Liquid Templating Language. Exploring the Liquid Templating Language
Liquid is a small templating language with a lot of reach. This article explores its syntax, control flow, and why it shows up in so many CMS tools.
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.
Custom _app and Custom _document in Next.js. Custom
_appand Custom_documentin Next.jsCustom `_app` and `_document` in Next.js explained clearly, including shared layout, global setup, server‑rendered HTML, and what each file is actually for.
Understanding the JavaScript Event Loop. Understanding the JavaScript Event Loop
The JavaScript event loop manages asynchronous tasks in a single‑threaded environment. I explore how it works with the call stack, task queue, and microtasks.
Creating Interactive User Interfaces with HTML, CSS, and JavaScript. Creating Interactive User Interfaces with HTML, CSS, and JavaScript
Many websites feel static and unresponsive, frustrating users. This article shows how HTML, CSS, and JavaScript create dynamic, accessible interfaces.
Simplify Asynchronous JavaScript with async/await. Simplify Asynchronous JavaScript with
async/awaitUse async and await to simplify asynchronous JavaScript, with promise comparisons, error handling, readable control flow, and common pitfalls in real apps.
