A technical guide to optimizing hero videos on landing pages for faster load times and better UX, covering aspect ratios and layout shifts.
Explains a clever CSS technique used by Facebook to conditionally toggle border-radius based on element width vs viewport width.
A guide for front-end developers on making strategic decisions to build flexible, adaptable UI components that handle real-world content and diverse user needs.
Explores whether modern CSS layout tools like flexbox and Grid make traditional 12-column design grids obsolete for web development.
A proposal for browser dev tools to toggle CSS size units (px, em, rem) like color values, improving designer-developer workflow.
Explores CSS techniques for inheriting grandparent font sizes using type-relative units, with practical examples and use cases.
Explores the future of CSS layout, comparing the roles of @container queries and traditional @media queries in responsive web design.
Explores the next era of responsive web design, moving beyond viewport media queries to user preferences, container queries, and component-driven styles.
Explains the upcoming CSS @container feature for responsive element styling based on parent size, not just viewport.
Explores using CSS Container Queries for component-level art direction, particularly for responsive images within card layouts.
Explores advanced, practical applications of CSS variables beyond basic color tokens, with examples for dynamic styling and code efficiency.
An introduction to CSS Container Queries, a new CSS feature that allows components to respond to their container's size instead of the viewport.
A tutorial on creating responsive UICollectionView layouts using Compositional Layout that adapts to different iPad screen sizes and orientations.
The new CSS aspect-ratio property is now supported in major browser engines, helping developers create responsive layouts without hacks.
A deep dive into building robust, real-world UI components, using a Facebook Messenger card as an example to explore edge cases and scalability.
A tutorial on using CSS Scroll Snap to create smooth, swipeable scrolling containers for galleries and sliders without JavaScript.
Learn to build a custom React hook using window.matchMedia for responsive JavaScript-based conditional rendering instead of CSS media queries.
A comprehensive guide to the CSS Grid minmax() function, explaining its syntax, behavior, and practical use cases for responsive layouts.
A technical guide explaining a modern, non-hacky method to prevent layout shifts when loading responsive images in web development.
A developer shares practical strategies and lessons learned from porting a complex iPhone app to iPad, focusing on UI adaptation and time-saving techniques.
