Matt Netkow
Projects Speaking About/Contact
Open Source PhoneGap Build App Template Now Available
It started innocently enough: I built a proof-of-concept PhoneGap app that could connect to a Fitbit user’s account using OAuth.  Satisfied with the results, I kept going, adding feature after feature until I had a completed app.  Unfortunately, despite the relatively simple codebase that PhoneGap apps consist of, I still ended up with a monster on my hands!  It was time to refactor.  Through this process, I completely rethought how to separate concerns (UI, API, storage, plugins) in a PhoneGap app.  Here’s the complete breakdown - I’ve open sourced the template too!
Root
First, create a new root directory for the app (or just pull down my starter template, of course!).  In this example we’ll use “app” as the App name.  Within here will be everything related to the app, including code, tests, and app platform certificates:  
\www: All assets of the app, including code, image icons/splash screens, and PhoneGap Build configuration files.  You don’t have to name it “www” or separate the app code from tests/certificates/other metadata, but if you do, there are three benefits:
  • You can zip up the folder and upload it to PhoneGap Build without unnecessary bloat being added to the compiled app.
  • Should you decide to move away from the PG Build service and wish to compile the app manually using a specific platform SDK, you’re all set - PhoneGap/Cordova files are always placed into a “www” folder.
  • It will automatically be ready for use with the PhoneGap Developer App, a great tool that allows you to debug your app locally on a real device.  Each time you save a file from within this folder, the files get reloaded on the test device.  This is a lot faster than uploading to PhoneGap Build, waiting for the app to build, then reloading it!
.cordova: PhoneGap App configuration files.  This can be ignored if you don’t intend to use the PhoneGap Developer App. 
\tests: All JavaScript unit tests.
\certs: All the app platform keystores and certificates that are used to digitally sign your app.
\www folder contents
index.html:  This is the single page app itself.  It should contain only HTML and CSS, and link to separate JavaScript files.  You may have a bit of initialization code, though.  For example, using KendoUI Mobile:
var app = new kendo.mobile.Application(document.body, { transition: “slide” });  
// other initialization steps, such as reloading previous app state from localStorage, etc.  
config.xml: The one file that PhoneGap Build uses for configuration when creating your app.  Included in this are the platforms to build for, deployment preferences, icon/splash screen image references, permissions required (Internet access, location awareness, etc.), and plugins used.
icon.png: You can create many icons for each device resolution, but there must always be an icon in the root of the app code directory at 512x512 pixels.
splash.png: Similar to icon.png, if you use splash screens in your app a root image must reside in the main directory.
\icons folder: This contains all icon sets, neatly arranged into separate folders for each platform (\android, \ios, and on).
\splash folder: Exactly like the icons folder, but for splash screens.
\img folder: This contains all static images used in the app, from loading gifs to other custom pics.
\styles folder: This contains all CSS files.
\scripts folder: This contains all JavaScript code libraries.  Within here, I have the following:
  • \kendo folder: While technically containing both CSS and JavaScript, this is the open source Kendo UI Mobile framework used for creating a single page application.
  • controller.js: The main app controller that ties all app dependencies together, including UI interaction, user management, and data storage (localStorage, databases).
  • phonegapAppPlugins.js: All PhoneGap plugin helper code. This IIFE encapsulates plugin API’s here rather than incorporating them directly so that you can test/run your app in the browser (where they are not available of course).  I built this with extendability in mind, making it easy to add other plugins as necessary.  Check it out on GitHub.
  • dataRepository.js: This encompasses any data source.  In my case, it was the Fitbit API calls.  Using dependency injection in controller.js, I can now use any 3rd party API that I wish or test locally by not calling any external service.
  • viewModel.js: If you happen to use a MVVM style when building an app, it’s helpful to split the view model code into its own file.
  • Other JavaScript files: Any other code libraries.
Finalized structure: (generated using ‘tree /F’ cmd)
This is how I structure my PhoneGap Build apps.  If you have any ideas on how to enhance this, please let me know in the comments or submit a pull request on GitHub.
Traveling to Quebec City, Canada

My wife and I love traveling and have decided to dedicate ourselves to seeing as many places as we can.  Up until now, I haven’t blogged about our travels, which is a real shame because it’s a great way to look back on the trip years later (hard to recall everything unless it’s written down!) and also to share the experience with friends and family.

