I work at Microsoft again :)

I’m back at a new team with some old friends! I’m taking a break from mobile apps and will be rejoining the web world as a Senior Designer (dig that fancy title). I’ll still be doing front-end development, but as the title suggests, I get to focus on design as well.

We’re working on a huge project called docs.microsoft.com. The current version is just the tip of the iceberg.

I had a great time working on the wide variety of apps and websites as an independent contractor, but I’m looking forward to working on a large scale project and having someone to talk to in person besides just my dog. I love you, Penelope! Don’t forget me.

I realize my own website is woefully unused and out of date. I should fix that and get some practice on this web stuff again…

I made a Windows 10 app this weekend – Alpha Geek


I made a Windows 10 app this weekend called Alpha Geek.

The app simply takes a list of words entered via the keyboard or microphone and alphabetizes them. You can then copy the list to your clipboard, share the list or, for some crazy fun, save the list as an animated GIF.

I’m working on Windows 10 apps now that are in the process of wrapping up to ship. This little app gave me the chance to go a full round through the new Windows 10 store. I wanted pick something simple, but also try out a few of the new APIs like Speech Capture and image encoding. It was fun to make and possibly a start for some other app ideas.

Please check it out and let me know if there are any other features that might help you with your alphabetizing needs 🙂


Update Windows 10 control colors without overriding the whole template

Yesterday I needed to change the IsOn background color of a ToggleSwitch. There is no exposed property allowing you to update this color. And if you extract a copy of the default template, you’ll find that the blue color pictured below comes from a Rectangle with its Fill property bound directly to the ThemeResource “SystemControlHighlightAccentBrush”.





Frustrated that this property was not exposed, I plopped a copy of the default template into my ResourceDictionary and modified the Rectangle Fill directly. Having to deal with the stiffness of XAML templates previously, I decided to whine vent online about it  on Twitter to commiserate with others and hopefully find out that I was wrong.

Good news! I was wrong.

Thanks go to @wiredprairie for pointing out ThemeDictionaries overrides. As the title suggest you can override specific colors which will then cascade across all of the controls tied to that ThemeResource. In this case instead of adding a copy of the ToggleSwitch template, you can add the following code to your Application.

And you end up with the following updated control, averaging around 191 less lines, much less complexity and less crying.




Windows Phone 8.1 store package version change surprise – one act


This store bug has been fixed, feel free to ignore this post. More info here


Yesterday, home office

“Ok, new analytics checked in with a few error fixes, time to submit an app update for the Windows Phone app. I’ll just increment from to and Build.”

Visual Studio 

“That’s weird, I’ve never seen that before. It looks like its using the appx date driven version number and my user friendly version number.”

Try again, same result. Restart Visual Studio, same result. Restart machine, same result.

Inspect Package.StoreAssociation.xml files.

“Hmm, the landing urls in the Windows 8.1 and Windows Phone 8.1 has been updated to match, but I was able to build and update the Windows app like normal. That’s confusing.”

Research, find a thread on the MS forums declaring it as normal. Post a rebuttal.

Contact MS Support via chat. Talk to a nice guy that confirms this is the new way it’s going to be, for now, until Windows 10, maybe.

Adapt and move along.

If you run into this error apparently that’s the new way its going to be and you can’t get around it. I updated the package version using the date format “2015.703.0.0” and I am now manually storing a user friendly version for display within the app “1.1.0”. The app uploaded and the user shouldn’t notice a difference.

Next time it would be great to get some kind of notice and understand why there is a difference between Windows and Windows Phone versioning.  My guess is this is just a growing pain and a side effect of the Store union and the oncoming Windows 10 store.

To see the app that has now hit version 2015, check out Wish on Windows Phone and plain old version 1.0 on Windows.

Resizing an image with Win2D

resizing_with_win2dLast week I had the opportunity to attend Simon Tao’s talk at Build 2015 Introducing Win2D: DirectX-Powered Drawing in C# and was thankfully introduced to the power and simplicity of Win2D. It feels like a drawing surface as simple to use an HTML 5 canvas, but using DirectX and ready for Windows apps (8.1 and 10).

