Here’s an example based on jQuery and jQuery.cookie. It’s designed to turn objects into JSON and store the JSON representation. On retrieval it restores the object. This doesn’t handle things like expiring cookies (it simply defaults to 365 days). I just had this around from an old project with these very specific requirements and figured I’d post it as-is in case it can help anyone and to demonstrate. This isn’t ideal for reuse, but for someone playing with the idea, maybe it will motivate .

function storeData(type, obj){
    var data = jQuery.toJSON(obj);

    // If using a modern browser, lets use localStorage and avoid the overhead
    // of a cookie
    if(typeof localStorage != 'undefined' && localStorage !== null){
        localStorage[type] = data;
    }

    // Otherwise we need to store data in a cookie, not quite so eloquent.
    else {
        jQuery.cookie(type, data, { expires: 365, path: '/' });
    }
}

function loadStoredData(type){
     var data;

    // If using localStorage, retrieve from there
    if(typeof localStorage != 'undefined' && localStorage !== null){
        data = localStorage[type];
    }

    // Otherwise we have to use cookie based storage
    else {
        data = jQuery.cookie(type);
    }

    // If we have data, lets turn it into an object, otherwise return false
    if(data){
        return jQuery.secureEvalJSON(data);
    }
    return false;
}

Pretty simple right? It’s still a key/value API.

For the intents and purposes below assume the following HTML:

<p>
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" id="checkbox1" checked="checked"/>
</p>

<p>
<label for="checkbox2">Checkbox 2</label>
<input type="checkbox" id="checkbox2"/>
</p>

You wouldn’t really expect it, but both of these return “on” when you get the val():

$('#checkbox1').val(); // returns "on"
$('#checkbox2').val(); // returns "on"

Now say you flipped them by unchecking checkbox1 and checking checkbox2. Same thing:

$('#checkbox1').val(); // returns "on"
$('#checkbox2').val(); // returns "on"

Now reload the page, so one is checked and two is not checked. Try again this time using .attr('checked');. That also doesn’t work, but that makes sense. jQuery 1.6′s release notes even explain it:

Before jQuery 1.6, .attr(“checked”) returned the Boolean property value (true) but as of jQuery 1.6 it returns the actual value of the attribute (an empty string), which doesn’t change when the user clicks the checkbox to change its state

The best way I’ve found to get a checkbox value is to use the is() method:

$('#checkbox1').is(':checked') // returns true

As to why val() doesn’t check the type of node and do this for me automatically? I’m not entirely sure. I’m assuming backwards compatibility. I suspect I’m not the only one who keeps forgetting this little caveat.

My observations/conclusions/insights (if you can call it that) can be found after the raw data.

Backend

Frontend

Frontend (cont)

Observations

I retooled this for 2012 based on how web development and the internet has changed as well as the data that’s available. The most noteworthy thing is that EVERY campaign uses open source. Perhaps it’s saving money in this economy? Windows Server isn’t free after all. Most use it extensively. Regardless who wins, that candidate would be very hypocritical to support the (unlikely regardless) “open source is communism” mantra. If this isn’t proof that open source is as mainstream as ever in America, I don’t know what is. Apache is a huge winner. So is jQuery, WordPress, Drupal, even Nginx and Varnish made a showing (they weren’t even on the radar in 2008).

Lots of websites are using the HTML5 doctype now. That doesn’t mean they are using HTML5, but many are moving in that direction. Web Fonts were spotted. Tables were very rare.

Shockingly, CDN usage and HTTP compression were pretty rare. Given Google will host popular javascript frameworks (jQuery for example), if you can’t afford the CPU to gzip data you could let Google host it for free. Lots of cloud hosting though.

Between popular CMS’s, and popular plugins/modules for those CMS’s, there’s little diversity in these sites this time around. It was obvious last time, it’s much more obvious this time. Mono-culture has set in regarding the technicals of these sites.

One thing that really stood out is the amount of analytics on each site. This election is really a data war. Knowing as much as possible about voters and the candidates base. Clearly this is an escalation from 2008. There is also a proliferation of real-time analytics usage this time around. Data is everything in the business world, it’s becoming that way in campaign websites as well.

Misc Notes

Data collection method: The data for this blog post was mostly done on the evening of August 30, 2011 and August 31, 2011 by myself. The character set was however Firefox 6.0 interprets the page. HTML validation was checked by submitting to the W3C validator. All other analysis was done by eye and using tools like cURL. Some things were a little bit of a judgment call, such as CSS layout. I didn’t generally penalize if a table was used, it depends how it was used, and the context. I viewed source on all of them, and spent some time looking around while collecting data. I didn’t view every page on every site, since that would drive me insane. The data is based on the homepage of the site however I did make a brief attempt to hunt for feeds since some only include a link on a “news” page. If I couldn’t find it quick enough, it doesn’t exist.

