Alex Le’s Blog

The recent release of Prototype 1.60RC1 inadvertently breaks the drag and drop effect of Scriptaculous in IE6 (and 7). I don’t know about the exact cause of the error but according to sources around the internet, it’s because Prototype always returns false for the leftClick event in IE6. Luckily, the trunk version of Prototype has this bug patched (since revision 7954).

To fix the draggable, just patch your prototype.js file, replacing the code block “Event.method” around line 3686 with the newer code block from “event.js” in the prototype main trunk.

For your convenience, here is the patched prototype.js (release 1.60RC1) with fix from Event.js (rev 8037)

• Download: the patched prototype.js for Scriptaculous Draggable

I’ve just released ActiveFixture, an enhancement to the Rails db:fixtures:load rake task. Currently db:fixtures:load doesn’t take into account the foreign key constraints hence with any tables that have foreign keys defined, db:fixtures:load would just fail miserably. As Rails is increasingly getting more into the enterprise world, the ability to handle foreign key correctly becomes more important.

I flew to New York last weekend for the VSLive! Conference. While attending VSLive! talks during the day, my mind was mostly occupied with how to solve this foreign key issue at night. After 2 days and trying multiple ways and still unable to solve the problem, I suddenly remembered about graph (good old CS classes). I turned the problem of determining the order of loading fixtures files into a graph problem of how to traverse the graph in a certain order. Breadth-first-search doesn’t give the correct answer, Depth-first-search seems to have some potentials. When I tried Depth-first-search Post order traversal, suddenly I realized that DFS post order gives the perfect solution. What’s even more beautiful is the entire traversal algorithm was only a couple lines of Ruby code as you can see from the source.

I’ve learned quite a bit about Rails and Ruby while writing ActiveFixture. I poked around the core ActiveRecord classes and see how fixture is being handled, I then learned how to use reflection to get meta data from the ActiveRecord models, then how to write rake task and componentize everything into a plugin. In the end, I feel I like working with Ruby and Rails even more. .NET is cool but somehow, to me, Ruby is more fun to work with, except for the fact that there’s no GUI debugger. I would say I would have been able to write ActiveFixture in much less amount of time had I had a Rails/Ruby IDE with an interactive debugger.

The next time I write something for Rails, I would probably give Ruby in Steel a shot. It’s quite frustrated when you are exploring Ruby, especially when someone like me isn’t that familiar with Ruby. I love the Watch and Intermediate Window in Visual Studio simply because I can hit a breakpoint and examine the application and all the variables at that moment. Currently we don’t have anything similar for Ruby and Rails for free. Ruby in Steel seems to have potentials, but $199 is quite a barrier to entry to any ruby-rails-fan. In fact, one of the main question that my boss at work asked me about Ruby on Rails, is if Ruby has any good IDE. My company is a Microsoft shop so we use Visual Studio extensively. It’s hard to convince someone who code in Visual Studio for a living to switch to a notepad-like editor (”no Intellisense, no thanks”) and start learning Ruby on Rails. Personally I use (and pay for) e-editor, however, I do miss the intellisense and the ability to hit F5 anytime to kill that freaking bug…Okay, enough of my ranting.

Anyway, here’s the good news in short: ActiveFixture is released and ready for abused. Current version is under-tested (I haven’t written any unit tests yet) and may contain bugs. For Wars of Earth, I have about 20 tables with a whole bunch of foreign key constraints (with circular references too) so I’m quite confident that ActiveFixture will work for you.

Download:

• SVN: http://activefixture.rubyforge.org/svn/

Install:

• Copy into the RAILS_ROOT/vendors/plugins
• As always, RTFM. See README for more information. I wrote a little explanation on how ActiveFixture works so enjoy It’s a nice and elegant algorithm to solve a tricky problem.

Usage:

• Make sure you have all the required yml/yaml/csv files
• Defined all belongs_to relationships inside your models
• Run

And Support:
Please vote for ActiveFixture to get included in Rails core. I’ll have even more incentives to write even more useful Rails plugins.

keywords spam: db:fixtures:load, db:fixtures:activeload, rails foreign key constraints fixtures, fixtures loading order

