i just had a fun bug to kill: A client complained that their site is not working. The code is theirs, all we did was update some flash movies. What didn’t work, was a popup window showing the flash movie.

Now, the code was Dreamweaver generated and the out-of-the-box functions have their version as comments on the line of the function name:

function MM_openBrWindow(theURL,winName,features) { //v2.0

window.open(theURL,winName,features);

}

	

There seems to be some optimising setting on the client’s server that deletes all whitespace in the documents, and when they uploaded the above code, it ended up as:

function MM[...]([...]) {//v2.0window.open([...]);}

This commented out the whole function and broke the popup. Learning from that: Don’t use embedded JS in an unknown environment.

Just got an URL from a friend that is too good to be kept just in my private stash: Sim Daltonism is a real-time colourblindness simulation app for Mac OsX. You can select what type of colourblindness you’ll like to simulate and a small window shows the area around the mousepointer with this filter enabled.

This little gem might save Vischeck.com some traffic and us less time spent copying+pasting into Photoshop (and checking with the Vischeck plugin).

It is amazing how the same idea seems to grip multiple developers at the same time. While the heydays of yet another image replacement technique seems to be over, flexible multicolumn CSS frameworks are the new sliced bread.

Thierry of TJK Design shows his One clean HTML markup, many layouts, Mike Stenhouse offers a CSS framework and Dirk Jesse brings Yet another multicolumn layout (in German).

If that is not enough, Alex Robinson gave me his impressive monster of an article + generator “one true layout” (to be released on P.I.E. soon) for review.

Update Stop the Press: The article is now live and can be read and enjoyed: In search of the One True Layout

A lot to read and skim through, and very great ideas, too. My concern is that it seems that everything generic tends to become a bit bloated and cryptic over time (DHTML libraries anyone?) and we’ll need to see how we can chop the ideas down into digestible chunks.

A lot of extra code has to be added to support outdated browsers, for example, and it would be cool to have these extras in an extra style sheet, for those who want to say “to hell with bad browsers” instead and keep their sheets clean and maintainable.

Sorry if that is already the case in some of those, I am also busy reviewing the AJAX/XML chapters for the upcoming JavaScript Reference for O’Reilly and prepare my webcast for the world usability day.

Read the linked bits now, you know it is good for you!

Update: judging by the comments below it seems it was not obvious that the JavaScipt is only needed to support MSIE. I added this even more obviously to the explanation text. Hopefully it is clearer now…

I was asked by a friend yesterday to review their company web site and was amazed to see table layouts with MM_ JavaScript rollover abominations still being paid good money for.

One of the arguments for the oldschool design was that they wanted “buttons” for navigation, and I promised to make a demo of a text/CSS navigation that does look like a nice graphical one and allow for font-resizing without breaking apart. It is nothing special, it has been done before but what the hey, have a look for yourself:

Proceed to the flexible navigation example

Specificity is not only the aspect of CSS that will make any fluent presentation stop in its tracks (or am I the only one who has problems pronouncing it?), it is also a very important part of CSS design. Basically it allows to override settings defined earlier in a stylesheet by adding other element, class or ID names.

h1{color:#fff;background:#369;}
will not apply any longer when you add another id of an element the h1 resides in:
#home h1{color:#000;background:#f8f8f8;}

While it is easy to trial and error initially, the more you mix and match elements, IDs and classes the harder it can get to predict the outcome.

Andy couldn’t stop his nerdy alter ego and came up with a star wars based, wonderful cheatsheet on the subject which initially had some errors that Molly rectified.

Wonderful stuff and something to hang up in the office.