Secrets In Websites III?: Yes there will likely be a third installment. I don’t know when, I don’t know what will be included. I do have some ideas and notes. It takes time to put these together, and I’m not exactly drowning in free time these days.

* Roy Moore’s website is Flash in an iframe. For purposes of this analysis I’m using the page containing the flash object.

jQuery

jQuery looks something like this in syntax:

if($.browser.msie) {
  // do something IE specific
}

Here’s how it’s actually implemented:

browser: {
  version: (/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/.exec(userAgent) || [0,'0'])[1],
  safari: /webkit/.test( userAgent ),
  opera: /opera/.test( userAgent ),
  msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
  mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
}

jQuery takes a pretty simple user-agent parsing approach. All jQuery supports (though deprecated officially) is the rendering engine, and version. Noteworthy is that “safari” is used as opposed to “webkit“. This is important in the case of Google Chrome etc. which you would detect using the poorly named “safari“. No support for detecting mobile browsers, though that could be added pretty easily.

jQuery is pretty bare bones, but the tightest of the implementations. It’s also the only one I’m aware of that has deprecated this functionality. The one thing I occasionally miss is OS detection (helpful when Linux lacks a few things like good Flash support). I supplement it with:

var jQbrowser = navigator.userAgent.toLowerCase();
jQuery.os = {
  mac: /mac/.test(jQbrowser),
  win: /win/.test(jQbrowser),
  linux: /linux/.test(jQbrowser)
};

Then use it like this:

if($.os.linux) {
  // do something for Linux
}

MooTools

MooTools syntax looks something like this:

if(Browser.Engine.trident) {
  // do something IE specific
}

It also supports a few other attributes such as Platform, Browser.Features.xpath (XPath supported?) Browser.Features.xhr (xmlHttpRequest supported?), and Browser.Plugins.Flash.version (Flash version).

Here’s how the core of it is implemented (I’m omitting the extras):

var Browser = $merge({

  Engine: {name: 'unknown', version: 0},

  Platform: {name: (window.orientation != undefined) ? 'ipod' : (navigator.platform.match(/mac|win|linux/i) || ['other'])[0].toLowerCase()},

  Features: {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)},

  Plugins: {},

  Engines: {

    presto: function(){
      return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925));
    },

    trident: function(){
      return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4);
    },

    webkit: function(){
      return (navigator.taintEnabled) ? false : ((Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419);
    },

    gecko: function(){
      return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18);
    }

  }

}, Browser || {});

MooTools choose feature detection rather than User Agent sniffing. This approach takes care of the problem with spoofed request headers, but is failtastic when using an unsupported method. MooTools users need to upgrade ASAP. This will be problematic with the upcoming Firefox 3.6 release.

Prototype.js

Prototype’s syntax looks something like this:

if(Prototype.Browser.IE){
  // do something IE specific
}

Here is what the implementation looks like:

  Browser: (function(){
    var ua = navigator.userAgent;
    // Opera (at least) 8.x+ has "Opera" as a [[Class]] of `window.opera`
    // This is a safer inference than plain boolean type conversion of `window.opera`
    var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
    return {
      IE: !!window.attachEvent && !isOpera,
      Opera: isOpera,
      WebKit: ua.indexOf('AppleWebKit/') > -1,
      Gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
      MobileSafari: /Apple.*Mobile.*Safari/.test(ua)
    }
  })(),

It’s pretty similar (though not identical) to jQuery with the most notable exception being the addition of MobileSafari and object detection for IE.

YUI

The syntax in the YUI world is like this:

if (Y.UA.ie > 0) {
  // do something IE specific
}

The implementation is the longest I’ve seen:

ua = nav && nav.userAgent,
if (ua) {

  if ((/windows|win32/i).test(ua)) {
    o.os = 'windows';
  } else if ((/macintosh/i).test(ua)) {
    o.os = 'macintosh';
  }

  // Modern KHTML browsers should qualify as Safari X-Grade
  if ((/KHTML/).test(ua)) {
    o.webkit=1;
  }
  // Modern WebKit browsers are at least X-Grade
  m=ua.match(/AppleWebKit\/([^\s]*)/);
  if (m&&m[1]) {
    o.webkit=numberfy(m[1]);

    // Mobile browser check
    if (/ Mobile\//.test(ua)) {
      o.mobile = "Apple"; // iPhone or iPod Touch
    } else {
      m=ua.match(/NokiaN[^\/]*|Android \d\.\d|webOS\/\d\.\d/);
      if (m) {
        o.mobile = m[0]; // Nokia N-series, Android, webOS, ex: NokiaN95
      }
    }

    m=ua.match(/AdobeAIR\/([^\s]*)/);
    if (m) {
      o.air = m[0]; // Adobe AIR 1.0 or better
    }

  }

  if (!o.webkit) { // not webkit
    // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr)
    m=ua.match(/Opera[\s\/]([^\s]*)/);
    if (m&&m[1]) {
      o.opera=numberfy(m[1]);
      m=ua.match(/Opera Mini[^;]*/);
      if (m) {
        o.mobile = m[0]; // ex: Opera Mini/2.0.4509/1316
      }
    } else { // not opera or webkit
      m=ua.match(/MSIE\s([^;]*)/);
      if (m&&m[1]) {
        o.ie=numberfy(m[1]);
      } else { // not opera, webkit, or ie
        m=ua.match(/Gecko\/([^\s]*)/);
        if (m) {
          o.gecko=1; // Gecko detected, look for revision
          m=ua.match(/rv:([^\s\)]*)/);
          if (m&&m[1]) {
            o.gecko=numberfy(m[1]);
          }
        }
      }
    }
  }
}

