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.

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

PDF Creation Station WordPress Plugin

This WordPress plugin allows you to build highly customizable PDF documents from any combination of pages and posts, or add a link to any post to download a PDF of that post.

This WordPress plugin allows you to build highly customizable PDF documents from any combination of pages and posts, or add a link to any post to download a PDF of that post. The UI is written in JQuery, the backend uses the open-source PHP library, TCPDF, for PDF generation. For source code, more info or screenshots, visit the PDF Creation Station download page at WordPress.org. You can also search for it in your WordPress admin’s plugin repository.

This image is of the settings page that allows you to customize the PDF and the link that is automatically displayed on every post.

Not pictured is the Tool page, with many similar options, that allows you to compile numerous different pages and posts into a single, highly customized PDF archive. Also not shown is the HTML insert fields and the list of 20 shortcodes you can use to insert headers or other post data.

You may also want to check out a PDF generated by Kalin’s PDF Creation Station. This one is this entire blog up until this point.

Kalin's Post List WordPress Plugin

This WordPress plugin creates a shortcode, PHP snippet, or widget for placing highly customizable lists of posts, pages, or attachments into your post content or theme, built in PHP and JQuery.

This WordPress plugin creates a shortcode, PHP snippet, or widget for placing highly customizable lists of posts, pages, or attachments into your post content or theme, built in PHP and JQuery. To look at the source code or get more information, go to the download page on WordPress.org, or search for it in your WordPress admin’s plugin repository.

You can see this plugin in use in the right sidebar of KalinFlash.com. You may notice when rolling over the items in the “Recent Additions” widget, you’ll get the post excerpt as a tooltip, which can’t be done with the regular recent posts widget. The “All Portfolio Entries” is another example of this plugin’s widget feature. There are many options for which posts to show, and you can write your own HTML, CSS, and even JavaScript, totally customizing the display of the lists.

Here’s another example, using the shortcode feature instead of a widget. This is a dropdown list of every portfolio entry on this site, organized alphabetically by title instead of chronologically. You could even get crazy if you wanted to and show the post excerpt whenever an item is selected.

Another example of this plugin exists on every portfolio entry, at the top, where it displays “year”, “technologies” and “involvement”. These three items are custom fields applied to the posts. Technically this isn’t a list. This is an example of Post List set to “none” mode, where all the internal shortcodes refer to the current post instead of the items in the list.

And here’s a screenshot of the main shortcode creation page:

Screenshot of Kalin's Post List settings page

Here’s another example, a CSS based table that displays all posts from the “Flash” category in a random order.

Easy Edit Links WordPress Plugin

This is a simple WordPress Plugin written with PHP and JQuery that adds a convenient little box to your page/post edit screen that contains a list of all pages, posts, tags, categories and links, with edit buttons for each and a link to the actual live page for easy copying and pasting.

 

This is the section created on the page/post edit screen

This is a simple WordPress Plugin written with PHP and JQuery that adds a convenient little box to your page/post edit screen that contains a list of all pages, posts, tags, categories and links, with edit buttons for each and a link to the actual live page for easy copying and pasting (Google Chrome and Safari users can even drag and drop). This plugin contains a self-caching feature so that the HTML code does not need to be recompiled every time the box is displayed, making it surprisingly light-weight.

For more information, or to get the source code, visit Kalin’s Easy Edit Links Download page at WordPress.org, or search for it in the plugin repository of your WordPress admin.

Here’s a screenshot of a portion of the settings page, giving you the ability to drag-and-drop to reorder items along with some other options regarding what to display.

Easy Edit Links Settings Page Screenshot

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.