Recently I ran into a problem and found myself a bit perplexed. I was working on a flexible layout when I ran into an issue with clearing floats. Let me describe the scenario:

It’s a two-column layout with a right-floated column followed by a left column with a flexible width. It looks somewhat like this:

	<div id="right-col">
		Content...
	</div>
	
	<div id="left-col">
		Content...
	</div>

with this CSS code:

	div#right-col{
		float: right;
		width: 150px;		
	}
	
	div#left-col{
		margin: 0 170px 0 10px;
	}

This means that the left column will have a width that’s expanding within its current given area, but that it always has a right margin not to interfere with the right column. So far, so good. But then I started to add floated elements in the left column and then clearing them, I also cleared the floating of the right column.

I guess this is correct behavior since there was no floated container in between, but still tricky, because I had to use floated elements there. After some discussions with Faruk, he gave me the suggestion to use an inner floated container in the left column, thus making sure to achieve just a “local” clearing. So, the new HTML became this:

	<div id="right-col">
		Content...
	</div>
	
	<div id="left-col">
		<div id="left-inner-col">
			Content...
		</div>
	</div>

with this CSS rule added:

	div#left-inner-col{
		float: left;
		width: 100%;
	}

Works like a charm!

Moral of the story: if you clear floating, make sure you know in what context you do it.

First, we developed layouts based on pixels. Along came accessibility and scalability, and we started to specify our fonts with ems instead. Then, those of us who wanted to be really out there created whole layouts using ems, so the whole layout would scale accordingly to the user’s current text size setting, giving a more consistent design impression. Hand in hand with this, we also created layouts that were elastic, expanding but with a fixed maximum and/or minimum width.

They way I see it, we break our necks calculating pixels into em, trying to make sure that every value is roundable. Then, of course, when the user changes his/her text size setting, it’s bound to be some rounding errors depending on the new size and things like inheritance of the em value into different elements.

Personally, I think it’s gone to far. The reason people started to use em for fonts weren’t because pixels were a bad unit, but for the fact that Internet Explorer didn’t support resizing of the text size when the font was specified in pixels.

Ever since I was a little kid, playing video games, I’ve been amazed by the fact that no matter what size one has of the TV screen, the game adapts and you can just start playing. When I started to develop web sites, I couldn’t believe the constraints of a fixed size delivered to everyone. Sure, vector graphics aren’t here yet for the web (I can’t believe why SVG isn’t already built into every web browser), but lately I’ve been testing something that gets us as close as possible: the Zoom feature in Opera.

I think it’s outright brilliant! Talk about making it more accessible while keeping the general look of the web site! You zoom a web site to desirable viewing size and it just works. Doesn’t matter if the font is in pixels, or if the web site itself has a hardcoded width. Scale, baby, scale.

My conclusion is that this feature should be mandatory in every web browser. Stop developing with ems, use your beloved pixels, and instead give us tools (read: web browsers) that offer users the features they need.

Let us instead focus on making sure no page demands JavaScript to function and that it’s possible to navigate around using only the keyboard.

No, this is not a mushy story about how I met my girlfriend; this is about when I actually did meet Miss Universe. This story takes place when I was about fourteen years old.

Me and my little brother were playing land hockey outside our house, you know with sticks and a tennis ball, when a car drove into our parking lot. We didn’t pay much attention to it, when you’re a kid you don’t care that much about grown-ups coming and going. Especially since my parents have had a dog kennel with an extremely good reputation for way longer than I’ve lived, breeding German Shepherds, we got pretty used to meeting a lot of different people.

So, we just kept on playing, and as I remember it, they were nice and said hi to us, and we probably reacted like most kids do: with silence. I was standing there in jogging pants, a dirty t-shirt, sweaty and with snot running from my nose, being all worked up. As they passed me towards the door to the house, I realized how extremely good looking she was, and how hot her ass was. I mean, come on, I had just become a teen with all the accompanying hormones to go with it.

Their visit piqued my curiosity, and soon after that we stopped playing and went into the house. Mom and Dad sat talking to her and her husband, and seemed to have a really good time, while I and Martin were just gladly watching. They were, naturally, there to get a dog but the conversation seemed to cover a lot of other topics as well (bear in mind, my memory might be a little vague on the details here… :-)).

When they had left, I found out that she was Yvonne Ryding, the Miss universe of 1984 and her then husband was famous Swedish actor Kjell Bergqvist. Interesting experience, to say the least. I just love to take walks down memory lane now and then… 🙂

As this post and its meaning has been misinterpreted, I want to point out that Joe Clark is only used as an example below for a phenomenon on the web where famous names and their publications get repeatedly attacked in a vicious way just because of who they are, and how this will negatively affect them and also force them to often defend themselves publicly.

