The solution is called postMessage and is part of the HTML5 Web Messaging specification. What makes it cool, and very easy to use, is that all you need to trigger it is to call a method and add an event handler:

1. Call the postMessage method of the window/iframe element you want to send the information to.
2. Specify origin. Should be a domain or a wildcard "*"
3. In the receiving window, just add an event listener for the message event.
4. Optional: add an origin check for security reasons.

The code to do this

In this example we will have one containing page with a form, posting a message to an iframe in that page.

Code used in the containing page

<form id="the-form" action="/">
	<input type="text" id="my-message" value="Your message">
	<input type="submit" value="postMessage">
</form>

<iframe id="da-iframe" src="postMessageTarget.html"></iframe>

	window.onload = function () {
		var iframeWin = document.getElementById("da-iframe").contentWindow,
			form = document.getElementById("the-form"),
			myMessage = document.getElementById("my-message");

		myMessage.select();	

		form.onsubmit = function () {
			iframeWin.postMessage(myMessage.value, "http://robertnyman.com");
			return false;
		};
	};

Code used in the iframe

	<p id="received-message">I've heard nothing yet</p>

	function displayMessage (evt) {
		var message;
		if (evt.origin !== "http://robertnyman.com") {
			message = "You are not worthy";
		}
		else {
			message = "I got " + evt.data + " from " + evt.origin;
		}
		document.getElementById("received-message").innerHTML = message;
	}

	if (window.addEventListener) {
		// For standards-compliant web browsers
		window.addEventListener("message", displayMessage, false);
	}
	else {
		window.attachEvent("onmessage", displayMessage);
	}

Web browser support

The nice thing is that this is supported in:

• Internet Explorer 8.0+
• Firefox 3.0+
• Safari 4.0+
• Google Chrome 1.0+
• Opera 9.5+

Demo and my HTML5 playground

You can see the above code in action at my postMessage demo, which is part of a new testing ground on my web site, HTML5 – Information and samples for HTML5 and related APIs which displays various HTML5 examples, the code to run them and web browser compatibility..

Play around and enjoy!

I’ve tried to read up about it and play around with the preview as much as possible to get any indication of what to expect from IE 9, and here’s my take:

The good

I thought I’d first browse through the things I find good or at least promising.

Performance

One of the most exciting features in IE9 so far is the hardware accelerated rendering, which so far seems to give tremendously good results. IE9 also has a new JavaScript engine, Chakra, which has given a huge boost to JavaScript performance where it is on par with competing web browsers with a good result in the SunSpider test.

Picture taken from HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers

I’m very glad to see this, and I hope it will drastically improve speed in IE9, and in turn in other web browsers as well – all for the gain of the end users.

CSS3 selectors support

Impressingly, IE9 has almost complete CSS3 selector support (many other web browsers already do), passing 576 out of 578 tests in the CSS3 Selectors Test. It also supports rgba colors, and border-radius, so in about ten years we don’t need images to have rounded corners on the web…

Support for real DOM Level 2 Events

About ten years after its competitors, Microsoft has finally implemented proper event support in IE). That means that code like this will actually work as expected:

	document.addEventListener("click", function () {
		alert("Hello!");
	}, false);

This is something I thought IE8 should not have been released without.

Support for the <video> element.

Not available in the platform preview that is now publicly available, but showed at MIX, was support for the video element, which is great news!

Styling of HTML5 elements

As I mentioned in my post An Introduction to HTML5, in previous versions of Internet Explorer you needed a HTML5 Shiv, i.e. a JavaScript, to trigger it into applying CSS styles to new elements, such as article, header, aside etc. This is no longer needed, and works as expected in IE9.

SVG support

Again, LONG after competitors (blah, blah, blah), IE9 finally has a SVG implementation. Remains to be tested how good it is, what parts are covered etc, but a move in the right direction.

XHTML. Yes, real XHTML.

Again, almost a decade after web browsers, IE9 finally supports the application/xhtml+xml MIME type! Meaning, for those who need to use true XML/XHTML, this will now become an option.

Daring to speak of others

One thing that made me happy is that they dare to mention competing web browser both in their diagrams and have logos of them in their demos. Before it seemed like something like this was forbidden, so this new breeze of openness makes me happy.

The bad

No <canvas> element support

One of the most exciting technologies to create exciting content on the web is the canvas element. Unfortunately, there is, so far, no support for canvas in IE9 and no mention of it whatsoever. From reading the blog post Working with the HTML5 Community, however, Microsoft state:

…Together, we’re working on <canvas> HTML prototypes to use as ‘proof of concepts’ to ensure the feature is well-designed…

If that actually means anything at all, I have no idea, but let’s hope it’s an indication of canvas support to come. Till then, its omission is a letdown.

Acid3 support

At this time, IE9 scores 55 out of a 100, whereas most other web browser have scored 100/100, or are very close. There are many more things than an Acid3 score, but it’s still a hint about on what level IE9 is playing on.

Picture taken from HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers

Lack of support for exciting CSS

Albeit the above-mentioned CSS3 support is good, unfortunately IE9 lacks support for box-shadow, transform, CSS gradients, CSS animations and similar. Also, interestingly enough, it doesn’t seem to render any of its proprietary CSS filter styles – but, this is just a developer preview and probably doesn’t imply anything.

No support for Windows XP

Interestingly, Microsoft has decided not to offer IE9 for Windows XP. While I understand their motive with people upgrading OSes, not wanting to support an old operating system version etc, it’s a bold (or annoying) move when 65% of the market has Windows XP. It’s also a pain for developers who virtualize Windows (and yes, there are tons of them) who only want a light-weight OS and don’t want to buy and install Windows Vista or Windows 7.

Extension model?

Looking at the immense success of add-ons for Firefox and also the good things Google have achieved for extension developers with Google Chrome, Microsoft sincerely need to look into simple extensibility of Internet Explorer with web technologies.

The true letdown

One thing really stands out in comparison to the bad parts.

Choice of video codec

IE9 has chosen to use the H.264 codec, and if that remains their only choice and no support for Ogg Theora it is a sad, sad day for open video on the web, and something which will severely cripple the usage of the video element. Read more about this in The video element in HTML5 – great possibilities, but also codec and licensing problems.

This is a huge letdown for me.

The verdict

For me, jaded from experience, I have heard lots of promises from Microsoft over the years what they will deliver and have consistently been disappointed. However, many of the above things are exciting if they make it all the way, and addressing the bad parts and the letdown could actually make this into a good release.

However, except for performance, I see no real exciter above where they will be ahead their competitors in any way, and I think Microsoft really need that to compete. SO I guess we have to wait and see what will actually be released, And as alway with Microsoft and Internet Explorer:

I believe it when I see it.

Introducing geolocation

Geolocation, i.e. finding out where someone is located, is extremely simple for a web developer. This is the code to accomplish that:

	// Check for geolocation support
	if (navigator.geolocation) {
		// Use method getCurrentPosition to get coordinates
		navigator.geolocation.getCurrentPosition(function (position) {
			// Access them accordingly
			alert(position.coords.latitude + ", " + position.coords.longitude);
		});
	}

That’s it! Pretty simple, right?

What happens when you utilize this code is that the web browser will show a notification to the end user, ask them if they want to share their location or not, and offer them an option to remember that choice for future preference. In Firefox, it looks like this:

Web browser support

• Firefox 3.5+
• Firefox on Mobile (aka Fennec)
• Safari on the iPhone (not the desktop)
• Android web browser

It should also be noted that at the time of writing, a beta of Google Chrome supports it, and I feel certain the other web browser vendors will shortly follow suit.

Not a part of HTML5

Even though it is bundled with other features, let’s just clear out a common misunderstanding: geolocation is not a part of the HTML5 specification, but rather comes from the Geolocation API Specification. Not that it really matters, though. Geolocation is new, cool and very useful, and if you want to bundle it with HTML5 when you talk about (just like most people did using the word AJAX to sell any sort of JavaScripting), be my guest.

Using geolocation and showing current location

So, naturally, with this newfound knowledge, we want to utilize it with Google Maps and offer users an option to see where they are located on a map. The code to do this (with fallbacks if the user declines, or has a web browser that doesn’t support geolocation) looks like this:

HTML

	<div id="map"></div>

