Gregory's Server
UI Workshop
✅ scroll driven animations
✅ view transitions
✅ popovers
✅ container queries
https://nerdy.dev/i-put-a-workshop-on-chrome-developers-youtube
|
19 posts total
@argyleink I was just re-reading the MDN docs on why there will not be CSS4… what’s changed? “There will never be a CSS3 or a CSS4; rather, everything is now just "CSS" with individual CSS modules having version numbers.”  proposed a #CSS `scroll-state` query for easily knowing which direction the user is scrolling want it? **give it a vote or comment!** **Headless, boneless, skinless & lifeless UI** This blog post is interested in the layered abstractions the front-end community is using so they can compose the layers themselves **Why isn't my **`position-try-fallback`** working in small spaces?** Learn from my `anchor()` and `inset-area` mistakes. ⤷ https://nerdy.dev/why-isnt-my-position-try-fallback-working-in-small-spaces **Steal this `<details>` transition boilerplate CSS** This post is in response to the most common use case I see folks trying to do with `interpolate-size`. ⤷ https://nerdy.dev/open-and-close-transitions-for-the-details-element  @argyleink excellent use case. It's indeed a really common use case. Thanks for sharing it. I need to catch up on all the new CSS properties 😅 Side note, nothing alarming, but your content seems to be truncated on Android Firefox. I can't scroll horizontally or zoom out to get the content. Transition reveal a password field with #CSS `interpolate-size` and `:has()` a customized `<select>` with: - transitions ⤷ https://nerdy.dev/custom-select-with-transitions-boilerplate  learn about #CSS `interpolate-size: allow-keywords;` from @bramus on the Chrome Blog Animate to height or width `auto`! https://developer.chrome.com/docs/css-ui/animate-to-height-auto  @argyleink @bramus @tomayac These browser ui adventures where the mouse hero sets out to find secrets and hidden meanings left behind by the Builders… This is a game from fifteen years ago. 🙈💁🏻♂️ @matthiasott is on the bad@CSSpodcast this week, sharing what they still struggle with, AND we nerd out on **how much we adore the lack of control we have in web design**. Check it out on YouTube @matthiasott Matthias, thanks again for coming on, you're so cool and I really love learning from you!  **The Over-Easy Machine** - UI layering with `anchor()` **Watch** @argyleink Adam, is there a way for the popover to shift left/right if it extends outside the viewport edge? I see how to flip it when vertical scrolling, but what if the viewport narrows and the inline edges of the popover now touch the sides? all I'm doing is taking the contents of the <pre> and calling document.startViewTransition() before I inject the authored styles, browser does the rest we wont be calling these drop-downs anymore tho, with anchor() auto-flip it… **might be a drop-up!** video alt: rad Firefox Devtools feature 👀 edit any clip-path shape visually   @argyleink so *that's* what that icon does. i've seen it so many times but never tried clicking it 😅   @argyleink interesting! I can’t tell who is behind it though, which is weird. Wonder why no “about us” page?  @argyleink oh that looks very interesting! time to dig in and see how they do things. scroll snap + scroll driven animation carousel 💡 in the mobile size it looks a lot like the iOS app switcher eh? try it!? https://codepen.io/argyleink/pen/MWMQJQy ↪ https://nerdy.dev/container-query-carousel-with-scroll-driven-animation Ironically, doesn’t work on iOS. :-) Now, for extra credit… how can you detect a click on one of the edges of the cards in the back of the stack and have it scroll-snap to that card in the foreground position? 🆕 Mini Web Machine **Pop n' Lock** Watch on YouTube! `<dialog>` examples demo: - default want to know when **all the transitions** on an element have **finished**? regardless of their individual durations? I gotchu. ```js @bramus has noted that this function should `.filter()` out animation instances if your element has both keyframe animations and transitions running 👍🏻 |
some screenshots of the UI we'll enhance