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.

Network Nightmare

The day started out with not being able to print something to my networked printer. I had upgraded my cable internet last week and had also upgraded my wifi router. I was previously using two wifi routers to provide coverage for my small house as my neighbors wifi signals were interfering. At any rate, I updated the wifi connection for the printer as well as also have it hard wired. Everything seemed to be working fine at the time, but I did not actually try to print anything. So of course it does not work now when I need to print.

Continue reading
Posted in general | Comments Off on Network Nightmare

Upgrade to Big Sur

So I upgraded to Apple’s Mac OS Big Sur. I have to start out by saying that I feel Apple has been slipping in recent years with basic usability. The whole flat UI thing sucks not just in my opinion, but also in usability testing I have done with designs that were “flat”. Also I am not sure who started it, but between Apple, Google, and Microsoft all hiding scroll bars, it’s really a annoying trying to notice when there may be more on the screen. The first thing I look for now when updating OS is the option to force scroll bars to be visible.

Having said all that, I have to say that I generally like the look and feel of Big Sur and also liking some of the new features. The finder windows do feel cleaner and more refined. The new control center is interesting, but I have yet to really use it. There are new privacy and security measures which is good to know that they are improved. Overall though it seems just OK. I am not wowed by anything just yet, but also there have been no major glitches as well. I do really appreciate that Mac OS upgrades are free now. If there is anything else that pops out over the next week, I’ll be sure to make note here.

iPhone Activation Hell

So my company just recently issued iPhones (or Android if preferred) to all employees. The devices were sent direct to our home (or office if preferred), with no IT involved. As part of the setup the devices will be automatically registered with the company and a special company app installed. The only problem is it did not activate with the cellular plan. So now I have a phone with no number that can only connect to wifi and I have no way to activate the cellular because it asks for a SM-DP+Address code which I do not have. It refers to a QR code, but there was no QR code included. I am stuck until I can call in to the company help desk to get this straightened out some how.

[update] So finally got the work phone activated. Took a week for them to send the information to the service provider. The company app is also now installed and has been updated several times now as it is rather unstable. The app is quite poorly designed, which makes me sad as a digital product designer myself. Ah, well things are working and that is enough for now.

Posted in general | Comments Off on iPhone Activation Hell

Editing text on FB

Recently, I was given the updated UI for the web version of Facebook. I have long stopped using the mobile version. One nice thing is the new dark mode now. Honestly, that is all that really appealed to me so far. However, one big pain is the comment box is almost completely unusable. There is a noticeable delay typing and there is some strange issue where it adds a double space after every word. I am writing this post just to check that this is not a problem in other web apps and I am not having any of the problems writing this in the WP editor. So this is a FB problem and it is a horrible experience.

Posted in general | Comments Off on Editing text on FB

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.