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 serves deliberately different experiences for known device capabilities. That makes it a more opinionated choice than responsive development, which usually asks one codebase to flex. The writing here is interested in that distinction, and in the browser and implementation decisions that make device‑aware delivery useful rather than brittle.
Container Queries in CSS. 
CSS aspect‑ratio for Responsive Layouts. CSS
aspect‑ratiofor Responsive LayoutsThe CSS
aspect‑ratioproperty 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
instanceofandtypeoffor 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()MethodUnderstand JavaScript's
hasOwnProperty(),Object.hasOwn(), and theinoperator, including the difference between own and inherited object properties.
Harnessing the Power of Function.prototype.bind(). Harnessing the Power of
Function.prototype.bind()Explore JavaScript's
Function.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
setTimeoutfunction. 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 when and how an element's content is rendered by the browser.
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.
