If you’ve been following our company/product blog, you know that we have a few big features coming up: myBalsamiq, the components feature and a new skin for Mockups. Each of these features has the potential for increasing our customer base substantially, so we need to be ready for it.

We took advantage of the downtime last week to migrate our website, blogs and source code to a more scalable, modern and reliable infrastructure. Oh, and it’s must faster too!

It was a pretty big effort, so we thought we’d share what we did and how we got to this point, in the hope that it will help you if you’re just starting out.

A bit of History

The chart above maps the 4 transitions that took us to this point.

When I was first starting up my good friends and advisers Michael Fitzpatrick and Chris Tennant generously offered to lend me space on one of their servers. They run ConnectSolutions, a very cool company which offers top-notch real-time communication solutions (you should DEFINITELY check them out, they’re awesome), so they had server-space available. Their typical slices had 4Gb of hard drive space, which I thought was plenty!

I installed Drupal (for the website), Wordpress (for the blog), Perforce (for source-code repository) and CruiseControl (for continous integration, i.e. turning the source code into the applications you download from our site). I also installed MySQL so that Drupal and Wordpress could save their data in it.

For the videos on the website I just used YouTube at this point, adding Vimeo briefly (I liked their UI, but their Terms of Service are incredibly un-business friendly).

The first migration: moving the build machine

Right around the time when Marco joined last year, we decided to move the build machine to its own server. Compiling our many different products is a CPU-intensive operation, and that’s not a good thing if that same computer has to be serving your web pages at the same time.

On top of that Perforce, which is free for up to two clients (one on the build machine and one on my laptop), was way too expensive for us, so we switched to Subversion. It behaved much like Perforce with a centralized repository of code and check-in/check-out model, plus was mature enough to have great GUI clients like Versions, so we went with it.

For the new server we chose to get “a slice” (a virtual piece of a server) on Slicehost, which we had heard about due to their great customer service.

One added benefit of the move was that from then on our code was backed up daily automatically (I had not set up backups on the Windows server because I was using my laptop as backup…I know, not good, but such is life). Slicehost makes it incredibly easy to turn on backups, it’s a “set it and forget it” kind of thing.

Regarding hosting video, because I was unhappy with Vimeo, I wrote a simple FLV player and started hosting some videos myself. This gave me more control but meant more work, and those video files take up a lot of hard drive space (remember, I only had 4Gb to work with, which by now started to feel pretty small).

Our Little Company Grows

With Luis and Mike rounding out the team at the beginning of the year, we decided to each have a blog so that we could share our experiences with you better and hopefully get your feedback along the way.

The only drawback of having five different blogs means that we needed to manage 5 different Wordpress installations, each needing to be backed up and updated regularely. Plus we needed to have a single theme to share, each with its separate sidebar. Anyways, a lot of maintenance work.

I asked Mike to take all of that on, but after a lovely chat with one of my heroes at SXSW I have come to realize that outsourcing this maintenance work would be the best way for us to do.

Another side-effect of having Luis and Mike joining full-time is that we now have more people committing code and working on different features at the same time. Luis encouraged to look at Bazaar and Hudson and gave us a demo in person when he came down to Bologna last month. Slowly but surely, I came around.

What happened last week

Right before SXSW, our old web server was straining under the load, so the night before I left for Austin I got another slice and prepped it all up (firewall, ssh, apache, mysql). BTW, I love it how things that seem so scary and hard the first time you do them can become so painless after you do them a few times.

At SXSW I met one of my heroes and he told me his new startup was basically a managed Wordpress service on steroids, so I thought, why not migrate our blogs to their service at the same time?

And “while we were at it” (the 5 most expensive words in any remodeling), why not make the move from SVN to Bazaar and from CruiseControl to Hudson?

I figured if we’re going to break everything, let’s just do it all at once and get it over with?

Well, it was a tough week, but it’s over. I bet there will be broken links to fix in the next few days, but so far, I’m really happy we made the move.

Our builds are much more streamlined, easier to manage and MUCH, much faster (we only build the skin’s SWF once instead of 8 different times, for starters). Hudson’s web interface is very usable, and the software  tells us the build is ready via Instant Messenger, which is kind-of cute.

The website feels VERY fast to me, I guess having some hard drive and more ram really makes a big difference, who knew!

As I was going through the 50 web pages that make up our website (I’m not counting the blogs), I also moved our videos to Brightcove, which we’re also very happy with so far.

As for Bazaar, it’s awesome. The ability to have your own local branches is really liberating. Just the fact of not having to fear branches as a concept any more is worth the move. I started a feature, didn’t like where it was going, so I parked it in a branch. Marco is working on components, on its own branch, while I can continue to fix bugs and do weekly releases. Mike is redoing the CSS of myBalsamiq, in his own branch. I pull his changes once in a while, but Luis doesn’t have to. So cool

