This month, the Dev Derby is about Orientation, and we look forward to some really interesting ideas and demos from you people! And if you’re not already the master of device orientation, you can read up on MDN in the article Detecting device orientation.

Prizes

Android mobile device

Winner gets an Android mobile device from Motorola or Samsung.

Rickshaw laptop bag

Runner-up gets a hand-crafted laptop messenger bag from Rickshaw.

MDN t-shirt

3rd place gets a limited edition MDN t-shirt to show off their geek cred.

And as if that wasn’t enough, your demo will be showcased in Mozilla’s Demo Studio, and we would like to feature you in an article here on Mozilla Hacks as well!

So, what are you waiting for? :-)

Submit your demo now!

Topics covered

We see this as a living document, and so far we have information on topics like JavaScript, Feature and User Agent sniffing, Testing, Web browser-specific features and Code hygiene.

Complete contents

The complete content listing is:

• JavaScript
  • Prefix all global variable access in onfoo attributes with “window.”
  • Don’t concatenate scripts you don’t control
  • Ask the authors of any JavaScript libraries you use to also follow these guidelines
• Sniffing
  • Sniff for specific features
  • Don’t UA-sniff
    • If you have to UA-sniff, only sniff for past browser versions
  • Don’t unnecessarily create separate codepaths for different browsers
• Testing
  • Test with all major engines
• Browser-specific features and prefixes
  • Don’t target hacks at current or future versions of browsers
  • Avoid depending on cutting-edge nonstandard features
  • When using cutting-edge features (even standard ones) that are not universally implemented, make sure to test fallback paths
  • Don’t use vendor-prefixed features except to target old buggy versions
  • Don’t use unprefixed versions of CSS properties or APIs until at least one browser supports them
• Code hygiene
  • Avoid missing >
  • Don’t leave experiments that didn’t work in your code

Contribute!

Please let us remind you that MDN is a community effort, and that you are free to edit the wiki and come up with useful and informative additions.

We look forward to your ideas!

Weekly links December 8th 2011

If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean.
The picks this week are:

Christian Heilmann

After showing off a folding cube done in CSS3 transitions and 3D transformations, Cameron Adams upped the ante with his Dodecahedron. Can you top that? (needs Webkit/Aurora, in case you wonder).

If you want to read more tips or discuss the web with Christian, he’s available on Twitter as @codepo8.

Havi Hoffman

Here’s a recap of last Friday’s WebGLCamp #4, which gives a great feel for state-of-the-art WebGL and the vibrant WebGL community of technologists, entrepreneurs, implementers, and experimenters.

Havi can be found on Twitter as @freshelectrons

Janet Swisher

Stage 2 of the Badges for Lifelong Learning competition, sponsored by Mozilla, HASTAC, and the MacArthur Foundation, is now open. Propose a design for a concrete badge system based on Mozilla’s Open Badges infrastructure.

If you want to read more tips or discuss the web with Janet, she’s available on Twitter as @jmswisher.

Jeff Griffiths

Some sweet UI polish mock-ups of Firefox mobile from Madhava Enros.

If you want to read more tips or discuss the web with Jeff, he’s available on Twitter as @canuckistani.

Luke Crouch

“Native pressures push the Web forward; the Web pressures native Apps” Scott Hanselman: Apps are too much like 1990’s CD-ROMs and not enough like the web.

If you want to read more tips or discuss the web with Luke, he’s available on Twitter as @groovecoder.

Rob Hawkes

Docco is a tool for creating beautifully designed “literate programming-style” documentation. The formatting of the documentation can be changed through the use of Markdown within your code comments.

If you want to read more tips or discuss the web with Rob, he’s available on Twitter as @robhawkes.

Robert Nyman

The Exporter – Free your data on Twitter, Gowalla, Facebook, Google+, LinkedIn and Foursquare.

If you want to read more tips or discuss the web with Robert, he’s available on Twitter as @robertnyman.

You can see this in action using Chrome, Safari or Firefox Aurora/Nightly. Older browsers should just show a normal roll-over (and yes, the first example looks weird due to the logo transparency but it makes the effect much cooler in supporting browsers).

