Every since I played around with the sidebar here on the blog giving it a slight tilt in 3D I get a lot of questions how it was done. Well, there is no dark magic at play, just some 3D CSS transformations and a transition.

So I recorded a quick screencast showing you how it is done (also showing some of the Firefox devtools). You can see it on YouTube or in higher quality on vid.ly.

The code is very simple:

<div class="yui-b" id="sb">
  <div id="rot">
    ...
  </div>
</div>

#sb {
  position: relative;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
      -ms-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}
#rot {
  -webkit-transform: rotateY(-15deg);
     -moz-transform: rotateY(-15deg);
      -ms-transform: rotateY(-15deg);
       -o-transform: rotateY(-15deg);
          transform: rotateY(-15deg);
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
      -ms-transition: -ms-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
}
#rot:hover {
  -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
       -o-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

You can play with 3D transforms using the 3D CSS Tester and don’t forget that this month’s Mozilla Dev Derby is about 3D transforms.

Last week I was a bit more silent than usual (some said I appeared to be human rather than a news/tech/kittens/puppies feed). The reason was that I was at mobile world congress in Barcelona, Spain and got roped into doing booth duty on top of my presentation there.

Mothereffing Boot to Gecko!

The main reason though was that I finally got my hand on a boot to gecko phone and not the best horses or king’s men could stop me from showing it to anyone who was even marginally interested.

The presentation that made the rounds was the one on Engadget:

So before going back to my MWC experience, here are the quick points about this:

• Boot to Gecko is a fully open phone stack
• It has a Linux core and its Gaia interface is written in HTML5 – so there is no need to learn any Java or C++ to write apps for it or customise the OS itself
• The phone features a full telephony and messaging stack
• It also runs WebGL with 60fps smoothly
• By the end of the year Telefonica want to release a phone running it and we are in talks with others to do the same (I am off to Hannover on Wednesday for Cebit for that)
• As the OS is incredibly light-weight it boots in 12 seconds:

In other words: it kicks ass and it allows me as a web developer to build things for phones with the same technologies that I build web sites in. The interesting thing was that this option doesn’t transpire that easily to mobile developers.

HTML5 concerns of mobile developers and entrepreneurs

Whilst showing off mobile Firefox on various tablets and mobile phones I got a lot of feedback and questions about HTML5 from people. They were incredibly interesting as we assume as web developers that mobile HTML5 development is easier – as you know the browser that is in use if you target a certain phone. However, I realised that web development and mobile development are still very much different worlds. We had the same experience during a discussion round at the WIP Jam. I was lucky enough to partner with Wolfram Kriesing of uxebu to answer the concerns of mobile developers. Some of those made it into my talk.

• When is HTML5 ready for use? This was a very big one. Coming from a world of IDEs, SDKs and builds this is a predictable question but as web developers we know that our tech is constantly moving (I am writing a big post/talk on that soon)
• How can I protect my code? A common concern was that HTML5/CSS and JS are open and can be simply copied. So a lot of entrepreneurs wondered how they can stop people from doing that. My advice was to go to the Android store and search for “Angry” and see that the same happens in native code. The energy you put into protecting your code just to find it ripped you might as well put into creating a great user experience and let your lawyers worry about plagiarism.
• Do you need to be online to use HTML5 games? It was amazing how unknown the local storage options of HTML5 are. Again, I showed the native Angry Birds seasons which loads each and every level and thus is pointless offline. It is not a problem of the technology, it means you implemented it wrongly.
• What tools do I use to build HTML5? Another big one. Whilst as web developers we are very happy to go into the code in a text editor, it seems alien to a lot of developers out there. Which means that tooling is a very necessary task for us HTML5 aficionados right now and it is cool to see uxebu and cloud9ide going there.

Reacting to question and presenting on HTML5

During the WIP Jam at MWC Joe Stagner and me gave a 1.5 hour “workshop” on HTML5 and sat on the table all day answering questions (and handing out a lot of shirts and stickers). I recorded our talk and – despite a few technical issues with the projector and the room giving a good impression of the boiler room of the Titanic (32 degrees) it went really well:

Noteworthy is that by using Mortadelo y Filemón in my slides, I made quite a few people happy, so happy actually that @martuishere got me a copy of one of their books (which I had in German when I grew up).

The rocky road ahead

All in all we have quite a rocky road ahead of us if we want to get the mobile world to embrace HTML5. A lot of it is not really technical issues but have to do with attitude and environments. In the past we were lucky as web developers as nobody understood and cared what we did. Now everybody wants to play in our sandbox but they expect laser guided shovels and shiny clean sand that smells of roses rather than getting their fingers dirty diving deep. A big one was comparing HTML5 to native code – something that is limiting web development a lot. Of course a native app is snappier. A formula one car is faster than a hovercraft, but it fails miserably on water. Great web apps should change and adapt to their environments – something that is very uncommon in native code. Funnily enough only developers played with B2G and said it is a bit laggy. Users of phones and managers didn’t realise any difference – actually they asked if it is a windows phone as our Gaia app icons are rectangular rather than rounded squares.

The conference as a whole

All in all I dreaded the conference. It is an overpriced, hyped sales show complete with everything I hate about conferences: booth babes who smile and show a lot of flesh rather than knowledge, tons of printed out marketing material to throw away a day later, amazingly stupid taglines (as reported by The Register with my favourite being “Applying Thought”), bad catering (I more or less lived on omelette sandwiches), the whiff of lots and lots of money being spent all over the place, and a big pile of business cards for me to wade through which could have been quick emails we could have sent each other from our fancy phones (they do have that feature).

That said, some of the people there really made it worth while – most of them I knew beforehand, but I met a lot of locals that I will so come back to.

