Dev Derby Articles

The May Dev Derby is underway. A monthly contest hosted by the Mozilla Developer Network, the Dev Derby gives you the chance to apply the technology you read about on this blog, push the web forward, and compete for fame, glory, and prizes.

This month, we are excited to see what you can do with Websockets. Websockets allow you to send messages to a server and receive event-driven responses in real time, without server polling. But this is about more than just sending messages. Websockets have been used in BrowserQuest, Rawkets, and many other highly interactive applications.

Setting up a Websockets demo is more involved than setting up a static demo, but we know you can do it. As long as you keep these three simple rules in mind, everything should work flawlessly.

1. To use Websockets, you need a server to communicate with. Thankfully, free services like Heroku and Nodejitsu provide just that.
2. You do not need to use Heroku or Nodejitsu. If you use a different server, however, you must ensure that it has a signed SSL certificate.
3. When building your demo, be sure to use the wss:// prefix (not the ws:// prefix) to specify the address of your server.

If you have any questions about setup, please let us know in the comments. We will work with you to resolve any issues you encounter. Otherwise, good luck and have fun!

Want to get a head start on a future Derby? We are also accepting entries related to the WebGL (June Derby) and demos that push the limits of the web without using JavaScript (July Derby).

Update 2012-05-08: Thanks to last-minute magic by Mozilla IT, MDN won’t be completely unavailable after all. However, it will be running on a single virtual machine rather than three physical servers, so expect worse than usual performance during the time frame described below.

Mozilla Developer Network will be down for maintenance and completely unavailable for approximate eight hours on Tuesday, May 8th, 2012, starting at 15:00 UTC (Tue 17:00 CET, Tue 11:00 US-EDT, Tue 8:00 US-PDT). It should be back online by 00:00 UTC on Wednesday May 9th (Wed 02:00 CET, Tue 20:00 US-EDT, Tue 17:00 US-PDT).

During this time, the site will not be available for viewing or editing, so please make sure to save all your edits and be prepared in advance — maybe go outside and get some fresh air — MDN will be back before you know it.

Meanwhile, here are some alternative resources:

Open Web standards:

• DocHub mirrors content from MDN and other sources
• Dev.Opera has lots of Web technology articles
• W3C Web Design and Applications is a landing page for Web standards
• Safari Developer Library has many articles on Web development

Mozilla stuff:

• Mozilla wiki has all kinds of information related to the Mozilla project

Three-D interfaces have been a fascination for as long as we have used computers. CSS 3D transforms allow you to add depth to effects, making more exciting and more engaging user experiences possible. By moving and rotating content in the X, Y and Z axes you can create beautiful transitions and interfaces without having to learn a new language.

Last month, web enthusiasts showed the world just how exciting 3D transforms can be in the March Dev Derby. This was by ever measure our most successful Dev Derby yet. The number of entries was record-setting, the quality was unprecedented, and the energy was undeniable. Our expert judges—Remy Sharp, Chris Coyier, and Chris Heilmann—have named three winners. Please join us in congratulating these outstanding contributors.

1st: Paperfold CSS by mrflix
2nd: The Box by boblemarin
3rd: 3D Image Transitions by joelambert

Runners up:
3D flip list menu by Stu Nicholls
Root3D by felipenmoura

It was hard choosing just three winners this month. Practically every demo that was submitted blew us away. So let’s not forget about our our other exceptional contributors. Each and every one of these people is is pushing the web forward and deserves a great deal of praise for doing so.

Want to see your name here next month? We are now accepting demos related to HTML5 audio (April), Websockets (May), and WebGL (June). Get an early start by submitting today.

As we’re having a HTML5 Audio developer derby this month, I thought it fun to play with audio again. And I found it sadly enough pretty frustrating.

One thing I proposed in a lot of talks is using the idea of CSS sprites and apply them to HTML5 audio. You’ll get the same benefits – loading one file in one HTTP request instead of many, avoiding failure as files might not get loaded and so on.

To test this out I wrote the following small demo using the awesome Music Non Stop by Kraftwerk.