First, to those who don’t know who Joe Clark is, let me introduce him. Joe is a beacon in the accessibility field, revered by many and a strong fighter in this field. He’s doing intensive consulting, researching and writing while also making a number of appearances as a presenter.

When you see Joe commenting on a blog post, it’s usually in a very stern and sometimes provocative and feisty manner; he’s defending stances while arguing in an intense way. This has led to my pondering: why does Joe Clark write angry comments? I haven’t had the pleasure of meeting him in real life (although I really hope it will happen one day) but people who have say that he’s really friendly and helpful, generally a great guy altogether.

However, I guess this isn’t really about Joe, but about a state that many successful bloggers/standardistas/accessibility fighters seem to end up in. They appear to become jaded with a lot of people, instead of showing them the respect that they as well as beginners should always be met with, question everything they say and do their outmost to find flaws in what they do. They get tired of it all and now and then one of them just stops sharing their thoughts and findings for free, and instead become a recluse from the web limelight.

Or, I might be totally off-key here and it’s only Joe’s style and image. 🙂

PS. I do hope that Joe reads this and if he does, that he writes a nice happy comment about just being in a good mood. 🙂 DS.

A couple of weeks ago, we had a party at the company I work for. Outside of the bathrooms (where else?), I ran into a guy at work who I know is really interested in what the future might bring when it comes to the web. Naturally, then, I decided to ask him a question. This is how the conversation went:

-So, what do you think of Web 2.0?
-Web 2.0? Oh, you mean .NET 2.0!
Jesus…

What really got to me is the smug way he said it, like he corrected me and I didn’t really know the correct term. However, he seems like a nice guy, so I don’t think (read: hope) it was meant that way. I don’t take for granted that everyone should know what Web 2.0 is, but I do think that if you’re working with Internet and billing your customers a lot of money, I think you should at least be aware of the biggest buzzwords that are currently in the loop.

However, from my experience, this seems to be a common problem amongst web developers specialized on Microsoft products; they seem to lack the necessary knowledge about what’s going on in the web world that isn’t originating from Microsoft. Of course this doesn’t apply to all of those, but at least a fair number of them match this description.

So please, open your eyes. Know your competitors, know your options. And you know why? Because anything else would be ignorant and not doing your job 100% correctly.

Ok, after the thing we do not speak about, I feel at least a little more stable.
Just wanted to let you know about two upcoming speaking performances for me.

Know IT, November 24th, 17.00

This will an internal performance for people working at Know IT in Sweden, but if you’ve missed it, it’s on Thursday this week.

Swenug, December 1st, 17.00

I’ll be making a speaking performance at a SWENUG meeting December 1st. Some would label this as fraternizing with the enemy; I regard it as an opportunity to reach out and explain the problems and what to think of when working with .NET and wanting to deliver valid and accessible code. Anyway, it’s free (I think you need to register, but as far as I know, that’s for free too)!

While I’m very happy and grateful to get these opportunities to “spread the word”, I still find it kind of sad that it’s even neccessary to evangelize about such obvious things as the benefits of CSS, semantic code etc. It’s like having a lecture for some handymen explaining about hammers and they’d go:

– Oooohhhhhh. Nice. People use these nowadays?

One would’ve thought by now that the discussion would be about how to make cutting edge things with these tools, not explaining what they are to begin with.

Anyway… I’m glad for the opportunity, and if you feel like it, I’d be happy if you were to show up December 1st!

This is probably something you don’t want to read about, so please feel free to wait for the next post, one that will probably be (more) normal. Maybe blogs aren’t supposed to contain posts this kind…

Thursday and Friday this week, I’ve been working at home, and on Thursday I went to this singing group with Emilia where she and a lot of other very young kids play around accompanied by some music and singing of children’s tunes. Great time!

Thursday night, or rather Friday morning, she was waking up every half hour or so, crying and being generally restless. Pretty common, though, it might be bad dreams, separation anxiety etc, so I didn’t think too much about it. At about 02.30, I went into her room to get her and when I started to pick her up I noticed that she and all of he things in her bed were wet, and it was smelling rather bad. I switched on the light and it turned out that she had thrown up all over.

Fredrika took care of her bed while I changed her pyjamas and washed her clean. We took her into our room to sleep between us, for comfort and for being near. Five minutes later she threw up again. Same routine again with washing her, changing the pyjamas etc. Back to bed again. This time maybe 20 minutes passed before she again threw up. The “Pyjamas routine” started again…

After that she seemed calm and slept through the rest of the night, and feeling just fine the day after.

We have something here in Sweden (and probably at least in the rest of Europe as well) called the Winter Vomiting Disease, which is a kind of virus that makes you violently ill for about 24-48 hours, throwing up, shitting all; basically pure terror. We guessed that Emilia’s sickness was just due to something she had eaten. That is, until Fredrika got really sick today. I won’t go into graphical details, but let me tell you, it’s really bad.

