Categories
Development

Using YUI Get Utility to consume Flickr API

I wanted to pull photos from a Flickr account onto a site. The Flickr API is awesome and there’s a ton of libraries out there for using it. Unfortunately, cURL isn’t currently installed on the server, so the PHP libraries won’t work for this case.

So I figured I’d give the YUI Get Utility a try. The Get Utility provides a mechanism for attaching script and css resources – including cross-domain resources – to the DOM after the page has loaded. And this has worked really well.

Here’s what I did:

  1. Included the following YUI scripts: 
    <script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"><!--mce:0--></script>
<script src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js" type="text/javascript"><!--mce:1--></script>
  2. Then fetch the Flickr feed in JSON format using the Get Utility.var 
    objTransaction = YAHOO.util.Get.script(<url goes here>);

    Be sure that the Flickr REST call is set to output to JSON so that the Get Utility can consume it properly.  Append &format=json

  3. Then write a function to act on the JSON response from Flickr.  Here’s an example of taking the JSON response and outputting thumbnails of photos with links to the larger view: 
    function jsonFlickrApi(rsp){ 
 
    if (rsp.stat != "ok"){
 
     alert('no data returned');
 
     return;
 
    }
 
    for (var i=0; i<rsp.photoset.photo.length; i++){
 
		var photo = rsp.photoset.photo[i];
 
		var container = document.getElementById('container');
		var photosList = container.getElementsByTagName('ul');
 
		// create elements
		var photoItem = document.createElement('li');
 
		var photoAnchor = document.createElement('a');
		var photoImg = document.createElement('img');
 
		// set attributes
		photoAnchor.setAttribute('href', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg');
		photoImg.setAttribute('src', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_s.jpg');
		photoImg.setAttribute('width', '75');
		photoImg.setAttribute('height', '75');
		photoImg.setAttribute('alt', photo.title);
 
		// append to DOM
		photoAnchor.appendChild(photoImg);
		photoItem.appendChild(photoAnchor);
 
		photosList[0].appendChild(photoItem); 
 
		}
 
    }
 
    var objTransaction = YAHOO.util.Get.script("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=<insert_your_api_key>&photoset_id=72157594235977414+&format=json&per_page=60");

View an example

Categories
Development

Using DataSource URL with Google Visualization API and Spreadsheet

Spent a good chunk of the day figuring out how to work with the Google Visualization API DataSource URL from a Google Docs Spreadsheet.  It was a little tricky at first, but it’s not too bad once you figure it out.

First make a query of the URL using the built in Visualization API methods:

var query = new google.visualization.Query('http://spreadsheets.google.com/tq?range=&lt;your cell ranges go here&gt;&amp;headers=-1&amp;key=&lt;your URL info goes here&gt;&amp;gid=17&amp;pub=1'); 

ok, let’s break down the key variables in the URL above:

  1. tq?range=E2-G2Anything after the tq is a query written in the Google Visualization API Query Language.  It’s very similar to basic SQL.  In the case above it’s saying “Select the cells between the range of E2 to G2”.  A pretty basic selection, but you can make much more elaborate ones using the Query Language.
     
  2. &key<your URL info goes here> can be found in the URL of the spreadsheet that you’re pulling data from.
  3.  &pub=1Appending this variable with the value of 1 states that the data is public.  This is important if you want you data available to any web visitor.
You then make a call to the API using the send() function.
query_day.send(handleQueryResponse);
Then send method requires a callback function.  In this case we name it handleQueryResponse.
Below is a basic function that when called pulls a value from the spreadsheet and sets that value on a web page.
function handleQuery_dayResponse(response) {
  var data = response.getDataTable();
  var sampleText = document.getElementById('sample-text-div');
  sampleText.innerHTML = 'Enrollment  as <strong>Day ' + data.getValue(0,0) + '</strong>.';
}
This assigns the variable data with the value of the response formatted as a DataTable.  It then grabs the specific value from the DataTable, in this case there’s only one value returned so the column and row values are (0,0).  The getValue() function makes this really easy to do.

Check out a basic example.

Categories
Video Games

World of Goo

If you own a Wii then download World of Goo.  It’s a simple, yet addictive physics based puzzle game.  You move little gobs of goo from point A to point B.  Sound pretty basic, but makes for a very fun game.  I also found the humor to be very funny, especially the information superhighway stages.

The most amazing thing to me about this game is that it was made by two guys!  Recently it seems that you have to have at least an 8 figure budget to create a video game.  So to have a team of basically two able to churn out such a high quality game is really exciting to me.  It proves that with new avenues of content distribution it is possible to create and distribute a great game without having  a huge budget behind you.

Categories
Video Games

Mega Man 9

Mega Man 9

My brothers and I grew up on the Mega Man games back on the NES. Unwrapping the latest installment on Christmas Day always brought a good deal of cheer. So when I heard that Capcom was releasing an all new Mega Man true to the original sprite days of the NES, we just had to purchase it via WiiWare.

The game is true to the NES days. It has the same graphics we remembered so well, the 8-bit great soundtrack, and many of the enemies we enjoying shooting so much.  The new bosses are impressive, including Splash Woman, the first female boss robot. A truly great game that stays true to it’s 8-bit roots.

However, let me warn you. This is one of the most challenging games I’ve played in a long time. It’s just down right hard. I’m not sure if I don’t have the same reflexes I possessed in sixth grade or they just upped the difficulty, but it sure is a challenge. Despite the challenge, I do highly recommend you give this game a try. Especially if you played the earlier installments in the late 80’s early 90’s.

Categories
Development

Adding chat powered by Google Talk

Bioderma Medical Laser & Aesthetics wanted real time chat added to their website. I really wanted to find a solution that would be extremely easy for the site visitors (no leaving the site, nor having to download any plugins, or having to register or login) and easy and convenient for the client as well.  After researching many different options, I found that having the client set up a free Google Talk account and incorporating a chatback badge into the site was most effective.

The Google Talk account presents numerous advantages for the client:

  • it’s free
  • is a full featured IM client
  • can be accessed via an application or even through the browser
  • Google Talk is compatible with other IM clients
  • has a robust API
  • features are continually being rolled out for Google Talk
  • can be used on multiple devices (iPhone, etc.)

From the web visitors end, they just see a text bubble stating the status of the client.  Whether they’re available or not for chat, busy, etc.  If someone is available to chat all they have to do is click on the link and a chat session begins.  No logging in, downloading software, etc.  It’s very cool, and a great solution for incorporating real time chat into a website.

Categories
Development

Bioderma Medical Laser & Aesthetics Redesign

Bioderma Laser & Aesthetics

Just went live with the redesign I had been working on for Bioderma Medical Laser & Aesthetics.  Been working with them on a site redesign and incorporating many new features to their website.  Working with them has been a pleasure and the site has turned really nice.  There’s a lot of heavy tech running in the background that gives users a great and informative experience while giving the client the tools necessary to manage their website with little training.

Some notable features include:

CMS powered by Joomla

Building on top of Joomla for the CMS gave the client an amazingly powerful and easy to use CMS solution.  They now have the ability to make basic content edits to their own site at their own convenience.  Allowing them to keep the site content current and up to without having to pay a web developer for basic edits.  

interactive mapping and driving directions powered by Google Maps API

To help their customers find them, mapping powered by the Google Maps API was incorporated into their site.  Current map, satellite, and hybrid information is delivered via Google for users.  Custom driving directions are delivered with no page refresh/reload via AJAX scripting to save users time and unnecessary load times.

newsletter management

A full newsletter management system built upon the ccNewsletter Joomla component has been incorporated into the upgraded site.  Users can easily sign up to receive a newsletter via the newsletter sign up box or through the contact form on the website.  A full admin panel is built into the CMS for the client to easily manage, create, and send out newsletters to users who’ve signed up to receive their newsletter.  A very cool feature.

custom contact form

A custom contact form allows users to easily contact the client.  Submissions are delivered to the client as well as recorded to a database for easy retrieval of information for the client.  DOM scripting found in the contact form hides/reveals content if relevant for the user.  Leading the a cleaner, simpler experience.

lightbox powered before & after photos

Before and after photos associated with their respective services are powered by the slimbox lightbox extension.  This enables full sized detailed photos to appear via a modal window ontop of the page via clicking on a thumbnail photo.  This reduces unnecessary page load for the user while looking really nice.