JavaScript

	/*
		A Google Maps API key can be attained at 

http://code.google.com/apis/maps/signup.html

	*/
	<script src="http://www.google.com/jsapi?key=[Your Google Maps API key]"></script>
	<script>
		(function () {
			google.load("maps", "2");
			google.setOnLoadCallback(function () {
				// Create map
				var map = new google.maps.Map2(document.getElementById("map")),
					markerText = "<h2>You are here</h2><p>Nice with geolocation, ain't it?</p>",
					markOutLocation = function (lat, long) {
						var latLong = new google.maps.LatLng(lat, long),
							marker = new google.maps.Marker(latLong);
						map.setCenter(latLong, 13);
						map.addOverlay(marker);
						marker.openInfoWindow(markerText);
						google.maps.Event.addListener(marker, "click", function () {
							marker.openInfoWindow(markerText);
						});
					};
					map.setUIToDefault();

				// Check for geolocation support
				if (navigator.geolocation) {
					// Get current position
					navigator.geolocation.getCurrentPosition(function (position) {
							// Success!
							markOutLocation(position.coords.latitude, position.coords.longitude);
						},
						function () {
							// Gelocation fallback: Defaults to Stockholm, Sweden
							markerText = "<p>Please accept geolocation for me to be able to find you. <br>I've put you in Stockholm for now.</p>";
							markOutLocation(59.3325215, 18.0643818);
						}
					);
				}
				else {
					// No geolocation fallback: Defaults to Eeaster Island, Chile
					markerText = "<p>No location support. Try Easter Island for now.</p>";
					markOutLocation(-27.121192, -109.366424);
				}
			});
		})();
	</script>

You can see this example in action an try it out at http://robertnyman.com/html5/geolocation/current-location.html.

Using geolocation and showing travel route and directions

Google are working on Google Maps JavaScript API V3, which is available as a Labs project. The cool thing about this, apart from very good performance, is the option to show routes between two points, and also displaying a list of directions.

They way to do that looks like this in code (like above examples, contains fallbacks):

HTML

	<div id="map"></div>
	<div id="map-directions"></div>

	<script type="text/javascript" src="http://maps.google.se/maps/api/js?sensor=false"></script>
	<script>
		(function () {
			var directionsService = new google.maps.DirectionsService(),
				directionsDisplay = new google.maps.DirectionsRenderer(),
				createMap = function (start) {
					var travel = {
							origin : (start.coords)? new google.maps.LatLng(start.lat, start.lng) : start.address,
							destination : "Alexanderplatz, Berlin",
							travelMode : google.maps.DirectionsTravelMode.DRIVING
							// Exchanging DRIVING to WALKING above can prove quite amusing 
						},
						mapOptions = {
							zoom: 10,
							// Default view: downtown Stockholm
							center : new google.maps.LatLng(59.3325215, 18.0643818),
							mapTypeId: google.maps.MapTypeId.ROADMAP
						};

					map = new google.maps.Map(document.getElementById("map"), mapOptions);
					directionsDisplay.setMap(map);
					directionsDisplay.setPanel(document.getElementById("map-directions"));
					directionsService.route(travel, function(result, status) {
						if (status === google.maps.DirectionsStatus.OK) {
							directionsDisplay.setDirections(result);
						}
					});
				};

				// Check for geolocation support
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(function (position) {
							// Success!
							createMap({
								coords : true,
								lat : position.coords.latitude,
								lng : position.coords.longitude
							});
						},
						function () {
							// Gelocation fallback: Defaults to Stockholm, Sweden
							createMap({
								coords : false,
								address : "Sveavägen, Stockholm"
							});
						}
					);
				}
				else {
					// No geolocation fallback: Defaults to Lisbon, Portugal
					createMap({
						coords : false,
						address : "Lisbon, Portugal"
					});
				}
		})();
	</script>

This example is also available for viewing at http://robertnyman.com/html5/geolocation/current-location-and-directions.html

Maps are cool

I’ve always found maps very cool, and with all this new geolocation support, we can create some awesome services. Start playing with it now.

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!

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:

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

Presentation: How to write your first extension (PDF 1.6 MB)
Event information: Mozilla Add-Ons Workshop Berlin, March 28th

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

Presentation: Modern Web Development (View/Download on SlideShare)
Event information: Scandinavian Web Developer Conference 2009

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

Presentation: How to write your first extension (View/Download on SlideShare)
Event information: Mozilla/Maemo Danish Weekend

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

Presentation: How to write your first extension (View/Download on SlideShare)
Event information: Mozilla Swedish Community Meetup

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

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

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

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

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

• 22: Merry Christmas, Happy Holidays!
• 18: Releasing Inline Code Finder as a Google Chrome extension
• 17: Testing Object-Oriented CSS (OOCSS) for easier CSS development
• 14: Content Management Systems are a dying breed
• 08: The death of a friend
• 08: My trip to Lisbon, Portugal, and the Codebits conference

November 2009

• 30: Speaking at Codebits in Lisbon, Portugal
• 27: The HTML5 syntax options problem
• 25: My Full Frontal ‘09 escapades – The JavaScript conference
• 18: The JSConf.eu conference and my visit to Berlin
• 17: A faster web with Resource Packages – Mozilla suggestion to have just one HTTP request
• 16: The Øredev 2009 Conference adventure
• 09: Firefox turns five years old today – congratulations!
• 02: This just in: Speaking at JSConf.eu November 7th-8th 2009!

October 2009

• 29: Apple to patent CSS transformations and animations
• 27: Releasing Firefinder 1.01 – now with support for 8 languages
• 26: Speaking at Full Frontal – JavaScript Conference – 20th November 2009
• 21: Web browser market share and rounding errors
• 14: An introduction to HTML5
• 13: Speaking at Øredev 2009 Developer Conference, November 4th 2009
• 08: Help making Firefox better – share your thoughts!
• 07: Travel stories and session recaps from Mozilla Camp Europe Prague, 3-4 October 2009

September 2009

• 28: Invited to Mozilla Camp Europe Prague, 3-4 October 2009
• 23: Google Chrome Frame & Google Wave not supporting any version of Internet Explorer
• 22: One million downloads for getElementsByClassName
• 21: Geek Meet October 2009 – Molly Holzschlag will present about HTML 5 and other goodies
• 18: The passing of Patrick Swayze
• 15: Apple’s App Store and installing what you like on an iPhone
• 11: Getting caught for speeding
• 09: Fuck IE gently
• 07: Firefinder 1.0 released – code collaboration with the FriendlyFire feature, better integration with Firebug and more
• 02: Apple Mac OS X versions named after German tanks?

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

• 05: Summer break 2009
• 01: Firefox 3.5 is released – information about having multiple Firefox versions and web developer extension compatibility

June 2009

• 30: PictureSlides 2.0 – highly customizable option to create JavaScript slideshows
• 26: The death of Michael Jackson
• 25: Microsoft’s recent marketing campaigns
• 24: Review of AC/DC at Ullevi Stadium June 21st 2009
• 23: Opera Unite – some questions and answers
• 18: Swedish Midsummer celebrations
• 18: New JavaScript features with native JSON support and JavaScript 1.8.1 additions
• 16: Do you take notes?
• 15: Thoughts on Microsoft’s move to ship Windows 7 without Internet Explorer in Europe
• 11: Impossible to uninstall Safari 4 in Mac OS X – Apple pretty much follows suit with Microsoft
• 10: Store information on the client side with DOM Storage/Web Storage – plenty of improvements available
• 09: My thoughts on Twitter
• 08: Poll: which JavaScript library do you use?
• 05: Geek Meet Charity June 4th 2009 was a success!

May 2009

• 28: Getters and setters with JavaScript – code samples and demos
• 27: Four years
• 26: Serious memory leak issue with 24-bit PNG images with alpha transparency in Internet Explorer
• 20: Mozilla/Maemo Danish Weekend May 30th-31st – addition to my two weeks of speak
• 15: As we were
• 14: Invasion of my public privacy
• 13: Mozilla Swedish Community Meetup in Stockholm June 2nd 2009
• 12: Firefinder for Firebug – an extension to quickly find elements matching your CSS selectors or XPath expressions
• 11: Mozilla Prism brings power to stand-alone web applications
• 07: The alt attribute is NOT for tooltips
• 05: Metallica live May 4th 2009 at the Globe arena in Stockholm, Sweden
• 04: Geek Meet Charity June 4th 2009 – Chris Mills and Remy Sharp speaking

April 2009

