Google Music, I mean Play, as an App on Windows 7

I have been using Google Music ever since I was able to get an account. I have already synced all the my music to it. It works great in my browser. I have one issue though. This:
Multiple Tabs
It becomes just another tab in my browser. It could even be just another tab in just another instance of Chrome. This is a pain. A song I don’t like comes up and I want to go to the next or my phone rings and I need to pause the song. It is a firstworldproblem, but annoying nonetheless.

I wanted to make it more of an app. It should have its own spot in my taskbar. Because I run Windows 7 it should pinned as well so it is always there.

Chrome to the rescue

Google Chrome makes this easy. Navigate to your Google Music page http://music.google.com. Click the little wrench > Tools > Create application shortcuts. You should get a window that pops up letting you choose where to put the shortcut.Google Music Application Shortcut

It will now work just like any other application and have its own spot in your taskbar.

Facebook SDK with Backbone – pt 3

Download the src(github)
View the demo

I am back to finally finish this off. We are going to dive into Backbone and how we use it to create this application. I want to note up front that this is not a great tutorial for Backbone. The reason being is that I don’t use any of the model aspects of Backbone. I use it for event binding and creating views. In this context it makes sense as our model is Facebook. Another thing to note is that this uses Backbone version 0.5.3 when as of right now it is at version 0.9. It looks like it should work after being upgraded, but I haven’t tested it yet. Well let’s get started.

Finally we are getting to the backbone of this app

Backbone

Backbone is a javascript library that creates an MVC(Model, View, Controller) structure. Earlier I said this was not a great tutorial and that is because we are only using the view and controller portions of backbone. The model is coming from Facebook. We probably could abstract this out and create a backbone model for Facebook, but I chose just to use the Facebook API directly. Continue reading “Facebook SDK with Backbone – pt 3”

Facebook SDK using only javascript – pt 2

Download the src(github)
View the demo

I know it has been awhile. Christmas came and proceeded to fill up a lot of my time. I am back, though, to finish this tutorial. We left off at the HTML skeleton. Remember this is just an outline of where we are going to put our real content. This content we will fetch from Facebook through Facebook’s SDK and then throw it up on the screen. Let’s get on to using the Facebook JavaScript SDK.

This part will cover setting up the Facebook SDK, initializing the SDK, and getting users authenticated.

Facebook SDK setup

We covered this in the last post, but I will touch on it again. We are going to use XFBML. Facebook used to have FBML, but they have deprecated this. We use XFBML to create the login button. If you look at Facebook’s Social Plugins you will see that you can implement many of them through the javascript SDK and XFBML. The last post had the old way of doing it, but here is the new updated way (it’s not much different):

<html xmlns:fb="http://ogp.me/ns/fb#">

Continue reading “Facebook SDK using only javascript – pt 2”

Facebook SDK using only javascript – pt 1

Download the src(github)
View the demo

This is a continuation of my last post. My re-immersion into NES games started me down the path of an 8-bit web browser. This project is not a full 8-bit browser, but rather just viewing Facebook. It uses javascript and only javascript. There is a skeleton of HTML elements for javscript to build the content. It uses the Facebook js SDK,  backbone.js is used to build the content, pixelize to pixelize the photos, and jquery for ease.

It uses javascript and only javascript

Setup your Facebook App

First thing you will need to do is to create an app through Facebook. Start at the Facebook Developers site. There will be a button to create a new app. A modal window will popup. Fill this out.You may have to play with the App namespace to find something that isn’t taken. Continue reading “Facebook SDK using only javascript – pt 1”

Pixelize photos with HTML 5 canvas and Javascript

Download the src(github)
View the demo

This library came about because of a my purchase of an NES. It lead me to wonder what would a browser look like on the NES? The first thing would be that all the photos would be pixelized. I wanted to use the canvas element of HTML 5. I didn’t want to go through every pixel of the photo to do the pixelization, I just wanted to shrink the image down and then blow it back up to create ‘natural’ pixelization.

What would a browser look like on the NES?

The canvas element

Canvas is a new element that was part of HTML5. Canvas opens a lot of doors in HTML5 and there are a lot of amazing examples of what is possible with the canvas element, but we are only using a small portion of it’s capabilities. We can add a canvas to a web page very easily

<canvas id="myCanvas" width="500" height="500">Fallback content</canvas>

We can now manipulate it with Javascript. First thing is to get a reference Continue reading “Pixelize photos with HTML 5 canvas and Javascript”

Facebook SDK inside of Zend Framework Tutorial

Download the src(github)
View the demo

This tutorial should show you how to take a Zend Framework project and easily add the Facebook SDK to it. You will be able easily make calls to either the Javascript or PHP SDK and also use Facebook’s new Graph API. Let’s get started. Don’t worry if you don’t have Zend Framework or don’t want to use it as I will cover how to do this outside of Zend as well.

It doesn’t matter if use Zend or not, you can follow along and use the code in your project as well.

Setup Zend Framework

First thing to do is download the latest version of Zend Framework. It is a free download, but you will have to create an account. If you don’t use Zend Framework (ZF from here on out) you really should. It is very extensible and versatile. I won’t continue to try and sell you on ZF (and most likely you already are using it).

Next thing to do is setup a project (of course if you have a project just use that). I won’t go into how to do this, but there is a great quickstart tutorial on Zend’s site that is a great introduction if you haven’t used ZF before.

You should now have the default ZF page if all is working correctly.

This should be familiar to you.
This should be familiar to you.

Download the Facebook SDK

Continue reading “Facebook SDK inside of Zend Framework Tutorial”