First personal #Win8 app published – toJSON, converting XML to JSON

toJSON_640

Although its pretty small, I am happy to have my first app published in the Windows 8 store. I’ve been lucky enough to be working on Windows 8 projects almost exclusively since Build 2011, but I finally carved out some time to finalize one of my own apps. I’ve been using the script and realized that if I packaged it up, not only would it be more accessible to myself but others could use it as well.

Originally I thought I’d place an ad on it, but then I remembered how much I don’t like ads. I know they have their place, but here it just seemed like a completely unrelated distraction that messed up the aesthetics. So I went with the lowest price point of $1.49.

Adding a price to it represents an agreement, between the a user and myself.  If bugs are found I’ll fix them.  If feedback is given to make it harder, better, faster, stronger; I’ll try it out and see if improvements can be made.

The one day trial (great feature of the Windows 8 store, btw)  is there so you can test the app’s conversion skills, or even just use it for a day for free if you need to.  If the need comes up again, then at least you know it works and could be worth purchasing.

Overall this has reenergized me to finish my “medium-sized” app idea and then to begin my “large-sized” app idea.

Here is the toJSON description:

Description
toJSON is a utility application that quickly converts XML to JSON. Open a file or paste XML directly, hit the transform button or the key combo Ctrl+t and you are provided instant JSON. Once you have the results, you can easily copy them to the clipboard, save as a file or share with the Windows 8 Share charm.

Features
• Quickly converts XML to JSON
• Key combos for Open (ctrl+o), Transform (ctrl+t) and Save (ctrl+s)
• Supports Share, Save or Copy to Clipboard for the transformed JSON

Oh and congrats to the Windows Store review process for being great. It took 3.5 hours to go through the submission and review process!

List of US States in JavaScript object notation

For my future self and the rest of you who may need it at some point in your JavaScript developer life, here is a list of the US States and Territories in JavaScript object notation, sometimes lovingly referred to as JSON.

This is it.  An internet bookmark for JSON states. Really, I just don’t want to go through formatting this again.  I think this was my second time actually…

Enjoy!

Cut the Rope in HTML5 is live

Its alive! Cut the Rope is now available in HTML5 on the web at www.cuttherope.ie

I was fortunate enough to be a part of this project and am pleased to see it up and running. Hats off to ZeptoLab for creating a great game with such a fun visual style.  And much praise to the two masters Joel Fillmore (JS Game Engine Lead) and Robby Ingebretsen (Project/Visuals/Everything Lead).

For more information on the developer story, checkout the Behind the Scenes site and grab some developer candy while you’re there.

Om nom, nom, nom.

Setting up your first use of the Animation library in WinJS

The WinJS Animation library provides some pre-scripted animation functions that allow you to easily reproduce the signature animations of Metro-style apps.  Since there is no “Animated Application” template (and I don’t think there should be).  I thought I’d share the first couple of steps needed to use the library in your own application.

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. In default.html, add an element to be animated.  I chose a header taking advantage of the provided classes of the theme CSS.

3. Next add a reference to the Animation library which is defined in the “animations.js” file under the “winjs/js” folder.  Additionally if you open this file, you will find in the comments at the top that this library is dependent on the “base.js” file and the “ui.js” file.  The first file is already referenced but “ui.js” needs to be added.  Add the references to your default.html file, like the following:

4. Switch over to default.js, and in the onmainwindowactivated method add the following code to locate the element and run the page enter animation.

Its important to notice the namespace is “Animation” and not “Animations”.  One reason I was prompted to write this post is because the Windows 8 dev center example code erroneously uses “Animations”. Certinaly frustrating when you’re just getting started.

Run. Run the example and you should see after the app starts up, the page title slides into view with a short animation.

What about chaining a second animation after this first animation? Since animation functions return promises its very easy to do so.  Check it out.

5. Add another element below your first in default.html. Let’s use the fadeIn function this time, so set the opacity to “0”.

6. Now go back to default.js and add a then call on enterPage. Inside define a function that locates the second element and calls fadeIn.

Run.  Now when you run the app, after the page title slides in, the paragraph below should fade in to view.

And that’s it to getting started! If you look at the WinJS.UI.Animation namespace you’ll find the other available scripted animations.

Looking through the “animations.js” file, I found it interesting to note that the available functions actually make a call to the Win.UI.executeTransition function, so if you’re looking to run some custom animations you can do that too.

I’m sure I’ll be posting more about the Animations library soon.  I’m not sure what everything does yet, but it sure is fun to poke around.

No Alert in WinJS! Use console or MessageDialog instead

Please excuse the superfluous exclamation point in the title, this is not a true emergency.

Most JavaScript developers have moved on from debugging with the alert function, but sometimes the quick and very dirty function comes up as an old instinct. This instinct will be squashed if you attempt to use alert or its siblings, confirm or prompt, when beginning your Windows 8/WinJS education.  A call to one of these functions will cause the Visual Studio debugger to break and throw an undefined exception.

