CSS Animations

So for some proof of concepts I recently created some animations using css. What would have in the past required javascript can now be done with css in many cases. Mozilla has a great overview and details on using css animations

In one animation I wanted an svg to rotate in the background and in another I wanted an element to slowly glow on and off. In both cases it helped to have a tool to do the basic animation. I have been using Figma for the last year and there are some plugins that will generate css animation code. Figmotion seems to be the most popular, but I liked Motion a bit better as it made it easier to select items in the hierarchy of your frame in its left side panel.

Unfortunately, Figma itself does not support viewing animations in the editor although you can save them in the GIF format that can then be played in the prototype player. Using Motion you can export it as an animated gif and then drag that file back into your Figma file. If you are using the animation else where as I was there are several other export options including CSS, which is what I needed.

I then took that css and played around with it more in codepen.io. You can find lots of other folks css animation experiments there as well.

Xcode: Apple’s Confusing App Builder

So I have dabbled in building apps for Mac / iOS over the years and it continues to be one of the most confusing and un-Apple like experiences. Now I do not consider myself a good developer or I may not even rise to the level of a bad developer, but I can write code. I have mastered CSS, HTML, and have been able to build custom web apps in PHP, ASP/ASP.net, PERL, and JavaScript. I have also learned how to write queries and manage the basics of MS-SQL, MySQL, Postgres severs.

Yet, every time I start in on Xcode it is just a hodgepodge of UI and code. Sure there are starter bundles, code look-up, and contextual help, but there is nothing intuitive about building an app in Xcode. Compare this to visual studio from Microsoft and it is completely different. Sure Visual Studio (the full app not the VS Code) is also very complex, but I was surprised at how easy it was to add a button to the UI and then the write code for that button.

Wrote some code

It has been a while since I last wrote some code. Not that long, maybe a month or two, but long enough that it felt refreshing. I’ve been writing a lot of reports, and emails of course, and creating a lot of mock-ups in Figma that I have not had time to code. Unlike Axure, Figma does not allow one to add code to a prototype. This is something, I wish I really could do though. It would be great to add both CSS and enhance/customize interactions with Javascript.