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.
Articles
JavaScript, page 13 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.
React Hooks: Modern State Management. 
Checking Rendered HTML for JavaScript Pages. Checking Rendered HTML for JavaScript Pages
Check rendered HTML for JavaScript pages by comparing source and DOM output across metadata, headings, links, schema, content, hydration, and crawlability.
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.
Client‑Side Rendering and Search Visibility. Client‑Side Rendering and Search Visibility
How client‑side rendering can affect search visibility, and what to check around content, links, metadata, routing, loading states, and fallbacks.
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.
The JavaScript Event Loop: A Beginner’s Guide. The JavaScript Event Loop: A Beginner's Guide
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
Create interactive interfaces with HTML, CSS and JavaScript, using semantic controls, accessible state, event handling, and progressive enhancement.
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.
How to Prevent Race Conditions in JavaScript with AbortController. How to Prevent Race Conditions in JavaScript with
AbortControllerHow to prevent race conditions in JavaScript with `AbortController`, including stale search results, request cancellation, and browser support caveats.
Using next/link for Client‑Side Navigation. Using
next/linkfor Client‑Side Navigation
Event Delegation in JavaScript. Event Delegation in JavaScript
Event delegation in JavaScript manages child element events via a single parent listener. Here, I explore how it works, its benefits, and practical use cases.
The React Context API: When to Use It and When Not to. The React Context API: When to Use It and When Not to
The React Context API explained with Provider and Consumer examples, prop drilling trade‑offs, shared app state, and when context is not the right answer.
JavaScript Rendering and SEO Checks. JavaScript Rendering and SEO Checks
JavaScript rendering and SEO checks for pages that rely on client‑side behaviour, including content, links, metadata, fallbacks, and rendered output.
Merging Multiple Objects in JavaScript. Merging Multiple Objects in JavaScript
Merging objects in JavaScript is straightforward once you know the tools. This guide covers Object.assign(), spread syntax, and overwrite behaviour.
Event Bubbling vs. Capturing in JavaScript. Event Bubbling vs. Capturing in JavaScript
Event bubbling and capturing in JavaScript explained through propagation phases, event delegation, target/currentTarget, stopPropagation(), and handler order.
Leveraging JavaScript Frameworks for Efficient Development. Leveraging JavaScript Frameworks for Efficient Development
JavaScript frameworks streamline development with reusable components, state management, and optimised rendering. Here, I compare React, Vue.js, and Angular.
The Fetch API for Beginners: Get, Post, JSON, and Errors. The Fetch API for Beginners: Get, Post, JSON, and Errors
The Fetch API for beginners, including GET requests, POST requests, JSON handling, `response.ok`, and why failed fetches need explicit error checks.