(This article is also posted on Mozilla Hacks.)

You might have heard about Mozilla’s WebExtensions, our implementation of a new browser extension API for writing multiprocess-compatible add-ons. Maybe you’ve been wondering what it was about, and how you could use it. Well, I’m here to help! I think MDN’s WebExtensions Docs have a pretty great definition:

WebExtensions are a new way to write Firefox extensions.

The technology is developed for cross-browser compatibility: to a large extent the API is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox with just a few changes. The API is also fully compatible with multiprocess Firefox.

The only thing I would add is that while Mozilla is implementing most of the API that Chrome and Opera support, we’re not restricting ourselves to only that API. Where it makes sense, we will be adding new functionality and talking with other browser makers about implementing it as well. Finally, since the WebExtension API is still under development, it’s probably best if you use Firefox Nightly for this tutorial, so that you get the most up-to-date, standards-compliant behaviour. But keep in mind, this is still experimental technology — things might break!

Starting off

Okay, let’s start with a reasonably simple add-on. We’ll add a button, and when you click it, it will open up one of my favourite sites in a new tab.

Read more…

Six years ago, I started contributing to Mozilla.

Read more…

One of my favourite upcoming features in ES6 is Template Strings. I’ve used JQuery’s templates in some previous code I’ve worked on, and while it was very useful in finishing the feature on time, it’s aged now and relying on third-party libraries which we don’t have time to keep up to date isn’t the best idea and so we’re in the middle of some work to remove them. So having said that, I’m quite happy to see something similar arriving in the base language, so that we can take advantage of it without having to add any extra code.

As an aside, all the code below was tested in Firefox 34, using the Scratchpad. The comments are pasted in below the code when you select it and choose the Execute » Display menu item or hit Ctrl+L (Cmd+L on Mac). I hear they also work in Chrome, but they didn’t seem to in the version I was running (39.0.2171.95), and I didn’t want to start messing with an --es-staging flag. If someone can confirm whether they work or not, I would certainly appreciate it! :)

Read more…

Well, I managed to spend New Year’s Eve lying sick on the couch, and then went to bed semi-delirious from lack of sleep at 12:08, which kind of sucked, but I’m still hopeful that 2015 will be better than 2014 was. I mean, it almost has to be, right?

Anyways, my first, and so far only, resolution is to consume less and create more. When I look back on the year, I find I have spent more of my free time than I’ld like passively consuming other people’s content instead of making new things of my own, and that kind of bothers me. I’m very glad that a large part of my job involves making things, and that has definitely been rewarding, but there are also a lot of personal projects I want to start or finish or just push forward. And it doesn’t have to be code. I’ld like to write more blog posts, to explain the things I’m doing, and why they interest me enough to spend time on.

One of the things I did over the holidays (so far) is upgrade the software that powers the blog.

Read more…

In high school and university, I used to listen to a lot of music. As I went about my day, there would continually be something on the cd player. But these days I find myself listening to podcasts¹ in my spare audio time instead, and that strikes me as interesting because without meaning to I seem to have moved from (largely) mass-produced, mass-marketed entertainment to (mostly) independent, informational² entertainment.

I’ve been playing a bunch of Minecraft on a survival-mode server recently, and it occurred to me that when I’m playing, I basically act like an orc — cutting down all the trees, digging up all the stone, killing all the animals — all so that I can build whatever fancy strikes my mind.

In my normal life, I bike (or take public transit) for all my trips; I recycle cans, bottles, cardboard boxes; I compost vegetables in my back yard, and other organic waste through the city’s compost program; I keep the house fairly cool in winter, and we barely ran our (window) air conditioner at all this summer. But as soon as I log on to the server all the normal behaviour is right out the window.

Maybe when I build a house of my own, I’ll try to only use sustainable materials, and see how it is to live in a Minecraft world…

Earlier in my life, I would have looked at the new window in the door, and thought “Nice! They must have put that in so that people wouldn’t slam the door into other people when they opened it.” But now I find myself thinking “Nice! They probably put that in so that people wouldn’t slam the door into other people when they opened it, but it also has the beneficial effect of letting people know if there’s someone lurking in the stairwell before they open the door.” I’m not completely sure what’s changed in my life (other than I’m exposing myself to more varied viewpoints than I did when I was younger), but it seems like a positive thing from where I’m standing.

(There are a bunch of things I’ve been thinking recently, and they don’t tend to fit in 140 characters, so I’m going to try and post more of them here)

People love heatmaps.

They’re a great way to show how much various UI elements are used in relation to each other, and are much easier to read at a glance than a table of click- counts would be. They can also reveal hidden patterns of usage based on the locations of elements, let us know if we’re focusing our efforts on the correct elements, and tell us how effective our communication about new features is. Because they’re so useful, one of the things I am doing in my new role is setting up the framework to provide our UX team with automatically updating heatmaps for both Desktop and Android Firefox.

Read more…

I’ve recently been playing a lot of Fez, a 2-D (kinda) platforming/puzzle video game. Many of the puzzles use a series of symbols in squares as a code language. I really liked the way the language looked, and so I decided to write a small single page app in Angular to transliterate English into the Fezish alphabet. The first implementation was written as a filter, and it seemed to work okay, but emitting a bunch of HTML and then forcing the user of the filter to use a sanitizer to get it to render as HTML was kinda strange. That very same day, in an odd twist of fate, I got some email from Packt Publishing asking if I would be interested in featuring their new Angular JS book on my blog. Long story short, I agreed to post a review of it here in exchange for a free copy of the eBook. So on to the review…

The first thing that struck me about Angular JS Directives was the writing. I’ve read a lot of extremely dry technical books which were hard to get through, and I’m happy to say that this is not one of them. I found the writing both engaging and amusing. There are a few times where the author even pokes fun at himself for repeating the same points, which was wonderful to see. The examples were clear to read, and ably demonstrated the points that the accompanying text was making. The overall flow of the book mostly made sense, with simpler concepts leading to more complicated concepts. My only suggestion is that the chapter on Testing could have been introduced sooner, and then used in the rest of the examples to prove things were working the way that the author claimed.

I don’t like to only say positive things about something I’m reviewing, both because I believe that there’s always something that could be done better, and because I don’t want to look like a corporate shill. At least not for $17. ;) So, on to the bad things I’ve run into. It took me a lot longer to read than I would have hoped. This was partially because of a bunch of work stuff taking up all my spare time, but also because after every few pages I wanted to go back and re-write large parts of the projects I’ve done. :) My other concern is that $17 for 87 pages of content might not not be worth it to you. I found the content very useful, and I’ve certainly gotten $17 worth of knowledge out of it, but at my previous job, where I didn’t use any JavaScript much less Angular, it wouldn’t have been money well spent.

Having said all that, after the fourth chapter, I re-wrote the Fezish Filter as a Directive, and the code became far cleaner. And now that I’m done reading the ninth chapter, I think I might spend the rest of this weekend adding some unit and end-to-end tests. So in the end, would I recommend this book? Yes. Yes I would.

(Monday October 14th edit: I’ve also just been informed that Packt is running a Columbus Day sale, and if you use the discount code "COL50" in the next four days, you’ll get 50% off this, and any other eBook or video, so if you’re thinking of buying it, today would be a great day to do so!)