So, I’ve been playing around with Emilia, taking her for a walk and such, and thinking that I had been spared; I mean, I’ve never had the virus before (come to think of it, neither has Fredrika). When I fed Emilia about 18.00 I had had an oncoming feeling of nausea for about an hour, so I went into the bathroom. Two visits later and a lot of nasty no. 2 I knew I had to change her diaper, because it was smelling bad (is there something like sympathy shitting?). While I was changing it, I felt something just bubbling up inside of me. Leaving her om the nursery table, I turned around and darted for the toilet. On the way there I threw up through my hands, feebly trying to hold the worst of it back. I spewed on Emilia’s favorite book, a water proof one she always read when we’re taking baths, and all over the floor.

I heard her crying desperately, having been thoroughly scared, but there was jus nothing I could do. Between my gushes of my latest lunch, I cried out to Fredrika that she just had to come. Luckily she was in between her “God, I just want to die”-sessions, so she ran down the stairs and took care of Emilia. When I was done and had cleaned the vomitly raped bathroom, I got out to show her that I was ok, that it was just a lapse of something temporarily bad.

However, I knew there was little chance that we could take care of her in the state we were in, so I called my mom, who just lives ten minutes away from were by car. A little moment later, my brother and his girlfriend came to pick Emilia up and drive here there (Mom was throwing a dinner party, one that we were supposed to attend, so she had taken a drink and couldn’t drive herself). Here’s where this story turns emotionally bad.

First, Emilia has never spent a night without both of us, Second, the first snow has just fallen here. Instead of me going outside with Emilia to see her astonishment and to hear her lovely:

Titta!

(which means “Look!” in English) we just gave her away, with the recent uncomfortable experience of seeing/hearing me throwing up violently. Maybe I’m just overly sentimental right now, but I saw them drive away with tears in my eyes, cursing this virus to hell. I will get better as soon as possible, so I can take her home again.

Live blogging about vomiting and shitting while in the midst of it… There must be something really wrong with me. I just felt sad and wanted to share, I hope you understand. I feel my stomach cramping again now, so it’s probably a good time to stop. Take care, all, and also, you probably shouldn’t expect any new post in the next couple of days.

After the feedback I got on my initial AJAX-S release, I’ve compiled it and added new functionality and fixes. In release 2 you will find these beauties:

• Incremental rendering.
• Printable version.
• Support for non-JavaScript users.
• Keyboard events fixed so you will stay in the presentation.

Sure, the print design isn’t exactly ground-breaking, but that’s where you come in! Download AJAX-S and test it out with your presentation material and needs, and style it up with your own design. Let me know how it goes!

Go view the updated demo now, ok? 🙂

The last couple of the days, the whole world wide web seem to be talking about Google and their latest release, Google Analytics. Since I thoroughly enjoy Gmail, think Google Maps is pretty cool and, naturally, use the search engine daily, I was intrigued to say that they were releasing a statistic service in the form of Google Analytics. And for free!

Of course I could’ve written a post right away telling about the release, but I wanted to test it first to tell you about my first impressions. Apparently it took 12 hours to get the account activated after signing up, a truth with modifications if you asked people who tried. After maybe 20 hours the account kicked in. Fair enough, I know everything about deadlines and tight releases schedules.

There seems to be lot of different views and ways of analyzing the data collected, all presented in a design that’s easy on your eyes. All you need to use it is to create an account (or use your Gmail one) and to include a JavaScript in the pages of your web site. Two things that bothered me right away were:

It’s not real time

To me, then it definitely loses its main attraction. I want to be able to check what has happened the last hours, hell, even the last minutes. Live, ok? Now it seems I can only see the data from the day before; that is, when the day is over according to US time. Pretty annoying if you’re located in Sweden.

No localization

There seems to be no way, at least not as far as I can find, to localize the time zone and the ways dates are presented. The American date format is pretty disturbing for the rest of the world, if you don’t know that.

On top of that, it gave off some inconsistent behavior in different pages, but I guess every new release has its problems. However, just before I wrote this post, I tried to sign in to check if it was more stable now, and guess what happened? Every time I signed in, I got redirected to the start page of the search engine. WTF? I mean, really…

For the moment, I’m pretty disappointed. If a product/service is as shaky as Google Analytics seems to be right now, cancel it. Pull the plug. Fix the problems and re-release when it works, before it has created such enormous badwill (or perhaps that’s already too late).

But what if they succeed?

Well, then this might become interesting. It’s a free service which supposedly offers a lot of ways to analyze your stats; it’s bound to compete with other services. What will happen with things like Mint, Measure Map and StatCounter? Will they be pushed to become better? Will all aspects of those mentioned, as well as other statistics services, become free? Who knows…?

