Public list by ~frontendfocus

Issue 739 - The end of srcset/sizes headaches is here

The end of responsive images

https://piccalil.li/blog/the-end-of-responsive-images/

The End of Responsive Images — Mat, former chair of the Responsive Images Community Group, reflects on 14 years of srcset/sizes headaches, admitting he hates the sizes syntax he championed. Relief is in sight: the new cross-browser sizes="auto" (now in Firefox 150, too) sizes lazy-loaded images automatically.

4 months ago

Scroll-Driven Animations • Josh W. Comeau

https://www.joshwcomeau.com/animation/scroll-driven-animations/

Scroll-Driven Animations — Josh has been experimenting with the 'majestic' new Animation Timeline API. Here he shows us how it works (complete with demos and code), gotchas to be aware of, and some of the more advanced things we can do with it. “honestly, it’s so good”.

4 months ago

Compositing & Blending • Niklas Gadermann

https://nik.digital/posts/compositing-blending

Compositing & Blending — A fascinating look at what both compositing and blending are, what’s going on under the hood when you apply blend modes in CSS, and how to approach their use.

4 months ago

Recreating Apple’s Vision Pro Animation in CSS | CSS-Tricks

https://css-tricks.com/recreating-apples-vision-pro-animation-in-css/

Recreating Apple’s Vision Pro Animation in CSS — Apple’s site is filled with delightful animation touches, and here John attempts to recreate such an effect with CSS’s scrolling animation capabilities.

#animation

4 months ago

Let’s Use the Nonexistent ::nth-letter Selector Now | CSS-Tricks

https://css-tricks.com/using-nonexistent-nth-letter-selector-now/

Let’s Use the Nonexistent ::nth-letter Selector Now — Explains the long-standing absence of the ::nth-letter selector in CSS and presents a functional “impossible” polyfill to actually implement it today.

#pseudo elements

4 months ago

Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root – Frontend Masters Blog

https://frontendmasters.com/blog/constructable-stylesheets-and-adoptedstylesheets-one-parse-every-shadow-root/

Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root — A technical guide looking at creating CSSStyleSheet objects directly in JavaScript and attaching them to Shadow DOM, eliminating redundant <style> tags and parsing CSS only once per component class. Likely a meaningful architectural win for any app leaning on Web Components.

4 months ago

Datatype — variable font that turns text into charts

https://franktisellano.github.io/datatype/

📈 Datatype: A Variable Font That Turns Text Into Charts — A variable OpenType font that displays inline charts (bar, pie, sparklines) without the need for JavaScript or images. The page shows how it works in context.

4 months ago

animata

https://animata.design/

Animata: A Suite of Animation-Focused React Components — A huge suite of animation-focused components including animated beams, spreading cards, a Slack-style intro screen, and glitching text. A novel set of visual concepts you won’t find in most collections.

#animation #interactive #shadcn ui #next.js #react #tailwind css

4 months ago