Clicking the different buttons should play the part of the music file and nothing more. This works fine in Firefox, Chrome and Opera on my computer here. Safari, however, fails to preload the audio and the setting of the current time is off. The code is simple enough that this should work:

<div id="buttons"></div>
<audio preload controls>
  <source src="boing-boomchack-peng.mp3" type="audio/mp3"></source>
  <source src="boing-boomchack-peng.ogg" type="audio/ogg"></source>
</audio>

// get the audio element and the buttons container
// define a sprite object with the names and the start and end times 
// of the different sounds.
var a = document.querySelector('audio'),
    buttoncontainer = document.querySelector('#buttons'),
    audiosprite = {
      'all': [ 0, 5 ],
      'boing': [ 0, 1.3 ],
      'boomtchack': [ 2, 2.5 ],
      'peng': [ 4, 5 ]
    },
    end = 0;
 
// when the audio data is loaded, create the buttons 
// this way non-HTML5 browsers don't get any buttons 
a.addEventListener('loadeddata', function(ev) {
  for (var i in audiosprite) {
    buttoncontainer.innerHTML += '<button onclick="play(\'' +
                                  i + '\')">' + i + '</button>';
  }
}, false);
 
// If the time of the file playing is updated, compare it 
// to the current end time and stop playing when this one 
// is reached
a.addEventListener('timeupdate', function(ev) {
  if (a.currentTime > end) {
    a.pause();
  }
},false);
 
// Play the current audio sprite by setting the currentTime
function play(sound) {
  if ( audiosprite[sound] ) {
    a.currentTime = audiosprite[sound][0];
    end = audiosprite[sound][1];
    a.play();
  }
}

Now, this is nothing new, Remy Sharp wrote about audio sprites in 2010 and lamented especially the buggy support in iOS (audio won’t load at all until you activate it with a touch – something that sounds horribly like the “click to active” Flash has on IE).

Other issues are looping and latency of HTML5 audio. As reported by Robert O’Callahan there is a work-around by cloning the audio element before playing it (with an incredibly annoying test) and this fix has been used in the Gladius HTML5 game engine.

All in all it seems HTML5 audio still needs a lot of work which is why a lot of Games released lately under the banner of HTML5 use Flash audio or no audio at all. This is sad and needs fixing.

Interestingly enough there are some great projects that you could be part of. Are we playing yet? by Soundcloud and others for example is a test suite for audio support in browsers. You can write own tests on GitHub and report results to the browser makers.

The jPlayer team has a great HTML5 Media Event Inspector showing just how many of the HTML5 media events are supported in your current browser.

If you want to be safe, you can use SoundManager 2 by Scott Schiller to have an API that uses HTML5 when possible and falls back to Flash when the browser doesn’t have any support. It also fixes a few issues for you.

Speaking of Scott Schiller, he continually gives good insight on the state of audio. There is a 51 minute video of his article on 24 ways “Probably, Maybe, No: The State of HTML5 Audio“.

A shorter and more recent talk on the same subject is also available:

All in all it would be interesting to hear what you think of the state of HTML5 audio:

• Did the companies that heralded HTML5 as the end of plugins drop the ball?
• Is it really sensible to have an API that returns probably or maybe or ” when you ask it if the browser can play a certain type of media?
• What could be done to work around these issues?

Let’s re-ignite the discussion on HTML5 audio, after all we need it for the future of messaging in the browser and telephony, too.

Oh and another thing. Of course there is the Audio Data API of Firefox and the web audio proposal from Webkit available but getting those running in mobile devices will be a much bigger change. If you want to know more about those and libraries to work around their differences, there is a great overview post available on Happyworm.

Marco Castelluccio

Marco Castelluccio accomplished a first last month when he won both first and second place in the IndexedDB Dev Derby for his entries eLibri and FileSystemDB. But that’s not all Marco has done to help push the Web forward. In just the last few months, Marco has submitted five great demos to the Dev Derby and Demo Stuido, showing the world what’s possible with geolocation, canvas, and more.

Last week, I had the opportunity to learn more about Marco and his work. In our discussion, Marco shared insights from his past, thoughts on the open Web, and hopes for the future.

