Jonatan and I discussed this back and forth, how it actually works and how we’d want it to work. Both he and I felt fairly certain that if an element, for instance, had a background image associated with it but was hidden (i.e. has display: none), it wouldn’t load its background image until it was shown.

So, Jonatan set about on doing some tests and his findings were that images for hidden elements, set via CSS or inline in the element, would load every time – contrary to what we thought/expected.

Part of me thinks this is good that when the element is shown, everything is already loaded and will look good, but the performance fan in me is thinking that a web browser should only load what is actually displayed.

What would you want or expect? And do you have any other findings

What I would like to talk about today is the rendering speed in WebKit. As we all know, it is very fast and has gotten very good standards support, combined with a number of new exciting features.

But, as of lately, when testing a couple of web sites I have worked on, I have experienced rendering glitches in both Google Chrome and Safari (both based on WebKit). Or rather, inconsistencies. It always loads very fast, but it’s just that things might look weird (as in things not positioned exactly where expected, miscalculated height values in script after the DOMContentLoaded event has fired (which naturally depends on each web browser’s JavaScript engine of choice) etc), and then after a reload, all those problems go away. It’s also hard to recreate these issues since they don’t happen every time, but just occasionally.

Let me be the first to say that it might just be my code that sucks, that I should try another approach in some scenarios and that there’s no more to it. However, these web sites/pages have never once shown any inconsistencies in Firefox or even Internet Explorer, which does makes me wonder.

Currently we have a performance war between web browsers, and we all know that rendering speed is a quite important part in creating a good end user experience. But, if this is at the cost of inconsistent rendering, I don’t want it, and it makes me wonder if the WebKit rendering is sometimes too fast for its own good?

Am I the only one who has experienced this, or have you seen this too?

In the latest issue of the Swedish Macworld magazine they interviewed a number of developers about iPad and what they believe about it’s future. Amongst them, Jayway iTeam CTO Fredrik claimed/envisioned that iPhone OS X will be the new Mac OS X, and that there will be no Mac OS X 11, and maybe not even a Mac OS X 10.8.

Me myself being interviewed fairly frequently for magazines, I know it can be a misquote or not totally accurate, so I’ll give him the benefit of a doubt. But anyway, what if it were true?

The iPad

Without delving too much into the iPad, and the various opinions about it being either the savior of computers or just being an enormous iPhone, I think we can all agree on that a fair amount of people will use it. And personally, I think the iPhone/iPad OS definitely has its place for less tech-savy users and also for more simple usage like reading mail, surfing the web, playing customized games etc. Seeing people using an iPhone for the first time, it is impressive how fast they learn it and adapt.

Using the screen keyboard on the iPhone (and most likely iPad as well) is tedious and inefficient to a real keyboard. And with the iPad, if you connect a keyboard, it kind of kills the purpose of a tablet-device, and I could just have a laptop instead.

Mac OS X

The main strength of Mac OS X is the many ways you can adapt and customize it. If you just want pretty applications, nice text rendering and easy application installations, that’s fine. But if you want to unleash the raw Unix power, terminal hacking and some deep-level coding, that’s just as much an option. And what I really like about it is the balance between these two, that I can have the best GUI and at the same time the full power behind the scenes.

And, most importantly, I can install and configure any application I want to.

Don’t mix ‘em up

I think the iPhone OS will be pretty good for iPad and similar devices, but I would never ever want it to, in any way, replace Mac OS X. Just imagine being forced to use iTunes on your computer, having the almighty App Store decide what you can install, being limited in choice, not to say the least, in choice of web browser, mail application etc. I strongly believe a full operating system will always have its place, especially when it comes to choice and personal control.

If the full Mac OS X would be replaced by something iPhone OS-like, my switch to something Linux-based (probably Ubuntu) would happen very soon.

What are your thoughts?

My friend Steven Clark has written in 6 Million Reasons to Reconsider your Next Upgrade about the war in Congo, and how the world’s constant urge for minerals leads to terrible and inhuman actions – approximately 45 000 people die every month.

