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.

Lately, Twitter has been the focus. Twitter is actually pretty clear about it’s claims to user generated content:

1. We claim no intellectual property rights over the material you provide to the Twitter service. Your profile and materials uploaded remain yours. You can remove your profile at any time by deleting your account. This will also remove any text and images you have stored in the system.
2. We encourage users to contribute their creations to the public domain or consider progressive licensing terms.

It’s pretty clear that Twitter is taking a hands off approach, but it doesn’t let users decide what they want. I’m personally a fan of Creative Commons so my suggestion would be to let decide in their account settings how they wish to license and choose between CC licenses. That of course makes retweeting complicated to put it nicely (it’s more like a minefield). That’s likely the reason they avoid the licensing issue. Sure you can put some sort of an icon next to the tweet to indicate the licensing, but what if someone retweets it? Or modifies it ever so slightly? Is it a new tweet? How many characters must change for it to be a new one? This is where it gets murky.

Yahoo owned Flickr choose to solve this problem by letting users choose what copyright they want to impose, and include a Creative Commons option. A very graceful solution though admittedly their situation is much simpler than Twitter’s since they don’t have to deal with complexities like retweeting which would make things very complicated.

WordPress.com isn’t as clear in regards to it’s claims (or lack of) to copyright. Though they are far from locking people in considering you can delete stuff at any time and download your entire blog and move it elsewhere. Matt‘s been pretty open about giving users choice including the ability to leave WordPress.com. There is of course room for improvement to clarify their stance on copyright ownership.

Even Google has been criticized for copyright concerns regarding services like Google Docs.

They could adopt the Richard Stallman stance to “intellectual property” (his airquotes), though that would alienate at least as many as it attracts.

While Twitter might be the hot topic today it’s hardly a problem exclusive to Twitter. It’s an issue for virtually any site out there that accepts third party content. It gets more complicated when content can be remixed and redistributed.

The reality is people should know what rights they are giving up by putting content on these or any other services, but people rarely do. Perhaps a great Creative Commons project would be to create the same simplified icon/license system but for websites that allow users to submit content. The licenses would indicate what the impacts of the Terms of Service jargon are in plain English. It’s essentially the inverse of what they do now. Label the service as well as the content.

So what’s the best solution?

I must admit I didn’t know that the database is funded by the National Cyber Security Division of the United States Department of Homeland Security. I did know US-CERT was.

Adium

• Data Detectors for Adium

Dojo Foundation

• Native cryptography API for Google Gears
• Dojo-Charting improvements
• Dojo GFX Enhancement

FFmpeg

• AAC-LC Encoder
• MLP/TrueHD encoder
• Apple Lossless Encoder for FFmpeg

Gallery

• Facebook / Flickr Style Image Region Based Tagging

Inkscape

• SVG Fonts

Joomla!

• Multi-DB support, and Database abstraction layer implementation for Joomla!

The Mozilla Project

• Natural language parsing for automatic calendar event creation
• Powerful search engine for SUMO
• Support OpenID as an account login in Bugzilla
• Google Contacts Extension for Thunderbird

MySQL

• Streaming Enabled MySQL Driver for PHP
• MySQL query analyzing tool
• New in-memory storage engine
• Memcached for Query Cache

PHP

• Implement Unicode into PHP 6

Pidgin

• Master password support for pidgin

WebKit

• WebForms 2.0 Support
• Improving and Extending WebKit Inspector

WordPress

• WP-storage
• Integrated Caching Solution
• Improving the search system

“We decided to show ads only on certain pages, only to the people who were sort of random drive-by visitors…if you use Firefox, you’ll never see an ad, no matter what, mostly because I like Firefox.”

Also kinda interesting from a business perspective. There’s been some suggestion over time that Firefox users are prone to ignore ads. Partially because of extensions that block ads (though products to block ads on the OS level, and in IE exist too btw), but partially because they are said to be more technical.

