Imagine this scenario. You buy a game for $4.99 and you really like it, but your wife sees you playing it and wants it too. Your options are to a) hand your tablet to your wife (when you're not playing it), b) log your wife into her tablet with your credentials (never the right choice and not even possible on other operating systems ;), or c) make sure you're using Windows 8 because the Windows Store has a elegant solution for this scenario.

The policy for the Windows Store is that when you get an app (whether it's free or $999) you can install it on up to 5 PCs. The interesting thing is that those don't have to be your PCs. Here's the scoop…

1. Have your wife log in to her PC (as her!) and go to the Store
2. Pull out the Charms bar (I still love that gesture!) and hit Settings | Your account
3. Hit Change user and log in with your Microsoft account
4. Install your app
5. Go back to Settings | Your account and hit Change user again to get your credentials out

This is a tremendous advantage to the Windows Store, and it's not even the only advantage Microsoft's platform has over the competition. If you want to see the details of Licensing apps, you can read this blog post.

Enjoy!

I can hardly stand not knowing how something works under the hood. More often than not, I'd rather have a working knowledge of a system than the convenience or function of the system itself. It's why I chased degrees in Computer Electronics and Computer Engineering in the first place. I don't know so much about all of the fancy things that engineers put into processors and primary system boards these days, but I'm relieved to have at least a fundamental understanding of a control bus, a machine clock, a MOSFET, an assembly program, and the higher level software abstractions. But I digress…

What I want to talk about right now is the anatomy of a push notification message. I was intimidated by the subject when I was first introduced to it, but I've climbed on top of the general concept now and feel confident enough to post on the matter.

I do have to say that I'm pretty excited about the convenience of Windows Azure Mobile Services (WAMS) abstractions over the process, but I don't want to use it blindly without understanding what it's doing under the hood. I'm going to start with a review of the process and players in a typical push notification. You can find this diagram and an overview of the process here.

The green is you and the blue is Microsoft. You are writing an app and you are responsible for a cloud service to communicate with WNS.

In my typical attempt to make complex sound easy, I'm going to walk you through this process.

• [Steps 1-3] Your app asks Windows for a channel.

  You ask Windows for a channel, Windows asks WNS (this happens transparent to you), and then Windows gives you a channel. This channel is just a string. Here's a sample URI with an ellipse since it's actually much longer.

  https://bn1.notify.windows.com/?token=AgYAAABrcyAqFeh...wfOG5%2bD4TCeHU%3d

  By the way, the channel that Windows gives you also includes an expiration time which may be helpful.

• [Step 4] Your app sends this URI to your cloud service

  You can use whatever means you choose, but I would hope that you'd find a smart and secure way to do that. A potential attacker would have to get this URI and also your Package Security Identifier and Client Secret in order to start sending malicious app notifications, but still.

• [Step 5] Your cloud service asks WNS (Microsoft's server) for an access token and then triggers a push

  Here's where the bulk of the "magic" happens. Your service does two HTTP calls. The first gets it an access token (which you'll likely want to cache), and the second (and subsequent) initiates a push to your app. WNS knows where your app is because of the URI that you sent it.

  Here are examples of those two raw HTTP messages…

  First message

  POST /accesstoken.srf HTTP/1.1
  Content-Type: application/x-www-form-urlencoded
  Host: https://login.live.com
  Content-Length: 211
  grant_type=client_credentials&client_id=ms-app%3a%2f%2fS-1-15-2-2972962901-2322836549-3722629029-1345238579-3987825745-2155616079-650196962&client_secret=Vex8L9WOFZuj95euaLrvSH7XyoDhLJc7&scope=notify.windows.com

  It's just a simple POST to login.live.com/accesstoken.srf. The client_id is actually the Package Security Identifier (SID) that you get from your developer dashboard at http://dev.windows.com, and the client_secret is the Client Secret that you find in the same place.

  The response to a successful access token request is something like…

  HTTP/1.1 200 OK
  Cache-Control: no-store
  Content-Length: 422
  Content-Type: application/json
  {
  "access_token":"EgAcAQMAAAAALYAAY/c+Huwi3Fv4Ck10UrKNmtxRO6Njk2MgA=",
  "token_type":"bearer"
  }

  With that, your service has what it needs to submit notifications to be pushed to your app.

  Second message

  Your service has the access token and that's all it needs to issue requests for WNS to push to your app.

  Here's a push message that changes the text on your tile…

  POST https://bn1.notify.windows.com/?token=AgYAAABrcyAqFeh...wfOG5%2bD4TCeHU%3d HTTP/1.1
  Content-Type: text/xml
  X-WNS-Type: wns/tile
  Authorization: Bearer EgAcAQMAAAAALYAAY/c+Huwi3Fv4Ck10UrKNmtxRO6Njk2MgA=
  Host: bn1.notify.windows.com
  Content-Length: 32
  
  <tile><visual><binding template="TileSquareText03"><text id="1">Message sent from push</text></binding></visual></tile>

  Notice a few things about this message…

  • Just like the request for an access token, this is a secure post to https
  • The message is sent to the channel URI
  • You can find valid values for the Content-Type and X-WNS-Type headers here
  • The Authorization header always has that word Bearer, a space, and then the access token received from the first call
• [Step 6] WNS sends the notification to your app

  This step is all on WNS and Windows and you don't have to do anything except for verify that the process worked.

And there you have it. You can find numerous services that wrap this process for you and make it easy, but now you know the guts of what's going on under the hood. It's not exactly something you want to try to explain to your mom, but it's not exactly quantum physics either.

Question: what is Microsoft's position on Flexbox and fallbacks for IE10 and legacy?

While I'm not the official voice of Microsoft and am not the smartest Softie in Redmond when it comes to the web standards, I'll attempt to answer this question anyway.

The official standard for the flexbox style in CSS is documented in exhaustive detail at W3C. The abstract of this implement is helpful stating that the flexbox is

"…a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions."

I think the official answer is that Microsoft doesn't have an official position on falling back from flexbox. The -ms-flexbox is an implementation by the Trident engine to the flexbox… end of story. You will, however, find some recommended strategies on the web, and the best I've run into so far is the use of inline-block for unsupporting browsers.

That said, I'm spending most of my time with Windows 8 apps these days am thus spared the pain (the ever building pain that has yet to reach a crescendo) of writing 12 lines of code to accommodate the various HTML/CSS engines. If I was doing web development for the masses, I think I would decide to avoid the use of flexboxes altogether to ease my pain. I'm not sure what's worse - an old, hacky solution or multiple solutions to maintain (one of which is still old and hacky).

If you attended the Gen Appathon in Redmond last week and attended the Windows 8 Design 101 breakout session lead by Valentina and Christina, you know that they promised slides, and here they are: http://www.slideshare.net/valeaseattle/windows-8-design-101

A big thanks to both Valentina and Christina for delivering excellent design content at a time when good design is more important than ever.

It's was a big day in Building 33 as 100 or so people gathered to write Windows 8 apps, compete for prizes, and hopefully learn a little something along the way. One of the things attendees learned was that Microsoft Learning (MSL) is really rockin' the Microsoft certifications lately. Paul Lee joined us at the hackathon to talk about the state of Microsoft certifications. They have tracks that based on software solutions and the technologies a developer would use to create them.

The one I'm excited about is the MCSD: Windows Store Apps - HTML5. Which you can earn if you take the 70-480, 70-481, and 70-482 exams. And actually, the first of those exams is free (for now) if you go to http://www.register.prometric.com to schedule your exam and use HTMLJMP as your promo code. If you want help studying for 70-480 and 70-481, you can take a look at the JumpStart videos that Michael Palermo and I recorded at http://aka.ms/jump480 and http://aka.ms/jump481.

Attached are the slides that Paul presented.

HackathonOffer.pptx (429.56 kb)

Don't miss the box-sizing property in CSS. It's important. I'll tell you why.

Let me start by showing you a diagram of the HTML box model.

Let's talk about a div, for example. If you create a div and then use CSS to assign some margin, a border, and some padding as well as the content that you include within the div element, you would end up with something that looks like the image above. Most people with some HTML and CSS experience are very familiar with this.

When you set the size (width or height) of that div using CSS, the size values that you specify apply in an… um… interesting way. The size values apply to the content area. That's a little bizarre, because in real life (the one we're all familiar with) when we talk about the size of a box of stuff, we are talking about the size of the outside of the box.

This is a problem because if you want to set an element to the width of the screen and you use width:100%, even that 100% does not include the padding, border, and margin, so if you have any of those then your box will run off the edge of the screen.

You can change this behavior though with a simple CSS property. If you set box-sizing to border-box (instead of the default content-box), then the same value of 100% for your div's width will now include the border and padding. It will still not include the margin, by the way.

Hope that helps.

This is my first post from Microsoft Word. I've been using Live Writer for quite some time, but who knows what the future holds.

I’ve learned a lot from Stephen Walther, so I’m excited that his book on Windows 8 Apps with HTML and JavaScript Unleashed is available for pre-order. Save 40% through the end of November. If you see a lot of Windows 8 and a lot of JavaScript down the road like I do, you’ll want to learn everything Stephen knows about it.

Here’s a tidbit that is easy to miss if you’re not looking for it.

If your user has snapped your app, but then they take an action in your app that gives you reason to attempt to get back out of snap mode, you can do so by calling…

Windows.UI.ViewManagement.ApplicationView.tryUnsnap();

This method returns  a value of true if it has successfully been unsnapped or false if it was not able to. It’s only going to unsnap for you if your app is in the foreground.

I’m using this method in my codeSHOW project. If the user snaps codeSHOW and then attempts to browse to one of the demos, then codeSHOW will unsnap itself to allow that demo to run full screen.

Hope that helps.

*** See important comment from Jerry Nixon below: the tryUnsnap() method will not work if it's called from code that is not user initiated. Thanks, Jerry. ***

If you’re anywhere close to Redmond, Washington, you’ve got to attend the Gen Appathon! It’s on November 9 in Building 33 on the Microsoft Campus. It’s going to be a big hackathon with great prizes and we’re going to have a lot of experts in the room helping you with Windows 8 and Windows Phone 8 apps!

Get all the information you need and register at https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032532285

See you there!