An application I would like to see on Microsoft Surface

Microsoft this week launched Surface which I can only describe as a tool that provides a more human way to interact with computers.

It just so happens that one of the TED talks posted over at the TED blog was of Blaise Aguera y Arcas, a software architect at Microsoft, who spoke about and demoed Photosynth.

Play the video to see why i think we could be seeing Photosynth in Microsoft Surface very soon. Heck it might already be in there ....

Google Gears, Enabling Offline Web Apps

I logged in to my google reader account today and found an interesting link called "Offline" on the upper right hand corner of the page.


Clicking it launches a window that prompts me to install Google Gears that will apparently enable google reader to work offline.

Upon visiting the developer guide for Google Gears, it seems there are some components it has that may be beneficial towards speeding up an ajax web app, like, for instance, the workerpool.

I am going to install it and give it a go. Most people are on broadband anyway so I don't quite see why an Offline app would be any use, unless of course you're constantly on the go, leeching free wi-fi internet access anywhere you can get it.

Premature optimization is the root of all evil

Jeff Vogel writes on IBM Developerworks and shares his "Six ways to write more comprehensible code".

What has been most relevant to me recently is Tip # 5.

Game development isn't exactly the same as web application development.

So my question is, if the client wanted the web app "done yesterday", is it not possible to do optimization while coding ? If yes, is it a good idea ?

Rereading the Art of War

One interesting factoid I learned from my high school english teacher is that your personal interpretation, understanding and enjoyment of a book changes with age.

She advised us to revisit the books that we've read after ten or so years and attempt to remember our thoughts and feelings as we were reading the book many years before.

Obviously, the text doesn't change (or at least it shouldn't). What does change is ... well, a lot of things. Intelligence, maturity, state of mind, priorities, perspective and many other things that evolve as you grow older, hopefully wiser and more experienced.

Oh yes, I still have the "Art of War" in my bookshelf and I do revisit its pages once in a while. However, the interpretation and format over at sonshi (click the title above) seems to be much better, at least for me.

The spaces between the phrases is like the pause between refrains. It lets you ponder and relish before you read the next set of words, that will equally be full of meaning.

The direct link (?) to the forums related to each phrase is a thoughtful addition and opens up the text to further discussion and interpretation. It's one thing to read it on your own and another to read it with someone and learn about his views of the text.

I have to credit Guy Kawasaki's recent blog post for the link.

Lessons learned from "Getting your ajax app to run faster and better"

While waiting for feedback from the client, I thought I would share a couple of educational tidbits that I and my colleagues learned in the process of speeding up our ajax web app.

• It's not just about loading time anymore. Web development a few years ago was all about minimizing the loading time of web pages. This means minimizing the file size of graphics and utilizing CSS for styling. It still is, but today where javascript is as ubiquitous as people during rush hour, web developers also have to consider execution time of javascript. An audit of the javascript code and identifying which part exactly is taking the longest time is the key here.
  
• A faster PC makes a difference. One observation is how the same web app running on the same browser can perform differently on PC's of varying speed. Again a few years ago, I would've shrugged at the need to have absolutely the latest and greatest for just suring the net. Apparently, web apps like the one we are developing really put the browser to the test, so it demands more CPU power and memory. The more your machine has the better it seems is the experience. Obviously, you have very little control over what your users use to surf to your web app, unless of course it's an internal web application like ours.
  
• The browser cache is your friend. Pre-loading some of the CSS and javascript files on lighter and less busy pages like the login screen helps. By the time the user logs in, majority of the javascript and css files would have already been cached on the browser so loading time is much improved. We use YUI where the actual javascript files are stored on Yahoo's fast servers. The Yahoo webpages also use YUI so if the user happens to be a regular Yahoo page visitor, then you're in luck as the YUI javascript files may already be cached.
  
• Two domains are better than one. There seems to be an internal limit on the number of connections that a browser can make to a single domain. Loading your css and other static files from another domain seems to allow us to work around that limit.
• Compression is relative. One of the things I thought of implementing was gzip compression to miniimize load time. Most mainstream browsers since 1999 already have the capability to decompress gzipped content as they are received. This means that I can gzip a 50KB javascript file into a 10KB gzip file and serve that to IE or Firefox and they would know what to do with it. If you happen to be using Apache, you won't need to manually gzip your files as you can use mod_gzip to have Apache do it automatically with a few changes in configuration. On AOLServer 4.0.10 there is the Ns_Compress module but you have to compile aolserver with a zlib parameter that points to the zlib library files on your server for it to work. However, you have to keep in mind that the browser has to deflate/decompress the file for it to be useful, so the speed you get during load time could be once again taken away if you have a slow PC and decompression takes longer.
• Measure, measure, measure. Unlike me :-) , Dave knows the value of good measurements, so he took the time to profile the speed of the webapp before and after each of our attempts and changes. Otherwise, how would we have guessed that compression doesn't necessarily speed up the webapp.
• Optimize javascript. I think the most important thing I learned here is that even if you are using a fast and object oriented javascript library, how you code with it affects performance a great deal. The tips I found on this page helped me optimize my implementation of the javascript code. I didn't see a major jump in speed but I noticed some improvements in perceived execution time.
  

