Since I’ve been using Opera a lot more than usual since Opera 9 Preview 2 came out, I’ve repeatedly run into the canonical reason that sharing one button for stop/refresh is a bad idea: Reaction time.

When a button changes in response to your own actions, it’s easy to adjust. When a button changes in response to something over which you have no control, there’s a possibility that it may change between the time your brain tells your finger to click on the mouse button and the time it presses down, registering the click with the computer.

Case in point: A web page is loading slowly. You’ve already seen the part you’re looking for, and you don’t need the rest of the images, or the rest of the 587 comments on the blog post. Maybe all you needed to do was confirm you had the right site, and you need to copy the URL. So you go to hit Stop. The web page finishes loading before your finger finishes clicking, the button changes to Reload… and the browser starts reloading the entire slow page from byte one.

I’ve done this at least four times in the past week.

The bad news: I can’t find separate stop/reload buttons anywhere in Opera’s button collection. The closest I could find seem to apply only to panels, not to browser views.

The good news: The Custom Buttons page at NonTroppo.org has them!

Once I get these on all the computers where I normally use Opera, accidental reloads should be a thing of the past!

*This post originally appeared on Confessions of a Web Developer, my blog at the My Opera community.

Posting an Opera button on your website or blog is a great way to encourage people to try out the browser — but what if the visitor already uses Opera? It shows solidarity, but what if you could show them something else, something that is new to them?

You might want to replace your regular Opera banner with an ad for Opera Mini. Or show them another graphic of your own design. Or maybe not even a graphic, maybe post some sort of message, like “Opera spoken here!” or “Welcome, Opera visitors!”

It’s relatively simple to do this in PHP, or ASP, or some other server-side script…but sometimes you have to stick with static HTML. Well, client-side JavaScript can replace chunks of your page, and here’s how to do it.

1. Put the following script in a file called operalinks.js:

function replaceOperaLink(linkID) {

if(linkNode=document.getElementById(linkID)) {

if ( 0 <= navigator.userAgent.indexOf('Opera') ) {

var newButton=document.createElement('span');

newButton.innerHTML = '<a href="http://www.opera.com/">Glad to see you're using Opera!</a>';

var parentNode=linkNode.parentNode;

parentNode.replaceChild(newButton,linkNode);

}

}

}

For the innerHTML section, you can plug in a new link and banner, or a special message, or anything you want. (Just make sure that you put a backslash () in front of any apostrophes you use.)

2. Put a unique ID in the tag for your regular Opera button. Use the outermost tag that you want to replace. For example, let’s start it off with this:

<a id="OpLink" href="http://www.opera.com">Download Opera!</a>

3. Load the script in your document’s <head> section:

<script type="text/javascript" src="operalinks.js">

4. Call the function in the body onload event using the ID you chose in step 2:

<body onload="replaceOperaLink('OpLink')">

When the page loads, the script will check the visitor’s browser. If it’s Opera, it’ll replace the banner with whatever message you chose in step 1. It’s compatible with both HTML and XHTML, and you don’t need to worry about using <noscript> tags to make sure the banner still shows up for people with JavaScript disabled.

*This post originally appeared on Confessions of a Web Developer, my blog at the My Opera community.

It’s kind of redundant to post a “Get Firefox!” banner to someone already using Firefox, but it’s useful to show them an upgrade banner if they’re on an old version.  It’s also useful to show Firefox users a banner for Spread Firefox.

This can be done easily with PHP or other server-side scripting languages, but sometimes you have to use static HTML files.  That’s where client-side scripting becomes necessary.  Last month I posted some sample code that used document.write, which doesn’t work with XHTML.  (On top of that, the <noscript> blocks I used ended up causing validation errors because of their location!)

I’ve redone everything with DOM scripting, which will work with either HTML 4 or XHTML 1.0.

1. Put the following in a file called sfxlinks.js:

function replaceFirefoxLink(linkID) {
   if(linkNode=document.getElementById(linkID)) {
      var newLink=document.createElement('a');
      var newImg=document.createElement('img');
      var change=0;
      if ( 0 <= navigator.userAgent.indexOf('Firefox/0') ||
         0 <= navigator.userAgent.indexOf('Firefox/1.0') ) {
         change=1;
         newLink.setAttribute('href','YOUR_UPGRADE_LINK');
         newImg.setAttribute('alt','Upgrade to Firefox 1.5!');
         newImg.setAttribute('title','Upgrade to Firefox 1.5!');
         newImg.setAttribute('src','PATH_TO_BANNER');
      } else if (0 <= navigator.userAgent.indexOf('Firefox')) {
         change=1;
         newLink.setAttribute('href','YOUR_REFERRAL_LINK');
         newImg.setAttribute('alt','Spread Firefox!');
         newImg.setAttribute('title','Spread Firefox!');
         newImg.setAttribute('src','PATH_TO_BANNER');
      }
      if(change) {
         newLink.appendChild(newImg);
         var parentNode=linkNode.parentNode;
         parentNode.replaceChild(newLink,linkNode);
      }
   }
}