I wonder if a practice like this actually provides a higher click through rate. Because they only show ads in certain places, it’s not about total impressions (they control that by picking where to show ads, and when). They control how many impressions they run in a given period. By targeting those more inclined to click on ads, theoretically your ratio should be higher.

I’ve heard of quite a few different ways to target ads over the years, but this is a new one.

The Code

WordPress.com

You’ll notice a comment sure to make any web developer laugh on WordPress.com’s login page

	<link rel="stylesheet" href="http://wordpress.com/wp-admin/wp-admin.css?version=MU" type="text/css" />
	<!--[if IE]>
		<style type="text/css">#login h1 a { margin-top: 35px; } #login #login_error { margin-bottom: 10px; }</style>< ![endif]-->
	<!-- Curse you, IE! -->

The guys behind WordPress a while back took the site BrowseHappy under its wing. WordPress has always been a strong believer in web standards, so this isn’t surprising (though still amusing). Did you also know that the guys behind it (Automattic) don’t have job titles? Unless you consider “Chief BBQ Taste Tester” to be a real job title. Matt, I hope your job doesn’t kill you with a heart attack.

Facebook

The geniuses over at Facebook feel the same and put the following on the top of their IE conditionally included stylesheets:

/*  ------------------------------------------------------------------------
                    Facebook | IE/PC Hacks | getfirefox.com
    ------------------------------------------------------------------------  */

popurls

The ever so popular popurls has the following comment in the header of the page.

<!--

  __   __
 (  \,/  )
  \_ | _/  IN THE FUTURE EVERY URL WILL BE POPULAR FOR 1.5 SECONDS
  (_/ \_)                  - thomas and the wise popurls butterfly

-->

RedHat

RedHat was one of the earlier corporate sites to redo itself into a standards based design. They have great respect for those who came before them. In their master css file they have the following tribute as well as a little remark about Netscape 4.x:

/* 	redhat.com MASTER style sheet

	a tip of the red hat to Zeldman, Bowman, Meyer, Shea, Cederholm, Newhouse, Holzschlag,
	and many, many other css and web standards pioneers who have inspired us. 

	the css, layout and validation status of redhat.com is a work-in-progress. numerous
	web-building worker bees are working furiously to correct the bugs, minimize the hacks
	and validate the code. stay tuned. 

-------------------------------------------------------------------- created June 2004 */
@import url("global.css");
...
@import url("dig.css");

/* ---------------------------------------------------------------- ns4 styles - bah! */

table {
	border: 1px;
	}
...

Panic Software

Panic Software has a cool little piece of code for those who browse the product page for Coda (awesome product btw) with IE and don’t have at least version 6.0:

		<!--[if lte IE 6]><p id="iewarning"><img src="/extras/ripoff/images/ie-warning.gif" alt="IE Warning" title="We hear Firefox is nice!" /></p>< ![endif]-->

I hear it’s pretty nice too.

Panic also has a comment in the head of their homepage that reads:

<!-- This homepage design is not long for this world. Enjoy it while you can!   -->

Twitter

Twitter (who redirects to drop the ‘www’ btw) is a very popular service these days. In their html they mark which server served up the data. You’ll see it in the form:

  <!-- served to you through a copper wire by bennu.twitter.com at 24 Nov 19:08 in 11 ms (d 0 / r 8). thank you, come again. -->

Copper eh? No fiber in your data center? I won’t judge, as long as your bandwidth is plentiful.

WordPress.com

Here’s a bonus from WordPress. While many analytics programs use a 1px transparent “tracker gif” to manage statistics, WordPress did something a little different. At the very bottom on the left hand side, you can see the face of WordPress analytics in all it’s tiny glory.

Mozilla

This technically applies to more than just Firefox. You’d be surprised to see how many times kungFuDeathGrip is in the code base.

Many Sites using Google Products/Services

Many people have noticed strange Google tags on sites such as:

code
<!--googleoff: index-->
all
<!--googleon: index-->
over