What does Robert use?

I use StatCounter, and so far I’m very pleased with it. It has always worked but one time, and then I got instant feedback and support, and within an hour or two it was working fine again. Maybe it doesn’t offer as many ways to check the data as Google Analytics, but I prefer a small reliable service over a bulky shaky one any day.

I’m also very interested in what Measure Map will come up with. I signed up for an invitation a while ago (re-did it today), but still haven’t heard from them. If you guys read this, let me try it! 🙂

Why not Mint, you say? It’s created by the multi-talented (I did a search for multi-talented, by the way, and one of the results was Vin Diesel. Ha ha ha!) Shaun Inman, and people say it’s really good. I have two simple replies to that: I want it to be free and I don’t want to host it myself. Simple as that, but I do wish Shaun all the best and I’m sure he’ll do fine without me as a customer. 🙂

I also wonder, if you use one, what statistics software do you use? Let me know!

More reading

• Bryan’s lovely rendering of Google Analytic’s release
• If you’re lucky, Jens will be able to display some screenshots in a near future for you.

PS. By the way, why haven’t Google released Gmail to the public yet? Let people use it, it’s great. If you want a Gmail account, but don’t have an invite, just write a comment and tell me. I can send you one right away. DS.

PS 2. Thanks to Dejan who first tipped me about Google Analytics. DS.

Last week I bought the November issue of Treehouse magazine, coming from the people of Particletree, and I have to say it was the best spent three bucks in a long time! I instantly had to read it from cover to cover.

It starts off with two very interesting things: An addEvent article by Ryan Campbell explaining the need for such a function and the difference between the different solutions out there, and then goes straight into an interview with Peter-Paul Koch. Peter-Paul has had a tremendous impact on the web developing community, and especially the JavaScript part. However, I’ve never gotten the chance to meet him in person, and I’ve only gotten one e-mail reply from him (this was a number of years ago). So, Peter-Paul, if you read this, let’s make sure we meet. Who knows, I might even have something good to say too! 🙂

The magazine goes on with some other interesting interviews and articles, where I really liked the Dead Poets Society feeling I got from the interview with, amongst many other things, teacher Lisa McMillan. Alex McClung also had an interesting article about writing accessible HTML code in his piece Understanding Section 508 (although he manages to call the alt attribute for alt tag once… :-)).

Basically, a very recommended read altogether. I think the magazine will appeal to people of all kinds of experience and interest working with the web. Go read now!

Lately I’ve been blessed with a lot of visitors, with a peak of 2700 unique ones on Monday two days ago.

I just wanted to say thanks for reading, and don’t hesitate to contact me with suggestions, feedback and its like!

This morning it got a lot colder outside; -5 Celsius where I live. Therefore, time to switch to another jacket. The new jacket I wore today has got all these extra pockets and zippers, but only one inside of it. Since I need to stuff my gloves, cap, PDA and iPod in it, I started going through the other pockets, since I was slightly leaning to the left with a lot of things in that inner pocket.

After some searching, while standing on the subway, I found a pocket on the top right hand side. Wise from previous experiences, I know that some of these jackets have zippers like this that you only open up to get some air flow through, i.e. it’s no pocket so things will fall straight through, so I put my hand in to check that it inde ed was a genuine pocket.

However, I felt some kind of lump in it, and with me, curious as hell, I had to pull it out and see what it was. Sometimes I put paper in pockets just in case I ever need some to blow my nose or similar. But what I pulled up, amongst all the people standing around me, was a sock! After some weird glances, I promptly put the sock back into the pocket. I think I’ll go through the pockets within the safety of my home the next time…

The demo and the zip file are updated with a small fix to avoid generating invalid nodes while still offering the possibility to use custom HTML in any page, and the ability to display escaped code for presentations.

Updated the drop down to support pressing the spacebar and enter keys when it has got focus, to navigate directly to that certain page.

Important update!

By popular request, AJAX-S now supports XHTML code in the XML file as well. No escaping, no nothing, just write as you usually do! I think now that it is a real contender to Eric Meyer’s S5!

For some reason unknown to me, the XSLT files failed to work in some Mozilla web browsers on some computers when they had an .xslt extension. I’ve changed the zip file so it now points to XSLT files with an .xml extension. If you’ve downloaded a previous version that didn’t work, please try the new one. Big thanks to Karl and especially Henrik Box for doing some extensive testing for me (Henrik wants to meet the girls behind girlspoke as a thanks… :-))!

Release 2!

After listening to the feedback I got, I’ve now done some major updates to AJAX-S. It now supports incremental rendering, non-JavaScript users and also offers a printable version. Go check the updated demo.

