callie

@callie@front-end.social

I love making the web better. From accessibility to performance, motion and more. Typically hanging out on the bleeding edge. 🌴

This profile is from a federated server and may be incomplete. Browse more on the original instance.

jaffathecake, to random
@jaffathecake@mastodon.social avatar

📝 New post: Handling aspect ratio changes in view transitions.

Lots of tips on customising view transitions, and of course, live demos.

https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/

callie,

@jaffathecake I've run into so many similar issues, this is ultra helpful. Thanks for sharing and writing these!

bramus, to random
@bramus@front-end.social avatar

👀🤩 View Transitions excitement!

https://commits.webkit.org/274906@main

callie,

@bramus OMG so much excitement and then it's all gone. Hopefully a revert of the revert soon!

callie,

@bramus Are we going to get it back after all? New PR to enable it by default is back! https://github.com/WebKit/WebKit/pull/24728

jaffathecake, to random
@jaffathecake@mastodon.social avatar

Really sad that the Navigation API isn't being included in interop 2024. This API makes a night-and-day difference to handling navigations. It cannot be polyfilled, and cannot really be used as progressive enhancement. We need it yesterday. https://github.com/web-platform-tests/interop/issues/435#issuecomment-1921896911

View transitions isn't being included either, but I'm less sad about that, because it can be used as progressive enhancement. https://github.com/web-platform-tests/interop/issues/437#issuecomment-1921897450

callie,

@jaffathecake Honestly super bummed at this year's Interop 24 list as well, especially after last year was so promising. Just kinda hoping we get some of the big ones like navigation API and view transitions to come at least to webkit even if they didn't make the list.

geoffrich, to svelte
@geoffrich@front-end.social avatar

Want to use view transitions in your #SvelteKit app?

v1.24 unlocks view transitions with a new lifecycle method. We’ve already added them to the #Svelte site - watch the blog titles slide into place! (note: it will fade instead of slide if reduced-motion is requested)

Read all about it in my latest on the Svelte blog: https://svelte.dev/blog/view-transitions

video/mp4

callie,

@geoffrich Love the callout on reduced motion is not no motion. We've been trying to take that a step further with our view transitions and on windows and Android devices following their guidelines and doing no animation but with the quick fade on iOS and Mac devices. Congrats on shipping the integration, exciting times!

bramus, to random
@bramus@front-end.social avatar

Are those … CSS Scroll-Driven Animations on https://scroll-animations.style in Safari?

Yes they are! What made this possible is a polyfill our team has been working on: https://github.com/flackr/scroll-timeline

Load up the polyfill JS file and … that’s it - there is no other step.

Recording of https://scroll-animations.style in Safari, showing Scroll-Driven Animations.

callie,

@bramus I've been following your heroic efforts on the polyfill and just wanted to say thank you! Looking forward to putting it into use extensively with all the amazing updates.

callie,

@bramus I am also trying to find some time, would love to have a look at the external sheets issue, didn't seem too bad, but yeah finding the time can be challenging!!

callie, to CSS

Challenging #css question for folks. I have a grid with a header and content, the content is scrollable. I need to add padding that's equal to the height of the header to the content. I need it on the first render as well. I feel like I saw some #CSSGrid hackery that allowed something like this, but curious if #frontend folks might have any ideas.

callie,

@keithjgrant The content starts in the same row as the 2nd header (it could do it on the first as well). Imagine where the 2nd header there's a non-dismissable error message, you wouldn't want it to start overlapped over the content, but upon scrolling you want it to scroll behind the error message. This is my rows.

[primary-header-bar] auto [secondary-header-bar content-start] auto [content] 1fr [secondary-footer-bar] auto [primary-footer-bar content-end] auto;
callie,

@cornflour content is overflow-y: auto

callie,

@cornflour Yeah I think this is what I'm looking for, content is offset but can scroll behind the header/footer. Thank you! Going to give this more of a shot but it looks promising!

callie,

@keithjgrant The issue here is that I want the contents to scroll behind the error message when I start scrolling.

callie,

@keithjgrant @cornflower has a solution using position: sticky that seems to solve the situation nicely! https://mastodon.social/@cornflour/110787454739088749

matuzo, to random
@matuzo@front-end.social avatar

Hypothetically speaking, let's say you're organising a web dev conference with a strong focus on design and front-end next year in May or September in Vienna, who would you invite to speak at the event? 😁

callie,

@lencioni @matuzo I'd love to do that. View Transitions, scroll linked ones, linear easing, discreet animations and effective reduced motion (ie: not 0) patterns are bringing about a bit of a renaissance period for motion on the web. Be fun to talk about how to fit non gratuitous effective motion into interfaces.

