Pythoneer

The plan for May 31st, 2008 is

15:00 meet at Weltzeituhr, as mentioned on upcoming, more info and a pic see here. When you are on Alexanderplatz you should find this clock pretty quickly.

19:00 - 22:00 we will be in Las Olas
and afterwards go to some bar, club, whatever we find, if you didn’t make it to join us until 22:00 your chances are only to search all of Berlin’s nightlife. Or catch one of us in the IRC channel #dojo before and get a mobile phone number (our nicks are klipstein, nonken, mccain).

And I will have a couple of T-Shirts with me, so be prepared to get undressed

see you

Actually the headline is not really what I want to say :-). But I don’t know any better yet.
I just want to write down how I solved sorting the following:

>>> var maxSpeed = {car:300, bike:60, motorbike:200, airplane:1000,
    helicopter:400, rocket:8*60*60}

This is a list of vehicles with their (approx.) max speeds. And now, I would like a list of the vehicles sorted by their max speed. This looks sooo easy, and actually it is :-). You just have to know how.
Look at this:

>>> var sortable = [];
>>> for (var vehicle in maxSpeed)
      sortable.push([vehicle, maxSpeed[vehicle]])
>>> sortable.sort(function(a, b) {return a[1] - b[1]})
[["bike", 60], ["motorbike", 200], ["car", 300],
["helicopter", 400], ["airplane", 1000], ["rocket", 28800]]

Since the sort function takes an extra argument, that allows to do your custom comparison we simply make sure that the right stuff gets compared, which is our speed. Unfortunately we can not sort the object directly, it has to be an array for doing so. But you can now convert it back, or just extract the vehicles, like so:

>>> dojo.require("dojox.lang.functional")
>>> vehiclesSortedBySpeed =
        dojox.lang.functional.map(sortable, function(i) {return i[0]})
["bike", "motorbike", "car", "helicopter", "airplane", "rocket"]

Didn’t I say it was easy?

Yesterday another one of my contributions found it’s way into dojo: dojox.widget.Rating. You can try out the always latest version online in the dojo archive. It’s quite a simple form widget, that allows you to click a star for rating an item. The number of stars and the styling can be adjusted via images and CSS.
If you want an even more flexible way to customize the stars you should look at what Tobi has to offer with his SVG generated stars, they come in many more flavors!

I just found eye-fi via the Sitepen blog. Just mix wifi and a flash card and you got more spare time and less cables hanging around. Cool.

I guess by now everyone knows that the dojo version 1.0 had been released yesterday. I will closely follow the dojo development, since I think this is the most promising JavaScript framework out there.
Let’s hack on …

Sometimes when you want to do something right and you are lacking the tools you write them (but very often I don’t ), but in the case of doctests for dojo I saw the need. This time I took the time to write a doctest-class for dojo. It is currently only a ticket in the dojo trac, but some feedback looks pretty promising.

I saw the Ian Bicking had already once written a doctest module, but after skimming over it and thinking about the task, I decided to write it from scratch and a pure dojo fit, since it surely is not much work (as it also turned out, which is a rare case).
I knew the doctests module from the Python, where it obviously also comes from. In the beginning I found doctests ugly, those huge chunks of console-pastes inside my docstring. But after getting to know the value of the doctests by learning django’s newforms completely by a huge doctest I felt what they can do and that they can really help a lot.
Doctests just make you understand the code in the place it is written. If you (as I do) often look into the sources it can be really helpful to see a programming example right there inside the docstring of the class/method/function.

To make it short, I implemented this for JavaScript and it works nicely. I am actually developing a dojo.data-store but in order to do that I needed doctests, that’s where the need came from.
One of dojo’s base functions might look like this now:

dojo.trim = function(/*String*/ str){
	// summary: trims whitespaces from both sides of the string
	// description:
	//	This version of trim() was selected for inclusion into the base
	//	due to its compact size and relatively good performance (see Steven Levithan's blog:
	//	http://blog.stevenlevithan.com/archives/faster-trim-javascript).
	//	The fastest but longest version of this function is going to be placed in dojo.string.
	// examples:
	//	>>> dojo.trim(" trim me ")
	//	"trim me"
	//	>>> dojo.trim("\t\ttrim me ")
	//	"trim me"
	//	>>> dojo.trim(" \t\t trim me \t ")
	//	"trim me"
	//	>>> dojo.trim("trim me")
	//	"trim me"
	//	>>> dojo.trim(" trim me")
	//	"trim me"
	//	>>> dojo.trim("trim me ")
	//	"trim me"
	//	>>> dojo.trim("")
	//	""
	return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');	// String
}