Ubuntu is not all that people say it is

Ubuntu has been touted as one of the easiest linux distributions to use. Yuga points out that it failed Serdar Yegulalp's "Granny test" in an article over at Information Week pitting it against Windows Vista.

I hate to say it but I also fell for the "easiest linux" hype. I've been a linux user for 6 years and it's never been as "easy" as Windows.

When I plugin my digital camera to a Windows machine I'm almost certain that it'll just work and that it will show me my photos in an automatically created drive in windows explorer.

In much the same way, I am almost certain that when I plugin the same device to my SuSE Linux machine, I'm bound to check the logs or manually type in a mount command. Apparently it's the same for Ubuntu too.

I recently installed Ubuntu 7 on my brother's PC (who has been using windows since he started using a computer) and he has nothing but complaints. They're nothing a little tweaking can't fix but still cumbersome to not have been preset or configured out of the box.

In conclusion, I agree that Ubuntu has some ways to go. It's probably the easiest linux distribution but it still not as easy as Windows in some cases.

Peso now 'uncomfortably strong'

This basically means that there is less peso for every dollar you exchange.

Oil price hikes are looming and the transportation sector is requesting an increase in the minimum fare.

So tell me again why a strong peso is good ?

Many might view this as positive for the Philippine economy. This is good news for the government and companies that have dollar denominated debt, but it's certainly taking a while for the regular Juan dela Cruz to feel the positive effects of a stronger local currency.

Eat all you can - Ala Carte

When someone says "eat all you can", the image that you conjure in your mind is of a table or tables lined with all sorts of food from appetizers to desserts and queues of people lining up with empty plates waiting to be filled.

A growing trend that I've observed here in Metro Manila, at least, is to offer "eat all you can" a la carte.

What is it and how is it different from traditional "eat all you can" ?

Instead of lining up to get food, you stay seated and order the food from a set menu. The waiter takes your order and promptly serves it after a few minutes. You can order as many of each food item as you like.

Is it better than traditional "eat all you can" ?

In my opinion, yes !!! It's better because ....

• You don't need to stand up every now and then to get food from the buffet table.
  
• You don't feel the pressure to get the best part of the roast duck or worry that you'll run out of shrimp tempura.
• The waiter does all the work.
  
• Insert other thoughts why it's better here .....

Where ?

I have had the pleasure of dining in two such restaurants and they happen to be both Japanese. The first is at Zensho (click the link to read a review) over at Tomas Morato, Quezon City and the other one at the redkimono at the Fort Strip, Taguig.

Too bad I misplaced the pics from Zensho I really like the dining experience as it was also teppanyaki, the cook put on a good show and the food was good too :-)

The redkimono's specialty is kamameshi rice. It's a rice dish with toppings served in a wooden platform. I would recommend the Ebi (shrimp) kamameshi. The shrimp according to my brother was firm. The crunchy california maki is unique and the sukiyaki was fragrant.

outside the redkimono

redkimono menu

Tofu Steak

kamameshi rice

Getting your ajax web app to run faster and better.

After designing a nice user interface with ajax and everything, the complaints start coming in that it's slow. Though I wish the client can be more specific but at the moment that's all I have to work with.

What I don't know is whether it's slow on certain parts of the application or whether he means the loading time takes forever.

I'm now determined to scour the web for everything and anything to get this web application to run like a desktop app. Impossible, you say ? Maybe not, if our user is on broadband and he has a considerably mainstream PC as a lot of computing power is done client side now thanks to javascript.

So what have i found so far that seem useful :

http://www.peachpit.com/articles/article.asp?p=31567&seqNum=5&rl=1
http://ajaxpatterns.org/On-Demand_Javascript
http://www.zimbra.com/blog/archives/2006/07/oscon_ajax_slid.html
http://www.crockford.com/javascript/jsmin.html

If anybody has anymore, just go ahead and let me know.

Javascript Kata

Kata as defined by wikipedia "is a Japanese word describing detailed choreographed patterns of movements practiced either solo or in pairs".

Javscript certainly isn't a form of martial arts, however, it's such a liberal programming language that it is easy to get lost or fall prey to bad habits.

While not a martial art, it takes discipline to code.

Patterns or Kata for javascript that are accepted and proven ways to write the language are certainly invaluable, at least to me :-)

