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.
Articles
Guides, page 17 of 22
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.
Class vs. Functional Components in React. 
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
_appand_documentin the Next.js Pages Router: shared layout, application setup and server‑rendered HTML, with historical Next.js 8 examples.
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.
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.
Best Practices for Cross‑Browser Compatibility. Best Practices for Cross‑Browser Compatibility
Cross‑browser compatibility ensures a consistent user experience across different browsers. Best practices, CSS, and JS techniques, and testing strategies.
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.
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.
Submitting Forms with JavaScript and FormData. Submitting Forms with JavaScript and
FormDataSubmit native forms with JavaScript and FormData without losing files or repeated values. Let Fetch set the multipart boundary and handle failures correctly.
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 ErrorsThe Fetch API for beginners, including GET requests, POST requests, JSON handling,
response.ok, and why failed fetches need explicit error checks.
Tagged Template Literals in JavaScript. Tagged Template Literals in JavaScript
Tagged template literals let you intercept and reshape template literal output. This guide explains the syntax and why the feature can be useful.
Escaping and Unescaping Special Characters in JavaScript. Escaping and Unescaping Special Characters in JavaScript
Escape and unescape special characters in JavaScript for strings, HTML, regular expressions, safe output, parsing, and practical data handling.
Integrating CMSes with HTML, CSS, and JavaScript. Integrating CMSes with HTML, CSS, and JavaScript
Integrating CMSes with HTML, CSS, and JavaScript enables dynamic, flexible content management. Here, I explore best practices, performance tips, and SEO.