Changed the JavaScript detect for support for the XSLTProcessor object so it asks users that lack that support if they want to go to the printable page instead.

Added check to scroll the current incremental step into view if it wasn’t visible.

Updated with a different look for active increment, past increment and coming increment, and a setting if one wants the first or last increment to be selected when backing from an upcoming page.

Updated with a different look for active increment, past increment and coming increment, and a setting if one wants the first or last increment to be selected when backing from an upcoming page.

Updated with a fix for two glitches in the keyboard navigation.

I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results. The code is probably not perfect, but I’m going more for the concept here. The tweaking options are endless.

The idea came to me because I wanted a lightweight slideshow based on HTML, CSS and JavaScript, but I also wanted to separate the data of each page from the actual code that presents it. Therefore, I decided to move the data into an XML file and then use AJAX to retrieve it. The name AJAX-S is short for AJAX-Slides (or Asynchronous JavaScript and XML Slides, if you want to).

Naturally, one of my inspirations for creating a HTML-based slideshow are from Eric Meyer and his S5. However, I wanted to take it one notch further, to make it more flexible and also usable for people with no HTML knowledge whatsoever. Another motivating factor was to just transform the data for the current page, as opposed to creating all the HTML needed for all the pages when the page is initially loaded. A leaner end user experience, basically.

It only works in IE 6 and Mozilla-based web browsers as of now. This is because of the need to do on the fly transformations on the client, which means the necessary support for ActiveXObject or XSLTProcessor has to be there. I think Opera 9 will support XSLTProcessor and probably some upcoming version of Safari too, so more widespread support in the future is very likely.

A freaky thing, which I hope is only a very unimportant detail, is that when I run it here at my host provider, I have to use the xml instead of the xslt one. However, most likely a hosting issue only.

But enough of that now. Download AJAX-S or view the demo of AJAX-S. Please let me know what you think, and if there’s any major error in the code. Not a requirement at all, but if you use it and like it, I would appreciate getting credit for it. 🙂

I’m sorry, what’s that, honey? When I need to get up? Well, now I guess. Thanks for reminding me, sunshine!

is how it sounded in my head. But what came out was:

Uuuuggghh… My head.. God, I’m tired… Yeah, yeah, I know I have to get up and go to work… Ooooffff… Slowly, slowly…

The background to this is that we had a Halloween party at my work last night. Since I’ve been working at a customer’s for a number of months now, it was great seeing some old friends in the office, although I didn’t have the time to talk to all I wanted to. I also had an intriguing discussion with a woman I’ve never met before about lesbians, and she told me a fascinating story about one of her female friends. Oh well, this is not the time nor the place to go on about that (maybe girlspoke is rather the place to go for hot stories)…

Naturally, it got a lot later than it should have, and I got home around 1.30. Maybe not too late for some of you, but for me it is. Especially if I have to go to work the day after. So, anyway, I eventually managed to get out of bed and haul my body down to the breakfast table. Once there, my self-pity wasn’t well-met. For some reasons, my girlfriend and my daughter, both having terrible colds, seemed to think that their lack of sleep and being in bad states, was worse than my self inflicted pain.

Just to point this out more clearly, my daughter mustered the little strength she’s got in her body right now (poor thing), to bang things together and throw them really hard on the floor. I guess I deserved it…

Took a quick shower and got on my bike down to the train station. I knew time was sparse when it came to making in time to the train, but it turned out to be worse than that. As I got to the station, the train had just arrived and most people had already gotten on it. Since it was later in the morning than usual and the fact that I’m living in a suburb, means that if I miss a train I have to wait twenty minutes for the next one. Not acceptable.

So I locked my bike, and darted across two lanes of traffic without throwing a single glance in any direction but the train’s. I heard the hissing sound of the doors starting to close, and jumped. I was literally in mid-air when the doors closed behind me. I landed in the train, bounced a little on my shaky feet, and hit a metallic trash can. It gave out a loud ring and everyone in the train turned to look at me. Well, I made the fucking train, didn’t I? 😀

Once I got to Stockholm, I picked up one of the free morning newspapers that are offered. Its first page headline read:

Every third Swede is home from work today

God, I really should’ve been one of those (it was an article about people that are unemployed). Also, this newspaper has a spot for guest comic strips. The one today, a brand new one, was called Robert’s store. It was about a guy having a record store with all kinds of hard to find records, but apparently, the income from selling them wasn’t sufficient to make ends meet, so he sold second hand porn magazines in the back. Felt like a worthy line of work for someone with my name…

Oh well, I’m glad it’s Friday at least. Have a nice weekend! 🙂

I’m really in a good mood, and it feels great! Have been for a couple of days. It might be because things are going pretty well at work, although stressed as hell, and it might be because it has been days of JavaScripting instead of fucking around with inconsistency CSS bugs in various web browsers.

