matt laine dot com / blog

Archive for January, 2009

Domlets – bookmarks gone wild

by on Jan.23, 2009, under web development

Javascript bookmarklets have been around for quiet some time. In fact, most of the posts on bookmarklets.com are from the Netscape days. That said, I’d like to introduce a new way of looking at javascript bookmarks that I’m calling “domlets”

What’s a Domlet?

Domlet is a blend of DOM (or the Document Object Model that comprises a webpage) and bookmarklets (or favlets if you an IE-user). Domlets are used to manipulate the DOM using javascript to frame in a new content window.

Here is an example domlet for digg.com.

Another for twitter.com.

Domlets have only been tested on FireFox on Mac and Windows, and Safari on Mac. I’m hoping to have a version worked out for IE in the next few weeks.

How it works

Now for some technical stuff: the realization that you can execute javacript via the location or address bar was what lead me down the path of developing domlets. Web developers are usually well versed in bookmarklet tools like Visual Element which allows you to inspect the DOM for javascript events. Other sites like ma.gnolia.com incorporate use a bookmarket UI for social bookmarking, in that, any given page you are on, you can click the bookmarklet to view community comments or conversations related to that page.

What these scripts have in common is that they use the initial javascript to attach a script to the document.body node. Once attached, the script calls the function to initialize the script and perform whatever DOM-magic ensues. Domlets has a similar initialization approach. I also found that I had better success with my bookmark code if I attached the script using a self-executing function like this:

javascript:(function(){…script sniffed and attached here…})();

Also, I decided to use an object literal ‘Domlet’ to encapsulate my function names, thus avoiding any namespace issues I might have with scripts already loaded in the DOM. Here is the basic skeleton of a domlet:

var Domlet = {
defaults,
init : function(){},
addFrame :function(){}
}
…more functions here for animation and closing the frame
Domlet.init()

Lastly, I debated over whether or not to utilize a Javascript library for the domlet, but ended up not using a library and wrote everything myself (hence all the cross-browser bugs!). Had I used a library, I would have used JQuery, since the ‘min’ library is very light and I could easily implement it to create the same effects. In fact, this project was mainly inspired by the JQuery page-slide plugin, which uses a similar method of “wrapping” the page content and “throwing” it to the side to reveal a new content window.

Mobile Content Works Best

In formatting a domlet, I’ve chosen to capitalize on the growing number of mobile micro sites that are optimized for less than 320 pixels wide. There are several reasons for doing this; one is that I can simply iframe in the address of the micro site, like m.digg.com and m.twitter.com for the examples above. Another reason is to enable users to browse content formatted for mobile phones using their regular browser. I call this behavior “micro-browsing”. Often times, I just want to peek at my gmail or update my facebook status, but without opening up a new tab or leaving the page (pretty lazy, huh?). With domlets, I can simply load these micro-sites in a new pane and close it when I’m done.

As the web goes mobile in the next coming months, developers and users should establish standards for thinks like view-portal dimensions and CSS media types. What will be interesting is if/when developers and users decided on a standard, will micro-browsing really takes off as a behavior? Regardless, I hope that in developing domlets, I can encourage the development of a standard, i.e. one that works on your mobile and that domlets can render in your normal browser. Already, I think there are some 50+ mobile browsers, so settling on a standard will become increasingly difficult with time.

3 Comments :, , , more...

First, there was the post

by on Jan.20, 2009, under Uncategorized

Then there was the blog

Hi, there. Installed wordpress on my site so that i can easily write documentation for the projects i’m working on. Honestly, the hardest part about installing WP is choosing a theme!

Just for kicks, here is a little playlist for ya.

Leave a Comment : more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...