This is my set up when building CSS layouts. I save a layout copy in Photoshop or Fireworks as a 50% transparent PNG which is then displayed on the page with a high z-index. This overlays my actual HTML layout and allows me to test for pixel precision. On the screenshot I’m testing a layout simultaneously in all browsers required by the project - IE6, IE7 and Firefox.

I just finished my first Facebook application called My Facts. Basically, it allows you to post a quick fact on your profile page and find out who of your friends knew it and who didn’t.

Took me a couple of days to figure it out. The Facebook API is pretty amazing. I’m especially impressed by the total sandboxing of hosted applications. The styles, the JavaScript, everything gets sandboxed. It’s pretty amazing as a platform.

The hardest part was simply learning the FBML and figuring out what works and what doesn’t.

I’ve signed up for Facebook today to check out how the whole application development works. Setting up a development server at home which is accessible from Facebook is pretty straight forward.

Here’s what you need:

1. Facebook account
2. Local box with Apache
3. Domain name pointing to your home IP. I use No-Ip.

Here are the steps I took.

1. Setting up development application on Facebook. Follow the guide, it’s pretty straight forward.
2. Set up No-Ip to point *.dev.mydomain.com to my local box. This allows me to create as many Rails applications as I need to.
3. Configured Apache to forward all calls to fbtest.dev.mydomain.com to localhost:3000 using mod_proxy like so:

   <VirtualHost *:80>
     ServerName fbtest.dev.mydomain.com
     ProxyPass / http://127.0.0.1:3000/
   </VirtualHost>

4. gem install rfacebook
5. cd /anywhere/fbtest
6. rails .
7. ruby script/plugin install svn://rubyforge.org/var/svn/rfacebook/plugins/rfacebook_on_rails
8. rake facebook:setup
9. Go to http://www.facebook.com/developers/apps.php
10. Copy and paste API key and secret to config/facebook.yml. Set canvas_path to the local path on Facebook, ie /myfacebookapp/ and callback_path to local path on your server, ie /facebook/.
11. ruby script/generate controller facebook index
12. Edit index method in Facebook controller, like so:

    class FacebookController < ApplicationController
      def index
        @result = fbsession.friends_get.uid_list
      end
    end

13. Edit index.rhtml like so:

    <% @result.each do |uid| %>
      <fb:name uid="<%= uid %>" />
    <% end %>

14. Start Apache
15. ruby script/server
16. Now you should be able to hit your Facebook application page at http://apps.facebook.com/myfacebookapp

You should see a list of your friends. Took me about 30 minutes to figure all this out.

I’m currently in San Francisco and have a flight back to Toronto in 5 hours. I’m considering trying my luck at picking up an iPhone even though there would be no service for me in back in Canada. The reason why I want to do that is simple - I believe that iPhone will become the next mobile platform.

Apple has a history of creating infrastructure around its products and there’s no reason to think that iPhone will be any different. Developing web applications which specifically target the iPhone could, and probably will be the next big thing. As a web developer it’s a good idea to get on this early in the game.

My opinion is even further solidified by this video. Seems like Microsoft has already lost the battle. The best quote from the video is “[iPhone] doesn’t change our strategy, it doesn’t change our approach”. Great, that means Windows Mobile will stay the same and 3rd party partners will continue putting out crappy cellphones.

Windows Mobile is not just an unfriendly OS, it hates its users. I can’t stand using it.

Sometimes you just want to store some data on the client to access it later. Sometimes you don’t even want to send it to the server. In this case, you can use something called ‘local storage’.

In Firefox it utilizes window.globalStorage which is a part of HTML 5 draft. Internet Explorer, unsurprisingly had this ability since version 5 using #default#userData behavior and unsurprisingly it’s somewhat awkward. Unfortunately, Safari/Webkit don’t seem to support local storage at all as of now, so this is more of a demo.

<html>
<body>

<script>
LockBox = {
	ensureStorage: function()
	{
		if(LockBox.storage != null)
			return;

		var storage;

		if(document.all)
		{
			storage = document.createElement("span");
			storage.style.behavior = "url(#default#userData)";

			if(document.body)
				document.body.appendChild(storage);
			else
				throw new Error("DomStorage works only after dom loaded");

			storage.load("lockbox");
		}
		else
		{
			storage = globalStorage[location.hostname];
		}

		LockBox.storage = storage;
	},

	set: function(name, value)
	{
		LockBox.ensureStorage();

		if(document.all)
		{
			LockBox.storage.setAttribute(name, value);
			LockBox.storage.save("lockbox");
		}
		else
		{
			LockBox.storage[name] = value;
		}
	},

	get: function(name, defaultValue)
	{
		LockBox.ensureStorage();

		var result = document.all
			? LockBox.storage.getAttribute(name)
			: LockBox.storage[name]
		;

		return result || defaultValue;
	}
}

//
// Here's a little demo.
//
var value = parseInt(LockBox.get('count', 0));
alert(value);
LockBox.set('count', value + 1);
</script>

</body>
</html>

It occurred to me that a good idea would be to add a Google sitemap to Noobkit, especially because it’s using frames. Here’s how I went about it:

In a regular controller I load up all my @packages but instead of a plain sitem_map.rhtml, I have a site_map.rxml file which looks like this:

xml.instruct!
xml.urlset "xmlns" => "http://www.google.com/schemas/sitemap/0.84" do
  xml.url do
    xml.loc         "http://test"
    xml.lastmod     w3c_date(Time.now)
    xml.changefreq  "monthly"
  end
  @packages.each do |package|
    xml.url do
      xml.loc         "http://www.noobkit.com/page/ref/#{package.full_name}"
      xml.lastmod     w3c_date(package.created_at)
      xml.changefreq  "monthly"
    end
  end
end

w3c_date goes into your_controller_helper.rb.

def w3c_date(date)
  date.utc.strftime("%Y-%m-%dT%H:%M:%S+00:00")
end

That’s all to it. Packages provide entry points to their entire API trees and should be enough information for Google to start crawling there.

I’m not sure why, but all of a sudden I got interested in how Digg works. In particular how it decides which links get to be featured on the landing page. There’s quite a bit of thinking that goes behind that algorithm that drives it. Read the rest of this entry »