Chris Johnson

Photography, UI, UX, and Full-stack development with a dash of Vue.js.

[jhey ʕ•ᴥ•ʔ @jh3yy]

JavaScript && CSS Tip! 🎞️

Need to do something or detect when a bunch of CSS transitions/animations end? 📽️

You can use document.getAnimations() 🤙 and await the finished Promises of those animations 😎

const animations = document.getAnimations()
.map(a => a.finished)
await Promise.all(animations)

A handy but often overlooked JavaScript API 🤙

Pretty cool if you need to hook into some staggers or places where you aren't using WAAPI, etc. ✨

Take this demo. It's toggling an attribute on click. That could fire any transitions/animations defined in our CSS. We use getAnimations() to grab the animations and use a Promise so we know when they're all finished. You could even filter by the animation name, target, etc. ⚡️

Check the console out for the demo 👀

@CodePen link below! 👇

[Chris Johnson @rebzmedia]

Working on a site and enjoyed making this headline transition for text using CSS. Most of my coding days are spent building applications and interfaces, not often I get to play around like I used to.

[Chris Johnson @rebzmedia]

Posted some photos of the Namba Yasaka-jinja shrine to my Instagram.
https://t.co/hQMJpprEY2 #photography

[Chris Johnson @rebzmedia]

A few photos from Osaka Castle, taken on Nov 11th around 11am. Posted more photos on my Instagram. https://t.co/Q1JVez9299 #japan #photography

[Chris Johnson @rebzmedia]

I don't give my Account here any love and I've been around since 2008. Currently working through my photos from Osaka Castle, recently in Japan for 3 weeks; found this cute couple while there. Started updating my instagram. https://t.co/hQMJpprEY2 #photography #Japan #osaka

[Chris Johnson @rebzmedia]

@heyJTK I genuinely thought you were holding up a miniature pie with your index finger.

[Chris Johnson @rebzmedia]

@heyJTK You've got your phone out while IN the theater?! No no no no no.... 🚩

[Chris Johnson @rebzmedia]

First time trying out @nuxt_js in years. Fresh install... and the project is practically empty? No folders for pages, layouts, etc. Going through docs I see example sandboxes, when attempting to replicate 1-to-1 it does not work. Am I getting bad installs?

[Chris Johnson @rebzmedia]

@MaOberlehner Have you approached this concept of yours again in Vue 3? Attempted this in Vue 3 and it appears the template does not get utilized. Have to define a render function in the custom export.

https://t.co/o5nCGrZxCG

[Chris Johnson @rebzmedia]

@heyJTK Why do you use Chase Travels?

[Chris Johnson @rebzmedia]

@antfu7 Is it “the best” method for doing this? Maybe not… but it works flawlessly for our application.

[Chris Johnson @rebzmedia]

@antfu7 Normally I’m against mixing UI with utility functions, but having this Dialog wrapped in Pinia allows us to pull it into our utility functions for validating models and crud operations.