Second impressions with PhoneGap


I’m now a registered iPhone App Developer! After the usual waiting, emailing, phoning, and faxing that I won’t bore you with because blogs all over the world are full of people ranting about Apple’s registration process, I now have my developer key. (Personally, I don’t see what people are complaining about…it wasn’t all that painful.)

So now that I’ve written two iPhone applications, the first thing I wanted to do was load them on the phone and see how they actually behaved on real hardware. The results were, lets just say, less than thrilling. While they ran and did everything I would have expected of them, there are strange inconsistencies between the rendering of WebKit on the phone vs the desktop.

What went wrong

First off, let me state for the record that these are development versions of my apps, and I hadn’t figured on them working well right away. Lets face it, as developers we spend most of our lives working with broken crap, and try our best to make it less broken. That being said, I’m still an optimist and I had hoped.

First, what worked:

  1. The app’s icon, start-up screen, and general layout all behaved. Everything was where it was supposed to be.
  2. The app started up fairly fast. The only other app I’ve used that’s based on PhoneGap is the Translink public transit app (since I take a combination of a bus and train to get to work). It takes far longer than most apps to start, so I had expected the worse for my app.
  3. Clicking on buttons and other UI elements in my first app worked just fine. My second app, which uses more complicated gestures (pinch, rotate, etc) also worked without a hitch.
  4. My JavaScript ran quite well, with only a few minor exceptions.

Now on to what didn’t work. Keep in mind, the list above is a lot longer than I’d expected, so the oddities below are tolerable, for the time being.

  1. My CSS transitions are behaving very oddly. Instead of smoothly fading from 0% to 100% opacity, they jump between 0% and 100% immediately, back down to 0%, and then fade gracefully back up to 100%.
  2. The toolbar of my app, which is implemented as HTML/CSS, flickers whenever I click on buttons anywhere on the screen. This is especially weird since the events for those buttons, located in the center of the screen, don’t touch or interact with the HTML or CSS attributes of the toolbar in any way.
  3. For one of my apps I use an element with CSS sprites. None of these seem to work. When I change CSS classes, instead of changing the background position of the sprite image, it stays in the same skewed position.

Next steps

From here, I think I need to either use CSS classes, or set style properties from JavaScript exclusively. Mixing and matching might be causing problems. What do you think?

However, as I finish this, my wife and my in-laws want to go to the pub. So screw this hacking on frustrating code from home. I’m going for a pint and some appies!

Before I go though, I’m going to appeal to the iPhone and PhoneGap developer community at large: Have any of you encountered these problems before? Do you have any suggestions on how to make things work better?

Reblog this post [with Zemanta]

Managing sites with Git and intelligent post-update hooks

I’ve recently begun drinking the koolaid of Git, and damn it’s tasty! The things I can do with git that I couldn’t have done before (or would have been difficult to do) makes me excited about it. In fact, the one feature that I thought was a drawback — the no-one-true-server nature of it — is actually its strongest selling point.

See, the way I’ve taken to doing my development now is I create two “remote” repositories. First is “origin” which points to a repository managed by Gitosis. Second is a “live” repository that points at a working directory on my production server. That working directory is where my live site actually runs in.

On its own this is handy. As I develop new features, I push my changes to origin. Once my code is ready, and after I run “make test” to verify my site passes all its unit tests, I push to my live repo. At this point I ssh to the server, restart my server processes, and in theory all should be well.

The need for automation

I discovered quickly that in practice this was fraught with error. After a fairly large refactor, I found that the code that worked perfectly well on my development laptop fell over on production. Old or missing libraries, dependancy problems, ownership permissions on files, you name it. My site was down for 2 hours while I tried to resolve these issues. I added more unit tests to my code, but still this wouldn’t have caught these problems.

At this point I decided that a more automated approach was needed. I used a friend’s post-update hook as a template, which simply merged in changes and restarted nginx following a push to live. To this I added a long one-liner, and added the relevant commands to /etc/sudoers with the “nopasswd” option. In the end, the function looks like this:

Essentially, after my new changes are merged in, it:

  1. Creates and runs my Makefile
  2. Runs all my unit tests
  3. Tests my new nginx server configuration
  4. Reloads my new nginx configuration
  5. Restarts my FastCGI web application

If any of those steps fails, the full process halts. All the >&2 arguments ensure that the output of these commands are echoed to my local console from the remote server. So when I type “git push live”, all the test output is displayed to me inline. If an error occurs, I can immediately fix it in my local environment and push out a new change without having to log in to my remote server once.

My web application is written in Catalyst, and I use Test::WWW::Mechanize::Catalyst extensively, so I not only unit test my back-end classes, but I test the URLs users actually interact with. It even goes so far as creating and destroying test accounts within my database, so every feature of the website is tested, right down to validating the contents of my robots.txt and sitemap.xml files.

Next Steps

There are still some holes that need to be filled here.

  • If running my tests fail for some reason, I would like to roll-back the remote working directory to the previous version and restart my services, that way the site continues to function under a known-good state.
  • I would like to use WWW::Google::SiteMap::Ping to notify Google, and perhaps other search engines that support XML Sitemaps, that the contents of my site have changed and a reindexing is needed.
  • My site is localized, so I would like to regenerate my PO translation files, and if any strings have changed or are out of date, automatically send an email to my translators with the new POT template file attached.
  • Run my HTML through a spelling checker, to verify I don’t put any typos in any of my pages.
  • Since I try to use caching as much as possible, when a web page’s content has changed, I would like to automatically connect to my Memcached servers to purge the relevant pages from its cache so new versions are immediately available.

A fringe benefit is makes it fun and exciting to write unit tests! Whenever I find an area that isn’t covered, I sit down and crank out more tests to validate new features. I never want to be caught with my pants down on a deployment. Each time it catches something I missed, it makes the whole thing worthwhile.

Does anyone have any thoughts on how I can improve this? Is anyone doing something similar that I can learn from? I’m very excited about my new deployment system, and wish I’d had this ages ago. If there’s anything you want to know more about, please leave a comment.

Reblog this post [with Zemanta]

First impressions with PhoneGap

A few months ago I had the opportunity to meet with the crew developing PhoneGap down at their headquarters (Nitobi, down in Gastown district of Vancouver). It’s only a few blocks away from where I work, but the horrible downpour of rain made me think twice about going (hey, it is Vancouver after all). Next time I’ll bring my laptop with me, but it gave me an introduction to what they’re looking for help with, and where they’re taking PhoneGap.

Due to work and home commitments however, I haven’t been able to develop any applications for it until recently. I was stuck at home for almost a week with a terrible flu, and that gave me the opportunity to tinker, and helped me to avoid daytime television.

First Attempts

At first I tried to develop an app much in the same way I develop web applications on other browsers. I built a MooTools package including the dependancies I needed, stuck it in a directory, and began writing classes to implement the UI logic I needed. After compiling and getting it all onto the iPhone simulator, I screeched to a halt.

None of my logic worked. The static HTML was just that…static. So, I trimmed code, recompiled, rinse, repeat. Try again with jQuery, no joy. Try with XUI, and still things were behaving oddly.

Essentially I discovered that I was just trying to do too much. I pulled everything back, simplified my code, and did away with the external libraries. Importing MooTools and jQuery weren’t the problems exactly, though I figured it wasn’t helping. The thing I discovered is that WebKit, CSS3 and Safari’s JavaScript engine are sophisticated enough that there isn’t much need for complicated JavaScript toolkits.

Second, more successful attempts

After taking a step back, I went back to basics. I built my class using basic prototype class construction (though I miss “new Class({})” from MooTools). Instead of using JavaScript-based animations, I read up and implemented CSS3 transitions. I did my HTML layout debugging in Firefox with Firebug, proofed them in Safari on my desktop, and only then did I compile and test in the iPhone simulator.

My biggest problem was the lack of a debugger or JavaScript console on the iPhone simulator. My only way of accurately testing where my code was falling down was by issuing “alert()” statements, which of course breaks the flow of code.

