First Metro Style Windows 8 App Using Javascript HTML5 and CSS

I just got around to building my first Windows 8 Application using Javascript, HTML and CSS.

It’s a image viewer which queries Flickr for pictures of beards.  It also incorporates live maps to show geolocation information attached to the  photos.  Why beards?  Because these days beards are becoming the “badge of the hipster” and hipsters must be eliminated.  So I figure this would be a useful tool to identify and locate potential hipsters. 🙂

Splash Screen 

 Searching for potential Hipsters…

Hipster Found… and who would of guessed? New York?!?

You on the other hand Mr. Karl Oskar Loow from Sweden you are keeping it real and are therefore safe.

(btw, the comb-over is sensational!)

So how did the whole dev process go?   Well Technically, I didn’t write the app without help, I really just went through one of the  labs from the Microsoft Build conference.  (You can get them over at the Build website if you want).  But it was well written and gave me an entry point into playing with Windows 8 dev.

All in all the experience was relatively pain free and taught me a few things about developing HTML / Javascript Metro apps.  Quite frankly, I’m a little unsure which way to go with Windows 8… to XAML or not to XAML, that is the question?  Given the pain in the bum that I’ve been having with WPF XAML recently, I suspect I’m going to cut my loses and just upskill on JS / HTML / CSS.  At least the skills will be transferable.

Anyway, Programming in Javascript is somewhat painful for me as there seems to be no compile time checking.  Maybe I’ve become lazy in my old age and spoiled with hand-holding dev tools, but I actually spent most of my time debugging the Javascript to find typos in the code.  In a normal C# Visual Studio Application (my comfort zone) I wouldn’t have had any of these issues because the compiler would have vomited errors at me.   Looking on the positive side though, the errors I had to track down helped me understand the application and I did discover  that there are some good(ish) tools in visual studio to help you out, namely:

  • Ability to step through Javascript just like you’d expect
  • Javascript console window (didn’t get to play with that quite enough)
  • DOM Inspection tool, for when your CSS goes out of control.  This is pretty cool, because you can use a pointer (kinda like snag-it) to highlight parts of your application and then flick back to Visual studio to look at that particular element.  Kind of like the F12 Internet Explorer Developer Tools.  In addition you can turn styles on/off to see what effect they have in real time.
So basically that’s me starting with Windows 8 Development and developing the Windows 8 Version of Hello World… or is that, Hello Beard.


Leave a Reply

Your email address will not be published. Required fields are marked *