• 30: My father would have turned 70 today
• 29: Moving to new host, working out the kinks
• 27: Introduction, test cases and web browser compatibility tables for JavaScript 1.6, JavaScript 1.7 & JavaScript 1.8
• 24: D-A-D at Klubben, Stockholm April 4th 2009 – concert review
• 21: Speaking at the Swedish Web Developer Conference 2009, May 25th
• 20: Easier Source Control Management with Distributed Version Control System and Mercurial
• 15: A heading solution you haven’t seen before
• 03: Mozilla Labs’ online code editor Bespin

March 2009

• 31: The trip to Berlin and the Mozilla Add-Ons Workshop 2009
• 26: Search SmugMug photos easily with smug-search Ubiquity command
• 23: Bob Dylan club gig at Berns in Stockholm March 22nd 2009
• 20: An evening with Microsoft
• 16: Your end users shouldn’t have to know technology
• 13: What to know, what to learn
• 10: Speaking at Mozilla Add-Ons Workshop (MAOW) in Berlin March 29th 2009
• 09: Adobe AIR 1.5 issue – solution and support experience
• 02: Adobe Flash – pros and cons

February 2009

• 26: Headhunters
• 23: Review of AC/DC at the Globe Arena, Stockholm February 20th 2009
• 20: Reviews of the nominated movies for Best Motion Picture in the Oscar Academy Awards
• 17: Handle duplicate content indexing for SEO with the rel=”canonical” attribute
• 16: IE 8 – standards compliancy goes back to being an opt-in
• 12: Companies and social networking
• 09: Stop developing for Internet Explorer 6
• 05: New version of Inline Code Finder, with event filtering – and a download record
• 04: How to solve :first-child CSS bug in IE 7
• 03: Opera Web Standards Curriculum article: Handling events with JavaScript
• 02: Contribute to the Stockholm Sweden Twestival charity event

January 2009

• 30: What was your first hex code?
• 29: Geek Meet February 2009, with Mark Wubben
• 26: Microsoft force-installs Firefox extension
• 24: How to develop a Firefox extension
• 22: Flickr Gallery Plus! – better photo set viewing with Firefox extension and Greasemonkey userscript
• 19: Extending web browser functionality – Greasemonkey for all web browsers
• 05: Apple Macworld Expo keynote predictions

Happy New Year!

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

Happy New Year!

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!

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!

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.

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.

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

I heard/read about the conference when it was in its planning stage, but since I was already scheduled to speak at Øredev this week and had some other things to attend to, I early on discarded the idea of attending JSConf.eu.

However, as things got closer, I realized I could actually be a part of it, and given the impact of the event and all the interesting talks, I felt I would really like to talk there as well!

In May this year at the Scandinavian Web Developer Conference 2009, I as well as Jan Lehnardt and Malte Ubl gave presentations, and interestingly enough, together with Holger Blank, they are organizing JSConf.eu.

So, I got on touch with them over the weekend and spoke with Malte, and basically got to hear that they would love to have me do a talk, but that the budget wouldn’t cover my expenses – which is fair enough, my proposal was “drastically late”, as Malte called it , and the JSConf.eu 2009 conference schedule had already been organized. So, I spoke to my employer, Valtech , who graciously immediately offered to sponsor me!

Therefore, I can happily announce that I will, alongside the fantastic list of speakers, do a talk at JSConf.eu. I’ll be covering some brief JavaScript history, common best practices and then more advanced things like scope and closures. Slightly worried that my talk might be too basic, but at the same time, I hope to fill in some blanks and repeat important information that everyone should know, and hopefully inspire people to delve into the fantastic workings of JavaScript.

Will you be there?

It is especially interesting, and scary, for me since all the other names on the bill are true JavaScript heroes. Just take a glance at this list of the speakers:

• Jake Archibald
• Christian Heilmann
• Todd Kloots
• Peter-Paul Koch
• Stuart Langridge
• Robert Nyman (that’s me! )
• Simon Willison

As the name implies, it is naturally about JavaScript, but also with a complete focus on front end-development – as opposed to many other conferences. With this impressive list of speakers, I am sure anyone interested in JavaScript will be wildly pleased!

Besides, the name is awesome, isn’t it? I am so happy I came up with it, and that Remy, the event organizer, liked my suggestion.

Make sure to buy a ticket now while there are still some left!

Therefore, my ambition here is to:

• Give you a little history
• Go into what HTML5 is and what it covers
• Show code examples
• Target the question whether you can start using it or not

Background

The HTML5 work stems from the WHATWG (Web Hypertext Application Technology Working Group), and their focus is the development of HTML and APIs for web applications. The reason it came to life back in 2004, founded by people from Apple, Mozilla and Opera, was a worry about the direction W3C were taking with XHTML, and no focus on HTML or the real-life needs for web developers.

It got really interesting in July of 2009, when W3C announced that XHTML2 would be cancelled in favor of HTML. This means that the only future development of HTML and XHTML is in the form of HTML5 – HTML5 is the future, whatever you think about it.

I should also mention right away that HTML5 is spelled just that, with no space between the the L and 5 – read more in Spelling HTML5.

What is HTML5

So what is HTML5, really? Basically, it’s about extending HTML/XHTML with new more semantically rich elements, deprecating attributes, introducing new attributes and altering how some element and attributes are allowed to be used. Hand in hand with that is the possibility to use attributes for WAI-ARIA to make a web page more accessible, such as with landmark roles.

It also introduces a number of APIs for making it easier to create web applications:

• 2D drawing API with the canvas element.
• API for playing of video and audio with the video and audio elements.
• API that enables offline Web applications.
• API that allows a Web application to register itself for certain protocols or media types.
• Editing API in combination with a new global contenteditable attribute.
• Drag & drop API in combination with a draggable attribute.
• API that exposes the history and allows pages to add to it to prevent breaking the back button.
• Cross-document messaging with postMessage.

Other things that initially was in the specification, but broken out into separate specifications are:

• API for Geolocation
• Web Storage.
• Web Workers.
• querySelectorAll.

All in all, a lot of nice new things and technology to help us shape the future of the web. As you can see, some of the above things are in the actual HTML5 specification, some others are broken out into their own specifications. Think of it as with AJAX: when that term and hype hit the world, anything that was even remotely related to JavaScript in any way was thought to be AJAX.

Pretty much goes with HTML5: for most people, that’s generally the term you need to imply that you are using new state-of-the-art technologies to create a web site; in reality, that might be “just” HTML with some new semantic enhancements, or it might be an extravaganza with the new APIs in conjunction with JavaScript.

I think the best document to read to grasp the changes are HTML5 differences from HTML4, which will cover:

• Open Issues
• Backwards Compatible
• Development Model
• Impact on Web Architecture
• Character Encoding
• The DOCTYPE
• MathML and SVG
• New Elements
• New Attributes
• Changed Elements
• Changed attributes
• Absent Elements
• Absent Attributes
• Extensions to HTMLDocument
• Extensions to HTMLElement

Backwards compatibility & progressive enhancement

I think one of the main reasons behind the adoption of HTML5 is that it sets out to be backwards compatible and work with the web browsers there already are in the market, and have been for some time, too. This is done through new elements which, generally, have no particular look or behavior attached to them, but rather offering more semantic richness and then up to you style them via CSS according to your liking.

The other parts are new elements that have been implemented in some web browsers, and not in others, where the progressive enhancement approach that has been preached for a long time comes into play. Meaning, use the new elements which will give a richer experience in some web browsers, whereas it will fall back to default content in others.

Example in question: a cascade of new input element types:

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

So far, WebKit and Opera have been the most busy rendering engine to implement some of these, especially in relation with Opera’s work with WebForms 2.0 support, but in other web browsers it will fall back to a regular input type="text". That means, for instance, that input type="search" will will give subtle, but better user experience, in Safari and Google Chrome, but will be a fully functional for all others.

The beauty of progressive enhancement.

HTML5 code introduction

Let’s get down to some code introduction and what you need to be aware of when you start coding HTML5.

Syntax options

The doctype for HTML5 looks like this:

<!DOCTYPE html>

No versioning, no redundant information. All progressive enhancement on a feature-level, as opposed to complete releases that need to be implemented.

And, to be a bit more pragmatic than before, HTML5 will allow both quick-closing of empty tags (such as input, link etc), but you can use those elements just as well without quick-closing them. Quotes for attributes are also optional, and you know what? You can even use upper-case letters for your element names of you will!

All of these examples are valid HTML5:

<DIV>A monkey</DIV>
<p id=john>John's P</p>	

