Links
Sneaky Header Blocker Trick
There is a lil’ UI detail on this blog. Most people don’t even notice it, but the ones who do often reach out, asking how on earth it works. It feels like it defies the rules of CSS! In this blog post, I’ll break down the surprisingly-straightforward implementation so you can start using this trick yourself.
Two Circles, One Arrow, and Anchor Positioning
Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn't seem like it would be possible in CSS alone… but…
The Great CSS Expansion
CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.
When All You Can Do Is All or Nothing, Do Nothing
If your design system can only apply
loading=lazyorfetchpriority=highblindly, it may be safer not to apply them at all.
Experimenting With Scroll-Driven corner-shape Animations
The new CSS
corner-shape()property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects.
Videos
Level, Up your Scroll UX
Slide by slide, CSS feature by feature, we'll incrementally enhance and craft a rad scroll experience. Normally a pain in the box; styling and managing scroll across touch, keyboard, mouse and more PLUS juggling each operating system's slightly different affordances, can be daunting. We’ll emerge victorious, nay, elegant! Learn terms like scroll hint, overscroll behavior, overscroll effect. Plus, when to use what, and a whole bunch of niche details about CSS and scrolling. It’s definitely something people do on your site right? Have you polished it or is yours a bit basic? Upgrade time.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.