Robert's talk

Speaking at FOSDEM 2010 – An Introduction to HTML

Robert Nyman — Fri, 29 Jan 2010 12:32:37 +0000

Just to let you know, I will be speaking at FOSDEM 2010 in Brussels, Belgium, next Saturday February 6th. I will talk in the Mozilla Developer Room and give an introduction to HTML5, which will be followed by HTML5 demos by Paul Rouget.

If you are attending, please come along and say hi!

Geek Meet February 8th 2010 – Christopher Blizzard of Mozilla!

Robert Nyman — Wed, 27 Jan 2010 22:09:14 +0000

I know, I know, there has definitely been some time since the last Geek Meet. But believe me, this one will make up for the wait!

Introducing Christopher Blizzard

I am extremely excited to tell you that the speaker this time is no one else than Christopher Blizzard! Chris is the Evangelism Director for Mozilla and has been involved for almost a decade with the Mozilla project, where he has been working with both developing, evangelizing and building developer relations.

He was also the Software Team Lead for the “One Laptop Per Child” program and helped develop that version of Linux, and was also part in creating the Sugar interface.

The talks

As usual, the Geek Meet will be broken up into two sections. The idea is for Christoper to first talk about HTML5, video on the web, codecs and similar highly interesting topics. Then we will have a break for pizza and beer, thanks to my gracious sponsor Creuna. After that, Chris will lead a Q&A session where you can ask away about anything you want to know about technologies, Firefox, Mozilla or whatever related you can come up with; a fantastic opportunity!

When & where

Next Geek Meet will be held February 8th (less than two weeks away) at Creuna’s office at Kungsholmsgatan 23 in Stockholm, at 18.00.

Sign up now!

Sign up now! We have 150 seats available, which I am sure will be filled in no time. Register by writing a comment below. Go!

All sold out!

Please write a comment to be on the waiting list!

The video element in HTML5 – great possibilites, but also codec and licensing problems

Robert Nyman — Mon, 25 Jan 2010 17:24:27 +0000

Man has always been inspired by things moving around and giving away noises, so it was just a matter of time before video content showed up on the web. For a number of years, Flash was the de-facto standard of showing video, but now, with HTML5, the video element has made its way into our lives.

The `video` element

The video element is as simple as can be:

Then you can add a number of attributes for if controls should be visible, if it should autoplay when the visitor loads the containing web page etc. The applicable attributes are:

autobuffer: Loads the entire file if this attribute is enabled, but is ignored if autoplay is set.
autoplay: Video starts playing as soon as it is ready.
controls: If video controls should be displayed – looks dependent on web browser.
height: Height of the element
loop: If the video playback should loop.
src: The video file to play
width: Width of the element

So, another example could look like this:

What is also nice is that web browsers won’t automatically download the entire video file, but just a part of it to be able to display the first frame. Also, you could write your custom controls and control the video via script – this is more described in Using audio and video in Firefox.

Different treats for different web browsers

This all sounds good and well; just specify the source of your video file and you are good to go! Well, it could have been like that, but unfortunately isn’t. Just as before in history, it comes down to video codecs – yes, exactly that hassle we got around with having video in Flash.

Firefox supports the Ogg/Theora encoding.
Google Chrome supports the H.264 and theOgg/Theora encoding.
Safari supports the H.264 encoding.
Opera will support the Ogg/Theora encoding (no final release with video element support yet).

So, what the video element offers us is to specify various video sources for different web browsers, like this:

	
	
	Sorry, your web browser doesn't support the video element

Sorry, your web browser doesn’t support the video element

This video above should play in Firefox, Google Chrome and Safari on Mac. You can also check out a demo targeting both Ogg/Theora and H.264 in a stand-alone page.

And, instead of the “sorry”-phrase above, we could also go to the length of offering QuickTime and Flash fallbacks instead for web browsers not supporting the video element at all.

Codecs and licenses

I think it’s fair enough that we can offer content to please every web browser, but at this point it becomes cumbersome. Maintenance, it’s a nightmare, since we need to maintain and store at least three formats for each video to be able to offer it to a vast majority of our visitors. The reasoning behind codec support is that Apple has invested a lot of time and money into H.264 so they want to push that, Google Chrome has bought licenses for H.264 (which means the only version of Google Chrome that supports it is the one downloaded from the Google web site – Chromium and others don’t support that license) and support Ogg/Theora as well, while others like Mozilla (with Firefox) and Opera believe that the open standard element video should naturally support open codecs and therefore only support Ogg/Theora.

What we don’t want with a new standard/element and de-facto way of doing is to go into the situation of GIF again, but instead avoid closed formats that requires a number of expensive and limited licenses. I believe Robert O’Callahan explains it beautifully in Video, Freedom And Mozilla just why H.264 is not a viable option, and why it is not on par with the open web and web standards.

And, to make matters worse, in my eyes, Google just started offering the HTML5 video element on YouTube and Vimeo announced HTML5 video element support as well. Great news, but the big big problem with this, though, especially being two of the most visited video web sites on the web, is that they only support the H.264 encoding. This means that only Google Chrome and Safari users (and, oh, those three IE users in the world with Google Chrome Frame) can see it, excluding a vast portion of the web browser market with Firefox and Opera (the initial complaints were also that fullscreen video wasn’t there – well, Firefox 3.6 supports fullscreen video, so if they would have chosen another format that would have been there too).

What is bothering me with the H.264 approach, and is quite saddening, is that Google Chrome supports the Ogg/Theora codec as well, so they could have chosen the open route instead. Their move of introducing the video element on YouTube is a very important decision, and I believe it’s great to move away from Flash and into HTML5 elements. But as long as they do it with closed-in licensed codecs, it has been all in vain, if you ask me.

Mozilla VP Engineering Mike Shaver expresses his opinions in HTML5 video and codecs and Mozilla’s Christopher Blizzard talks more about in HTML5 video and H.264 – what history tells us and why we’re standing with the web.

Conclusively…

The whole reason video on the web took off in the first place with YouTube and others is because it just worked as long as you had Flash installed, no matter the web browser and no matter the platform. If just end up in another codec war again, the video element will never take off – don’t waste our time with web browser-specific solutions and proprietary attitudes. If we ever truly want to use the video element on the web, it has to be open. Period.

IE and Life

Robert Nyman — Thu, 21 Jan 2010 13:31:46 +0000

The other day I sort of had an epiphany, a revelation if you will, which made me realize something hard to accept: Internet Explorer will always be there throughout my entire career working with Internet.

After that had dawned on me, seeing know that IE will never die and be completely be replaced by only competent web browsers in the market, and, IE will always be at least two years behind its competitors, it kind of felt like a legal punishment. “Sorry, mister, but it’s IE and life for you.

Therefore, I decided to make my own rendition of the Skidrow song 18 and Life. Let me present IE and Life:

IE was a young browser, he had a heart of DOS
Lived 9 to 5 and he worked hard to prevent FOSS
Just barely got out of MS labs, came from the edge of town
Rendered like MS Word so no one could take him down, oh no

He had no talent, no, no standards at home
He walked the streets as renderer and he fought the world alone

And now it’s IE and life, you got it, IE and life, you know
Your crime is proprietary and it’s IE and life to go
IE and life, you got it, IE and life, you know
Your crime is proprietary and it’s IE and life to go

VML in his heartbeat, worst CSS bugs you’ve ever seen
He kept his engine running, but it never kept pages clean
They say he loved closed-in, “IE’s the wild one”
Someone should put it out with a strong-enough gun

Bang bang shoot ‘em up, the party never ends
You can’t think of dying when web browser legacy is your best friend

And now it’s IE and life, you got it, IE and life, you know
Your crime is proprietary and it’s IE and life to go
IE and life, you got it, IE and life, you know
Your crime is proprietary and it’s IE and life to go, yeah

“Accidents will happen”, they all heard IE say
He renders pages incorrectly even to to this very day

Yeah, yeah, yeah, yeah, yeah
IE and life, you got it, IE and life, you know
Your crime is proprietary and it’s IE and life to go
IE and life, you got it, IE and life, you know
Your crime is proprietary and it’s IE and life to go

Tools for concatenating and minifying CSS and JavaScript files in different development environments

Robert Nyman — Tue, 19 Jan 2010 17:42:23 +0000

To follow up on the topic of cutting down the number of HTTP requests that I mentioned in my posts How to improve your web site performance – tips & tricks to get a good YSlow rating and How to reduce the number of HTTP requests, I wanted to put together a good list of tools and approaches to concatenate and minify CSS and JavaScript files in different developing environments.

Based on my own experience and research, and the replies when I asked around what others use, I have listed suggested solutions below:

PHP

Minify: Minify combines multiple CSS or JavaScript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.
Combine: PHP script combined with URL rewriting to concatenate and compress CSS and JavaScript files.
SmartOptimizer: A PHP library that enhances your website performance by optimizing the front end using techniques such as minifying, compression, caching, concatenation and embedding. All the work is done on the fly on demand.
CSSTidy: Compression of CSS files. Note: no support for JavaScript files.
JSMin+: PHP-based and it parses the JavaScript. Note: no support for CSS files.
CSScaffold
: Compresses, caches and gzips CSS on-the-fly. Note: no support for JavaScript files.
CSS-JS-Booster: Concats, minifies and gzips CSS and JavaScript files.

Django

Django Static Management: Intended as an easy way to manage multiple static text assets (CSS and Javascript) in a Django projects.
Django compressor: Compresses linked and inline javascript or CSS into a single cached file.
django-compress: django-compress provides an automated system for compressing CSS and JavaScript files. Note: Doesn’t support concatenation of files..
Deploying compacted javascript with django: Management command to compatct JavaScript. Note: No support for CSS files..
Templatetag for JavaScript merging and compression: A templatetag that merges several JavaScript files (compressing its code) into only one JavaScript file. Note: No support for CSS files..

Ruby

Sprockets: Sprockets is a Ruby library that preprocesses and concatenates JavaScript source files.
Juicer: Compresses CSS and JavaScript code, JSLints it and also supports Data URI-embedding of images in CSS files.
Jammit: Jammit is providing both CSS and JavaScript concatenation and compression, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.
AssetPackager: Merges and compresses JavaScript and CSS when running in production.

Java

YUI Compressor: The leading tool in the for compressing CSS and JavaScript files, and could easily be ported/encapsulated into other environments. Note: Doesn’t support concatenation of files.. Could be used in conjunction with an Ant task, as described in Building Web Applications With Apache Ant
Google Closure Compiler: Google Compiler for JavaScript that supports various compressing options for JavaScript. Note: no support for CSS files.
Jawr: Supports concatenation and minification of CSS and JavaScript files.