<input type=text>
<input type="text">
<input type="text" />

This might be scary to some people, and I agree with the concerns the HTML5 Super Friends presented, where they want a way to, in a more stricter way, be able to validate the consistency of the code. However, with all different people’s coding styles and our legacy, allowing this freedom was probably the only pragmatic option to get people along, instead of fighting battles that will never be won.

It should also be noted that it is not needed to specify the type attribute for style or scriptelements; it is automatically assumed to be CSS respectively JavaScript.

And, a great thing is that you can now wrap entire blocks with an a element to make that entire block a link to somewhere!

HTML or XHTML

I should also mention that there are two options to serve HTML5 content: as HTML or XHTML. The somewhat confusingly named XHTML5 differs a bit from HTML5, though:

• No doctype is needed, just an XML prolog.
• It must have a namespace: <html xmlns="http://www.w3.org/1999/xhtml">
• It must be served with either of these MIME types: application/xhtml+xml or application/xml.
• The noscript element can not be used.

New elements

Lot’s of the research behind HTML5 has been how people name their elements, with IDs and classes, and part of the result are new elements named/inspired by those. There are a lot of new elements in HTML5, where these are probably the most interesting as you can use them right away in any web browser.

article

Mark up parts of the content that is independent, for instance blog post, article etc.

aside

Used to mark up relevant additional information, like a sidebar.

audio

Used for natively including audio in a web page.

footer

The counter-part to header; could be used for any footer section per context.

header

Used for headers in its context. Note: not just for the header of a page, but also for each header part in section, article and similar.

hgroup

Used for grouping several headers, for instance, a main heading and a sub-heading.

nav

Used for marking up main navigation.

section

Mark up a generic document section. Easily confused with article, and on top of that you nest either of them, in any order, with the other.

time

Used to mark up a time or date.

video

Used for natively including video in a web page – lots of interesting work is coming along here in terms of web browser support.

HTML5 examples

Let’s get down to some actual code and see what an HTML5-coded web page could look like. I have put together a simple HTML5 example with new elements and WAI-ARIA landmark roles as part of my HTML5 demos page (quite sparse now, I know, but I will incrementally add examples to it).

This is the complete source code of that web page:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5 example with new elements and WAI-ARIA landmark roles</title>
	<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
	<!--[if lte IE 8]>
	<script src="js/html5.js"></script>
	<![endif]-->
</head>

<body id="index-page">

	<div id="container">
		<header role="banner">
			<h1>HTML5 example with new elements and WAI-ARIA landmark roles</h1>
			<p>This page has valid simple HTML5 markup complemented with WAI-ARIA landmark roles for accessibility</p>
		</header>

		<nav id="demo-top-nav">
			<ul>
			<li><a href="http://robertnyman.com/html5">HTML5 demos and samples' start page</a></li>
			<li><a href="http://robertnyman.com/">Robert's talk</a></li>
			<li><a href="http://robertnyman.com/javascript/">JavaScript compatibility tests</a></li>
			</ul>
		</nav>

		<div id="demo-main" role="main">
			<section id="demo-main-content">
				<header>
					<hgroup>
						<h2>A title</h2>
						<h3>Subtitle to the above title</h3>
					</hgroup>
				</header>

				<article>
					<p>Some content, created <time datetime="2009-10-14">October 14th 2009</time></p>
				</article>
				<article>
					<p>Some more content - i guess you get the drift by now</p>
				</article>

				<article>
					<header>
						<h2>The HTML code for this page</h2>
					</header>

				</article>
			</section>

			<aside id="demo-aside-content" role="complementary">
				This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action in a simple context
			</aside>
		</div>

		<footer id="page-footer" role="contentinfo">
			Created by <a href="http://robertnyman.com/">Robert Nyman</a>
		</footer>
	</div>

</body>
</html>

As you can see, it looks more or less than every other HTML web page you have ever seen, but with just a few new HTML elements being used and the role attribute with landmark roles for WAI-ARIA to make it more accessible.

If you want a more real-world example, just view the source code of robertnyman.com: I have now rewritten it as HTML5!

Can I use it today?

I would say yes!

There was some wild speculation about the date 2022, because one of the main men behind the work with HTML5 and the specification was asked in in an interview about HTML5 and its timeline, and the date 2022 was mentioned. Then everyone assumed that HTML5 wouldn’t be ready until 2022, which is not was addressed, but rather when web browsers would have two releases with completely full support for HTML5 (compare that to CSS 2.1 support etc and the time it has taken, and you will probably get a more sane reaction). Read more about in 2022, or when will HTML 5 be ready? if you want to know more.

But let’s go through the pros and cons, and I will explain why HTML5 is ready to be used.

Pros

Major players using it

To begin with, a lot of major players have already started implementing it. Google.com already have the HTML5 doctype (although they should really improve the markup accordingly), the new hyped Google Wave is revolving a lot around HTML5 and related APIs (which ironically uses a HTML4 Strict doctype…) and there is also a YouTube HTML5 demo page.

Strict rendering

The HTML5 doctype will trigger the strictest rendering in all web browsers. No Almost Standards Mode, no quirks; strict all the way, which is the way we want, and the way it should be.

Progressive enhancement

You can start today just by changing the doctype. Then gradually move onto exchanging some structure elements, sprinkle it with some WAI-ARIA etc and before you know it, you have a fantastic HTML5 page!

Validation available

Now even the W3C Validator supports HTML5. Just use the Firefox Web Developer Extension to validate your HTML against it. The HTML Validator extension unfortunately doesn’t support it yet, but I know there are at least plans to include this – if you have any ides or input, please help him out.

SEO

It probably doesn’t matter much right now, but in the future, I think that web sites that are marked up in a much more rich fashion with new HTML5 elements to give them the multitude they need, will benefit a lot from this.

Cons

Ah, right, drawbacks. There are always some, isn’t there?

Internet Explorer

It probably doesn’t come as a shock to you, but Internet Explorer, all current versions (yes, including IE8 as well) has a little issue: it won’t apply any CSS to an unknown element (e.g. nav, section etc).

However, Sjoerd Visscher found out that with an HTML5 Shiv, sort of an electrical shock for IE to start rendering things at least a little bit more properly, you can address that problem.

The gist of it is that you need to call document.createElement with the name of each new HTML5 element you use in the page. You don’t need to use it to append or place those element, just call it to make IE aware of them. Remy Sharp has written a little HTML5 enabling script for Internet Explorer, version 6 to 8 which works in all possible cases.

People eager for HTML5 has argued that we will need script dependency for IE to render styling for those elements, otherwise it will render unstyled, but with the content still fully accessible. While I agree in theory, I think it is, at times, an unnecessary requirement for using HTML5.

Another option is the content negotiation approach, where we on the server exchange the new elements for old ones just for Internet Explorer. It’s simple: just have a regular expression to replace all block elements (header, footer, section etc) with div elements, and the inline ones (time, mark etc) with span elements.

Together with that, always style you elements through their id attribute or class value, and you are good to go! All modern web browsers + screen readers + search engines will get rich HTML5 markup; IE will get plain old HTML.

The drawback of the first option is script dependency to get correct styling for the new HTML5 elements; the drawback with the other approach could be duplicating CSS and JavaScript code. Therefore, consider the options and choose the approach you deem most suitable.

Specification discussions

There are still some discussions about some elements in HTML5 and how they should be specified, what existing options/combinations there are that will work in existing user agents (which is a must; it can’t break things). Overall, though, I’d say use the new parts everyone agrees about and that will work, and hold on with the bells and whistles until it’s ready.

The last call for the HTML5 working draft is in October this year. The future is already here.

Where we are today on the web

I for one is really happy that this is finally becoming true and usable. Sure, as always there are a number of issues and things to discuss, but overall we really need this as web developers. We need new elements, APIs and options to create dazzling web sites, and we have been waiting so long for something new at all.

I also think this is vital for the climate of the web, to have open standards to code after, and to compete with the ever-growing closed-in and proprietary technologies that try to claim the web as their own.

Have me do a presentation

If you found all this to be immensely interesting, and would like to discuss it in real life or hear more, please contact me if you want me to talk at a conference, your company or similar!

Related reading

HTML5 Specification

The specification for HTML5.

WHATWG FAQ

A good FAQ about WHATWG and general answers to questions about HTML5 and peoples’ wishes.

HTML5 differences from HTML4

Great introduction to the differences between HTML4 and HTML5.