Please read Steven’s article, consider the impact of your choices and think about what you can possibly do to make a change.

Our speaker

Joining us this time around is Giorgio Sardo who is a Microsoft Technical Evangelist/Internet Explorer Evangelist who will talk about Internet Explorer. The idea is to first have Giorgio talk about what has been implemented in IE 8, HTML5 features and also share what’s coming in IE 9. Then, after the break, I hope we can have an open and constructive Q&A where we can discuss various things we would love to talk about.

The schedule

The preliminary schedule of the evening looks like this:

• 18:00 Mingle and getting your seats. Please show up at six sharp.
• 18:30 First talk about IE 8, HTML5 and IE 9
• 19:30 Pizza and drinks (beer & wine)
• 20:30 Q&A about Internet Explorer
• 21:15 Mingle, and assorted fun

Date & Location

The event will be March 29th and hosted by my employer Valtech, and the location is at Hantverkargatan 5 in Stockholm.

Sign up now!

There are 130 seats available, so write a comment below now to get a seat! Please do not write a comment if you aren’t certain that you can attend.

Problems with float

The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt.

Enter display: inline-block

This is where the magic value inline-block for the display property comes into play. Basically, it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc. A simple example will look like this:

<style>
	ul#display-inline-block-example,
	ul#display-inline-block-example li {
		/* Setting a common base */
		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
	}
</style>

<ul id="display-inline-block-example">
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ul>

Rendered results

• Item one
• Item two
• Item three

As you can see, display: inline-block; helps us here to render three square gray boxes next to each other. Awesome, right? However, with varying content, we need to add the property vertical-align: top to mkae sure everything is aligned to the top.

<style>
	ul#display-inline-block-example,
	ul#display-inline-block-example li {
		/* Setting a common base */
		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;
	}
</style>

<ul id="display-inline-block-example">
	<li>Item one</li>
	<li>Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two</li>
	<li>Item three</li>
</ul>

Rendered results

• Item one
• Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two
• Item three

This will render just fine in Firefox, Safari, Google Chrome and IE 8. However, for older versions of Internet Explorer, we need to trigger hasLayout and also use a little hack to set the display to inline (note that this code could be in a separate stylesheet for IE, included via conditional comments – it’s inline here out of simplicity for this example):

<style>
	ul#display-inline-block-example,
	ul#display-inline-block-example li {
		/* Setting a common base */
		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;

		/* For IE 7 */
		zoom: 1;
		*display: inline;
	}
</style>

<ul id="display-inline-block-example">
	<li>Item one</li>
	<li>Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two</li>
	<li>Item three</li>
</ul>

Rendered results that will work in IE 7 too

• Item one
• Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two
• Item three

The enormous drawback

I hope so far that I have managed to get you to realize the potential and simplicity of this approach. However, there’s one giant drawback, that might or might not apply to your use case. That is, since the elements become rendered inline, white-space in your HTML code will affect the rendering. That means, if we want perfect size and alignment, but we have space between the LI elements in our code example, it will render a 4 pixel margin to the right of each element.

Case in point, let’s make it more clear by giving the surrounding UL element a fixed width, wherein the LI elements should fit:

<style>
	ul#display-inline-block-example,
	ul#display-inline-block-example li {
		/* Setting a common base */
		margin: 0;
		padding: 0;
	}

	ul#display-inline-block-example {
		width: 300px;
		border: 1px solid #000;
	}

	ul#display-inline-block-example li {
		display: inline-block;
		width: 100px;
		min-height: 100px;
		background: #ccc;
		vertical-align: top;

		/* For IE 7 */
		zoom: 1;
		*display: inline;
	}
</style>

<ul id="display-inline-block-example">
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ul>

Rendered results

• Item one
• Item two
• Item three

As you can see, the third item will now fall down to the next row. Which sucks! Hard! However, if we were to place the LI elements directly after each other, they would all be rendered in the same line:

<ul id="display-inline-block-example">
	<li>Item one</li><li>Item two</li><li>Item three</li>
