Building apps? This is the stuff about that
09 Oct 2013

Rangers Treasure Map v2.1: Snap re-invented

ScreenGrab (1)As part of my work on the Microsoft ALM Rangers Treasure Map, I want to share about how we changed snap for the 2.1 release.

Why?

The first question, is why do we need to change snap for 2.1? The requirement is that 2.1 is primarily focused on supporting Windows 8.1 & Windows 8.1 does snap a little differently to how Windows 8 handled snap. In short, in Windows 8 you had snap (fixed width), a full screen and third “middle” state – however Windows 8.1, has full screen and then any value between that down to a minimum width.

ScreenGrab (2)Microsoft has written a great document covering what is new at: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx

Planning

Step one in doing this was to investigate what we had – so I just took the app and ran it on Windows 8.1 and played with the new snap experience. From that I took screenshots, made annotations etc… for us to decide on an approach. You can see these images along the side/bottom of this post.

Decisions

ScreenGrab (3)Since this is a minor release for us, the decision to not invest too much into this release was made. So we decided not to try and build something brand new but rather make sure everything works as it does currently.

To this we chose a minimum of 320 pixels (the default in 8.1 is 500) since that matched what we had in Windows  8.

Code

One of the choices we made in version 1, was to NOT use the out of the box state manager way to change the UI. You can find out more about how we implemented that in a video I did for Channel 9ScreenGrab (4):

ScreenGrab (5)

So what did the code changes look like for with our model? In the image below you can see that rather than ask what state we are in (line 142 on the left) we rather just check the screen width and based on that we load the correct namespace.

This tiny change was all that was needed, and this was made successful because we decoupled the views from the start rather than trying to have one view that does everything using the visual state manager.

image

24 Jul 2013

Windows Store App Logo Pack

Clipboard01When I develop a Windows Store app, one of the core things you need to do worry about is all the logo’s, splash screens, file icons & lock screen badges. It can be a pain to create these every time – so I have created a logo pack which provides you with ALL thirty three (33) of the images you need.

These images all (but 3 – for badges) have a bright pink background making it easy to see which of your logo’s are using these original place holders compared  to those you have updated. They also contain the details (type, dimensions & scale) on them, so you can easily see when one is being used. The three that are for badges are monochromatic as that is a requirement for the badge logos.

The idea is you will use them as place holders for your real logo’s and also as a set you can provide to your designer or graphic artist who now has a base to work with and doesn’t need to figure it out themselves.

The usage of the logo’s is totally free and there is no rights on there usage, so GO WILD! You can download the logo pack below the video, which gives you a quick tutorial on how to use these.

 

Clipboard02Clipboard03Clipboard04

AttachmentSize
Package icon Windows Store App Logo Pack 80.42 KB
11 Jul 2013

Amazing Lock Screen + Windows 8.1

When the Windows 8.1 Preview came out a few weeks ago I was in no place to test it, because I needed my machine stable for a bunch of conferences I was speaking at. However that didn’t stop a lot of amazing users of the Amazing Lock Screen app, trying it out & finding it did not work!

Since then I have gotten VS 2013 & Windows 8.1 and started to dig into the issue which has confused me for DAYS on end – but yesterday I found out that Microsoft have acknowledged there is a bug in lock screens with Windows 8.1. It is this bug directly breaks Amazing Lock Screen’s ability to changed the lock screen.

Unfortunately until Microsoft issues a patch or the RTM comes out there is very little I can do to correct the issue. This bug is NOT stopping development on the Amazing Lock Screen though & the next release will be the biggest release in a long time with a couple of brand new features in it!

In summary: There is a bug in the OS, Microsoft will fix the bug, the app is still being worked on, is not forgotten & will work on Windows 8.1 in the near future!

02 Jul 2013

Presentation Dump: End of 2012 & First half of 2013 - POPI, JavaScript, Open Source & .NET 4.5 Async

It has been an entire year since my last presentation dump, so following that tradition – here are some of the talks I gave in the last year that were not immediately available:

Protection of Personal Information Bill (POPI)

Description

A short presentation that focuses on the proposed POPI law, how it impacts businesses, technology, IT depts & the cloud. It was based on a draft so some aspects may have changed.

Thoughts

This was a tough talk for me, because the law isn’t something I spend much time focusing on. I spent a lot of time reading the bill & analysis for it and really was impressed how approachable all of it is. This is definitely a law we need to be aware of, but for most companies (who do things correctly now) it will mean either no changes or a slight update to some documents.

Open Source Licensing

Description

This talk focuses on what open source licensing is, how it should be applied inside & outside companies. It also looks at how Open Source != Free.

Thoughts

This talk looks at how open source licensing works & more importantly how it applies to company projects. Once again a bit of legal focus but very valuable info in it!

JavaScript Toolkit

Description

This presentation provides a quick glance at a number of tools that make development with JavaScript easy, quick & bug free. Loads of tools & ideas in it :)

Thoughts

The JavaScript toolkit talk looks at a LOT of tools and libraries for JavaScript & as I do a lot of this day by day – it was easy to get ready & a lot of fun to present.

 

How to give a great presentation

Description

This slide deck was used to give students an overview on how to give a great presentation, especially a technical presentation. It covers aspects like purposeful movement, technology, slide creation etc....

Thoughts