Dive Into HTML5

Mark Pilgrim has started writing an online book about HTML5. Only a a couple of chapters available right now, but already an interesting read.

HTML5 pocket book

Jeremy Keith has a handy little map over HTML5 elements and what they are supposed to be used for.

HTML5 Doctor

Great posts about general issues and ways to solve them, and also discusses flaws in the specification and alternatives.

Designing a blog with html5

Good introduction to how you would mark up a blog with HTML5.

HTML5 Super Friends

Well-known web names exclaim their support for HTML5, but also bring up issues they would like to see resolved.

My talk

I will do a presentation in the Wednesday Web Development track about JavaScript history, what it is and where it comes from, and then move into such interesting and important areas such as best practices, object-orientation, scope and closures. And yes, I know, quite brave to try and pack all that into 45 minutes. Wish me luck!

Other presenters

I can say for sure that I’m glad to be the first speaker on Wednesday, because following me are JavaScript king Douglas Crockford and performance guru Steve Souders! They have been, and are, very influential to me and it’s truly an honor to be featured on the same bill as them.

Accompanying them are Piotr Walczyszyn and Nikolai Onken, who will talk about Adobe AIR respectively Business Applications with the Dojo Toolkit.

The Thursday Web Development track also has some interesting talks with Ben Galbraith and Dion Almaer, Remy Sharp and others.

Getting a ticket

Øredev 2009 is a massive 5-day event with lots of different tracks – therefore, there are a number of ticketing options available. Everything from 1-day-, 2-day passes etc to other options. Please check it out and if you find it interesting, I might see you there!

Background

As we all know, Mozilla, with Firefox, took back the web from a Microsoft-dominated era with Internet Explorer, made it open again and put emphasis on web standards. The way I see it, we owe gratitude for the openness and much healthier web browser landscape we see today, and it’s a very important step towards an open web.

Following that, Apple started developing Safari, based on WebKit, and last year, Google got into the game with Google Chrome (also based on WebKit). Somewhere at the sidelines, marketshare-wise, Opera has been around for quite some time, and has lately put a lot of effort into having people evangelize about HTML5 and future technologies.

With all this innovation, faster release cycles, new features and better overall support is brought to us, and I believe competition thrives from this. For many years, Firefox was known for setting the bar, both with web standards support and new exciting features, but as of lately, other web browsers have started seriously competing for this position, in terms of feature-support and performance.

Meeting in Prague

In Prague, I got the opportunity to discuss with Firefox Director, Mike Beltzner, and Firefox developer Vladimir Vukicevic about the future of Firefox, what to focus on and what web developers find most important. I also featured in a panel about HTML5 moderated by Vladimir where we discussed the balance of fixing old issues compared to implementing new things.

Before the panel, Vladimir had also expressed what they are looking for:

We are interested to hear what you think we could be doing better at, in terms of support for current or emerging web standards. Are there existing features in other browsers that you want to take advantage of that we don’t support? What about those features is compelling?

What’s missing from the web platform? Where do you want to see us take it? If you could pick one capability to add to the web, what would have the biggest impact on your web app development?

Of the currently supported standards, what’s painful? What would you like to see us focus on improving, whether through enhancement or through change?

What I think

The way I see it, Firefox took, and held, the lead for some time, but it is facing a huge challenge right now. The parts I find most important are:

Start-up time

In my daily work, with colleagues as well as people I met in the various companies I visit or do work for, a lot of them have chosen Google Chrome as their number one web browser. Anyone I ask about why, the answer always comes out the same: “Startup time – Firefox is so slow”. I know lots of work is being done by Mozilla in this area, but, if possible, I believe it has to be given even more priority. One suggestion is to postpone checking for add-on updates till after the web browser has actually started. Complement performance focus with looking at perceived performance vs. actual performance.

Performance, performance, performance

I think this can not be stressed enough. Without a doubt, the reason behind a fast adoption of other web browsers, especially Google Chrome, is spelled speed. Page rendering and JavaScript performance have to increase even more. In all fairness, it has to be said, Firefox 3.5 without any add-ons is very fast and almost up to par with the others, but at the same time add-ons is the main competitive advantage and in many cases, the sole reason for people choosing Firefox. Therefore, add-ons implementation has to get faster as well, and I believe Jetpack is an attempt to achieve that – problem is, native Jetpack in Firefox and people porting their add-ons to it is far away in the future, and other measures need to be taken before that.

Separating processes

This goes a little hand-in-hand with the performance points made above, but with separate processes for each tab, and especially one for the Firefox UI, it gives a great playing field for accomplishing that. I know this is in the long plan for Firefox as well, but I just want to emphasize how crucial it really is.

Release cycles

I think it comes down to how often a new version is released, but also, more importantly, how many features that are being tried to be packed into each release. The important choice to make is incremental additions and enhancements, and not believing each version will contain everything that is desired.

Acid3

Why I think the Acid3 tests matter is not necessarily what support that comes with a 100/00 score, it’s about the message it sends out to developers. If Mozilla can’t deliver a score of a 100, while WebKit and Opera can, it conveys the feeling that Mozilla have a harder time and is a little bit behind implementing things.

Implementing new features

What was good with the Firefox 3.5 release was support for video and audio elements, Location Aware Browsing, general HTML5-related support in the form of CSS enhancements, query selectors etc. Keep this up, but most of the above are just following WebKit examples – I would like you to be first with the most mind-blowing features! (I think the AwesomeBar is one example of such a great feature)

I want Firefox to be the best web browser out there again, all categories, and I believe these are the vital steps to achieve that. Make me proud!

What do you think?

Those are my thoughts. Is Firefox your main web browser, or do you just “use it for developing”, as I mostly hear? What would it take to make it your number one web browser again?

Help Mozilla out by contributing your thoughts!

Getting there

Thursday October 1st I met up with fellow Swedes Patrick Finch and David Tenser (ok, Patrick is actually British, but he lives in Sweden, so it counts as one of us ) to get on our flight with Czech Airlines. They were about to participate on Friday on an event for the local Mozilla community in Prague, and I had made sure to have one extra day of touristing in the city before the actual conference.

Once we got to the Andel’s hotel where we were staying (a very nice hotel, by the way), we got settled in our rooms and then planned to meet up to have dinner. In the lobby, I also met Søren Skrøder, who I got to know at the Mozilla/Maemo event in Copenhagen back in May. As it turned out, though, the main organizer William Quiviger (who now sports some kind of Jef Goldblum-look with his glasses…) was just a tad stressed in getting things in order and be on top of everything, so we went to the preparation area.

Once there, we met Barbara Hueppe, Paul Roguet, Irina Sandu, Svetlana and other people making their best to get everything in order. Being the kind spirits that we are, we added our small efforts to get everything done, so we could go out and eat something: by this time, I was famished!

Once we got everyone together and went out to eat, let’s just say that there were mixed ideas about where to go, and where the actual place was located. We walked around in Prague for almost an hour, till we finally settled on a restaurant. I ordered in Carpaccio, which was awesome! After dinner, I was exhausted, so I got back to the hotel, said hi to Axel Hecht and then went to my room to get some sleep and be prepared for a full day of Prague touristing.

Tourism in Prague

The next morning, I met a lot of Mozilla people at the breakfast, and I and Søren had decided to make an attempt to tourist together, since he had also dedicated his Friday time for the same purpose. We started by packing our bags, buying some water and then initiate our Prague excursion.

We took a glance on the map, had a brief discussion about what we wanted to see and then embarked on our walkabout. One of our first destinations was the the huge main park in Prague, Pet?ín hill. Neither I or Søren expected it to be so hilly, though, and there were serpentine walkways taking us up the steep hill.

After quite some time walking, we eventually reached the Pet?ín Lookout Tower, which gives an amazing view over Prague. There sure are a number of stairs to walk up, but it was definitely worth it! After having spent quite some time in the park by then, Søren expressed that he really wanted to move on and see other sights (these opinions were expressed in tweets like “Søren says we have had enough of pretty park pictures now. ” and “Søren says: “Fuck the scenic route”.”).

Understanding the hints, we started walking downhill again, and got to the Strahovsky monastery – unfortunately, it was closed when we got there. However, outside we met two people from the Mozilla community in Barcelona, and decided to make company.

That was then followed by a visit to Loreta Holy Shrine and then lunch at a local restaurant. Baffled by the constantly low prices: about €1.50 for a large beer and no lunch or dinner costed more than €20 (unless you wanted something really special). Post-lunch, it was finally time to reach the Prague Castle!