{{http://alexle.net/wp-content/uploads/2007/06/rails.png }}It’s been a week since I started messing with Ruby on Rails seriously. My current Rails project is rebuilding Wars of Earth, the game that my friend Giao and I started almost a year and a half ago. Since Rails is so flexible and powerful, within a span of a few days (like 5 days), I was able to achieve as much as 2 weeks worth of work compared to the past. Before, as Giao is much better at programming than I am, I asked him do the framework design in PHP (we used Pear’s DB_DataObject, Smarty, and home-grown controller for a MVC architecture.) I did the design (game designs, coming up with ideas, some coding) instead as well as preparing the site in Joomla (check it out [[http://www.warsofearth.com|here]]). Nonetheless, I was getting ready to graduate, and my buddy had to take on freelance work to make some money, I decided to put Wars of Earth aside and focus on what mattered most at the time (mainly job and money). As I have more free time on my own now, I am restarting the Woe project but this time, I am rebuilding it from scratch using Rails. And I don’t think I would go back to PHP for any web-based project if I don’t have to.

The major bottle-neck between Giao and I, as I would boldly claim for any other projects that involved geographically distributed team, was the communications. Giao is still back in Vietnam, and I’m in Chicago. I’m 12 hours behind him. Whatever we needed to do, we put in TOTO tasks and message in our Basecamp site. At the time I haven’t thought too thoroughly about the story and the game play, so we just kept on moving until we hit a problem, then we would sit down and talk. But words can only describe so much. Sometimes what I tried to get across, or what my buddy tried to tell me, just failed to get both of us on the same page. Giao would implemented something and it was not the same as I thought, so we just kept on building, discussing, and sadly, compromising. Moreover, I constantly having more ideas for the project, creating our eternal scope-creep: I just tried to add many features right at once (I was trying to get it right the first time, but of course it was almost impossible)

Now with Rails, things are much different. Rails are so flexible and powerful that what I only need to put down is mostly business logic, not low-level, database accessing code. The syntax of Ruby is much superior to that of Perl (I hated Perl with passion, and still do) and Rails is plainly a joy to use. Suddenly I realize the meaning of the [[http://www.loudthinking.com|blog]] of [[http://www.loudthinking.com/about/|David H. Hasson]], Rails’ creator, “**Loud Thinking**.” With Ruby, you can actually __think out loud__ through your code. Since Ruby’s syntax is so flexible, it allows the user to write the code in an unheard-of conversational way. I can almost read the code as I would read a novel (since reading code requires some imagination and the code is no longer boring in Ruby, so I can’t compare the program with a textbook - that would be too boring don’t you think?). I don’t have to restrain myself to the curly braces of C#/Java/PHP style, instead I can tell the Model to fetch all the record then smash the id’s in to an array with some logic in one line. Something like CharacteUnit.get_all_units().collect{|unit| unit.id unless unit.is_inactive} and of course you can add a lot more to that as you can stack as many operators/methods as possible. Pure programming joy.

One interesting part about Rails is the testing tool: unit test and functional test. I can’t wait until I setup the first functional test for the application to simulate a web user. And of course the best part is: everything comes in an elegant, well-thought, scalability-proven web framework that took you 10 minutes to get started. Suddenly the barrier to entry to mid/ large-scale web projects is dropped significantly (it’s __free__ now, only costs you your opportunity cost). In stead of just WYSIWYG, it’s now **What-You-Think-Is-What-You-Can-Get**, **WYTIWYCG** (weet-tee-wic). Imagination goes wild, how awesome.

Whomever I talk to nowadays, I can’t stop talking non-stop about Ruby on Rails. I feel good sharing it to anyone I know so they can start feeling the same way as I do, as sharing is caring.

I feel good. Do you?

Slashdot today (Dec 28, 2006) has a link to an article on WSJ about a conversation between 2 venture capitalists. One of them is claiming Web 2.0 is another bubble and the other one claims the otherwise. My take on it: Web 2.0 is NOT another bubble like what happened during the dot-com boom and burst. Why? It’s not general public money that are pumped into the web 2.0 ecosystem like what happened 7 years ago with web 1.0. Base on that fact alone, I can safely back my claim.

To a lot of people who are monitoring and following the news on web2.0, it may seems like a bubble is forming. A classic example: we saw that Youtube got bought with $1.65 bln. How on earth a FREE video sharing site with NO real business plan besides selling ads inventory, e.g. eye-sights, is worth that much? It’s hard to believe. Another speculative number from the WSJ article: Facebook is valued at $500. Sure, whatever. I have to admit that I used facebook once in a while to keep in touch with friends, maybe writing on their walls some b-day notes. The truth is when thefacebook.com’s version for Lake Forest College was available, some of my friends assumed that I had built the site. Because not long before that, I had built www.247lfc.com, an online classified-ads for the college and got some reputations ’round campus — not enough to impress the freshman chicks (I just finished by Sophormore year at the time) but enough to raise a few eyebrows of the faculty and cause dis-comforts to the monopoly on-campus e-follet bookstore. Anyway, to me, fundamentally, facebook is more like a week-end project of a student. Slapping a guesstimate value-tag of anything above a few million dollars is already a hard-to-believe thing, not to mention the ridiculous number of $500 million.

However, these 2 examples above and many not-mentioned cases is not a sign of a forming bubble. They are merely examples of over-valued IT products, which happens to be the expensive merchandise deep-pocket companies like Google, MS, Viacom, etc. want to possess. Women like jewelry and nice accessories. Rich women like expensive handbags and sparkling diamonds. Similarly big companies like to have controversial, widely-known products. If they don’t have anything to brag about, they will buy a product with a premium. But that’s about it about this web 2.0 bubble.

There are a few profound reasons why the wave of Web 2.0 companies is not a bubble.

1. There are not enough big companies out there to cause a massive injection of public cash into the market.
If we look around, we can only name a few really successful companies. It’s true that for every one of those successful companies, there are 10 more of the copy-cats. This is because the nature of Web 2.0 companies: very low barrier to entry. Begin with a javascript framework, slapping on some stripy, shiny, cheerful designs and we have a web 2.0 product or service. However, at the end of the day, the general public generally stays unmoved. People don’t even know about the existence of those companies, not to mention about investing in those companies. I don’t hear anyone mentions alot about IPOs these days, besides the flopped IPO of Vonage last year, and Vonage is not even considered a web 2.0 company.

2. The invested money are by Venture capitalists only, not by general public.
What made the dot-com boom was not the VCs. Yes, VCs commands lots of money, but it was the general public’s interests on the companies at the time that caused the massive injection of cash into the internet. Usually VC’s funding are cost-prohibitive to the general public — I don’t think any VC would accept a small investment of $20,000 from this random old man on the street to so that the guy can participate in the VC’s game. VC’s get funding from rich or uber rich guys because it’s all about the risk/reward ratio: the rich can take more risks so they can play the higher reward game with more money at stakes. The general public are less fortunate, we loose a few thousand dollars in stocks and we will show a disgusting face when someone mentions that company’s name again. The Risk/Reward ratio is of ordinary people are so low that we can’t invest in anything other than ourselves (e.g. paying for college). Since there are not enough IPO’s going around, and people still have the scar of the last burn from the dot-com explosion, the general public are safe from web 2.0 this time. Without the money of the mass, there won’t be any bubble at all.

With that said, where are we heading in the near future? I can see that we will have some consolidations among the copy-cats. Some of the grass will die, or weeded out because the lack of nutritions due to the absence of a real business plan. In stead of seeing 20, or 30 YouTube clones, we will see 2, or at most 3. In stead of seeing 50 Myspace clones, we will hear about 3, or 4, or less.

The overall trend will be the localization of popular services to a per-country basis. Even though MySpace is big in the States, Bebo is leading in Europe, or in South Korea or China, there are major local brands that leave MySpace in the distant trail. Take Ebay: they were just reported to begin waving the white flag, giving up China’s market. So localization is the big trend in the coming year. Successful services or products are ported and modified to work better with the local people. And most of the time, Western companies are very slow in terms of internationalizing or localizing their products and services. Hence, they are likely not able to compete with local companies offering the same or copy-cat products.

Also, I would expect to see more sophisticated Web 2.0 services, instead of the cut-and-paste mashed up services that have mushroomed for the past 2 years. Take the new Yahoo Mail beta as an example: the free webmail serivce behaves more and more like a desktop application with sophisticated features that even a few years ago very few people would imagine. Together with the maturing Javascript frameworks (Dojo, YUI, Google Toolkit, etc.), more soup-ed up applications can be built. A consequence of this fact is building up a web 2.0 application is not a trivial or easy task like what we have seen and experienced: building a working, functional web 2.0 application will require serious planings, engineering of infrastructure, and software design. Such things requires skill and efforts, and they are the results of serious investment in terms of time, money, and human resource. Effectively we will see larger micro-ISV (independent software vendor) putting out applications, instead of a one-man-team or two-man-team like before.

In brief, what currently happens with the Web 2.0 lanscape is low barrier-to entry of AJAX technology leads to the proliferation of new web 2.0 applications. Financial-wise, I don’t see a bubble at all. If there is, then it’s just the beginning, not the end. For me, I’ll hope on the web2.0 wagon and enjoy the ride. It’s too much of a good opportunity to miss out. The thing is, are you ready when the time comes?

I just recently completed a demo for a client of mine. The demo was a news portal with lots of links to external news contents. I wanted to spice things up a little, so I implemented a inline link-tip (or inline popup, however, this name may confuse you with the light-box type popup) using the [[http://developer.yahoo.com/yui/|Yahoo! User Interface Library]] (YUI). Thanks to YUI, the effect is now quite easy to be implemented.

Here’s a screencast of what the inline link-top looks like

{{ http://alexle.net/wp-content/uploads/2006/10/inline.gif }}

(If you want to see the actualy demo page or get the sample code, please scroll down to the end of the post)

===== The setup =====
Here is the XHTML-compliant markup code for the content and the hover.

Basically we have a few DIVs, positioned either inline or absolutely to show how the inline link-tip works in both cases. Inside each container div, we have a link with a className of **articleTitle** and an extra attribute called **hoverId**. This extra **hoverId** attribute specifies the ID of the popup that we’d like to associate with this link.

Next, we setup the hover container div. The popup div has the className of ‘inlinePopup’ so that we can style it with CSS later on. Let’s take the div with Id ‘hover1′ as our example.

...


…

For this technique to work, we have to explicitly add the **style=”display:none;”** for the popup div. Setting display:none in the inlinePopup CSS class definition will not work.

For the CSS styling, we can just add these rules to the page to make things a little nicer.

===== The Javascript =====
Here is the javascript to handle the inline popup/ tooltip. The idea is after the page has been rendered properly (window onLoad is fired), we scan through the DOM, look for any link with the className of **articleTitle**, then attach custom events for onMouseOver and onMouseOut to handle the display of the popup. And thanks to YUI, adding custom events and web2.0 animations is easier than ever.

First of all, we include the YUI’s library to our page


…




…



Then we insert some javascript codes. Let’s start with the pageInit() function first.
pageInit = function() {
/* Popup summary */
/* We find all items with the articleTitle class */
var els = YAHOO.util.Dom.getElementsByClassName('articleTitle', 'a');
for( var i=0; i < els.length; i++ )
{
/* Get the hover div */
sDivId = els[i].getAttribute('hoverId');
sDiv = document.getElementById( sDivId );
YAHOO.util.Dom.setStyle( sDiv , 'opacity', '0');

/* Unhide the Summary layer when mouse over/ out*/
YAHOO.util.Event.addListener( els[i], "mouseover", hoverOver );
YAHOO.util.Event.addListener( els[i], "mouseout", hoverOut );
}
}
YAHOO.util.Event.addListener( window, "load", pageInit );

We basically find all **a** (anchor) elements in the page with the className of **articleTitle**. Then we loop through the result **els** array and look for which popup div is associated with this link. As we stored the popup div’s ID in the hoverId attribute of the link, we can just grab the value by using the getAttribute(’hoverId’). And next, we set the opacity of the popup div to 0. With YUI, we don’t have to worry about the different syntax of different browsers. Only one single line of code to set the opacity! Next, we add our custom functions to the **a** element to handle the **onMouserOver** and **onMouserOut** events with the **YAHOO.util.Event.addListener( element, “eventType”, customHandler )**

==== Custom Event Handlers ====
We can now implement our **hoverOver()** and **hoverOut()** handlers. Let’s start with **hoverOut()**

/* This function is to unhide the div, then do a smooth very web2.0 fade-in effect */
function hoverOver()
{
var sDivId = this.getAttribute('hoverId');
var sDiv = document.getElementById( sDivId );

sDiv.style.left = YAHOO.util.Dom.getX( this ) +'px';
sDiv.style.top = (YAHOO.util.Dom.getY( this ) + this.offsetHeight + 2 ) +'px';
sDiv.style.display = '';
var animIn = new YAHOO.util.Anim( sDiv, { opacity: { to: 1 } }, 0.25, YAHOO.util.Easing.easeOut);
animIn.animate();
}

When the mouse hovers over the link, this hoverOver() function is triggered. However, at this very moment, we find out that we don’t have any reference to targetted popup div, so we go grab the popup div’s id from the hoverId attribute of the a element. Luckily, we can just reference to the a element as **this**.

=== Positioning the Popup & Adding Dramatic fading effect ===
As our links can be rendered anywhere in the screen, we have to know where to put our popup div. The solution is to set the position of the popup div to the coordinates of the link. With YUI, it’s quite easy: **YAHOO.util.Dom.getX( this )** and **YAHOO.util.Dom.getY( this )** for the x and y values of the a element. But this will give us the top left corner of the boundary box of the link element, which means our popup would be placed **on top** of the link. So we add the offsetHeight of the a element to the top (Y) value of the popup, plus a few extra pixels as the ‘margin-top’. Now our div is positioned correctly. With this approach, we can place our link anywhere: whether it’s in a absolutely positioned container, or inline within a paragraph, the popup div is still positioned nicely below it.

That isn’t t too bad, is it? Now let’s add the fade-in effect. As we already set the opacity of the popup div to 0 when the page is loaded, we can just use the animation feature of YUI for the dramatically fade-in.

...
var animIn = new YAHOO.util.Anim( sDiv, { opacity: { to: 1 } }, 0.25, YAHOO.util.Easing.easeOut);
animIn.animate();
...

I use 0.25 second for the popup div to appear as I think anything longer will be quite annoying to the end-users (”whoever designed this dang page is wasting my time here”). Let’s keep our visitors happy. The YAHOO.util.Easing.easeOut is added so that the animation is eased out for a smoother appearance of our popup div.

Next, we added the **hoverOut()** handler to hide the popup div with an equally nice fade-out effect. But for **hoverOut()** to work correctly, we have to do some extra work towards the end. Here’s the code:


/* This function is to hide the div with a dramatic web2.0 fade effect */
function hoverOut()
{
var sDivId = this.getAttribute('hoverId');
var sDiv = document.getElementById( sDivId );
var animOut = new YAHOO.util.Anim( sDiv, { opacity: { to: 0 } }, 0.25, YAHOO.util.Easing.easeOut);
animOut.animate();
animOut.onComplete.subscribe( hoverHide );
}


Again, we get the reference to the popup div, then we fade it out by changing its opacity to 0. At this point, eventhough the user won’t see the popup div anymore, it’s not actually hidden. This means that the popup div is still covering up the space underneath it, thus link or clickable elements underneath won’t work (not clickable). We have to explicitly set the display of the popup div to none when the fade-out animation is finished to remove it from the page. We do this by using the **animOut.onComplete.subscribe()** to hand a callback method to the animation object. Our callback method will be called when the animation is completed and hide the popup div.

Here’s the one-line code for the hoverHide() callback function

/* Call back function used in hoverOut() */
function hoverHide()
{
this.getEl().style.display = 'none';
}


The **this** keyword now is interpreted as the animation object, not the link item. We use this.getEl() to get the reference to the targetted hover div, and set its style.display to ‘none’. Now everything’s working the way it’s supposed to. Yay!

===== Final Remarks =====
Thanks to YUI, the code is truely multi-platform compatible. All the event handlings are done through the YAHOO.util.Event so we don’t have to deal with messy browser sniffing and special cases. The YAHOO animation is simple and flexible enough for us to customize the way we want. The inline popup is also robust enough as we can style it with CSS like adding some neat drop-shadow and round-corner effects. As you can see from the screencast above, the inline popup is working correctly in the extreme case of rapidly hovering in and out. Nobody would do anything that crazy in real life but it’s nice to see how the effect behaves in extreme cases. And I think one important feature of this technique is that we can implement it to any existing page with minimal code editing.

I hope you enjoy this small tutorial!

Cheers!

===== Code & Sample Page =====
You can download the sample code of this tutorial here.
* [[http://alexle.net/wp-content/uploads/2006/10/inlinePopup.zip|Inline Popup Source File]]

The same code can be accessed here
* [[http://alexle.net/wp-content/uploads/2006/10/inlinePopup/|Demo Page]]