Eolas is at it again

Eolas Technologies is a company that manages licensing for patents.

Eolas seeks to return value to its shareholders by commercializing these technologies through strategic alliances, licensing and spin offs. (source)

The problem is that Eolas is generally regarded as a bully trying to enforce a patent (Patent 5,838,906) that many experts feel should not have been issued.

The 906 patent, received in 1998 by the University and licensed exclusively to Eolas, describes ways that a Web browser can use external applications. (source)

(The US Patent and Trademark Office has made notoriously bad decisions relating to Internet technologies, causing many to wonder if they truly even understand the patents they’ve granted. Blackboard vs Desire2Learn is a great example; Blackboard acted much like Eolas, and their patents were eventually nullified by the PTO.)

Eolas sued Microsoft in 1999 for violating Patent 5,838,906, and in a rare show of solidarity, the Web and Open Source communities — normally very anti-Microsoft groups — rallied to Microsoft’s side. This included Sir Tim Berners-Lee, the founder of the Internet. They pleaded with Eolas to release the patent into public domain for the greater good of the global community.

Anybody in the browser field that studies the technology will see that its a very fundamental and basic patent to the World Wide Web. (source)

Despite the overwhelming negative response from the Web and Open Source communities, Eolas would not relent and forced Microsoft to modify Internet Explorer in a way that broke functionality on over hundreds of millions of web pages. Microsoft eventually forked over tens of millions of dollars in a settlement that allowed them to restore the functionality they had been forced to remove.

Other companies and products have used the same technology for years without paying royalties — Mozilla Firefox and Opera being the most well-known — but were not sued by Eolas, who chose to focus on the deep-pocketed Microsoft. (An initial jury verdict in 2003 awarded Eolas $521 million, but an undisclosed settlement was reached in 2007 after the case went through several appeals.)

This week — a year and a half after settling with Microsoft — Eolas has gone on the attack again, filing suit against “Adobe, Amazon, Apple, Argosy Publishing (publisher of The Visible Body), Blockbuster, Citigroup, eBay, Frito-Lay, GoDaddy, J. C. Penney, JPMorgan Chase, ‘transactional’ adult entertainment provider New Frontier Media, Office Depot, Perot Systems, Playboy Enterprises, Rent-a-Center, Staples, Sun Microsystems, Texas Instruments, Yahoo, and YouTube.” (article)

For the record, Eolas was founded by former University of California, San Francisco (UCSF) staff, and the patent they’re suing others for violating was developed at UCSF in the 90s. http://en.wikipedia.org/wiki/Eolas

I work at UCSF and am ashamed of these lawsuits.

The University of California owns Patent 5,838,906 and has licensed it to Eolas. The Regents of University of California are therefore the driving force behind Eolas’ behavior. By extension, UC is a driving force behind one of the biggest and most unpopular disruptions the Internet has known. If UC is really interested in public interests and good will — not to mention good publicity — I hope Patent 5,838,906 will be released into the public domain.

On a side note, knowing the University of California is being hit hard with budget cuts, I wonder if this latest blitz of lawsuits is an attempt at making up for budget shortfalls?

Changes to pipwerks.com

Just a quick note: I’m renovating this site to make better use of WordPress’ capabilities.

The current version of pipwerks.com is mostly traditional HTML with WordPress being used for the Journal entries; the new version of the site will be almost exclusively WordPress-powered.

Because of the move to WordPress, many of my static HTML files will be converted to WordPress ‘pages’; this means you may see some odd posts in my RSS feed from time to time. Feel free to ignore them.

Why WordPress? A number of reasons, including:

  • easy ‘themability’
  • enabling users to post comments on normal pages, not just blog entries (this will be especially useful for gathering feedback about my lab work with SCORM and Captivate)
  • statistics tracking
  • ease-of-updates for pages (browser-based editing means no more Dreamweaver and FTP)
  • WordPress’ extensibility via plugins and widgets
  • Search engine friendliness
  • Automated linking of content via tags and categories can help visitors find related content more easily

I’ll still be using plain HTML for code examples and demonstrations, but that’s about it.

I have a few tricks up my sleeve and hope to try them out soon. In the meantime, I’ll just mention that my new theme (which hasn’t been activated yet) is HTML 5-based and uses a bunch of CSS trickery. Geeky fun for all. 😉