As people asked how this is done I thought it easiest to create a testing tool where you can play with 3D CSS yourself. Here’s a screencast where I explain how to use it and how the roll-over effects were done.

I found a few interesting bugs while creating this and will file them now. This is the benefit of playing with new tech. Enjoy!

More reading on this:

• An introduction to CSS 3D transforms
• 3D transforms at surfin safari
• The W3C draft spec

For this challenge, developers submitted 15 demos to show what you can do with CSS Media Queries. Check them out so see how they present unique styles and layouts in response to changes in viewing area.

It was a fairly close race, so join us in congratulating the winners circle:

1st Place: CSS3 Cherry Blossom – Media queries by elufo
2nd Place: Santa’s Media Queries by tuxie
3rd Place: Too many fish is the sea by michal.b

Runners-up:
Responsive 3D-Models For Any Device
Spriting with CSS Media Queries

Thanks to everyone that participated in the October Dev Derby! Only a couple of days left to participate in the November Dev Derby, so get your Canvas demos in now. Otherwise, start experimenting with IndexedDB for December.

NOTE: We recently updated our Dev Derby rules to allow developers to participate in multiple contests until they win 1st place. That means if you’ve submitted awesome demos and come up short in the past, you still have a chance to win that top spot in future Dev Derbies… so keep those demos coming!

Native developer tools in Firefox

We are working on building a great set of developer tools for you included in Firefox. They are described much more in detail in Developer Tools in Firefox Aurora 10 and there are some very interesting implications for what we can accomplish with them!

We are evaluating and experimenting with a number of user interfaces and code approaches to try and find the most optimal ways to work with code in a page. If you install Firefox Aurora you can try them out right now! Let us know what you think.

Also stay tuned to this blog, since we will post updates on progress and features for the native Developer Tools.

Firebug

By far, the most well-known web developer tool in a web browser is the Firebug extension, and without a doubt, for a long time it set the bar for how web developing and debugging should be. Firebug is still a very important tool with lots of powerful features, including a vast number of extensions (see below).

Just something you need to be aware of, though, is with everything that Firebug offers it can be quite heavy when it comes to consuming memory, so use it accordingly.

Firefox extensions for web developers

Over the years, a lot of extensions have been developed to help web developers utilize Firefox to the maximum. Some of the most used and well-known are these ones, but please let us know if we have missed any that helps you!

Firebug extensions

There exists a lot of extensions for Firebug for a number of different use cases, and a number of them are listed here:

There are even more extensions available for Firebug, available in the Firebug Extensions wiki.

The image example is pretty simple and was actually written by Paul Rouget as a demo in the original Firefox bug request. The main core is the HTML of it:

<section id="noninteractive" contextmenu="imagemenu">
 
  <img src="html5.png" alt="HTML5" id="menudemo">
 
    <menu type="context" id="imagemenu">
      <menuitem label="rotate" onclick="rotate()"
                icon="arrow_rotate_clockwise.png">
      </menuitem>
      <menuitem label="resize" onclick="resize()"
                icon="image-resize.png">
      </menuitem>
      <menu label="share">
        <menuitem label="twitter" onclick="alert('not yet')"></menuitem>
        <menuitem label="facebook" onclick="alert('not yet')"></menuitem>
      </menu>
    </menu>
 
</section>

As you can see you link the menu element to an element via its ID. The contextmenu attribute then points to this one. Each menu can have several menuitems. Each of those gets a textual label and a possible icon. You can also nest menu elements to create multiple layer menus. Here, we add inline onclick handlers to point to different JavaScript functions to call when the menu item gets activated. The resulting context menu looks like this:

The functionality is simple, all the rotate() and resize() functions do is add class names to the image using querySelector and classList:

function rotate() {
  document.querySelector('#menudemo').classList.toggle('rotate'); 
}
function resize() {   
  document.querySelector('#menudemo').classList.toggle('resize'); 
}

The real effect is in CSS transforms and transitions. As the image has an ID of menudemo here is what is needed in CSS to rotate and resize:

#menudemo { 
  -moz-transition: 0.2s; 
  width:200px;
}
#menudemo.rotate { 
  -moz-transform: rotate(90deg); 
}
#menudemo.resize { 
  -moz-transform: scale(0.7); 
}
#menudemo.resize.rotate { 
  -moz-transform: scale(0.7) rotate(90deg); 
}

Notice that in a real product we should of course add the other browser prefixes and go prefix-less but as the functionality now only works in Firefox, this is enough for this demo.

Detecting support and visual hinting

Now, as this is extending the normal user offerings in the browser we need to make it obvious that there is a right-click menu available. In CSS3, there is a context-menu cursor available to us. When context menus are available, this should be shown:

.contextmenu #menudemo, .contextmenu .demo {
  cursor: context-menu;
}

We test the browser for support by checking for contextmenu on the body element and for HTMLMenuItemElement in the window (this has been added as a pull request to Modernizr, too).

if ('contextMenu' in document.body && 'HTMLMenuItemElement' in window) {
  document.documentElement.classList.add('contextmenu');
} else {
  return;
}

Wouldn’t HTMLMenuItemElement be enough? Yes, but a real context menu should only offer functionality when it is sensible, and that is where contextMenu comes in.

Turning menuitems on and off depending on functionality

As a slightly more complex example, let’s add a “count words” functionality to the document. For this, we generate a counter element that will become a tooltip when the words were counted:

var counter = document.createElement('span');
counter.id = 'counter';
counter.className = 'hide';
document.body.appendChild(counter);
 
counter.addEventListener('click', function(ev){
  this.className = 'hide';
},false);

This one is hidden by default and becomes visible when the hide class is removed. To make it smooth, we use a transition:

#counter{
  position: absolute;
  background: rgba(0,0,0,0.7);
  padding:.5em 1em;
  color: #fff;
  font-weight:bold;
  border-radius: 5px;
  -moz-transition: opacity 0.4s;
}
#counter.hide{
  opacity: 0;
}

We start with two sections with context menus:

<section id="noninteractive" contextmenu="countmenu">
  <menu type="context" id="countmenu">
      <menuitem class="wordcount" label="count words"></menuitem>
  </menu>
</section>
 
<section id="interactive" contextmenu="countmenuinteractive">
  <menu type="context" id="countmenuinteractive">
      <menuitem class="wordcount" label="count words"></menuitem>
  </menu>
</section>

We then loop through all the menuitems with the class wordcount and apply the functionality.

var wordcountmenus = document.querySelectorAll('.wordcount'),
    i = wordcountmenus.length;
 
while (i--) {
  wordcountmenus[i].addEventListener('click', function(ev){
    // add functionality 
  }, false);
}

We need to find out what has been selected in the page. We do this by using getSelection() and splitting its string version at whitespace. We then show the counter by removing the hide class name.

var wordcountmenus = document.querySelectorAll('.wordcount'),
    i = wordcountmenus.length;
 
while (i--) {
  wordcountmenus[i].addEventListener('click', function(ev){
    var text = document.getSelection(),
        count = text.toString().split(/\s/).length;
    counter.innerHTML = count + ' words';
    counter.className = '';
  }, false);
}

You can see this in action in the second context menu demo. Now, the issue with this (as explained in the screencast) is that it always counts the words, regardless of the user having selected some text. What we want is the menu only to be active when there is text selected.

So in order to make our menu only become available when it makes sense we check if there is a selection in the document. Every context menu fires an event called contextmenu when it opens. So all we need to do is to subscribe to this event.

When something is selected in the document document.getSelection().isCollapsed is true. Otherwise it is false, so all we need to do is to enable or disable the menu item accordingly:

document.querySelector('#interactive').addEventListener(
  'contextmenu', function(ev) {
    this.querySelector('.wordcount').disabled =
    document.getSelection().isCollapsed;  
  },
false);

The last thing to solve is the position of the mouse to position the counter element. As the menu selection event doesn’t give us the mouse position we need to add a contextmenu handler to the whole document that positions the counter invisibly behind the menu when it is opened:

document.body.addEventListener(
  'contextmenu', function(ev) {
    counter.style.left = ev.pageX + 'px';
    counter.style.top = ev.pageY + 'px';
    counter.className = 'hide';
  }, 
false);

Further reading and resources

• The full code demo
• The Firefox bug request with lots of discussion
• Context Menus on the WHATWG
• A longer discussion on Google+ about context menus
• A jQuery Polyfill for contextmenu

The screencast is on YouTube:

The main procedure to achieve the effect is simple. First we need a semantically valuable way to show these images, in our case a HTML list with figures and figcaptions. Notice that images still need an alternative text as the figcaption can apply to several images:

<ul>
  <li class="image3d">
    <figure>
      <img src="mittens.jpg" alt="Mittens the cat">
      <figcaption>
        <p>
          <strong>Mittens</strong> loves to play with yarn and stuff.
        </p>
      </figcaption>
    </figure>
  </li>
<!-- repeated -->
</ul>

We then position the caption absolutely inside the list item, give the list item dimensions and an overflow of hidden and move the caption outside of the visible space. When the user hovers over the list item (or focuses it with a keyboard) we move the caption to the right place and lower the opacity of the image.

.positioned {
  list-style: none;
  width: 300px;
  height: 200px;
  position: relative;
}
.positioned figcaption {
  position: absolute;
  background: rgba( 0, 0, 0, 0.7 );
  color: #fff;
  border-radius: 5px;
  left: 65px;
  bottom: 10px;
  width: 230px;
}
.positioned img {
  opacity:0.4 ;    
}
.positioned figcaption strong {
  display: block;
  color: lime;
  font-weight: normal;
  font-size:22px;
  padding: 5px 0;
}
.positioned figcaption p {
  display: block;
  color: white;
  padding: 5px;
}
.interactive {
  overflow: hidden;
}
.interactive img {
  opacity: 1;
}
.interactive figcaption {
  left: 300px;
}  
.interactive:hover img, .interactive:focus img {
  opacity: 0.4;
}
.interactive:hover figcaption, .interactive:focus figcaption {
  left: 75px;
}

We make the effect smooth by adding transitions. Notice that it makes sense to list all the browser prefixes and set a prefix-less fallback. That way we don’t need to re-write code when a new browser supports them.

.smooth img {
  -webkit-transition: all 1s;
  -moz-transition:    all 1s;
  -o-transition:      all 1s;
  -ms-transition:     all 1s;
  transition:         all 1s;
}
.smooth figcaption {
  -webkit-transition: all 1s;
  -moz-transition:    all 1s;
  -ms-transition:     all 1s;
  -o-transition:      all 1s;
  transition:         all 1s;
}

In order to rotate the kitty in 3D space, we need to give the list item a perspective and rotate the image and shift it in 3D space with translate3D to avoid clipping:

.threed {
  -webkit-perspective: 800px;
  -moz-perspective:    800px;
  -ms-perspective:     800px;
  -o-perspective:      800px;
  perspective:         800px;
}
.threed:hover img, .threed:focus img {
  -webkit-transform: rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
  -moz-transform:    rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
  -o-transform:      rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
  -ms-transform:     rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
  transform:         rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
}

That’s it. By adding all the browser prefixes, falling back to a simple rollover and by making sure you do the effect on hover and on focus you support all the browsers and bring the cool to the newest ones.

More reading and resources:

• Standalone example
• Step-by-step example
• GitHub source
• Detailed blog post

Weekly links November 3rd 2011

If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other mean.
The picks this week are:

Christian Heilmann

Animatable (not to be mixed up with the tool powering Madmanimation) is collection of CSS animations for different attributes. See all the possibilities.

If you want to read more tips or discuss the web with Christian, he’s available on Twitter as @codepo8.

Havi Hoffman

Whether you’re building an app or naming a project, two very geeky takes on what’s in a name. One from Paul Graham and one called Nominology, that scores on “greppability” among other parameters.

If you want to read more tips or discuss the web with Havi, she’s available on Twitter as @freshelectrons