The people at the Wordpress hosting company, which I cannot mention yet, are giving us tremendous support, making managing 5 different blogs much, much easier. They back up everything (which, if you remember, I still hadn’t done more than once or twice manually), and they’ll be able to handle any load we can throw at them. I’ll blog more about them when they go live.

So, we’re set up for our next phase. I can sleep better at night knowing that everything we do is backed up (a first! shame on me!), knowing that we are running as lean and efficiently as we can, and knowing that we have room to grow.

Onward!

We took the opportunity to take a look at Bazaar, the source-control system used by Ubuntu, mySQL, GNome.

Luis likes it more than Git, and we’ve been using SVN all this time, which I hear is “the old way” of working.

Anyways, we thought we’d record the session to share it with you…who knows, it may be useful if you’re like me and still don’t “get” these new ways of sharing your code…

Warning: the video is unedited and 48 minutes long.

In the end, I wasn’t totally convinced but I’m willing to give it a try. We’ll port our myBalsamiq code-base to Bazaar after our next beta refresh release and see how it feels.

What do you think? Will we ever go back to SVN?

Peldi

UPDATE:  I finally got around to packaging an official AIR 2 release that can be downloaded here.  Remember you still need to follow the instructions below and your mileage may vary !!!

adobeair_2.0.2.12610-1balsamiq1.deb

We ran into a number of issues with installing Adobe AIR Beta 2 on our hosting infrastructure for myBalsamiq.com last week, so I wanted to share a trick I found that made the process a lot smoother and that hopefully is not too big of a hack while we wait for real 64-bit debian packages from Adobe.

So first of all a note of warning, the debian package that you can download here does not constitute a way to install a 64-bit package for Adobe AIR!  Adobe has announced an official 64-bit distribution but at least as concerns beta 2, we are still talking about using workarounds to get a 32-bit AIR to run on a 64-bit distribution through downloading and installing the appropriate 32-bit dependencies.

Our use case for installing Adobe AIR on some of our servers is a simple feature that was missing from previous myBalsamiq beta releases.  What happens is that when you upload a BMML file to a myBalsamiq project we call Balsamiq Mockups Desktop through the command line interface and produce a PNG of the uploaded mockup using the export command.  This allows us to create a new myBalsamiq Mockup page for the upload complete with a mockup image without having to launch the Mockups editor first.

Now Adobe has a very detailed procedure that is important to get acquainted with to install Adobe AIR 2 on 64-bit Ubuntu 9.04 because you still have to go through it, at least up to the step where it asks you to run AdobeAirInstaller.bin (which didn’t work for us at all). Actually, I found there was no need to extract libs from the two debs (steps 4 & 5) as everything was setup right by the ia32_libs package.  I also did have to run an extra getlibs to grab libxstl1.1 as follows

sudo getlibs -l libxslt.so.1

Now  once the official deb package installed, because of a current bug in apt referenced here on Launchpad and here on the debian bug tracker, installing an AIR app through the AIR App Installer would work, but would create a broken package for the app rendering apt unusable for further installations.

So…  now for the big hack which allowed us to both install Adobe AIR using a deb package and not break apt.  What I did was use the following steps to extract, amend, and repackage the official Adobe AIR deb package to produce a patched version that lies to apt by saying its a 64-bit package!

First I extracted the deb package contents and debian meta-data into a folder:

dpkg-deb -x adobeair-2.0.0.11670.deb adobeair-2.0.0.11670balsamiq1
dpkg-deb -e adobeair-2.0.0.11670.deb adobeair-2.0.0.11670balsamiq1/DEBIAN

Then I updated the DEBIAN/control file switching the i386 architecture to amd64 and the version to 2.0.0.11670balsamiq1.

I then rebuilt the package using:

dpkg -b adobeair-2.0.0.11670balsamiq1

which produced the adobeair-2.0.0.11670balsamiq1.deb package which you can download here.

Here’s a trace of installing it on one of our machines where you can see that aptitude picks up the presence of the adobe air package (which won’t work if you use the official one)

luis@mockupshq:~$ sudo dpkg -i adobeair-2.0.0.11670balsamiq1.deb
Selecting previously deselected package adobeair.
(Reading database ... 63964 files and directories currently installed.)
Unpacking adobeair (from adobeair-2.0.0.11670balsamiq1.deb) ...

Running 32-bit AIR on 64-bit systems has not been fully tested. However, 32-bit AIR is expected to run on 64-bit systems if they have the required 32-bit libraries and packages installed.
 The following links describe how to install or update AIR 2.0 on 64-bit versions of Ubuntu 9.04, Fedora 11 and OpenSuse 11.1.
 Installing Adobe AIR 2.0 on 64-bit Linux visit http://kb2.adobe.com/cps/521/cpsid_52132.html
 Updating to Adobe AIR 2.0 on 64-bit Linux visit http://kb2.adobe.com/cps/521/cpsid_52132.html