Why so quiet lately?

If you’re a regular reader of this blog, you may have noticed that it has been very quiet lately. Rest assured there are a number of blog entries waiting in the wings — I’ve simply been too busy to write them. I promise I will get to them soon(ish). In the meantime, I invite you to join me on twitter.

The pipwerks forum is dead, long live the new eLearning Technology and Development Google Group!

A year ago this week, I launched the not-for-profit and ad-free pipwerks E-Learning Development Forum. It was mostly intended to be a way for me to answer questions about some of my projects, such as the SCORM API wrapper, SCORM ActionScript classes, and my many Captivate hacks. The forum wasn’t a vanity project so much as an attempt to avoid email… I’d rather post answers online where everyone can see them than reply to individual emails. I had also hoped other people in the e-learning community would get involved and ask/answer questions beyond the scope of my pipwerks projects.

Now that a year has passed, I decided to step back and evaluate the success of the forum. The numbers aren’t bad: over 200 members, over 550 posts. Of course, it isn’t about the numbers, but about helping people; I’d like to think that most of those 200 people found the answers they were looking for. This is great, and makes me happy. If I helped even one person, the forum can be considered a success.

However, I also noticed a considerable lack of participation from others. Aside from a few helpful folks, I wound up answering most of the questions myself. This means it wasn’t so much a forum as an “Ask Philip” column. Not exactly what I had in mind.

When combined with the effort it takes to maintain a website (security patches, compatibility issues, styling, etc.), the forum started to feel more like a weight on my shoulders than anything else. So, as of today, I have closed down the forum and moved over to a Google Group: the eLearning Technology and Development group.

I’ve been using Google Groups for over a year with the SWFObject Google Group and Aaron Silvers’ Flash For Learning Google Group (no longer online). It isn’t a perfect system, but I’ve learned to enjoy its simplicity. It’s also free and relieves me of administrative hassles such as applying updates and backing up data. Sweet. Plus you can use Google Groups via email, which means you never even need to visit the site. Bonus.

I’d like to say thank you to all the people who posted in the pipwerks forum, and invite you to join me in the new eLearning Technology and Development group.

I’d also like to ask anyone and everyone who develops e-learning to drop by and sign up for the eLearning Technology and Development group. Ask questions — lots of questions — and let’s see if we can get a good community going!

PS: If you’re wondering why I bothered creating a new group considering there are many other discussions groups/forums out there, the answer is simple: no product favoritism and no advertising. Product forums by vendors such as Adobe and Articulate are focused solely on their products, while bulletin boards by organizations such as the eLearning Guild tend to have a ton of ads and a focus on their events and sponsors. I’d like less clutter in my life, and a simple Google Group (even with the AdSense ads) is a nice clean way to handle discussions. Hope you agree!

Image-Free Progress Bar using MooTools and Canvas

As part of my ongoing experiments with <canvas>, I decided to convert an image-based progress bar to an image-free canvas-based system. I just finished whipping up a proof-of-concept; it uses MooTools to generate the canvas and CSS code. No images were harmed in the making of this progress bar.

More info later (time permitting)

Hawaiian diacriticals

For those of you who haven’t had the pleasure of encountering the Hawaiian language, it’s a very simple but elegant language.  The written form is largely phonetic (cooked up by American missionaries in the 1800s) and makes use of two diacritical marks: the ‘okina, and the macron (also known as the kahako).

An ‘okina usually indicates a glottal stop, which is very important in the pronunciation of Hawaiian words.  The name Hawai‘i is a great example: the ‘okina indicates the name is pronounced hahwhy-ee instead of hahwhy. When you hear a native pronounce the name, there’s usually a very short hard pause between the why and ee syllables.

Unfortunately, the two Hawaiian diacriticals are not used by European languages, which means they’re difficult to accurately represent on a standard US qwerty keyboard. In most printed publications, the authors simply omit the diacriticals altogether — the very reason you usually see the name Hawaii, and not Hawai‘i.

Over the last decade, there has been an attempt by many well-meaning locals (Hawaiian and non-Hawaiian) to use substitute characters when true diacriticals aren’t available. While macrons are usually omitted (they don’t exist in most font sets), the ‘okina is often represented by a foot mark (‘), sometimes (mistakenly) referred to as a straight or neutral single quote mark.

