W on t
O os kes
B de Ro
Hi, I’m Rob Hawkes and I’m here tonight to talk a little about creating demos using the latest
I call it the browserscene, but feel free to call it the demoscene on the Web.
If you don’t already know, I work at Mozilla.
My official job title is Technical Evangelist, but I prefer Rawket Scientist, which is what it says
on my business card.
Part of my job is to engage with people like you and me about cool new technologies on the
Created by Phil Banks (@emirpprime)
Aside from that I spend most of my time experimenting with HTML5 and other cool
I basically have an addiction to visual programming and hacking around with code.
I’ve never been to Finland before, and for some reason I thought it would be really cold over
Turns out it’s hotter than England, and way ﬂatter than I imagined!
rea hnolog ye
are he tec
Over the past few years browsers have come on leaps and bounds with the types of things
that they can do.
What’s been particularly interesting is the focus on audio and visual media with the
This now allows us to create things like this…
This is No Comply, a WebGL and audio demo created by Mozilla volunteers to show off the
o lo rs
c hn ow
e t da
th res in to
Let’s run through some of the most interesting of these new technologies, the kind of ones
you might want to use.
& W phics
Canvas & WebGL
& A an
Audio API + the Audio Data API
W omm un
& W typo
CSS3 & Web Fonts
& In the bro
al S Sto
Local Storage & IndexedDB
So these technologies are cool and all, but why should you be using them over others, like
thin s now
m The timei
In short, the time is now; we’re on the threshold of something awesome.
We can now create amazing demos, visualisations, and games with nothing more than the
technologies we would normally use to build a website.
This is deﬁnitely a good time to be developing on the Web.
a m ei
s to ode isl
The code and assets are inherently lightweight.
Text and image ﬁles don’t take up much space.
nce hings jus
You don’t have to download and install anything for a demo to run; it just works.
n t ch
m er and spee
Development can be completely free.
You don’t need to pay for any editing tools.
You could easily use a simple text editor, or the browser itself.
r h ve
d o he
pile Sharin gt
No compilation; the code is completely open for others to look at and learn from.
I ﬁnd this kind of open development gives me a warm and fuzzy feeling inside, but that
might just be because I’m slightly crazy.
d em ed
n e at
rs ce lready cre
g b oth
Now, let’s take a look at some of the cool demos that others have put together with these
Flight of the Navigator
This is something I made especially for Assembly.
It’s an audio visualiser that uses WebGL and HTML5 Audio.
If you stick around for my seminar at 1pm I’ll be running through the code behind this.
d em m
e r he
o th ated t ot
o f dic
d s es
These are really just a few demos that are out there right now, and the list is growing every
There are some great sites to keep track of the latest ones.
Mozilla Demo Studio
h o rs
a tc st
o w ong
s t ty,
Creating demos with these technologies is great, but there are a few things to watch out for.
s p ac
an at ion
Canvas performance and support.
requestAnimationFrame, hardware acceleration, etc.
Lack of WebGL support in some browsers.
It’s not on IE, Opera, iOS, or Android… yet.
I s u ve
io D ta
Lack of Audio Data API support in browsers.
Right now, only Firefox and Chrome have some sort of Audio Data API.
e ts ha
ock brows ers
And again lack of support, this time with WebSockets.
s e r rces
ro w res
e b sa
g th utorial
If you want to learn more about the browserscene and these technologies then you can ﬁnd
all you need online.
Here are just a few of them…
Mozilla Developer Network
e w nt
ra m pm
d f evelo
You don’t always have to roll your own solutions, though.
There are a variety of libraries and frameworks out there that provide basic functionality and
generally speed up development.
I’m going to go over just a few of them, but I advise you to look for more if these don’t fulﬁl
your requirements; there are a lot more out there.
Gaming engines, like Impact and Isogenic Engine.
ture g soon
e fu f comin
th ol stuf
So what does the future hold for the browserscene?
Joystick DOM events so you can get a console-like experience.
Devices API to access data from peripherals, like a microphone or webcam.
c e le ou
a c ea
ar e rm
Better hardware acceleration and performance in all areas.
Personal website and blog
RECENT PROJECTS MORE COOL STUFF
Twitter sentiment analysis Mozilla Technical Evangelist
Delving into your soul. My job
HTML5 & WebSockets game. Web development podcast.
Twitter - @robhawkes
Rawkes - http://rawkes.com
Experimenting with the latest Web technologies
This month is the History API
Manipulate browser history
Win prizes (like an Android)
Next month is Geolocation
Also, you should deﬁnitely take part in the Dev Derby, which is a monthly competition run by
the Mozilla Developer Network to see what can be done with the latest Web technologies.
This month the focus is on the History API, which allows you to manipulate the history of the
browser so things like AJAX don’t break anything.
The winners get cool prizes, like an Android phone. It’s a great excuse to play around with
FOUNDATION HTML5 CANVAS
My amazing book on canvas, animation, and making games.
Paperback and digital formats
Become a canvas master
Learn how to animate
Make two cool space games
TH An R b
If you have any questions feel free to grab me on Twitter (@robhawkes), or email