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 is the most commonly‑used method for creating a web page that responds to the type of device or screen size it is being displayed upon. Unlike Adaptive Development, responsive techniques generally revolve around using media queries to determine the size of the visiting device screen and available features, serving one codebase that responds to this, rather than supplying different code to different devices.
Below you will find a subset of articles from my blog specifically about Responsive Development. This is an area I have worked with for many years, and it has been a regular subject in my writing. There are thirty‑eight articles 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.
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 `instanceof` and `typeof` for 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, `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: pretty` and `text‑wrap: balance` in 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: pretty` in 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()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 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.