Normally, I’m very ironic and sarcastic, so yesterday when I was exclaiming things like:

This looks great!

Man, this is really fast!

Wow, I love the design of this!

Nobody around me thought I was being sincere. Maybe I need to try and say what I mean more often. 🙂

Someone who’s feeling a little blue is Molly. So go there and cheer her up, if for no other reason that her work in influencing Microsoft to adhere to web standards will make your life so much better.

Cheerio! 😀

Attitude. Being humble and have enough self-distance to react to criticism in a constructive way.

Yesterday I contacted a very well-known blogger since I didn’t like a certain part of his web site. I tend to be very open and direct (some people would call it blunt), so the first thing I did was to compare his web site to another really lousy one when it comes to this aspect. I really didn’t know how he would react and how offended he would be, so imagine my surprise when his initial reply was laughing about my comparison.

After that we had a discussion about it, I expressed my opinions and he his, and he was totally open about it. And that, my friends, is what separates a big name from a nobody.

PS. “Mr X”, if you’re reading this, feel free to reveal yourself if you feel like it. I thought it fair to let you be anonymous if you wanted to. DS.

Tonight the company I work for host a (late) Halloween party for its employees. What I’m going as? A prostitute. Or rather, I’m wearing slacks and shirt, going as as a consultant. Same shit, different name…

About a week ago, Andy Clarke wrote a post entitled Advocating the quiet revolution. To sum it up, it’s about not trying to justify every choice of technology to your managers, clients and other people in your team, but just by default write code with web standards, separation of content and presentation and accessibility in mind.

While this is true and a good advice for you personally, it mostly only applies to situations with small teams/companies and when the customers don’t have developers that will inherit your code and continue to build on it. When working on a larger scale or in conjunction with the customer’s developers, it is crucial to explain and motivate the choices of technology, and why everyone in the project should abide to these guidelines.

Because, if you do things right on your own and avoid informing everyone else affected by this, they won’t understand your code and will just alter it as soon as they get the chance. And if you just put your foot down and demand valid accessible code from the developers without giving them reasons why, they will just run to the manager, complaining that it will take longer time to develop then (which is not true, but they usually state that out of fear, because they’ve just realized that they lack the necessary skills).

You don’t have to be a raging standardista full of elitism to convey this message; on the contrary. If you explain in a humble way why this is important by mentioning factors like lesser bandwidth usage, SEO, faster loading pages, maintainability of code etc, then they might understand you, from a business perspective as well as a developing perspective.

So, make sure you write good code. But also make sure to inform people around you why you do it, and why they should do it too.

Recently, a man in Hong Kong was convicted for illegally sharing movies through BitTorrent, and it is probably the first case where BitTorrent technology is involved. I only have two things to say about this:

The movies he shared

If someone is sharing movies like Daredevil and Miss Congeniality, I guess you need to be punished in some way…

Newspaper reports

Why are most newspapers referring to BitTorrent as a program all the time, while it’s actually a technology? Is it because there’s a client named BitTorrent as well, and it takes too much research to be able to tell them apart?

Almost two months ago, I joined the 9rules Network. It is a mixture of very talented and interesting people in different categories (and then there’s me :-)), and I find it intriguing to have all of those persons in the same network. Amongst those in the network, I regularly stay in touch with Roger, Jonathan and Molly (well, I try to with Molly, but she’s a busy gal), and I love Particletree‘s publications.

And now, the Network that will maybe/probably/[insert appropriate word here] become a vital part of the Internet and have an, to say the least, interesting future ahead, is now accepting submissions for Round 3. Think you’re up for it? Think that this might be your big break?

Don’t hesitate; always seize the opportunity! Good luck!

Updated on Tuesday, November 8th, 2005.

Updated again, Tuesday, November 8th, 2005
Switched from using word boundaries to checking for spaces and/or start/end of string. Also, see my comment about this.

Once again updated Tuesday, November 8th, 2005
I forgot a break; statement in the advanced version. Nothing that would break it, but bad performance-wise.

Updated Tuesday, November 8th, 2005
This is getting ridicilous now. Changed name of the linked JavaScript file to getElementsByClassName.js.

Revised version May 11th 2007

function getElementsByClassName(className, tag, elm){
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}	
	}
	return returnElements;
}

Good JavaScript usage on the Internet is based on making it unobtrusive, meaning that web pages aren’t dependant on it to work and that that the HTML code shouldn’t be riddled with inline event handlers and JavaScripts. Using javascript: is forbidden, stop that!

What you do is to apply the events to desired elements from an external JavaScript file, normally performed when the page has loaded. For instance, if you want to apply a certain event to some a elements, you loop through the a elements in the page and then apply the events accordingly, e.g. if the element has a certain class name.