This August we visited Quebec City, Canada for 6 days and loved it! Overall, it was an amazing destination and we highly recommend it for either a quick getaway vacation or a longer stay.  Canada is a beautiful country filled with very friendly French and English-speaking people.  The flight from Chicago was a quick 2 hours and only 1 hour ahead.  Some highlights from the trip:
The City
Quebec City is stunningly beautiful.  Tons of vegetation (trees, etc.) and flowers.  It’s the cleanest city I’ve seen thus far - not one speck of trash anywhere!  Coming from Chicago, this was immediately noticeable.  It’s said to be the closest thing to visiting Europe without actually going there.  I agree - the buildings, architecture and cobblestone streets all have a European feel to them.  This makes walking around even more fun since there’s something different to see around every corner.  We mostly stayed in a bed and breakfast, Marquise de Bassano, just a couple of blocks from the main town square:
image
We had a great room: queen sized bed, private bathroom, and delicious breakfast each morning.  The owners were very friendly and accommodating.  One aspect we really like about staying in B&B’s over hotels is not only lesser cost, but the people you meet while staying there.  We had breakfast with couples from Colorado, Paris, Montreal, and Sweden.  Sharing stories about other trips and their lives in general is fascinating and really opens one up to appreciating other cultures.
Each day of the trip we explored different parts of the city.  It’s very hilly compared to Chicago but fortunately for me (haha), we had very cool weather for August (and lots of rain!) so that helped keep us comfortable.  There are lots of parks in the city - this is the main square:
image
This is a cool alley:
image
From there there were great views of the St. Lawrence river on one end that included a really neat type of elevator called a Funiculaire that you could ride to go between upper and lower Quebec (also walkable but very steep). Additionally there were lots of shops, art galleries, and restaurants.  Along the edges of the river, they’ve kept the old cannons used hundreds of years ago against invaders:
image

It’s incredible to think about the history that has occurred in the city - America just doesn’t compare!  On our first full day, we went to the Museum of Civilization.  The two coolest exhibits were a permanent one showcasing the city’s history and one on Haiti’s culture and art.  Haiti’s was focused on their voodoo religion which is very dark, very sexual (lots of phallic symbols), and at times very creepy.  This piece was one of my favorites: the artist created a life-sized baby doll head that he wore around town, capturing himself amid ordinary scenes of daily life:

image
Quebec City is also big on street performers and street art.  We didn’t know this when we stumbled on this public art piece:
image
Yes, those are pool noodles!  They encompassed an entire alleyway - very cool.
The Food
I came away from the trip feeling that Canada has similar tastes as Wisconsin: cheese, beer, and wine abound!  Naturally, we fit right in with the local cuisine.  We didn’t actually have very many dishes that were Canada-specific, actually; it might have been because we were admittedly in a touristy area, but we ate pizza, thai, chinese, pasta, etc. which was just like being at home.  I did get to try duck confit poutine (french fries, gravy, cheese curds, and duck meat), but I was surprised to find that I didn’t like it! It was the duck and the gravy that I didn’t like.  I also had a chocolate and banana crepe; coupled with a hot cappuccino, it was a perfect snack on rainy day.  The wine and cheese we had was top notch though - it was awesome to get a $5 cheese plate, but not so awesome to think that the same amount back home would be four times as much!  The beer and wine were mostly very good.  There happened to be a micro brewery festival in town when we were there, which was a nice surprise.  $12 for a mug (a nice souvenir) and $3 tastings of all European breweries.  I was in heaven!
Île d’Orleans (Orleans Island)
Just outside of the city, across the river, there is a rather large island many miles wide that hosts breweries, wineries, and chocolate shops.  Our idea was to explore it during a day trip in which we would rent bicycles on the island and ride around visiting all the shops.  The tourism site in the main square was sort of a pain though, as they claimed that nothing involving bikes were available; instead they offered us a bus tour that included multiple sites, but only a 20 minute visit to ONE chocolate shop on the Island.  That’s it.  Luckily, we found a family-owned bike rental place that drove us to the island in the morning, then picked us up in the late afternoon.  It was a lot of fun and a great way to see as much as possible in a day.  Here’s a winery we went to (wine tastings are in the basement): 
image
Montmorency Falls
Also just outside of town is a beautiful waterfall slightly taller than Niagra Falls.  You can walk around at the top, cross it via a bridge, and take stairs all the way down to the base of the falls.  We did all of that, naturally.  Here’s the side: 
image
and us:
image
Here’s the long winding stairs to the base:
image
Here’s a view of the entire waterfall:
image
and myself at the base, completely drenched from the water mist and splashing:
image
Whale Watching
We thought about taking a day trip to Montreal, but didn’t want to rent a car.  Unfortunately it was very expensive and long hours to take a bus, so we opted to go whale watching instead.  This was the only packaged day trip we went on; it was quite the gamble since it was an expensive, long 12 hour trip, with no guarantee of seeing any whales.  We had to take a 3-4 hour long bus ride to Tadoussac, which is on the Atlantic Ocean.  From there, we would have a 3 hour boat ride to view the whales, then a bus ride home.  We were skeptical but it ended up being very worthwhile.  Our bus driver was very knowledgeable about the whales, so he spent the entire way there talking about them, switching between French and English every few minutes.  When we arrived, we were told that we had to wear a water/wet suit, which was news to us!  We had been told to bring warm clothes, but nothing about that.  These suits were basically like huge winter coats and snow pants.  It was 80 degrees outside, so I was not thrilled!  Once we got on the water, it was very cold, so it worked out in the end :)  
image
We had the option to either ride in a large boat (basically a cruise ship) or for $10 more, a zodiac.  Zodiacs are these things: 
image
We picked the zodiac and were glad we did.  Within the first 5 minutes of being out at sea, we had a humpback whale surface very close to us!
image
That was really the only time we saw the body of a whale.  The rest of the times were only just the tails:
image

