Game On 2010 – The collected Labs Night gaming videos

Here’s a YouTube playlist featuring the collected talks from the Labs Night Gaming events in both Mountain View and London. Together, they include plenty of tips, techniques, and inspiration to help you finish your Game On 2010 contest entry!

 

Game On 2010 – a preview of my HTML 5 webapp, Pencilbox

Hey, Game On 2010 contest participants — how are those HTML 5 games coming along? I can’t wait for January 2010 when I can finally see what you’ve made.

I’ve been doing some HTML 5 experimentation of my own. What I’m working on is not a game, but it is a graphical HTML 5 webapp that uses several tricks that may be of interest to game developers. It’s easier to show it in action than to tell you about it, so watch this video (hosted on Vimeo since WordPress won’t let me embed) for a preview of Pencilbox and an explanation of how it works.

Note: this is not a Mozilla project — this is a personal project I’ve been hacking on in my free time.

I’m not yet ready to put the app itself on a public webserver where you can play with it, nor have I set up a public code repository yet. (Like I said, it’s a side project, so I haven’t had time to work on the infrastructure stuff.) When I do have it set up properly, I’ll let you know. In the meantime, here’s a tarball of the source code, which is under a Mozilla tri-license. It may be of some interest if you wish to achieve a similar effect in your Game On 2010 submission and you want to see how I did it.

Happy hacking!

 

Identity in the web browser: Design Lunch video

Here is the video of our Design Lunch session from last week, in which we discussed ideas for identity management in the browser.

The video is almost an hour long, so I don’t know if you have the patience to watch the whole thing… but it does open with me wearing a funny hat and narrating an imaginary legal drama. Then it proceeds to the showing off of screen mockups, followed by vigorous discussion of what the right thing is for Firefox to do in various tricky situations.

This is the first time I tried recording a design lunch using fancy cinematography techniques such as “pointing the camera at the person who’s talking”. I hope it makes it easier to follow.

You may also want to check out Aza’s blog post, which shows the mockups of potential interface designs. They should be easier to read there than they are in the video. You can also find out more at the Mozilla wiki page on the Identity project.

 

Aza on the “You-Centric” future of browsing

Spilling over with enthusiasm as always, Aza gave a talk to a recent web developer conference in London about how he sees the future of the web browser. He takes together several strands that Mozilla Labs has been working on and ties them together into a story about how the browser can evolve into more of an intelligent user-agent. The browser really ought to bring the mountain to Mohamed, to borrow a phrase, rather than sending Mohamed to the mountain.

I’m glad he mentions Ubiquity, but I think Aza oversells it a little bit. For example, he talks about Ubiquity collecting your contacts from Facebook in order to auto-complete emails. Getting Facebook contacts is not something we currently know how to do. So I want to clarify that when Aza talks about Ubiquity in this video, a lot of the things he mentions are aspirational — “stuff we would like it to do someday” — not things that it does right now.

 

Firefox 3.7, 4.0 design in progress – video from design lunch

Alexander Limi has posted a video, from the Design Lunch three weeks ago, wherein the UX leads answered questions about their provisional redesign of the Firefox UI.

Alex wants to warn you that the contents of this video are very rough, very much a work-in-progress, and very much liable to change. You shouldn’t watch it thinking "this is how the next version of Firefox is definitely going to be". You should think of it as a behind-the-scenes look at "how the sausage gets made", in Alex’s words. He also warns:

There’s swearing, there’s mumbling, there’s ranting, there’s hand-waving, there’s political incorrectness.

I’m also in the video, playing MC in my overalls.

Today we recorded Part 2, which goes into detail about the notifications interface and the downloads manager; it should be posted fairly soon.

 

Labs Projects Update Video

Last week I recorded this video for the students at a university in India, who requested an update on Mozilla Labs projects.

It’s about 20 minutes of me showing screens and talking about Ubiquity, Weave, Jetpack, and Test Pilot. Jetpack and Test Pilot are relatively new so I explain what they’re all about; for older projects Weave and Ubiquity I just highlight a couple of new features.

Thanks to Asa Dotzler for doing the video recording and editing.

You can watch the video on Air Mozilla in either Ogg or mp4 format:

• Ogg
• mp4

 

Cool Ubiquity Ad Concept

Speaking of marketing that better explains what Ubiquity does, student contributor Zac Lym has made a really cool Ubiquity ad concept video. I’ve gotten used to taking Ubiquity for granted, but watching this video makes me excited about it again.

 