I now have my app running smoothly, and as soon as my business name and licenses go through, I’m going to register as an Apple iPhone developer so I can test my app on my iPhone. With luck, I’ll be pushing my application through the AppStore release procedure, which I’m sure will be another learning curve as well.

For now, I’m happy with what I have. I’ve created a simple application that works client/server via XHR with fall-back to disconnected mode when there’s no network connection, the animations and transitions are smooth, and the JavaScript is minimal with no external libraries other than gap.js needed.

I’ll post again once I release, so everyone can see what it is I’ve been working with. I have great plans for future applications, and I’m excited about PhoneGap.

PhoneGap Impressions

Before I go though, I want to make a few points about my observations of PhoneGap. I might be misinformed on a few points, but the lack of documentation and its relative alpha/beta state may just mean that these features are coming.

  • No JavaScript console available
  • XCode can’t figure out when HTML/JavaScript dependancies change, so you have to do a “Clean All” before recompiling and testing your changes
  • XUI really isn’t ready for broad use, in my opinion. It seems like a great idea, and I would like to contribute to it, but it’s easier right now for me to write plain JavaScript.
  • Use CSS3 whenever possible; avoid issuing animations in JavaScript.
  • If you do have to do more complicated animations, use JavaScript only to piece together different sets of CSS3 animations by setting different CSS classes at intervals.

Fortunately, the PhoneGap google group is active, and quick to respond. I’m looking forward to becoming more involved as I build more with PhoneGap.

Why, oh why did I ever leave California?

I love living in Canada, and I especially like living in Vancouver. I wouldn’t trade it for anything. I have a lovely wife, a great job, a wonderful city…what more could I ask for? Oh right, that’s it…warm weather! I’m not meant for frozen water falling from the sky, or bundling up into so many layers that I feel like an onion (or a parfait).

I don’t like the cold. I especially don’t like it when my office building thinks it’s still June. I felt warmer waiting in the snow for my bus this morning than I do right now at my desk.

When I was a kid I remember a few years we went down to the beach on Christmas Day. We didn’t go into the water, of course, but we were wearing shorts and t-shirts. BBQ, drinks, and party games on the sand. If I were to do that here, I’d freeze my nuts off.

Though it does look beautiful when seen through a window. My wife uses the cold weather as an excuse to go shopping and buy warm, and cute, clothes. Maybe I should do the same and should just stop complaining.

Harder, Better, Faster, Stronger

On the train ride to work today I was listening to “Daft Punk” on my iPhone while reading my blogs, my usual morning activity. And as my mind wandered, the song “Harder, Better, Faster, Stronger” came on; it’s one of my favourites, as I’m an avid electronic music fan. But since I was reading Ajaxian and several other software industry business blogs at the time, the song seemed strangely appropriate. Everyone is trying to find ways of working harder, developing better software, releasing to market faster, and having a much stronger market position (honestly, this is what was running through my head). This made me think more about what I do to fulfill those 4 business goals, so well voiced by Daft Punk.

“Work it harder”

Personally, I like having a life. I have a wife, hobbies, Open Source projects I like to contribute to. And of course I have my day job where I do more than I’m asked to do, always trying to come up with creative side projects to help make more sales, improve the product, or visualize our usage data in a way to help us build a better product.

So given the cliché that we all have 24 hours in a day, and you have sleep, meals, and commute time involved, how do you optimize your daily work habits to maximize that time?

The way we do this at work is through Extreme Programming or Agile Software Development, both are complementary techniques to eliminate waste from the traditional development cycle. Planning documents, requirements analysis, task assignment and many other wasteful planning processes are typically eliminated.

Coming up with a comprehensive specification before the project is even started is dreadfully wasteful. They typically become a hindrance because no developer can possibly foresee what problems they’ll encounter part-way through. These development practices allow a team as a whole to be flexible, to adapt to changes mid-way through the development cycle, and develop the important bits first. If you haven’t heard about or tried Extreme Programming, I highly recommend you go read up on it. Extreme Programming Explained is a great introduction for people used to more conventional development practices.

