Section 5.3. Counteracting Web Annoyances

5.3. Counteracting Web Annoyances

The Web is a wonder of humanity, providing us with deep reservoirs of knowledge, fun sources of amusement, and amazing ways to communicate with folks all over the world. Unfortunately, it can also be the equivalent of walking down some streets during Spring Break in a party town: annoying, obnoxious, and even dangerous. In this section, let's look at some extensions that, my buddy, Ben Jones, once put it, "restore some sanity back to the Web."

5.3.1. IE View

Firefox is a fantastic browser, and I hope you use it the vast majority of the time you're on the Web. However, you may still have to use Internet Explorer every once in a whilemaybe your bank requires it to do online banking, or perhaps some web developer has carelessly ignored common web standards and used proprietary code that needs IE to view it, or possibly your corporate intranet works only with IE. Things will hopefully get better over time, as Firefox and other standards-compliant web browsers gain market share and encourage developers to stick to the standards they should have been using all along, but for now, IE is still sometimes necessary. (Of course, Windows users can't get rid of IE anyway, since Microsoft has welded it into the operating system, but at least you can diminish its use.)

Oh, well

Not surprisingly, Microsoft requires Internet Explorer to access Windows Update. There's just no way around it.

IE View is an extension that helps alleviate the annoyance of hitting a web page in Firefox that requires Internet Explorer. To get IE View, go to Tools Extensions and click on Get More Extensions. When the Mozilla Update web site opens, go to the Miscellaneous section (or search) and find IE View. Select IE View, and then click on the Install Now link.

Let's test IE View on a page that doesn't require Internet Explorer, but will still illustrate how the extension works: http://www.mozilla.org. Point Firefox to that web site. Once it loads, right-click on a blank area of the page. One of the choices you'll see in the contextual menu is View This Page in IE. Select it, and IE should open with the Mozilla home page loaded. Bingo! It's really that easy to use IE View.

5.3.2. FlashBlock

