Container Queries in CSS
CSS container queries allow elements to respond to their parent's size rather than the viewport. I explain how they work and how they improve responsive design.
Articles
Adaptive Development
Adaptive development is one of the methods in web development aimed at improving how websites or applications adjust to different devices and screen sizes. Unlike Responsive Development, which uses the same codebase and media queries to react to different device capabilities and screen sizes, Adaptive Development more commonly focuses on serving different versions of a site, optimised for the visiting device's capabilities.
Below you will find a subset of articles from my blog specifically about Adaptive Development. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are twenty‑two collected together for you below.
Container Queries in CSS. 
CSS aspect‑ratio for Responsive Layouts. CSS
aspect‑ratiofor Responsive LayoutsThe CSS `aspect‑ratio` property makes it easier to maintain consistent proportions in responsive layouts. Here, I explore how it works and when to use it.
Building Multi‑Tenant Applications with Next.js. Building Multi‑Tenant Applications with Next.js
Multi‑tenant applications serve multiple customers from a single codebase. Here, I walk through building a scalable multi‑tenant web application using Next.js.
Object Control in JavaScript: defineProperties(). Object Control in JavaScript:
defineProperties()Object.defineProperties() gives you fine‑grained control over JavaScript objects. This guide covers descriptors, defaults, and practical use cases.
Exploring the call() Method in JavaScript. Exploring the
call()Method in JavaScriptUncover the capabilities of JavaScript's `call()` for invoking functions with a custom context, a key technique for effective function and method management.
Understanding Object Types with JavaScript's instanceof. Understanding Object Types with JavaScript's
instanceofUncover the differences between JavaScript's `instanceof` and `typeof` for type checking, with practical examples and insights on when to use each operator.
Repetitive Asynchronous Tasks with JavaScript's setInterval(). Repetitive Asynchronous Tasks with JavaScript's
setInterval()A discussion about using JavaScript's setInterval for repetitive tasks. Manage intervals effectively and understand best practices for time‑bound executions.
Understanding prototype.apply() in JavaScript. Understanding
prototype.apply()in JavaScriptUnderstand Function.prototype.apply() in JavaScript, including this binding, array‑like arguments, call() differences, dynamic invocation, and modern use cases.
JavaScript's hasOwnProperty() Method. JavaScript's
hasOwnProperty()MethodDiscover JavaScript's `hasOwnProperty()` for checking an object's own properties, an essential method for accurate and reliable object property iteration.
Harnessing the Power of Prototype.bind(). Harnessing the Power of
Prototype.bind()Explore JavaScript's `Prototype.bind()` method to master function contexts and argument handling, enhancing your code's flexibility and reliability.
Harnessing JavaScript's defineProperty(). Harnessing JavaScript's
defineProperty()Unlock the capabilities of JavaScript's `Object.defineProperty()` for precise property control on objects, enhancing security and data integrity in your code.
Understanding setTimeout() in JavaScript. Understanding
setTimeout()in JavaScriptAn exploration of JavaScript's `setTimeout` function. Understand its nuances in component lifecycles, and learn effective timing strategies using it.
Responsive JavaScript and the matchMedia Method. Responsive JavaScript and the
matchMediaMethodIn the past, we used event listeners on the Window to determine the physical dimensions of a document. Using matchMedia allows us to use media query syntax.
Improve Page Performance with content‑visibility. Improve Page Performance with
content‑visibilityUsing the CSS content‑visibility property we can control how an element interacts with the browser render, controlling when or how an element content renders.
Position: sticky in CSS. position: stickyin CSSAchieving sticky positioning on the web was once a weighty process using JavaScript to detect scroll positions and switch styles. Now, we have position: sticky!
Do Websites Need to Look the Same in Every Browser? Do Websites Need to Look the Same in Every Browser?
Progressive enhancement in web development is often misunderstood: it allows us to take advantage of more modern browsers, without penalising the older ones.
Adaptive vs. Responsive Design & Development. Adaptive vs. Responsive Design & Development
Now used as almost trivial marketing buzz words, there really are significant differences between responsive and adaptive design and development techniques.
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters, including brightness(), animation, dark‑mode eye strain, visual treatment, and where filter effects are useful.