Thankfully there is a JavaScript console available in Visual Studio so you can simply call console.log(). The following steps will take you that far:

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. Add an element to your default.html page providing something to click on. You could go with boring old text, but I went for a leaf image (pictured above, download) and i gave it an ID of “leafImage”.

3. Next add an event handler in the onmainwindowactivated function in default.js. You can remove the ActivationKind check as it doesn’t matter for this sample.  Now when adding the eventHandler I skipped over ‘click’ and instead attached to ‘MSPointerDown’ fully embracing the new Input system of Windows 8:

Run. Now if you run this code, you will see your text or image and once you click it with a mouse or tap it with your finger the event will fire. Alt-tabbing over to VS you should see the text logged in your JavaScript Console.

This does mean you need to alt-tab to see the information, but what about showing the info in the app?  You could use the other method of a debug div element sitting in your HTML that you can write to.  That still works perfectly fine.

Another option available is the MessageDialog, especially if this info is not just debug info but rather some information you want to share with user.  Possibly even allowing the user to make a choice or give their opinion. To use the Message Dialog you can use the following code:

And now let’s break it down.

4. (Line 5) Notice the MessageDialog is from the Windows namespace and not WinJS. This is an example of the native WinRT-integrated-frameworks-in-action.

5. (Line 10-15) a UICommand is added for each child of the resultOptions array.  Adding the label in invoked handler can also be set in the constructor.

6. (Line 18) Notice the use of the promise object with the then function.  This is how asynchronous methods are handled in WinJS, which is already an existing popular JS pattern in libraries like jQuery for example.

7. (Line 19) For some reason the event arg c is always equal to the last UICommand added to the collection, resulting in the need for the separate result variable.  Based on the documentation I’m not sure if this is an error, but it seems like it should return the selected UICommand instead.

Run. Running the app and clicking the image I found two different results. The left image is run from VS and shows the MessageDialog with a black background.  The right image is the app run in Interactive Mode in Blend showing the MessageDialog with a green (and I believe the correct) background.

Additionally while running the app in Blend I noticed that there was no JavaScript console there.  Let’s hope one is added before Blend 5 ships, as that will make debugging across the tools simpler.

Overall it is just a “Developer Preview”, but so far exploring Windows 8 has been a lot of fun. Expect more posts in the future.  This stuff is not well documented and I’m happy to share and get feedback on how things currently work.

Impressions from the IE9 beta launch event

IE9 Beta Launch Event

Yesterday I had the opportunity to attend the IE9 Beta launch event and I’m glad to have gone. This was a good day for IE and I think a good day for the web overall. Not only was Microsoft able to show that IE was taking HTML5 seriously, but also that they were pushing the experience of browsing the web to something better.  Info on the GPU and multiple core acceleration, modern browser features, nifty native integration and more of the new features are available on the site: beautyoftheweb.com

The biggest topic here is the revitalization of the web and what we can aspire to do as web designers and developers in this new brave world of HTML5 and all of its accompanying technologies.  During the keynote, Jeff Henshaw Director of Bing User Experience demoed an HTML5, GPU accelerated smarter version of Bing.  Not only was the video tag, CSS3, Canvas and other new features used, but it was presented as a whole experience. Avery thoughtful experience, and it was better than a website from the past.  (Make sure to watch the video found at the bottom of the linked article).

Is this “revitalization of the web” I’m going on about happening only because of the IE9 beta?  No, of course not.  The perfect storm of advancement and adoption of newer HTML5-ish technologies, tools support, browser support certain devices (iPad) and awareness is happening.  IE9 just gave the storm a whole lot more energy.

As a developer who worked on one of the ways to experience IE9, I can say that the performance is stellar, the support for Canvas is great and native integration is simple to accomplish.  I’d like to call out a few of these projects that shipped yesterday.  Although there are many to choose from, these are the ones I had a chance to really get to know or chat with the developers/artists that impressed me.

  • Comix Parallax from Steam Design – wish all comics moved like this
  • Endless Mural from Joshua Davis – collaborative art where everyone is a designer
  • Jitterbugs from Cynergy – fun game with great music and visuals
  • Rough Guides from Metia – crowd sourced traveling advice with flickr photos
  • BeatKeep from Archetype – because you  can always use a beat box
  • Lost World’s Fair from Mighty and Friends – WOFF extravaganza
  • Jack and the Beanstalk from Clarity Consulting – graphical storybook w/physics
  • and of course, Agent8Ball from Pixel Lab – bombs, billiards and bow ties!

One of my favorite quotes was from Brendan Hall and Joshua Davis regarding performance: “when running the code for the burst gesture the first time, we were like, ok let’s see how it runs… expecting something to go slow… and boom!  It just worked!”.

That may not be word for word, but I know the “boom” part was right.

And it may sound magically, but a GPU accelerated Canvas implementation and a speedy JavaScript engine is pretty dang awesome.