Last week, I felt the need to have a script that accessed all elements in a web page with a certain class name and returned them as an array to work with. I wrote my function, but ran into problems when it came to distinguishing class names that contained a hyphen (-). Then I remembered that Jonathan Snook wrote a function a while ago, so I went to his web page to see if I’d missed something. Interestingly enough, it was very similar to mine, and when I tested his it didn’t work either.

So, since Jonathan and I talk on and off, I contacted him about this over MSN. Jonathan, being the cool and helpful guy that he is, immediately took the time to discuss this with me. I coded away, told him what happened as I went along, and we brainstormed about how we could solve it. After some work, we came up with something that seems to work really fine, supporting class names with hyphens and multiple class names on the same element. It is actually very similar to Jonathan’s original function but with an escape fix and some performance add-ons.

Let me present The Ultimate getElementsByClassName:

/*
	Written by Jonathan Snook, http://www.snook.ca/jonathan
	Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];		
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}	
	}
	return (arrReturnElements)
}

Some ways to call it

To get all a elements in the document with a “info-links” class.

getElementsByClassName(document, "a", "info-links");

To get all div elements within the element named “container”, with a “col” class.

getElementsByClassName(document.getElementById("container"), "div", "col");

To get all elements within in the document with a “click-me” class.

getElementsByClassName(document, "*", "click-me");

The first line in the function is to cover-up for a flaw in IE 5 where one can’t use the wildcard selector * to get all elements. The rest is basically about setting up a regular expression with the class name we’re looking for, where we escape hyphens and then match that to the class names of the elements where we’re looking for it.

Please try it out. Our hope is that it will help you develop unobtrusive JavaScripts and that it will make it easier for you to maintain your web sites. Any problems with the function, please let us know.

Go crazy now! 🙂

Updateded! Since Anne asked for support to look for multiple class names in the same call, I’ve revised the function. The above function is intact and supports multiple class names if they’re entered in that order on the element. If they’re not, you should use the below function. Kudos to Curtis for inspiration.

function getElementsByClassName(oElm, strTagName, oClassNames){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	var arrRegExpClassNames = new Array();
	if(typeof oClassNames == "object"){
		for(var i=0; i<oClassNames.length; i++){
			arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
		}
	}
	else{
		arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
	}
	var oElement;
	var bMatchesAll;
	for(var j=0; j<arrElements.length; j++){
		oElement = arrElements[j];
		bMatchesAll = true;
		for(var k=0; k<arrRegExpClassNames.length; k++){
			if(!arrRegExpClassNames[k].test(oElement.className)){
				bMatchesAll = false;
				break;						
			}
		}
		if(bMatchesAll){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}

Ways of calling the function now are:

To get all a elements in the document with a “info-links” class.

getElementsByClassName(document, "a", "info-links");

To get all div elements within the element named “container”, with a “col” and a “left” class.

getElementsByClassName(document.getElementById("container"), "div", ["col", "left"]);

Note that you can still use a string when only looking for a single class name, but an array when looking for multiple class names.

Also, if this is to work in IE 5.0, you need to include this add-on to get support for the push method on the Array object:

if(typeof Array.prototype.push != "function"){
	Array.prototype.push = ArrayPush;
	function ArrayPush(value){
		this[this.length] = value;
	}
}

If you don’t like to read the code here, you can download the JavaScript file.

A very nice thing happened last week! Due to my article about HTML or XHTML?, I got a lot of attention, and especially Thursday and Friday were busy days, peaking on Friday with 1689 visitors. I also got some linking at http://del.icio.us/ with 149 links (and counting) 🙂.

What felt extra good about this, is that I got this attention when writing a constructive post instead of just ranting. Maybe there is hope, after all! 🙂

I mean, really! They’re lying there, looking oh so pretty, with their passionate orange color and shaped like female breasts. They lure you in, they call and they seduce you.

So you give in. You take one and start to peel it; then it happens. It turns on you, its peel is impossible to separate from the actual fruit itself, you use your best finger work, but nothing. Nothing!. And if you’re one of the actual few, someone people talk about in folklores, a person that has actually managed to remove the peel, you come to the next level.

Trying to separate the orange wedges. There’s some kind of white unknown cocoon around them, preventing you from actually separating one of the wedges from the other, and you get a tingling sensation of the orange actually gloating now.

Then, as always, you end up jamming your thumb and your index finger into the orange, spurting fruit juice all over yourself and the room. You’re fingers are all sticky, but you won. You won!

In Spanish/En Español
På Svenska/In Swedish

It seems like the eternal question amongst web developers: HTML or XHTML? Wherever I look there seems to be posts in forums raising the question, web developers asking me or other people write blog posts about what they believe is the right way to go. I’m not writing this post to tell you what the ultimate choice is, but rather to inform you about the consequences of what you choose. So, let’s take it from the top:

Strict or Transitional?

Definitely strict. Transitional doctypes are exactly what the name implies: a doctype for a phase of transition, not meant to be used permanently. If you write HTML and choose Transitional, you will get the Quirks Mode rendering, which results in web browsers just trying to mimic old and incorrect behavior; this means that rendering will be very different from web browser to web browser. If you choose XHTML Transitional, you will get the strict (or rather, strictest) mode available in IE (Note: from version 6) but you will trigger the Almost Standards Mode in Mozilla-based web browsers.

However, if you use a strict doctype, you will get full standards correct rendering and the most consistent and forward compatible interpretation of your pages.

What is XHTML?

A XHTML document is a document that has to be well-formed according to the rules of XML. Every tag has be closed and correctly nested, and for tags like img, input, link etc, a quick close slash should be added at the end of the tag, like this: <input type="text" />. If you’re writing code that should be accessible for people with Netscape 4 and some other web browsers, then make sure to have a space before the slash (Note: not to make it look good in Netscape 4, but to make it work at all).

You’re supposed to be able to save a page written in XHTML and use it as XML right away.

Why XHTML?

It totally depends on your needs. Some people believe it to be very easy and consistent to code in its XML fashion, where everything has to be well-formed and every element has to be closed. Some people choose it to extend its functionality with namespaces, to use it in conjunction with MathML and so on. Other people might work with XHTML, not out of their own choice, but because the products they/their company use deliver XHTML.

I’ve heard something about application/xhtml+xml?

Yes, it’s all about what MIME type goes with your code. For HTML, the media type is text/html. According to W3C, the organization behind many recommendations such as HTML, XHTML etc (albeit mostly known as web standards), state in their XHTML Media Types document:

‘application/xhtml+xml’ SHOULD be used for serving XHTML documents to XHTML user agents. Authors who wish to support both XHTML and HTML user agents MAY utilize content negotiation by serving HTML documents as ‘text/html’ and XHTML documents as ‘application/xhtml+xml’. Also note that it is not necessary for XHTML documents served as ‘application/xhtml+xml’ to follow the HTML Compatibility Guidelines.

What this translates to is that web browsers who can handle application/xhtml+xml should get it served that way. However, IE doesn’t support that media type, thus requiring you send the code as text/html to it, basically resulting in you having to deliver the pages with different media types to different web browsers, using something called content negotiation. By now, you probably think it all sounds like too much of a hassle, and choose to go with text/html all over. I mean, after all, the Appendix C. HTML Compatibility Guidelines presents the validity of serving XHTML as text/html.

However, then you read this:

XHTML documents served as ‘text/html’ will not be processed as XML [XML10], e.g. well-formedness errors may not be detected by user agents. Also be aware that HTML rules will be applied for DOM and style sheets…

Which means that web browsers will not render your pages as XHTML, but rather as HTML and fall back on error handling and trying to guess how it was meant to be. Then you’re most likely back at square one, because you probably don’t want it this way.

Also, something else that is utterly important to know is that certain scripting will not work when sent as application/xhtml+xml. For instance, if you use document.write or have ads on your page through an ad content provider using it (such as Google AdSense), it will stop working. If you implement an AJAX application using the innerHTML property on an element, that won’t work either.

What’s Robert’s opinion?

My personal opinion is that the most important thing is that you choose a strict doctype, be it HTML or XHTML. If you want to use XHTML and serve it as text/html, make sure that you don’t intentionally have code that would break when served as application/xhtml+xml. Do not use scripting like the one above mentioned in an XHTML page, and go the extra mile to make sure it is indeed well-formed. Be also very aware that a page that isn’t well-formed sent as application/xhtml+xml will not render at all, but will instead only display an error message to the end user.

Anne used me as a bat for HTML, but I’d rather be seen as a spokesman for making a thought-through decision, no matter which one it is. I sometimes work with HTML in may daily job and sometimes XHTML, depending on a lot of factors.

So, choose what you think suits your needs best, and choose wisely. And make sure it’s a deliberate decision.

Related reading

• The Road to XHTML 2.0: MIME Types (a.k.a. XHTML’s Dirty Little Secret) by Mark Pilgrim
• How browsers work by Anne van Kesteren
• Activating the Right Layout Mode Using the Doctype Declaration by Henri Sivonen
• XHTML and error handling by Robert Nyman

Since I just redesigned this web site, I decided to be part of the CSS Reboot. Please go there and vote on this design, and what you think about it. I won’t ask you to give it a good grade, even though I’d be happy for it! Just vote with your conscience. 🙂

Also, make sure you also find inspiration in a lot of the other beautiful web sites presented there!