The important thing I’ve found is that these practices can even be adapted to single-person teams. You have to alter a few things in order to get it to work for a solo team, but adhering to the principles of “Build the simplest thing that works end-to-end first, then refactor later” is perhaps the most important practice I can suggest. For myself, it’s hard to get lost in developing “Teh Bestest Softwares Evar!” Sometimes you have to take a step back, and question yourself as to what is truly important to your project? Go build that, and don’t waste your time with unnecessary frills.

“Make it better”

Cutting out what isn’t necessary, or building the simplest possible thing doesn’t mean eliminating best practices. Quite the contrary, Extreme Programming pushes very heavily on test-driven development. The ultimate goal is to write your tests before you write a single piece of code. It doesn’t have to be a difficult test, but when you first run it, the test should fail. Once you get a failing test, you write the corresponding code for your project to make the test pass. Then you move on to the next task, rinse and repeat. One of the books on our bookshelf here at work is Test Driven Development, and it’s a great book on learning how using tests to drive your development can really help. I actually need to re-read it again, since my test-writing skills are getting a bit rusty.

By stepping through your project one bit at a time, writing tests as you go, you ensure that any regression in your code is caught by your test coverage. If you’re developing applications that a user will interact with, either through a GUI or a web interface, then automated tests are needed to be able to programatically exercise your interface.

We use Selenium within a series of Windows VMWare instances. Our test runner machine spawns VM instances on our VMWare server, as well as installs fresh copies of our software on our test servers. It then runs our tests using a test harness I developed called Test::A8N to be able to execute our tests, remote-controlling the browsers from within Windows.

Along with all these tests, you need visibility into how your tests are performing. There’s no point in writing all those tests, if you never run them. So we have a nightly process that runs all of our tests in parallel across several servers (so that they can complete in a single night), and then renders an HTML “Dashboard” showing which tests passed and failed, summed up as Red, Yellow or Green. A wide-screen LCD display is easily visible by the entire team, and shows us at a glance just how we’re doing. If you see large patches of red, then you know you’ve got some bug fixing to get to today.

There are other philosophies behind both Extreme and Agile programming, but I won’t get into them here. I highly suggest you read one of these books, as they’re really eye-opening into how you can develop better software without the traditional pain and bureaucracy found in more traditional methods.

“Do it faster”

With all this attention to detail and automated tests, it’s important that your development is still faster than the traditional ways of writing code. Sometimes you have to throw out what isn’t working, and this includes your preciously-written code. If something that served your purposes a year, 6 months, or even 2 weeks ago isn’t serving you anymore, then it’s time for it to go!

Refactoring is the process of taking something that worked before, and altering or culling what doesn’t fit anymore, and writing fresh code to replace it. Many times this means throwing entire chunks of code away. It’s important to not be married to your software. It’s just work, you’ve got plenty more where that came from. Just write what is needed, and nothing more. Don’t over-engineer, since that future “Maybe” feature you’re coding for most likely won’t be needed or used anyway.

Case in point: here at work, a former employee had written a UI framework that all our UI pages were built upon. It handled navigation, Ajax code execution, and so forth. It served its purposes very well at its time, but as features were added it became more and more brittle. Finally, shortly before I was hired, they added localization support, and it broke the camel’s back. Developing new pages was tedious, time consuming, and was littered with unused features that no one knew how or even if they worked.

After a short time of dealing with this, I cut it all out and replaced it with something smaller, lighter, and custom-fit to what it was we needed to do. It cleaned up our URIs so they were easy to understand, sped up development significantly, and gave us a stable platform to continue our subsequent refactoring on top of. All of this, and we eliminated approximately 3,000 lines of code. We’ve settled on the MooTools JavaScript framework for our code, and extend it liberally to build our client-side Ajax UI.

The framework is still holding up a year later, though I know it will have to go through some growing pains later. It’s currently Apache2/mod_perl based, and we’ll eventually be ripping this out and replacing it with a lighter FastCGI wrapper. But the important thing to take from this is that we weren’t so tied to our code that we weren’t afraid to throw it away when it started to smell.

