Unit testing your JavaScript code

I delivered a Test Driven Development workshop for a client last week in Ohio. It was a fun workshop, but man, the weather was brutal. The low the other night was below zero. The highs never made it above freezing while I was there. Brrrr.

Anyway, during the workshop we worked through TDD examples in C#, for the most part using MSTest, and leveraging the Microsoft Fakes framework in Visual Studio 2017. (See https://msdn.microsoft.com/en-us/library/hh549175.aspx.)

In addition to C# they also have a lot of JavaScript code, so I demonstrated how they could write unit tests in JavaScript to test their JavaScript code, leveraging Karma, Jasmine, and Chutzpah. The unit tests show up in Test Explorer, just like unit tests written in C# do. And setting things up isn’t very difficult and can be completed in just a few minutes.

So let’s take a look at how you can do it in your environment while we start to create a JavaScript library that calculates the score of a bowling game.

First some prerequisites

If you’re using Visual Studio 2017, node.js is probably already installed. If not, you can download it from here: https://nodejs.org/en.

Download and install the Chutzpah .vsix packages. Use the Visual Studio Tools menu > Extensions and updates… then search for chutzpah as shown below. (More info about Chutzpah here: https://marketplace.visualstudio.com/items?itemName=vs-publisher-2795.ChutzpahTestAdapterfortheTestExplorer.)

Chutzpah

Also download and install the Jasmine Snippet Pack from the Extensions and updates… menu option.  (More info about Jasmine Snippets  here: https://msdn.microsoft.com/en-us/library/hh549175.aspx.)

jasmine

Now let’s create a place to hold our  JavaScript library (the starting point of the system under test)

To give us a place for our JavaScript library, create a new empty MVC project / solution. (File > New > Project… then choose  Web > ASP.NET Web Application (.NET Framework) template, and name it BowlingGameJS. Here are a couple of screenshots . . .

BGJS1.png

After you click OK, in the next dialog box, choose the Empty project template, then click OK.

BGJS2.png

Now open a command prompt to your BowlingGameJS project’s folder and run the npm init command. Take all the defaults by pressing enter for each question. This will create a package.json file in your project folder. (Notice that you need to use lower case for the name: option.)

bgjs3.png

Switch back to Visual Studio and add package.json to your project. Right click on the project name > Add > Existing Item… > package.json, then click the Add button.

bgjs4

You should now see package.json in Solution Explorer.

bgjs5

Now that package.json is in your project, let’s open and configure it a bit more. We’ll update it to add package depenencies for karma, jasmine, and other necessary packages. We need to put these changes in the devDependencies section. As you’re typing, IntelliSense should pop up the latest version of each of the packages. The image shows the versions available as of this writing.

bgjs7

Also in package.json, change the “scripts” element to point to karma. It should look like this when you’re done. . .

bgjs8

Save package.json, then right click on it and choose Restore Packages. This should pull down the additional packages you added in package.json, but when I’ve tried this recently it hasn’t done anything.

To see if it did download the packages, open Windows Explorer to your solution’s project directory and see if the .\node_modeules directory has anything in it. If it does, cool. If it doesn’t, open a command prompt to your solution’s project directory and run npm install to install the node packages manually. It will take a couple of minutes for this to finish. (For more info, see: https://www.digitalocean.com/community/questions/after-running-npm-install-installs-with-no-errors-node_modules-is-empty).

Now with your command prompt open to your project’s directory run this command:

.\node_modules\.bin\karma init karma.conf.js

Answer the promps as follows. (Press enter to take the default, or tab to a new value as needed.

  • Which testing framework? jasmine
  • Do you want to use Require.js? no
  • DO you want to capture any browsers automatically? [press tab until you see PhantomJS]
  • What is the location of your source and test files? [leave empty for now. We’ll update it in a bit]
  • Should any of the files included by the previous patterns be excluded? [leave blank]
  • Do you want karma to watch all the files and run the tests on change? yes

Now add the karma.conf.js file to your project. (In Visual Studio, right click on the project name, and choose Add > Existing Item… and select karma.conf.js

Time to write some code?

Well, almost. Before we do, we still need to tell the tools where to find the class library and the tests you’re creating.

In Visual Studio, right click on the project name and choose Add > New Folder and name the folder Scripts. We’re going to put our library code here.

Do the same for our tests: Add > New Folder and name the folder Specs.

Now we need to update the karma configuration file to point to the Scripts and Specs folders. So in karma.conf.js, add the following

// list of files / patterns to load in the browser
files: [
    ‘Specs/*.js’
    ‘Scripts/*.js’
],

We also need to add a couple more reporters

// available reports: https://npmjs.org/browse/keyword/karma-reporter
reporters: [‘progress’, ‘dots’, ‘htmlDetailed’, ‘mocha’],

Tell karma about the available plugins

// notify karma of the available plugins
plugins: [
   ‘karma-jasmine’,
   ‘karma-ktml-detailed-reporter’,
   ‘karma-mocha-reporter’,
   ‘karma-chrome-launcher’,
   ‘karma-phantomjs-launcher’,
   ‘karma-coverage’
],

Tell karma to put all the results into one file

// configure the HTML-detailed-reporter to put all results in one file
htmlDetailed: {
   splitResults: false
},

Time for some jasmine

Now let’s add the jasmine NuGet package to our project. In VS, right click on your project name and select Manage NuGet packages…

Under the Browse tab, search for jasmine, then tell the package manager to install jasmine. NuGet will add a jasmine folder in your Scripts folder.

bgjs9

Now it’s time to write some code!

Let’s create the jasmine test spec file for our bowling game calculator and the file for the bowling score calculator itself. First the test spec since we’re doing test driven development.

In Visual Studio, right click on the Specs folder > Add > JavaScript File and name it BowlingGameTests. (Visual Studio will add the .js extension for you.)

Testing 1, 2, 3. . .

Our first test is going to be a simple one. Let’s test to see if it can correctly calculate the score if someone rolls all zeros. Open BowlingGameTests.js and write the test spec as follows:

/// <reference path=”..\Scripts/jasmine/jasmine.js” />
/// <reference path=”..\Scripts/BowlingGame.js” />
describe(‘the bowling game’, function() {
   it(‘correctly calculates gutter game’, function () {
       // roll 20 zeros
       for (i = 0; i < 20; i++) {
           roll(0);
       }
   var result = score();
   expect(result).toBe(0);
});

When you save the file you should see the test appear in the Test Explorer window.

bgjs10

If you don’t see the Test Explorer window, the easiest way to open it is to type test explorer in the Quick Launch box near the upper right of the Visual Studio UI. Then click on the Test > Windows > Test Explorer (Ctrl+E, T) item in the dropdown list.

bgjs11

Run the test by clicking on the Run All command in Test Explorer.

bgjs12

Since we haven’t started writing our system under test yet, the test is going to fail.

bgjs13.png

Developing 1, 2, 3. . .

So let’s fix that. Let’s write enough code in our system under test to satisfy the test.

Right click on the Scripts folder > Add > JavaScript File. Name the file BowlingGame (VS will add the .js extension for you). Open the BowlingGame.js file and type the following code. (Don’t laugh at the code. Remember, we’re taking this a step at a time when we do TDD.)

// BowlingGame.js
(function (window) {
    function roll(pins) {
        return;
    };

    function score() {
        return 0;
    };

    window.roll = roll;
    window.score = score;
})(window);

Save BowlingGame.js, then click Run All in Test Explorer. The test should run and complete successfully. Yay!

bgjs14

Your JavaScript test environment should be working now. Congratulations!

So let’s add another test, this time to calculate the score of a game that has one pin knocked down on every roll. It’s the same drill as before: we first write a new test spec, run the test, then write the code to satisfy the test.

In the test spec file (BowlingGameTests.js), add this code after the closing }); for the existing it method.  After you save your changes you should see the new test appear in Test Explorer. Run the test by clicking Run All.

it(‘correctly calculates all ones game’, function () {
      // roll 20 ones
      for (i = 0; i < 20; i++) {
           roll(1);
      }
      var result = score();
      expect(result).toBe(20);
});

The test will fail because we still return a hard-coded value for the score() function.

Let’s update the system under test then run the test again. Here’s a simple change that will satisfy both tests:

bgjs16

Here’s the current state of our BowlingGameTests.js file:

bgjs17

This is just the beginning

At this point you would continue writing tests with different criteria, such as a simple one that starts out with a spare then a one then the remainder all zeros; and then a test that starts with a strike then two ones then the remainder all zeros. With each new test you’ll write just enough library code to satisfy the test, making sure you don’t break any existing tests as you work. At some point you’ll also want to refactor your code (both the test specs and the system under test) to keep it maintainable.

Remember the TDD manrtra: Red, Green, Refactor.

There are other ways to write your JavaScript code, engines you could use to run tests against your code. But however you go about it, the bottom line is: unit test your code. Try edge cases. Write tests to make sure you’re satisfying the business requirements.

And have fun.

 

 

 

 

 

Curious about Xamarin for Win8, IOS, and Android?

Here are some notes about downloading and setting up Xamarin’s Field Service sample app in Visual Studio. (It’s one of Xamarin’s cross platform sample apps. It includes a project for WinRT, iOS, Android, all of which leverage the same core set of business logic.)

I assume you already have Visual Studio 2012 and Xamarin installed on your Windows 8 dev box (and Xamarin on a Mac if you’re going to build / run the app on an IOS simulator).

Download Xamarin’s prebuilt apps from their public git repository
c:\repos> git clone https://github.com/xamarin/prebuilt-apps.git xamarinPrebuilt

Also download SQLite-net from their public repo
c:\repos\xamarinPrebuilt\fieldservice\dependencies\sqlite-net> git clone https://github.com/praeclarum/sqlite-net.git

Open the VS version of the Field Service solution (FieldService.VisualStudio.sln).

Set the WinRT project as the startup project.
Build and deploy the app and kick the tires.
Looks nice, eh?

You’ll have to manually add the IOS project to the FieldService solution. (Not sure why it wasn’t already a part of the solution, but it’s easy to add.)

If it’s not open already, open the Field Service solution (FieldService.VisualStudio.sln)
Add the FieldService.IOS project to the solution
Add the Bing Maps SDK for Windows RT via NuGet

Before you run the IOS version in the simulator, be sure to enter something in the IOS project’s properties for application name, identifier, and version. Otherwise the simulator may go crazy.
Set the IOS project as the startup project
Debug toolbar should have Debug, iPhoneSimulator, iPad 6.1

Run it.

Yep. It really works. C# and Visual Studio for Windows 8, IOS, and Android.

Handy reference for the IOS Simulator gestures:
http://developer.apple.com/library/ios/#documentation/IDEs/Conceptual/iOS_Simulator_Guide/InteractingwiththeiOSSimulator/InteractingwiththeiOSSimulator.html

Porting a simple Silverlight game loop to Windows Phone 8

We’re going to have a Game Hackathon tomorrow at the Microsoft Office here in Tampa. For a little diversion, during this Hackathon I’m going to create a little Windows Phone 8 game. All I need is a game loop sample to get me started.

I thought about it for a second tonight, and it hit me: why not port the Silverlight game loop program I’ve been playing with over to the phone. It should be a snap! (http://jimblizzard.wordpress.com/2012/08/29/silverlight-game-loop-revisited-for-windows-8-and-visual-studio-2012-rtm/)

SilverlightGameLoopWindowsPhone8

Here are the steps I took:

I downloaded my Windows 8 Store app version of the source code from TFService and opened it in Visual Studio 2012. (If you haven’t tried TFService yet, you’ve gotta give it a try. Take a look at http://tfs.visualstudio.com/.)

In another copy of Visual Studio I created a new Windows Phone App project.

Images

I copied the scene.jpg and snowflake.png files from the Windows 8 project into the phone project’s Assets folder.

MainPage.xaml and MainPage.xaml.cs

I copied the XAML from MainPage.xaml in the Windows 8 app to MainPage.xaml in the Windows Phone app, starting and ending with the <Canvas></Canvas> tags.

Since the screen sizes are a bit different between Windows 8 and Windows Phone, I adjusted the location of the image to put the lighted tree in the frame. And I moved the controls for Total Snowflakes, Volume, and Wind into the viewing area.

For the code behind file, I simply copied the contents from the Windows 8 app beginning with the List<Snowflake> line to the closing brace for the class.

I added using statements for System.Windows.Media and System.Windows.Media.Animation.

Then I changed both of the RangeBaseValueChangedEventArgs to RoutedPropertyChangedEventArgs<double>

Snowflake.xaml and Snowflake.xaml.cs

I added a new user control, calling it Snowflake.xaml, then copied the XAML starting and ending with the <Image></Image> tags.

For the code behind file, I simply copied the contents from the Windows 8 app beginning with double _posLeft = 0.0; line to the closing brace for the class. I didn’t have to make any other code changes in that file.

 

That’s all I had to do. And if you’re copying from the original Silverlight sample code, you probably won’t even have to do that much.

It was super easy and took less than five minutes. Good times. Bring on the Hackathon!

 

Rolling with Team Foundation Service

This summer I had the chance to work on a Windows 8 Store reference app with a few of my colleagues at Microsoft. The opportunity to sling a little code and work with some world-class developers was too good to pass up. This is the first in a series of articles I’m going to write, describing how our Food and Dining reference app team used Team Foundation Service to assist us as we created our application. In this first post I’m we’re going to look at why we chose Team Foundation Service and how we set it up for our use.

In future posts I’ll discuss our source control strategy and (gasp!) how we handled bugs in our code.

A repository, please. . .

We were a distributed team and needed a centralized repository for source code, requirements, work items, and bugs. We were under tight time constraints and needed something that was easy to access, and couldn’t afford the burden of trying to find and provision our own hardware. So, we looked to Team Foundation Service to help us out. Team Foundation Service gave us a powerful collaboration and agile planning environment in the cloud. It can do almost everything the on-premise Team Foundation Server can do. We simply registered on TFSPreview.com, selected a site name, and had our team project up and running within minutes.

Defining our team . . .

The team started with just three members, and two more of us were added over time. Adding team members to the TFS project was easy. Ian (our team leader and de-facto TFS admin) created accounts for us using our Microsoft IDs (you might know them as Live IDs). He use the online Administration tools to add team members and define security permissions for each of us. As a new team member came on board it only took a minute or so to make the entry and voila!

 

Once Ian added each us to the project, we were ready to go. We could access and update TFS through Visual Studio 2012 or the TFSPreview.com website. We now had our collaboration hub which allowed us to manage our PBIs and
tasks; create, track, and close out bugs; and have visibility into how things
were progressing throughout each sprint.

Defining our product . . .

When we created our Team Project we went with the Microsoft Visual Studio Scrum 2.0 process template. Since we didn’t need to keep a rigorous audit trail and wanted to have the lightest amount of overhead possible, Scrum was the natural choice.

As we were trying to understand what we were going to build, we held Lync calls to discuss and refine details the vision of our Product Owner, Jit. At first we tried creating product backlog items in real-time using the TFS website, and I was acting as scribe and sharing my screen for everyone else on the call.

Depending on the amount of data we needed to capture we entered it directly into TFS via the website, or captured the data in Excel then published it directly from Excel to TFS. The options gave us flexibility and kept us focused on the task at hand.

Planning our sprints. . .

Once we had the PBIs defined, we organized them into sprints based on priority and size of the PBIs. We self-assigned PBI “owners” based on things we were interested in investigating, discovering, and coding. For example, Jerry wanted to work on the Hub page for the app, so he took that one; Ian wanted to work on the API layer that collected data from each of the data services we used; Jennifer wanted to work on Live Tiles and secondary tiles; I wanted to try out the Bing Maps control, so I took that one.

We weren’t selfish about the items we’d chosen. We helped one another out as needed. For instance, Ian created some wicked-cool grouping code for restaurant “balloons” to keep the UI from becoming overly cluttered in areas where there was a large number of restaurants in close proximity to each other.


As part of the sprint definition we plugged our availability into TFS. We all have day jobs, so we wanted to make sure our sprint planning reflected the fact that we might only have a couple of hours every day or so to work on the project.

Team Foundation Service proved to be more than up to the job of allowing our distributed team to have visibility and insight into our current status and remained to be done.

Next post: keeping our source code in order.

(Want to learn more about the Team Foundation Service, such as how to get started, features, pricing, etc.? Here’s your one-stop shop: http://tfs.visualstudio.com/)

Handy 2nd monitor for road warriors

Before the Tampa WinDev user group meeting started this past Tuesday, some of us were talking about the virtues of having a small second monitor to carry around in your laptop bag. I use two monitors at home, and really miss not having a second one while on the road. They really help when coding, debugging, etc. Second monitors just make you more productive. Everyone should have one.

Healy has a cool one that does both landscape and portrait mode. It’s about 10” diagonal and has a nice display. But my eyes just aren’t what they used to be and I need large fonts. We also debated the merits of having a touch monitor, and Kevinmentioned something about getting an cover that would turn a non-touch into a touch monitor.

I looked around on Amazon.com for a few minutes, read some reviews, and decided on a 14” LCD Lenovo ThinkVision LT1421 wide monitor. Resolution: 1366 x 768. The USB cable handles both the display feed and the power. It’s not a touch monitor, but it is very slim and lightweight, and it handles the 16:9 aspect ratio. Perfect.

It arrived the next day (have to love Amazon Prime!), and it is sweet. It has a cool little kickstand (which has a rubberized tip so it won’t slide – very nice touch). You can set it on its cover, which has some grooves in it to help make sure the kickstand doesn’t slide. The device has a solid feel, and a very clean look. Here’s a picture of it’s backside.

image
Back view of the ThinkVision, sitting on its cover.

It’s just a bit larger than the Samsung slate from //BUILD, and the slate can drive it quite nicely. They make a good looking pair. (I cut off about 2” from the right side of the ThinkVision when I took the picture below.)

image
Slate on the left, ThinkVision on the right.

So, what did it take to get it up and running? Especially on Windows 8 Release Preview?

I set it up on my laptop and my slate. Both are running Windows 8 Release Preview, and the setup was very easy. The “hardest” part was downloading the driver. (It comes with an installation CD for earlier operating systems, but I knew I’d have to download something new.)

Here’s what I did. NOTE: THIS WORKED FOR ME. YOUR MILEAGE MAY VARY.

1. I plugged it into the USB port on my laptop.

2. It appeared Device Manager, and device manager knew the device name, but didn’t have a driver for it.

image

image

3. I went to Lenovo.com/support to get the driver, and chose “Use Quick Path.”

4. For product information I put in 1452-DB6, which was on the label of the installation CD. (I tried using the model number from the back of the device itself, but that number wasn’t recognized by the website.)

5. This brought up a page for ThinkVision LT1421 14-inch Wide Flat Panel Monitor. Bingo. I clicked Devices & Software.

6. Lenovo only had drivers through Windows 7 on their site, but I went ahead and downloaded the Win7 driver. When I tried to install it, a dialog box popped up and told me where I could find the driver.

image

7. I went to www.displaylink.com/softwareand in the middle of the page I saw a wonderful sight:

image

8. I downloaded the beta driver and it installed without a hitch.

image

image

9. The installer didn’t give me a choice of where to put the driver. I poked around in Windows Explorer for a couple of minutes, but didn’t find it anywhere. So I looked again in Device Manager, and DM had found the driver, and placed the entry under the USB Display Adapters category. Nice.

image

10. After I installed the driver on my slate, I glanced over and saw the ThinkVision was already working. I didn’t have to do anything else! (On my laptop I had to reboot.)

The slate only has one USB slot, not counting the USB slot on the base unit. I use a cheap USB hub to connect my headphones, keyboard & mouse, etc, to the slate. (I don’t bother using the one on the base unit. Cool thing is, even though the ThinkVision comes with a 1-to-2-USB plug extender, I was able to just plug in one of the USB plugs into the hub, and it worked just fine. Very nice.

And it even works great as a third monitor when connected to my laptop at home. I’m now at least 3x more productive than normal.

image
Three is definitely not a crowd.

This is going to be very handy. 🙂

–bliz (@SnowstormLife)

Porting a simple Silverlight game loop to Windows 8 Metro style

Yesterday evening I went on the hunt for a XAML/C#-based example of a game loop. I ran into a couple of OLD blog posts by Mike Snow. Naturally it caught my eye, simply because of his last name.

In his posts he described game loop based on Silverlight 2. OK. Silverlight uses XAML, and the code was C#. XAML/C# are first-class citizens in the Windows 8 Metro style app world, so I figured, why not see what it takes to make this work on Windows 8?

The posts I used as reference:

The first post contains the code for the majority of the application – the XAML and the C# code. In second post Mike switches the game loop to use CompositionTarget.Rendering instead of DispatcherTimer or the Storyboard timer. Are they still around in the Metro XAML world?

To find out, I open Visual Studio and took a look in the Object Browser. Guess what I found.

Yep. DispatcherTimer, Storyboard, and CompositionTarget are all alive and well in the Windows.UI.XAML namespaces.

So I figured, why not give it a try?

It turned out that most of the “work” was simple copy & paste. I had to change the using statements to point to the Windows.UI.Xaml namespaces for the controls. Had to change the signature for a couple of the event handlers. And a few other minor things.

Here are the steps I took to make the port.

MainPage.xaml

  1. Create a new C# Metro style BlankApplication called Win8Snowflakes.
  2. Delete BlankPage.xaml then added a new UserControl named MainPage.xaml. (Yes, we’re adding a UserControl and naming it a page.)
  3. Replace the contents of MainPage.xaml with the XAML for the UserControl Snowflakes.Page (from the blog post “making it snow”). Then . . .
    1. Replace All UserControl with Page
    2. Change x:Class=”Snowflakes.Page” to x:Class=“Win8Snowflakes.MainPage” to match the name of the app & page.
    3. Remove the full screen Button. Just delete that entire tag. We won’t worry about going full screen.

MainPage.xaml.cs

  1. Replace the contents of MainPage.xaml.cs with the C# code sample for public partial class Page : UserControl (from the blog post “making it snow”). Then. . .
    1. In the using statements you’ll see some red squigglies. To get rid of them, change Controls, Documents, Media, Media.Animation, Input, and Shapes to reference Windows.UI.Xaml instead of System.Windows
    2. Add the following using statement:
      using Windows.UI.Xaml.Controls.Primitives;
    3. Change namespace Snowflakes to namespace Win8Snowflakes
    4. Change Page : UserControl to MainPage : Page
    5. The method prototypes for the event handlers for Slider_ValueChanged and Wind_ValueChanged need to be changed. You need to replace RoutedPropertyChangedEventArgs<double> with RangeBaseValueChangedEventArgs, such as from this:
      1. Wind_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) to this:
        private void Wind_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
    6. Remove the Button_Click method. (We’re not going to deal with changing the window size for now.)
    7. In the MainPage() constructor, we need to change the way the event handler is defined and the signature for the event handler.
      1. To wire up the event handler,
        _snowflakeTimer.Completed +=_snowflakeTimer_Completed;
      2. And the new signature for the event handler:
        void _snowflakeTimer_Completed(object sender, object e)

Snowflake.xaml

  1. Add a new UserControl to your project and name it Snowflake.xaml
  2. Replace the contents of Snowflake.xaml with the XAML for the Snowflakes.Snowflake (from the blog post “making it snow”). Then . . .
    1. Change x:Class=”Snowflakes.SnowFlake” to x:Class=”Win8Snowflakes.SnowFlake”

Snowflake.xaml.cs

  1. Replace the contents of Snowflake.xaml.cs with the C# code sample for public partial class Snowflake : UserControl (from the blog post “making it snow”). Then. . .
    1. Change the using statements just as we did in MainPage.xaml.cs to reference the Windows.UI.Xaml namespaces for Controls, Documents, Media, Media.Animation, Input, and Shapes
    2. Change namespace Snowflakes to namespace Win8Snowflakes

App.xaml.cs

  1. In the OnLaunched() method, change rootFrame.Navigate(typeof(BlankPage)); to rootFrame.Navigate(typeof(MainPage));

Images

  1. Download the zip file containing the two image files (one is for the background and the other for the snowflake) from Mike’s download link.
  2. Unzip the files and copy them to your project’s folder.
    1. Right click on the project and Add Existing Item, and select the two files, to add them to the project itself.
       image

Time to run the app. You should see this

image
The running app.

Congratulations.

One more change

It’s very easy to change the game loop to use the CompositionTarget.Rendering event instead of a Storyboard.

  1. In the MainPage() constructor for MainPage.xaml.cs
    1. Remove the following 3 lines:

      _snowflakeTimer.Duration = TimeSpan.FromMilliseconds(10);
      _snowflakeTimer.Completed +=_snowflakeTimer_Completed;
      _snowflakeTimer.Begin();

    2. And replace them with this one line:
      CompositionTarget.Rendering += CompositionTarget_Rendering;
    3. Change the signature for the event handler method itself
      1. from
        void _snowflakeTimer_Completed(object sender, object e)
      2. to
        void CompositionTarget_Rendering(object sender, object e)

And that’s it.

As you’ve probably heard over and over again, if you’re a Silverlight developer you have the skills to be a Windows 8 Metro style developer.

A great resource for developing Metro style apps on Windows 8 is http://dev.windows.com.

Happy Windows 8 developing!

–bliz (@snowstormlife)

Metro Accelerator Labs – Speeding Your App Development

Yesterday I blogged about the live webcast series on Windows 8 Metro style development that’s currently underway.

Today I want to make sure you’re aware that we have a Metro Accelerator Lab coming up at the end of May here in Tampa. Joe Healy and I are looking forward to seeing you there.

Oh, by the way, I “borrowed” Chris Bowen’s post on the Accelerator labs and inserted it below. (Thanks Chris!  : )

Do you have a Windows 8 or Windows Phone app idea?  Maybe you’re already working on an app and would like some guidance for getting it across the finish line?  Then come to one of the upcoming Metro Accelerator Labs

These are three-day opportunities to develop your app with experts on hand to help you with any questions:

MetroAcceleratorLabs

Please join us for a special event that you simply don’t want to miss – the Metro Accelerator Lab. This is your chance to dig deeper into Windows 8 and Windows Phone and gain all the knowledge you need to immediately start (or finish) building beautiful, fluid and immersive Metro style Windows and Windows Phone applications.

In this FREE, three-day developer event, you’ll get expert help building, testing and deploying your Metro style apps. Experience step-by-step advice from Microsoft and community experts and one-on-one technical assistance. Come for an hour, or all three days. Bring that app you’ve been tinkering with, or a new idea that you’re eager to build and we’ll help you get well on your way to releasing that killer app to the world.

We’ll also help you understand the steps needed to get your Windows 8 Metro style app into the Windows Store.

We’ll have Windows Slate and Windows Phone devices available on site so you can see exactly how your app will run. And of course, there’s always a chance we’ll have a few to give away during the course of the event.

Agenda (subject to change)

Day 1

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Designing Metro style: principles and personality”
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 5:00 – Wrap Up

Day 2

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Effective Metro Style Applications: User Experience (UX)” – To help you focus on making your Metro style apps great, we’ll review the essential features, design, and behavior of effective Metro style apps
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 5:00 – Wrap Up

Day 3

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Effective Metro Style Applications: UX (continued), Store, Performance” – Part two of our dive into the essential features, design, and behavior of effective Metro style apps
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 3:00 – “appX” – Your chance to show off your app and win prizes!
  • 4:30 – Wrap Up & Giveaways

Seating is limited and registration is not guaranteed. Secure your spot today!

Prerequisites

You must bring a laptop/notebook computer.  To develop Windows 8 Metro style apps, please install the Windows 8 Consumer Preview and Visual Studio 11 Express for Windows 8.  To develop for Windows Phone, install the Windows Phone SDK.

The focus is on your app, and while this isn’t a day of training (like our Windows Developer Camps), we will have a brief session every morning to give you ideas that you can turn into reality as you code.

Here in the eastern US, there are four Metro Accelerator Labs on the way:

Date Location  
May 30 – June 1 Tampa, FL Register
June 5-7 Alpharetta, GA Register
June 6-8 Waltham, MA Register
June 11 & 12 Orlando, FL
(at TechEd)
Open to all TechEd Attendees – just drop in!

So register today, bring your PCs and apps/ideas, and get ready to accelerate!

And as always, if you wasn’t to dig into Windows 8 Development, here are a couple of places to go first:

Can’t make it to a Windows 8 Dev Camp?

. . . But wish you could?

You’re in luck! Microsoft is going to be delivering the content via webcasts, beginning TODAY (May 14) at 11:30 AM Eastern. Too late for today’s session.

[UPDATE: Webcast recordings are being made available. Please see http://jimblizzard.wordpress.com/2012/05/21/windows-8-dev-camp-recordings/ for details and links. — bliz]

Here is the session list via Jamie. Good lunchtime feasting! (for Eastern Time Zone anyway)

And here it is, for your convenience. . .

Monday May 14th, 2012  8:30 AM PST
Introduction to the Windows 8 platform and the Windows store
Jennifer Marsman
Windows 8 is Windows re-imagined!  Join this session to learn about the new platform for building Metro-style applications.  Get an understanding of the platform design tenets, the programming language choices, and the integration points with the operating system and across Metro-style apps.  We will also discuss the enormous opportunity for developers to make crazy money with the Windows Store.  You will walk away with the resources to begin writing Metro applications for Windows 8.

Since that session is already history, here are a couple of links to information about the Windows 8 platform and store:

Wednesday, May 16th, 2012    8:30 AM PST
Designing apps with Metro style principles and the Windows personality
Chris Bernard
Metro style design has a set of five guiding principles to help you make the best choices when designing your app. These principles are the foundation for building great Metro style apps. Consider these principles as you plan your app, and always ensure your design and development choices live up to these principles.

Monday, May 21, 2012    8:30 AM PST
Building Metro style apps with XAML: What .NET developers need to know
John Wiese

If you are experienced with .NET or Silverlight and are already familiar with XAML, this session will teach you everything you need to know to create a Metro style app for Windows 8. This session will cover updates to familiar features and explore concepts that are new for Windows 8. We’ll talk about building reusable Windows Runtime Components in C#, Async programming in Windows 8 and both the Visual Studio and Expression designers. This session will show you how to turn your XAML skills into money-making Metro style apps.

Wednesday May 23, 2012    8:30 AM PST
What HTML developers need to know about coding Windows 8 Metro style apps
Michael Palermo
This session is perfect for any web developer wanting to leverage his/her skillset to develop Windows 8 Metro style apps. The session begins by proving how much web developers already know about building apps for Windows 8. The focus then turns to how to write JavaScript code with WinJS. Key points for Metro style app development will be highlighted by implementing popular feature requests using HTML5, CSS3, and JavaScript.

Thursday, May 31, 2012    8:30 AM PST
Win as One: How Contracts in Windows 8 Help You Build a Killer Metro App
G. Andrew Duthie
Contracts are agreements between Windows and your Metro style app that allow you to integrate Windows 8 features into your app. For example, Windows 8 lets users share content from one application to another by using the Share contract.

In this session, you’ll learn how contracts work and how to implement the built-in contracts such as Search, Share, Settings, and More. With Contracts, you can help users get more out of your app, and in a way that is consistent and intuitive, and they will reward you by coming back to your app again and again.

Monday, June 4th, 2012     8:30 AM PST
Bring Your Windows 8 Metro Style Apps to Life with Tiles and Notifications
Chris Bowen

Tiles and Notifications are important ways to draw attention to your app and improve your users’ experiences.  Tiles can draw users back into your app when your tile comes to life on Start screen.  They can also let users personalize their Start screen by creating deep links to specific places within your app.  Notifications, delivered through the Windows Push Notification Service, can inform and draw your users back into your app even when it’s not running.
In this session, you will learn how to effectively implement Tiles and Notifications to help your apps shine.

Wednesday, June 6th, 2012    8:30:00 AM PST
Building Windows 8 Metro style casual games using HTML 5
David Isbitski

The intent of this session is to help HTML5/JavaScript developers with writing their first Metro Style App in a fun, immersive way. We will cover the basics of HTML5 Canvas gaming and how we can easily bring it to Windows 8.  We will then add additional game functionality as we introduce HTML5 Audio,  CSS3 styling and web fonts, implementing a game loop with JavaScript, 3rd party frameworks, touch, camera, accelerometer, and WinJS controls.

Visual Studio 11 — live webcast series!

Looking for a little Visual Studio 11 action? If so, you’re going to be in heaven for the next two months. Check out this list of live webcasts during May and June.

EVENT NAME

DATE

REGISTER

Scrum and Agile Management Using Visual Studio 2011

May 8, 2012

Register

Northwest Cadence Corporation Presents:

A Development Team’s Day in the Life: The New Visual Studio 11

May 9, 2012

Register

Northwest Cadence Corporation Presents:

Agile Development with Visual Studio 11

May 10, 2012

Register

Neudesic Webcast:

Testing Metro Style Applications with Visual Studio 11

May 14, 2012

Register

Managing Agile/Scrum Iterations & Sprints

May 14, 2012

Register

Collecting Feedback from Stakeholders with Visual Studio 2011

May 15, 2012

Register

Northwest Cadence Corporation Presents:

Plan for Visual Studio 11 by Leveraging Your SA Benefits

May 16, 2012

Register

InCycle Software Presents:

Deployment Automation Challenges with vNext

May 17, 2012

Register

Scrum and Agile Management Using Visual Studio 2011

May 22, 2012

Register

Northwest Cadence Corporation Presents:

A Development Team’s Day in the Life: The New Visual Studio 11

May 23, 2012

Register

Northwest Cadence Corporation Presents:

Agile Development with Visual Studio 11

May 24, 2012

Register

InCycle Software Presents:

Exception Analytics with VS11 Pre-Emptive Analytics CE

May 29, 2012

Register

Managing Agile/Scrum Iterations & Sprints

May 30, 2012

Register

Northwest Cadence Corporation Presents:

Heard It Through the Grapevine: Get Better Feedback Direct from Stakeholders in the New Visual Studio ALM

May 30, 2012

Register

InCycle Software Presents:

Exception Analytics with VS11 Pre-Emptive Analytics CE

May 31, 2012

Register

Automating UI Testing with Microsoft Tools

May 31, 2012

Register

A Day in the Life: Developer Enhancements with Visual Studio 2011

June 5, 2012

Register

A Scrum Masters Day in the Life: The New Visual Studio 11

June 6, 2012

Register

Driving Continuous Improvement

June 7, 2012

Register

Neudesic Webcast:

What’s New in Visual Studio 11 for Application Lifecycle Management

June 11, 2012

Register

Operations Management in the Application Lifecycle

June 11, 2012

Register

Integrating Production Support into ALM

June 12, 2012

Register

Heard It Through the Grapevine: Get Better Feedback Direct from Stakeholders in the New Visual Studio ALM

June 13, 2012

Register

InCycle Software Presents:

360 Degrees Agility with vNext : Presentation of the Agile Planning Tools

June 14, 2012

Register

A Day in the Life: Developer Enhancements with Visual Studio 2011

June 19, 2012

Register

A Scrum Masters Day in the Life: The New Visual Studio 11

June 20, 2012

Register

Driving Continuous Improvement

June 21, 2012

Register

TFS in the Cloud

June 25, 2012

Register

Integrating Production Support into ALM

June 26, 2012

Register

Heard It Through the Grapevine: Get Better Feedback Direct from Stakeholders in the New Visual Studio ALM

June 27, 2012

Register

InCycle Software Presents:

360 Degrees Agility with vNext : Presentation of the Agile Planning Tools

June 28, 2012

Register

 

Enjoy!

–bliz (@snowstormlife)

When simple seems incomprehensible

[Update: here’s a video of the demo . . . Note: When you watch it on the YouTube site, you’ll probably like it better in a pop out window so you can resize it a bit larger. Direct YouTube link.  ]

========================================================================

When the demo gods are against you, what are you going to do?

Sometimes the problem that causes a demo to crash and burn is something horribly complex and difficult to diagnose, and sometimes it’s the simplest thing that can cause a demo to go wrong.

And when you’re in front of a bunch of folks, sometimes a simple issue looks horribly complex. Unfortunately this was the case during my DevConnections session this afternoon. The problem looked huge. My Web Performance Tests wouldn’t complete successfully. The load tests wouldn’t run. I would walk through my web application, no problem. I’d make the recording, no problem. But when it came time to run the automated test: problem.

A failing test. . .     

i1

The thing is, I had been running through this demo for a few days. And it had never failed like this. I even ran a load test prior to the session, while I was waiting on folks to arrive, and it seemed to be working.

All systems go, right?

Wrong.

And I just couldn’t figure out what was going on. I tried running against IIS Express, against the site in IIS itself, and it would display fine in the browser, but when I tried to run the test against it, it would fail. I closed down VS and re-opened it, but no. That wasn’t it either. Crash and burn. Flames everywhere.

Fortunately I had made some screen shots and was able to talk about what things should have looked like, but. . .

That’s kind of like the difference between
showing you a picture of a key lime pie while telling you how good it is,
and handing you a piece of key lime pie to let you taste for yourself.

It’s just not the same thing. Totally lame.

So, of course, as soon as I got out of the room and sat in a chair and looked at the screen, I saw the problem.

The web site in the browser. . .     

i2

and

The web site in the test run results. . .     

i3

See the red X of death in the test run results? Over there, where the RSS button image is supposed to be?

Yeah, that was the problem. The image was cached in the browser. But the automated web test wasn’t going to have any of that… it wanted to SEE it. It wanted to get the image from the source; it didn’t want a cached version. So it failed the result.

During the session, all I should have done was expanded any one of the failed steps to the lowest node, such as this:

The culprit. . .     

i4

When I pulled the source code for my public web site and got it running on my laptop, I’d forgotten to change the reference to the RSS button image. Which pointed back to SnowstormLife.com. On the internet.

EVERY TIME I HAD RUN THROUGH MY DEMOS BEFORE THE SESSION, I HAD BEEN CONNECTED TO THE INTERNET.

But in the session itself, I wasn’t connected. As a result, the automated test run couldn’t resolve the image location. The test results were just sitting there, trying to tell me that that was the issue. Screaming at me!

But I missed it.

And this was a session on testing. And figuring out what’s going on with an application that’s being developed. Ironic, eh?

Whiff!!!

I guess this is what A-Rod feels like in October.

So, even though this falls into the “too little, too late” category, I’m going to record the demo (a working version) and post it online for you to watch. If you’re interested. I’ll update my blog entry with the link once I’ve posted it.

And in the meantime here’s a link to my slides, which are already online: http://bit.ly/eT5P6M. Feel free to download them, print them out, then throw them into the shredder. That’s what I’m going to do. Then the demo gods will be happy and I’ll be able to move on.

Anyway, thanks for coming to the session. Wish I could have let you taste the piece of the key lime pie. It’s delicious.

— bliz

P.S. Baris, I hope you enjoy the Zune!!!