.Net

YUI Compressor for .Net: A .NET port of the Yahoo! UI Library’s YUI Compressor Java project.
Packer for .NET: A tool to pack/minify CSS and JavaScript files.
Microsoft Ajax Minifier: A tool to concatenate and minify JavaScript files. Note: no support for CSS files.

Other tools or approaches?

Please let me know, by writing a comment, if you want to suggest other tools, so I can update this list and keep it as accurate and useful as possible!

How to reduce the number of HTTP requests

Robert Nyman — Thu, 14 Jan 2010 23:46:01 +0000

As you might be aware of, I believe web site performance is truly a critical success factor, and I have written about it before in How to improve your web site performance – tips & tricks to get a good YSlow rating

What we have

With the advent of such great tools such as YSlow and Page Speed, looking at the practices of web sites like Google and Yahoo! and reading the excellent performance work done by Steve Souders, we have really learnt a lot, and have great resources.

Reducing the number of HTTP requests

One of the crucial things when it comes to improving performance is reducing the number of HTTP requests. According to Steve Souders: “An extra HTTP request adds 200+ milliseconds to a page (worldwide average)”. The latency between HTTP requests, and also the limitation in web browsers in regards to how many parallel HTTP requests a web browser can make, vastly affects the loading time of a web page.

When it comes to CSS and JavaScript, the general consensus is to concatenate all files of the same type into one file, and then minify them. To complement that, Kyle Simpson have done some interesting experimenting with his LABjs, and he writes more about his thoughts in LABjs: why not just concat? how controlled parallel loading could also prove to be efficient.

That leaves us with images. Without a doubt, both the size and number of images used in a web page, although pretty to look at, definitely poses a threat to having a fast web site, and I thought we’d look at the alternatives for dealing with that.

CSS Sprites

CSS Sprites are when you combine a number of images into the same image file. You then use background-position in the CSS file to control what part of that image will be visible for a certain element. This way, instead of having a number of HTTP requests, there will be just one for a larger image file.

For instance, you can see this in action at Yahoo.com at the left hand side, with the icons in the list. Steve Souders has also created the excellent tool SpriteMe, in the form of a bookmarklet, that will analyze the current page to see which images you can combine, and also generate the images for the CSS Sprite. Another great alternative is the web site CSS Sprite generator.

There are a couple of downsides with CSS Sprites, though. One is that, depending on the design, it can become virtually impossible to combine some images, because their repeating pattern, reusage etc will prevent that. While the above mentioned tools are great, at the end of day, you always seem to end up manually tweaking your CSS Sprites images file(s) and CSS code.

Firefox engineer Vladimir Vuki?evi? has also written the interesting piece To Sprite Or Not To Sprite where he sheds some light on memory usage in web browsers and how large images aren’t always optimal.

So, at times CSS Sprites can be great, but they aren’t always the best choice.

Introducing base64-encoded Data URIs

Which leads us on to the highly interesting topic of base64-encoded Data URIs. For a more thorough explanation of what those are, I recommend reading Data URIs explained by Nicolas Zakas of Yahoo!. Generally, though, it’s about writing out binary files converted into data which describes the content.

What this means in practice is that in the HTML code or CSS file we can have the code for the contents, instead of just a reference to the file, which means that we completely eliminate that HTTP request. Just imagine having a web site full of images referenced, but none of them will cost one single HTTP request!

Let’s look at a real example of showing Smurfette via CSS.

Regular CSS background image

.smurfette {
	background: url(smurfette.png);
}

Base64 Data URI as background image

.smurfette {
	background: url(data:image/png;base64,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);
}

Comparing the alternatives

As you can see, the Data URI example is a lot of characters, but the beauty of it is that it describes the image inline, completely eliminating the need for a HTTP request! And sure, as you can see the file size will get bigger (especially in this example), but overall the result is much better than a huge number of HTTP requests. Besides, from my testing and reading about other peoples’ results, if you gzip your CSS file the resulting size is about the same as the regular image URL reference!

Web browser support

Data URIs are supported in:

Firefox 2+
Safari – all versions
Google Chrome – all versions
Opera 7.2+
Internet Explorer 8+

Internet Explorer…

As you can see, Internet Explorer does actually support Data URIs from IE 8! However, Microsoft, not to get astray from their long-standing tradition of doing half-ass implementations, only support data URIs smaller than 32 kilobytes. That might sound like a lot, but naturally it becomes a stick in your eye when you have larger images. For instance, in the web site I work on now, I have two images that were too large as Data URIs for IE 8, so I needed to include those two specific files exclusively for IE 8.

What about Internet Explorer versions older than IE 8 then? Actually, interestingly enough they support the MHTML format, which is an alternative way to accomplish the same thing for older IE versions. Stoyan Stefanov, also of Yahoo!, have written about this approach in MHTML – when you need data: URIs in IE7 and under and related problems in Vista and Windows 7 in Data URIs, MHTML and IE7/Win7/Vista blues.

There is some serious trickery, and limitations, when it comes to getting MHTML working. I know a number of people who used it, but in my tests, I actually never got it to work properly. Looking at general web site statistics, though, IE 6 and IE 7 usage steadily decreases all the time. If you want to solve it with MHTML, absolutely, but for me personally, I believe with offering the Data URI solution to all of the above-mentioned supported web browsers, I will still reach a good majority of the market, and, importantly, future web browsers.

Tools for encoding

There are a number of terminal-based tools to convert your images into the base64-encoded format, and you also have the option of online image to base64 converters. However, doing all this conversion (fairly) manually and then pasting the code into your code is quite tedious. There has to be a better way, right?

Right! Nicholas Zakas has created the outstanding tool CSSEmbed, which takes a CSS file as input, goes through it and encodes all image references to base64. This means that the action of changing all your image references in your CSS file to base64-encoded is a matter of seconds!

Just download the cssembed JAR file, put it wherever you like (placed in the same directory as the CSS file below for simplicity) and then call it like this:

java -jar cssembed-0.3.2.jar styles.css > styles-base64.css

This creates a new file named myStylesheet-base64.css where all image references have become base64-encoded. Awesome, right? It also supports conversion for MHTML for targeting older versions of Internet Explorer. Nicolas has written more about it and how it works in Automatic data URI embedding in CSS files.

High-traffic web sites using Data URIs

By now, I hope you are as excited as me about this! Imagine removing about 2/3 of all your HTTP requests in a second, thanks to CSSEmbed! And this practice is not some future technology that we might use in five years, it’s here today! Just take a look at the thumbnails in a Google search for monkey and the search button in Yahoo! Search, for instance, and you will see what I’m talking about.

Therefore, I hope this have inspired you to get faster web pages without compromising one bit with the content!

Acknowledgements

Great thanks to Malte Ubl for suggestions and help, and to Mark Wubben for discussing base64-encoding alternatives.

CSS background transparency without affecting child elements, through RGBa and filters

Robert Nyman — Mon, 11 Jan 2010 10:57:21 +0000

Looking at the design of most web pages today, almost exclusively all of them include some semi-transparency of elements. However, getting the desired effect in CSS is harder than one might think.

The problem

If we want an element to have a semi-transparent background, and let whatever is behind it shine through, we have two options:

Using CSS and opacity
Creating a 24-bit PNG background image

The problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity, which I would dare to venture is very seldom the result one wants. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess.

The problem with PNG images is, beside a superfluous HTTP request, that images are way, way more larger in file size than one or two lines of CSS code – especially considering that the image has to be a bit larger to avoid serious memory leak issues with 24-bit PNG images with alpha transparency in Internet Explorer.

The solution!

Therefore, I can happily offer an alternative for you: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS, with a fallback for those web browsers that doesn’t support it, would look like this:

	.alpha60 {
		/* Fallback for web browsers that doesn't support RGBa */
		background: rgb(0, 0, 0);
		/* RGBa with 0.6 opacity */
		background: rgba(0, 0, 0, 0.6);
	}

The transparency will only be applied to the background – fantastic, isn’t it?!

A little caveat

Shockingly enough (erm), no version of Internet Explorer supports RGBa colors (i.e. not IE 6, IE 7 or IE 8 at the time of this writing). However, and lucky for us, in year 2000 Microsoft went crazy with implementing various filters in IE. One of them are the gradient filter, and what we can do is use that and just define the same start and end color. “Ok, but how do I get the transparency”, you might be thinking now. The answer to that is that you will declare that as part of the color hex value. A CSS gradient filter achieving the same effect as the CSS code above would look like this:

	.alpha60 {
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	}

As you can see, it is actually declared as part of an 8-digit hex value, where the first two numbers is the alpha hex value, the next two is Red, and so on. The difference between how we do it with RGBa is that the hex value will range from 0 to 255, just as any color value. So, how do we convert an alpha level of 0.6 to its hex value?

This where a little Math comes in the picture. Basically, we take our desired alpha level, 0.6, and multiplies it with 255 – then we convert that result into hex. One very easy way to do this is make use of Google’s Search Features, and just search google for 0.6 * 255 in hex. Unfortunately, though, Google’s calculator seems to only handle integers, hence 0.3 * 255 in hex won’t give you a result.

An alternative, or quicker way altogether, is to use the beauty of JavaScript. Just open up Firebug and type this into the console:

	// Replace 0.6 with your desired alpha level
	Math.floor(0.6 * 255).toString(16);

99 is then corresponding to 0.6, and becomes the first two digits of the start and end colors for the gradient filter.

Combining it all

