iBegin Blog

Just saw this implementation of iBox, and I thought it was worth the linkage: TNHC Testimonials.

I’ve mentioned a redesign the site will be going through, but as I have looked more closely at what needs to be done, it is shaping up to be bigger than just a redesign.

To take a step back - iBegin is doing well. I am happy that we decided to eschew the hype / stealthmode routine. I am happy that I have declined every VC that has come our way. I am very happy with the current traffic level. While nowhere near as large as we want to be, we should receive 150,000 unique visitors for the month of July. Considering we are not even 4 months old, I am very happy with the execution.

The current ‘problem’ we suffer from is that the site has grown larger than its original design (both aesthetic and feature-wise). Events, Highway Traffic, Explorer - they were sections and ideas implemented later. The user profile system has grown from something sparse to something with a bit more meat. And the next revision should definitely up the ante in helping making it more personalized.

I am hoping that everything will be ready by (roughly) July 15 - it should be well worth the wait.

Best of all, once v2 is up and running and the new servers are in place, we can (finally) start expanding to new cities. Hullo USA

UPDATE March 11, 2008 iBox v2 is now out. Get it now!

UPDATE August 18, 2006: Just uploaded a new version (1.2.1) of iBox. Only file updated is ibox.js

UPDATE August 15, 2006: Just uploaded a new version (1.2) of iBox. Only file updated is ibox.js

UPDATED June 27: Just uploaded a new version that fixes the problems mentioned in the comments section. Please re-upload ibox.css and ibox.js

I use Lightbox (v1) on iBegin. It is a great way of loading images without reloading a page. I did have to modify it for my needs (more on that later) but it fit the bill.

Then one of my friends (Amir, who has created some wonderful stuff - read his blog) showed me GreyBox. Wonderful concept - take Lightbox, and extend it to content. This would be useful to me as on the frontpage of iBegin Toronto we use an inline popup for search tips.

Then I ran into Thickbox. A very nice implementation, it pushed the envelope further by letting you pull in a page and even specify height and width. Sheer brilliance!

Yet none fully fit the bill of what I needed. All had one common problem - they assumed JS was enabled. For example, lightbox popped an image. For a non JS user, they ended up at an image. This is where I had to modify Lightbox - a user with JS enabled saw the image properly load - a user without JS enabled was forwarded to a page that still had all the necessary navigation links and so forth. The Thickbox example for a login box was great, but again, what if JS was disabled? You ended up at a page that was rather ugly.

Furthermore, both Lightbox (v2) and Thickbox needed external libraries. And in our case (and I imagine others too), while Scriptaculous and Jquery and so forth are very nice, I really had no use for them.

And so I introduce iBox.

Some benefits of iBox:

1. Size. The Thickbox link above mentions this, but we take it even further. The total JS is under 11kb.

2. Versatility. Images, inline divs, and external HTML pages - iBox can load any of the three.

3. Support for non-JS users. Eg Login means ibox-login.html pops up for JS users, and a proper login page (login.html) for non-JS users. This was our biggest motivation in creating this - there are enough non-JS users that supporting them is important.

4. Compatibility - the script is self-contained. It won’t break if you use prototype, moo.fx, scriptaculous, etc.

I have included how to use inside readme.txt. Suffice to say that it is very easy to use.

Demo: click here
Download: click here

License: MIT Open Source. All we ask is spread the word (and let us know about any bugs).

Read the post on what was updated.

Our next little module, iBox, should be ready soon.

UPDATE June 14: Just uploaded the updated version of the mechanism.

The follow changes are in place:
1. You need to click on the feedback to make it popup
2. There is a field for adding comments
3. Rating increases left to right
4. There is a fadeout in Mozilla. IE we haven’t been able to get it working right.

There are a few misc tweaks (eg you can now click on the feedback image to close it again). The JS has also been cleaned up - the download includes a compressed version and an uncompressed version. You can tweak and set variables easily also.

– End Update June 14

One thing that I have always tried to solicit as much as possible is user feedback. For example, when a user signs up for Toronto, they get a personalized email from me, complete with my actual email address. I want to make it as easy as possible to give feedback.

So a few weeks ago I was thinking how people are using our site, but I have no clue what their feelings are. Are the results good? Great? Craptastic? Repeat visitors are not a good measurement either - I used to visit Toronto.com a lot, but only because they were really the only game in town. Did I like their site? Not really … but I kept coming back out of necessity.

So we set out to build a quick and easy feedback mechanism. A little floater/popup that lets you quickly rate a page. All AJAX driven of course.

Nicely packaged (it requires minimal HTML editing, and can be fully manipulated through CSS) I give you: AJAX Feedback Mechanism.

On pageload, the JS is executed through an onload statement inside the tag. It finds the proper div (in this case feedback_wrapper) and puts in the HTML there. Then as the person browses around the page, it hovers gently in the bottom right.

Open hovering over, it opens up a little dialog box (which you can control through feedback.css).

Upon clicking on a rating, the AJAX comes into play - the user response is sent to feedback.php, the entry is stored, and a thank you message is given. A cookie is also set so that the feedback system won’t show again (in the case of the demo this is disabled).

Quick links for those that skim through posts:

Demo: taken down for now
Download: taken down for now

Thanks to Jayson for his great work in getting exactly what we needed.

Point #5 - Speed kills. Except on the Web.

I’m pretty obsessed about load times and simplicity. The new iBegin design (which I mentioned in my last post) is very focused on simplifying the site so it truly feels like a search engine.

At the same time, I was looking at the frontpage’s HTML and was not too happy. The original CSS and then the subsequent tabs were done by two separate people, which meant there was a bit of overlap and waste. So when I stumbled into the brilliant Websites as Graphs and saw the soup that was iBegin, I was none too pleased.

So we went back to the drawing board, and the design was re-sliced and the JS re-done. The net savings were roughly 1.7kb. The HTML was shrunk by roughly 1kb, the JS by 1kb, but the CSS grew 300 bytes.

Using the Website Graph, the page structure also came out simpler:
Old/Current page
New page.

You can clearly see the newly done page has a lot less nodes. Less nodes = I’m a happy camper.

I had a friend of mine do some pageload testing from Ottawa (the servers are in Toronto). The time to load went from an average of 0.560 seconds to 0.485 seconds. That comes out to roughly 15% faster.

On a related note, I am hoping to have the new design and V2 of the Googlemaps API implemented in roughly 2 weeks.

I’ve been thinking for a while what sets iBegin apart. The original design never considered events, The Explorer, highway traffic, and other additions to the site. With that in mind, a re-design is being prepared. It is a week or two off, but it should help streamline everything. It should also help push us further away from all the ‘web 2.0 local search’ companies out there

One of our users alerted me to the theMAP.ca. An unofficial program, it aims to convince businesses to give discounts to Metropass owners. A student card for grownups, if you wish.

Looking at the list, I spent about 5 minutes tagging each place with ‘metropass’ (and adding a few establishments). The end result: easy to use map of supporting establishments. No extra coding needed, no complicated sequence - just a few minutes of adding tags and listings.

The new servers for iBegin (slated for its expansion) have been ordered. Featuring dual dualcore Opteron 265 CPUs, the web servers have 4GB RAM + 2×72GB 10k RPM drives. The DB servers have 16GB RAM + 8×150GB 10k RPM drives. Should give us enough juice as we gear up.

Mind you, there is still quite a bit of work to be done - I am aiming to have expanded into Ottawa by July 15.

Also fixed a bug the server had with sending outbound email.