Example

If you're using Firefox, here's an example of the jittery effect that is produced by standard CSS transition code:

Click inside the picture to start the effect. Click again to reverse. It has a very basic setup using CSS3 transitions to scale the image to 200% when clicked:

.kenburns img {
    transform-origin: 20% 80%;
    transition: transform 30s linear;
}
.kenburns img.zoom {
    transform: scale(2);
}

If you're using Firefox, the effect is currently unpleasantly jittery. I tried lot's of things to fix that, even going to standard JavaScript based animation but I couldn't get rid of the feeling there's probably a very simple fix.

The fix

There is a fix! After some experimentation I figured out that if I added a slight rotation to the effect, it became smooth as butter. Even if the angle is so small you can't even see the rotation it still has a remarkable effect.

Much better, and all I had to do was this:

.kenburns img.zoom {
    transform: scale(2) rotate(0.1deg);
}

Chris is the man behind CSS-Tricks, a very popular website for web developers. At the time I was reluctant to admit to Chris that I had never heard of it but since then I've visited it countless times. A month or so ago, I had an idea for an article about CSS and I asked Chris if he accepts contributions. As it turned out he does.

You can find the article here.

It's about using :before and :after to create the "rounded out" borders at the bottom of a tab control. The technique is a result of some experiments that I did at my new job at Aan Zee. Since they really encourage their employees to share knowledge and expertise I will publish a Dutch translation of the article on their blog as well.

Anyway, I want to thank Chris for making me feel at ease at that conference two years ago as well as for publishing my article. He's an awesome and friendly guy and I really hope I will have the chance to meet him at some future conference.

When you look at this year's speaker lists in Boston and San Francisco you might think that unless you are a jQuery team member or an influential JavaScript developer it's very difficult to become a speaker at these events. As someone who used to think the same I can't blame you and as someone who is an obvious exception to this "rule" I thought it would be a good idea to set the record straight. I'd like to tell you about becoming a speaker, how the process works and what you can expect if you are chosen as a speaker at one of these events.

Becoming a speaker

After talking with a number of visitors of last weekend's event it became clear that even if they had wanted to speak, they had no idea about when and where to apply and when they were explained how the process works the general response was "yeah, but the odds of actually being selected must be very small". As I will explain later, chances are better than you think. First, however, I'll explain the process.

As soon as a jQuery event is announced, via Twitter or the jQuery blog, a call for speakers form is opened. Through this form, you can enter your contact details, the title and a 150 word abstract of your presentation. If you're wondering what such an abstract should look like, the talk abstracts on past event websites are a pretty good indication. You can submit as many proposals as you like.

After the deadline passes, a selection process is started during which all proposals are considered. Contrary to what you might think, the jQuery team members go through the exact same process. From what I've heard of John Resig and the other team members the most important aspect they're looking for is diversity. They want unique angles and ideas so they can create an event with plenty of variation. A direct link to jQuery is definitely nice but by no means required. When the selection process is completed, all submitters receive an email about whether or not they have been selected.

Did I say the chances of being selected are not as small as you'd might think? You'd probably be as surprised as I was to hear that for the Boston event a little less than half of all submissions were accepted.

Being a speaker

The following will be my personal reflection on what it's like to be a speaker but many other speakers have expressed to me feeling exactly the same. For me, receiving the congratulations, you've been accepted email released feelings of tremendous excitement combined with a general sense of OMGWTF because I realized I would have to go through with it now. I was expected to go up on a stage and talk for 45 minutes to a room full of people I never met so I better make sure I have something to say and I know what I'm talking about. It is now time for some serious preparation.

Preparation

If there's anything I want to share with you about this phase it is that preparing for a presentation sucks. Really, it is no fun at all. Depending on what you might be presenting about, there's a presentation document to prepare, there's demos to write and plenty of rehearsing to do. For pretty much every speaker I've encountered this continues until right before the actual presentation and the closer it gets the worse it feels. You will be nervous and it will feel horrible. Take comfort in this, however: as soon as you get up on the stage, the crowd becomes quiet and you begin speaking the nervousness will almost completely disappear.

Being selected

If you're selected you are expected to make your travel arrangements. The hotel and most meals are taken care of by the jQuery organisation. Speakers don't get paid but do get travel costs reimbursed up to about $400. You'll be added to a mailing list for speakers where you can ask any question you have. For the San Francisco conference I used this mailing list to bum a ride from the airport to the hotel from Rick Waldron.

