Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for June, 2007.

Archive for June, 2007

Collapse Flickr comments – My first greasemonkey script

Friday, June 29th, 2007

I couldn’t sleep because of this bloody cold and thought I give Greasemonkey a go. One of my biggest annoyances in flickr is that when you comment on some very popular photo (normally containing a pretty lady and some nudity) you have to scroll through dozens of long comments in order to reach the next photo and comments. This gets exceedingly annoying when people think it is needed to have images depicting “flickr awards” that are as big as they are ugly.

Anyways, the script collapses all the comments and adds “+” links that allow you to show and hide the list of comments for each photo.

Greasemonkey script to collapse comments

Hope it is helpful, my flickr experience became a lot less aggravating :)

Shortening JavaScripts with Math

Thursday, June 28th, 2007

I just went through an exercise for a DOM scripting course with the YUI and had the task to write a function that takes any element and centers it at the current cursor position. I also wanted to make sure that the displayed object never causes scrollbars or gets cut off when the cursor is too high up the document.

Getting the size of the object and the browser constraints was easy with the YUI. I sent the object as o and e is the event:

var size = YAHOO.util.Dom.getRegion(o);
var oHeight = size.bottom –;
var oWidth = size.right – size.left;
var screen = [YAHOO.util.Dom.getViewportWidth(), YAHOO.util.Dom.getViewportHeight()];
var curpos = [YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)]

Now I had the problem of keeping the values in the constrains. Centering the element was easy, you just substract half of the height from the vertical position and half of the width from the vertical cursor position.

var x = curpos[0]- oWidth/2;
var y = curpos[1]- oHeight/2;

I then had to compare both with their constraints and set them to the appropriate values, which was a lot of if statements:

if(x < 0){
x =0;

if(x + oWidth > screen[0]){
x = screen[0] – oWidth;

if(y < 0){
y =0;

if(y + oHeight > screen[1]){
y = screen[1] – oHeight;

clunky, and I shortened it using the ternary notation:

var x = curpos[0] – oWidth/2;
x = x < 0 ? 0 : x;
x = x + oWidth > screen[0] ? screen[0]-oWidth : x;

var y = curpos[1] – oHeight/2;
y = y < 0 ? 0 : y;
y = y + oHeight > screen[1] ? screen[1]-oHeight : y;

lt felt terrible. I then remembered the Math object in JavaScript and that it has two methods that are terribly useful in this case: min() and max(). Both return a value that is either the smaller or the larger value, which means you can use it to constrain a value to a certain range. Using Math, the whole logic can be done in two lines of code:

var x = Math.min(Math.max(curpos[0] – oWidth/2, 0), screen[0] – oWidth);
var y = Math.min(Math.max(curpos[1] – oHeight/2 ,0), screen[1] – oHeight);

That is not the end of it, though. If you know that you should get back a number, you can use max() to normalize browser differences, like the Dom utility of the YUI does:

var scrollTop=Math.max(doc.documentElement.scrollTop,doc.body.scrollTop);

This works around the MSIE issue of reporting different values for scrollTop depending on which rendering mode you are in.

DOM JavaScript Cheat Sheet

Wednesday, June 27th, 2007

I’ve just put together a small DOM cheatsheet for some developers here and thought why not share it and CC it in case it can be handy for you, too:

DOM JavaScript Cheatsheet

Click the screenshot or download the PDF version of the cheat sheet (85KB) here.

The 39 steps – in one step

Monday, June 25th, 2007

Friday I gave myself a treat and checked out the new comedy stage adaptation of Hitchcock’s The 39 Steps. For all the peeps in London: go and see it, it is well worth the money and seeing 4 actors play about 12 roles switching costumes, props and accents at a terrible speed was something I hadn’t seen before. The creativity of using very limited means to give the impression of a large range of sets (indoors and outdoors) was a joy to see and reminded me a lot of the stuff we have to go through daily to make things work on the web.

Coming home I wanted to see the movie again, and ordered a copy of the DVD second-hand on amazon (after having struck out at all the small DVD stores in Soho – yes the ones that cover the basement porn shop with old DVDs and books on the upper floor). Right after I ordered the DVD I remembered though that I could have saved myself the hassle, as movies as old as The 39 Steps (1935) are very likely to be available online for free. Of course there will be illegal torrents of DVD rips, but you can get old black and white classics legally at, too. Here’s a short list of what you can download in various formats (ogg, Mpeg, Mpeg2, divx):

Hackday aftermath

Friday, June 22nd, 2007

Oh yeah, the Open Hackday London is over and it was a blast. I will spare you the bad puns about the lightning strikes (bad enough that I did the graphics for Simon Willison’s shenanigans on the topic) and instead say that I had a lot of fun and it was great to see all the hacks and meet people.

As part of the organizing companies I wasn’t allowed to come up with an own hack but I was happy to do my share by finding the right people to talk to each other, and helping one of the winning teams battle the tag-soup that is called BBC news (I never thought innerHTML on all FONT elements would be the only way to scrape a news item, but I was wrong).

Nate’s and my presentation on the YUI seemed to have gone down rather well, although I must say that I didn’t hear what I said, but instead what the speaker next to me had to say, which can be a bit distracting. I hope the audience got all and random probes later on validate that assumption.

The hack spirit was omnipresent, as my wiki on business reasons for web standards was promoted seamlessly from quick internal repository to official hack schedule during the presentations. This was a bit of a surprise, but it held up and people are using it now to put up details on their hacks and also help me battle the spam and abuse of the repository. Cheers for that lads.

I went through the whole list of hacks for internal presentations and I am still amazed at the quality of them. Not necessarily in terms of perfect presentation (I am wary of perfectly designed interfaces that are allegedly done in two days – although I saw one of them happening) but in terms of ideas. The ever so present “we put some data on a map – wahey mashup!” was not present at all but people came up with really interesting concepts and attacked old issues in new ways. Some highlights are pixeldiva’s Yahoo Buzz RSS to knitting pattern hack, a community steered blimp (I still think this one needs a camera and you should be able to control it with a mobile), the three stage rocket propelled by water pressure, mentos and pepsi light, a fully unit tested social network content aggregator by James Aylett, an AI eliza bot for myspace and and and…

It was also interesting to see how many different companies sent people there. were present, one of my favourite small new media companies, MTV sent some people and even the New York Times Research Department was there and won a Wii to take home (guys, the outlet won’t fit, just leave it with me!).

My proudest moment was seeing the organizers of the US Hack Day and senior people inside my company being not only pleasantly surprised by the amount of people showing up and the quality of the hack but being thoroughly speechless. We’ve surely put the UK on the map for events like these even if it isn’t a good idea to put up a tent on the lawn and I hope we can do a lot more of this throughout the UK in the nearer future.

The only differences I’d have liked to see:

  • Real coffee – instant coffe brings out the evil in people
  • Band on Saturday night – a lot more people would have seen them as most had to leave to catch trains home
  • Steadier wireless – but then again, maybe that made people hack more and surf/blog less

Time to wrap up and write some more internal stuff about this.