Got my no.de coupon in the mail a couple of days ago.

Now I just gotta figure out what I wanna host at http://sammeh.no.de/....

I'm a little slow on the uptake here, the blog update I'm referring to is now 10 days old. I haven't been in the Facebook dev world of late, so I hope you'll forgive me for regurgitating old news.

The big update for me is in the 4th paragraph:

We are also moving toward IFrames instead of FBML for both canvas applications and Page tabs. As a part of this process, we will be standardizing on a small set of core FBML tags that will work with both applications on Facebook and external Web pages via our JavaScript SDK, effectively eliminating the technical difference between developing an application on and off Facebook.com.

This is excellent! I have actually been holding my breath for something like this for a while now. The restriction of FBML only content for tabs has been extremely restrictive, here are a handful of reasons why:

• Very strict HTML parsing - because the Platform was rendering tabs inline previously, it of course had to be VERY careful in how it handled offsite data, to protect users from all manner of scams/attacks. Now full flexibility is available because your iFrame is yours to control.
• Insanely strict JS parsing - same as first point, application tabs could only leverage basic Javascript and the unwieldy, poorly documented FBJS (Facebook Javascript). Now, you're free to access manipulate your IFrame document/window objects, DOM manipulate, include third party JS libs, etc, all to your hearts content.
• Embedded media was a pain - Granted, the tab FBML *did* allow you to embed Flash and AIR apps etc, but there were countless threads on the forum outlining issues they were having interacting with the host page, etc.
• Tab activation policies - There were some extremely frustrating rules with the way tabs were allowed to be "activated". No JS/FBJS was allowed to execute until the user had interacted with the tab in some manner, such as focusing a form element or clicking somewhere. This made it very cumbersome to implement any meaningful interactions with the user; alot of obnoxious boilerplate code had to be written for various ways in which you may actually start doing anything meaningful from JS, like AJAX requests.
• ... and lots more Everything from CSS parsing to the occasional time where the tab would just sit in an endless loading display when clicked. When I was writing a tab page I remember bashing my head against the wall trying to get some content to sit nicely in a cross browser fashion... it would have been easy under normal circumstances, but the Platform tab flavour was refusing to accept the *display: inline IE hack in the CSS. Joy.

This is going to really open up some great possibilities for interactive, rich web applications. I really cannot wait for this feature to be rolled out.

This news does come with some disappointment however; the sixth paragraph on the developers blog states the following:

Finally, due to low usage rates, we will remove application tabs from user profiles in the next couple months. Application tabs will continue to be supported on Facebook Pages.

There are plenty of great use cases to have application tabs on a user profile page. My personal Facebook profile has a tab that displays my latest last.fm scrobbles, my latest blog posts, etc. Personally, I believe that if the adoption rate for user profile tabs is low, the Facebook team should be coming up with ways to increase user acceptance of this feature, rather than removing it all together. Besides, the functionality in Facebook Page tabs is pretty much identical to the user profile equivalents... Why not support both?

There's other goodies in the developer blog update too, such as cleaning up the REST API considerably.

All in all, exciting changes coming to the Facebook platform in the coming months!

When I get a bit of time soon I'm definitely gonna check this out further and post more thoughts on it.

Spring Roo.

Todays one is a fun one. Removing a frameborder on an iframe in Internet Explorer is case-sensitive, would you believe it!

That is to say:

<iframe frameborder="0" src="http://www.google.com.au/"></iframe>

.. Probably won't work. Whereas:

<iframe frameBorder="0" src="http://www.google.com.au/"></iframe>

Will!

This also extends to creating an iframe using DOM. You need to do this:
Think I'm gonna start a little mini-series of blog posts with the little "gotchas" I run into during the course of an ordinary day at work. Some of the pitfalls I've run into lately have been ridiculous. Bloody IE!

Todays one is a fun one. Removing a frameborder on an iframe in Internet Explorer is case-sensitive, would you believe it!

That is to say:

myIframeEl.setAttribute("frameborder", "0");

Is not going to work in IE.

myIframeEl.setAttribute("frameBorder", "0");

But this will.

This short blog post highlights how to vertically center variable-height block-level content inside a fixed height container, in a cross-browser, (mostly) standards compliant manner.

I've lost count of how many times I've needed to do this. Seriously. For example, you may have a block of text, or an image or two that need to sit nicely in a container you've allocated for it. For quite a while now, all standards-compliant browsers have had support for the display: table CSS declaration, which makes vertical alignment a snap. Unfortunately though, Internet Explorer is way behind in the game, with both IE6+7 not supporting this declaration. There is hope however!

I have stumbled across the following page a few times now, it's the best resource I've found on how to overcome this problem.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

I've adapted this solution into a set of 2 CSS files that I now use when I need to vertically center something.

valign.css

div.valignContainer {
	display: table;
	overflow: hidden;
}

div.valignMiddle {
	display: table-cell;
	vertical-align: middle;
}

valign_ie.css

div.valignContainer {
	position: relative;
}

div.valignMiddle {
	position: absolute;
	top: 50%;
}

