Confessions of a Web Developer

I've mostly been away from this site since June, but I'm following the news... and I've downloaded and played around with the new Opera 9.5 preview. Over at K² Ramblings, I've posted my First Thoughts on Opera 9.5.

So, Apple just dropped a bombshell: the Safari web browser is now available for Windows. I've posted some general reactions at K-Squared Ramblings as to how it will benefit web developers and users overall. The most obvious is that Windows-only web designers will no longer have an excuse for not testing in Safari, which might help break the two-browser mindset.

But what about Opera, specifically?

I remember when Apple first announced Safari for the Mac, Opera was very upset that Apple had decided to go their own way instead of licensing Opera as the new default browser. In retrospect, both sides were right: Apple was right to choose something that they could maintain themselves, without being dependent on an outside provider. (I guess they'd learned their lesson from Internet Explorer.) Opera was right that they lost a golden opportunity: as the default browser on MacOS, Safari has since become the most-used browser on that platform and the third-most-used browser overall, surpassing Opera's marketshare.

So there's certainly a risk that Safari on Windows could surpass Opera's users. However, there is one significant difference: Safari is not the default browser on Windows. It's hard to tell how much of Safari's uptake on MacOS is due to it being the default, and how much is due to people actively liking it. Personally, I have Opera, Firefox, and a half-dozen other browsers on my PowerBook, but when I fire that box up, I generally use Safari.

If you look at the functionality available in a base install, from simplest to most complex, it probably starts with Safari, runs through Firefox and IE, then finishes with Opera. Firefox has a wide array of extensions available -- in fact, it's pretty much known for them. Safari isn't nearly as extensible. You can't install something that will add mouse gestures, for instance.

I suspect that, at least at first, the audience for Safari on Windows will consist mainly of the following groups:

• Web Developers
  
• Dual-platform users who are used to Safari on Mac
  
• People who just want a basic browser and don't want bells and whistles, but don't want IE for some reason
  

If anything, I think Firefox has more to worry about than Opera. For every Firefox user who tricks out his browser with every 1337 extension he can find, there are probably many who just wanted something more stable than IE, or faster than IE. There's a vocal faction of Firefox users who are frustrated with its performance. I don't know why they haven't jumped ship to Opera, but depending on how much memory Safari uses when it gets out of beta, it might prove a threat on that front.

Further reading:

• K-Squared Ramblings: Safari on Windows
  
• Alternative Browser Alliance: Why Alternative Browsers?
  
• Opera Watch: Safari coming to Windows
  
• Opera Forums: Safari for Windows
  

After a couple of weeks on Opera 9.20, I've come to the following conclusions about Speed Dial:

1. I can't stand the portal-like page that loads when I open a new tab. It's slower than a blank page, it's slower than opening my bare-bones home page, and it makes it tricky to open a new page and middle-click on an empty area to paste in a URL from another app because it's too easy to click on one of the thumbnails and open one of the speed dial pages instead. (It's a Unix thing -- middle-click usually pastes the current selection, and if you paste to a web page area, most browsers will try to load it as a URL.)

2. I love being able to hit Ctrl+1, etc. to quickly load those pages.

Once upon a time, wasn't there an option to choose what would load in a new tab/page?

From time to time the idea is put forth that Opera needs to start dealing with bad code. There are two problems with that view:

1. Opera already deals with quite a bit of "bad code" (but there's always room for improvement)
   
2. Just dealing with bad code isn't enough: you have to deal with it the same way someone else does.
   

#2 is the tough part.

The rules for dealing with good code are, for the most part, specific. If you encounter well-formed HTML, you can be reasonably sure you know what the author meant. But there are very few rules for dealing with bad code. Trying to "deal with it" means trying to guess what the author meant, and sometimes different assumptions are equally as likely.

Example:

<p><b>Here's some text</i> and here's some more.</p>

Did the author close the non-existent italics by mistake, meaning to close the bold? Or did he open bold by mistake, intending to open italics? Or is the closing italics tag left over from copy-and-paste? Depending on what assumptions the browser makes, it should display it as:

Here's some text and here's some more.

Here's some text and here's some more.

Here's some text and here's some more.

And that's just a simple example. It gets wilder when you throw in issues like inline vs. block elements. A paragraph should never appear inside a tag for text formatting, like bold or italic. By all rights, starting a new paragraph (or more precisely, ending the previous one) should also revert to plain formatting. But a lot of old pages expect the formatting to continue into the next paragraph, because way back when, a P tag was a double-line break, not a container.

Now, suppose that Browser A always makes the first assumption, and Browser B always makes the second. If someone tests their code in Browser A, and it happens to be what they want it to do, they won't necessarily notice that their code is broken. The result: the site looks wrong in Browser B, and the page author -- who thinks the page is fine, since he tested it in Browser A -- blames Browser B.

Multiply that scenario by millions of pages and you have a large chunk of the web as we know it today.

So the solution isn't just to "handle bad code." It's to handle that bad code in the same way that the dominant browser handles it. And since there's no document you can look to for guidance, that means taking every possible chunk of bad code, running it through the other browser, and seeing what it does to it.

And there are a lot of ways to break code!

Even Microsoft did this back when IE was new. At the time, lots of people were writing broken code and testing it by seeing whether it looked right in Netscape. So IE had to make the same assumptions Netscape did on certain things. Once IE became established, they diverged.

Some relevant articles:

• The Residual Style Problem (Surfin' Safari)
  
• Tag Soup: How UAs handle <x> <y> </x> </y> (Hixie's Natural Log)
  
• XML Error Handling in Web Browsers (Surfin' Safari, mostly about HTML error handling)
  

I plan on refining this post from time to time.

Want to put an Opera banner on your site, but don't know HTML? Here's how to add an Opera button to any WordPress.com or WordPress-powered blog.

Update: I realized there's a much easier way to do this using sidebar widgets.

1. Log into your WordPress account and go to the admin page.
   
2. Go to Blogroll (wordpress.com) or Links (WordPress 2 or earlier)
   
3. Click on Add Link
   
4. Enter "Opera Web Browser" (or something similar) for the Name ("Link Name" in WP2)
   
5. Enter http://www.opera.com/ for the Address ("URI" in WP2)*
   
6. Click on the + in the Advanced bar so that you can see the Image Address field. (Or just scroll down in WP2)
   
7. Open a new tab and open Choose Opera: Banners and Buttons
   
8. Right-click on the banner you want and choose Copy image address
   
9. Go back to your WordPress admin tab and paste that into Image Address ("Image URI" in WP2)
   
10. Click on the Add Link button.
    

That's it!

Note: Depending on your theme, it may show only the text link. I've found that on WordPress.com, the default sidebar will only show the text, but if you go to Presentation / Sidebar Widgets and drag the Links widget onto the sidebar, it will show the button.

*Advanced Option: Log into your account on the My Opera Community first. At the top of the Banners and Buttons page, you'll see something like this:

Link to us using your affiliate url: http://my.opera.com/YOUR_NAME_HERE/affiliate/

Copy and that URL and use it instead of http://www.opera.com/ in the Address field. This will get you affiliate points, which you can keep track of on your My Opera preferences page...though I'm not sure if the points are actually used for anything.

There's a lot of misinformation out there about various browsers. Opera can/can't do this. Firefox can/can't do that. There's only so much you can do to promote one product when you only know rumors or outdated facts about another.

If someone told you that Firefox was better than Opera because it doesn't have ads, you wouldn't take them seriously. You'd know the ads have been gone since last year, and you'd wonder what else they have wrong. Similarly, you won't convince a Firefox user that Opera is better because you can reorder tabs (you can, starting in Firefox 1.5). And you won't convince an IE fan that Opera is better because of tabs and a built-in search box because they'll tell you that IE7 has both.

When you're trying to convince someone that X is better than Y, and they know Y very well, you'd better know Y well enough not to make statements that the other person knows are false. When you do, you'll lose credibility, and the rest of your argument -- the part you do know well -- will suffer for it. (I suspect a lot of software flame wars get started this way!)

So here's my suggestion: If you want to promote Opera, go and download Firefox 1.5 and (if your OS will run it) the IE7 beta. If you're on a Mac, fire up Safari. Mess around with them enough that you're familiar with how they work, what you can do with them, and how they handle your favorite web pages. That way the next time you face an IE fan (to the extent that IE has fans), or a Firefox fan, or a Safari fan, you'll be armed with accurate information.

As for the post title -- I don't think it's necessary for the major browsers to be enemies. I think there's plenty of room for cordial competition rather than a cutthroat struggle. But "Know Your Enemy" is a better attention-getter than "Familiarize yourself with the competition."

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.