React Fragments Explained
React Fragments explained through empty tags, keyed fragments, semantic markup, unnecessary wrapper divs, grouped list output, and layout side effects.
Articles
Guides, page 15 of 18
This is a relatively generic and broad category where I attempt to offer guidance or instruction on more‑or‑less anything related to front‑end and web development.
Below you will find a subset of articles from my blog specifically about Guides. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are three hundred seven collected together for you below.
React Fragments Explained. 
Understanding Media Queries in CSS. Understanding Media Queries in CSS
Understand CSS media queries for responsive design, including screen conditions, mobile‑first and desktop‑first approaches, breakpoints, and device traits.
Optimising Website Performance with HTML, CSS, and JavaScript. Optimising Website Performance with HTML, CSS, and JavaScript
Boost website performance with HTML, CSS & JavaScript optimisation. I explore techniques: lazy loading, critical CSS, script deferment for faster load times.
Mastering CSS Animations with @keyframes. Mastering CSS Animations with
@keyframesCSS `@keyframes` enables animations by defining style changes over time. Here, I explain how it works with examples, properties, and cross‑browser support.
Extends and super in JavaScript Classes. extendsandsuperin JavaScript Classes`Extends` and `super` in JavaScript classes explained with inheritance examples, constructor rules, method overriding, and the trade‑offs of class hierarchies.
JavaScript Essentials for Freelance Web Developers. JavaScript Essentials for Freelance Web Developers
This guide explores JavaScript essentials for freelance web developers. It covers fundamental concepts, practical examples, and tips for mastering JavaScript.
Some of the Most‑Misunderstood Properties in CSS. Some of the Most‑Misunderstood Properties in CSS
Whilst understanding any computing language comes with practice and exposure, there are some areas of CSS that can flummox even the most seasoned of developers.
::Before and ::after Pseudo‑Elements in CSS. ::beforeand::afterPseudo‑Elements in CSSUsing the `:before` and `:after` pseudo‑elements in CSS for styling and content insertion. Here, I cover syntax, practical examples, and best practices.
Promise.all() vs. Promise.race() in JavaScript. Promise.all()vs.Promise.race()in JavaScript`Promise.all()` vs. `Promise.race()` in JavaScript explained with practical async examples, error behaviour, timeouts, and the mistakes developers commonly make.
Building Polyfills for JavaScript Array and String Methods. Building Polyfills for JavaScript Array and String Methods
Polyfills replicate modern JavaScript methods for compatibility. Here, I explain polyfills and show how to build key examples in unsupported environments.
JavaScript Error Handling Patterns. JavaScript Error Handling Patterns
Error handling in JavaScript is vital for building robust applications. Here, I explore modern patterns like try‑catch, async/await, and global error handlers.
The CSS overflow Property. The CSS
overflowPropertyUnderstand the CSS overflow property, including visible, hidden, scroll, auto, x and y control, scrollbars, accessibility, and mobile quirks safely.
The Difference Between JavaScript Callbacks and Promises. The Difference Between JavaScript Callbacks and Promises
JavaScript callbacks execute functions after tasks, while promises offer structured asynchronous handling. I explore their differences, benefits, and uses.
Array.find(), Array.some(), and Array.every() in JavaScript. Array.find(),Array.some(), andArray.every()in JavaScript`Array.find()`, `Array.some()`, and `Array.every()` in JavaScript explained clearly, including return values, use cases, and when each method fits best.
Understanding CSS Transitions. Understanding CSS Transitions
CSS transitions allow us to create smooth animations between states, enhancing user experience. Here, I discuss how to use transitions with practical examples.
Object.is() vs. Strict Equality in JavaScript. Object.is()vs. Strict Equality in JavaScriptCompare Object.is() and strict equality in JavaScript, including NaN, signed zero, loose equality contrast, and when precision matters in real code.
What is CORS and Why is My JavaScript fetch Blocked? What is CORS and Why is My JavaScript
fetchBlocked?CORS explained for JavaScript fetch errors, including same‑origin policy, server opt‑in, preflight requests, credentials, and what front‑end code can fix.
Creating and Dispatching Custom Events in JavaScript. Creating and Dispatching Custom Events in JavaScript
Create and dispatch custom events in JavaScript with CustomEvent, detail payloads, bubbling, naming choices, cancellation, and component examples.