You can see more examples here and here (search for the doctest starting with “>>>” and you will find some).
Below “examples” you can see the inline doctest. I really just wrote those tests in the FireBug console and copied them later into the code.

Run doctests
The trac ticket in dojo including the files and some info you can find here. You can download the patch right here.
First apply the patch, so that the dojox.testing.DocTest module is available.
This patch containing the doctest class is though to be a part of dojo, so it currently requires that you have a dojo module or a module that you registered with dojo (dojo.registerModulePath()).
To run i.e. the above shown doctest you just need to know in which file (module) it is (dojo._base.lang in this case) and type the following into your FireBug console:

>>> dojo.require("");
>>> var doctest = new dojox.testing.DocTest();
>>> doctest.run("dojo._base.lang");

It will then print out a line for each test in the FireBug console with the result and some info. In the before case it looks like this:

...
Test 44: OK: dojo.trim(" trim me ")
Test 45: OK: dojo.trim("\t\ttrim me ")
Test 46: OK: dojo.trim(" \t\t trim me \t ")
Test 47: OK: dojo.trim("trim me")
Test 48: OK: dojo.trim(" trim me")
Test 49: OK: dojo.trim("trim me ")
Test 50: OK: dojo.trim("")


Embed doctest
You can also embed the doctests into other test modules, i.e. if you are just want to add the doctests to your unittests and get them all as one result. You can simply check the property errors of your doctest instance:

>>> doctest.errors
[]

As you can see if there are no errors it’s length is 0.
You can see an example of how to do that here in the file data/tests/stores/QueryReadStore.js the first function testDocTests() runs the doctests of the module “dojox.data.QueryReadStore” and verifies that there are no errors.

I hope this will be useful to some people. Let me know if you have any kind of feedback, bugs or whatever. In the class itself you can see that I have also already thought of some things that need to be done/added to this class. Have fun doctesting …

The titles of the videos look very much like “must watch”. Found via ThinkPHP, thanks.

Yesterday was such a cool day, it was impossible to screw it after Minh had told me that I can simply use

    debugger;

inside my JavaScript code and the browser stops at this point and opens the debugger, the Firefox (including Firebug of course) and the IE of course too.
That is such an awesome discovery :-). Especially when using a project that uses a couple hundred JS files and where finding the right file and setting a breakpoint can really be pain in some place.
Happy hacking …

Your royal highness doesn’t like you finding royal places in the royal UK *cough*. How dumb is that. Therefore use a way around, as described very extensively on Tom Anthony’s blog in the article Geocoding UK Postcodes with Google Map API. Thanks Tom!

Thanks to this blog post I got it running, though I was not less than five hours hunting. Gee, I wish there was a tool which would let me find the shortcuts to the solution of any problem :-).

After we had followed all the install guides and double and triple checked everything those were the tweaks we needed to do to get it really running:

Edit OpenFire properties - Log into OpenFire as an administrator and add two server properties:
xmpp.httpbind.client.requests.polling = 0
xmpp.httpbind.client.requests.wait = 10
These are required because of a bug where JWChat won’t respect the polling values given to it by the server.

happy chatting away …

Just so I remember this, doing “.class:hover .class1″ you also need to define a “.class:hover {border:none;}”.
More details here.

There are situations when you are hunting a bug and you got the feeling that it actually is no real bug, it’s just a typo or something as simple, but you just can’t find it. So I better write that down so next time I am searching for this error message I will get the result right away. Those are the kind of errors that are just nasty but time consuming. Actually it’s a PTS bug, Programmer too stupid bug.

I have written a little class for my current page, nothing fancy and not really any substantial code in there. But somehow I still get this nasty error, that Firebug (btw a must have tool) shows as you can see in the image.

dojo.declare("myproject.page.ideas", myproject.page,
    function(pageData) {
        // initialize the class here right on it's instanciation
    }, {
    onPageLoaded:function() {
        // Is being called by the parent class, when dojo.addOnLoad() hits.
    }
});