Setting up adobeair (2.0.0.11670balsamiq1) ...

luis@mockupshq:~$ aptitude show adobeair
Package: adobeair
New: yes
State: installed
Automatically installed: no
Version: 2.0.0.11670balsamiq1
Priority: extra
Section: Development
Maintainer: Adobe Systems, Incorporated
Uncompressed Size: 44.9M
Depends: libgtk2.0-0 (>= 2.4), libxslt1.1, libxml2
PreDepends: lzma
Conflicts: adobeair1.0
Description: Adobe AIR

Now remember, your mileage with our deb is not guaranteed (although I actually also use this package on my laptop which is running karmic 64-bit)! So please don’t get angry if something terrible happens with your installation, but I do encourage you to post your experience with it in the comments here, especially if something bad happens so that others may avoid going through your misery.

Oh and if you’re interested in our myBalsamiq webapp, then definitely check out Peldi’s awesome sneak peak screencast on the company blog.

A Google search didn’t turn up much, while a Bing search returned this seemingly abandoned Flex bug (#FB-16236).

Signs pointed to an issue with our code signing certificate. I contacted the TC TrustCenter support (who issued the cert) via phone, which was totally useless. The guy didn’t even ask what happened, he just opened a ticket and 6 hours later I haven’t heard back.

Until we get this fixed we cannot ship updates to Mockups, so you can imagine how I felt all afternoon.

I posted on the Adobe Air pre-release forums but heard nothing there either.

I did eventually find a solution though: I went here: http://www.chosensecurity.com/adobe-air-certificates and since the links on the page were broken I reluctantly clicked on “Chat Now”, at least to tell them about their broken websites.

To my surprise, the person that answered my chat was extremely knowledgeable and was able to tell me exactly what the deal was.

So I’m sharing it now for those of you in the future who hit this rare issue. Do not panic, your pain is temporary.

So here’s the deal: when you sign your Air application with a certificate, it turns out that adt goes out to the interwebs and checks a Certificate Revocation List, i.e. a server that keeps a list of expired or blocked certificates.

Makes sense, except that today ChosenSecurity/TC TrustCenter has had an outage of some sorts that took down their CRL server. They’re working on it, and it should all go back to normal tomorrow.

In the meantime, a workaround is to DISCONNECT FROM THE INTERNET and sign your application then. In this case adt falls back to a cached version of the CRL, et voila’! I tried it and it works.

Hurray!

This reminds me of something my “Distributed Systems” professor taught us back in college: “a rigorous, well accepted definition of a distributed system is one in which someone, somewhere, does something…which prevents you from getting your work done“.

Yup, check!

Peldi

People from the future: If this article helped you, put a w00t in the comments!

As a young man, I was fond of listening to a lot to Talking Heads, so although the song describes a character dealing with their mid-life crisis (of which I believe mine are (mostly) over), I felt no other title to this introductory post would best describe my feelings: I am overwhelmed by joining Peldi and the gang at Balsamiq to do what I believe will be some of the most fulfilling work to come in some twenty years in challenging startup environments.  The reason is that if Balsamiq with its good humour prides itself on “adding flavor”, the pun is not innocent in the sense that it takes the right combination of ingredients, process and intention (or vision) to bring a product like Balsamiq Mockups to the desktops and wikis of so many satisfied customers.

Entrepreneurship being above all a human endeavor, clearly the ingredients are there !  Not only is our small distributed team a joy to work with, but our  partners and customers provide a rich foundation for improvement and building the future through conversations taking place all around the clock whether they concern our products or are simply encouragements do do even better.  Our processes are agile and ruthlessly focused on bringing  value to our customers through new features, enhancements, bug fixes, and usability improvements.  Release cycles are short and feedback is only a tweet or a post on our community site at GetSatisfaction away.  Finally, it only takes briefly studying Balsamiq’s track record to understand that on top of all of this rich substrate of ingredients on which to build a successful business, we have in our founder Peldi, the rare quality of non compromising leadership based on values.

Now I know all of this through experience because among other business activities, I have been working with Peldi and Marco in stealth mode all of this past year on our our webapp project MyBalsamiq.  So I am thrilled to be able from now on to focus all of my time on MyBalsamiq and bring the product out the door so that our customers old and new will be in the position use  Mockups online with their customers and co-workers. Thank you Peldi for making this possible !

Finally, please note that this is a brand new blog at Balsamiq!  The Balsamiq Tech Blog will be a place for us to engage technical discussions focused on the tools, technology and processes that we use to build our products such as Flex,  Grails or agile software development.  This will also be the place for us to talk about the modules we release as open source. Hopefully all of this will be helpful to our customers and beyond, and the benefits of learning and improving software development skills with our readers will be mutual.