Tell us about developing eLibri and FileSystemDB. Was anything especially exciting, challenging, or rewarding?

I started creating demos for the Dev Derby contents mainly for educational purposes. They gave me the opportunity to learn the new APIs. In the case of the December Dev Derby, I learned a lot about IndexedDB (and FileSystemDB is probably the best proof). I think IndexedDB is a really powerful API that is, in my opinion, a bit ignored by developers (maybe because there are some differences across browser implementations). I think it is a great API because it gives the developer the opportunity to save any type of data and retrieve it seamlessly, better than a file system can. I was really impressed by its possibilities, especially when I saw eLibri really working! (I didn’t realize you could save and retrieve a PDF file so simply, without any problems!)

How did you become interested in hacking?

Playing games! I just needed to understand how they worked, so I became interested in computer science. At the beginning I was really interested in the low-level aspects of computer science like operating system development, since the operating system is the framework and manager of all other applications. Moving forward, I think the framework will be the browser. The browser will serve the purpose that operating systems have until now, except that the new applications will be usable by everyone, on every device, on every platform.

What makes the Web an exciting platform for you?

The standards. With standards you can create applications that work on every device, desktop and mobile. The situation is a bit chaotic in several areas, but in the near future we will hopefully see a lot of incredible Web applications (for example LibreOffice, or, why not, performance intensive games).

What up-and-coming Web technologies are you most excited about?

The most exciting technology, in my opinion, is WebRTC. I see a lot of possibilities with it, like P2P communication in the browser. I’m also really excited about the new WebAPIs developed by Mozilla (camera, vibration, etc.). I’m starting to develop applications for mobile devices and I want to make them work, without rewriting, on every platform (not only because I’m an idealist, but also for money!).

If you could change one thing about the Web, what would it be?

I would like the newest Web APIs to be supported on every browser without implementation differences and vendor prefixes, so that developers can easily create cross-platform applications. I’d like to see a Web without companies that try to steal your information without your consent.

What advice would you give to aspiring hackers?

I’m not an expert, but my advice is to start contributing to open source projects. Doing so gives you the really great opportunity to learn about serious development, to do real work, and to help people (both users and other developers). And, in the case of Mozilla, you can talk with really expert people that are very glad to help you! And you can do all different kinds of experiments in an area that is still evolving.

You mentioned that you have some “beautiful ideas” for future demos. Care to give us a teaser?

I have some ideas for demos using the Orientation API (sadly I couldn’t develop them before, because Firefox wasn’t usable on ARMv6, though I hope that will get better soon). I think developers can do great things with the Orientation API, like creating games that you can play in real life (I’m developing a Pong game and other games that you can play while running) and using new forms of input (for example, a remote controller like the WiiMote, WebSockets, or WebBluetooth when it becomes available). I also have in mind other demos related to audio.

Is there anything else you would like to share?

I’m really excited about Mozilla’s new project, B2G. It opens a whole new range of possibilities for developers and could help people get their freedom back. I hope I’ll manage to help this project in the near future.

The March Dev Derby begins today! A monthly contest hosted by the Mozilla Developer Network, the Dev Derby allows creative web developers to push the web forward and compete for fame, glory, and prizes too.

This month, we want to see what you can do with CSS 3D transforms. New to the topic? That’s okay. We have a great article on CSS 3D transforms over on the MDN that should help you get started. Additionally, Mozilla principal evangelist Chris Heilmann has contributed three great resources on the topic: an article on getting started, an article on progressively enhanced rollovers, and a screencast on rollovers. With all this great documentation, you’ll be an expert in no time.

The Prizes

• First place: An Android mobile device from Motorola or Samsung and an article featuring your work here on Mozilla Hacks.
• Second place: A hand-crafted laptop messenger bag from Rickshaw.
• Third place: A limited edition MDN t-shirt to show off your geek cred.

You might have noticed that the March Derby already has three entries. Want to get a head start like these people did? We are also accepting entries related to HTML5 audio (April Derby) and the Websocket API (May Derby). Submit today!

