cookiecrook²

1:38 PM #

Email obfuscation...

I finally found an email obfuscation technique (Hat tip: Owen Rodda) that I like well enough to use on my site. I removed my email address a few years ago — actually, I may have never posted it — to avoid the ever-watchful spambots. The technique does not rely on any JavaScript and is completely accessible, AFAIK. So go ahead, send me an email.

Example

james@cookiecrook.com

Code

<a href= "m&#97;ilto:james&#37;40cookiecrook&#37;2ecom" >james<abbr title=" at " class="mail">&#064;</abbr>cookiecrook<abbr title=" dot " class="mail">.</abbr>com</a>

The 'mail' class is just so I can turn off the bottom border on the abbreviations. The @ sign in the href value is actually double-encoded as %40. The numeric entity % is translated into % and then %40 is the URL encoding for @.

As some of you may already know, this technique cannot guarantee spambots won't harvest your email address, because the soulless Internet turncoats who program spambots could theoretically write a script to account for this technique. My hope is that this method is complex enough that it won't be worth the effort or performance loss to the bots. After all, there are still plenty of plain-text emails out there for harvesting.

12:42 AM #

Course and training updates...

As I mentioned last week, Patrick Wood and I recently finished writing Beginning Flash MX, which has just been released at Netscape Learning Center. Sign up for updates if you'd like to be notified when the course goes into session. I believe the first one is scheduled for sometime next month.

Also next month, Jim Allan of TSBVI, Rob Sartin of Knowbility, and I will be teaching the advanced training sessions for the Austin Accessible Internet Rally (AIR). The focus of those sessions is on accessible use of CSS, JavaScript, and other web multimedia such as Flash.

If you're a web developer, designer, or content producer in the Austin area, please sign up for AIR Austin. The rally is for a noble cause and I swear you'll love it. Right now, there are 25 non-profit organizations and only 5 developer teams.

11:58 PM #

Mozilla preference tips...

Have I mentioned I love Mozilla? Ok, ok, but have I mentioned it this week? So why are you still using Internet Explorer? Do you like popup windows, flashing banner ads, and other annoyances?

User style sheets are a great way to empower yourself as a surfer. I use mine for ad-blocking, among other things. By the way, this user style sheet will work in Safari too.

