Post Archive

› June 28, 2005

Create DOM Objects From Strings in Safari

Working on a project recently, I encountered a scenario where I needed to parse a string of XML data. The project was Safari-specific.

The following is an account of my thought process and solution. With apologies to The Simpsons.

  • I have some XML data, but it's in a string. That's bad.
  • The DOMParser class has a parseFromString method. That's good!
  • Safari lacks the DOMParser class. That's bad.
  • But Safari does have the XMLHttpRequest class. That's good!
  • The XMLHttpRequest class works on URLs, not strings. That's bad.

Then I remembered reading about data: URIs, and lo and behold Safari supports them. That's good! That's very good, because now I can pass a "local" data: URL to XMLHttpRequest and get back a nice DOM object. Here is what it looks like:

var xml = '<?xml version="1.0"?><foo>hello</foo>';
var url = "data:text/xml;charset=utf-8," + encodeURIComponent(xml);
  
// your standard AJAX stuff
var req = new XMLHttpRequest();
req.open("GET", url);
req.onload = function() { handleResponse(req) }
req.send(null);

function handleResponse(req) {
    // w00t! a bona fide DOM object
    var dom = req.responseXML;
    alert(dom.documentElement.nodeName); // "foo"
}

There you have it. Until such a time that Safari supports the DOMParser class, this technique can be used to apply all the convenient DOM methods to XML that starts out life as a string.

› June 26, 2005

CSS design for the future: workaround vs hacks

There are many resources on bugs, hacks and filters, but I believe too few on workarounds... so here's my attempt to shed a small light on good practices on CSS coding for browsers.

Everyone involved in web design, and more specifically in CSS coding, knows that mastering theory is needed to determine browser error versus human error. Theory is essential, but it's not enough, everyday we have to face browsers discrepancies, rendering problems and bugs. This, although initially discouraging, should instead be considered a challenge to our skills...

view rest of article

› June 24, 2005

Vale Nigel McFarlane

Nigel McFarlane, well known Australian web development expert, author and commentator on technology, particularly free and open source, and Mozilla has passed away suddenly.

John Allsopp has written a brief tribute.

› June 22, 2005

Microformats.org

So that whole microformats thing I got excited about after learning of it at SXSW - it now has a new home: http://microformats.org/.

I especially like the hcard, hcalendar, etc. "creators" found in the code section, they make it super simple to start cranking 'em out without parsing through all the details and guidelines (don't say specs). Link swiped with gratitude from microformats.org site designer Dan Cederholm

OS X Widget Designer's Checklist

I've been quite annoyed with myself for making the "I hate OS X dashboard" post quite so negative. I'm actually quite excited about the possibilities that dashboard allows, the potential is great - especially for those with web level (but not desktop app level) programming skills.

What spurred me to eschew widgets to begin with is the catch-22 they present: easy to build equals more folks can produce them (wonderful), but easy to build also equals opportunity for poorly thought out ideas to be built (not so wonderful). With a desktop app, the investment in time and money to build is much greater, and so, more likely to be carefully considered - and of course we all know that even that barrier doesn't put a harness on bad products.

So, with that in mind, I thought I'd put together a widget designer's pre-launch checklist:

  • Are the features in my widget more easily accessible elsewhere?
    Calculator widget fails, but clock passes because multiple clocks can be used for time-zone comparison
  • Can the exact functionality of my widget be found as part of a free desktop application? (e.g. showing song title from iTunes)
  • Is my widget still useful without any visual dressing? Is it just about looking cool?
  • Am I providing an interface and feedback mechanism that is best suited for the user? Or just easiest to build? Or just neat looking?
  • Does my widget take up more screen real estate than needed? Conversely, have I spaced things out enough for it to be easily usable?
  • If my widget passes the other criteria, have I designed it beautifully, or hired a designer to do so?
  • Widget interfaces are extremely flexible, have I truly considered non-conventional solutions that might add real value to the user?

The first one is the most critical by far. I'd hope that most of these are common sense, but because of the ease and speed with which these widgets can be built - it's a good idea to slow down and consider these things before launching. Any widget makers or users have other things to consider?

› June 20, 2005

Google Maps Widget, most downloaded

Apple.com homepage - 6/20/05 with inset detail zoom I recently congratulated David Lindquist on the superb Google Maps Widget he made, but I thought it worth bringing up again since his widget has reached Number 1 in the list of most downloaded Widgets from apple.com.

Congrats on a great job David.

› June 19, 2005

Fun with Drop Shadows

Drop Shadows are a nice way to beautify images. There are many articles on them:

In this article, we'll see yet another technique. Most of the existing techniques use negative margins, while I've presented almost one year ago on pro.html.it, the italian portal I write for, a really simple version wich uses relative positioning. Thought I'd share it here, with some variations.

view rest of article

› June 14, 2005

Win IE 6 Flicker Test Case

Noted by Ryan in a comment to the Float Minitabs article: the Windows IE 6 problem with flickering background images is complicated. Ryan posted this test case with solution, which I think could be quite helpful for folks doing diagnosis, or simply unfamiliar with the problem.