With all techniques learned above, let’s put it together in a working CSS rule:

	.alpha60 {
		/* Fallback for web browsers that doesn't support RGBa */
		background: rgb(0, 0, 0);
		/* RGBa with 0.6 opacity */
		background: rgba(0, 0, 0, 0.6);
		/* For IE 5.5 - 7*/
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
		/* For IE 8*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	}

NOTE! In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!

Web browser support

RGBa support is available in:

Firefox 3+
Safari 2+
Opera 10

Filters in Internet Explorer are available since Internet Explorer 5.5.

This means that this will work for virtually everyone!

Acknowledgements

Thanks to RGBa Browser Support and Bulletproof, cross-browser RGBA backgrounds, today for the information and inspiration.

Thanks to Emil Stenström and Pelle Wessman for coming up with countless alternatives for hex conversion, and explaining basic math to stupid me.

Thank you for 2009 – Happy New Year!

Robert Nyman — Tue, 29 Dec 2009 22:23:32 +0000

I hope you are all having some nice time off; I just wanted to take the time to reflect on 2009 and what it was like for me.

Speaking and travel

I think career- and experience-wise, the biggest thing I did this year was starting to travel around and speak at conferences. And while the idea of it had been brewing in my head for a while, it it is really one person I owe a big thanks of gratitude too, and that is Rey Bango for pushing me over the brink.

Mozilla were to organize a large event in March in Berlin, and he contacted me and suggested that I should give a presentation about developing Firefox extensions (like a live version of my How to develop a Firefox extension article). What he also did was encourage me that I could do it and that I should be brave about it, and as a result, it opened up a year of traveling in Europe giving presentations. Thank you Rey!

Read more about it in The trip to Berlin and the Mozilla Add-Ons Workshop 2009. Berlin was really a starting point for my relationship with Mozilla, and I gave presentations at two more Mozilla conferences this year and was also a part of a panel about HTML5 at the Mozilla Camp Europe.

My next presentation in line was thanks to the trust of Peter Svensson who asked me to speak at the Scandinavian Web Developer Conference, where I was the only Swede presenting, and had quite a good time. Same week ended with me speaking at a joint event between Mozilla and Nokia (the Maemo division) in Copenhagen in Denmark, and it was also a great time, and a chance to meet my friend Morgan Roderick for the first time in person.

Week after that, I spoke at the Mozilla Swedish Community Meetup, where Mozilla came to Stockholm and treated us to a nice Mozilla evening. Following that, summer was calm and easy, and it didn’t really start again till the beginning of October, now with Mozilla Camp Europe, this year taking place in Prague. I wasn’t scheduled to speak, but due to some openings, at least I partook as a panelist discussing HTML5 with the audience, other panel members and prominent people in the Firefox team – it’s all summed up in Travel stories and session recaps from Mozilla Camp Europe Prague, 3-4 October 2009.

A few weeks rest, and then in November it really started taking off. With four speaking performances at major conferences within a month, I started to remotely imagine what it must feel like to be Chris Heilmann.

First out the door was Øredev, where I got to share the stage and then hassle (read: befriend) two of my major inspirations: Douglas Crockford and Steve Souders – The Øredev 2009 Conference adventure. Just three days later, the first instance of JSConf.eu took place in Berlin, and although I felt my own presentation was mediocre at best (I did much better at the other events), it was quite a good place to meet a lot of JavaScript people – The JSConf.eu conference and my visit to Berlin.

Following that was a conference that I had known about for quite some time, and given the setting of UK and the outstanding speakers that had been invited, I really wanted to make it a good one – and I think I did! What I’m talking about is Full Frontal, and I believe it was a personal highlight for me as a speaker this year (at least one of the top three) – My Full Frontal ‘09 escapades – The JavaScript conference.

Rounding off this conference year was a nice trip to Lisbon in Portugal, and a great time at the Codebits conference – My trip to Lisbon, Portugal, and the Codebits conference.

And just to make things better, December 23rd I received an invitation from Mozilla to the FOSDEM (Free and Open Source Software Developers’ European Meeting) in February!

So, thanks everyone for your trust and letting me speak at your conference, and thank you to Mozilla for believing in me!

Honorable mentions

The absolutely wonderful thing about conferences is the the fantastic people you get to meet, and the places and cultures you get to experience. I’ve met so many great people this year, too many to mention here, and without a doubt, my feeble mind is probably forgetting a number of you just right now. What I wanted to bring up, though, was a few names that I have met at more than one conference this year and have spent some considerable time together with.

William Quiviger

William is, amongst other things, an event organizer for Mozilla, and his out-of-this-world ability to handle pressure and make sure things work out, while at the same time sincerely caring about everyones’ wishes and needs, is extremely impressive.

Patrick Finch

Patrick is the European Marketing Manager for Mozilla, a fantastic and friendly guy, a Brit expat residing in Sweden, and, at least in my world, he sounds and looks like Remington Steele.

Brian King

Our first meeting was in Berlin, and then at every other Mozilla event this year. Brian is doing a lot of work for Mozilla in general, and add-on development in particular, and his friendly way and always being there to help has been highly appreciated by me, and I hope to meet him again many more times (a feeling I hope is mutual ).

Remy Sharp

I think Remy and I share some kind of record on being at the same place at the same time this year. We met at SWDC in May, Geek Meet in June, then Øredev, JSConf.eu, Full Frontal and Codebits. Needless to say, he’s probably mighty sick of me by now, but for me, it has been great to meet him throughout the year, since he is both friendly and very talented (although his work/web dedication is sometimes a bit frightening, even to me).

Molly Holzschlag

I had the pleasure of meeting Molly first at the Scandinavian Web Developer Conference in May, and then have her over for Geek Meet in October. She’s a truly fantastic person, and even though how well-known she is, I really appreciate her taking the time to listen to everyone.

Morgan Roderick

I’ve known Morgan for a few years, but this year was the first time we got to meet – first in Copenhagen and then in Berlin. Morgan is extremely caring and I always act like a child around him, since he is just the nice guy that takes care of things. He seems to love Berlin, but who knows, one day we might even meet in Sweden?

Søren Skrøder

Søren is a Dane working with localization for Mozilla, and we first met in Copenhagen and then did a Prague city walkabout together in October. He is a very nice guy, and if you ever cared about beards, Søren has one to kill for!

Mark Wubben

Mark is also someone I have known for a number of years, but met for the first time this year when he spoke at Geek Meet in February. He then came to the Scandinavian Web Developer Conference followed by the Mozilla event in Copenhagen. For fun, I named him a stalker of mine, and haven’t seen him since…

Chris Mills

Ah, Chris Mills. Chris is the crazy heavy metal Brit working with developer relations for Opera, and he spoke at Geek Meet in June and then we meet at Full Frontal in Brighton in November. Extremely nice fellow, crazy stories, but I believe I actually made him flush at the Full Frontal after-party!

Conference information and presentation slides

Here are all the links to the events mentioned above and also to my presentation slides:

Full Frontal JavaScript Conference 2009, Brighton [United Kingdom] – November 20th

Presentation: JavaScript – From Birth to Closure (View/Download on SlideShare)
Event information: Full Frontal JavaScript Conference 2009

Codebits 2009, Lisbon [Portugal] – December 3rd

Presentation: JavaScript – From Birth to Closure (View/Download on SlideShare)
Event information: Codebits 2009

The year of people dying

It seems like 2009 was a year when a lot of people died, especially on a celebrity level. Reading Famous People Who’ve Died in 2009 (so far) and delving deeper in Celebrities who died in: 2009 (page 1) it makes you wonder what was really going on.

Naturally, of all the people that passed away, Michael Jackson was by far the most famous one.

I just hope everyone will get to rest in peace.

All my posts in 2009

I first thought of picking out a few of my blog posts that I liked this year, but then again, it seems like everyone have their own favorite. Instead, I thought I’d list all of my posts in 2009 below for you to skim through them, and re-read the ones you like, or perhaps find one you missed the first time around.

December 2009

November 2009

October 2009

September 2009

August 2009

31: 35
28: When the Wiimote (Nintento Wii Remote) stops working
27: How do you value an experience?
26: Hi Ho Silver – I’m back!

July 2009

June 2009

May 2009

April 2009

March 2009

February 2009

January 2009

Happy New Year!

With that, I’d like to thank you for 2009, and here’s to a great 2010!

Happy New Year!

Merry Christmas, Happy Holidays!

Robert Nyman — Tue, 22 Dec 2009 11:43:23 +0000

It’s that time of year that should be spent with your loved ones no work, no obligations, just share some happiness with people who are special to you.

I would just like to sincerely thank you for reading, for putting up with me and for all the knowledge and good thoughts you share with me. I truly appreciate it! I plan to write a little longer post before New Years, summarizing this year.

I thought I’d accompany my wishes with one of the best pictures taken of my family:

Merry Christmas, Happy Holidays!

Releasing Inline Code Finder as a Google Chrome extension

Robert Nyman — Fri, 18 Dec 2009 10:18:23 +0000

I put a lot of time into ensuring web interface code quality, both for code in projects I work in and in doing code audits for other web sites. One of the best ways to find undesired inline styles, inline JavaScript events and javascript: links, I believe, is my Inline Code Finder extension and now it’s available for Google Chrome as well!

What it does

Inline Code Finder traverses through all elements in a web page, and if it finds a HTML element with any of these, it will highlight them:

Inline JavaScript events
Inline style
javascript: links

The idea is to help separating content (HTML) from presentation (CSS) and interaction (JavaScript), and also for performance, to make sure HTML pages are as lightweight as possible to load while all styling and JavaScript code should be kept in separate files so they can be cached and reused.

I strongly encourage you use it to improve your interface code: Download Inline Code Finder for Google Chrome.

NOTE: To be able to install extensions, on Windows/Linux you need to have Google Chrome for Windows/Linux from the beta channel. For Mac users, you need to install Google Chrome from the Dev channel for Mac. Unfortunately, though, at the time of this writing, extensions are turned off in the Mac version, but instead you can use Chromium for Mac (the base for Google Chrome) to use it (I have heard they will soon be enabled in Google Chrome for Mac as well).

What it’s like writing an extension for Google Chrome

Coming from a background of having written a number of extensions for Firefox and Firebug, I was eager to offer my functionality in another web browser, and also evaluate the developer experience of the Google Chrome extension model. I have to say that, so far, it has been extremely pleasant writing an extension for Google Chrome! It seems like they have carefully studied in what areas Firefox have succeeded, and also its problem areas, and just made sure that extension development goes as smooth as possible.

It literally just takes a few minutes to get your first extension loaded into Google Chrome, and from there on, there’s a good documentation for achieving most things you would probably want to do when developing an extension. For instance, one thing’s that’s quite cool is using the HTML5 localStorage for storing options for your extension.

To share your extension with the world, or just find other extensions you might be interested in, Google have launched the Google Chrome Extensions gallery. What’s quite nice here is that as a developer, unless you try to access you try to access the user’s files on disk or use certain APIs in your extension, there’s no review process! This means that I can deploy, and update, my extension at any time I want to and it will be live immediately! People who have gotten used to waiting with the review processes of Apple’s App store or Mozilla’s add-ons will absolutely love this!

I for one just hope that they can manage to keep it this way, but at the same time, I’m a bit wary that it will maybe only be like this until Google Chrome will suffer from some serious exploit, and then they will have reviewing queues just like anyone else. Only the future can tell, I guess.

Both with developing extensions, and getting rid of the review process for most extension types, I think Google have gotten many many things right. I sure hope the work with Jetpack for Mozilla, which is planned in practice be the future extension model of Firefox, will achieve similar results – so far it looks very promising with existing and upcoming API support, and jQuery being included by default in Jetpack.

The dream, which will most likely only remain a dream for some time, would naturally be to have identical extension models for as many web browsers as possible, so any developer can offer their extensions to everyone, no matter the web browser.

For now, though, I’m quite happy with the extension development process for Google Chrome, and I hope to release more extensions for it soon.

Testing Object-Oriented CSS (OOCSS) for easier CSS development

Robert Nyman — Thu, 17 Dec 2009 10:41:08 +0000

Let’s face it: developing CSS that should work across various web browsers and platforms is hard, and could prove to be quite a challenge. This is where Object-Oriented CSS (OOCSS) steps in.

What it is

OOCSS is being developed by Nicole Sullivan, with a background at Yahoo!, who now consults for Facebook. The objective is to make CSS development as stable, modular and, very importantly, predictable as possible.

There are a number of different modules, where the most important parts are good CSS resetting (taken from Yahoo!), template and grid handling. However, there are also parts for tabs, talk bubbles, content media etc. The best way to see it in action is to go to the OOCSS page at GitHub to watch and download the examples.

What I like

I have been working with the base files for my current project, to evaluate it and also make things easier for me. Having a good framework for your basic CSS is vital in any web site you will ever build. You will get a consistent result, and instead of building the same things over and over, you can put your time and effort into what will make that specific web site into the best possible.

OOCSS is extremely easy to use, has overall worked flawlessly, and extending the good base is very simple. I also like it being very light-weight (my combination of resetting, template & grids weighs in just under 5 kb), which means my own web site-specific CSS becomes much easier to write, and it becomes much smaller because of not having to write redundant CSS.

What I don’t like

As you might be aware of, using good semantics is very important to me, and when it comes to both elements being used as well as the naming of CSS classes, I believe it should contain a meaning for what it will contain. OOCSS contains class names like .leftCol, .rightCol, .body, .h1, .h2 etc. And to me, and what I believe is to be in line with the notion of the semantic web, is that one of the fundamentals with CSS class names is to not use class names which describes the actual presentation/layout, but rather what it will contain.

And fair enough, I think one of the choices behind this was to make it easy to beginners, but still, when you end up with code like

, that’s just wrong to me. No class name should ever be named after an actual element name if you ask me (especially not the name of another element).

I got to meet Nicole at JSConf.eu, and naturally had to ask her about her choices for class names. She said that she thought it was ok to also use “visual semantics”, i.e. class names that would describe how it would actually be presented. Trying to be open and understandable, I could somewhat see where she was coming from with this.

But, I suggested using other names that would have more meaning and be easy to understand at the same time, like `.main-heading`, `.complementary` etc. The reply I got was that she had tried it, but “It was too hard for people to remember it”. And that I’m mot just buying. Sure, `.rightCol` might be a tad easier to remember, but just going the easiest route time doesn’t always make it right.

So, in my files, I use class names that convey actual meaning.

Conclusion

Despite my little rant on class names (which you can easily change to whatever you want), OOCSS is quite exciting, and so far I have experienced good results with, and the possibility for me to focus on more important things! I definitely recommend you try it out, and give Nicole any input or feedback you might have.

Content Management Systems are a dying breed

Robert Nyman — Mon, 14 Dec 2009 10:19:21 +0000

Based on my experience and thoughts over the years, and feedback from a number of very smart and talented people, I believe that Content Management Systems (CMS) are far from the promised savior, but rather the bane of web sites.

Background

Back at the end of the 1990s, people wanted to start controlling content creation on the web. They were offered all kinds of hacks, and to be gentle, let’s just say they were “a bit varying in their quality”. Most of the time, there were no support or documentation (since developers just want to code, right?).

To fix this situation and bring some stability to the market, a number of CMSs were developed, and to this day, they keep on popping up around every corner – I bet of majority of the developers out there has, at one time or another in their career, worked on building their own CMS. The initial idea with them are good, trying to collect knowledge and experience, but all of them, without exception, fail sooner or later in some aspect.

“One size fits all”

The problem with any CMS is that it tries to accommodate to as many needs as it can, both from a developer, business and editor perspective. This also goes for a market filled with a vast array of different ideas, hopes and desires. Basically, common sense tells us that the result, at the very best, will only become decent.

Virtually any web site that is sold as CMS-controlled is easily set up and installed, and then months, or even years, are spent “configuring” it – and by configuring, I mean patching, fixing, mending and hacking it to remotely meet the usage wanted by the customer.

What I rather suggest is that it is our responsibility as professionals to not just throw a CMS at our customers, and then have editors and developers alike being miserable, but rather to listen to our customers’ actual needs and then custom build what will be best for them. It is also inline with working in an agile manner, developing what should be there, instead of wasting money and time on a CMS filled to the brim with bulky features that most people don’t need nor want.

“Don’t reinvent the wheel”

“No, no, don’t reinvent the wheel, don’t brings us back to the wild west-mentality of before!” I hear you cry out. That is very far from what I am suggesting. Instead, I think the scale of developers’ choices look something like this:

A poor developer uses only one CMS, and recommends it over and over, no matter what the customers ask for.
A decent developer knows about the options, and chooses a CMS he/she thinks will be the best (rather, bring the least amount of implementation and maintenance pain to everyone).
A good developer doesn’t choose a CMS, but rather cherry-picks the best components out there and binds them together in an optimal result, custom-tailored for their customer.

What I mean with components are specific things, that could be found as parts of an existing CMS, but function stand-alone as well. We’re talking WYSIWYG editors, data saving, friendly URLs, tree controls etc etc. What you will get from this is choosing the best tool for the job, for each specific part. You can scour the market until you find exactly what you need, and if you do a responsible choice, you can find the best for a certain task not only out of code and maintenance perspective, but also in regards to community involvement, support, proper documentation and a huge number of other people working with the same thing.

Your part will be more like a conductor directing an orchestra, binding all small and independent things into the best and optimal end result. Naturally, and this is very important, apart from delivering this to the customer, you should also offer support for your part in this, tying all this together in a beautiful architecture.

It will also give the customer the option to, in the long run, just change or upgrade the components they wish to change, instead of the enormous undertaking of upgrading an entire CMS. Think one part out of all isn’t optimal? Just get a new one, while doing it in a very cost-effective manner!

They will be around

CMSs will, no doubt, be around for quite some time. But my belief is that instead of focusing on products, it’s vital both for our customers and the climate of the web, that we start taking some pride in building the best possible things we can, instead of just having our hands tied behind our backs by a CMS.

The death of a friend

Robert Nyman — Tue, 08 Dec 2009 20:19:38 +0000

Tonight a friend of mine and my family passed away.

When I was growing up and throughout my entire life, he was around as a friend of my parents. Anyone close to your parents, in time, naturally becomes a friend of yours as well, and I have quite a number of memories of him throughout varying times in my life.

Some time ago, not long, he got cancer. A couple of weeks ago, I visited him at the hospital because I wanted to see him, support him, do anything I could to make him feel a little better, if just for a short moment. But I couldn’t really pull it through. I just sat there crying, tried to collect myself, said a few words again, and again the tears welled up.

He fell asleep on and off during my visit, and I remember one of those times when I looked out his window, through the rain. Just across the street was the delivery unit, where a few years ago we had went, first for the birth of our first daughter, and then for the birth of our second. And knowing that while life was being created, becoming real, all the time just across the street, while someone else in the very room I was standing was close to his last moments in life, felt too heavy, too much of an inevitable destiny that I could bear. Again, I cried.

Tonight he passed away. At least I got to say my good-bye at that time in the hospital, in my own way.

If there’s anything he ever taught me, it was in his behavior. He was always, always, always happy and incredibly helpful to anyone. Not selfish one bit, but just aiming to make everyone else feel good.

Seeing the wonderful examples he set, and to honor him, I must change my ways, be more friendly to other people, try to understand them and where they are coming from. I sincerely have to genuinely start appreciating the wonderful gift of life.

My trip to Lisbon, Portugal, and the Codebits conference

Robert Nyman — Mon, 07 Dec 2009 23:25:08 +0000

I had the pleasure of spending last week in Lisbon, Portugal, for the Codebits conference.

Arriving in Lisbon

It was my first time in Portugal, so I made sure to arrive one day early to have time to do some sightseeing and catch a view of Lisbon. Last Tuesday, December 1st, I arrived in Lisbon after a four and a half hour flight with TAP Portugal from Stockholm. First time ever, I had a complementary pick-up service by the event organizers, and a nice driver by the name of Gonsalo.

Got to the hotel, Hotel Vila Galé Opera, checked in, and got online to check in with some people and do some minor research before my Lisbon touring. Got out to find a grocery store, but with my luck, it had closed three minutes before I got there…

Got back to the hotel again, and treated myself to a nice two-meal dinner in their restaurant. And granted, I was famished by then, but I thought the food was extremely good – especially my starter with Chèvre cheese. Got back to my room, checked some things and then got to bed reasonably early.

Lisbon sightseeing

I got up pretty early, ate breakfast and started my excursion. There was a light drizzle and a gale blowing outside, but I had high hopes when I started my walk from the Ponte 25 de Abril bridge and moved further into the Belém area. After about half an hour, the rain just started pouring down. Luckily, there was a ticket station for ferries where I could take cover and wait it out.

After the rain had stopped, I continued my journey and came upon the Padrão dos Descobrimentos, a monument to celebrate the Portuguese explorers. After that I crossed the street and decided to enter the Mosteiro dos Jerónimos, which is a totally beautiful monastery and a cloister – I’ve seen many churches and monasteries during my travels, but I have to say I really loved the colors, ambience and overall feel of this place!

The next stop was the probably most famous landmark in Lisbon, Torre de Belém, which was built as a gateway and defensive tower, located at the entrance of the Tagus river. Quite an impressive building, with some very narrow pathways in places. It was also possible to walk the five floors to the top, to get a beautiful view of Lisbon.

Kept on wandering around in the area for a while, and then got to the Belém train station to take the train to the downtown area and the Cais do Sodré station. Once there, I looked at some places, like Praça do Comércio, before walking through Arco de Rua Augusta and getting some late lunch. Strolled around in the city and walked up to, and around, Praça do Rossio.

Then it was time for some serious uphill hiking to get to Castelo de São Jorge. However, it was well worth it, with lots of nice places to see, a huge great preserved castle and a fantastic view of Lisbon!

After an hour up there, I got down again, across where I had been before and on into the Bairro Alto area, old town of Lisbon. Did a little sightseeing there until I, completely tired, sat down in a café where I had an ice-cream and some water. Through the magic of text messaging, I managed to decide a meet-up place with some friends at the Praça Luís de Camões.

Once there, under the neon heart, I met up with the Dutch crew: Mike de Boer, Lieke Arends, Ruben Daniels and Rik Arends. I had the pleasure of meeting Mike and Lieke in Brighton for Full Frontal, and now two more from Javeline, the company behind Ajax.org.

We wandered around a little, and had the luck of coming by the gorgeous Largo do Carmo and Convento do Carmo. Just a little after that, we found a nice restaurant had a good meal with two meals, and my Dutch friends were nice enough to treat me to it. Bedankt!

Some more serious texting going on, back to Praça Luís de Camões and to meet Remy Sharp and Glenn Jones, who had gotten in to Lisbon a few hours earlier. We did a desperate attempt to find a bar that one person (no names) in our company had vague memories about, but it ended up with us just walking further and further away from anything remotely close to a bar. In the end, we took a couple of taxis back to the hotel, and sat down in the hotel bar instead.

All of my sightseeing pictures of Lisbon.

Codebits conference, day 1

I decided to sleep in a little, then got up so I was at the venue at around 10.30 or so. Once there, I registered and got a lot of nice giveaways, and then met up with Remy, Glenn and Brian Suda.

During all day, free pizza, coke (the drink), M&Ms and other assorted candy and drinks was on offer – basically, all the nutrition a geek needs.

Presentations I attended

Picture taken by AmmggMartins

Keynote: We decided to catch the keynote, but unfortunately, it was held in Portuguese. Or, well, thinking so, we left after about ten minutes. Then we saw on the web site that all presentations would be broadcasted live on the web site, and when I got in there, we got to see that they were speaking English by then…
Think before you develop! – Kai Seidler: Kai, working for Sun and behind XAMPP, amongst other things, gave a nice introduction to different languages and approaches, and their respective problems and benefits. He virtually used a slide for each sentence, and later told me he had over 400 slides.
HTML5 JavaScript APIs (+video of the talk!) – Remy Sharp: I saw Remy do a talk very similar talk to this at JSConf.eu in Berlin earlier this year, but I have to say this version/performance was in my opinion better. Remy seemed more calm and in harmony with the material and it is a good API walk-through for JavaScripters.
Optional is required (+video of the talk!) – Brian Suda: I envy Brian, and that is because his talks seemed to be just leaps between things that amused him, complemented by beautiful slides. It was quite entertaining, and I was a bit worried to go on after him.
JavaScript: From Birth to Closure (+video of the talk!) – Robert Nyman: My talk. Once I got started, I felt relaxed, and it seemed to go down well with the audience – feels especially good when people seem to get my sense of humor. My slides are available at SlideShare.
Working with Canvas – Diogo Antunes: After a talk, it is a lot about winding down, dealing with feedback etc. Nevertheless, I wanted to catch Diogo’s presentation, both for the content and that it would be his first presentation in English. I’m quite proud for him being brave enough to take that step, and when it comes to the content, I believe it was a good introduction to what you can do with canvas.
Pond – The social network aggregator and publisher – Pedro Couto e Santos and Gustavo Carvalho: Didn’t see this entire presentation, and listened with just one ear doing other stuff, but Pond seems to be an interesting aggregator of content from different web sites/services, and also offer it to all kinds of mobile phones.

Speakers’ dinner

At around 20.00 in the evening, all speakers were invited to a joint dinner, and we all went on a chartered bus to an, I think, Italian restaurant at the far end of the city. I can’t actually remember if there were a starter (at least we had bread with olives on the side), but we got some good Sangria and then a main course with meat and rice, followed by a nice desert. Got some nice chats with Glenn, Ruben, Remy and Brian Suda.

It was also here that I finally got to talk a little to André Luís. André and I first got in touch back in 2006, so it was really great to finally get the chance to meet in real life!

After dinner, we spent some short time at the venue (read: free WiFi to check some things), and then got back to the hotel to get some sleep at about midnight. So far, not really any late evening. Good for being rested, but unusual for a conference.

Codebits conference, day 2

Got up fairly early because I wanted to catch the first presentation of the day: Rik of Ajax.org.

Presentations I attended

Beholding the giant pyramid of application development; why Ajax applications are its natural top layer (+video of the talk!) – Rik Arends: The first half of Rik’s talk was more philosophical/theoretical and dealed with the background of development and different layers. Personally, I preferred the second half, since then he started to show code and demos of some cool things they have been working on with Ajax.org.
Re-using social media data – Glenn Jones: Got to Glenn’s talk a little late, but it was quite interesting in the sense about reusing already existing data about people on the web. His Ident Engine seems quite cool!
PhoneGap: Mobile App Developer Zero to Hero (+video of the talk!) – Brian LeRoux: Poor Brian was jetlagged out of his mind, so he missed his actual slot. No worries, it got postponed, and once he gave it, it was an interesting view into the state of development for mobile phones, and also about what PhoneGap can offer in that area.

Between Glenn’s and Brian LeRoux’s talk, the extremely friendly Diogo Antunes took me in his car across the Ponte 25 de Abril bridge so I would get the chance to see the Monumento ao Cristo Rei and get a good view of the city from across the river. The monument was quite high, and we took an elevator up to the foot of the actual statue, where the vista in all directions was quite nice!

I also took the time to watch the cool 3D printer in action, which were sometimes printing in plastic, sometimes in chocolate.

All of my pictures of the Codebits conference.

Dinner & party

In the evening, a few of us decided to go out and get some dinner before the night’s events. It ended up with me, Brian Leroux, Glenn and Remy having a couple of beers and some burgers and fries at a café situated just by the river. It was really a pleasant dinner, with both some interesting and sometimes appalling conversations.

We then got back to the venue to see a few songs of the band playing, Pornophonique, before we headed downtown. First it was us in the dinner-company + Kai Sedler, and we found a great pub in the Bairro Alto area. You’d buy your drink within the pub and then stand in a narrow street drinking it, and the street was totally packed (and yet, got even more crowded as the night went along).

Again, some texting, and we were joined by Mike de Boer, Ruben, Lieke and Rik, to form quite a big group of people hanging out and chatting. The interesting part, though, was that cars insisted on driving down this road, and it was almost impossible for them to come past all the people standing there drinking. At first, we thought it was due to some general GPS error/misinformation, but when a number of taxis came down that way too, it seemed like it would have to be the best option for them out of a number must-be poor ones.

Let me just tell you, when a garbage truck decided to drive down that street as well, chaos almost broke out…

At about two in the morning, I felt I really had to get back to the hotel to get a few hours of sleep before going home. Got back to the hotel room, packed, and slept maybe three hours, before I got up at six in the morning to go to the airport.

My driver, Antonio (I think), was really a nice guy and given the time of day, he was quite chatty. We had some interesting conversations and discussed values, before I arrived at the airport.

After such a great time in Lisbon with lots of nice people, it was a bit disheartening to see the Lisbon airport in action. Everything had a long line and seemed to go extremely slow: check-in, baggage drop, security, just buying something in any store… Anyway, since my plane was a bit late, I got enough time to endure the queueing and bought some gifts for my family.

Got some random sleep on the plane, and then finally I was home again.

Till next time Lisbon: thanks for a great conference!

Speaking at Codebits in Lisbon, Portugal

Robert Nyman — Mon, 30 Nov 2009 10:18:15 +0000

Next stop on my little European tour is Codebits in Lisbon, Portugal!

I will be speaking at the conference, giving my presentation JavaScript – From Birth to Closure. It seems like it’s going to be quite an exciting conference!

Tomorrow I will get on the plane there, and it is also my first time in Portugal and Lisbon, so if anyone have any advice to what to see, it would be appreciated!

The HTML5 syntax options problem

Robert Nyman — Fri, 27 Nov 2009 10:27:25 +0000

Usually blog posts with the words “problem, “considered harmful” and similar are just crying foul, but I would like to bring up something I actually believe is/will become a real problem: HTML5 syntax options.

Available syntax options

In strict XHTML, we needed lowercase tag names, quoting our attributes, and an attribute had to have a value (e.g. selected="selected"). We also needed to close all empty elements, e.g. meta, input, img etc, like this: .

But in HTML5, all this goes:

Uppercase tag names
Quotes are optional for attributes
Attribute values are optional
Closing empty elements are optional

All of these examples are valid HTML5:

Hello Friday

Welcome to this blog post!

Also, some people are under the impression that the closing of elements etc (basically, XML-formatting rules), only apply if you serve a web page as application/xhtml+xml or application/xml. This is not true!. XML-style syntax is just as allowed in regular text/html, and some people prefer that syntax.

The choice of the syntax

I believe the WHATWG did the probably only viable choice, and decided to allow all the general syntax variations. When it comes to XML syntax or not, if they had chosen just one path, it would severely hinder the adoption amongst those who wouldn’t agree with it. When it comes to allowing uppercase tag names, no quoting of attributes etc, I believe it’s there to accommodate to code generated by CMSs and other tools.

And, at the end of the day, web browsers will generate the same DOM no matter what syntax one prefers.

The problem

As you can see with all these options, though, it is very hard to ensure that a consistent syntax is used for all HTML code, and we miss out on rigor and code quality. Basically, it is very hard to make something fail validation under these rules; we end up with an “Anything goes”-scenario. And after all these years of fighting for stricter syntax, better code practices etc, this is naturally not a good evolvement.

How do we get stricter syntax?

There are a few options to try and accommodate to this problem:

Change the spec: We could change the specification to say that XML-syntax is only allowed for application/xhtml+xml, and HTML-syntax, strict-style, otherwise. However, as mentioned above, I believe in people choosing the syntax type they prefer.
Evangelism: We could all try to evangelize a better syntax, just as we have done all these years. However, I believe this will never be enough: people will evangelize for different syntaxes, and whatever web developers choose in the end will validate (even a mix of syntaxes will).
Offering tools with different validation options: There could be an offering of tools, and the validator itself, to have options for a stricter syntax. Therefore, rather helping developers by code auditing, than forbidding things through a specification.

I believe the last option here is the only realistic one we could choose. Also, let me point out that I do not put an equal sign between a strict validation option and XML-syntax. For some it is, but for others it’s not. Stricter for me personally means good HTML 4-style: lowercase tag names, quotes and values mandatory for attributes and closing of all non-empty elements (i.e. all elements that have en end tag). Maybe there should be more than one option in the validator.

But is this enough? Can we continue to fight for sensible and best practices syntax where tools/validator options are sufficient? Or, have just (re)opened Pandora’s Box for the web?

My Full Frontal ‘09 escapades – The JavaScript conference

Robert Nyman — Wed, 25 Nov 2009 14:40:55 +0000

I’m (almost) just back from Full Frontal 09, and man, did I have a good time!

Conference takes

First of all, I have to say that I genuinely believe that Full Frontal 09 was absolutely fantastic! As I kept on telling people afterwards, all of the other speakers really stepped up and delivered, and everyone made fantastic performances. I feel very privileged to get to share this experience with everyone there, and honored to have been a part of this line-up and first time around for this event.

Picture by Danny Hope

What made it so good?

Asides from the speakers really doing a god job, I think factors like an absolutely awesome crowd – laughing, interacting, being on board for every detail – together with being in a cinema with oh-so-comfortable chairs really contributed it. Also, having just one track kept everyone a lot more focused on what was currently being presented, and also resulting in less running in doors etc. For speakers, it’s great to get this focus, and for attendees they know what they will be about to see, and won’t hesitate about missing out on some other presentation.

Only thing missing, I’d say, was some sort of joint lunch so everyone could mingle and talk about the morning’s presentations and network in general.

Speakers’ dinner and pre-party

The speakers were invited to a dinner the night before the conference at the restaurant In Vino Veritas in Brighton, and I thought it was a really nice evening with great food! All speakers bar Stuart Langridge were there (because he was flying in Friday morning), plus Remy Sharp, Julie Sharp and Natalie Downe.

After the dinner, we joined the pre-party/pub crawl, and met some quite nice people! For instance, fellow Swede Peter Svensson, Liz Warner and also Mike de Boer and Lieke Arends of Ajax.org.

After the last pub closing, some of us – Chris Heilmann, Mike de Boer, Lieke and Peter Svensson – decided to go down to the sea-front and, by chance, the Doughnut. I got an idea to walk all the way out on the pier and look at the water, when a couple of exceedingly high waves came in and totally sprayed me with water. Dried most of it off, but still felt like the sticky floor of a movie theater on the way back to the hotel, with a salty taste haunting me…

The conference and talks

Picture by Danny Hope

Christian Heilmann – Frontloaded and zipped up – do loose types sink ships? (slides on SlideShare): Christian opened the day in a splendid manner, talking about the potential with JavaScript, and made the important move of pointing out that most problems and security issues aren’t actually because of JavaScript at all.
Robert Nyman – JavaScript: From Birth to Closure (slides on SlideShare): I think my presentation about JavaScript history and then more advanced topics went really well! I was relaxed and excited about talking, and was in a really good state of mind + the fantastic crowd really helped in making me enjoying it! Sure, some parts could always be better, but overall I was quite pleased.
Peter-Paul Koch – W3C Widgets (slides on SlideShare): As most of know, PPK must have some kind of sadistic streak in him with his endless testing of web browsers, and in this case, mobile phones and their web browsing capabilities. Great tests, although at the time, it really scares me about doing more focused development for mobile web sites.
Stuart Langridge – New things that HTML5 provides to JavaScript hackers: Due to a late lunch, I missed the beginning of Stuart’s talk, but managed to see the latter half. He gave a good introduction to the cool things you can know do in most web browsers, and also inspired about working with the open technologies, as opposed to closed-in solutions like Silverlight and Flash (which he compared to the Death Star in Star Wars).
Todd Kloots – More accessible user interfaces with ARIA (slides in a ZIP file): Todd was talking about using ARIA in ways to improve the accessibility of a web user interface, and also talked about the very important fact that most assistive devices do have JavaScript enabled, and that we need to think more about keyboard navigation options in web pages.
Jake Archibald – Optimising where it hurts (slides on SlideShare): Jake was absolutely awesome! I love humor in presentations, which he had aplenty, and he also complemented it with very interesting facts about performance. Something he also brought up was questioning things most people seem to take for granted, but shouldn’t – everyone should test themselves to see how things actually work. Amongst all great presentations, Jake stole the day in my eyes.
Simon Willison – Surprise presentation (Simon’s blog post about his talk): Simon got really inspired by Node.js, and just three days before the conference, he decided to do a completely other talk. It was an impressive demonstration in using virtually no slides, moving around in virtual desktops, terminal and web browser windows.

Before my talk, I was very happy to see my friend icaaq being there, and during lunch I also got the chance to meet my old friend Chris Mills, who I was meeting the second time this year!

Picture by Chris Heilmann

The after-party

At the after-party, I got the pleasure of first having dinner at the same table as Michael Mahemoff (of books and Ajaxian fame). Then, my friend Jim O’Donnell had come down to Brighton just for the party, which was great! I also spent some considerable time talking to the very nice Sander Aarts and Wilfred Nas, and at least I got the chance to talk about a minute with Jeremy Keith.

Paul Downey also showed me his completely wonderful notes of the talks, and we spoke very briefly.

Picture by Paul Downey

Just before she left the party, Henny Swahn came by to say hi, and said that she read my blog. Tired, confused (and any other attribute applicable), I thought she said she “read my book“, so I eagerly tried to convince her I haven’t written any book with repeating “no book, no book”. Sorry Henny, please don’t stop reading my blog!

After saying our good-byes to everyone, which took a long time, Chris Heilmann and I slowly made our way back to the hotel again.

People I never got to see

There were also a number of people I had hoped to meet, but unfortunately missed out on: Patrick H. Lauke, who got ill and missed the after-party, Dave Child, who had to go back to work after half the day, Andrea Giammarchi, who couldn’t make it to the event and Dan Webb, who was there, but I apparently just missed. Next time, guys!

Going home

Getting up fairly early morning, I was getting ready to take the train up to London, Victoria Station, and then on to Heathrow to catch my flight. I decided to leave Brighton 4 hours before my flight was due to take off to have good time and no stress.

It started in the ticket line in Brighton, which took some time, so I missed the “fast” train, and had to take the “slow” train instead. And boy, slow really meant SLOW! It stopped everywhere, and the hordes getting on at the Gatwick station with all their bags didn’t make it better; the train was completely packed. Once we finally reached Victoria Station, it took, I kid you not, 25 minutes just to get a ticket to the tube! Trying to get to the subway trains also proved to be harder than I thought: there were only two ticket entrances, and one of them was out of order, so there was a long line to get through. About three persons before I reached it, the other one went out of order too! So, literally no way to get in! Luckily I managed to climb it, and got the help from someone catching my suit case (yes, without stealing it).

Getting slightly stressed now, with a slow train and slow ticket sales for the tube, it felt good to at least be on the tube on the way to Heathrow. Or so I thought. Halfway there, there was an announcement that the tube train had broken down and that we had to get off (luckily at a station), and wait for the next train. People swearing, and me really starting to get worried. Called home to Fredrika to make sure what Terminal to go to at least, so I could save time on any potential mistake there.

Once we arrived at Heathrow, the long automatic walking thing (you know, like a horizontal escalator, sort of) was broken, so we all had to walk/run a pretty long distance. Then I reached an escalator, but it was broken too, so I had to run up the stairs. Totally panicking about missing my flight now, it really took me by surprise when check-in, baggage drop, boarding card check, security and then passport check altogether took 15 minutes. Go Heathrow!

Therefore, I took some time buying gifts for my children, wandering around, and buying a couple of chicken and bacon wraps and a couple of bottles of water, to have a quick lunch. Saw that I was to take off from gate 9, and according to the signs, it seemed to be close. So, I decided to have my lunch, and then 20 minutes before take-off, walk to my gate. Finished eating, just looked up and on the screens it read GATE CLOSING. NOOOO!!!!!! From panic, to having time, to missing the flight on the gate closing extremely early! This could not be happening!

Started to desperately run towards gate 1-9, according to the signs. Ran uphill, and suddenly only gate 3 and 5-7 were options. What? Managed to stop someone with a badge to ask where the hell gate 9 was, and got pointed back just the way I came. Ran down the small slope again, and there it was, no marking whatsoever and looked like a janitor’s closet. Being the last one, I managed to just board before they closed the gate…

It seems like this gate-closing business was in relation to the plane staff wanting to get home early, because when we landed in Stockholm it was 35 minutes before the scheduled arrival! Oh well, home sweet home.

The JSConf.eu conference and my visit to Berlin

Robert Nyman — Wed, 18 Nov 2009 17:13:05 +0000

About a week and a half ago, I had the pleasure of speaking at JSConf.eu!

Background

Inspired by JSConf in the US, Jan Lehnardt, Malte Ubl and Holger Blank, decided to organize JSConf.eu. They gathered a stunning line-up of speakers, and I’m just happy I got to be one too!

My travel there

I got to the Arlanda airport in Stockholm in good time, had already checked in and got through security pretty quickly. Checked the board for my gate, and saw that it was just a couple of hundred meters away. Everything under control (or so I thought). As always when waiting for a flight, I wandered around, looking in shops, buying a couple of bottles of water.

About half an hour before my flight was due to take off, I walked to my gate, 10 C. When I got there, there was no attendant, but just a door to go through. On the other side of the door, the only sign I could see was “Exit”. Ok, that couldn’t be right. Looking the other way, there was an elevator, so I got in and rode it to the bottom floor.

I ended up in something that felt like an aquarium, down on ground level looking out a huge window at the airplanes being packed and tanked. There was a door, but needless to say, it was locked. All I could see was one enormous button, with a label saying that I should press it to get a transfer to Terminal 2 (I was in Terminal 5, from where virtually all international flights go). I pushed the button, a circle lit up around it, and nothing happened. It said that the transfer bus would take ten minutes, tops, to show up – no bus did.

Looking at the time now, with 25 minutes to take-off, I was starting to get worried. I decided to run up the flights of stairs next to me, and find someone to talk to. It basically went like this:

- How do I get to Terminal 2 the fastest way?
- Terminal 2? Take the transfer bus.
- But no bus is coming, and my plan leaves in 25 minutes!
- Oh.
- Can you you check where the transfer bus is?
She called, on an intercom, no less, the transfer bus department, but, surprisingly enough, they knew nothing about transfer buses…

- There must be another way to get there, right?
- Well, you could go out through customs again, run to Terminal 2, go through their own set of security, and run to the gate. But it’s pretty far, so I’m not sure you will make it in time.
- Ok, I’ll have to try at least. Can you please call them the gate and let them know I will be late?
- No, sorry, there’s no way for us to contact the gate.
WTF?! Really? No way? Highly convinced they could contact them, there was no time for an argument.
- Forget it, I’ll run then.

Running with my cabin bag on wheels (most of the time, just one of them touching the ground and the other in mid-air), and my overstuffed backpack with computer and lots of other things, I first got through customs and then onwards on my journey to Terminal 2. And let me tell you, Terminal 2 is far away from Terminal 5 at Arlanda. I don’t know how many doors and long empty corridors I ran through, but I was all drenched in sweat and gasping for air. Every time I felt I wouldn’t make it, I just pushed a little harder – I just had to.

Five minutes before take-off I got to security at Terminal 2, where they forced me to leave my water bottles I had bought at the other waiting area, which in theory is correct of them, but it still bothered me at that time, because they’re both behind security checks. Screw the bottles, I was going to make it, no matter what. Through security, I found my gate and got onboard the plane just in time.

And let me tell you, in the time of a certain flu going around, it is not a good thing to get on the plane, drenched in sweat with a nervous stare – on top of that, I also started coughing from the panic run. Oh well, no one was leaning over to my seat, at least, I can tell you that…

Once in Berlin I was sitting waiting around for Remy Sharp to show up with his flight from Copenhagen. Interestingly, I flew with Air Berlin, and was there even before time, I think, while Remy flew with the Scandinavian SAS and was late…

As soon as he had arrived, we got in a cab and went to the hotel. My hotel room looked really nice, although there was this hint of a smell of sewage, and the windows had been left opened. Not a good sign…

Friday night dinner

I was really looking forward to Friday night, because it meant time to meet up with my good Danish friend Morgan Roderick, who is now living and working (contracting) for Nokia in Berlin (ironically, he lives in Sweden otherwise, but only places we have met is abroad). Morgan met up with me and Remy close to the subway station near our hotel, and he took us to a great Asian restaurant, which had all kinds of interesting dishes.

Once there, we met his British colleagues Toby and Andy, who were quite nice chaps, and after a while we were joined by one more of Morgan’s work friends, Magnus, who is from Sweden (and, of course, is very nice too). I really, thoroughly, enjoyed the evening, and it was the first time in quite some time that I actually felt relaxed. After a few hours of dinner, the Brits dropped of while the rest of us went into a cozy corner pub, with a funky interior (especially the bathroom!) and some weird music. Kind of gave the feel of being in Jackie Brown, or some other Tarantino movie.

After a fantastic evening, we got back to the hotel, and as is my usual fashion, I was doing some panic changes to my slide deck late into the night…

The conference, day 1

JSConf.eu was split up into two days, with lots of talks each day, and for the most of the time, dual tracks going on. Once I got there, I also managed to meet a number of fellow Swedes attending, where my friend Martin Lissmyr was one of them, and it is always nice to have Swedes around. For comfort and support, you know.

Below are short takes on the sessions I managed to see.

Talks I attended

The Future of Web-Apps – Dion Almaer: Dion was supposed to give this talk with his compadre Ben Galbraith, but after Øredev, Ben got so sick that he actually had to cancel and go home to the US. I hope you are better now, Ben! Dion’s talk consisted of parts of the talk I saw Ben doing at Øredev, but also of other interesting things. I also, finally, got to see the wonderful Louis C.K. talk “Everythings Amazing & Nobody’s Happy”, which I had on my hard drive, but had failed to take the time to see. All in all, Dion did a great and inspiring keynote! I’m just sad that, both at Øredev and JSConf.eu, all I managed to do was say hi to Dion, but never talk.
CommonJS – JavaScript vs. Ruby, Python, Java, etc. – Kris Kowal: CommonJS is intended to “…building up the JavaScript ecosystem for web servers, desktop and command line apps and in the browser.” I think it’s great with such an initiative, but at the same time, it’s not a part of what I’m personally interested in, so I didn’t listen that intensely. From what I understood, though, the work with CommonJS is appreciated.
Building Desktop-Caliber Web Apps with Capuccino and Atlas – Francisco Tolmasky: This was a very interesting demo, and the things they are creating really seem awesome – some clever minds at work there. They also dropped the idea of using MHTML in Internet Explorer to serve everything in one HTTP request – quite cool! Part of me can’t help to wonder about all the generated code, though, but I haven’t had the time to check it out.
HTML5 JavaScript APIs – Remy Sharp: Remy was giving a talk about different APIs and cool features offered with HTML5 and surrounding technologies, and I think the options for developers were alluring – and if you were just paying attention, there was a lot of things covered in a short amount of time.
JavaScript – From Birth to Closure – Robert Nyman: Well, yes, naturally I was there – this was my talk. I realized during this talk that I’m not a professional speaker, at least not yet. Especially during the beginning of my talk, I let some details get to me that kind of threw my focus off (insignificant details I over-focused on, like weird position for me to stand at, it seemed like people weren’t getting my first couple of jokes etc). After a while I got a little bit better, but not as good as it felt at Øredev. Oh well, I hope I have learned something, and that people went away from my talk with at least something.
Extreme JavaScript Performance – Thomas Fuchs: Having done some performance testing with JavaScript and how web browsers react myself, I think it was a good talk with things to consider in the future for an optimal result.
ECMAScript – Douglas Crockford: Douglas gave a stunning talk about the history of ECMAScript, different twists and turns on the way, how IBM seem to be filled with just lawyers who focus on patents rather than offering something actually good etc. It was also about the future of ECMAScript, and how everyone will work together in small steps to make it better. Douglas is a fantastic story-teller, and it is mesmerizing sitting there listening to any of his talks – and this was the third talk this week for me seeing him!

Saturday night dinner

After the talks on Saturday, me and the jQuery crew, meaning, John Resig, Brandon Aaron, Jörn Zaefferer and Remy Sharp went out for dinner, and ended up at, of all places, an Australian restaurant at Potsdam Plaza in Berlin. Having never been there before, Potsdam Plaza seemed to be a spectacular place, and in the middle of it, there was this huge thing built up for the movie 2012 with waterfalls and all. I tried to get the team to cave in and acknowledge DOMAssistant’s superiority, but it didn’t really happen…

Party time

The event party was maybe a 10 minutes cold walk from Potsdam Plaza, and in there Nokia were sponsoring all alcohol – it seemed to be appreciated.
Also there, I got to meet David Zschille who I had met my first time in Berlin back in March this year, at a Mozilla event. Unfortunately, the music was a bit loud, so not many conversations were, well, fluent in there.

I shared a cab back to the hotel with my friend Tom Hughes-Croucher and Nicole Sullivan, and got back, well, not too late, I think.

The conference, day 2

A bit tired, I got up later, and luckily enough, I got to share a cab to the conference venue with Steve Souders and Douglas Crockford. As I have mentioned before, both these gentlemen have been highly influential to my work and evolvement as a web developer, and having first met them at Øredev and now in Berlin, it was almost half a week of me stalking them, constantly asking questions, desperately hoping that some genius would rub off on me. So, thanks for putting up with me, guys!

Talks I attended

Loading JS – even caveman can do it – Kyle Simpson: Kyle has being doing some really great work with LABjs, to tend to the problem of JavaScript loading blocking a web page, parallel loading and similar things. Quite nice!
End to End JavaScript – From Server to Client – Tom Hughes-Croucher: Tom was giving a talk of JavaScript on the server, how to improve the results of calls done with YQL with JavaScript and other things. Interesting, although not really something I personally work with on a day-to-day basis.
OOCSS – Nicole Sullivan: Nicole has some really interesting ideas with improving CSS, and she has a lot of experience to back her claims. Overall, I think she has great thoughts, although I’m not really on board with all her takes. I plan to cover OOCSS – Object-Oriented CSS – in a future blog post.
Unittesting JavaScript with Evidence – Tobie Langel: Poor Tobie got off to a bad start with a presentation file/program that gave him some grief, and as a fellow presenter, I really felt with him. Once that was sorted out, though, he have an introduction to unit testing with the Evidence framework.
JavaScript in Browser Performance – Steve Souders: Steve gave a talk very similar to the one he gave at Øredev, but my impression is that he was more on fire here, and that the crowd seemed to be more onboard with what he was talking about. Always inspiring!

Going home

Unfortunately I had to leave before the last talk by John Resig about testing JavaScript to catch my plane home. Proudly, I can say, I managed to have a casual talk in German with the cab driver for a full thirty minutes to the airport.

JSConf.eu was great, I applaud the initiative, and I sure hope it will happen again next year!

Please also take a look at My pictures of JSConf.eu 2009 and Berlin.

A faster web with Resource Packages – Mozilla suggestion to have just one HTTP request

Robert Nyman — Tue, 17 Nov 2009 11:11:32 +0000

One of the most common problem on the web is slow web sites, wasting he time of end users. Now, perhaps, Mozilla has come up with a solution for this, which will be applicable for all web browser vendors.

Background

One of the main problems slowing web sites down is the number of HTTP requests, i.e. the number of times a separate file need to be retrieved from the server; e.g. images, CSS and JavaScript files. Depending on web browser, you can only have between 2 and 8 concurrent HTTP requests. There can also be delays between requests, depending on file type asked for, redundant header information sent etc.

You can always combine all CSS files into one and all JavaScript files into one through a clever deployment script, but it’s still a couple of requests. Then with images, you can use CSS sprites, but that could affect memory, and there’s still no solution for inline images in a web page.

So, what if we could combine all HTTP requests into one?

Picture from standing on the break on Flickr

Resource Packages

Alexander Limi of Mozilla has been working on a solution to this, described in detail in Making browsers faster: Resource Packages. The idea is to be able to combine all HTTP requests into one, and have this implemented in all web browsers, and to have it backwards compatible.

Sounds to good to be true, right?

Implementation

The idea is to use the ZIP format, which is supported on all platforms, and to package all resources in a web page into one ZIP file. You then instruct the web browser, via a link element, to download that ZIP package of resources.

Note that the type attribute is not needed in HTML5. Also worth mentioning is that the files in the resource package should take precedence over all files included in the page through other elements (e.g. the src attribute on images and script elements). Paths on the resource file will be relative to where the actual resource package exists in the hierarchy.

You can also complement it with a manifest file that list all your files in the resource package, and also be able to use it in conjunction with Offline Resources in HTML5.

javascript/jquery.js
styles/reset.css
styles/grid.css
styles/main.css
images/save.png
images/info.png

To make this work for any web site you build, you could either manually, or through a deploy script, zip all the necessary files together for your resource package. And when it comes to inline images in a web page, you could actually let the server just zip it on the fly, first time that page is being requested – it will be some work for the server, but the performance gain of just one HTTP request is very likely to make it worth it.

Picture from Mast Farm Picnic – 019 on Flickr

Web browser implementations

What web browser vendors need to do is implement support for a link element to include a resource package, unpack it and then use those files instead of those referenced at other places in a web page. Older web browsers lacking support will just ignore this and work as they always have.

What is really exciting is that this is already to be implemented in Firefox 3.7!

And what is also very encouraging is that Mozilla have been sending this proposal out to other web browser vendors, so everyone can offer it in their respective web browser (the beautiful thing of an organization such as Mozilla ). They have been in talks with performance guru Steve Souders, Alex Russell of Google and Ben Galbraith & Dion Almaer of Palm to get good feedback from an implementor’s perspective.

Perhaps the web will actually be fast(er) in the future!

The Øredev 2009 Conference adventure

Robert Nyman — Mon, 16 Nov 2009 11:27:17 +0000

Week before last, I had the pleasure of attending and speaking at two conferences. With even more conferences in the pipe, last week was pretty intense, work-wise, to cover up for that, but now I thought I’d take the time to talk about them, starting in this post with the Øredev 2009 conference.

Getting there

Since the Øredev 2009 conference takes place in Malmö, in Sweden, I decided to take the X 2000 train there instead of flying. I could try and say that it was for environmental reasons, which is a good thing, but to be honest, my decision was just based on travel time and making it easier with arriving directly at the station next to my hotel.

In retrospect, though – and I know how weak this sounds – the train goes really fast and takes the curves leaning, so instead of me working or reading, I just needed to basically just sit still to avoid starting feeling sick. So even though I like the idea, not sure I will take the train next time – at least not the high-speed one.

I work out a lot regularly, and I drink protein shakes. So, as a snack/afternoon meal at the train, I wanted to drink one, but didn’t really feel like preparing it in the toilet sink. Therefore, after some serious smooth-talking, I managed to convince the train conductor to allow me to use his little kitchen which had a sink and faucet. Last thing he said to me before I went in there was: “Be careful, the train can be a bit jerky in some turns – just so you know”.

I though “Yeah, whatever, I’m a grown-up now, I can manage”, filled my shaker with protein powder and water, and started shaking it. After just a few seconds the lid got off the shaker, and I spilled the containing goo all over me and the entire kitchen… I got some paper and started to clean up as good as I could; the kitchen looked fairly decent at least, but the protein drink stains on my shirt looked like sperm or something… No bother, only four more shirt-stained hours to go on the train!

So, in my stain misery, all I could do was tweet about it and share the “joy” with people. I think the best reply ever was from Jim O’Donnell, who wondered about me being in a room with the conductor, and a stained shirt, and ultimately asked me if “Protein shake” was our safe word!

Hotel room

Eventually I arrived in Malmö, and walked across the bridge from the train station over to the hotel, Elite Hotel Savoy. I checked in and got put in room 626. All well so far, but I got some interesting instructions on how to get to my room.

Take the lift to the second floor, get off, walk down half a stair, take the corridor to another elevator, take that one to your room.

Ok… I always thought room numbers starting with 600 would be on the 6th floor, but apparently my floor seemed to be wedged somewhere between the first and second floor, and elevator number two surely must have been going exclusively horizontal.

Nevertheless, I got a beautiful room with lots of space for all my stuff, and a little envelope with welcoming instructions as well (and even some Swedish car candy!). I unpacked what I had to, and then directly went off to the speakers’ dinner.

Speakers’ dinner

The speakers’ dinner took place at the absolutely gorgeous City Hall in Malmö, which is, especially on the interior, very very nice – let me tell you, it was the first time as a speaker walking on a red carpet to the welcome room. Feeling a bit lost and not really knowing any other speaker, I browsed around amongst the other speakers in the mingling room just before the dinner, and luckily I ran into the lovely Theresa Neil. Theresa and I both were speakers at the Scandinavian Web developer Conference 2009 so we got to know each other there, and it was good to see that she once again this year was visiting Sweden!

We were then ushered into another, highly ornamented, room with lots of round tables put up for dinner and enormous chandeliers hanging over our heads. Theresa and I sat down at one table, and we were joined by some people from the conference organizing committee as well as performance guru Steve Souders, Vice President of Development at Oracle Cameron Purdy, interaction designer Dan Saffer and Alex Loddengaard.

It was a nice dinner with some very, eh, interesting dishes, and at the end of it I dared to approach Steve Souders – he has influenced a lot of my work and it was really good to meet him in person!
After the dinner a few of us went to the official pub of the conference, just next to my hotel, and drank beer, spoke and generally had a good time.

Like before any of my speaking engagements, I was staying up way too late, making last-minute changes and generally panicking…

The conference

I got up pretty early in the morning, and went for a morning walk. Had breakfast, packed all my stuff and then I decided to walk to the venue instead of taking the offered shuttle service – just to get some fresh air and properly wake up, I thought. And man, did I wake up! It was very brisk outside so I guess the walk served its purpose at least.

I got my badge, which interestingly read “Independent” (probably since I was invited as me, and not just as an employee) – I liked the notion, though, of being strong and independent.

I managed to see some of Marc Lesser’s keynote “Accomplishing more by doing less” (he sure has a name that fits his presentation…), before I went to where my presentation would be and got ready.

My presentation

I gave my presentation JavaScript – From Birth to Closure (View/download on SlideShare) and overall I think it went pretty good. I was worked up, in a good mood and I felt I got good some good feedback/reactions from the audience as well. Only regret I have is that I had a dirty joke in the middle of my presentation, just to desperately shock/wake people up. Sure, some people liked it and tweeted about it, but the general feedback after was that it was a bit low and uncalled for, and I believe some even got offended. Please accept my apologies – the joke is now gone.

Let me also say that it is quite a mental challenge to give a talk on JavaScript with Douglas Crockford, JavaScript Godfather, in the audience. The feedback I got afterwards, though, was that I seemed to have done well.

Presentations

With nine (!) separate tracks going at the same time, there were quite a number of talks to choose from. The other presentations I attended were:

JavaScript: The Good Parts – Douglas Crockford: I have seen this talk before by Douglas, except for some minor changes, and it is a great presentation, and especially the introduction to have if you are coming to JavaScript from other programming languages like Java, C++ or similar.
Even Faster Web Sites – Steve Souders: Steve was talking about how much performance matters, not just for end user experience, but also in conversions, loyalty and revenue, and showed both some interesting techniques as well as numbers to back his claims. First time seeing Steve talk, and it was very inspiring!
The JSON Saga: Douglas gave his talk about how JSON came to be, and it truly is a saga that has led to where we are today. Besides everything JSON, I also learned that Douglas apparently, at times, likes to design logos.
Design to Development – Collaborating and Communicating on Interaction Design – Theresa Neil: Needing a break from code, I decided to see Theresa give her talk about user experience and different approaches to common problems. As a fellow presenter, I also liked her new slide deck design!
How Exactly Can Developers Create a Compelling User Experience? – Ben Galbraith: Getting inspired by Theresa’s talk, I decided to stay for another user experience talk. Ben, (previously with Google, then Mozilla, now Palm), gave a nice presentation about how design and user experience matters, and presented a lot of feedback and quotes from people researching it.

Evening

After the conference, the organizers were offering dinner at the venue together with some beer – I think this is a great idea, to keep everyone around and still mingling even though you are several hundred people! During dinner, Remy showed up, since he was due to talk the day after. We had some dinner together, and then later some beers at the pub, but both he and I were quite tired, both from escapades before the conference, as well as upcoming adventures.

Morning after, I left to go home and meet the family, before embarking on my next conference adventure (which I will cover in my next blog post).

The Øredev Conference review

It was my first time at Øredev, and I have to say I was extremely satisfied! Everything, down to the last detail, was very well organized, and everything just worked!
Especially as a speaker, it’s so good when you don’t need to waste time and effort into administrative details, but instead just focus on your talk, and the web track leader Olof Adell set a great example there!

If I ever get the chance to go again, I would say yes without hesitating! Thanks for everyone making it such a great event, and especially to Michael Tiberg for making this happen!

My pictures from the event are available in the Øredev 2009 conference photo set

Robert's talk

Speaking at FOSDEM 2010 – An Introduction to HTML

Geek Meet February 8th 2010 – Christopher Blizzard of Mozilla!

Introducing Christopher Blizzard

The talks

When & where

Sign up now!

All sold out!

The video element in HTML5 – great possibilites, but also codec and licensing problems

The video element

Different treats for different web browsers

Codecs and licenses

Conclusively…

Related reading

IE and Life

Tools for concatenating and minifying CSS and JavaScript files in different development environments

PHP

Django

Ruby

Java

.Net

Other tools or approaches?

How to reduce the number of HTTP requests

What we have

Reducing the number of HTTP requests

CSS Sprites

Introducing base64-encoded Data URIs

Regular CSS background image

Base64 Data URI as background image

Comparing the alternatives

Web browser support

Internet Explorer…

Tools for encoding

High-traffic web sites using Data URIs

Acknowledgements

CSS background transparency without affecting child elements, through RGBa and filters

The problem

The solution!

A little caveat

Combining it all

Web browser support

Acknowledgements

Thank you for 2009 – Happy New Year!

Speaking and travel

Honorable mentions

Søren Skrøder

Conference information and presentation slides

Mozilla Add-Ons Workshop, Berlin [Germany] – March 28th

Scandinavian Web Developer Conference 2009, Stockholm [Sweden] – May 25th

Mozilla/Maemo Danish Weekend, Copenhagen [Denmark] – May 30th-31st

Mozilla Swedish Community Meetup, Stockholm [Sweden] – June 2nd

Øredev 2009, Malmö [Sweden] – November 4th

JSConf.eu 2009, Berlin [Germany] – November 7th

Full Frontal JavaScript Conference 2009, Brighton [United Kingdom] – November 20th

Codebits 2009, Lisbon [Portugal] – December 3rd

The year of people dying

All my posts in 2009

Happy New Year!

Merry Christmas, Happy Holidays!

Releasing Inline Code Finder as a Google Chrome extension

What it does

What it’s like writing an extension for Google Chrome

Testing Object-Oriented CSS (OOCSS) for easier CSS development

What it is

What I like

What I don’t like

Conclusion

Content Management Systems are a dying breed

Background

“One size fits all”

“Don’t reinvent the wheel”

They will be around

The death of a friend

My trip to Lisbon, Portugal, and the Codebits conference

Arriving in Lisbon

Lisbon sightseeing

Codebits conference, day 1

Presentations I attended

Speakers’ dinner

Codebits conference, day 2

The `video` element