Coding with Jesse

Hide Firefox Referals From Firefox Users

I'm glad Julian Bez pointed out we don't have to bother Firefox users with Adsense Firefox referals. Just yesterday, Google opened up Firefox referals for International content providers. I immediately added the banner to the Tools page of this site, and to Free Horoscope Daily, but I totally didn't think about showing Firefox users something different. Julian also outlines how to accomplish this easily with PHP. Thanks, Julian.

Published on November 29th, 2005. © Jesse Skinner

Motivation is a Trap

Over on Success Begins Today, John Richardson put up some great Quotations by John Maxwell:

"The whole idea of motivation is a trap. Forget motivation. Just do it. Exercise, lose weight, test your blood sugar, or whatever. Do it without motivation. And then, guess what? After you start doing the thing, that’s when the motivation comes and makes it easy for you to keep on doing it."

"As you begin changing your thinking, start immediately to change your behavior. Begin to act the part of the person you would like to become. Take action on your behavior. Too many people want to feel, then take action. This never works."

This reminds me a lot of the time I was going to university. I'd spend hours searching and reading articles on the Internet about beating procrastination. I was spending so much time trying to figure out how to get the motivation to do the things I wanted to do.

Eventually, I realised the only way to Get Things Done was to just do them! I don't know what other solution I thought I would find.

Nowadays, I love reading all the tips and tricks for Getting Things Done. It seems like everyone is obsessed with productivity and anti-procrastination. But I also worry that people are spending all their time configuring their Hipster PDA or organising emails in Outlook instead of just working on the things that need to get done.

Now, before you cry "Blasphemy!", I think the principals of Getting Things Done are really great. More or less, I've been applying them for many years. Basically, I keep a file, todo.txt, with everything I need to get done. I have one at home and one at work. I separate it into sections like so:

Main Project
============

sub project
- thing to do
    - detail on that thing
        - sub detail
    - another detail
- another thing to do

And if I ever forget what my Next Action is, I just take a look in the file. But I don't feel I need to do a lot of the other things, like reviewing, or some kind of inbox. I guess I'm just not as busy as some people, I usually have a good idea of all the things I have to do without it causing me stress.

Anyway, these quotes make a great point: finding ways to motivate yourself is a waste of time. If you're going to do anything, go do the thing you need to do.

Published on November 28th, 2005. © Jesse Skinner

No-JavaScript CSS

On one of my web sites, I use JavaScript to show/hide div layers containing each section. I have links to "#section-five" for example, but the onclick event changes the section-five div to display: block; and the previous div to display: none;. This is designed so that browsers without CSS or JavaScript will still be able to use the links as regular anchor links. This assumes, though, that the visitor would either have both CSS and JavaScript, or neither.

Since I wrote this, I've been struggling with how to deal with visitors who have CSS but not JavaScript. Today I figured out a way to do this.

The typical solution would be to have display: block; set by default, then to use JavaScript to set display: none; onload. I tried this solution, but I didn't like how all the layers appeared at first, then suddenly disappear. I wanted a solution that wouldn't affect the experience for most users.

All I needed to do was display different CSS to users without JavaScript. To accomplish this, I first considered setting disabled on the style sheet, then using JavaScript to enable the CSS link. This didn't work right in Firefox because Firefox ignores the disabled attribute of link tags.

Next, I tried setting the href on the link tag to href="", then dynamically setting the href using JavaScript. This worked good, except then users without JavaScript would be forced to see the page without CSS. It was perfectly usable but looked pretty boring.

Finally, I came up with this compromise. The link tag on the page is:

<link rel="stylesheet" type="text/css" media="screen"
 href="nojavascript.css" id="stylesheet"/>

so by default, visitors will get a "nojavascript.css" CSS file. This file contains:

@import "screen.css";
div.section { display: block; }
#ads { display: none; }

So without JavaScript, the page has all the div layers displayed, except the ads. (Adsense and Chitika won't work without JavaScript anyway.) Also, by using an @import, I won't have to maintain two almost-identical CSS files.

Next, I added a line to the JavaScript file attached to the page:

document.getElementById('stylesheet').href = "screen.css";

Note that I didn't put it in an onload function. I don't want the page to change once it's been loaded; I want it to look right from the start. If you do this, you'll have to make sure that the <script> tag comes after the <link> tag.

The other nice thing about this method: it ensures that users with browsers that doesn't support getElementById will still get the nojavascript.css file. This is important because it is the only method I use for handling the onclicks.

That's it. Simple, yet powerful.

Published on November 28th, 2005. © Jesse Skinner

Web Content Accessibility Guidelines 2.0

As announced yesterday in the W3C News:

The Web Content Accessibility Guidelines (WCAG) Working Group has released Working Drafts of the Web Content Accessibility Guidelines 2.0 and HTML Techniques for WCAG 2.0 and a First Public Working Draft of Understanding WCAG 2.0.

Unlike many W3C documents, these are actually quite readable and useable right away. They make some great points, some of which surprised me a bit. Web accessibility is often reduced to screen-reader functionality. This document goes quite a bit outside that narrow view and ensures that the web is fully accessible to users with a wide range of disabilities. These includes learning difficulties, cognitive limitations, speech difficulties and others.

As a result, following the advice in these documents seems like it would enhance the usability of the web for all users, even those without disabilities. Here are some of the more interesting points I noticed in these documents.

  • Guideline 2.5 - Help users avoid mistakes and make it easy to correct them. This is really great, general advice. It suggests validating input, providing context-sensitive help, and offering users a chance to review or possibly undo actions.
  • Guideline 3.1 - Make text content readable and understandable. Again, very useful and general advice that improves usability for all users. It suggests avoiding the use of jargon or words used in an unusual way. Also, the use of simple language summaries or diagrams to explain complex concepts to users with reading ability less advanced than "lower secondary education".
  • H46: Using null alternative text and no title attribute on img elements for spacer or purely decorative images. This makes perfect sense once I read it, but I had never given much thought to this being a real problem. I always thought about empty alt and title tags as a kind of work around. However, putting things like "side" or "blue bar" in alt tags on pure display images would just be annoying and unneccessary to a user with a screen reader.

If you haven't yet, I suggest giving these documents (at least the guidelines and techniques) a quick read. It's good to be reminded now and then of the simple ways we can make the web accessible and usable to everyone.

Published on November 24th, 2005. © Jesse Skinner

CloneCD For Mac OS X

If you find yourself with a Clone CD set of files (.CCD, .CUE, .IMG & .SUB), and you're using OSX, you'll probably realise quickly that you can't burn these files. This is because CloneCD is unfortunately only available for Windows.

Luckily, there is still a way around this. Here's the steps I had to follow:

  1. Download Firestarter FX. You can also use any program that can burn .BIN/.CUE files
  2. Install Firestarter. For me, this wasn't so straightforward. StuffIt crashed when I tried to open the ZIP file, so I had to unzip it from the command line. If the ZIP file is on the Desktop, just open Terminal and type "cd Desktop" and then "unzip FireStarter*.zip". This created a folder on the desktop containing the program.
  3. Rename your .IMG file to .BIN. This is the hack: CloneCD .IMG files are really normal .BIN files in disguise. It's just the file extension that confuses cd burning programs. By renaming, Firestarter will be able to open it.
  4. Open Firestarter, drag the .BIN and .CUE files onto the Firestarter window, and burn.

That's it! Now you should have a perfect burnt CD without having to copy the files over to a Windows computer!

Published on November 22nd, 2005. © Jesse Skinner
<< older posts newer posts >> All posts