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
Responsive Development
Responsive development asks one implementation to cope with changing space, capabilities, and content rather than guessing a fixed device. The articles here work through the CSS and browser behaviour behind that flexibility. Unlike adaptive development, the goal is usually to keep one codebase coherent as the conditions change.
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.
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.
Dynamic Sizing with CSS clamp(). Dynamic Sizing with CSS
clamp()Use CSS clamp() for fluid typography, spacing, and layouts with clear minimums and maximums, plus media‑query trade‑offs and responsive examples.
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.
Dynamic Sizing with CSS max(). Dynamic Sizing with CSS
max()Use CSS max() for responsive sizing, spacing, and layout decisions where the browser should choose the larger value within a fluid design without JavaScript.
Dynamic Sizing with CSS min(). Dynamic Sizing with CSS
min()In CSS, the
min()function allows us to set the smallest value from a set as the value of a CSS property. This can be hugely useful in responsive development.
Dynamic Calculations in CSS Using calc(). Dynamic Calculations in CSS Using
calc()A discussion on how to use CSS calc() for dynamic calculations directly within your styles. Learn to mix units, perform calculations, and improve responsivity.
Creating Custom Viewport Units Instead of Using vh and vw. Creating Custom Viewport Units Instead of Using
vhandvwCreate custom viewport units with CSS variables and JavaScript to avoid mobile 100vh bugs caused by browser chrome, keyboards, and visible height changes.
Staying Current: Automating Copyright Year Updates. Staying Current: Automating Copyright Year Updates
Automate copyright year updates across JavaScript, React, Angular, Vue, jQuery, PHP, and WordPress so footers do not go stale each January across stacks.
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.
Enhancing Web Typography with text‑wrap: balance. Enhancing Web Typography with
text‑wrap: balanceExploring the synergy of
text‑wrap: prettyandtext‑wrap: balancein web typography, enhancing text aesthetics and readability in different contexts.
The Power of text‑wrap: pretty. The Power of
text‑wrap: prettyAn exploration of the power of
text‑wrap: prettyin CSS, a simple but very effective way to enhance web typography by preventing orphans in blocks of text.
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.