CSS Playtime

I wanted to get some practice with CSS and Sass and learn CSS animations, so I started fiddling around in a gihub repo. I didn’t set out to create anything specific but wound up making a simple JavaScript animation engine that cycles through a list of objects representing a series of animations, initializing each one on a timer. I made a jQuery and a vanilla JavaScript version. This plunker uses the vanilla version.

I wanted to get some practice with CSS and Sass and learn CSS animations, so I started fiddling around in a gihub repo. I didn’t set out to create anything specific but wound up making a simple JavaScript animation engine that cycles through a list of objects representing a series of animations, initializing each one on a timer. I made a jQuery and a vanilla JavaScript version. This plunker uses the vanilla version:

Please forgive the ugly nature of this animation. I am not a designer so I decided not to spend time making it look good. I have a lot of experience matching the designs that other people come up with, but designing myself is not my strong-suit.

This engine would work for an animated banner, allowing you to pull in all the important data for the animation in a simple JavaScript object or JSON string. All you would need are your CSS animations.

I made a couple of my own CSS animations, but many of them came from animate.css, though I did change the ‘tada’ animation so that it utilizes Sass preprocessing to handle vendor prefixes a little better. I didn’t bother making this change to all the animations, since I already learned the things I was shooting for.

Frustratingly, Sass does not support interpolation on @import directives. Otherwise I would have set it up to iterate through a list of only the animations we wanted so we could set up all the vendor prefixes for them in one loop. We could have a big Sass file with tons of animations but the final CSS file would only contain the ones we actually want. Instead, I will need to use a preprocessor mixin like Bourbon or Compass if I ever use this in the real world.

Accretive Tech, Streamate.com

streamateFlashUserClient
Our main user-facing Flash client.

From August 2011 to July 2014 I worked for Accretive Technology Group, maintaining their flagship product, a live streaming adult entertainment platform, duplicated over 1500+ websites. I started as a Flash ActionScript developer, maintaining and adding features to their performer client, of which I don’t have any screenshots, as well as the user client shown in this first image.

You can also see the user client by going to Streamate.com in a desktop browser and clicking on any performer. Warning: this is an NSFW site. The screenshots on this page are from the non-nude section.

Within the first year I worked with one other developer to convert our Flash user client into a mobile client for use on the few Android phones that supported Flash. Unfortunately I don’t have one of those phones so I don’t have a screenshot of that either.

Horizontal version of our mobile client shown on a phone.
Horizontal version of our mobile client shown on a phone.

After about a year I moved over to developing the model portion of the MVC framework for an HTML5 client designed for use on iPad, iPhone and other mobile devices. We focused on iOS because Apple users spend more money, but made sure everything worked on various Android devices as well. We built the app in jQuery and Spine.js, which is an MVC JavaScript framework similar to Backbone.js. I also wrote about 70 unit tests in QUnit and for future maintenance, had to learn a bit of Sass.

 Vertical version of our mobile client shown on a phone.
Vertical version of our mobile client shown on a phone.

Shortly after we finished this we began converting it for use in a couple different parts of our TV station.

After we finished the TV station, we moved on to building a redesigned Streamate. I took charge of converting the Flash client to the new design, then moved on to random tasks throughout the refactoring of our code.

In the end, I was doing mostly maintenance, bug hunting and adding small features all over the site, my time split between ActionScript, JavaScript, HTML, PHP and CSS. I finally decided to resign because it was getting to the point where I wanted to work on something different and wanted to take a break from development for a few months.