The Naked Technologist

A few weeks ago I was out in Montreal, Quebec for the Confoo.ca Conference. This conference tied in many technology groups under one roof – PHP Québec, Montréal-Python, Montréal on Rails, W3Qc and OWASP Montréal – all congregating at the Hilton Bonaventure Hotel in downtown Montreal. From what they told us, the conference had: 500 session proposals, 100 speakers, 130 sessions, and 250 visitors over a three-day period.

While I was out there I gave a few presentations on some of the great technology coming out of Yahoo. On Friday I ran through a talk on “Browser MVC with YQL and YUI,” highlighting the highly extensible nature of YQL to accept design patterns such as MVC and visualization and controller capabilities built into technologies such as YUI. This is a screencast with the presentation as the audio overlay – if you missed the talk then you can catch it below.

The other talk I gave (on Wednesday afternoon) “Foundations of a Social Application Platform”, had to do with some of the core technologies behind social platforms like YAP, MySpace and Facebook. This is a look in from the perspective of a developer and is taken from the years of work we’ve invested in developing applications on many social networks. Below is the screencast from the presentation:

During the conference I had a chance to meet up with Asher Snyder (EVP of Technology) and Philip Ross (VP of Engineering) who work on a very interesting PHP Framework called NOLOH (Not One Line Of HTML). Asher ran me through the foundations and functionality behind the makeup of the framework. I can definitely see the potential of NOLOH for server-side engineers who don’t want to deal with the front-end code and functionality of a site or web application. NOLOH integrates a rich set of widgets to rival many of the JavaScript libraries out there . When I asked about the performance of the framework Asher assured me that includes are added in as they are needed, speeding up initial page load. I unfortunately had to miss his talk because it overlapped one of my own but Asher sent by a screencast. One of the other nice pieces of the framework that I saw were the listeners that allow you to tie in a data request for the transport layer. At the end of the screencast Asher ties in flickr photos into his listener but I was thinking of the potential of integrating that with the dynamic data fetching capabilities of YQL. Take a look at “NOLOH PHP Framework – Unified Server Side Development“, and see for yourself.

Diving into the innards of SQL and the uses of EXPLAIN we had an expert presentation from Sheeri Cabral of Pythian on “Bending Queries to Your Will with EXPLAIN” (A.K.A Optimizing Queries with EXPLAIN). These are some great slides for all you database administrators out there.

I can’t dive into all of the talks that were given but if more information is what you’re looking for then take a look at these links:

• Confoo Flickr Group: http://www.flickr.com/groups/confoo
• Tweets About Confoo: http://search.twitter.com/search?q=confoo
• Slide Downloads for Sessions: http://confoo.ca/en/download

- Jonathan LeBlanc

No Comments | In: Events | tags: Caja, Conferences, OAuth, OpenID, Opensocial, Screencast, YAP, YQL, YUI. | #

One of the biggest issues that many people have with the small view of a YAP open application is that the view is cached on Yahoo! servers and can only be updated with manual intervention from either the application owner or the application user. In the past, application owners had a few options for updating this small view. The most common were:

