Samsung's Milk Music at Smartek21

In December of 2014 I joined a small team at Smartek21, JavaScripting for Samsung’s Milk Music web player. We used jQuery, Backbone.js, Underscore.js and Require.js, in an MVC structure to communicate with a custom API which interfaced with Slacker’s API to get most of the data. Milk Music is basically Slacker Radio but is Samsung branded and has a better user interface–at least in my opinion.

The application was mostly complete when I began but I helped solve many bugs and added a few minor features that were necessary for production release. We worked with the Samsung team in California through daily conference calls and instant messengers. In February 2015, Samsung decided to move the whole team to California. Since I didn’t want to leave Seattle I had to quit after just two months, despite how much I enjoyed working with this team.

Milk Music web player was launched in March 2015. You can use the player at milk.samsung.com. You will need to sign up for a free Samsung account.

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.

Wacky Words Facebook MMO

A comedy word-based Facebook massive multiplayer game built on Flash Builder and Google App Engine.

This is a funny word massive multiplayer role playing game built on Flash Builder and Google App Engine. Create funny combinations of words from random choices, then write out a description and try to sell your idea to investors. The more ridiculous the better. Gain cash as you get votes and investors, gain levels and buy skills. My future plans were to be able to buy naughty words, upload videos and images to  further illustrate your concept or start rivalries with other players or friends.

I never finished the project and since I stopped working on this project, Google App Engine removed support for Python versions below 2.7, so my app stopped working. It would take a bit of work to migrate this project to 2.7 and if I ever return to this I want to re-do it in AngularJS anyway so I decided to focus on other projects.

Even though it doesn’t work, and the folders are still a bit disorganized, you can still see the code on github: https://github.com/kalinr/Wacky-Words-Facebook-MMO.

Game Landing Page

This is a landing page I built with JQuery and CSS for Big Fish Games.

Here’s a link to a landing page I built with JQuery and CSS for Big Fish Games. Click on the large buttons to select a game to load over the video in the main Flash div. The list of related games at the bottom as well as the ‘try it’ link will update accordingly. I used JQuery’s animation function for the opening drawer, browser scrolling, and the animated glow.

Below is one of the many Flash banner ads I built using the AS2 GreenSock tweening engine that linked to this landing page.

http://kalinflash.com/wordpress/wp-content/uploads/2011/06/landing/300x250_francis.swf

Appcelerator – Batch File Actions

This is a tool that allows you to parse through folders and files and commit an action (move, delete, copy, rename) on any file and/or folder that matches certain criteria. You can even enter a regex to select items. This is written in JQuery and HTML, utilizing the Appcelerator engine to turn it into a desktop app that runs on Windows, Linux or Mac.

This is a tool that allows you to parse through folders and files and commit an action (move, delete, copy, rename) on any file and/or folder that matches certain criteria. You can even enter a regex to select items. This is written in JQuery and HTML, utilizing the Appcelerator Titanium engine to turn it into a desktop app that runs on Windows, Linux or Mac.

At this point the app is functional, but is still not tested enough to be reliable. I never got around to finalizing it or using it for my own purposes, though I would still like to someday. You can download the actual app and test it, but be certain not to let it near sensitive files. You can also download the source code, but you will need to have the Appcelerator development environment installed, and I can’t guarantee it will still work with newer versions of Appcelerator.

Google App Engine Date Sync

This is a little app built with JQuery and Python on the Google App Engine, designed to hold values that could be loaded when needed from Flash banner ads.

This is a little app to hold values that could be loaded when needed from Flash banner ads. I worked with one other developer, but wrote most of the code, using Python and JQuery, with Google App Engine for the backend.

The idea is to enter start and end dates for your campaigns, so that your banners can know what information to display, reducing the need for re-building every time you need to update a promotional period or something. Also included were the custom fields, where you could update any kind of information on the fly.  I also built AS2 and AS3 Flash APIs that could be used to load the information. The video here is of the interface where you could enter all the values.

KalinPlayer Android Music Player File Browser

In 2009 I developed a folder browsing music player for the Android platform.

In 2009 I bought a G1, back when it was the only Android phone available. Immediately I became frustrated because none of the available music players were capable of recognizing my music because I didn’t have perfect track information embedded on my files. They all gave me one pool with hundreds of songs named track1, track2, track3… Or they would have multiple different entries for the same band. For example: AC/DC, AC_DC, AC DC and ACDC.

To solve this, I developed KalinPlayer, which I used every day for a year and a half as my music player. I never got all the kinks worked out to the point where I felt comfortable releasing it to the public, but it worked for me and that’s what was important.

I did intend to finish and release it, so I built a screenshots and instructions page to show the different features and an explanation page but I built them on a wiki site that no longer exists so my help pages are all gone.

Disc Golf Access VBA Database

In the summer of 2003 I built a personal database in Access and VBA to keep track of my disc golf scores and my collection of frisbees.

In the summer of 2003, just for fun, I built a personal database to keep track of my disc golf scores and my collection of frisbees. Below you can see the table structure of my disc golf database.

 

Shows relatationships of tables and fields. Everything is properly normalized.

 

The next image is of the main page of the interface system, the Add New Game form with one of the popup forms displayed below that. Again, you can hover over portions of the image to view tooltips describing the functions of the various sections. Once you understand how I intended to use the database, you’ll see that it would have been a very efficient interface system…

 

Add new game form. Main form in my disc golf database.

…however, I wasn’t able to finish the database by the new school year. It turned out to be a bigger project than I had expected. However, for three months work while still learning VBA and reading a 900 page programming manual cover to cover, I feel I made good progress, probably more than halfway to completion of the total project. I learned a great deal about programming and came to realize how fun it can be.

The data entry systems are complete, save for a couple minor details. What remains is the data retrieval systems. Unfortunately I won’t finish this database, as I’ve found too many other programming and web development interests, but I feel it can still be an example of my ability for both programming and interface design. If you would like to download the database and explore it, or view the code, you will need MS Access installed on your computer. Start with the “frmAddGame” form.

 

Bad Kitty Poster

A Coworker tried to grab her cat while it was having a standoff with a raccoon. The cat bit her hand and tore her tendons and she wound up missing six weeks work, so I made this poster.

A Coworker tried to grab her cat while it was having a standoff with a raccoon. The cat bit her hand and tore her tendons and she wound up missing six weeks work, so I made this poster.