This isn’t a “SEO” practice, despite some misconception on the web. This is used by the Google Search Appliance, a product made by Google which many websites use to power their own search engines to tell the engine what to read and what to ignore. It wouldn’t be practical for Google to use these “in the wild”. The reason is that spammers could effectively hide an alternate website within those comments. Google’s business is based largely on accurate search results. Spammers have already tried to abuse the css property display: none;. This would be even better. You can find code like this on Apple.com among many other sites.

Webmasters can however optimize their side for AdSense using a technique recommended by Google:

<!-- google_ad_section_start -->

<!-- google_ad_section_end -->

This tells Google to give weight to a certain part of your page when deciding what ad to display on the page. This is good for cases where you feel other material on your page is influencing the ads and resulting in off-topic ads.

Infrastructure/Platform

Microsoft

Microsoft‘s offering against Linux and Apache is IIS on Windows. Which one would expect they themselves use. What they don’t tell you is that they also have used Akamai (with over 25,000 servers), which uses Linux. They have used Akamai for many things like DNS, and caching files. Rather than “Powered By Windows Server” maybe they should append “hiding behind Linux”.

Myspace.com

Myspace.com was previously Adobe/Macromedia’s model customer because it was written in ColdFusion, and said to be the biggest ColdFusion site on the net (and one of the biggest sites on the net). Many think it still is, but it’s not. While many url’s suggest it might be because they end in .cfm it’s actually running ASP.net and has been since aprox, 2006. You can confirm this by viewing the headers on some of their pages. You’ll see:

X-AspNet-Version: 2.0.50727

MTV.com

MTV.com‘s site has search powered by a Google Search Appliance. MTV is also owned by Viacom who sued Google, the parent company of YouTube. The folks at MTV awesomely admitted the irony during relaunch on their blog.

Global Crossing

Tier 1 networking provider Global Crossing really wants you to know how fast they are. Doing a trace could turn up something like this:

  7    15 ms    13 ms    14 ms  COMCAST-IP-SERVICES-LLC.tengigabitethernet1-4.ar5.NYC1.gblx.net [64.208.222.58]
  8    14 ms    13 ms    13 ms  tengigabitethernet1-4.ar5.NYC1.gblx.net [64.208.222.57]

Yes that’s right, they use 10 GigE! Just FYI.

Goofy

Firefox 2.0

In Firefox 2.0, go to “About Firefox” (under the help menu for Windows, under the Firefox menu for Mac), and click on credits. You’ll notice Stephen Colbert. He wrote it single handedly, but added some other names because he’s a nice guy. Bonus: I’m on the list too. Above him because I’m better than him. That’s right, I said it.

Handy

Chase

Chase for some reason puts it’s login form in plain text. The submit url is https, but it doesn’t feel right. They do have a SSL enabled login page, but for some reason they hide it. Here it is for those interested:

https://chaseonline.chase.com/online/home/sso_co_home.jsp

Google

For some reason, most of Google’s services are insecure by default. By simply going to https, you can use SSL for added security.
Gmail: https://mail.google.com
Google Calendar: https://www.google.com/calendar
Google Reader: https://www.google.com/reader

On the next page is the 2008 US Presidential Candidate Campaign sites…

Today I implemented that on a project I’m working on, rather similar in style to WordPress. I think overall it’s a better approach to referrer checking. It seems the nonce approach is actually quite popular on the web looking at commercial sites, but not a technique often talked about.

Well done by the WordPress team. My implementation is pretty similar to theirs (my variables and salting is a little different based on the app) since it was pretty hard to improve upon. Not sure how long to make the Nonce, so I stuck with 10, which is what I believe they did as well. Not sure if I should go with something longer.

One of the great things about open source is the discussion of best practices and techniques. It also benefits closed source projects who can gain influence and knowledge from those discussions.

Apparently Silent Bob, isn’t so silent when you look at his site. One of my favorites just got a bit cooler in my book. Silent Bob rules.

[Hat tip, Matthew Mullenweg]

< ?php firefox_count('thunderbird');  ?>

Another toy is still in the works (waiting on something still). Hopefully you’ll see something soon.