“Makes us stronger”

The end result of all of this is to improve everyone’s lives. The developers have more fun at work, the project gets completed faster, more value is delivered to the customer in a timely fashion, the shareholders make more money, and the business improves.

Therefore I like to find areas in which I can help the company. Partly because there are many more interesting problems than just what I work with in my day job. So I write tools to help the salespeople sell more software. I write tools to help the product managers identify what our customers need and use. I’m currently working with our documentation team to find new ways to represent our documentation to make it more visible to our customers when they need help.

Ultimately, if you think outside the box and thing about your project from your customer’s perspective, it opens up a much bigger world for you to find your niche. Forget about what your job title is or what you’re being tasked to do. What problems do your customers have? If you had to use the software you’re developing on a day-to-day basis, would you enjoy yourself? Or would you pick up the phone and try to find a new vendor?

There’s a great rant over on Seth Godin’s blog titled “Just doing my job.” Don’t hide behind your job title as an excuse to justify your company’s actions, and don’t use it as an excuse to be lazy. Expand your skills, help your customers solve real problems, and don’t write bad software.

“More then ever after, our work is never over”

Most importantly than anything, never blindly accept that what you’re doing now is the best there can be. Newer technologies are developed, better strategies for developing or planning software can be invented, and people become complacent. Always read, always learn. Attend conferences, teach others what you know so you can understand your craft better.

So it’s very fitting that the last phrase in Daft Punk’s “Harder, Better, Faster, Stronger” is this: “Our work is never over”.

Mootools Fx.Index v1.0

At work I needed to perform an animation on a sprite-based image (e.g. one large image containing multiple stages within an animation, pre-rendered). Since there was no easy way within Mootools to iterate over an array of class names, I created one. I called it “Fx.Index”, but if you have a better name for it, please leave me a comment.

This code is taken straight from our product, which uses Mootools 1.11. So I’ll post an update once I port it to Mootools 1.2, at which point I’ll submit it to be added in the not-yet-created plugin directory.

GM Bailout PR fumble

Apparently buying a GM car 8 years ago entitles me to recieve a wonderful little email from GM about the proposed bailout. It seems they’re trying to stem the flood of people abandoning them in the wake of the US bailout.

Dear Michael Nachbaur,

You made the right choice when you put your confidence in General Motors, and we appreciate your past support. I want to assure you that we are making our best vehicles ever, and we have exciting plans for the future. But we need your help now. Simply put, we need you to join us to let Congress know that a bridge loan to help U.S. automakers also helps strengthen the U.S. economy and preserve millions of American jobs.

Despite what you may be hearing, we are not asking Congress for a bailout but rather a loan that will be repaid.

The U.S. economy is at a crossroads due to the worldwide credit crisis, and all Americans are feeling the effects of the worst economic downturn in 75 years. Despite our successful efforts to restructure, reduce costs and enhance liquidity, U.S. auto sales rely on access to credit, which is all but frozen through traditional channels.

The consequences of the domestic auto industry collapsing would far exceed the $25 billion loan needed to bridge the current crisis. According to a recent study by the Center for Automotive Research:

• One in 10 American jobs depends on U.S. automakers
• Nearly 3 million jobs are at immediate risk
• U.S. personal income could be reduced by $150 billion
• The tax revenue lost over 3 years would be more than $156 billion

Discussions are now underway in Washington, D.C., concerning loans to support U.S. carmakers. I am asking for your support in this vital effort by contacting your state representatives.

Please take a few minutes to go to, where we have made it easy for you to contact your U.S. senators and representatives. Just click on the “I’m a Concerned American” link under the “Mobilize Now” section, and enter your name and ZIP code to send a personalized e-mail stating your support for the U.S. automotive industry.

