Mockery Blog

Today I’m posting the first of what I intend to be a regular series of posts detailing tips, tricks, and lesser-known features in Mockery. You may be using Mockery (if you’re not, get over to the download page and get your copy!) without knowing about some really cool features.

OS Themes

One of Mockery’s most powerful features is one that a surprising number of users don’t take advantage of: the ability to view your mockups as realistic Windows or Mac applications. You can change the OS theme of the current slide on-the-fly using the toolbar buttons:

Populate menubars and menus with common values

You can save a lot of time when adding menus to a mockup by using the Populate with common values command. To do this, first add a menubar to a window by checking the “Has a menubar” box. You’ll see the menubar appear (either in the window or at the top of the slide, depending upon whether the current theme is MacOS X). You can enter the name of a new menu in the text box and press enter to add a new menu.

However, Mockery can help out by adding the default File, Edit, and Help menus for you, including their common menu items. Just right-click on the the menubar (Cmd-click on a Mac) and choose Populate with common values. You’ll see the new menus right away.

Copy as Image, and paste image data into Mockery

You may not know that you can copy any Mockery element to the clipboard as an image and paste it into an email or word processing document. It’s easy. Just highlight the item you want to copy and click the Copy as image button on the toolbar.

You also may not know that you can paste image data directly in to Mockery. This can be very useful for basing new mockups on existing applications. Just take a screenshot of the app you want to modify, then choose Edit-Paste in Mockery. You’ll see a new image element has been added to your document.

Where to learn more

You can find lots of tips and instructions on the support page. Also feel free to get in touch with me via email or on Twitter at getMockery.

Programmers who are new to JavaScript but familiar with other C-syntax languages like C or Java are definitely familiar with the switch statement, but may not be aware of how much more flexible this construct is in JavaScript. In fact, I’ve heard experienced programmers claim that they never use switch statements!

One major difference in the JavaScript switch statement  is the fact that the condition can be any type of variable, not just numeric types. Most obviously, this allows you to use a string or an object, which provides a lot of flexibility. So much flexibility, in fact, that when used with a boolean condition the JavaScript switch can provide a very different type of program flow control.

For example, consider a case where we want to take different actions, respectively, if a number is greater than 100, less than -100, or equal to 0. We could write it as a series of if/else ifs, like this:

if(x > 100) {
    doSomething();
} else if (x < -100){
    doSomethingElse();
} else if (x == 0){
    doAThirdThing();
}

Using a switch statement, this block becomes:

switch(true){
    case (x > 100):
        doSomething();
    break;
    case (x < -100):
        doSomethingElse();
    break;
    case (x == 0):
        doAThirdThing();
    break;
}

Is that any better? Probably not. In fact, it’s a little more clever, which may make it a little harder for other programmers to maintain, which would actually make it worse. However, consider the case where we want to take a specific action if x is greater than 100 or y is greater than 200, or z is less than -100, or if (x + y + z) is greater than 500. We could write this:

if(x>100 || y > 200 || z < -100 || (x + y + z) > 500){
    // um, what?
    doSomething();
}

Using the switch statement, that same code looks like this:

switch(true){
    case x > 100:
    case y > 200:
    case z < -100:
    case (x + y + z) > 200:
        doSomething();
    break;
}

I find the second block much more readable. Is it groundbreaking or radically new? No, but this is just another case where the flexibility of JavaScript’s syntax provides an interesting opportunity for more maintainable, readable code.

I finally got an opportunity yesterday to do something I’ve always wanted to do: use bitwise arithmetic in JavaScript. Why would I want to do that? Mostly because it’s interesting and different, but also because bit-twiddling is something that programmers should just know how to do, whether or not we ever actually have to anymore.

The problem with bitwise arithmetic in JavaScript (and, for that matter, in most other languages) is that it’s almost always the wrong solution to the problem. It’s not 1972 anymore, and we can spare enough RAM to give each boolean value its own variable. Sure, it’s a tiny bit less efficient, but the efficiency cost is more than offset by the increased readability and maintainability of code with meaningful variable names.

So in all but the most performance-critical examples, using bitwise arithmetic smacks of premature optimization and over-cleverness. So imagine my delight when I was given the task of storing at least 2, possibly more, flags in a single database field. We weren’t going to get a second field under any circumstances. Arguments raged about whether to use comma-delimited strings, JSON-encoded objects, pre-defined constants, or something else.

What I arrived at was, I believe, the correct solution given the problem. I’m using an integer to store the booleans, and each bit position in the int corresponds with a single flag. Checking the flags is where the fun comes in. Folks with heavy CS backgrounds are not going to be impressed, but those of us who have honed our skills in interpreted languages will get a kick out of this:

// Check whether the second bit is set in the passed integer
function checkFlag(bitmap){
    var mask = 2; // since 2 in binary is 00000010, this will check the second bit.
    return bitmap & mask
}

The bitwise AND operator (&) takes the bitmap and the mask (which is 00000010 in binary) and returns a new number where bits are only set to 1 if they are 1 in both the bitmap and the mask. So if you pass in 3 (00000011 in binary) as your bitmap, only the bit in the second position appears in both. The operator returns 0000010. Since it’s non-zero, we know it passed the test. If you pass in 4 (00000100 in binary), no bit gets set since no bit is set in both numbers. The operation returns 0, and we know the test failed.

So, given a tricky problem (store multiple boolean values in a single variable), we have a tricky solution that’s a little bit of fun to implement and think about. I would love to hear examples of other legitimate uses for clever JavaScript.

I posted a link to the site today with a request for comments to the Joel On Software Business of Software discussion group.

I got a couple of comments in the thread and a couple more via email, and even one through UserVoice. Very nice, and big thanks to everyone who helped out with comments.

What’s the point? Well, if you’re a developer or have a startup, I strongly suggest that you post a link at the JOS boards. It’s been a pretty exciting day for me.