1. Download these custom style files (1 CSS file and 6 GIFs).
2. Find your user style sheet directory. For Windows users, this folder may be hidden (depending on your settings) but it's probably here: C:\ Documents and Settings \ USER_NAME \ Application Data \ Mozilla \ Profiles \ default \ RANDOM_STRING.slt \ chrome. It should contain files called userContent-example.css and userChrome-example.css.
3. Drop the downloaded files in this directory. (Mac users, good luck finding the real directory. I've placed these files in at lease three apparently correct directories on my Mac with no luck.)
4. Restart Mozilla.

Most of that CSS file is for ad-blocking. Compare certain ad-prone sites to IE to see the benefits. It did catch more but I removed some false positives from the list so it wouldn't disable real content.

You may want to enable lines 111 through 144 in the CSS file — I've left them commented. These lines add graphics after non-standard links like those using mailto: and javascript: protocols, adds graphics for links to PDF and DOC files, display the accesskey attribute of links and inputs, etc. If you know CSS, you'll discover a few other things in there. Edit it to your heart's content. Let me know if you have any questions.

Also, here are some preference settings I find extremely useful.

• Navigator > Tabbed Browsing > Open tabs instead of windows for: Check "Middle-click, Control+click, etc."
• Privacy & Security > Images > Animated images should loop > Once. These keeps those annoying ads that slip though from flashing at you.
• Privacy & Security > Popup Windows > Block unrequested popup windows. This blocks ads and other crap, but still allows popups you click on to open (requested popups).
• Advanced > Scripts & Plugins > Allow scripts to: I've unchecked the first 3. You decide which you want. YMMV.

Here are some non-standard preferences I use. You will need to install Tabbed browsing extensions for these.

• Navigator > Tabbed Browsing > Advanced Tabs > Advanced Behavior of Tabs Check "Show Closebox in tabs"
• Navigator > Tabbed Browsing > Focus of Tabs > Load new tab in background... Check "Links" and "Other Applications"

The last one is especially useful because I can read a page and Control+click links to open new tabs for other stuff I want to read. Since they open in the background, the new windows don't interrupt my reading on the current page. I can get like 30 friendster tabs going... Ha.

Update (August 29, 2003): I've recently learned that the two lines containing g.msn block some valid content, so I've removed those from the CSS file. You may want to download the latest copy again or just remove those lines from your own if you have already modified it.

10:15 PM #

Adult swimmer...

Don't get me wrong, I've always liked Inuyasha, but I miss FLCL. What has happened to my routine?

2:22 PM #

Illustrators of note...

I ran across Scott Thigpen's illustrations today and wanted to share. He's got a some high-quality work in his portfolio. Check it out.

Even more exciting is the fact that superstar designer Charles Spencer Anderson will be in Austin on September 9th for an AIGA lecture. I'll post more details on the AIGA Austin calendar when I get them.

1:35 PM #

Quote for the day.

I got the following sentence in a ClearQuest defect today.

The language translation services is miss spleed.

Not even close, sorry. Request_Withdrawal.

8:52 AM #

Design Piracy...

As a designer, I have no patience for stolen designs, so when YiMay told me her site design had been pirated (see the screen shot of the thievery if the site gets taken down), I immediately reported it to Pirated Sites. I hope she gets the front page.

The thief, design pirate, and fraud (a little tip for Google's link references) even stole the graphic stamp that means "YiMay". He/she also stole all the images, layout, and a large portion of the content. Like most copies, it's been copied very, very poorly. Most amusing though, is the stolen acronym, ChAmP. YiMay's version matches her domain name, "Chinese American Princess." The thief's version is "Chinese Ambassador to Peking." Um... What?

As noted in the fraud's comments section, Confucious say, he who steals another's design shall receive many curses upon the head.

1:40 AM #

Writing relief...

Patrick Wood and I just finished writing Beginning Flash MX, a seventy-something page course coming soon to an online classroom near you. I'll post more details as they become available.

11:19 AM #

Google goods and the Texas Governor

Jon Wiley, an Austinite only 3 miles from me, wrote a nice summary of Google's other features yesterday. You're right, Jon. Google is definately awesome. Developers should also look over the Google APIs.

Jon is the web developer for republican Rick Perry, the Texas Governor. The Governor's web site uses valid XHTML, CSS, RSS, and conforms to the Section 508 and WCAG accessibility guidelines. Interestingly enough though, Jon doesn't appear to share the views of his boss, President Bush's former Lt. Governor. In fact, entries on Jon's web log from August 11th and August 7th are democratic to the core.

What? You mean all Texans are not avid Bush supporters? Nice. We have a man on the inside.

12:23 AM #

Linking text boxes...

I saw a few posts this morning about the future of CSS through Mezzoblue's wish list and Michael Pick's web site. I wanted to address one point that Mike brought up: linking text boxes with CSS.

Linking text boxes is a way to specify that text flows from one box into another. If there is too much in the first box, instead of resizing, the text just continues into the second, third, etc. This linking feature has long been available in print design programs like Quark or InDesign. Unfortunately, it's never been available for web media through CSS. Mike's proposal idea is something like this:

You have two content sections in the markup:

<div id="parent">
  content content content
</div>
<div id="child">
  <!-- empty -->
</div>

Then you link them together in the CSS.

#parent { /* styles */ }
#child { content-link: #parent; }

This idea has been proposed many times on the W3C's www-style list and has always been dismissed for a very valid reason: It relies on a junk markup element: #child.

There's no reason to have #child other than to style it as mentioned in the previous idea. Since CSS is about restyling markup, and markup is about data, the markup should be independent of the style. There should only be enough code in the markup to accurately represent the content as semantic data. Because the second element is unnecessary code in the markup, it is a junk element. This method mixes style back into markup. What happens to the document content of #child if it's replaced by overflow from #parent? Remember, CSS is about styling, not about replacing or adding content. Using it that way is abusing it.

I agree with the idea though, because linking text boxes is an extremely important design element. We should be able to have multiple visual blocks linked, but those visual blocks should not have to be separate content blocks in the markup. Columns (part of the CSS3 proposal) are a start, but they're not as flexible as linking random text boxes in Quark.

What if we could take one content element (like a div) and split it visually but keep the markup clean? CSS already has generated content blocks for pseudo-classes like :before and :after, so why why not another for : text-flow? We could even have have multiple psuedo-classes to allow text to flow through multiple elements.

#parent { /* styles */ }
#parent:text-flow(1) { /* styles */ }
#parent:text-flow(2) { /* styles */ }
#parent:text-flow(3) { /* styles */ }

Then each of the pseudo-elements could be styled independently of each other but the markup would remain clean and semantic. The more I consider this, the more I'm convinced it's the right way to do it. Of course the idea could use some refinement, but for that it needs feedback from other developers.

I mentioned this idea on www-style last month, but got absolutely no response from the CSS working group. It turns out there's no official way for a member of the public — that is, a non-W3C member like me — to propose an idea to the working group other that the public discussion list. Since I don't have any other formal place to propose the idea, I've decided to use this web site. Hopefully the right people will see it.

What do you think?

Update (August 14, 2003): Egor Kloos' comments on this idea expressed some concern on the ambiguity of positioning the pseudo-elements, so I'd like to clarify my ideas for positioning and display.

Default display would inherit from the parent element. Inline elements would have inline children; block-level elements would have block-level children, etc. Position would default to normal unless specified otherwise.

9:45 PM #

On the blogroll today...

• Science and Super Powers (link via Jay Allen)
• Mezzoblue's Second Voice
• Unicode and the Onslaught of English

8:18 PM #

Accessify forums...

I've written several accessibility-related posts this week (not the izzle fizzle stuff), so why not end it on that note, too.

Nigel Peck launched the Accessify Forum a few days ago and it's already loaded with useful tidbits and threads. The forum spawned from an accessibility resource site, Accessify, created by UK-based Ian Lloyd.

One especially interesting idea is that the forum is running on phpBB, which is not an inherently accessible software package. The plan, though, over the course of the next few months, is to generate discussion on how to better "accessify" the site. The site's creator, Nigel Peck, plans to push the forum up to WCAG Level AAA standards eventually.

12:05 PM #

wizzle izza trizzlin hizzle...

James:

there's not really much to this izzle shizzle, is there?

YiMay:

oh there is so much

YiMay:

we just have to practice

James:

oh i cizzle tizzle it fo shizzle, but can yizzle undastand ma nizzle?

YiMay:

fo shizzle

James:

werd

James:

but i cantizzle chizzle about htmlizzle so whizzles izzle goan do?

YiMay:

fo shizzle

James:

wait wizzle, you just sayin "fo shizzle" afta all ma rizzle!

YiMay:

fo shizzle

James:

yous a trizzle

YiMay:

fo shizzle

10:43 AM #

Orwell guessed 20 years too early...

If you don't want to participate in democracy, understand this: others will. And what happens when you have a great majority of Americans withdraw from the democratic process? You no longer have democracy — you have an oligarchy, where power is concentrated in the hands of a few. And that, sadly, is what we have in America today. We have a power-elite that's stepped into the vacuum created by the apathy of the general American populace.

former UN weapons inspector, Scott Ritter

Have I mentioned you should read 1984?

11:12 PM #

Hello Toshi!

I'm supposed to be writing Lesson 5 of Beginning Flash MX right now, but it's much more fun to surf... and to blog about what I find out there.

I haven't kept a web site hit counter on this site in over a year now — I think it keeps me grounded if I can convince myself that no one reads my site — but occasionally I'll check the referrals and see who's linking to cookiecrook. This weekend I noticed an interesting referral that raises some questions I've had before about ideal web surfing environments and privacy.

I ran across what appears to be a dynamic history cache of the web surfing habits of Toshi5580. Apparently Toshi's ISP, Hatenna::Antenna, keeps a record of Toshi's most recently visited web sites and dynamically publishes this page on a public web server. I don't read Japanese, so I might be way off, but I'm pretty sure that's right.

Anyway, I've followed Toshi's surfing habits for a couple of days now because if he's interested in what I have to say, I wanted to see what else he's interested in. He reads cookiecrook on a regular basis and it turns out we both read a lot of the same web logs (so I assume he's interested in web standards) and I even found a few nice new links to add to my daily reading list.

Of course the first thought I had was, "I would hate to have my surfing history posted on a public web server." Not that I have anything to hide, but it's just not really anyone's business. It makes me think of all the rumors there are about FBI or CIA files that checked out Mein Kampf or The Anarchist's Cookbook from their public library. Where do you draw the line?

Now the culture in Japan is very different from the culture in America, and especially in Texas, so this may not even be considered a big deal. Toshi may not even mind. Would you mind? But then, Toshi might not even know his ISP hosts this page... um... until now, of course.

What do you think of this Toshi, or anyone else for that matter?

8:25 PM #

America's Online Severence...

I think it's incredibly funny that Eric Meyer's severence package from AOL included 1025 hours free! (In the first 45 days of unemployment.)

9:59 PM #

An accessible spam-buster...

James Tikalsky sent me this screen shot of an accessible verification form used by SBC Global for blocking spam robots. I edited it only for size and phone number obfuscation.

Like Knowspam, Yahoo, Miscrosoft, and VeriSign, this form uses images of visible characters that a sighted user can type in. In addition, the SBC form includes an audio alternative. If the user cannot see the characters, they have the option of listening to a short audio clip that speaks the characters. Finally, if the user still has trouble passing verification, they can call a toll-free number and speak to a customer service associate.

Though I did not get a chance to look at the source, it's obvious that SBC's verification form is a fine example of web accessibility done correctly... Well... Except for the adjacent links and low-contrast text perhaps, but now that's just nitpicking. Heh heh!

4:20 PM #

Knowspam... Tired of the blind yet?

The reviews I've seen for a new spam-blocking service, Knowspam, have been nothing but positive. Many well-respected independant content publishers such as Derek Powazek and Heather Champ tout the benefits through quotes on the web site. While I hate to be the bearer of bad news, I must whole-heartedly disagree.

The way Knowspam works is by maintaining a "safe list" of people who can send you email. A person who is on your safe list can send email with impunity, but a person who is not on your safe list has to go through a verification process to prove they are not a robot. In this case, robot means an automated computer program that generates spam.

The problem with Knowspam is the way this verification process works. If I were to send a message to a Knowspam user, I would get an automated response informing me of the situation with a link (URL) to Knowspam's verification program. The verification page contains a series of four images and a form. The process requires the user to read visible numbers off the images and type them into the form.

But what if I'm blind?

Blind and visually impaired users are used to having screen text spoken to them by a program known as a screen reader. Images can be read by way of a text alternative embedded in the HTML of the page. No text alternatives exist for Knowspam's verification service because that would make it too easy for a robot to break through. A CNet article entitled Spam-bot tests flunk the blind discusses the problems with this approach in more depth.

The screen shot at the beginning of this article was taken today by me on a Macintosh G4 running OS 10.2.6 and Internet Explorer 5.2.3. It was edited only slightly for size and balance. IE for Mac sometimes has trouble loading images and, once loaded, has trouble releasing them from the browser's cache. Just to play devil's advocate, when I finally got the images to load I refreshed the page a few times. The images were cached with their original values so the numbers I saw were not the correct numbers for the refreshed version of the form. I was denied access and was only able to pass the verification procedure by loading up the page in my main browser, Mozilla. Mozilla doesn't have the same cache problems Internet Explorer does.

As if that weren't enough, I went to the contact page and was greeted with an unlabeled form (HTML label elements associate the text label with a specific input field). Then I went to Knowspam's feedback page, and saw the following comment key.

    Comment = knowspam.net rocks!
    Comment = knowspam.net sucks!

Or, as a color-blind user might see the same key:

    Comment = knowspam.net rocks!
    Comment = knowspam.net sucks!

Fortunately, these last two problems are easily fixable, if the Knowspam web developers take the time. The HTML form labels are a simple code fix and the comment key could be replaced with the following.

    Praise = knowspam.net rocks!
    Complaint = knowspam.net sucks!

Unfortunately though, Knowspam's entire spam-blocking application relies on a completely inaccessible method which does have an easy solution. Until they come up with a better one, I'd recommend not using the service.

Do you have any blind friends? Would you like to? Don't use Knowspam. See update.

Update (August 3, 2003): After posting this yesterday, I received a wonderful note from the Knowspam founder, Thomas Burns. He's known about the accessibility problems and has been working on a possible audio solution: a user could listen to a short audio clip telling them which numbers to type in the form. I think it's a fantastic idea and I wish him luck with the technical challenges.

In the meantime, Thomas agreed to add a request form for disabled users unable to pass the verification process. He sounds like a very thoughtful and well-meaning developer... Perhaps this Knowspam idea can work after all. Moving on to Yahoo, Microsoft, and VeriSign.

Update (August 5, 2003): Thomas just informed me that he's added form labels and changed the color key on the Knowspam site. He also added a form for users who have trouble with the verification test so he can manually add them to the safe list. The web community thanks you, Thomas.

10:58 AM #

Web Standards Meetup?

So who's coming to the Austin Web Standards Meetup next week? Get your votes in quickly or it will be cancelled again.

In other randomly weird and unrelated news, a lady gave birth while standing on a Boston train. How bizarre!