During the event you'll realize how nice the jQuery team is. The people involved are very approachable and do their best to really make you feel a part of it all. You'll have a chance to interact with some of the most influential people in JavaScript development so make the most of it. Being a speaker at these events may involve a lot of effort and stress, but the reward is substantial. This year's events were easily the two highlights of 2010 for me and I cannot recommend trying it once highly enough. If you are interested feel free to drop me a line.

Coincidentally, Garann Means, a fellow speaker in Boston decided to write about her experiences in being a first-time speaker.

Although the presentation was a bit messy (the room's technician hijacked my laptop for a couple of minutes to fix an issue with one of the screens), the framework seemed to struck a chord with many developers. Afterwards it was made very clear by some of them that I should get it out in the open as soon as possible. I specifically asked them "how?" and it was unanimously decided it should definitely be on GitHub. So there you go.

Unfortunately, from the San Francisco hotel I'm currently staying in, I can't seem to get a good enough connection to this site's FTP server or otherwise I would have put up a demo and made my slides available. That will have to wait until I get back to The Netherlands. I will try to start adding some useful documentation as well.

I really hope some people in the jQuery community will pick up this ball and start running with it. Several people at the conference said it could be a useful tool including some jQuery and jQuery UI team members. If you like it, please send some love in eBuddy's direction since they were the ones who allowed me to develop and release it in the first place.

I would like to thank the jQuery team and all the other speakers having me there and making this weekend an unforgettable experience. Hopefully, I can meet you all at another conference in the near future. Perhaps jQuery Amsterdam 2010?

P.S. Ralph Whitbeck and Rey Bango of the official jQuery podcast interviewed me right after the presentation and put up the video as well and I put up the slides as well.

Even though eBuddy's current web messenger is an awesome product and – with over 2,5 million users daily – the most popular multi-network IM client on the web, it definitely has its shortcomings, both for users as well as for the developers working on it. The new messenger has been designed from the ground up to overcome these shortcomings, creating a product that is both easier to work with as well as to work on.

In the future, I'd like to tell you about some of the technical improvements we've made, such as the publish/subscribe based architecture and the custom made automated GUI testsuite. For now, I'll just point you straight towards web.ebuddy.com and hope you'll have a great chat experience. If you have any remarks, don't hesitate to contact me via the link below or click the "Feedback" button at the top of the messenger.

Click inside the square on the right to see the plasma effect in action. Click again to stop the animation.

First a little disclaimer: usually, these effects are coded by very smart, very math-savvy programmers that know their target system inside and out. None of these attributes apply to me so I just brute-forced my way through the implementation making convenient choices whereever possible:

1. The canvas is 32 units wide and 32 units high.
2. One such unit is an 8 by 8 pixed div element, making the total width and height 256 pixels.
3. The color pallette will consist of 256 colors.

After some research I found that the principle behind the effect is really simple. The base is any function f(x, y, t) = n where x and y are the coordinates in the canvas, t is the time and n is an integer between 0-256, representing a color in the palette. When we have such a function we initiate by drawing the canvas for t=0 after which we redraw the canvas periodically for new values of t, which generates the 'flowing' colors. The next step was to find such a function.

The first function

Remember that the output of the function should stay in the 0-256 range. The easiest way to guarantee this is to base our functions on sin and cos, since their result is always between -1 and 1. For clarity I will not discuss the normalization from floats between -1 and 1 to integers between 0 and 256 here so we can suffice with f being in the -1 to 1 range.

A simple example of the type of function we're looking for is then: f(x) = sin(x / 40.74). The 40.74 is to make our sin have a period of about 256. If we then map the output to a greyscale palette where 0 is black and 255 is white we get something like the picture on the right.

The second function

Looks nice, but it doesn't resemble a plasma effect, so let's investigate a little further for a nice function. Something that's used often in this effect is the sinus of a distance to a certain point in the canvas. Here's such a function: f(x, y) = sin(distance(x, y, 128, 256) / 40.74), where distance(x1, y1, x2, y2) is the distance between (x1, y1) and (x2, y2). In our case we're measuring the distance to the center of the bottom edge. Mapping this to our palette we'd get something like the picture on the right again.

Combining two functions

The last picture already looked a bit more like a good base for a plasma effect. The interesting stuff happens if we combine the two functions and average their results. As you can see in the picture on the right, this is getting pretty close to the effect we're looking for: flowing, asymmetrical blobs of color. Two things remain: finding a nicer palette of colors to map and adding in some animation.

Animation

Adding animation is reasonably straightforward. We just introduce a variable t in a strategic place to our functions which we continuously increment. Usually for these effects t starts at 0 and is incremented by 1 each step. In my experience floating point arithmetic isn't particularly slower than integer arithmetic in JavaScript so I chose to increment by 0.1 because it was more convenient. Here's an example of the 2 previous functions with the added t variable:

1. f(x, t) = sin(x / 40.74 + t) - which gives the effect of the first pattern moving to the left.
2. f(x, y, t) = sin(distance(x, y, (128 * sin(-t) + 128), (128 * cos(-t) + 128)) / 40.74) - which gives the effect of the second pattern rotating around the center of the canvas.

Colors

Believe it or not, we're not completely done with sinus and cosinus yet. The nicest effects are achieved with palettes that smoothly 'wrap around'. These types of palettes are usually generated with mathematical functions. Here's a few examples where for each palette we iterate i from 0-256 and the red, green and blue values are normalized to 0-256 integers again:

red(i) = sin(π * i / 32)
green(i) = sin(π * i / 64)
blue(i) = sin(π * i / 128)

red(i) = 0
green(i) = cos(π * i / 128)
blue(i) = sin(π * i / 128)

red(i) = cos(π * i / 128)
green(i) = sin(π * i / 128)
blue(i) = 0

Combining all this: the functions, the animation, the palette I ended up with the plasma effect shown above. It should be clear right now that there is an endless range of possibilities for variations on this theme. Like so many things I write about this started of as a little 'how does that work?'-experiment. This is how I think it works but if you're reading this and have a better idea, don't hesitate and let me know!

Flexible panels

The ideal I'm trying to achieve is to have a viewport-filling layout with flexible and fixed panels combined. A common example is what I usually refer to as the "Outlook layout". Here's a more complex example.

The hard part here is to have flexible panels that fill whatever space isn't taken up by other (fixed) panels. Ideally you'd be able to write something like this:

.contentPanel {
    width: calc(100% - 200px);
    height: calc(100% - 400px);
}

...which in CSS3, you will be able to. However, we're not going to wait for that, so we're going to use an often-ignored feature of CSS: if you have an absolutely positioned element and you specify left and right but not width, the width becomes flexible: the edges stick to their coordinates. The same goes for height if you spefify top and bottom. Using this technique, we can get what we want:

.contentPanel {
    position: absolute;
    left: 200px;
    right: 0;
    top: 400px;
    bottom:0;
}

But the story doesn't end here. Although this technique runs fine in (standards mode) IE7, IE6 does not support it. For this browser, we will use an even rarer technique: [removed]).

[removed]) is an IE-only CSS statement that works a lot like calc() mentioned above. With it, you can assign the result of a JScript expression to a CSS property. In our case:

.contentPanel {
    width: [removed]this[removed].clientWidth - 200 + 'px');
    height: [removed]this[removed].clientHeight - 400 + 'px');
}

An example

Let's create an example to illustrate the two techniques and how to combine them. Here's a set of three panels, the top one fixed height, the left one fixed width, the remaining one flexible:

As you can see, #panelRight fills up whatever space remains. Its CSS is very simple:

#panelRight {
    top:20px;
    left:100px;
    right:0;
    bottom:0;
    width:[removed]this[removed].clientWidth - 100 + 'px');
    height:[removed]this[removed].clientHeight - 20 + 'px');
    background:#F7CCF7;
}

Issues

expression Is of course a non-standard CSS property that will invalidate your CSS file. Browsers that don't support it will gracefully ignore it (as they should) but the W3C CSS validator will not. There are several ways to hide the code from validators (i.e. conditional comments) so if you care about validating your CSS you should take some extra steps there.

Another issue is that I haven't found a way yet to combine multiple flexible panels horizontally or vertically. The method works beautifully, however, in my experience and makes it really easy to define flexible page layouts with just a few lines of CSS and the most basic HTML.

Another method

A reader called Fabrice pointed out another way to get the same results using bitmasks. For example, when you want to get all the combinations of items from [0,1,2] you create a list binary representations of the numbers 1 to (2³-1):

1. 001
2. 010
3. 011
4. 100
5. 101
6. 110
7. 111

Applying each of these numbers as a mask to the original array gives us all the combinations:

1. 001 × [0,1,2] = [2]
2. 010 × [0,1,2] = [1]
3. 011 × [0,1,2] = [1,2]
4. 100 × [0,1,2] = [0]
5. 101 × [0,1,2] = [0,2]
6. 110 × [0,1,2] = [0,1]
7. 111 × [0,1,2] = [0,1,2]

It's a very simple algorithm to understand and to implement. Since this returns all possible combinations the only thing left is filtering for results of a certain length. Here's an implementation in JavaScript as an extension on the array prototype:

Array.prototype.combinate2 = function( length ) {
    var result = [];
    // iterate from 1 to 2n
    for (var i = 1; i < Math.pow(2, this.length) - 1; i++) {
         var combination = [];
         // For each value of i, check the individual 'bits' (powers of 2
         // components). If 2m is a component of i then this[m] is a
         // part of this combination
         for (var j = 0; j < i; j++) {
             var mask = Math.pow(2,j);
             if (i & mask) {
                 combination.push(this[j]);
             }
         }
         if (combination.length === length) {
             result.push(combination);
         }
    }
    
    return result;
}

Performance problems

Unfortunately, the simplicity of the algorithm comes with a price: the time it takes to execute increases much more quickly with the length of the array than the other one. If I knew something about big O-notation I could probably write something profound about why this is the case. It's a shame I don't because I feel it would really help understanding stuff like this. On the other hand, after having taken another look at the code from the original post I now fully understand what it does. Perhaps I will dedicate another post to that subject.

Peter Paul Koch (Quirksmode)

First up, at 9:30 AM, was PPK with a presentation on cross-browser JavaScript event handling. Most people were in on time, for a change and there were an amazingly little amount of laptops being opened by attendees. (something that usually annoys me alot) PPK, obviously no stranger to presenting delivered a flawless and technically very deep presentation about the differences between the W3C's events spec and the real world as implemented by Safari, IE, Opera and Firefox. Quote of the day: "I think I'll start looking into this Firebug thing, I hear it's pretty good."

Folke Lemaitre (Netlog)

Next up, was Folke who presented on the scaling of Netlog's back-end architecture. As a front-end developer, most of that stuff was somewhat over my head but interesting nonetheless. I know my eBuddy colleagues who deal with the scaling of our own platform were listening attentively :)

Mark Birbeck (W3C)

After the morning break, Mark Birbeck took the stage with a presentation about markup languages that I'm sure was not to everybody's tastes. I found it to be the most interesting talk of the day because he concluded that markup languages like XForms and SMIL are an excellent way to abstract the complexity of JavaScript away. That's something that I've been preaching since the early days of Backbase (and by the way, my subject of the presentation I gave at XTech 2006). Later on, I realized why Mark's name was so familiar. He was once responsible for building a plugin for IE that added XForms support.

Nate Abele (CakePHP)

Lots of controversy ensued when the first Nate took the mic. After a brief introduction about what frameworks are and why and when you should use one, he proceeded to rip apart some well-known competitors of his CakePHP framework: Zend, CodeIgniter (on which this blog is built) and Rails. It was quite funny actually and I found him to be refreshingly honest. A welcome change from the let's-pet-each-other-on-the-back- syndrome.

Nate Koechley (Yahoo!)

Unfortunately I had to miss this one, as I had to be someplace else. I heard it was really good though; a very comprehensive presentation about startup performance, even though a lot of the material was well-known to the crowd.

Open Source Pitches

As I still had to prepare some slides for my presentation I decided to miss out on these. I heard there was a lot of disappointment that the 5-minute Phusion Passenger pitch was spent on promoting Rails, in stead of Passenger.

Menno van Slooten (eBuddy)

I didn't see this one, but I heard it was pretty good ;) In all seriousness, I was really bloody nervous but luckily it was a very friendly crowd with lots of my old friends and colleagues. The presentation itself went pretty smooth in my experience with only a few hickups. If there's a next time I'll cover a more technical subject since I feel more at ease with that than with yesterday's subject matter: a look into the future of front-end developers. Here's a picture of me during the presentation.

John Resig (jQuery)

John absolutely blazed through a presentation that was obviously normally delivered in a much bigger timeslot. He took the big 4 in the world of Open Source JavaScript frameworks: jQuery, YUI, Dojo and Prototype and compared them on various levels, from unit test coverage to CSS selector speed. It was very, very interesting, but I think the crowd would have appreciated a more spicy presentation (for instance about processing.js) a bit more. At the end of his presentation he mentioned he was working on a new DOM CSS selector module (I believe he called it Sizzle) and showed a table with some query benchmarks that looked very impressive. I hope to see more of that soon.

Drinks at 11

Luckily my bosses were willing to be the main sponsor for the drinks afterwards in the excellent Club 11. The atmosphere was good, with the DJ playing some nice Motown soul & R&B tracks. People were stopping me to tell me what they thought of my presentation and the worst criticism I received was "I liked your presentation but I don't agree with what you said." I can certainly live with that.

Overall

I have nothing but good words for the organisation and the visiting crowd. The whole event was flawlessly orchestrated and the atmosphere was extremely enjoyable. I heard the coffee wasn't that good, but that's about it. In the end, I only regret not taking more time to talk JavaScript with Resig, PPK and Koechley. So thanks to Sander and the rest of the crew and I hope I can be a part of future events as well.