opinios

XML in an XXL size

Just got back from another terrific evening of quality presentations at a Melbourne Web Standards Group meeting, and am all excited with geek energy and am eager to rush off and play with all the technologies that were introduced tonight.

XML and XSLT

Browsing the web, occasionally you come across these acronyms that look familiar, but you never quite know what they mean. CSS was one of those obscure ones that never really took off until a bloke named Jeffrey Zeldman rallied the browser makers to make their browsers follow the standards for displaying CSS, and another bloke by the name of Dave Shea went and made something called the CSS Zen Garden, which blew everyone's mind.

And now everybody's doing it. Because of sites like the garden and Paul Scrivens' CSS Vault your site is officially uncool if it doesn't use CSS for its layout.

CSS separates a document's content from its presentation. Well, it mostly does. The format of the document is still bound by the constraints of HTML tags, and while it is often reasonably readable (for those prepared to view the page's source), there is still usually a bunch of stuff that you need to do to satisfy the quirks of a pure CSS layout. Things like meaningless tags, line breaks and invisible horizontal rules all detract from the ideal of pure semantic markup. Add to this the complexity of pulling data out of a database and you end up with a phrase that I still remember from my uni days - tight coupling. Layers which should be completely separate end up relying on each other more than you would like.

And yet all of this is still better than anything Frontpage or Dreamweaver would generate.

This is where XML steps in. The X stands for eXtensible which basically means you can make your own tags. Instead of umming and ahhing over whether you should represent a menu using a <ul> tag or a <dl> tag, you just make up a <menu> tag and that is that.

And then you write some templates which convert your semantically ideal content into the (X)HTML file that you want to display. These templates are called XSLT (eXtensible Stylesheet Language Templates). They list all the rules for taking your XML and generating HTML pages, so that we have true separation of content and presentation.

And that's just plain cool.

Thanks to the very knowledgable Woric for a well-explained introduction to this topic, and kudos for persevering despite a virus shutting his laptop down halfway through! You can find out more at Woric's site.

There is no Dana, only XUL (pronounced "Zool")

The other geeky acronym which got a run tonight was eXtensible User-interface Language, or XUL. I had no idea that the Mozilla browsers were all written in this language, which is just another flavour of XML, but they are. So there.

What that means is that if you have downloaded the Mozilla Firefox browser like I told you to recently, you have an entire platform on your machine to create and execute entire programs, without having to compile them or run them within the page area dictated by a browser.

That is, real software applications that go beyond just a web page.

Even though they are described in the same plain text format used for the web (XML, CSS & Javascript) these applications could include all sorts of things like tabbed windows, buttons, text fields, snazzy lists and all of the user interface components that we come to expect in the programs that we use every day. Word, Excel, heck even Internet Explorer itself could have been written in XUL.

In fact, like I said, Firefox itself is.

You can poke around the various directories in the Firefox install and see for yourself. There is some binary code but inside the "chrome" directory there is a whole stack of text files that you can go and change to your heart's content. Change the Firefox logo, change the menu structure, do what you want.

Just don't complain to me when you break it!

Huge thanks to Nigel McFarlane for his informative and passionate speech, made all the more entertaining by the numerous Microsoft jabs and various comments like "Look what's in this directory! A whole heap of rubbish, you could play for hours!"

Oh and I am happy to give him a plug because he is a nice guy - if you do want to have a play under the hood with Mozilla and XUL, I recommend you buy Nigel's book as he is the authority on the matter. And if he writes with the same flair that he presents it is bound to be an entertaining read.

Safe and Happy

The Web Standards Project have started a new campaign called Browse Happy. While on the surface this could be interpreted as an anti-Microsoft movement where we all line up to have another crack at Bill and his buddies, have a closer read and you'll see that this is not the case.

There are some good links to articles that describe in detail why Internet Explorer is an out-of-date browser that opens up your browsing experience to numerous security holes and prevents you from viewing a lot of the web's content the way it was intended.

With the increase in things like adware and spyware on Windows machines lately (a lot of which makes its way onto your machine through loopholes in IE) it is time for everyday users of the web to realize that alternative browsers like Mozilla's excellent Firefox are not just for computer nerds but for everyone. Firefox has more features and loads pages quicker than Internet Explorer, the most recent major version of which was released in 2001. On the internet 3 years is like the equivalent of 100 years in the real world.

So, what are you waiting for? It's time to catch up!

Roses and Red Wine...

...would normally be a good combination. I recommend this to any male out there who wants to make sure they do the right thing by their special someone, on any special occasion, be it Valentine's Day, your wedding reception, whatever.

Except when you actually pour the red wine into the roses.

Why would you do that? I hear you ask. Well, we don't have a funnel in our house. So I have been watering the roses I bought Kim on the weekend using an empty wine bottle filled with tap water.

Today that bottle just happened to be sitting next to an already-opened bottle of red. And I obviously wasn't paying adequate attention. I therefore poured probably a whole glass into the (non-transparent) pot in which they are sitting.

I'll keep you posted on how it affects the roses. Who knows, maybe anti-oxidants are as good for flowers as they are for humans. Hmm, I wonder if the roses like the James Busby '99 Shiraz I fed them, or whether they would prefer some of the Leasingham Estate 97 Cab Sav I have covered in dust in the corner...

Lost In Digital Translation

With the gift vouchers that were showered on us at our wedding we went out and bought a DVD/VCR combo unit to make our apartment feel complete (and Kim feel less bored when she had the day off with a cold).