I love working for Mozilla

The main thing that made it worth while for me to go were my colleagues in Mozilla. The B2G and Mobile Firefox team did not sleep at all getting the demos and the system ready, everybody was switched on 100% of the time and happy to help each other and the people not at the conference did a grand job blogging our exploits (or linking to the open tech we talked about), monitoring the press and answering comments. It was exhausting, taxing and a lot of work to do, but it worked out and it is incredible to see that a conference I thought Mozilla would be very alien at and belittled as “those web guys” got rocked to its core by Boot to Gecko and suddenly a lot more people start believing when we say “the web is the platform”.

Lately I got into watching TED movies in the gym (free video podcast, 20 minutes, perfect length for a crosstrainer session). Today I checked out Salman Khan’s introduction to the Khan academy and its beginnings:

All in all a great talk and I am a big fan of the Khan academy as a way to give a kick up the backside of education. As Salman explains in the video, most of the time of teachers nowadays is wasted on not interacting with the students. Instead, we apply a “one size fits all” approach to teaching that leaves a lot to be desired and a lot of students in limbo of knowing things. We teach to measure, not to bring knowledge.

What annoyed me about the talk was how US centric it was. Whilst I agree that education is a big issue in the US (which is very ironic seeing how prosperous the country depicts itself) I think a project like that could have even more impact in areas where education is not free and easy to come by. Instead of fighting a system that happily stays inefficient (as it means not learning new things, ironically) this could be a blueprint for areas where you can start from zero.

Khan talks about this briefly at the end explaining that a street kid from Calcutta could watch these movies at night as it needs to work during the day to make money for its family instead of going to school. That makes no sense whatsoever to me. If the family is too poor to have food then surely they won’t have money for a computer and a fast enough connection to see these movies – let alone have the computer literacy for it.

This could work immensely well if Khan academy and others would start facilities like that. Have public libraries and buildings with computers and a connection (this could be chrome books) where people can go and learn. I could see internet cafes world-wide dedicating one sponsored computer to Khan teaching for example.

Saying the content is available to all is not enough – we need also to make the system available. There is already a good start being made by subtitling the videos in other languages. Fun ahead. I think I sign up as a volunteer there.

I am right now writing a post on how to use :target selectors for image galleries. As always, older IE are the fly in the ointment there as only IE9 supports the selector. So I thought about a way to serve the CSS only to the browsers in the know. The options were of course conditional comments, adding a selector IE < 9 doesn’t understand to every selector I want to filter out (like using
body:last-child article the same way we used html>body to filter out IE6) but then it came to me: media queries are only supported in IE9 and above. So you can simply do a:

.foo {
  // ... styles for ALL THE BROWSERS
}
@media screen and (min-width: 400px) {
  .foo {
    // ... styles for newer browsers
  }
}

A test of a 400 pixel wide browser window should be more than enough, right? Discuss on Google+

Whenever there is an open forum to discuss HTML5, you get very interesting questions. Sometimes you also get ones you just facepalm to. One of them was yesterday on Facebook where someone wanted a “simple web in HTML5”. As I was bored watching “revenge of the sith” I thought I give it a go. So here you go – a simple web in HTML5 canvas.

How is this done? Pretty simple actually, I just define one segment of the web in canvas:

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
cx.moveTo( 0, 0 );
cx.lineTo( -30, -200 );
cx.quadraticCurveTo( 0, -170, 30, -200 )
cx.lineTo( 0, 0 );
cx.moveTo( -25, -160 );
cx.quadraticCurveTo( 0, -140, 25, -160 )
cx.moveTo( -18, -120 );
cx.quadraticCurveTo( 0, -100, 18, -120 )
cx.moveTo( -12, -80 );
cx.quadraticCurveTo( 0, -60, 12, -80 )
cx.moveTo( -6, -40 );
cx.quadraticCurveTo( 0, -30, 6, -40 )
cx.stroke();

I translate the context of the canvas to the centre of the 400×400 pixel canvas and start painting the lines. I paint one line from 200/200 (which now is 0/0 as the translation happened) to – 30/- 200 which is the top left. I then paint a quadratic curve to the top right of the segment (30,-200) with the curve point being in between the two. I then move the canvas “pencil” to the other points on the left and draw quadratic curves to their counterparts. All of these I set with trial and error – I am sure there is a clever algo to do this, but this works.

In order to achieve the web effect all I had to do was to rotate the canvas before painting each segment. I increased the angle by 18 degrees on each iteration and rotated the canvas in radians:

var c = document.createElement( 'canvas' ),
    cx = c.getContext( '2d' ),
    angle = 0;
document.body.appendChild( c );
c.width = c.height = 400;
cx.lineWidth = 3;
cx.translate( 200, 200 );
for ( angle = 0; angle <= 360; angle += 18 ) {
  cx.save();
  cx.rotate( angle * Math.PI/180 );
  cx.moveTo( 0, 0 );
  cx.lineTo( -30, -200 );
  cx.quadraticCurveTo( 0, -170, 30, -200 )
  cx.lineTo( 0, 0 );
  cx.moveTo( -25, -160 );
  cx.quadraticCurveTo( 0, -140, 25, -160 )
  cx.moveTo( -18, -120 );
  cx.quadraticCurveTo( 0, -100, 18, -120 )
  cx.moveTo( -12, -80 );
  cx.quadraticCurveTo( 0, -60, 12, -80 )
  cx.moveTo( -6, -40 );
  cx.quadraticCurveTo( 0, -20, 6, -40 )
  cx.restore();
}
cx.stroke();

And that’s that – a web in HTML5 canvas.