I think one of the reasons semantic HTML and CSS comes off as confusing, complicated, and more difficult than other methodologies is that it creates a multi-layered environment. With tables for layout, your content and your presentation are all in one place, but with CSS layouts, you might have multiple cascading style sheets, and inheritance - not to mention the general abstraction that's required. Thankfully though, the browser specific bugs and weirdness are pretty much understood, and documented one form or another. I like Ryan's test case example because it's got the problem, example, solution in one place and in a context that makes sense on it's own.

Google Maps Widget

Google Maps Dashboard Widget I've been saying that I hate OS X Dashboard, some folks have agreed more or less. The point though, is not that there's anything inherently wrong with Dashboard as a concept, but rather that the potential hasn't really been tapped by the widget makers.

So I'm pleased to announce that WG author David Lindquist has released a new widget that really makes sense. Check out: Google Maps Widget. Yes, I know, google maps is just a URL away, but as soon as you try this widget out, you'll see how much time it saves to not have to load the maps page prior to entering your target location, it's a lot quicker - and definitely worth a download.

› June 13, 2005

A pocket guide to inspirational sites

We all know CSS Zen Garden and its uniqueness for inspiration and demonstration of CSS possibilities. In the last two or three years, we've seen a growing number of inspirational sites. They feature personal, commercial, and institutional CSS-based sites of every type and from all corners of the world. Here's a small list (sorted alphabetically) of the ones I usually visit:

Next, here's a few tips I hope you could find useful on how to get the best from CSS showcase sites.

view rest of article

› June 7, 2005

Float Minitabs

The natural follow-up to Inline Minitabs is Float Minitabs. In this article we'll see a variation on minitabs that uses background. Nothing really new: Dan Cederholm, the creator of the original Minitabs, also worked on a Minitabs version with background, but the version I'm going to present is quite different and perhaps some of you could find some useful tips from this entry.

The implementation of the menu we're going to see is logical, hack-free and cross-browser friendly. In fact the menu is also easily done with inline lists: but the problem is IE5, this browser does not implement padding correctly on inline elements.

The examples of this article have been tested with success in IE5, IE5.5 and IE6, Opera 7.6, Firefox 1.04 and Safari. I believe support should be extended to all modern browsers. Now, let's start.

view rest of article

A simple step by step tutorial and some workshops

The other night I found myself in a sticky situation. I had a site template to cut and build in CSS, and a presentation to prepare - both due the following morning. What to do...

The solution was obvious. Cut and build the template, and make it into a step by step tutorial.

Here it is - "A rough and ready step by step tutorial" and the finished product.

For those interested, John Allsopp and I are doing a series of two day CSS workshops in some of the major cities of Australia through June.

› June 3, 2005

Javascript: what's next?

I was thinking about how javascript has evolved in recent times. The subject is really wide, so consider this post as a links-article: instead of repeating or summarizing what others have said, I'll use links as if they were concepts trying to maintain a logical thread. So, at least for the first reading, I'll suggest you to not jump on links, since most of them have a title.

In this article I'm sharing some of my reflections; I ask you to not consider them an absolute truth, but rather, my personal and modest point of view supported by some must-read articles and recent ground-breaking techniques. I hope that this will be both a resource to modern coding and an inspiration for further thinking.

view rest of article

Ten Questions for Russ Weakley

Maxine Sherrin turns the tables and does the interogation:

Russ Weakley talks about "unlearning", web standards influences, the history of the WSG, accessibility, flash, dropdown menus, design and xhtml.

Ten Questions for Russ Weakley

I hate OS X Dashboard

Using the word "hate" in a post title makes it really seem like I'm going to explode on a tyranical rampage, which is kind of fun, albeit a tad excessive. I don't exactly "hate" OS X Dashboard and it's widgets, they just irritate me. Why would I prefer to have tiny little floating browsers when I can use a bookmark for all the same functionalities? Are there any of these things that are only useful in widget form? They kind of remind me of that MS Windows Active X desktop/web integration that nobody used.

Yes, I know "Ohhh! the flip" and they are transparent with rounded corners and 3D glossy gel button whatevers. So what? It's still a calculator and a dictionary, and a bunch of other stuff I can get from my web browser.. which is already open.

Great, everyone (nearly) I know and work with uses OS X, and probably disagrees.

When is an interface not a document?

So I guess the end-game with webstandards is single-source documents that can be viewed in handhelds, phones, web browsers, and technologies not yet revealed.. ad infenitum. This all sounds good, but lately I've been thinking about the "documents" part. What if the website you're making is really more of an interface? Web app or not, when you have little widgets that do things, and fancy do-dads that push/pull snips of data, aren't you moving away from the document model, and towards something else? Where does an application model fall into the scope of things? How about Flash? Is it better to push these application-like features into the document object model, or pull them out and place only for devices trully capable of using them? Lots of questions, feel free to school me or leave your own questions.