Within the castle area is also the gargantuan St. Vitus Cathedral, which we spent a fair amount of time in. After that visit, we went into the urinal, and I got the idea to take a picture of a toilet that was sealed off in an interesting way. Suffice to say, the reaction of the other people in the urinal, when they heard the camera flash, was not comforting. I learned something that day about taking pictures in urinals…

By this time, it started to get chilly outside and the wind started blowing, so we briskly moved forward out of the castle area, by wine growing on the hill side, and down towards the Vltava/Moldau river and across to the Old Town area of Prague (still a little bit scared of the guy who came walking on the sidewalk with a chainsaw – apparently Czech people defend their own hood in a different way…).

Once in the Old Town we had a look at the extraordinary Astronomical Clock and had the luck to see it at the full hour with all of its display. On our way, there’s was an offer to see a non-verbal performance of Beatles’ Yellow Submarine – Great, I’ve been looking for that all my life…

Next stop was the Museum of Communism, depicting the history of communism in the world, and in Prague in particular. It is terrible, but also needed, to be reminded how evil man can be, and that we really need to be more respectful and understanding to each other.

When the museum visit had come to an end, our Barcelonian friends needed to go back to the hotel again. Søren and I, however, just knew he had more to see in the city. We walked to the Charles Bridge, where the Swedes fought the Czechs during the Thirty Years’ War, and also got the opportunity to climb up in the tower on the Old Town side.

Last task of the day was crossing the bridge, admiring its gorgeous statues and then finding a tram station to get back to the hotel again. At the hotel, some Danish countrymen of Søren had arrived, so I, Søren and Finn Sørensen went out and had a nice dinner together (Carpaccio again for me, two nights in a row – oh, how I love it!). That was later followed by a welcome beer at the hotel with all the newly arrived conference attendants.

By this time, my room mate from Sweden, Stefan H, had also arrived, and in a Swedish humble manner we almost constantly apologized to each other for how much room we took in our hotel room, what a mess we had created etc.

My tourist day in Prague was fantastic, and I’m truly happy I took the time to do it!

The conference

The Mozilla conference had two full day of presentations, and I will list the ones I attended. The talks were divided into four tracks:

• Development
• Internationalisation
• Advocacy
• QA

(entire schedule)

Saturday presentations

Welcome address by Tristan Nitot

Tristan is the President of Mozilla Europe, and he welcomed us all to the conference and went a little into what it would contain.

Keynote: Glyn Moody

Glyn Moody is a technical writer who spoke about the importance of open software, how Mozilla of today is derived of the old Netscape roots, and how amazing it is that it actually happened. I wonder what the web would have looked like without Mozilla. Also, Moody is a great name, and I sure know it would fit me.

Keynote: Mark Surman

Mark is the Executive Director of the Mozilla Foundation, and his talk was about spreading the word, building community, and, in essence, making sure we continue to work for an open web. He also raised the extremely important question: “Will we have an open web 100 years?”, and how we can make sure that happens. Mozilla Drumbeat is a way to help people spreading the word.

Panel discussion with Tristan, Glyn and Mark

After the keynotes, it was time for a discussing about the open web, integrity and how can protect people on the Internet. I think a very important question was raised by someone in the audience about what information and data we can claim that we own; is a great blog comment of mine, in someone else’s blog something I can claim ownership to, what about pictures others take of me etc. Unfortunately, this was just dismissed with jokes about being seen drunk on Facebook, which really missed the big question. Sad.

Firefox Next – Mike Beltzner

Mike is the Director of Firefox, and he gave a very interesting talk about the future of Firefox, what they see as the true competitors (not other web browsers, but rather proprietary technologies such as Flash, Silverlight and Gears), how it needs to have shorter release cycles and what they need to focus on in the future. Later during the conference, I got to have a chat with him, and was happy to hear about the work on improved start-up time, how performance is perceived and other things.

Firefox in Europe

Mike Beltzner led an open discussion about the future of Firefox in conjunction with help, support and input from the European community. Good suggestions and I hope they got something to think about for future plans.

Firebug

Jan Odvarko of the Firebug team walked us through new features in the upcoming Firebug 1.5. Being a Firebug extension developer with Firefinder and Inline Code Finder, I would had hoped for more information about extending Firebug, but I think the right thing was to talk about general features. After his talk, it was great to finally meet Jan in person, talk a little and share the challengin experience of, as an extension developer, trying to understand Firebug…

Prism

Having developed a few Adobe AIR applications, for some time now, I have been hoping that Prism would take off and offer a good open alternative. As I see it, Prism is decent, but at the same time I get the feeling that the development pace of it isn’t that fast, and that they would have to put more effort into it if they want to compete with Adobe AIR.

Weave

Anant Narayanan did a very interesting and inspiring talk about Weave, where they are today and possible future plans. We spoke a little after the presentation about Opera Unite, possible interest in offering similar things to users and such.

Jetpack

Aza Raskin was supposed to give this talk, but his plane was late (or something), so Anant and someone else (missed the name) had to step up and hold an open discussion. What is clear is that Jetpack is most likely the future extension model for Firefox, phasing the old one out (at least for most use cases), but it will take some time and there are a number of things to work out before we reach that point.

My friend Remy Sharp was also to hold a presentation about HTML5 as well, but unfortunately couldn’t make it to Prague.

Saturday evening boat ride on the Vltava/Moldau river

Mozilla had arranged for all of the conference attendants to first ride specially booked historical trams down to the river, and then board a boat to get a dinner on board accompanied by a guide. However, with about 180 attendants, Czech beer and people spread out, the guiding didn’t really take off.

It was also possible to get up on the top of the boat to get a beautiful view of Prague at night. There I first got to have a good talk with Steve Lau of Songbird and then Martin Kliehm, who fights a lot for accessibility.

I also found it amusing to to see Patrick Finch, a.k.a. Remington Steele (or James Bond if you will), giving his special agent stance on the boat, and telling a story about an amazing feat of his.

After a few hours on the river, we got back to the pier again, and got on a bus back to the hotel, and I got to have an interesting talk with David McNamara about many varying things. Once back at the hotel, a few of us decided we needed just one more beer, and went out on the town – we were me, Brian King, David McNamara and Matjaz Horvat. Once at the bar, we also met Kamil Lach, who I got to know in Copenhagen in May, and someone else, who I just can’t remember (I was jus tired; do not blame the beer intake, ok?! ).

Brian gave me a good talk which really inspired me on the way back to the hotel – thanks, Bri!

Sunday presentations

Keynote: Seth Bindernagel

Sunday morning started with a talk by Seth about the importance of localization, and how it has been, and is, such an important part of helping to bring Firefox to everyone in a lot of countries.

HTML5 Roundtable

Both stepping up for an absent Remy, and out of my own interest, I took one of the places on the HTML5 roundtable, amongst a total of 9 developers, which was during two hours before lunch. The idea was to discuss about HTML5, feedback and concerns and also let the audience ask their questions about it. I think I did ok on it, but overall, my feeling is that we could have been a bit more structured with the set-up and topics, and nine people on the panel were probably a few too many.

Interestingly enough, one of the other people on the panel was Anthony Ricaud, who is a WebKit Developer and works on the Web Inspector. Kudos to him for taking part of a Mozilla event, and it was good talking about Web Inspector as well.

Above-mentioned Martin Kliehm was part of the panel, and did a good job emphasizing the need for accessibility in HTML5, and I was also joined by Ilmari Heikkinen, who showed a nice canvas animation demo and is also behind CAKE (take a lot at the amazing Missile Fleet, for instance).

Stratified JavaScript

Showed some interesting examples with concurrency in JavaScript.

Songbird

Steve Lau presented Songbird, which is an open source music player based on XULRunner. Quite interesting, and I liked Steve’s cool, calm presentation approach. He demoed the extension capapbilities, skinning etc and I for one sure hope it becomes popular.

Mozilla Labs: The Future of You-centric Browsing

Aza Raskin, who had arrived Saturday evening, gave a talk about user experience and setting the end user, i.e. you, in focus and control. Interesting presentation, but personally I felt i would have wanted some more hands-on examples. We had a talk after, and I asked a number of questions about user interface, what he was working with compared to the current work being done on Firefox, his opinions on certain things etc. Aza is a busy man, so if you get the chance to corner him, make sure to ask everything that’s on your mind.

