Yayyy first PR merged
Seeing how far I can push retend's universal JSX renderer, ala opentui
Terminal UIs are really really cool, I can see why people like them.
I wish I was here more often.
Dropping the model less than 10 minutes after Anthropic announced 4.6 was objectively funny
Claude Code is like a genie that literally interprets your wishes until you regret it. Claude + Git is like a genie with an undo button
And that is why agentic coding is the first agentic thing that works
Lol I use this for transition speeds
--fast
--faster
--fastest
--bit-faster
--much-faster
--slow
--slower
--slowest
Niceee!
Many such cases
Play with it here: oluwasefunmi.com/playground/c...
Safari/WebKit has performance issues for reasons I don't even understand. I'll try to fix it tomorrow.
Mechanical Keyboard, made entirely with CSS transforms
Oh? Congratulations!
It's not DOM based
You can subscribe to @ryansolid.bsky.social on YouTube, the creator of Solid, he does really detailed 6 hr streams on everything related to web performance and framework API design
Idk, I am going to call that into question. I don't think diffing is slower. Recreating DOM nodes is VERY expensive.
But this is very impressive ngl, especially the SSR support. I'll try it out the second I get the chance.
I'm thinking he got hacked? Seems a bit bizarre
I have bad news
Interesting.
I wonder though, if there is no diffing and every update reruns the return function ( like in Remix), does this mean the DOM nodes are destroyed and recreated on every update?
Oh come on! 😑
I spent a whole month recreating the overscroll stretch effect on Androids because it didn't trigger on nested divs
Should have just waited.
Play with it here (doesnt work on Firefox yet): oluwasefunmi.com/playground/t...
Halo Marquee in CSS, using offset-path and backface-visibility
Okay boss
Thanks for the reply
For some properties, I get the error on the first animation, but its gone when it replays. Is this expected behavior?
So clip-path, for example, is hardware accelerated, but not always?
This is useful and I will be using it immediately
I'm only animating accelerated properties (opacity, clip-path, transform, offset-path, etc) in css
But I get "Composing failed, unsupported property" for most of them in Chrome devtools. Is there an error in my understanding
cc: @bram.us @kevinpowell.co @chriscoyier.net @nerdy.dev
You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed?
The solution is simpler than you think.
With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳
I did this! 🤠
If you make the content sticky, use grid-area to do some ::after tricks and add scroll-timeline animations, it looks even cooler, with zero JS required.
Excited to see where the web is going.
It's actually pretty bullet proof!
The holdout is Firefox, because its scroll snapping is a bit too slow but it works nonetheless
Try the interaction out here! I want to write a blog post on this later on.
Demo:
oluwasefunmi.com/playground/p...
Each product image is wrapped in createUniqueTransition(), so repeated instances automatically dedupe and create the shared element transition. (write your own framework guys)
I would have used View Transitions instead, but then going backwards wont work.
developer.mozilla.org/en-US/docs/W...
Found this drag-to-dismiss on X. It can be done on the web with IntersectionObserver, grid-area and touchend. No manual pointer tracking.
I tried using scroll snapping but it was *bad*. Mimicking the gesture with .scrollIntoView feels nicer.
