Articles by Chris Heilmann

Sort by:


  1. Esteban, Saqib and Craig – three lucky people to join Mozilla at Full frontal

    A day ago or so we asked who wants to come to Full Frontal with us, and a few people have given good reasons. We used state of the art algorithms also used in social media impact products (Math.random) to pick the lucky winners. And they are:

    • Esteban Saiz who will also join us the speaker dinner
    • Saqib Shaikh
    • Craig Moore

    See you all at Full Frontal!

  2. Want to go to Full Frontal in Brighton, England this Friday? We got tickets!

    photo by Lily

    Full Frontal is a JavaScript centric conference in Brighton, England on the 11/11/11. The simplest way to describe it is “a splendid kick into your lower back side” event when it comes to what’s hot and amazing int he world of scripting.

    The Mozilla Developer Network has 3 tickets to give out, one of which also entitles you to attend the speakers dinner the day before the conference. Tickets for the conference are gone, so here is your last chance.

    If you want to take part in this, you need to be able to get to Brighton, England on the 11th and be open to also come on the 10th for the speaker’s dinner (one of you). Please say if you can’t come on the 10th – you can still win a ticket. We will need your name for the organisers to put on the list.

    First and foremost though, in order to win a ticket add a comment here why you deserve to get a Mozilla ticket and what you can do as a thank you to help the open web.

    The best reasons and offers will get the tickets. We will announce the pick on the 9th here and contact you so please leave a valid email in the comment (this will not be shown to the public).

    For extra brownie points, why not tell us what new initiatives of Mozilla get you most excited and what we could be doing to make them a reality faster.

    See you in Brighton, it rocks!

    We picked the winners, now! Let’s get full frontal!

  3. Beam me up, Scotty – bringing HTML5 to the enterprise

    The last few days I was busy talking to in-house developers at two large enterprise companies, Sabre in Poland and SAP in Germany. Both these companies approached us asking for a talk about HTML5 as the topic gets a lot of interest in the upper echelons and there is a lot of confusion about it.

    As we were in Poland anyways to attend Frontrow it was easy to visit Sabre and give a one hour presentation on the ins and outs of HTML5 and where the web might go. The day after the same talk was repeated over Skype for the German office of SAP.

    In the one hour presentation we covered:

    • the basics of HTML5
    • what it meant as an evolution of markup
    • what HTML5 is not
    • common HTML5 myths
    • “Friends of HTML5″ – related technologies and
    • what the future of web technologies could look like

    The slides are available online or embedded below (cursor keys to navigate, press N to show and hide notes and cursor down to proceed on slides with bullet points):

    The audio recording of the talk is available on

    The slides and the audio is licensed with Creative Commons, so feel free to re-use and distribute them.

  4. CSS 3D transformations in Firefox Nightly

    When the first 3D transformations in CSS got support on Webkit browsers people got incredibly excited about them. Now that they have matured we also support 3D CSS in Firefox. To see it for yourself, check out one of the latest nightly builds.

    You can see them in action in this demo of a rotating HTML5 logo and the screencast below:

    This means now that we need your support in trying out CSS 3D examples in Firefox and add other extensions than -webkit- to your CSS 3D products and demos. To show that this is possible, we took the well-known webkit-only “poster circle” demo and made it work with Firefox nightly by adding the -moz- (and of course the other prefixes and one set of instructions without browser prefixes). Here is a slight excerpt:

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    You can see this in action in the screencast below alongside Chrome and you try the demo out yourself. The slight jerkiness is actually my MacBook Air impersonating a starting jet every time I use ScreenFlow and not the browser.

    To celebrate the release and to show how CSS 3D can be applied as subtle effect, have a game of pairs using your favourite browsers (and a cat) :

    browser pairs

    Oleg Romashin also spent some time to convert a few CSS 3D demos to work with Mozilla and you can check the 3D city for more “wow”.

    If you are new to CSS 3D transformations here’s a good beginner course and a tool to create them.

    The rotating HTML5 logo demo also shows how you can check if the currently used browser supports 3D transforms. Instead of repeating the animation frames for all the prefixes we test in JavaScript and create the CSS on the fly:

    function checksupport() {
      var props = ['perspectiveProperty', 'WebkitPerspective',
                   'MozPerspective', 'OPerspective', 'msPerspective'],
          i = 0,
          support = false;
      while (props[i]) {
        if (props[i] in {
          support = true;
          pfx = props[i].replace('Perspective','');
          pfx = pfx.toLowerCase();
      return support;
    if (checksupport()) {
      var s = '';
      styles = document.createElement('style');
      s += '#stage{-'+ pfx +'-perspective: 300px;}'+
           '#logo{-'+ pfx +'-transform-style: preserve-3d;position:relative;}'+  
           '#logo.spin{-'+ pfx +'-animation: spin 3s infinite linear;}'+
           '@-'+ pfx +'-keyframes spin {'+  
           '0% {'+ 
           '-'+ pfx +'-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);'+   
           '100% {'+   
           '-'+ pfx +'-transform: rotateX(0deg) rotateY(360deg)'+
           ' rotateZ(360deg);'+ 
      styles.innerHTML = s;

    For more information on creating your own pages that use 3D transformations, take a look at the draft specification

    As always, If you find any bugs, please report them at!

    So please reward our hard work bringing the third dimension to Firefox’s CSS engine by supporting and testing. Cheers!

  5. HTML5 live: Rocking the boat – and causing a ripple

    Today was the HTML5 live conference in London, England. In this one day conference around 150 attendees learned the why of HTML5, and how to implement it in the current work environment.

    As Mozilla’s representative I was asked to give a talk on how we are faring as a movement when it comes to HTML5. In the talk Rocking the boat – and causing a ripple I discussed the necessity to take HTML5 away from something to build cool demos in to be used in day to day products so we can find and report bugs. I also covered a few of the issues that are cropping up like “best viewed with browser X” products and trying to impress users by listing the technologies used rather than just using them to improve the overall experience. In the end we also list some of the new technologies and products Mozilla is working on to make the web a real application platform that has the same access that native applications have.

    The slides are embedded below and use a modified DZSlides as the system. Focus on them and use the cursor keys to navigate. Display bullet points by pressing space and show and hide the notes by pressing N. Alternatively you can also see the slides a simple web page.

    The audio recording of the talk is available at

  6. HTML5: Time for some slicker apps – a talk at Kings of Code

    The Kings of code conference in Amsterdam attracted a few hundred backend developers. Part hackday, part conference, Kings of Code spans over a few days and brings together developers from various backgrounds. The ambitious goal of the Mozilla keynote was to cover the relevant parts of HTML5 and CSS3 for this audience in 25 minutes.

    The presentation slides are available here and embedded below (use cursor keys to navigate back and forth and hit ‘n’ to show and hide the notes):

    The audio recording of the talk (raw, unedited) is available on

    Overall the reaction was good, and we hope we managed to bust some myths and look forward to see what people do with the inspiration.

  7. Geolocation explained – a quick screencast

    If you’ve been here last week, you might have seen the webinar and geolocation Q&A with Remy Sharp. Sadly enough, we had a problem recording the screen so we recorded this replacement screencast yesterday night to give you a quick introduction to the Geolocation API.

    Once you are up to speed (or refreshed your memory) why not go and build something for this month’s Developer Derby?

    You can see the video on any HTML5 enabled device here (courtesy of

  8. Taking steps() with CSS animations

    CSS animations are hot and a lot of experimentation is going on. A cool new feature of animations is the steps() option which allows you to cut an animation into steps instead of a transition from one state to another in one go. While this seems counterproductive on first glance there is a lot you can do with it.

    Inspired by the making the perfect listing web site Lea Verou created a Pure CSS3 typing animation.

    JSFiddle demo.

    Which then inspired @simurai to use the steps() feature to create a sprite animation.

    JS Fiddle demo.

    Especially the latter is very interesting as it allows for a scripted animation without JavaScript – remember when you had to re-animate GIFs in Photoshop and re-optimise them every time a client wanted them faster or slower?

    For now the steps only divide the full length of the animation up. If you want different timings for different steps you still will need to create keyframes for each. Right now the steps feature works in Firefox and Webkit. Let’s hope others will follow, too.

  9. Where on earth? This month’s Developer Derby is all about geolocation.

    Another month, another Developer Derby. This month we want you to play with something that is not part of the HTML5 stack and we feel it doesn’t get the love it deserves from developers: the geolocation API. Firefox has supported this API for a long time and you can do some pretty cool things with it.

    So, what is the Geolocation API? In essence it allows you to detect where the user of your product is at the moment. The location data is found by different means: GPS location, mobile phone masts or wireless hub location. If you turn off wireless on your laptop and you have no 3G connectivity, the API will not be able to get any data.

    Using geolocation is incredibly simple. You ask the browser to tell you what the current location is with a method on the navigator.geolocation object:

      { parameters }

    Where success is the function that is called when the browser found a location, failure is the function called when there was an error and properties is an object that can contain a few parameters. The parameters are the Boolean enableHighAccuracy, the maximumAge of the location before the browser should ask for a new one and the timeout in milliseconds after which the browser should stop trying to find a location.

    Each function (success and failure) get a parameter with which to do your coding magic. The success function will get a location object when everything went well. This location object has the following properties: A timestamp telling you when the reading was done and a coordinates object with the following properties: accuracy, altitude, altitudeAccuracy, heading, latitude, longitude and speed.

    Some of these are dependent on having more than one reading as for example heading and speed are calculated from the distance in latitude and longitude from reading to reading.

    On Firefox you have an extra object called address which is the result of reverse geocoding the latitude and longitude. Reverse geocoding is normally done with an API but in the case of Firefox we have it baked in. When I currently do a call to getCurrentPosition I get the following result on Firefox:

    Timestamp: 1315378919289
        Accuracy: 18000
        Altitude: 0
        AltitudeAccuracy: 0
        Heading: NaN
        Latitude: 50.06465
        Longitude: 19.94498
        Speed: NaN
        City: Kraków
        Country: Poland
        CountryCode: PL
        County: Kraków County
        Postal Code: null
        Premises: null
        Street: Lubicz
        Street Number: 1

    You can Run this test for yourself and see the code here on JSFiddle:

    The failure function gets an error object with a code property. This property can have three values: 1 is a permission denied error, 2 is a position unavailable error and 3 is a timeout.

    In addition to the getCurrentPosition method you also have a watchPosition method which keeps firing when a new location was found. The parameters are the same and when you keep reading (for example on a mobile device) then you will get values for the heading and the speed. You can stop watching the position change using the clearWatch method.

    Using watchPosition is very cool when you are on the go. Check the Geolocation demo page and turn the watch position on and off with the button on the bottom.

    In essence, this is what the map app on your mobile phone does.

    What can you do with this?

    Well, what you get is a latitude and longitude of your end user. This can be used with all kind of geo platforms like for example GeoNames to find places of interest around you.

    You could also allow people to set markers for their friends on a map, collaboratively paint with them, find photos, tweets or foursquare checkins around you – a lot is possible when you come from lat/lon.


    We will also soon run a webinar on geolocation, stay tuned!

    Happy hacking!

  10. Detecting and generating CSS animations in JavaScript

    When writing of the hypnotic spiral demo the issue appeared that I wanted to use CSS animation when possible but have a fallback to rotate an element. As I didn’t want to rely on CSS animation I also considered it pointless to write it by hand but instead create it with JavaScript when the browser supports it. Here’s how that is done.

    Testing for the support of animations means testing if the style attribute is supported:

    var animation = false,
        animationstring = 'animation',
        keyframeprefix = '',
        domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
        pfx  = '';
    if( ) { animation = true; }    
    if( animation === false ) {
      for( var i = 0; i < domPrefixes.length; i++ ) {
        if([ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
          pfx = domPrefixes[ i ];
          animationstring = pfx + 'Animation';
          keyframeprefix = '-' + pfx.toLowerCase() + '-';
          animation = true;

    [Update - the earlier code did not check if the browser supports animation without a prefix - this one does]

    This checks if the browser supports animation without any prefixes. If it does, the animation string will be ‘animation’ and there is no need for any keyframe prefixes. If it doesn’t then we go through all the browser prefixes (to date :)) and check if there is a property on the style collection called browser prefix + AnimationName. If there is, the loop exits and we define the right animation string and keyframe prefix and set animation to true. On Firefox this will result in MozAnimation and -moz- and on Chrome in WebkitAnimation and -webkit- so on. This we can then use to create a new CSS animation in JavaScript. If none of the prefix checks return a supported style property we animate in an alternative fashion.

    if( animation === false ) {
      // animate in JavaScript fallback
    } else {[ animationstring ] = 'rotate 1s linear infinite';
      var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
                        'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
                        'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
      if( document.styleSheets && document.styleSheets.length ) {
          document.styleSheets[0].insertRule( keyframes, 0 );
      } else {
        var s = document.createElement( 'style' );
        s.innerHTML = keyframes;
        document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );

    With the animation string defined we can set a (shortcut notation) animation on our element. Now, adding the keyframes is trickier. As they are not part of the original Animation but disconnected from it in the CSS syntax (to give them more flexibility and allow re-use) we can’t set them in JavaScript. Instead we need to write them out as a CSS string.

    If there is already a style sheet applied to the document we add this keyframe definition string to that one, if there isn’t a style sheet available we create a new style block with our keyframe and add it to the document.

    You can see the detection in action and a fallback JavaScript solution on JSFiddle:

    JSFiddle demo.

    Quite simple, but also a bit more complex than I originally thought. You can also dynamically detect and change current animations as this post by Wayne Pan and this demo by Joe Lambert explains but this also seems quite verbose.

    I’d love to have a CSSAnimations collection for example where you could store different animations in JSON or as a string and have their name as the key. Right now, creating a new rule dynamically and adding it either to the document or append it to the ruleset seems to be the only cross-browser way. Thoughts?