Aptoma Monday School, week #42

We’ve launched a new initiative here at Aptoma, and we have given it the mundane name of ‘Aptoma Monday School’ (AMS). We could have been cool and written “Skool” or something like that, but we didn’t.

Chalkboard and Apple

AMS is basically an intense hour each Monday @ 0900 hours which we dedicate to educate ourselves through presenting and discussing topics of particular interest. We have a business to run, so the topics has to be of practical use as well as educational value. We will try to identify the sweet-spot of balance between learning something fun and inspiring and creating something tangible of value for our customers.

We have decided to share our lecture notes on the Select *-blog (RSS). The theme of choice for now has been the field of “HTML5“. And we have chosen three topics this week : The <video>-element, the <canvas>-element and local storage.

1. Video

The video-element will start to finally integrate videos fully into the web-page. This means that plugin-technologies such as Adobe Flash or Windows Media Player will no longer be required for video. (yes!)

<video width=”854″ height=”480″ autobuffer controls>
<source src=”big_buck_bunny_480p_stereo.ogx” type=”video/ogg”>

<!– Proceed to define any available fallback formats –>
<source src=”big_buck_bunny_480p_h264.mov”>
Your browser does not support the <code>video</code> element.
</video>

The video-element will now work as a normal element, providing you with the full power of CSS: You can set the css-attribute opacity to 0.5, and it does what you think it will do. If you have been working with any of the plugin-technologies, you’ll know that this is a giant leap forward for video.

The browser can render its browser native controls (play/stop/pause/etc.) or be controlled by JavaScript and make use of event listeners and normal DOM-function to make it “richer” than what is possible with plugins. This basically means that you can design your player using HTML and JavaScript.

See it in action!

Youtube has made an example of use of HTML5/video-element. In this example even animated thumbnails are video-elements displaying how low the resource cost ist. If you did this with Adobe Flash would probably require moarhardware.com to keep all the elements on one page together like that.

A few more details for the very interested reader :

  • <video> might just allow us to do more hardware acceleration and the client computer, and hence have a much smaller toll on system resources than today’s solution.
  • Safari supports H.264/AAC, Chrome supports H.264/AAC and OGG/Theora/Vorbis while Firefox and Opera just support the latter.
  • <video> is supported in Safari, Firefox 3.5, Chrome and a special build of Opera, so we’re not quite there, yet. But we’re getting closer!

2. Canvas

Canvas is another exciting technology which is finally mature for use in most modern web-browsers. Canvas let’s you do pixel by pixel manipulations on images.

Canvas will be a nice replacement for the most server-side generated images as well as for some Flash graphics. Due to the fact that canvas is rendered by the browser and not as a plugin it can be handled as (almost) as all the other HTML elements .

We’ll let this example speak for itself : Remove redeye.

You define a canvas like this
<canvas id=”myCanvas” width=’172′ height=’172′></canvas>

And you will run commands on it like this, to do the funky stuff (presented without any particular context)
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”); // 3d not yet supported
context.rotate (secondsAngle);

context.drawImage (sechand, -4, -52, 8, 57);
// Rendring text:

context.font         = ‘italic 50px sans-serif';
context.textBaseline = ‘top';
context.fillText  (‘Hello world!’, 0, 0);
context.font         = ‘bold 30px sans-serif';
context.strokeText(‘Hello world!’, 0, 50);

 

If you want to dig deeper, try these:

3. Local storage

Local storage is what you’d think it is. It might be seen as a sophistication of the good ol’ cookie. It solves a couple of it’s problems, as well. a) You can store more data in local storage. b) You can use the same local storage between browser tabs and windows c) It will be cache-safe, which means that it will not break all your front-end caches (such as Varnish) if used. This is a major improvement for anyone creating high-traffic sites.

The most important functions are

  • localStorage.setItem(key, value)
  • localStorage.getItem(key)
  • localStorage.removeItem(key)
  • localStorage.clear() // Use with caution, it will clear all storage.

Local storage will fire events when updated, which means you can monitor the state of the local storage in JavaScript and act upon it with ease.

Future topics for AMS

We maintain this wish-list of topics. We provide no guarantees that we’ll follow the list, but these are the suggested topics as of today.

  • HTML5
    • Canvas / SVG
    • Video / Audio
    • Local Storage
    • Web-forms
    • Semantics
    • Worker threads
    • Offline work
  • Caching strategies (Memcache, Varnish, Varnish ESI, etc)
  • JavaScript development guidelines (JSUnit, JS Coding standard, etc)

We’d love to hear any suggestion you might have for topics in the comments below.