Avoiding Forced Layout and Layout Thrashing in JavaScript
See how DOM writes followed by geometry reads force synchronous layout, why loops amplify the cost, and how read‑first batching preserves the result.
Articles
Front‑end Development, page 20 of 25
Front‑end development is where product intent becomes the interface people actually use. My writing approaches it as engineering rather than surface decoration, with attention to browser behaviour and code that remains accessible, fast, and safe for a team to change.
Avoiding Forced Layout and Layout Thrashing in JavaScript. 
Understanding Browser Caching with Cache‑Control and Validators. Understanding Browser Caching with
Cache‑Controland ValidatorsUnderstand how Cache‑Control, ETag, Last‑Modified, Vary, and conditional requests decide whether browsers reuse or revalidate HTTP responses.
Mastering CSS Animations with @keyframes. Mastering CSS Animations with
@keyframesCSS
@keyframesenables 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 ClassesExtendsandsuperin 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.
React Unknown DOM Props: Why Component Props Reach the HTML. React Unknown DOM Props: Why Component Props Reach the HTML
React 16 passes unknown attributes to the DOM. See how component‑only props leak through JSX spreads, what React 15 did, and how to consume them.
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.
Improving Scroll Performance with Passive Event Listeners. Improving Scroll Performance with Passive Event Listeners
Use passive event listeners safely: learn when touch and wheel handlers block scrolling, when preventDefault() is required, and why handler cost is separate.
::Before and ::after Pseudo‑Elements in CSS. ::beforeand::afterPseudo‑Elements in CSSUsing the
:beforeand:afterpseudo‑elements in CSS for styling and content insertion. Here, I cover syntax, practical examples, and best practices.
Understanding the Critical Rendering Path. Understanding the Critical Rendering Path
Follow HTML, CSS, and JavaScript through the browser's critical rendering path, then find the resources delaying the first useful render.
Promise.all() vs. Promise.race() in JavaScript. Promise.all()vs.Promise.race()in JavaScriptPromise.all()vs.Promise.race()in JavaScript, with async examples, error behaviour, timeouts, practical use cases, and common mistakes in real code.
Generators in JavaScript: A Beginner's Guide. Generators in JavaScript: A Beginner's Guide
JavaScript generators explained for beginners, covering generator function syntax, yield, paused execution, iteration patterns, and where generators still help.
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‑browser quirks.
The Difference Between JavaScript Callbacks and Promises. The Difference Between JavaScript Callbacks and Promises
JavaScript callbacks execute functions after tasks, whilst 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 JavaScriptArray.find(),Array.some(), andArray.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.