• You are currently browsing the Christian Heilmann blog archives for June, 2011.

  • Archive for June, 2011

    Help me make developer evangelism more measurable!

    Sunday, June 26th, 2011

    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.

    Creating Commodore 64 style logos in Canvas

    Tuesday, June 21st, 2011

    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:

    c64 fonts

    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:

    logo-o-matic

    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

    canvas logo-o-matic

    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.

    TTMMHTM: iPad talks, Rainbows, TED talks

    Monday, June 20th, 2011

    Things that made me happy this morning:

    Fixing the vid.ly embed code for my needs

    Monday, June 13th, 2011

    As you may have guessed from my talks and all I am a big fan of Vid.ly, a service that automatically converts uploaded videos to all kind of HTML5 compatible formats on the fly. I met with the owner for a coffee and they are overall good guys! Yesterday I realized though that they broke all my blog posts from the past where I embedded their videos as they changed their embed code!

    OK, vid.ly was beta when I used it and I should have read my email but it was annoying nonetheless. I contacted them and we are sorting things out. To recap: Vid.ly converts a video you upload to 13 different formats supporting all browsers, mobile devices and consoles. It creates a single URL that redirects you to the correct format of the video in accordance of the device or the browser used to request it. Awesome!

    In the beta program all you had to do to embed a video in HTML5 compliant browsers was this:

    <video src="http://vid.ly/3l4e0q?content=video" controls width="500">
    <a href="http://vidly.s3.amazonaws.com/3l4e0q/mp4.mp4">
    Download &#8220;Multimedia on the web&#8221;
    </a>
    </video>

    For some reason though this now sends my Firefox Aurora to the MP4 version which doesn’t work any more. I guess there is just a detection issue of Firefox Aurora. The official embed endorsed by Vid.ly is the following:

    <iframe frameborder="0" width="640" height="360" name="vidly-frame"
    src="http://s.vid.ly/embeded.html?link=2m1w3f&width=640&height=360&autoplay=false">
    <a target='_blank' href='http://vid.ly/2m1w3f'>
    <img src='http://cf.cdn.vid.ly/2m1w3f/poster.jpg' />
    </a></iframe>

    The embeded.html file always loads a player to play the video that falls back to Flash in Firefox Aurora and Chrome. On Safari and Opera it uses the HTML5 native controls. I want that for all – why load an extra player and Flash when the browser is capable? So instead of using the official player I checked what URLs it generates and put in the URLs by hand:

    <video width="500" height="375" controls style="display:block">
    <source src="http://cf.cdn.vid.ly/2m1w3f/mp4.mp4" type="video/mp4">         
    <source src="http://cf.cdn.vid.ly/2m1w3f/webm.webm" type="video/webm">         
    <source src="http://cf.cdn.vid.ly/2m1w3f/ogv.ogv" type="video/ogg">
    <a target='_blank' href='http://vid.ly/2m1w3f'>
    <img src='http://cf.cdn.vid.ly/2m1w3f/poster.jpg' width="500">
    </a>   
    </video>

    This is unfortunate, and it seems to be an issue with Aurora detection. The following works fine in Opera and Chrome and Safari.

    <video width="640" height="360" controls 
    src="http://vid.ly/3l4e0q?content=video"></video>

    I could also use this redirect URL to get formats, f.e. http://vid.ly/3l4e0q?content=video&format=webm gets you the WEBM version.

    Detecting the video capabilities of a browser seems to be still quite an annoying thing as you need to do it in JS and not by just reading the user agent on the server. To me, players should never fall back to Flash when the browser is capable of playing it natively – for the sake of accessibility.

    The skill swap Twitter game

    Friday, June 10th, 2011

    At the Inspire conference this week Simone Brummelhuis of The Next Women used one of the breaks to play “The Skill Swap” game.

    Simone handed out sheets of paper where you could say what skill you need and what skill you have and your contact details. She then picked a few and asked the people to stand up and matched them with people in the audience who were happy to provide the skills needed. All in all it was good fun and quite useful. However, I considered it a bit “eighties” – especially at a conference dealing with inspiration in new technology:

    • It kills trees
    • Simone had to decipher handwriting (and failed at time)
    • What happens to the papers with people’s contact details afterwards? This could be confidential information
    • It doesn’t scale as you have only a short time to make a few matches

    Instead I want to move the idea of that game to a place where it makes more sense: Twitter. For this, I’d need some test data I’d love you to provide me with.

    How the skill swap game can work with Twitter

    Instead of providing papers to fill out we could do simple tweets and write a small app that harvests them. The syntax could be pretty simple:

    #{conference}&nbsp;-&nbsp;#sks-{have|want}-{skill}

    So say you are at FOWA London 2011 and you are looking for a UX person the Tweet would be

    #fowaldn2011&nbsp;-&nbsp;#sks-want-ux

    If you are an mobile startup looking for funding, you can do

    #fowaldn2011&nbsp;-&nbsp;#sks-want-funding(mobile&nbsp;startup)

    If you are a kick-ass developer:

    #fowaldn2011&nbsp;-&nbsp;#sks-have-html5,javascript,css3

    And so on. The app could then show a pool of wants and haves and the people who offer them. It could suggest pairings and show trends which are the hottest wants and needs and so on.

    Let’s have a go

    What do you think? In order to start with this I’d like to have some data. So let’s come up with a fake conference and send out some Tweets please.

    For the conference, let’s take the name #awesomeconf – bring the data :)

    @codepo8&nbsp;#awesomeconf&nbsp;-&nbsp;#sks-have-html5