Wait a minute, there are how many days in February?

Looks like leap day got the best of us. Earlier today, we ended the February Dev Derby prematurely, making it impossible for some of you to submit those last-minute demos for a couple of hours.

To make up for this oversight, we will accept February Dev Derby submissions for one extra day. Please submit your entry before March 1 at 11:59:59 p.m. PT for them to be counted.

Want to get a head start on an upcoming Derby? We are now accepting entries related to CSS 3D Transforms (March) and HTML5 audio (April). Submit today!

Editor’s Note: Michal Biniek is a frontend developer on the Innogames Lagoonia team, and an enthusiast of JavaScript and new web technologies like HTML5/CSS3, WebSockets, and WebRTC. Back in November, michal.b took 2nd place in the MDN Developer Derby with Rob in Soundland, a fanciful Canvas demo.

It was the fourth time one of Michal’s demos made to the Derby finals, and it was the third time he’d placed. If you’ve been following Dev Derby since it launched last year, you might remember seeing Fly, fly! or Too Many Fish in the Sea. Congratulations Michal, we can’t wait to see your next demo! Submissions are now open for upcoming Derbies: CSS 3D transforms, Audio, and the Web Sockets API.

Tell us about developing Rob in Soundland and where your idea came from?

My first idea for the Canvas demo was to prepare some kind of visualization – a sound visualization which could make a nice connection between two senses – vision and hearing. I thought it would be also nice if the user could interact with the application through keyboard or mouse.

Finally I decided to prepare a simple game with third-person view in an infinite world, where the main character – Rob – wanders through the colorful (almost psychedelic) squares which are playing different notes.

Interesting fact is that the game doesn’t contain any external media elements like images or sounds. Everything is generated using HTML5 technologies: Images are pre-generated at the start of the game and sounds are created and played ad hoc using the Audio Data API.

Do you remember your first computer and your first website?

My first computer was Elwro Junior – the Polish version of a ZX Spectrum computer (English description here). A few years later I got my first PC with a 486 25MHz processor inside and a magical ‘turbo’ button.

My history with websites started around 1999 when I prepared a site about my hobbies – skiing and astronomy. I even put some animations using JavaScript and DHTML (a buzzword from long ago):
Never the marquee tag ;)

How did you get started coding and hacking?

I started coding on ZX Spectrum in BASIC, but shortly after that I moved to Turbo Pascal on the new PC. I think it is also important that my father was an IT teacher at school – so when I had some problems with programming I could always ask him for help.

For me, the visual is one of the most important aspects of an application. That’s why I found Delphi/C++ Builder a really nice solution for building UIs. This is also the reason why I liked HTML from the beginning – as a perfect language for UIs, which with JavaScript is much easier to run animations rather that trying to run it on forms.

You mentioned you’re from Wroclaw, Poland, and work as a Web developer for Innogames? Do you work remotely? What tools do you use for development?

Actually, I live in Hamburg, where I got the software developer job at Innogames half a year ago. However, I still quite often visit Wroclaw.

I’m working in team that works on Lagoonia, one of the latest games developed by Innogames. Modern Javascript engines in browsers enable us to take full advantage of JavaScript (and new features from HTML5 like sound and canvas). We can create games which easily compete with Flash-based games without additional runtime machine!

I usually use Eclipse to develop JavaScript applications. I find it a quite good code editor (however sometimes slow) with code auto-completion that works quite well. For testing and debugging, I use Firebug and the built-in console in Firefox, one of the best debugging tools for web applications ever.

Do you play online games? What games influence your work? What do you play the most these days?

I discovered online games while I was a student. I started with FPS shooters then switched to MMORPGs like MuOnline. I think that multiplayer games are the future of gaming – it is usually much more fun to play with real players rather than against a computer.

My current company – Innogames is also focused on online games (mainly browser games) where the most important part is cooperation with other users.

We can still observe old games (even from the days of the ZX Spectrum) refreshed with new fancy graphics and multiplayer mode which are bestsellers nowadays. However, many indie games show us completely new concepts of games – and I think these types of games influence me the most.

