Articles
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.
useTransition and useDeferredValue to Keep React Interfaces ResponsiveuseTransition and useDeferredValue explained with search, filtering, pending states, and how to keep React interfaces responsive under heavy work.
CSS container queries let components respond to an ancestor container's size. I explain query containers, responsive components, and browser fallbacks.
aspect-ratio for 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.
clamp()Use CSS clamp() for fluid typography, spacing, and layouts with clear minimums and maximums, plus media‑query trade‑offs and responsive examples.
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.
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.
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.
vh and vwUse JavaScript and CSS custom properties for viewport sizing, with working CSS fallbacks and clear limits around browser controls, keyboards, and scrollbars.
Automate copyright year updates across JavaScript, React, Angular, Vue, jQuery, PHP, and WordPress so footers do not go stale each January across stacks.
text-wrap: balanceExploring the synergy of text-wrap: pretty and text-wrap: balance in web typography, enhancing text aesthetics and readability in different contexts.
text-wrap: prettyHow text-wrap: pretty can improve paragraph wrapping in CSS, with practical examples, browser‑dependent results, and a progressive enhancement approach.
matchMedia MethodIn 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.
content-visibilityUsing the CSS content‑visibility property, we can control when and how an element's content is rendered by the browser.
Learn how CSS container queries apply styles according to a parent container's size, with @container examples, fallbacks and current support context.
position: sticky in 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!
Use useBreakpointValue and ChakraProvider in Chakra UI 1.8 to respond to screen sizes in React, with custom breakpoints and server‑rendering caveats.
vw and vhExplore CSS viewport units beyond vw and vh, including vmin, vmax, vi, vb, svh, lvh, and dvh for mobile browser chrome, writing modes, and sizing bugs.
Flexbox in CSS allows for flexible, dynamic and responsive layouts. Learn how to use its properties to create efficient interfaces and avoid potential issues.