Mozilla

Articles by Chris Heilmann

Sort by:

View:

  1. 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 archive.org.

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

  2. 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 form.style) {
          support = true;
          pfx = props[i].replace('Perspective','');
          pfx = pfx.toLowerCase();
          break;
        }
        i++;
      } 
      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;
      document.querySelector('head').appendChild(styles);
    }

    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 bugzilla.mozilla.org!

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

  3. 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 archive.org

  4. 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 archive.org.

    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.

  5. 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 vid.ly).

  6. 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.

  7. 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:

    navigator.geolocation.getCurrentPosition(
      success,
      failure,
      { 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
    Coordinates:
        Accuracy: 18000
        Altitude: 0
        AltitudeAccuracy: 0
        Heading: NaN
        Latitude: 50.06465
        Longitude: 19.94498
        Speed: NaN
    
    Address:
        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.

    Resources

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

    Happy hacking!

  8. 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( elm.style.animationName ) { animation = true; }    
     
    if( animation === false ) {
      for( var i = 0; i < domPrefixes.length; i++ ) {
        if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
          pfx = domPrefixes[ i ];
          animationstring = pfx + 'Animation';
          keyframeprefix = '-' + pfx.toLowerCase() + '-';
          animation = true;
          break;
        }
      }
    }

    [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 {
      elm.style[ 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?

  9. Mozilla demoparty winners announced

    The Demoparty Online Competition 2011 is part of the Mozilla Labs Demoparty Project, an initiative to foster artful exploration of open web technologies.

    We asked people from the demo scene to have a go at web technologies and (with WebGL being the absolute winner of course) managed to collect over 100 submissions. Now the judges have spoken and we picked the winners in the categories of Main Demo, Single Effect, Audio Demo, Animated GIF and pure CSS demo.

    Amongst other great examples of using technology in a purely creative way unhindered by real life application needs here are the winners of Demo and Single Effect:

    Main Demo: Akemi

    Single Effect: WebGL Water Simulation

    Demo Link or screen capture:

    We congratulate all the winners and thank all those who contributed. Playing with technology is a big part of making it interesting for everyone to use.

  10. People of HTML5 – Divya Manian

    HTML5 needs spokespeople to work. There are a lot of people out there who took on this role, and here at Mozilla we thought it is a good idea to introduce some of them to you with a series of interviews and short videos. The format is simple – we send the experts 10 questions to answer and then do a quick video interview to let them introduce themselves and ask for more detail on some of their answers.

    Divya Manian Today we are featuring Divya Manian, Web Opener at Opera Software.

    Most likely you came across Divya because of her involvement in HTML5 readiness and HTML5 Boilerplate. She is available on Twitter as @divya and is very much involved in the CSS standards working group.

    As you will see in the interview, Divya is a very pragmatic person when it comes to web standards and has a big passion for educating developers instead of woo-ing them.

    The video interview

    You can see the video on any HTML5 enabled device here (courtesy of vid.ly).

    10 Questions for Divya Manian

    1) I feel that right now is a terribly exciting time to be a web developer. Would you agree? What gets you really excited about the new tech we have to play with?

    Definitely. These are exciting times for a web developer. You have new tools to work with almost every other week and what your page is capable of doing has expanded significantly from just delivering static content to enabling real-time media streaming and more. We also have very strong developer tools for each browser: Opera’s Dragonfly, Chrome’s Developer Tools, IE Developer tools in addition to the original trail blazer Firebug. So, it is simultaneously easier and harder to develop for the web.

    2) Back in the days we very much preached separation of concerns as the right way to build web products. HTML is for structure, CSS for look and feel and JavaScript for behaviour. It seems to me that with new technologies this strict separation is blurring a bit. We can generated content in CSS and animate and transform. Some HTML5 elements do nothing without JavaScript (canvas being the big example). Do you think we need to re-visit our best practices?

    Yes, the new features do definitely make you think harder about what you put where, but they do enable a similar separation still, except there are nuances to be aware of when you do the separation.

    For example, I would consider animation with JavaScript as a way around the roadblock of not being able to do natively. Browsers are in a better position to control most of the animations that we require (animations for gaming are slightly different ballgame), and doing them natively would get us better performance in the long run.

    Personally, for me maintainability and writing something readable and that works well and efficiently is more important than just being driven to compartmentalise your code into HTML/CSS/JS.

    And definitely we do need to revisit our best practices every so often because technologies change and our best practices need to change with them, none of them are enshrined in stone and we should keep them relevant to our current set of features/technologies.

    3) In your post “This revolution needs new revolutionaries” you point out that a lot of the people who drive the web today are not the known luminaries of web design. Do you see a complacency in our advocacy of web standards?

    There are two concerns for me in that post:

    1. we are not hearing enough from people who have to deal with creating web applications that work in areas with poor internet connections, censorship, with content in languages that are not popular.

    2. There are not enough do-ers who are talking, we are hearing from the same people again and again on similar topics.

    I feel strongly about both, but more so about #2 because it impacts every web developer all over the world. There are changes that are occurring that most of them are unaware of, because word does not get out. I think we should do our best to encourage those who do actively seek to create tools, and help fellow web developers or work on interesting challenges for the web to speak and inspire rather than those who are known for their speaking abilities because ultimately we want people to use/work with what is best for the web and not just be informed of what was news 5 years ago.

    4) I found lately that collaboration is getting easier and easier. Tools like github, JSBin and JSFiddle allow you to talk about code and get your readers to fix and change things with you. I did that lately with getting bullet proof 90 degrees turned headlines for example. Why do you think not that many take advantage of that opportunity?

    I would be hesitant to say not many are taking advantage of these tools. They are, but it is true that not everyone is on the bandwagon yet. Github is certainly the most gentle and social introduction to version control you can get, but a lot of web developers are not programmers and have not seen enough pain and horror to know why version control systems are useful. It also requires knowing about what version control systems are, and how to use the command line (a bit), which might be scary for those who are just used to designing with IDEs or TextMate.

    5) CSS seems to be moving in leaps and bounds right now. I for one am very excited about the CSS element property which allows to take screenshots of elements. Are there any lesser known extensions you are fond of and use?

    I am not a big fan of vendor prefixes, and would rather see them quickly unprefixed rather than see more of the prefixes populating stylesheets more and more.

    That said, I do like a lot of the new properties that we are experimenting with. We have the obscure tab-size which allows you to control the width of the ‘tab’ character in your content. Pretty useful when you are displaying code.

    Opera also introduced the @viewport which will let you set the viewport from within your CSS rather than using meta tags (like <meta name=”viewport” content=”width=320″>). I think viewport belongs to CSS rather than markup, so I would love to see it gain adoption.

    Some of the less known properties such as box-sizing (unprefixed in Opera, IE 8+, Safari 5.1+, Chrome, prefixed in Firefox) are also invaluable, as they let you control your box model, which is definitely a revolutionary step from the dark days of trying to work with separate box models.

    6) When we had a longer chat before this interview we discussed that there seems to be a disconnect between what people show on stage at conferences and what people can use these days in their day-to-day jobs. Do you think we should remedy this? More hands-on stuff for people to use now rather than a “look what is possible” approach?

    I think what gets shown on stage is partly entertainment and partly information. I think it is hard to show “real hands-on” stuff without diving deep into it and losing half the audience while doing so. We need a balance for sure.

    7) When writing CSS these days I get very annoyed about having to repeat a lot of code with different browser prefixes. Animations are the worst with all keyframes having to be repeated. Do you use any preprocessors like SASS or LESS? What do you think of that approach?

    Yes, I was/am an early fan of Sass. I have been using it for 2.5 years (a lot less now as I do not deal with as much CSS as I would like to). I certainly think Sass/LESS would be the way to go forward for any web developer right now. They make CSS a lot more powerful and attempt to bring in programming paradigms that CSS sorely lacks. Attempts are being made by Tab Atkins at Google to bring these in a form of a proposal to the CSS WG, and hopefully we should see some form of support in the browser.

    I would definitely recommend doing it on the server side though, doing JIT compiling of such code would be such a disaster for performance.
    Especially today with so many vendor-prefixed extensions, not using such preprocessors would only cause more harm than not.

    8) You work for Opera, the browser that did implement the most of the HTML5 form elements. Why do you think others are reluctant to do the same? Do you think HTML5 forms are ready for prime time yet?

    It is certainly not true that others are reluctant. Chrome is pretty close to Opera in terms of support, and Firefox and IE10 are have various levels of support too. Yes, HTML5 forms need to be used with polyfills as of the moment, but I cannot wait for full support to land on all browsers so we can get beyond validating forms on the server.

    9) I get a feeling that there is a general fatigue of semantic matters in the HTML5 world. Showcases have no HTML at all or meaningless elements like DIVs as buttons and so on. Is it just not sexy enough when we can rotate things in 3D and make sounds?

    I am tired of semantics, too, really :) I think there is more to HTML5 than discussing when to use a section or a div or an article or an aside. Semantics are good to know about and learn to use, but we have had 15 years of talk about semantics surely we can go beyond that and learn about all the new stuff that occurs in HTML5 that will allow faster/more performant way to provide better experiences for your users.

    10) If you have a friend who just wants to start with web development, what would you tell them to do and go to? What is the most efficient way to get people hit the ground running these days?

    I would ask them to first hit the Opera Web Curriculum which has now moved to W3C – it is a wiki now so everyone is welcome to contribute to keep it up-to-date and relevant. Then I would highly recommend they refer to explanations and tutorials at the Mozilla Developer Center!

    Photo by Chris Casciano

    Do you know anyone I should interview for “People of HTML5″? Tell me on Twitter: @codepo8