An 'okina. Credit: Wikipedia (http://en.wikipedia.org/wiki/File:Hawaiian_okipona.png) This brings me to one of my pet peeves and the purpose of this post:  misuse of the backtick (`) character. Many of the previously-mentioned well-intentioned folks mistakenly use a backtick to represent an ‘okina, and it drives me absolutely bonkers.

As I mentioned to a friend of mine recently, a proper ‘okina is usually the same as left single quotation mark (‘), depending on the font. The shape of the ‘okina should loosely resemble the number 6. In HTML you can get this character by typing the entity &lsquo;.

Granted, using entities is a pain for most people, and practically impossible in email and other electronic documents.  Substitutions will continue to be made.  I believe a foot mark (‘) is a more accurate depiction of an ‘okina than the backtick (`). It’s also easier to type and looks nicer.

Fixed-width layouts

While working on a recent web project at work, I wondered if I should go for a fixed-width layout or stick with my preference for fluid layouts. Fixed-width layouts are certainly easier to manage, but they just feel so… rigid. With the boom in larger monitors, I also wondered if fluid sites start presenting a problem due to being too wide. I decided to check around the web to see what others are doing.

The search

In my (very quick and unscientific) research, I visited 150 popular sites, including news sites, shopping sites, software company sites, and the personal sites of well-regarded web designers and developers. I purposely avoided blogs that use canned themes.

When visiting the site, I determined the page’s width by reducing the browser window’s width until the horizontal scrollbar appeared. In some cases, I didn’t use the front page of the site, as these are sometimes standalone pages that use a completely different layout than the site’s actual content.

The results

Of the 150 sites I visited, only thirteen used fluid layouts — a whopping 8.6%.

A number of those thirteen sites weren’t completely fluid, as they either break at smaller sizes or have fixed-width sidebars, but I included them in the list since they aren’t using a fixed-width wrapper.

I was genuinely surprised about the number of fixed-width sites; a sizable chunk of these sites belong to (or were designed by) well-known web design gurus. I had assumed a number of them would use some sort of min-width/max-width CSS trickery, but I was wrong — only a very few sites (less than 3.5%) used this approach.

I was also surprised to see that the vast majority of the fixed-width sites were between 900 and 1000 pixels wide, a size that was unthinkable a mere 5 years ago.

Observations

  • Most of the fixed-width sites fell between 900 and 1000 pixels wide, and were usually centered in the browser
  • 20 sites were 800 pixels wide or less
  • 14 sites were between 800 and 900 pixels wide
  • 100 sites were between 900 and 1050 pixels wide
  • 3 sites were over 1050 pixels wide
  • the widest site was time.com at over 1100 pixels, although the layout uses a fixed-width wrapper wider than the content itself (the content was closer to 1000 pixels).

Sites visited

I picked sites somewhat randomly, using a combination of Alexa.com rankings, sites I frequent, sites my co-workers like to visit (hello, www.bebe.com), sites belonging to famous companies (McDonalds, Target, etc.) and sites belonging to well-known web designers and developers. I know I left out a number of good sites, but this was a very quick-and-dirty project.

Fluid layouts

  1. allinthehead.com (Drew McClellan)
  2. clearleft.com
  3. craigslist.org
  4. danwebb.net
  5. dean.edwards.name
  6. drupal.org (partially broken due to floating elements overlaying other elements)
  7. gmail.com
  8. htmldog.com (Patrick Griffiths)
  9. joeclark.org
  10. meyerweb.com (Eric Meyer)
  11. molly.com (Molly Holzschlag)
  12. people.opera.com/howcome (HÃ¥kon Wium Lie)
  13. wikipedia.org

Fixed-width layouts

  1. 24ways.org
  2. 37signals.com
  3. 456bereastreet.com (Roger Johansson)
  4. about.com
  5. adactio.com (Jeremy Keith)
  6. adobe.com
  7. alexa.com
  8. alistapart.com
  9. amazon.com
  10. americanexpress.com
  11. andybudd.com
  12. anthropologie.com
  13. aol.com
  14. apartmenttherapy.com
  15. apple.com
  16. authenticjobs.com
  17. bankofamerica.com
  18. barackobama.com
  19. barnesandnoble.com
  20. bbc.co.uk
  21. bebe.com
  22. bestbuy.com
  23. blogger.com
  24. borders.com
  25. boxofchocolates.ca (Derek Featherstone)
  26. burgerking.com
  27. cameronmoll.com
  28. cartoonnetwork.com
  29. cbs.com
  30. chase.com
  31. clagnut.com (Richard Rutter)
  32. cnet.com
  33. cnn.com
  34. comcast.com
  35. comcast.net
  36. crateandbarrel.com
  37. danbenjamin.com
  38. dean.edwards.name
  39. dell.com
  40. deviantart.com
  41. dictionary.com
  42. digg.com
  43. directv.com
  44. dojotoolkit.com
  45. dustindiaz.com
  46. ebay.com
  47. espn.com (MLB page)
  48. facebook.com
  49. fastcompany.com
  50. fedex.com
  51. flickr.com
  52. fox.com
  53. friendster.com
  54. gamespot.com
  55. go.com
  56. guardian.co.uk
  57. guitarhero.com
  58. happycog.com
  59. haveamint.com
  60. hicksdesign.co.uk
  61. home.live.com
  62. hulu.com
  63. iht.com
  64. ikea.com
  65. imdb.org
  66. jasonsantamaria.com
  67. jeffcroft.com
  68. jetblue.com
  69. jquery.com
  70. kaiserpermanente.com
  71. latimes.com
  72. linkedin.com
  73. livejournal.com
  74. m-w.com
  75. macys.com
  76. markboulton.com
  77. mcdonalds.com
  78. mediatemple.net
  79. mezzoblue.com (Dave Shea)
  80. microsoft.com
  81. mootools.net
  82. mozilla.com
  83. msn.com
  84. myspace.com
  85. nbc.com
  86. neopets.com
  87. netflix.com
  88. newegg.com
  89. nfl.com
  90. ning.com
  91. nintendo.com
  92. npr.org
  93. nytimes.com
  94. opera.com
  95. oreilly.com
  96. paypal.com
  97. pbs.org
  98. quirksmode.com (Peter-Paul Koch)
  99. reuters.com
  100. rockband.com
  101. rollingstone.com
  102. secondlife.com
  103. sfgate.com
  104. shauninman.com
  105. si.com (MLB page)
  106. simonwillison.net
  107. simplebits.com (Dan Cederholm)
  108. sitepoint.com
  109. skype.com
  110. snook.ca (Jonathan Snook)
  111. sony.com
  112. stuffandnonsense.co.uk (Andy Clarke)
  113. target.com
  114. techcrunch.com
  115. theonion.com
  116. time.com
  117. tivo.com
  118. twitter.com
  119. typepad.com
  120. ups.com
  121. urbanoutfitters.com
  122. usaa.com
  123. usps.com
  124. veerle.duoh.com (Veerle Pieters)
  125. virgin.com
  126. wait-til-i.com (Christian Heilmann)
  127. wamu.com
  128. washingtonpost.com
  129. weather.com
  130. wellsfargo.com
  131. whitehouse.gov
  132. williamssonoma.com
  133. wordpress.com
  134. yahoo.com
  135. yelp.com
  136. youtube.com
  137. zeldman.com (Jeffrey Zeldman)

Importing contacts into Gmail

I recently tried to import contacts into Gmail and encountered the cryptic (and completely useless) error message “Oops. An unknown error occurred while importing your contacts”.

Turns out Gmail chokes if it encounters a duplicate email address during the contact import process. It also appears this error only occurs with the latest version of Gmail. Therefore, a nice and easy workaround is to switch to the “Older version” of Gmail by clicking the “Older version” link (top right corner), import the contacts, then switch back to the newer version of Gmail.

Worked for me.

Disabling those pesky pop-up blockers

As a web surfer I LOVE pop-up blockers. They keep my web surfing sane and somewhat clean (though there always seems to be a few Netflix pop-ups that get through the cracks).

However, as an e-learning course developer, pop-up blockers are a major pain in the rear end. Our courses almost always need to be launched in a pop-up window, and the pop-up windows are very frequently blocked. This certainly doesn’t help us when many of our end-users — the infamous and vaguely named “learner” — are often resistant to taking the course in the first place.

Well, I can’t help fight la resistance, but I can help configure those pesky pop-up blockers.

Here’s a list of common pop-up blockers with links to the manufacturer’s instructions for handling said blocker. Enjoy.

Oh, and in case you didn’t know, the universal default for bypassing a pop-up blocker is to hold “ctrl” while clicking a link that causes a pop-up, such as the old chestnut “start course”.

Toolbars with Pop-up Blockers

Browsers

Other blockers

Want to add more to the list?

I know I’ve left a few things off, such as Opera and the MSN toolbar. If you have the link for any of these, or if you’d like to add something else to this list, just post a comment. Thanks.

Dealing with Internet Explorer in your JavaScript Code

It’s almost the end of 2008, and thanks to the hard work of web standardistas, browser vendors, and JavaScript framework developers, cross-browser JavaScript code is much less of an issue than it used to be. Even Microsoft is feeling the love — the upcoming Internet Explorer 8 will be a (mostly) clean break from legacy Internet Explorer releases and will behave much more like Firefox, Safari (WebKit) and Opera. …And they rejoiced.

So why is it that when I look under the hood of some recently produced web pages (learning management systems, courses produced by e-learning rapid development tools, general web pages, etc.), the pages’ JavaScript often includes incredibly out-of-date and bad-practice Internet Explorer detection? Check out these samples I randomly copied:


_ObjBrowser.prototype.Init = function() {
    var $nBrowserChar    = "";
    var $nBrowserStart   = 0 ;
    if ( this.$strUA.indexOf("MSIE") >= 0 ){
        this.$nBrowser = BROWSER_IE ;
        this.$nBrowserVersion = "";
        $nBrowserStart   = this.$strUA.indexOf("MSIE")+5
        $nBrowserChar    = this.$strUA.charAt($nBrowserStart);
        while ( $nBrowserChar != ";" ){
            if ( ( $nBrowserChar >= '0' && $nBrowserChar <= '9' ) || $nBrowserChar == '.' )
                this.$nBrowserVersion += $nBrowserChar ;
            $nBrowserStart++;
            $nBrowserChar     = this.$strUA.charAt($nBrowserStart);
        };
        this.$nBrowserVersion = parseInt( parseFloat( this.$nBrowserVersion ) * 100 ) ;
    } else if ( this.$strUA.indexOf("Mozilla") >= 0 ){
        this.$nBrowser        = BROWSER_MOZILLA ;
        this.$nBrowserVersion = parseInt ( (this.$strUA.substring( this.$strUA.indexOf("/") + 1,  this.$strUA.indexOf("/") + 5  )) * 100 );
    }
};

or even these simpler yet equally problematic sniffers:

UserAgent detection

if (navigator.appName &&
    navigator.appName.indexOf("Microsoft") != -1 &&
    navigator.userAgent.indexOf("Windows") != -1 &&
    navigator.userAgent.indexOf("Windows 3.1") == -1) {
        //Do something
}

Bad object detection

if (document.all) {
    //Do something for Internet Explorer 4
} else if (document.layers) {
    //Do something for Netscape Navigator 4
} else {
    //Do something for other browsers
}

These examples are BAD BAD BAD. Why? Well, there are a million web articles explaining the topic, but I’ll give you a quick rundown.

You shouldn’t test for specific browsers, but for specific functionality instead

In most cases, browser detection is being used because the developer is making an assumption that a particular browser does or doesn’t have a specific feature. The problem is that browsers change over time, and detecting for a browser based on assumptions can come back to bite you. Even the prickly Internet Explorer gets updates from time to time. Case in point: The versions of IE6 in Windows 2000 and Windows XP have a different JavaScript engine (JScript version) than IE6 running in Windows XP Service Pack 3. This means a general IE6 detection script might not lead you down the path you expected.

If you test for features instead, your code will be more future-compatible and less likely to break.

if(document.getElementById){
   //It is safe to use document.getElementById()
} else {
   //document.getElementbyId() is not supported in this browser
}

When hacks for Internet Explorer are required

Nowadays, most browsers offer roughly the same features and adhere to W3C standards. But, as we know, our friend Internet Explorer is… different. If you must use hacks custom code for Internet Explorer, know your options (and please, for the love of… something… don’t use ActiveX controls. Just don’t.).

Use cleaner IE detection

The old User-Agent sniffing approach has been abused for years. Internet Explorer 7 (Windows XP SP2) uses the following User-Agent to identify itself:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

Yes, you read that correctly: IE declares itself a Mozilla browser. Opera’s User-Agent can be changed on the fly, allowing a user to set it to Opera, IE, or Mozilla! This all renders User-Agent detection useless. So what are your other IE detection options?

Conditional comments. Conditional comments are a proprietary Microsoft mechanism that is often used to include IE-specific CSS files in a page. For our discussion, you could conceivably use conditional comments to include a JavaScript file containing IE hacks in your page. You could also do a quick and dirty hack like this:


<!--[if IE]>
   <script type="text/javascript">
      var isIE = true;
   </script>
<![endif]-->

But, as you can see, it’s a clunky solution and isn’t inline with the other JavaScript, which makes it a less-than-ideal option.

Conditional compilation. This method is THE method of choice right now. Dean Edwards described this gem of an approach on his blog post Sniff. As far as I can tell, it is the cleanest and most reliable way to detect IE.

var isMSIE = /*@cc_on!@*/false;

Simple, isn’t it? No User-Agents, no 20 lines of conditional statements and string searches.

How does this code work? Internet Explorer uses JScript, a proprietary form of JavaScript (ECMAScript) developed by Microsoft. JScript has a feature called conditional compilation, which allows us to add JScript-specific JavaScript inside a specially formatted comment. Other JavaScript compilers will ignore this code, thinking it’s a comment, while JScript will recognize it and process it.

/*@cc_on begins the comment, and @*/ ends the comment. When any non-IE browser sees var isMSIE = /*@cc_on!@*/false;, it actually sees it as var isMSIE = <strong>false</strong>;. Internet Explorer’s JScript will add the exclamation point contained in the comment, meaning IE will see var isMSIE = <strong>!false</strong>;. Remember, an exclamation point reverses a boolean’s value, so !false is equivalent to true.

As Dean pointed out, there is an even simpler way to write this (though it’s slightly less legible):

var isMSIE/*@cc_on=1@*/;

If a variable is not assigned a value when it is declared, by default it will return ‘falsy‘ (null). Thus a non-IE browser will see this line as var isMSIE; while Internet Explorer’s JScript will see it as var isMSIE=1; (assigning a 1 makes the variable ‘truthy‘).

I prefer to shorten it a bit more by removing the MS from isMSIE, making it simply isIE. Note: it’s a best practice to give booleans a name that implies what the boolean stands for, usually in a quasi-question format. Using plain old var IE doesn’t tell us the variable is a boolean, and doesn’t tell us what question is being answered by the boolean’s value. var isIE does.


var isIE/*@cc_on=1@*/;
if(isIE){
   //Do something. I suggest downloading Firefox.  ^_^
}

Avoid forking your code for hacks whenever possible.

If your code can be written in a way that satisfies all browsers, do it that way, even if it veers to the left of official web standards — just be sure to document your decision in the comments. For example, using the standards-friendly setAttribute for specifying class names will fail in IE, while direct assignment will work in all major browsers.

//standards-friendly, but fails in IE
element.setAttribute("class", "myClass");

//direct assignment, works in all major browsers
element.className = "myClass";

In this case, I’m advocating using defacto standards that aren’t codified in the W3C standards, but are supported in every major browser. Some standardistas will balk, but this is a much easier way to maintain code; it’s a bad idea to use unnecessary conditional statements simply to prove that IE doesn’t always follow standards. We know, we don’t like it either, but get over it. If a non-standard but universally supported alternative is available, your extra “see I told you so” code will be pure bloat, increasing file size, bandwidth requirements, and browser processing requirements.

Don’t get me wrong: standards are important. Very important. But they only go so far; if we stuck to codified standards on principle, no one would be using AJAX today! That’s right, xmlhttprequest — the heart of AJAX — was created by Microsoft, then copied by other browsers. It is not an official standard, but it is universally supported, and is used by tens of millions of web site visitors every day.

If you’re not comfortable with non-standard code littered throughout your project, abstract it into a function so you can easily modify it later.

Old way:

element.className = "myClass";

Abstracted function:

function setClass(targetElement, name){
   /*
      not using setAttribute here because setAttribute
      won't work with class names in IE
   */
   targetElement.className = name;
}

setClass("element", "myClass");

Now whenever you need to set a class, you won’t worry about IE and can simply use your class function. If you decide to change how you assign the class name, you can just change it in the function and not have to dig around your code looking for every instance of direct assignment (className =).

Note: Many JavaScript frameworks, such as jQuery and MooTools, provide this type of support function for you. These frameworks protect you from needing to know about browser inconsistencies, and free you to focus on your application. If the above example were rewritten to use MooTools, it would simply be

element.addClass("myClass");

There are many ways to approach the problem, and all without using nasty browser detection scripts. It pays to know your options.

Use abstractions for forking code

Getting back to IE detection, if you aren’t using a framework and need to handle browser inconsistencies on your own, it’s a good idea to use support functions. These can encapsulate the browser inconsistencies and isolate them from the rest of your code. This makes your code more maintainable and readable.

Case in point: Internet Explorer will not allow you to dynamically assign a name value to an <input> element. This requires an IE-specific hack.

You would normally use the following W3C-compliant code:

var input = document.createElement("input");
input.setAttribute("name", "myInput");

In Internet Explorer, we’re forced to do this:

var input = document.createElement("<input name='myInput'>");

In your project, you’d have to use conditional statements each time you need to create an input element.

var isIE/*@cc_on=1@*/;

if(isIE){
   var input1 = document.createElement("<input name='myInput1'>");
} else {
   var input1 = document.createElement("input");
   input.setAttribute("name", "myInput1");
}
input1.setAttribute("id", "myInput1");

//Later on in your code...
if(isIE){
   var input2 = document.createElement("<input name='myInput2'>");
} else {
   var input2 = document.createElement("input");
   input.setAttribute("name", "myInput2");
}
input2.setAttribute("id", "myInput2");

What a pain. The best way to deal with this is to wrap the code in a function like so

function createInput(parentElement, id){

   //Make sure everything is supported. Error-checking is divine.
   if(!parentElement || !id || !document.createElement || !parentElement.createElement){ return false; }

   var isIE/*@cc_on=1@*/;
   var input;

   if(isIE) {
      input = parentElement.createElement("<input name='" +id +"'>");
   } else {
      input = parentElement.createElement("input");
      input.setAttribute("name", id);
   }

   input.setAttribute("id", id);
   return input;

}

As you can see, the code is now easily reusable throughout our project, contains better support for IE detection, and also contains feature detection ensuring our function won’t throw any errors. To use the code in the project, you’d simply write:

var input1 = createInput(document, "myInput1");
var input2 = createInput(document, "myInput2");

In closing

I hope you’ve found this post helpful, and I especially hopes it helps spread the word about using best practices and cleaner code techniques. I’ll be the first to say I’m no programming expert, so feel free to add a comment if you have suggestions for improvements. 🙂

PS: If you have to write a conditional statement, follow Crockford’s advice and wrap it in curly braces.

Free web-based word processors

A friend of mine doesn’t have Word, and has been trying to use Google Docs for all her word processing needs. I’ve barely touched Google Docs, so I’ve never had much of an opinion. However, after trying to help her edit and format one of her files tonight, I must say it’s something of a clunker! (At least when it comes to formatting.)

Here are some great web-based alternatives to Word and Google Docs I just shared with her:

  • Thinkfree’s Write: an amazingly well-done (and purely Web-based) MS Word knockoff.
  • Zoho’s Writer: feels like Google Docs but fancier.
  • Adobe’s Buzzword: Part of the new Acrobat.com. Sure to have good integration with the PDF format.

If you don’t mind skipping web-based services, you can also download and install the free open-source and standards-based Open Office 3 suite, which is very MS Office-like, and is compatible with Office, too. It includes spreadsheet (Excel), database (Access), and presentation (PowerPoint) tools, all weighing in under 200MB, which is considerably less bloat than MS Office.

I’m sure there are other free apps/web services out there, but these are probably the most popular and well-supported of the bunch.