image
That’s ok though - it was really cool to see nature up close.  The cruise ship people’s pictures were definitely not as good as ours!  On the way back, we went a bit inland and saw some great sights:
image
We also saw seals sunning themselves:
image
Chateau Frontenac
Our last night in Quebec, we stayed at the Chateau Frontenac, which is basically a huge, one hundred year old castle that dominates the city skyline.
It was super fancy and expensive (especially compared to our little B&B), but it’s great to be able to say that we stayed there.

In the lower levels, there were tons of old relics from various time periods, along with accompanying info about the wars going on at the time and the types of royalty that lived there.
Travel Takeaways/Thoughts
- Cost of living: We assumed incorrectly that overall cost of items in Canada would be cheaper than Chicago.  Not so!  It was the same if not a bit worse.  We definitely need to pay more attention to that next time.
- Take public transportation when possible.  It’s cheaper and really helps you get around to places you might not otherwise go if you were restricted to only walking.
- Learn a bit of the local language before you go.  Beyond that, the app “Word Lens” is really helpful for translating written text on the fly using your phone’s camera.
-  We “winged it” this time in the sense that we didn’t plan out our days at all.  Sure, we decided on all the landmarks and other sights we wanted to see, but took each day as it came based on weather and what we felt up to.  It was a great, flexible approach that I think we’ll stick with. 
We definitely want to go back to Canada, having only seen 1 major city out of an entire country!  Bonus pic of us goofing around: 
My Setup when Recording Technical Presentation Videos

After presenting on hybrid mobile apps a few weeks ago at That Conference, I wanted to make a video of the talk not only to share with others but also for posterity’s sake.  I don’t know much about video recording honestly (codecs, bitrates, etc.) but I managed decent settings that look great without producing a huge video size.  Here’s what I used:

CamStudio for audio/video screen recording.  It’s free and works well enough.  Note that there aren’t any editing features, though.  For video options, I chose the XVid Codec for recording a high quality (1080p) video that didn’t result in a huge file size. The default codec, Intel IYUV, produced a massive 125MB file for a 10 second video, whereas XVid’s was 8MB.  Big difference!  Here are the video settings:

image

Be sure to open the Configure menu and choose the correct Profile based on your recording needs. I chose “Xvid HD 1080” in order to record in 1080p:

image

This worked great, except for one issue: when I started recording, an “encoding status” window popped up and blocked part of the screen! Not sure why this is enabled by default, but you can turn this off by going to “Other Options” and unchecking “Display encoding status”.

To record my voice, I used a Logitech USB headset, normally used for gaming but worked perfectly in this case too.  The audio options in CamStudio I used were:

image

A 52 minute presentation resulted in a 636MB video file.  I’m sure it can be better, but this setup works in a pinch!