Jeff Griffiths

Every Time Zone is a really nice visualization of timezones and current time.

If you want to read more tips or discuss the web with Jeff, he’s available on Twitter as @canuckistani.

Joe Stagner

IndexedDB is a powerful model for local data storage in Web Apps – read the spec here and see demos.

If you want to read more tips or discuss the web with Joe, he’s available on Twitter as @MisfitGeek.

Rob Hawkes

In Implementing Mouse Lock David Humphrey talks about how he’s going to implement the Mouse Lock API. What’s most interesting about this is that he’s going to get his students at Seneca to help implement it.

If you want to read more tips or discuss the web with Rob, he’s available on Twitter as @robhawkes.

Robert Nyman

Broadway.js – It’s a H.264 video implementation compiled to JavaScript, 30fps. Take a look at the JS/H.264 demo video.

If you want to read more tips or discuss the web with Robert, he’s available on Twitter as @robertnyman.

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

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!

JavaScript Type Inference

We’ve improved JavaScript performance once again with type inference. We’ve made significant improvements on both the V8 and Kraken benchmarks, and you should see real-world improvements to JavaScript performance as well.

JavaScript Interface for Do Not Track

Firefox 4 introduced Do Not Track, and now there is a way to detect a users’prefence through JavaScript as well:

mouseenter and mouseleave events

For some time now, web developers have been struggling with handling mouseover and mouseout events on elements, since when child elements have gained focus, the event has bubbled up and triggered mouseout on the parent element – something you would in most cases not like to happen.

Therefore, we are now happy to introduce support for mouseenter and mouseleave events:

Camera UI for Mobile

You can now use an input element to trigger a native app to take pictures. Please try the Camera UI for Mobile demo.

Support for chunked XMLHttpRequest

When doing XMLHttpRequest requests with large data sets, you can now get partial data as it arrives instead of waiting for it all to show up. You can use this to build more responsive and more efficient web sites.

Other changes

We’ve also got support for a bunch of other changes as well. These will be added to the Firefox 9 for Developers page over the next few weeks.

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.

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

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

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.

Setting a great example, the video of my talk was livestreamed and available directly after as a clip on the web:

Note: The audio is unfortunately not working as supposed in a couple of places.

To complement that, here are the slides:

Download the slides on SlideShare.

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:

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?

My presentations

I gave two presentations during the evening:

HTML5 – The 2012 of the Web

The idea of my first presentation was to give an overview of HTML5 features and cover both possibilities and pitfalls they bring us:

HTML5 – The 2012 of the Web slides, on SlideShare

I went through what is encompassed in the term HTML5 – which I broadly believe are semantic improvements and new APIs. I spoke about new elements, how the doctype choice affects rendering and how you can easily specify the charset of the document. After that I covered new HTML5 form types, elements and attributes. I moved on to what I believe are some of the more important APIs and then talking about video and canvas and WebGL.

The talk was concluded by going through some of the most common questions and worries around HTML5 and to inspire people to try it out, and let specification writers and web browser vendors know what’s working well, and what is not.

HTML5 and CSS3 – exploring mobile possibilities

The second presentation went more into HTML5 features that are extra useful for mobile devices – such as offline applications – and link protocols for calls and text messages and tools for developing on mobile devices. I also covered a number of CSS3 options we have:

HTML5 and CSS3 – exploring mobile possibilities slides, on SlideShare

James is the tech lead for mozilla.com on the Web Development team. James is passionate about interactive graphics on the open web.

Today he explains how you can create 3D objects using CSS without having 3D transforms support. Take it away, James.

Recently I was tinkering with CSS3 and I discovered that it enabled me to do primitive 3D rendering, which I found fascinating! This led to the creation of dom3d, a JavaScript library that uses CSS to render basic 3D objects.

Now the question is: why? Aren’t canvas, WebGL, and even SVG better technologies to work with for this? Possibly. However, CSS is becoming a powerful language for describing complex effects and shapes, and we should experiment.

Keep that in mind, because CSS definitely isn’t intended to do this, but it’s worth trying to see where we should take CSS in the future.

