Blake (old posts, page 18)

Listening to things…

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 podcasts1 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, informational2 entertainment.

  1. The list, in alphabetical order, is: Accidental Tech PodcastAfter DarkBitsplittingCore IntuitionEdge CasesFear the BootIsometricJavaScript JabberLESS THAN LIVE with KATE OR DIELostcastNo Such Thing As A FishThe DiecastThe Dungeons & Dragons PodcastThe IncomparableThe Stack Exchange PodcastThe Web AheadTotal Party KillWebcomics Weekly 

  2. I’ll readily agree that most of the things I learn aren’t going to impact my life in any significant way. I’m not going to read many comics, or play many role-playing games, or do, uh, whatever QI does, but they’re still fun to listen to. :) 

Minecraft and orcs.

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…

New kinds of thoughts.

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)

Figuring out where things are in an image.

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…

Angular JS Directives by Alex Vanston.

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!)

Using Persona in Angular apps.

In my previous blog post, I mentioned a tool I’m writing to make it easy for designers to link mockups to live bugs. But I didn’t mention that I had a reasonably-working version of the tool written in Backbone which I’ve decided to port to Angular. The reasons why are largely beside the point of this blog post, but I’ll try to sum them up by saying that I reached a point where Backbone seemed to be confusing me more than helping me, and Angular got a lot of good press at FluentConf this year.

So this morning’s task in the re-write was to re-hook up the Persona integration. I had read recently that when you had a lot of dom-manipulation functions, you should probably put that code in a directive, and since I hadn’t written an Angular directive yet, I figured this would be a great time to learn how. Writing the html was pretty easy, of course, and most of the code from the existing implementation (which was largely based on the code from the express-persona readme) could be ported over fairly quickly. The only tricky part I ran into was figuring out that I needed to include restrict: 'E' in the Directive Definition Object. After I was done, I noticed that there really wasn’t that much in the code that had anything to do with the tool I’m writing, and thus I pulled it out into a separate repo so that other people can use it.

And with that, I announce Angular-Tools, a repo containing one or more tools which you might find useful if you build Angular apps. As always, pull requests and bug reports welcome!

Drawing lines with CSS.

One of the things I’m working on as part of my job1 at Mozilla is a tool to make it easy for designers to create mockups that are linked to live bugs, similar to the ones at Are We Pretty Yet. Now, I’ve got the background showing up, and the bugs overlayed on top of it, but as it stands, I’m requiring the designers to draw the lines connecting the bugs to the various areas in the mockup right on the mockup itself! This is obviously a fairly terrible idea, since it makes it much harder than it should to move stuff around after the fact, and requires a ton of up-front planning when creating the initial image. But what are my other options?

I thought for a while about layering a canvas element over the mockup; it would let me draw whatever shapes I wanted to, but passing the click events through to the mockup seemed like it would be fairly annoying, and I don’t think the connecting lines should appear in front of the boxes showing the bug details, which adds another wrinkle. Then, over lunch, I started to wonder what it would look like if a 1px by 1px black square got stretched and rotated with CSS… So I took some time after lunch, and played around a little, and it seems like it just might work! Give it a try, let me know if you have any ideas to make it better, and feel free to take the idea anywhere you think it might be useful!

Update: In the comments, Andrew points out that I could use a 1px by 1px span instead, which would make it much easier to change the colour of the line, so I’ve linked to his jsfiddle instead. :)

  1. Sometimes I still can’t believe how lucky I am to get to do this stuff all day, and get paid for it! 

Cleaning out your Firefox profile.

For a while now, I’ve been having problems with my Firefox profile. To be fair, it’s mostly because of random about:config tweaks I’ve made, but still, not being able to test the new SocialAPI stuff was pretty annoying. So I decided to try resetting my profile, to clear out all the junk, and hopefully even make it a little faster.

But, as the page I linked to just up there mentions, resetting your profile will lose your open tabs, windows and tab groups, which kinda sucks, because I have 57 open tabs, in various groups, and I really don’t want to lose them! Fortunately, I’m a programmer, so I hacked on Firefox to get it to save and restore my tabs, and now I’m a happy camper!

A couple of days later, one of my co-workers had some similar problems, and also wanted to re-set his profile to try and fix them. I hadn’t saved the results of my hacking, so I had to re-create it for him from a combination of memory and the documentation. The new code I came up with looked something like this:

var x = gBrowser.tabs
var rv = "var tabs = [\n"
for (var i = 0; i < x.length; i++) {
  rv += '  "' + x[i].linkedBrowser.contentWindow.location + '",\n';
rv += '];\nfor (var i = 0; i < tabs.length; i++ ) {\n'
rv += '  gBrowser.addTab(tabs[i]);\n}\n'

To run it, first open about:config, and make sure the preference is set to true (double-click it if it isn’t, and it should switch automatically), then go to the Tools » Web Developer » Scratchpad menu item, which should open up a small new window with some javascript comments in it. While that window is focused, click on Environment » Browser, to make sure that you’re running the code in the browser’s chrome (instead of in the page’s content). Paste the code in, and click Execute » Display.

That should result in a bunch of code in grey surrounded by /* and */ that looks like:

var tabs = [
for (var i = 0; i < tabs.length; i++ ) {

Copy that out of the scratchpad into your favourite editor, remove the /* and */, and run the profile reset.

Once you’re done resetting your profile, you’ll need to change the preference to true again, and then re-open the Scratchpad, paste the new code you saved back in to it, click on the Execute » Run menu item, and shazam! All your tabs should be back (although they won’t be in their original tab groups. If anyone needs me to figure out how to do that, just let me know, and I’ll give it a try).

Pushing code to a remote server the volo way.

The side-project I’m working on is coming along nicely, and so I figured it was time to let other people see it. Now, I could just have everyone huddle around my screen, but since many of the people who would be interested aren’t in the same city (or even same timezone) as I am, that wouldn’t work out so well. We tried screen- sharing, but a lot of what’s being worked on is animation, and the frame-rates of the screen-sharing application we were using weren’t up to the task. To get around that, I could have recorded a video, but since a lot of the value of a prototype like this is being able to play around with it, that’s also not a great solution. So, obviously, the best thing to do would be to put it on a publicly available server, and let people run it in their own web browser, whenever they wanted!

Now, I’m running a server or two that I could put it up on, but since the project is related to Mozilla, and since Mozilla offers some personal webspace on one of their servers, I figured I might as well put it up there. :)

So, to make it easy for me to remember to build and upload the code (and to prevent me from trying to figure out all the correct options to rsync every time I wanted to upload the code), I took a couple of minutes to add a command to my volofile, which lets me merely type volo deploy, and have it optimize the code, and copy only the changed files to the remote server.