This is a talk I gave to some students about how to do a great talk & it pulls a lot of my own learning’s & learning’s from experts like Hanselman into it.

.NET 4.5 Async

Description

A look at some of the complexities of .NET 4.5 Async

Thoughts

The newest talk here which covers the Async keyword. The core focus here was not on the simple scenarios but rather to dive into the more complex scenarios and areas of pain that can occur with this new keyword.

30 May 2013

From Bing to Amazing

Screenshot.12018.1000000In my sabbatical to Redmond I learnt there are two departments at Microsoft who you never want to hear from because it is never good, one being HR and the second being Legal. On the 13th May I got an email from Microsoft’s legal dept., and it wasn’t good.

Microsoft after 60 000+ downloads, almost 6 months & even getting some mail from members of the Bing team, decided that my application, Bing my lockscreen, violated their copyright (It did, I am not disputing that) and so it was to be suspended until it was fixed.

So in the last two updates I have done the process to rename a Windows Store App and I am proud to notify you that the application is now called Amazing Lock Screen & is available in the store again!

In addition to the rename, I have made two UI changes in the latest release:

  • Hero Image: The latest image is shown double the size of the previous ones & shows the image copyright text on it (similar to the Bing web site does).
  • AppBar: The AppBar (the bit at the bottom of the Window) is now hidden by default, like most other Windows Store apps. The reason for the changes is I think the users are getting used to the Windows Style so I do not need to prompt as much as when Windows 8 was launched.

28 May 2013

Windows Store app Development snack: XAMLSPY

For more posts in this series, see the series index.

xamlspuThe above video shows the great XAMLSPY tool which is a massively helpful tool when working with any XAML based application, like a Windows Store app. XAMLSpy allows you to get insights such as performance & memory usage but for me the real value is when you add it to the application you get a set of small tools to use in the app to help identify and navigate the XAML.

xamlspyOnce you have found the piece of XAML that is causing issues, you can test out your ideas in real time using the real time editor functions which really speeds up development. This is a must have tool for those who really have pride in their craft!

08 May 2013

Windows Store app Development snack: Compress your images!

For more posts in this series, see the series index.

This post is both a development snack, i.e. something I think you should know to build better Windows Store apps, as well as being part of the Treasure Map transparency, which are meant to show you how we built a real Windows Store app.

Size Matters

Lab Rat

Clipboard01In web development, there is often a concern to get the download size of the page down & there are plenty of tools to help with this (Visual Studio has a lot for CSS & JavaScript) but when we get to app development, size isn’t always as big a concern.

Windows Phone development made 20Mb an important limit, since that meant the download could go over 3G rather than requiring WiFi – this is why my Lab Rat comic book for Windows Phone is 17Mb in size. I made a very conscience choice to ensure it would fit under 20Mb.

Windows Store apps don’t have a similar limit to Windows Phone – so when I was recreating Lab Rat for Windows 8, I just went with the highest resolution images I could so it would look great. This resulted in the download being 225Mb!

Treasure Map

Clipboard02With version 1 of the treasure map, no one really thought of file size either rather focusing on making it look and feel great. Which resulted in it containing a lot of high resolution images and many of them in the JPEG format. When we shipped version 1, we shipped a 57Mb install!

Small is better

For version 2 of the treasure map, one piece of feedback we got (I believe the awesome Mike Fourie raised it) was that it was a big download. So I spent some time looking through our assets and doing some sneaky clean-up and in the process learnt a bit.

JPEG

It’s crap – use PNG. PNG is better quality and for most scenarios is smaller in file size. So in both Lab Rat & Treasure Map the first step was to replace all the JPEG images (including assets like store logo) with PNG.

If you want more info on the differences between JPEG and PNG see this amazing StackOverflow answer.

PNG 32, 24, 16, 8… oh my

Clipboard03A PNG isn’t PNG – in fact PNG’s can specify the bit depth of each of the channels they support which directly impacts how distinct colours they support. They can also allocate a specific bit in the colours to indicate transparency. However if you do not need transparency, which in the case for the bulk of Lab Rat & Treasure Map is true, you can save bit for a colour.

Very few images will have all 16 million colours that are needed, so if you identify how many unique colours there are, then you can shrink the bit depth which results in a smaller file. I did some work on this and found two pretty interesting tools:

  • TinyPNG – a free website to do this. Only downside, one file at a time.
  • PNGoo – a free Windows tool that can do bulk changes. Not as easy as the website to use though.

So I ran both Lab Rat & Treasure Map through that and we got a MASSIVE saving in disk.

  • Treasure Map went from 57Mb to (approx.) 11Mb – so a saving of 80%. The 11Mb is just a test on my machine and also includes a lot of new resources, so it may change by release.
  • Lab Rat went from 225Mb to 89Mb! So a saving of 60%!

Summary

So in summary, use PNG not JPG & make sure you compress your images before you release!

21 Apr 2013

TechEd Africa 2013: Windows Store Apps - Tips & Tricks

On Thursday I presented at TechEd Africa 2013 the third & final of my talks which was very personal in nature as I spent a lot of time talking about what I did wrong & what I wish I knew when I started building Windows Store apps. The title of the talk was Windows Store Apps – Tips & Tricks! If you click more (below) you will be able to grab the slides, demos & my demo script if you are wanting to see what I was doing.

Pages