Anchor Interpolated Morph (AIM)
Discover CSS techniques for natural animations originating near trigger points, utilizing anchor(), anchor-size(), @starting-style, and interpolate-size for interruptible, contextual transitions without JavaScript.
By Adam Argyle23 Jan 2026Responsive Hexagon Grid Using Modern CSS
Temani updates his responsive hexagon grid with modern CSS features, reducing magic numbers and creating a cleaner, more maintainable layout using contemporary techniques.
By CSS-Tricks23 Jan 2026Open Props @custom-media Recipes
The @custom-media at-rule has landed in Firefox Nightly, offering more dynamic media queries – currently behind a feature flag, but promising for future flexible styling.
By CSS-Tricks23 Jan 2026Custom Media
Firefox Nightly now supports @custom-media behind a flag, enabling more flexible, readable media queries with syntax like --motionOK and prefers-reduced-motion, thanks to Open Props.
By Adam Argyle23 Jan 2026Improve React Performance With useMemo And useCallback
Optimize React performance with useMemo and useCallback by understanding when memoization is effective, avoiding common pitfalls, and applying best practices from real-world guidelines.
By DebugBear23 Jan 2026I Learned The First Rule of ARIA the Hard Way
Semantic HTML plays a crucial role in accessibility, often overlooked; ARIA should be used thoughtfully, avoiding shortcuts that can lead to confusion or misuse.
By CSS-Tricks21 Jan 2026🏎️ Speed is cheap. Trust gaps cost months
Using intent cards to select the optimal AI interface, complemented by a concise audit and risk-focused QA process for smarter AI integration.
By Unicorn Club21 Jan 2026Overscroll Effects On Nested Scrollers In All Browsers
Chrome 145 introduces overscroll effects on nested scrollers, providing a smooth, bounce-like UX similar to the main page – eliminating harsh edges and enhancing scroll interactions.
By Adam Argyle21 Jan 2026How To Diagnose Lighthouse Score Discrepancies Between Tools
Explore why Lighthouse scores vary across tools like PageSpeed Insights and Chrome DevTools, and learn effective strategies to diagnose and resolve these discrepancies.
By DebugBear21 Jan 2026View Transitions & Playing Video
Discover the possibilities and limitations of keeping videos playing seamlessly during view transitions. While mostly feasible, some challenges remain depending on implementation.
By Frontend Masters20 Jan 2026Lowering the specificity of multiple rules at once
Exploring the power of :where() to reduce selector specificity across multiple rules, enhancing CSS consistency. Discover how wrapping selectors in :where() can improve usability, though it may impact readability, and how @layer can offer an alternative approach.
By Manuel Matuzovic20 Jan 2026Animating Responsive Grid Layout Transitions with GSAP Flip
Using GSAP’s Flip plugin to animate fluid grid layout changes, enabling seamless resizing and rearrangement of grid items with smooth, dynamic transitions.
By Codrops20 Jan 2026Rethinking “Pixel Perfect” Web Design
Examining the flaws of the “Pixel Perfect” mindset, redefining what true visual quality means across multiple devices and fluid layouts in modern web design.
By Amit Sheen20 Jan 2026
Create a dynamic photo gallery that reacts to user interactions. Using HTML, CSS, and JavaScript, implement a grid layout where images can be resized and rearranged fluidly using GSAP's Flip plugin or a similar animation library. Add interactive features such as hover effects and smooth transitions between different view modes (e.g., grid, list, carousel). Optionally, incorporate CSS techniques like @custom-media to ensure responsive design, and test accessibility features with semantic HTML elements to enhance the user experience.
Why did the JavaScript developer keep running into walls? They didn't know how to handle promises.