That was all I saw during the Sunday, and it was followed by trying to make sure to get the time to say good-bye to everyone before it was time to go to the airport.

Going home

Two small buses were chartered to get us to the airport, work courtesy of FuzzyFox who probably had enough stress for a year organizing it all. Once at the airport, I sat down and had a talk with Anthony Ricaud, before it was due time to bug (even more) gifts to my loved ones and then board the flight home.

Thank you Mozilla and everyone attending for a great event, and I hope to see you all again soon!

All my pictures are available on Flickr and on SmugMug.

I hadn’t checked the statistics for some time for my getElementsByClassName code, so you can just guess my surprise when I saw it has passed one million downloads!

At the time of writing, the code has been downloaded 1 029 433 times! Last time I looked, sometime during spring, I vaguely remember it was somewhere between 100 000 and 200 000. It might have gained some recent popularity, but still, that’s quite a push. With one million now, it kind of leads me to suspect it has been hot-linked, but as far as I know, hotlinking to the provided download at Google code (which holds the download statistics) isn’t possible, since it should prompt you with a dialog. And it’s Google – I have to be able to trust them, right?

So, until I learn more or something else is proven, getElementsByClassName has been downloaded a million times. Yay!

New features and changes

I have implemented both a number of new features and gotten a better integration with Firebug with this release, and they are:

Code collaboration with the FriendlyFire feature

The number one thing I wanted to incorporate in this version was an idea which came from Remy Sharp, where he knew I have developed a few Firefox extensions. He brought up the idea of being able to share code from within Firefox with other web developers, and I immediately jumped at the idea.

The new code collaboration feature is entitled FriendlyFire, and is quite easy to use. You use Firefinder and any of its various ways to select an element in the current web page. In the results listing, just click on the FriendlyFire link to send that element’s code to a pastebin service, JS Bin (graciously hosted and run by Remy), to share your code online. You will get a URL back to share with colleagues and friends – much more efficient than using e-mail or instant messaging.

JS Bin offers code highlighting, an additional tab for JavaScript (where you can also include any of the most popular JavaScript libraries), and an output tab where you will see how that code will behave in practice.

Support for auto-selecting element when hovering the page

In style with the feature for selecting HTML elements with Firebug, you can now turn on the Auto-select feature in Firefinder to make it automatically select the one you’re currently hovering over with your mouse. Click desired element to lock it to that selection.

Support for context menu click

For those who prefer the context menu, just right-click (or left, if you swing that way) an element and choose “Firefind Element” to send it to the Firefinder panel.

Inspect link integrated with Firebug’s HTML panel

In your result listing in Firefinder, you can now click an element’s Inspect link to immediately be taken to the same element in the HTML tab in Firebug – in case you want to check its CSS code or do some minor editing. Also, remember that you can actually edit the code for an element in the HTML tab, then go back to Firefinder and share its code through the FriendlyFire feature, and the updated code will then be shared!

Better performance

The CSS selector mechanism in Firefinder now exclusively uses the querySelectorAll support in Firefox 3.5. This means that your CSS selectors will get the best performance possible, and there will be no pass-through of any JavaScript library. Possible downside is that Firefinder now requires Firefox 3.5 to use, but my take was that everyone (developer, that is) already has it anyway.

Better integration with Firebug

In general, the showing and hiding of the Firefinder panel works better now, and all buttons and actions are behaving just like in Firebug. Remember that you can show/skip to the Firefinder panel, even if Firebug is hidden, by choosing Tools > Show Firefinder for Firebug or via its keyboard shortcut Command + Shift + V on Mac OS X and Ctrl + Shift + V in Windows and Linux.

Just one button to filter, which automatically detects if it’s a CSS filter or an XPath expression

Previously, there was one button for using CSS selectors and another for XPath. Now Firefinder automatically detects what sort of expression it is, and takes it from there – just press Enter in the field or click the “Filter” button to find elements.

Demo video

Sometimes, it’s difficult to describe everything in words, so I have also put together a demo video of using Firefinder, and with the new FriendlyFire feature:

Contributing

After 4 and a half years of blogging and code sharing, and my partaking of open-source projects, you know my main drive isn’t about getting paid for my code – it’s about sharing code and features with the world and other developers.

With that said, I do want to mention the possibility that if, and I really mean if, you want to contribute or express gratitude, I now accept contributions on the Firefinder add-on page, where the suggested donation is $1.

If you want to contribute, thank you very much – if not, it is naturally completely cool as well.

Download Firefinder

Don’t hesitate now, go download Firefinder right now! I hope it rocks your world as much as it does mine!

I have to say that I think Firefox 3.5 is an impressive release, it has gotten even better in so many areas! One very important thing is speed: according to performance God Steve Souders, Firefox 3.5 is the best-performing web browser, followed by Chrome 2, Safari 4, IE 8 and Opera 10.

Don’t throw Firefox 3.0 out – run multiple versions of Firefox side-by-side instead

Even though you’re probably super-eager to replace all old versions of Firefox on your machine, please know that it is completely possible (and very simple) to have multiple installations of Firefox side-by-side; and, have them all running at the same time too, if you want to!

You can download any number of versions of Firefox, and then just install it into different catalogs, or just give each installation a unique name (preferably version number). This is very useful, especially if you are a web developer, to quickly test something in a number of versions of Firefox.

Creating different Firefox profiles

Then, naturally, you might want to have different settings, extensions etc installed depending on what version of Firefox you are running, and the easy way to control that is through different profiles in Firefox. Basically, a profile is where Firefox keeps all your settings, preferences, installed extensions etc.

The way to create a Firefox profile are in the Profile Manager. This is how to open Profile manager on different platforms:

Profile manager in Windows

Open the Windows Start menu and choose the Run option (on Vista, it might not be there – just press Windows key + R in that case). In the run dialog, write firefox -P and press enter/click OK. Choose Create Profile in the dialog and follow the steps.

Profile manager in Mac

Open the Terminal (located under /Applications/Utilities) and type in:/Applications/Firefox.app/Contents/MacOS/firefox -profilemanager. Choose Create Profile in the dialog and follow the steps.

Profile manager in Linux

Open a terminal, use cd to navigate to your Firefox directory and then enter ./firefox -profilemanager. Choose Create Profile in the dialog and follow the steps.

Remember to uncheck the Don’t ask at startup checkbox – that way, for any instance of Firefox you start, you can choose what profile you want to use.

New offerings with Firefox 3.5 for web developers

All new features are listed in Firefox 3.5 for developers, but let’s give a brief list of what I find exciting:

HTML 5

• Support for the audio and video elements.
• Full support for the offline specification
• Native drag and drop support

CSS features

• Supporting @font-face rules for downloadable fonts.
• Support for CSS media queries, meaning support for media-dependent style sheets.
• The :before and :after pseudo-classes now fully support any CSS 2.1 variation.
• Supporting the ch unit.
• -moz-opacity has been fully removed, and replaced by the standardized opacity property.
• Support for the -text-shadow property.
• Support for the word-wrap property.
• The white-space property now also supports the pre-line value.
• CSS transforms, via the -moz-transform and the -moz-transform-origin properties.
• Support for :nth-child.
• Support for :nth-last-child.
• Support for :nth-of-type.
• Support for :nth-last-of-type.
• Support for :first-of-type.
• Support for :last-of-type.
• Support for nly-of-type.
• Support for -moz-box-shadow.
• Support for -moz-border-image.
• Support for -moz-column-rule.
• Support for -moz-column-rule-width.
• Support for -moz-column-rule-style.
• Support for -moz-column-rule-color.
• Support for -moz-nativehyperlinktext.
• Support for -moz-window-shadow.
• Support for -moz-system-metric.
• Support for -moz-appearance.

DOM features

Support for these:

• localStorage
• Using web workers
• Geolocation API
• querySelector and querySelectorAll
• Mouse gesture events
• The NodeIterator object
• The MozAfterPaint event
• The MozMousePixelScroll event

JavaScript features

One of the most exciting features are that of native support for JSON, but there have also been some other improvements with the implementation of JavaScript 1.8.1 (also, don’t miss my JavaScript test suite for features and web browser support).

Networking

• Cross-site access controls for HTTP
• Progress events for XMLHttpRequest
• Improved Synchronous XMLHttpRequest support
• Controlling DNS prefetching

Canvas features

• HTML 5 text API for canvas elements
• Shadow effects in a canvas
• createImageData()
• moz-opaque attribute