</ul>

Conclusion

So, the conclusion is that white-space dependent rendering blows! But, there are also great possibilities with display: inline-block, so I advise you to try it out, play around with it and see if it works fine in your specific context.

Related reading

Cross-Browser Inline-Block

Steve Souders, web performance guru and all-around top bloke, writes in Missing schema double download about a performance issue. Apparently, as it turns out, when you include CSS file with the link element or @import statements, there’s a risk that the same file will be downloaded twice in Internet Explorer. Yes you read that right: twice!

The downside of this is of course multiple HTTP requests for just one file (and the latency, superfluous header info etc to go with that) and downloading double the size in kilobytes for CSS code; same file, not read from cache at all. The problem lies in using protocol relative paths to your CSS file(s), like this:

<link href="//example.com/css/base.css" type="text/css" rel="stylesheet">

That code will start at the root of the web site and from there look for a catalog named css and then a file named base.css in it. Where it fails in Internet Explorer, though, is that this asset will be downloaded twice.

Recommended ways to get around this problem is to use an absolute, root relative or location relative path to your CSS files, like this:

<link href="/css/base.css" type="text/css" rel="stylesheet">

or

<link href="http://example.com/css/base.css" type="text/css" rel="stylesheet">

or

<link href="../css/base.css" type="text/css" rel="stylesheet">

This could suck in the perspective of flexibility (e.g. different environments, mixed http and https protocols etc), but at the same time, if there’s anything you can do to make things faster in the web browser that is already far slower than the others, you should do it.

Syntax options and web browser support

The good news is that there is web browser support for CSS gradients in Firefox, Safari, Google Chrome and Internet Explorer (Opera will most likely add it soon too). The bad news is that, for a couple of reasons, the implementation in each web browser is different from the other. In IE’s case, it’s because it’s based on their ancient approach that stems form IE 5.5. For WebKit-based web browsers (like Safari and Google Chrome), they were the first ones to suggest it, based on the approach for canvas, but this was later changed by the CSS WG, and the new syntax is now the one implemented in Firefox (and I guess this syntax will later make into WebKit-based web browsers as well).

There are two great articles on this topic, delver deeper into the syntax differences: CSS gradient syntax: comparison of Mozilla and WebKit and CSS gradient syntax: comparison of Mozilla and WebKit (Part 2).

So, as of now, we have have CSS gradients support for:

• Firefox 3.6
• Safari 4
• Google Chrome
• Intenet Explorer 5.5

Examples

Let’s look at some samples code:

Linear gradient, from top

This will show a simple linear gradient, going from top to bottom in a element.

