App development

Building apps? This is the stuff about that

Rangers Treasure Map v2.1: Snap re-invented

Submitted by Robert MacLean on Wed, 10/09/2013 - 11:54

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

Windows Store App Logo Pack

Submitted by Robert MacLean on Wed, 07/24/2013 - 13:18

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

Amazing Lock Screen + Windows 8.1

Submitted by Robert MacLean on Thu, 07/11/2013 - 09:31

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!

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

Submitted by Robert MacLean on Tue, 07/02/2013 - 08:59

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.

From Bing to Amazing

Submitted by Robert MacLean on Thu, 05/30/2013 - 15:17

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.

Windows Store app Development snack: XAMLSPY

Submitted by Robert MacLean on Tue, 05/28/2013 - 09:15

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!

Windows Store app Development snack: Compress your images!

Submitted by Robert MacLean on Wed, 05/08/2013 - 14:15

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!

TechEd Africa 2013: Windows Store Apps - Tips & Tricks

Submitted by Robert MacLean on Sun, 04/21/2013 - 17:13

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.

XAML (Windows Store apps) editing in Visual Studio broken with NVIDIA Optimus

Submitted by Robert MacLean on Sun, 04/07/2013 - 21:01

I have a fancy laptop that seems to delight in giving me headaches, and the latest is to do with Windows Store app development. The problem is simple, you edit the XAML and nothing happens! You need to trigger a full redraw of the screen to get it to render the changes, the below video may explain it better:

The issue here is that my fancy laptop has two graphics cards, a low powered Intel one (great for battery – average for performance) & a high powered NVIDIA one (bad for battery – great for performance). Add to this, that it uses a new technology from NVIDIA called Optimus which allows individual parts of the screen to be rendered by each card – the best explanation of this can be found on SuperUser.

So what is the solution to this problem? Disable one of the graphics card – yeah, that is the work around at this point. I am doing this by using device manager to disable the NVIDIA one.

image

That fixes the rendering issue and allows Visual Studio to work properly. Not great by any stretch of the imagination.

Haven't I seen these presentations before?

Submitted by Robert MacLean on Tue, 04/02/2013 - 15:38

imageIn a few short weeks I will be speaking at TechEd Africa 2013 and if you have come to my talks before (previous TechEd’s, TechDays, Hogshead when I have had one too many) you may see that I am giving similar sounding content – so why should you come to these TechEd talks? What will be new and awesome? I am going to give you an honest review of what you can expect from the three talks below.

Windows Store Apps, Tips & Tricks from the field

This is a brand new talk, filled with awesome new content for people developing apps for Windows 8 today & going forward to the Windows ‘Blue’ world. Some of this is from Windows Store app Development Snack series but not all of it, especially in the architecture & tooling sections of the talk.

Note: This is not an introduction to Windows Store apps talk – I will assume the audience has some of the concepts of apps already. So for example, I will talk about background tasks but not explain what they are or where they used in any depth.

What’s new in .NET 4.5 & VS 2012

Same title as my TechDays talk and really this is the version 2 of that talk. So what can you expect different from TechDays?

  • Part 1 is very similar, in fact you could probably just watch the YouTube video of that part & get 95% of the content. I will have some new tricks, especially since we have two updates to VS available now & I have adjusted the emphasis in some places – but that is the only changes in part 1.
  • Part 2 is very different, both the WCF & LightSwitch sections are gone! LightSwitch was dropped because I have an hour long talk just on that :) WCF was dropped since the demo’s were not great and despite it being an amazing tool, the focus for the talk needs to be what’s new – and the new way for API’s is WebAPI. Do not read that as WCF is dead – hardly, just it doesn’t meet this talks requirements. This means I freed up a lot of time, so I am filling it with A LOT of new ASP.NET content. I will show you tricks & tips in ASP.NET land that will blow your mind away!

What’s new in LightSwitch

This session is vastly different my previous LightSwitch talks – we will start in roughly the same way and look at what it does however rather than 1 hour on that, we do a higher level treatment of that in 20min.  So if you never have seen LightSwitch – I am ensuring you are catered for. That is followed by a quick view of the new stuff and then finally we look to the future and the amazing new items coming down the line.

This talk is aimed at those who have never seen LightSwitch, those who have & those we are using it and want to see where it is headed – so basically everyone :)