Apart from that, I really like Valve games – especially for great stories in games like Half Life/Portal universum.

The Nyan Cat version of your August History API demo reminded us how fast memes can travel on the Internet. Tell us about Fly, fly! and how the idea came to you?

It was quite hard to find an original idea for the usage of History API, which in my opinion is prepared especially for websites using AJAX to set up the content. However, it could also be used as a timeline for virtual travels. The initial idea for this project was a flight by plane through the different cities.
However I found it boring and I decided to add the popular Nyan Cat – one of the most positive memes – as an optional mean of transport. This choice causes the Nyan Cat to leave a rainbow-colored contrail in the sky, instead of leaving white lines, which makes the world more colorful and friendly for people.

In addition, everything was matched to the original concept of the demo, even the different graphics looks much better – dark background, Nyan Cat instead of a plane, and a colorful path for the journey.

You’ve submitted 7 Dev Derby demos since the program launched, and 4 of them have placed as finalists. Congratulations and thank you! Are you working on another demo? Any other cool projects you want to tell us about?

Thank you! Currently I’m working on another simple game using touch events, however a project grew up a bit and I’m not sure if I’ll find enough time to finish it before the deadline.

In the meantime I’m working with my colleague Barry Nagel on our own framework for HTML5 games, which is named Machine5. The goal of this project is to find the simplest way to create stunning HTML5 games and to provide a simple and easily maintainable project structure for developers.

When you think about HTML5 & new Web technologies what are you most excited about?

I’m really glad that the Canvas element is currently widely available and I can freely use it. It is a perfect solution for simple games – and I hope soon WebGL will be also available on all browsers, because it is a great feature that allows creating fullscreen games. Using these technologies together with new audio APIs and WebSockets or WebRTC as a communication stream, we can soon expect real FPS games like Counter Strike or a less violent type of game such as Sims MMO version ;)

Anybody else who helps on your demos? Anyone you want to mention?

I’d like to thank to Robert Zatycki for all the brainstorms about possible ideas for games and other applications. Some concepts which we were talking about were used in games.

And I’d also like to thank to my brothers – Paweł and Łukasz who tested carefully my demos before I released them and for their frank feedback.

What inspired you to participate in Dev Derby? Can you say something more about Open Source, Mozilla and why you contribute?

Before the Dev Derby contest, I’d prepared some demos for Chrome Experiments and for Opera Widgets websites. Then I got a message from John Karahalis, where he mentioned a new Mozilla project for demos especially for new technologies.

Currently I find the MDN is one of the best resources for JavaScript. All the work done by Mozilla to contribute, prepare and promote new technologies is great and really important for the modern internet. Firefox is one of the most popular web browsers, (and in Poland the most popular!) which I think is the best example that users also appreciate Mozilla’s excellent product.

One idea of Open Source is really important: even nowadays when almost every concept can be patented, there are still a lot of people who are open to sharing their experience with other developers without any profit. I find that sharing code can be the best way to get feedback about code quality and to get suggestions for other possible (sometimes better) solutions for an application.

It’s February and time for our next Dev Derby! Dev Derby is a part of Mozilla Developer Network (MDN), and each of them are focused on a certain technology where people can submit their demos.

Continued…

IndexedDB lets web applications store structured data for fast online and offline use. Data can be stored using key-value pairs, and values do not need to be serialized (as they do with document-oriented databases) or coerced into a relational structure (as with relational databases).

Recently, creative developers from around the world demonstrated just how powerful IndexedDB can be in the December Dev Derby. Please join us in congratulating the top three demos as chosen by our judges.

1st Place: eLibri by mar.castelluccio
2nd Place: FileSystemDB by mar.castelluccio
3rd Place: IndexedDB Editor by twolfson

Runners up:
Vurkout Buddy by wcheung
Locate It IndexedDB by nestoralvaro

Congratulations to our winners and to everyone who submitted to the December Dev Derby.

Do you want to see your name here next month? We are now accepting demos related to Touch Events (February), CSS 3D Transforms (March), and HTML5 audio (April). Get an early start by submitting today!