Making Prototypes with Canvas

For my second Design Challenge tutorial session, I did a presentation on how to make interactive prototypes with Canvas. After all, not every prototype needs to be done as a Firefox extension. Canvas prototypes are far quicker and easier to make, and although more limited, are also more flexible in some ways.

What’s Canvas? Canvas is an HTML tag, part of the HTML 5 standard:

<canvas></canvas>

By itself, it does nothing. But Javascript running in the page can treat the Canvas element as a freeform drawing area, and dynamically fill it with whatever combination of graphics and text you want. Things that would previously require a plugin like Flash, such as freeform animation and interactivity (although not sound), can be done easily in Canvas.

The advantage is that you can draw to the Canvas using Javascript, a language you probably already know if you’re a web developer, instead of learning a new domain-specific plugin language. Users of your page can interact with it without needing to have any plugins installed, and since it’s all part of the page they can see the source code simply by choosing “View Source”. (Though the last can be either an advantage or a drawback, depending on whether you intend to be open-source or not…)

Here are some examples of cool things you can do with Canvas:

• Bespin is entirely done in Canvas.
• I did these Pie Menu prototypes in Canvas.
• This tutorial shows you how to make a Breakout game in Canvas.

One major drawback is that although Canvas works in Firefox, Opera, Safari, and Chrome, it is not yet supported by Internet Explorer. However, there are workarounds for this, such as Explorer Canvas.

Here are the presentation links:

• The video of me giving the presentation, on Vimeo. (Thanks, Pascal, for editing it.)
• A ZIP file containing the source files for the presentation.
• The text of the presentation, in web-page form.
• The Developer.mozilla.org Canvas tutorial, to which I owe pretty much all my own knowledge of the subject.

The presentation is aimed at total beginners, so you should be able to get something out of it even if you barely know any Javascript yet.

 

Stupid Extension Tricks

Back in — oh, I think it was around 1991 — I had a book called Stupid Mac Tricks, which came with a 3.25 inch floppy disk of INIT files that you could drop into the System Folder on your (or your victim’s) Mac to make it do strange, funny, annoying, and useless things. It was a cool demonstration of what the Mac was capable of, and it inspired me (at age 11) to start on the road to hackerdom.

Stupid Mac Tricks was the inspiration for a presentation I did last Monday for the Design Challenge. It featured the following extensions:

1. Menubar Madness, which turns all your menus names backwards.
2. Dodgy Navbar, which makes the buttons in your navigation bar randomly reorder themselves when you click on them.
3. Kittens Everywhere, which replaces every image on the web with random LOLcats images.
4. Bookmarks and Preferences, which… actually, this one doesn’t do anything too wacky, it just shows how an extension can set bookmarks and preferences.

For each extension, I took the students through the source code, explained how it worked, and had them do a few simple modifications on each one to get a little hands-on experience. Even though you would never want to, you know, install any of these extensions (at least not on any copy of Firefox you want to be able to actually use…), each one demonstrates techniques that are very useful for advanced extension development. My intention was to make a follow-up to Myk’s Extension Development Bootcamp. Techniques demonstrated include dynamic manipulation of both the XUL and HTML DOM trees, using XPCOM, setting up event handlers, using overlays to replace attributes of XUL elements, using DOM Inspector to find elements you want to overlay, running code on page load, and using XmlHttpRequest. That’s a lot of stuff! I probably erred on the side of trying to cram too many contents into one presentation.

Oh well. It’s all online now, so you can peruse it if you’re interested in learning more about extension development. Here’s the links:

• The web page of the presentation
• All the extension source code files plus documentation in one download
• The video of me giving the presentation, on Vimeo (Thanks Pascal for editing this).
• all of the Design Challenge seminar videos on one page

 

Extension Development Boot Camp

Labs is currently running a Design Challenge, in which design students from around the world are taking their ideas for the interfaces of the future from the initial concept through to a working prototype.

We’re doing a series of web seminars to help these students learn the skills they’ll need to complete their prototypes.

One of these tutorial sessions, taught by Myk Melez, is now up on the web in video form for public consumption:

Extension Bootcamp: Zero to Hello World! in 45 Minutes

If you’ve ever been interested in writing a Firefox extension, but never knew how to get started, then this is the one for you. Despite the title, it’s actually over 90 minutes long. Nevertheless, I highly recommend finding 90 spare minutes to follow along with Myk’s awesomely thorough tutorial. I honestly don’t think there’s ever been a better way to learn the basics of extension development.