Category Archives: Projects

tween.js r14

tween.js r14 is really more of a “cleaning house” revision than anything else. No new features have been added, but the library should be a little bit more usable now and lead by example by using better code examples that aim to be efficient JS and CSS wise:

  • Include license header on the minified files too (hyandell)
  • Make examples more efficient by using requestAnimationFrame‘s own timer instead of calling again (Robert Eisele)
  • Make it explicit that you can install tween.js with npm and bower (sole)

As usual, you can download it/clone from github or install with npm:

npm install tween.js

And as a “new thing”, although it was always here, installing via bower is also possible:

bower install tween.js

You can also read more instructions and code samples on getting the library.

Cheers to whoever told me you could install any package using git with bower. I believe it was the magnificent Edna Piranha! So thanks Edna!

tween.js r13

tween.js r13 is a much expected update (I hope) that brings three little pieces of joy:

  • New onStop callback added, by colinsullivan
  • Fix _reversed yoyo flag bug, by deanm
  • And last but not least, the initial version of docs/user guide, by sole

And also available via npm:

npm install tween.js

While writing the docs I found myself wanting to show how to use custom functions, so I also wrote another example that demonstrates this. And wrote a few custom functions plus some functions to generate functions. It’s all so meta and I love it.

In future releases I’d like to start clearing out the list of issues—some issues are there for years and I’m not even sure how applicable they are, and at least they should be reconsidered.

Most specially I want to make things more robust and cohesive build/user experience-wise. Things such as integrating with travis to make sure the tests are run when a PR is submitted, make examples accessible/visible easily and also enable access to the examples source code in an easier way–I had this notion of maybe preparing some interactive editor sort of demo so people can play with tween.js without even downloading the library or going to codepen or jsfiddle or similar. Maybe moving all examples to that style too. I still have to think about that, but suggestions are welcome. Working example suggestions are even more welcome.

Also–if you think you can improve the documentation, feel free to go ahead and send patches. SEND ALL THE PATCHES, AND THANK YOU.

From the city of FOMOnto

I seriously intended to write three (three!) blog posts past week-end but I got dragged outside to experience the glorious British Spring in London, and its pubs and stuff, and I ended up not writing anything at all. But it was good because it was Easter and you’re supposed to have a break sometimes.

Then I had this very intense work week here in Toronto which was full of discussions, pair programming, presentations, hack hack hackety hack, more discussions, and even a double session of bad 80s/90s movies to top that. The Mozilla Toronto office is packed full with so many rad people that great conversations happen all the time, so I didn’t really have the time to write any of those three posts.

But I have some cool stuff to show/discuss, so there we go before I fly back to Europe:

First, just in case you’re interested – here are the slides of my presentation: our projects, in the future. Without any context you won’t actually get most of the points, but that’s to be expected. I want to get back to this in a blog post because it’s something that every open source project should be doing, so don’t worry if you don’t follow along.

My talk ended with me trying to plant two seeds in the minds of my team mates, the first one being that we should aim to be the open source developer we would like to see. So whenever you’re unsure of what to do, pretend you’re that ideal perfect developer and act as they would do. The second idea was an automatic “good open source citizen” ACID test, and hey, tofumatt and me hacked a prototype together. Here’s acidity, which you can also install with the node package maid with

npm install -g acidity

then cd to any of your projects and run acidity, and maybe you’ll get some cool emoji.

Also, not something that I took part in, but Potch came up with a nice hackxperiment which enables you to write CommonJS-style code in WebWorkers, with the notion of making it easier to move more business logic into Web Workers so that the main thread is snappy and responsive. He also happened to say “Shadow DOM” out aloud and BAM! Angelina Fabbro (from Inspector Web and the mystery of Shadow DOM fame) entered the room. Was this staged? We’ll never know.

Another ultraexciting thing that happened was that I finally had early access to the brand new App Manager in Firefox’s DevTools. With this version you can create new Firefox OS apps straight from its interface, edit them, open existing projects, deploy and debug them, etc. The UI is way (WAY) more streamlined now—you don’t need to switch back and forth to go from debugging to deploying, and you can simply use some natural shortcuts: CTRL+Save / CTRL+Reload. This makes developing privileged FxOS apps really webby and it feels GREAT. Here’s an early screenshot so you can drool:

App Manager v2

The way I got access to this version was by checking the code out of Paul Rouget‘s Firefox branch and compiling it. I’m told I was the first person that run this new AppManager apart from its own developers, so I suppose that means ACHIEVEMENT UNLOCKED. Paul warned me of some potential weirdnesses but I couldn’t reproduce them.

For those of you curious, compiling took about 30 minutes and 5 Gb of disk space, on a MacBook Pro. I’m told that subsequent compilations should be way faster but I haven’t got to that yet.

More cool things from this week: I will be mentoring a Google Summer of Code student this summer! The project is about Firefox OS games. Isn’t it exciting?!

I also got confirmation that I’ll be speaking at an awesome conference in June. I’ll be actually speaking at two awesome conferences in June but I still haven’t announced the first one as that’s one of the posts I wanted to write, with my own promo code and stuff.

We also had a mini meatspaces meatup with some great Torontonians, where it was decided in a sideway non-important comment in passing that Toronto should be renamed to City of FOMOnto. Note to non-insiders: FOMO = Fear Of Missing Out. Fun fact: I used to think that FOMO meant Fear Of Making Out for a long time.

Now if you excuse me I have to perform some ~~~magics~~~ and fit all my stuff back into the suitcase. Stay tuned!

EdgeConf London, Audio Tags, and Web MIDI


I am going to be in the Web Components panel at EdgeConf London tomorrow (21th of March).

Being the perfectionist nit-picky person I am, and having never been in a panel of this type, I’m obsessed with getting ready and reading as much as I can on the subject. Still have a bunch of proposed questions to go through, but I hope I’ll do good. Wish me luck!

The conference is supposedly going to be streamed live and talks recorded and professionally subtitled, which is awesome because speech recognition and my command of English don’t seem to mix.

Audio Tags

Also, I forgot to post about my latest Mozilla Hacks article: Audio Tags: Web Components + Web Audio = ♥. It is a write up on my CascadiaJS 2013 talk with the same name, only with better looking audio tags, less jetlag, and a lot of editing–thank Angelina for that!


Good things that came out of the article: somehow some people got to learn about my interest in Web Audio, then I showed my existing experiments and cried begged for Web MIDI in Firefox so I didn’t have to use node.js as intermediate actor. Then Kyle Machulis (also known as qDot) decided to take the Web MIDI API in Firefox bug. Which means that sometime soon we’ll have support for Web MIDI in Firefox. Which means that a little bit later we could have Web MIDI in Firefox OS and Firefox for Android. Which means… well, do you really need me to explain how cool that can be?

Imagine controlling synthesisers with your really portable device, or using MIDI input devices to control things in your phone… all in JavaScript? There is a huge range of portable audio devices specifically targeted at iPads: there is a market for portable audio creation. Why not making it easier?

But we need help. Kyle is also working on Gaia, and he can’t implement all himself. I’m glad the ever helpful Chris Wilson (one of my personal developer heros) is always keen to give advice (example), but we need more than that. Building Web MIDI support implies building a Hardware Access Layer (HAL for friends) between the browser ‘core’ and the MIDI interfaces for each operating system. We’re talking of at least three different HALs–Linux, Mac OS, Windows. And this is where you can step in and become another Firefox hero! If interested, ping me or Kyle or probably just ask in the bug.