Category Archives: Projects

Danger Dashboard: for the adventurous `dom.webcomponents.enabled` enablers

You know the drill, you go to about:config, look for dom.webcomponents.enabled and turn it on because you want to try some new feature in Firefox. And then you visit some other website which relies on said support to be fully complete and all hell breaks loose… or it just breaks in variously spectacular degrees of fail.

Wait, no more–now you can install this fantabulous add-on called Danger Dashboard which will overlay a little dashboard on the bottom right corner of each website you visit, so you can

  • spot if the site is loading a polyfill
  • or spot if the site is using web components natively
  • and also toggle web components support without going to about:config, because it gets tiring after doing that many times on the same day

Toggling dom.webcomponents.enabled in one of Mozilla Brick’s demo components, brick-deck

Continue reading

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!