Just finished watching Sofia Coppola's Lost in Translation (it wasn't out at the cinema when we left Japan) and have to say I was impressed. The movie is remarkable in how it captures the ex-pat experience in Japan - the loneliness, the exotic and the bizarre. The fascination and lack of comprehension of a world in which you will never quite fit in, no matter how long you stay, how much language you learn, how much effort you make to integrate and how close you think you are getting. Obviously being there for 2 and a half years we were able to get past a lot of those cultural hurdles, but it still resonated very strongly for me.

Cinematically it is a beautiful movie - funny, unlikely but realistic and full of some very real characters. But there is one thing that I wanted to scream at the actors while they were wandering, lost in the intimidating and often soulless metropolis:

Get on the internet!!!

Our lives in Tokyo changed massively when we bought our laptop and got broadband hooked up at home. A whole new world opened up that connected us to communities that we could never find, huddled into our cluttered shoe box in the centre of a city of 20 million people. Discussion forums, news, chat rooms, Being able to look up movie times, train times, weather, book hotels and ski tickets. Blogs. Reading blogs. Writing blogs. Creating. Sharing. Debating. Deriding. Capturing every emotion and experience and daily discovery in words and photos and plastering them online for the world to see in a weird, cathartic ego-trip.

I'm sure if Bill and Scarlet had have gotten online, maybe started themselves a blog, they would have enjoyed their Japan experience a helluva lot more. I know it enhanced mine.

A Sandwich of Hacks, Ready for the Munching

I have been thinking about putting this together for a while. I expect it to receive a mixed reaction, but it has been useful for me so I am putting it out there for others to use, abuse, and hopefully improve on.

I hereby present the "Stylesheet Arrangement for New Designs Whilst Incorporating Css Hacks" package, or the SANDWICH for short. Yes I am quite pleased with myself on the name.

While not containing any new insights into developing with CSS, this package as a starting point might make those new to standards-based design feel a little less intimidated and convince them to make the jump. The package is just a collection of CSS files that are arranged into a sensible structure, with all of the CSS hacks already in place to load them, and complete with flower boxes to encourage verbose commenting (can you tell I cut my teeth at a multinational organization with strict methodologies in place?)

This work is largely based on an excellent article by Molly Holzschlag about managing hacks when trying to make your CSS work in every browser. I had been searching everywhere for something that pulled all of the CSS hacks available to designers into one area and explained them in English, and Molly's article does an excellent job of this.

Many notable designers out there have expounded the virtues of designing for the most standards-compliant browser out there, and then systematically working your way down the list to account for the anomalies.

This got me thinking, "Why not just start building your site with the assumption that you will in fact use all of the hacks available, use them if required, in an easy templated system that is already configured for you, then lop off those that you haven't used when you are finished?" (I think the term Tantek uses is Surgical Correction, but applied to the design process rather than to when one explicitly stops supporting a particular browser)

This approach allows you complete creative freedom in that there is no fluffing about looking up which hacks perform what on which browsers, how to use them or how to arrange them. They are all there, in place and waiting for you to use when required.

Obviously different designers have different naming conventions, preferences for how to arrange their site structure, and ideas on whether filters are needed before and after primary stylesheets. But basically everyone agrees that it is a good idea to store all of one's stylesheets in the same directory, and that naming a stylesheet specific to Internet Explorer 5.5 for Windows "ie55win.css" is also a good thing. Beyond this the files are yours for the manipulating.

There are some out there who may suggest that an approach that begins with all hacks in place is not a desirable one, because it encourages people to use hacks when there may be a way to implement the same thing without one; this is true, and it is up to the user to educate themself about hacks and when to use them. But if you do need to, it shouldn't be a learning process to implement. All this package does is make it easier, but you should read Molly's article before using it.

Not all of the hacks are valid CSS, and whether this is a big problem or not is a debate that has been and gone, but the fact remains that sometimes we need to use hacks. Might as well have an easy and structured way to do that.

Any feedback, especially suggestions for improvement or any submissions of hacks that validate that I can replace non-validating hacks with would be appreciated. Here is an example of the sandwich in action, with various images set as backgrounds for each browser that is filtered (handy when you are testing multiple browsers on the one machine). If you don't see an image in the background, you aren't using a browser that is specifically filtered.

Download the sandwich (zip file, 8 KB)

Update: I just discovered this table of CSS filters that would probably allow me to extend this, but I thought I would get the first version out there).

How To Be A Great Guest

• Fly all the way from interstate for your friends' nijikai (second wedding reception)
• Be low maintenance by happily entertaining yourself when your hosts are busy
• Smile and say you were comfortable when squished onto a blow-up mattress in the corner of the room with your feet hanging off the end
• Help them organize their sorry arses when it becomes obvious that they have left everything to the last minute and won't make it on time to their own reception
• Pick up a box of a gazillion roses and carry them four blocks before hiding them on the balcony for the groom, who is busy trying to waddle a monolith of a cake out of the cake shop and doesn't have time to go to the florist himself
• Save the day when the bride realizes the battery to her camera is at home and throws a princess tantrum, by going out and buying some disposable cameras
• Help the bride and groom celebrate till late in a karaoke marathon
• Cook them a delicious beef stew the following night when they are still hung over and too tired to even pick up the phone to order pizza (you were right, it was even more delicious two days later!)
• Spoil them rotten by buying them a kick-arse present (actually all of our wonderful friends did that!)

Taz you can stay any time mate.