Whenever the subject of Macromedia Flash comes up on any of the various web developers' discussion lists I'm a part of, it seems that I end up in a flame war sooner rather than later. A lot of web developers have learned (I won't say "mastered," since that would be a false statement) Flash, and they want to use the shiny new tool in their tool belts as often as possible.

Oh, I'm sure you've seen the results on the various web pages you visit: overblown web site "intros" that people skip as fast as they can, confusing navigation schemes that are pretty to look at but impossible to actually use, and, of course, ads. Colorful, animated, annoying ads, calculated to distract you in every possible way as you're trying to actually read the content on a web page. Las Vegas in a web browser, here we come.

Now, just to stem the flood of angry emails I'm sure to get, let me make this clear: I'm not reflexively anti-Flash. Flash is a tool, and like all tools it has its place. Unfortunately, web designers too often misuse Flash ("too often" = 98% of the time), and it's that misuse that I'm protesting. For every great use of Flash, there are too many (for the meaning of "too many," see "too often" above) annoying uses of Flash that I just don't want to see or "experience."

Cool Flash

Here are some great uses of Flash that you might want to check out. Keep in mind that the Web changes often, so some of these might not be there now:

http://www.angryalien.com

"The Exorcist in 30 seconds, re-enacted by bunnies" and its many sequels, including "The Shining in 30 seconds, re-enacted by bunnies" and "Alien in 30 seconds, re-enacted by bunnies" (sensing a pattern here?).

http://www.trevorvanmeter.com/flyguy/

The always wonderful FlyGuy is a surrealistic dream, a game, and a meditation on life. Do all you can to get to the end, and dance all night.

http://www.nba.com/history/timeline.html

The perfect use for Flash: dynamic timelines. Follow the history of the National Basketball Association, from the 1940s to the present.

http://www.adgame-wonderland.de/type/bayeux.php

Using images of a tapestry created in 1077 as its base, you can create your own medieval comic strip. Brilliant.

http://randomfoo.net/oscon/2002/lessig/

Lawrence Lessig is the leading scholar and activist in the area of intellectual property reform in the U.S., and this is one of his best speeches. Flash enhances the speech in incredible ways. Do your duty and watch.

The FlashBlock extension gives me the best of both worlds: it automatically blocks Flash animations (as well as animations in the Shockwave and Authorware formats, also owned by Macromedia), but it enables me to view a Flash animation that looks interesting with just one click. Install this extension, and you can bring some sanity back to your web-browsing experience.

Nothing to block?

Of course, for FlashBlock to work, you need Flash installed on your computer. If you haven't installed Flash and don't intend to (or are a die-hard Flash fan and never want to turn it off), feel free to skip to the next section.

To start the installation process, head over to http://flashblock.mozdev.org and click the Installation link. Select the version of FlashBlock for Firefox, add flashblock.mozdev.org to the list of sites that can install software, and finally press Install Now in the dialog box that asks if you really want to install this software.

Preserve your customizations

FlashBlock will back up your current userContent.css file (discussed later in this chapter) in your Firefox chrome directory as userContent-flashblock-backup.css and create a new userContent.css file. If you have never edited userContent.css, don't worry about it; if you have, you will need to restore your changes in the new userContent.css file. If you have no idea what I'm talking about, you probably haven't edited it.

After a few seconds, another dialog box will open, informing you that FlashBlock is installed and that you should restart Firefox. Press OK, and then close and reopen Firefox. Annoyingly (but it's only a one-time annoyance), you have to restart Firefox a second time to complete the installation of FlashBlock, so immediately close and reopen it again.

Now that Firefox is back up, you can test the FlashBlock extension by heading over to the mothershipMacromedia itself, at http://www.macromedia.comas shown in [click here].

If everything is working, you shouldn't see any Flash at all; instead, you should see boxes where the Flash animations would be, with the stylized "f" logo Macromedia uses for Flash. Move your mouse over that f, and the icon changes to the universal "Play" icon. Click anywhere in that box, and the Flash animation loads and starts working. Pretty cool, huh?

Click to play

FlashBlock doesn't remember which Flash animations you like and which you don't like, so every time you go to a web site that has a Flash animation that you want to view, you're going to have to click the Play icon. I don't find that limitation to be a big deal, but you should know about it.

5.3.3. Adblock

I find that the explosion of advertising on the Web in the past five years has really made it difficult to read the content on many web sites. The idea behind advertising is to grab your attention, but a lot of times my attention is so distracted by the ads that I can't focus properly on the site's content. The FlashBlock extension helps negate that problem, but only if the ads are using Flash for their display. What about graphical ads that don't use Flash? Adblock to the rescue.

To install Adblock, select Tools Extensions and click on Get More Extensions. A new Firefox window will open, at the official Mozilla Update web site. Select the Miscellaneous category (or search), and on the resulting page, select Adblock. On the Adblock page, click Install Now. After installing, restart Firefox. If you want to go directly to Adblock's web page, head to http://addons.update.mozilla.org/extensions/moreinfo.php?id=10.

Not that there's anything wrong with that

It's not that I hate all ads. I'm fully aware that some sites get part or all of their revenue through the sale of ads, and I respect that. However, in the same way that I believe consumers have a right to use TiVo and other personal video recorders (PVRs) to skip the television ads that we find annoying or ineffective, I believe we have the right to block web site ads that we find annoying or ineffective. Notice the overwhelming success of Google's ad model: text-only ads that are relevant to your search keywords, or to the web sites you visit. Google's model makes sense, actually matches the users' interests, and isn't annoying, so I support it completely. For everything else, there's Adblock.

Adblock offers a couple of preferences that you'll probably want to set, since they'll improve your experience with this wonderful little tool. To configure Adblock, choose Tools Adblock Preferences, and then press the Options button. You should see something like [click here].

The one preference that I would immediately check is Keep List Sorted. Over time you're going to accumulate quite a long listmine is over 200 lines and growingand you may eventually want to find an entry, either to edit it or to remove it because you've made a mistake. Having the list sorted will make that task a lot easier.

Collapse Blocked Elements can be a handy setting, but you should be aware that it could change the display of web pages containing blocked ads. If the ad is contained in an HTML paragraph, for instance, Adblock will remove the entire element, and the text may reflow upward to fill in that space. It's not really a big deal, and I actually like how Adblock tightens up pages, but you should be aware of the potential.

If you have more than one machine, or you want to help friends who have just started using Adblock, you might be interested in "Import filters" and "Export filters." I use my laptop Homer most of the time, so my Adblock file on that machine is pretty extensive. However, my desktop Dante's Adblock file is sadly anemic, since I don't use the machine as much. To help bring Dante to parity with Homer, I just choose "Export filters" on Homer, save the file as adblock_filters.txt, copy it from Homer to Dante, and choose "Import filters" on Dante. In just a few seconds, I have both machines blocking the same ads. Thank you, Adblock!

To see how Adblock works, check out my favorite web site for viewing and blocking gaudy, hideous banner ads: http://www.gambling.com. (No, dear readers, this isn't a site I frequent oftenbut if you're looking for a vast overabundance of flashing, beat-you-over-the-head banners, it's tough to beat!) Take a look at Figure 5-9if you dare!

Head to the site and gasp in amazement at the grotesque profusion of banner ads, the Web's equivalent of the mating of New York City's Times Square and the Las Vegas Strip. Aaaagh...I can't take it any longerlet's get those puppies blocked!

Right-click on the top banner ad on the page and choose Adblock Image. When you do, a dialog box will open displaying the URL for the banner image. At the time of this writing, that URL is http://banners5.gambling.com/banner/files/468x60-2ACF1CDF.gif. You could just hit OK at this point and block the ad served from this URL, but that wouldn't be very efficient, since you'd only be blocking that one ad. All the others would still show up, so you'd have to right-click on each one, choose Adblock Image, and then press OK. Too much work for us lazy web users, eh?

Fortunately Adblock supports wildcards, including the friend of every computer user, the asterisk (*). The * wildcard matches any character or characters, so it's both wonderful and dangerous. Be careful when you use it.

You can use the * wildcard to turn a long, overly specific URL such as http://banners6.gambling.com/banner/files/468x60vcountry2ACF201F.gif into more of a catch-all: http://banners6.gambling.com/banner/*. Now you're blocking all banners on the site. That's good, but you can do one better. Using the previous URL blocks banners from banners6.gambling.com, but gambling.com uses more than one server, so this is even better: http://banners*.gambling.com/banner/*. No matter what server you hit on Gambling.com in the future, you won't see any banner ads, and that's very, very good news.

Express yourself

If you know regular expressions, you can use those as well. They're quite a bit more complicated to use than the * wildcard, but they're also a heck of a lot more powerful. If you want to learn more about regular expressions, check out Mastering Regular Expressions, by Jeffrey Friedl (O'Reilly).

Figure 5-10 shows that changes at Gambling.com are immediately apparent after just a few clicks with Adblock.

Not so loud

Sadly, Gambling.com has dumped the profusion of banner ads and is now a barebones, even boring, site. Ah wellthe old, grotesquely, gaudy one lives on in this book.

After you use Adblock for just a few weeks, you'll find that you see hardly any obnoxious ads on the Web. Peace and quiet will be restored, and you'll be able to actually read the content on the sites you visit without distractions and annoyances.

Adblock Wildcard Examples

Here are some other examples using the * wildcard from my own Adblock file. Remember, my Adblock file may not be right for you, so just use these as guidelines:

http://*.doubleclick.net/*

http://*/RealMedia/ads/*

http://ads.vnuemedia.com/*

http://ar.atwola.com/*

http://content.ad-flow.com/ad-flow/*

http://graphics*.nytimes.com/ads/*

http://images.usatoday.com/sponsors/*

http://oz.valueclick.com/*

http://sp*.atdmt.com/*

http://ttarget.adbureau.net/*

http://us.a1.yimg.com/us.yimg.com/a/*

5.3.4. NukeAnything

Most people are familiar with the idea of a "printer-friendly" link or button on a web page that opens up a new page or window containing a plain version of the web page, without ads or extraneous graphics. Unfortunately, however, many web sites don't contain printer-friendly links, and some web sites' so-called printer-friendly pages still contain ads or unnecessary images, which is tremendously irritating. NukeAnything helps you get around that issue, so you use less printer toner and end up with pages that are easier to read.

If you've been following along, you know what to do: go to Tools Extensions, click Get More Extensions, go to the Miscellaneous section on Mozilla Update, find and install NukeAnything, and restart Firefox. Now let's nuke some annoyances!

MIT's Technology Review is a great magazine with fascinating content, and I am grateful that many of the articles are available online. Recently it published an interview with Tim Berners-Lee, the inventor of the World Wide Web, at http://www.technologyreview.com/articles/04/10/frauenfelder1004.asp. That page is very busy, with sidebars, ads, pictures, and, of course, text. Fortunately, there's an icon at the top of the page labeled Print Version. Click it, and you get the page seen in [click here].

I'm sorry, but that is not a printer-friendly page. Three enormous ads (there's a third one further down, in the middle of the text)? And a large graphical logo? I should bill them for all the toner I'm using printing their so-called printer-friendly web page. Fortunately, I can use NukeAnything to get this page into the state it should have been in in the first place.

Right-click on the ad at the top of the page, and you should see a new entry in the contextual menu: "Remove this object." Choose it, and poof! The ad is gone. Do the same to get rid of the ad on the righthand side of the web page, then scroll down and nuke the ad in the middle of the text. Poof! Poof! Ahhhh. Now you have the page shown in [click here].

I'd probably also get rid of the graphical logo, but even with it in, this is a real printer-friendly web page. NukeAnything, however, is not just for printing. You can use the extension to get rid of any annoyance, even if it's just to make a web page easier to read online. In fact, you can drag to highlight part of a page, right-click, and select "Remove selection" from the context menu. Nice.

Your own private nuke

Of course, you're not actually affecting the web page on its server; you're just changing the local copy of the web page that's on your computer. So feel free to nuke anything you wantno one else is going to see your changes.

NukeAnything does a great job of getting rid of things, but you do need to be aware of one issue: you may nuke more than you planned. For example, you may think you're getting rid of an image, or even a column containing an ad, but then find that you've accidentally deleted all of the text on the page! This isn't a big dealjust reload the web page by pressing the Reload button, typing Ctrl+R on your keyboard, or choosing View Reload, and then start nuking again (more carefully!). An undo feature for NukeAnything would be nice, but it's not essential since you can always reload the page.

5.3.5. TextZoom

As folks grow older, the eyes are often the first things to go, as I can attest. Consequently, the Web becomes impossible to use, due to the small size of many fonts on web pages. You can increase the font size temporarily in Firefox by going to View Text Size Increase, but when you restart the browser, the font settings will go back to the default. You can also change the default font size by choosing Tools Options, selecting General, then clicking the Fonts & Colors button. In the Fonts & Colors window, change "Minimum font size" to a number you're comfortable with. However, the problem with this approach is that you can only select a font size in pixels (from 9 to 24), which is not always the best choice, since it's rigid.

TextZoom solves the problem of teeny fonts and also gives you greater flexibility than a hardcoded pixel size. To install it, select Tools Extensions, click Get More Extensions, go to the Miscellaneous section of Mozilla Update, and then find and install TextZoom. Restart Firefox, and you can make your text readable.

Configuring TextZoom couldn't be easier. Choose Tools Extensions, select TextZoom, then click Options. As you can see in [click here], you have two choices: use the default size of 100% or use a custom zoom based on a percentage you enter.

This is where TextZoom's flexibility comes in. Instead of a limited number of exact pixel sizes, you have the full range of percentage increments from which to choose. Select the radio button next to "Use custom zoom" and enter a percentage value that makes sense to you. Press OK and then cruise over to a couple of web pages that have been problematic. If they're readable, you're all set; if not, repeat the process and bump up the percentage until you're happy.

My eyes thank you, TextZoom!