Category Archives: Code
Logging QUnit results
I’ve mentioned QUnit in other posts [POST: CUSTOM QUNIT TEST TYPES] and how much stock I put into unit testing in general, so I thought I’d share some more tips for people who don’t have much experience with QUnit. This will probably be a recurring theme on this blog.
One of the advantages of QUnit is that it has built-in hooks for testing automation tools. I use these hooks to do basic console logging so I can see what test is running next to my own log messages. I also log the amount of time each test takes.
The code to add these hooks is straightforward:
var startTime = null;
var currentTest = null;
QUnit.testStart = function(details) {
currentTest = details.name;
startTime = new Date().getTime();
console.warn("QUnit starting " + currentTest);
};
QUnit.testDone = function(details) {
console.assert(currentTest);
cm.console.warn("QUnit finished " + currentTest + " (" + (new Date().getTime() - startTime).toString() + " ms)");
currentTest = null;
};
QUnit.begin = function(details) {
cm.console.log("QUnit starting");
};
QUnit.done = function(details) {
cm.console.log("QUnit finished");
};
If you use modules then there are hooks at that level also:
QUnit.moduleStart = function(details) {
};
QUnit.moduleDone = function(details) {
};
The same approach can be used to do other things like send notifications (email/tweet) or generate a timing summary. You can read more about the QUnit integration hooks at:
http://docs.jquery.com/Qunit#Integration_into_Browser_Automation_Tools.
IntelliJ IDEA Code Completion for Knockout data-bind attributes
I’m a fan of Knockout. Among other awesome features, it allows you to create custom data bindings right inside your HTML using a data-bind attribute. The value of this attribute is actually a piece of JavaScript code that is executed each time the bindings are evaluated. These bindings can be simple or quite complex. Here is a simple example:
</pre>
<div data-bind="css: { profitWarning: currentProfit() < 0 }">Profit Information</div>
<pre>
Unfortunately, if you’re working with IntelliJ IDEA (WebStorm/RubyMine) you won’t get all of its JavaScript magic for the data-bind value because it thinks it’s looking at an HTML attribute string, so no code completion, etc.
But there is a way to fix this. IntelliJ supports something called Language Injection (originally called IntelliLang) to detect code fragments within another language, such as JavaScript code inside an HTML script element. Even better, IntelliJ lets you define your own Language Injections. So let’s create one for the Knockout data-bind attribute. It’s pretty straightforward to do, here are the steps…
- In your project settings (even though Language Injections are global, they are defined in the project settings) select Language Injections
- Click New then XML Attribute Injection
- Then fill it out the dialog as follows (see screenshot below)
- ID is the language type (JavaScript in our case)
- Prefix/Suffix are used to make the
data-bindstring valid JavaScript code - Local Name indicates the attribute name where the Language Injection applies.
And now you will get all the IntelliJ goodness you love when editing your Knockout data-bindings like code completion, syntax/error highlighting, docs, and navigation!
You don’t have to stop with Knockout of course. You can also create more complicated injection rules using XPath or IntelliJ internal “Program Structure Interface Patterns,” which allow you map to the language structure itself.
I’ve created a few for other cases as well, which I’d be happy to share in another blog post if there’s enough interest. Just let me know in the comments.
Related articles
- Programmer Productivity: Emacs versus IntelliJ IDEA (henrikwarne.com)
An iPhone and Android visual dictionary for Crisis Camp Haiti
I’m attending the 2nd Crisis Camp for Haiti this weekend. It’s amazing how many more people are planning to show up and help out from across the country and the world.
In prep for the weekend I’ve written a prototype for a visual dictionary mobile application that runs on iPhone and Android phones. Haiti has a large mix of languages and a high percentage of people with limited reading and writing skills, but relief workers still desperately need to communicate on a variety of subjects. Good visual dictionaries can be great for this since they allow communication through well recognized images and symbols, but the existing approaches are paper based which limits the vocabulary. Physical dictionaries also need to be printed and then distributed to the aid workers (a hard task in a crisis).
By using a mobile application we hope to work around these issues.
Here are some screenshots of the prototype. It’s not pretty, but it works on both iPhone and Android and I think it’s a solid starting point. I developed it in Appcelerator Titanium because that is what one of the existing teams is using for their mobile applications. It allows us deploy the app to any Android or IOS device. And it’s great for prototyping and testing since you can do that using normal web development tools.
You can expand the dictionary on the server and the client downloads the updates next time it’s connected. I think we may add a way to share dictionaries directly between phones as well, (not surprisingly, internet access in Haiti is intermittent at best). In time my hope is that we can even crowdsource the images and translations into an open source repository to have an ever-growing vocabulary for this and other image-based translation apps.
studgeek 