Compiled Experience Windows Platform Development en Mon, 16 Feb 2015 20:04:45 +0000 Mon, 16 Feb 2015 20:04:45 +0000 Preventing zoom on WebView <p>In an upcoming version of <a href="">Hub Bug</a> I&#39;m using an embedded WebView to display Markdown content (yay!). This works fantastically in a desktop experience, touch however is a different experience.</p> <p>Web has some peculiarities about it&#39;s layout, it won&#39;t resize to fit it&#39;s content instead it needs to be a fixed layout and to make use of it&#39;s built in scrolling for any content larger than it&#39;s current viewport.</p> <p>We can work around this issue most of the time, however part of this scrolling comes zooming which means on touch devices the user can pinch zoom your content which usually isn&#39;t something you want with an embedded WebView.</p> <p>So how do we disable this? Initially I experimented with the <code>viewport</code> with no success.</p> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content=</span><span class="s">&quot;width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0&quot;</span><span class="nt">&gt;</span> </code></pre></div> <p>Thankfully <a href="">Marker Metro</a>&#39;s resident html/js expert <a href="">Damian Karzon</a> came to the rescue with the following css.</p> <div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">html</span> <span class="p">{</span> <span class="o">-</span><span class="n">ms</span><span class="o">-</span><span class="k">content</span><span class="o">-</span><span class="n">zooming</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <p>We now have embedded html content in the app that feels a part of the app and not that weird <em>floating on top</em>.</p> Mon, 02 Feb 2015 00:00:00 +0000 (Nigel Sampson) MVP ComCamp 2015 <p>I&#39;ll be speaking in a few weeks at an in person seminar here in Auckland called <a href=";Culture=en-AU&amp;community=0">MVP CompCamp 2015</a> on February the 10th . It&#39;s a good chance to meet and connect some of the NZ MVP&#39;s and learn some cool things on Azure and how it intersects with App development.</p> <p>You can <a href=";Culture=en-AU&amp;community=0">register here</a>, look forward to seeing you.</p> Fri, 23 Jan 2015 00:00:00 +0000 (Nigel Sampson) The nature of breaking changes <p><a href="">Caliburn.Micro</a> like most .NET open source projects these days tries to follow <a href="">Semantic Versioning</a>, it helps with Nuget and <a href="">versioning dependencies</a> and gives some measure of confidence to users of libraries updating libraries to newer versions.</p> <p>One of the major guidelines is: </p> <blockquote> <p>Increment the MAJOR version when you make incompatible API changes.</p> </blockquote> <p>which in my opinion is a very good approach and one we should strive to achieve. But what is &quot;an incompatible API change&quot; or as it&#39;s otherwise known &quot;a breaking change&quot;?</p> <p>We&#39;re looking at bringing a decent chunk of major functionality in <a href="">Caliburn.Micro</a> and want to do it in way that doesn&#39;t elicit us pushing to v10 in a few months.</p> <p>There&#39;s no hard and fast answer, if a user of your assembly depended on a bug then fixing that bug would be a breaking change for them.</p> <p>I remember reading an article from the .NET team where they had to consider changing the signature of private methods as a potential breaking change due to the use of reflection. I&#39;d consider that overkill for almost all developers. However adding extra overloads or adding optional parameters to public methods could break code that depended on reflection.</p> <p>Sometimes breaking changes can because by the interactions of different libraries, a great example from <a href="">Caliburn.Micro</a> was where we added <code>[DataContact]</code> to <code>PropertyChangedBase</code>, a fairly innocent change to allow people to serialize their view models with the out of the box serializers. What we didn&#39;t know was that <a href="">Json.NET</a> respects that property and this was a breaking change for anyone using that serializer. </p> <p>I don&#39;t think you&#39;re ever going to find a hard and fast rule about what consists a breaking change. Each change needs to be evaluated on a case by case basis and thoughts on how developer are most commonly using your libraries.</p> <p>What are your thoughts?</p> Wed, 14 Jan 2015 00:00:00 +0000 (Nigel Sampson) Goals for 2015 <p>I find it&#39;s a good idea to set out my goals for the year so I can look back and see how I&#39;ve done. Last year was mostly about survival with the arrival of my daughter, hopefully this year I can really get back into it.</p> <p>When setting goals like this I feel they should be really high level and more about direction than finite end goals. I heard a great quote a few nights ago from Claudia Batten that sums it up beautifully.</p> <blockquote> <p>We think that we&#39;re here and we want to be there and we expect a straight line. If we expect a straight line the disappointments that we get when that doesn&#39;t come feel like failures and they feel like points where we want to give up.</p> </blockquote> <h3>Goals</h3> <ol> <li><a href="">F#</a> - It&#39;s always a good thing for a developer to learn a new language, especially when it&#39;s in a different paradigm that what you work with every day. While I can read / understand F# actually building software with it is certainly a goal. I can see a real space building the core logic of an app in F# and the UI in C#. Will have to see how well this works.<br></li> <li><a href="">Xamarin</a> - Experimenting more with this, potentially adding <a href="">Caliburn.Micro</a> support and generally just broadening my experience in mobile app development.</li> <li><a href="">Functional Reactive Programming</a> - Apps are becoming increasingly complicated and we need something to help deal with this. A lot of the concepts in <a href="">Reactive UI</a> appeal to me, part of this will be looking at ways to better integrate the features of <a href="">Caliburn.Micro</a> I love into this as well.</li> <li><a href="">Hub Bug for Windows 10</a> - I&#39;ve been working on a design refresh plus foundations for new features for Hub Bug that I&#39;ll probably hold off on till use whatever new features are coming in Windows 10 (if applicable). </li> <li>More Posts - Every blog author pretty much has this goal, I usually start strong but fade off near the end of a year.</li> <li>Speaking - Last year had more public speaking than any other point in my career and I&#39;m starting to get a taste for it (a Toastmasters course we held at Marker Metro certainly helped), I hope to continue with this and maybe try and speak somewhere outside of New Zealand.</li> </ol> <p>So that&#39;s the plan for 2015, I think there&#39;s a consistent theme across all the goals and a broad direction rather than just a straight line.</p> <p>Here&#39;s a to great 2015 for everyone.</p> Wed, 07 Jan 2015 00:00:00 +0000 (Nigel Sampson) Renewed MVP 2015 <p>Really pleased to declare I&#39;ve been re-awarded the Microsoft MVP for 2015 in Windows Platform development. I&#39;ve a big year planned which I hope to share with you all soon.</p> <p>Here&#39;s to a successful 2015.</p> Mon, 05 Jan 2015 00:00:00 +0000 (Nigel Sampson) Turning good apps into great ones <p>Last week I did a talk for the <a href="">Microsoft Student Accelerator</a> on the little things that turn good apps into great ones.</p> <p>I&#39;ve had requests for the slides which are below.</p> <iframe src="" width="402" height="327" frameborder="0" scrolling="no"></iframe> Wed, 26 Nov 2014 00:00:00 +0000 (Nigel Sampson) Spectrum <p>Another week, another open source project, introducing <a href=""><strong>Spectrum</strong></a>.</p> <h3>What is it?</h3> <p>Spectrum is a library to manipulate colours in the .NET framework, specifically in the RGB, HSL and HSV colour spaces.</p> <p>It&#39;s currently not designed to the be all and end all in terms of colour but more to assist developers in building harmonious colour schemes for their applications.</p> <p>It exists as two parts:</p> <ol> <li><strong>Spectrum</strong> is the core library that contains the classes you&#39;d expect in a library such as this. It&#39;s a portable class library covering all the major platforms (math is very portable).</li> <li><strong>Spectrum.Universal</strong> is the interesting part and is where I hope to extend most of all, it&#39;s a playground for how we can use colour space calculations in our apps. It&#39;s portable across Windows 8 and Windows Phone 8.1.</li> </ol> <h3>How does it work?</h3> <p>The core Spectrum library has only three classes <code>Color.RGB</code>, <code>Color.HSL</code> and <code>Color.HSV</code>, these naturally have methods to convert between themselves.</p> <div class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="kt">var</span> <span class="n">accent</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Color</span><span class="p">.</span><span class="n">RGB</span><span class="p">(</span><span class="m">240</span><span class="p">,</span> <span class="m">150</span><span class="p">,</span> <span class="m">9</span><span class="p">);</span> <span class="kt">var</span> <span class="n">hsl</span> <span class="p">=</span> <span class="n">accent</span><span class="p">.</span><span class="n">ToHSL</span><span class="p">();</span> <span class="n">Assert</span><span class="p">.</span><span class="n">AreEqual</span><span class="p">(</span><span class="k">new</span> <span class="n">Color</span><span class="p">.</span><span class="n">HSL</span><span class="p">(</span><span class="m">36.6</span><span class="p">,</span> <span class="m">0.928</span><span class="p">,</span> <span class="m">0.488</span><span class="p">),</span> <span class="n">hsl</span><span class="p">);</span> </code></pre></div> <p>The <code>Color.HSL</code> class has number of helper methods to create other related colours.</p> <div class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="kt">var</span> <span class="n">hsl</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Color</span><span class="p">.</span><span class="n">HSL</span><span class="p">(</span><span class="m">90</span><span class="p">,</span> <span class="m">0.5</span><span class="p">,</span> <span class="m">0.5</span><span class="p">);</span> <span class="kt">var</span> <span class="n">compliment</span> <span class="p">=</span> <span class="n">hsl</span><span class="p">.</span><span class="n">ShiftHue</span><span class="p">(</span><span class="m">180.0d</span><span class="p">);</span> <span class="kt">var</span> <span class="n">analogous</span> <span class="p">=</span> <span class="n">hsl</span><span class="p">.</span><span class="n">GetAnalogous</span><span class="p">();</span> </code></pre></div> <p>It gets more interesting when we start to use <strong>Spectrum.Universal</strong>. This contains a few Xaml Value Converters that can shift between <code>Windows.UI.Color</code> instances for us.</p> <p>Given resource declarations like the following:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;converters:ComplimentConverter</span> <span class="na">x:Key=</span><span class="s">&quot;Compliment&quot;</span> <span class="nt">/&gt;</span> <span class="nt">&lt;converters:ShiftLightnessConverter</span> <span class="na">x:Key=</span><span class="s">&quot;ShiftLightness&quot;</span> <span class="nt">/&gt;</span> <span class="nt">&lt;converters:ShiftHueConverter</span> <span class="na">x:Key=</span><span class="s">&quot;ShiftHue&quot;</span> <span class="nt">/&gt;</span> </code></pre></div> <p>and our base accent colour:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;Color</span> <span class="na">x:Key=</span><span class="s">&quot;AccentColor&quot;</span><span class="nt">&gt;</span>#FF0088D1<span class="nt">&lt;/Color&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;AccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource AccentColor}&quot;</span><span class="nt">/&gt;</span> </code></pre></div> <p>We can create lighter and darker versions of that same colour using</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;LightenedAccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{Binding </span> <span class="s"> Source={StaticResource AccentColor}, </span> <span class="s"> Converter={StaticResource ShiftLightness}, </span> <span class="s"> ConverterParameter=0.3}&quot;</span><span class="nt">/&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;DarkenedAccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{Binding </span> <span class="s"> Source={StaticResource AccentColor}, </span> <span class="s"> Converter={StaticResource ShiftLightness}, </span> <span class="s"> ConverterParameter=-0.3}&quot;</span><span class="nt">/&gt;</span> </code></pre></div> <p>as well as create a minor accent colour</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;SecondaryAccentBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{Binding </span> <span class="s"> Source={StaticResource AccentColor}, </span> <span class="s"> Converter={StaticResource ShiftHue}, </span> <span class="s"> ConverterParameter=-120}&quot;</span><span class="nt">/&gt;</span> </code></pre></div> <p>We can now manage an app&#39;s full palatte of colour resources by tweaking a few base colours.</p> <h3>Where I can get this?</h3> <p>Source is on <a href="">GitHub</a>, and is also on <a href="">Nuget</a>.</p> Fri, 24 Oct 2014 00:00:00 +0000 (Nigel Sampson) Octokit.Caching <p>A few months ago I tweeted about a new open source project <a href=""><strong>Octokit.Caching</strong></a> but completely forgot do any more announcing.</p> <blockquote class="twitter-tweet" lang="en"><p>Simple etag caching for Octokit <a href=""></a> cc <a href="">@shiftkey</a> <a href="">@haacked</a></p>&mdash; Nigel Sampson (@nigelsampson) <a href="">July 5, 2014</a></blockquote> <script async src="//" charset="utf-8"></script> <h3>What does it do?</h3> <p>It&#39;s a compact library designed to add simple caching to <a href="">Octokit.NET</a> a GitHub API client library for .NET. It maintains an internal cache of all requests and responses to and from the GitHub API. </p> <p>If you make a request where a cached response is already available then it appends the <code>If-None-Match</code> header with the cached <a href="">etag</a>.</p> <p>If the server returns a <code>304 Not Modified</code> then we return the cached response, otherwise we return the new response while modifying the cache.</p> <h3>Where&#39;s the cache?</h3> <p><a href="">Octokit.Caching</a> comes with an interface <code>ICache</code> and a default implementation <code>NaiveInMemoryCache</code></p> <div class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">public</span> <span class="k">interface</span> <span class="n">ICache</span> <span class="p">{</span> <span class="n">Task</span><span class="p">&lt;</span><span class="n">T</span><span class="p">&gt;</span> <span class="n">GetAsync</span><span class="p">&lt;</span><span class="n">T</span><span class="p">&gt;(</span><span class="kt">string</span> <span class="n">key</span><span class="p">);</span> <span class="n">Task</span> <span class="n">SetAsync</span><span class="p">&lt;</span><span class="n">T</span><span class="p">&gt;(</span><span class="kt">string</span> <span class="n">key</span><span class="p">,</span> <span class="n">T</span> <span class="k">value</span><span class="p">);</span> <span class="n">Task</span> <span class="nf">ClearAsync</span><span class="p">();</span> <span class="p">}</span> </code></pre></div> <p>It&#39;s built for you to extend easily with something like <a href="">Akavache</a>.</p> <h3>Where can I get it?</h3> <p>The source is available on <a href="">Github</a> and is available on <a href="">nuget</a>.</p> Tue, 21 Oct 2014 00:00:00 +0000 (Nigel Sampson) Save time creating your application palette <p>A few months ago I wrote a post on <a href="/blog/posts/colour-palette/">building a colour palette for your app</a>, one thing I recommended is creating both the colour and brush resources for each colour separately, like so:</p> <div class="highlight"><pre><code class="language-xml" data-lang="xml"><span class="nt">&lt;Color</span> <span class="na">x:Key=</span><span class="s">&quot;PlaceholderColor&quot;</span><span class="nt">&gt;</span>#FFEBEBEB<span class="nt">&lt;/Color&gt;</span> <span class="nt">&lt;SolidColorBrush</span> <span class="na">x:Key=</span><span class="s">&quot;PlaceholderBrush&quot;</span> <span class="na">Color=</span><span class="s">&quot;{StaticResource PlaceholderColor}&quot;</span> <span class="nt">/&gt;</span> </code></pre></div> <p>Large apps can contain a lot of colours once you start including all the shades and tints of your primary colours and creating all these resources can a bit of a tiresome task.</p> <p>Thankfully we can make use of regular expressions (gasp!) to save some time in Visual Studio. </p> <ol> <li>Create all your colour resources</li> <li>Copy and paste them below the originals and select the copies</li> <li>Open Visual Studio&#39;s <strong>Replace in Files</strong> (Ctrl + Shift + F for me)</li> <li>Under <strong>Find options</strong> select Use Regular Expressions</li> <li>Set <strong>Look in:</strong> to Selection</li> <li>Set <strong>Find what</strong> to <code>&lt;Color x:Key=&quot;(?&lt;name&gt;\w+)Color&quot;&gt;#\w+&lt;/Color&gt;</code></li> <li>Set <strong>Replace with</strong> to <code>&lt;SolidColorBrush x:Key=&quot;${name}Brush&quot; Color=&quot;{StaticResource ${name}Color}&quot;/&gt;</code></li> <li>Hit <strong>Replace All</strong></li> </ol> <p>Hopefully this can save you a bit of time building your app or at least teach you what you can do with Visual Studio to save yourself some time.</p> Fri, 17 Oct 2014 00:00:00 +0000 (Nigel Sampson) My Favourite Visual Studio Extensions <p>A week or so ago I came across a post from <a href="">Scott Dorman</a> on his favuorite Visual Studio extensions and thought I&#39;d create mine.</p> <p>Initially I thought it would be a rather long list, but it turns out the out of the box experience is pretty good for me with a few changes.</p> <p>Here&#39;s my list (in no particular order).</p> <h3><a href="">Reference Extension SDK Locally</a></h3> <p>This was built by <a href="">Pete Goodman</a> while at [Marker Metro(, it takes a global reference to a Visual Studio SDK and turns into a local reference.</p> <p>It solves a number of problems:</p> <ul> <li>Don&#39;t have a laundry list of SDK&#39;s to install to build the project for new developers.</li> <li>Eases the pain on the build server not requiring SDK&#39;s to be installed.</li> <li>Allows different projects to reference different versions of the SDK.</li> </ul> <h3><a href="">Nuget</a></h3> <p>The go to package manage for .net, can&#39;t say much more than that.</p> <h3><a href="">Xaml Spy</a></h3> <p>Great tool for finding out why your xaml layouts aren&#39;t pixel perfect which I think is one of the things that makes good apps into great apps.</p> <h3><a href="">Resharper</a></h3> <p>This is the extension I can&#39;t live without, it&#39;s the one I install directly after Visual Studio and feel absolutely useless without it.</p> Tue, 14 Oct 2014 00:00:00 +0000 (Nigel Sampson)