Every time I come across tweets about browser stats I get a bit twitchy. First of all because they always try to paint a picture in one direction or another but mostly as I am not sure about the data they are based on.

What are the sources?

Whenever there is talk about browser stats a few companies crop up: Counter.com, Statcounter.com and Netapplications.com, all of which are hitcounter solutions.

I personally use Statcounter – but only on a few of my pages that I specifically want monitored. So if I compare the stats of Statcounter to the overall stats of the Urchin that comes with my server, there are discrepancies:

( I have no clue what Pipes is doing there – I guess there are some RSS syndicators at work :) )

This, of course is to be expected. But if I now said that Safari only makes up 6.1% of my stats and use the overall hit numbers of the server in another sentence people wouldn’t blink an eye about that wrong connection.

Now, as most of the official sources constantly mentioned are companies that make money with selling statistics software it makes you wonder if those numbers could not be doctored to show some cool trends so people want to know if as many cool kids on iPads come to their site or not. Even without my tinfoil hat on I feel that there should be a better way of collecting information from sources closer to the, err, source. You know, like server logs.

Our fetish for web site statistics

It seems that people really need numbers. All the big web shows have keynotes with lots of massive numbers in them. So and so many million Android devices at Google IO and so and so many iOS devices at WWDC. So many people upgrading to IE9 at Mix (hey, no Windows XP users though, sorry about that) and of course a lot of people using Blackberries and Nokia phones and and and…

I have never had a client that didn’t want a statistics package and when you offer them (the aformentioned companies or Google Diagnostics) it is always amazing to see what people look for: the success stories.

• How many users did we have more than last month (regardless of them being visitors or spam bots trying to inject code)?
• Which are the most successful parts of the site?
• What are the main screen resolutions?
• How many users have JS disabled so that we can pat our back and proclaim that hashbang URLs are not an issue?

We take statistics as a means of validating our success, not as an opportunity to analyse what could be improved. It is another example of the “like” culture that has taken over our market in the recent years.

An aside: Your statistics have much more interesting data in them. Check the form submission data on your stats to see what people tried to inject code and where to see which parts of your sites should need some extra security love. Check which parts of your site perform badly or stop people going further and find out what made that happen. Where are broken links and how hurtful to the site navigation are they? Analyse the search bot behaviour on your site and see where they get stuck. And and and…

Back to browsers though:

The “only stat that matters” myth

You probably have seen those talks: someone shows one or another browser statistic and the incredibly uplifting story for us web developers that this data represents and then ends with “of course the only real statistic that matters is the one of the site you work on”.

This most of the time translates to “if most of your users are stuck on IE < 9 none of the cool stuff really matters to you”. This is dangerous thinking. First of all – using progressive enhancement you can use all of the cool new stuff:

Supporting old browsers is to me a given when you put things on the web. Read my lips: you can not dictate what browser your users should have. If you do that, you hurt the web, you lock yourself in to a monoculture and you build yet another piece of the web that will block innovation in the future. I do not care if your browser of need is IE, Safari, Chrome or Firefox. All should get something that works – no matter how cool a new version of a certain browser is. This thinking gave us all the apps that now only work in IE6.

Using polyfills you can even make those less fortunate browsers do the same things the new, cool ones do. I am not a big fan of polyfills but that’s for another post.

Whilst it is obvious that you should cater to the largest part of your visitors you should not see that as a reason not to improve the experience for those who can get more. Using local storage and offline storage in browsers that support it can significantly reduce your traffic. Using CSS3 and responsive design wisely means that you cater for the web and new, cool tablet and mobile devices without changing the experience for IE6 users.

It is no wonder that you won’t see many mobile browsers in your stats when you concentrate on supporting only old browsers and desktop machines. Your stats should be a guideline to remind you that you have a diversified audience, not a blocker meaning that you will never get others.

Also, what happens when you start a new project from scratch? Then there is no “one stat that matters”...

I tell you what I want, what I really, really want…

What I’d really want is an open, free and editable resource where you can find statistics of big web sites out there. You could see the stats by market, by nature of the sites and get real information from the server logs rather than some software that relies on tracking and might be blocked (and needs to be installed in the first place).

Inside Yahoo we had a great resource that showed our statistics. This was never published to the outside though (although I frequently requested it). I do think that every big company does the same. Wouldn’t it be awesome to get the statistics of Facebook, Yahoo, Google, AOL, The Guardian, CNN… ? If the server log data gets stripped of all the information that is not browser specific none of these companies would give out any competitive advantage data. All we would get is a real world view of what people really use.

Do you know of any such stats? Do you work for a large corporation? Ask now if you could do a dump of your data and show some stats – I promise you’d get a lot of hits by a very selective group of web developers who need the real information!

Things that made me happy this morning:

• The incredibly useful JSFiddle wants to become even better and asks for your opinion by filling out a questionaire
• Peter-Paul Koch released a handbook for conference organisers
• The Insidious Evils of ‘Like’ Culture is a great article dealing with the dangers of caring too much about feedback
• A pretty cool list of advanced JavaScript Tips and Tricks
• A simple CSS trick for creating sprites with endless whitespace
• Lots of new looks for Github’s Octocat
• A collection of HTML5 validation patterns to apply to your form fields (a few need work)
• ala have build a beautiful scrolling site for themselves with lots of HTML5/CSS/JS trickery
• Physical GIF want to create Zoetropes from your GIF animations
• My Event Calendar finally got released on the Mozilla site

Lately I’ve been playing a lot with canvas and video and see what can be done with it to do things that are tough to do to videos on your own computers. One thing I found really annoying is that it is tough to do screen grabs of videos. In the past it was impossible (before video cards allowed you to capture flash content with screenshots) and even now it is a pain.

If you offer an online video that is HTML5, it is pretty simple to use canvas to allow end users to download images of your video. I’ve written a demo that does exactly that – it takes a snapshot of a video and adds its name and time stamp to the snapshot. Users then can download the snapshot as a PNG.

Here’s a quick tutorial on how it is done (also available on YouTube)

You can see the code in action or fork and grab the source on GitHub.

The only annoyance is that because of security concerns (cross domain origin) you can not grab images from videos not hosted on the same servergrab frames from videos not on the same server but you are not allowed to save them out as images. In Firefox you can save a canvas as an image, but it doesn’t work cross-browser it seems.

I am a developer evangelist. I’ve written a handbook about it and I have fought and lived for the role for a long time. I think it is very important for a company to have a person that understands tech and translates it into understandable content for everyone out there. It is also important to have that person to be the mediator between the tech and non-tech people in the company.

I am also my biggest critic – I record all my talks and listen to myself later on cringing when I find things I can improve. This is the reason why I want to ask you for help to make my (and more and more others) job to be more accountable.

Right now being a developer evangelism means you do a lot of good but it is hard to measure what you did. Of course there are low hanging fruit when it comes to measuring the success of talks for example:

• Collecting Tweets right after a talk – which is tricky as they tend to be very polarised – people either hated or loved it
• Number of new contacts (business cards) – I know a few companies that have this as a metric. Seems a bit eighties to me and not meaning much unless you also get some good conversation out of the contacts
• Number of people in the room – might actually be that the other talk in the other track was boring
• Conference feedback forms/speaker rate (and similar sites) – this suffers from the same issue as tweets, really

Other things can also be measured and should be listed as successes:

• Partnership with companies met at conferences – getting free accounts to their services for yours
• Invitations to other speaking gigs – especially hard to get ones
• Connections with other speakers – getting them as judges for own competitions or to come and speak at your office/events

I’ve been speaking with other people in similar roles and the really interesting thing for us is not the immediate numbers but what impact we had. Sadly enough it is really hard to get information about this. Of course it feels good to have people come up to you directly after a talk or training and thank you for what you did, but what I really want to know is what people did with the info I dished out. Therefore it would be super useful to me if you told me about any of the following things:

• How have your used things you learned?
  • Have you given an internal training?
  • Is your team now using this technology or product?
  • Did it help your career (did you start using it and found a new job)?
• Did you re-use some of the material for training or pitching to a client?
• Have you build and released a product differently after the talk/training? This information would be total killer to get!
• Did you join developing an open source product? – did the talk get you out of your 9-5 mentality and make you do something different?
• [your idea here] – in essence I would love to hear how my work has affected you and what you did about it

If we’d get this information it would validate what we do and give us a reason to keep pushing ourselves. Please, share. Thanks!

The best way to tell me about things is by sending a Tweet to @codepo8. You can also contact me on the email in the footer of this blog, or on Facebook. I also hang out on IRC freenode #HTML5 a lot.

The year is 1993 and a young me spends quite some time in front of a Commodore 1901 colour screen, a C-64 and use Amica Paint V1.8 with my trusty Competition Pro Joystick to set and delete pixels.

One of the things I did a lot was fonts for scrollers and logo effects, like the ones here:

Fast forward to 2000 – a bit less younger me got his first PC and used Star Commander to move some of these fonts over to the PC to bring them on to the web. By now I develop in Perl and I write an online tool that allows you to create logos using the fonts:

A few years later, I re-wrote the generator in PHP. Well, seeing the very cool C64 yourself Canvas demo I thought I should now have a go at creating a pure client side version.

So here we go – check out Canvas Logo-O-Matic and get the source on GitHub

The way it works is described very well in this Canvas image cropping tutorial and I heavily documented the logogen.js file for you.

Basically the trick is to write a JSON map of all the char data – where a char starts and how wide it is and then crop it out of a single sprite sheet top copy one after the other into the Canvas.