Blog-o! Notes from latte.ca

Fri, 27 Jul 2012

The girls are six and nine now, and they are starting to hear pop music at camp and at their friends houses. When we were in Saskatchewan they asked me to make mix CDs for them, and they both requested a few songs. I padded their choices with a few tunes of my own, and here's what they ended up with:

Delphine's 2012 Summer Mix CD

"Call Me Maybe", Carly Rae Jepsen
"Black Horse & Cherry Tree", K.T. Tunstall
"Mama Said", The Shirelles
Marmoset!
"Drinking Games", Library Voices
CBC Saskatchewan is really great about playing local music on their morning show, and we heard this while we were hanging out in my mum's room having our morning tea.
"Pumped Up Kicks" by Foster the People
I asked Twitter what terrible pop songs the kids were listening to these days, and the lovely @LadySnarksalot sent me her playlist. This is one of her tunes.
"Nothing On You" by B.o.B. featuring Bruno Mars
"Firework" by Katy Perry
Delphine has this song memorized and can sing it while performing a dance of her own creation.
"Brokenhearted" by Karmin
"Born This Way" by Lady Gaga
"Waka Waka (This Time for Africa)" by Shakira
"On The Floor" by Jennifer Lopez
"What Makes You Beautiful" by One Direction
"1 2 3 4" by Feist
"Glad You Came" by The Wanted
"I'm Yours" by Jason Mraz
This is one of my regular karaoke numbers.
"Overworld Day" by Scott Lloyd Shelly
This is from Terraria.

Cordelia's 2012 Summer Mix CD

"Don't Worry, Be Happy" by Bobby McFerrin
"Wavin' Flag" by K'naan
"Born This Way" by Lady Gaga
"Pumped Up Kicks" by Foster the People
"Firework" by Katy Perry
"Domino" by Jessie J
"Just a Girl" by No Doubt
"Waka Waka (This Time for Africa)" by Shakira
"For Your Entertainment" by Adam Lambert
"Where Is The Love" by Black Eyed Peas
"If I Had A Million Dollars" by Barenaked Ladies
The classics!
"Call Me Maybe" by Carly Rae Jepsen
"Mushaboom" by Feist
[Posted at 21:50 by Amy Brown] link
Sun, 22 Jul 2012

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.

[Posted at 14:04 by Blake Winton] link
Thu, 12 Jul 2012

As a side-project, I’ve been working on a prototype which is heavily based on a demo page from Stephen Horlander. Now, that page is pretty amazing, but if you look at the source (using command-u or control-u in Firefox, and command-alt-u or control-alt-u in Chrome), you’ll see a lot of code that looks like this:

<div class="menuPanelButton subscribeButton">
  <div class="button"></div>
  <div class="label">Subscribe</div>
</div>

and:

<div class="customizeToolbarItem">
  <div class="customizeToolbarItemIcon share"></div>
  <div class="customizeToolbarItemLabel">Share</div>
</div>

Now, one or two of those would be fine, but when we get into more than that, the repetition really starts to bug me, and I think “Wouldn’t it be better if I could just write stuff like:

<panel-button type="subscribe">Subscribe</panel-button><toolbar-item type="share">Share</toolbar-item>

instead?” And it turns out I can, using a new library called x-tag! The first thing I need to do is register the new tags I’ll be using. That’s done with code like this:

// These first two lines are here because I’m using require.js, which I’ll
// talk about in a future blog post…
define(function (require) {
  require(["jquery", "x-tag"], function($, xtag) {

    // And this is the meat of the functionality.
    // First, we’ll register the new "panel-button" tag.
    xtag.register("panel-button", {
      onCreate: function(){
        var self = $(this);
        // When the tag is first seen, make the innerHTML be this stuff below.
        self.html("<div class='menuPanelButton " + self.attr("type") + "'>" +
                    "<img src='images/button-" + self.attr("type") + ".png'" +
                    "     class='button'>" +
                    "<div class='label'>" + self.text() + "</div>" + 
                  "</div>");
      },
    });

    // And then, we’ll register the new "toolbar-item" tag.
    xtag.register("toolbar-item", {
      onCreate: function(){
        var self = $(this);
        // We could also replace this element with the html below, but I
        // haven’t done that here because I haven’t needed to yet.
        self.html("<div class='customizeToolbarItem'>" +
                    "<div class='customizeToolbarItemIcon " + (self.attr("type") || "") + "'></div>" +
                    "<div class='customizeToolbarItemLabel'>" + self.text() + "</div>" +
                  "</div>");
      },
    });

  });
});

The second step is to replace all the old html with the new tags. (I did that, too, of course.) And there we go. That’s it. In the file I was modifying, the combination of that and moving the javascript out into a separate file took the html from 275 lines down to 146 lines, and let me more easily change the buttons around, and add new ones. I call that a win, and from now on, whenever I see large blocks of repeated html, I’m going to be seriously tempted to switch them to an x-tag!

One caveat I will mention is that in my first attempt, I tried to use both the content property, and the onCreate method, and that totally didn’t work, since the content would be replaced by the value of the content property long before I had a chance to muck around with it in the onCreate. So in the future, I think I’ll just jump straight into using the onCreate method, since it’s not that much harder.

[Posted at 21:39 by Blake Winton] link
Sun, 08 Jul 2012
Requiring jQuery UI.

Yesterday afternoon, I watched a video from James Long about Mortar, which is a template for making HTML 5 Open Web Apps. Now, coincidentally, I’m starting a new project (in my spare time, obviously, since it’s a Sunday), and while it’s not an Open Web App, I saw no reason not to use the same tools they were using.

Of course, since nothing’s easy, I ran into a problem pretty quickly. My problem was that every time I tried to require("jquery-ui");, I got an error of “ReferenceError: jQuery is not defined”. There wasn’t a lot of information about how to fix it, so after most of an afternoon mucking around, I finally came up with something that seems to work, and thought I would post it.

  1. Go into your www/js/lib directory.
  2. curl -O https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js
  3. Edit the jquery-ui.js file. At the top add the line define(["jquery"], function (jQuery) {, and at the bottom, add the line });.
  4. That’s it. From there you should be good to go!

Now, I suspect there’s a better way to do this, and hopefully James or Bryan will jump in the comments and tell me what it is, but for now, at least this works.

[Posted at 18:14 by Blake Winton] link