<h2>Me &amp; My Shadow</h2>

Then the tab control displayed “&” instead of a single ampersand character.

It looks like this occurs because the JavaScript DOM function document.createTextNode() does not convert entities. However, it looks like innerHTML does convert entities, so to fix your problem find the following line in tabber.js:

DOM_a.appendChild(document.createTextNode(t.headingText));

and replace with the following:

DOM_a.innerHTML = t.headingText;

I’ll think about this some more and if I can’t find any bad side effects I’ll add to the tabber code.

“You don’t need to be helped any longer. You’ve always had the power to go back to Kansas.” — Glinda, the Good Witch of the North

When I saw Pawel Knapik’s
bookmarklet to test CSS selectors, I thought it was a great idea – now I can enter any CSS selector and it will be outlined on the page.

Why isn’t this feature in Chris Pederick’s web developer extension? I jotted off an email to Chris – and got a reply in just a few minutes, informing me that it was already there!

I knew that I could outline a custom HTML element (as it says: “eg. div”), but it turns out you can enter any CSS selector. Oh joy!

So thanks again to Chris, the Good Web Developer of the West!

The second episode of “You’re Killing Me Here!” (usability and design screencast series) discusses various uses of the page title (HTML TITLE element): in particular how you can use it to communicate with users of your web application.

View the Screencast (2.5 minutes)

Introducing “You’re Killing Me Here!” a series of screencasts discussing web site and web application design, accessibility, and usability from the perspective of a power-user.

The first episode discusses “type ahead find” in the Firefox browser and the design implications that come along with it.

View the Screencast

Or you can just use my web data encoder and choose “JavaScript-safe” variable:

You can also use other encodings, such as encodeURIComponent to make a complex URL safe to pass as a component of another URL.

Web Data Encoder for JavaScript-safe variables

Spammers have determined that if they register for a message board account, they can leave a link to their webpage, and the link shows up on the message board user list. I’ll have to hack PHPBB to remove this back door for spammers.

I noticed the following interesting attempt: instead of leaving an obvious link to a spammer site, the link was something like the following:

studentloan.example.com/religious/

This URL looks relatively innocent – after all it has the word “religious” in it! But if you follow the link, you get a page that uses JavaScript to immediately redirect you to the spammer’s site.

After a bit more digging into the redirect page I found a JavaScript program that does the redirecting (heavily obfuscated to prevent Google from discovering the true purpose of the script), plus a bunch of computer-generated text to geared to increase their search results, a sample of which follows:

I let some weight off her so I “How did it feel to have you dept of education student loans in your tea In about thirty best online university service canceable education loan had begun to caress her pussy kentucky higher education student loans The smoke from nearby. Stretched out sideways to a July So you can still cheer, quart in size dose You take it soaked panties slapping her dental continuing education on-line. “Shall we undress you or can over and told me she wanted to us dept education student loan tipped up invitingly at the nipples, forward to what was to come She. Online university courses canada, lot of tires in my days as a a little gulp He cupped her university of phoenix online universities, overcomes any resistance you.

Update 2006-03-14: This morning there were three message board spam posts, which I quickly eliminated when I saw them in my RSS feed. They wouldn’t have helped the spammer since the links were all marked as rel=”nofollow” after some changes I made to PHPBB. But I just don’t want to deal with it, so I changed the discussion boards to require registration before posting. Sigh… why do spammers have to ruin it for all of us.

It would be nice if PHPBB had the same “moderate once” system that WordPress uses.

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).

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.

Phew… it was an intense couple of days pounding this out but it went live today. I’ll write an article about the JavaScript techniques employed to take a static HTML page and make it interactive (while keeping the page search-engine friendly), but for now I just want to link to it and give it some Google-juice.

With the new blogs at WebMD, we’re tying into social networking sites like Technorati and del.icio.us, plus linking to other blogs, so we have a lot of external links.

Previously this meant manually modifying each link so it passes through a special page on WebMD then redirects to the target URL. But I thought that was a lot of work, plus very error prone and hard to maintain.

Instead I used Ben Nolan’s behavior.js, a wonderful library for attaching behaviors to page elements, to add an onclick behavior to every external link. I used regular expressions to determine which links should be considered “internal” links that shouldn’t be modified.

You can go to a the WebMD heart disease blog and click a Technorati link to check it out.

Here’s the code: behavior-external-linkify.js

Update:

Julien writes:

I tried the scenario you listed in your blog (go to WebMD and then
click a Technorati link) in Firefox 1.5 and it didn’t work: the popup
got blocked…

Yes, I noticed that as well; unfortunately the actual part of the
process that displays the interstitial is not under my control – all I
can do is redirect the user to the WebMD page that does the rest.

I need to notify them about this difficulty – they could probably
change that page to display an alert box if the popup did not open.
Alternatively, if you didn’t care about redirecting through another
page you could modify my JavaScript such that it displays an alert
instead of redirecting the page.

Update 2006-03-09: Here is another implementation using Yahoo!’s libraries instead of Behavior.js