Are web developer extensions ready?

Naturally, the most common thing that hold web developers back from upgrading is if their favorite tool will work with the new version. If we look aside the possibility of running multiple versions of Firefox at the same time, and instead at the most popular Firefox web developer extensions and Firefox 3.5 compatibility, things are looking good!

Firebug

The best web developer tool in the world does work with Firefox 3.5! The latest version, 1.4, is in a beta state, and as a user and developer of extensions to Firebug, I think it’s not perfect just yet, but it does work well overall.

Web Developer

The Web Developer toolbar works just fine with the new Fox!

HTML Validator

Besides Firebug, this is one of the extensions I have become completely dependent on! And luckily, the new version 0.8.5.8 works just fine! Note: you can only download the Windows version from the Add-ons web site, whereas the Mac and Linux versions are available in the developer’s own web site (what’s up with this?).

Page Speed

Above-mentioned Steve Souders have made sure that his Page Speed extension to Firebug works.

And, if one takes a look at the Web Developer’s Toolbox Collection in the Add-ons web site, you can see that every extension but one is compatible with Firefox 3.5. The only one I have found, that I use, that won’t work with Firefox 3.5 is YSlow.

And really, I don’t know why YSlow isn’t ready for Firefox 3.5. I think extension developers have had quite some time to prepare, and Mozilla have helped out well with their article Updating extensions for Firefox 3.5.

My only guess is that the YSlow people didn’t feel ready to develop for the current beta version of Firebug, and maybe are waiting for a later release. Whatever the reason, I sure hope they release a new version for Firefox 3.5 and Firebug 1,4 soon, because it’s a great extension.

And, naturally, I would like to mention that my extensions all work with Firefox 3.5 as well:

• Firefinder for Firebug
• Flickr Gallery Plus!
• Inline Code Finder
• Inline Code Finder for Firebug

Therefore, don’t worry. At least as a web developer, virtually all vital extensions are ready!

Summary

The release of Firefox 3.5 is very exciting, and I’m really happy it’s out now! I should also mention to you Swedes out there, at least those that are Stockholm-based (or willing to travel), there will be a release party later this summer! However, since all of Sweden seem to be on vacation during July, this will probably take place in August. Stay tuned!

And, to end this article, if you’re in the mood, there a pretty Firefox 3.5 wallpaper available as well.

The background story is that I needed a basic version of it in a client project, so while I had dusted it off, I took some extra time of my own to rewrite it and specialize it for jQuery, as well as working out some kinks it had.

The new version, 2.0, offers:

• Any number of slideshows in the same page.
• Nice CSS-based presentation features, like dimming out the background (Lightbox-like), autoplay, linking chosen images to another web page at click, thumbnail charts etc.
• Correctly waiting for images to load before display time is being started.
• Possible to customize errors if an image fails to load.
• Completely builds on top of existing HTML code, making it very easy to use it on top of a non-JavaScript base version.
• New JSON-object like syntax for each PictureSlides instance
• No extra settings file – all settings are in each slideshow instantiation, making it each instance completely customizable

A few PictureSlides demos

I have created three fairly simple demos of PictureSlides in action, where you can download all the code for each demo in a single package which will work right away for you:

• Picture gallery
• Slideshow only and autoplay
• Large image with navigation links

How to use it in a web page

Here are some basic instructions, taken from the PictureSlides implementation page.to help you get started (in the implementations page, you will also find all available settings).

Include JavaScript files

Start by including the latest version of jQuery (Minified version suggested):

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

Then, include the PictureSlides file:

<script type="text/javascript" src="js/PictureSlides-jquery-2.0.js"></script>

Then, within the web page or a separate JavaScript file, you can customize how PictureSlides should work and how it should be presented. You can also have any number of slideshows in the same page.

Create an HTML page

Create a web page where you put all the HTML that you want to use. This is example HTML prepared for being used with PictureSlides. NOTE! Each slideshow has to be surrounded with an element with the class picture-slides-container.

<div class="picture-slides-container">
	<div class="picture-slides-fade-container">
		<a class="picture-slides-image-link"><img class="picture-slides-image" src="pictures/1.jpg" alt="This is picture 1" /></a>
	</div>

	<div class="picture-slides-image-text">This is picture 1</div>

	<div class="navigation-controls">
		<span class="picture-slides-previous-image">Previous</span>
		<span class="picture-slides-image-counter"></span>
		<span class="picture-slides-next-image">Next</span>

		<span class="picture-slides-start-slideshow">Start slideshow</span>
		<span class="picture-slides-stop-slideshow">Stop slideshow</span>
	</div>

	<ul class="picture-slides-thumbnails">
		<li><a href="pictures/1.jpg"><img src="thumbnails/1.jpg" alt="" /></a></li>
		<li><a href="pictures/2.jpg"><img src="thumbnails/2.jpg" alt="" /></a></li>
		<li><a href="pictures/3.jpg"><img src="thumbnails/3.jpg" alt="" /></a></li>
		<li><a href="pictures/4.jpg"><img src="thumbnails/4.jpg" alt="" /></a></li>
		<li><a href="pictures/5.jpg"><img src="thumbnails/5.jpg" alt="" /></a></li>
		<li><a href="pictures/6.jpg"><img src="thumbnails/6.jpg" alt="" /></a></li>
		<li><a href="pictures/7.jpg"><img src="thumbnails/7.jpg" alt="" /></a></li>
		<li><a href="pictures/8.jpg"><img src="thumbnails/8.jpg" alt="" /></a></li>
	</ul>
</div>

Create JavaScript code

Then, for each slideshow you want, generate a PictureSlides JavaScript block to create all the settings. For example:

<script type="text/javascript">
	jQuery.PictureSlides.set({
		// Switches to decide what features to use
		useFadingIn : true,
		useFadingOut : true,
		useFadeWhenNotSlideshow : true,
		useFadeForSlideshow : true,
		useDimBackgroundForSlideshow : true,
		loopSlideshow : false,
		usePreloading : true,
		useAltAsTooltip : true,
		useTextAsTooltip : false,

		// Fading settings
		fadeTime : 500, // Milliseconds
		timeForSlideInSlideshow : 2000, // Milliseconds

		// At page load
		startIndex : 1,
		startSlideShowFromBeginning : true,
		startSlideshowAtLoad : false,
		dimBackgroundAtLoad : false,

		// Large images to use and thumbnail settings
		images : [
			{
				image : "pictures/1.jpg",
				alt : "Picture 1",
				text : "This is picture 1"
			},
			{
				image : "pictures/2.jpg",
				alt : "Picture 2",
				text : "This is picture 2",
				url : "http://robertnyman.com"
			},
			{
				image : "pictures/3.jpg",
				alt : "Picture 3",
				text : "This is picture 3",
				url : "http://456bereastreet.com"
			} // NOTE! No comma after the last object
		],
		thumbnailActivationEvent : "click",

		// Classes of HTML elements to use
		mainImageClass : "picture-slides-image", // Mandatory
		imageLinkClass : "picture-slides-image-link",
		fadeContainerClass : "picture-slides-fade-container",
		imageTextContainerClass : "picture-slides-image-text",
		previousLinkClass : "picture-slides-previous-image",
		nextLinkClass : "picture-slides-next-image",
		imageCounterClass : "picture-slides-image-counter",
		startSlideShowClass : "picture-slides-start-slideshow",
		stopSlideShowClass : "picture-slides-stop-slideshow",
		thumbnailContainerClass: "picture-slides-thumbnails",
		dimBackgroundOverlayClass : "picture-slides-dim-overlay"
	});
</script>

The most interesting part above is where you define what images should be used, what text they should have, and if they should link somewhere when being clicked:

images : [
	{
		// Path to large image
		image : "pictures/1.jpg",
		// Alternative text for large image
		alt : "Picture 1",
		// Descriptive text of large image
		text : "This is picture 1",
		// Optional. Address to link large image to
		url : "http://robertnyman.com"
	},
	{
		image : "pictures/2.jpg",
		alt : "Picture 2",
		text : "This is picture 2",
		url : "http://robertnyman.com"
	},
	{
		image : "pictures/3.jpg",
		alt : "Picture 3",
		text : "This is picture 3",
		url : "http://456bereastreet.com"
	} // NOTE! No comma after the last object
]

Download

To get the PictureSlides code, download the PictureSlides 2.0 JavaScript file, or use the code in either of the demo packages.