div.valignInner {
	position: relative;
	top: -50%;
}

Include it in the page like so:

<link rel="stylesheet" href="valign.css" type="text/css"/>
<!--[if lte IE 7]>
<link rel="stylesheet" href="valign_ie.css" type="text/css"/>
<![endif]-->

To use this solution, let's say you currently had markup like so:

<div id="myContainerThatSpecifiesAppearanceAndDimensions">
  <div id="myContentThatNeedsTobeVerticallyCentered">
    Content that should be vertically centered!
  </div>
</div>

You would change it to the following:

<div id="myContainerThatSpecifiesAppearanceAndDimensions" class="valignContainer">
  <div class="valignMiddle">
    <div id="myContentThatNeedsTobeVerticallyCentered" class="valignInner">
      Content that should be vertically centered!
    </div>
  </div>
</div>

That's all, folks!

HOWEVER! After downloading the Internet Explorer 9 Platform Preview, I got the shock of my life. An Internet Explorer that is taking a DECENT effort in supporting web standards that are almost as old as myself?! Could this be?!

Seriously, their new SVG implementation is amazing. HTML5 support. Hardware accelerated Javascript processing and DOM rendering. CSS3? BORDER-RADIUS SUPPORT?! This is certainly not the Internet Explorer I've come to love to hate.

Of course, I can easily dismiss all of this with the simple statement "5 f*****g years too late, chump". However I can't bring myself to do so, when I am continually reminded of the fact that this family of browsers still makes up a stupid amount of the market today. Yes, IE share is slipping, but I truly wonder if we'll ever see that glorious day where IE drops below 40-50% market share. If the migration of standard consumer PCs ensures that we see a good portion of users running on IE9 rather than the joke we've come to call IE7, or the slightly less humerous joke we've come to call IE8 ... well, that's certainly the lesser of two evils isn't it?

Unfortunately, from what I've read, IE9 probably won't be around for another year or so. So in the meantime, I'll continue to burn baby animals on the IE altar, hoping the gods of Microsoft will hear my pleas for my mortal webapplication to function correctly in their worthless POS software (I ain't talking about no point of sale here either).

Hopefully in that time they'll improve their laughable ACID3 score. Then again, maybe not. Best not to make people too happy, might start putting their faith in you or something ...

Step 1 was to play around with Chrome extensions. I haven't worked with plugins/extensions in any other browser, but I have to say.... Google NAILED this. It's so intuitive and straightforward. So easy to debug, so much power. I love you Google.

Anyway. Step 2 was where things got interesting - connecting to Facebook via the Javascript API and Facebook Connect. This proved to be quite complex. Facebook Connect has this fascination with the whole cross domain communication channel (XD for shortness) nonsense. Basically, this requirements essentially means to use the Javascript API you need to be hosting it on a standard web server to be able to add the xd_receiver.html file in a public-facing area where Facebook can see it.

