Archive for the ‘General’ Category

Zee comments, zey are beck

Monday, March 13th, 2006

I finally upgrated WordPress, and since it handles comment spam so much better I activated comments again on this blog.

Unfortunately, I also had to ditch my old template, so until I get a chance to redesign the site you’ll be stuck looking at the default WordPress template.

To make up for this disgrace, here’s a funny graphic.

No more spam please

p.s. I love the new AJAX category/tag selector in WordPress 2!

Spring has sprung

Monday, March 13th, 2006

Megan with flowers growing out of her head

BarelyFitz discussion boards are back

Saturday, March 11th, 2006

A year ago, the BarelyFitz discussion boards were hacked due to a nasty bug in PHPBB, so I had to remove them.

In the meantime I had a new edition to my family and a transition from running my own web design company to working as a full-time employee at WebMD. Needless to say, I have been busy and the forums were not a high priority.

But finally the forums are back (and hopefully this will stem the many email questions I receive about my open-source projects).

Possible logo

Saturday, March 11th, 2006

Possible new logo? Let me know what you think.

BarelyFitz Designs logo

Apple iTunes accessibility color problems

Friday, March 10th, 2006

apple itunes accessibility problems

Okay, Apple, am I really expected to be able to read this? Let’s get a little bit of color contrast here…

Eliminating redisplay flashes in JavaScript

Thursday, March 9th, 2006

The Holy Grail in creating dynamic HTML is to have a page that works perfectly even when JavaScript is disabled. You want your page to be beautiful and dynamic, but you also want it to be accessible, search-engine optimized, and printable.

To make this happen you start with plain, semantic HTML, then you add a JavaScript layer to rework the page into something better:

JavaScript vs. No JavaScript

One problem with this technique is that your JavaScript must run after the HTML has been set up and rendered on the page, so a user with a slow connection might see something like this using my JavaScript tabbifier:

Animated simulation of HTML rendered then re-rendering using JavaScript

This is not too pretty, so obviously we want to make it stop.

Your first thought might be “I’ll just add a style to the content to make it hidden (CSS display:none), then my JavaScript will run and reveal it!” But that puts a big crack in our Holy Grail, because if you use CSS to hide the content, it will not be visible to users who do not have JavaScript.

Here’s the method I used:

  1. Add a class javascript-hide-me to the content you need to hide, but do not define that class in your CSS.
  2. Before the content, use JavaScript to define the CSS class. The easiest way to do this is by using document.write in the head section of the page, but you will have to directly modify the DOM if you are serving XHTML pages that use MIME type application/xhtml+xml.
  3. After the content has been transformed, use JavaScript to remove the CSS class and reveal the content.

Here are two examples, one that exhibits the flashing problem, and another that fixes it using the technique described above. Note that in order to see the flashing problem, you need a slow internet connection: I recommend throttling your connection using the excellent Charles Web Debugging Proxy.

Updates 2006-03-09

Welcome, Ajaxians!

Bobby describes an alternate technique in case you are serving XHTML pages that use MIME type application/xhtml+xml.

Steve Clay makes a valid point that we should check for DOM compatibility before writing the styles on the page.

JavaScript Slideshow Wizard Demo Screencast Video

Tuesday, March 7th, 2006

I’m evaluating Camtasia Studio for creating some training videos, so I made a training video for my JavaScript slideshow wizard:

Play the Video

I don’t have much of a voice for these types of things – I need to find some kind of microphone modulator to give me that Barry White effect.

It’s pretty easy to use software, I was able to whip up a Flash screencast demo in no time at all with callouts and everything. Just be thankful that I only have version 2, because in version 3 they added webcam support. How about it Camtasia people, slide me a copy of version 3 so the world can see my beautiful mug.

Regarding the slideshow wizard – it still works pretty well, but could use an update to make it more usable.

Dawn-zilla and Radioactive Squirrel

Saturday, March 4th, 2006

Next on Fox: when podcasting superstars attack!