Zimbra

I think it was the creator of firebug who once mentioned that the Zimbra messaging and collaboration suite has over 500 javascript files. For an application to have so much javascript and still function so smoothly, the application developers must have done something right.

Now that I'm into web 2.0 application development. I think I could learn a thing or two from these guys.

Avoid extra commas (,) or IE will drive you crazy

Like the title says. While it's perfectly alright to have extra commas (,) in a list of objects in Firefox, IE will throw you cryptic messages like "undefined" or something about a "unique identifier".

The code below will throw the mysterious error messages. See the extra comma at the end of the list of objects.

var myobjlist = [
{name:'status_id', type: 'int'},
{name:'bay_id', type: 'int'},
{name:'project_id', type: 'int'},
];

Replace javascript alert with Firebug's console.log

If you've been developing javascript for a while like me, you're probably the type that have alert messages everywhere in your code. Until firebug, came along that was the only way to determine the value of a variable.

With firebug installed on your Firefox browser, you can now replace the javascript alerts with console.log.

var myvar = "This is my variable"
console.log(myvar);

The above code will output the value of myvar in the firebug console when the page is loaded.

Paging with ExtJs Grid Widget (Updated for ExtJS 2.2)

Updated for ExtJS 2 :

Paging has changed a bit for ExtJS 2.0 from ExtJS 1.0 . In order to get grid paging to work with the grid component on ExtJS 2.2

1. Create the paging toolbar.

var store = this is the same store used by the grid component

var pagesize = 25;
var paging_toolbar = new Ext.PagingToolbar({
pageSize: pagesize,
displayInfo: true,
emptyMsg: 'No data found',
store: store
})

2. Put the toolbar into the bottom bar of the grid component

var grid = new Ext.grid.GridPanel({
id:'mygrid',
title:'My Grid',
columns:[define your columns here]
store:store,
  bbar:paging_toolbar
})

3. Call the data store's load function with start and limit parameters. Initially, start should be 0 while limit is the pagesize you pass to the paging toolbar
   

store.load({params:{start:0,limit:pagesize}});

There is very comprehensive FAQ on the ExtJS wiki about the grids component. I encourage anyone who is having trouble with the ExtJS grid component to consult the FAQ.

The item in the FAQ that tackles paging can be found here.

Deprecated : ExtJS 1.0.1 is no longer available but I'm keeping the old content available below just case anybody still uses it for some reason. If you still are, though, I strongly suggest that you should upgrade to ExtJS 2.

There's lots of things to love about ExtJs. The grid widget is one of them. With ExtJs 1.0.1, paging has never been easier. Click the title for a quick tutorial about paging with the grid. If you're new to ExtJS there is a beginner's guide here.

Once you've defined your grid. The snippet below is one of the things you need to add in order to make the paging toolbar appear on your grid.

// create paging
var gridFoot = datagrid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, dataModel, {
pageSize: 20,
displayInfo: true,
displaymsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No records found"
});
paging.bind(dataModel);

Passing additional arguments to YUI asyncrequest

When using YUI's asyncrequest command (YAHOO.util.Connect.asyncRequest), you need to pass a callback with "success" and "failure" functions. Success is where you put code that executes if the request is successfull and failure is where you put code in case the request failed.

var callback =
{
success: function(o) {/*success handler code*/},
failure: function(o) {/*failure handler code*/},
argument: [argument1, argument2, argument3]
}
    YAHOO.util.Connect.asyncRequest('GET', "http://mywebsite.com", callback, null);

When making an ajax request, sometimes you want to be able to manipulate or access variables that are outside the scope of the success or fail function. Here's where the "argument" parameter of the callback comes in.

I discovered that I can literally pass anything I want as an argument. For example, after a successful request, I may want to read additional javascript variables to do further processing. I can even pass a javascript object.

In the snippet below, the argument is appended into "o" the object that is passed into the success and fail functions. To access your argument from either the success or failure functions, you need to use o.argument.argument_name.

var myvar = "this is a variable";
var callback =
{ success: function(o) {
             /*success handler code*/
             alert(o.argument.extvar);
    },failure: function(o) {
             /*failure handler code*/
             alert(o.argument.extvar);
    },argument: { extvar: myvar}
}
    YAHOO.util.Connect.asyncRequest('GET', "http://mywebsite.com", callback, null);

Bye to Blogger Site Feeds, Hello FeedBurner

Just a quick announcement. As part of my "getting serious" about blogging initiative. I have now disabled site feeds from blooger in favor of Feed Burner.

Please unsubscribe from your current feed subscription and click the link on the side bar to subscribe anew.

Thanks for reading !

YUI's getElementsByClassname

YUI has a lot of useful shortcut and helper functions. One that has been helpful to me recently is YAHOO.util.Dom.getElementsByClassName.

