Archive for January, 2010

Load that DOM, please. Thank you!

Get started with 5 different JavaScript frameworks and how they handle DOM readiness.

Frequently there is talk about to check if the DOM is loaded or not when using JavaScript today. There is quite a few ways to do this and it is an interesting story to read up about the origin of “DOM ready”. We should just be thankful that we don’t have to think about this on a everyday basis and that guys like John Resig does what he does and just hands it over to us. So we can play with it and build businesses around it. Thank you all JavaScript framework creators and contributors.

There is a whole bunch of great JavaScript frameworks and libraries out there, with various specialities and pros and cons. I mainly use jQuery, Prototype and sometimes I play with YUI. jQuery and Prototype aren’t that different from each other on a high level and easy to get started with. YUI on the other hand requires a bit of more knowledge and works a bit different. Despite your choice of JavaScript framework, there is one thing that we all want to know when getting started with one. How to check if the DOM is loaded.

We’ll look at how to check if the DOM is loaded in five different JavaScript frameworks; Dojo, jQuery, MooTools, Prototype and YUI 3. First out is Dojo.

DOM readiness in Dojo
Learn more about Dojo’s addOnLoad

dojo.addOnLoad(function(){
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello Dojo! DOM is loaded!');
}

DOM readiness in jQuery
Learn more about jQuery’s ready

$(document).ready(function () {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello jQuery! DOM is loaded!');
}

DOM readiness in MooTools
Learn more about MooTools DomReady

window.addEvent('domready', function() {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello MooTools! DOM is loaded!');
}

DOM readiness in Prototype
Learn more about Prototypes document observe and loaded

document.observe("dom:loaded", function() {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello Prototype! DOM is loaded!');
}

DOM readiness in YUI 3
Learn more about YUI 3′s domready

YUI().use('node', function(Y) {
 
    function init() {
        // The DOM is ready, lets say hello!
        say_hello();
    }
 
     Y.on("domready", init); 
});
 
function say_hello() {
    alert('Hello YUI 3! DOM is loaded!');
}

Simulate download speeds on your local machine with Sloppy

Sloppy provides a great way to test locally how your web site or web application works and behaves when accessed using very low bandwidth. For example via a dial up connection, mobile phone or mobile internet via 3g modem. Sloppy is easy to use, just run the java file by double clicking on it. Are you a windows user you might need to install Java. OS X and Linux users should be just fine.

Download and learn more about Sloppy on the following url:

http://www.dallaway.com/sloppy/

In todays world of broadband most web developers, web designers and people who work with the web in general doesn’t think about bandwidth as much as they should, since most of them work in countries with great infrastructure and have access to really fast internet connections. But even in countries like Sweden, Germany, France and UK where a large part of the population have access to fast broadband, there is a lot of people in these countries who doesn’t have access to broadband for one reason or another. And no, 1mb line, doesn’t count as broadband.

So this is quite an important topic, even if the days of dial up connections are long gone for most of us. The increase of accessing web services with handheld devices like mobile phones or using mobile internet via USB dongles is getting more and more popular by the minute. Not to mention the cost and ridiculous pricy data plans the operators are providing, it might be more important than ever to make highly accessible and bandwidth savvy web sites and web services.

Sloppy can be used for more than just see how fast a web site loads on a slow connection, it is also a great tool to see how JavaScript behaves and work on slow connections. Happy slow localhost surfing!

Zend Studio 5.5 in Snow Leopard

Sometimes you just have to brush off those PHP skills for some project updates or for a client that uses a PHP based platform. This was the case for me the other day. I’ve upgraded to Snow Leopard just before Christmas and the little PHP work I’ve done since then and now I’ve taken care of in TextMate.

I was not happy to see that there for some reason was a major display rendering problems in Zend Studio 5.5. I’m not a big fan of the whole Zend Eclipse thing. I have a commercial license for Zend Studio 6, but will not upgrade to Zend Studio 7. The 5.5 version is still leaner and a lot easier to use than Eclipse. Might just go over to NetBeans instead.

A quick google search showed that I was not the only one having this problem and that there was a few good solutions and explanations on why the display rendering problem occurred. There are also some other kind if problems reported here and there.

The main problem is that Apple removed Java 5 from Snow Leopard, in some ways it make sense, in other it doesn’t. The solution is easy, download the Java 5 package, put it in the right folder and change the symlinks. Open up Java Preferences and change the order in which the versions are loaded. I went with the first solution below and it works just fine. There are a few other solutions, I found those less clean, but they seem to work as well.

Solution 1 (I used this one)

http://wiki.oneswarm.org/index.php/OS_X_10.6_Snow_Leopard

Solution 2

http://daveyshafik.com/archives/721-fixing-zde-5-5-in-snow-leopard.html

Solution 3

http://chxor.chxo.com/post/183013153/installing-java-1-5-on-snow-leopard

Check for ajax requests in Pylons

In todays world of web development Ajax is taken for granted and there is a ton of good JavaScript frameworks out there that makes Ajax development quite easy and enjoyable. Together with a nice MVC framework it is even better. Each framework has its own way of detecting Ajax calls or more correctly xmlHttpRequests, which is a huge topic on its own.

For checking if a request is an Ajax request in Pylons you just use is_xhr in your controller, this is based on the fact that you are running your Pylons app as wsgi.

Make sure your importing the request class

from pylons import request

Then in your controller function you can just do

# Checks if request is a xmlHttpRequest (Ajax) and returns a def
if request.is_xhr:
 
# Code goes here
 
return render_mako_def('template_path',"def_name")

You can also return and render a full template if you need or think that works better with your function.

More information can be found at PylonsHQ Paster – Documentation – WSGI, CLI scripts

Git autocomplete in Mac OS X

I always liked that my Git installations on Unix and Linux comes with the contrib/complete/git-completion.bash script activated or easily activated. But its harder if you use the pre-built binaries for Mac OS X.

To get autocompletion to work on Mac OS X when installing the pre-built binaries do this.
UPDATE: 2013-08-07New URLs to Github. Thanks to fabb.

1. Download the completion script from Github

curl https://raw.github.com/git/git/master/contrib/completion/git-completion.bash -OL

2. Add the following to your ~/.profile or ~/.bash_profile

source ~/git-completion.bash
alias gco='git co'
alias gci='git ci'
alias grb='git rb'

3. Add the following to your ~/.gitconfig

[alias]
co = checkout
ci = commit
rb = rebase

Restart Terminal and start Tabbin’!

More Git tips that I found usefull can be found on Tim Dysinger’s blog http://dysinger.net/2007/12/30/installing-git-on-mac-os-x-105-leopard