beep, to random
@beep@follow.ethanmarcotte.com avatar

you’re building a new web app, and you think it’d be nice to have a header or footer that scrolls out of view while you scroll, but then scrolls back into view occasionally

let me just suggest that: no, you really do not want that, that road you’re thinking of walking down is lined with knives and tears and failure

callie,

@beep @haydencodes I've implemented it a few times and agree it's really hard to do right and performantly and accessible, but working with designers and others I don't want to limit them. I'm curious what the primary issues you run into are?

callie,

@xangoh @beep @haydencodes I mean sure, if something is inaccessible or just a bad idea I'll always call that, but things like this aren't so clearly bad. Users have limited screen real estate and I've been part of user studies that show positive results with the pattern. It's always a conversation but I often see the opposite, engineers pushing back because they think something is hard and not wanting to tackle a challenge or unaware of modern techniques that help.

callie,

@beep the primary example for me that I've helped on a few iterations of and am working on a new version of is using mobile web on https://www.airbnb.com/. Notice the bottom footer scrolls away and then back on scroll up. Have tried resize events and next trying pointer events for trigger but scroll listeners have been most reliable for a few years now.

callie,

@lencioni @beep @lencioni Spent days and so many attempts at fixes on different devices getting scroll direction and looking at successive scroll events. He's the real hero behind that implementation! Agreed it shouldn't be so hard. We tested a version that used visual viewport resize events that worked great on chromium but WebKit delayed their events as well as had tiny ones so it didn't work well. I continue to hope for a world where we can simplify the logic one day!

callie,

@lencioni @beep It was a huge accomplishment, and really stood the test of time. To the point of this thread it's rarely done well on the web. I keep hoping to see a post with 3 lines of CSS to do this but it hasn't happened yet. My next thinking is scroll linked animations and the new viewport units with a sprinkle of JavaScript might work, but it's also not broken! 😺

sarajw, (edited ) to random
@sarajw@front-end.social avatar

Welcome new people. You need to follow like the clappers to get an interesting feed. Totally worth it!

callie,

@sarajw Never knew about this, think I just followed a new 100 folks or so, only rate limited twice! 😆 Thank you!

mattwilcox, to CSS
@mattwilcox@mstdn.social avatar

Hitting some "fun glitches" with #css page transitions that seem to be related in some way to dynamic injection of classes on the transferring elements. For example, my header I'm expecting to "not animate" because:

html {  
 view-transition-name: none;  
}  
header {  
 view-transition-name: site-header;  
}

But instead it's glitching a stretched partially styled version and blending between.

New tech... "is it a bug, is it me doing something weird?"

callie,

@mattwilcox @slightlyoff Try setting object-view-box with a negative inset value of 300% or so on the height value and see if that helps.

callie,

@mattwilcox @slightlyoff Not sure if you have a reduced repro or have tried it but if you use animations panel and pause before starting the transition you can inspect at each stage of the animation what the elements are. You might also try setting display: none on ::view-transition-old(site-header) and animation: none on ::view-transition-group(site-header), especially if the header isn't really changing much.

andy, (edited ) to random
@andy@bell.bz avatar

I made this little viewport logger: https://viewport-logger.netlify.app/

I'd really appreciate it if you could visit it on your devices — especially small screens — because I want to use the data to illustrate just how much screen fragmentation there is.

Please share with your pals too!

🚨Edit: this is now closed. Thanks everyone: we got > 100k datapoints!

callie,

@andy @aardrian You might be able to filter some of those out by looking at only devices with maxTouchPoints <= 1.

jonaspelzer, to random German

I’d like to change the placeholder name on http://temper.one from John Doe to something gender-neutral, any ideas?

callie,

@jonaspelzer Bo, Arie, Al, Sam, Lex. So many good options!

tylersticka, to random

Videos are smaller in filesize than GIFs, yay!

But img elements don’t work with video files in most browsers, boo!

But video elements work a lot like img with autoplay loop muted playsinline attributes, yay!

But video elements don’t have a straightforward alt attribute, boo!

callie,

@tylersticka For sure, also I'm not entirely sure of if it auto loops on the img tag but they seem to imply the compression is quite good.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • mdbf
  • ngwrru68w68
  • tester
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • InstantRegret
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • DreamBathrooms
  • JUstTest
  • tacticalgear
  • osvaldo12
  • normalnudes
  • cubers
  • cisconetworking
  • everett
  • GTA5RPClips
  • ethstaker
  • Leos
  • provamag3
  • anitta
  • modclub
  • lostlight
  • All magazines
    •