After digging around the site for a while, I came across their fancy new Open Source Javascript SDK, I couldn't help but notice this didn't make a mention of the XD setup anywhere, so I assumed perhaps I might be able to work with this system better. As it happens, my suspicions were correct. The new JS library has some crazy voodoo magic set up so that an XD file isn't required, there's some kind of "XD proxy" running on the Facebook servers which will send login session data along the line to the JS library, using either document.postMessage or some Flash workaround thingy (not really sure how that works, don't particularly care.)

I immediately tried to use it in a Chrome extension, but alas! There was a few issues. I came up with workarounds for both though.

Issue #1 - the API does the following in the constructor:


_domain: {
api : window.location.protocol + '//api.facebook.com/',
cdn : (window.location.protocol == 'https:'
? 'https://s-static.ak.fbcdn.net/'
: 'http://static.ak.fbcdn.net/'),
www : window.location.protocol + '//www.facebook.com/'
},


Great! That would be fantastic if our chrome extension was running on http, but the protocol when running from options or background.html pages is "chrome-extension://". So when the API went to make with the server side communications, it was trying to remote to chrome-extension://api.facebook.com, which of course is not really gonna work.

My solution to this was to just fudge it by putting the following snippet in before using the FB lib anywhere:


FB._domain = {
api : 'https://api.facebook.com/',
cdn : 'https://s-static.ak.fbcdn.net/',
www : 'https://www.facebook.com/'
};


With that change, the API won't have any more tantrums when trying to phone home. Easy!

Issue #2 - Facebook Connect is still broken.

This one was the biggie. Essentially, even though the new API does some cool hocus pocus with XD, it's still referencing the "origin domain" in the request, this original domain is of course just going to be the extension URL, which is not terribly useful, as Facebook will freak out when it gets a request coming from an invalid URL. I tried fudging the origin to a valid domain (dodgy I know, I was getting desperate). Interestingly, Facebook was fine with this, but of course when the request came back to the browser and the XD proxy tries to postMessage() the session data back, the browser freaks out as it looks like an XSS attack.

There might be other ways around this drama, but I opted for what I feel to be a fairly elegant solution.

Essentially, I opted to "pretend" I'm something of a desktop application trying to authenticate with Facebook application (which is true in a sense, I suppose). This Developer Wiki page gave me some insight into how to authenticate my application with the FB user the old-fashioned way.

The idea is this: popup the login/app-authenticate page manually with a special URL, setting the return URL to a random dummy Facebook page they have running for desktop app clients: http://www.facebook.com/connect/login_success.html. When the user visits the login page, once they have logged in and allowed the app access (or if they are already logged in and have already allowed the app), they are redirected to a page that has the session data in the querystring encoded in JSON. Login achieved.

So I set about doing this in my extension, simple enough to start with:


var win = window.open("http://www.facebook.com/login.php?api_key=&connect_display=popup&v=1.0&next=http://www.facebook.com/connect/login_success.html&cancel_url=http://www.facebook.com/connect/login_failure.html&fbconnect=true&return_session=true&session_key_only=true", "fbconnect", "width=400,height=400");


Great! If I was a *real* desktop application and I was running a Webkit/IE/whatever browser instance as some kind of evil overlord, I could just detect when the browser redirects to login_sucess.html, grab the querystring, parse the session data out of it, and be on my merry way! I'm running in a browser though, so how about I just access the child window that I opened with window.open, access the location.search property and parse that? "NO", says the magical little pixies living inside the browser, "That would be against my strict Same Origin Policy (SOP, kinda like ... sop story, teehee)!!!".

Fair enough. There was an easy enough workaround though, I just embedded a content script via the Extension to sniff out the session data when it became available, and send it to the main extension. Like so:

Add the trigger for the content script to the extension manifest.json file:


"content_scripts": [
{
"matches": ["http://www.facebook.com/connect/login_success.html*"],
"js": ["prototype.js", "intercept_session.js"]
}
],


I threw prototype in there just for convenience sake, as you'll see in the next step.

Then intercept_session.js looks like this:

var params = window.location.search.toQueryParams();

chrome.extension.sendRequest({message: "setSession", session: session}, function() {
window.close();
});

What this code does is parse the querystring (using Prototype), then check if the session data is present. If it is, parse the JSON into the session object and send it off to the extension Background Page via the extension message passing system to be saved.

The background page simply has this:


var session = null;
if(localStorage.session)
{
session = JSON.parse(localStorage.session);
}

switch(request.message)
{
case "setSession":
{
localStorage.session = JSON.stringify(request.session);
session = request.session;
sendResponse();
break;
}
case "getSession":
{
sendResponse(session);
break;
}
}
});


Again, pretty straightforward stuff. I'm using the groovy new HTML5 local storage to remember the session data even if the browser is closed. The message handler simply listening for a session to be passed to it. When a session is provided, it will save it to local storage and a local variable. The getSession functionality is so other areas of your chrome extension can retrieve the session as needed (for example if you have a popup and want to query FB from there or something). You could obviously use this session anywhere as needed.

And that's that! From here you can make API calls to your hearts content. There's obviously some important things left out here, stale checking of the session when the background page loads up for example. Also, requesting extended permissions is not covered here, but it's pretty much the same as how the login deal works anyway. You would just update the login_success.html intercept script to check if this was a response for extended permissions, and check the querystring to ensure the permissions were supplied.

I've cooked up a quick little demonstration of this stuffs. Click here to install a demo extension that will add a button to the right of your address bar, which will show some clickable icons of 5 of your friends in a popup. You can also see the code for this extension here.

Time for me to go finish this extension!

Imagine my surprise when a sexy little desktop notification popped up in the bottom right of my screen! Intrigued, I did a bit of Googling, there's a couple of news posts about it, but nothing substantial... other than the design doc hosted on dev.chromium.org.

It's currently only available in the developer channel of Google Chrome. If you're running the dev channel, then check out the example below:

For those interested, that code that powers this little example can be found here.

Very cool stuff. There are so many places this would come in handy. Super Facebook notifications, anyone?

The system also has some AJAX mixed in for good measure, with standard HTML fallbacks if the client-side code falls over (you know, 'cos I have little faith in myself ...). Internet explorer was giving me some bizarre results with these AJAX methods, so I went digging.

As it happens, it was the same ol' story, Internet Explorer aggressively caches practically anything it can. This isn't necessarily a bad thing, but as usual Firefox, Chrome, Safari etc don't exhibit the behaviour.

I have actually run into this issue in several other projects, the way I generally solved it was to just generate some "entropy" in the request URL querystring to ensure IE fetched the data properly each time. This time I Google'd and looked a little deeper.

As it happens, caching HTTP GET requests is actually considered the "right" thing to do, so Internet Explorer actually chose this time to stick to standards and shove it in the face of everyone else. Somewhat ironic, considering they seem to go out of their way to do the complete opposite most of the time.

The solution is to just make POST requests to your endpoint, it seems to eliminate any caching IE thinks it should be doing. This has been posted all over the net already of course, but I felt to reiterate it because it's such an obvious solution to a very frequent and frustrating issue!