how to make #CSS view transitions swoop or have motion blur
or how I learned to help view transitions not always go in straight lines
β€· nerdy.dev/swoop-there-...
@david.click
Web dev with an accidental background in design and branding. / Dev web avec un parcours accidentel en design et image de marque. / Elon stinks. / π³οΈβππ¨π¦ https://guimauvecreative.com
how to make #CSS view transitions swoop or have motion blur
or how I learned to help view transitions not always go in straight lines
β€· nerdy.dev/swoop-there-...
Adobe Animate/Flash to Rive. We've been making progress on our converter. This one is an old Formula 1 file from our team.
I noticed a sudden spike in the number of weekly downloads β from 2k to 500k β of my package to calculate the CSS specificity of a selector.
www.npmjs.com/package/@bra...
Turns out the wonderful jsdom started depending on it a week ago π
www.npmjs.com/package/jsdom
Geolocation Element Demo
Less JavaScript, more HTML.
The new <geolocation> HTML element handles permission states and blocked permission recovery for you. Just add the tag, listen for the location event, and let the browser handle the restβ goo.gle/4pPXZFK
I've been experimenting with an upcoming CSS feature called border-shape lately.
It's really cool what you can do with it: lots of practical applications + it opens a lot of doors for non-rectangular UIs!
Try it in Canary w/experimental web platform features on, & read more:
una.im/border-shape
What do these API have in common?
* WebTransport
* Keyboard Lock API
* Grid Lanes w/ flow-tolerance
* Threaded scroll-driven animations
* WebAuthn PRF extension
* ReadableByteStream
* Blob.stream() with BYOB reader
* Name-only @container queries
* min(), max(), and clamp() in <img> sizes attribute
Animate/Flash FLA to Rive importer
using FLA sample files that come with Animate
The CSSWG just resolved to add this to the spec π₯³
github.com/w3c/csswg-dr...
@custom-media --motionOK (prefers-reduced-motion: no-preference); @media (--motionOK) { transition: transform .3s ease; }
#CSS `@custom-media` available behind a flag in Firefox Nightly π€π»
Lovely syntax, just lovely.
nerdy.dev/custom-media
And yet, the only way I was able to build this UI was by giving the AI the right answer, telling it to use subgrid instead of `display: contents`.
If I didnβt understand the mechanisms and limitations of CSS Grid layout myself, I wouldnβt have been able to provide this guidance.
Anime.js 4.2.0 is out!
π§© All modules can now be imported individually with subpaths
π¨ CSS variable values support
πΉ Simpler spring API with bounce & duration params
π More WAAPI built-in easing functions
ποΈ And an easing editor (animejs.com/easing-editor/)!
Plus tons of fixes and improvements!
My favourite CMS gets in bed with my favourite framework. π₯³
ππ
Also, the new units like dvh, lvh, etc. Were they not supposed to help size things according to the viewport regardless of floating bars? I swear thereβs nothing I can do that allows me to size an element full screen so that it covers underneath the bottom floating address bar. Whyyyy.
@craftquest.io @craftcms.com @travisgertz.bsky.social @brandonkelly.io Hey, missed my flight to Lisbon π Whatβs up with Craft 6 x Laravel? How long are yβall gonna keep us in the dark?
Announcing TresJS v5.0 π
Our proudest release so far. Declarative
@threejs.org for @vuejs.org gets a major upgrade:
β¨ WebGPU experimental support
π οΈ New create-tres CLI tool
β‘ Re-imagined context
π§ Refactored composables
Ready to build the future of 3D on the web?
Not a nitpick, but a praise: I had to setup Nuxt on a relatively limited CPanel setup last year and was extremely surprised that its native Passenger Fusion makes it as easy as it gets. Just gotta make a commonJS wrapper to boot the app. Preach π€
π have you ever _wanted_ to deploy a @nuxt.com site to some provider bc of their features/dx/price but decided not to because of a limitation in nuxt?
(would love to know even minor nitpicks or frictions)
Nuxt UI v4 it out β¨
It unifies Nuxt UI and Nuxt UI Pro into a fully open-source library with:
- 100+ components
- 10+ free templates
- Figma Kit for everyone
nuxt.com/blog/nuxt-u...
Is the world healing?
Iβve been wondering the same lately too. I had to work with WordPress again lately (against my will) and wanted to use the occasion to update my stack, but because of the current block based / file templates overridable by the database and such, I was wondering if there even was an ideal solution.
I saw a resignation / been fired(?) tweet from a dev employee right before this happened lmao. Please let it be that he put a bug to make it crash when he leaves π
IE was right all along
I'm delighted to announce my latest project
β‘οΈ blazing fast
π¦ built from scratch for devs
ποΈ offering full control of your environment
π° VC funding welcome
accept no imitations
Amazing read about vectorial blur and feathering from the Rive app team. rive.app/blog/how-riv...
More performant than other anim libraries out there! It beats Motion in 99% cases, WAAPI in lots of cases yet Julian added an api layer to facilitate its usage, and toes to toes with gsap - outperforming it in many cases like interacting with other libraries like three.js π₯π₯
Hey @romanmars.bsky.social, are you still learning about con law? Or are you tooβ¦ "immersed" in it since November that even talking about it over a microphone is just too depressing? π₯²
Anime.js v4 will be released next week, and there's never been a better time to become a sponsor. Major releases drive huge traffic spikes, so if you want to promote your product or company during v4 launch and new landing page unveiling, check out my GitHub sponsor page!
github.com/sponsors/jul...
It's not Baseline, but CSS-only carousels are coming to Chrome 135!
developer.chrome.com/blog/carouse... by @nerdy.dev
A screenshot of the application Hyperspace app that shows 38.72 GB potential space to be reclaimed on the disk of the user.
I read all the explanations about how this works, but it still feels like magic πͺ. Thanks for saving my disk's space @siracusa.bsky.social.