I’m intending to eventually try out some fun drawing experiments, but during the session the task that came to mind was opening a file on a device, resizing it and then saving the result as a new file. I was attempting to do this using WritableBitmaps, but the performance was sorely lacking.

I’ve successfully completed my first attempt at this task with Win2D and the results are great. Super fast resizing and simple C# code to understand. One option the experiment includes is to use logical dpi or actual dpi (do you want the image to be 300 wide in Length, or the image file saved at 300 pixels wide?)

Since I’m planning to do more experiments and code sharing I thought I would step into modern times and share via a github repository. You can find the ImageResize experiment for both Windows 8.1 and Windows 10 via WinGraphics.

Hello Again

Well, it sure has been awhile.

After leaving Microsoft in 2010, I have been working on a variety of interesting and normally challenging projects. I’ve been fortunate enough to learn a lot on the way, but I’ve realized I’ve been mostly holding it all in.

I normally work on smaller projects where I am the dev team or there is one or two other people involved in the work. I don’t get out to as many conferences as I used to and all the good meetings are across the lake in Seattle, not east-side where I live.

Devolving to mild hermit status with only tiny tweets and the not often enough lunch/dinner/beers with a dev friend to talk about work. Oh if only I had a blog…

But I do, right here. Sitting and waiting patiently like the dog who believes that anytime I put on socks, it must be walk-time. Why else would he be putting on socks?

Blogging though, it only happens when you have something amazing to say or perhaps a long tutorial or some impressive announcement. Enough of that thinking, that’s why nothing has been posted since February of last year.

I’ve got plenty to say that involves more than 140 characters. I spend a lot of my time learning new stuff, sometimes I still get the chance to work on undocumented stuff. I also have been working as an independent contractor for 3.5 years and have some ideas there.

The final step would be the desire to post these thoughts regularly and not just let them drown in the office. Let’s see if I can get through that and start posting…

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


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:

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.

• 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!

Watch BUILD 3-108 and read my notes if you are styling the WinJS Listview

The ListView is an integral control for developing Win 8 apps with WinJS. If you are a UI developer like myself, you will be spending a lot of time building and styling ListViews. In the Deep dive on WinJS ListView talk, Mike Mastrangelo takes us on a nice tour of the ListView control and how to bend it to your will properly.

If you don’t have 45 minutes, check out the cliff notes version read below.

– There has been a considerable amount of work written in to the control to handle touch input, virtualizing items, animation, binding, grouping, layout, etc.  Its not just drawing a bunch of flowing divs.

– Once bound, items are drawn using either Binding.Template (normally, declared in HTML) or for more complex or multiple templates based on datatype a function can be used. Check out the itemTemplate page for examples.

– Item size is determined by measuring the first item in the list and then applying that size to every other item.  If you want to override the measuring, set the custom groupInfo function for the set Layout.

– To override the default appearance in CSS, for items start with .win-item and for the ListView as a whole use .win-surface. Be sure to precede those overrides with a list or page identifier so you don’t overwrite all ListViews in your app.  For more pertinent CSS classes check out the recommended class list on MSDN.

– In order to have a ListView scrollable anywhere on the page, set the ListView and parent elements to a height and width of 100%.  Set the page header to “position:fixed” so it does not affect the ListView. And set the .win-surface margin to “200px 120px 100px 120px” to maintain proper page margins.

– If you move to a grouped ListView, be sure to adjust your left margin for .win-surface or .win-item.  The grouped CSS classes add 70px to the left by default.

– Semantic Zoom control alternates between two ListViews. The first child is the zoomed in view and the second is the zoomed out view. For easy baking, setup each ListView individually first to make sure they are working and styled properly, then wrap them in a Semantic Zoom control.

Once you get through the basics of laying out and binding the ListView, checkout the following samples for more advanced topics:

Overall the control is awesome and once you get it under control, it becomes indispensable.

Building a project skeleton, using CSS3 layout and styling WinJS controls #Win8Dev