• When the user visited the canvas view of the application the owner would have a setSmallView call set up to refresh the small view of the user (process described here: http://www.nakedtechnologist.com/?p=181. The problem with this is that it requires the user to go to the canvas view. Many users would just view their small view on My Yahoo! so the content of the app was either generic or stale.
• The owner would set up a cron job to update the small view of their app users on regular intervals (process described here: http://www.nakedtechnologist.com/?p=220). The issue with this one is that the content will only be updated at regular times and will be stale for a user in between those times.
• The owner would implement a yml:a tag to call a server-side script to update the small view of the user when the user clicked on the link (process described here: http://www.nakedtechnologist.com/?p=204). This relied on user interaction to function and in many cases links on the small view would need to be added just for this requirement.

Many developers, myself included, opted for a mix of all of the options above. This worked fairly well to mimic a dynamic small view, but having three solutions for a single problem was unwieldy.

Enter the yml:include tag
The purpose of this tag is to dynamically load content onto a page. This tag can be used in both the canvas and small views, but the real benefit to its use is the small view.

I would recommend looking over the documentation for yml:include as there is quite a lot of detail that a developer would find useful: http://developer.yahoo.com/yap/guide/include.html

The features that are most important to note here are:

• insert – if a node id is specified in the insert parameter, the content of the include request will load into that node.
• delay – the amount of time to delay the loading of the content (in milliseconds)

These parameters will help in setting up a dynamic small view for the user. Using these, I’ll go through two examples on how to use yml:include. The first will cover a simple single load case and the second will display how to build a continually updating small view set to update on a specific delay.

Simple Use Case – Single Dynamic Load
This first example will display a simple use case for yml:include. We will use the setSmallView call to insert an include tag into the small view of the current user.

The PHP layer to this is just to insert that yml:include tag the first time, and is only needed once. This will replace the cached small view of the user with the include tag. For my applications, I ran this in a cron job to update the small view for all users at once. Doing so replaced my need to constantly update the small view of my users on a daily basis.

The full details for setting up this example can be found here: http://www.nakedtechnologist.com/?p=181. This piece is the PHP layer that just sets the small view of the user with a yml:include tag and the div node that the content will be inserted into.

$html = '<yml:include params="training_sdk.php" insert="loadHere"></yml:include><div id="loadHere">REPLACE</div>';
if (!$yahoo_user->setSmallView($html)){
	echo "NO SMALL VIEW";
}

When the dropzone (my.yahoo) and application load, an AJAX GET request will be made to training_sdk.php. This file will return the content of the small view and then be inserted into the div with the id of “loadHere” (as denoted by the insert parameter). This allows us to generate whatever content we want within training_sdk.php and the small view will reflect that change as soon as the user loads the application.

Extended Use Case – Updating the Small View Every x seconds on a delay
Now we’re going to look into an extended use case for yml:include. This version will extend upon the basic example to refresh the small view automatically every 5000 milliseconds (every 5 seconds). We will start off with the same code that we insert into the small view to include the yml:include tag. From that point we take a look at the file that we capture the content of the small view from, training_sdk.php.

<yml:include params="training_sdk.php" insert="loadHere" delay="5000"></yml:include>
<?= time(); ?>

What we’re doing here is inserting another yml:include tag onto the page. Just like the first tag we are calling the same file, training_sdk.php, and inserting it into the same DOM node. The difference here is that we are delaying the load of this request by 5 seconds with the delay parameter. Following that all we do is display the current UNIX timestamp. What’s going to happen when this content is inserted into the small view is that the new yml:include will count down 5 seconds and then make an AJAX call to the same file and insert another UNIX timestamp and yml:include tag (which is delayed 5 seconds). So there we have it, we now have a small view that will update itself automatically every 5 seconds.

There’s only one catch here. There is a limit on the number of times you can call yml:include within a span of time. If too many consecutive yml:include calls are made, you will see the following error message:

error-243: maxIncludes limit hit for appid XXX

If you see this message, you have made too many yml:include calls within the particular dropzone. Currently the front page will allow unlimited yml:include calls and http://my.yahoo.com will allow 10 calls per session. My Yahoo! is looking into this at the moment so keep checking back to see if there have been changes with this tag. If you see this error, increase the delay on your yml:includes and that should solve the issue.

- Jonathan LeBlanc

2 Comments | In: PHP, Programming, Yahoo! Application Platform (YAP) | tags: PHP, Yahoo!, YAP, YML. | #

One of the requests that has come up while working with JavaScript on the Yahoo! Application Platform is: How do you assign an event to a DOM node which then captures the X/Y coordinates of that node under caja?

I put together a sample that will display how to assign a mouseover and mouseout event to a DOM node which will call functions to display a tool tip to the immediate right of the node. To do this we need to capture the x/y coordinates and width of that node to calculate the positioning offset. First we create the CSS and HTML for the nodes that will act as our event and tool tip containers.

<style type="text/css">
div#tooltip{ position:absolute; top:0; left:0; width:100px;
    height:40px; display:none; }
div#padNode{ position:relative; margin:50px; }
div#myContainer{ border: 1px solid #000000; padding: 10px;
    position: absolute; top: 50px; left: 50px;
    width: 200px; }
</style>

<div id="tooltip"></div>
<div id="padNode">
    <div id="myContainer">Container</div>
</div>

There are a few items to note about the above HTML:

1. The tooltip container is an absolute positioned node that starts out hidden. The tooltip is placed at a root location so that the offset can be properly applied. We don’t want to embed this node within a positioned / floated container because that will affect our positioning offset location.
2. The “myContainer” div is placed within a relative container with a margin – this is done to simulate embedded positioned nodes on a page.

Now, let’s look at the JavaScript:

<script type="text/javascript">
//assign mouse over handler to container
var myDiv = document.getElementById('myContainer');
if (myDiv.addEventListener) {
    myDiv.addEventListener('mouseover', overCallback, false);
    myDiv.addEventListener('mouseout', outCallback, false);
} else if (myDiv.attachEvent) {
    myDiv.attachEvent('mouseover', overCallback);
    myDiv.attachEvent('mouseout', outCallback);
}

//callback for mouseover - sender is the triggering event
function overCallback(sender){
    var target;

    //capture the object that the mouse over event was from
    if (window.event) {
        target = window.event.srcElement;
    } else if (sender) {
        target = sender.target;
    } else { return; }

    //get the top and left x / y coords of the target
    var nodeTop = target.offsetTop;
    var nodeLeft = target.offsetLeft;

    //if the node is within a parent container, loop through each parent
    //and add their height / width offsets to the top / left
    var nodeParent = target.offsetParent;
    if (nodeParent != target) {
        while (nodeParent) {
            nodeLeft += nodeParent.offsetLeft;
            nodeTop += nodeParent.offsetTop;
            nodeParent = nodeParent.offsetParent;
        }
    }

    //set tooltip data and display
    var tooltip = document.getElementById('tooltip');
    tooltip.innerHTML = "This is a tooltip";
    tooltip.style.display = "block";

    //set the tooltip top positioning to the same as the target node
    tooltip.style.top = nodeTop + "px";

    //set the tooltip left positioning to the end of the target node
    //(left location + width of the container)
    tooltip.style.left = (nodeLeft + target.offsetWidth) + "px";
}

//callback for mouseout
function outCallback(sender){
    //hide the tooltip
    document.getElementById('tooltip').style.display = "none";
}
</script>

Going from top to bottom, here’s what everything does:

Attaching Events
The first bit of code will check if addEventListener or attachEvent are available methods (basically checking if you are using IE or every other browser known to man). This block will then set up two events: The mouseover event on the “myContainer” node will call the function “overCallback” and the mouseout event on the node will call the function “outCallback”.

The MouseOver callback
In the function “overCallback” we have a few things going on. The function takes in one parameter, the event that was enacted on the node (so our mouseover event). Using this event we determine the node that the event was performed on. This will be valuable if you have multiple nodes all calling the same mouseover function. Next we capture the x/y (or top/left) offsets of the node from its current container (so the number of pixels from the 0,0 location of the “padNode” div.

But wait…the “padNode” div has a 50px margin from the 0,0 location of the overall container…so won’t the offsets be off by 50px? Yes, yes they will.

This leads us to our next block of code. While there is still a parent node to calculate we add the parent to child offset to our overall offset values. Basically what we’re doing here is looping through every container that the “myContainer” div is located within to get the “true offset” from the 0,0 position of the container itself.

Finally, we capture the tooltip node, set its content and display it. We then set the “top” pixel CSS offset of the tooltip to our calculated top offset. After that we set the “left” pixel CSS offset of the tooltip to our calculated left offset plus the width of the “myContainer” node so that it will display to the immediate right.

The MouseOut callback
There isn’t much to the mouseout callback…all we have to do is hide the tooltip container.

There you have it…we attach events to a node which then capture the true x/y position of that node to display a tool tip.

– Jonathan LeBlanc

1 Comment | In: Yahoo! Application Platform (YAP) | tags: Caja, Guides, JavaScript, Programming, Tutorial, YAP. | #

In my last post I provided code to update the small view for an application on the Yahoo! Application Platform. The only current dropzone for these applications is on http://my.yahoo.com. In this tutorial I want to provide a method for developers to automatically update the small view for every user of their application without their interaction. With this script in place, you can run it within a cron job nightly so you can let technology do all the work for you.

Here’s a little overview of the application that I tied this functionality to (to see the application in action go to: http://apps.yahoo.com/-Oob7ZC78). I built out a weather application that allows users to set their city and get a simple weather forecast. On the small view I display a 4 day forecast and the current weather for the day. Since most users will only set their city on an infrequent basis and only interact with the small view regularly, I needed a way to update that cached small view on a daily basis. This would normally be done when a user goes to the large view of the application, but that was not acceptable in this case.

I have a basic mysql table that contains the GUID of the user to identify them, as well as their city search criteria to rebuild the user views with their selected city criteria. The basic table looks like this:

Now let’s take a look over the code that updates the small views based on the table data above. Here are the steps I’m taking:

• Include the PHP SDK (Yahoo.inc), define your keys and application id, then instantiate a 2-legged OAuth session using new YahooApplication(…)
• Set your database information, initialize the mysql database connection, set the SQL query and make the query using the mysql_query method
• Set up the while loop to keep capturing the specific row as long as there are still hows to capture
• Create your small view HTML using the data from the database – store it to a variable ($html)
• Set the small view for the user GUID using the created small view HTML. Echo out a status message for some detail.

Let’s take a look at the code for this:

Now that we have the script ready, just set up a cron job to run through this script whenever you want to update the user content and that’s it…you now have an automated script that will keep the small view for all of your users up to date.

– Jonathan LeBlanc

No Comments | In: PHP, Yahoo! Application Platform (YAP) | tags: Guides, mysql, PHP, Programming, Small View, Tutorial, YAP, YOS. | #

For the second installment in the dynamic small view using yml:a talks, I wanted to take you through another implementation of the yml:a tag created during some head pounding platform work.

The Problem
The My Yahoo! small view of an application can’t automatically refresh itself with fresh content. If a user never goes to the large view of your application, they will always see the same stale content in the small view on their My Yahoo! page. If your application relies on fresh content being presented to the user, you need a way of updating the small view content from the small view.

The Solution
Basically, what you are trying to do to make this happen is to find a way to make a request to a server side script which will, in turn, instantiate a new Yahoo! session and set the small view content. Again, because of the AJAXian behavior that can be accomplished using the yml:a tag, it’s the perfect candidate for our needs.

There are two methods that we’ve used for this task. The first one uses the tab example I spoke about in my last post. Each time a tab (which is a stylized yml:a tag) is clicked, yml:a will call a server side script to rebuild the tab group. While this is occurring, new content can be cached for the user’s small view.

The second method, and the one that I’ll go over in depth, is to includ a yml:a link on your small view to “Update Small View”. I like the idea of updating the small view automatically using the tab method, but I also like having this option available to users so that if they see something that is out of the ordinary they can refresh to update their view at will. Let’s look at a code implementation behind this example.

First things first, when the large view of your application loads, you’ll need to set the small view. For our needs, all we’re going to insert in the small view (from PHP) is the yml:a link to update:


<?php
require_once('Yahoo.inc');

//define constants to store your API Key (Consumer Key) and Shared Secret (Consumer Secret)
define(“API_KEY”,“YOUR KEY”);
define(“SHARED_SECRET”,“YOUR KEY”);

//initializes session and current user

$yahoo_session = YahooSession::requireSession(API_KEY, SHARED_SECRET);
$yahoo_user = $yahoo_session->getSessionedUser();

//set the small view
$uid = $yahoo_user->guid;
$yml = “<div id=’containerHolder’></div><yml:a params=\”updateSmall.php?uid=”.$uid.“\” replace=\”containerHolder\”><span style=\”color:#fff;\”>Click Here to Refresh Your View</span></yml:a>”;

$yahoo_user->setSmallView($yml);
?>

As we can see, the small view will now have a refresh link on it which in turn calls updateSmall.php through an AJAX request with the user id of the person that clicked on the link, then replaces the DOM element with the id of containerHolder. In updateSmall.php, we’ll capture the user id passed in to us, instantiate a 2-legged OAuth session, then use that id to update the small view cache of the user and finally dump out the new small view content that will be replaced. This would look something like:


<?php
require_once('Yahoo.inc');
define("API_KEY","YOUR KEY");
define("SHARED_SECRET","YOUR KEY");

$uid = $_REQUEST['uid'];

$yahoo_session = new YahooApplication(API_KEY, SHARED_SECRET);
$small_view = ‘Hey, this is my new small view!’;

if (!$yahoo_session->setSmallView($uid, $small_view)){
echo “ERR: $uid <br />”;
}
echo $small_view;
?>

That’s it, you should now have an easy method for updating the small view for the user using yml:a, as well as updating their small view cache so that they will see the new small view if they refresh the page.

– Jonathan LeBlanc

1 Comment | In: Yahoo! Application Platform (YAP) | tags: PHP, Tutorial, YAP, YML. | #

My Yahoo!’s implementation of the Yahoo! Application Platform (YAP) is usually perceived as a mixed bag with the developers and partners we’ve been working with.  On the one hand this is the implementation of the platform on Yahoo! and on the other developers feel restricted because the small view that displays on My Yahoo! only allows HTML, CSS and YML.  Some developers have gone the route of just placing glorified ads or static content on their small views.  Enter the yml:a tag…one of the most powerful tools at a developer’s disposal on the platform.

The yml:a tag can be seen as a replacement to the normal HTML anchor tag, but it is much more than that.  Including AJAX functionality with DOM insert / replace techniques, this tag can mimic a dynamic environment to allow developers a greater degree of flexibility.

So, I can spout off all of the promotional material I want, but what use is it without examples to back it up.  This code sample will provide all of the functionality of a dynamic tab set within the small view, where the tabs are defined as yml:a tags:


<?php
require_once('Yahoo.inc');

    return $tabCode;
}
?>



Let’s break the code down into the pertinent parts and explain what the heck is going on. This code can be placed as the landing page for your application full view. What will happen is that it will generate a new small view which will display the tabs as yml:a tags. When a tab is clicked, yml:a will send an AJAX request to this same file, but will pass in a numeric query parameter (defined as ‘tabNum’) which will signal which tab has been clicked. The if / else statement at the top will control that flow. If tabNum is not defined, the core container and CSS will be created and the small view will be set using setSmallView. If tabNum is set, just the build_tabs function will be called to recreate the tab container and return it. Essentially, the yml:a tag is just replacing its own container with a new tab view in order to make it look like a new tab has been clicked, without refreshing the page, resetting the css or re-encoding the small view.

Let’s look specifically at the yml:a tag within the build_tabs function, where each tab is defined as:
<yml:a params=”?tabNum=$i” replace=”tabContainer”>Tab $i</yml:a>

The params attribute specifies that the same file will be called (since no file is defined) and will pass one query parameter, the tab number. The replace attribute specifies the id of the DOM element that will be replaced in the small view once the AJAX request successfully returns. In this case we are replacing the entire tab container, the div with the id of “tabContainer”.

That’s all there is to it. That’s one of the many dynamic things you can do with the yml:a tag.

Links:
- Tab tutorial on YDN
- yml:a tag description and samples

– Jonathan LeBlanc

3 Comments | In: PHP, Yahoo! Application Platform (YAP) | tags: PHP, Tutorial, YAP, YML. | #

From December 14th to the 21st I was in Taipei, Taiwan for Yahoo!’s Open Asia Week. This was really a two part event week with a lot going on. I was there as a representative evangelist for YDN to speak about the Yahoo! Open Strategy as well as to do some in-depth code dives and meet some of the other properties. When I first arrived at the Yahoo! offices I was loving the decoration that they had set up on the walls…and who doesn’t love some really great wall art?

First, during the week we had a Yahoo! internal application development event. This tied in offices from Taiwan, Korea, Hong Kong and Australia, which was quite amazing to see. We were running video conferences between all of the offices during the numerous presentations on Y!OS, YAP, YQL, Blueprint, Open Mail, etc. as well as during the award ceremony and judging.

..and, in traditional Yahoo! fashion, everything gets branded with the Y bang:

On that Saturday, I had a chance to meet many external developers who had hacked on the different platforms, and gave a few back to back presentations while I was at it (slide deck attached below). There were some great presentations focusing on the Yahoo! Application Platform, and we also had one of the Wretch (yes I know – the name is lost in translation) girls there – I believe she was miss July.

View the event photos on flickr at:
http://www.flickr.com/photos/jcleblanc/sets/72157611588610596/

View the slides from the presentation:

– Jonathan LeBlanc

No Comments | In: Events | tags: Events, Open, Yahoo!, YAP, YOS, YQL. | #