2. Use your regular Spread Firefox affiliate link and add a unique ID — let’s use id="FxLink" as an example — to the <a> tag.

3. Load the script in your document’s <head> section:
  <script type="text/javascript" src="sfxlinks.js">

4. Call the function in the body onload event using the ID you chose in step 2:
  <body onload="replaceFirefoxLink('FxLink')">

When the  page loads, the script will check the visitor’s browser to see if it’s an old version of Firefox or a current version of Firefox.  If it’s an old version, it’ll replace your standard button with your upgrade button.  If it’s a current version, it’ll replace it with a Spread Firefox button with your referral link.  Otherwise, it leaves the button alone.

This has a lot of advantages over the old version, including XHTML compatibility, no need for <noscript> blocks, easier validation, and it still degrades gracefully (if JS is unavailable or old, it leaves your normal button in place).

You can see it in action on my website, Flash: Those Who Ride the Lightning.

Originally posted on my Spread Firefox blog.

I thought I’d check my sites’ stats to see how quickly people are upgrading to Firefox 1.5. I’ve got a script I wrote a while back that totals hits by Firefox 0.x, 1.0.x, and now 1.5.x and shows the percentage of the latest version out of all Firefox hits.

I tried it on this month’s logs from the Alternative Browser Alliance first, since it’s a much smaller log file, and saw that Firefox 1.5 accounts for anywhere from 43% to 69% of Firefox users visiting the site on a given day. Then I checked it against Hyperborea, which gets a more mainstream audience, and found that only 15-24% of its Firefox hits were from users who have upgraded.

Sticking with the more mainstream site, I looked at some other statistics. While Firefox as a whole is doing quite well at 18.9% (plus another 1.4% for Netscape and 1.2% for Mozilla), there’s a shockingly large number of people still using Internet Explorer 5 for Windows. MSIE 5.0 and MSIE 5.5 are eachpulling 1%. That doesn’t sound like much, but there are more people on outdated versions of IE than any version of Netscape, and each IE version is pulling in more than all versions of Opera combined (0.9%). This, frankly, sucks. MSIE 6 is a free upgrade that will run on any system that can run ether 5.0 or 5.5, and is a significant improvement over either. IE6, Firefox, or Opera will all run on even obsolete versions of Windows—and there are more ofthose than you might think as well! (I’m seeing 4.8% of traffic coming from Windows 98—more even than Windows Me.)

Internet Explorer 6.0 came out in October 2001, so people have had four years to upgrade, and 2.7% of IE users still haven’t upgraded. Maybe they can’t, because IT has locked their systems down. Maybe they don’t know there’s both a newer version and a wealth of alternatives. Maybe they don’t think it’s worth changing. Even IE5/Mac has its adherents after Microsoft abandoned it in favor of Apple’s own Safari. And while some might disagree, we’re stuck developing for it.

Firefox should have a faster upgrade curve than IE, if Dave Shea’s pre-installed/downloadable split holds true and people who make the effort to add a browser still make more effort to upgrade it. (It seems to be holding for Opera, at least, since the majority of Opera users are already on 8.5 after only a few months.) But I still see hits from Firefox 0.8 and 0.9, and I’ve seen a lot of people with that red update icon in the toolbar.  I have to wonder if the mainstream acceptance of Firefox may have altered the patterns that held during the IE6 era.

I’m hoping uptake of Firefox 1.5 will go faster. Aside from getting people onto auto-updates, it brings new design possibilities with SVG, canvas, etc. But I know there are a lot of fire-and-forget admins out there, and a lot of everyday users who just installed it once and don’t see why they need to upgrade. It’ll be interesting to see how SFX’s new dual mission will go.

Originally posted on my Spread Firefox blog.

Or, yet another blog.*

Back when WordPress.com was announced—well, pre-announced, really—I signed up for info. Eventually I discovered it was going to be a blog hosting service. At that point it seemed kind of silly, since I already had too many blogs, so I didn’t immediately jump on the invite when I finally received it. I decided to pick it up after about two weeks, at which point I tried to log in and was told that the invitation expired in a week. Not that the email had said anything about an expiration.

So now, I’m trying out Flock, mainly to see what value it adds on top of Firefox. It picked up my Del.icio.us bookmarks fine, but for some reason the blogging tool just won’t connect to K-Squared Ramblings. It should work. It’s WordPress-based, after all. Maybe it only works with the 1.6 series (I’m waiting for a stable release before I upgrade), or maybe there’s some obscure setting—or maybe it’s just a bug in Flock. (Time to sign up for yet another Bugzilla account, too) Edit: I found the problem.

Well, WordPress.com and Flock have teamed up, so Flock users don’t need to wait for an invite or wait for the site to leave beta. And, miracle of miracles, not only did the invite expiration free up my reserved username, but no one else had taken it!

I honestly don’t know what, if anything, I’ll be doing with the blog, since I’ve got so much over at K²R and all my social stuff is at LiveJournal (when you’re extending a real-life circle of friends into cyberspace, you go where your friends go). I’m sure I’ll think of something to do there.

*This was originally posted at kelson.wordpress.com, but I moved it over here after turning that site into a photo blog.