This seems a little excessive, especially for UA parsing, though the detection of AdobeAIR and Opera Mini is a nice touch. The code being well commented is nice though.

Conclusion

So there you have it. Unlike many of those websites that don’t use a library, these JS code bases don’t rely on document.all and/or window.xmlHttpRequest^[1] to do it all.

1. For those wondering xhr is to tell IE7+ from previous IE versions.

It has now relaunched using open source Drupal. Also interesting is that it’s no longer broadcasting any headers regarding it’s server. Considering Drupal is by far better tested on a Unix OS andApache, I’m wondering if they dropped Windows Server/IIS 6.0 in favor of some sort of Linux and Apache. I can’t find any hint at what they are using.

It’s noteworthy that Drupal was already used on recovery.gov and has been used in politics by way of CivicSpace for the Dean campaign in 2004.

Via Drupal it’s still using jQuery (verison 1.2.6). It’s also now using RSS rather than ATOM for feeds, which I presume is by way of the switch to Drupal rather than an intentional effort.

Another interesting change is they tweaked the doctype from XHTML Transitional to XHTML+RDFa.

Pretty much everything else is still the same including the design. Analytics is still done using WebTrends (holdover from the Bush administration) and Akamai still sits in front of their servers.

For CSS hackers: They still choose conditional CSS for IE compatibility.

Their pages don’t fully validate anymore, though there is no terrible markup either.

Video is still done using Flash, maybe they’ll consider adopting HTML5 video. They could do so and fallback to Flash. The latest versions of Firefox, Safari, and Chrome could take advantage of it today. The rest of the browsers would get the Flash experience. That would be the next major step in opening up. Mark Pilgrim has a good primer if they need.

Edit [9/26/2009 @ 1:45 PM EST]: Tim O’Reilly confirms it is indeed running on LAMP, specifically Red Hat Linux with Apache, MySQL and obviously PHP. Apache Solr is used for search.

• Running Microsoft-IIS 6.0 and ASP.NET 2.0.50727. The Bush administration ran Apache on what I think was some sort of Unix. Data is gzip’d.
• Whitehouse.gov is using Akamai as a CDN and for DNS service.
• Using jQuery 1.2.6 (someone should let them know 1.3 is out). Also using several plugins including jQuery UI, jcarousel, Thickbox. Also using swfobject.
• Pages tentatively validate as XHTML 1.0 Transitional! I’m shocked by this. I’ve checked several pages all with the same result.
• Using WebTrends for analytics. Bush Administration also did.
• IE Conditional Stylesheets and a print stylesheet.
• RSS feeds are actually Atom feeds.
• The website is setting two cookies that I can see WT_FPC and ASP.NET_SessionId which expire at the end of the session which is not prohibited in federal government as per OMB Guidance for Implementing the Privacy Provisions of the E-Government Act of 2002 (using Google Cache for that link since I can’t find it anywhere else, our government should really keep those in a more permanent location).

I should note that this is quite different in architecture than the Obama campaign site which ran PWS/PHP, no notable JS library, feed, and Google Analytics.

Update [1/20/2009 @ 9:00 PM EST]:

• Jason Kottke points out that the new whitehouse.gov sports a much slimmer robots.txt file.
• Content is now under Creative Commons license. Way to go Lawrence Lessig.

Extra interesting is that they aren’t forking, but utilizing the existing code under the same license, and will contribute and participate like everyone else.

I’ve been using jQuery on sites for quite a while now (about 2 years). Seeing more and more support for it just makes me feel that it was an even better decision.

Congrats to the jQuery team.

If you choose a platform that needs tools, if you give up the viral soft collaboration of View Source and copy-and-paste mashups and being able to jam jQuery in the hole that used to have Prototype in it, you lose what gave the web its distributed evolution and incrementalism. You lose what made the web great, and what made the web win. If someone tells you that their platform is the web, only better, there is a very easy test that you can use:

I took the liberty of highlighting the Web 2.0ish language.

Both of those are great reads, I highly recommend taking a few minutes to read them.

Of course you’ve seen that S5 is a great way to make presentations. Still waiting on someone to make an extension for NVU/Mozilla Composer that makes S5 presentations a snap for average Joe who doesn’t want to code.