This past week was spent turning wireframes and workflows into a moving prototype using static data. Not only does this action of sketching out the project inform architecture, but it also allows us to create the placeholders once we get the visual design.

As a bonus, a short screen cap of the prototype can be a valuable asset while the app concept is still forming in our heads.

Project Skeleton

Here’s the process I’ve been using to build the project skeleton.

Start with a Blank Project template
We want the least amount of pre-existing code. The goal is to stay slim and only add what’s needed. The other project templates are a great way to learn, but could be filled with extra cruft. The “default.html” page will act as the frame for the page fragments.

Grab the PageControlNavigator from the Grid project template
The navigator class handles navigation events, instantiating page objects and enabling the back button. Additionally you have the code in your app so its simple to customize if needed. Don’t forget to change the namespace of the class from “Application” to your namespace. Attention to detail, private.

Add pages for each full screen of your app
Using the Page Control item template, create the individual screens (I place them all in a pages folder). In order to set the initial page, add the PageControlNavigator to your default page and set the “home” property to the URL of the initial page. You can grab the code from your sample Grid app.

Embrace the existing CSS and templates
WinJS comes with very refined CSS rules, defined “ui-dark.css” and “ui-light.css” which can both be found by digging into the References folder. Become familiar with the rules applied and try to work with them and not against. You can do this by reading the files or, more targeted, by adding the elements to your page, running the application and using the DOM explorer or Blend to see all of the cascading rules applied to each element.

Another trick is to grab the header and section elements of a page, along with their CSS, from the sample Grid app as well.

The title and content layout of each page is pretty defined in Metro apps and the HTML also includes the back button which the navigator class will be looking for.

Using CSS3 layout

One of the ideas that keeps popping in my head during development is – I am doing web dev for a single browser. Of course the idealistic side of me says “What about the open web?”, but then the pragmatic side says “Hey, that’s actually pretty cool for development.”

One browser to test and you can guarantee what is going to work, including CSS layouts. All you need to is refer to the Internet Explorer 10 Dev Guide.

Looking at the example above, if you need a continuous flow of items filling up all the space available, use a Flexbox.  Need to change the order of the items? Set the direction.

Or you may have a requirement for a complex tile-based layout like the above image.  Use the Grid.  Learn the Grid, love the Grid, it is your friend.  Many layout issues can be easily sized and made adaptable by taking advantage of the Grid.

Styling the ListView and WinJS Controls

Along the same lines, one other tip I wanted to pass along is remember that the appearance of HTML elements and WinJS controls are driven by CSS.  Yes its obvious, but sometimes when you get into “control-thinking” you may take the hard road skipping the easy dandelion-laced path.

On StackOverflow a question was asked about changing the selection template of a ListView. All he wanted to do was change the selection border color and rather than updating the entire selection template, all you need to do is override a single CSS rule.

The rules to override can most easily be found by loading your application in Blend, turning on Interactive mode to change the state of your app if needed and then, in Design mode, select the element and examine the CSS Properties panel.

Further Reading

Last week I mentioned Promises as one of the main features to learn in WinJS. To learn more beyond the MSDN docs, check out Christopher Bennage’s WinJS: Unpacking Promises post. He goes into detail on chaining Promises and their results together.

Another post of note is Kirupa’s Animating with requestAnimationFrame. You no longer need to use setInterval for JavaScript-based procedural animations, it’s wonderful.

Talking about Windows 8 and WinJS on Yet Another Podcast

 Jesse Liberty was kind enough to invite me back on to his cleverly named podcast, Yet Another Podcast, to talk about the technology I’ve been focusing on lately, Windows 8 and WinJS apps.

In Jesse’s own words:

Talking with Adam Kinney, Independent Design Developer and former Microsoft Evangelist and Jon Galloway, Microsoft Technical Evangelist, about programming for Windows 8 using JavaScript, CSS3 and HTML5.

Let me know if I sound like someone actually excited, an evangelist or a clueless dolt.

Yet Another Podcast #74–Adam Kinney–Windows 8 and JavaScript and HTML5