My Leeds Hack 2 Project

Thought I would write a blog post about what I built in 24 hours for Leeds Hack 2 last weekend. I kinda got distracted last week and not had the time to write this post.

You can look at all the projects that people finished over on the Leeds Hack Website.

So what did I write

I decided to write something that I had been pondering about for a while. It’s called Spotify Roulette and revolves around the idea of crowd sourcing a new artist or area of music to listen to.

Originally it started off with me posting on Twitter quite a while back asking for something new to listen to, to which @Stanton responded with Hybrid. (I can’t find the original tweet on twitter but it’s here on Spotwitfy) Which are actually quite nice to listen to and I have a nice Spotify playlist to listen to.

I was wondering if there was a way to automate this.

So thru the combination of the Twitter and Spotify Meta Data API’s, means I can post out to Twitter, await a response, parse out the Artist and then pop open Spotify with a random track by that Artist and if the requester wants a playlist can be generated, and thru a limitation in Spotify, drag and dropped into Spotify to listen further to the Artist.

In short

In short its pretty straight forward.
Just a handful of calls to a couple of different API end points to get an Artist ID from the name, then their albums and the tracks on these albums. Chuck in a little GeoIP to hopefully check the tracks are available in the requesters’ region.
Grab the first track, pop open Spotify and grab another 10 tracks to make a playlist.

Finally I used Nerf Guns to help demo! Russian Roulette stylee.

Responses

People on Twitter can either response with text, an artist which we parse out the @user and the hashtag word. Then look that up on Spotify.
Or a response can be either an HTTP open Spotify link or a Spotify protocol link. Either to the artist page, track or album.
if it’s the Artist, I can parse out the artist ID and look for albums and tracks.
Currently not playlist urls, but that’s easy to implement.

Technology

So we used,

  • Twitter API, using @Abraham Twitter oAuth Library
  • Spotify Meta Data API
  • MaxMind GeoIP
  • jQuery and jQuery UI
  • Rick Astley
  • Nerf Guns

Give it a Go

Give it a go and offer me some feedback.
Watch out for Rick Astley tho. He likes to crop up every now and again….

It’s still a little rough round the edges in terms of theme/layout.

