Get Into This

I was recently asked by a coworker if it's possible to create the left hand menu on the following page w/o using Flash.

My first impression and response was, "Oh hell yeah, you can definitely create that using javascript!"

Libraries such as Script.aculo.us, Yahoo UI and Moo.fx immediately came to mind. A few simple event handlers for mouseover and mouseout and simple animations would do the trick. well, nothing's ever simple.

I was able to get most of the funcationality of the Flash version of the menu, except for the part where the menu collapses when you move your mouse out of the menu region. For some reason, the onmouseout that I had attached to my DIV was being fired when the mouse pointer would go over a link within the DIV. I tried for many hours to avoid this, but finally gave up and put a "close" link on the bottom right corner of the menu to close it. I'm sure someone out there can fix this. I thought about using the mouse coordinates to detect whether the mouse pointer was outside the menu, but I really didn't feel like it :-P

Anyway, here is the final example.

And here is the source zipped up (includes scriptaculous 1.6.2)

In a few days, I will be moving this domain to a new server. I will either be upgrading to WordPress 2.0.x or giving the Ruby on Rails powered Typo a shot. Haven't decided yet.

As long as we're moving things over, I think its time for a facelift on the site as well! Stay tuned.

Javascript is becoming more and more important in today's web sites. With all the hype around web 2.0 (whatever that means), AJAX and Rich User Interfaces, developers will need better tools to work with Javascript. Here are two recent tools that I found to be extremely helpful:

jQuery

jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.

An example:

$("p.surprise").addClass("ohmy").show("slow");

The above code snippet looks for all paragraphs that have a class of 'surprise', adds the class 'ohmy' to them, then slowly reveals them.

FireBug Extension

FireBug is a new tool for Firefox that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.

Due to the Transit strike, I decided I should try walking to work from Brooklyn. I mean, people ride their bikes from BK to Manhattan all the time, how far can it really be? I left my house around 10:15 am, stopped at a local deli and got a nice egg, ham and cheese sandwhich and started my little journey across the Williamsburge bridge with my roommate. 20 minutes into it and my lower leg muscles were starting to hurt a little bit. I think it was because of the uphill climb to the arc of the bridge. Once we passed that part, I was totally fine. Two hours later and I finally made it to work. All in all not a bad walk.

This brings us to Wayfaring.com:

With Wayfaring.com you can explore maps created by others, or create your own personalized map. Share them with friends or the whole world.

And that is exactly what I did. I signed up, which took about 2 minutes and started to create my own custom map. This is a feature that I REALLY wish Google maps had already. Being able to plot multiple points on a map is a really nice feature. Being able to plot out a whole route and share it with the world is even cooler. I think this is a great service and very easy to use. Here is the map of my transit strike journey to work from Brooklyn.

A group of about 30 web startups have put together an initiative called the Structured Blogging Initiative, in an attempt to bring some order and standardization to the blog-o-sphere. What is their meaning of structure? According to the site:

Structured Blogging is a way to get more information on the web in a way that's more usable. You can enter information in this form and it'll get published on your blog like a normal entry, but it will also be published in a machine-readable format so that other services can read and understand it.

Think of structured blogging as RSS for your information. Now any kind of data - events, reviews, classified ads - can be represented in your blog.

Structured Blogging makes it easy to create, edit, and maintain different kinds of posts and is very similar to an edit form on a blog. The difference is that the structure will let users add specific styles to each type, and add links and pictures for reviews.

This opens up a whole new world of collaborative sharing of information, beyond the boundaries of what is possible and available right now. Imagine blogging about the sale of your 1949 Ford Mustang and having that information automagically posted up on multiple forums and picked up by specialized search engines (like technorati) that search blog sites, but being able to filter your search by model, year, price, etc. Another quote from the site explains it:

Using Structured Blogging, job listings can be created, posted, searched, and found by any service; buyers and sellers of goods can publish what they want to buy or sell and have those posts searched and listed by any number of search services.

Visit the Structured Blogging site to read more