Let me assure you that General Motors has made dramatic improvements over the last 10 years. In fact, we are leading the industry with award-winning vehicles like the Chevrolet Malibu, Cadillac CTS, Buick Enclave, Pontiac G8, GMC Acadia, Chevy Tahoe Hybrid, Saturn AURA and more. We offer 18 models with an EPA estimated 30 MPG highway or better — more than Toyota or Honda. GM has 6 hybrids in market and 3 more by mid-2009. GM has closed the quality gap with the imports, and today we are putting our best quality vehicles on the road.

Please share this information with friends and family using the link on the site.

Thank you for helping keep our economy viable.


Troy Clarke

Things must be bad for their PR department right now. Remember, I last bought a GM 8 years ago, and only had it for 3 years before buying my Mustang, which I also no longer own. Public transit and a sport bike are all I need anymore. So they’re definitely casting a wide net on this one.

How do you name your business?

Yesterday at the Elephant & Castle Pub I was talking with a friend who’s decided to finally take the leap and move into doing business as a free agent. He’s filing all the business applications, getting consulting jobs (he already has 2 long-term gigs lined up), and is going through the motions of becoming his own business entity. All that’s left is a name.

Web businesses aren’t bound by the same requirements of conventional businesses to have a relevant name, but we have different problems. Do we pick a name from a bag of industry buzzwords, and sound like we’re the company from Office Space? Do we create a name that accurately reflects what you do as a business, and sound like a group of pocket-protector-wearing dweebs? Or do you go to an extreme and invent a unique name that means absolutely nothing, and gives the customer no inkling of whether or not you’re a business or a toilet scrubber? That last one feels like the DotCom days all over again, and while it may have worked then, I doubt it would lend much credibility these days.

We do have a lot more leeway when it comes to naming technology businesses though. We can stray a bit towards the “Funky Widget” sounding names from the DotCom era, but too comical and you sound, well, like a joke.

Domain names are also an issue. Once you have a name, you have to check and see if it’s available. I’ve always been too cheap to bid on a squatter-owned domain, and have always preferred to change my business name rather than buy an already registered domain.

When I was discussing this with my friend however, I realized it’s been a while since I tried to pick a business name. My last business I just gave up, and named it after myself. “Michael Nachbaur Consulting” sounds really bland, but when you know your customers on a first-name basis, and you’re a one-man shop, there isn’t much need to get too crafty.

If you’re reading this, what would you use as a business name, and how would you pick one? Do you take words describing things you love and combine them? Or do you pick, for instance, a colour and something from nature? (BlueWave immediately comes to mind). How would you come by your business name?

Mootools 1.2 rocks

I’m developing an Ajax web application in Mootools. Two actually, if you consider the work I do with my day job. At work we’re using the older 1.11 version of Mootools, but in the interest of helping this great project, I’m doing my spare-time development using version 1.2.

Mootools 1.2 makes it a lot more obvious how to extend and create your own subclasses of existing objects. Instead of writing all my fancy UI components as a series of functions within my page’s class object, I can create separate objects to handle individual features and call out when I need to. The workflow and API is much cleaner and is far more consistent.

I’ll delve into more about my uses of Mootools later, since I’m currently up against a wall at work. We’ve got to get our release out soon, and I have a number of bugs assigned to me to fix.

Getting started

I haven’t had anything resembling a blog in years, and while I have had quite a lot to say in the past, I felt as if no one would really care one way or the other. This impression has changed recently, since I’m once again working in an office environment, and my interactions with co-workers shows that I do have some bits of wisdom rattling around in my brain that’s worthwhile sharing.

To that end, instead of publishing on an Intranet wiki, in-office emails or, God forbid, a whiteboard, I figured I’d once more try blogging as an outlet. After all, I don’t think I could do a worse job than most of the other blogs out there covering a wide variety of topics (or, worse yet, no topic at all).

The only reason I’m posting this now is I’m waiting for my test server to finish its re-install. We’re going through our second test pass now, and sadly my changes I checked in yesterday at 4:30pm broke last night’s build. So today has been a hectic lost day, as we’ve been playing catch-up to fix the various bugs that have crept their way into the trunk.

When I have more time, I’ll add more here.