It returns a javascript array of html elements that have the same classname. This is particularly useful if you want to change the look of a group of html elements like say in a menu bar or in a navigation sidebar.

The snippet below uses getElementsByClassName to get all html elements with a class "sidebarbtn". It also allows you to further qualify what type of html element. In the example below, we are looking for "div" elements with the class "sidebarbtn".

var els = YAHOO.util.Dom.getElementsByClassName('sidebarbtn', 'div');

for (var i =0; i <= els.length; i++) {
      YAHOO.util.Dom.removeClass(els[i], "selectedbtn"); 

}

YAHOO.util.Dom.addClass(selected,"selectedbtn");  

ExtJS

Everyone who's anyone in the web development world has probably heard of dojo but I think many have yet to find out about ExtJS (the javascript toolkit formerly known as YUI-ext).

In fairness to dojo, I think ExtJS is bordering along the lines of bloatedness but like dojo you get to mix n match and use only the libraries from the toolkit you need.

So what do I like about ExtJS so far;

• Choice. It started out as a project that extends YUI but it has now expanded to include jQuery and prototype.
• Widgets. The draggable treepanel and grid widgets are killer.
• Clean Object Oriented Code. Code can be easily extended or even overwritten if necessary. The uncompresed code is clean.
• Documentation. While incomplete the documentation and examples provided are clear.
• Themeing. I love being able to change the theme for all widgets .
  

Joel on Elevator Technology

Infinitors (the term we call ourselves, those who once worked for InfiniteInfo) would laughingly remember the "hospital building" where we had our offices. It's called the "hospital building" because it can easily be mistaken for one as it's painted all white. While we can joke about the building, we will always scoff at the elevator system they had in place.

What Joel describes as "New Elevator Technology" has been around in the Philippines, in fact, as early as the year 2000 when I joined InfiniteInfo in their then new offices at the Page I building (aka "the hospital") over at Alabang.

It must be great and efficient for a high rise like 7 over at the World Trade Center but it's a nightmare on a building that is less than 20 storeys.

Here are our common complaints and quirks which may or may not be related to the technology itself :

• The elevator is always broken.
• There are only 2 elevators.
• It takes forever for one to be available during rush hour.
  
• If you forget to key in your floor and you step in the elevator, you have to step out on the next stop to press your floor number at which time you may already have passed your floor.
• Pressing *(insert floor number here)* is suppose to prioritize your floor. It doesn't work :-)

Mother's Day Buffet

Patrick treated us to buffet lunch last Saturday.
I don't think we were planning to go buffet, somehow our legs (or was it our stomachs) dragged us to the doors of Saisaki and before we knew it we were diving into "eat all you can" sushi.
Arnel and Jeff, there's always next time :-)
I hope Deds can upload the photos somewhere :-)

Sunday is Mother's day and the family was planning to have a nice quiet "a la carte" meal at the Serendra. We set our sites on Conti's. We were there early, it was only 11 am but the place was filled and we were number 15 on a waiting list.

That's how we found ourselves at the door step of the Brazilian BBQ. Yes it's buffet again but it's "eat all you can" BBQ this time. All kinds of BBQ from leg of lamb, chicken and pork to believe it or not BBQ'd banana and pineapple.

Our first time in a brazilian barbecue and it was a novel experience.

• There was a typical buffet table with pasta, rice, appetizers and desserts.
• Barbecue is served in metal skewers right off the grill and sliced at your table.
• You use a yoyo to tell the servers if your table would like to be served barbecue. The green side tells them to keep it coming while the red side tells them you don't want any more.
  

driving automatic

I drive a 7 year old Honda Civic. I love it because it was one of the very few cars in its time that was not only fuel efficient but also powerful and fast.

Honda owners I've talked to would rave about how long their next full tank was and how the fuel meter stays at F for the longest time.

It's the type of car that you love to drive .... when there's no one else on the road.

It's a "stick" shift. It has manual transmission and a clutch. While it's a joy to drive in the wide open roads of Fort Bonifacio, you'll balk at how your feet are killing you when you're stuck at rush hour in Edsa.

I recently had a chance to drive an automatic. My first automatic at that. It's not going to win any races but it's definitely fuel efficient, seats eight people and comes in electronic blue.

It turned heads the first few times. It's probably because people are shocked to see 8 people coming out of such a compact vehicle. No, I'm sure it wasn't the paint job :-)

I still love my Honda but if I ever was going to be stuck in traffic for 2 or more hours or maneuver a tight parking space then I would thank my lucky stars that I'm driving an automatic.

my wish

.... that this life becomes all that you want it to,
Your dreams stay big, and your worries stay small,
You never need to carry more than you can hold ...