Advantages

Although this is more of an experiment, it has a few real world benefits:

All rendering libraries available for the web (canvas, WebGL, SVG) require a canvas, which is a constrained box on the page with a specific width and height. It is not possible to render anything outside this box. The canvas also captures all DOM events (like clicks), even completely transparent sections. Theoretically, this could make it difficult to do effects that overlay large parts of the page or are somehow deeply integrated to the content.

Using CSS, we aren’t constrained to a box, and the effect can overlay large portions of the page without covering any the the links or other content requiring interaction.

Other advantages include no need to initialize canvas 2D or WebGL, and a simplistic API making it easy to pick up even if you don’t know much about 3D. It might be easier for kids to start playing around with this before they jump into WebGL or something else. Also, because it’s just a dump of DOM elements you can embed it anywhere (without animation).

So keep in mind that this is a hack, but with the above advantages. This might be good for certain effects: 3D cursor, nav transitions, and others.

How it works

Three-D objects are just a bunch of triangles put together, so let’s start with one simple triangle. If we get that working, it’s a simple step forward to render multiple triangles to form a 3D object.

Rendering a 3d triangle on a 2D screen involves something called “projection”. This is the act of taking a 3D point and projecting it onto a 2D screen. Plug in a 3D triangle to a simple math equation, and you get a 2D triangle representing how the 3D one would look on the screen.

The math is remarkably simple but may seem weird if you aren’t familiar with linear algebra. You can take a look at the renderer code.

Now comes the fun part: can you render any 2D triangle simply with CSS3 transforms? Turns out you can! It just takes some fiddling to figure out which transforms to generate. CSS3 transforms are composed of translate, scale, rotate, and skew values, and we need a few equations to compute these values for a specific 2D triangle.

First, let’s take a simple DOM element and turn it into a triangle. We can do this with the linear-gradient background image (another way is border triangles).

Now let’s draw the following blue triangle with the points [20, 20], [50, 120], and [120, 30]. A vital step is to set a few initial reference points which set everything in the same space. Our equations will assume these coordinate spaces. This is how the points A, B, C and the side AB are related.

If we take a closer look at this, we can derive the transform values. First, get an idea of which angles and values we need and then use geometry to form the equations (in pseudo-code). The red box represents the DOM element, the form AB represents the side formed by points A and B, and rotation occurs clockwise.

rotation = atan2(AB.x, AB.y)
AC' = rotate(AC, -rotation)
width = AC'.x
height = length(AB)
skew = atan2(AC'.y, AC'.x)
translate = A

Awesome! Let’s try it out. Here is a live DOM element being transformed by applying each of our equations:

The resulting triangle matches our target triangle! Here is the final CSS:

width: 93px;
height: 104px;
background: -moz-linear-gradient(-0.727211rad, #0000FF 50%, transparent 0pt);
-moz-transform: translate(20px, 20px) rotate(-0.291457rad) skewY(0.391125rad);
-moz-transform-origin: top left;

Note: The tranform-origin: top left line is important. Normally transforms happen relative to the center of the element, but our equations assume the top left.

Note: dom3d also generates code with the -webkit and -o prefixes for WebKit and Opera support.

You can view the implementation of these equations. It turns out that these equations work for any triangle, as long as the points given are in counter-clockwise order, which is standard in the graphics world.

Taking it all the way

Since we can project a 3D triangle into 2D space and render it with CSS, all we have to do now is apply that to several 3D triangles to form a 3D object!

We need some 3D data at this point. I used Blender to export a teapot into the simple OBJ file format and wrote a script to dump the data as JavaScript. Rendering all those triangles with this technique produces the following:

Teapot! However, we can do much better. A big part of the 3D effect is shading. If we calculate normals, a vector representing where the triangle is facing, and specify a light direction, we can take the dot product of the normal and light for each triangle to get flat shading. View the code for flat shading.

There are many tweaks that take this even further. For example, the above objects have z-indexing enabled. Without this, a triangle that is supposed to be behind another may actually appear on top because it was rendered later. The dom3d uses a heap to render the triangles from back to front.

Real-time animation can be achieved with a setTimeout or requestAnimationFrame function that continually renders the object. The dom3d supports the scale, translate, yaw, and pitch transformations, but there’s nothing stopping you from modifying the object data however you like between renderings. See some examples over at the dom3d website.

Here is the code which renders the teapot animation with dom3d:

It’s more appropriate for webpages to update an animation in response to user interaction instead of constantly rendering and hogging the CPU. See the pole example on the dom3d site for an example.

Improvements and last thoughts

The most interesting possibility with this is to include actual page elements as part of 3D objects. A navigation item could pop out and swirl around in 3d space, and the nav item is seamlessly transformed along with it.

That’s where this hack starts to show its faults, though. Unfortunately this is a little too hacky to provide an appropriate web experience. Because it tricks DIVs into fake triangles, it removes the possibility of integrating any page elements with it. With the coming of 3D CSS transforms though, we can start building true 3D objects made up of any kind of page elements. The only restriction with 3D transforms is that the 3D objects need to built with rectangles instead of triangles.

Other people have already experimented with 3D transforms, like building a pure CSS 3D city. There’s another cool library, Sprite3D, which provides a JavaScript API for building basic 3d objects from page elements.

The most glaring problem with dom3d is the seams in the object, which appear in all browsers. Apparently there are a few bugs in rendering engines when stressing their CSS3 transforms and using linear-gradients!

The dom3d library provides an API to work with all of this, but is hasn’t been documented very well yet. Feel free to browse the README and code on github. These APIs could be improved as well. It also provides an SVG rendering backend, seen here, but I don’t this is the right direction to take. We should focus on building basic 3D objects with page elements.

This was a fun experiment and I’m excited by how fast and capable browsers are becoming. The web is an exciting platform and getting richer and more powerful every year!

Early fan favorites included Rofox CSS3 and CSS Nyan Cat, which remain among the most viewed on Demo Studio.

While all the demos were amazing, we had a tough task in narrowing down the submissions to 5 finalists based on our judging criteria. After careful review and feedback, the following demos surfaced as candidates for our final round of voting:

Animated menu icons
Auto-run photo album
BATTLEFIELD CSS3
CSS Tricks
Plan B – Retro Demo

With those 5 demos left in the running, we brought in our expert judges and a few members of the Mozilla team to vote on the finalists. Judges rated each demo on a scale of 1 – 5 across the following dimensions:

• Technology – Does the demo showcase the power of open Web technologies?
• Originality – How innovative and unique is the demo?
• Aesthetics – How good is the visual design and interaction experience?
• Practicality – How useful is this demo in enhancing the Web today?

It was a close race and we’re excited to announce that the winners of the June Dev Derby are:

1st Place: CSS Tricks by Mircea Piturca.
2nd Place: Animated menu icons by Koen Hendrix.
3rd Place: Plan B – Retro Demo by matt64.

Runners-up:
Auto-run photo album
BATTLEFIELD CSS3

Thanks to everyone that submitted their awesome demos for the June Dev Derby. Up next we have HTML5 video for July, History API for August and Geolocation for September. We look forward to seeing even more great submissions for July and beyond! Hack on.

Short introduction of me

Being my first post here at Mozilla Hacks, I thought I’d start by briefly introducing myself first: My name is Robert Nyman and I’ve recently joined Mozilla as a Technical Evangelist, talking about HTML5, the Open Web and how we can help web developers. I’ve been working since 1999 with Front End development for the web, and I regularly blog at http://robertnyman.com, tweet as @robertnyman and love to travel and meet people!

The London Ajax Mobile Event

The conference took place at the Vodafone headquarters in London, arranged by Sitepen CEO and Dojo co-founder Dylan Schiemann. It was packed to the brim with speakers, from early morning raging on into the night. Various talks were given on a number of topics – from mobile apps and implementations to a more experimenting approach and future visions.

My presentation

You can see the slides from my HTML5 and CSS3: Exploring Mobile Possibilities below or download the slides at SlideShare

The aim of my talk was to give both an introduction and reiterate on some of the important options we have when developing web sites, especially when it comes to the mobile world. With the CSS3 field I covered CSS Media Queries and Flex Box and the options they give us in creating more flexible layouts and presentation alternatives. I also spoke about CSS Transitions and Animations and how they can assist in an easy manner to get nice effects, that are also hardware-accelerated on certain devices.

When it comes to the HTML5 part, I’m excited by all the new HTML5 form elements and how they can improve both user experience and the input of data. As support grows for this in web browsers, I believe it will make things a lot easier for both developers and end users.

I briefly touched on link protocols, such as tel: and sms:, to trigger mobile-specific actions when activating a link, and then various useful APIs such as Web Storage, Offline Applications, History API and Geolocation (not all necessary official HTML5 APIs, but usually used in conjunction with them).

I ended the talk with touching on tool such as Steve Souders’ Mobile Perf bookmarklet and weinre, for remote debugging on mobile devices.

You and mobile

What I am interested in is if you are developing for a multitude of mobile and other devices, what you believe are the biggest obstacles as well as the most promising options. Any thoughts, please let me know!

Download Aurora

Keeping up the pace with our new development cycle, today we release Aurora 7. Enjoy its new features and performance improvements: CSS “text-overflow: ellipsis“, Navigation Timing API, reduced memory usage, a faster javascript parser, and the first steps of Azure, our new graphics API.

text-overflow: ellipsis;

It is now possible to get Firefox to display “…” to give a visual clue that a text is longer than the element containing it.

At last, with text-overflow implemented in Aurora 7 it’s now possible to create a cross-browser ellipsis!

Navigation Timing

Performance is a key parameter of the user experience on the Web. To help Web developers monitor efficiently the performance of their Web pages, Aurora 7 implements the Navigation Timing specification: using the window.performance.timing object, developers will be able to know the time when different navigation steps (such as navigationStart, connectStart/End, responseStart/End, domLoading/Complete) happened and deduce how long one step or a sequence of steps took to complete.

Reduced Memory Usage

Our continuous efforts to monitor and reduce memory consumption in Firefox will substantially pay off with Aurora 7:

• The memory “zone” where javascript objects reside gets fragmented as objects are created and deleted. To reduce the negative impact of this fragmentation, long-lived objects created by the browser’s own UI have been separated from the objects created by Web pages. The browser can now free memory more efficiently when a tab is closed or after a garbage collection.
• Speaking of garbage collection, as we successfully reduced the cost of this operation, we are able to execute it more often. Not only is memory freed more rapidly, but this also leads to shorter GC pauses(the period where javascript execution stops to let the garbage collector do his job, which is sometime noticeable during heavy animations).
• All those improvements are reflected in the about:memory page, which is now able to tell how much memory a particular Web page or the browser’s own UI, is using.

More frequent updates and detailed explanations of the memshrink effort are posted on Nicholas Nethercote’s blog.

Faster Javascript Parsing

A javascript parser is the part of the browser that reads the javascript before it gets executed by the javascript engine. With modern Web applications such as Gmail or Facebook sending close to 1Mb of javascript, being able to still read all of that code instantly matters in the quest of responsive user experience.
Thanks to Nicholas’s work, our parser is now almost twice as fast as it used to. This adds up well with our constant work to improve the execution speed of our javascript engine.

First Steps of Azure

After the layout engine (Gecko) has computed the visual appearance (position, dimension, colors, …) of all elements in the window, the browser asks the Operating System to actually draw them on the screen. The browser needs an abstraction layer to be able to talk to the different graphics libraries of the different OSes, but this layer has to be as thin and as adaptable as possible to deliver the promises of hardware acceleration.
Azure is the name of the new and better graphics API/abstraction layer that is going to gradually replace Cairo in hardware accelerated environments. In Aurora 7, it is already able to interact with Windows 7′s Direct2D API to render the content of a <canvas> element (in a 2D context). You can read a detailed explanation of the Azure project and its next steps on Joe Drew’s blog.

Other Improvements