Spotify Roulette (http://spotifyroulette.com/)

Future

Hopefully if people like it and use it I can expand further.

Perhaps use Facebook to share playlists, or another way to crowd source a new artist. And if Spotify release a HTTP API for generating and saving playlists then incorporate that too.

WordPress and the Admin Bar

So WordPress 3.1 introduced the new admin bar. Essentially its another way to navigate around your WordPress Blog’s inner workings, the bar itself can be enabled and disabled both inside and outside the admin system, for I like to have it enabled on both the admin and non admin sides of WordPress.

The WordPress.com Stats Plugin makes quite good use, on the non admin side, by showing a graph of site visits over the last 48hours:

This led me to think about how to put my own links on, so I turned to adding the navigation from YourMembers to the admin bar (but in this case on Both Sides, admin and non admin).

Won’t show you a admin side one as it looks exactly the same 😛

Actually writing the code to make the YourMembers navigation be added to the nav bar, is actually relatively simple, since the admin bar itself has been written rather nicely in its own class.

Opening up the admin-bar.php file in wp-includes is a bit messy, but looking at the first function (_wp_admin_bar_init) shows the class function add_menus() and further down add_menu, so off I went to find them…. A quick grep later finds that is class-wp-admin-bar.php and from there just a matter of reading what add_menu wants….

<?php

	function add_menu( $args = array() ) {
		$defaults = array(
			'title' => false,
			'href' => false,
			'parent' => false, // false for a root menu, pass the ID value for a submenu of that menu.
			'id' => false, // defaults to a sanitized title value.
			'meta' => false // array of any of the following options: array( 'html' => '', 'class' => '', 'onclick' => '', target => '', title => '' );
		);

I went thru and checked to see where the other “normal admin” links were being added, the function add_menus in the same class file shows that. The key thing to be aware of is the use of priority on those do_actions (line 182 thru 194) in order to order the links, so needing/wanting the YourMembers links to be at the end I went for a sensible priority of 90 since the last normal admin was set to 80.

Then it was just a matter of setting up my own add_action on the same hook (‘admin_bar_menu’) and then globalising the pre existing class method and adding my menus to it.

Since it is a drop down menu, needed to add the top menu as a parent and then adding the child nodes.

Its quite a clever class since the class function of add_menu can handle both parents and childs at the same time with little fuss, as long as you pass it the right ID variables.

Heres a copy of my function:

<?php

function ym_admin_bar() {
	global $wp_admin_bar;

	if (ym_admin_user_has_access(TRUE)) {
		$wp_admin_bar->add_menu(
			array(
				'id'		=> 'yourmembers_adb',
				'title'		=> 'Your Members',
				'href'		=> YM_ADMIN_INDEX_URL
			)
		);
		global $ym_nav;
		foreach ($ym_nav as $page => $subpages) {
			if (is_array($subpages)) {
				$first = array_shift($subpages);
			} else {
				$first = '';
			}
			$id = 'ym_adb_' . strtolower($first);
			$url = strtolower($first);
			if (substr($first, 0, 5) == 'other') {
				$url = 'ym-other&action=' . substr($first, 6);
			}
			$wp_admin_bar->add_menu(
				array(
					'parent'	=> 'yourmembers_adb',
					'id'		=> $id,
					'title'		=> $page,
					'href'		=> YM_ADMIN_INDEX_URL . '&ym_page=' . $url
				)
			);
		}
	}
	return;
}
add_action('admin_bar_menu', 'ym_admin_bar', 90);
?>

There are a couple of funky bits in there due to the method we currently generate the nav items.
The essential bit to consider is the array passed to $wp_admin_bar->add_menu at the start (the parent element note, no parent key) and the $wp_admin_bar->add_menu at the end, specifying a child element.

The function ym_admin_user_has_access just checks to see if the user is of the correct level or not.

You might want to throw in a switch on is_admin() to return different navigational items depending on if you are in the admin or not.

I’m sure there is a lot more you can do with the class function but when I installed WordPress 3.1 and saw the admin bar and WordPress.com Site stats this was the first thing I thought of and implemented, tho why its taken me this long to blog about it I don’t know…..

Travels of a Commercial WordPress Plugin Developer 1

My job at the moment is updating and coding YourMembers, which is a commercial plugin for WordPress.

Recently I’ve been working on a method to Auto Upgrade the plugin, since commercial plugins cannot go on Extend, and there is no commercial equivalent. Extend being the WordPress plugin repository.

Commercial plugins get no nice little “Plugin needs updating Circle” on the plugins tab, or a nice little message on the plugins page, let alone access to the auto updater!

Which leaves us (commercial plugin devs) to write our own version checkers and hook in accordingly.

So now I have a nice little PHP class which will detect whether it can fwrite/rename and if not if it can FTP instead, much the same as the WordPress updater does.

Now this is all well and good, but I needed a method to download and unzip the new plugin file. Grabbing the file is easy, either file_get_contents (heaven forbid), or curl (yay for curl), and write the file (being a zip) to the web servers temporary directory and process from there.

Now the problem here is how to unzip. A Brief look at how WordPress does it seems to show it has three different methods of unzipping. So dump that.

Didn’t feel the need to use PHP’s ZipArchive class, since I don’t need to edit the zip, just extract its contents.

Off to php.net I go and I find some nice handy functions, and quite surprised to find that the zip_read function can handily recurs into directories within the zip file to return their paths/names. Mildly annoying at the time as I had gone and written a recur loop to go inside directories…. and got thrown a error, nice headdesk moment!

So basically the Zip functions, the basic ones of PHP, are actually quite nice, handy and useful!

Heres my code snippet:

<?php
class someclass() {
	private function unpack() {
		$from = $this->tmp_write;
		$to = $this->tmp_out;
		@mkdir($to);
		
		$zip = zip_open($from);
		if (is_resource($zip)) {
			$this->readzip($zip);
			zip_close($zip);
		} else {
			// failed to open
			$this->error = 1;
		}
	}
	
	private function readzip($zip) {
		$from = $this->tmp_write;
		$to = $this->tmp_out;
		
		echo '</pre><textarea style="width: 100%; height: 100px;">';
		
		while (FALSE !== ($file = zip_read($zip))) {
			$name = zip_entry_name($file);
			echo $name . "\n";
			if (!strpos($name, '.')) {
				// is dir
				@mkdir($to . '/' . $name);
			} else {
				// it recurs into directorys on its own!
				$item = zip_entry_open($zip, $file);
				$size = zip_entry_filesize($file);
				
				$read = zip_entry_read($file, $size);
				$fp = fopen($to . '/' . $name, 'w');
				fwrite($fp, $read);
				fclose($fp);
			}
		}
		
		echo '</textarea><pre>';
	}
}
?>

I just installed this code snippet plugin, which I might need to change its background colours…..

Any suggestions for code snippet plugins greatly appreciated!

#GSoC 2010 – My Applications

My GSoC 2010 Applications.

So for Google Summer of Code 2010 I’m applying for two Organizations, GeekLog and WordPress.
Both are PHP based, and are primarily MySQL.
Both meet my skill sets and use Object Orientated Programming, so hopefully anything I learn/develop I can fold back into CarlyonCMS. Win 🙂


GeekLog, I have applied to work on the Email Queue needs and Core Notifications, sending subscription emails and the like to end users. Email Queue I have knowledge of since LSRfm.com can only send 600 emails per hour… (Its a Spam Thing). So the LSRfm.com Megalist, sends upto 400 emails per hour. Subsequently this queue system is part of Carlyon CMS.


WordPress I am applying for two separate projects.

Taken from the ideas page, I’ve selected Trac Annihilation (still can’t spell Annihilation, thank God for spell checkers), and the Bugtracker.

Bugtracking I have experience on, having seen and worked on the Bugtracker for PHP for GSoC 2008, (woo go me I have bcarlyon [at] php.net as a email address (Update: Hmm it doesn’t appear to work anymore :sadface: (Update 2 I think they purged it when PHP moved to SVN over CVS))), which was good fun and a learning experience.

(As part of the WordPress application you need to document your application on a WordPress powered blog….)

WordPress, as a publishing platform, should lend itself easily to being adapted to become a BugTracker, since the main elements, like categories, posting and comments, already exist, simply moving a b(lo)ug post, from one category to another would make it open/closed/assigned etc.
The interesting part here would be the interaction with SVN, and the need to extra data from Commits or source files.

My other WordPress application for Trac Annihilation (got it right that time), involves working on and closing as many open tickets as possible, since with the advent of WordPress’es beta the number of tickets is gonna rocket.
Essentially this is just a matter of munching thru as many tickets as possible and closing them, after solving them.
Which would be good fun and a great learning experience.

I just hope one of the three accepts me, or I could end up with a Summer of nothing big to do…..

jQuery Coverflow, my First Plugin

My first jQuery Plugin: Coverflow

So I’ve been working on this for a while, based on a few googles searches (see this post for details.

Thru other posts on this subject I’ve chronicled my work, and youtubed a few videos, I’ve now deployed it and re factored it to a jQuery plugin. And fixed a bug so it works in IE as well as other browsers, was throwing a odd childelement error in IE8 of all things.

So, my jQuery Coverflow is live at the LSRfm.com Podcasts Page, I’ll probably be fiddling with the code locally to tidy it and make it better, but it works quite happily as a jQuery plugin now.

Heres how to use it on your site, if you are so inclined, stay tuned for updates :-).

The Plugin requires jQuery UI for the Slider, and jCarousel for the Flowy-ness, it relies on the jQuery stock animation suite as well.

In the head

<script src="/path_to_js/jquery.coverflow.js" type="text/javascript"></script>

In the Body

<ul id="coverflow">
        <li><a href="/some_link/"><img src="/someimage.png" alt="A Title" /></a></li>
</ul>

<script type="text/javascript">
        jQuery.coverflow();
</script>

Like with any jQuery Plugin you can pass it some options/settings.

  • total_items – total items in the carousel/flow, if 0 auto determines
  • sider_start – the start point, leave null for middle, or number for that number or rnd for random
  • targetflow – id of the ul with the items in
  • sliderflow – id of the div to hold the slider
  • titleflow – id to hold the title elements
  • largesize – size as a int, so 200 for 200px, of the image currently in the middle of the flow
  • smallsize – smaller size
  • speed – speed in microseconds so 3s is 3000
  • scroll – leave this as one
  • visible – how many items to be in the viewing pane at once default 3
  • animation – animation speed, if 0 takes it from speed

Essentially all the needs to be set is the names for targetflow, sliderflow, and titleflow, tho if you use the default names (coverflow, slider, coverflow_title) you don’t even need that.

Things I need to add to the plugin.

Auto generate the slider div if not present and add the relevant css to it.
Do a check to see if the item about to be highlight contains an image or not, and animate accordingly.

In theory this can support any type of content but an item of:

<li><a><img /></a></li>

works best.

You can grab a tar of the file at Coverflow_001 (3080 downloads )

Questsions? Feedback? Suggestions?

Comments below 🙂

Update:

Currently there is a small bug where in some browsers (so far Chrome and Safari), post load and setup, its not sliding to the desired element, the slider is moved, but the carousel does not.