var page = myproject.page.ideas({});

At some point you are getting blind looking at you code, and so it was here. The problem is very simple. I forgot the “new” before the class instantiation (let’s not discuss if it is a class, object, type, …).

var page = new myproject.page.ideas({});

Just so I know where to look up this rare problem. Because I know I will stumble over it again and search the web again though I had found the solution already once before, just don’t remember where

     /* This is ONLY for IE, since the following rule wont work without this one here.
      The IE requires just something here in the "a:hover" before it works with a child selector behind it. */
    #regionContainer a:hover{
        text-indent:0;
    }
    #regionContainer a:hover span {
        display:inline;
    }

Thanks to this guy’s post.

Oh yes, that had hit me quite often too. Even though I was only using a background-image in my simple CSS:

a.section {
background-image:url(/img/arrow-right1.gif);
background-repeat:no-repeat;
background-position:center left;
}
a.section.open {
background-image:url(/img/arrow-down1.gif);
}

As you can see, when I add the class “open” to an element, the background image is replaced with another one. IE unfortunately does a server request for this image every time. How dumb!

Here is an extensive article, covering and solving this problem. Unfortunately there is no client side fix, you gotta touch the server.

Since IE (version 6) is still widely used, sad enough, we have to make things work there. The Microsoft devs had not been friendly by releasing this monster. Geee, there are enough things that make IE crash and now I am searching for the reason why mine crashes when it receives a back tick as content somewhere or if the reason is another, but surely it’s the content of the page. If that takes so long it’s no fun anymore, I am just searching the web for how to solve this and that problem.
Also I let dojo do some eye candy but as usual IE makes it a problem. I guess my layout structure is too complex for the IE, so I will probably need to use less margins and floats for the main content elements. It doesn’t get boring

It’s impossible, how much additional work the most used browser is putting on a web dev. I think during the last four weeks I have been wasting at least 30% of my time searching for workarounds for IE. This is really becoming a drag.
One simple thing I was searching for today, was how to replace an image’s src attribute with a new value, a new image so to say. I implemented he most obvious way, of course.


var img = dojo.byId("“);
img.src = “/new/img.jpg”;


This doesn’t work in IE :-(. Some pages had some tips on workarounds, but they are all quite ugly or not feasible in my case. So I took the next obvious turn and replaced the image like so.


var img = dojo.byId("“);
var newimg = new Image();
img.src = “/new/img.jpg”;
dojo.dom.replaceNode(img, newimg);


In this example I am using dojo to do the DOM work, you can do this by hand of course too.
The only tiny problem left, is that it flickers a little bit in IE, when the image changes. But currently that is not bothering me. But if you got a simple solution let me know. (I know you could overlay the new image, replace the old one remove the overlayed, and so on, but currently that does not seem worth the effort for me.)

I jus thad the problem, that I update my site on certain events and sometimes this site also contains some dojo widget. No I had the problem that this widget was not rendered again, to become eg. a nice combobox. After following the trail of djConfig.searchIds and trying it I can tell you that the following piece does the trick:

var parser = new dojo.xml.Parse();
var frag = parser.parseElement(dojo.byId("“), null, true);
dojo.widget.getParser().createComponents(frag);

The only thing you need to know is the of the element that you want to be parsed. To me that looks like it should be one simple function, since it doesn’t sound like a very uncommon functionality.

I had created a custom package with the name “my.seqctrl”, creating one is as easy as

dojo.provide("my.seqctrl");

my.seqctrl = function() {
   // object code in here
}

Now I included the package wrong and finding the bug took me way too long, I really got pissed. I only got the message:

my.seqctrl is not a constructor

But it is! What I did was calling dojo.require like this:

dojo.require("my.seqctrl.*");

Just watch out to never make this mistake. It looks so right but is so wrong and the error message just points you to the wrong place. I guess that is why the new dojo packages get included in the .* way.

A couple days I just got an email that another one of my dojo patches made it into the source. Nice to see. I had a problem dragging multiple objects along with the actual dragged object. And the events called upon dragging actions had not been decoupled and blocked the drag’n drop code. So that is fixed now, thanks for committing it. I am looking forward for Dojo 0.4.

An interesting approach to make AJAX applications scale: Openfount, read about it here.