<style>
	#gradient {
		color: #fff;
		height: 100px;
		padding: 10px;
		/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
		/* For Mozilla/Gecko (Firefox etc) */
		background: -moz-linear-gradient(top, #00f, #fff);
		/* For Internet Explorer 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
	}
</style>

<div id="gradient">
	I haz gradient
</div>

Rendered version

Linear gradient, from left

This gradient is rendered from left to right, for 70% of the width of the element. The color stop after 70% will not work in Internet Explorer; “interestingly” enough its FinishX and GradientSize properties doesn’t apply to the Gradient filter…

<style>
	#gradient-with-stop {
		color: #fff;
		height: 100px;
		padding: 10px;
		/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(linear, left top, right top, from(#00f), to(#fff), color-stop(0.7, #fff));
		/* For Mozilla/Gecko (Firefox etc) */
		background: -moz-linear-gradient(left top, #00f, #fff 70%);
		/* For Internet Explorer 5.5 - 7 */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FF0000FF, endColorStr=#FFFFFFFF, GradientType=1);
		/* For Internet Explorer 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF, GradientType=1)";
	}
</style>

<div id="gradient-with-stop">
	I haz gradient
</div>

Rendered version

Radial gradient

Time to get a little bit funky with radial gradients! From what I have seen, there is no support for radial gradients in Internet Explorer.

<style>
	#gradient-radial {
		color: #fff;
		width: 100px;
		height: 100px;
		padding: 10px;
		/* For WebKit (Safari, Google Chrome etc) */
		background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
		/* For Mozilla/Gecko (Firefox etc) */
		background: -moz-radial-gradient(40% 40%, farthest-side, #ffffa2, #00f);
		/* For Internet Explorer */
		/* As if... */
	}
</style>

<div id="gradient-radial">
	I haz gradient
</div>

Rendered version

Thoughts

For simple linear gradients, this offers quite a nice and simple way to offer and control it directly through CSS. Unfortunately, lack of support in Internet Explorer doesn’t make it as useful as it could be.

More reading

• CSS gradients in Firefox 3.6
• -moz-linear-gradient
• -moz-radial-gradient
• Introducing CSS Gradients (WebKit)
• Safari Dev Center: Gradients
• Tool to test gradients, and generate CSS code

First evening

After sharing a flight with my fellow Swede Stefan Hermes, we eventually got to our respective hotel. I was sharing a room with Fabrice Desré, and as it turned out, there was one big bed, and one pull-out sofa. Being true men, we decided to decide in a macho way who got the bed and who got the sofa – the decision was made playing Rock, paper, Scissors. After four (!) ties, I eventually won in the 5th round.

We then went to the welcome beer at the Delirium café where we met lots of Mozilla friends, and had quite a nice evening!

My HTML5 talk

I had put a lot of preparations into my talk, trying give as good an overview as I could, while delving a little deeper into certain parts. There were quite a number of different areas I wanted to cover, and another thing I went for was presenting in a new way: no bullets points whatsoever; bullet points makes me just read the text, and the crowd will have read it before me. Instead I was trying to use fitting images depending on the current subject and then talk about that to instead complement my slides, making it a more loose and dynamic presentation.

Having people like Mitchell Baker (Chairperson of the Mozilla Foundation) and Christopher Blizzard (Evangelism Director for Mozilla) in the audience while giving this presentation for the first time, I must have been cray to attempt something like that!

On top of that, the room was PACKED! In the Mozilla dev room there were 200 seats. They were filled, both aisles to the brim as well, people sitting on stage so I actually had to watch out not to trample them while walking back and forth during my presentation. And as if that wasn’t enough, both big doors were practically blocked by people wanting to get in, and they had to apply the one-in, one-out rule, and outside, within two meters of the doors, you couldn’t get closer.

I met a number of people who just couldn’t get in, and I also saw a photo of the packed corridor outside. And, not trying to fool myself, I know the big interest was for the topic and not me as a speaker, but still, it’s pretty awesome to get on stage when there’s such a big draw.

Luckily, though, I’m very happy, and relieved, to say that it seems to have gone down well.

My talk was meant as an introduction to HTML5 and also as the first steps into using it, and then have Paul Rouget of Mozilla follow-up with some outstanding demos of things you can achieve with various parts of HTML5 and its APIs (and man, his demos are amongst the coolest I have ever seen!).

Proud and happy, it really made my day to read feedback like this on Twitter:

Just seen the most amazing HTML5 presentation ever! (by falkowata)

@robertnyman … amazing fun filled presentation…(by eSuNnY)

The HTML5 talk is really quite awesome – especially the feature demos! (by welp)

Just saw an html5 presentation @fosdem, VERY nice! (by mvdkleijn)

the introduction to #html5 in the #mozilla dev room at #fosdem is really interesting and the demos are amazing (by naderman)

My presentation slides are available at SlideShare
, but without the actual presentation to go with it, the experience is not as good as if it were complemented with my words to go with them.

Meeting Mitchell Baker

Another thing I have to bring up is naturally the chance to meet Mitchell Baker, who is truly an amazing woman. In 2005, Time magazine listed her as one of the 100 most influential people in the world, and she is behind a lot of good things in the open-source world. I spoke to her a few times at the conference about various things, but you can just imagine my joy at the Saturday night dinner, after my presentation, when she wanted me to tell her more than myself. Thinking I had about 30 seconds before she’d lose interest in little boring me, I rambled as much as I could…

I have to say, though, that it is quite comforting to meet someone like her, and to see that she was completely down-to-earth, and just a very good person with great opinions.

Saturday night events

In Saturday evening, there was a huge Mozilla dinner followed by games of bowling and laser tag. I bowled with Lukas Blakk, Alex and Edu, and apparently being on a high after my talk, my first roll was a strike. Thing is, I’m not very good at bowling, although I ended up with a good (at least in my eyes) series of a 106.

The sad thing about the evening is that Edu accidentally fell during the laser game, broke his foot and was pretty badly damaged. Really too bad – he’s a very nice guy, and this just happened before his upcoming week of vacation.. Get better soon, Edu!

Meeting people

Like at all conferences, there are a lot of great people to meet and always to little time to properly talk to them. Here’s a rough list of people I met (I’m certain I’m missing a lot of you here) that aren’t mentioned above, and I was very glad to see them in Brussels (listed in no specific order – using an unordered list, ok?):

• Brian King
• Patrick Finch
• David Tenser
• Mark Finkle
• Stuart Parmenter
• Irina Sandu
• William Quiviger
• Tristan Nitot
• Carsten Book (Tomcat)
• Barbara Hueppe
• Jan Odvarko (great Firebug developer!)
• Matjaž Horvat
• Dave McNamara
• Axel Hecht
• Bogomil Shopov
• FuzzyFox (William D)
• Gandalf (Zbigniew Braniecki)
• Sarven Capadisli
• Andreas Ehn
• Cedric
• Ian
• Mike (from Denmark)

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

Introducing Christopher Blizzard

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

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

The talks

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

When & where

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

Sign up now!

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

The video element

The video element is as simple as can be:

<video src="swedish-flag.ogv"></video>

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

autobuffer

Loads the entire file if this attribute is enabled, but is ignored if autoplay is set.

autoplay

Video starts playing as soon as it is ready.

controls

If video controls should be displayed – looks dependent on web browser.

height

Height of the element

loop

If the video playback should loop.

src

The video file to play

width

Width of the element

So, another example could look like this:

<video src="swedish-flag.ogv" controls width="320" height="240"></video>

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

Different treats for different web browsers

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

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

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

<video controls="controls">
	<source src="swedish-flag.mp4">
	<source src="swedish-flag.ogv">
	Sorry, your web browser doesn't support the video element
</video>

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

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

Codecs and licenses

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

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

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

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

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

Conclusively…

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

Related reading

• YouTube and Vimeo support HTML5 Video
• The Dark Side of HTML 5 Video

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

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

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

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

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

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

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

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

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

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

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!

What we have

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

Reducing the number of HTTP requests

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

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

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

CSS Sprites

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

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

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

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

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

Introducing base64-encoded Data URIs

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

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

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

Regular CSS background image

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

Base64 Data URI as background image

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

Comparing the alternatives

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

Web browser support

Data URIs are supported in:

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

Internet Explorer…

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

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

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

Tools for encoding

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

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

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

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

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

High-traffic web sites using Data URIs

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

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

Acknowledgements

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

The problem

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

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

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

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

The solution!

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

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

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

A little caveat

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

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

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

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

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

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

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

Combining it all

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

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

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

Web browser support

RGBa support is available in:

• Firefox 3+
• Safari 2+
• Opera 10

Filters in Internet Explorer are available since Internet Explorer 5.5.

This means that this will work for virtually everyone!

Acknowledgements

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

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

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!

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

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

Merry Christmas, Happy Holidays!

What it does

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

• Inline JavaScript events
• Inline style
• javascript: links

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

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

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

What it’s like writing an extension for Google Chrome

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

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

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

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

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

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

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

What it is

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

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

What I like

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

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

What I don’t like

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

And fair enough, I think one of the choices behind this was to make it easy to beginners, but still, when you end up with code like <h1 class="h2">, that’s just wrong to me. No class name should ever be named after an actual element name if you ask me (especially not the name of another element).

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

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

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

Conclusion

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